portal-mojo 0.1.0

package/src/ui/FileField.tsx

@@ -0,0 +1,369 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { FieldValue } from '../client/types';
+import { mojoCall } from '../client/client';
+import type { StartFileUploadOptions, UploadedFileRef } from '../client/upload';
+import { FileDropZone, type FileSelectionResult } from './FileDrop';
+import { useUploadQueue } from './UploadQueue';
+import { fileRelationId } from './field-wire';
+import { toast } from './toast';
+import { imageEditorModal, type ImageEditorModalOptions } from './image-editor';
+
+export type FileFieldState = 'keep' | 'clear' | 'replacement-in-progress' | 'replacement-failed'
+    | 'completed-awaiting-attach' | 'attach-failed' | 'edit-pending' | 'edit-ready' | 'edit-failed';
+
+export interface FileFieldOwnerResult {
+    generation: number;
+    status: 'success' | 'failed';
+    /** Exact relation value sent by this owner-save attempt. */
+    requestedValue: unknown;
+    /** Raw relation value from the authoritative owner response. */
+    authoritativeValue?: unknown;
+}
+
+export interface FileFieldProps {
+    value: FieldValue;
+    onChange: (value: number | null) => void;
+    image?: boolean;
+    accept?: string | string[];
+    maxFileSize?: number;
+    destination?: StartFileUploadOptions;
+    disabled?: boolean;
+    invalid?: boolean;
+    controlId?: string;
+    ariaDescribedBy?: string;
+    onPendingChange?: (pending: boolean) => void;
+    ownerResult?: FileFieldOwnerResult;
+    onOrphan?: (fileId: number) => void;
+    /** Image-only, opt-in editor that runs before any File upload is initiated. */
+    edit?: boolean | ImageEditorModalOptions;
+    /** Require an editor result; Cancel retains the selection for retry/discard only. */
+    requireEdit?: boolean;
+}
+
+export function reconcileFileOwnerResult(expected: number | null, result: FileFieldOwnerResult, lastGeneration: number): 'ignore' | 'attached' | 'failed' {
+    if (result.generation <= lastGeneration) return 'ignore';
+    const requested = fileRelationId(result.requestedValue);
+    const requestedMatches = expected == null ? result.requestedValue === null : requested === expected;
+    if (!requestedMatches) return 'ignore';
+    if (result.status === 'failed') return 'failed';
+    const authoritative = fileRelationId(result.authoritativeValue);
+    const authoritativeMatches = expected == null ? result.authoritativeValue === null : authoritative === expected;
+    return authoritativeMatches ? 'attached' : 'failed';
+}
+
+interface PreviewRow { url?: unknown; thumbnail?: unknown; filename?: unknown }
+
+function safePreviewUrl(value: unknown): string | null {
+    if (typeof value !== 'string' || value.trim() !== value || !value || value.startsWith('//')) return null;
+    if (value.startsWith('/')) return /[\r\n\\]/.test(value) ? null : value;
+    try {
+        const url = new URL(value);
+        return (url.protocol === 'http:' || url.protocol === 'https:') && !url.username && !url.password
+            ? value : null;
+    } catch { return null; }
+}
+
+/**
+ * Controlled django-mojo File relation editor. Browser File values, object
+ * URLs, upload tasks, and stored preview capabilities stay component-local.
+ */
+export function FileField(props: FileFieldProps) {
+    const {
+        image = false, disabled = false, invalid = false, destination,
+        onPendingChange, ownerResult, onOrphan,
+    } = props;
+    const initialId = fileRelationId(props.value);
+    const storedId = useRef<number | null>(initialId);
+    const desired = useRef<number | null | undefined>(undefined);
+    const candidate = useRef<number | null>(null);
+    const candidateFilename = useRef<string | null>(null);
+    const selectedOriginal = useRef<File | null>(null);
+    const editController = useRef<AbortController | null>(null);
+    const generation = useRef(0);
+    const ownerGeneration = useRef(0);
+    const orphaned = useRef(new Set<number>());
+    const mounted = useRef(true);
+    const localUrl = useRef<string | null>(null);
+    const latestOrphan = useRef(onOrphan);
+    latestOrphan.current = onOrphan;
+    const [preview, setPreview] = useState<string | null>(null);
+    const [filename, setFilename] = useState<string | null>(null);
+    const [state, setState] = useState<FileFieldState>('keep');
+    const [editing, setEditing] = useState(false);
+    const queue = useUploadQueue({ concurrency: 1, capacity: 1 });
+
+    const revokeLocal = useCallback(() => {
+        if (localUrl.current) URL.revokeObjectURL(localUrl.current);
+        localUrl.current = null;
+    }, []);
+    const reportOrphan = useCallback((id: number | null) => {
+        if (id == null || orphaned.current.has(id)) return;
+        orphaned.current.add(id);
+        latestOrphan.current?.(id);
+    }, []);
+    const clearQueue = useCallback(() => {
+        for (const item of queue.snapshot.items) {
+            if (item.canCancel) queue.cancel(item.id);
+            queue.remove(item.id);
+        }
+    }, [queue]);
+
+    useEffect(() => () => {
+        mounted.current = false;
+        generation.current += 1;
+        editController.current?.abort();
+        revokeLocal();
+        if (desired.current !== undefined && candidate.current != null) reportOrphan(candidate.current);
+        queue.cancelAll();
+    }, [queue, reportOrphan, revokeLocal]);
+
+    const active = queue.snapshot.activeCount > 0 || queue.snapshot.queuedCount > 0;
+    const pending = active || editing;
+    useEffect(() => {
+        if (!disabled) return;
+        if (active) queue.cancelAll();
+        if (editController.current) {
+            editController.current.abort();
+            setEditing(false);
+            setState('edit-ready');
+        }
+    }, [active, disabled, queue]);
+
+    useEffect(() => {
+        onPendingChange?.(pending);
+        return () => onPendingChange?.(false);
+    }, [onPendingChange, pending]);
+
+    // Stored capabilities are fetched only while mounted, never returned to a
+    // caller or written through Query. Failures intentionally reveal nothing.
+    useEffect(() => {
+        if (!image || storedId.current == null || localUrl.current) {
+            if (storedId.current == null && !localUrl.current) setPreview(null);
+            return;
+        }
+        const controller = new AbortController();
+        let live = true;
+        void mojoCall(`/api/fileman/file/${storedId.current}`, { signal: controller.signal }).then((envelope) => {
+            const row = envelope.data as PreviewRow;
+            if (!live || controller.signal.aborted || localUrl.current) return;
+            setPreview(safePreviewUrl(row.thumbnail) ?? safePreviewUrl(row.url));
+            setFilename(typeof row.filename === 'string' ? row.filename : null);
+        }, () => { /* capability and failure remain local and silent */ });
+        return () => { live = false; controller.abort(); };
+    }, [image, initialId, state]);
+
+    useEffect(() => {
+        if (!ownerResult || desired.current === undefined) return;
+        const outcome = reconcileFileOwnerResult(desired.current, ownerResult, ownerGeneration.current);
+        if (outcome === 'ignore') return;
+        ownerGeneration.current = ownerResult.generation;
+        const expected = desired.current;
+        if (outcome === 'failed') {
+            setState('attach-failed');
+            return;
+        }
+        storedId.current = expected;
+        desired.current = undefined;
+        candidate.current = null;
+        candidateFilename.current = null;
+        setFilename(null);
+        revokeLocal();
+        setPreview(null);
+        setState('keep');
+        queue.clearSettled();
+    }, [ownerResult, queue, revokeLocal]);
+
+    // A genuinely external authoritative row change can refresh the stored
+    // baseline, but a local draft never replaces it while attachment awaits.
+    useEffect(() => {
+        if (desired.current !== undefined) return;
+        storedId.current = initialId;
+    }, [initialId]);
+
+    useEffect(() => {
+        const item = queue.snapshot.items[0];
+        if (!item) {
+            if (state === 'replacement-in-progress') setState('replacement-failed');
+            return;
+        }
+        if (active) {
+            if (state === 'replacement-failed') setState('replacement-in-progress');
+            return;
+        }
+        if (item.status === 'failed' || item.status === 'uncertain' || item.status === 'cancelled') {
+            setState('replacement-failed');
+        }
+    }, [active, queue.snapshot.items, state]);
+
+    const enqueueFile = (file: File, acceptedGeneration: number) => {
+        selectedOriginal.current = null;
+        reportOrphan(candidate.current);
+        candidate.current = null;
+        desired.current = undefined;
+        clearQueue();
+        revokeLocal();
+        localUrl.current = URL.createObjectURL(file);
+        setPreview(image ? localUrl.current : null);
+        setFilename(file.name);
+        setState('replacement-in-progress');
+        const result = queue.enqueue([file], {
+            consumerKey: `form-file:${props.controlId ?? 'field'}`,
+            destination,
+            onComplete: async (uploaded: UploadedFileRef) => {
+                if (!mounted.current || generation.current !== acceptedGeneration) return;
+                const id = fileRelationId(uploaded.id);
+                if (id == null) throw new Error('Upload completion did not include an authoritative File id');
+                candidate.current = id;
+                candidateFilename.current = uploaded.filename;
+                desired.current = id;
+                setState('completed-awaiting-attach');
+                props.onChange(id);
+            },
+        });
+        result.rejected.forEach((item) => toast.warning(item.message));
+        if (!result.acceptedIds.length) setState('replacement-failed');
+    };
+
+    const editSelected = async (file: File, acceptedGeneration: number) => {
+        editController.current?.abort();
+        const controller = new AbortController();
+        editController.current = controller;
+        setEditing(true);
+        setState('edit-pending');
+        try {
+            const configured: ImageEditorModalOptions = typeof props.edit === 'object' ? props.edit : {};
+            const result = await imageEditorModal(file, {
+                ...configured,
+                filename: configured.filename ?? file.name,
+                signal: controller.signal,
+            });
+            if (!mounted.current || controller.signal.aborted || generation.current !== acceptedGeneration) return;
+            if (!result) {
+                setState('edit-ready');
+                return;
+            }
+            const edited = new File([result.blob], result.filename, { type: 'image/png', lastModified: file.lastModified });
+            enqueueFile(edited, acceptedGeneration);
+        } catch {
+            if (mounted.current && !controller.signal.aborted && generation.current === acceptedGeneration) setState('edit-failed');
+        } finally {
+            if (mounted.current && editController.current === controller) {
+                editController.current = null;
+                setEditing(false);
+            }
+        }
+    };
+
+    const select = (selection: FileSelectionResult) => {
+        selection.rejected.forEach((item) => toast.warning(item.message));
+        const file = selection.accepted[0];
+        if (!file) return;
+        generation.current += 1;
+        const acceptedGeneration = generation.current;
+        editController.current?.abort();
+        reportOrphan(candidate.current);
+        candidate.current = null;
+        desired.current = undefined;
+        clearQueue();
+        revokeLocal();
+        localUrl.current = URL.createObjectURL(file);
+        setPreview(image ? localUrl.current : null);
+        setFilename(file.name);
+        if (image && props.edit) {
+            selectedOriginal.current = file;
+            setState('edit-ready');
+            void editSelected(file, acceptedGeneration);
+        } else {
+            enqueueFile(file, acceptedGeneration);
+        }
+    };
+
+    const clear = () => {
+        generation.current += 1;
+        editController.current?.abort();
+        selectedOriginal.current = null;
+        reportOrphan(candidate.current);
+        candidate.current = null;
+        desired.current = null;
+        clearQueue();
+        revokeLocal();
+        setState('clear');
+        props.onChange(null);
+    };
+    const removeCandidate = () => {
+        generation.current += 1;
+        editController.current?.abort();
+        selectedOriginal.current = null;
+        reportOrphan(candidate.current);
+        candidate.current = null;
+        desired.current = undefined;
+        clearQueue();
+        revokeLocal();
+        setFilename(null);
+        setPreview(null);
+        setState('keep');
+        props.onChange(storedId.current);
+    };
+    const retryAttach = () => {
+        if (desired.current === undefined) return;
+        setState(desired.current == null ? 'clear' : 'completed-awaiting-attach');
+        props.onChange(desired.current);
+    };
+    const retryEdit = () => {
+        const file = selectedOriginal.current;
+        if (file) void editSelected(file, generation.current);
+    };
+    const useOriginal = () => {
+        const file = selectedOriginal.current;
+        if (file) enqueueFile(file, generation.current);
+    };
+    const discardSelection = () => {
+        generation.current += 1;
+        editController.current?.abort();
+        selectedOriginal.current = null;
+        revokeLocal();
+        setFilename(null);
+        setPreview(null);
+        setState('keep');
+    };
+
+    const item = queue.snapshot.items[0];
+    const hasStored = storedId.current != null;
+    const statusText = state === 'keep' ? (hasStored ? 'Keep current file' : 'No file selected')
+        : state === 'clear' ? 'Clear on save'
+            : state === 'replacement-in-progress' ? (item?.percent == null ? 'Uploading…' : `Uploading… ${item.percent}%`)
+                : state === 'replacement-failed' ? (item?.failure?.message ?? 'Upload failed')
+                    : state === 'completed-awaiting-attach' ? 'Uploaded · awaiting save'
+                        : state === 'attach-failed' ? 'Uploaded · attachment failed'
+                            : state === 'edit-pending' ? 'Editing before upload…'
+                                : state === 'edit-failed' ? 'Editing failed · original selection preserved'
+                                    : 'Selected · not uploaded';
+
+    return (
+        <div id={props.controlId} className={`file-field${image ? ' image-field' : ''}${invalid ? ' is-invalid' : ''}`} aria-describedby={props.ariaDescribedBy}>
+            {image && <div className="file-field-preview">{preview ? <img src={preview} alt="Selected preview" referrerPolicy="no-referrer" /> : <i className="bi bi-image" aria-hidden="true" />}</div>}
+            <div className="file-field-main">
+                <strong>{filename ?? candidateFilename.current ?? (hasStored ? `File #${storedId.current}` : 'No file')}</strong>
+                <span className={`file-field-status is-${state}`}>{statusText}</span>
+                {item?.canRetry && <button type="button" className="btn btn-compact" disabled={disabled} onClick={() => queue.retry(item.id)}>Retry upload</button>}
+                {state === 'attach-failed' && <button type="button" className="btn btn-compact" disabled={disabled} onClick={retryAttach}>Retry attachment</button>}
+                {(state === 'edit-ready' || state === 'edit-failed') && <div className="file-field-edit-actions">
+                    <button type="button" className="btn btn-compact" disabled={disabled} onClick={retryEdit}>{state === 'edit-failed' ? 'Retry edit' : 'Edit'}</button>
+                    {!props.requireEdit && <button type="button" className="btn btn-compact" disabled={disabled} onClick={useOriginal}>Use original</button>}
+                    <button type="button" className="btn btn-compact" disabled={disabled} onClick={discardSelection}>Discard</button>
+                </div>}
+            </div>
+            <div className="file-field-actions">
+                <FileDropZone className="file-field-drop" label={hasStored || candidate.current || selectedOriginal.current ? 'Choose replacement file or drop it here' : 'Choose a file or drop it here'} multiple={false} accept={image ? props.accept ?? 'image/*' : props.accept} maxFileSize={props.maxFileSize} disabled={disabled || pending} onSelection={select}>
+                    <span><i className="bi bi-cloud-arrow-up" /> {hasStored || candidate.current || selectedOriginal.current ? 'Replace' : 'Choose file'}</span>
+                </FileDropZone>
+                {(hasStored || desired.current !== undefined) && <button type="button" className="btn btn-compact" disabled={disabled || active} onClick={desired.current !== undefined ? removeCandidate : clear}>{desired.current !== undefined ? 'Remove' : 'Clear'}</button>}
+                {item?.canCancel && <button type="button" className="btn btn-compact" disabled={disabled} onClick={() => queue.cancel(item.id)}>Cancel</button>}
+            </div>
+        </div>
+    );
+}
+
+export function ImageField(props: Omit<FileFieldProps, 'image'>) {
+    return <FileField {...props} image />;
+}

