Add mobile topbar titles and show Afia on all mobile headers.

Route-based subtitle and page titles replace plain app labels in mobile topbars, and the Afia AI button is visible on mobile across topbars and mobile-page-header screens.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/components/mobile-page-header.blade.php

@@ -3,6 +3,7 @@
     'subtitle' => null,
     'backUrl' => null,
     'badge' => null,
+    'hideAfia' => false,
 ])
 
 <div class="sticky top-0 z-20 border-b border-slate-200 bg-white/95 backdrop-blur lg:hidden">
@@ -22,6 +23,9 @@
         @if ($badge)
             <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600">{{ $badge }}</span>
         @endif
+        @unless ($hideAfia)
+            @include('partials.afia-button', ['compact' => true])
+        @endunless
         {{ $actions ?? '' }}
     </div>
     {{ $slot }}

resources/views/partials/afia-button.blade.php

@@ -0,0 +1,24 @@
+@props([
+    'compact' => false,
+    'handler' => 'dispatch',
+])
+
+@auth
+    <button type="button"
+            @if ($handler === 'openAfia')
+                @click="openAfia()"
+            @else
+                @click="$dispatch('afia-open')"
+            @endif
+            @class([
+                'inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-indigo-700 via-blue-600 to-emerald-400 text-sm font-semibold text-white shadow-sm transition hover:opacity-95',
+                'h-9 w-9 px-0 lg:h-auto lg:w-auto lg:px-4 lg:py-2' => $compact,
+                'px-3 py-2 lg:px-4' => ! $compact,
+            ])
+            aria-label="Open Afia AI assistant">
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="M12 2.25c.414 0 .75.336.75.75a5.25 5.25 0 0 0 5.25 5.25.75.75 0 0 1 0 1.5A5.25 5.25 0 0 0 12.75 15a.75.75 0 0 1-1.5 0A5.25 5.25 0 0 0 6 9.75a.75.75 0 0 1 0-1.5A5.25 5.25 0 0 0 11.25 3a.75.75 0 0 1 .75-.75Zm6.75 11.25a.75.75 0 0 1 .75.75A2.25 2.25 0 0 0 21.75 16.5a.75.75 0 0 1 0 1.5A2.25 2.25 0 0 0 19.5 20.25a.75.75 0 0 1-1.5 0A2.25 2.25 0 0 0 15.75 18a.75.75 0 0 1 0-1.5A2.25 2.25 0 0 0 18 14.25a.75.75 0 0 1 .75-.75ZM5.25 14.25a.75.75 0 0 1 .75.75 3 3 0 0 0 3 3 .75.75 0 0 1 0 1.5 3 3 0 0 0-3 3 .75.75 0 0 1-1.5 0 3 3 0 0 0-3-3 .75.75 0 0 1 0-1.5 3 3 0 0 0 3-3 .75.75 0 0 1 .75-.75Z"/>
+        </svg>
+        <span @class(['sr-only lg:not-sr-only lg:inline' => $compact, 'hidden sm:inline' => ! $compact])>AI</span>
+    </button>
+@endauth

resources/views/partials/mobile-topbar-title.blade.php

@@ -0,0 +1,10 @@
+@php
+    $subtitle = $mobileTopbarSubtitle ?? null;
+    $title = $mobileTopbarTitle ?? 'Overview';
+@endphp
+<div class="min-w-0 flex-1 lg:hidden">
+    @if ($subtitle)
+        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">{{ $subtitle }}</p>
+    @endif
+    <h1 class="truncate text-base font-semibold text-slate-900">{{ $title }}</h1>
+</div>

resources/views/partials/topbar-qr.blade.php

@@ -12,7 +12,7 @@
         <button @click="sidebarOpen = !sidebarOpen" class="shrink-0 text-slate-500 hover:text-slate-700 lg:hidden">
             <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
         </button>
-        <p class="truncate text-sm font-medium text-slate-700 lg:hidden">Ladill Events</p>
+        @include('partials.mobile-topbar-title')
         <div class="relative hidden min-w-0 flex-1 max-w-md lg:block"
              x-data="topbarSearch({ searchUrl: @js(route('events.search')) })"
              @click.outside="open = false"
@@ -179,15 +179,8 @@
                 </form>
             </div>
         </div>
-
         @auth
-            <button type="button" @click="$dispatch('afia-open')"
-                    class="hidden lg:inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-indigo-700 via-blue-600 to-emerald-400 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:opacity-95">
-                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M12 2.25c.414 0 .75.336.75.75a5.25 5.25 0 0 0 5.25 5.25.75.75 0 0 1 0 1.5A5.25 5.25 0 0 0 12.75 15a.75.75 0 0 1-1.5 0A5.25 5.25 0 0 0 6 9.75a.75.75 0 0 1 0-1.5A5.25 5.25 0 0 0 11.25 3a.75.75 0 0 1 .75-.75Zm6.75 11.25a.75.75 0 0 1 .75.75A2.25 2.25 0 0 0 21.75 16.5a.75.75 0 0 1 0 1.5A2.25 2.25 0 0 0 19.5 20.25a.75.75 0 0 1-1.5 0A2.25 2.25 0 0 0 15.75 18a.75.75 0 0 1 0-1.5A2.25 2.25 0 0 0 18 14.25a.75.75 0 0 1 .75-.75ZM5.25 14.25a.75.75 0 0 1 .75.75 3 3 0 0 0 3 3 .75.75 0 0 1 0 1.5 3 3 0 0 0-3 3 .75.75 0 0 1-1.5 0 3 3 0 0 0-3-3 .75.75 0 0 1 0-1.5 3 3 0 0 0 3-3 .75.75 0 0 1 .75-.75Z"/>
-                </svg>
-                <span>AI</span>
-            </button>
+            @include('partials.afia-button', ['compact' => true])
         @endauth
 
         @include('partials.launcher')