From 6179c8fee813c837bb86d62c597db54a6172cac3 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Fri, 20 Feb 2026 14:40:50 +0200
Subject: [PATCH] feat: persistent notifications toggle in settings

---
 src/App.vue            |  227 +++++++-
 src/views/Settings.vue | 1245 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 1411 insertions(+), 61 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b04c195..3c0e59f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,39 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import { getCurrentWindow } from '@tauri-apps/api/window'
+import { invoke } from '@tauri-apps/api/core'
 import TitleBar from './components/TitleBar.vue'
 import NavRail from './components/NavRail.vue'
-import MiniTimer from './views/MiniTimer.vue'
 import ToastNotification from './components/ToastNotification.vue'
 import { useSettingsStore } from './stores/settings'
+import { useToastStore } from './stores/toast'
 import { useTimerStore } from './stores/timer'
+import { useRecurringStore } from './stores/recurring'
+import { loadAndApplyTimerFont } from './utils/fonts'
+import { loadAndApplyUIFont } from './utils/uiFonts'
+import { useAnnouncer } from './composables/useAnnouncer'
+import { audioEngine, DEFAULT_EVENTS } from './utils/audio'
+import type { SoundEvent } from './utils/audio'
+import TourOverlay from './components/TourOverlay.vue'
+import RecurringPromptDialog from './components/RecurringPromptDialog.vue'
+import { useOnboardingStore } from './stores/onboarding'
+import { useProjectsStore } from './stores/projects'
+import { useInvoicesStore } from './stores/invoices'
 
 const settingsStore = useSettingsStore()
-// Detect mini timer by Tauri window label — no routing needed
-const isMiniTimer = getCurrentWindow().label === 'mini-timer'
+const recurringStore = useRecurringStore()
+const { announcement } = useAnnouncer()
+
+function getProjectName(projectId?: number): string {
+  if (!projectId) return ''
+  const projectsStore = useProjectsStore()
+  return projectsStore.projects.find(p => p.id === projectId)?.name || ''
+}
+
+function getProjectColor(projectId?: number): string {
+  if (!projectId) return '#6B7280'
+  const projectsStore = useProjectsStore()
+  return projectsStore.projects.find(p => p.id === projectId)?.color || '#6B7280'
+}
 
 async function registerShortcuts() {
   try {
@@ -53,51 +76,205 @@ function applyTheme() {
   el.setAttribute('data-accent', accent)
 }
 
+function applyMotion() {
+  const setting = settingsStore.settings.reduce_motion || 'system'
+  const el = document.documentElement
+  if (setting === 'on') {
+    el.classList.add('reduce-motion')
+  } else if (setting === 'off') {
+    el.classList.remove('reduce-motion')
+  } else {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      el.classList.add('reduce-motion')
+    } else {
+      el.classList.remove('reduce-motion')
+    }
+  }
+}
+
 onMounted(async () => {
   await settingsStore.fetchSettings()
+
+  const onboardingStore = useOnboardingStore()
+  await onboardingStore.load()
+
+  const timerStore = useTimerStore()
+  await timerStore.restoreState()
+
   const zoom = parseInt(settingsStore.settings.ui_zoom) || 100
   const app = document.getElementById('app')
   if (app) {
     (app.style as any).zoom = `${zoom}%`
   }
   applyTheme()
+  applyMotion()
+  loadAndApplyTimerFont(settingsStore.settings.timer_font || 'JetBrains Mono')
+
+  const dyslexiaMode = settingsStore.settings.dyslexia_mode === 'true'
+  if (dyslexiaMode) {
+    loadAndApplyUIFont('OpenDyslexic')
+  } else {
+    const uiFont = settingsStore.settings.ui_font
+    if (uiFont && uiFont !== 'Inter') {
+      loadAndApplyUIFont(uiFont)
+    }
+  }
+
+  // Load audio settings
+  const soundEnabled = settingsStore.settings.sound_enabled === 'true'
+  const soundMode = (settingsStore.settings.sound_mode || 'synthesized') as 'synthesized' | 'system' | 'custom'
+  const soundVolume = parseInt(settingsStore.settings.sound_volume) || 70
+  let soundEvents: Record<string, boolean> = {}
+  try {
+    soundEvents = JSON.parse(settingsStore.settings.sound_events || '{}')
+  } catch { /* use defaults */ }
+
+  audioEngine.updateSettings({
+    enabled: soundEnabled,
+    mode: soundMode,
+    volume: soundVolume,
+    events: { ...DEFAULT_EVENTS, ...soundEvents } as Record<SoundEvent, boolean>,
+  })
+
+  // Initialize persistent notifications setting
+  const toastStore = useToastStore()
+  toastStore.setPersistentNotifications(settingsStore.settings.persistent_notifications === 'true')
+
+  await recurringStore.fetchEntries()
+  recurringStore.checkRecurrences()
+  setInterval(() => recurringStore.checkRecurrences(), 60000)
+
+  // Background calendar sync
+  async function syncCalendars() {
+    try {
+      const sources = await invoke<any[]>('get_calendar_sources')
+      for (const source of sources) {
+        if (source.source_type === 'url' && source.enabled && source.url) {
+          try {
+            const resp = await fetch(source.url)
+            if (resp.ok) {
+              const content = await resp.text()
+              await invoke('import_ics_file', { sourceId: source.id, content })
+            }
+          } catch (e) {
+            console.error('Calendar sync failed for', source.name, e)
+          }
+        }
+      }
+    } catch (e) {
+      console.error('Failed to sync calendars:', e)
+    }
+  }
+
+  syncCalendars()
+  setInterval(syncCalendars, 30 * 60000)
+
+  const invoicesStore = useInvoicesStore()
+  await invoicesStore.fetchInvoices()
+  await invoicesStore.checkOverdue()
+
   registerShortcuts()
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
     if (settingsStore.settings.theme_mode === 'system') applyTheme()
   })
+
+  window.matchMedia('(prefers-reduced-motion: reduce)').addEventListener('change', () => {
+    if (settingsStore.settings.reduce_motion === 'system' || !settingsStore.settings.reduce_motion) {
+      applyMotion()
+    }
+  })
 })
 
 watch(() => [settingsStore.settings.theme_mode, settingsStore.settings.accent_color], () => {
   applyTheme()
 })
 
+watch(() => settingsStore.settings.reduce_motion, () => {
+  applyMotion()
+})
+
+watch(() => settingsStore.settings.timer_font, (newFont) => {
+  if (newFont) loadAndApplyTimerFont(newFont)
+})
+
+watch(() => settingsStore.settings.dyslexia_mode, (val) => {
+  if (val === 'true') {
+    loadAndApplyUIFont('OpenDyslexic')
+  } else {
+    const uiFont = settingsStore.settings.ui_font || 'Inter'
+    loadAndApplyUIFont(uiFont)
+  }
+})
+
+watch(() => settingsStore.settings.ui_font, (newFont) => {
+  if (settingsStore.settings.dyslexia_mode !== 'true' && newFont) {
+    loadAndApplyUIFont(newFont)
+  }
+})
+
 watch(() => [settingsStore.settings.shortcut_toggle_timer, settingsStore.settings.shortcut_show_app], () => {
   registerShortcuts()
 })
+
+watch(() => settingsStore.settings.sound_enabled, (val) => {
+  audioEngine.updateSettings({ enabled: val === 'true' })
+})
+
+watch(() => settingsStore.settings.sound_mode, (val) => {
+  if (val) audioEngine.updateSettings({ mode: val as 'synthesized' | 'system' | 'custom' })
+})
+
+watch(() => settingsStore.settings.sound_volume, (val) => {
+  audioEngine.updateSettings({ volume: parseInt(val) || 70 })
+})
+
+watch(() => settingsStore.settings.sound_events, (val) => {
+  if (val) {
+    try {
+      const parsed = JSON.parse(val)
+      audioEngine.updateSettings({ events: { ...DEFAULT_EVENTS, ...parsed } as Record<SoundEvent, boolean> })
+    } catch { /* ignore parse errors */ }
+  }
+})
+
+watch(() => settingsStore.settings.persistent_notifications, (val) => {
+  const toastStore = useToastStore()
+  toastStore.setPersistentNotifications(val === 'true')
+})
 </script>
 
 <template>
