270 lines
8.5 KiB
TypeScript
270 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import type { ComponentType } from "react";
|
|
import {
|
|
CalendarDays,
|
|
MessageCircle,
|
|
ClipboardList,
|
|
FileText,
|
|
Home,
|
|
LayoutGrid,
|
|
MoreHorizontal,
|
|
Presentation,
|
|
Radar,
|
|
Sparkles,
|
|
UserPlus,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { useWorkspaceStore } from "@/lib/stores/workspace-store";
|
|
import { cn } from "@/lib/utils";
|
|
import { api } from "@/lib/trpc";
|
|
import { chatBadge } from "@/components/chat/chat-utils";
|
|
|
|
export interface IconRailProps {
|
|
className?: string;
|
|
}
|
|
|
|
type NavItem = {
|
|
id: string;
|
|
label: string;
|
|
segment: string;
|
|
icon: ComponentType<{ className?: string }>;
|
|
};
|
|
|
|
const NAV_ITEMS: NavItem[] = [
|
|
{ id: "home", label: "Home", segment: "", icon: Home },
|
|
{ id: "spaces", label: "Spaces", segment: "", icon: LayoutGrid },
|
|
{ id: "planner", label: "Planner", segment: "planner", icon: CalendarDays },
|
|
{
|
|
id: "mission-control",
|
|
label: "Mission control",
|
|
segment: "mission-control",
|
|
icon: Radar,
|
|
},
|
|
{ id: "ai", label: "AI", segment: "ai", icon: Sparkles },
|
|
{ id: "chat", label: "Chat", segment: "chat", icon: MessageCircle },
|
|
{ id: "teams", label: "Teams", segment: "teams", icon: Users },
|
|
{ id: "docs", label: "Docs", segment: "docs", icon: FileText },
|
|
{
|
|
id: "whiteboards",
|
|
label: "Whiteboards",
|
|
segment: "whiteboards",
|
|
icon: Presentation,
|
|
},
|
|
{ id: "forms", label: "Forms", segment: "forms", icon: ClipboardList },
|
|
];
|
|
|
|
function workspaceHref(workspaceSegment: string, segment: string) {
|
|
return segment ? `/${workspaceSegment}/${segment}` : `/${workspaceSegment}`;
|
|
}
|
|
|
|
const RESERVED_ROOT_SEGMENTS = new Set([
|
|
"planner",
|
|
"mission-control",
|
|
"ai",
|
|
"chat",
|
|
"teams",
|
|
"docs",
|
|
"whiteboards",
|
|
"forms",
|
|
]);
|
|
|
|
function isAtWorkspaceHome(pathname: string, prefix: string): boolean {
|
|
const rest = pathname.slice(prefix.length).replace(/^\//, "");
|
|
const first = rest.split("/")[0] ?? "";
|
|
if (!first) return true;
|
|
return !RESERVED_ROOT_SEGMENTS.has(first);
|
|
}
|
|
|
|
function isNavItemActive(
|
|
pathname: string,
|
|
workspaceSegment: string | undefined,
|
|
item: NavItem,
|
|
): boolean {
|
|
if (!workspaceSegment) return false;
|
|
const prefix = `/${workspaceSegment}`;
|
|
if (!pathname.startsWith(prefix)) return false;
|
|
|
|
if (item.segment) {
|
|
const next =
|
|
pathname[prefix.length] === "/" ? pathname.slice(prefix.length + 1) : "";
|
|
const first = next.split("/")[0] ?? "";
|
|
return first === item.segment;
|
|
}
|
|
|
|
if (item.id === "home") {
|
|
return isAtWorkspaceHome(pathname, prefix);
|
|
}
|
|
|
|
// Spaces uses the same URL as home for now; keep inactive here to avoid double highlight
|
|
if (item.id === "spaces") {
|
|
return false;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
export function IconRail({ className }: IconRailProps) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const currentWorkspace = useWorkspaceStore((s) => s.currentWorkspace);
|
|
const slugParam =
|
|
typeof params?.workspaceSlug === "string" ? params.workspaceSlug : "";
|
|
const workspaceSegment =
|
|
currentWorkspace?.slug || currentWorkspace?.id || slugParam || undefined;
|
|
const workspaceName = currentWorkspace?.name ?? "";
|
|
const unread = api.chat.unreadSummary.useQuery(
|
|
{ workspace: workspaceSegment ?? "" },
|
|
{ enabled: !!workspaceSegment, refetchInterval: 15000 },
|
|
);
|
|
const visibleChannels = api.chat.listChannels.useQuery(
|
|
{ workspace: workspaceSegment ?? "" },
|
|
{ enabled: !!workspaceSegment, refetchInterval: 15000 },
|
|
);
|
|
const directIds = new Set(
|
|
visibleChannels.data
|
|
?.filter((channel) => channel.kind === "direct")
|
|
.map((channel) => channel.id),
|
|
);
|
|
const badge = chatBadge({
|
|
unreadCount:
|
|
unread.data?.channels.reduce(
|
|
(total, channel) => total + channel.unreadCount,
|
|
0,
|
|
) ?? 0,
|
|
mentionCount:
|
|
unread.data?.channels.reduce(
|
|
(total, channel) => total + channel.mentionCount,
|
|
0,
|
|
) ?? 0,
|
|
directUnreadCount:
|
|
unread.data?.channels.reduce(
|
|
(total, channel) =>
|
|
total + (directIds.has(channel.channelId) ? channel.unreadCount : 0),
|
|
0,
|
|
) ?? 0,
|
|
});
|
|
|
|
const initials = workspaceName.trim().slice(0, 2).toUpperCase() || "—";
|
|
|
|
const push = (segment: string) => {
|
|
if (!workspaceSegment) return;
|
|
router.push(workspaceHref(workspaceSegment, segment));
|
|
};
|
|
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
"flex h-full w-[60px] shrink-0 flex-col",
|
|
"bg-gradient-to-b from-[hsl(263,70%,25%)] to-[hsl(263,70%,18%)]",
|
|
"dark:from-[hsl(263,70%,20%)] dark:to-[hsl(263,70%,12%)]",
|
|
className,
|
|
)}
|
|
>
|
|
<nav
|
|
className="flex min-h-0 flex-1 flex-col items-stretch overflow-y-auto overflow-x-hidden px-1 py-2"
|
|
aria-label="Main"
|
|
>
|
|
{NAV_ITEMS.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = isNavItemActive(pathname, workspaceSegment, item);
|
|
return (
|
|
<Tooltip key={item.id}>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
disabled={!workspaceSegment}
|
|
aria-label={
|
|
item.id === "chat" && badge.dot
|
|
? `Chat, ${badge.count ? `${badge.count} mentions and unread direct messages` : "unread messages"}`
|
|
: item.label
|
|
}
|
|
onClick={() => push(item.segment)}
|
|
className={cn(
|
|
"w-full cursor-pointer rounded-lg px-1 py-2 transition-colors",
|
|
"flex flex-col items-center gap-0.5",
|
|
active
|
|
? "bg-white/20 text-white"
|
|
: "text-white/70 hover:bg-white/10",
|
|
)}
|
|
>
|
|
<span className="relative">
|
|
<Icon className="h-5 w-5 shrink-0" aria-hidden />
|
|
{item.id === "chat" && badge.dot && (
|
|
<span
|
|
className="absolute -right-1 -top-1 size-2 rounded-full bg-rose-400"
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
</span>
|
|
{item.id === "chat" && badge.count > 0 && (
|
|
<span
|
|
className="rounded-full bg-rose-500 px-1 text-[10px] text-white"
|
|
aria-label={`${badge.count} mentions and unread direct messages`}
|
|
>
|
|
{badge.count > 99 ? "99+" : badge.count}
|
|
</span>
|
|
)}
|
|
<span
|
|
className={cn(
|
|
"max-w-[52px] truncate text-center text-[10px] font-medium leading-tight",
|
|
active ? "text-white" : "text-white/70",
|
|
)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">{item.label}</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="flex shrink-0 flex-col items-stretch gap-0.5 px-1 pb-3">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"w-full cursor-pointer rounded-lg px-1 py-2 transition-colors",
|
|
"flex flex-col items-center gap-0.5 text-white/50 hover:bg-white/10 hover:text-white/70",
|
|
)}
|
|
>
|
|
<MoreHorizontal className="h-5 w-5 shrink-0" aria-hidden />
|
|
<span className="max-w-[52px] truncate text-center text-[10px] font-medium leading-tight">
|
|
More
|
|
</span>
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">More</TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"w-full cursor-pointer rounded-lg px-1 py-2 transition-colors",
|
|
"flex flex-col items-center gap-0.5 text-white/70 hover:bg-white/10",
|
|
)}
|
|
>
|
|
<UserPlus className="h-5 w-5 shrink-0" aria-hidden />
|
|
<span className="max-w-[52px] truncate text-center text-[10px] font-medium leading-tight">
|
|
Invite
|
|
</span>
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">Invite</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|