feat: Lead Master — column show/hide toggle, resizable table, remove dead filter/sort buttons

- ColumnToggle component with checkbox dropdown for column visibility
- useColumnVisibility hook for state management
- Campaign/Ad/FirstContact/Spam/Dups hidden by default (mostly empty)
- ResizableTableContainer wrapping Table for column resize support
- Column defaultWidth/minWidth props
- Removed non-functional Filter and Sort buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/application/table/column-toggle.tsx

@@ -0,0 +1,94 @@
+import { useState, useRef, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faColumns3 } from '@fortawesome/pro-duotone-svg-icons';
+import { Button } from '@/components/base/buttons/button';
+import { Checkbox } from '@/components/base/checkbox/checkbox';
+import type { FC } from 'react';
+
+const ColumnsIcon: FC<{ className?: string }> = ({ className }) => (
+    <FontAwesomeIcon icon={faColumns3} className={className} />
+);
+
+export type ColumnDef = {
+    id: string;
+    label: string;
+    defaultVisible?: boolean;
+};
+
+interface ColumnToggleProps {
+    columns: ColumnDef[];
+    visibleColumns: Set<string>;
+    onToggle: (columnId: string) => void;
+}
+
+export const ColumnToggle = ({ columns, visibleColumns, onToggle }: ColumnToggleProps) => {
+    const [open, setOpen] = useState(false);
+    const panelRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!open) return;
+        const handler = (e: MouseEvent) => {
+            if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, [open]);
+
+    return (
+        <div className="relative" ref={panelRef}>
+            <Button
+                size="sm"
+                color="secondary"
+                iconLeading={ColumnsIcon}
+                onClick={() => setOpen(!open)}
+            >
+                Columns
+            </Button>
+
+            {open && (
+                <div className="absolute top-full right-0 mt-2 w-56 rounded-xl bg-primary shadow-xl ring-1 ring-secondary z-50 overflow-hidden">
+                    <div className="px-3 py-2 border-b border-secondary">
+                        <span className="text-xs font-semibold text-tertiary">Show/Hide Columns</span>
+                    </div>
+                    <div className="max-h-64 overflow-y-auto py-1">
+                        {columns.map(col => (
+                            <label
+                                key={col.id}
+                                className="flex items-center gap-2 px-3 py-1.5 text-xs text-primary hover:bg-primary_hover cursor-pointer"
+                            >
+                                <Checkbox
+                                    size="sm"
+                                    isSelected={visibleColumns.has(col.id)}
+                                    onChange={() => onToggle(col.id)}
+                                />
+                                {col.label}
+                            </label>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export const useColumnVisibility = (columns: ColumnDef[]) => {
+    const [visibleColumns, setVisibleColumns] = useState<Set<string>>(() => {
+        return new Set(columns.filter(c => c.defaultVisible !== false).map(c => c.id));
+    });
+
+    const toggle = (columnId: string) => {
+        setVisibleColumns(prev => {
+            const next = new Set(prev);
+            if (next.has(columnId)) {
+                next.delete(columnId);
+            } else {
+                next.add(columnId);
+            }
+            return next;
+        });
+    };
+
+    return { visibleColumns, toggle };
+};

src/components/application/table/table.tsx

@@ -17,7 +17,9 @@ import {
     Cell as AriaCell,
     Collection as AriaCollection,
     Column as AriaColumn,
+    ColumnResizer as AriaColumnResizer,
     Group as AriaGroup,
+    ResizableTableContainer as AriaResizableTableContainer,
     Row as AriaRow,
     Table as AriaTable,
     TableBody as AriaTableBody,
@@ -115,9 +117,9 @@ const TableRoot = ({ className, size = "md", ...props }: TableRootProps) => {
 
     return (
         <TableContext.Provider value={{ size: context?.size ?? size }}>
-            <div className="flex-1 overflow-auto min-h-0">
+            <AriaResizableTableContainer className="flex-1 overflow-auto min-h-0">
                 <AriaTable className={(state) => cx("w-full", typeof className === "function" ? className(state) : className)} {...props} />
-            </div>
+            </AriaResizableTableContainer>
         </TableContext.Provider>
     );
 };
@@ -168,9 +170,10 @@ TableHeader.displayName = "TableHeader";
 interface TableHeadProps extends AriaColumnProps, Omit<ThHTMLAttributes<HTMLTableCellElement>, "children" | "className" | "style" | "id"> {
     label?: string;
     tooltip?: string;
+    allowsResizing?: boolean;
 }
 
-const TableHead = ({ className, tooltip, label, children, ...props }: TableHeadProps) => {
+const TableHead = ({ className, tooltip, label, children, allowsResizing, ...props }: TableHeadProps) => {
     const { selectionBehavior } = useTableOptions();
 
     return (
@@ -186,8 +189,8 @@ const TableHead = ({ className, tooltip, label, children, ...props }: TableHeadP
             }
         >
             {(state) => (
-                <AriaGroup className="flex items-center gap-1">
+                <AriaGroup className="flex items-center gap-1" role="presentation">
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 flex-1 min-w-0">
                         {label && <span className="text-xs font-semibold whitespace-nowrap text-quaternary">{label}</span>}
                         {typeof children === "function" ? children(state) : children}
                     </div>
@@ -206,6 +209,10 @@ const TableHead = ({ className, tooltip, label, children, ...props }: TableHeadP
                         ) : (
                             <FontAwesomeIcon icon={faSort} className="text-fg-quaternary" />
                         ))}
+
+                    {allowsResizing && (
+                        <AriaColumnResizer className="absolute top-0 right-0 bottom-0 w-1 cursor-col-resize bg-transparent hover:bg-brand data-[resizing]:bg-brand" />
+                    )}
                 </AriaGroup>
             )}
         </AriaColumn>

src/components/leads/lead-table.tsx

@@ -24,6 +24,7 @@ type LeadTableProps = {
     sortDirection: 'asc' | 'desc';
     onSort: (field: string) => void;
     onViewActivity?: (lead: Lead) => void;
+    visibleColumns?: Set<string>;
 };
 
 type TableRow = {
@@ -53,6 +54,7 @@ export const LeadTable = ({
     sortDirection,
     onSort,
     onViewActivity,
+    visibleColumns,
 }: LeadTableProps) => {
     const [expandedDupId, setExpandedDupId] = useState<string | null>(null);
 
@@ -92,22 +94,26 @@ export const LeadTable = ({
         return rows;
     }, [leads, expandedDupId]);
 
-    const columns = [
+    const allColumns = [
-        { id: 'phone', label: 'Phone', allowsSorting: true },
+        { id: 'phone', label: 'Phone', allowsSorting: true, defaultWidth: 150 },
-        { id: 'name', label: 'Name', allowsSorting: true },
+        { id: 'name', label: 'Name', allowsSorting: true, defaultWidth: 160 },
-        { id: 'email', label: 'Email', allowsSorting: false },
+        { id: 'email', label: 'Email', allowsSorting: false, defaultWidth: 180 },
-        { id: 'campaign', label: 'Campaign', allowsSorting: false },
+        { id: 'campaign', label: 'Campaign', allowsSorting: false, defaultWidth: 140 },
-        { id: 'ad', label: 'Ad', allowsSorting: false },
+        { id: 'ad', label: 'Ad', allowsSorting: false, defaultWidth: 80 },
-        { id: 'source', label: 'Source', allowsSorting: true },
+        { id: 'source', label: 'Source', allowsSorting: true, defaultWidth: 100 },
-        { id: 'firstContactedAt', label: 'First Contact', allowsSorting: true },
+        { id: 'firstContactedAt', label: 'First Contact', allowsSorting: true, defaultWidth: 130 },
-        { id: 'lastContactedAt', label: 'Last Contact', allowsSorting: true },
+        { id: 'lastContactedAt', label: 'Last Contact', allowsSorting: true, defaultWidth: 130 },
-        { id: 'status', label: 'Status', allowsSorting: true },
+        { id: 'status', label: 'Status', allowsSorting: true, defaultWidth: 100 },
-        { id: 'createdAt', label: 'Age', allowsSorting: true },
+        { id: 'createdAt', label: 'Age', allowsSorting: true, defaultWidth: 80 },
-        { id: 'spamScore', label: 'Spam', allowsSorting: true },
+        { id: 'spamScore', label: 'Spam', allowsSorting: true, defaultWidth: 70 },
-        { id: 'dups', label: 'Dups', allowsSorting: false },
+        { id: 'dups', label: 'Dups', allowsSorting: false, defaultWidth: 60 },
-        { id: 'actions', label: '', allowsSorting: false },
+        { id: 'actions', label: '', allowsSorting: false, defaultWidth: 50 },
     ];
 
+    const columns = visibleColumns
+        ? allColumns.filter(c => visibleColumns.has(c.id) || c.id === 'actions')
+        : allColumns;
+
     return (
         <div className="overflow-hidden rounded-xl ring-1 ring-secondary">
             <Table
@@ -127,6 +133,9 @@ export const LeadTable = ({
                             id={column.id}
                             label={column.label}
                             allowsSorting={column.allowsSorting}
+                            allowsResizing={column.id !== 'actions'}
+                            defaultWidth={column.defaultWidth}
+                            minWidth={50}
                         />
                     )}
                 </Table.Header>
@@ -204,6 +213,8 @@ export const LeadTable = ({
                         const isDup = lead.isDuplicate === true;
                         const isExpanded = expandedDupId === lead.id;
 
+                        const isCol = (id: string) => !visibleColumns || visibleColumns.has(id);
+
                         return (
                             <Table.Row
                                 key={row.id}
@@ -213,16 +224,16 @@ export const LeadTable = ({
                                     isSelected && 'bg-brand-primary',
                                 )}
                             >
-                                <Table.Cell>
+                                {isCol('phone') && <Table.Cell>
                                     <span className="font-semibold text-primary">{phone}</span>
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('name') && <Table.Cell>
                                     <span className="text-secondary">{name}</span>
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('email') && <Table.Cell>
                                     <span className="text-tertiary">{email}</span>
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('campaign') && <Table.Cell>
                                     {lead.utmCampaign ? (
                                         <Badge size="sm" type="pill-color" color="purple">
                                             {lead.utmCampaign}
@@ -230,8 +241,8 @@ export const LeadTable = ({
                                     ) : (
                                         <span className="text-tertiary">{'\u2014'}</span>
                                     )}
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('ad') && <Table.Cell>
                                     {lead.adId ? (
                                         <Badge size="sm" type="pill-color" color="success">
                                             Ad
@@ -239,50 +250,50 @@ export const LeadTable = ({
                                     ) : (
                                         <span className="text-tertiary">{'\u2014'}</span>
                                     )}
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('source') && <Table.Cell>
                                     {lead.leadSource ? (
                                         <SourceTag source={lead.leadSource} />
                                     ) : (
                                         <span className="text-tertiary">{'\u2014'}</span>
                                     )}
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('firstContactedAt') && <Table.Cell>
                                     <span className="text-tertiary">
                                         {lead.firstContactedAt
                                             ? formatShortDate(lead.firstContactedAt)
                                             : '\u2014'}
                                     </span>
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('lastContactedAt') && <Table.Cell>
                                     <span className="text-tertiary">
                                         {lead.lastContactedAt
                                             ? formatShortDate(lead.lastContactedAt)
                                             : '\u2014'}
                                     </span>
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('status') && <Table.Cell>
                                     {lead.leadStatus ? (
                                         <LeadStatusBadge status={lead.leadStatus} />
                                     ) : (
                                         <span className="text-tertiary">{'\u2014'}</span>
                                     )}
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('createdAt') && <Table.Cell>
                                     {lead.createdAt ? (
                                         <AgeIndicator dateStr={lead.createdAt} />
                                     ) : (
                                         <span className="text-tertiary">{'\u2014'}</span>
                                     )}
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('spamScore') && <Table.Cell>
                                     {lead.spamScore != null ? (
                                         <SpamDisplay score={lead.spamScore} />
                                     ) : (
                                         <span className="text-tertiary">0%</span>
                                     )}
-                                </Table.Cell>
+                                </Table.Cell>}
-                                <Table.Cell>
+                                {isCol('dups') && <Table.Cell>
                                     {isDup ? (
                                         <button
                                             type="button"
@@ -297,7 +308,7 @@ export const LeadTable = ({
                                     ) : (
                                         <span className="text-tertiary">0</span>
                                     )}
-                                </Table.Cell>
+                                </Table.Cell>}
                                 <Table.Cell>
                                     <Button
                                         size="sm"

src/pages/all-leads.tsx

@@ -2,19 +2,18 @@ import type { FC } from 'react';
 import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft, faArrowDownToLine, faFilterList, faMagnifyingGlass, faArrowUpArrowDown } from '@fortawesome/pro-duotone-svg-icons';
+import { faArrowLeft, faArrowDownToLine, faMagnifyingGlass } from '@fortawesome/pro-duotone-svg-icons';
 
 const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
 const Download01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowDownToLine} className={className} />;
-const FilterLines: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faFilterList} className={className} />;
 const SearchLg: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faMagnifyingGlass} className={className} />;
-const SwitchVertical01: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowUpArrowDown} className={className} />;
 import { Button } from '@/components/base/buttons/button';
 import { Input } from '@/components/base/input/input';
 import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
 import { PaginationPageDefault } from '@/components/application/pagination/pagination';
 import { TopBar } from '@/components/layout/top-bar';
 import { LeadTable } from '@/components/leads/lead-table';
+import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle';
 import { BulkActionBar } from '@/components/leads/bulk-action-bar';
 import { FilterPills } from '@/components/leads/filter-pills';
 import { AssignModal } from '@/components/modals/assign-modal';
@@ -61,6 +60,22 @@ export const AllLeadsPage = () => {
     const { agents, templates, leadActivities, campaigns } = useData();
     const [campaignFilter, setCampaignFilter] = useState<string | null>(null);
 
+    const columnDefs = [
+        { id: 'phone', label: 'Phone', defaultVisible: true },
+        { id: 'name', label: 'Name', defaultVisible: true },
+        { id: 'email', label: 'Email', defaultVisible: true },
+        { id: 'campaign', label: 'Campaign', defaultVisible: false },
+        { id: 'ad', label: 'Ad', defaultVisible: false },
+        { id: 'source', label: 'Source', defaultVisible: true },
+        { id: 'firstContactedAt', label: 'First Contact', defaultVisible: false },
+        { id: 'lastContactedAt', label: 'Last Contact', defaultVisible: true },
+        { id: 'status', label: 'Status', defaultVisible: true },
+        { id: 'createdAt', label: 'Age', defaultVisible: true },
+        { id: 'spamScore', label: 'Spam', defaultVisible: false },
+        { id: 'dups', label: 'Dups', defaultVisible: false },
+    ];
+    const { visibleColumns, toggle: toggleColumn } = useColumnVisibility(columnDefs);
+
     // Client-side sorting
     const sortedLeads = useMemo(() => {
         const sorted = [...filteredLeads];
@@ -233,20 +248,6 @@ export const AllLeadsPage = () => {
                     </div>
 
                     <div className="flex items-center gap-2">
-                        <Button
-                            size="sm"
-                            color="secondary"
-                            iconLeading={FilterLines}
-                        >
-                            Filter
-                        </Button>
-                        <Button
-                            size="sm"
-                            color="secondary"
-                            iconLeading={SwitchVertical01}
-                        >
-                            Sort
-                        </Button>
                         <div className="w-56">
                             <Input
                                 placeholder="Search leads..."
@@ -260,6 +261,7 @@ export const AllLeadsPage = () => {
                                 aria-label="Search leads"
                             />
                         </div>
+                        <ColumnToggle columns={columnDefs} visibleColumns={visibleColumns} onToggle={toggleColumn} />
                         <Button
                             size="sm"
                             color="secondary"
@@ -350,6 +352,7 @@ export const AllLeadsPage = () => {
                         sortDirection={sortDirection}
                         onSort={handleSort}
                         onViewActivity={handleViewActivity}
+                        visibleColumns={visibleColumns}
                     />
                 </div>