Temporary Font Size Changer (small, medium, large - small by default)

src/App.tsx

@@ -12,6 +12,7 @@ import ApiPopup from '@components/ApiPopup';
 import Toast from '@components/Toast';
 
 import { initaliseModelData, modelOptions, defaultModel } from '@constants/chat';
+import { FontSize } from '@type/font-size';
 
 function App()
 {
@@ -20,6 +21,7 @@ function App()
   const initialiseNewChat = useInitialiseNewChat();
   const setChats = useStore((state) => state.setChats);
   const setTheme = useStore((state) => state.setTheme);
+  const setFontSize = useStore((state) => state.setFontSize);
   const setApiKey = useStore((state) => state.setApiKey);
   const setCurrentChatIndex = useStore((state) => state.setCurrentChatIndex);
 
@@ -70,6 +72,7 @@ function App()
     const oldChats = localStorage.getItem('chats');
     const apiKey = localStorage.getItem('apiKey');
     const theme = localStorage.getItem('theme');
+    const fontSize = localStorage.getItem('fontSize');
 
     if (apiKey)
     {
@@ -85,6 +88,13 @@ function App()
       localStorage.removeItem('theme');
     }
 
+    if (fontSize)
+    {
+      // legacy local storage
+      setFontSize(fontSize as FontSize);
+      localStorage.removeItem('fontSize');
+    }
+
     if (oldChats)
     {
       // legacy local storage

src/components/Menu/MenuOptions/FontSizeChanger.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import useStore from '@store/store';
+import { FontSize } from '@type/font-size';
+
+const FontSizeChanger = () => {
+  const { t } = useTranslation();
+  const fontSize = useStore((state) => state.fontSize);
+  const setFontSize = useStore((state) => state.setFontSize);
+
+  const changeFontSize = (fontSize: FontSize) => {
+    setFontSize(fontSize);
+  };
+
+  useEffect(() => {
+    document.documentElement.setAttribute('font-size', fontSize);
+  }, [fontSize]);
+
+  return fontSize ? (
+    <select
+      className='items-center gap-3 btn btn-neutral'
+      aria-label='change font size'
+      onChange={(e) => changeFontSize(e.target.value as FontSize)}
+      value={fontSize}
+    >  
+      <option value='sm'>Small</option>
+      <option value='md'>Medium</option>
+      <option value='lg'>Large</option>
+    </select>
+  ) : (
+    <></>
+  );
+};
+
+export default FontSizeChanger;

src/components/SettingsMenu/SettingsMenu.tsx

@@ -6,6 +6,7 @@ import useCloudAuthStore from '@store/cloud-auth-store';
 import PopupModal from '@components/PopupModal';
 import SettingIcon from '@icon/SettingIcon';
 import ThemeSwitcher from '@components/Menu/MenuOptions/ThemeSwitcher';
+import FontSizeChanger from '@components/Menu/MenuOptions/FontSizeChanger';
 import LanguageSelector from '@components/LanguageSelector';
 import AutoTitleToggle from './AutoTitleToggle';
 import AdvancedModeToggle from './AdvencedModeToggle';
@@ -21,11 +22,13 @@ const SettingsMenu = () => {
   const { t } = useTranslation();
 
   const theme = useStore.getState().theme;
+  const fontSize = useStore.getState().fontSize;
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   useEffect(() => {
+    document.documentElement.setAttribute('font-size', fontSize);
     document.documentElement.className = theme;
-  }, [theme]);
+  }, [theme, fontSize]);
   return (
     <>
       <a
@@ -45,6 +48,7 @@ const SettingsMenu = () => {
           <div className='p-6 border-b border-gray-200 dark:border-gray-600 flex flex-col items-center gap-4'>
             <LanguageSelector />
             <ThemeSwitcher />
+            <FontSizeChanger />
             <div className='flex flex-col gap-3'>
               <AutoTitleToggle />
               <EnterToSubmitToggle />

src/main.css

@@ -143,8 +143,6 @@
     border-radius: 0.25rem;
     border-width: 1px;
     display: inline-flex;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
     padding: 0.5rem 0.75rem;
     pointer-events: auto;
   }
@@ -156,10 +154,26 @@
     border-color: rgba(0, 0, 0, 0.1);
     border-width: 1px;
     color: rgba(64, 65, 79, var(--tw-text-opacity));
+  }
+
+  html[font-size="sm"] .btn,
+  html[font-size="sm"] .btn-neutral {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 
+  html[font-size="md"] .btn,
+  html[font-size="md"] .btn-neutral {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  html[font-size="lg"] .btn,
+  html[font-size="lg"] .btn-neutral {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .btn-neutral:hover {
     --tw-bg-opacity: 1;
     background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
@@ -229,11 +243,27 @@
 
   .markdown ul li:before {
     content: '•';
-    font-size: 0.875rem;
-    line-height: 1.25rem;
     margin-left: -1rem;
     position: absolute;
   }
+
+  html[font-size="sm"] .markdown ul li:before
+  {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  html[font-size="md"] .markdown ul li:before
+  {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  html[font-size="lg"] .markdown ul li:before
+  {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 :not(pre) > code.hljs,
@@ -281,3 +311,72 @@
 .hljs-title {
   color: #f22c3d;
 }
+
+html[font-size="sm"] .prose
+{
+  font-size: 0.875rem;
+}
+
+html[font-size="md"] .prose
+{
+  font-size: 1.125rem;
+}
+
+html[font-size="lg"] .prose
+{
+  font-size: 1.25rem;
+}
+
+/** Text XS **/
+html[font-size="sm"] .text-xs
+{
+  font-size: 0.75rem;
+}
+
+html[font-size="md"] .text-xs
+{
+  font-size: 0.875rem;
+}
+
+html[font-size="lg"] .text-xs
+{
+  font-size: 1rem;
+}
+
+/** Text SM **/
+html[font-size="sm"] .text-sm
+{
+  font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+html[font-size="md"] .text-sm
+{
+  font-size: 1rem;
+    line-height: 1.75rem;
+}
+
+html[font-size="lg"] .text-sm
+{
+  font-size: 1.125rem;
+    line-height: 1.75rem;
+}
+
+/** Text LG **/
+html[font-size="sm"] .text-lg
+{
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+html[font-size="md"] .text-lg
+{
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+html[font-size="lg"] .text-lg
+{
+  font-size: 1.5rem;
+  line-height: 2rem;
+}

src/store/config-slice.ts

@@ -1,11 +1,13 @@
 import { StoreSlice } from './store';
 import { Theme } from '@type/theme';
+import { FontSize } from '@type/font-size';
 import { ConfigInterface, TotalTokenUsed } from '@type/chat';
 import { _defaultChatConfig, _defaultSystemMessage } from '@constants/chat';
 
 export interface ConfigSlice {
   openConfig: boolean;
   theme: Theme;
+  fontSize: FontSize;
   autoTitle: boolean;
   hideMenuOptions: boolean;
   advancedMode: boolean;
@@ -19,6 +21,7 @@ export interface ConfigSlice {
   totalTokenUsed: TotalTokenUsed;
   setOpenConfig: (openConfig: boolean) => void;
   setTheme: (theme: Theme) => void;
+  setFontSize: (fontSize: FontSize) => void;
   setAutoTitle: (autoTitle: boolean) => void;
   setAdvancedMode: (advancedMode: boolean) => void;
   setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => void;
@@ -35,6 +38,7 @@ export interface ConfigSlice {
 export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
   openConfig: false,
   theme: 'dark',
+  fontSize: 'sm',
   hideMenuOptions: false,
   hideSideMenu: false,
   autoTitle: false,
@@ -58,6 +62,12 @@ export const createConfigSlice: StoreSlice<ConfigSlice> = (set, get) => ({
       theme: theme,
     }));
   },
+  setFontSize: (fontSize: FontSize) => {
+    set((prev: ConfigSlice) => ({
+      ...prev,
+      fontSize: fontSize,
+    }));
+  },
   setAutoTitle: (autoTitle: boolean) => {
     set((prev: ConfigSlice) => ({
       ...prev,

src/store/migrate.ts

@@ -11,6 +11,7 @@ import {
   LocalStorageInterfaceV5ToV6,
   LocalStorageInterfaceV6ToV7,
   LocalStorageInterfaceV7oV8,
+  LocalStorageInterfaceV8oV9
 } from '@type/chat';
 import {
   _defaultChatConfig,
@@ -104,3 +105,7 @@ export const migrateV7 = (persistedState: LocalStorageInterfaceV7oV8) => {
     chat.id = uuidv4();
   });
 };
+
+export const migrateV8 = (persistedState: LocalStorageInterfaceV8oV9) => {
+  persistedState.fontSize = 'sm';
+};

src/store/store.ts

@@ -15,6 +15,7 @@ import {
   LocalStorageInterfaceV5ToV6,
   LocalStorageInterfaceV6ToV7,
   LocalStorageInterfaceV7oV8,
+  LocalStorageInterfaceV8oV9,
 } from '@type/chat';
 import {
   migrateV0,
@@ -25,6 +26,7 @@ import {
   migrateV5,
   migrateV6,
   migrateV7,
+  migrateV8,
 } from './migrate';
 
 export type StoreState = ChatSlice &
@@ -45,6 +47,7 @@ export const createPartializedState = (state: StoreState) => ({
   apiKey: state.apiKey,
   apiEndpoint: state.apiEndpoint,
   theme: state.theme,
+  fontSize: state.fontSize,
   autoTitle: state.autoTitle,
   advancedMode: state.advancedMode,
   prompts: state.prompts,
@@ -74,7 +77,7 @@ const useStore = create<StoreState>()(
     {
       name: 'free-chat-gpt',
       partialize: (state) => createPartializedState(state),
-      version: 8,
+      version: 9,
       migrate: (persistedState, version) => {
         switch (version) {
           case 0:
@@ -93,6 +96,8 @@ const useStore = create<StoreState>()(
             migrateV6(persistedState as LocalStorageInterfaceV6ToV7);
           case 7:
             migrateV7(persistedState as LocalStorageInterfaceV7oV8);
+          case 8:
+            migrateV8(persistedState as LocalStorageInterfaceV8oV9);
             break;
         }
         return persistedState as StoreState;

src/types/chat.ts

@@ -1,5 +1,6 @@
 import { Prompt } from './prompt';
 import { Theme } from './theme';
+import { FontSize } from './font-size';
 
 export type Role = 'user' | 'assistant' | 'system';
 export const roles: Role[] = ['user', 'assistant', 'system'];
@@ -161,3 +162,8 @@ export interface LocalStorageInterfaceV7oV8
   foldersExpanded: boolean[];
   folders: FolderCollection;
 }
+
+export interface LocalStorageInterfaceV8oV9
+  extends LocalStorageInterfaceV7oV8 {
+  fontSize: FontSize;
+}

src/types/font-size.ts

@@ -0,0 +1 @@
+export type FontSize = 'sm' | 'md' | 'lg';