first commit

ui/components/table/columnConfigDropdown.tsx

@@ -0,0 +1,58 @@
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Columns3, RotateCcw } from "lucide-react";
+import type { ColumnConfigEntry } from "./hooks/useColumnConfig";
+
+interface ColumnConfigDropdownProps {
+	entries: ColumnConfigEntry[];
+	labels?: Record<string, string>;
+	onToggleVisibility: (columnId: string) => void;
+	onReset: () => void;
+}
+
+function formatColumnId(id: string): string {
+	return id
+		.replace(/^metadata_/, "")
+		.replace(/_/g, " ")
+		.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function ColumnConfigDropdown({ entries, labels = {}, onToggleVisibility, onReset }: ColumnConfigDropdownProps) {
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button variant="outline" size="sm" className="h-7.5 w-7.5" data-testid="column-config-trigger" aria-label="Column configuration">
+					<Columns3 className="h-4 w-4" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-2" align="end">
+				<div className="space-y-1">
+					<div className="text-muted-foreground px-1 pb-1 text-xs font-medium">Toggle Columns</div>
+					{entries.map((entry) => (
+						<label key={entry.id} className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-1 py-1">
+							<Checkbox
+								checked={entry.visible}
+								onCheckedChange={() => onToggleVisibility(entry.id)}
+								data-testid={`column-visibility-${entry.id}`}
+							/>
+							<span className="truncate text-sm">{labels[entry.id] ?? formatColumnId(entry.id)}</span>
+						</label>
+					))}
+					<div className="border-t pt-1">
+						<Button
+							type="button"
+							onClick={onReset}
+							variant="ghost"
+							className="w-full justify-start text-sm"
+							data-testid="column-reset-default"
+						>
+							<RotateCcw className="h-3 w-3" />
+							Reset to default
+						</Button>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}