This example mirrors the original attachment picker flow: a two-panel dialog for files and instructions, panel switching in the title, panel-specific toolbars, matter filtering, upload affordances, active-panel selection summary, and confirm locking. The preview includes state buttons for the docs surface; the implementation below shows the consumer picker without those state shims. ```tsx title="components/attachment-picker/index.tsx" import { type ReactElement, useState } from "react"; import type { FilesItem, FilesUploadEntry, FilesViewMode, } from "@tilt-legal/cubitt-components/files"; import { Button } from "@tilt-legal/cubitt-components/button"; import { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@tilt-legal/cubitt-components/dialog"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; import { formatPlural } from "@tilt-legal/cubitt-components/utilities/formatters"; import { AttachmentPickerFilesPanel, AttachmentPickerFilesToolbar, } from "@/components/attachment-picker-files-panel"; import { AttachmentPickerInstructionsPanel, AttachmentPickerInstructionsToolbar, } from "@/components/attachment-picker-instructions-panel"; import { AttachmentPickerPanelSwitcher } from "@/components/attachment-picker-panel-switcher"; import type { AttachmentFileSource, Instruction, Matter, } from "@/lib/attachment-picker-data"; type PanelId = "files" | "instructions"; type Selections = Record; type Props = { files: FilesItem[]; instructions: Instruction[]; onConfirm: (selections: Selections) => void | Promise; onUpload?: (entries: FilesUploadEntry[]) => void; trigger?: ReactElement; }; const emptySelections = (): Selections => ({ files: [], instructions: [] }); export function MatterAttachmentPicker({ files, instructions, onConfirm, onUpload, trigger = , }: Props) { const [open, setOpen] = useState(false); const [activePanel, setActivePanel] = useState("files"); const [filesQuery, setFilesQuery] = useState(""); const [instructionsQuery, setInstructionsQuery] = useState(""); const [selectedMatters, setSelectedMatters] = useState([]); const [selections, setSelections] = useState(emptySelections); const [view, setView] = useState("list"); const [confirming, setConfirming] = useState(false); function closePicker() { setOpen(false); setActivePanel("files"); setFilesQuery(""); setInstructionsQuery(""); setSelectedMatters([]); setSelections(emptySelections()); setView("list"); setConfirming(false); } function setPanelSelection(panelId: PanelId, selectedIds: string[]) { setSelections((current) => ({ ...current, [panelId]: selectedIds })); } async function handleConfirm() { const selectedIds = selections[activePanel]; if (selectedIds.length === 0 || confirming) return; try { setConfirming(true); await onConfirm(selections); closePicker(); } finally { setConfirming(false); } } const selectedIds = selections[activePanel]; const itemLabel = activePanel === "files" ? "file" : "instruction"; return ( { if (nextOpen) setOpen(true); else closePicker(); }} > Attach {activePanel === "files" ? ( ) : ( )} {activePanel === "files" ? ( setPanelSelection("files", ids)} onUpload={onUpload} query={filesQuery} selectedIds={selections.files} selectedMatters={selectedMatters} view={view} /> ) : ( setPanelSelection("instructions", ids) } query={instructionsQuery} selectedIds={selections.instructions} /> )}

{selectedIds.length === 0 ? `No ${itemLabel}s selected` : `${formatPlural(selectedIds.length, itemLabel)} selected`}

Cancel
); } ``` ```tsx title="components/attachment-picker/files-panel.tsx" import { useMemo } from "react"; import { BarsFilter, FolderOpen, Grid, Menu as MenuIcon, } from "@tilt-legal/cubitt-icons/ui/outline"; import { Files, type FilesItem, type FilesUploadEntry, type FilesViewMode, } from "@tilt-legal/cubitt-components/files"; import { Button } from "@tilt-legal/cubitt-components/button"; import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxSeparator, ComboboxTrigger, } from "@tilt-legal/cubitt-components/combobox"; import { Dropzone, DropzoneFolderAnimation, type FileRejection, } from "@tilt-legal/cubitt-components/dropzone"; import { EmptyState, EmptyStateDescription, EmptyStateHeading, EmptyStateMedia, EmptyStateTitle, } from "@tilt-legal/cubitt-components/empty-state"; import { Input } from "@tilt-legal/cubitt-components/input"; import { SearchExpand } from "@tilt-legal/cubitt-components/search-expand"; import { toast } from "@tilt-legal/cubitt-components/toast"; import { ToggleGroup, ToggleGroupItem, } from "@tilt-legal/cubitt-components/toggle-group"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; import { getFileLabel } from "@tilt-legal/cubitt-components/utilities/formatters"; import { matters, type AttachmentFileSource, type Matter, } from "@/lib/attachment-picker-data"; type PanelProps = { disabled?: boolean; items: FilesItem[]; onUpload?: (entries: FilesUploadEntry[]) => void; query: string; selectedIds: string[]; selectedMatters: Matter[]; onSelectedIdsChange: (ids: string[]) => void; view: FilesViewMode; }; const ATTACHMENT_UPLOAD_ACCEPT = [ "application/pdf", "image/*", "text/plain", ] as const; function getFileType(item: FilesItem) { return item.kind === "file" ? getFileLabel(item.name, item.mediaType) : "Folder"; } function createUploadEntries(files: File[]): FilesUploadEntry[] { return files.map((file) => { const fileWithPath = file as File & { path?: string; webkitRelativePath?: string; }; const relativePath = fileWithPath.webkitRelativePath || fileWithPath.path || undefined; return { id: relativePath || `${file.name}-${file.size}-${file.lastModified}`, file, mediaType: file.type, name: file.name, relativePath, size: file.size, }; }); } function FilesListHeader() { return ( ); } function renderListFiles(items: FilesItem[]) { return items.map((item) => (
{getFileType(item)} {item.sizeLabel} {item.source?.updatedLabel} )); } function UploadDropzone({ disabled, onUpload, }: { disabled?: boolean; onUpload?: (entries: FilesUploadEntry[]) => void; }) { return ( onUpload?.(createUploadEntries(files))} onFilesRejected={(rejections: FileRejection[]) => { for (const rejection of rejections) { toast.error(rejection.message); } }} > Drop files here to upload or click to browse from your computer ); } export function AttachmentPickerFilesPanel({ disabled, items, onUpload, query, selectedIds, selectedMatters, onSelectedIdsChange, view, }: PanelProps) { const visibleItems = useMemo(() => { const selectedMatterIds = new Set(selectedMatters.map((matter) => matter.id)); const normalizedQuery = query.trim().toLowerCase(); return items.filter((item) => { const matchesMatter = selectedMatterIds.size === 0 || item.source?.matters.some((matter) => selectedMatterIds.has(matter.id)); const matchesQuery = !normalizedQuery || [item.name, item.description, item.sizeLabel, item.source?.owner] .filter((value): value is string => Boolean(value)) .some((value) => value.toLowerCase().includes(normalizedQuery)); return matchesMatter && matchesQuery; }); }, [items, query, selectedMatters]); const isNoFilesState = items.length === 0; const isNoResultsState = items.length > 0 && visibleItems.length === 0; const isUploadEmptyState = Boolean(onUpload) && isNoFilesState; return ( {visibleItems.length === 0 ? ( isUploadEmptyState ? ( ) : (
{isNoResultsState ? "No results found" : "No files available"} {isNoFilesState ? "There are no files to select from." : "Try a different search or matter filter."}
) ) : view === "grid" ? ( {visibleItems.map((item) => ( ))} ) : ( }> {renderListFiles(visibleItems)} )} ); } export function AttachmentPickerFilesToolbar({ disabled, onQueryChange, onSelectedMattersChange, onUpload, onViewChange, query, selectedMatters, view, }: { disabled?: boolean; query: string; selectedMatters: Matter[]; view: FilesViewMode; onQueryChange: (value: string) => void; onSelectedMattersChange: (matters: Matter[]) => void; onUpload?: (entries: FilesUploadEntry[]) => void; onViewChange: (value: FilesViewMode) => void; }) { return ( onQueryChange(event.currentTarget.value)} placeholder="Search files" value={query} /> onSelectedMattersChange(Array.isArray(value) ? value : []) } value={selectedMatters} > } > No matters found. {(matter: Matter) => ( {matter.value} )} { if (value === "grid" || value === "list") onViewChange(value); }} value={view} > {onUpload ? ( <> ) : null} ); } ``` ```tsx title="components/attachment-picker/instructions-panel.tsx" import { useMemo } from "react"; import { Checkbox } from "@tilt-legal/cubitt-components/checkbox"; import { Input } from "@tilt-legal/cubitt-components/input"; import { SearchExpand } from "@tilt-legal/cubitt-components/search-expand"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; import type { Instruction } from "@/lib/attachment-picker-data"; type PanelProps = { instructions: Instruction[]; query: string; selectedIds: string[]; onSelectedIdsChange: (ids: string[]) => void; }; export function AttachmentPickerInstructionsPanel({ instructions, query, selectedIds, onSelectedIdsChange, }: PanelProps) { const visibleInstructions = useMemo(() => { const normalizedQuery = query.trim().toLowerCase(); if (!normalizedQuery) return instructions; return instructions.filter((instruction) => [instruction.name, instruction.description].some((value) => value.toLowerCase().includes(normalizedQuery) ) ); }, [instructions, query]); function toggleInstruction(id: string) { onSelectedIdsChange( selectedIds.includes(id) ? selectedIds.filter((selectedId) => selectedId !== id) : [...selectedIds, id] ); } return (
{visibleInstructions.map((instruction) => { const isSelected = selectedIds.includes(instruction.id); return ( ); })} {visibleInstructions.length === 0 ? (

No instructions found.

) : null}
); } export function AttachmentPickerInstructionsToolbar({ disabled, onQueryChange, query, }: { disabled?: boolean; query: string; onQueryChange: (value: string) => void; }) { return ( onQueryChange(event.currentTarget.value)} placeholder="Search instructions" value={query} /> ); } ``` ```tsx title="components/attachment-picker/panel-switcher.tsx" import { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger, } from "@tilt-legal/cubitt-components/menu"; import { Toolbar } from "@tilt-legal/cubitt-components/toolbar"; type PanelId = "files" | "instructions"; export function AttachmentPickerPanelSwitcher({ activePanel, disabled, onPanelChange, }: { activePanel: PanelId; disabled?: boolean; onPanelChange: (panel: PanelId) => void; }) { const activeLabel = activePanel === "files" ? "Files" : "Instructions"; return ( {activeLabel} } /> { if (value === "files" || value === "instructions") { onPanelChange(value); } }} value={activePanel} > Files Instructions ); } ``` ```typescript title="components/attachment-picker/data.ts" import type { FilesItem } from "@tilt-legal/cubitt-components/files"; import { formatBytes } from "@tilt-legal/cubitt-components/utilities/formatters"; export type Matter = { id: string; value: string }; export type Instruction = { id: string; name: string; description: string }; export type AttachmentFileSource = { matters: Matter[]; owner: string; size: number; updatedLabel: string; }; export const matters = [ { id: "m1", value: "Smith v. Anderson" }, { id: "m2", value: "Johnson Estate Planning" }, { id: "m3", value: "Tech Corp Acquisition" }, ] satisfies Matter[]; export const files: FilesItem[] = [ { id: "financial-report", kind: "file", name: "Q4 Financial Report.pdf", mediaType: "application/pdf", sizeLabel: formatBytes(2_458_624), description: "Sarah Chen", source: { owner: "Sarah Chen", size: 2_458_624, updatedLabel: "Jan 6", matters: [matters[0]!], }, }, { id: "client-contract", kind: "file", name: "Client Contract.docx", mediaType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", sizeLabel: formatBytes(612_000), description: "Ava Johnson", source: { owner: "Ava Johnson", size: 612_000, updatedLabel: "Jan 6", matters: [matters[0]!, matters[2]!], }, }, ]; export const instructions: Instruction[] = [ { id: "i1", name: "Professional Email", description: "Draft a professional email response with appropriate tone.", }, { id: "i2", name: "Contract Summary", description: "Summarize key terms, obligations, and deadlines.", }, ]; ``` Use the docs preview buttons only to exercise states like empty uploads, no files, and no results. In application code, pass those states through props from your actual data and upload workflow.