update

frontend/src/components/workspace/MainTableWorkspace.jsx

@@ -15,6 +15,8 @@ export default function MainTableWorkspace({
     search = null,
     right = null,
     filters = null,
+    /** 'top' = full-width strip above the table card; 'left' = narrow rail beside the table inside the card */
+    filtersPlacement = 'top',
     sectionIcon: SectionIcon,
     sectionTitle,
     sectionCount,
@@ -93,7 +95,7 @@ export default function MainTableWorkspace({
                 </div>
             </div>
 
-            {filters && (
+            {filtersPlacement === 'top' && filters && (
                 <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">{filters}</div>
             )}
 
@@ -115,12 +117,23 @@ export default function MainTableWorkspace({
                     </span>
                 </button>
 
-                {sectionOpen && (
-                    <>
-                        {tableToolbar}
-                        {children}
-                    </>
-                )}
+                {sectionOpen &&
+                    (filtersPlacement === 'left' && filters ? (
+                        <div className="flex flex-col gap-3 border-t border-slate-100 px-2 pb-3 pt-2 sm:px-4 md:flex-row md:items-start md:gap-3">
+                            <aside className="w-full shrink-0 rounded-lg border border-slate-200 bg-slate-50/80 p-2.5 md:w-52 md:max-w-[13rem] overflow-y-auto max-h-[min(70vh,720px)]">
+                                {filters}
+                            </aside>
+                            <div className="flex min-w-0 flex-1 flex-col gap-2">
+                                {tableToolbar}
+                                {children}
+                            </div>
+                        </div>
+                    ) : (
+                        <>
+                            {tableToolbar}
+                            {children}
+                        </>
+                    ))}
             </div>
         </div>
     );

frontend/src/pages/Contacts.jsx

@@ -48,7 +48,7 @@ export default function Contacts() {
     const [seqLoading, setSeqLoading] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const [filterRows, setFilterRows] = useState(() => [makeFilterRow()]);
-    const [demoBusy, setDemoBusy] = useState(false);
+    const [seedBusy, setSeedBusy] = useState(false);
     const [sortBy, setSortBy] = useState('created_at');
     const [sortDir, setSortDir] = useState('desc');
     const [page, setPage] = useState(1);
@@ -221,7 +221,7 @@ export default function Contacts() {
     };
 
     const seedDemoContacts = async () => {
-        setDemoBusy(true);
+        setSeedBusy(true);
         try {
             const res = await fetch('/api/contacts/seed-demo', { method: 'POST' });
             const data = await res.json().catch(() => ({}));
@@ -230,15 +230,11 @@ export default function Contacts() {
             }
             await fetchFields();
             await fetchContacts();
-            const n = data.inserted ?? 0;
-            if (n > 0) {
-                alert(`Loaded ${n} demo contact${n === 1 ? '' : 's'} with varied Apollo-style fields.`);
-            }
         } catch (e) {
             console.error(e);
             alert(e.message || 'Could not load demo data');
         } finally {
-            setDemoBusy(false);
+            setSeedBusy(false);
         }
     };
 
@@ -572,30 +568,36 @@ export default function Contacts() {
     };
 
     const filtersBlock = (
-        <div className="space-y-3">
-            <div className="flex flex-wrap items-center justify-between gap-2">
-                <div className="flex items-center text-xs text-slate-500 gap-1.5 font-medium">
-                    <SlidersHorizontal className="h-3.5 w-3.5" />
-                    Filter by any Apollo field (combined with AND)
+        <div className="space-y-2 text-xs">
+            <div className="space-y-2">
+                <div className="flex items-start gap-1.5 text-slate-600 font-medium leading-snug">
+                    <SlidersHorizontal className="h-3.5 w-3.5 mt-0.5 shrink-0" />
+                    <span>Filters (AND)</span>
                 </div>
-                <Button type="button" variant="outline" size="sm" className="gap-1" onClick={addFilterRow}>
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-8 w-full gap-1 text-xs"
+                    onClick={addFilterRow}
+                >
                     <Plus className="h-3.5 w-3.5" />
                     Add filter
                 </Button>
             </div>
-            <div className="space-y-3">
+            <div className="space-y-2">
                 {filterRows.map((row) => (
                     <div
                         key={row.id}
-                        className="grid grid-cols-1 gap-3 lg:grid-cols-12 lg:items-end lg:gap-2 rounded-xl border border-slate-100 bg-slate-50/50 p-3"
+                        className="space-y-2 rounded-lg border border-slate-200 bg-white/90 p-2 shadow-sm"
                     >
-                        <div className="lg:col-span-3">
+                        <div>
                             <label className="sr-only">Field</label>
                             <Select
                                 value={row.field}
                                 onValueChange={(v) => updateFilterRow(row.id, { field: v })}
                             >
-                                <SelectTrigger className="border-slate-200 bg-white">
+                                <SelectTrigger className="h-8 border-slate-200 bg-white text-xs">
                                     <SelectValue placeholder="Field" />
                                 </SelectTrigger>
                                 <SelectContent>
@@ -610,13 +612,13 @@ export default function Contacts() {
                         </div>
                         {row.field !== 'none' && (
                             <>
-                                <div className="lg:col-span-2">
+                                <div>
                                     <label className="sr-only">Operator</label>
                                     <Select
                                         value={row.op}
                                         onValueChange={(v) => updateFilterRow(row.id, { op: v })}
                                     >
-                                        <SelectTrigger className="border-slate-200 bg-white">
+                                        <SelectTrigger className="h-8 border-slate-200 bg-white text-xs">
                                             <SelectValue />
                                         </SelectTrigger>
                                         <SelectContent>
@@ -629,21 +631,19 @@ export default function Contacts() {
                                     </Select>
                                 </div>
                                 {(row.op === 'contains' || row.op === 'equals') && (
-                                    <div className="lg:col-span-6">
-                                        <Input
-                                            className="border-slate-200 bg-white"
-                                            placeholder={`Value for “${row.field}”`}
-                                            value={row.value}
-                                            onChange={(e) =>
-                                                updateFilterRow(row.id, { value: e.target.value })
-                                            }
-                                        />
-                                    </div>
+                                    <Input
+                                        className="h-8 border-slate-200 bg-white text-xs"
+                                        placeholder={`“${row.field}”`}
+                                        value={row.value}
+                                        onChange={(e) =>
+                                            updateFilterRow(row.id, { value: e.target.value })
+                                        }
+                                    />
                                 )}
                                 {(row.op === 'from' || row.op === 'to' || row.op === 'between') && (
-                                    <div className="flex gap-2 lg:col-span-6">
+                                    <div className="flex flex-col gap-2">
                                         <Input
-                                            className="border-slate-200 bg-white flex-1"
+                                            className="h-8 border-slate-200 bg-white text-xs"
                                             placeholder="From"
                                             value={row.fromVal}
                                             onChange={(e) =>
@@ -651,7 +651,7 @@ export default function Contacts() {
                                             }
                                         />
                                         <Input
-                                            className="border-slate-200 bg-white flex-1"
+                                            className="h-8 border-slate-200 bg-white text-xs"
                                             placeholder="To"
                                             value={row.toVal}
                                             onChange={(e) =>
@@ -660,16 +660,16 @@ export default function Contacts() {
                                         />
                                     </div>
                                 )}
-                                <div className="flex lg:col-span-1 lg:justify-end">
+                                <div className="flex justify-end pt-0.5">
                                     <Button
                                         type="button"
                                         variant="ghost"
                                         size="icon"
-                                        className="text-slate-400 hover:text-red-600"
+                                        className="h-8 w-8 text-slate-400 hover:text-red-600"
                                         aria-label="Remove filter row"
                                         onClick={() => removeFilterRow(row.id)}
                                     >
-                                        <Trash2 className="h-4 w-4" />
+                                        <Trash2 className="h-3.5 w-3.5" />
                                     </Button>
                                 </div>
                             </>
@@ -696,16 +696,16 @@ export default function Contacts() {
                     <div className="flex flex-wrap items-center gap-2 justify-end">
                         <Button
                             type="button"
-                            variant="outline"
+                            variant="secondary"
                             size="sm"
                             onClick={seedDemoContacts}
-                            disabled={demoBusy}
-                            className="gap-1.5"
+                            disabled={seedBusy}
+                            title="Insert sample Apollo-style contacts for preview"
                         >
-                            {demoBusy ? (
+                            {seedBusy ? (
                                 <Loader2 className="h-4 w-4 animate-spin shrink-0" aria-hidden />
                             ) : null}
-                            Load demo data
+                            Demo data
                         </Button>
                         <Button variant="outline" size="sm" onClick={() => fetchContacts()}>
                             Refresh
@@ -713,6 +713,7 @@ export default function Contacts() {
                     </div>
                 }
                 filters={filtersBlock}
+                filtersPlacement="left"
                 sectionIcon={Users}
                 sectionTitle="All contacts"
                 sectionCount={total}
@@ -732,15 +733,15 @@ export default function Contacts() {
                             <div className="flex flex-wrap items-center justify-center gap-2">
                                 <Button
                                     type="button"
-                                    variant="outline"
+                                    variant="secondary"
                                     size="sm"
                                     onClick={seedDemoContacts}
-                                    disabled={demoBusy}
+                                    disabled={seedBusy}
                                 >
-                                    {demoBusy ? (
+                                    {seedBusy ? (
                                         <Loader2 className="h-4 w-4 animate-spin mr-2" aria-hidden />
                                     ) : null}
-                                    Load demo data
+                                    Load demo rows (preview UI)
                                 </Button>
                                 <Button variant="outline" size="sm" onClick={beginAddContact}>
                                     New contact