From 3e0b4db7364ec197b11036975ae6b23a85efb745 Mon Sep 17 00:00:00 2001
From: Josh Wright <josh@thewrightserver.net>
Date: Fri, 9 Oct 2026 23:42:06 -0400
Subject: [PATCH] Collapse provisioning filters on phones (Refs #127)

---
 src/routes/provisioning/+page.svelte | 53 +++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/routes/provisioning/+page.svelte b/src/routes/provisioning/+page.svelte
index 7619a7c..2d93c35 100644
--- a/src/routes/provisioning/+page.svelte
+++ b/src/routes/provisioning/+page.svelte
@@ -10,6 +10,7 @@
     import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
     import Badge from '$ui/components/primitives/Badge.svelte';
     import Button from '$ui/components/primitives/Button.svelte';
+    import Dialog from '$ui/components/primitives/Dialog.svelte';
     import EmptyState from '$ui/components/primitives/EmptyState.svelte';
     import FleetActionsDialog from '$ui/components/FleetActionsDialog.svelte';
     import Freshness from '$ui/components/Freshness.svelte';
@@ -37,6 +38,7 @@
     import { provisioningQueueStatus, provisioningWarnings } from '$ui/provisioning-queue.js';
 
     let lifecycleOpen = $state(false);
+    let filtersOpen = $state(false);
     let active = $state<Deployment[]>([]);
     let history = $state<Deployment[]>([]);
     let needsReview = $state(0);
@@ -222,9 +224,12 @@
     function fmt(value: string) {
         return $timeFormat.dateTime(value);
     }
-    const filtered = $derived(
-        action !== 'all' || source !== 'all' || historyState !== 'all' || Boolean(search)
+    const filterCount = $derived(
+        [action !== 'all', source !== 'all', historyState !== 'all', Boolean(search)].filter(
+            Boolean
+        ).length
     );
+    const filtered = $derived(filterCount > 0);
     const visibleActive = $derived(
         active.filter((row) => {
             if (action !== 'all' && row.action !== action) return false;
@@ -306,6 +311,17 @@
                 maxlength="100"
             /></label
         >
+        <div class="desktop-filters">
+            {@render filterFields()}
+            {#if filtered}<Button variant="ghost" onclick={clearFilters}>Clear filters</Button>{/if}
+        </div>
+        <div class="mobile-filter-trigger">
+            <Button onclick={() => (filtersOpen = true)}
+                >Filters{filterCount ? ` · ${filterCount}` : ''}</Button
+            >
+        </div>
+    </div>
+    {#snippet filterFields()}
         <label
             >Operation<select bind:value={action} onchange={() => saveContext(true)}
                 ><option value="all">All operations</option
@@ -336,8 +352,19 @@
                     >{/each}</select
             ></label
         >
-        {#if filtered}<Button variant="ghost" onclick={clearFilters}>Clear filters</Button>{/if}
-    </div>
+    {/snippet}
+    <Dialog
+        bind:open={filtersOpen}
+        title="Provisioning filters"
+        description="Choose an operation, status, and source."
+        drawer
+    >
+        <div class="mobile-filters">{@render filterFields()}</div>
+        {#snippet actions()}
+            <Button variant="ghost" onclick={clearFilters}>Clear filters</Button>
+            <Button variant="primary" onclick={() => (filtersOpen = false)}>Show results</Button>
+        {/snippet}
+    </Dialog>
     <LifecycleDialog bind:open={lifecycleOpen} />
     <FleetActionsDialog
         bind:open={fleetActionsOpen}
@@ -599,6 +626,16 @@
     .view-tabs {
         max-width: 100%;
     }
+    .desktop-filters {
+        display: contents;
+    }
+    .mobile-filter-trigger {
+        display: none;
+    }
+    .mobile-filters {
+        display: grid;
+        gap: 16px;
+    }
     label {
         display: grid;
         gap: 6px;
@@ -760,4 +797,12 @@
             padding: 12px 8px;
         }
     }
+    @media (max-width: 640px) {
+        .desktop-filters {
+            display: none;
+        }
+        .mobile-filter-trigger {
+            display: block;
+        }
+    }
 </style>