-  <!-- Mini timer: detected by window label, rendered directly (no routing) -->
-  <div v-if="isMiniTimer" class="h-full w-full bg-bg-base">
-    <MiniTimer />
-  </div>
-
-  <!-- Normal app shell -->
-  <template v-else>
-    <div class="h-full w-full flex flex-col bg-bg-base">
-      <TitleBar />
-      <div class="flex-1 flex overflow-hidden">
-        <NavRail />
-        <main class="flex-1 overflow-auto">
-          <router-view v-slot="{ Component }">
-            <Transition name="page" mode="out-in" :duration="{ enter: 250, leave: 150 }">
-              <component :is="Component" :key="$route.path" />
-            </Transition>
-          </router-view>
-        </main>
-      </div>
+  <a href="#main-content" class="sr-only sr-only-focusable fixed top-0 left-0 z-[200] bg-accent text-white px-4 py-2 rounded-br-lg">
+    Skip to main content
+  </a>
+  <div class="h-full w-full flex flex-col bg-bg-base">
+    <TitleBar />
+    <div class="flex-1 flex overflow-hidden">
+      <NavRail />
+      <main id="main-content" class="flex-1 overflow-auto" tabindex="-1">
+        <router-view v-slot="{ Component }">
+          <Transition name="page" mode="out-in" :duration="{ enter: 250, leave: 150 }">
+            <component :is="Component" :key="$route.path" />
+          </Transition>
+        </router-view>
+      </main>
     </div>
-    <ToastNotification />
-  </template>
+  </div>
+  <ToastNotification />
+  <RecurringPromptDialog
+    :show="recurringStore.pendingPrompt !== null"
+    :project-name="getProjectName(recurringStore.pendingPrompt?.project_id)"
+    :project-color="getProjectColor(recurringStore.pendingPrompt?.project_id)"
+    :task-name="''"
+    :description="recurringStore.pendingPrompt?.description || ''"
+    :duration="recurringStore.pendingPrompt?.duration || 0"
+    :time-of-day="recurringStore.pendingPrompt?.time_of_day || ''"
+    @confirm="recurringStore.confirmPrompt()"
+    @snooze="recurringStore.snoozePrompt()"
+    @skip="recurringStore.skipPrompt()"
+  />
+  <div id="route-announcer" class="sr-only" aria-live="polite" aria-atomic="true"></div>
+  <div id="announcer" class="sr-only" aria-live="assertive" aria-atomic="true">{{ announcement }}</div>
+  <TourOverlay />
 </template>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 8705545..555e6e8 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -3,11 +3,16 @@
     <!-- Sidebar -->
     <aside class="w-44 bg-bg-surface border-r border-border-subtle shrink-0 p-3">
       <h1 class="text-[0.8125rem] font-medium text-text-tertiary uppercase tracking-[0.08em] px-2 mb-3">Settings</h1>
-      <nav class="flex flex-col gap-0.5">
+      <nav role="tablist" aria-label="Settings sections" aria-orientation="vertical" @keydown="onTabKeydown" class="flex flex-col gap-0.5">
         <button
           v-for="tab in tabs"
           :key="tab.id"
           @click="activeTab = tab.id"
+          role="tab"
+          :aria-selected="activeTab === tab.id"
+          :aria-controls="'tabpanel-' + tab.id"
+          :id="'tab-' + tab.id"
+          :tabindex="activeTab === tab.id ? 0 : -1"
           class="relative flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[0.8125rem] transition-colors duration-150"
           :class="activeTab === tab.id
             ? 'bg-bg-elevated text-text-primary'
@@ -17,8 +22,9 @@
           <div
             v-if="activeTab === tab.id"
             class="absolute left-0 top-1.5 bottom-1.5 w-[2px] rounded-full bg-accent"
+            aria-hidden="true"
           />
-          <component :is="tab.icon" class="w-4 h-4 shrink-0" :stroke-width="1.5" />
+          <component :is="tab.icon" class="w-4 h-4 shrink-0" :stroke-width="1.5" aria-hidden="true" />
           {{ tab.label }}
         </button>
       </nav>
@@ -29,7 +35,7 @@
       <Transition name="fade" mode="out-in" :duration="{ enter: 200, leave: 150 }">
       <div :key="activeTab">
       <!-- General -->
-      <div v-if="activeTab === 'general'">
+      <div v-if="activeTab === 'general'" id="tabpanel-general" role="tabpanel" aria-labelledby="tab-general" tabindex="0">
         <h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-6">General</h2>
 
         <div class="flex items-center justify-between">
@@ -40,18 +46,20 @@
           <div class="flex items-center gap-2">
             <button
               @click="decreaseZoom"
+              aria-label="Decrease zoom"
               class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
               :disabled="zoomLevel <= 80"
             >
-              <Minus class="w-3.5 h-3.5" />
+              <Minus class="w-3.5 h-3.5" aria-hidden="true" />
             </button>
-            <span class="w-12 text-center text-sm font-mono text-text-primary">{{ zoomLevel }}%</span>
+            <span class="w-12 text-center text-sm font-mono text-text-primary" role="status" aria-live="polite">{{ zoomLevel }}%</span>
             <button
               @click="increaseZoom"
+              aria-label="Increase zoom"
               class="w-8 h-8 flex items-center justify-center border border-border-visible rounded-lg text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
               :disabled="zoomLevel >= 150"
             >
-              <Plus class="w-3.5 h-3.5" />
+              <Plus class="w-3.5 h-3.5" aria-hidden="true" />
             </button>
           </div>
         </div>
@@ -126,15 +134,250 @@
                 class="w-6 h-6 rounded-full border-2 transition-all hover:scale-110 cursor-pointer"
                 :class="accentColor === ac.value ? 'border-text-primary scale-110' : 'border-transparent'"
                 :style="{ backgroundColor: ac.color }"
-                :title="ac.label"
+                :aria-label="ac.label + ' accent color'"
+                :aria-pressed="accentColor === ac.value"
               />
             </div>
           </div>
         </div>
