Sidebar Channels

"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { ChevronDown, Hash, Lock, Menu, Plus, Video, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarChannelsWorkspace {
  name: string;
  initials: string;
  tone: string;
}

export interface SidebarChannelsSection {
  title: string;
  items: { label: string; href: string; private?: boolean; unread?: number; live?: boolean }[];
}

export interface SidebarChannelsProps {
  workspaces?: SidebarChannelsWorkspace[];
  activeWorkspace?: number;
  sections?: SidebarChannelsSection[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

const DEFAULT_SECTIONS: SidebarChannelsSection[] = [
  {
    title: "Recap channels",
    items: [
      { label: "product", href: "#product", unread: 3 },
      { label: "design-crit", href: "#design" },
      { label: "sales-calls", href: "#sales", unread: 12 },
      { label: "leadership", href: "#leadership", private: true },
    ],
  },
  {
    title: "Live now",
    items: [
      { label: "Customer call — Parcel", href: "#live-parcel", live: true },
      { label: "Standup · Mobile", href: "#live-standup", live: true },
    ],
  },
];

/** Two-column chat-app sidebar: a workspace switcher column of gradient squircles plus a glass channel list with sections, unread counts and live meetings; drawer on mobile. */
export function SidebarChannels({
  workspaces = [
    { name: "Lumen", initials: "Lu", tone: "from-da-primary to-da-accent" },
    { name: "Parcel", initials: "Pa", tone: "from-da-danger to-da-primary" },
    { name: "Side project", initials: "Sp", tone: "from-da-accent to-da-success" },
  ],
  activeWorkspace = 0,
  sections = DEFAULT_SECTIONS,
  activeHref = "#product",
  children,
  className,
}: SidebarChannelsProps) {
  const [open, setOpen] = useState(false);
  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
  const id = useId();

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const ws = workspaces[activeWorkspace] ?? workspaces[0];

  return (
    <div className={cn("flex min-h-dvh text-da-fg", className)}>
      {open && <div aria-hidden className="fixed inset-0 z-40 bg-da-overlay lg:hidden" onClick={() => setOpen(false)} />}
      <aside
        id={id}
        className={cn(
          "fixed inset-y-0 left-0 z-50 flex p-3 transition-transform duration-(--da-duration-slow) ease-da lg:sticky lg:top-0 lg:h-dvh lg:translate-x-0 motion-reduce:transition-none",
          open ? "translate-x-0" : "-translate-x-full",
        )}
      >
        <nav aria-label="Workspaces" className="flex flex-col items-center gap-2 pr-3">
          {workspaces.map((w, i) => (
            <a
              key={w.name}
              href={`#ws-${i}`}
              aria-label={w.name}
              aria-current={i === activeWorkspace ? "true" : undefined}
              className={cn(
                "da-focus da-transition grid size-11 place-items-center rounded-da-md bg-gradient-to-br font-da-display text-sm font-semibold text-da-primary-fg shadow-da-sm hover:rounded-da-sm",
                w.tone,
                i === activeWorkspace && "ring-2 ring-da-fg ring-offset-2 ring-offset-da-bg",
              )}
            >
              {w.initials}
            </a>
          ))}
          <button type="button" aria-label="Add workspace" className={cn("da-focus grid size-11 place-items-center rounded-da-md text-da-muted-fg", GLASS)}>
            <Plus aria-hidden className="size-5" />
          </button>
        </nav>
        <div className={cn("flex w-60 flex-col rounded-da-lg p-3 shadow-da-lg", GLASS)}>
          <div className="flex items-center justify-between px-2 py-1.5">
            <p className="font-da-display font-semibold">{ws?.name}</p>
            <button
              type="button"
              onClick={() => setOpen(false)}
              aria-label="Close navigation"
              className="da-focus grid size-7 place-items-center rounded-full lg:hidden"
            >
              <X aria-hidden className="size-4" />
            </button>
          </div>
          <nav aria-label="Channels" className="mt-3 flex-1 space-y-4 overflow-y-auto">
            {sections.map((s) => {
              const isCollapsed = collapsed[s.title];
              return (
                <div key={s.title}>
                  <button
                    type="button"
                    aria-expanded={!isCollapsed}
                    onClick={() => setCollapsed((c) => ({ ...c, [s.title]: !c[s.title] }))}
                    className="da-focus flex w-full items-center gap-1 rounded-da-sm px-2 py-1 text-xs font-semibold text-da-muted-fg hover:text-da-fg"
                  >
                    <ChevronDown aria-hidden className={cn("da-transition size-3.5", isCollapsed && "-rotate-90")} />
                    {s.title}
                  </button>
                  <ul hidden={isCollapsed} className="mt-1 space-y-0.5">
                    {s.items.map((it) => {
                      const active = it.href === activeHref;
                      const Icon = it.live ? Video : it.private ? Lock : Hash;
                      return (
                        <li key={it.href}>
                          <a
                            href={it.href}
                            aria-current={active ? "page" : undefined}
                            className={cn(
                              "da-focus da-transition flex items-center gap-2 rounded-da-sm px-2 py-1.5 text-sm",
                              active ? "bg-gradient-to-r from-da-primary to-da-accent font-semibold text-da-primary-fg" : "hover:bg-da-surface",
                              !active && it.unread && "font-semibold",
                            )}
                          >
                            <Icon aria-hidden className={cn("size-4 shrink-0", !active && (it.live ? "text-da-danger" : "text-da-muted-fg"))} />
                            <span className="truncate">{it.label}</span>
                            {it.live && <span className="ml-auto rounded-da-pill bg-da-danger px-1.5 text-[10px] font-semibold text-da-danger-fg">LIVE</span>}
                            {it.unread !== undefined && (
                              <span
                                className={cn(
                                  "ml-auto rounded-da-pill px-1.5 text-[11px] font-semibold",
                                  active ? "bg-da-primary-fg/25" : "bg-da-primary text-da-primary-fg",
                                )}
                              >
                                {it.unread}
                                <span className="sr-only"> unread</span>
                              </span>
                            )}
                          </a>
                        </li>
                      );
                    })}
                  </ul>
                </div>
              );
            })}
          </nav>
        </div>
      </aside>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2 px-4 pt-4 lg:hidden">
          <button
            type="button"
            onClick={() => setOpen(true)}
            aria-expanded={open}
            aria-controls={id}
            aria-label="Open navigation"
            className={cn("da-focus grid size-10 place-items-center rounded-full", GLASS)}
          >
            <Menu aria-hidden className="size-5" />
          </button>
        </div>
        <main>{children}</main>
      </div>
    </div>
  );
}

export default SidebarChannels;