feat: add Dashboard/Setup tab bar to Home view for all UI modes
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:
parent
70bc71d035
commit
62aa3be63d
@ -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()`.
|
- **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
|
- **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`
|
- **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.
|
- **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
|
- **Verify**: Both tabs visible, Dashboard shows live data, Setup shows goal wizards
|
||||||
|
|||||||
@ -11,19 +11,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Easy Mode: Goal-based cards -->
|
<!-- Tab bar + content (all non-chat modes) -->
|
||||||
<EasyHome
|
<template v-if="!uiMode.isChat">
|
||||||
v-if="uiMode.isEasy"
|
<div class="mode-switcher mb-6 max-w-xs">
|
||||||
:show="!showWelcomeBlock || animateCards"
|
<button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': homeTab === 'dashboard' }" @click="homeTab = 'dashboard'">Dashboard</button>
|
||||||
:animate="animateCards"
|
<button class="mode-switcher-btn" :class="{ 'mode-switcher-btn-active': homeTab === 'setup' }" @click="homeTab = 'setup'">Setup</button>
|
||||||
/>
|
</div>
|
||||||
|
|
||||||
<!-- Pro Mode: Section overview cards -->
|
<!-- Setup tab: goal-based cards -->
|
||||||
<div
|
<EasyHome
|
||||||
v-else-if="uiMode.isGamer"
|
v-if="homeTab === 'setup'"
|
||||||
class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8 transition-opacity duration-300"
|
:show="!showWelcomeBlock || animateCards"
|
||||||
:class="{ 'opacity-0 pointer-events-none': 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 -->
|
<!-- My Apps Overview -->
|
||||||
<div
|
<div
|
||||||
data-controller-container
|
data-controller-container
|
||||||
@ -229,7 +236,7 @@
|
|||||||
|
|
||||||
<!-- Quick Start Goals - shown in Pro mode below the overview cards -->
|
<!-- Quick Start Goals - shown in Pro mode below the overview cards -->
|
||||||
<div
|
<div
|
||||||
v-if="uiMode.isGamer && showQuickStart"
|
v-if="homeTab === 'dashboard' && showQuickStart"
|
||||||
class="home-card"
|
class="home-card"
|
||||||
:class="{ 'home-card-animate': animateCards }"
|
:class="{ 'home-card-animate': animateCards }"
|
||||||
style="--card-stagger: 4"
|
style="--card-stagger: 4"
|
||||||
@ -265,6 +272,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- Chat Mode: redirect to Chat view -->
|
<!-- Chat Mode: redirect to Chat view -->
|
||||||
<div v-if="uiMode.isChat" class="flex flex-col items-center justify-center min-h-[40vh]">
|
<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">
|
<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 router = useRouter()
|
||||||
const uiMode = useUIModeStore()
|
const uiMode = useUIModeStore()
|
||||||
|
const homeTab = ref<'dashboard' | 'setup'>('dashboard')
|
||||||
const topGoals = GOALS.slice(0, 3)
|
const topGoals = GOALS.slice(0, 3)
|
||||||
|
|
||||||
// Apps required by the top 3 goals — if all installed, no need to show Quick Start
|
// Apps required by the top 3 goals — if all installed, no need to show Quick Start
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user