+
+        <div class="border-t border-border-subtle mt-5 pt-5">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Reduce motion</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Control animation behavior</p>
+            </div>
+            <div class="w-40">
+              <AppSelect
+                v-model="reduceMotion"
+                :options="reduceMotionOptions"
+                label-key="label"
+                value-key="value"
+                placeholder="System (default)"
+                :placeholder-value="'system'"
+                @update:model-value="saveReduceMotionSetting"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-border-subtle mt-5 pt-5">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Dyslexia-friendly mode</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Use OpenDyslexic font throughout the interface</p>
+            </div>
+            <button
+              @click="toggleDyslexiaMode"
+              role="switch"
+              :aria-checked="dyslexiaMode"
+              aria-label="Dyslexia-friendly mode"
+              :class="[
+                'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
+                dyslexiaMode ? 'bg-status-running' : 'bg-bg-elevated'
+              ]"
+            >
+              <span
+                :class="[
+                  'inline-block h-3.5 w-3.5 transform rounded-full bg-text-primary transition-transform duration-150',
+                  dyslexiaMode ? 'translate-x-[18px]' : 'translate-x-[3px]'
+                ]"
+              />
+            </button>
+          </div>
+
+          <div class="flex items-center justify-between mt-5">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">UI Font</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Choose a font for the interface</p>
+            </div>
+            <div class="w-56">
+              <AppSelect
+                v-model="uiFont"
+                :options="UI_FONTS"
+                label-key="label"
+                value-key="value"
+                placeholder="Inter (Default)"
+                :placeholder-value="'Inter'"
+                :disabled="dyslexiaMode"
+                @update:model-value="saveUIFontSetting"
+              >
+                <template #option="{ item, label }">
+                  <span :style="{ fontFamily: `'${item.value}', system-ui, sans-serif` }">{{ label }}</span>
+                </template>
+                <template #selected="{ label, isPlaceholder }">
+                  <span
+                    :class="isPlaceholder ? 'text-text-tertiary' : 'text-text-primary'"
+                    class="truncate"
+                    :style="{ fontFamily: `'${uiFont}', system-ui, sans-serif` }"
+                  >{{ label }}</span>
+                </template>
+              </AppSelect>
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-border-subtle mt-5 pt-5">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Sound effects</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Play audio cues for timer events</p>
+            </div>
+            <button
+              @click="toggleSoundEnabled"
+              role="switch"
+              :aria-checked="soundEnabled"
+              aria-label="Sound effects"
+              :class="[
+                'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
+                soundEnabled ? 'bg-status-running' : 'bg-bg-elevated'
+              ]"
+            >
+              <span
+                :class="[
+                  'inline-block h-3.5 w-3.5 transform rounded-full bg-text-primary transition-transform duration-150',
+                  soundEnabled ? 'translate-x-[18px]' : 'translate-x-[3px]'
+                ]"
+              />
+            </button>
+          </div>
+
+          <div v-if="soundEnabled" class="space-y-5 mt-5">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-[0.8125rem] text-text-primary">Sound mode</p>
+                <p class="text-[0.6875rem] text-text-tertiary mt-0.5">How sounds are generated</p>
+              </div>
+              <div class="w-48">
+                <AppSelect
+                  v-model="soundMode"
+                  :options="soundModes"
+                  label-key="label"
+                  value-key="value"
+                  placeholder="Synthesized"
+                  :placeholder-value="'synthesized'"
+                  @update:model-value="saveSoundSettings"
+                />
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-[0.8125rem] text-text-primary">Volume</p>
+                <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Audio cue loudness</p>
+              </div>
+              <div class="flex items-center gap-3">
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  step="1"
+                  v-model.number="soundVolume"
+                  @input="saveSoundSettings"
+                  aria-label="Sound volume"
+                  class="w-32 h-1 accent-accent bg-bg-elevated rounded-full appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:cursor-pointer"
+                />
+                <span class="text-[0.75rem] text-text-secondary font-mono w-10 text-right">{{ soundVolume }}%</span>
+              </div>
+            </div>
+
+            <div>
+              <p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium mb-3">Event sounds</p>
+              <div class="grid grid-cols-1 gap-2">
+                <div
+                  v-for="evt in soundEventsList"
+                  :key="evt.key"
+                  class="flex items-center justify-between py-1"
+                >
+                  <label :for="'sound-evt-' + evt.key" class="flex items-center gap-2.5 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      :id="'sound-evt-' + evt.key"
+                      :checked="soundEventsMap[evt.key]"
+                      @change="toggleSoundEvent(evt.key)"
+                      class="w-3.5 h-3.5 rounded border-border-visible bg-bg-inset accent-accent cursor-pointer"
+                    />
+                    <span class="text-[0.8125rem] text-text-primary">{{ evt.label }}</span>
+                  </label>
+                  <button
+                    @click="testSound(evt.key)"
+                    class="px-2 py-0.5 text-[0.6875rem] border border-border-subtle text-text-tertiary rounded hover:bg-bg-elevated hover:text-text-secondary transition-colors"
+                    :aria-label="'Test ' + evt.label + ' sound'"
+                  >
+                    Test
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-border-subtle mt-5 pt-5">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Getting Started checklist</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Show the onboarding guide on the Dashboard</p>
+            </div>
+            <div class="flex items-center gap-3">
+              <button
+                @click="onboardingStore.reset()"
+                class="px-2.5 py-1 text-[0.6875rem] border border-border-subtle text-text-tertiary rounded-md hover:bg-bg-elevated hover:text-text-secondary transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                aria-label="Reset getting started checklist progress"
+              >
+                Reset
+              </button>
+              <button
+                @click="onboardingStore.isDismissed ? onboardingStore.restore() : onboardingStore.dismiss()"
+                role="switch"
+                :aria-checked="!onboardingStore.isDismissed"
+                aria-label="Getting Started checklist"
+                class="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                :class="[
+                  'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
+                  !onboardingStore.isDismissed ? 'bg-status-running' : 'bg-bg-elevated'
+                ]"
+              >
+                <span
+                  :class="[
+                    'inline-block h-3.5 w-3.5 transform rounded-full bg-text-primary transition-transform duration-150',
+                    !onboardingStore.isDismissed ? 'translate-x-[18px]' : 'translate-x-[3px]'
+                  ]"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="border-t border-border-subtle mt-5 pt-5">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Persistent notifications</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Keep toast notifications visible until manually dismissed</p>
+            </div>
+            <button
+              @click="togglePersistentNotifications"
+              role="switch"
+              :aria-checked="persistentNotifications"
+              aria-label="Persistent notifications"
+              class="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+              :class="[
+                'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
+                persistentNotifications ? 'bg-status-running' : 'bg-bg-elevated'
+              ]"
+            >
+              <span
+                :class="[
+                  'inline-block h-3.5 w-3.5 transform rounded-full bg-text-primary transition-transform duration-150',
+                  persistentNotifications ? 'translate-x-[18px]' : 'translate-x-[3px]'
+                ]"
+              />
+            </button>
+          </div>
+        </div>
       </div>
 
       <!-- Timer -->
-      <div v-if="activeTab === 'timer'">
+      <div v-if="activeTab === 'timer'" id="tabpanel-timer" role="tabpanel" aria-labelledby="tab-timer" tabindex="0">
         <h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-6">Timer</h2>
 
         <div class="space-y-5">
@@ -146,6 +389,9 @@
             </div>
             <button
               @click="toggleIdleDetection"
+              role="switch"
+              :aria-checked="idleDetection"
+              aria-label="Idle detection"
               :class="[
                 'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
                 idleDetection ? 'bg-status-running' : 'bg-bg-elevated'
@@ -236,6 +482,67 @@
           <!-- Divider -->
           <div class="border-t border-border-subtle" />
 
+          <!-- Timeline Recording -->
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Record app timeline</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Capture which apps and windows are active while the timer runs. Data stays local.</p>
+            </div>
+            <button
+              @click="toggleTimelineRecording"
+              role="switch"
+              :aria-checked="timelineRecording"
+              aria-label="Record app timeline"
+              :class="[
+                'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
+                timelineRecording ? 'bg-status-running' : 'bg-bg-elevated'
+              ]"
+            >
+              <span
+                :class="[
+                  'inline-block h-3.5 w-3.5 transform rounded-full bg-text-primary transition-transform duration-150',
+                  timelineRecording ? 'translate-x-[18px]' : 'translate-x-[3px]'
+                ]"
+              />
+            </button>
+          </div>
+
+          <!-- Divider -->
+          <div class="border-t border-border-subtle" />
+
+          <!-- Timer Font -->
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Timer Font</p>
+              <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Monospace font for timer display</p>
+            </div>
+            <div class="w-56">
+              <AppSelect
+                v-model="timerFont"
+                :options="timerFontOptions"
+                label-key="label"
+                value-key="value"
+                placeholder="JetBrains Mono"
+                :placeholder-value="'JetBrains Mono'"
+                @update:model-value="saveTimerFontSetting"
+              >
+                <template #option="{ item, label }">
+                  <span :style="{ fontFamily: `'${item.value}', monospace` }">{{ label }}</span>
+                </template>
+                <template #selected="{ label, isPlaceholder }">
+                  <span
+                    :class="isPlaceholder ? 'text-text-tertiary' : 'text-text-primary'"
+                    class="truncate"
+                    :style="{ fontFamily: `'${timerFont}', monospace` }"
+                  >{{ label }}</span>
+                </template>
+              </AppSelect>
+            </div>
+          </div>
+
+          <!-- Divider -->
+          <div class="border-t border-border-subtle" />
+
           <!-- Keyboard Shortcuts -->
           <h3 class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">Keyboard Shortcuts</h3>
 
