feat: implement three-mode UI system (Easy / Pro / Chat)

Add switchable UI modes with conditional rendering:
- Easy mode: goal-based interface with 7 guided workflows
- Pro mode: current technical interface preserved with Quick Start Goals
- Chat mode: AIUI placeholder for future integration

New components: ModeSwitcher, EasyHome, GoalDetail wizard, Chat placeholder
New stores: uiMode (mode persistence), goals (progress tracking)
New data: goal definitions catalog, helpTree goals section
Modified: Dashboard (reactive nav), Home (mode dispatcher), Settings (mode picker),
Router (goal/chat routes), Spotlight (goal search integration)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-04 07:09:31 +00:00
co-authored by Claude Opus 4.6
parent 486fc39249
commit 7b044d22ef
17 changed files with 1108 additions and 103 deletions
+33
View File
@@ -0,0 +1,33 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import type { UIMode } from '@/types/api'
const STORAGE_KEY = 'archipelago-ui-mode'
export const useUIModeStore = defineStore('uiMode', () => {
const mode = ref<UIMode>(loadFromStorage())
function loadFromStorage(): UIMode {
const stored = localStorage.getItem(STORAGE_KEY)
if (stored === 'gamer' || stored === 'easy' || stored === 'chat') return stored
return 'gamer'
}
function syncFromBackend(backendMode: UIMode | undefined) {
if (backendMode && ['gamer', 'easy', 'chat'].includes(backendMode)) {
mode.value = backendMode
localStorage.setItem(STORAGE_KEY, backendMode)
}
}
function setMode(newMode: UIMode) {
mode.value = newMode
localStorage.setItem(STORAGE_KEY, newMode)
}
const isGamer = computed(() => mode.value === 'gamer')
const isEasy = computed(() => mode.value === 'easy')
const isChat = computed(() => mode.value === 'chat')
return { mode, setMode, syncFromBackend, isGamer, isEasy, isChat }
})