From b8e32db7e00399c3b74c6688e4f97c252b6e71ec Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Wed, 17 Jun 2026 11:56:44 +0100
Subject: [PATCH] ui updates for ticket layout

---
 .../views/livewire/ticket-show.blade.php      | 52 ++++++++++++++-----
 Modules/Helpdesk/changelog.yaml               | 15 ++++++
 Modules/Helpdesk/module.json                  |  2 +-
 3 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
index c852f972..4c41b92e 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
@@ -251,7 +251,7 @@
             </article>
 
             @if ($ticket->attachments->isNotEmpty())
-            <details class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" open>
+            <details class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
                 <summary class="flex cursor-pointer list-none items-center justify-between gap-5 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-7 text-white marker:hidden sm:px-9">
                     <div class="flex min-w-0 items-start gap-5">
                         <span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20 shadow-lg shadow-black/20">
@@ -448,15 +448,35 @@
                     @endif
                 @endcan
 
-                <div class="mt-5 rounded-2xl border border-dashed border-blue-300 p-5 dark:border-blue-800">
-                    <label class="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
-                        <i class="fa-solid fa-thumbtack" aria-hidden="true"></i>
-                        Pin attachments
-                        <input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
-                    </label>
-                    <span class="ml-2 text-xs font-semibold text-zinc-500" data-helpdesk-file-label>No files pinned</span>
-                    @error('attachments.*') <div class="mt-2 text-sm text-red-600">{{ $message }}</div> @enderror
-                </div>
+                <details class="mt-5 overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50/80 shadow-sm dark:border-zinc-800 dark:bg-zinc-950/40">
+                    <summary class="group flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 transition hover:bg-zinc-100/80 dark:hover:bg-zinc-900/70 [&::-webkit-details-marker]:hidden">
+                        <span class="flex min-w-0 items-center gap-3">
+                            <span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/70 dark:bg-blue-950/50 dark:text-blue-300">
+                                <i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
+                            </span>
+                            <span class="min-w-0">
+                                <span class="block text-xs font-black uppercase tracking-[0.22em] text-blue-700 dark:text-blue-300">Attachments</span>
+                                <span class="block truncate text-sm font-semibold text-zinc-600 dark:text-zinc-400">Pin screenshots, logs and supporting documents.</span>
+                            </span>
+                        </span>
+                        <span class="flex shrink-0 items-center gap-3">
+                            <span class="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-bold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200" data-helpdesk-file-count>0 files</span>
+                            <i class="fa-solid fa-chevron-down text-xs text-zinc-500 transition group-open:rotate-180" aria-hidden="true"></i>
+                        </span>
+                    </summary>
+
+                    <div class="border-t border-zinc-200 px-5 py-4 dark:border-zinc-800">
+                        <div class="flex flex-wrap items-center gap-3">
+                            <label class="inline-flex h-10 w-auto cursor-pointer items-center justify-center gap-2 rounded-xl border border-zinc-300 bg-white px-4 text-sm font-bold text-zinc-800 shadow-sm transition hover:border-blue-400 hover:text-blue-700 focus-within:ring-2 focus-within:ring-blue-400/70 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:border-blue-500 dark:hover:text-blue-300">
+                                <i class="fa-solid fa-paperclip text-xs" aria-hidden="true"></i>
+                                Choose files
+                                <input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
+                            </label>
+                            <span class="text-sm font-semibold text-zinc-500 dark:text-zinc-400" data-helpdesk-file-label>No files attached</span>
+                        </div>
+                        @error('attachments.*') <div class="mt-2 text-sm text-red-600">{{ $message }}</div> @enderror
+                    </div>
+                </details>
 
                     <div class="mt-6 flex justify-end">
                         <button dusk="post-comment" type="submit" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
@@ -589,10 +609,18 @@
                     const fileInput = event.target.closest('[data-helpdesk-file-input]');
 
                     if (fileInput) {
-                        const label = fileInput.closest('div')?.querySelector('[data-helpdesk-file-label]');
+                        const panel = fileInput.closest('details') || fileInput.closest('div');
+                        const label = panel?.querySelector('[data-helpdesk-file-label]');
+                        const badge = panel?.querySelector('[data-helpdesk-file-count]');
                         const count = fileInput.files?.length || 0;
+                        const text = count === 0 ? 'No files attached' : `${count} file${count === 1 ? '' : 's'} selected`;
+
                         if (label) {
-                            label.textContent = count === 0 ? 'No files pinned' : `${count} file${count === 1 ? '' : 's'} pinned`;
+                            label.textContent = text;
+                        }
+
+                        if (badge) {
+                            badge.textContent = `${count} file${count === 1 ? '' : 's'}`;
                         }
                     }
                 });
diff --git a/Modules/Helpdesk/changelog.yaml b/Modules/Helpdesk/changelog.yaml
index dd12f000..69917ebf 100644
--- a/Modules/Helpdesk/changelog.yaml
+++ b/Modules/Helpdesk/changelog.yaml
@@ -281,3 +281,18 @@ versions:
     - "Replaced the bright green-blue attachment banner with a consistent navy gradient, balanced icon sizing, document-style title, and professional file count badge."
     - "Improved attachment file rows with clearer spacing and a download affordance while preserving existing attachment download routes."
     - "Kept module.json version in sync with changelog.yaml."
+- version: 1.0.37
+  date: 2026-06-17
+  changes:
+    - Collapsed ticket attachment details by default to match the document response panel behaviour.
+    - Reduced the pinned attachment picker to a compact professional button with inline file status text.
+
+- version: 1.0.38
+  date: 2026-06-17
+  changes:
+    - Reworked the reply attachment picker into a compact professional collapsible attachments panel.
+    - Removed the oversized blue pin attachments button and dashed drop-zone styling.
+    - Added a neutral Choose files control, inline file status, and attachment count badge.
+    - Kept the attachment panel collapsed by default while preserving multi-file uploads for replies and nested responses.
+    - Kept module.json version in sync with changelog.yaml.
+
diff --git a/Modules/Helpdesk/module.json b/Modules/Helpdesk/module.json
index eba3194d..ed1b7e4e 100644
--- a/Modules/Helpdesk/module.json
+++ b/Modules/Helpdesk/module.json
@@ -22,5 +22,5 @@
         "Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
     ],
     "files": [],
-    "version": "1.7.4"
+    "version": "1.0.38"
 }