@@ -244,12 +551,10 @@
               <p class="text-[0.8125rem] text-text-primary">Toggle Timer</p>
               <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Start/stop the active timer</p>
             </div>
-            <input
-              v-model="shortcutToggleTimer"
-              type="text"
-              class="w-48 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.75rem] text-text-primary font-mono text-center focus:outline-none focus:border-border-visible"
-              placeholder="CmdOrCtrl+Shift+T"
-              @change="saveShortcutSettings"
+            <AppShortcutRecorder
+              :model-value="shortcutToggleTimer"
+              @update:model-value="(v: string) => { shortcutToggleTimer = v; saveShortcutSettings() }"
+              label="Toggle timer shortcut"
             />
           </div>
 
@@ -258,12 +563,10 @@
               <p class="text-[0.8125rem] text-text-primary">Show App</p>
               <p class="text-[0.6875rem] text-text-tertiary mt-0.5">Bring the app to front</p>
             </div>
-            <input
-              v-model="shortcutShowApp"
-              type="text"
-              class="w-48 px-3 py-1.5 bg-bg-inset border border-border-subtle rounded-lg text-[0.75rem] text-text-primary font-mono text-center focus:outline-none focus:border-border-visible"
-              placeholder="CmdOrCtrl+Shift+Z"
-              @change="saveShortcutSettings"
+            <AppShortcutRecorder
+              :model-value="shortcutShowApp"
+              @update:model-value="(v: string) => { shortcutShowApp = v; saveShortcutSettings() }"
+              label="Show app shortcut"
             />
           </div>
 
@@ -304,11 +607,203 @@
               @update:model-value="saveGoalSettings"
             />
           </div>
+
+          <!-- Divider -->
+          <div class="border-t border-border-subtle" />
+
+          <!-- Recurring Entries -->
+          <h3 class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] font-medium">Recurring Entries</h3>
+
+          <div v-if="recurringEntries.length > 0" class="space-y-2">
+            <div
+              v-for="rec in recurringEntries"
+              :key="rec.id"
+              class="flex items-center justify-between py-2 px-3 bg-bg-inset rounded-lg"
+            >
+              <div class="flex-1 min-w-0">
+                <p class="text-[0.8125rem] text-text-primary truncate">
+                  {{ getProjectName(rec.project_id) }}
+                  <span v-if="rec.description" class="text-text-tertiary"> - {{ rec.description }}</span>
+                </p>
+                <p class="text-[0.6875rem] text-text-tertiary">
+                  {{ formatRecurrenceRule(rec.recurrence_rule) }} at {{ rec.time_of_day }} - {{ formatDuration(rec.duration) }} - {{ formatMode(rec.mode) }}
+                </p>
+              </div>
+              <div class="flex items-center gap-2 ml-3">
+                <button
+                  @click="recurringStore.toggleEnabled(rec)"
+                  role="switch"
+                  :aria-checked="rec.enabled === 1"
+                  :aria-label="'Toggle ' + (rec.description || 'recurring entry')"
+                  :class="[
+                    'relative inline-flex h-4 w-7 items-center rounded-full transition-colors duration-150',
+                    rec.enabled === 1 ? 'bg-status-running' : 'bg-bg-elevated'
+                  ]"
+                >
+                  <span
+                    :class="[
+                      'inline-block h-3 w-3 transform rounded-full bg-text-primary transition-transform duration-150',
+                      rec.enabled === 1 ? 'translate-x-[13px]' : 'translate-x-[2px]'
+                    ]"
+                  />
+                </button>
+                <button
+                  @click="editRecurringEntry(rec)"
+                  class="text-text-tertiary hover:text-text-primary transition-colors"
+                  :aria-label="'Edit ' + (rec.description || 'recurring entry')"
+                >
+                  <Pencil class="w-3.5 h-3.5" />
+                </button>
+                <button
+                  @click="deleteRecurringEntry(rec.id!)"
+                  class="text-text-tertiary hover:text-status-error transition-colors"
+                  :aria-label="'Delete ' + (rec.description || 'recurring entry')"
+                >
+                  <Trash2 class="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="!showRecurringForm">
+            <button
+              @click="showRecurringForm = true; resetRecurringForm()"
+              class="flex items-center gap-1.5 text-[0.8125rem] text-accent-text hover:text-accent transition-colors"
+            >
+              <Plus class="w-3.5 h-3.5" />
+              Add recurring entry
+            </button>
+          </div>
+
+          <!-- Add/Edit Recurring Entry Form (inline) -->
+          <div v-if="showRecurringForm" class="space-y-4 p-4 bg-bg-inset rounded-lg border border-border-subtle">
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project</label>
+                <AppSelect
+                  v-model="recProjectId"
+                  :options="recProjects"
+                  label-key="name"
+                  value-key="id"
+                  placeholder="Select project"
+                />
+              </div>
+              <div>
+                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Task</label>
+                <AppSelect
+                  v-model="recTaskId"
+                  :options="recTasks"
+                  label-key="name"
+                  value-key="id"
+                  placeholder="No task"
+                  :disabled="!recProjectId"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Description</label>
+              <input
+                v-model="recDescription"
+                type="text"
+                class="w-full px-3 py-2 bg-bg-base border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+                placeholder="What is this for?"
+              />
+            </div>
+
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Duration</label>
+                <AppNumberInput
+                  v-model="recDurationMinutes"
+                  :min="1"
+                  :max="480"
+                  :step="5"
+                  :precision="0"
+                  suffix="min"
+                />
+              </div>
+              <div>
+                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Time of Day</label>
+                <input
+                  v-model="recTimeOfDay"
+                  type="time"
+                  class="w-full px-3 py-2 bg-bg-base border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+                />
+              </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Schedule</label>
+                <AppSelect
+                  v-model="recPattern"
+                  :options="recurrencePatterns"
+                  label-key="label"
+                  value-key="value"
+                />
+              </div>
+              <div>
+                <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Mode</label>
+                <AppSelect
+                  v-model="recMode"
+                  :options="recurringModes"
+                  label-key="label"
+                  value-key="value"
+                />
+              </div>
+            </div>
+
+            <!-- Weekly day picker -->
+            <div v-if="recPattern === 'weekly'" class="flex gap-2">
+              <button
+                v-for="day in weekDays"
+                :key="day.value"
+                @click="toggleWeekDay(day.value)"
+                :class="[
+                  'px-2 py-1 text-[0.75rem] rounded border transition-colors',
+                  recWeeklyDays.includes(day.value)
+                    ? 'bg-accent text-bg-base border-accent'
+                    : 'border-border-subtle text-text-secondary hover:bg-bg-elevated'
+                ]"
+              >
+                {{ day.label }}
+              </button>
+            </div>
+
+            <!-- Monthly day picker -->
+            <div v-if="recPattern === 'monthly'">
+              <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Day of month</label>
+              <AppNumberInput
+                v-model="recMonthlyDay"
+                :min="1"
+                :max="31"
+                :step="1"
+                :precision="0"
+              />
+            </div>
+
+            <div class="flex justify-end gap-2">
+              <button
+                @click="showRecurringForm = false; editingRecurring = null"
+                class="px-3 py-1.5 text-[0.75rem] border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                @click="saveRecurringEntry"
+                :disabled="!recProjectId"
+                class="px-3 py-1.5 text-[0.75rem] bg-accent text-bg-base rounded-lg hover:bg-accent-hover transition-colors disabled:opacity-40"
+              >
+                {{ editingRecurring ? 'Update' : 'Add' }}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
 
       <!-- Billing -->
-      <div v-if="activeTab === 'billing'">
+      <div v-if="activeTab === 'billing'" id="tabpanel-billing" role="tabpanel" aria-labelledby="tab-billing" tabindex="0">
         <h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-6">Billing</h2>
 
         <div class="flex items-center justify-between">
@@ -336,6 +831,9 @@
           </div>
           <button
             @click="toggleRounding"
+            role="switch"
+            :aria-checked="roundingEnabled"
+            aria-label="Time rounding"
             :class="[
               'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
               roundingEnabled ? 'bg-status-running' : 'bg-bg-elevated'
