From 0f5093b6bb97ee6a42c96f4bc046ac361da6befd Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Thu, 1 Dec 2022 19:19:51 +0200
Subject: [PATCH] show unread indicator next to sidebar button on small
 viewports

---
 frontend/public/global.css                   | 15 +++++++++++++++
 frontend/src/components/ChannelTopBar.svelte | 17 ++++++++++++-----
 frontend/src/components/Sidebar.svelte       | 13 -------------
 frontend/src/stores.js                       | 14 +++++++++-----
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 3bc7119..3a4fff6 100644
--- a/frontend/public/global.css
+++ b/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 {
diff --git a/frontend/src/components/ChannelTopBar.svelte b/frontend/src/components/ChannelTopBar.svelte
index 677e2db..367dff1 100644
--- a/frontend/src/components/ChannelTopBar.svelte
+++ b/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">
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index cdd2dfc..e5f6885 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/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;
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index a7a4723..e8f90ba 100644
--- a/frontend/src/stores.js
+++ b/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);