This example keeps `Files.Details` focused on metadata display and inline rename
mechanics. The consumer owns the file collection, selected IDs, rename mutation,
product-specific metadata, and the surrounding split layout.
```tsx title="components/files-details-panel/index.tsx"
import { useMemo, useState } from "react";
import {
Files,
type FilesItem,
} from "@tilt-legal/cubitt-components/files";
import { Separator } from "@tilt-legal/cubitt-components/separator";
import { toast } from "@tilt-legal/cubitt-components/toast";
import { formatPlural } from "@tilt-legal/cubitt-components/utilities/formatters";
import { MatterFileDetailsPanel } from "@/components/files-details-panel/details-sidebar";
import {
matterFiles,
type MatterFileSource,
} from "@/components/files-details-panel/data";
function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export function FilesDetailsPanel() {
const [items, setItems] = useState(matterFiles);
const [selectedIds, setSelectedIds] = useState([
"financial-report",
]);
const selectedItems = useMemo(
() =>
selectedIds
.map((id) => items.find((item) => item.id === id))
.filter((item): item is FilesItem => Boolean(item)),
[items, selectedIds],
);
const currentDetailsItem = useMemo>(
() => ({
id: "current-files",
kind: "folder",
name: "Files",
description: formatPlural(items.length, "item"),
source: {
matter: "Bennett v Carter",
owner: "Matter team",
status: "Reviewed",
updatedLabel: "Today",
},
}),
[items.length],
);
const detailsItems =
selectedItems.length > 0 ? selectedItems : [currentDetailsItem];
async function renameItem(item: FilesItem, name: string) {
await sleep(300);
setItems((currentItems) =>
currentItems.map((currentItem) =>
currentItem.id === item.id ? { ...currentItem, name } : currentItem,
),
);
toast.success("File renamed", { description: name });
}
return (
item.id !== currentDetailsItem.id}
detailsItem={currentDetailsItem}
items={items}
onRename={renameItem}
onSelectedIdsChange={setSelectedIds}
selectedIds={selectedIds}
selectionMode="multiple"
>
{items.map((item) => (
))}
);
}
```
```tsx title="components/files-details-panel/details-sidebar.tsx"
import {
Files,
type FilesItem,
} from "@tilt-legal/cubitt-components/files";
import { Separator } from "@tilt-legal/cubitt-components/separator";
import {
formatBytes,
formatPlural,
} from "@tilt-legal/cubitt-components/utilities/formatters";
import type { MatterFileSource } from "@/components/files-details-panel/data";
type Props = {
className?: string;
selectedItems: FilesItem[];
};
export function MatterFileDetailsPanel({
className,
selectedItems,
}: Props) {
const singleItem = selectedItems.length === 1 ? selectedItems[0] : null;
const matterCount = new Set(
selectedItems.map((item) => item.source?.matter).filter(Boolean),
).size;
const ownerCount = new Set(
selectedItems.map((item) => item.source?.owner).filter(Boolean),
).size;
const selectedTotalSizeLabel = selectedItems.every(
(item) => typeof item.size === "number",
)
? formatBytes(
selectedItems.reduce(
(totalSize, item) => totalSize + (item.size ?? 0),
0,
),
)
: null;
return (
{singleItem?.source?.matter ? (
Matter
{singleItem.source.matter}
) : null}
{singleItem?.source?.owner ? (
Owner
{singleItem.source.owner}
) : null}
{singleItem?.source?.status ? (
Status
{singleItem.source.status}
) : null}
{singleItem?.source?.updatedLabel ? (
Updated
{singleItem.source.updatedLabel}
) : null}
{singleItem?.sizeLabel ? (
Size
{singleItem.sizeLabel}
) : null}
{selectedItems.length > 1 ? (
Files selected
{selectedItems.length}
) : null}
{selectedItems.length > 1 && selectedTotalSizeLabel ? (
Total size
{selectedTotalSizeLabel}
) : null}
{selectedItems.length > 1 ? (
Matters
{formatPlural(matterCount, "matter")}
) : null}
{selectedItems.length > 1 ? (
Owners
{formatPlural(ownerCount, "owner")}
) : null}
);
}
```
```typescript title="components/files-details-panel/data.ts"
import type { FilesItem } from "@tilt-legal/cubitt-components/files";
export type MatterFileSource = {
matter: string;
owner: string;
status: "Draft" | "Reviewed" | "Filed";
updatedLabel: string;
};
export const matterFiles: FilesItem[] = [
{
id: "financial-report",
kind: "file",
name: "Q4FinancialReportBennettVCarterLitigationBudgetAndSettlementExposureAnalysisFinalReviewedCopy.pdf",
mediaType: "application/pdf",
size: 2_458_624,
sizeLabel: "2.4 MB",
description: "Sarah Chen",
source: {
matter: "Bennett v Carter",
owner: "Sarah Chen",
status: "Reviewed",
updatedLabel: "2 days ago",
},
},
{
id: "deposition-outline",
kind: "file",
name: "Deposition Outline.docx",
mediaType:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
size: 884_736,
sizeLabel: "864 KB",
description: "Ava Johnson",
source: {
matter: "Hudson Contract Review",
owner: "Ava Johnson",
status: "Draft",
updatedLabel: "Apr 18",
},
},
{
id: "folder-discovery",
kind: "folder",
name: "Discovery",
description: "12 items",
source: {
matter: "Bennett v Carter",
owner: "Sarah Chen",
status: "Draft",
updatedLabel: "Today",
},
},
];
```