Attachment Sidebar

1"use client";
2 
3import * as React from "react";
4import { Paperclip } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { createViewerResource } from "@/lib/viewer-resource";
8import type { ViewerSource } from "@/lib/viewer-source";
9 
10import { formatFileSize } from "./file-size-format";
11import { FileThumbnail } from "./file-thumbnail";
12import {
13  SidebarListButton,
14  SidebarListContent,
15  SidebarListGroup,
16  SidebarListGroupContent,
17  SidebarListGroupLabel,
18  SidebarListHeader,
19  SidebarListMenu,
20  SidebarListMenuItem,
21  SidebarListRoot,
22  SidebarListSeparator,
23} from "./sidebar-list";
24 
25export interface AttachmentSidebarItem {
26  id: string;
27  source: ViewerSource;
28  label?: string;
29  description?: string;
30  size?: number | null;
31  isDisabled?: boolean;
32}
33 
34export interface AttachmentSidebarProps {
35  items: readonly AttachmentSidebarItem[];
36  selectedId?: string | null;
37  onSelect?: (id: string) => void;
38  header?: React.ReactNode;
39  emptyLabel?: React.ReactNode;
40  children?: React.ReactNode;
41  side?: "left" | "right";
42  width?: string;
43  className?: string;
44}
45 
46/**
47 * File attachment navigator built from providerless SidebarList primitives. It
48 * owns attachment/file row semantics, while callers own the selected id and any
49 * domain-specific rows they pass as children.
50 */
51export function AttachmentSidebar({
52  items,
53  selectedId,
54  onSelect,
55  header,
56  emptyLabel = "No attachments.",
57  children,
58  side = "right",
59  width = "18rem",
60  className,
61}: AttachmentSidebarProps) {
62  return (
63    <SidebarListRoot
64      width={width}
65      data-slot="attachment-sidebar"
66      className={cn(
67        "border-sidebar-border bg-sidebar",
68        side === "right" ? "md:border-l" : "md:border-r",
69        className,
70      )}
71    >
72      <SidebarListHeader className="border-b px-3 py-2">
73        {header ?? <DefaultAttachmentSidebarHeader count={items.length} />}
74      </SidebarListHeader>
75      <SidebarListContent>
76        {children ? (
77          <>
78            {children}
79            <SidebarListSeparator />
80          </>
81        ) : null}
82        <SidebarListGroup className="min-h-0 flex-1">
83          <SidebarListGroupLabel>Attachments</SidebarListGroupLabel>
84          <SidebarListGroupContent>
85            {items.length === 0 ? (
86              <p className="text-sidebar-foreground/70 px-2 py-3 text-xs">
87                {emptyLabel}
88              </p>
89            ) : (
90              <SidebarListMenu className="gap-2">
91                {items.map((item) => (
92// … truncated