feat: replace filter dropdowns with FilterPills component

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

packages/frontend/src/lib/components/ui/filter-pills/filter-pills.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { cn } from "$lib/utils.js";
+
+  interface Option {
+    value: string;
+    label: string;
+  }
+
+  let {
+    options,
+    value,
+    onchange,
+    scrollable = false,
+    class: className = "",
+  }: {
+    options: Option[];
+    value: string;
+    onchange: (value: string) => void;
+    scrollable?: boolean;
+    class?: string;
+  } = $props();
+</script>
+
+<div class={cn("flex gap-2", scrollable && "overflow-x-auto pb-0.5 scrollbar-none", className)}>
+  {#each options as option (option.value)}
+    <button
+      type="button"
+      onclick={() => onchange(option.value)}
+      class={cn(
+        "whitespace-nowrap rounded-full px-4 py-1.5 text-sm font-medium transition-all duration-200 cursor-pointer shrink-0",
+        value === option.value
+          ? "bg-gradient-to-r from-primary to-accent text-white shadow-sm shadow-primary/30 border border-transparent"
+          : "border border-primary/20 text-muted-foreground bg-background/50 hover:border-primary/50 hover:text-foreground hover:bg-background/80",
+      )}
+    >
+      {option.label}
+    </button>
+  {/each}
+</div>

packages/frontend/src/lib/components/ui/filter-pills/index.ts

@@ -0,0 +1 @@
+export { default as FilterPills } from "./filter-pills.svelte";

packages/frontend/src/routes/magazine/+page.svelte

@@ -6,7 +6,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   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 TimeAgo from "javascript-time-ago";
   import { getAssetUrl } from "$lib/api";
   import { calcReadingTime } from "$lib/utils.js";
@@ -77,57 +77,32 @@
         />
       </div>
 
-      <!-- Filters -->
-      <div class="flex gap-3">
-        <!-- Category Filter -->
-        <Select
-          type="single"
+      <!-- Category -->
+      <FilterPills
+        scrollable
         value={data.category ?? "all"}
-          onValueChange={(v) => v && setParam("category", v)}
-        >
-          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
-            <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
-            {!data.category
-              ? $_("magazine.categories.all")
-              : data.category === "photography"
-                ? $_("magazine.categories.photography")
-                : data.category === "production"
-                  ? $_("magazine.categories.production")
-                  : data.category === "interview"
-                    ? $_("magazine.categories.interview")
-                    : data.category === "psychology"
-                      ? $_("magazine.categories.psychology")
-                      : data.category === "trends"
-                        ? $_("magazine.categories.trends")
-                        : $_("magazine.categories.spotlight")}
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{$_("magazine.categories.all")}</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>
+        options={[
+          { value: "all", label: $_("magazine.categories.all") },
+          { 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) => setParam("category", v)}
+      />
 
       <!-- Sort -->
-        <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
-          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
-            {data.sort === "featured"
-              ? $_("magazine.sort.featured")
-              : data.sort === "name"
-                ? $_("magazine.sort.name")
-                : $_("magazine.sort.recent")}
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="recent">{$_("magazine.sort.recent")}</SelectItem>
-            <SelectItem value="featured">{$_("magazine.sort.featured")}</SelectItem>
-            <SelectItem value="name">{$_("magazine.sort.name")}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      <FilterPills
+        value={data.sort ?? "recent"}
+        options={[
+          { value: "recent", label: $_("magazine.sort.recent") },
+          { value: "featured", label: $_("magazine.sort.featured") },
+          { value: "name", label: $_("magazine.sort.name") },
+        ]}
+        onchange={(v) => setParam("sort", v)}
+      />
     </div>
   </PageHero>
 

packages/frontend/src/routes/models/+page.svelte

@@ -6,7 +6,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   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 { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
   import SexyBackground from "$lib/components/background/background.svelte";
@@ -70,18 +70,15 @@
         />
       </div>
 
-      <!-- Filters -->
-      <div class="flex gap-3">
-        <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
-          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
-            {data.sort === "recent" ? $_("models.sort.recent") : $_("models.sort.name")}
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="name">{$_("models.sort.name")}</SelectItem>
-            <SelectItem value="recent">{$_("models.sort.recent")}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      <!-- Sort -->
+      <FilterPills
+        value={data.sort ?? "name"}
+        options={[
+          { value: "name", label: $_("models.sort.name") },
+          { value: "recent", label: $_("models.sort.recent") },
+        ]}
+        onchange={(v) => setParam("sort", v)}
+      />
     </div>
   </PageHero>
   <!-- Models Grid -->

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

@@ -6,7 +6,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   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 { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
   import SexyBackground from "$lib/components/background/background.svelte";
@@ -73,51 +73,29 @@
         />
       </div>
 
-      <!-- Filters -->
-      <div class="flex gap-3">
-        <!-- Duration Filter -->
-        <Select
-          type="single"
-          value={data.duration}
-          onValueChange={(v) => v && setParam("duration", v)}
-        >
-          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
-            <span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
-            {data.duration === "short"
-              ? $_("videos.duration.short")
-              : data.duration === "medium"
-                ? $_("videos.duration.medium")
-                : data.duration === "long"
-                  ? $_("videos.duration.long")
-                  : $_("videos.duration.all")}
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{$_("videos.duration.all")}</SelectItem>
-            <SelectItem value="short">{$_("videos.duration.short")}</SelectItem>
-            <SelectItem value="medium">{$_("videos.duration.medium")}</SelectItem>
-            <SelectItem value="long">{$_("videos.duration.long")}</SelectItem>
-          </SelectContent>
-        </Select>
+      <!-- Duration -->
+      <FilterPills
+        value={data.duration ?? "all"}
+        options={[
+          { value: "all", label: $_("videos.duration.all") },
+          { value: "short", label: $_("videos.duration.short") },
+          { value: "medium", label: $_("videos.duration.medium") },
+          { value: "long", label: $_("videos.duration.long") },
+        ]}
+        onchange={(v) => setParam("duration", v)}
+      />
 
       <!-- Sort -->
-        <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
-          <SelectTrigger class="flex-1 bg-background/50 border-primary/20 focus:border-primary">
-            {data.sort === "most_liked"
-              ? $_("videos.sort.most_liked")
-              : data.sort === "most_played"
-                ? $_("videos.sort.most_played")
-                : data.sort === "name"
-                  ? $_("videos.sort.name")
-                  : $_("videos.sort.recent")}
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="recent">{$_("videos.sort.recent")}</SelectItem>
-            <SelectItem value="most_liked">{$_("videos.sort.most_liked")}</SelectItem>
-            <SelectItem value="most_played">{$_("videos.sort.most_played")}</SelectItem>
-            <SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      <FilterPills
+        value={data.sort ?? "recent"}
+        options={[
+          { value: "recent", label: $_("videos.sort.recent") },
+          { value: "most_liked", label: $_("videos.sort.most_liked") },
+          { value: "most_played", label: $_("videos.sort.most_played") },
+          { value: "name", label: $_("videos.sort.name") },
+        ]}
+        onchange={(v) => setParam("sort", v)}
+      />
     </div>
   </PageHero>
   <!-- Videos Grid -->