lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

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

Browse Source 
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
parent 486fc39249
commit 7b044d22ef
17 changed files with 1108 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
neode-ui/src/views/Home.vue
View File

@@ -11,8 +11,16 @@
</div>
</div>
<!-- Section Overviews - 2advanced staggered animation (hidden until typing starts, then animate with typing) -->
<!-- Easy Mode: Goal-based cards -->
<EasyHome
v-if="uiMode.isEasy"
:show="!showWelcomeBlock || animateCards"
:animate="animateCards"
/>
<!-- Pro Mode: Section overview cards -->
<div
v-else-if="uiMode.isGamer"
class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8 transition-opacity duration-300"
:class="{ 'opacity-0 pointer-events-none': showWelcomeBlock && !animateCards }"
>
@@ -219,43 +227,28 @@
</div>
</div>
<!-- Quick Actions - Hidden for now -->
<!--
<div class="path-option-card cursor-default px-6 py-6">
<h2 class="text-xl font-semibold text-white/96 mb-4">Quick Actions</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Quick Start Goals - shown in Pro mode below the overview cards -->
<div v-if="uiMode.isGamer" class="path-option-card cursor-default px-6 py-6">
<h2 class="text-xl font-semibold text-white/96 mb-2">Quick Start Goals</h2>
<p class="text-sm text-white/60 mb-4">Not sure where to start? Try a guided setup.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<RouterLink
to="/dashboard/marketplace"
v-for="goal in topGoals"
:key="goal.id"
:to="`/dashboard/goals/${goal.id}`"
class="path-action-button path-action-button--continue flex items-center justify-center gap-3"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span>Browse App Store</span>
</RouterLink>
<RouterLink
to="/dashboard/apps"
class="path-action-button path-action-button--continue flex items-center justify-center gap-3"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
<span>Manage My Apps</span>
</RouterLink>
<RouterLink
to="/dashboard/server"
class="path-action-button path-action-button--continue flex items-center justify-center gap-3"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
</svg>
<span>Server Settings</span>
<span>{{ goal.title }}</span>
</RouterLink>
</div>
</div>
-->
<!-- Chat Mode: redirect to Chat view -->
<div v-if="uiMode.isChat" class="flex flex-col items-center justify-center min-h-[40vh]">
<RouterLink to="/dashboard/chat" class="glass-button rounded-lg px-8 py-4 text-lg font-medium">
Open AI Assistant
</RouterLink>
</div>
</div>
</template>
@@ -264,8 +257,14 @@ import { computed, ref, watch, onBeforeUnmount } from 'vue'
import { RouterLink } from 'vue-router'
import { useAppStore } from '../stores/app'
import { useLoginTransitionStore } from '../stores/loginTransition'
import { useUIModeStore } from '@/stores/uiMode'
import { PackageState } from '../types/api'
import { playTypingSound } from '@/composables/useLoginSounds'
import { GOALS } from '@/data/goals'
import EasyHome from '@/components/EasyHome.vue'
const uiMode = useUIModeStore()
const topGoals = GOALS.slice(0, 3)
const store = useAppStore()
const loginTransition = useLoginTransitionStore()