refactor: replace Button filter groups with FilterPills in all admin list pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/routes/admin/articles/+page.svelte

@@ -8,7 +8,7 @@
   import { getAssetUrl } from "$lib/api";
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
-  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
+  import { FilterPills } from "$lib/components/ui/filter-pills";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Article } from "$lib/types";
   import TimeAgo from "javascript-time-ago";
@@ -95,30 +95,30 @@
         debounceSearch(searchValue);
       }}
     />
-    <Select
-      type="single"
+    <div class="flex flex-wrap gap-3">
+      <FilterPills
+        scrollable
         value={data.category ?? "all"}
-      onValueChange={(v) => setFilter("category", v === "all" ? null : (v ?? null))}
-    >
-      <SelectTrigger class="w-40 h-9 text-sm">
-        {data.category ?? $_("admin.articles.filter_all_categories")}
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="all">{$_("admin.articles.filter_all_categories")}</SelectItem>
-        <SelectItem value="photography">{$_("magazine.categories.photography")}</SelectItem>
-        <SelectItem value="production">{$_("magazine.categories.production")}</SelectItem>
-        <SelectItem value="interview">{$_("magazine.categories.interview")}</SelectItem>
-        <SelectItem value="psychology">{$_("magazine.categories.psychology")}</SelectItem>
-        <SelectItem value="trends">{$_("magazine.categories.trends")}</SelectItem>
-        <SelectItem value="spotlight">{$_("magazine.categories.spotlight")}</SelectItem>
-      </SelectContent>
-    </Select>
-    <Button
-      variant={data.featured === true ? "default" : "outline"}
-      onclick={() => setFilter("featured", data.featured === true ? null : "true")}
-    >
-      {$_("admin.common.featured")}
-    </Button>
+        options={[
+          { value: "all", label: $_("admin.articles.filter_all_categories") },
+          { value: "photography", label: $_("magazine.categories.photography") },
+          { value: "production", label: $_("magazine.categories.production") },
+          { value: "interview", label: $_("magazine.categories.interview") },
+          { value: "psychology", label: $_("magazine.categories.psychology") },
+          { value: "trends", label: $_("magazine.categories.trends") },
+          { value: "spotlight", label: $_("magazine.categories.spotlight") },
+        ]}
+        onchange={(v) => setFilter("category", v === "all" ? null : v)}
+      />
+      <FilterPills
+        value={data.featured === true ? "featured" : "all"}
+        options={[
+          { value: "all", label: $_("admin.common.all") },
+          { value: "featured", label: $_("admin.common.featured") },
+        ]}
+        onchange={(v) => setFilter("featured", v === "all" ? null : "true")}
+      />
+    </div>
   </div>
 
   <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">

packages/frontend/src/routes/admin/queues/+page.svelte

@@ -7,6 +7,7 @@
   import { adminRetryJob, adminRemoveJob, adminPauseQueue, adminResumeQueue } from "$lib/services";
   import { Button } from "$lib/components/ui/button";
   import { Badge } from "$lib/components/ui/badge";
+  import { FilterPills } from "$lib/components/ui/filter-pills";
   import type { Job } from "$lib/services";
   import Meta from "$lib/components/meta/meta.svelte";
   import Pagination from "$lib/components/pagination/pagination.svelte";
@@ -176,15 +177,13 @@
 
   {#if data.queue}
     <!-- Status filter tabs -->
-    <div class="flex gap-1 mb-4 flex-wrap">
-      {#each STATUS_FILTERS as f (f.value ?? "all")}
-        <Button
-          variant={data.status === f.value ? "default" : "outline"}
-          onclick={() => selectStatus(f.value)}
-        >
-          {f.label}
-        </Button>
-      {/each}
+    <div class="mb-4">
+      <FilterPills
+        scrollable
+        value={data.status ?? "all"}
+        options={STATUS_FILTERS.map((f) => ({ value: f.value ?? "all", label: f.label }))}
+        onchange={(v) => selectStatus(v === "all" ? null : v)}
+      />
     </div>
 
     <!-- Jobs table -->

packages/frontend/src/routes/admin/recordings/+page.svelte

@@ -8,6 +8,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Badge } from "$lib/components/ui/badge";
+  import { FilterPills } from "$lib/components/ui/filter-pills";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Recording } from "$lib/types";
   import TimeAgo from "javascript-time-ago";
