feat: allow viewer count to be hidden

frontend/src/locale/en/translation.json

@@ -259,7 +259,7 @@
     "dashboard": {
       "twitch-status": "Twitch stream status",
       "live": "Live!",
-      "x-viewers": "{{count}} viewers",
+      "x-viewers": "{{num}} viewers",
       "not-live": "Offline / Not streaming",
       "twitch-events": {
         "header": "Recent events",

frontend/src/locale/it/translation.json

@@ -143,7 +143,7 @@
       "live": "In onda!",
       "not-live": "Offline / Non in streaming",
       "twitch-status": "Stato stream Twitch",
-      "x-viewers": "{{count}} spettatori",
+      "x-viewers": "{{num}} spettatori",
       "twitch-events": {
         "anonymous": "Uno spettatore anonimo",
         "header": "Eventi recenti",

frontend/src/store/api/types.ts

@@ -151,6 +151,7 @@ export interface UISettings {
   onboardingDone: boolean;
   language: string;
   theme: string;
+  hideViewers: boolean;
 }
 
 export enum ConnectionStatus {

frontend/src/ui/pages/Dashboard.tsx

@@ -5,11 +5,13 @@ import {
   EventSubNotificationType,
   unwrapEvent,
 } from '~/lib/eventSub';
-import { useLiveKey } from '~/lib/react';
+import { useLiveKey, useModule } from '~/lib/react';
-import { useAppSelector } from '~/store';
+import { useAppDispatch, useAppSelector } from '~/store';
+import { modules } from '~/store/api/reducer';
 import { PageContainer, SectionHeader, styled, TextBlock } from '../theme';
 import BrowserLink from '../components/BrowserLink';
 import Scrollbar from '../components/utils/Scrollbar';
+import RevealLink from '../components/utils/RevealLink';
 
 interface StreamInfo {
   id: string;
@@ -370,6 +372,9 @@ function TwitchEventLog({ events }: { events: EventSubNotification[] }) {
 
 function TwitchStreamStatus({ info }: { info: StreamInfo }) {
   const { t } = useTranslation();
+  const [uiConfig, setUiConfig] = useModule(modules.uiConfig);
+  const dispatch = useAppDispatch();
+  console.log(uiConfig);
   return (
     <StreamBlock>
       <LiveIndicator
@@ -387,8 +392,15 @@ function TwitchStreamStatus({ info }: { info: StreamInfo }) {
       <StreamInfo>
         {info.game_name} -{' '}
         {t('pages.dashboard.x-viewers', {
-          count: info.viewer_count,
+          num: uiConfig.hideViewers ? '...' : `${info.viewer_count}`,
-        })}
+        })}{' '}
+        <RevealLink
+          value={!uiConfig.hideViewers}
+          setter={(newVal) => {
+            console.log(newVal);
+            void dispatch(setUiConfig({ ...uiConfig, hideViewers: !newVal }));
+          }}
+        />
       </StreamInfo>
     </StreamBlock>
   );