hacklab/T-HUB
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Sidebar: full icon set (new chat + approvals marks), Files/Chat elevated, settings wheel

Browse source
This commit is contained in:
glass beadian 2026-10-12 16:12:10 +00:00
parent 6161ac4740
commit 2665f43cc4
3 changed files with 31 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/public/brand/nav-approvals.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 264 B

7
apps/web/public/brand/nav-chat.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 522 B

49
apps/web/src/components/shell/sidebar.tsx
View file

@ -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>
)}