From 674b5de2ec69ed911c7ca465225fcdfb08cf3f37 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Tue, 30 Jun 2026 09:15:38 +0100
Subject: [PATCH] ui updates for card navigation

---
 .../views/livewire/dashboard-widget.blade.php | 72 +++++++++++--------
 1 file changed, 43 insertions(+), 29 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php b/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php
index 73b7daee..63abfabf 100644
--- a/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/dashboard-widget.blade.php
@@ -141,38 +141,52 @@
                     </div>
                 </div>
             </div>
+            <details
+                class="group rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
+                dusk="recent-commits-card">
+                <summary
+                    class="-mx-4 -mt-4 mb-4 flex cursor-pointer list-none items-center justify-between gap-3 rounded-t-xl bg-violet-700 px-4 py-4 text-white marker:hidden">
+                    <div class="flex min-w-0 items-center gap-3">
+            <span
+                class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-violet-950 text-white ring-1 ring-violet-300/60 shadow-lg">
+                <i class="fa-solid fa-code-branch text-lg" aria-hidden="true"></i>
+            </span>
 
-            <div x-data="{ open: false }" class="overflow-hidden rounded-2xl border border-zinc-700 bg-gradient-to-br from-slate-950 to-slate-900 shadow-sm ring-1 ring-white/5">
-                <button type="button" x-on:click="open = ! open"
-                    class="flex w-full items-center justify-between gap-4 border-b border-white/10 px-5 py-4 text-left transition hover:bg-white/[0.04]"
-                    aria-controls="helpdesk-recent-commits-panel"
-                    x-bind:aria-expanded="open ? 'true' : 'false'">
-                    <span class="min-w-0">
-                        <span class="block text-lg font-black text-white">Recent commits</span>
-                        <span class="block text-sm text-slate-400">Latest linked Git activity.</span>
-                    </span>
-
-                    <span class="flex items-center gap-3">
-                        <a href="{{ route('helpdesk.settings') }}" wire:navigate x-on:click.stop class="hd-btn hd-btn-sm hd-btn-violet">Git setup</a>
-                        <i class="fa-solid fa-chevron-down text-slate-400 transition"
-                            x-bind:class="open ? 'rotate-180' : ''"
-                            aria-hidden="true"></i>
-                    </span>
-                </button>
-
-                <div id="helpdesk-recent-commits-panel" x-show="open" x-cloak>
-                    <div class="space-y-2 p-5">
-                        @forelse ($recentCommits as $commit)
-                            <div class="rounded-xl border border-white/10 bg-white/[0.03] p-3">
-                                <div class="font-mono text-xs text-slate-500">{{ $commit->short_hash }} · {{ $commit->repository?->name }}</div>
-                                <div class="mt-1 truncate text-sm font-semibold text-slate-100">{{ $commit->message }}</div>
-                            </div>
-                        @empty
-                            <div class="rounded-xl border border-dashed border-slate-700 p-4 text-center text-sm text-slate-500">No commits tracked yet.</div>
-                        @endforelse
+                        <div class="min-w-0">
+                            <h2 class="text-lg font-black uppercase tracking-wide">Recent commits</h2>
+                            <p class="text-xs font-semibold text-violet-100">Latest linked Git activity</p>
+                        </div>
                     </div>
+
+                    <span
+                        class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20">
+            <i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>
+        </span>
+                </summary>
+
+                <div class="mb-4 flex justify-end">
+                    <a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-violet">
+                        Git setup
+                    </a>
                 </div>
-            </div>
+
+                <div class="space-y-2">
+                    @forelse ($recentCommits as $commit)
+                        <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950">
+                            <div class="font-mono text-xs text-zinc-500 dark:text-zinc-400">
+                                {{ $commit->short_hash }} · {{ $commit->repository?->name }}
+                            </div>
+                            <div class="mt-1 truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                                {{ $commit->message }}
+                            </div>
+                        </div>
+                    @empty
+                        <div class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
+                            No commits tracked yet.
+                        </div>
+                    @endforelse
+                </div>
+            </details>
         </div>
     </div>
 </div>