show unread indicator next to sidebar button on small viewports

frontend/public/global.css

@@ -322,6 +322,21 @@ body {
 	color: var(--foreground-color-1);
 }
 
+/* unread indicator */
+
+.unread-indicator {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	background-color: var(--red-2);
+	padding-top: 1px;
+	padding-bottom: 1px;
+	padding-left: 0.375rem;
+	padding-right: 0.375rem;
+	border-radius: 9999px;
+	font-size: x-small;
+}
+
 /* spinner */
 
 .spinner {

frontend/src/components/ChannelTopBar.svelte

@@ -1,13 +1,17 @@
 <script>
     import { getItem } from "../storage";
-    import { overlayStore, OverlayType, showPresenceSidebar, showSidebar } from "../stores";
+    import { overlayStore, OverlayType, showPresenceSidebar, showSidebar, totalUnreadsStore } from "../stores";
 
     export let channel;
 </script>
 
 <style>
-    .menu-button {
-        margin-right: var(--space-md);
+    .tag-icon-has-sidebar-button {
+        margin-left: var(--space-md);
+    }
+
+    .tag-icon-has-sidebar-button.has-unreads {
+        margin-left: var(--space-sm);
     }
 
     .right-buttons {
@@ -18,11 +22,14 @@
 
 <div class="top-bar">
     {#if !$showSidebar || getItem("ui:showSidebarToggle")}
-        <button class="icon-button menu-button" on:click="{ () => showSidebar.set(!showSidebar.value) }" aria-label="Toggle sidebar">
+        <button class="icon-button" on:click="{ () => showSidebar.set(!showSidebar.value) }" aria-label="Toggle sidebar">
             <span class="material-icons-outlined">menu</span>
         </button>
     {/if}
-    <span class="material-icons-outlined">tag</span>
+    {#if !$showSidebar && $totalUnreadsStore > 0}
+        <span class="unread-indicator">{$totalUnreadsStore}</span>
+    {/if}
+    <span class="material-icons-outlined" class:tag-icon-has-sidebar-button="{ !$showSidebar }" class:has-unreads="{ $totalUnreadsStore > 0 }">tag</span>
     <span class="h5 top-bar-heading" on:click="{ () => overlayStore.push(OverlayType.EditChannel, {channel}) }">{ channel.name }</span>
     <div class="right-buttons">
         <button class="icon-button" on:click="{ () => showPresenceSidebar.set(!showPresenceSidebar.value) }" aria-label="Toggle user list">

frontend/src/components/Sidebar.svelte

@@ -52,19 +52,6 @@
 </div>
 
 <style>
-    .unread-indicator {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        background-color: var(--red-2);
-        padding-top: 1px;
-        padding-bottom: 1px;
-        padding-left: 0.375rem;
-        padding-right: 0.375rem;
-        border-radius: 9999px;
-        font-size: x-small;
-    }
-
     .sidebar-channel-buttons {
         flex-shrink: 0;
         margin-left: auto;

frontend/src/stores.js

@@ -674,6 +674,7 @@ export const typingStore = new TypingStore();
 export const presenceStore = new PresenceStore();
 export const unreadStore = new UnreadStore();
 export const pluginStore = new PluginStore();
+export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
 
 export const setMessageInputEvent = new Store(null, "event:setMessageInput");
 export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {
@@ -736,20 +737,23 @@ selectedChannel.on((newSelectedChannel) => {
     }
 });
 
-
-const updateTitle = () => {
+unreadStore.subscribe(() => {
     let totalUnreads = 0;
     unreadStore.value.forEach(count => totalUnreads += count);
+    totalUnreadsStore.set(totalUnreads);
+});
+
+const updateTitle = () => {
     let channelSuffix = "";
     if (selectedChannel.value && selectedChannel.value.id !== -1 && selectedChannel.value.name) {
         channelSuffix = ` | #${selectedChannel.value.name}`;
     }
 
-    if (totalUnreads > 0) {
-        window.document.title = `(${totalUnreads}) waffle${channelSuffix}`;
+    if (totalUnreadsStore.value > 0) {
+        window.document.title = `(${totalUnreadsStore.value}) waffle${channelSuffix}`;
     } else {
         window.document.title = `waffle${channelSuffix}`;
     }
 };
-unreadStore.subscribe(updateTitle);
+totalUnreadsStore.subscribe(updateTitle);
 selectedChannel.subscribe(updateTitle);