Add setting for page zoom (#1835)

* add setting for page zoom

* parse integer in zoom change listener

* fix zoom input width

* fix null gets saved as page zoom

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -26,6 +26,30 @@ import { getMxIdLocalPart } from '../../utils/matrix';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
 
+function SystemEmojiFeature() {
+  const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
+
+  if (twitterEmoji) {
+    document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
+  } else {
+    document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
+  }
+
+  return null;
+}
+
+function PageZoomFeature() {
+  const [pageZoom] = useSetting(settingsAtom, 'pageZoom');
+
+  if (pageZoom === 100) {
+    document.documentElement.style.removeProperty('font-size');
+  } else {
+    document.documentElement.style.setProperty('font-size', `calc(1em * ${pageZoom / 100})`);
+  }
+
+  return null;
+}
+
 function FaviconUpdater() {
   const roomToUnread = useAtomValue(roomToUnreadAtom);
 
@@ -233,6 +257,8 @@ type ClientNonUIFeaturesProps = {
 export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
   return (
     <>
+      <SystemEmojiFeature />
+      <PageZoomFeature />
       <FaviconUpdater />
       <InviteNotifications />
       <MessageNotifications />

src/app/pages/client/ClientRoot.tsx

@@ -32,25 +32,11 @@ import { SpecVersions } from './SpecVersions';
 import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
-import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useSyncState } from '../../hooks/useSyncState';
 import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 
-function SystemEmojiFeature() {
-  const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
-
-  if (twitterEmoji) {
-    document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
-  } else {
-    document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
-  }
-
-  return null;
-}
-
 function ClientRootLoading() {
   return (
     <SplashScreen>
@@ -198,7 +184,7 @@ export function ClientRoot({ children }: ClientRootProps) {
                 {startState.status === AsyncStatus.Error && (
                   <Text>{`Failed to load. ${startState.error.message}`}</Text>
                 )}
-                <Button variant="Critical" onClick={loadMatrix}>
+                <Button variant="Critical" onClick={mx ? () => startMatrix(mx) : loadMatrix}>
                   <Text as="span" size="B400">
                     Retry
                   </Text>
@@ -220,7 +206,6 @@ export function ClientRoot({ children }: ClientRootProps) {
                   <Windows />
                   <Dialogs />
                   <ReusableContextMenu />
-                  <SystemEmojiFeature />
                 </MediaConfigProvider>
               </CapabilitiesProvider>
             )}