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/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>