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

feat: add Dashboard/Setup tab bar to Home view for all UI modes

Browse Source 
Unified the Easy and Pro mode home views into a single tabbed interface.
Both modes now show Dashboard and Setup tabs, replacing the mode-specific
conditional rendering. Added missing homeTab ref that was referenced in
template but never declared.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-03-05 07:36:43 +00:00
parent 70bc71d035
commit 62aa3be63d
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.claude/plans/reflective-meandering-castle.md
View File

@ -64,7 +64,7 @@ After getting Claude Max OAuth working on the live server, hardening the deploy
- **Change**: Import `useAppStore` and `useAppLauncherStore`. Create computed `dynamicAppItems` from `store.packages`. Merge with static help tree items in Fuse search. When app item selected, call `launchApp()`.
- **Verify**: CMD+K, type app name, appears in results, click to launch
### Task 11: Setup/Dashboard tabs on Home
### Task 11: Setup/Dashboard tabs on Home [DONE]
- **Files**: `neode-ui/src/views/Home.vue`, `neode-ui/src/style.css`
- **Change**: Add tab bar with "Dashboard" and "Setup" tabs below welcome header. Dashboard tab: current overview cards. Setup tab: EasyHome goal cards (already imported). After completing all setup wizards, default to Dashboard. Use `.mode-switcher` pattern for tab styling.
- **Verify**: Both tabs visible, Dashboard shows live data, Setup shows goal wizards

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

@ -11,19 +11,26 @@
</div>
</div>
<!-- Easy Mode: Goal-based cards -->
<EasyHome
v-if="uiMode.isEasy"
:show="!showWelcomeBlock || animateCards"
:animate="animateCards"
/>
<!-- Tab bar + content (all non-chat modes) -->
<template v-if="!uiMode.isChat">
<div class="mode-switcher mb-6 max-w-xs">
<button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': homeTab === 'dashboard' }" @click="homeTab = 'dashboard'">Dashboard</button>
<button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': homeTab === 'setup' }" @click="homeTab = 'setup'">Setup</button>
</div>
<!-- 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 }"
>
<!-- Setup tab: goal-based cards -->
<EasyHome
v-if="homeTab === 'setup'"
:show="!showWelcomeBlock || animateCards"
:animate="animateCards"
/>
<!-- Dashboard tab: overview cards -->
<div
v-else
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 }"
>
<!-- My Apps Overview -->
<div
data-controller-container
@ -229,7 +236,7 @@
<!-- Quick Start Goals - shown in Pro mode below the overview cards -->
<div
v-if="uiMode.isGamer && showQuickStart"
v-if="homeTab === 'dashboard' && showQuickStart"
class="home-card"
:class="{ 'home-card-animate': animateCards }"
style="--card-stagger: 4"
@ -265,6 +272,8 @@
</div>
</div>
</template>
<!-- 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">
@ -289,6 +298,7 @@ import { fileBrowserClient } from '@/api/filebrowser-client'
const router = useRouter()
const uiMode = useUIModeStore()
const homeTab = ref<'dashboard' | 'setup'>('dashboard')
const topGoals = GOALS.slice(0, 3)
// Apps required by the top 3 goals — if all installed, no need to show Quick Start