From 62aa3be63d305292fa9954d8a44f4cc145a31766 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Thu, 5 Mar 2026 07:36:43 +0000
Subject: [PATCH] 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>
---
 .claude/plans/reflective-meandering-castle.md |  2 +-
 neode-ui/src/views/Home.vue                   | 36 ++++++++++++-------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/.claude/plans/reflective-meandering-castle.md b/.claude/plans/reflective-meandering-castle.md
index 4c3e5700..bd3dadb0 100644
--- a/.claude/plans/reflective-meandering-castle.md
+++ b/.claude/plans/reflective-meandering-castle.md
@@ -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
diff --git a/neode-ui/src/views/Home.vue b/neode-ui/src/views/Home.vue
index bebdf8e5..3b540a0c 100644
--- a/neode-ui/src/views/Home.vue
+++ b/neode-ui/src/views/Home.vue
@@ -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