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/admin/articles/+page.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
-  import { invalidateAll } from "$app/navigation";
+  import { goto, invalidateAll } from "$app/navigation";
+  import { page } from "$app/state";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
   import { toast } from "svelte-sonner";
   import { _ } from "svelte-i18n";
   import { deleteArticle } from "$lib/services";
   import { getAssetUrl } from "$lib/api";
   import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { Article } from "$lib/types";
   import TimeAgo from "javascript-time-ago";
@@ -16,6 +20,27 @@
   let deleteTarget: Article | null = $state(null);
   let deleteOpen = $state(false);
   let deleting = $state(false);
+  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("offset");
+      goto(`?${params.toString()}`, { keepFocus: true });
+    }, 300);
+  }
+
+  function setFilter(key: string, value: string | null) {
+    const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+    if (value !== null) params.set(key, value);
+    else params.delete(key);
+    params.delete("offset");
+    goto(`?${params.toString()}`);
+  }
 
   function confirmDelete(article: Article) {
     deleteTarget = article;
@@ -42,8 +67,54 @@
 <div class="py-3 sm:py-6 sm:pl-6">
   <div class="flex items-center justify-between mb-6 px-3 sm:px-0">
     <h1 class="text-2xl font-bold">{$_("admin.articles.title")}</h1>
-    <Button href="/admin/articles/new" class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
-      <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.articles.new_article")}
+    <div class="flex items-center gap-3">
+      <span class="text-sm text-muted-foreground"
+        >{$_("admin.users.total", { values: { total: data.total } })}</span
+      >
+      <Button
+        href="/admin/articles/new"
+        class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
+      >
+        <span class="icon-[ri--add-line] h-4 w-4 mr-1"></span>{$_("admin.articles.new_article")}
+      </Button>
+    </div>
+  </div>
+
+  <!-- Filters -->
+  <div class="flex flex-wrap gap-3 mb-4 px-3 sm:px-0">
+    <Input
+      placeholder={$_("admin.articles.search_placeholder")}
+      class="max-w-xs"
+      value={searchValue}
+      oninput={(e) => {
+        searchValue = (e.target as HTMLInputElement).value;
+        debounceSearch(searchValue);
+      }}
+    />
+    <Select
+      type="single"
+      value={data.category ?? "all"}
+      onValueChange={(v) => setFilter("category", v === "all" ? null : (v ?? null))}
+    >
+      <SelectTrigger class="w-40 h-9 text-sm">
+        {data.category ?? $_("admin.articles.filter_all_categories")}
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">{$_("admin.articles.filter_all_categories")}</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>
+    <Button
+      size="sm"
+      variant={data.featured === true ? "default" : "outline"}
+      onclick={() => setFilter("featured", data.featured === true ? null : "true")}
+    >
+      {$_("admin.common.featured")}
     </Button>
   </div>
 
@@ -51,14 +122,22 @@
     <table class="w-full text-sm">
       <thead class="bg-muted/30">
         <tr>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground">{$_("admin.articles.col_article")}</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.articles.col_category")}</th>
-          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell">{$_("admin.articles.col_published")}</th>
-          <th class="px-4 py-3 text-right font-medium text-muted-foreground">{$_("admin.users.col_actions")}</th>
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground"
+            >{$_("admin.articles.col_article")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.articles.col_category")}</th
+          >
+          <th class="px-4 py-3 text-left font-medium text-muted-foreground hidden sm:table-cell"
+            >{$_("admin.articles.col_published")}</th
+          >
+          <th class="px-4 py-3 text-right font-medium text-muted-foreground"
+            >{$_("admin.users.col_actions")}</th
+          >
         </tr>
       </thead>
       <tbody class="divide-y divide-border/30">
-        {#each data.articles as article (article.id)}
+        {#each data.items as article (article.id)}
           <tr class="hover:bg-muted/10 transition-colors">
             <td class="px-4 py-3">
               <div class="flex items-center gap-3">
@@ -86,7 +165,9 @@
                 </div>
               </div>
             </td>
-            <td class="px-4 py-3 text-muted-foreground capitalize hidden sm:table-cell">{article.category ?? "—"}</td>
+            <td class="px-4 py-3 text-muted-foreground capitalize hidden sm:table-cell"
+              >{article.category ?? "—"}</td
+            >
             <td class="px-4 py-3 text-muted-foreground hidden sm:table-cell">
               {timeAgo.format(new Date(article.publish_date))}
             </td>
@@ -108,7 +189,7 @@
           </tr>
         {/each}
 
-        {#if data.articles.length === 0}
+        {#if data.items.length === 0}
           <tr>
             <td colspan="4" class="px-4 py-8 text-center text-muted-foreground">
               {$_("admin.articles.no_results")}
@@ -118,6 +199,47 @@
       </tbody>
     </table>
   </div>
+
+  <!-- Pagination -->
+  {#if data.total > data.limit}
+    <div class="flex items-center justify-between mt-4 px-3 sm:px-0">
+      <span class="text-sm text-muted-foreground">
+        {$_("admin.users.showing", {
+          values: {
+            start: data.offset + 1,
+            end: Math.min(data.offset + data.limit, data.total),
+            total: data.total,
+          },
+        })}
+      </span>
+      <div class="flex gap-2">
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={data.offset === 0}
+          onclick={() => {
+            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+            params.set("offset", String(Math.max(0, data.offset - data.limit)));
+            goto(`?${params.toString()}`);
+          }}
+        >
+          {$_("common.previous")}
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={data.offset + data.limit >= data.total}
+          onclick={() => {
+            const params = new SvelteURLSearchParams(page.url.searchParams.toString());
+            params.set("offset", String(data.offset + data.limit));
+            goto(`?${params.toString()}`);
+          }}
+        >
+          {$_("common.next")}
+        </Button>
+      </div>
+    </div>
+  {/if}
 </div>
 
 <Dialog.Root bind:open={deleteOpen}>