Standardize desktop topbar widgets to match CRM layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-23 18:16:44 +00:00
parent 6ba9d7ba2d
commit b0cc71e541
3 changed files with 75 additions and 48 deletions
@@ -0,0 +1,24 @@
+{{-- Account switcher (desktop) — only when the user belongs to more than one account. --}}
+@if (isset($accessibleAccounts) && $accessibleAccounts->count() > 1)
+    <div x-data="{ accountSwitcherOpen: false }" @click.outside="accountSwitcherOpen = false" class="relative hidden lg:block">
+        <button type="button" @click="accountSwitcherOpen = !accountSwitcherOpen"
+                class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
+            <span class="max-w-[140px] truncate">{{ $actingAccount->name ?? $actingAccount->email }}</span>
+            <svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19 9-7 7-7-7"/></svg>
+        </button>
+        <div x-show="accountSwitcherOpen" x-cloak x-transition
+             class="absolute right-0 z-30 mt-2 w-60 rounded-xl border border-slate-200 bg-white p-1 shadow-lg">
+            <p class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400">Switch account</p>
+            @foreach ($accessibleAccounts as $acctOption)
+                <form method="POST" action="{{ route('account.switch') }}">
+                    @csrf
+                    <input type="hidden" name="account" value="{{ $acctOption->id }}">
+                    <button type="submit" class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-50 {{ $acctOption->id === $actingAccount->id ? 'font-semibold text-indigo-700' : 'text-slate-700' }}">
+                        <span class="truncate">{{ $acctOption->id === auth()->id() ? 'My account' : ($acctOption->name ?? $acctOption->email) }}</span>
+                        @if ($acctOption->id === $actingAccount->id)<span class="text-indigo-600">✓</span>@endif
+                    </button>
+                </form>
+            @endforeach
+        </div>
+    </div>
+@endif
@@ -0,0 +1,44 @@
+{{--
+  Standard desktop top-right widgets (CRM / Invoice layout):
+  Afia → notifications → launcher → divider → avatar dropdown.
+--}}
+@php
+    $topbarUser = $user ?? auth()->user();
+    $initials = collect(explode(' ', trim((string) $topbarUser?->name)))
+        ->filter()->take(2)->map(fn ($p) => strtoupper(substr($p, 0, 1)))->implode('');
+    $avatarUrl = $topbarUser && method_exists($topbarUser, 'avatarUrl')
+        ? $topbarUser->avatarUrl()
+        : ($topbarUser?->avatar_url ?? null);
+    $showUserHeader = $showUser ?? true;
+@endphp
+
+@includeIf('partials.afia-button', ['compact' => true])
+
+@includeIf('partials.notification-dropdown')
+
+@include('partials.launcher')
+
+@includeIf('partials.topbar-widgets-mid')
+
+<div class="hidden h-8 w-px bg-slate-200 lg:block"></div>
+
+<div class="relative" x-data="{ profileOpen: false }" @click.outside="profileOpen = false" @keydown.escape.window="profileOpen = false">
+    <button type="button" @click="profileOpen = !profileOpen"
+            class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-2 py-1.5 text-slate-700 transition hover:bg-slate-50">
+        @if ($avatarUrl)
+            <img src="{{ $avatarUrl }}" alt="Avatar" class="h-8 w-8 rounded-full object-cover ring-1 ring-slate-200">
+        @else
+            <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-xs font-semibold text-white">{{ $initials !== '' ? $initials : 'U' }}</span>
+        @endif
+        <svg class="h-4 w-4 text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19 9-7 7-7-7"/></svg>
+    </button>
+
+    <div x-show="profileOpen" x-cloak x-transition
+         class="absolute right-0 z-50 mt-2 w-64 rounded-xl border border-slate-200 bg-white shadow-lg">
+        @include('partials.user-profile-menu', [
+            'items' => \App\Support\UserProfileMenu::items($topbarUser),
+            'user' => $topbarUser,
+            'showUser' => $showUserHeader,
+        ])
+    </div>
+</div>
@@ -35,57 +35,16 @@
            </div>
        </div>
    </div>
-    <div class="flex items-center gap-2.5">
+
+    <div class="flex items-center gap-3">
        @auth
-            @include('partials.notification-dropdown')
-
-            <span class="hidden h-7 w-px bg-slate-200 lg:block"></span>
-
-            {{-- Account switcher (only when the user belongs to more than one account) --}}
-            @if (isset($accessibleAccounts) && $accessibleAccounts->count() > 1)
-                <div x-data="{ open: false }" class="relative hidden lg:block">
-                    <button @click="open = !open" class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">
-                        <span class="max-w-[120px] truncate">{{ $actingAccount->name ?? $actingAccount->email }}</span>
-                        <svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19 9-7 7-7-7"/></svg>
-                    </button>
-                    <div x-show="open" x-cloak @click.outside="open = false" class="absolute right-0 z-30 mt-2 w-60 rounded-xl border border-slate-200 bg-white p-1 shadow-lg">
-                        <p class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest text-slate-400">Switch account</p>
-                        @foreach ($accessibleAccounts as $acctOption)
-                            <form method="POST" action="{{ route('account.switch') }}">
-                                @csrf
-                                <input type="hidden" name="account" value="{{ $acctOption->id }}">
-                                <button type="submit" class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-50 {{ $acctOption->id === $actingAccount->id ? 'font-semibold text-indigo-700' : 'text-slate-700' }}">
-                                    <span class="truncate">{{ $acctOption->id === auth()->id() ? 'My account' : ($acctOption->name ?? $acctOption->email) }}</span>
-                                    @if ($acctOption->id === $actingAccount->id)<span class="text-indigo-600">✓</span>@endif
-                                </button>
-                            </form>
-                        @endforeach
-                    </div>
-                </div>
-            @endif
-
-            {{-- Profile / avatar menu (desktop; mobile uses bottom nav) --}}
-            <div class="relative hidden lg:block" x-data="{ open: false }">
-                <button type="button" @click="open = !open" class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 p-1 pr-2 text-slate-700 hover:bg-slate-50">
-                    @if ($u?->avatar_url)
-                        <img src="{{ $u->avatar_url }}" alt="" class="h-8 w-8 rounded-full object-cover ring-1 ring-slate-200">
-                    @else
-                        <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-xs font-semibold text-white">{{ strtoupper(substr($u->name ?? $u->email, 0, 1)) }}</span>
-                    @endif
-                    <svg class="h-4 w-4 text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m19 9-7 7-7-7"/></svg>
-                </button>
-                                <div x-show="open" x-cloak @click.outside="open = false"
-                     class="absolute right-0 z-50 mt-2 w-64 rounded-xl border border-slate-200 bg-white shadow-lg">
-                    @include('partials.user-profile-menu', [
-                        'items' => \App\Support\UserProfileMenu::items($u),
-                    ])
-                </div>
-            </div>
-            @include('partials.afia-button', ['compact' => true])
+            @includeIf('partials.topbar-account-switcher')
+            @includeIf('partials.topbar-widgets-prepend')
+            @include('partials.topbar-desktop-widgets', ['user' => $user ?? $u ?? auth()->user(), 'showUser' => true])
+            @includeIf('partials.topbar-widgets-append')
        @else
            <a href="{{ route('login') }}" class="btn-primary">Sign in</a>
+            @include('partials.launcher')
        @endauth
-
-        @include('partials.launcher')
    </div>
 </header>