@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/src/components/ScreenPicker.css

@@ -12,14 +12,14 @@
   inset: 0;
   cursor: crosshair;
   touch-action: none;
-  background: var(--zinc-950);
+  background: transparent;
 }
 
-.live-translate-picker img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  user-select: none;
+.live-translate-crosshair {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(rgba(8, 10, 14, 0.13), rgba(8, 10, 14, 0.13));
 }
 
 .live-translate-loading {
@@ -58,6 +58,36 @@
   color: var(--pure-white);
 }
 
+.live-translate-controls {
+  position: fixed;
+  inset: 0;
+  background: transparent;
+  color: var(--pure-white);
+}
+
+.live-translate-controls .live-translate-toolbar {
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  transform: none;
+}
+
+.live-translate-controls .live-translate-brand { cursor: move; }
+
+.live-translate-controls-error {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 5px 10px;
+  background: var(--status-error);
+  color: var(--pure-white);
+  font-size: 0.72rem;
+}
+
 .live-translate-brand {
   display: flex;
   align-items: center;
@@ -140,41 +170,49 @@
   z-index: 2;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   overflow: hidden;
-  padding: 12px 16px;
-  border: 2px solid var(--accent);
+  padding: 5px 7px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: var(--radius-sm);
-  background: rgba(10, 10, 12, 0.97);
-  box-shadow: var(--shadow-lg);
+  background: rgba(10, 10, 12, 0.28);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
   color: var(--pure-white);
   pointer-events: none;
 }
 
-.live-translate-result-label {
-  flex: none;
-  margin-bottom: 6px;
-  color: var(--slate-300);
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+.live-translate-result-backdrop {
+  position: absolute;
+  inset: -8px;
+  width: calc(100% + 16px);
+  height: calc(100% + 16px);
+  object-fit: fill;
+  opacity: 0.55;
+  filter: blur(8px);
+  pointer-events: none;
+}
+
+.live-translate-live-frame {
+  position: absolute;
+  z-index: 1;
+  outline: 2px solid var(--accent);
+  border-radius: 4px;
+  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 38%, transparent);
+  pointer-events: none;
 }
 
 .live-translate-result-text {
-  overflow: auto;
-  font-size: clamp(13px, 1.3vw, 22px);
-  font-weight: 500;
-  line-height: 1.5;
+  position: relative;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
 }
 
