feat: add server-side pagination, search, and filtering to all collection and admin pages

- Public pages (videos, magazine, models): URL-driven search, sort, category/duration
  filters, and Prev/Next pagination (page size 24)
- Admin tables (videos, articles): search input, toggle filters, and pagination (page size 50)
- Tags page: tag filtering now done server-side via DB arrayContains query instead of
  fetching all items and filtering client-side
- Backend resolvers updated for videos, articles, models with paginated { items, total }
  responses and filter/sort/tag args

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

packages/frontend/src/routes/videos/+page.server.ts

@@ -1,6 +1,14 @@
 import { getVideos } from "$lib/services";
-export async function load({ fetch }) {
-  return {
-    videos: await getVideos(fetch),
-  };
+
+const LIMIT = 24;
+
+export async function load({ fetch, url }) {
+  const search = url.searchParams.get("search") || undefined;
+  const sort = url.searchParams.get("sort") || "recent";
+  const duration = url.searchParams.get("duration") || "all";
+  const page = Math.max(1, parseInt(url.searchParams.get("page") || "1", 10));
+  const offset = (page - 1) * LIMIT;
+
+  const result = await getVideos({ search, sortBy: sort, duration, offset, limit: LIMIT }, fetch);
+  return { ...result, search, sort, duration, page, limit: LIMIT };
 }

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

@@ -1,5 +1,8 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/state";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   import { Input } from "$lib/components/ui/input";
@@ -10,40 +13,38 @@
   import { formatVideoDuration } from "$lib/utils";
 
   const timeAgo = new TimeAgo("en");
-
-  let searchQuery = $state("");
-  let sortBy = $state("recent");
-  let categoryFilter = $state("all");
-  let durationFilter = $state("all");
-
   const { data } = $props();
 
-  const filteredVideos = $derived(() => {
-    return data.videos
-      .filter((video) => {
-        const matchesSearch = video.title.toLowerCase().includes(searchQuery.toLowerCase());
-        //  ||
-        // video.model.toLowerCase().includes(searchQuery.toLowerCase());
-        const matchesCategory = categoryFilter === "all";
-        const matchesDuration =
-          durationFilter === "all" ||
-          (durationFilter === "short" && (video.movie_file?.duration ?? 0) < 10 * 60) ||
-          (durationFilter === "medium" &&
-            (video.movie_file?.duration ?? 0) >= 10 * 60 &&
-            (video.movie_file?.duration ?? 0) < 20 * 60) ||
-          (durationFilter === "long" && (video.movie_file?.duration ?? 0) >= 20 * 60);
-        return matchesSearch && matchesCategory && matchesDuration;
-      })
-      .sort((a, b) => {
-        if (sortBy === "recent")
-          return new Date(b.upload_date).getTime() - new Date(a.upload_date).getTime();
-        if (sortBy === "most_liked") return (b.likes_count || 0) - (a.likes_count || 0);
-        if (sortBy === "most_played") return (b.plays_count || 0) - (a.plays_count || 0);
-        if (sortBy === "duration")
-          return (b.movie_file?.duration ?? 0) - (a.movie_file?.duration ?? 0);
-        return a.title.localeCompare(b.title);
-      });
-  });
+  let searchValue = $state(data.search ?? "");
+  let searchTimeout: ReturnType<typeof setTimeout>;
+
+  function debounceSearch(value: string) {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+      if (value) params.set("search", value);
+      else params.delete("search");
+      params.delete("page");
+      goto(`?${params.toString()}`, { keepFocus: true });
+    }, 400);
+  }
+
+  function setParam(key: string, value: string) {
+    const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+    if (value && value !== "all" && value !== "recent") params.set(key, value);
+    else params.delete(key);
+    params.delete("page");
+    goto(`?${params.toString()}`);
+  }
+
+  function goToPage(p: number) {
+    const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+    if (p > 1) params.set("page", String(p));
+    else params.delete("page");
+    goto(`?${params.toString()}`);
+  }
+
+  const totalPages = $derived(Math.ceil(data.total / data.limit));
 </script>
 
 <Meta title={$_("videos.title")} description={$_("videos.description")} />
@@ -90,49 +91,32 @@
             ></span>
             <Input
               placeholder={$_("videos.search_placeholder")}
-              bind:value={searchQuery}
+              value={searchValue}
+              oninput={(e) => {
+                searchValue = (e.target as HTMLInputElement).value;
+                debounceSearch(searchValue);
+              }}
               class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
             />
           </div>
 
