client: consolidate isSmallScreen to ConfigStore

client/src/javascript/app.tsx

@@ -68,17 +68,23 @@ const FloodApp: FC = observer(() => {
     );
   }, []);
 
-  const isDarkTheme = useMedia('(prefers-color-scheme: dark)');
+  const isSystemPreferDark = useMedia('(prefers-color-scheme: dark)');
   useEffect(() => {
-    ConfigStore.setSystemPreferDark(isDarkTheme);
-  }, [isDarkTheme]);
+    ConfigStore.setSystemPreferDark(isSystemPreferDark);
+  }, [isSystemPreferDark]);
+
+  // max-width here must sync with CSS
+  const isSmallScreen = useMedia('(max-width: 720px)');
+  useEffect(() => {
+    ConfigStore.setSmallScreen(isSmallScreen);
+  }, [isSmallScreen]);
 
   return (
     <Suspense fallback={<LoadingOverlay />}>
       <AsyncIntlProvider>
         <Router history={history}>
           <QueryParamProvider ReactRouterRoute={Route}>
-            <AppWrapper className={ConfigStore.preferDark ? 'dark' : undefined}>
+            <AppWrapper className={ConfigStore.isPreferDark ? 'dark' : undefined}>
               <Switch>
                 <Route path="/login" component={Login} />
                 <Route path="/overview" component={Overview} />

client/src/javascript/components/general/ListViewport.tsx

@@ -65,7 +65,7 @@ const ListViewport = forwardRef<FixedSizeList, ListViewportProps>((props: ListVi
 
   return (
     <FixedSizeList
-      className={`${className} ${ConfigStore.preferDark ? 'os-theme-light' : 'os-theme-dark'}`}
+      className={`${className} ${ConfigStore.isPreferDark ? 'os-theme-light' : 'os-theme-dark'}`}
       height={Math.max(itemSize * 30, windowHeight * 1.5)}
       itemCount={listLength}
       itemSize={itemSize}

client/src/javascript/components/modals/settings-modal/SettingsModal.tsx

@@ -1,6 +1,6 @@
 import {FC, useState} from 'react';
+import {observer} from 'mobx-react';
 import {useLingui} from '@lingui/react';
-import {useMedia} from 'react-use';
 
 import type {ClientSettings} from '@shared/types/ClientSettings';
 import type {FloodSettings} from '@shared/types/FloodSettings';
@@ -18,9 +18,8 @@ import SettingActions from '../../../actions/SettingActions';
 import UITab from './UITab';
 import UIStore from '../../../stores/UIStore';
 
-const SettingsModal: FC = () => {
+const SettingsModal: FC = observer(() => {
   const {i18n} = useLingui();
-  const isSmallScreen = useMedia('(max-width: 720px)');
 
   const [changedClientSettings, setChangedClientSettings] = useState<Partial<ClientSettings>>({});
   const [changedFloodSettings, setChangedFloodSettings] = useState<Partial<FloodSettings>>({});
@@ -123,10 +122,10 @@ const SettingsModal: FC = () => {
       ]}
       size="large"
       heading={i18n._('settings.tabs.heading')}
-      orientation={isSmallScreen ? 'horizontal' : 'vertical'}
+      orientation={ConfigStore.isSmallScreen ? 'horizontal' : 'vertical'}
       tabs={tabs}
     />
   );
-};
+});
 
 export default SettingsModal;

client/src/javascript/components/modals/torrent-details-modal/TorrentDetailsModal.tsx

@@ -1,6 +1,8 @@
 import {FC} from 'react';
+import {observer} from 'mobx-react';
 import {useLingui} from '@lingui/react';
-import {useMedia} from 'react-use';
+
+import ConfigStore from '@client/stores/ConfigStore';
 
 import Modal from '../Modal';
 import TorrentMediainfo from './TorrentMediainfo';
@@ -10,9 +12,9 @@ import TorrentHeading from './TorrentHeading';
 import TorrentPeers from './TorrentPeers';
 import TorrentTrackers from './TorrentTrackers';
 
-const TorrentDetailsModal: FC = () => {
+const TorrentDetailsModal: FC = observer(() => {
   const {i18n} = useLingui();
-  const isSmallScreen = useMedia('(max-width: 720px)');
+  const {isSmallScreen} = ConfigStore;
 
   const tabs = {
     'torrent-details': {
@@ -48,6 +50,6 @@ const TorrentDetailsModal: FC = () => {
       tabsInBody={!isSmallScreen}
     />
   );
-};
+});
 
 export default TorrentDetailsModal;

client/src/javascript/components/sidebar/ThemeSwitchButton.tsx

@@ -11,8 +11,8 @@ const ThemeSwitchButton: FC = () => {
 
   return (
     <Tooltip
-      content={i18n._(ConfigStore.preferDark ? 'sidebar.button.theme.light' : 'sidebar.button.theme.dark')}
-      onClick={() => ConfigStore.setUserPreferDark(!ConfigStore.preferDark)}
+      content={i18n._(ConfigStore.isPreferDark ? 'sidebar.button.theme.light' : 'sidebar.button.theme.dark')}
+      onClick={() => ConfigStore.setUserPreferDark(!ConfigStore.isPreferDark)}
       position="bottom"
       wrapperClassName="sidebar__action sidebar__icon-button
           sidebar__icon-button--interactive tooltip__wrapper">

client/src/javascript/stores/ConfigStore.ts

@@ -24,22 +24,28 @@ class ConfigStore {
   authMethod: AuthMethod = 'default';
   pollInterval = 2000;
 
-  systemPreferDark = false;
-  userPreferDark: boolean | null = queryUserPreferDark();
-  @computed get preferDark(): boolean {
-    return this.userPreferDark ?? this.systemPreferDark;
+  isSmallScreen = false;
+
+  isSystemPreferDark = false;
+  isUserPreferDark: boolean | null = queryUserPreferDark();
+  @computed get isPreferDark(): boolean {
+    return this.isUserPreferDark ?? this.isSystemPreferDark;
   }
 
   constructor() {
     makeAutoObservable(this);
   }
 
+  setSmallScreen(preference: boolean): void {
+    this.isSmallScreen = preference;
+  }
+
   setSystemPreferDark(preference: boolean): void {
-    this.systemPreferDark = preference;
+    this.isSystemPreferDark = preference;
   }
 
   setUserPreferDark(preference: boolean | null): void {
-    this.userPreferDark = preference;
+    this.isUserPreferDark = preference;
     if (preference == null) {
       window.localStorage.removeItem('userPreferDark');
     } else {