Custom font sizes and better zoom

src-web/components/Settings/SettingsAppearance.tsx

@@ -7,6 +7,7 @@ import { useSettings } from '../../hooks/useSettings';
 import { useThemes } from '../../hooks/useThemes';
 import { useUpdateSettings } from '../../hooks/useUpdateSettings';
 import { trackEvent } from '../../lib/analytics';
+import { clamp } from '../../lib/clamp';
 import { isThemeDark } from '../../lib/theme/window';
 import type { ButtonProps } from '../core/Button';
 import { Button } from '../core/Button';
@@ -14,8 +15,10 @@ import { Editor } from '../core/Editor';
 import type { IconProps } from '../core/Icon';
 import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
+import { PlainInput } from '../core/PlainInput';
 import type { SelectOption } from '../core/Select';
 import { Select } from '../core/Select';
+import { Separator } from '../core/Separator';
 import { HStack, VStack } from '../core/Stacks';
 
 const buttonColors: ButtonProps['color'][] = [
@@ -75,6 +78,41 @@ export function SettingsAppearance() {
 
   return (
     <VStack space={2} className="mb-4">
+      <PlainInput
+        size="sm"
+        name="interfaceFontSize"
+        label="Font Size"
+        placeholder="16"
+        type="number"
+        labelPosition="left"
+        defaultValue={`${settings.interfaceFontSize}`}
+        validate={(value) => parseInt(value) >= 8 && parseInt(value) <= 30}
+        onChange={(v) =>
+          updateSettings.mutate({
+            ...settings,
+            interfaceFontSize: clamp(parseInt(v) || 16, 8, 30),
+          })
+        }
+      />
+      <PlainInput
+        size="sm"
+        name="editorFontSize"
+        label="Editor Font Size"
+        placeholder="14"
+        type="number"
+        labelPosition="left"
+        defaultValue={`${settings.editorFontSize}`}
+        validate={(value) => parseInt(value) >= 8 && parseInt(value) <= 30}
+        onChange={(v) =>
+          updateSettings.mutate({
+            ...settings,
+            editorFontSize: clamp(parseInt(v) || 14, 8, 30),
+          })
+        }
+      />
+
+      <Separator className="my-4" />
+
       <Select
         name="appearance"
         label="Appearance"
@@ -91,37 +129,35 @@ export function SettingsAppearance() {
           { label: 'Dark', value: 'dark' },
         ]}
       />
-      <div className="grid grid-cols-2 gap-3">
-        <Select
-          name="lightTheme"
-          label={'Light Theme' + (appearance !== 'dark' ? ' (active)' : '')}
-          labelPosition="top"
-          size="sm"
-          value={activeTheme.light.id}
-          options={lightThemes}
-          onChange={async (themeLight) => {
-            await updateSettings.mutateAsync({ ...settings, themeLight });
-            trackEvent('setting', 'update', { themeLight });
-          }}
-        />
-        <Select
-          name="darkTheme"
-          label={'Dark Theme' + (appearance === 'dark' ? ' (active)' : '')}
-          labelPosition="top"
-          size="sm"
-          value={activeTheme.dark.id}
-          options={darkThemes}
-          onChange={async (themeDark) => {
-            await updateSettings.mutateAsync({ ...settings, themeDark });
-            trackEvent('setting', 'update', { themeDark });
-          }}
-        />
-      </div>
+      <Select
+        name="lightTheme"
+        label="Light Theme"
+        labelPosition="left"
+        size="sm"
+        value={activeTheme.light.id}
+        options={lightThemes}
+        onChange={async (themeLight) => {
+          await updateSettings.mutateAsync({ ...settings, themeLight });
+          trackEvent('setting', 'update', { themeLight });
+        }}
+      />
+      <Select
+        name="darkTheme"
+        label="Dark Theme"
+        labelPosition="left"
+        size="sm"
+        value={activeTheme.dark.id}
+        options={darkThemes}
+        onChange={async (themeDark) => {
+          await updateSettings.mutateAsync({ ...settings, themeDark });
+          trackEvent('setting', 'update', { themeDark });
+        }}
+      />
       <VStack
         space={3}
         className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
       >
-        <div className="text-sm text-fg font-bold">
+        <div className="text-fg font-bold">
           Theme Preview <span className="text-fg-subtle">({appearance})</span>
         </div>
         <HStack space={1.5} alignItems="center" className="w-full">

src-web/components/Settings/SettingsDialog.tsx

@@ -16,8 +16,7 @@ enum Tab {
 }
 
 const tabs = [Tab.General, Tab.Appearance, Tab.Design];
-
-const useTabState = createGlobalState<string>(Tab.Appearance);
+const useTabState = createGlobalState<string>(tabs[0]!);
 
 export const SettingsDialog = () => {
   const [tab, setTab] = useTabState();

src-web/components/Settings/SettingsGeneral.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useActiveWorkspace } from '../../hooks/useActiveWorkspace';
 import { useAppInfo } from '../../hooks/useAppInfo';
 import { useCheckForUpdates } from '../../hooks/useCheckForUpdates';
@@ -35,19 +36,13 @@ export function SettingsGeneral() {
           labelPosition="left"
           size="sm"
           value={settings.updateChannel}
-          onChange={async (updateChannel) => {
+          onChange={(updateChannel) => {
             trackEvent('setting', 'update', { update_channel: updateChannel });
-            await updateSettings.mutateAsync({ ...settings, updateChannel });
+            updateSettings.mutate({ ...settings, updateChannel });
           }}
           options={[
-            {
-              label: 'Release',
-              value: 'stable',
-            },
-            {
-              label: 'Early Bird (Beta)',
-              value: 'beta',
-            },
+            { label: 'Release', value: 'stable' },
+            { label: 'Early Bird (Beta)', value: 'beta' },
           ]}
         />
         <IconButton
@@ -59,12 +54,11 @@ export function SettingsGeneral() {
           onClick={() => checkForUpdates.mutateAsync()}
         />
       </div>
-
       <Separator className="my-4" />
 
       <Heading size={2}>
         Workspace{' '}
-        <div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 text-sm rounded text-fg">
+        <div className="inline-block ml-1 bg-background-highlight px-2 py-0.5 rounded text-fg text-shrink">
           {workspace.name}
         </div>
       </Heading>
@@ -77,28 +71,28 @@ export function SettingsGeneral() {
           labelPosition="left"
           defaultValue={`${workspace.settingRequestTimeout}`}
           validate={(value) => parseInt(value) >= 0}
-          onChange={(v) => updateWorkspace.mutateAsync({ settingRequestTimeout: parseInt(v) || 0 })}
+          onChange={(v) => updateWorkspace.mutate({ settingRequestTimeout: parseInt(v) || 0 })}
         />
 
         <Checkbox
           checked={workspace.settingValidateCertificates}
           title="Validate TLS Certificates"
-          onChange={async (settingValidateCertificates) => {
+          onChange={(settingValidateCertificates) => {
             trackEvent('workspace', 'update', {
               validate_certificates: JSON.stringify(settingValidateCertificates),
             });
-            await updateWorkspace.mutateAsync({ settingValidateCertificates });
+            updateWorkspace.mutate({ settingValidateCertificates });
           }}
         />
 
         <Checkbox
           checked={workspace.settingFollowRedirects}
           title="Follow Redirects"
-          onChange={async (settingFollowRedirects) => {
+          onChange={(settingFollowRedirects) => {
             trackEvent('workspace', 'update', {
               follow_redirects: JSON.stringify(settingFollowRedirects),
             });
-            await updateWorkspace.mutateAsync({ settingFollowRedirects });
+            updateWorkspace.mutate({ settingFollowRedirects });
           }}
         />
       </VStack>