-          <!-- Category Filter -->
-          <Select type="single" bind:value={categoryFilter}>
-            <SelectTrigger
-              class="w-full lg: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"
-                ? $_("videos.categories.all")
-                : categoryFilter === "romantic"
-                  ? $_("videos.categories.romantic")
-                  : categoryFilter === "artistic"
-                    ? $_("videos.categories.artistic")
-                    : categoryFilter === "intimate"
-                      ? $_("videos.categories.intimate")
-                      : $_("videos.categories.performance")}
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{$_("videos.categories.all")}</SelectItem>
-              <SelectItem value="romantic">{$_("videos.categories.romantic")}</SelectItem>
-              <SelectItem value="artistic">{$_("videos.categories.artistic")}</SelectItem>
-              <SelectItem value="intimate">{$_("videos.categories.intimate")}</SelectItem>
-              <SelectItem value="performance">{$_("videos.categories.performance")}</SelectItem>
-            </SelectContent>
-          </Select>
-
           <!-- Duration Filter -->
-          <Select type="single" bind:value={durationFilter}>
+          <Select
+            type="single"
+            value={data.duration}
+            onValueChange={(v) => v && setParam("duration", v)}
+          >
             <SelectTrigger
               class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
               <span class="icon-[ri--timer-2-line] w-4 h-4 mr-2"></span>
-              {durationFilter === "all"
-                ? $_("videos.duration.all")
-                : durationFilter === "short"
-                  ? $_("videos.duration.short")
-                  : durationFilter === "medium"
-                    ? $_("videos.duration.medium")
-                    : $_("videos.duration.long")}
+              {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>
@@ -143,25 +127,22 @@
           </Select>
 
           <!-- Sort -->
-          <Select type="single" bind:value={sortBy}>
+          <Select type="single" value={data.sort} onValueChange={(v) => v && setParam("sort", v)}>
             <SelectTrigger
               class="w-full lg:w-48 bg-background/50 border-primary/20 focus:border-primary"
             >
-              {sortBy === "recent"
-                ? $_("videos.sort.recent")
-                : sortBy === "most_liked"
-                  ? $_("videos.sort.most_liked")
-                  : sortBy === "most_played"
-                    ? $_("videos.sort.most_played")
-                    : sortBy === "duration"
-                      ? $_("videos.sort.duration")
-                      : $_("videos.sort.name")}
+              {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="duration">{$_("videos.sort.duration")}</SelectItem>
               <SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
             </SelectContent>
           </Select>
@@ -172,7 +153,7 @@
   <!-- Videos Grid -->
   <div class="container mx-auto px-4 py-12">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      {#each filteredVideos() as video (video.slug)}
+      {#each data.items as video (video.slug)}
         <Card
           class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
         >
@@ -293,23 +274,46 @@
       {/each}
     </div>
 
-    {#if filteredVideos().length === 0}
+    {#if data.items.length === 0}
       <div class="text-center py-12">
         <p class="text-muted-foreground text-lg mb-4">
           {$_("videos.no_results")}
         </p>
-        <Button
-          variant="outline"
-          onclick={() => {
-            searchQuery = "";
-            categoryFilter = "all";
-            durationFilter = "all";
-          }}
-          class="border-primary/20 hover:bg-primary/10"
-        >
+        <Button variant="outline" href="/videos" class="border-primary/20 hover:bg-primary/10">
           {$_("videos.clear_filters")}
         </Button>
       </div>
     {/if}
+
+    <!-- Pagination -->
+    {#if totalPages > 1}
+      <div class="flex items-center justify-between mt-10">
+        <span class="text-sm text-muted-foreground">
+          {$_("common.page_of", { values: { page: data.page, total: totalPages } })}
+          &nbsp;·&nbsp;
+          {$_("common.total_results", { values: { total: data.total } })}
+        </span>
+        <div class="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={data.page <= 1}
+            onclick={() => goToPage(data.page - 1)}
+            class="border-primary/20 hover:bg-primary/10"
+          >
+            {$_("common.previous")}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={data.page >= totalPages}
+            onclick={() => goToPage(data.page + 1)}
+            class="border-primary/20 hover:bg-primary/10"
+          >
+            {$_("common.next")}
+          </Button>
+        </div>
+      </div>
+    {/if}
   </div>
 </div>