feat(settings): add Application page with RAM indicator toggle

src/areas/settings/SettingsPage.tsx

@@ -4,10 +4,22 @@ 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'
 
-type Section = 'storage' | 'integrations' | 'agent' | 'logs' | 'about'
+type Section = 'application' | 'storage' | 'integrations' | 'agent' | 'logs' | 'about'
 
 const SECTIONS: { id: Section; label: string; icon: JSX.Element }[] = [
+  {
+    id: 'application',
+    label: 'Application',
+    icon: (
+      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="12" r="3" />
+        <path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14" />
+        <path d="M15.54 8.46a5 5 0 0 1 0 7.07M8.46 8.46a5 5 0 0 0 0 7.07" />
+      </svg>
+    )
+  },
   {
     id: 'storage',
     label: 'Storage',
@@ -68,7 +80,7 @@ const SECTIONS: { id: Section; label: string; icon: JSX.Element }[] = [
 // ─── Page shell ───────────────────────────────────────────────────────────────
 
 export default function SettingsPage(): JSX.Element {
-  const [section, setSection] = useState<Section>('storage')
+  const [section, setSection] = useState<Section>('application')
 
   return (
     <div className="flex h-full">
@@ -96,6 +108,7 @@ export default function SettingsPage(): JSX.Element {
       {/* Content */}
       <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 />}

src/areas/settings/components/ApplicationSection.tsx

@@ -0,0 +1,19 @@
+import { useAppStore } from '@shared/stores/appStore'
+import { Section, Card, Row, Toggle } from '@shared/ui'
+
+export function ApplicationSection(): JSX.Element {
+  const { showRamIndicator, setShowRamIndicator } = useAppStore()
+
+  return (
+    <Section title="Application" subtitle="General application settings.">
+      <Card title="Interface">
+        <Row
+          label="RAM indicator"
+          description="Show live memory usage in the top bar."
+        >
+          <Toggle value={showRamIndicator} onChange={setShowRamIndicator} />
+        </Row>
+      </Card>
+    </Section>
+  )
+}

src/shared/components/layout/TopBar.tsx

@@ -2,7 +2,7 @@ import { useAppStore } from '@shared/stores/appStore'
 import MemoryIndicator from './MemoryIndicator'
 
 export default function TopBar(): JSX.Element {
-  const { patchUpdateReady, platform } = useAppStore()
+  const { patchUpdateReady, platform, showRamIndicator } = useAppStore()
   const isMac = platform === 'darwin'
 
   const handleMinimize = () => window.electron.window.minimize()
@@ -34,7 +34,7 @@ export default function TopBar(): JSX.Element {
       <div className="flex-1" />
 
       {/* Memory indicator */}
-      <MemoryIndicator />
+      {showRamIndicator && <MemoryIndicator />}
 
       {/* Patch update badge */}
       {patchUpdateReady && (

src/shared/stores/appStore.ts

@@ -107,6 +107,10 @@ interface AppState {
   redoMesh: () => void
   clearMeshHistory: () => void
 
+  // UI preferences
+  showRamIndicator: boolean
+  setShowRamIndicator: (v: boolean) => void
+
   // Actions
   initApp: () => Promise<void>
   setCurrentJob: (job: GenerationJob | null) => void
@@ -198,6 +202,9 @@ export const useAppStore = create<AppState>()(
 
       clearMeshHistory: () => set({ meshHistory: [], historyIndex: -1 }),
 
+      showRamIndicator: true,
+      setShowRamIndicator: (v) => set({ showRamIndicator: v }),
+
       currentJob: null,
       selectedImagePath: null,
       setSelectedImagePath: (path) => set({ selectedImagePath: path }),
@@ -246,6 +253,7 @@ export const useAppStore = create<AppState>()(
       name: 'modly-store',
       partialize: (state) => ({
         generationOptions: state.generationOptions,
+        showRamIndicator: state.showRamIndicator,
       }),
     }
   )