snapshot
This commit is contained in:
Stefan ATZLESBERGER
+1
-1
@@ -1,4 +1,4 @@
|
|||||||
import { NotesApp } from "@/components/NotesApp";
|
import { NotesApp } from "@/features/notes/NotesApp";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
|
|||||||
@@ -1,411 +0,0 @@
|
|||||||
import { marked } from "marked";
|
|
||||||
import { Pencil, Trash2 } from "lucide-react";
|
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import type { Snippet } from "@/types/snippet";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent, CardFooter } from "@/components/ui/card";
|
|
||||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
|
||||||
|
|
||||||
marked.setOptions({ gfm: true });
|
|
||||||
|
|
||||||
function tagsFromString(s: string): string[] {
|
|
||||||
return s
|
|
||||||
.split(",")
|
|
||||||
.map(t => t.trim())
|
|
||||||
.filter(Boolean);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Letztes Segment nach dem letzten Komma (laufender Tag-Token). */
|
|
||||||
function splitTagsField(s: string): { committed: string; token: string } {
|
|
||||||
const lastComma = s.lastIndexOf(",");
|
|
||||||
if (lastComma === -1) {
|
|
||||||
return { committed: "", token: s.trimStart() };
|
|
||||||
}
|
|
||||||
return { committed: s.slice(0, lastComma + 1), token: s.slice(lastComma + 1).trimStart() };
|
|
||||||
}
|
|
||||||
|
|
||||||
function colorForTagName(
|
|
||||||
name: string,
|
|
||||||
treeColorByName: Record<string, string | null>,
|
|
||||||
snippetColors: Record<string, string | null>,
|
|
||||||
): string | null {
|
|
||||||
return treeColorByName[name] ?? snippetColors[name] ?? null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function TagPill({ tagKey, label, hex }: { tagKey: string; label: string; hex: string | null }) {
|
|
||||||
const has = Boolean(hex && /^#[0-9A-Fa-f]{6}$/i.test(hex));
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
className={
|
|
||||||
has
|
|
||||||
? "inline-flex max-w-full items-center rounded-full border-2 px-1.5 py-px text-[11px] font-medium leading-tight"
|
|
||||||
: "inline-flex max-w-full items-center rounded-full border-2 border-border bg-muted/40 px-1.5 py-px text-[11px] leading-tight text-muted-foreground"
|
|
||||||
}
|
|
||||||
style={
|
|
||||||
has
|
|
||||||
? {
|
|
||||||
borderColor: hex!,
|
|
||||||
backgroundColor: `${hex}33`,
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
title={tagKey === label ? tagKey : `${label} (${tagKey})`}
|
|
||||||
>
|
|
||||||
<span className="truncate">{label}</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatWhen(iso: string): string {
|
|
||||||
try {
|
|
||||||
return new Date(iso).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" });
|
|
||||||
} catch {
|
|
||||||
return iso;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
snippet: Snippet;
|
|
||||||
treeColorByName: Record<string, string | null>;
|
|
||||||
treeDisplayByName: Record<string, string>;
|
|
||||||
onReplace: (s: Snippet) => void;
|
|
||||||
onRemove: (id: number) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function SnippetCard({ snippet, treeColorByName, treeDisplayByName, onReplace, onRemove }: Props) {
|
|
||||||
const pristineEmpty = !snippet.body.trim() && (snippet.tags?.length ?? 0) === 0;
|
|
||||||
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(pristineEmpty);
|
|
||||||
const [showPreview, setShowPreview] = useState(false);
|
|
||||||
const [dirty, setDirty] = useState(false);
|
|
||||||
const [body, setBody] = useState(() => snippet.body ?? "");
|
|
||||||
const [tagsStr, setTagsStr] = useState(() => (snippet.tags ?? []).join(", "));
|
|
||||||
const [busy, setBusy] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [tagFieldFocused, setTagFieldFocused] = useState(false);
|
|
||||||
const [tagSuggest, setTagSuggest] = useState<{ name: string; display: string }[]>([]);
|
|
||||||
const [tagSuggestOpen, setTagSuggestOpen] = useState(false);
|
|
||||||
const [tagSuggestIndex, setTagSuggestIndex] = useState(0);
|
|
||||||
const tagSuggestReq = useRef(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!dialogOpen || !tagFieldFocused) {
|
|
||||||
setTagSuggestOpen(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { token } = splitTagsField(tagsStr);
|
|
||||||
const id = ++tagSuggestReq.current;
|
|
||||||
const t = window.setTimeout(() => {
|
|
||||||
void (async () => {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/tag-suggestions?q=${encodeURIComponent(token)}`);
|
|
||||||
if (tagSuggestReq.current !== id) return;
|
|
||||||
if (!res.ok) return;
|
|
||||||
const data = (await res.json()) as { items?: { name: string; display: string }[] };
|
|
||||||
const items = Array.isArray(data.items) ? data.items : [];
|
|
||||||
setTagSuggest(items);
|
|
||||||
setTagSuggestOpen(items.length > 0);
|
|
||||||
setTagSuggestIndex(0);
|
|
||||||
} catch {
|
|
||||||
if (tagSuggestReq.current !== id) return;
|
|
||||||
setTagSuggest([]);
|
|
||||||
setTagSuggestOpen(false);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}, 160);
|
|
||||||
return () => window.clearTimeout(t);
|
|
||||||
}, [dialogOpen, tagFieldFocused, tagsStr]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!dialogOpen) {
|
|
||||||
setTagFieldFocused(false);
|
|
||||||
setTagSuggest([]);
|
|
||||||
setTagSuggestOpen(false);
|
|
||||||
}
|
|
||||||
}, [dialogOpen]);
|
|
||||||
|
|
||||||
const applyTagSuggestion = (label: string) => {
|
|
||||||
const { committed } = splitTagsField(tagsStr);
|
|
||||||
setTagsStr(`${committed}${label}, `);
|
|
||||||
setTagSuggestOpen(false);
|
|
||||||
setDirty(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const viewHtml = useMemo(() => marked.parse(snippet.body ?? "") as string, [snippet.body]);
|
|
||||||
|
|
||||||
const previewHtml = useMemo(() => marked.parse(body) as string, [body]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (dialogOpen) return;
|
|
||||||
setBody(snippet.body ?? "");
|
|
||||||
setTagsStr((snippet.tags ?? []).join(", "));
|
|
||||||
}, [dialogOpen, snippet.id, snippet.updated_at, snippet.body, snippet.tags]);
|
|
||||||
|
|
||||||
const hydrateFromSnippet = () => {
|
|
||||||
setBody(snippet.body ?? "");
|
|
||||||
setTagsStr((snippet.tags ?? []).join(", "));
|
|
||||||
setShowPreview(false);
|
|
||||||
setDirty(false);
|
|
||||||
setError(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const openDialog = () => {
|
|
||||||
hydrateFromSnippet();
|
|
||||||
setDialogOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Dialog schließen; bei neuem leeren Snippet ohne Änderungen wieder entfernen. */
|
|
||||||
const requestDismiss = () => {
|
|
||||||
setDialogOpen(false);
|
|
||||||
if (pristineEmpty && !dirty) void deleteRemote(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOpenChange = (open: boolean) => {
|
|
||||||
if (open) openDialog();
|
|
||||||
else requestDismiss();
|
|
||||||
};
|
|
||||||
|
|
||||||
const save = async () => {
|
|
||||||
setBusy(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/snippets/${snippet.id}`, {
|
|
||||||
method: "PATCH",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({
|
|
||||||
title: null,
|
|
||||||
body,
|
|
||||||
tags: tagsFromString(tagsStr),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
if (!res.ok) {
|
|
||||||
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
|
||||||
throw new Error(err?.error ?? res.statusText);
|
|
||||||
}
|
|
||||||
const updated = (await res.json()) as Snippet;
|
|
||||||
onReplace(updated);
|
|
||||||
setDirty(false);
|
|
||||||
setDialogOpen(false);
|
|
||||||
} catch (e) {
|
|
||||||
setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen");
|
|
||||||
} finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function deleteRemote(askConfirm: boolean) {
|
|
||||||
if (askConfirm && !window.confirm("Snippet wirklich löschen?")) return;
|
|
||||||
setBusy(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/snippets/${snippet.id}`, { method: "DELETE" });
|
|
||||||
if (!res.ok && res.status !== 204) {
|
|
||||||
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
|
||||||
throw new Error(err?.error ?? res.statusText);
|
|
||||||
}
|
|
||||||
onRemove(snippet.id);
|
|
||||||
} catch (e) {
|
|
||||||
setError(e instanceof Error ? e.message : "Löschen fehlgeschlagen");
|
|
||||||
} finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const markDirty = () => setDirty(true);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Card className="gap-0 border-border/80 py-0 text-left shadow-md ring-1 ring-black/5 dark:ring-white/10">
|
|
||||||
<CardContent className="px-3 pb-1 pt-2">
|
|
||||||
<div
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
title="Zum Bearbeiten klicken"
|
|
||||||
className="-mx-0.5 rounded-sm px-0.5 py-0.5 outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring"
|
|
||||||
onKeyDown={e => {
|
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
|
||||||
e.preventDefault();
|
|
||||||
openDialog();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className="snippet-md-card-wrap">
|
|
||||||
<div
|
|
||||||
className="snippet-md overflow-auto"
|
|
||||||
dangerouslySetInnerHTML={{ __html: viewHtml }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex flex-row items-center gap-2 border-t border-border/80 px-3 py-1">
|
|
||||||
<div className="flex min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1">
|
|
||||||
{snippet.tags.length ? (
|
|
||||||
snippet.tags.map((t, i) => (
|
|
||||||
<TagPill
|
|
||||||
key={t}
|
|
||||||
tagKey={t}
|
|
||||||
label={snippet.tag_display?.[i] ?? treeDisplayByName[t] ?? t}
|
|
||||||
hex={colorForTagName(t, treeColorByName, snippet.tag_colors ?? {})}
|
|
||||||
/>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<span className="text-[10px] text-muted-foreground">Keine Tags</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex h-7 shrink-0 items-center gap-1.5">
|
|
||||||
<span className="whitespace-nowrap text-[10px] leading-none tabular-nums text-muted-foreground/90">
|
|
||||||
{formatWhen(snippet.updated_at)}
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="size-7 text-muted-foreground hover:text-foreground"
|
|
||||||
disabled={busy}
|
|
||||||
title="Bearbeiten"
|
|
||||||
onClick={openDialog}
|
|
||||||
>
|
|
||||||
<Pencil className="size-3.5" aria-hidden />
|
|
||||||
<span className="sr-only">Bearbeiten</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="size-7 text-muted-foreground hover:text-destructive"
|
|
||||||
disabled={busy}
|
|
||||||
title="Löschen"
|
|
||||||
onClick={() => void deleteRemote(true)}
|
|
||||||
>
|
|
||||||
<Trash2 className="size-3.5" aria-hidden />
|
|
||||||
<span className="sr-only">Löschen</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{error && !dialogOpen ? (
|
|
||||||
<p className="basis-full truncate text-center text-[10px] text-destructive sm:text-start">{error}</p>
|
|
||||||
) : null}
|
|
||||||
</CardFooter>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Dialog open={dialogOpen} onOpenChange={handleOpenChange}>
|
|
||||||
<DialogContent className="flex h-[min(88dvh,820px)] max-h-[92vh] w-[calc(100vw-1.5rem)] max-w-3xl gap-0 p-0">
|
|
||||||
<DialogHeader className="shrink-0 space-y-1 border-b px-5 pb-3 pt-5 pr-12 text-start sm:px-6 sm:pr-14">
|
|
||||||
<DialogTitle className="text-base">Snippet bearbeiten</DialogTitle>
|
|
||||||
<DialogDescription className="text-xs">Tags und Markdown — Vorschau optional.</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className="flex min-h-0 flex-1 flex-col gap-2 overflow-hidden px-5 py-3 sm:px-6">
|
|
||||||
<div className="relative shrink-0">
|
|
||||||
<Input
|
|
||||||
value={tagsStr}
|
|
||||||
onChange={e => {
|
|
||||||
markDirty();
|
|
||||||
setTagsStr(e.target.value);
|
|
||||||
}}
|
|
||||||
onFocus={() => setTagFieldFocused(true)}
|
|
||||||
onBlur={() => {
|
|
||||||
window.setTimeout(() => setTagFieldFocused(false), 140);
|
|
||||||
window.setTimeout(() => setTagSuggestOpen(false), 160);
|
|
||||||
}}
|
|
||||||
onKeyDown={e => {
|
|
||||||
if (!tagSuggestOpen || tagSuggest.length === 0) return;
|
|
||||||
if (e.key === "ArrowDown") {
|
|
||||||
e.preventDefault();
|
|
||||||
setTagSuggestIndex(i => Math.min(tagSuggest.length - 1, i + 1));
|
|
||||||
} else if (e.key === "ArrowUp") {
|
|
||||||
e.preventDefault();
|
|
||||||
setTagSuggestIndex(i => Math.max(0, i - 1));
|
|
||||||
} else if (e.key === "Enter") {
|
|
||||||
e.preventDefault();
|
|
||||||
const pick = tagSuggest[tagSuggestIndex];
|
|
||||||
if (pick) applyTagSuggestion(pick.name);
|
|
||||||
} else if (e.key === "Escape") {
|
|
||||||
e.preventDefault();
|
|
||||||
setTagSuggestOpen(false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
placeholder="Tags, kommagetrennt — Vorschläge mit Pfeiltasten / Enter"
|
|
||||||
autoComplete="off"
|
|
||||||
className="h-9"
|
|
||||||
/>
|
|
||||||
{tagSuggestOpen ? (
|
|
||||||
<ul
|
|
||||||
role="listbox"
|
|
||||||
className="absolute z-50 mt-1 max-h-40 w-full overflow-auto rounded-md border bg-popover py-1 text-sm shadow-md"
|
|
||||||
>
|
|
||||||
{tagSuggest.map((item, i) => (
|
|
||||||
<li key={`${item.name}-${i}`} role="option" aria-selected={i === tagSuggestIndex}>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`flex w-full cursor-pointer flex-col gap-0.5 px-3 py-1.5 text-left hover:bg-accent ${
|
|
||||||
i === tagSuggestIndex ? "bg-accent" : ""
|
|
||||||
}`}
|
|
||||||
onMouseDown={e => e.preventDefault()}
|
|
||||||
onClick={() => applyTagSuggestion(item.name)}
|
|
||||||
>
|
|
||||||
<span className="text-xs">{item.display}</span>
|
|
||||||
{item.display !== item.name ? (
|
|
||||||
<span className="font-mono text-[10px] text-muted-foreground">{item.name}</span>
|
|
||||||
) : null}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<div className="flex min-h-[1.5rem] flex-wrap gap-1.5">
|
|
||||||
{tagsFromString(tagsStr).map((t, i) => (
|
|
||||||
<TagPill
|
|
||||||
key={`${i}-${t}`}
|
|
||||||
tagKey={t}
|
|
||||||
label={treeDisplayByName[t] ?? t}
|
|
||||||
hex={colorForTagName(t, treeColorByName, snippet.tag_colors ?? {})}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
showPreview
|
|
||||||
? "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden lg:flex-row"
|
|
||||||
: "flex min-h-0 flex-1 flex-col overflow-hidden"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Textarea
|
|
||||||
value={body}
|
|
||||||
onChange={e => {
|
|
||||||
markDirty();
|
|
||||||
setBody(e.target.value);
|
|
||||||
}}
|
|
||||||
className="min-h-0 w-full flex-1 resize-none font-mono text-sm lg:min-h-0"
|
|
||||||
placeholder="Markdown …"
|
|
||||||
/>
|
|
||||||
{showPreview ? (
|
|
||||||
<div
|
|
||||||
className="snippet-md min-h-0 flex-1 overflow-auto rounded-md border bg-muted/30 p-3 lg:w-1/2"
|
|
||||||
dangerouslySetInnerHTML={{ __html: previewHtml }}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
{error ? <p className="shrink-0 text-sm text-destructive">{error}</p> : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter className="shrink-0 flex-row flex-wrap items-center justify-between gap-2 border-t px-5 py-3 sm:px-6">
|
|
||||||
<Button type="button" variant="outline" size="sm" className="h-8 text-xs" onClick={() => setShowPreview(v => !v)}>
|
|
||||||
{showPreview ? "Vorschau aus" : "Vorschau"}
|
|
||||||
</Button>
|
|
||||||
<div className="flex flex-wrap items-center justify-end gap-2">
|
|
||||||
<Button type="button" variant="secondary" size="sm" className="h-8" disabled={busy} onClick={requestDismiss}>
|
|
||||||
Abbrechen
|
|
||||||
</Button>
|
|
||||||
<Button type="button" size="sm" className="h-8" disabled={busy} onClick={() => void save()}>
|
|
||||||
Speichern
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,464 +0,0 @@
|
|||||||
import { useCallback, useEffect, useMemo, useState, type MouseEvent } from "react";
|
|
||||||
import { FolderTree, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
|
|
||||||
import { formatTreeTagDisplay } from "@/lib/treeTagDisplay";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import type { TagTreeNode } from "@/types/tagTree";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
open: boolean;
|
|
||||||
onOpenChange: (open: boolean) => void;
|
|
||||||
onChanged?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function orderedWithDepth(nodes: TagTreeNode[]): { node: TagTreeNode; depth: number }[] {
|
|
||||||
const byParent = new Map<number | null, TagTreeNode[]>();
|
|
||||||
for (const n of nodes) {
|
|
||||||
const p = n.parent_id;
|
|
||||||
const list = byParent.get(p);
|
|
||||||
if (list) list.push(n);
|
|
||||||
else byParent.set(p, [n]);
|
|
||||||
}
|
|
||||||
for (const list of byParent.values()) {
|
|
||||||
list.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
|
|
||||||
}
|
|
||||||
const walk = (parentId: number | null, depth: number): { node: TagTreeNode; depth: number }[] => {
|
|
||||||
const kids = byParent.get(parentId) ?? [];
|
|
||||||
const out: { node: TagTreeNode; depth: number }[] = [];
|
|
||||||
for (const k of kids) {
|
|
||||||
out.push({ node: k, depth });
|
|
||||||
out.push(...walk(k.id, depth + 1));
|
|
||||||
}
|
|
||||||
return out;
|
|
||||||
};
|
|
||||||
return walk(null, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function TagTreeDialog({ open, onOpenChange, onChanged }: Props) {
|
|
||||||
const [nodes, setNodes] = useState<TagTreeNode[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [formOpen, setFormOpen] = useState(false);
|
|
||||||
const [editingId, setEditingId] = useState<number | null>(null);
|
|
||||||
const [name, setName] = useState("");
|
|
||||||
const [parentIdStr, setParentIdStr] = useState<string>("__root__");
|
|
||||||
const [color, setColor] = useState("");
|
|
||||||
const [labelPrefix, setLabelPrefix] = useState("");
|
|
||||||
const [busy, setBusy] = useState(false);
|
|
||||||
|
|
||||||
const load = useCallback(async () => {
|
|
||||||
setLoading(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const res = await fetch("/api/tag-tree");
|
|
||||||
if (!res.ok) throw new Error(await res.text());
|
|
||||||
setNodes((await res.json()) as TagTreeNode[]);
|
|
||||||
} catch (e) {
|
|
||||||
setError(e instanceof Error ? e.message : "Laden fehlgeschlagen");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) return;
|
|
||||||
void load();
|
|
||||||
}, [open, load]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!open) {
|
|
||||||
setFormOpen(false);
|
|
||||||
setEditingId(null);
|
|
||||||
setName("");
|
|
||||||
setParentIdStr("__root__");
|
|
||||||
setColor("");
|
|
||||||
setLabelPrefix("");
|
|
||||||
setError(null);
|
|
||||||
}
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
const flatOrdered = useMemo(() => orderedWithDepth(nodes), [nodes]);
|
|
||||||
|
|
||||||
const resetFormFields = () => {
|
|
||||||
setEditingId(null);
|
|
||||||
setName("");
|
|
||||||
setParentIdStr("__root__");
|
|
||||||
setColor("");
|
|
||||||
setLabelPrefix("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const exitFormMode = () => {
|
|
||||||
setFormOpen(false);
|
|
||||||
resetFormFields();
|
|
||||||
setError(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const startEdit = (n: TagTreeNode) => {
|
|
||||||
setFormOpen(true);
|
|
||||||
setEditingId(n.id);
|
|
||||||
setName(n.name);
|
|
||||||
setParentIdStr(n.parent_id == null ? "__root__" : String(n.parent_id));
|
|
||||||
setColor(n.color ?? "");
|
|
||||||
setLabelPrefix(n.label_prefix ?? "");
|
|
||||||
setError(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const startNewUnder = (parentId: number | null) => {
|
|
||||||
setFormOpen(true);
|
|
||||||
resetFormFields();
|
|
||||||
setParentIdStr(parentId == null ? "__root__" : String(parentId));
|
|
||||||
setError(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const save = async () => {
|
|
||||||
setBusy(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const parent_id = parentIdStr === "__root__" ? null : Number(parentIdStr);
|
|
||||||
const colorNorm = color.trim() === "" ? null : color.trim();
|
|
||||||
const labelPrefixNorm = labelPrefix.trim() === "" ? null : labelPrefix.trim();
|
|
||||||
if (editingId == null) {
|
|
||||||
const res = await fetch("/api/tag-tree", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ name, parent_id, color: colorNorm, label_prefix: labelPrefixNorm }),
|
|
||||||
});
|
|
||||||
if (!res.ok) {
|
|
||||||
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
|
||||||
throw new Error(err?.error ?? res.statusText);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const res = await fetch(`/api/tag-tree/${editingId}`, {
|
|
||||||
method: "PATCH",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ name, parent_id, color: colorNorm, label_prefix: labelPrefixNorm }),
|
|
||||||
});
|
|
||||||
if (!res.ok) {
|
|
||||||
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
|
||||||
throw new Error(err?.error ?? res.statusText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
await load();
|
|
||||||
exitFormMode();
|
|
||||||
onChanged?.();
|
|
||||||
} catch (e) {
|
|
||||||
setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen");
|
|
||||||
} finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const remove = async (id: number, e?: MouseEvent) => {
|
|
||||||
e?.stopPropagation();
|
|
||||||
if (!window.confirm("Diesen Knoten und alle Unterknoten wirklich löschen?")) return;
|
|
||||||
setBusy(true);
|
|
||||||
setError(null);
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/tag-tree/${id}`, { method: "DELETE" });
|
|
||||||
if (!res.ok && res.status !== 204) {
|
|
||||||
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
|
||||||
throw new Error(err?.error ?? res.statusText);
|
|
||||||
}
|
|
||||||
if (editingId === id) exitFormMode();
|
|
||||||
await load();
|
|
||||||
onChanged?.();
|
|
||||||
} catch (e) {
|
|
||||||
setError(e instanceof Error ? e.message : "Löschen fehlgeschlagen");
|
|
||||||
} finally {
|
|
||||||
setBusy(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const parentOptions = useMemo(() => {
|
|
||||||
const blocked = new Set<number>();
|
|
||||||
if (editingId != null) {
|
|
||||||
blocked.add(editingId);
|
|
||||||
const children = new Map<number | null, number[]>();
|
|
||||||
for (const n of nodes) {
|
|
||||||
const p = n.parent_id;
|
|
||||||
const list = children.get(p);
|
|
||||||
if (list) list.push(n.id);
|
|
||||||
else children.set(p, [n.id]);
|
|
||||||
}
|
|
||||||
const stack = [...(children.get(editingId) ?? [])];
|
|
||||||
while (stack.length) {
|
|
||||||
const id = stack.pop()!;
|
|
||||||
blocked.add(id);
|
|
||||||
const kids = children.get(id);
|
|
||||||
if (kids) for (const k of kids) stack.push(k);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return nodes.filter(n => !blocked.has(n.id));
|
|
||||||
}, [nodes, editingId]);
|
|
||||||
|
|
||||||
const previewLabel = name.trim() ? formatTreeTagDisplay(name.trim(), labelPrefix) : null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
||||||
<DialogContent className="left-0 top-0 flex h-dvh max-h-dvh min-h-0 w-full max-w-none translate-x-0 translate-y-0 flex-col gap-0 overflow-hidden rounded-none p-0 sm:max-w-none">
|
|
||||||
<DialogHeader className="shrink-0 space-y-2 border-b bg-muted/30 px-5 py-4 text-left sm:px-6">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg border bg-background shadow-sm">
|
|
||||||
<FolderTree className="size-4 text-muted-foreground" aria-hidden />
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 flex-1 space-y-1">
|
|
||||||
<DialogTitle className="text-lg">Tag-Baum</DialogTitle>
|
|
||||||
<DialogDescription className="text-pretty text-xs leading-relaxed sm:text-sm">
|
|
||||||
Strukturierte Tags für Suche und Farben.{" "}
|
|
||||||
<span className="text-foreground/90">Kurzname</span> in Snippets; optionaler Prefix nur für die Anzeige.
|
|
||||||
</DialogDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div className={cn("flex min-h-0 flex-1 flex-col lg:flex-row lg:divide-x", formOpen ? "" : "lg:flex-1")}>
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"flex min-h-[min(200px,38vh)] flex-col border-b bg-muted/10 lg:min-h-0 lg:border-b-0 lg:bg-muted/5",
|
|
||||||
formOpen ? "lg:max-w-[min(100%,420px)]" : "lg:flex-1",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{!formOpen && error ? (
|
|
||||||
<div className="border-b border-destructive/30 bg-destructive/10 px-4 py-2 text-sm text-destructive sm:px-5">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
<div className="flex shrink-0 items-center justify-between gap-2 border-b px-4 py-2.5 sm:px-5">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Hierarchie</span>
|
|
||||||
{!loading ? (
|
|
||||||
<span className="rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-muted-foreground tabular-nums">
|
|
||||||
{nodes.length}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
className="h-8 gap-1.5 px-2.5 text-xs"
|
|
||||||
disabled={busy}
|
|
||||||
onClick={() => startNewUnder(null)}
|
|
||||||
>
|
|
||||||
<Plus className="size-3.5" aria-hidden />
|
|
||||||
Neuer Knoten
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="min-h-0 flex-1 overflow-y-auto px-2 py-2 sm:px-3">
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground">
|
|
||||||
<Loader2 className="size-7 animate-spin opacity-70" aria-hidden />
|
|
||||||
<span className="text-sm">Lade Tag-Baum …</span>
|
|
||||||
</div>
|
|
||||||
) : flatOrdered.length === 0 ? (
|
|
||||||
<div className="flex flex-col items-center justify-center gap-3 px-4 py-10 text-center">
|
|
||||||
<p className="max-w-xs text-sm text-muted-foreground">
|
|
||||||
Noch keine Knoten. Lege den ersten an — er erscheint in der Vorschau und in der Tag-Suche.
|
|
||||||
</p>
|
|
||||||
<Button type="button" size="sm" className="gap-1.5" onClick={() => startNewUnder(null)}>
|
|
||||||
<Plus className="size-3.5" aria-hidden />
|
|
||||||
Ersten Knoten anlegen
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<ul className="space-y-0.5" role="list">
|
|
||||||
{flatOrdered.map(({ node: n, depth }) => {
|
|
||||||
const isActive = formOpen && editingId === n.id;
|
|
||||||
return (
|
|
||||||
<li key={n.id} role="none">
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"group flex items-center gap-0.5 rounded-md border border-transparent py-0.5 transition-colors",
|
|
||||||
isActive ? "border-border bg-background shadow-sm" : "hover:border-border/50 hover:bg-muted/40",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="flex min-w-0 flex-1 items-center gap-2 py-1 pr-1"
|
|
||||||
style={{ paddingLeft: `${8 + depth * 12}px` }}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="size-1.5 shrink-0 rounded-full ring-1 ring-border"
|
|
||||||
style={{
|
|
||||||
backgroundColor: n.color ?? "hsl(var(--muted-foreground) / 0.3)",
|
|
||||||
}}
|
|
||||||
title={n.color ? `Farbe ${n.color}` : "Keine Farbe"}
|
|
||||||
aria-hidden
|
|
||||||
/>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="truncate text-xs font-medium leading-snug">
|
|
||||||
{formatTreeTagDisplay(n.name, n.label_prefix)}
|
|
||||||
</div>
|
|
||||||
<div className="truncate font-mono text-[10px] leading-tight text-muted-foreground">{n.name}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex shrink-0 items-center gap-0 pr-0.5">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="size-7 text-muted-foreground hover:text-foreground"
|
|
||||||
title="Bearbeiten"
|
|
||||||
disabled={busy}
|
|
||||||
onClick={() => startEdit(n)}
|
|
||||||
>
|
|
||||||
<Pencil className="size-3.5" aria-hidden />
|
|
||||||
<span className="sr-only">Bearbeiten</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="size-7 text-muted-foreground hover:text-foreground"
|
|
||||||
title="Unterknoten"
|
|
||||||
disabled={busy}
|
|
||||||
onClick={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
startNewUnder(n.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Plus className="size-3.5" aria-hidden />
|
|
||||||
<span className="sr-only">Unterknoten anlegen</span>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="ghost"
|
|
||||||
size="icon-sm"
|
|
||||||
className="size-7 text-muted-foreground hover:text-destructive"
|
|
||||||
title="Löschen"
|
|
||||||
disabled={busy}
|
|
||||||
onClick={e => void remove(n.id, e)}
|
|
||||||
>
|
|
||||||
<Trash2 className="size-3.5" aria-hidden />
|
|
||||||
<span className="sr-only">Löschen</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{formOpen ? (
|
|
||||||
<div className="flex w-full min-w-0 flex-1 flex-col overflow-y-auto bg-background lg:max-w-md">
|
|
||||||
<div className="border-b px-4 py-2.5 sm:px-5">
|
|
||||||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
||||||
{editingId == null ? "Knoten anlegen" : "Knoten bearbeiten"}
|
|
||||||
</p>
|
|
||||||
{editingId != null ? (
|
|
||||||
<p className="mt-0.5 font-mono text-[11px] text-muted-foreground">ID {editingId}</p>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-1 flex-col gap-5 px-4 py-4 sm:px-5">
|
|
||||||
{error ? (
|
|
||||||
<p className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
|
||||||
{error}
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="tt-name" className="text-xs text-muted-foreground">
|
|
||||||
Kurzname (Snippet, Suche, Intellisense)
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="tt-name"
|
|
||||||
value={name}
|
|
||||||
onChange={e => setName(e.target.value)}
|
|
||||||
className="font-mono text-sm"
|
|
||||||
autoComplete="off"
|
|
||||||
placeholder="sp-migrator"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="tt-prefix" className="text-xs text-muted-foreground">
|
|
||||||
Anzeige-Prefix (optional)
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="tt-prefix"
|
|
||||||
value={labelPrefix}
|
|
||||||
onChange={e => setLabelPrefix(e.target.value)}
|
|
||||||
placeholder="Projekt:"
|
|
||||||
className="font-mono text-sm"
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
<div className="rounded-md border bg-muted/30 px-3 py-2 text-xs">
|
|
||||||
<span className="text-muted-foreground">Vorschau </span>
|
|
||||||
<span className="font-medium text-foreground">{previewLabel ?? "—"}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-xs text-muted-foreground">Übergeordnet</Label>
|
|
||||||
<Select value={parentIdStr} onValueChange={setParentIdStr}>
|
|
||||||
<SelectTrigger className="h-9 w-full font-mono text-xs">
|
|
||||||
<SelectValue placeholder="Wurzel" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="__root__">(Wurzel — kein Parent)</SelectItem>
|
|
||||||
{parentOptions.map(n => (
|
|
||||||
<SelectItem key={n.id} value={String(n.id)}>
|
|
||||||
{formatTreeTagDisplay(n.name, n.label_prefix)}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="tt-color" className="text-xs text-muted-foreground">
|
|
||||||
Farbe (optional, #rrggbb)
|
|
||||||
</Label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Input
|
|
||||||
id="tt-color"
|
|
||||||
value={color}
|
|
||||||
onChange={e => setColor(e.target.value)}
|
|
||||||
placeholder="#3b82f6"
|
|
||||||
className="min-w-0 flex-1 font-mono text-sm"
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
type="color"
|
|
||||||
className="h-9 w-11 shrink-0 cursor-pointer rounded-md border p-1"
|
|
||||||
value={/^#[0-9A-Fa-f]{6}$/.test(color) ? color : "#64748b"}
|
|
||||||
onChange={e => setColor(e.target.value)}
|
|
||||||
aria-label="Farbe wählen"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter className="shrink-0 flex-row flex-wrap items-center justify-start gap-2 border-t bg-muted/20 px-4 py-3 sm:px-5">
|
|
||||||
{formOpen ? (
|
|
||||||
<>
|
|
||||||
<Button type="button" variant="outline" className="h-9" disabled={busy} onClick={() => exitFormMode()}>
|
|
||||||
Schließen
|
|
||||||
</Button>
|
|
||||||
<Button type="button" className="h-9" disabled={busy || !name.trim()} onClick={() => void save()}>
|
|
||||||
Speichern
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Button type="button" variant="outline" className="h-9" disabled={busy} onClick={() => onOpenChange(false)}>
|
|
||||||
Schließen
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -4,6 +4,14 @@ import * as React from "react";
|
|||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
/** Centered modal (default shadcn). */
|
||||||
|
const dialogContentDefault =
|
||||||
|
"fixed left-1/2 top-1/2 z-50 flex min-h-0 w-[calc(100vw-1.5rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-hidden rounded-lg border bg-background p-6 shadow-lg duration-200 max-h-[min(92dvh,calc(100dvh-2rem))] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
|
||||||
|
|
||||||
|
/** Full viewport; overrides centered positioning from the default recipe. */
|
||||||
|
const dialogContentFullscreen =
|
||||||
|
"fixed inset-0 z-50 flex min-h-0 w-full flex-col gap-0 overflow-hidden rounded-none border bg-background p-0 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
|
||||||
|
|
||||||
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||||
}
|
}
|
||||||
@@ -36,20 +44,19 @@ const DialogOverlay = React.forwardRef<
|
|||||||
));
|
));
|
||||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
const DialogContent = React.forwardRef<
|
export type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
||||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
variant?: "default" | "fullscreen";
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
};
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
|
const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
|
||||||
|
({ className, children, variant = "default", ...props }, ref) => (
|
||||||
<DialogPortal>
|
<DialogPortal>
|
||||||
<DialogOverlay />
|
<DialogOverlay />
|
||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
data-slot="dialog-content"
|
data-slot="dialog-content"
|
||||||
className={cn(
|
data-variant={variant}
|
||||||
"fixed left-1/2 top-1/2 z-50 flex min-h-0 w-[calc(100vw-1.5rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-hidden rounded-lg border bg-background p-6 shadow-lg duration-200 max-h-[min(92dvh,calc(100dvh-2rem))]",
|
className={cn(variant === "fullscreen" ? dialogContentFullscreen : dialogContentDefault, className)}
|
||||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
@@ -62,7 +69,8 @@ const DialogContent = React.forwardRef<
|
|||||||
</DialogPrimitive.Close>
|
</DialogPrimitive.Close>
|
||||||
</DialogPrimitive.Content>
|
</DialogPrimitive.Content>
|
||||||
</DialogPortal>
|
</DialogPortal>
|
||||||
));
|
),
|
||||||
|
);
|
||||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|||||||
data-slot="input"
|
data-slot="input"
|
||||||
className={cn(
|
className={cn(
|
||||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
"focus:border-ring focus:ring-[3px] focus:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
|
||||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -2,17 +2,21 @@ import * as React from "react";
|
|||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
|
||||||
return (
|
({ className, ...props }, ref) => (
|
||||||
<textarea
|
<textarea
|
||||||
|
ref={ref}
|
||||||
data-slot="textarea"
|
data-slot="textarea"
|
||||||
className={cn(
|
className={cn(
|
||||||
"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-16 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm field-sizing-content",
|
||||||
|
"focus:border-ring focus:ring-[3px] focus:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
Textarea.displayName = "Textarea";
|
||||||
|
|
||||||
export { Textarea };
|
export { Textarea };
|
||||||
@@ -1,23 +1,11 @@
|
|||||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { Tags } from "lucide-react";
|
|
||||||
import { formatTreeTagDisplay } from "@/lib/treeTagDisplay";
|
import { formatTreeTagDisplay } from "@/lib/treeTagDisplay";
|
||||||
import type { Snippet } from "@/types/snippet";
|
import type { Snippet } from "@/types/snippet";
|
||||||
import type { TagTreeNode } from "@/types/tagTree";
|
import type { TagTreeNode } from "@/types/tagTree";
|
||||||
import { Button } from "@/components/ui/button";
|
import { SnippetCard } from "@/features/snippets/SnippetCard";
|
||||||
import { Input } from "@/components/ui/input";
|
import { TagTreeDialog } from "@/features/tag-tree/TagTreeDialog";
|
||||||
import { Label } from "@/components/ui/label";
|
import { NotesToolbar } from "@/features/notes/NotesToolbar";
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
import type { SortValue } from "@/features/notes/sortOptions";
|
||||||
import { SnippetCard } from "@/components/SnippetCard";
|
|
||||||
import { TagTreeDialog } from "@/components/TagTreeDialog";
|
|
||||||
|
|
||||||
const SORT_OPTIONS = [
|
|
||||||
{ value: "updated_desc", label: "Zuletzt geändert (neu zuerst)" },
|
|
||||||
{ value: "updated_asc", label: "Zuletzt geändert (alt zuerst)" },
|
|
||||||
{ value: "title_asc", label: "Titel A–Z" },
|
|
||||||
{ value: "title_desc", label: "Titel Z–A" },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
type SortValue = (typeof SORT_OPTIONS)[number]["value"];
|
|
||||||
|
|
||||||
export function NotesApp() {
|
export function NotesApp() {
|
||||||
const [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
@@ -118,58 +106,15 @@ export function NotesApp() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-4 sm:px-5">
|
<div className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-4 py-4 sm:px-5">
|
||||||
<header className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:gap-3">
|
<NotesToolbar
|
||||||
<div className="min-w-0 flex-1 space-y-1.5">
|
query={query}
|
||||||
<Label htmlFor="search" className="text-xs text-muted-foreground">
|
onQueryChange={setQuery}
|
||||||
Suche
|
sort={sort}
|
||||||
</Label>
|
onSortChange={setSort}
|
||||||
<Input
|
tagTreeCount={tagTreeNodes.length}
|
||||||
id="search"
|
onOpenTagTree={() => setTagTreeOpen(true)}
|
||||||
value={query}
|
onCreateNew={() => void createNew()}
|
||||||
onChange={e => setQuery(e.target.value)}
|
|
||||||
placeholder="Freitext: Inhalt & Tags · tag:x · title:y · content:z"
|
|
||||||
autoComplete="off"
|
|
||||||
className="h-9"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div className="w-full min-w-[min(100%,220px)] space-y-1.5 sm:w-72">
|
|
||||||
<Label htmlFor="sort" className="text-xs text-muted-foreground">
|
|
||||||
Sortierung
|
|
||||||
</Label>
|
|
||||||
<Select value={sort} onValueChange={v => setSort(v as SortValue)}>
|
|
||||||
<SelectTrigger id="sort" className="h-9 w-full">
|
|
||||||
<SelectValue placeholder="Sortierung" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{SORT_OPTIONS.map(o => (
|
|
||||||
<SelectItem key={o.value} value={o.value}>
|
|
||||||
{o.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-wrap gap-2 sm:shrink-0">
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="outline"
|
|
||||||
className="h-9 w-full gap-2 sm:w-auto"
|
|
||||||
onClick={() => setTagTreeOpen(true)}
|
|
||||||
title="Tag-Hierarchie und Anzeige-Prefixe verwalten"
|
|
||||||
>
|
|
||||||
<Tags className="size-4 shrink-0 opacity-70" aria-hidden />
|
|
||||||
<span>Tag-Baum</span>
|
|
||||||
{tagTreeNodes.length > 0 ? (
|
|
||||||
<span className="rounded-full bg-muted px-1.5 py-0 text-[10px] font-medium tabular-nums text-muted-foreground">
|
|
||||||
{tagTreeNodes.length}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</Button>
|
|
||||||
<Button type="button" className="h-9 w-full sm:w-auto" onClick={() => void createNew()}>
|
|
||||||
Neu
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<TagTreeDialog
|
<TagTreeDialog
|
||||||
open={tagTreeOpen}
|
open={tagTreeOpen}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
import { Tags } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { SORT_OPTIONS, type SortValue } from "@/features/notes/sortOptions";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
query: string;
|
||||||
|
onQueryChange: (v: string) => void;
|
||||||
|
sort: SortValue;
|
||||||
|
onSortChange: (v: SortValue) => void;
|
||||||
|
tagTreeCount: number;
|
||||||
|
onOpenTagTree: () => void;
|
||||||
|
onCreateNew: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function NotesToolbar({
|
||||||
|
query,
|
||||||
|
onQueryChange,
|
||||||
|
sort,
|
||||||
|
onSortChange,
|
||||||
|
tagTreeCount,
|
||||||
|
onOpenTagTree,
|
||||||
|
onCreateNew,
|
||||||
|
}: Props) {
|
||||||
|
return (
|
||||||
|
<header className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:gap-3">
|
||||||
|
<div className="min-w-0 flex-1 space-y-1.5">
|
||||||
|
<Label htmlFor="search" className="text-xs text-muted-foreground">
|
||||||
|
Suche
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="search"
|
||||||
|
value={query}
|
||||||
|
onChange={e => onQueryChange(e.target.value)}
|
||||||
|
placeholder="Freitext: Inhalt & Tags · tag:x · title:y · content:z"
|
||||||
|
autoComplete="off"
|
||||||
|
className="h-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="w-full min-w-[min(100%,220px)] space-y-1.5 sm:w-72">
|
||||||
|
<Label htmlFor="sort" className="text-xs text-muted-foreground">
|
||||||
|
Sortierung
|
||||||
|
</Label>
|
||||||
|
<Select value={sort} onValueChange={v => onSortChange(v as SortValue)}>
|
||||||
|
<SelectTrigger id="sort" className="h-9 w-full">
|
||||||
|
<SelectValue placeholder="Sortierung" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{SORT_OPTIONS.map(o => (
|
||||||
|
<SelectItem key={o.value} value={o.value}>
|
||||||
|
{o.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2 sm:shrink-0">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
className="h-9 w-full gap-2 sm:w-auto"
|
||||||
|
onClick={onOpenTagTree}
|
||||||
|
title="Tag-Hierarchie und Anzeige-Prefixe verwalten"
|
||||||
|
>
|
||||||
|
<Tags className="size-4 shrink-0 opacity-70" aria-hidden />
|
||||||
|
<span>Tag-Baum</span>
|
||||||
|
{tagTreeCount > 0 ? (
|
||||||
|
<span className="rounded-full bg-muted px-1.5 py-0 text-[10px] font-medium tabular-nums text-muted-foreground">
|
||||||
|
{tagTreeCount}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</Button>
|
||||||
|
<Button type="button" className="h-9 w-full sm:w-auto" onClick={onCreateNew}>
|
||||||
|
Neu
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
export const SORT_OPTIONS = [
|
||||||
|
{ value: "updated_desc", label: "Zuletzt geändert (neu zuerst)" },
|
||||||
|
{ value: "updated_asc", label: "Zuletzt geändert (alt zuerst)" },
|
||||||
|
{ value: "title_asc", label: "Titel A–Z" },
|
||||||
|
{ value: "title_desc", label: "Titel Z–A" },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export type SortValue = (typeof SORT_OPTIONS)[number]["value"];
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
import { Pencil, Trash2 } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import type { Snippet } from "@/types/snippet";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent, CardFooter } from "@/components/ui/card";
|
||||||
|
import { SnippetEditDialog } from "@/features/snippets/components/SnippetEditDialog";
|
||||||
|
import { TagPill } from "@/features/snippets/components/TagPill";
|
||||||
|
import { colorForTagName, tagsFromString } from "@/features/snippets/lib/tagFieldUtils";
|
||||||
|
import { formatWhen } from "@/features/snippets/lib/formatWhen";
|
||||||
|
import { parseSnippetMarkdown } from "@/features/snippets/lib/parseSnippetMarkdown";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
snippet: Snippet;
|
||||||
|
treeColorByName: Record<string, string | null>;
|
||||||
|
treeDisplayByName: Record<string, string>;
|
||||||
|
onReplace: (s: Snippet) => void;
|
||||||
|
onRemove: (id: number) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SnippetCard({ snippet, treeColorByName, treeDisplayByName, onReplace, onRemove }: Props) {
|
||||||
|
const pristineEmpty = !snippet.body.trim() && (snippet.tags?.length ?? 0) === 0;
|
||||||
|
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(pristineEmpty);
|
||||||
|
const [dirty, setDirty] = useState(false);
|
||||||
|
const [body, setBody] = useState(() => snippet.body ?? "");
|
||||||
|
const [tagsStr, setTagsStr] = useState(() => (snippet.tags ?? []).join(", "));
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const viewHtml = useMemo(() => parseSnippetMarkdown(snippet.body ?? ""), [snippet.body]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (dialogOpen) return;
|
||||||
|
setBody(snippet.body ?? "");
|
||||||
|
setTagsStr((snippet.tags ?? []).join(", "));
|
||||||
|
}, [dialogOpen, snippet.id, snippet.updated_at, snippet.body, snippet.tags]);
|
||||||
|
|
||||||
|
const hydrateFromSnippet = () => {
|
||||||
|
setBody(snippet.body ?? "");
|
||||||
|
setTagsStr((snippet.tags ?? []).join(", "));
|
||||||
|
setDirty(false);
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openDialog = () => {
|
||||||
|
hydrateFromSnippet();
|
||||||
|
setDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const requestDismiss = () => {
|
||||||
|
setDialogOpen(false);
|
||||||
|
if (pristineEmpty && !dirty) void deleteRemote(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOpenChange = (open: boolean) => {
|
||||||
|
if (open) openDialog();
|
||||||
|
else requestDismiss();
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
setBusy(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/snippets/${snippet.id}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
title: null,
|
||||||
|
body,
|
||||||
|
tags: tagsFromString(tagsStr),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
||||||
|
throw new Error(err?.error ?? res.statusText);
|
||||||
|
}
|
||||||
|
const updated = (await res.json()) as Snippet;
|
||||||
|
onReplace(updated);
|
||||||
|
setDirty(false);
|
||||||
|
setDialogOpen(false);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen");
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
async function deleteRemote(askConfirm: boolean) {
|
||||||
|
if (askConfirm && !window.confirm("Snippet wirklich löschen?")) return;
|
||||||
|
setBusy(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/snippets/${snippet.id}`, { method: "DELETE" });
|
||||||
|
if (!res.ok && res.status !== 204) {
|
||||||
|
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
||||||
|
throw new Error(err?.error ?? res.statusText);
|
||||||
|
}
|
||||||
|
onRemove(snippet.id);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : "Löschen fehlgeschlagen");
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const markDirty = () => setDirty(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card className="gap-0 border-border/80 py-0 text-left shadow-md ring-1 ring-black/5 dark:ring-white/10">
|
||||||
|
<CardContent className="px-3 pb-1 pt-2">
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
title="Zum Bearbeiten klicken"
|
||||||
|
className="-mx-0.5 rounded-sm px-0.5 py-0.5 outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring"
|
||||||
|
onKeyDown={e => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
openDialog();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="snippet-md-card-wrap">
|
||||||
|
<div className="snippet-md overflow-auto" dangerouslySetInnerHTML={{ __html: viewHtml }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter className="flex flex-row items-center gap-2 border-t border-border/80 px-3 py-1">
|
||||||
|
<div className="flex min-h-7 min-w-0 flex-1 flex-wrap items-center gap-1">
|
||||||
|
{snippet.tags.length ? (
|
||||||
|
snippet.tags.map((t, i) => (
|
||||||
|
<TagPill
|
||||||
|
key={t}
|
||||||
|
tagKey={t}
|
||||||
|
label={snippet.tag_display?.[i] ?? treeDisplayByName[t] ?? t}
|
||||||
|
hex={colorForTagName(t, treeColorByName, snippet.tag_colors ?? {})}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<span className="text-[10px] text-muted-foreground">Keine Tags</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex h-7 shrink-0 items-center gap-1.5">
|
||||||
|
<span className="whitespace-nowrap text-[10px] leading-none tabular-nums text-muted-foreground/90">
|
||||||
|
{formatWhen(snippet.updated_at)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className="size-7 text-muted-foreground hover:text-foreground"
|
||||||
|
disabled={busy}
|
||||||
|
title="Bearbeiten"
|
||||||
|
onClick={openDialog}
|
||||||
|
>
|
||||||
|
<Pencil className="size-3.5" aria-hidden />
|
||||||
|
<span className="sr-only">Bearbeiten</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className="size-7 text-muted-foreground hover:text-destructive"
|
||||||
|
disabled={busy}
|
||||||
|
title="Löschen"
|
||||||
|
onClick={() => void deleteRemote(true)}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-3.5" aria-hidden />
|
||||||
|
<span className="sr-only">Löschen</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{error && !dialogOpen ? (
|
||||||
|
<p className="basis-full truncate text-center text-[10px] text-destructive sm:text-start">{error}</p>
|
||||||
|
) : null}
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<SnippetEditDialog
|
||||||
|
snippet={snippet}
|
||||||
|
open={dialogOpen}
|
||||||
|
onOpenChange={handleOpenChange}
|
||||||
|
treeColorByName={treeColorByName}
|
||||||
|
treeDisplayByName={treeDisplayByName}
|
||||||
|
body={body}
|
||||||
|
tagsStr={tagsStr}
|
||||||
|
onBodyChange={v => {
|
||||||
|
markDirty();
|
||||||
|
setBody(v);
|
||||||
|
}}
|
||||||
|
onTagsStrChange={v => {
|
||||||
|
markDirty();
|
||||||
|
setTagsStr(v);
|
||||||
|
}}
|
||||||
|
busy={busy}
|
||||||
|
error={error}
|
||||||
|
onSave={() => void save()}
|
||||||
|
onDismiss={requestDismiss}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import type { Snippet } from "@/types/snippet";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { useTagSuggestions } from "@/features/snippets/hooks/useTagSuggestions";
|
||||||
|
import { TagPill } from "@/features/snippets/components/TagPill";
|
||||||
|
import { TagSuggestDropdown } from "@/features/snippets/components/TagSuggestDropdown";
|
||||||
|
import { colorForTagName, splitTagsField, tagsFromString } from "@/features/snippets/lib/tagFieldUtils";
|
||||||
|
import { parseSnippetMarkdown } from "@/features/snippets/lib/parseSnippetMarkdown";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
snippet: Snippet;
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
treeColorByName: Record<string, string | null>;
|
||||||
|
treeDisplayByName: Record<string, string>;
|
||||||
|
body: string;
|
||||||
|
tagsStr: string;
|
||||||
|
onBodyChange: (v: string) => void;
|
||||||
|
onTagsStrChange: (v: string) => void;
|
||||||
|
busy: boolean;
|
||||||
|
error: string | null;
|
||||||
|
onSave: () => void;
|
||||||
|
onDismiss: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SnippetEditDialog({
|
||||||
|
snippet,
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
treeColorByName,
|
||||||
|
treeDisplayByName,
|
||||||
|
body,
|
||||||
|
tagsStr,
|
||||||
|
onBodyChange,
|
||||||
|
onTagsStrChange,
|
||||||
|
busy,
|
||||||
|
error,
|
||||||
|
onSave,
|
||||||
|
onDismiss,
|
||||||
|
}: Props) {
|
||||||
|
const bodyRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
const [showPreview, setShowPreview] = useState(false);
|
||||||
|
const [tagFieldFocused, setTagFieldFocused] = useState(false);
|
||||||
|
const { items: tagSuggest, open: tagSuggestOpen, setOpen: setTagSuggestOpen, activeIndex, setActiveIndex } =
|
||||||
|
useTagSuggestions(open, tagFieldFocused, tagsStr);
|
||||||
|
|
||||||
|
const previewHtml = useMemo(() => parseSnippetMarkdown(body), [body]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) setShowPreview(false);
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const applyTagSuggestion = (label: string) => {
|
||||||
|
const { committed } = splitTagsField(tagsStr);
|
||||||
|
onTagsStrChange(`${committed}${label}, `);
|
||||||
|
setTagSuggestOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent
|
||||||
|
variant="fullscreen"
|
||||||
|
onOpenAutoFocus={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
requestAnimationFrame(() => bodyRef.current?.focus());
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogHeader className="dialog-snippet-header">
|
||||||
|
<DialogTitle className="text-base">Snippet bearbeiten</DialogTitle>
|
||||||
|
<DialogDescription className="text-xs">Tags und Markdown — Vorschau optional.</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="dialog-snippet-body">
|
||||||
|
<div className="relative shrink-0">
|
||||||
|
<Input
|
||||||
|
value={tagsStr}
|
||||||
|
onChange={e => onTagsStrChange(e.target.value)}
|
||||||
|
onFocus={() => setTagFieldFocused(true)}
|
||||||
|
onBlur={() => {
|
||||||
|
window.setTimeout(() => setTagFieldFocused(false), 140);
|
||||||
|
window.setTimeout(() => setTagSuggestOpen(false), 160);
|
||||||
|
}}
|
||||||
|
onKeyDown={e => {
|
||||||
|
if (!tagSuggestOpen || tagSuggest.length === 0) return;
|
||||||
|
if (e.key === "ArrowDown") {
|
||||||
|
e.preventDefault();
|
||||||
|
setActiveIndex(i => Math.min(tagSuggest.length - 1, i + 1));
|
||||||
|
} else if (e.key === "ArrowUp") {
|
||||||
|
e.preventDefault();
|
||||||
|
setActiveIndex(i => Math.max(0, i - 1));
|
||||||
|
} else if (e.key === "Enter") {
|
||||||
|
e.preventDefault();
|
||||||
|
const pick = tagSuggest[activeIndex];
|
||||||
|
if (pick) applyTagSuggestion(pick.name);
|
||||||
|
} else if (e.key === "Escape") {
|
||||||
|
e.preventDefault();
|
||||||
|
setTagSuggestOpen(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
placeholder="Tags, kommagetrennt — Vorschläge mit Pfeiltasten / Enter"
|
||||||
|
autoComplete="off"
|
||||||
|
className="h-9"
|
||||||
|
/>
|
||||||
|
<TagSuggestDropdown
|
||||||
|
open={tagSuggestOpen}
|
||||||
|
items={tagSuggest}
|
||||||
|
activeIndex={activeIndex}
|
||||||
|
onPick={name => applyTagSuggestion(name)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex min-h-[1.5rem] flex-wrap gap-1.5">
|
||||||
|
{tagsFromString(tagsStr).map((t, i) => (
|
||||||
|
<TagPill
|
||||||
|
key={`${i}-${t}`}
|
||||||
|
tagKey={t}
|
||||||
|
label={treeDisplayByName[t] ?? t}
|
||||||
|
hex={colorForTagName(t, treeColorByName, snippet.tag_colors ?? {})}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className={showPreview ? "dialog-snippet-editor-with-preview" : "dialog-snippet-editor"}>
|
||||||
|
<Textarea
|
||||||
|
ref={bodyRef}
|
||||||
|
value={body}
|
||||||
|
onChange={e => onBodyChange(e.target.value)}
|
||||||
|
className="dialog-snippet-textarea"
|
||||||
|
placeholder="Markdown …"
|
||||||
|
/>
|
||||||
|
{showPreview ? (
|
||||||
|
<div className="dialog-snippet-preview snippet-md" dangerouslySetInnerHTML={{ __html: previewHtml }} />
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
{error ? <p className="shrink-0 text-sm text-destructive">{error}</p> : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter className="dialog-snippet-footer">
|
||||||
|
<Button type="button" variant="outline" size="sm" className="h-8 text-xs" onClick={() => setShowPreview(v => !v)}>
|
||||||
|
{showPreview ? "Vorschau aus" : "Vorschau"}
|
||||||
|
</Button>
|
||||||
|
<div className="flex flex-wrap items-center justify-end gap-2">
|
||||||
|
<Button type="button" variant="secondary" size="sm" className="h-8" disabled={busy} onClick={onDismiss}>
|
||||||
|
Abbrechen
|
||||||
|
</Button>
|
||||||
|
<Button type="button" size="sm" className="h-8" disabled={busy} onClick={onSave}>
|
||||||
|
Speichern
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
type Props = {
|
||||||
|
tagKey: string;
|
||||||
|
label: string;
|
||||||
|
hex: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TagPill({ tagKey, label, hex }: Props) {
|
||||||
|
const has = Boolean(hex && /^#[0-9A-Fa-f]{6}$/i.test(hex));
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
has
|
||||||
|
? "inline-flex max-w-full items-center rounded-full border-2 px-1.5 py-px text-[11px] font-medium leading-tight"
|
||||||
|
: "inline-flex max-w-full items-center rounded-full border-2 border-border bg-muted/40 px-1.5 py-px text-[11px] leading-tight text-muted-foreground"
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
has
|
||||||
|
? {
|
||||||
|
borderColor: hex!,
|
||||||
|
backgroundColor: `${hex}33`,
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
title={tagKey === label ? tagKey : `${label} (${tagKey})`}
|
||||||
|
>
|
||||||
|
<span className="truncate">{label}</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { TagSuggestionItem } from "@/features/snippets/hooks/useTagSuggestions";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
open: boolean;
|
||||||
|
items: TagSuggestionItem[];
|
||||||
|
activeIndex: number;
|
||||||
|
onPick: (name: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TagSuggestDropdown({ open, items, activeIndex, onPick }: Props) {
|
||||||
|
if (!open) return null;
|
||||||
|
return (
|
||||||
|
<ul role="listbox" className="tag-suggest-dropdown">
|
||||||
|
{items.map((item, i) => (
|
||||||
|
<li key={`${item.name}-${i}`} role="option" aria-selected={i === activeIndex}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={cn("tag-suggest-option", i === activeIndex && "tag-suggest-option-active")}
|
||||||
|
onMouseDown={e => e.preventDefault()}
|
||||||
|
onClick={() => onPick(item.name)}
|
||||||
|
>
|
||||||
|
<span className="text-xs">{item.display}</span>
|
||||||
|
{item.display !== item.name ? (
|
||||||
|
<span className="font-mono text-[10px] text-muted-foreground">{item.name}</span>
|
||||||
|
) : null}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { splitTagsField } from "@/features/snippets/lib/tagFieldUtils";
|
||||||
|
|
||||||
|
export type TagSuggestionItem = { name: string; display: string };
|
||||||
|
|
||||||
|
export function useTagSuggestions(dialogOpen: boolean, tagFieldFocused: boolean, tagsStr: string) {
|
||||||
|
const [items, setItems] = useState<TagSuggestionItem[]>([]);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [activeIndex, setActiveIndex] = useState(0);
|
||||||
|
const reqId = useRef(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!dialogOpen || !tagFieldFocused) {
|
||||||
|
setOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { token } = splitTagsField(tagsStr);
|
||||||
|
const id = ++reqId.current;
|
||||||
|
const t = window.setTimeout(() => {
|
||||||
|
void (async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/tag-suggestions?q=${encodeURIComponent(token)}`);
|
||||||
|
if (reqId.current !== id) return;
|
||||||
|
if (!res.ok) return;
|
||||||
|
const data = (await res.json()) as { items?: TagSuggestionItem[] };
|
||||||
|
const next = Array.isArray(data.items) ? data.items : [];
|
||||||
|
setItems(next);
|
||||||
|
setOpen(next.length > 0);
|
||||||
|
setActiveIndex(0);
|
||||||
|
} catch {
|
||||||
|
if (reqId.current !== id) return;
|
||||||
|
setItems([]);
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, 160);
|
||||||
|
return () => window.clearTimeout(t);
|
||||||
|
}, [dialogOpen, tagFieldFocused, tagsStr]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!dialogOpen) {
|
||||||
|
setItems([]);
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
}, [dialogOpen]);
|
||||||
|
|
||||||
|
return { items, open, setOpen, activeIndex, setActiveIndex };
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export function formatWhen(iso: string): string {
|
||||||
|
try {
|
||||||
|
return new Date(iso).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" });
|
||||||
|
} catch {
|
||||||
|
return iso;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { marked } from "marked";
|
||||||
|
|
||||||
|
marked.setOptions({ gfm: true });
|
||||||
|
|
||||||
|
export function parseSnippetMarkdown(md: string): string {
|
||||||
|
return marked.parse(md) as string;
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
export function tagsFromString(s: string): string[] {
|
||||||
|
return s
|
||||||
|
.split(",")
|
||||||
|
.map(t => t.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Letztes Segment nach dem letzten Komma (laufender Tag-Token). */
|
||||||
|
export function splitTagsField(s: string): { committed: string; token: string } {
|
||||||
|
const lastComma = s.lastIndexOf(",");
|
||||||
|
if (lastComma === -1) {
|
||||||
|
return { committed: "", token: s.trimStart() };
|
||||||
|
}
|
||||||
|
return { committed: s.slice(0, lastComma + 1), token: s.slice(lastComma + 1).trimStart() };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function colorForTagName(
|
||||||
|
name: string,
|
||||||
|
treeColorByName: Record<string, string | null>,
|
||||||
|
snippetColors: Record<string, string | null>,
|
||||||
|
): string | null {
|
||||||
|
return treeColorByName[name] ?? snippetColors[name] ?? null;
|
||||||
|
}
|
||||||
@@ -0,0 +1,202 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useState, type MouseEvent } from "react";
|
||||||
|
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { TagTreeNode } from "@/types/tagTree";
|
||||||
|
import { orderedWithDepth } from "@/features/tag-tree/orderTagTree";
|
||||||
|
import { TagTreeDialogFooter } from "@/features/tag-tree/TagTreeDialogFooter";
|
||||||
|
import { TagTreeDialogHeader } from "@/features/tag-tree/TagTreeDialogHeader";
|
||||||
|
import { TagTreeHierarchyPanel } from "@/features/tag-tree/TagTreeHierarchyPanel";
|
||||||
|
import { TagTreeNodeForm } from "@/features/tag-tree/TagTreeNodeForm";
|
||||||
|
import { useTagTreeParentOptions } from "@/features/tag-tree/useTagTreeParentOptions";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
onChanged?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TagTreeDialog({ open, onOpenChange, onChanged }: Props) {
|
||||||
|
const [nodes, setNodes] = useState<TagTreeNode[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [formOpen, setFormOpen] = useState(false);
|
||||||
|
const [editingId, setEditingId] = useState<number | null>(null);
|
||||||
|
const [name, setName] = useState("");
|
||||||
|
const [parentIdStr, setParentIdStr] = useState<string>("__root__");
|
||||||
|
const [color, setColor] = useState("");
|
||||||
|
const [labelPrefix, setLabelPrefix] = useState("");
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
|
||||||
|
const load = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/tag-tree");
|
||||||
|
if (!res.ok) throw new Error(await res.text());
|
||||||
|
setNodes((await res.json()) as TagTreeNode[]);
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : "Laden fehlgeschlagen");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) return;
|
||||||
|
void load();
|
||||||
|
}, [open, load]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) {
|
||||||
|
setFormOpen(false);
|
||||||
|
setEditingId(null);
|
||||||
|
setName("");
|
||||||
|
setParentIdStr("__root__");
|
||||||
|
setColor("");
|
||||||
|
setLabelPrefix("");
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const flatOrdered = useMemo(() => orderedWithDepth(nodes), [nodes]);
|
||||||
|
const parentOptions = useTagTreeParentOptions(nodes, editingId);
|
||||||
|
|
||||||
|
const resetFormFields = () => {
|
||||||
|
setEditingId(null);
|
||||||
|
setName("");
|
||||||
|
setParentIdStr("__root__");
|
||||||
|
setColor("");
|
||||||
|
setLabelPrefix("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const exitFormMode = () => {
|
||||||
|
setFormOpen(false);
|
||||||
|
resetFormFields();
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const startEdit = (n: TagTreeNode) => {
|
||||||
|
setFormOpen(true);
|
||||||
|
setEditingId(n.id);
|
||||||
|
setName(n.name);
|
||||||
|
setParentIdStr(n.parent_id == null ? "__root__" : String(n.parent_id));
|
||||||
|
setColor(n.color ?? "");
|
||||||
|
setLabelPrefix(n.label_prefix ?? "");
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const startNewUnder = (parentId: number | null) => {
|
||||||
|
setFormOpen(true);
|
||||||
|
resetFormFields();
|
||||||
|
setParentIdStr(parentId == null ? "__root__" : String(parentId));
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
setBusy(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const parent_id = parentIdStr === "__root__" ? null : Number(parentIdStr);
|
||||||
|
const colorNorm = color.trim() === "" ? null : color.trim();
|
||||||
|
const labelPrefixNorm = labelPrefix.trim() === "" ? null : labelPrefix.trim();
|
||||||
|
if (editingId == null) {
|
||||||
|
const res = await fetch("/api/tag-tree", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ name, parent_id, color: colorNorm, label_prefix: labelPrefixNorm }),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
||||||
|
throw new Error(err?.error ?? res.statusText);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const res = await fetch(`/api/tag-tree/${editingId}`, {
|
||||||
|
method: "PATCH",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({ name, parent_id, color: colorNorm, label_prefix: labelPrefixNorm }),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
||||||
|
throw new Error(err?.error ?? res.statusText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await load();
|
||||||
|
exitFormMode();
|
||||||
|
onChanged?.();
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen");
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const remove = async (id: number, e?: MouseEvent) => {
|
||||||
|
e?.stopPropagation();
|
||||||
|
if (!window.confirm("Diesen Knoten und alle Unterknoten wirklich löschen?")) return;
|
||||||
|
setBusy(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/tag-tree/${id}`, { method: "DELETE" });
|
||||||
|
if (!res.ok && res.status !== 204) {
|
||||||
|
const err = (await res.json().catch(() => null)) as { error?: string } | null;
|
||||||
|
throw new Error(err?.error ?? res.statusText);
|
||||||
|
}
|
||||||
|
if (editingId === id) exitFormMode();
|
||||||
|
await load();
|
||||||
|
onChanged?.();
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : "Löschen fehlgeschlagen");
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent variant="fullscreen">
|
||||||
|
<TagTreeDialogHeader />
|
||||||
|
|
||||||
|
<div className={cn("tag-tree-main", !formOpen && "lg:flex-1")}>
|
||||||
|
<TagTreeHierarchyPanel
|
||||||
|
formOpen={formOpen}
|
||||||
|
loading={loading}
|
||||||
|
busy={busy}
|
||||||
|
error={error}
|
||||||
|
nodes={nodes}
|
||||||
|
flatOrdered={flatOrdered}
|
||||||
|
editingId={editingId}
|
||||||
|
onNewRoot={() => startNewUnder(null)}
|
||||||
|
onEdit={startEdit}
|
||||||
|
onAddChild={parentId => startNewUnder(parentId)}
|
||||||
|
onDelete={(id, ev) => void remove(id, ev)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{formOpen ? (
|
||||||
|
<TagTreeNodeForm
|
||||||
|
editingId={editingId}
|
||||||
|
name={name}
|
||||||
|
onNameChange={setName}
|
||||||
|
labelPrefix={labelPrefix}
|
||||||
|
onLabelPrefixChange={setLabelPrefix}
|
||||||
|
parentIdStr={parentIdStr}
|
||||||
|
onParentIdStrChange={setParentIdStr}
|
||||||
|
color={color}
|
||||||
|
onColorChange={setColor}
|
||||||
|
parentOptions={parentOptions}
|
||||||
|
error={error}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TagTreeDialogFooter
|
||||||
|
formOpen={formOpen}
|
||||||
|
busy={busy}
|
||||||
|
canSave={Boolean(name.trim())}
|
||||||
|
onExitForm={exitFormMode}
|
||||||
|
onSave={() => void save()}
|
||||||
|
onCloseDialog={() => onOpenChange(false)}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { DialogFooter } from "@/components/ui/dialog";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
formOpen: boolean;
|
||||||
|
busy: boolean;
|
||||||
|
canSave: boolean;
|
||||||
|
onExitForm: () => void;
|
||||||
|
onSave: () => void;
|
||||||
|
onCloseDialog: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TagTreeDialogFooter({ formOpen, busy, canSave, onExitForm, onSave, onCloseDialog }: Props) {
|
||||||
|
return (
|
||||||
|
<DialogFooter className="tag-tree-dialog-footer">
|
||||||
|
{formOpen ? (
|
||||||
|
<>
|
||||||
|
<Button type="button" variant="outline" className="h-9" disabled={busy} onClick={onExitForm}>
|
||||||
|
Schließen
|
||||||
|
</Button>
|
||||||
|
<Button type="button" className="h-9" disabled={busy || !canSave} onClick={onSave}>
|
||||||
|
Speichern
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Button type="button" variant="outline" className="h-9" disabled={busy} onClick={onCloseDialog}>
|
||||||
|
Schließen
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</DialogFooter>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { FolderTree } from "lucide-react";
|
||||||
|
import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
|
||||||
|
export function TagTreeDialogHeader() {
|
||||||
|
return (
|
||||||
|
<DialogHeader className="tag-tree-dialog-header">
|
||||||
|
<div className="tag-tree-dialog-hero">
|
||||||
|
<div className="tag-tree-dialog-icon">
|
||||||
|
<FolderTree className="size-4 text-muted-foreground" aria-hidden />
|
||||||
|
</div>
|
||||||
|
<div className="tag-tree-dialog-hero-text">
|
||||||
|
<DialogTitle className="text-lg">Tag-Baum</DialogTitle>
|
||||||
|
<DialogDescription className="text-pretty text-xs leading-relaxed sm:text-sm">
|
||||||
|
Strukturierte Tags für Suche und Farben.{" "}
|
||||||
|
<span className="text-foreground/90">Kurzname</span> in Snippets; optionaler Prefix nur für die Anzeige.
|
||||||
|
</DialogDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogHeader>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
import { Loader2, Plus } from "lucide-react";
|
||||||
|
import type { MouseEvent } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { TagTreeNode } from "@/types/tagTree";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { TagTreeNodeRow } from "@/features/tag-tree/TagTreeNodeRow";
|
||||||
|
|
||||||
|
type FlatRow = { node: TagTreeNode; depth: number };
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
formOpen: boolean;
|
||||||
|
loading: boolean;
|
||||||
|
busy: boolean;
|
||||||
|
error: string | null;
|
||||||
|
nodes: TagTreeNode[];
|
||||||
|
flatOrdered: FlatRow[];
|
||||||
|
editingId: number | null;
|
||||||
|
onNewRoot: () => void;
|
||||||
|
onEdit: (n: TagTreeNode) => void;
|
||||||
|
onAddChild: (parentId: number) => void;
|
||||||
|
onDelete: (id: number, e?: MouseEvent) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TagTreeHierarchyPanel({
|
||||||
|
formOpen,
|
||||||
|
loading,
|
||||||
|
busy,
|
||||||
|
error,
|
||||||
|
nodes,
|
||||||
|
flatOrdered,
|
||||||
|
editingId,
|
||||||
|
onNewRoot,
|
||||||
|
onEdit,
|
||||||
|
onAddChild,
|
||||||
|
onDelete,
|
||||||
|
}: Props) {
|
||||||
|
return (
|
||||||
|
<div className={cn("tag-tree-hierarchy", formOpen ? "tag-tree-hierarchy--with-form" : "tag-tree-hierarchy--solo")}>
|
||||||
|
{!formOpen && error ? <div className="tag-tree-inline-error">{error}</div> : null}
|
||||||
|
<div className="tag-tree-toolbar">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Hierarchie</span>
|
||||||
|
{!loading ? <span className="tag-tree-count-chip">{nodes.length}</span> : null}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 gap-1.5 px-2.5 text-xs"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={onNewRoot}
|
||||||
|
>
|
||||||
|
<Plus className="size-3.5" aria-hidden />
|
||||||
|
Neuer Knoten
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="tag-tree-scroll">
|
||||||
|
{loading ? (
|
||||||
|
<div className="tag-tree-loading">
|
||||||
|
<Loader2 className="size-7 animate-spin opacity-70" aria-hidden />
|
||||||
|
<span className="text-sm">Lade Tag-Baum …</span>
|
||||||
|
</div>
|
||||||
|
) : flatOrdered.length === 0 ? (
|
||||||
|
<div className="tag-tree-empty">
|
||||||
|
<p className="max-w-xs text-sm text-muted-foreground">
|
||||||
|
Noch keine Knoten. Lege den ersten an — er erscheint in der Vorschau und in der Tag-Suche.
|
||||||
|
</p>
|
||||||
|
<Button type="button" size="sm" className="gap-1.5" onClick={onNewRoot}>
|
||||||
|
<Plus className="size-3.5" aria-hidden />
|
||||||
|
Ersten Knoten anlegen
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<ul className="tag-tree-node-list" role="list">
|
||||||
|
{flatOrdered.map(({ node: n, depth }) => (
|
||||||
|
<TagTreeNodeRow
|
||||||
|
key={n.id}
|
||||||
|
node={n}
|
||||||
|
depth={depth}
|
||||||
|
isActive={formOpen && editingId === n.id}
|
||||||
|
busy={busy}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onAddChild={onAddChild}
|
||||||
|
onDelete={onDelete}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
import { formatTreeTagDisplay } from "@/lib/treeTagDisplay";
|
||||||
|
import type { TagTreeNode } from "@/types/tagTree";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
editingId: number | null;
|
||||||
|
name: string;
|
||||||
|
onNameChange: (v: string) => void;
|
||||||
|
labelPrefix: string;
|
||||||
|
onLabelPrefixChange: (v: string) => void;
|
||||||
|
parentIdStr: string;
|
||||||
|
onParentIdStrChange: (v: string) => void;
|
||||||
|
color: string;
|
||||||
|
onColorChange: (v: string) => void;
|
||||||
|
parentOptions: TagTreeNode[];
|
||||||
|
error: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TagTreeNodeForm({
|
||||||
|
editingId,
|
||||||
|
name,
|
||||||
|
onNameChange,
|
||||||
|
labelPrefix,
|
||||||
|
onLabelPrefixChange,
|
||||||
|
parentIdStr,
|
||||||
|
onParentIdStrChange,
|
||||||
|
color,
|
||||||
|
onColorChange,
|
||||||
|
parentOptions,
|
||||||
|
error,
|
||||||
|
}: Props) {
|
||||||
|
const previewLabel = name.trim() ? formatTreeTagDisplay(name.trim(), labelPrefix) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex w-full min-w-0 flex-1 flex-col overflow-y-auto bg-background lg:max-w-md">
|
||||||
|
<div className="border-b px-4 py-2.5 sm:px-5">
|
||||||
|
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||||
|
{editingId == null ? "Knoten anlegen" : "Knoten bearbeiten"}
|
||||||
|
</p>
|
||||||
|
{editingId != null ? <p className="mt-0.5 font-mono text-[11px] text-muted-foreground">ID {editingId}</p> : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-1 flex-col gap-5 px-4 py-4 sm:px-5">
|
||||||
|
{error ? (
|
||||||
|
<p className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="tt-name" className="text-xs text-muted-foreground">
|
||||||
|
Kurzname (Snippet, Suche, Intellisense)
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="tt-name"
|
||||||
|
value={name}
|
||||||
|
onChange={e => onNameChange(e.target.value)}
|
||||||
|
className="font-mono text-sm"
|
||||||
|
autoComplete="off"
|
||||||
|
placeholder="sp-migrator"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="tt-prefix" className="text-xs text-muted-foreground">
|
||||||
|
Anzeige-Prefix (optional)
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="tt-prefix"
|
||||||
|
value={labelPrefix}
|
||||||
|
onChange={e => onLabelPrefixChange(e.target.value)}
|
||||||
|
placeholder="Projekt:"
|
||||||
|
className="font-mono text-sm"
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
<div className="rounded-md border bg-muted/30 px-3 py-2 text-xs">
|
||||||
|
<span className="text-muted-foreground">Vorschau </span>
|
||||||
|
<span className="font-medium text-foreground">{previewLabel ?? "—"}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label className="text-xs text-muted-foreground">Übergeordnet</Label>
|
||||||
|
<Select value={parentIdStr} onValueChange={onParentIdStrChange}>
|
||||||
|
<SelectTrigger className="h-9 w-full font-mono text-xs">
|
||||||
|
<SelectValue placeholder="Wurzel" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="__root__">(Wurzel — kein Parent)</SelectItem>
|
||||||
|
{parentOptions.map(n => (
|
||||||
|
<SelectItem key={n.id} value={String(n.id)}>
|
||||||
|
{formatTreeTagDisplay(n.name, n.label_prefix)}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="tt-color" className="text-xs text-muted-foreground">
|
||||||
|
Farbe (optional, #rrggbb)
|
||||||
|
</Label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
id="tt-color"
|
||||||
|
value={color}
|
||||||
|
onChange={e => onColorChange(e.target.value)}
|
||||||
|
placeholder="#3b82f6"
|
||||||
|
className="min-w-0 flex-1 font-mono text-sm"
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="color"
|
||||||
|
className="h-9 w-11 shrink-0 cursor-pointer rounded-md border p-1"
|
||||||
|
value={/^#[0-9A-Fa-f]{6}$/.test(color) ? color : "#64748b"}
|
||||||
|
onChange={e => onColorChange(e.target.value)}
|
||||||
|
aria-label="Farbe wählen"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,85 @@
|
|||||||
|
import { Pencil, Plus, Trash2 } from "lucide-react";
|
||||||
|
import type { MouseEvent } from "react";
|
||||||
|
import { formatTreeTagDisplay } from "@/lib/treeTagDisplay";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import type { TagTreeNode } from "@/types/tagTree";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
node: TagTreeNode;
|
||||||
|
depth: number;
|
||||||
|
isActive: boolean;
|
||||||
|
busy: boolean;
|
||||||
|
onEdit: (n: TagTreeNode) => void;
|
||||||
|
onAddChild: (parentId: number) => void;
|
||||||
|
onDelete: (id: number, e?: MouseEvent) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TagTreeNodeRow({ node: n, depth, isActive, busy, onEdit, onAddChild, onDelete }: Props) {
|
||||||
|
return (
|
||||||
|
<li role="none">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"group flex items-center gap-0.5 rounded-md border border-transparent py-0.5 transition-colors",
|
||||||
|
isActive ? "border-border bg-background shadow-sm" : "hover:border-border/50 hover:bg-muted/40",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex min-w-0 flex-1 items-center gap-2 py-1 pr-1" style={{ paddingLeft: `${8 + depth * 12}px` }}>
|
||||||
|
<span
|
||||||
|
className="size-1.5 shrink-0 rounded-full ring-1 ring-border"
|
||||||
|
style={{
|
||||||
|
backgroundColor: n.color ?? "hsl(var(--muted-foreground) / 0.3)",
|
||||||
|
}}
|
||||||
|
title={n.color ? `Farbe ${n.color}` : "Keine Farbe"}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="truncate text-xs font-medium leading-snug">{formatTreeTagDisplay(n.name, n.label_prefix)}</div>
|
||||||
|
<div className="truncate font-mono text-[10px] leading-tight text-muted-foreground">{n.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex shrink-0 items-center gap-0 pr-0.5">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className="size-7 text-muted-foreground hover:text-foreground"
|
||||||
|
title="Bearbeiten"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => onEdit(n)}
|
||||||
|
>
|
||||||
|
<Pencil className="size-3.5" aria-hidden />
|
||||||
|
<span className="sr-only">Bearbeiten</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className="size-7 text-muted-foreground hover:text-foreground"
|
||||||
|
title="Unterknoten"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onAddChild(n.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="size-3.5" aria-hidden />
|
||||||
|
<span className="sr-only">Unterknoten anlegen</span>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className="size-7 text-muted-foreground hover:text-destructive"
|
||||||
|
title="Löschen"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={e => void onDelete(n.id, e)}
|
||||||
|
>
|
||||||
|
<Trash2 className="size-3.5" aria-hidden />
|
||||||
|
<span className="sr-only">Löschen</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import type { TagTreeNode } from "@/types/tagTree";
|
||||||
|
|
||||||
|
export function orderedWithDepth(nodes: TagTreeNode[]): { node: TagTreeNode; depth: number }[] {
|
||||||
|
const byParent = new Map<number | null, TagTreeNode[]>();
|
||||||
|
for (const n of nodes) {
|
||||||
|
const p = n.parent_id;
|
||||||
|
const list = byParent.get(p);
|
||||||
|
if (list) list.push(n);
|
||||||
|
else byParent.set(p, [n]);
|
||||||
|
}
|
||||||
|
for (const list of byParent.values()) {
|
||||||
|
list.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
|
||||||
|
}
|
||||||
|
const walk = (parentId: number | null, depth: number): { node: TagTreeNode; depth: number }[] => {
|
||||||
|
const kids = byParent.get(parentId) ?? [];
|
||||||
|
const out: { node: TagTreeNode; depth: number }[] = [];
|
||||||
|
for (const k of kids) {
|
||||||
|
out.push({ node: k, depth });
|
||||||
|
out.push(...walk(k.id, depth + 1));
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
};
|
||||||
|
return walk(null, 0);
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { useMemo } from "react";
|
||||||
|
import type { TagTreeNode } from "@/types/tagTree";
|
||||||
|
|
||||||
|
export function useTagTreeParentOptions(nodes: TagTreeNode[], editingId: number | null): TagTreeNode[] {
|
||||||
|
return useMemo(() => {
|
||||||
|
const blocked = new Set<number>();
|
||||||
|
if (editingId != null) {
|
||||||
|
blocked.add(editingId);
|
||||||
|
const children = new Map<number | null, number[]>();
|
||||||
|
for (const n of nodes) {
|
||||||
|
const p = n.parent_id;
|
||||||
|
const list = children.get(p);
|
||||||
|
if (list) list.push(n.id);
|
||||||
|
else children.set(p, [n.id]);
|
||||||
|
}
|
||||||
|
const stack = [...(children.get(editingId) ?? [])];
|
||||||
|
while (stack.length) {
|
||||||
|
const id = stack.pop()!;
|
||||||
|
blocked.add(id);
|
||||||
|
const kids = children.get(id);
|
||||||
|
if (kids) for (const k of kids) stack.push(k);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return nodes.filter(n => !blocked.has(n.id));
|
||||||
|
}, [nodes, editingId]);
|
||||||
|
}
|
||||||
+106
@@ -186,4 +186,110 @@ body::before {
|
|||||||
margin-block: 0.375rem;
|
margin-block: 0.375rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* App dialogs: shared layout (Tailwind here, short class names in TSX) */
|
||||||
|
.dialog-snippet-header {
|
||||||
|
@apply shrink-0 space-y-1 border-b px-5 pb-3 pt-5 pr-12 text-start sm:px-6 sm:pr-14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-snippet-body {
|
||||||
|
/* no overflow-hidden: would clip focus ring (box-shadow) on inputs */
|
||||||
|
@apply flex min-h-0 flex-1 flex-col gap-2 px-5 py-3 sm:px-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-snippet-footer {
|
||||||
|
@apply shrink-0 flex-row flex-wrap items-center justify-between gap-2 border-t px-5 py-3 sm:px-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-snippet-editor {
|
||||||
|
@apply flex min-h-0 flex-1 flex-col;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-snippet-editor-with-preview {
|
||||||
|
@apply flex min-h-0 flex-1 flex-col gap-3 lg:flex-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-snippet-preview {
|
||||||
|
@apply min-h-0 flex-1 overflow-auto rounded-md border bg-muted/30 p-3 lg:w-1/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-snippet-textarea {
|
||||||
|
@apply min-h-0 w-full flex-1 resize-none font-mono text-sm lg:min-h-0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-suggest-dropdown {
|
||||||
|
@apply absolute z-50 mt-1 max-h-40 w-full overflow-auto rounded-md border bg-popover py-1 text-sm shadow-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-suggest-option {
|
||||||
|
@apply flex w-full cursor-pointer flex-col gap-0.5 px-3 py-1.5 text-left hover:bg-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-suggest-option-active {
|
||||||
|
@apply bg-accent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-count-chip {
|
||||||
|
@apply rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-muted-foreground tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-node-list {
|
||||||
|
@apply space-y-0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-dialog-header {
|
||||||
|
@apply shrink-0 space-y-2 border-b bg-muted/30 px-5 py-4 text-left sm:px-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-dialog-hero {
|
||||||
|
@apply flex items-start gap-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-dialog-icon {
|
||||||
|
@apply mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg border bg-background shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-dialog-hero-text {
|
||||||
|
@apply min-w-0 flex-1 space-y-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-dialog-footer {
|
||||||
|
@apply shrink-0 flex-row flex-wrap items-center justify-start gap-2 border-t bg-muted/20 px-4 py-3 sm:px-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-main {
|
||||||
|
@apply flex min-h-0 flex-1 flex-col lg:flex-row lg:divide-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-hierarchy {
|
||||||
|
@apply flex min-h-[min(200px,38vh)] flex-col border-b bg-muted/10 lg:min-h-0 lg:border-b-0 lg:bg-muted/5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-hierarchy--with-form {
|
||||||
|
@apply lg:max-w-[min(100%,420px)];
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-hierarchy--solo {
|
||||||
|
@apply lg:flex-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-inline-error {
|
||||||
|
@apply border-b border-destructive/30 bg-destructive/10 px-4 py-2 text-sm text-destructive sm:px-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-toolbar {
|
||||||
|
@apply flex shrink-0 items-center justify-between gap-2 border-b px-4 py-2.5 sm:px-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-scroll {
|
||||||
|
@apply min-h-0 flex-1 overflow-y-auto px-2 py-2 sm:px-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-empty {
|
||||||
|
@apply flex flex-col items-center justify-center gap-3 px-4 py-10 text-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-tree-loading {
|
||||||
|
@apply flex flex-col items-center justify-center gap-2 py-12 text-muted-foreground;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+4
-206
@@ -1,217 +1,15 @@
|
|||||||
import { serve } from "bun";
|
import { serve } from "bun";
|
||||||
import index from "./index.html";
|
import index from "./index.html";
|
||||||
import { getDb } from "./server/db";
|
import { getDb } from "./server/db";
|
||||||
import { createSnippet, deleteSnippet, getSnippetById, listSnippets, updateSnippet } from "./server/snippets";
|
import { snippetRoutes } from "./server/routes/snippetsHandlers";
|
||||||
import {
|
import { tagTreeRoutes } from "./server/routes/tagTreeHandlers";
|
||||||
createTagTreeNode,
|
|
||||||
deleteTagTreeNode,
|
|
||||||
listTagTreeNodes,
|
|
||||||
suggestTagTreeItems,
|
|
||||||
updateTagTreeNode,
|
|
||||||
} from "./server/tagTree";
|
|
||||||
|
|
||||||
getDb();
|
getDb();
|
||||||
|
|
||||||
async function readJson(req: Request): Promise<unknown> {
|
|
||||||
try {
|
|
||||||
return await req.json();
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const server = serve({
|
const server = serve({
|
||||||
routes: {
|
routes: {
|
||||||
"/api/snippets": {
|
...snippetRoutes,
|
||||||
async GET(req) {
|
...tagTreeRoutes,
|
||||||
const url = new URL(req.url);
|
|
||||||
const q = url.searchParams.get("q");
|
|
||||||
const sort = url.searchParams.get("sort");
|
|
||||||
return Response.json(listSnippets(q, sort));
|
|
||||||
},
|
|
||||||
async POST(req) {
|
|
||||||
const body = await readJson(req);
|
|
||||||
if (!body || typeof body !== "object") {
|
|
||||||
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const o = body as Record<string, unknown>;
|
|
||||||
const tags = Array.isArray(o.tags)
|
|
||||||
? o.tags.filter((t): t is string => typeof t === "string")
|
|
||||||
: [];
|
|
||||||
const snippet = createSnippet({
|
|
||||||
title:
|
|
||||||
o.title === null
|
|
||||||
? null
|
|
||||||
: typeof o.title === "string"
|
|
||||||
? o.title
|
|
||||||
: undefined,
|
|
||||||
body: typeof o.body === "string" ? o.body : "",
|
|
||||||
tags,
|
|
||||||
});
|
|
||||||
return Response.json(snippet, { status: 201 });
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"/api/tag-suggestions": {
|
|
||||||
async GET(req) {
|
|
||||||
const url = new URL(req.url);
|
|
||||||
const q = url.searchParams.get("q") ?? "";
|
|
||||||
const database = getDb();
|
|
||||||
return Response.json({ items: suggestTagTreeItems(database, q) });
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"/api/tag-tree": {
|
|
||||||
async GET() {
|
|
||||||
return Response.json(listTagTreeNodes());
|
|
||||||
},
|
|
||||||
async POST(req) {
|
|
||||||
const body = await readJson(req);
|
|
||||||
if (!body || typeof body !== "object") {
|
|
||||||
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const o = body as Record<string, unknown>;
|
|
||||||
try {
|
|
||||||
const node = createTagTreeNode({
|
|
||||||
name: typeof o.name === "string" ? o.name : "",
|
|
||||||
parent_id:
|
|
||||||
o.parent_id === null || o.parent_id === undefined
|
|
||||||
? null
|
|
||||||
: typeof o.parent_id === "number"
|
|
||||||
? o.parent_id
|
|
||||||
: Number(o.parent_id),
|
|
||||||
color: o.color === null || o.color === undefined ? null : String(o.color),
|
|
||||||
label_prefix:
|
|
||||||
o.label_prefix === null || o.label_prefix === undefined
|
|
||||||
? null
|
|
||||||
: typeof o.label_prefix === "string"
|
|
||||||
? o.label_prefix
|
|
||||||
: String(o.label_prefix),
|
|
||||||
});
|
|
||||||
return Response.json(node, { status: 201 });
|
|
||||||
} catch (e) {
|
|
||||||
const msg = e instanceof Error ? e.message : "Fehler";
|
|
||||||
return Response.json({ error: msg }, { status: 400 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"/api/tag-tree/:id": {
|
|
||||||
async PATCH(req) {
|
|
||||||
const id = Number(req.params.id);
|
|
||||||
if (!Number.isFinite(id)) {
|
|
||||||
return Response.json({ error: "Invalid id" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const body = await readJson(req);
|
|
||||||
if (!body || typeof body !== "object") {
|
|
||||||
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const o = body as Record<string, unknown>;
|
|
||||||
const patch: {
|
|
||||||
name?: string;
|
|
||||||
parent_id?: number | null;
|
|
||||||
color?: string | null;
|
|
||||||
label_prefix?: string | null;
|
|
||||||
} = {};
|
|
||||||
if ("name" in o && typeof o.name === "string") patch.name = o.name;
|
|
||||||
if ("parent_id" in o) {
|
|
||||||
patch.parent_id =
|
|
||||||
o.parent_id === null ? null : typeof o.parent_id === "number" ? o.parent_id : Number(o.parent_id);
|
|
||||||
}
|
|
||||||
if ("color" in o) {
|
|
||||||
patch.color = o.color === null || o.color === undefined ? null : String(o.color);
|
|
||||||
}
|
|
||||||
if ("label_prefix" in o) {
|
|
||||||
patch.label_prefix =
|
|
||||||
o.label_prefix === null || o.label_prefix === undefined
|
|
||||||
? null
|
|
||||||
: typeof o.label_prefix === "string"
|
|
||||||
? o.label_prefix
|
|
||||||
: String(o.label_prefix);
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const node = updateTagTreeNode(id, patch);
|
|
||||||
if (!node) {
|
|
||||||
return Response.json({ error: "Not found" }, { status: 404 });
|
|
||||||
}
|
|
||||||
return Response.json(node);
|
|
||||||
} catch (e) {
|
|
||||||
const msg = e instanceof Error ? e.message : "Fehler";
|
|
||||||
return Response.json({ error: msg }, { status: 400 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async DELETE(req) {
|
|
||||||
const id = Number(req.params.id);
|
|
||||||
if (!Number.isFinite(id)) {
|
|
||||||
return Response.json({ error: "Invalid id" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const ok = deleteTagTreeNode(id);
|
|
||||||
if (!ok) {
|
|
||||||
return Response.json({ error: "Not found" }, { status: 404 });
|
|
||||||
}
|
|
||||||
return new Response(null, { status: 204 });
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"/api/snippets/:id": {
|
|
||||||
async GET(req) {
|
|
||||||
const id = Number(req.params.id);
|
|
||||||
if (!Number.isFinite(id)) {
|
|
||||||
return Response.json({ error: "Invalid id" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const snippet = getSnippetById(id);
|
|
||||||
if (!snippet) {
|
|
||||||
return Response.json({ error: "Not found" }, { status: 404 });
|
|
||||||
}
|
|
||||||
return Response.json(snippet);
|
|
||||||
},
|
|
||||||
async PATCH(req) {
|
|
||||||
const id = Number(req.params.id);
|
|
||||||
if (!Number.isFinite(id)) {
|
|
||||||
return Response.json({ error: "Invalid id" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const body = await readJson(req);
|
|
||||||
if (!body || typeof body !== "object") {
|
|
||||||
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const o = body as Record<string, unknown>;
|
|
||||||
const patch: {
|
|
||||||
title?: string | null;
|
|
||||||
body?: string;
|
|
||||||
tags?: string[];
|
|
||||||
sort_order?: number;
|
|
||||||
} = {};
|
|
||||||
if ("title" in o) {
|
|
||||||
patch.title = o.title === null ? null : String(o.title);
|
|
||||||
}
|
|
||||||
if ("body" in o && typeof o.body === "string") {
|
|
||||||
patch.body = o.body;
|
|
||||||
}
|
|
||||||
if ("tags" in o && Array.isArray(o.tags)) {
|
|
||||||
patch.tags = o.tags.filter((t): t is string => typeof t === "string");
|
|
||||||
}
|
|
||||||
if ("sort_order" in o && typeof o.sort_order === "number" && Number.isFinite(o.sort_order)) {
|
|
||||||
patch.sort_order = o.sort_order;
|
|
||||||
}
|
|
||||||
const snippet = updateSnippet(id, patch);
|
|
||||||
if (!snippet) {
|
|
||||||
return Response.json({ error: "Not found" }, { status: 404 });
|
|
||||||
}
|
|
||||||
return Response.json(snippet);
|
|
||||||
},
|
|
||||||
async DELETE(req) {
|
|
||||||
const id = Number(req.params.id);
|
|
||||||
if (!Number.isFinite(id)) {
|
|
||||||
return Response.json({ error: "Invalid id" }, { status: 400 });
|
|
||||||
}
|
|
||||||
const ok = deleteSnippet(id);
|
|
||||||
if (!ok) {
|
|
||||||
return Response.json({ error: "Not found" }, { status: 404 });
|
|
||||||
}
|
|
||||||
return new Response(null, { status: 204 });
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
"/*": index,
|
"/*": index,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export async function readJson(req: Request): Promise<unknown> {
|
||||||
|
try {
|
||||||
|
return await req.json();
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
import { readJson } from "@/server/http/readJson";
|
||||||
|
import { createSnippet, deleteSnippet, getSnippetById, listSnippets, updateSnippet } from "@/server/snippets";
|
||||||
|
|
||||||
|
export const snippetRoutes = {
|
||||||
|
"/api/snippets": {
|
||||||
|
async GET(req: Request) {
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const q = url.searchParams.get("q");
|
||||||
|
const sort = url.searchParams.get("sort");
|
||||||
|
return Response.json(listSnippets(q, sort));
|
||||||
|
},
|
||||||
|
async POST(req: Request) {
|
||||||
|
const body = await readJson(req);
|
||||||
|
if (!body || typeof body !== "object") {
|
||||||
|
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const o = body as Record<string, unknown>;
|
||||||
|
const tags = Array.isArray(o.tags) ? o.tags.filter((t): t is string => typeof t === "string") : [];
|
||||||
|
const snippet = createSnippet({
|
||||||
|
title:
|
||||||
|
o.title === null ? null : typeof o.title === "string" ? o.title : undefined,
|
||||||
|
body: typeof o.body === "string" ? o.body : "",
|
||||||
|
tags,
|
||||||
|
});
|
||||||
|
return Response.json(snippet, { status: 201 });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"/api/snippets/:id": {
|
||||||
|
async GET(req: Request) {
|
||||||
|
const id = Number((req as Request & { params: { id: string } }).params.id);
|
||||||
|
if (!Number.isFinite(id)) {
|
||||||
|
return Response.json({ error: "Invalid id" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const snippet = getSnippetById(id);
|
||||||
|
if (!snippet) {
|
||||||
|
return Response.json({ error: "Not found" }, { status: 404 });
|
||||||
|
}
|
||||||
|
return Response.json(snippet);
|
||||||
|
},
|
||||||
|
async PATCH(req: Request) {
|
||||||
|
const id = Number((req as Request & { params: { id: string } }).params.id);
|
||||||
|
if (!Number.isFinite(id)) {
|
||||||
|
return Response.json({ error: "Invalid id" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const body = await readJson(req);
|
||||||
|
if (!body || typeof body !== "object") {
|
||||||
|
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const o = body as Record<string, unknown>;
|
||||||
|
const patch: {
|
||||||
|
title?: string | null;
|
||||||
|
body?: string;
|
||||||
|
tags?: string[];
|
||||||
|
sort_order?: number;
|
||||||
|
} = {};
|
||||||
|
if ("title" in o) {
|
||||||
|
patch.title = o.title === null ? null : String(o.title);
|
||||||
|
}
|
||||||
|
if ("body" in o && typeof o.body === "string") {
|
||||||
|
patch.body = o.body;
|
||||||
|
}
|
||||||
|
if ("tags" in o && Array.isArray(o.tags)) {
|
||||||
|
patch.tags = o.tags.filter((t): t is string => typeof t === "string");
|
||||||
|
}
|
||||||
|
if ("sort_order" in o && typeof o.sort_order === "number" && Number.isFinite(o.sort_order)) {
|
||||||
|
patch.sort_order = o.sort_order;
|
||||||
|
}
|
||||||
|
const snippet = updateSnippet(id, patch);
|
||||||
|
if (!snippet) {
|
||||||
|
return Response.json({ error: "Not found" }, { status: 404 });
|
||||||
|
}
|
||||||
|
return Response.json(snippet);
|
||||||
|
},
|
||||||
|
async DELETE(req: Request) {
|
||||||
|
const id = Number((req as Request & { params: { id: string } }).params.id);
|
||||||
|
if (!Number.isFinite(id)) {
|
||||||
|
return Response.json({ error: "Invalid id" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const ok = deleteSnippet(id);
|
||||||
|
if (!ok) {
|
||||||
|
return Response.json({ error: "Not found" }, { status: 404 });
|
||||||
|
}
|
||||||
|
return new Response(null, { status: 204 });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
import { getDb } from "@/server/db";
|
||||||
|
import { readJson } from "@/server/http/readJson";
|
||||||
|
import {
|
||||||
|
createTagTreeNode,
|
||||||
|
deleteTagTreeNode,
|
||||||
|
listTagTreeNodes,
|
||||||
|
suggestTagTreeItems,
|
||||||
|
updateTagTreeNode,
|
||||||
|
} from "@/server/tagTree";
|
||||||
|
|
||||||
|
export const tagTreeRoutes = {
|
||||||
|
"/api/tag-suggestions": {
|
||||||
|
async GET(req: Request) {
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const q = url.searchParams.get("q") ?? "";
|
||||||
|
const database = getDb();
|
||||||
|
return Response.json({ items: suggestTagTreeItems(database, q) });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"/api/tag-tree": {
|
||||||
|
async GET() {
|
||||||
|
return Response.json(listTagTreeNodes());
|
||||||
|
},
|
||||||
|
async POST(req: Request) {
|
||||||
|
const body = await readJson(req);
|
||||||
|
if (!body || typeof body !== "object") {
|
||||||
|
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const o = body as Record<string, unknown>;
|
||||||
|
try {
|
||||||
|
const node = createTagTreeNode({
|
||||||
|
name: typeof o.name === "string" ? o.name : "",
|
||||||
|
parent_id:
|
||||||
|
o.parent_id === null || o.parent_id === undefined
|
||||||
|
? null
|
||||||
|
: typeof o.parent_id === "number"
|
||||||
|
? o.parent_id
|
||||||
|
: Number(o.parent_id),
|
||||||
|
color: o.color === null || o.color === undefined ? null : String(o.color),
|
||||||
|
label_prefix:
|
||||||
|
o.label_prefix === null || o.label_prefix === undefined
|
||||||
|
? null
|
||||||
|
: typeof o.label_prefix === "string"
|
||||||
|
? o.label_prefix
|
||||||
|
: String(o.label_prefix),
|
||||||
|
});
|
||||||
|
return Response.json(node, { status: 201 });
|
||||||
|
} catch (e) {
|
||||||
|
const msg = e instanceof Error ? e.message : "Fehler";
|
||||||
|
return Response.json({ error: msg }, { status: 400 });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
"/api/tag-tree/:id": {
|
||||||
|
async PATCH(req: Request) {
|
||||||
|
const id = Number((req as Request & { params: { id: string } }).params.id);
|
||||||
|
if (!Number.isFinite(id)) {
|
||||||
|
return Response.json({ error: "Invalid id" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const body = await readJson(req);
|
||||||
|
if (!body || typeof body !== "object") {
|
||||||
|
return Response.json({ error: "Invalid JSON body" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const o = body as Record<string, unknown>;
|
||||||
|
const patch: {
|
||||||
|
name?: string;
|
||||||
|
parent_id?: number | null;
|
||||||
|
color?: string | null;
|
||||||
|
label_prefix?: string | null;
|
||||||
|
} = {};
|
||||||
|
if ("name" in o && typeof o.name === "string") patch.name = o.name;
|
||||||
|
if ("parent_id" in o) {
|
||||||
|
patch.parent_id =
|
||||||
|
o.parent_id === null ? null : typeof o.parent_id === "number" ? o.parent_id : Number(o.parent_id);
|
||||||
|
}
|
||||||
|
if ("color" in o) {
|
||||||
|
patch.color = o.color === null || o.color === undefined ? null : String(o.color);
|
||||||
|
}
|
||||||
|
if ("label_prefix" in o) {
|
||||||
|
patch.label_prefix =
|
||||||
|
o.label_prefix === null || o.label_prefix === undefined
|
||||||
|
? null
|
||||||
|
: typeof o.label_prefix === "string"
|
||||||
|
? o.label_prefix
|
||||||
|
: String(o.label_prefix);
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const node = updateTagTreeNode(id, patch);
|
||||||
|
if (!node) {
|
||||||
|
return Response.json({ error: "Not found" }, { status: 404 });
|
||||||
|
}
|
||||||
|
return Response.json(node);
|
||||||
|
} catch (e) {
|
||||||
|
const msg = e instanceof Error ? e.message : "Fehler";
|
||||||
|
return Response.json({ error: msg }, { status: 400 });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async DELETE(req: Request) {
|
||||||
|
const id = Number((req as Request & { params: { id: string } }).params.id);
|
||||||
|
if (!Number.isFinite(id)) {
|
||||||
|
return Response.json({ error: "Invalid id" }, { status: 400 });
|
||||||
|
}
|
||||||
|
const ok = deleteTagTreeNode(id);
|
||||||
|
if (!ok) {
|
||||||
|
return Response.json({ error: "Not found" }, { status: 404 });
|
||||||
|
}
|
||||||
|
return new Response(null, { status: 204 });
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user