sexy/packages/frontend/src/routes/admin/articles/+page.svelte

<script lang="ts">
  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";

  const { data } = $props();

  const timeAgo = new TimeAgo("en");

  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;
    deleteOpen = true;
  }

  async function handleDelete() {
    if (!deleteTarget) return;
    deleting = true;
    try {
      await deleteArticle(deleteTarget.id);
      toast.success($_("admin.articles.delete_success"));
      deleteOpen = false;
      deleteTarget = null;
      await invalidateAll();
    } catch {
      toast.error($_("admin.articles.delete_error"));
    } finally {
      deleting = false;
    }
  }
</script>

<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>
    <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>

  <div class="sm:rounded-lg border-y sm:border border-border/40 overflow-x-auto">
    <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
          >
        </tr>
      </thead>
      <tbody class="divide-y divide-border/30">
        {#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">
                {#if article.image}
                  <img
                    src={getAssetUrl(article.image, "mini")}
                    alt=""
                    class="h-10 w-16 rounded object-cover"
                  />
                {:else}
                  <div
                    class="h-10 w-16 rounded bg-muted/50 flex items-center justify-center text-muted-foreground"
                  >
                    <span class="icon-[ri--article-line] h-5 w-5"></span>
                  </div>
                {/if}
                <div>
                  <p class="font-medium">{article.title}</p>
                  {#if article.featured}
                    <span
                      class="text-xs px-1.5 py-0.5 rounded bg-primary/10 text-primary font-medium"
                      >{$_("admin.common.featured")}</span
                    >
                  {/if}
                </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 hidden sm:table-cell">
              {timeAgo.format(new Date(article.publish_date))}
            </td>
            <td class="px-4 py-3 text-right">
              <div class="flex items-center justify-end gap-1">
                <Button size="sm" variant="ghost" href="/admin/articles/{article.id}">
                  <span class="icon-[ri--edit-line] h-4 w-4"></span>
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  class="text-destructive hover:text-destructive hover:bg-destructive/10"
                  onclick={() => confirmDelete(article)}
                >
                  <span class="icon-[ri--delete-bin-line] h-4 w-4"></span>
                </Button>
              </div>
            </td>
          </tr>
        {/each}

        {#if data.items.length === 0}
          <tr>
            <td colspan="4" class="px-4 py-8 text-center text-muted-foreground">
              {$_("admin.articles.no_results")}
            </td>
          </tr>
        {/if}
      </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}>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>{$_("admin.articles.delete_title")}</Dialog.Title>
      <Dialog.Description>
        {$_("admin.articles.delete_description", { values: { title: deleteTarget?.title } })}
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Button variant="outline" onclick={() => (deleteOpen = false)}>{$_("common.cancel")}</Button>
      <Button variant="destructive" disabled={deleting} onclick={handleDelete}>
        {deleting ? $_("admin.common.deleting") : $_("common.delete")}
      </Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>