@@ -392,19 +890,21 @@
 
         <div class="space-y-4 max-w-md">
           <div>
-            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Business Name</label>
+            <label for="biz-name" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Business Name</label>
             <input
               v-model="businessName"
               type="text"
+              id="biz-name"
               class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
               placeholder="Your Company Name"
               @change="saveBusinessSettings"
             />
           </div>
           <div>
-            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Address</label>
+            <label for="biz-address" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Address</label>
             <textarea
               v-model="businessAddress"
+              id="biz-address"
               rows="3"
               class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible resize-none"
               placeholder="123 Business St&#10;City, State ZIP"
@@ -413,20 +913,22 @@
           </div>
           <div class="grid grid-cols-2 gap-4">
             <div>
-              <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Email</label>
+              <label for="biz-email" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Email</label>
               <input
                 v-model="businessEmail"
                 type="email"
+                id="biz-email"
                 class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                 placeholder="billing@company.com"
                 @change="saveBusinessSettings"
               />
             </div>
             <div>
-              <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Phone</label>
+              <label for="biz-phone" class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Phone</label>
               <input
                 v-model="businessPhone"
                 type="tel"
+                id="biz-phone"
                 class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
                 placeholder="(555) 123-4567"
                 @change="saveBusinessSettings"
@@ -440,7 +942,7 @@
                 v-if="businessLogo"
                 class="w-20 h-12 border border-border-subtle rounded flex items-center justify-center overflow-hidden bg-white"
               >
-                <img :src="businessLogo" class="max-w-full max-h-full object-contain" />
+                <img :src="businessLogo" alt="Business logo preview" class="max-w-full max-h-full object-contain" />
               </div>
               <div class="flex gap-2">
                 <button
@@ -463,8 +965,181 @@
         </div>
       </div>
 
+      <!-- Calendar -->
+      <div v-if="activeTab === 'calendar'" id="tabpanel-calendar" role="tabpanel" aria-labelledby="tab-calendar" tabindex="0">
+        <h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-6">Calendar</h2>
+
+        <p class="text-[0.6875rem] text-text-tertiary mb-4">Import ICS calendar files or subscribe to URLs to see external events on your calendar view.</p>
+
+        <!-- Source list -->
+        <div v-if="calendarSources.length > 0" class="space-y-2 mb-5">
+          <div
+            v-for="source in calendarSources"
+            :key="source.id"
+            class="flex items-center justify-between py-2.5 px-3 bg-bg-inset rounded-lg"
+          >
+            <div class="flex items-center gap-3 flex-1 min-w-0">
+              <component
+                :is="source.source_type === 'url' ? Globe : FileText"
+                class="w-4 h-4 shrink-0 text-text-tertiary"
+                :stroke-width="1.5"
+                aria-hidden="true"
+              />
+              <div class="min-w-0">
+                <p class="text-[0.8125rem] text-text-primary truncate">{{ source.name }}</p>
+                <p class="text-[0.6875rem] text-text-tertiary truncate">
+                  {{ source.source_type === 'url' ? source.url : 'Local file' }}
+                  <span v-if="source.last_synced"> - synced {{ formatSyncedDate(source.last_synced) }}</span>
+                </p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 ml-3">
+              <button
+                v-if="source.source_type === 'url'"
+                @click="syncCalendarSource(source)"
+                :disabled="syncingSourceId === source.id"
+                class="p-1.5 text-text-tertiary hover:text-text-primary transition-colors disabled:opacity-40"
+                :aria-label="'Sync ' + source.name"
+              >
+                <RefreshCw class="w-3.5 h-3.5" :class="syncingSourceId === source.id ? 'animate-spin' : ''" />
+              </button>
+              <button
+                @click="toggleCalendarSourceEnabled(source)"
+                role="switch"
+                :aria-checked="!!source.enabled"
+                :aria-label="'Toggle ' + source.name"
+                :class="[
+                  'relative inline-flex h-4 w-7 items-center rounded-full transition-colors duration-150',
+                  source.enabled ? 'bg-status-running' : 'bg-bg-elevated'
+                ]"
+              >
+                <span
+                  :class="[
+                    'inline-block h-3 w-3 transform rounded-full bg-text-primary transition-transform duration-150',
+                    source.enabled ? 'translate-x-[13px]' : 'translate-x-[2px]'
+                  ]"
+                />
+              </button>
+              <button
+                @click="deleteCalendarSource(source.id!)"
+                class="text-text-tertiary hover:text-status-error transition-colors"
+                :aria-label="'Delete ' + source.name"
+              >
+                <Trash2 class="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="py-6 text-center text-[0.75rem] text-text-tertiary mb-5">
+          No calendar sources added yet.
+        </div>
+
+        <!-- Add Source Form -->
+        <div v-if="!showCalendarForm">
+          <button
+            @click="showCalendarForm = true; resetCalendarForm()"
+            class="flex items-center gap-1.5 text-[0.8125rem] text-accent-text hover:text-accent transition-colors"
+          >
+            <Plus class="w-3.5 h-3.5" />
+            Add source
+          </button>
+        </div>
+
+        <div v-if="showCalendarForm" class="space-y-4 p-4 bg-bg-inset rounded-lg border border-border-subtle">
+          <div>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Name</label>
+            <input
+              v-model="calSourceName"
+              type="text"
+              class="w-full px-3 py-2 bg-bg-base border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              placeholder="My Calendar"
+            />
+          </div>
+
+          <div>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Type</label>
+            <div class="flex gap-2">
+              <button
+                @click="calSourceType = 'file'"
+                :class="[
+                  'px-3 py-1.5 text-[0.75rem] rounded-lg border transition-colors',
+                  calSourceType === 'file'
+                    ? 'bg-accent text-bg-base border-accent'
+                    : 'border-border-subtle text-text-secondary hover:bg-bg-elevated'
+                ]"
+              >
+                File
+              </button>
+              <button
+                @click="calSourceType = 'url'"
+                :class="[
+                  'px-3 py-1.5 text-[0.75rem] rounded-lg border transition-colors',
+                  calSourceType === 'url'
+                    ? 'bg-accent text-bg-base border-accent'
+                    : 'border-border-subtle text-text-secondary hover:bg-bg-elevated'
+                ]"
+              >
+                URL
+              </button>
+            </div>
+          </div>
+
+          <div v-if="calSourceType === 'url'">
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">URL</label>
+            <input
+              v-model="calSourceUrl"
+              type="url"
+              class="w-full px-3 py-2 bg-bg-base border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              placeholder="https://calendar.example.com/feed.ics"
+            />
+          </div>
+
+          <div v-if="calSourceType === 'url'">
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Sync Interval</label>
+            <div class="w-48">
+              <AppSelect
+                v-model="calSyncInterval"
+                :options="calSyncIntervalOptions"
+                label-key="label"
+                value-key="value"
+              />
+            </div>
+          </div>
+
+          <div v-if="calSourceType === 'file'">
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">ICS File</label>
+            <div class="flex items-center gap-3">
+              <button
+                @click="pickCalendarFile"
+                class="px-3 py-1.5 text-[0.75rem] border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors"
+              >
+                Choose File
+              </button>
+              <span v-if="calSelectedFileName" class="text-[0.75rem] text-text-secondary truncate">{{ calSelectedFileName }}</span>
+            </div>
+          </div>
+
+          <div class="flex justify-end gap-2">
+            <button
+              @click="showCalendarForm = false"
+              class="px-3 py-1.5 text-[0.75rem] border border-border-subtle text-text-secondary rounded-lg hover:bg-bg-elevated transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              @click="saveCalendarSource"
+              :disabled="!calSourceName || (calSourceType === 'url' && !calSourceUrl) || (calSourceType === 'file' && !calFileContent)"
+              class="px-3 py-1.5 text-[0.75rem] bg-accent text-bg-base rounded-lg hover:bg-accent-hover transition-colors disabled:opacity-40"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- Data -->
-      <div v-if="activeTab === 'data'">
+      <div v-if="activeTab === 'data'" id="tabpanel-data" role="tabpanel" aria-labelledby="tab-data" tabindex="0">
         <h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-6">Data</h2>
 
         <div class="space-y-6">
