valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace filter dropdowns with FilterPills component

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-12 10:55:29 +01:00
parent 5ffd2773b0
commit af2e03244f
5 changed files with 99 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/frontend/src/routes/videos/+page.svelte
View File

@@ -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>
<!-- Sort -->
<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 -->