From 08451876729bc551d503e27a372f6366173e2a6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Thu, 16 Apr 2026 22:55:58 -0400
Subject: [PATCH] refactor(sidebar): group nav into sidebarGroups instead of
 slice(0,3)+slice(3) (P2-27)

Move Core vs Collaborate grouping from implicit array index to explicit
sidebarGroups NavGroup[] structure surfaced from useUIController.
---
 src/renderer/App.tsx                  |  2 +-
 src/renderer/hooks/useUIController.ts | 18 ++++++++++++++---
 src/renderer/views/SidebarView.tsx    | 28 +++++++++++++--------------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 8138d094..f1db9d0a 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -170,7 +170,7 @@ export function App() {
         setSidebarCollapsed={ui.setSidebarCollapsed}
         section={ui.section}
         setSection={ui.setSection}
-        sidebarNav={ui.sidebarNav}
+        sidebarGroups={ui.sidebarGroups}
         navBadges={company.navBadges}
         companySwitcherOpen={ui.companySwitcherOpen}
         setCompanySwitcherOpen={ui.setCompanySwitcherOpen}
diff --git a/src/renderer/hooks/useUIController.ts b/src/renderer/hooks/useUIController.ts
index 52c44aa2..63a97877 100644
--- a/src/renderer/hooks/useUIController.ts
+++ b/src/renderer/hooks/useUIController.ts
@@ -23,12 +23,16 @@ import type { AppLocale } from "@shared/locale";
 
 type NavItemDef = { id: SectionId; labelKey: string; icon: typeof SquaresFour };
 export type NavItem = { id: SectionId; label: string; icon: typeof SquaresFour };
+export type NavGroup = { items: NavItem[] };
 export type PaletteAction = { key: string; section: SectionId; entityId?: string };
 
-const sidebarNavDefs: NavItemDef[] = [
+const sidebarCoreDefs: NavItemDef[] = [
   { id: "overview", labelKey: "nav.overview", icon: SquaresFour },
   { id: "inbox", labelKey: "nav.inbox", icon: Tray },
   { id: "communication", labelKey: "nav.communication", icon: ChatCircle },
+];
+
+const sidebarCollaborateDefs: NavItemDef[] = [
   { id: "tasks", labelKey: "nav.work", icon: ListChecks },
   { id: "approvals", labelKey: "nav.approvals", icon: ShieldCheck },
   { id: "agents", labelKey: "nav.agents", icon: UsersThree },
@@ -51,10 +55,17 @@ export function useUIController() {
   const locale = useAppStore((s) => s.locale);
   const t = useMemo(() => createTranslator(locale), [locale]);
 
-  const sidebarNav: NavItem[] = useMemo(
-    () => sidebarNavDefs.map((item) => ({ id: item.id, label: t(item.labelKey), icon: item.icon })),
+  const sidebarGroups: NavGroup[] = useMemo(
+    () => [
+      { items: sidebarCoreDefs.map((item) => ({ id: item.id, label: t(item.labelKey), icon: item.icon })) },
+      { items: sidebarCollaborateDefs.map((item) => ({ id: item.id, label: t(item.labelKey), icon: item.icon })) },
+    ],
     [t],
   );
+  const sidebarNav: NavItem[] = useMemo(
+    () => sidebarGroups.flatMap((group) => group.items),
+    [sidebarGroups],
+  );
   const navItems: NavItem[] = useMemo(
     () =>
       sidebarNav
@@ -160,6 +171,7 @@ export function useUIController() {
     t,
     handleLocaleChange,
     sidebarNav,
+    sidebarGroups,
     navItems,
     section,
     setSection,
diff --git a/src/renderer/views/SidebarView.tsx b/src/renderer/views/SidebarView.tsx
index 5c5688e6..5298b9a3 100644
--- a/src/renderer/views/SidebarView.tsx
+++ b/src/renderer/views/SidebarView.tsx
@@ -12,6 +12,7 @@ import { SectionButton } from "../components/ui";
 import { NEW_ENTITY_ID } from "../lib/constants";
 
 type NavItem = { id: SectionId; label: string; icon: typeof Gear };
+type NavGroup = { items: NavItem[] };
 
 interface SidebarViewProps {
   isMac: boolean;
@@ -19,7 +20,7 @@ interface SidebarViewProps {
   setSidebarCollapsed: (value: boolean) => void;
   section: SectionId;
   setSection: (section: SectionId) => void;
-  sidebarNav: NavItem[];
+  sidebarGroups: NavGroup[];
   navBadges: Partial<Record<SectionId, { count: number; tone: "default" | "warn" | "danger" }>>;
   companySwitcherOpen: boolean;
   setCompanySwitcherOpen: (value: boolean) => void;
@@ -39,7 +40,7 @@ export function SidebarView({
   setSidebarCollapsed,
   section,
   setSection,
-  sidebarNav,
+  sidebarGroups,
   navBadges,
   companySwitcherOpen,
   setCompanySwitcherOpen,
@@ -152,19 +153,16 @@ export function SidebarView({
         </div>
       )}
       <nav aria-label="Main navigation" className={`flex-1 overflow-y-auto pb-3 ${sidebarCollapsed ? "px-1.5 pt-2" : "px-3 pt-2"}`}>
-        {/* Core: Overview, Team, Work */}
-        <div className="space-y-0.5">
-          {sidebarNav.slice(0, 3).map((item) => (
-            <SectionButton key={item.id} active={section === item.id} label={item.label} icon={item.icon} onClick={() => setSection(item.id)} badge={navBadges[item.id]?.count} badgeTone={navBadges[item.id]?.tone} collapsed={sidebarCollapsed} />
-          ))}
-        </div>
-        <div className={`my-2 border-t border-border ${sidebarCollapsed ? "mx-1" : "mx-2"}`} />
-        {/* Collaborate & Extend: Communication, Skills, Documents, Approvals, Social */}
-        <div className="space-y-0.5">
-          {sidebarNav.slice(3).map((item) => (
-            <SectionButton key={item.id} active={section === item.id} label={item.label} icon={item.icon} onClick={() => setSection(item.id)} badge={navBadges[item.id]?.count} badgeTone={navBadges[item.id]?.tone} collapsed={sidebarCollapsed} />
-          ))}
-        </div>
+        {sidebarGroups.map((group, idx) => (
+          <div key={idx}>
+            {idx > 0 ? <div className={`my-2 border-t border-border ${sidebarCollapsed ? "mx-1" : "mx-2"}`} /> : null}
+            <div className="space-y-0.5">
+              {group.items.map((item) => (
+                <SectionButton key={item.id} active={section === item.id} label={item.label} icon={item.icon} onClick={() => setSection(item.id)} badge={navBadges[item.id]?.count} badgeTone={navBadges[item.id]?.tone} collapsed={sidebarCollapsed} />
+              ))}
+            </div>
+          </div>
+        ))}
       </nav>
       <div className={`border-t border-border py-2 ${sidebarCollapsed ? "px-1.5" : "px-3"}`}>
         <SectionButton