ubiquitous-invention/apps/web/components/sidebar/sidebar-header.tsx

"use client";

import { ChevronDown, LogOut, Settings2, User } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { useWorkspaceStore } from "@/lib/stores/workspace-store";
import { cn } from "@/lib/utils";

export function SidebarHeader({ collapsed }: { collapsed: boolean }) {
  const workspace = useWorkspaceStore((s) => s.currentWorkspace);

  const title = workspace?.name ?? "Workspace";

  const trigger = (
    <Button
      type="button"
      variant="ghost"
      className={cn(
        "h-auto min-h-10 w-full justify-between gap-1 rounded-md px-2 py-1.5 text-left font-semibold text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        collapsed && "justify-center px-0",
      )}
    >
      {!collapsed ? (
        <>
          <span className="min-w-0 flex-1 truncate text-sm">{title}</span>
          <ChevronDown className="size-4 shrink-0 opacity-60" />
        </>
      ) : (
        <span className="flex size-8 items-center justify-center rounded-md bg-sidebar-accent/80 text-xs font-bold text-primary">
          {title.slice(0, 2).toUpperCase()}
        </span>
      )}
    </Button>
  );

  return (
    <div
      className={cn(
        "flex shrink-0 items-center gap-1 border-b border-sidebar-border px-2 py-2",
        collapsed && "flex-col px-1",
      )}
    >
      <DropdownMenu>
        {collapsed ? (
          <Tooltip delayDuration={0}>
            <TooltipTrigger asChild>
              <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
            </TooltipTrigger>
            <TooltipContent side="right">{title}</TooltipContent>
          </Tooltip>
        ) : (
          <DropdownMenuTrigger asChild className="min-w-0 flex-1">
            {trigger}
          </DropdownMenuTrigger>
        )}
        <DropdownMenuContent className="w-56" align="start" side="bottom">
          <DropdownMenuLabel className="font-normal">
            <div className="flex flex-col space-y-1">
              <p className="text-sm font-medium leading-none">{title}</p>
              <p className="text-xs leading-none text-muted-foreground">
                {workspace?.slug ? `/${workspace.slug}` : ""}
              </p>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <Settings2 className="size-4" />
            Workspace settings
          </DropdownMenuItem>
          <DropdownMenuItem>
            <User className="size-4" />
            Profile
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem className="text-destructive focus:text-destructive">
            <LogOut className="size-4" />
            Sign out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="size-8 shrink-0 rounded-full text-sidebar-foreground hover:bg-sidebar-accent"
            aria-label="Account menu"
          >
            <Avatar className="size-8 border border-sidebar-border">
              <AvatarFallback className="bg-primary/20 text-xs font-semibold text-primary">
                ME
              </AvatarFallback>
            </Avatar>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-48">
          <DropdownMenuItem>
            <User className="size-4" />
            Account
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem className="text-destructive focus:text-destructive">
            <LogOut className="size-4" />
            Sign out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}