From ea4e1cde31366ef432c75215453e56496e3946a4 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 10:51:28 -0400
Subject: [PATCH] Show unread indicator on chat icon in VoiceWidget

---
 src/app/components/VoiceWidget.svelte | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 41664f4d..96ea123f 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {readable} from "svelte/store"
-  import {fly} from "svelte/transition"
+  import {fade, fly} from "svelte/transition"
   import {browser} from "$app/environment"
   import {goto} from "$app/navigation"
   import {page} from "$app/stores"
@@ -28,6 +28,7 @@
     type Room,
   } from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
   import {
     VoiceState,
@@ -127,6 +128,10 @@
     }
   }
 
+  const chatUnread = $derived(
+    targetRoom !== undefined && $notifications.has(makeRoomPath(targetRoom.url, targetRoom.h)),
+  )
+
   const mediaToggleClass = "center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
 </script>
 
@@ -167,10 +172,22 @@
       </button>
       {#if showVoiceLayoutToggle}
         <Button
-          data-tip="Toggle full-screen chat ↔ video (mobile) or split view (desktop)"
-          class={cx(mediaToggleClass, "shrink-0", layoutToggleActive && "text-primary")}
+          data-tip="Toggle Chat"
+          class={cx(
+            mediaToggleClass,
+            "relative shrink-0 overflow-visible",
+            layoutToggleActive && "text-primary",
+          )}
           onclick={onLayoutToggle}>
-          <Icon icon={ChatRound} size={4} />
+          <span class="relative inline-flex">
+            <Icon icon={ChatRound} size={4} />
+            {#if chatUnread}
+              <span
+                transition:fade={{duration: 150}}
+                class="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-primary ring-2 ring-base-100"
+                aria-hidden="true"></span>
+            {/if}
+          </span>
         </Button>
       {/if}
     </div>