300 lines
9.6 KiB
TypeScript
300 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import type { ReactNode } from "react";
|
|
import {
|
|
Activity,
|
|
BarChart3,
|
|
Bot,
|
|
Boxes,
|
|
Building2,
|
|
CheckCircle2,
|
|
CircleDot,
|
|
FolderGit,
|
|
LayoutGrid,
|
|
Network,
|
|
Settings,
|
|
Store,
|
|
TerminalSquare,
|
|
} from "lucide-react";
|
|
|
|
import { ApiError } from "@/api/mutator";
|
|
import {
|
|
type healthzHealthzGetResponse,
|
|
useHealthzHealthzGet,
|
|
} from "@/api/generated/default/default";
|
|
import { useAuth } from "@/auth/clerk";
|
|
import { useOrganizationMembership } from "@/lib/use-organization-membership";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type NavTone = "blue" | "cyan" | "emerald" | "violet" | "amber" | "rose";
|
|
|
|
const iconToneClass: Record<NavTone, string> = {
|
|
blue: "bg-blue-500/15 text-blue-300 ring-blue-400/20",
|
|
cyan: "bg-cyan-500/15 text-cyan-300 ring-cyan-400/20",
|
|
emerald: "bg-emerald-500/15 text-emerald-300 ring-emerald-400/20",
|
|
violet: "bg-violet-500/15 text-violet-300 ring-violet-400/20",
|
|
amber: "bg-amber-500/15 text-amber-300 ring-amber-400/20",
|
|
rose: "bg-rose-500/15 text-rose-300 ring-rose-400/20",
|
|
};
|
|
|
|
const sectionHeaderClass =
|
|
"px-3 text-[13px] font-bold uppercase tracking-[0.18em] text-[color:var(--text)]";
|
|
|
|
const navItemClass = (active: boolean) =>
|
|
cn(
|
|
"group relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-[15px] font-semibold text-[color:var(--text-muted)] transition duration-200",
|
|
"before:absolute before:inset-y-2 before:left-0 before:w-1 before:rounded-full before:bg-transparent before:transition",
|
|
active
|
|
? "bg-[color:var(--accent-soft)] text-[color:var(--text)] shadow-sm before:bg-[color:var(--accent)]"
|
|
: "hover:bg-[color:var(--surface-muted)] hover:text-[color:var(--text)] hover:before:bg-[color:var(--border-strong)]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--surface)]",
|
|
);
|
|
|
|
const iconClass = (active: boolean, tone: NavTone) =>
|
|
cn(
|
|
"flex h-8 w-8 shrink-0 items-center justify-center rounded-md ring-1 transition duration-200",
|
|
iconToneClass[tone],
|
|
active &&
|
|
"bg-[color:var(--accent)] text-[color:var(--primary-foreground)] ring-[color:var(--accent)]",
|
|
!active && "group-hover:scale-105 group-hover:ring-[color:var(--accent)]",
|
|
);
|
|
|
|
function isNavActive(pathname: string, href: string) {
|
|
if (href === "/boards") {
|
|
return (
|
|
pathname === href ||
|
|
pathname.startsWith("/boards/") ||
|
|
pathname.startsWith("/board-groups")
|
|
);
|
|
}
|
|
|
|
if (href === "/git-projects") {
|
|
return (
|
|
pathname === href ||
|
|
pathname.startsWith("/git-projects/connections") ||
|
|
pathname.startsWith("/git-projects/repositories")
|
|
);
|
|
}
|
|
|
|
if (href === "/settings") {
|
|
return (
|
|
pathname === href ||
|
|
pathname.startsWith("/settings/") ||
|
|
pathname.startsWith("/tags") ||
|
|
pathname.startsWith("/custom-fields")
|
|
);
|
|
}
|
|
|
|
return pathname === href || pathname.startsWith(`${href}/`);
|
|
}
|
|
|
|
function NavItem({
|
|
href,
|
|
label,
|
|
icon,
|
|
tone,
|
|
active,
|
|
}: {
|
|
href: string;
|
|
label: string;
|
|
icon: ReactNode;
|
|
tone: NavTone;
|
|
active: boolean;
|
|
}) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={navItemClass(active)}
|
|
aria-current={active ? "page" : undefined}
|
|
>
|
|
<span className={iconClass(active, tone)}>{icon}</span>
|
|
<span className="truncate">{label}</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function DashboardSidebar() {
|
|
const pathname = usePathname();
|
|
const { isSignedIn } = useAuth();
|
|
const { isAdmin } = useOrganizationMembership(isSignedIn);
|
|
const healthQuery = useHealthzHealthzGet<healthzHealthzGetResponse, ApiError>(
|
|
{
|
|
query: {
|
|
refetchInterval: 30_000,
|
|
refetchOnMount: "always",
|
|
retry: false,
|
|
},
|
|
request: { cache: "no-store" },
|
|
},
|
|
);
|
|
|
|
const okValue = healthQuery.data?.data?.ok;
|
|
const systemStatus: "unknown" | "operational" | "degraded" =
|
|
okValue === true
|
|
? "operational"
|
|
: okValue === false
|
|
? "degraded"
|
|
: healthQuery.isError
|
|
? "degraded"
|
|
: "unknown";
|
|
const statusLabel =
|
|
systemStatus === "operational"
|
|
? "All systems operational"
|
|
: systemStatus === "unknown"
|
|
? "System status unavailable"
|
|
: "System degraded";
|
|
const isActive = (href: string) => isNavActive(pathname, href);
|
|
|
|
return (
|
|
<aside className="fixed inset-y-0 left-0 z-40 flex w-[280px] -translate-x-full flex-col border-r border-[color:var(--border)] bg-[linear-gradient(180deg,var(--surface)_0%,var(--surface-muted)_100%)] pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-[260px] md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
|
|
<div className="flex-1 overflow-y-auto px-3 py-5">
|
|
<nav className="space-y-5">
|
|
<div>
|
|
<p className={sectionHeaderClass}>Overview</p>
|
|
<div className="mt-2 space-y-1.5">
|
|
<NavItem
|
|
href="/dashboard"
|
|
label="Dashboard"
|
|
icon={<BarChart3 className="h-4 w-4" />}
|
|
tone="blue"
|
|
active={isActive("/dashboard")}
|
|
/>
|
|
<NavItem
|
|
href="/activity"
|
|
label="Live feed"
|
|
icon={<Activity className="h-4 w-4" />}
|
|
tone="cyan"
|
|
active={isActive("/activity")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className={sectionHeaderClass}>Work</p>
|
|
<div className="mt-2 space-y-1.5">
|
|
<NavItem
|
|
href="/boards"
|
|
label="Boards"
|
|
icon={<LayoutGrid className="h-4 w-4" />}
|
|
tone="blue"
|
|
active={isActive("/boards")}
|
|
/>
|
|
<NavItem
|
|
href="/approvals"
|
|
label="Approvals"
|
|
icon={<CheckCircle2 className="h-4 w-4" />}
|
|
tone="emerald"
|
|
active={isActive("/approvals")}
|
|
/>
|
|
<NavItem
|
|
href="/git-projects"
|
|
label="Git projects"
|
|
icon={<FolderGit className="h-4 w-4" />}
|
|
tone="violet"
|
|
active={isActive("/git-projects")}
|
|
/>
|
|
<NavItem
|
|
href="/git-projects/issues"
|
|
label="Issues"
|
|
icon={<CircleDot className="h-4 w-4" />}
|
|
tone="amber"
|
|
active={isActive("/git-projects/issues")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className={sectionHeaderClass}>AI Operations</p>
|
|
<div className="mt-2 space-y-1.5">
|
|
<NavItem
|
|
href="/claude-code"
|
|
label="Agent Sessions"
|
|
icon={<TerminalSquare className="h-4 w-4" />}
|
|
tone="cyan"
|
|
active={isActive("/claude-code")}
|
|
/>
|
|
{isAdmin ? (
|
|
<NavItem
|
|
href="/agents"
|
|
label="Agents"
|
|
icon={<Bot className="h-4 w-4" />}
|
|
tone="violet"
|
|
active={isActive("/agents")}
|
|
/>
|
|
) : null}
|
|
{isAdmin ? (
|
|
<NavItem
|
|
href="/gateways"
|
|
label="Gateways"
|
|
icon={<Network className="h-4 w-4" />}
|
|
tone="emerald"
|
|
active={isActive("/gateways")}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{isAdmin ? (
|
|
<div>
|
|
<p className={sectionHeaderClass}>Skills</p>
|
|
<div className="mt-2 space-y-1.5">
|
|
<NavItem
|
|
href="/skills/marketplace"
|
|
label="Marketplace"
|
|
icon={<Store className="h-4 w-4" />}
|
|
tone="violet"
|
|
active={isActive("/skills/marketplace")}
|
|
/>
|
|
<NavItem
|
|
href="/skills/packs"
|
|
label="Packs"
|
|
icon={<Boxes className="h-4 w-4" />}
|
|
tone="cyan"
|
|
active={isActive("/skills/packs")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div>
|
|
<p className={sectionHeaderClass}>Administration</p>
|
|
<div className="mt-2 space-y-1.5">
|
|
<NavItem
|
|
href="/organization"
|
|
label="Organization"
|
|
icon={<Building2 className="h-4 w-4" />}
|
|
tone="blue"
|
|
active={isActive("/organization")}
|
|
/>
|
|
<NavItem
|
|
href="/settings"
|
|
label="Settings"
|
|
icon={<Settings className="h-4 w-4" />}
|
|
tone="amber"
|
|
active={isActive("/settings")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div className="border-t border-[color:var(--border)] bg-[color:var(--surface)]/70 p-4">
|
|
<div className="flex items-center gap-2 text-xs font-medium text-[color:var(--text-muted)]">
|
|
<span
|
|
className={cn(
|
|
"h-2.5 w-2.5 rounded-full shadow-[0_0_18px_currentColor]",
|
|
systemStatus === "operational" &&
|
|
"bg-emerald-500 text-emerald-500",
|
|
systemStatus === "degraded" && "bg-rose-500 text-rose-500",
|
|
systemStatus === "unknown" &&
|
|
"bg-[color:var(--text-quiet)] text-[color:var(--text-quiet)]",
|
|
)}
|
|
/>
|
|
{statusLabel}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|