@@ -500,7 +1175,7 @@
                 @click="handleImportFile"
                 class="flex items-center gap-2 px-4 py-2 border border-border-visible text-text-primary text-xs rounded-lg hover:bg-bg-elevated transition-colors duration-150"
               >
-                <Upload class="w-3.5 h-3.5" />
+                <Upload class="w-3.5 h-3.5" aria-hidden="true" />
                 Choose File
               </button>
             </div>
@@ -511,9 +1186,16 @@
               <!-- CSV Preview -->
               <div v-if="importPreview.length > 0" class="overflow-x-auto mb-3">
                 <table class="text-[0.6875rem]">
-                  <tr v-for="(row, i) in importPreview" :key="i" :class="i === 0 ? 'text-text-tertiary font-medium' : 'text-text-secondary'">
-                    <td v-for="(cell, j) in row" :key="j" class="pr-4 py-0.5 whitespace-nowrap">{{ cell }}</td>
-                  </tr>
+                  <thead v-if="importPreview.length > 0">
+                    <tr class="text-text-tertiary font-medium">
+                      <th v-for="(cell, j) in importPreview[0]" :key="j" class="pr-4 py-0.5 whitespace-nowrap text-left font-medium">{{ cell }}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(row, i) in importPreview.slice(1)" :key="i" class="text-text-secondary">
+                      <td v-for="(cell, j) in row" :key="j" class="pr-4 py-0.5 whitespace-nowrap">{{ cell }}</td>
+                    </tr>
+                  </tbody>
                 </table>
               </div>
 
@@ -560,9 +1242,9 @@
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
       @click.self="showClearDataDialog = false"
     >
-      <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
-        <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Clear All Data</h2>
-        <p class="text-[0.75rem] text-text-secondary mb-4">
+      <div ref="clearDialogRef" role="alertdialog" aria-modal="true" aria-labelledby="clear-data-title" aria-describedby="clear-data-desc" class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm p-6">
+        <h2 id="clear-data-title" class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-2">Clear All Data</h2>
+        <p id="clear-data-desc" class="text-[0.75rem] text-text-secondary mb-4">
           Are you sure? This action cannot be undone.
         </p>
         <p class="text-[0.6875rem] text-status-error mb-6">
@@ -589,29 +1271,103 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, markRaw } from 'vue'
+import { ref, computed, watch, onMounted, markRaw } from 'vue'
 import { invoke } from '@tauri-apps/api/core'
-import { Settings as SettingsIcon, Clock, Receipt, Database, Plus, Minus, Upload } from 'lucide-vue-next'
+import { Settings as SettingsIcon, Clock, Receipt, Database, Calendar as CalendarIcon, Plus, Minus, Upload, Pencil, Trash2, RefreshCw, Globe, FileText } from 'lucide-vue-next'
 import { useSettingsStore } from '../stores/settings'
 import { useToastStore } from '../stores/toast'
+import { useOnboardingStore } from '../stores/onboarding'
+import { useRecurringStore } from '../stores/recurring'
+import type { RecurringEntry } from '../stores/recurring'
 import AppNumberInput from '../components/AppNumberInput.vue'
 import AppSelect from '../components/AppSelect.vue'
+import AppShortcutRecorder from '../components/AppShortcutRecorder.vue'
 import { LOCALES, getCurrencies, getCurrencySymbol } from '../utils/locale'
 import { parseCSV, mapTogglCSV, mapGenericCSV, type ImportEntry } from '../utils/import'
+import { TIMER_FONTS, loadGoogleFont, loadAndApplyTimerFont } from '../utils/fonts'
+import { UI_FONTS, loadUIFont } from '../utils/uiFonts'
+import { useFocusTrap } from '../utils/focusTrap'
+import { audioEngine, SOUND_EVENTS, DEFAULT_EVENTS } from '../utils/audio'
+import type { SoundEvent } from '../utils/audio'
 
 const settingsStore = useSettingsStore()
 const toastStore = useToastStore()
+const recurringStore = useRecurringStore()
+const onboardingStore = useOnboardingStore()
+const recurringEntries = computed(() => recurringStore.entries)
+
+// Recurring entry form state
+const showRecurringForm = ref(false)
+const editingRecurring = ref<RecurringEntry | null>(null)
+const recProjectId = ref<number | null>(null)
+const recTaskId = ref<number | null>(null)
+const recDescription = ref('')
+const recDurationMinutes = ref(60)
+const recPattern = ref('daily')
+const recWeeklyDays = ref<string[]>([])
+const recMonthlyDay = ref(1)
+const recTimeOfDay = ref('09:00')
+const recMode = ref('prompt')
+const recProjects = ref<Array<{ id: number; name: string; color: string }>>([])
+const recTasks = ref<Array<{ id: number; name: string }>>([])
+
+const weekDays = [
+  { value: 'mon', label: 'Mon' },
+  { value: 'tue', label: 'Tue' },
+  { value: 'wed', label: 'Wed' },
+  { value: 'thu', label: 'Thu' },
+  { value: 'fri', label: 'Fri' },
+  { value: 'sat', label: 'Sat' },
+  { value: 'sun', label: 'Sun' },
+]
+
+const recurrencePatterns = [
+  { value: 'daily', label: 'Daily' },
+  { value: 'weekdays', label: 'Weekdays (Mon-Fri)' },
+  { value: 'weekly', label: 'Weekly' },
+  { value: 'monthly', label: 'Monthly' },
+]
+
+const recurringModes = [
+  { value: 'auto_create', label: 'Auto-create entry' },
+  { value: 'prompt', label: 'Show notification' },
+  { value: 'prefill_timer', label: 'Pre-fill timer' },
+]
 
 // Tabs
 const tabs = [
   { id: 'general', label: 'General', icon: markRaw(SettingsIcon) },
   { id: 'timer', label: 'Timer', icon: markRaw(Clock) },
   { id: 'billing', label: 'Billing', icon: markRaw(Receipt) },
+  { id: 'calendar', label: 'Calendar', icon: markRaw(CalendarIcon) },
   { id: 'data', label: 'Data', icon: markRaw(Database) },
 ]
 
 const activeTab = ref('general')
 
+function onTabKeydown(e: KeyboardEvent) {
+  const tabIds = tabs.map(t => t.id)
+  const current = tabIds.indexOf(activeTab.value)
+  let next = current
+  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    e.preventDefault()
+    next = (current + 1) % tabIds.length
+  } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+    e.preventDefault()
+    next = (current - 1 + tabIds.length) % tabIds.length
+  } else if (e.key === 'Home') {
+    e.preventDefault()
+    next = 0
+  } else if (e.key === 'End') {
+    e.preventDefault()
+    next = tabIds.length - 1
+  } else {
+    return
+  }
+  activeTab.value = tabIds[next]
+  document.getElementById(`tab-${tabIds[next]}`)?.focus()
+}
+
 // Settings state
 const hourlyRate = ref(0)
 const idleDetection = ref(true)
@@ -627,6 +1383,28 @@ const themeMode = ref('dark')
 const accentColor = ref('amber')
 const shortcutToggleTimer = ref('CmdOrCtrl+Shift+T')
 const shortcutShowApp = ref('CmdOrCtrl+Shift+Z')
+const timelineRecording = ref(false)
+const timerFont = ref('JetBrains Mono')
+const timerFontOptions = TIMER_FONTS
+const reduceMotion = ref('system')
+const dyslexiaMode = ref(false)
+const uiFont = ref('Inter')
+
+// Notification settings
+const persistentNotifications = ref(false)
+
+// Sound settings
+const soundEnabled = ref(false)
+const soundMode = ref('synthesized')
+const soundVolume = ref(70)
+const soundEventsMap = ref<Record<SoundEvent, boolean>>({ ...DEFAULT_EVENTS })
+const soundEventsList = SOUND_EVENTS
+
+const soundModes = [
+  { value: 'synthesized', label: 'Synthesized' },
+  { value: 'system', label: 'System' },
+  { value: 'custom', label: 'Custom' },
+]
 
 // Goal settings
 const dailyGoalHours = ref(8)
