From c1c7dc0d49ab6a21da2c795d59f4b2e0531a7a7a 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, 21 May 2026 17:28:18 -0400
Subject: [PATCH] Align shell sidebar and icons with design spec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add search bar with ⌘K hint between org logo and nav in sidebar
- Move Settings nav item to bottom section above sidebar footer
- Fix minimize button icon from MoreHorizontal to Minus on non-macOS
- Replace work/social nav icons with design-spec custom SVG paths
- Add --r-xl and --shadow-md CSS tokens from design system
- Set letter-spacing -0.005em and font-feature-settings on body
---
 .../src/renderer/src/shared/Shell.tsx         | 35 ++++++++++++++-----
 .../src/renderer/src/shared/ui.tsx            | 27 +++++++++++---
 AgentCompany-New/src/renderer/src/styles.css  | 24 +++++++++++--
 3 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/AgentCompany-New/src/renderer/src/shared/Shell.tsx b/AgentCompany-New/src/renderer/src/shared/Shell.tsx
index 3f69eb9e..e486239d 100644
--- a/AgentCompany-New/src/renderer/src/shared/Shell.tsx
+++ b/AgentCompany-New/src/renderer/src/shared/Shell.tsx
@@ -4,7 +4,7 @@ import { Avatar, Icon, IconButton } from "./ui";
 
 export type RouteId = "home" | "team" | "work" | "chat" | "files" | "approvals" | "social" | "settings";
 
