feat(settings): accessibility section

electron/preload/index.ts

@@ -1,4 +1,4 @@
-import { contextBridge, ipcRenderer } from 'electron'
+import { contextBridge, ipcRenderer, webFrame } from 'electron'
 
 // Expose a typed API to the renderer process via window.electron
 contextBridge.exposeInMainWorld('electron', {
@@ -9,6 +9,11 @@ contextBridge.exposeInMainWorld('electron', {
     close:    () => ipcRenderer.send('window:close')
   },
 
+  // Renderer UI (zoom whole page — scales every px/rem consistently)
+  ui: {
+    setZoomFactor: (factor: number) => webFrame.setZoomFactor(factor),
+  },
+
   // Shell utilities
   shell: {
     openExternal: (url: string) => ipcRenderer.invoke('shell:openExternal', url),

src/App.tsx

@@ -1,13 +1,15 @@
-import { useEffect, useState } from 'react'
-import { useAppStore } from '@shared/stores/appStore'
+import { useEffect, useLayoutEffect, useState } from 'react'
+import { useAppStore, type UiScale } from '@shared/stores/appStore'
 import FirstRunSetup from '@areas/setup/FirstRunSetup'
 import MainLayout from '@shared/components/layout/MainLayout'
 import { UpdateModal } from '@shared/components/ui/UpdateModal'
 import { ErrorModal } from '@shared/components/ui/ErrorModal'
 import { Toast } from '@shared/components/ui/Toast'
 
+const UI_SCALE_FACTORS: Record<UiScale, number> = { small: 0.875, medium: 1, large: 1.25 }
+
 export default function App(): JSX.Element {
-  const { checkSetup, setupStatus, initApp, backendStatus, showError } = useAppStore()
+  const { checkSetup, setupStatus, initApp, backendStatus, showError, useAtkinsonFont, uiScale } = useAppStore()
   const [updateVersion, setUpdateVersion] = useState<string | null>(null)
   const [currentVersion, setCurrentVersion] = useState<string>('')
 
@@ -23,6 +25,17 @@ export default function App(): JSX.Element {
     }
   }, [])
 
+  // Apply before paint to avoid a flash of default font/size on launch.
+  useLayoutEffect(() => {
+    document.documentElement.style.setProperty(
+      '--app-font',
+      useAtkinsonFont
+        ? "'Atkinson Hyperlegible', system-ui, sans-serif"
+        : "'Inter', system-ui, sans-serif"
+    )
+    window.electron.ui.setZoomFactor(UI_SCALE_FACTORS[uiScale])
+  }, [useAtkinsonFont, uiScale])
+
   useEffect(() => {
     if (setupStatus === 'done') initApp()
   }, [setupStatus])

src/areas/settings/SettingsPage.tsx

@@ -1,12 +1,13 @@
 import { useState } from 'react'
-import { StorageSection }      from './components/StorageSection'
-import { AboutSection }        from './components/AboutSection'
-import { LogsSection }         from './components/LogsSection'
+import { StorageSection } from './components/StorageSection'
+import { AboutSection } from './components/AboutSection'
+import { LogsSection } from './components/LogsSection'
 import { IntegrationsSection } from './components/IntegrationsSection'
-import { AgentSection }        from './components/AgentSection'
-import { ApplicationSection }  from './components/ApplicationSection'
+import { AgentSection } from './components/AgentSection'
+import { ApplicationSection } from './components/ApplicationSection'
+import { AccessibilitySection } from './components/AccessibilitySection'
 
-type Section = 'application' | 'storage' | 'integrations' | 'agent' | 'logs' | 'about'
+type Section = 'application' | 'storage' | 'integrations' | 'accessibility' | 'agent' | 'logs' | 'about'
 
 const SECTIONS: { id: Section; label: string; icon: JSX.Element }[] = [
   {
@@ -41,6 +42,18 @@ const SECTIONS: { id: Section; label: string; icon: JSX.Element }[] = [
       </svg>
     )
   },
+  {
+    id: 'accessibility',
+    label: 'Accessibility',
+    icon: (
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="4" r="2" />
+        <path d="M19 9l-7 1-7-1" />
+        <path d="M12 10v6" />
+        <path d="M9 22l3-6 3 6" />
+      </svg>
+    )
+  },
   {
     id: 'agent',
     label: 'Agent',
@@ -109,11 +122,12 @@ export default function SettingsPage(): JSX.Element {
       <div className="flex-1 overflow-y-auto bg-surface-400">
         <div className="p-8">
           {section === 'application'   && <ApplicationSection />}
-          {section === 'storage'      && <StorageSection />}
-          {section === 'integrations' && <IntegrationsSection />}
-          {section === 'agent'        && <AgentSection />}
-          {section === 'logs'         && <LogsSection />}
-          {section === 'about'        && <AboutSection />}
+          {section === 'storage'       && <StorageSection />}
+          {section === 'integrations'  && <IntegrationsSection />}
+          {section === 'accessibility' && <AccessibilitySection />}
+          {section === 'agent'         && <AgentSection />}
+          {section === 'logs'          && <LogsSection />}
+          {section === 'about'         && <AboutSection />}
         </div>
       </div>
 

src/areas/settings/components/AccessibilitySection.tsx

@@ -0,0 +1,41 @@
+import { useAppStore } from '@shared/stores/appStore'
+import { Section, Card, Row, Toggle, SegmentedControl } from '@shared/ui'
+
+export function AccessibilitySection(): JSX.Element {
+  const { useAtkinsonFont, setUseAtkinsonFont, uiScale, setUiScale } = useAppStore()
+
+  return (
+    <Section title="Accessibility" subtitle="Make Modly easier to read and use.">
+      <div className="grid grid-cols-2 gap-4">
+
+        <Card title="Display Font" description="Use a more legible typeface, helpful for dyslexia and low vision.">
+          <Row
+            label="Atkinson Hyperlegible"
+            description="Replace the default font with a typeface designed for readability."
+          >
+            <Toggle value={useAtkinsonFont} onChange={setUseAtkinsonFont} />
+          </Row>
+        </Card>
+
+        <Card title="Interface Scale" description="Zoom the whole interface up or down.">
+          <Row
+            label="Scale"
+            description="Applies to all text, icons, and spacing."
+          >
+            <SegmentedControl
+              ariaLabel="Interface scale"
+              value={uiScale}
+              onChange={setUiScale}
+              options={[
+                { value: 'small',  label: 'Small'  },
+                { value: 'medium', label: 'Medium' },
+                { value: 'large',  label: 'Large'  },
+              ]}
+            />
+          </Row>
+        </Card>
+
+      </div>
+    </Section>
+  )
+}

src/assets/fonts/atkinson-hyperlegible/OFL.txt

@@ -0,0 +1,92 @@
+Copyright 2020 Braille Institute of America, Inc.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/shared/stores/appStore.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
+export type UiScale = 'small' | 'medium' | 'large'
 export type BackendStatus = 'not_started' | 'starting' | 'ready' | 'error'
 export type SetupStatus = 'idle' | 'checking' | 'needed' | 'installing' | 'done' | 'error'
 export interface SetupProgress { step: string; percent: number; currentPackage?: string }
@@ -111,6 +112,12 @@ interface AppState {
   showRamIndicator: boolean
   setShowRamIndicator: (v: boolean) => void
 
+  // Accessibility
+  useAtkinsonFont: boolean
+  setUseAtkinsonFont: (v: boolean) => void
+  uiScale: UiScale
+  setUiScale: (v: UiScale) => void
+
   // Actions
   initApp: () => Promise<void>
   setCurrentJob: (job: GenerationJob | null) => void
@@ -205,6 +212,11 @@ export const useAppStore = create<AppState>()(
       showRamIndicator: true,
       setShowRamIndicator: (v) => set({ showRamIndicator: v }),
 
+      useAtkinsonFont: false,
+      setUseAtkinsonFont: (v) => set({ useAtkinsonFont: v }),
+      uiScale: 'medium',
+      setUiScale: (v) => set({ uiScale: v }),
+
       currentJob: null,
       selectedImagePath: null,
       setSelectedImagePath: (path) => set({ selectedImagePath: path }),
@@ -254,6 +266,8 @@ export const useAppStore = create<AppState>()(
       partialize: (state) => ({
         generationOptions: state.generationOptions,
         showRamIndicator: state.showRamIndicator,
+        useAtkinsonFont: state.useAtkinsonFont,
+        uiScale: state.uiScale,
       }),
     }
   )

src/shared/types/electron.d.ts

@@ -119,6 +119,9 @@ declare global {
         maximize: () => void
         close:    () => void
       }
+      ui: {
+        setZoomFactor: (factor: number) => void
+      }
       python: {
         start:     () => Promise<{ success: boolean; port?: number; error?: string }>
         status:    () => Promise<{ ready: boolean; apiUrl: string }>

src/shared/ui/index.tsx

@@ -110,6 +110,36 @@ export function Select({ value, onChange, options }: {
   )
 }
 
+export function SegmentedControl<T extends string>({ value, onChange, options, ariaLabel }: {
+  value: T
+  onChange: (v: T) => void
+  options: { value: T; label: string }[]
+  ariaLabel?: string
+}): JSX.Element {
+  return (
+    <div role="group" aria-label={ariaLabel} className="inline-flex p-0.5 rounded-lg bg-zinc-800 border border-zinc-700">
+      {options.map((o) => {
+        const active = o.value === value
+        return (
+          <button
+            key={o.value}
+            type="button"
+            aria-pressed={active}
+            onClick={() => onChange(o.value)}
+            className={`px-3 py-1 rounded-md text-xs font-medium transition-colors ${
+              active
+                ? 'bg-accent/20 text-accent-light'
+                : 'text-zinc-400 hover:text-zinc-200'
+            }`}
+          >
+            {o.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
 export function LinkButton({ label, href }: { label: string; href?: string }): JSX.Element {
   const handleClick = (): void => {
     if (href) window.open(href, '_blank')

src/styles/globals.css

@@ -1,10 +1,30 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../assets/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Bold.woff2') format('woff2');
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --app-font: 'Inter', system-ui, sans-serif;
+  }
+
   * {
     box-sizing: border-box;
     margin: 0;
@@ -19,7 +39,7 @@
     overflow: hidden;
     background-color: #111113;
     color: #f4f4f5;
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: var(--app-font);
     -webkit-font-smoothing: antialiased;
     user-select: none;
   }