File size: 2,936 Bytes
6111b2b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | "use client";
/**
* ColumnToggle — Shared UI primitive (T-29)
*
* Dropdown menu for toggling table column visibility.
* Used by RequestLoggerV2, ProxyLogger, etc.
*
* Usage:
* <ColumnToggle
* columns={[{ key: 'model', label: 'Model' }, ...]}
* visible={{ model: true, provider: false, ... }}
* onToggle={(key) => setVisible({...visible, [key]: !visible[key]})}
* />
*/
import { useState, useRef, useEffect } from "react";
export default function ColumnToggle({ columns = [], visible = {}, onToggle }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
// Close on outside click
useEffect(() => {
if (!open) return;
const handler = (e) => {
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
};
document.addEventListener("mousedown", handler);
return () => document.removeEventListener("mousedown", handler);
}, [open]);
return (
<div ref={ref} style={{ position: "relative" }}>
<button
onClick={() => setOpen(!open)}
title="Toggle columns"
style={{
padding: "6px 10px",
borderRadius: "6px",
border: "1px solid rgba(255,255,255,0.1)",
background: "rgba(255,255,255,0.05)",
color: "var(--text-secondary, #888)",
fontSize: "13px",
cursor: "pointer",
display: "flex",
alignItems: "center",
gap: "4px",
}}
>
<span style={{ fontSize: "14px" }}>⚙️</span>
Columns
</button>
{open && (
<div
style={{
position: "absolute",
top: "100%",
right: 0,
marginTop: "4px",
background: "rgba(20,20,30,0.95)",
border: "1px solid rgba(255,255,255,0.1)",
borderRadius: "8px",
padding: "8px",
zIndex: 50,
minWidth: "160px",
backdropFilter: "blur(12px)",
}}
>
{columns.map((col) => (
<label
key={col.key}
style={{
display: "flex",
alignItems: "center",
gap: "8px",
padding: "4px 8px",
cursor: "pointer",
fontSize: "12px",
color: visible[col.key]
? "var(--text-primary, #e0e0e0)"
: "var(--text-secondary, #888)",
borderRadius: "4px",
}}
>
<input
type="checkbox"
checked={visible[col.key] ?? true}
onChange={() => onToggle(col.key)}
style={{ accentColor: "#6366f1" }}
/>
{col.label}
</label>
))}
</div>
)}
</div>
);
}
|