From 2665f43cc4c9a9bb1a43b6f0aae822b182960d34 Mon Sep 17 00:00:00 2001
From: glass beadian <glassbeadian@hdys.band>
Date: Mon, 12 Oct 2026 16:12:10 +0000
Subject: [PATCH] Sidebar: full icon set (new chat + approvals marks),
 Files/Chat elevated, settings wheel

---
 apps/web/public/brand/nav-approvals.svg   |  4 ++
 apps/web/public/brand/nav-chat.svg        |  7 ++++
 apps/web/src/components/shell/sidebar.tsx | 49 +++++++++--------------
 3 files changed, 31 insertions(+), 29 deletions(-)
 create mode 100644 apps/web/public/brand/nav-approvals.svg
 create mode 100644 apps/web/public/brand/nav-chat.svg

diff --git a/apps/web/public/brand/nav-approvals.svg b/apps/web/public/brand/nav-approvals.svg
new file mode 100644
index 0000000..dcb2371
--- /dev/null
+++ b/apps/web/public/brand/nav-approvals.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1200 1200">
+  <title>Nav Approvals</title>
+  <path d="M 240 640 L 500 880 L 960 320" fill="none" stroke="#FF1610" stroke-width="90" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/web/public/brand/nav-chat.svg b/apps/web/public/brand/nav-chat.svg
new file mode 100644
index 0000000..61a9adb
--- /dev/null
+++ b/apps/web/public/brand/nav-chat.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1200 1200">
+  <title>Nav Chat</title>
+  <path d="M 220 300 A 80 80 0 0 1 300 220 L 900 220 A 80 80 0 0 1 980 300 L 980 660 A 80 80 0 0 1 900 740 L 520 740 L 340 920 L 340 740 L 300 740 A 80 80 0 0 1 220 660 Z" fill="none" stroke="#FF1610" stroke-width="55" stroke-linejoin="round"/>
+  <circle cx="450" cy="480" r="45" fill="#FF1610"/>
+  <circle cx="600" cy="480" r="45" fill="#FF1610"/>
+  <circle cx="750" cy="480" r="45" fill="#FF1610"/>
+</svg>
diff --git a/apps/web/src/components/shell/sidebar.tsx b/apps/web/src/components/shell/sidebar.tsx
index 956bf91..aa803b1 100644
--- a/apps/web/src/components/shell/sidebar.tsx
+++ b/apps/web/src/components/shell/sidebar.tsx
@@ -8,23 +8,23 @@ import type { DraftRecord } from "../../lib/api-types";
 import { LogoMark } from "../brand/logo";
 import { NavIcon } from "../brand";
 
-const NAV: { href: string; label: string; external?: boolean }[] = [
-  { href: "/streams", label: "Streams" },
-  { href: "/compose", label: "Compose" },
-  { href: "/calendar", label: "Calendar" },
-  { href: "/video", label: "Video" },
-  { href: "/control-room", label: "Control Room" },
-  { href: "/inbox", label: "Inbox" },
-  { href: "/approvals", label: "Approvals" },
-  { href: "/archive", label: "Archive" },
-  { href: "/files", label: "Files" },
-  { href: "https://element.occupymedia.cc", label: "Chat", external: true },
-  { href: "/analytics", label: "Analytics" },
-  { href: "/connections", label: "Channels" },
-  { href: "/team", label: "Team" },
-  { href: "/audit", label: "Audit" },
-  { href: "/onboarding", label: "Onboarding" },
-  { href: "/settings", label: "Settings" },
+const NAV: { href: string; label: string; icon: string; external?: boolean }[] = [
+  { href: "/streams", label: "Streams", icon: "video" },
+  { href: "/control-room", label: "Control Room", icon: "video" },
+  { href: "/compose", label: "Compose", icon: "compose" },
+  { href: "/calendar", label: "Calendar", icon: "calendar" },
+  { href: "https://chat.occupymedia.cc", label: "Chat", icon: "chat", external: true },
+  { href: "/files", label: "Files", icon: "files" },
+  { href: "/archive", label: "Archive", icon: "files" },
+  { href: "/inbox", label: "Inbox", icon: "inbox" },
+  { href: "/approvals", label: "Approvals", icon: "approvals" },
+  { href: "/video", label: "Video", icon: "video" },
+  { href: "/analytics", label: "Analytics", icon: "analytics" },
+  { href: "/connections", label: "Channels", icon: "connections" },
+  { href: "/team", label: "Team", icon: "team" },
+  { href: "/audit", label: "Audit", icon: "audit" },
+  { href: "/onboarding", label: "Onboarding", icon: "home" },
+  { href: "/settings", label: "Settings", icon: "settings" },
 ];
 
 const identity = (drafts: DraftRecord[]): DraftRecord[] => drafts;
@@ -54,24 +54,15 @@ export function Sidebar(): React.ReactElement {
           const className = `group flex items-center justify-between rounded-md px-3 py-1.5 text-sm transition-colors duration-150 ${item.href === "/control-room" ? "min-h-11" : ""} ${
             active ? "bg-accent-dim text-accent" : "text-text-dim hover:bg-surface-2 hover:text-text"
           }`;
+          const icon = <NavIcon name={item.icon} size={16} />;
           return item.external ? (
             <a key={item.href} href={item.href} target="_blank" rel="noreferrer" className={className}>
-              <span className="flex items-center gap-2.5">
-                <span className="h-1.5 w-1.5 rounded-full bg-border group-hover:bg-text-faint" />
-                {item.label}
-              </span>
+              <span className="flex items-center gap-2.5">{icon}{item.label}</span>
               <span className="text-2xs text-text-faint">↗</span>
             </a>
           ) : (
             <Link key={item.href} href={item.href} className={className}>
-              <span className="flex items-center gap-2.5">
-                {item.href === "/video" || item.href === "/control-room" || item.href === "/files" ? (
-                  <NavIcon name={item.href === "/files" ? "files" : "video"} size={14} />
-                ) : (
-                  <span className={`h-1.5 w-1.5 rounded-full ${active ? "bg-accent" : "bg-border group-hover:bg-text-faint"}`} />
-                )}
-                {item.label}
-              </span>
+              <span className="flex items-center gap-2.5">{icon}{item.label}</span>
               {item.href === "/approvals" && approvals > 0 && (
                 <span className="text-2xs text-text-faint">{approvals}</span>
               )}