@@ -676,14 +1454,192 @@ const accentColors = [
   { value: 'cyan', label: 'Cyan', color: '#06B6D4' },
 ]
 
+const reduceMotionOptions = [
+  { label: 'System (default)', value: 'system' },
+  { label: 'On', value: 'on' },
+  { label: 'Off', value: 'off' },
+]
+
 const appTrackingModes = [
   { value: 'auto', label: 'Auto-pause/resume' },
   { value: 'notify', label: 'Notify + auto-resume' },
   { value: 'prompt', label: 'Prompt user' },
 ]
 
+// Calendar source types
+interface CalendarSource {
+  id?: number
+  name: string
+  source_type: string
+  url?: string
+  last_synced?: string
+  sync_interval?: number
+  enabled: number
+}
+
+// Calendar source state
+const calendarSources = ref<CalendarSource[]>([])
+const showCalendarForm = ref(false)
+const calSourceName = ref('')
+const calSourceType = ref<'file' | 'url'>('file')
+const calSourceUrl = ref('')
+const calSyncInterval = ref(60)
+const calFileContent = ref('')
+const calSelectedFileName = ref('')
+const syncingSourceId = ref<number | null>(null)
+
+const calSyncIntervalOptions = [
+  { value: 15, label: 'Every 15 minutes' },
+  { value: 30, label: 'Every 30 minutes' },
+  { value: 60, label: 'Every hour' },
+  { value: 120, label: 'Every 2 hours' },
+]
+
+function resetCalendarForm() {
+  calSourceName.value = ''
+  calSourceType.value = 'file'
+  calSourceUrl.value = ''
+  calSyncInterval.value = 60
+  calFileContent.value = ''
+  calSelectedFileName.value = ''
+}
+
+function formatSyncedDate(dateStr: string): string {
+  try {
+    const d = new Date(dateStr)
+    const now = new Date()
+    const diffMs = now.getTime() - d.getTime()
+    const diffMin = Math.floor(diffMs / 60000)
+    if (diffMin < 1) return 'just now'
+    if (diffMin < 60) return `${diffMin}m ago`
+    const diffHours = Math.floor(diffMin / 60)
+    if (diffHours < 24) return `${diffHours}h ago`
+    const diffDays = Math.floor(diffHours / 24)
+    return `${diffDays}d ago`
+  } catch {
+    return dateStr
+  }
+}
+
+async function fetchCalendarSources() {
+  try {
+    calendarSources.value = await invoke<CalendarSource[]>('get_calendar_sources')
+  } catch (e) {
+    console.error('Failed to fetch calendar sources:', e)
+  }
+}
+
+async function pickCalendarFile() {
+  try {
+    const { open: openFileDialog } = await import('@tauri-apps/plugin-dialog')
+    const selected = await openFileDialog({
+      filters: [{ name: 'ICS Calendar Files', extensions: ['ics'] }]
+    })
+    if (!selected) return
+
+    const { readTextFile } = await import('@tauri-apps/plugin-fs')
+    const content: string = await readTextFile(selected as string)
+    calFileContent.value = content
+    calSelectedFileName.value = (selected as string).split(/[/\\]/).pop() || 'file.ics'
+  } catch (e) {
+    console.error('Failed to read ICS file:', e)
+    toastStore.error('Failed to read calendar file')
+  }
+}
+
+async function saveCalendarSource() {
+  if (!calSourceName.value) return
+
+  try {
+    const source: any = {
+      name: calSourceName.value,
+      sourceType: calSourceType.value,
+      enabled: 1,
+    }
+
+    if (calSourceType.value === 'url') {
+      source.url = calSourceUrl.value
+      source.syncInterval = calSyncInterval.value
+    }
+
+    const sourceId = await invoke<number>('create_calendar_source', { source })
+
+    // For file type, import the ICS content
+    if (calSourceType.value === 'file' && calFileContent.value) {
+      const count = await invoke<number>('import_ics_file', {
+        sourceId,
+        content: calFileContent.value
+      })
+      toastStore.success(`Imported ${count} events from ${calSelectedFileName.value}`)
+    }
+
+    showCalendarForm.value = false
+    resetCalendarForm()
+    await fetchCalendarSources()
+  } catch (e) {
+    console.error('Failed to create calendar source:', e)
+    toastStore.error('Failed to add calendar source')
+  }
+}
+
+async function syncCalendarSource(source: CalendarSource) {
+  if (!source.id || !source.url) return
+  syncingSourceId.value = source.id
+
+  try {
+    const resp = await fetch(source.url)
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const content = await resp.text()
+    const count = await invoke<number>('import_ics_file', {
+      sourceId: source.id,
+      content
+    })
+    toastStore.success(`Synced ${count} events from ${source.name}`)
+    await fetchCalendarSources()
+  } catch (e) {
+    console.error('Calendar sync failed for', source.name, e)
+    toastStore.error(`Failed to sync ${source.name}`)
+  } finally {
+    syncingSourceId.value = null
+  }
+}
+
+async function toggleCalendarSourceEnabled(source: CalendarSource) {
+  if (!source.id) return
+  try {
+    const updated = { ...source, enabled: source.enabled ? 0 : 1, sourceType: source.source_type }
+    await invoke('update_calendar_source', { source: updated })
+    await fetchCalendarSources()
+  } catch (e) {
+    console.error('Failed to toggle calendar source:', e)
+  }
+}
+
+async function deleteCalendarSource(id: number) {
+  try {
+    await invoke('delete_calendar_source', { id })
+    await fetchCalendarSources()
+    toastStore.success('Calendar source removed')
+  } catch (e) {
+    console.error('Failed to delete calendar source:', e)
+    toastStore.error('Failed to remove calendar source')
+  }
+}
+
 // Dialog state
 const showClearDataDialog = ref(false)
+const clearDialogRef = ref<HTMLElement | null>(null)
+const { activate: activateClearTrap, deactivate: deactivateClearTrap } = useFocusTrap()
+
+watch(showClearDataDialog, (val) => {
+  if (val) {
+    setTimeout(() => {
+      if (clearDialogRef.value) activateClearTrap(clearDialogRef.value, { onDeactivate: () => { showClearDataDialog.value = false } })
+    }, 50)
+  } else {
+    deactivateClearTrap()
+  }
+})
 
 // Import state
 const importFormat = ref('toggl')
@@ -739,6 +1695,12 @@ function toggleIdleDetection() {
   saveSettings()
 }
 
