ui updates for card navigation

This commit is contained in:
Mark Gregory
2026-06-30 09:15:38 +01:00
parent 9e4cd5847b
commit 674b5de2ec
@@ -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>