Improve topbar

app/Services/XenforoApiService.php

@@ -75,7 +75,17 @@ class XenforoApiService {
         }
 
         return Cache::remember("xf_alerts_{$userId}", 60, function() use($userId) {
-            return $this->get("alerts?page=1&cutoff=7days", $userId);
+            $result = $this->get("alerts?page=1&cutoff=7days", $userId);
+
+            if (is_array($result)) {
+                if (isset($result['alerts'])) {
+                    $result['alerts'] = collect($result['alerts'])->take(8)->all();
+                } else {
+                    $result = collect($result)->take(8)->all();
+                }
+            }
+
+            return $result;
         });
     }
 
@@ -88,7 +98,17 @@ class XenforoApiService {
     public function getConversations(int $userId): mixed
     {
         return Cache::remember("xf_conversations_{$userId}", 60, function() use($userId) {
-            return $this->get("conversations?page=1&receiver_id={$userId}", $userId);
+            $result = $this->get("conversations?page=1&receiver_id={$userId}", $userId);
+
+            if (is_array($result)) {
+                if (isset($result['conversations'])) {
+                    $result['conversations'] = collect($result['conversations'])->take(8)->all();
+                } else {
+                    $result = collect($result)->take(8)->all();
+                }
+            }
+
+            return $result;
         });
     }
 

resources/views/components/topbar.blade.php

@@ -1,6 +1,6 @@
 @php $topbarModSeparator = false; $topbarAdminSeparator = false; @endphp
 <header id="topbar">
-    <button class="mobile-toggle">
+    <button class="mobile-toggle" title="Open menu">
         <i data-lucide="menu"></i>
     </button>
 
@@ -14,7 +14,7 @@
 
     <input type="text" id="search-input" placeholder="Search" autocomplete="off">
 
-    <button type="submit" class="search-button">
+    <button type="submit" class="search-button" title="Search">
         <i data-lucide="search" size="18" color="var(--text2)"></i>
     </button>
 </form>
@@ -124,26 +124,28 @@
         @endcan
         @if( !\Auth::guest() )
             <div x-data x-init="$store.notifications.unviewed = {{ \Auth::user()->alerts_unviewed }}" style="position:relative">
-                <button type="button" class="btn" :class="{ 'active': $store.notifications.start }" @click="$store.notifications.open($el)" @click.outside="$store.notifications.close()">
+                <button type="button" class="btn" title="Notifications" :class="{ 'active': $store.notifications.start }" @click="$store.notifications.open($el)" @click.outside="$store.notifications.close()">
                     <i data-lucide="bell" size="18"></i>
                     <span
                         class="topbar-badge"
                         :class="$store.notifications.unread > 9 ? 'topbar-badge--overflow' : ''"
                         x-show="$store.notifications.unread > 0"
                         x-text="$store.notifications.unread > 99 ? '99+' : $store.notifications.unread"
+                        x-cloak
                     ></span>
                 </button>
 
                 @include('components.notifications')
             </div>
             <div x-data x-init="$store.conversations.unviewed = {{ \Auth::user()->conversations_unread }}" style="position:relative">
-                <button type="button" class="btn" :class="{ 'active': $store.conversations.start }" @click="$store.conversations.open($el)" @click.outside="$store.conversations.close()">
+                <button type="button" class="btn" title="Messages" :class="{ 'active': $store.conversations.start }" @click="$store.conversations.open($el)" @click.outside="$store.conversations.close()">
                     <i data-lucide="mail" size="18"></i>
                     <span
                         class="topbar-badge"
                         :class="$store.conversations.unread > 9 ? 'topbar-badge--overflow' : ''"
                         x-show="$store.conversations.unread > 0"
                         x-text="$store.conversations.unread > 99 ? '99+' : $store.conversations.unread"
+                        x-cloak
                     ></span>
                 </button>
 
@@ -154,6 +156,7 @@
                 <button
                     type="button"
                     class="btn"
+                    title="Settings"
                     :class="{ 'active': $store.settings.start }"
                     @click="$store.settings.open()"
                     @click.outside="$store.settings.close()"