From 2e364dc0169e015269316e0cd0abe193b334bacf Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 8 Sep 2023 18:35:51 +0530
Subject: [PATCH] chore: show preferences notification count bubble on mobile

---
 .../src/Domain/Status/StatusService.ts        |  2 +-
 .../Components/Footer/PreferencesButton.tsx   | 17 ++++++++
 .../NavigationMenu/NavigationMenu.tsx         | 41 ++++++++++++++-----
 .../Components/Tags/Navigation.tsx            | 10 +----
 4 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/packages/services/src/Domain/Status/StatusService.ts b/packages/services/src/Domain/Status/StatusService.ts
index a8a822450..d795b094e 100644
--- a/packages/services/src/Domain/Status/StatusService.ts
+++ b/packages/services/src/Domain/Status/StatusService.ts
@@ -7,7 +7,7 @@ import { PreferencePaneId } from '../Preferences/PreferenceId'
 
 export class StatusService extends AbstractService<StatusServiceEvent, string> implements StatusServiceInterface {
   private preferencesBubbleCounts: Record<PreferencePaneId, number> = {
-    general: 0,
+    general: 1,
     account: 0,
     security: 0,
     'home-server': 0,
diff --git a/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx b/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
index cf3a543be..3053c718d 100644
--- a/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
@@ -5,6 +5,8 @@ import { useApplication } from '../ApplicationProvider'
 import { useCommandService } from '../CommandProvider'
 import Icon from '../Icon/Icon'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
+import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import RoundIconButton from '../Button/RoundIconButton'
 
 type Props = {
   openPreferences: (openWhatsNew: boolean) => void
@@ -46,6 +48,21 @@ const PreferencesButton = ({ openPreferences }: Props) => {
     })
   }, [application.status])
 
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
+  if (isMobileScreen) {
+    return (
+      <div className="relative">
+        <RoundIconButton className="ml-2.5 bg-default" onClick={onClick} label="Go to preferences" icon="tune" />
+        {bubbleCount && (
+          <div className="absolute right-0 top-0 aspect-square -translate-y-1/2 translate-x-2 rounded-full border border-info-contrast bg-info px-2 py-0.5 text-[0.65rem] font-bold text-info-contrast">
+            {bubbleCount}
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <StyledTooltip label={`Open preferences (${shortcut})`}>
       <button onClick={onClick} className="group relative flex h-full w-8 cursor-pointer items-center justify-center">
diff --git a/packages/web/src/javascripts/Components/NavigationMenu/NavigationMenu.tsx b/packages/web/src/javascripts/Components/NavigationMenu/NavigationMenu.tsx
index 36752d4ad..a9bebdebc 100644
--- a/packages/web/src/javascripts/Components/NavigationMenu/NavigationMenu.tsx
+++ b/packages/web/src/javascripts/Components/NavigationMenu/NavigationMenu.tsx
@@ -1,22 +1,43 @@
 import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
 import useIsTabletOrMobileScreen from '@/Hooks/useIsTabletOrMobileScreen'
-import { classNames } from '@standardnotes/snjs'
+import { StatusServiceEvent, classNames } from '@standardnotes/snjs'
 import RoundIconButton from '../Button/RoundIconButton'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
+import { useState, useEffect } from 'react'
+import { useApplication } from '../ApplicationProvider'
 
 /** This button is displayed in the items list header */
 export const NavigationMenuButton = () => {
+  const application = useApplication()
   const { setPaneLayout } = useResponsiveAppPane()
-  const { isTabletOrMobile } = useIsTabletOrMobileScreen()
+  const { isTabletOrMobile, isMobile } = useIsTabletOrMobileScreen()
+
+  const [bubbleCount, setBubbleCount] = useState<string | undefined>(() =>
+    application.status.totalPreferencesBubbleCount.toString(),
+  )
+  useEffect(() => {
+    return application.status.addEventObserver((event, message) => {
+      if (event !== StatusServiceEvent.PreferencesBubbleCountChanged) {
+        return
+      }
+      setBubbleCount(message)
+    })
+  }, [application.status])
 
   return (
-    <RoundIconButton
-      className={classNames(isTabletOrMobile ? 'flex' : 'hidden', 'mr-3')}
-      onClick={() => {
-        setPaneLayout(PaneLayout.TagSelection)
-      }}
-      label="Open navigation menu"
-      icon="menu-variant"
-    />
+    <div className={classNames(isTabletOrMobile ? 'flex' : 'hidden', 'relative h-10 w-10', 'mr-3')}>
+      <RoundIconButton
+        onClick={() => {
+          setPaneLayout(PaneLayout.TagSelection)
+        }}
+        label="Open navigation menu"
+        icon="menu-variant"
+      />
+      {isMobile && bubbleCount && (
+        <div className="absolute -right-2 -top-2 aspect-square rounded-full border border-info-contrast bg-info px-2 py-0.5 text-[0.65rem] font-bold text-info-contrast">
+          {bubbleCount}
+        </div>
+      )}
+    </div>
   )
 }
diff --git a/packages/web/src/javascripts/Components/Tags/Navigation.tsx b/packages/web/src/javascripts/Components/Tags/Navigation.tsx
index fbb79ccb5..4819f06bd 100644
--- a/packages/web/src/javascripts/Components/Tags/Navigation.tsx
+++ b/packages/web/src/javascripts/Components/Tags/Navigation.tsx
@@ -16,6 +16,7 @@ import { mergeRefs } from '@/Hooks/mergeRefs'
 import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
 import QuickSettingsButton from '../Footer/QuickSettingsButton'
 import VaultSelectionButton from '../Footer/VaultSelectionButton'
+import PreferencesButton from '../Footer/PreferencesButton'
 
 type Props = {
   application: WebApplication
@@ -121,14 +122,7 @@ const Navigation = forwardRef<HTMLDivElement, Props>(({ application, className,
             icon="lock-filled"
           />
         )}
-        <RoundIconButton
-          className="ml-2.5 bg-default"
-          onClick={() => {
-            application.preferencesController.openPreferences()
-          }}
-          label="Go to preferences"
-          icon="tune"
-        />
+        <PreferencesButton openPreferences={() => application.preferencesController.openPreferences()} />
         <QuickSettingsButton application={application} isMobileNavigation />
         {application.featuresController.isEntitledToVaults() && <VaultSelectionButton isMobileNavigation />}
       </div>