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

<script lang="ts">
  import { untrack } from "svelte";
  import { goto } from "$app/navigation";
  import { toast } from "svelte-sonner";
  import { _ } from "svelte-i18n";
  import { updateArticle, uploadFile } from "$lib/services";
  import { marked } from "marked";
  import { Button } from "$lib/components/ui/button";
  import { Input } from "$lib/components/ui/input";
  import { Label } from "$lib/components/ui/label";
  import { Textarea } from "$lib/components/ui/textarea";
  import { TagsInput } from "$lib/components/ui/tags-input";
  import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
  import { Card, CardContent } from "$lib/components/ui/card";
  import { getAssetUrl } from "$lib/api";
  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
  import { DatePicker } from "$lib/components/ui/date-picker";
  import Meta from "$lib/components/meta/meta.svelte";

  const { data } = $props();

  let title = $state(untrack(() => data.article.title));
  let slug = $state(untrack(() => data.article.slug));
  let excerpt = $state(untrack(() => data.article.excerpt ?? ""));
  let content = $state(untrack(() => data.article.content ?? ""));
  let category = $state(untrack(() => data.article.category ?? ""));
  let tags = $state<string[]>(untrack(() => data.article.tags ?? []));
  let featured = $state(untrack(() => data.article.featured ?? false));
  let publishDate = $state(
    untrack(() =>
      data.article.publish_date
        ? new Date(data.article.publish_date).toISOString().slice(0, 16)
        : "",
    ),
  );
  let imageId = $state<string | null>(untrack(() => data.article.image ?? null));
  let authorId = $state(untrack(() => data.article.author?.id ?? ""));
  $effect(() => {
    title = data.article.title;
    slug = data.article.slug;
    excerpt = data.article.excerpt ?? "";
    content = data.article.content ?? "";
    category = data.article.category ?? "";
    tags = data.article.tags ?? [];
    featured = data.article.featured ?? false;
    publishDate = data.article.publish_date
      ? new Date(data.article.publish_date).toISOString().slice(0, 16)
      : "";
    imageId = data.article.image ?? null;
    authorId = data.article.author?.id ?? "";
  });
  let selectedAuthor = $derived(data.authors.find((a) => a.id === authorId) ?? null);
  let saving = $state(false);
  let editorTab = $state<"write" | "preview">("write");

  let preview = $derived(content ? (marked.parse(content) as string) : "");

  async function handleImageUpload(files: File[]) {
    const file = files[0];
    if (!file) return;
    const fd = new FormData();
    fd.append("file", file);
    try {
      const res = await uploadFile(fd);
      imageId = res.id;
      toast.success($_("admin.common.image_uploaded"));
    } catch {
      toast.error($_("admin.common.image_upload_failed"));
    }
  }

  async function handleSubmit() {
    saving = true;
    try {
      await updateArticle({
        id: data.article.id,
        title,
        slug,
        excerpt: excerpt || undefined,
        content: content || undefined,
        imageId: imageId || undefined,
        authorId: authorId || null,
        tags,
        category: category || undefined,
        featured,
        publishDate: publishDate || undefined,
      });
      toast.success($_("admin.article_form.update_success"));
      goto("/admin/articles");
    } catch (e) {
      toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.update_error"));
    } finally {
      saving = false;
    }
  }
</script>

<Meta title={$_("admin.article_form.edit_title")} description={null} />