-const navItems: Array<{ id: RouteId; label: string; icon: string }> = [
+const mainNavItems: Array<{ id: RouteId; label: string; icon: string }> = [
   { id: "home", label: "Home", icon: "home" },
   { id: "team", label: "Team", icon: "team" },
   { id: "work", label: "Work", icon: "work" },
@@ -12,9 +12,10 @@ const navItems: Array<{ id: RouteId; label: string; icon: string }> = [
   { id: "files", label: "Files", icon: "docs" },
   { id: "approvals", label: "Approvals", icon: "approve" },
   { id: "social", label: "Social", icon: "social" },
-  { id: "settings", label: "Settings", icon: "settings" },
 ];
 
+const navItems = [...mainNavItems, { id: "settings" as RouteId, label: "Settings", icon: "settings" }];
+
 export function Shell({
   snapshot,
   route,
@@ -48,8 +49,13 @@ export function Shell({
           <div className="brand-name">{organization.name}</div>
           <Icon name="chevronDown" size={12} />
         </div>
+        <div className="search-bar">
+          <Icon name="search" size={13} />
+          <span>Search</span>
+          <span className="search-kbd">⌘K</span>
+        </div>
         <nav className="nav">
-          {navItems.map((item) => (
+          {mainNavItems.map((item) => (
             <button
               key={item.id}
               type="button"
@@ -63,10 +69,23 @@ export function Shell({
             </button>
           ))}
         </nav>
-        <div className="sidebar-foot">
-          <Avatar name={employee.displayName} size="sm" />
-          <div style={{ flex: 1, minWidth: 0 }}>{employee.displayName}</div>
-          <Icon name="bell" />
+        <div style={{ marginTop: "auto" }}>
+          <nav className="nav" style={{ marginBottom: 4 }}>
+            <button
+              type="button"
+              aria-label="Settings"
+              className={`nav-item ${route === "settings" ? "active" : ""}`}
+              onClick={() => setRoute("settings")}
+            >
+              <Icon name="settings" size={15} />
+              <span>Settings</span>
+            </button>
+          </nav>
+          <div className="sidebar-foot">
+            <Avatar name={employee.displayName} size="sm" />
+            <div style={{ flex: 1, minWidth: 0 }}>{employee.displayName}</div>
+            <Icon name="bell" />
+          </div>
         </div>
       </aside>
       <main className="main">
@@ -78,7 +97,7 @@ export function Shell({
             {actions}
             {window.agentCompany.platform !== "darwin" && (
               <>
-                <IconButton icon="more" label="Minimize" onClick={() => void window.agentCompany.windowMinimize()} />
+                <IconButton icon="minus" label="Minimize" onClick={() => void window.agentCompany.windowMinimize()} />
                 <IconButton icon="x" label="Close" onClick={() => void window.agentCompany.windowClose()} />
               </>
             )}
diff --git a/AgentCompany-New/src/renderer/src/shared/ui.tsx b/AgentCompany-New/src/renderer/src/shared/ui.tsx
index 1a7c864d..f2d70c78 100644
--- a/AgentCompany-New/src/renderer/src/shared/ui.tsx
+++ b/AgentCompany-New/src/renderer/src/shared/ui.tsx
@@ -10,10 +10,10 @@ import {
   Grid2X2,
   Hash,
   Home,
-  Inbox,
   List,
   Lock,
   MessageCircle,
+  Minus,
   MoreHorizontal,
   Paperclip,
   Plus,
@@ -21,7 +21,6 @@ import {
   Send,
   Settings,
   ShieldCheck,
-  Sparkles,
   Upload,
   Users,
   X,
@@ -43,21 +42,38 @@ const icons: Record<string, LucideIcon> = {
   grid: Grid2X2,
   hash: Hash,
   home: Home,
-  inbox: Inbox,
   list: List,
   lock: Lock,
+  minus: Minus,
   more: MoreHorizontal,
   plus: Plus,
   search: Search,
   send: Send,
   settings: Settings,
-  social: Sparkles,
   team: Users,
   upload: Upload,
-  work: Inbox,
   x: X,
 };
 
+const customIcons: Record<string, (size: number) => ReactNode> = {
+  work: (size) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="4" width="18" height="16" rx="2"/>
+      <path d="M8 4v16M16 4v16"/>
+    </svg>
+  ),
+  social: (size) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 11a8 8 0 0 1 8-8"/>
+      <path d="M4 11v4a4 4 0 0 0 4 4h1"/>
+      <circle cx="18" cy="6" r="2"/>
+      <circle cx="6" cy="18" r="2"/>
+      <circle cx="18" cy="18" r="2"/>
+      <path d="M8 17l8-9M18 8v8"/>
+    </svg>
+  ),
+};
+
 const palette = [
   ["#5e6ad2", "#fff"],
   ["#e8b339", "#231600"],
@@ -76,6 +92,7 @@ function hashName(value: string): number {
 }
 
 export function Icon({ name, size = 14 }: { name: string; size?: number }) {
+  if (customIcons[name]) return <>{customIcons[name](size)}</>;
   const Component = icons[name] ?? FileText;
   return <Component size={size} strokeWidth={1.7} />;
 }
diff --git a/AgentCompany-New/src/renderer/src/styles.css b/AgentCompany-New/src/renderer/src/styles.css
index 946e2f05..847fb03c 100644
--- a/AgentCompany-New/src/renderer/src/styles.css
+++ b/AgentCompany-New/src/renderer/src/styles.css
@@ -21,7 +21,9 @@
   --r-sm: 6px;
   --r-md: 8px;
   --r-lg: 12px;
+  --r-xl: 16px;
   --shadow-sm: 0 1px 0 rgba(9, 9, 11, 0.04), 0 1px 2px rgba(9, 9, 11, 0.04);
+  --shadow-md: 0 1px 3px rgba(9, 9, 11, 0.06), 0 6px 24px rgba(9, 9, 11, 0.04);
   --font-sans: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
   --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
 }
@@ -30,10 +32,11 @@
 html, body, #root { width: 100%; height: 100%; margin: 0; }
 body {
   font-family: var(--font-sans);
+  font-feature-settings: "ss01", "cv11", "cv02";
   color: var(--text-1);
   background: var(--bg);
   font-size: 13px;
-  letter-spacing: 0;
+  letter-spacing: -0.005em;
   -webkit-font-smoothing: antialiased;
 }
 button, input, textarea, select { font: inherit; }
@@ -74,6 +77,24 @@ button { cursor: pointer; }
   font-weight: 600;
 }
 .brand-name { flex: 1; font-weight: 540; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 9px;
+  border-radius: var(--r-md);
+  background: var(--panel-2);
+  color: var(--text-3);
+  margin-bottom: 16px;
+  font-size: 12.5px;
+  cursor: text;
+}
+.search-kbd {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-3);
+  font-family: var(--font-mono);
+}
 .nav { display: flex; flex-direction: column; gap: 1px; }
 .nav-item {
   display: flex;
@@ -91,7 +112,6 @@ button { cursor: pointer; }
 .nav-item.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
 .nav-badge { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
 .sidebar-foot {
-  margin-top: auto;
   padding: 10px 8px 4px;
   border-top: 1px solid var(--border-soft);
   display: flex;