chore: show preferences notification count bubble on mobile

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">