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
+26
View File
@@ -0,0 +1,26 @@
<template>
<div class="mode-switcher">
<button
v-for="m in modes"
:key="m.id"
@click="uiMode.setMode(m.id)"
class="mode-switcher-btn"
:class="{ 'mode-switcher-btn-active': uiMode.mode === m.id }"
>
{{ m.label }}
</button>
</div>
</template>
<script setup lang="ts">
import { useUIModeStore } from '@/stores/uiMode'
import type { UIMode } from '@/types/api'
const uiMode = useUIModeStore()
const modes: { id: UIMode; label: string }[] = [
{ id: 'easy', label: 'Easy' },
{ id: 'gamer', label: 'Pro' },
{ id: 'chat', label: 'Chat' },
]
</script>