Sebastian Krüger
d9a60f0572
- Replace ← text with icon-[ri--arrow-left-line] in admin and me layouts - Add avatar + admin shield badge to admin sidebar header - Wrap all admin edit forms in Card (bg-card/50 border-primary/20) with styled inputs - Fix sm:pl-6 → lg:pl-6 so extra left padding only applies when sidebar is visible - Update security form submit button to gradient style matching profile - Remove "View Public Profile" button from me/profile - Use shadcn-svelte Empty component for recordings empty state - Install empty component via shadcn-svelte Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
214 lines
7.9 KiB
Svelte
214 lines
7.9 KiB
Svelte
<script lang="ts">
|
|
import { goto } from "$app/navigation";
|
|
import { toast } from "svelte-sonner";
|
|
import { _ } from "svelte-i18n";
|
|
import { createArticle, 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 { DatePicker } from "$lib/components/ui/date-picker";
|
|
import { FileDropZone, MEGABYTE } from "$lib/components/ui/file-drop-zone";
|
|
import { Card, CardContent } from "$lib/components/ui/card";
|
|
import Meta from "$lib/components/meta/meta.svelte";
|
|
|
|
let title = $state("");
|
|
let slug = $state("");
|
|
let excerpt = $state("");
|
|
let content = $state("");
|
|
let category = $state("");
|
|
let tags = $state<string[]>([]);
|
|
let featured = $state(false);
|
|
let publishDate = $state("");
|
|
let imageId = $state<string | null>(null);
|
|
let saving = $state(false);
|
|
let editorTab = $state<"write" | "preview">("write");
|
|
|
|
let preview = $derived(content ? (marked.parse(content) as string) : "");
|
|
|
|
function generateSlug(t: string) {
|
|
return t
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, "-")
|
|
.replace(/^-|-$/g, "");
|
|
}
|
|
|
|
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() {
|
|
if (!title || !slug) {
|
|
toast.error($_("admin.common.title_slug_required"));
|
|
return;
|
|
}
|
|
saving = true;
|
|
try {
|
|
await createArticle({
|
|
title,
|
|
slug,
|
|
excerpt: excerpt || undefined,
|
|
content: content || undefined,
|
|
imageId: imageId || undefined,
|
|
tags,
|
|
category: category || undefined,
|
|
featured,
|
|
publishDate: publishDate || undefined,
|
|
});
|
|
toast.success($_("admin.article_form.create_success"));
|
|
goto("/admin/articles");
|
|
} catch (e) {
|
|
toast.error((e instanceof Error ? e.message : null) ?? $_("admin.article_form.create_error"));
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Meta title={$_("admin.article_form.new_title")} description={null} />
|
|
|
|
<div class="py-3 sm:py-6 lg:pl-6">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<Button variant="ghost" href="/admin/articles" size="sm" class="shrink-0">
|
|
<span class="icon-[ri--arrow-left-line] h-4 w-4 mr-1"></span>{$_("common.back")}
|
|
</Button>
|
|
<h1 class="text-2xl font-bold">{$_("admin.article_form.new_title")}</h1>
|
|
</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}
|
|
oninput={() => {
|
|
if (!slug) slug = generateSlug(title);
|
|
}}
|
|
placeholder={$_("admin.article_form.title_placeholder")}
|
|
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}
|
|
placeholder={$_("admin.article_form.slug_placeholder")}
|
|
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}
|
|
placeholder={$_("admin.article_form.excerpt_placeholder")}
|
|
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>
|
|
<!-- Mobile: single pane toggled; Desktop: side by side -->
|
|
<div class="sm:grid sm:grid-cols-2 sm:gap-4 min-h-96">
|
|
<Textarea
|
|
bind:value={content}
|
|
placeholder={$_("admin.article_form.content_placeholder")}
|
|
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>
|
|
<FileDropZone accept="image/*" maxFileSize={10 * MEGABYTE} onUpload={handleImageUpload} />
|
|
{#if imageId}
|
|
<p class="text-xs text-green-600 mt-1">{$_("admin.common.image_uploaded")} ✓</p>
|
|
{/if}
|
|
</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}
|
|
placeholder={$_("admin.article_form.category_placeholder")}
|
|
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>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<Button
|
|
onclick={handleSubmit}
|
|
disabled={saving}
|
|
class="cursor-pointer bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
|
|
>
|
|
{saving ? $_("admin.common.creating") : $_("admin.article_form.create")}
|
|
</Button>
|
|
<Button variant="outline" href="/admin/articles">{$_("common.cancel")}</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|