Font Size: UI Setting

src/apps/settings-modal/SettingsModal.tsx

@@ -17,7 +17,7 @@ import { PreferencesTab } from '~/common/layout/optima/useOptimaLayout';
 import { useIsMobile } from '~/common/components/useMatchMedia';
 
 import { AppChatSettingsAI } from './AppChatSettingsAI';
-import { AppChatSettingsUI } from './AppChatSettingsUI';
+import { AppChatSettingsUI } from './settings-ui/AppChatSettingsUI';
 import { UxLabsSettings } from './UxLabsSettings';
 import { VoiceSettings } from './VoiceSettings';
 

src/apps/settings-modal/AppChatSettingsUI.tsx → src/apps/settings-modal/settings-ui/AppChatSettingsUI.tsx

@@ -13,6 +13,8 @@ import { useIsMobile } from '~/common/components/useMatchMedia';
 import { useOptimaLayout } from '~/common/layout/optima/useOptimaLayout';
 import { useUIPreferencesStore } from '~/common/state/store-ui';
 
+import { SettingTextSize } from './SettingTextSize';
+
 
 // configuration
 const SHOW_PURPOSE_FINDER = false;
@@ -44,13 +46,15 @@ export function AppChatSettingsUI() {
     centerMode, setCenterMode,
     doubleClickToEdit, setDoubleClickToEdit,
     enterIsNewline, setEnterIsNewline,
+    messageTextSize, setMessageTextSize,
     renderMarkdown, setRenderMarkdown,
     showPersonaFinder, setShowPersonaFinder,
     zenMode, setZenMode,
   } = useUIPreferencesStore(state => ({
     centerMode: state.centerMode, setCenterMode: state.setCenterMode,
     doubleClickToEdit: state.doubleClickToEdit, setDoubleClickToEdit: state.setDoubleClickToEdit,
     enterIsNewline: state.enterIsNewline, setEnterIsNewline: state.setEnterIsNewline,
+    messageTextSize: state.messageTextSize, setMessageTextSize: state.setMessageTextSize,
     renderMarkdown: state.renderMarkdown, setRenderMarkdown: state.setRenderMarkdown,
     showPersonaFinder: state.showPersonaFinder, setShowPersonaFinder: state.setShowPersonaFinder,
     zenMode: state.zenMode, setZenMode: state.setZenMode,
@@ -113,6 +117,8 @@ export function AppChatSettingsUI() {
       ]}
       value={zenMode} onChange={setZenMode} />
 
+    <SettingTextSize textSize={messageTextSize} onChangeTextSize={setMessageTextSize} />
+
     {!isPwa() && !isMobile && (
       <FormRadioControl
         title='Page Size'

src/apps/settings-modal/settings-ui/SettingTextSize.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Box, FormControl, IconButton, Step, Stepper } from '@mui/joy';
+
+import type { UIMessageTextSize } from '~/common/state/store-ui';
+import { FormLabelStart } from '~/common/components/forms/FormLabelStart';
+
+
+export function SettingTextSize({ textSize, onChangeTextSize }: {
+  textSize: UIMessageTextSize,
+  onChangeTextSize: (size: UIMessageTextSize) => void,
+}) {
+  return (
+    <FormControl orientation='horizontal' sx={{ justifyContent: 'space-between' }}>
+      <FormLabelStart title='Text Size'
+                      description={textSize === 'xs' ? 'Extra Small' : textSize === 'sm' ? 'Small' : 'Default'} />
+      <Stepper sx={{
+        maxWidth: 160,
+        width: '100%',
+        fontWeight: 'initial',
+        '--Step-connectorThickness': '2px',
+        '--StepIndicator-size': '2rem',
+      }}>
+        {(['xs', 'sm', 'md'] as UIMessageTextSize[]).map(sizeKey => {
+          const isActive = sizeKey === textSize;
+          return (
+            <Step
+              key={sizeKey}
+              onClick={() => onChangeTextSize(sizeKey)}
+              indicator={
+                <IconButton
+                  size='sm'
+                  variant={isActive ? 'outlined' : 'soft'}
+                  // color={isActive ? 'primary' : 'neutral'}
+                  sx={{
+                    // style
+                    fontSize: sizeKey,
+                    // borderRadius: !isActive ? '50%' : undefined,
+                    borderRadius: '50%',
+                    width: '1rem',
+                    height: '1rem',
+                    // style when active
+                    '--variant-borderWidth': '2px',
+                    borderColor: 'primary.solidBg',
+                  }}
+                >
+                  <Box>
+                    {sizeKey}
+                  </Box>
+                </IconButton>
+              }
+            />
+          );
+        })}
+      </Stepper>
+    </FormControl>
+  );
+}