Finish Notifications -> Conversation

resources/views/components/topbar.blade.php

@@ -62,9 +62,19 @@
 
                 @include('components.notifications')
             </div>
-            <button class="btn">
-                <i data-lucide="mail" size="18"></i>
-            </button>
+            <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()">
+                    <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"
+                    ></span>
+                </button>
+
+                @include('components.conversations')
+            </div>
         @endif
         <button class="btn">
             <i data-lucide="settings" size="18"></i>