From 7e45e1b48c382f29c2d3bd114a4751a0f6b89d51 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Fri, 6 Mar 2026 08:39:18 -0800
Subject: group chats

---
 src/components/Menu.svelte | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index 9803e7a2..b1fae7a9 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -8,7 +8,7 @@
   import PhMoonStarsBold from "virtual:icons/ph/moon-stars-bold";
   import PhSignOutBold from "virtual:icons/ph/sign-out-bold";
   import CoinosLogo from "virtual:icons/coinos/logo";
-  import { theme } from "$lib/store";
+  import { theme, unreadDMs } from "$lib/store";
   import DarkToggle from "$comp/DarkToggle.svelte";
   let { t, user, w, opacity } = $props();
 
@@ -36,8 +36,11 @@
 </script>
 
 <div use:clickOutside={hideMenu}>
-  <button class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity('/support')}" onclick={toggleMenu} aria-label="Open menu">
+  <button class="relative flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl {opacity('/support')}" onclick={toggleMenu} aria-label="Open menu">
     <PhListBold width={w > 640 ? 32 : 24} />
+    {#if $unreadDMs > 0}
+      <span class="badge-dot">{$unreadDMs > 99 ? "99+" : $unreadDMs}</span>
+    {/if}
   </button>
 
   <div
@@ -57,10 +60,13 @@
               onclick={hideMenu}
             >
               <button
-                class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
+                class="relative flex justify-center items-center font-semibold hover:opacity-80 gap-2"
               >
                 <Icon width="32" />
                 {t(key)}
+                {#if key === "nav.dm" && $unreadDMs > 0}
+                  <span class="badge-dot">{$unreadDMs > 99 ? "99+" : $unreadDMs}</span>
+                {/if}
               </button>
             </a>
           {/if}
@@ -73,3 +79,21 @@
     </a>
   </div>
 </div>
+
+<style>
+  .badge-dot {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 4px;
+    border-radius: 9px;
+    background: #f97316;
+    color: white;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 18px;
+    text-align: center;
+  }
+</style>
-- 
cgit v1.2.3