<div class="py-3 sm:py-6 lg:pl-6">
  <div class="mb-6">
    <h1 class="text-2xl font-bold">{data.article.title}</h1>
    <p class="text-xs text-muted-foreground mt-0.5">
      {data.article.slug}{data.article.category ? " · " + data.article.category : ""}{data.article
        .author
        ? " · " + data.article.author.artist_name
        : ""}
    </p>
  </div>

  <Card class="bg-card/50 border-primary/20 max-w-4xl">
    <CardContent class="space-y-5 pt-6">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="space-y-1.5">
          <Label for="title">{$_("admin.common.title_field")}</Label>
          <Input
            id="title"
            bind:value={title}
            class="bg-background/50 border-primary/20 focus:border-primary"
          />
        </div>
        <div class="space-y-1.5">
          <Label for="slug">{$_("admin.common.slug_field")}</Label>
          <Input
            id="slug"
            bind:value={slug}
            class="bg-background/50 border-primary/20 focus:border-primary"
          />
        </div>
      </div>

      <div class="space-y-1.5">
        <Label for="excerpt">{$_("admin.article_form.excerpt")}</Label>
        <Textarea
          id="excerpt"
          bind:value={excerpt}
          rows={2}
          class="bg-background/50 border-primary/20 focus:border-primary"
        />
      </div>

      <!-- Markdown editor with live preview -->
      <div class="space-y-1.5">
        <div class="flex items-center justify-between">
          <Label>{$_("admin.article_form.content")}</Label>
          <div class="flex rounded-lg border border-border/40 overflow-hidden text-xs sm:hidden">
            <Button
              variant="ghost"
              size="sm"
              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "write" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
              onclick={() => (editorTab = "write")}>{$_("admin.common.write")}</Button
            >
            <Button
              variant="ghost"
              size="sm"
              class={`px-3 py-1 h-auto rounded-none transition-colors ${editorTab === "preview" ? "bg-primary/10 text-primary" : "text-muted-foreground"}`}
              onclick={() => (editorTab = "preview")}>{$_("admin.common.preview")}</Button
            >
          </div>
        </div>
        <div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
          <Textarea
            bind:value={content}
            class={`h-full min-h-96 font-mono text-sm resize-none bg-background/50 border-primary/20 focus:border-primary ${editorTab === "preview" ? "hidden sm:flex" : ""}`}
          />
          <div
            class={`rounded-lg border border-border/40 bg-muted/20 p-4 overflow-auto prose prose-sm max-w-none prose-headings:text-foreground prose-p:text-muted-foreground min-h-96 ${editorTab === "write" ? "hidden sm:block" : ""}`}
          >
            {#if preview}
              {@html preview}
            {:else}
              <p class="text-muted-foreground italic text-sm">
                {$_("admin.article_form.preview_placeholder")}
              </p>
            {/if}
          </div>
        </div>
      </div>

      <div class="space-y-1.5">
        <Label>{$_("admin.common.cover_image")}</Label>
        {#if imageId}
          <img
            src={getAssetUrl(imageId, "thumbnail")}
            alt=""
            class="h-24 rounded object-cover mb-2"
          />
        {/if}
        <FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
      </div>

      <div class="space-y-1.5">
        <Label>{$_("admin.article_form.author")}</Label>
        <Select type="single" bind:value={authorId}>
          <SelectTrigger class="w-full bg-background/50 border-primary/20">
            {#if selectedAuthor}
              {#if selectedAuthor.avatar}
                <img
                  src={getAssetUrl(selectedAuthor.avatar, "mini")}
                  alt=""
                  class="h-5 w-5 rounded-full object-cover shrink-0"
                />
              {/if}
              {selectedAuthor.artist_name}
            {:else}
              <span class="text-muted-foreground">{$_("admin.article_form.no_author")}</span>
            {/if}
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="">{$_("admin.article_form.no_author")}</SelectItem>
            {#each data.authors as author (author.id)}
              <SelectItem value={author.id}>
                {#if author.avatar}
                  <img
                    src={getAssetUrl(author.avatar, "mini")}
                    alt=""
                    class="h-5 w-5 rounded-full object-cover shrink-0"
                  />
                {/if}
                {author.artist_name}
              </SelectItem>
            {/each}
          </SelectContent>
        </Select>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="space-y-1.5">
          <Label for="category">{$_("admin.article_form.category")}</Label>
          <Input
            id="category"
            bind:value={category}
            class="bg-background/50 border-primary/20 focus:border-primary"
          />
        </div>
        <div class="space-y-1.5">
          <Label>{$_("admin.common.publish_date")}</Label>
          <DatePicker bind:value={publishDate} placeholder={$_("admin.common.publish_date")} />
        </div>
      </div>

      <div class="space-y-1.5">
        <Label>{$_("admin.common.tags")}</Label>
        <TagsInput
          bind:value={tags}
          class="bg-background/50 border-primary/20 focus:border-primary"
        />
      </div>

      <label class="flex items-center gap-2 cursor-pointer">
        <input type="checkbox" bind:checked={featured} class="rounded" />
        <span class="text-sm">{$_("admin.common.featured")}</span>
      </label>

      <Button
        onclick={handleSubmit}
        disabled={saving}
        class="cursor-pointer w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
      >
        {saving ? $_("admin.common.saving") : $_("admin.common.save_changes")}
      </Button>
    </CardContent>
  </Card>
</div>