package/src/ui/FilterBar.tsx

@@ -0,0 +1,269 @@
+// FilterBar — web-mojo's filter UX: an "Add filter" menu listing every
+// available filter with a per-type icon and a check on the active ones, each
+// opening a type-appropriate dialog; applied filters become editable pills.
+// Adding a filter to a page is one entry in a `filters` array.
+import { useEffect, useRef, useState } from 'react';
+import { modal } from './modal';
+import { DateRangePicker } from './date/DateRangePicker';
+import { formatFilterDisplay } from '../client/lookups';
+import type { ActiveFilter, TableParamsApi } from '../client/params';
+
+export type FilterType = 'text' | 'select' | 'multiselect' | 'number' | 'boolean' | 'date' | 'daterange';
+
+export interface FilterDef {
+    key: string;                 // model field
+    label: string;
+    type: FilterType;
+    options?: { value: string; label: string }[];
+    /** Django lookup override; defaults per type (text→icontains, number→gte). */
+    lookup?: string;
+    trueLabel?: string;
+    falseLabel?: string;
+    placeholder?: string;
+}
+
+const ICONS: Record<FilterType, string> = {
+    text: 'bi-search',
+    select: 'bi-funnel',
+    multiselect: 'bi-funnel',
+    number: 'bi-123',
+    boolean: 'bi-toggle-on',
+    date: 'bi-calendar',
+    daterange: 'bi-calendar-range',
+};
+
+/** The wire key a filter writes — daterange uses the dr_* triple instead. */
+export function paramKeyFor(def: FilterDef): string {
+    switch (def.type) {
+        case 'text': return `${def.key}__${def.lookup ?? 'icontains'}`;
+        case 'multiselect': return `${def.key}__in`;
+        case 'number': return `${def.key}__${def.lookup ?? 'gte'}`;
+        case 'date': return `${def.key}__${def.lookup ?? 'gte'}`;
+        default: return def.key;
+    }
+}
+
+function defForActive(defs: FilterDef[], f: ActiveFilter): FilterDef | undefined {
+    if (f.kind === 'daterange') return defs.find((d) => d.type === 'daterange' && d.key === f.id);
+    return defs.find((d) => {
+        if (d.type === 'daterange') return false;
+        return paramKeyFor(d) === f.id || d.key === f.id || `${d.key}__in` === f.id;
+    });
+}
+
+function isActive(defs: FilterDef[], active: ActiveFilter[], def: FilterDef): boolean {
+    return active.some((f) => defForActive(defs, f) === def);
+}
+
+function pillText(def: FilterDef | undefined, f: ActiveFilter): string {
+    if (f.kind === 'daterange') {
+        const label = def?.label ?? f.id;
+        if (f.start && f.end) return `${label}: ${f.start} → ${f.end}`;
+        if (f.start) return `${label}: from ${f.start}`;
+        return `${label}: until ${f.end}`;
+    }
+    const raw = f.value ?? '';
+    // Map stored values back to their option labels where we have them.
+    const pretty = def?.options
+        ? raw.split(',').map((v) => def.options!.find((o) => o.value === v.trim())?.label ?? v).join(', ')
+        : def?.type === 'boolean'
+            ? (raw === 'true' ? (def.trueLabel ?? 'True') : (def.falseLabel ?? 'False'))
+            : raw;
+    return formatFilterDisplay(f.id, pretty, def?.label);
+}
+
+// ── per-type dialogs ──────────────────────────────────────────────────
+type DialogResult = { clear: true } | { value: string | string[] } | { start: string; end: string } | null;
+
+function FilterForm({ def, current, onDone }: {
+    def: FilterDef;
+    current: ActiveFilter | undefined;
+    onDone: (r: DialogResult) => void;
+}) {
+    const [text, setText] = useState(current?.value ?? '');
+    const [multi, setMulti] = useState<string[]>(
+        current?.value ? current.value.split(',').map((s) => s.trim()) : [],
+    );
+    const [start, setStart] = useState(current?.start ?? '');
+    const [end, setEnd] = useState(current?.end ?? '');
+
+    const submit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (def.type === 'daterange') onDone({ start, end });
+        else if (def.type === 'multiselect') onDone({ value: multi });
+        else onDone({ value: text });
+    };
+
+    return (
+        <form className="modal-pad" onSubmit={submit}>
+            <h2 className="modal-title">{def.label}</h2>
+            {def.type === 'daterange' ? (
+                /* Inline DateRangePicker (preset rail on) replaced the two
+                   bare native date inputs. Same staged start/end state, same
+                   Apply/Remove/Cancel semantics and dr_* wire values — one
+                   calendar pane so the body fits the md dialog. */
+                <DateRangePicker
+                    inline
+                    months={1}
+                    presets="default"
+                    start={start}
+                    end={end}
+                    onChange={(e) => { setStart(e.start); setEnd(e.end); }}
+                />
+            ) : def.type === 'multiselect' ? (
+                <div className="check-list">
+                    {(def.options ?? []).map((o) => (
+                        <label key={o.value} className="check-row">
+                            <input
+                                type="checkbox"
+                                checked={multi.includes(o.value)}
+                                onChange={(e) => setMulti((prev) => e.target.checked
+                                    ? [...prev, o.value]
+                                    : prev.filter((v) => v !== o.value))}
+                            />
+                            {o.label}
+                        </label>
+                    ))}
+                </div>
+            ) : def.type === 'select' || def.type === 'boolean' ? (
+                <select className="input" value={text} onChange={(e) => setText(e.target.value)} autoFocus>
+                    <option value="">Select…</option>
+                    {(def.type === 'boolean'
+                        ? [{ value: 'true', label: def.trueLabel ?? 'True' }, { value: 'false', label: def.falseLabel ?? 'False' }]
+                        : def.options ?? []
+                    ).map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+                </select>
+            ) : (
+                <input
+                    className="input"
+                    type={def.type === 'number' ? 'number' : def.type === 'date' ? 'date' : 'text'}
+                    value={text}
+                    placeholder={def.placeholder}
+                    onChange={(e) => setText(e.target.value)}
+                    autoFocus
+                />
+            )}
+            {def.type === 'number' && (
+                <span className="field-help">Matches records where {def.label.toLowerCase()} is ≥ this value.</span>
+            )}
+            <div className="modal-actions">
+                {current && <button type="button" className="btn" onClick={() => onDone({ clear: true })}>Remove</button>}
+                <button type="button" className="btn" onClick={() => onDone(null)}>Cancel</button>
+                <button type="submit" className="btn btn-primary">Apply</button>
+            </div>
+        </form>
+    );
+}
+
+async function openFilterDialog(def: FilterDef, current: ActiveFilter | undefined, p: TableParamsApi) {
+    const result = await modal.open<DialogResult>((close) => (
+        <FilterForm def={def} current={current} onDone={(r) => close(r)} />
+    ), { size: def.type === 'daterange' ? 'md' : 'sm' });
+    if (!result) return;
+    if (def.type === 'daterange') {
+        if ('clear' in result) p.setDateRange(def.key, '', '');
+        else if ('start' in result) p.setDateRange(def.key, result.start, result.end);
+        return;
+    }
+    if ('clear' in result) p.setFilter(paramKeyFor(def), null);
+    else if ('value' in result) p.setFilter(paramKeyFor(def), result.value);
+}
+
+// ── the bar ───────────────────────────────────────────────────────────
+export function FilterBar({ defs, params }: { defs: FilterDef[]; params: TableParamsApi }) {
+    const [open, setOpen] = useState(false);
+    const wrapRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!open) return;
+        const onDown = (e: MouseEvent) => {
+            if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
+        };
+        const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
+        document.addEventListener('mousedown', onDown);
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('mousedown', onDown);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open]);
+
+    const active = params.activeFilters;
+
+    return (
+        <div className="filter-menu-wrap" ref={wrapRef}>
+            <button
+                className={`btn btn-compact${active.length ? ' btn-has-filters' : ''}`}
+                onClick={() => setOpen((v) => !v)}
+                aria-expanded={open}
+                title="Filter"
+            >
+                {/* Label collapses on normal widths (tool-group icon mode);
+                    the active-count badge stays visible either way. */}
+                <i className="bi bi-funnel" /> <span className="btn-label">Filter</span>
+                {active.length > 0 && <span className="filter-count">{active.length}</span>}
+            </button>
+            {open && (
+                <div className="filter-menu" role="menu">
+                    {defs.map((def) => {
+                        const on = isActive(defs, active, def);
+                        return (
+                            <button
+                                key={`${paramKeyFor(def)}:${def.label}`}
+                                className={`filter-menu-item${on ? ' filter-on' : ''}`}
+                                onClick={() => {
+                                    setOpen(false);
+                                    const current = active.find((f) => defForActive(defs, f) === def);
+                                    void openFilterDialog(def, current, params);
+                                }}
+                            >
+                                <i className={`bi ${ICONS[def.type]}`} />
+                                <span>{def.label}</span>
+                                {on && <i className="bi bi-check2 filter-check" />}
+                            </button>
+                        );
+                    })}
+                    {active.length > 0 && (
+                        <>
+                            <div className="filter-menu-sep" />
+                            <button
+                                className="filter-menu-item filter-menu-clear"
+                                onClick={() => { setOpen(false); params.clearFilters(); }}
+                            >
+                                <i className="bi bi-x-circle" /> Clear all filters
+                            </button>
+                        </>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/** Active-filter pills — click to edit, × to remove. */
+export function FilterPills({ defs, params }: { defs: FilterDef[]; params: TableParamsApi }) {
+    const active = params.activeFilters;
+    if (active.length === 0) return null;
+    return (
+        <div className="pill-row">
+            {active.map((f) => {
+                const def = defForActive(defs, f);
+                return (
+                    <span key={`${f.kind}:${f.id}`} className="pill">
+                        <button
+                            className="pill-edit"
+                            title="Edit filter"
+                            onClick={() => def && void openFilterDialog(def, f, params)}
+                        >
+                            {pillText(def, f)}
+                        </button>
+                        <button className="pill-x" title="Remove filter" onClick={() => params.removeFilter(f)}>
+                            <i className="bi bi-x" />
+                        </button>
+                    </span>
+                );
+            })}
+            <button className="pill-clear" onClick={() => params.clearFilters()}>Clear all</button>
+        </div>
+    );
+}