@@ -85,20 +86,15 @@
         debounceSearch(searchValue);
       }}
     />
-    <div class="flex gap-1">
-      <Button
-        variant={data.status === undefined ? "default" : "outline"}
-        onclick={() => setFilter("status", null)}>{$_("admin.common.all")}</Button
-      >
-      <Button
-        variant={data.status === "published" ? "default" : "outline"}
-        onclick={() => setFilter("status", "published")}>{$_("admin.recordings.published")}</Button
-      >
-      <Button
-        variant={data.status === "draft" ? "default" : "outline"}
-        onclick={() => setFilter("status", "draft")}>{$_("admin.recordings.draft")}</Button
-      >
-    </div>
+    <FilterPills
+      value={data.status ?? "all"}
+      options={[
+        { value: "all", label: $_("admin.common.all") },
+        { value: "published", label: $_("admin.recordings.published") },
+        { value: "draft", label: $_("admin.recordings.draft") },
+      ]}
+      onchange={(v) => setFilter("status", v === "all" ? null : v)}
+    />
   </div>
 
   <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">

packages/frontend/src/routes/admin/users/+page.svelte

@@ -10,6 +10,7 @@
   import { Input } from "$lib/components/ui/input";
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import { Badge } from "$lib/components/ui/badge";
+  import { FilterPills } from "$lib/components/ui/filter-pills";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { User } from "$lib/types";
   import Meta from "$lib/components/meta/meta.svelte";
@@ -108,16 +109,15 @@
       }}
     />
 
-    <div class="flex gap-1">
-      {#each roles as role (role)}
-        <Button
-          variant={data.role === role || (!data.role && role === "") ? "default" : "outline"}
-          onclick={() => setRole(role)}
-        >
-          {role ? $_(`admin.users.role_${role}`) : $_("admin.users.filter_all")}
-        </Button>
-      {/each}
-    </div>
+    <FilterPills
+      value={data.role ?? ""}
+      options={[
+        { value: "", label: $_("admin.users.filter_all") },
+        { value: "viewer", label: $_("admin.users.role_viewer") },
+        { value: "model", label: $_("admin.users.role_model") },
+      ]}
+      onchange={(v) => setRole(v)}
+    />
   </div>
 
   <!-- Table -->

packages/frontend/src/routes/admin/videos/+page.svelte

@@ -9,6 +9,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Badge } from "$lib/components/ui/badge";
   import { Input } from "$lib/components/ui/input";
+  import { FilterPills } from "$lib/components/ui/filter-pills";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Video } from "$lib/types";
   import Meta from "$lib/components/meta/meta.svelte";
@@ -92,25 +93,23 @@
         debounceSearch(searchValue);
       }}
     />
-    <div class="flex gap-1">
-      <Button
-        variant={data.featured === undefined ? "default" : "outline"}
-        onclick={() => setFilter("featured", null)}
-      >
-        {$_("admin.common.all")}
-      </Button>
-      <Button
-        variant={data.featured === true ? "default" : "outline"}
-        onclick={() => setFilter("featured", "true")}
-      >
-        {$_("admin.common.featured")}
-      </Button>
-      <Button
-        variant={data.premium === true ? "default" : "outline"}
-        onclick={() => setFilter("premium", data.premium === true ? null : "true")}
-      >
-        {$_("admin.common.premium")}
-      </Button>
+    <div class="flex flex-wrap gap-3">
+      <FilterPills
+        value={data.featured === true ? "featured" : "all"}
+        options={[
+          { value: "all", label: $_("admin.common.all") },
+          { value: "featured", label: $_("admin.common.featured") },
+        ]}
+        onchange={(v) => setFilter("featured", v === "all" ? null : "true")}
+      />
+      <FilterPills
+        value={data.premium === true ? "premium" : "all"}
+        options={[
+          { value: "all", label: $_("admin.common.all") },
+          { value: "premium", label: $_("admin.common.premium") },
+        ]}
+        onchange={(v) => setFilter("premium", v === "all" ? null : "true")}
+      />
     </div>
   </div>