+// Toggle timeline recording
+async function toggleTimelineRecording() {
+  timelineRecording.value = !timelineRecording.value
+  await settingsStore.updateSetting('timeline_recording', timelineRecording.value ? 'on' : 'off')
+}
+
 // Save settings (called on any change)
 async function saveSettings() {
   try {
@@ -766,18 +1728,196 @@ async function saveThemeSettings() {
   await settingsStore.updateSetting('accent_color', accentColor.value)
 }
 
+// Save reduce motion setting
+async function saveReduceMotionSetting() {
+  await settingsStore.updateSetting('reduce_motion', reduceMotion.value)
+}
+
+// Toggle dyslexia mode
+async function toggleDyslexiaMode() {
+  dyslexiaMode.value = !dyslexiaMode.value
+  await settingsStore.updateSetting('dyslexia_mode', dyslexiaMode.value ? 'true' : 'false')
+}
+
+// Save UI font setting
+async function saveUIFontSetting() {
+  await settingsStore.updateSetting('ui_font', uiFont.value)
+}
+
 // Save shortcut settings
 async function saveShortcutSettings() {
   await settingsStore.updateSetting('shortcut_toggle_timer', shortcutToggleTimer.value)
   await settingsStore.updateSetting('shortcut_show_app', shortcutShowApp.value)
 }
 
+// Save timer font setting
+async function saveTimerFontSetting() {
+  await settingsStore.updateSetting('timer_font', timerFont.value)
+  loadAndApplyTimerFont(timerFont.value)
+}
+
+// Toggle sound enabled
+async function toggleSoundEnabled() {
+  soundEnabled.value = !soundEnabled.value
+  await settingsStore.updateSetting('sound_enabled', soundEnabled.value ? 'true' : 'false')
+}
+
+// Toggle persistent notifications
+async function togglePersistentNotifications() {
+  persistentNotifications.value = !persistentNotifications.value
+  toastStore.setPersistentNotifications(persistentNotifications.value)
+  await settingsStore.updateSetting('persistent_notifications', persistentNotifications.value ? 'true' : 'false')
+}
+
+// Save sound settings
+async function saveSoundSettings() {
+  await settingsStore.updateSetting('sound_mode', soundMode.value)
+  await settingsStore.updateSetting('sound_volume', soundVolume.value.toString())
+}
+
+// Toggle individual sound event
+async function toggleSoundEvent(key: SoundEvent) {
+  soundEventsMap.value[key] = !soundEventsMap.value[key]
+  await settingsStore.updateSetting('sound_events', JSON.stringify(soundEventsMap.value))
+}
+
+// Test a sound event in the settings UI
+function testSound(key: SoundEvent) {
+  audioEngine.playTest(key)
+}
+
 // Save goal settings
 async function saveGoalSettings() {
   await settingsStore.updateSetting('daily_goal_hours', dailyGoalHours.value.toString())
   await settingsStore.updateSetting('weekly_goal_hours', weeklyGoalHours.value.toString())
 }
 
+// Watch recurring project to fetch tasks
+watch(recProjectId, async (pid) => {
+  if (pid) {
+    recTasks.value = await invoke('get_tasks', { projectId: pid })
+  } else {
+    recTasks.value = []
+  }
+  recTaskId.value = null
+})
+
+// Recurring entry helpers
+function getProjectName(id: number): string {
+  return recProjects.value.find(p => p.id === id)?.name || 'Unknown'
+}
+
+function formatRecurrenceRule(rule: string): string {
+  if (rule === 'daily') return 'Daily'
+  if (rule === 'weekdays') return 'Weekdays'
+  if (rule.startsWith('weekly:')) {
+    const days = rule.replace('weekly:', '').split(',')
+    return 'Weekly: ' + days.map(d => d.charAt(0).toUpperCase() + d.slice(1)).join(', ')
+  }
+  if (rule.startsWith('monthly:')) {
+    return 'Monthly on day ' + rule.replace('monthly:', '')
+  }
+  return rule
+}
+
+function formatMode(mode: string): string {
+  if (mode === 'auto_create') return 'Auto-create'
+  if (mode === 'prompt') return 'Notify'
+  if (mode === 'prefill_timer') return 'Pre-fill'
+  return mode
+}
+
+function formatDuration(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  if (h > 0 && m > 0) return `${h}h ${m}m`
+  if (h > 0) return `${h}h`
+  return `${m}m`
+}
+
+function buildRecurrenceRule(): string {
+  if (recPattern.value === 'weekly') {
+    return 'weekly:' + recWeeklyDays.value.join(',')
+  }
+  if (recPattern.value === 'monthly') {
+    return 'monthly:' + recMonthlyDay.value
+  }
+  return recPattern.value // 'daily' or 'weekdays'
+}
+
+function toggleWeekDay(day: string) {
+  const idx = recWeeklyDays.value.indexOf(day)
+  if (idx >= 0) {
+    recWeeklyDays.value.splice(idx, 1)
+  } else {
+    recWeeklyDays.value.push(day)
+  }
+}
+
+function resetRecurringForm() {
+  recProjectId.value = null
+  recTaskId.value = null
+  recDescription.value = ''
+  recDurationMinutes.value = 60
+  recPattern.value = 'daily'
+  recWeeklyDays.value = []
+  recMonthlyDay.value = 1
+  recTimeOfDay.value = '09:00'
+  recMode.value = 'prompt'
+}
+
+function editRecurringEntry(rec: RecurringEntry) {
+  editingRecurring.value = rec
+  recProjectId.value = rec.project_id
+  recTaskId.value = rec.task_id || null
+  recDescription.value = rec.description || ''
+  recDurationMinutes.value = Math.round(rec.duration / 60)
+  recTimeOfDay.value = rec.time_of_day
+  recMode.value = rec.mode
+
+  // Parse recurrence rule
+  if (rec.recurrence_rule === 'daily' || rec.recurrence_rule === 'weekdays') {
+    recPattern.value = rec.recurrence_rule
+  } else if (rec.recurrence_rule.startsWith('weekly:')) {
+    recPattern.value = 'weekly'
+    recWeeklyDays.value = rec.recurrence_rule.replace('weekly:', '').split(',')
+  } else if (rec.recurrence_rule.startsWith('monthly:')) {
+    recPattern.value = 'monthly'
+    recMonthlyDay.value = parseInt(rec.recurrence_rule.replace('monthly:', ''))
+  }
+
+  showRecurringForm.value = true
+}
+
+async function saveRecurringEntry() {
+  if (!recProjectId.value) return
+  const entry: RecurringEntry = {
+    id: editingRecurring.value?.id,
+    project_id: recProjectId.value,
+    task_id: recTaskId.value || undefined,
+    description: recDescription.value || undefined,
+    duration: recDurationMinutes.value * 60,
+    recurrence_rule: buildRecurrenceRule(),
+    time_of_day: recTimeOfDay.value,
+    mode: recMode.value as 'auto_create' | 'prompt' | 'prefill_timer',
+    enabled: 1,
+  }
+
+  if (editingRecurring.value?.id) {
+    await recurringStore.updateEntry(entry)
+  } else {
+    await recurringStore.createEntry(entry)
+  }
+
+  showRecurringForm.value = false
+  editingRecurring.value = null
+  resetRecurringForm()
+}
+
+async function deleteRecurringEntry(id: number) {
+  await recurringStore.deleteEntry(id)
+}
+
 // Toggle rounding
 function toggleRounding() {
   roundingEnabled.value = !roundingEnabled.value
@@ -945,5 +2085,38 @@ onMounted(async () => {
   businessEmail.value = settingsStore.settings.business_email || ''
   businessPhone.value = settingsStore.settings.business_phone || ''
   businessLogo.value = settingsStore.settings.business_logo || ''
+  timelineRecording.value = settingsStore.settings.timeline_recording === 'on'
+  timerFont.value = settingsStore.settings.timer_font || 'JetBrains Mono'
+  reduceMotion.value = settingsStore.settings.reduce_motion || 'system'
+  dyslexiaMode.value = settingsStore.settings.dyslexia_mode === 'true'
+  uiFont.value = settingsStore.settings.ui_font || 'Inter'
+
+  // Notification settings
+  persistentNotifications.value = settingsStore.settings.persistent_notifications === 'true'
+
+  // Sound settings
+  soundEnabled.value = settingsStore.settings.sound_enabled === 'true'
+  soundMode.value = settingsStore.settings.sound_mode || 'synthesized'
+  soundVolume.value = parseInt(settingsStore.settings.sound_volume) || 70
+  try {
+    const parsed = JSON.parse(settingsStore.settings.sound_events || '{}')
+    soundEventsMap.value = { ...DEFAULT_EVENTS, ...parsed }
+  } catch { /* use defaults */ }
+
+  // Preload all timer fonts for preview in dropdown
+  TIMER_FONTS.forEach(f => loadGoogleFont(f.value))
+
+  // Preload all UI fonts for preview in dropdown
+  UI_FONTS.forEach(f => loadUIFont(f.value))
+
+  // Load recurring entries and projects list
+  await recurringStore.fetchEntries()
+  recProjects.value = await invoke<Array<{ id: number; name: string; color: string }>>('get_projects')
+
+  // Load calendar sources
+  await fetchCalendarSources()
+
+  // Load onboarding state
+  await onboardingStore.load()
 })
 </script>