-.live-translate.is-sampling .live-translate-toolbar,
-.live-translate.is-sampling .live-translate-result,
-.live-translate.is-sampling .live-translate-error {
-  visibility: hidden;
-}
-
 .live-translate button:focus-visible,
 .live-translate select:focus-visible,
 .live-translate input:focus-visible {
@@ -185,6 +223,5 @@
 @media (max-width: 760px) {
   .live-translate-toolbar { justify-content: center; flex-wrap: wrap; width: calc(100vw - 24px); }
   .live-translate-brand { flex: 1 1 100%; }
-  .live-translate-result { padding: 8px 10px; }
-  .live-translate-result-label { font-size: 0.6rem; }
+  .live-translate-result { padding: 5px 7px; }
 }

package/src/renderer/src/components/ScreenPicker.tsx

@@ -1,16 +1,17 @@
+import SelectField from '../../shared/components/SelectField'
 import { useEffect, useRef, useState, type PointerEvent } from 'react'
 import { invoke } from '@tauri-apps/api/core'
-import { hasMeaningfulFrameChange, sampleFrame } from './liveTranslateFrames'
+import { createFrameChangeTracker, sampleFrame } from './liveTranslateFrames'
+import { LANGUAGE_KEY, LANGUAGES } from './liveTranslateLanguage'
 import './ScreenPicker.css'
 
 type Region = { x: number; y: number; width: number; height: number }
 type Point = { x: number; y: number }
+type CaptureGeometry = { x: number; y: number; scaleFactor: number; windowCapture: boolean }
 type Phase = 'selecting' | 'live' | 'paused'
 type Status = 'waiting' | 'watching' | 'translating' | 'unchanged' | 'error'
-
-const LANGUAGE_KEY = 'mint:live-translate-language'
-const LANGUAGES = ['Thai', 'English', 'Japanese', 'Chinese', 'Korean', 'Spanish', 'French', 'German', 'Portuguese', 'Vietnamese', 'Indonesian', 'Arabic', 'Hindi']
-const nextPaint = () => new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())))
+type ControlAction = { type: 'pause' | 'resume' | 'change-area' | 'language'; languageChoice?: string; customLanguage?: string }
+const CAPTURE_INTERVAL_MS = 750
 
 function point(event: PointerEvent<HTMLElement>): Point {
   return { x: Math.max(0, Math.min(window.innerWidth, event.clientX)), y: Math.max(0, Math.min(window.innerHeight, event.clientY)) }
@@ -20,46 +21,51 @@ function regionBetween(start: Point, end: Point): Region {
   return { x: Math.min(start.x, end.x), y: Math.min(start.y, end.y), width: Math.abs(end.x - start.x), height: Math.abs(end.y - start.y) }
 }
 
-function captureRect(region: Region, image: { width: number; height: number }): Region {
-  const scaleX = image.width / window.innerWidth
-  const scaleY = image.height / window.innerHeight
+function captureRect(region: Region, geometry: CaptureGeometry): Region {
   return {
-    x: Math.round(region.x * scaleX),
-    y: Math.round(region.y * scaleY),
-    width: Math.max(1, Math.round(region.width * scaleX)),
-    height: Math.max(1, Math.round(region.height * scaleY)),
+    x: Math.round(geometry.x + region.x * geometry.scaleFactor),
+    y: Math.round(geometry.y + region.y * geometry.scaleFactor),
+    width: Math.max(1, Math.round(region.width * geometry.scaleFactor)),
+    height: Math.max(1, Math.round(region.height * geometry.scaleFactor)),
   }
 }
 
 export default function ScreenPicker() {
-  const [snapshot, setSnapshot] = useState('')
-  const [sourceSize, setSourceSize] = useState<{ width: number; height: number } | null>(null)
+  const [geometry, setGeometry] = useState<CaptureGeometry | null>(null)
   const [phase, setPhase] = useState<Phase>('selecting')
   const [selection, setSelection] = useState<Region | null>(null)
   const [status, setStatus] = useState<Status>('waiting')
+  const [interactive, setInteractive] = useState(true)
   const [translation, setTranslation] = useState('')
+  const [translationBackdrop, setTranslationBackdrop] = useState('')
   const [error, setError] = useState('')
-  const [sampling, setSampling] = useState(false)
   const [savedLanguage] = useState(() => window.localStorage.getItem(LANGUAGE_KEY) || 'Thai')
   const [languageChoice, setLanguageChoice] = useState(() => LANGUAGES.includes(savedLanguage) ? savedLanguage : 'custom')
   const [customLanguage, setCustomLanguage] = useState(() => LANGUAGES.includes(savedLanguage) ? '' : savedLanguage)
   const dragStart = useRef<Point | null>(null)
+  const previousPhase = useRef<Phase | null>(null)
   const session = useRef(0)
-  const previewRequest = useRef<Promise<string | null> | null>(null)
   const targetLanguage = languageChoice === 'custom' ? customLanguage.trim() : languageChoice
-  const selectedPixels = selection && sourceSize ? captureRect(selection, sourceSize) : null
+  const selectedPixels = selection && geometry ? captureRect(selection, geometry) : null
 
   useEffect(() => {
     let active = true
-    previewRequest.current ||= invoke<string | null>('take_screen_capture_preview')
-    void previewRequest.current.then((image) => {
-      if (!active) return
-      if (image) setSnapshot(image)
-      else setError('Screen preview is unavailable. Close and try again.')
-    }).catch((reason) => {
-      if (active) setError(reason instanceof Error ? reason.message : String(reason))
-    })
-    return () => { active = false }
+    const refreshGeometry = () => {
+      void invoke<CaptureGeometry>('live_translate_geometry').then((value) => {
+        if (active) setGeometry(value)
+      }).catch((reason) => {
+        if (active) {
+          setError(reason instanceof Error ? reason.message : String(reason))
+          setStatus('error')
+        }
+      })
+    }
+    refreshGeometry()
+    window.addEventListener('resize', refreshGeometry)
+    return () => {
+      active = false
+      window.removeEventListener('resize', refreshGeometry)
+    }
   }, [])
 
   useEffect(() => {
@@ -70,18 +76,92 @@ export default function ScreenPicker() {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [])
 
+  useEffect(() => {
+    let unlisten: (() => void) | undefined
+    let active = true
+    void import('@tauri-apps/api/event').then(({ listen }) =>
+      listen<boolean>('live-translate-interaction-mode', (event) => {
+        if (active) setInteractive(event.payload)
+      }).then((stop) => { if (active) unlisten = stop; else stop() }),
+    ).catch((reason) => {
+      if (active) setError(reason instanceof Error ? reason.message : String(reason))
+    })
+    return () => {
+      active = false
+      unlisten?.()
+    }
+  }, [])
+
+  useEffect(() => {
+    let unlisten: (() => void) | undefined
+    let active = true
+    void import('@tauri-apps/api/event').then(({ listen }) =>
+      listen<ControlAction>('live-translate-control', (event) => {
+        if (!active) return
+        const action = event.payload
+        if (action.type === 'pause') setPhase('paused')
+        if (action.type === 'resume') setPhase('live')
+        if (action.type === 'change-area') {
+          setPhase('selecting')
+          setTranslation('')
+          setTranslationBackdrop('')
+          setError('')
+        }
+        if (action.type === 'language') {
+          if (action.languageChoice) setLanguageChoice(action.languageChoice)
+          if (action.customLanguage !== undefined) setCustomLanguage(action.customLanguage)
+          setTranslation('')
+        }
+      }).then((stop) => { if (active) unlisten = stop; else stop() }),
+    ).catch((reason) => {
+      if (active) setError(reason instanceof Error ? reason.message : String(reason))
+    })
+    return () => { active = false; unlisten?.() }
+  }, [])
+
+  useEffect(() => {
+    const prior = previousPhase.current
+    previousPhase.current = phase
+    if (phase === 'paused' || (phase === 'live' && prior === 'paused')) return
+    const enabled = phase === 'live'
+    let active = true
+    const applyPhase = async () => {
+      if (phase === 'selecting' && prior && prior !== 'selecting') {
+        try {
+          await invoke('close_desktop_window', { label: 'live-translate-controls' })
+        } catch (reason) {
+          if (active) setError(reason instanceof Error ? reason.message : String(reason))
+        }
+      }
+      try {
+        await invoke('set_live_translate_passthrough', { enabled })
+        if (active) setInteractive(!enabled)
+      } catch (reason) {
+        if (!active) return
+        setInteractive(true)
+        setError(reason instanceof Error ? reason.message : String(reason))
+        setStatus('error')
+        if (enabled) setPhase('selecting')
+      }
+    }
+    void applyPhase()
+    return () => { active = false }
+  }, [phase])
+
   useEffect(() => {
     if (targetLanguage) window.localStorage.setItem(LANGUAGE_KEY, targetLanguage)
   }, [targetLanguage])
 
   useEffect(() => {
-    if (phase !== 'live' || !selectedPixels || !targetLanguage) return
+    if (phase !== 'live' || interactive || !selectedPixels || !targetLanguage) return
     const currentSession = ++session.current
     let timer: ReturnType<typeof setTimeout> | undefined
     let translating = false
     let queued: string | null = null
-    let previous: Uint8ClampedArray | null = null
+    let hasChanged = createFrameChangeTracker()
     let retryAt = 0
+    let retryChanged = false
+    let translationFailed = false
     let stopped = false
     const rect = selectedPixels
 
@@ -92,13 +172,16 @@ export default function ScreenPicker() {
       let failed = false
       try {
         const result = await invoke<string>('translate_captured_frame', { image, targetLanguage })
-        if (!stopped && session.current === currentSession) {
+        translationFailed = false
+        if (!stopped && session.current === currentSession && !queued) {
           setTranslation(result.trim())
+          setTranslationBackdrop(image)
           setError('')
         }
       } catch (reason) {
         failed = true
-        previous = null
+        translationFailed = true
+        retryChanged = queued !== null
         queued = null
         retryAt = Date.now() + 5000
         if (!stopped && session.current === currentSession) {
@@ -119,30 +202,33 @@ export default function ScreenPicker() {
 
     const poll = async () => {
       if (stopped) return
-      setSampling(true)
+      let captureFailed = false
+      let captureRetryDelay = 5000
       try {
-        // Remove translated text from the compositor before native capture.
-        await nextPaint()
-        if (stopped) return
         const image = await invoke<string>('capture_translation_frame', { rect })
         if (stopped || session.current !== currentSession) return
         const current = await sampleFrame(image)
         if (stopped || session.current !== currentSession) return
         if (Date.now() >= retryAt) {
-          const changed = hasMeaningfulFrameChange(previous, current)
-          previous = current
-          if (changed) void translate(image)
-          else if (!translating) setStatus('unchanged')
+          const changed = hasChanged(current)
+          if (changed || retryChanged) {
+            retryChanged = false
+            setTranslation('')
+            void translate(image)
+          }
+          else if (!translating && !translationFailed) setStatus('unchanged')
         }
       } catch (reason) {
+        captureFailed = true
         if (!stopped && session.current === currentSession) {
-          setError(reason instanceof Error ? reason.message : String(reason))
+          const message = reason instanceof Error ? reason.message : String(reason)
+          if (message.includes('Click the game') || message.includes('outside the active game') || message.includes('No source window')) captureRetryDelay = CAPTURE_INTERVAL_MS
+          setError(message)
           setStatus('error')
         }
       } finally {
         if (!stopped && session.current === currentSession) {
-          setSampling(false)
-          timer = window.setTimeout(poll, 1200)
+          timer = window.setTimeout(poll, captureFailed ? captureRetryDelay : CAPTURE_INTERVAL_MS)
         }
       }
     }
@@ -153,12 +239,14 @@ export default function ScreenPicker() {
       session.current += 1
       if (timer) window.clearTimeout(timer)
     }
-  }, [phase, selectedPixels?.x, selectedPixels?.y, selectedPixels?.width, selectedPixels?.height, targetLanguage])
+  }, [phase, interactive, selectedPixels?.x, selectedPixels?.y, selectedPixels?.width, selectedPixels?.height, targetLanguage])
 
   const startSelection = (event: PointerEvent<HTMLDivElement>) => {
-    if (phase !== 'selecting' || !snapshot) return
+    if (phase !== 'selecting' || !geometry) return
     dragStart.current = point(event)
     setSelection(null)
+    setError('')
+    setStatus('waiting')
     event.currentTarget.setPointerCapture(event.pointerId)
   }
 
@@ -170,55 +258,108 @@ export default function ScreenPicker() {
     if (!dragStart.current) return
     const next = regionBetween(dragStart.current, point(event))
     dragStart.current = null
-    setSelection(next.width >= 120 && next.height >= 72 ? next : null)
+    const roomForResult = geometry?.windowCapture || Math.max(next.y, window.innerHeight - next.y - next.height) >= 88
+    if (next.width < 120 || next.height < 72) {
+      setError('Select an area at least 120 × 72 px.')
+      setStatus('error')
+      setSelection(null)
+    } else if (!roomForResult) {
+      setError('Leave a little space above or below the frame for the translation.')
+      setStatus('error')
+      setSelection(null)
+    } else {
+      setSelection(next)
+    }
     if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId)
   }
 
-  const begin = () => {
+  const begin = async () => {
     if (!selectedPixels || !targetLanguage) return
+    try {
+      await invoke('open_live_translate_controls')
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setStatus('error')
+      return
+    }
     setTranslation('')
+    setTranslationBackdrop('')
     setError('')
     setStatus('waiting')
     setPhase('live')
   }
 
+  const returnToSource = () => {
+    void invoke('set_live_translate_passthrough', { enabled: true }).catch((reason) => {
+      setError(reason instanceof Error ? reason.message : String(reason))
+      setStatus('error')
+    })
+  }
+
+  const resultStyle = (() => {
+    if (!selection) return undefined
+    if (geometry?.windowCapture) {
+      return {
+        left: selection.x,
+        top: selection.y,
+        width: selection.width,
+        height: selection.height,
+      }
+    }
+    const below = window.innerHeight - (selection.y + selection.height) - 16
+    const above = selection.y - 16
+    const placeBelow = below >= 80 || below >= above
+    const maxHeight = Math.min(180, Math.max(0, placeBelow ? below : above))
+    return {
+      left: selection.x,
+      top: placeBelow ? selection.y + selection.height + 8 : selection.y - maxHeight - 8,
+      width: Math.min(window.innerWidth - selection.x - 16, Math.max(220, selection.width)),
+      maxHeight,
+    }
+  })()
+
   return (
-    <div className={`live-translate ${sampling ? 'is-sampling' : ''} ${phase !== 'selecting' ? 'is-active' : ''}`}>
+    <div className="live-translate">
       {phase === 'selecting' && (
         <div className="live-translate-picker" onPointerDown={startSelection} onPointerMove={moveSelection} onPointerUp={finishSelection} onPointerCancel={finishSelection}>
-          {snapshot ? <img src={snapshot} alt="Screen preview for selecting a translation area" draggable={false} onLoad={(event) => setSourceSize({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight })} /> : <div className="live-translate-loading">{error || 'Preparing screen preview…'}</div>}
+          {!geometry && <div className="live-translate-loading">{error || 'Preparing live screen…'}</div>}
           {selection && <div className="live-translate-selection" style={{ left: selection.x, top: selection.y, width: selection.width, height: selection.height }} />}
+          {!selection && <div className="live-translate-crosshair" aria-hidden="true" />}
         </div>
       )}
 
       {phase !== 'selecting' && selection && (
-        <div className="live-translate-result" style={{ left: selection.x, top: selection.y, width: selection.width, height: selection.height }} aria-live="polite">
-          <div className="live-translate-result-label">{phase === 'paused' ? 'Paused' : status === 'translating' ? 'Translating…' : status === 'error' ? 'Capture error' : `Live · ${targetLanguage}`}</div>
-          <div className="live-translate-result-text">{translation || 'Waiting for text in this area…'}</div>
-        </div>
+        <>
+          <div className="live-translate-live-frame" style={{ left: selection.x, top: selection.y, width: selection.width, height: selection.height }} aria-hidden="true" />
+          {translation && <div className="live-translate-result" style={resultStyle} aria-live="polite" aria-label={`Translation to ${targetLanguage}`}>
+            {geometry?.windowCapture && translationBackdrop && <img className="live-translate-result-backdrop" src={translationBackdrop} alt="" aria-hidden="true" />}
+            <div className="live-translate-result-text">{translation}</div>
+          </div>}
+        </>
       )}
 
-      <div className="live-translate-toolbar">
-        <div className="live-translate-brand"><span aria-hidden="true">◈</span><div><strong>Live translate</strong><small>{phase === 'selecting' ? 'Draw a frame around the text' : phase === 'paused' ? 'Translation paused' : status === 'translating' ? 'Updating translation' : status === 'error' ? 'Waiting to retry' : 'Watching selected area'}</small></div></div>
+      {(phase === 'selecting' || interactive) && <div className="live-translate-toolbar">
+        <div className="live-translate-brand"><span aria-hidden="true">◈</span><div><strong>Live translate</strong><small>{phase === 'selecting' ? 'Draw a frame around the text' : interactive ? 'Controls active · click-through off' : 'Click-through on · Alt+Shift+L for controls'}</small></div></div>
         <label className="live-translate-language">To
-          <select value={languageChoice} onChange={(event) => setLanguageChoice(event.target.value)} aria-label="Target language">
+          <SelectField fullWidth={false} value={languageChoice} onValueChange={(nextValue) => setLanguageChoice(nextValue)} aria-label="Target language">
             {LANGUAGES.map((language) => <option key={language} value={language}>{language}</option>)}
             <option value="custom">Other language…</option>
-          </select>
+          </SelectField>
         </label>
         {languageChoice === 'custom' && <input className="live-translate-custom-language" value={customLanguage} onChange={(event) => setCustomLanguage(event.target.value)} maxLength={64} placeholder="Language name" aria-label="Custom target language" />}
         {phase === 'selecting' ? (
-          <button type="button" className="live-translate-primary" onClick={begin} disabled={!selectedPixels || !targetLanguage}>Start translation</button>
+          <button type="button" className="live-translate-primary" onClick={() => void begin()} disabled={!selectedPixels || !targetLanguage}>Translate this area</button>
         ) : (
           <>
+            {interactive && <button type="button" className="live-translate-primary" onClick={returnToSource}>Return to game or book</button>}
             <button type="button" onClick={() => setPhase(phase === 'live' ? 'paused' : 'live')}>{phase === 'live' ? 'Pause' : 'Resume'}</button>
-            <button type="button" onClick={() => { setPhase('selecting'); setTranslation('') }}>Change area</button>
+            <button type="button" onClick={() => { setPhase('selecting'); setTranslation(''); setError('') }}>Change area</button>
           </>
         )}
         <button type="button" className="live-translate-close" onClick={() => void window.screenPickerApi?.closePicker()} aria-label="Close live translate">×</button>
-      </div>
-      {phase === 'selecting' && <div className="live-translate-help">{selection ? `${Math.round(selection.width)} × ${Math.round(selection.height)} px selected` : 'Drag across the text to select an area (at least 120 × 72 px)'} · Only changed frames are sent for translation · Esc to close</div>}
-      {phase !== 'selecting' && status === 'error' && <div className="live-translate-error" role="alert">{error}</div>}
+      </div>}
+      {phase === 'selecting' && <div className="live-translate-help">{selection ? `${Math.round(selection.width)} × ${Math.round(selection.height)} px selected` : 'Drag a frame around text on your screen (at least 120 × 72 px)'} · Esc to close</div>}
+      {status === 'error' && error && <div className="live-translate-error" role="alert">{error}</div>}
     </div>
   )
 }

package/src/renderer/src/components/SettingsWindow.tsx

@@ -1,3 +1,5 @@
+import { Bell } from 'lucide-react'
+import NotificationsTab from '../../shared/components/Settings/NotificationsTab'
 import React, { useState, useEffect, useRef } from 'react'
 import '../css/settings/base.css'
 import '../../shared/css/settings/general.css'
@@ -39,12 +41,12 @@ export type {
   CustomProviderConfig,
 } from '../../shared/types'
 
-import { DEFAULT_CONFIG, migrateTypographyScale, migrateTuiTheme } from '../../shared/constants/config'
+import { DEFAULT_CONFIG, migrateFontFamily, migrateTypographyScale, migrateTuiTheme } from '../../shared/constants/config'
 export { DEFAULT_CONFIG }
 import { applyThemeStyles } from '../../shared/utils/ui'
 import { APP_VERSION } from '../../shared/version'
 
-type TabType = 'sect-general' | 'sect-profile' | 'sect-audio' | 'sect-automation' | 'sect-theme' | 'sect-plugins' | 'sect-shortcuts' | 'sect-memory' | 'sect-agents'
+type TabType = 'sect-notifications' | 'sect-general' | 'sect-profile' | 'sect-audio' | 'sect-automation' | 'sect-theme' | 'sect-plugins' | 'sect-shortcuts' | 'sect-memory' | 'sect-agents'
 
 interface SettingsNavItem {
   id: TabType
@@ -54,6 +56,7 @@ interface SettingsNavItem {
 }
 
 const SETTINGS_NAV: SettingsNavItem[] = [
+  { id: 'sect-notifications', label: 'Notifications', group: 'Workspace', icon: <Bell size={14} aria-hidden="true" /> },
   {
     id: 'sect-general',
     label: 'General',
@@ -108,8 +111,8 @@ const SETTINGS_NAV: SettingsNavItem[] = [
   },
   {
     id: 'sect-memory',
-    label: 'Memory & Profile',
-    group: 'Workspace',
+    label: 'Personal Memory',
+    group: 'Account',
     icon: (
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
         <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
@@ -264,7 +267,7 @@ export default function SettingsWindow() {
         }
         
         if (loadedConfig) {
-          const merged = { ...DEFAULT_CONFIG, ...migrateTuiTheme(migrateTypographyScale(loadedConfig)) }
+          const merged = { ...DEFAULT_CONFIG, ...migrateTuiTheme(migrateTypographyScale(migrateFontFamily(loadedConfig))) }
           setConfig(merged)
           
           // sync helper custom models
@@ -695,6 +698,8 @@ export default function SettingsWindow() {
             />
           )}
 
+          {activeTab === 'sect-notifications' && <NotificationsTab settings={config.notificationSettings} onChange={value => updateField('notificationSettings', value)} />}
+
           {activeTab === 'sect-profile' && (
             <ProfileTab
               name={profileName}