From 6d1726ee97efd481b1616a326c97a0def231edae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 12 Mar 2026 17:36:37 +0100
Subject: [PATCH] refactor: apply consistent search/filter style to tags page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/tags/[tag]/+page.svelte        | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/packages/frontend/src/routes/tags/[tag]/+page.svelte b/packages/frontend/src/routes/tags/[tag]/+page.svelte
index 8997409..a7f341d 100644
--- a/packages/frontend/src/routes/tags/[tag]/+page.svelte
+++ b/packages/frontend/src/routes/tags/[tag]/+page.svelte
@@ -3,7 +3,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";
@@ -60,41 +60,31 @@
     title={$_("tags.title", { values: { tag: data.tag } })}
     description={$_("tags.description", { values: { tag: data.tag } })}
   >
-    <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
-      <div class="relative flex-1">
+    <div class="flex flex-col gap-5 max-w-2xl mx-auto">
+      <div class="relative">
         <span
-          class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
+          class="icon-[ri--search-line] absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground"
         ></span>
         <Input
           placeholder={$_("tags.search_placeholder")}
           bind:value={searchQuery}
-          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
+          class="pl-12 h-14 text-lg bg-card/50 border-primary/20 focus:border-primary"
         />
       </div>
-      <Select type="single" bind:value={categoryFilter}>
-        <SelectTrigger
-          class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
-        >
-          <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
-          {categoryFilter === "all"
-            ? $_("tags.categories.all")
-            : categoryFilter === "video"
-              ? $_("tags.categories.video")
-              : categoryFilter === "article"
-                ? $_("tags.categories.article")
-                : $_("tags.categories.model")}
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="all">{$_("tags.categories.all")}</SelectItem>
-          <SelectItem value="video">{$_("tags.categories.video")}</SelectItem>
-          <SelectItem value="article">{$_("tags.categories.article")}</SelectItem>
-          <SelectItem value="model">{$_("tags.categories.model")}</SelectItem>
-        </SelectContent>
-      </Select>
+      <FilterPills
+        value={categoryFilter}
+        options={[
+          { value: "all", label: $_("tags.categories.all") },
+          { value: "video", label: $_("tags.categories.video") },
+          { value: "article", label: $_("tags.categories.article") },
+          { value: "model", label: $_("tags.categories.model") },
+        ]}
+        onchange={(v) => (categoryFilter = v)}
+      />
     </div>
   </PageHero>
   <!-- Items Grid -->
-  <div class="container mx-auto px-4 py-12">
+  <div class="container mx-auto px-4 pt-6 pb-12">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {#each filteredItems() as item (item.slug)}
         <a href={getUrlForItem(item)} class="block group">