@hiai-gg/hiai-docs 0.0.1

package/frontend/src/lib/components/TagCreateDialog.svelte

@@ -0,0 +1,284 @@
+<!-- TagCreateDialog.svelte — Create or edit a tag (name + color). -->
+<script lang="ts">
+import { Button } from "@hiai-gg/hiai-ui/components/ui/button";
+import {
+	Dialog,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@hiai-gg/hiai-ui/components/ui/dialog";
+import { Input } from "@hiai-gg/hiai-ui/components/ui/input";
+import { Label } from "@hiai-gg/hiai-ui/components/ui/label";
+import { Loader2 } from "lucide-svelte";
+import {
+	createTag,
+	createTagInputSchema,
+	type Tag,
+	updateTag,
+	updateTagInputSchema,
+} from "$lib/api/tags";
+import * as m from "$lib/paraglide/messages.js";
+import { cn } from "$lib/utils";
+
+// Curated palette — common tag colors that read well on light & dark surfaces.
+const PRESET_COLORS = [
+	"#ef4444", // red
+	"#f97316", // orange
+	"#f59e0b", // amber
+	"#eab308", // yellow
+	"#84cc16", // lime
+	"#22c55e", // green
+	"#10b981", // emerald
+	"#06b6d4", // cyan
+	"#3b82f6", // blue
+	"#8b5cf6", // violet
+	"#ec4899", // pink
+];
+
+// biome-ignore lint/style/noNonNullAssertion: guaranteed by array size
+const DEFAULT_COLOR = PRESET_COLORS[9]!; // violet
+
+let {
+	open = $bindable(false),
+	mode = "create",
+	tag = null,
+	onCreated,
+	onUpdated,
+	onClose,
+}: {
+	open?: boolean;
+	mode?: "create" | "edit";
+	tag?: Tag | null;
+	onCreated?: (tag: Tag) => void;
+	onUpdated?: (tag: Tag) => void;
+	onClose?: () => void;
+} = $props();
+
+let name = $state("");
+let color = $state(DEFAULT_COLOR);
+let nameError = $state<string | null>(null);
+let submitError = $state<string | null>(null);
+let submitting = $state(false);
+
+const isEdit = $derived(mode === "edit");
+const dialogTitle = $derived(isEdit ? m.tags_edit() : m.tags_new());
+const submitLabel = $derived(
+	submitting
+		? m.action_loading()
+		: isEdit
+			? m.action_save()
+			: m.action_create(),
+);
+
+function reset() {
+	name = "";
+	color = DEFAULT_COLOR;
+	nameError = null;
+	submitError = null;
+	submitting = false;
+}
+
+function seedFromTag(t: Tag | null) {
+	if (!t) {
+		reset();
+		return;
+	}
+	name = t.name;
+	color = t.color ?? DEFAULT_COLOR;
+	nameError = null;
+	submitError = null;
+	submitting = false;
+}
+
+function close() {
+	open = false;
+	reset();
+	onClose?.();
+}
+
+function handleOpenChange(next: boolean) {
+	if (next) {
+		seedFromTag(tag);
+	} else {
+		reset();
+		open = false;
+		onClose?.();
+	}
+}
+
+function handleSubmit(e: Event) {
+	e.preventDefault();
+	nameError = null;
+	submitError = null;
+
+	const trimmed = name.trim();
+	if (trimmed.length === 0) {
+		nameError = m.tags_name_placeholder();
+		return;
+	}
+
+	if (isEdit && tag) {
+		const parsed = updateTagInputSchema.safeParse({
+			name: trimmed,
+			color,
+		});
+		if (!parsed.success) {
+			const issue = parsed.error.issues[0];
+			nameError = issue?.message ?? m.error_generic();
+			return;
+		}
+		void doUpdate(tag.id, parsed.data);
+	} else {
+		const parsed = createTagInputSchema.safeParse({
+			name: trimmed,
+			color,
+		});
+		if (!parsed.success) {
+			const issue = parsed.error.issues[0];
+			nameError = issue?.message ?? m.error_generic();
+			return;
+		}
+		void doCreate(parsed.data.name, color);
+	}
+}
+
+async function doCreate(trimmed: string, pickedColor: string) {
+	submitting = true;
+	try {
+		const created = await createTag(trimmed, pickedColor);
+		onCreated?.(created);
+		close();
+	} catch (e) {
+		submitError = e instanceof Error ? e.message : m.error_generic();
+		console.error("TagCreateDialog: createTag failed", e);
+	} finally {
+		submitting = false;
+	}
+}
+
+async function doUpdate(id: string, data: { name?: string; color?: string }) {
+	submitting = true;
+	try {
+		const updated = await updateTag(id, data);
+		onUpdated?.(updated);
+		close();
+	} catch (e) {
+		submitError = e instanceof Error ? e.message : m.error_generic();
+		console.error("TagCreateDialog: updateTag failed", e);
+	} finally {
+		submitting = false;
+	}
+}
+
+function handleInputKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter" && !submitting) {
+		e.preventDefault();
+		handleSubmit(new Event("submit"));
+	}
+}
+
+$effect(() => {
+	if (open && mode === "edit" && tag) {
+		name = tag.name;
+		color = tag.color ?? DEFAULT_COLOR;
+		nameError = null;
+		submitError = null;
+	}
+});
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+  <DialogHeader>
+    <DialogTitle>{dialogTitle}</DialogTitle>
+    <DialogDescription>{m.tags_name_placeholder()}</DialogDescription>
+  </DialogHeader>
+
+  <form onsubmit={handleSubmit} class="space-y-4">
+    <div class="space-y-2">
+      <Label for="tag-name" class="sr-only">{m.tags_name_placeholder()}</Label>
+      <Input
+        id="tag-name"
+        name="name"
+        type="text"
+        bind:value={name}
+        placeholder={m.tags_name_placeholder()}
+        maxlength={50}
+        required
+        disabled={submitting}
+        aria-invalid={nameError ? "true" : undefined}
+        aria-describedby={nameError ? "tag-name-error" : undefined}
+        autocomplete="off"
+        onkeydown={handleInputKeydown}
+      />
+      {#if nameError}
+        <p id="tag-name-error" class="text-xs text-destructive">{nameError}</p>
+      {/if}
+    </div>
+
+    <div class="space-y-2">
+      <Label for="tag-color" class="text-xs text-muted-foreground">
+        Color
+      </Label>
+      <div id="tag-color" class="flex flex-wrap gap-2">
+        {#each PRESET_COLORS as preset (preset)}
+          {@const selected = color === preset}
+          <button
+            type="button"
+            class={cn(
+              "size-6 shrink-0 rounded-full border-2 transition-all",
+              selected
+                ? "scale-110 border-foreground"
+                : "border-transparent hover:scale-105",
+            )}
+            style="background-color: {preset};"
+            aria-label="Color {preset}"
+            aria-pressed={selected}
+            disabled={submitting}
+            onclick={() => (color = preset)}
+          ></button>
+        {/each}
+        <label
+          class={cn(
+            "relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 transition-all",
+            !PRESET_COLORS.includes(color)
+              ? "scale-110 border-foreground"
+              : "border-transparent hover:scale-105",
+          )}
+          style="background-color: {color};"
+          title="Custom color"
+        >
+          <input
+            type="color"
+            value={color}
+            disabled={submitting}
+            oninput={(e) =>
+              (color = (e.currentTarget as HTMLInputElement).value)}
+            class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            aria-label="Custom color"
+          />
+        </label>
+      </div>
+    </div>
+
+    {#if submitError}
+      <p class="text-xs text-destructive" role="alert">{submitError}</p>
+    {/if}
+  </form>
+
+  <DialogFooter>
+    <Button variant="outline" type="button" onclick={close} disabled={submitting}>
+      {m.action_cancel()}
+    </Button>
+    <Button
+      type="submit"
+      onclick={handleSubmit}
+      disabled={submitting || name.trim().length === 0}
+    >
+      {#if submitting}
+        <Loader2 class="mr-1 size-4 animate-spin" />
+      {/if}
+      {submitLabel}
+    </Button>
+  </DialogFooter>
+</Dialog>

package/frontend/src/lib/components/VersionDiff.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+interface DiffLine {
+	type: "added" | "removed" | "unchanged";
+	text: string;
+}
+
+const { oldContent, newContent }: { oldContent: string; newContent: string } =
+	$props();
+
+function computeDiff(oldText: string, newText: string): DiffLine[] {
+	const oldLines = oldText.split("\n");
+	const newLines = newText.split("\n");
+	const result: DiffLine[] = [];
+	const maxLen = Math.max(oldLines.length, newLines.length);
+
+	for (let i = 0; i < maxLen; i++) {
+		const oldLine = oldLines[i];
+		const newLine = newLines[i];
+
+		if (oldLine === undefined) {
+			if (newLine !== undefined) {
+				result.push({ type: "added", text: newLine });
+			}
+		} else if (newLine === undefined) {
+			result.push({ type: "removed", text: oldLine });
+		} else if (oldLine === newLine) {
+			result.push({ type: "unchanged", text: oldLine });
+		} else {
+			result.push({ type: "removed", text: oldLine });
+			result.push({ type: "added", text: newLine });
+		}
+	}
+
+	return result;
+}
+
+const diff = $derived(computeDiff(oldContent, newContent));
+</script>
+
+<div class="overflow-auto rounded-md border border-border font-mono text-sm">
+  {#each diff as line, i (i)}
+    <div
+      class="px-3 py-0.5 {line.type === 'added'
+        ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300'
+        : line.type === 'removed'
+          ? 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300'
+          : 'text-foreground'}"
+    >
+      <span class="mr-3 inline-block w-4 text-right text-muted-foreground select-none">
+        {line.type === "added" ? "+" : line.type === "removed" ? "-" : " "}
+      </span>
+      {line.text}
+    </div>
+  {/each}
+</div>

package/frontend/src/lib/components/VersionHistory.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+import { Clock, History, Loader2, RotateCcw } from "lucide-svelte";
+import { onMount } from "svelte";
+import { apiFetch } from "$lib/api/client";
+import * as m from "$lib/paraglide/messages.js";
+
+interface Version {
+	id: string;
+	documentId: string;
+	content: string;
+	contentJson?: unknown;
+	createdBy: string;
+	createdAt: string;
+}
+
+const { documentId }: { documentId: string } = $props();
+
+let versions = $state<Version[]>([]);
+let loading = $state(true);
+let loadError = $state<string | null>(null);
+
+onMount(async () => {
+	try {
+		versions = await apiFetch<Version[]>(
+			`/api/documents/${documentId}/versions`,
+		);
+	} catch (e) {
+		loadError = e instanceof Error ? e.message : String(e);
+		console.error("Failed to load versions", e);
+	} finally {
+		loading = false;
+	}
+});
+
+/** Trim content to a single-line preview (strip markdown + truncate). */
+function previewFromContent(content: string | undefined): string {
+	if (!content) return "";
+	const stripped = content
+		.replace(/```[\s\S]*?```/g, "")
+		.replace(/[#*_`>~-]/g, "")
+		.replace(/\s+/g, " ")
+		.trim();
+	return stripped.length > 100 ? `${stripped.slice(0, 100)}…` : stripped;
+}
+
+function relativeTime(value: string | Date): string {
+	const created = typeof value === "string" ? new Date(value) : value;
+	const diff = Date.now() - created.getTime();
+	if (Number.isNaN(diff)) return "";
+	const mins = Math.floor(diff / 60000);
+	if (mins < 1) return m.time_minutes_ago({ count: 0 });
+	if (mins < 60) return m.time_minutes_ago({ count: mins });
+	const hrs = Math.floor(mins / 60);
+	if (hrs < 24) return m.time_hours_ago({ count: hrs });
+	return m.time_days_ago({ count: Math.floor(hrs / 24) });
+}
+</script>
+
+<div class="flex flex-col gap-2 p-4">
+  <div class="flex items-center gap-2 text-sm font-medium text-foreground">
+    <History class="h-4 w-4" />
+    <span>{m.version_history_title()}</span>
+  </div>
+
+  {#if loading}
+    <div class="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground">
+      <Loader2 class="h-3.5 w-3.5 animate-spin" />
+      <span>{m.action_loading()}</span>
+    </div>
+  {:else if loadError}
+    <p class="py-4 text-center text-xs text-destructive">{loadError}</p>
+  {:else if versions.length === 0}
+    <p class="py-4 text-center text-xs text-muted-foreground">{m.version_history_empty()}</p>
+  {:else}
+    <div class="flex flex-col gap-1 overflow-y-auto max-h-80">
+      {#each versions as version (version.id)}
+        <div class="flex items-start gap-3 rounded-md border border-border p-3 text-sm hover:bg-accent transition-colors">
+          <Clock class="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between gap-2">
+              <span class="text-xs text-muted-foreground">{relativeTime(version.createdAt)}</span>
+              <button
+                class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-background hover:text-foreground transition-colors"
+                title={m.version_restore()}
+              >
+                <RotateCcw class="h-3 w-3" />
+                {m.version_restore_short()}
+              </button>
+            </div>
+            <p class="mt-1 truncate text-xs text-muted-foreground">{previewFromContent(version.content)}</p>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/frontend/src/lib/components/editor/DocumentTitle.svelte

@@ -0,0 +1,87 @@
+<!-- DocumentTitle.svelte — Editable title input with auto-save on blur -->
+<script lang="ts">
+import * as m from "$lib/paraglide/messages.js";
+
+const {
+	title = "",
+	onUpdate = (_title: string) => {},
+}: {
+	title?: string;
+	onUpdate?: (title: string) => void;
+} = $props();
+
+let focused = $state(false);
+let localTitle = $state("");
+$effect(() => {
+	if (!focused) localTitle = title ?? "";
+});
+
+// Sync external title changes
+$effect(() => {
+	if (!focused) {
+		localTitle = title;
+	}
+});
+
+function handleBlur() {
+	focused = false;
+	if (localTitle !== title) {
+		onUpdate(localTitle);
+	}
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter") {
+		e.preventDefault();
+		(e.target as HTMLInputElement).blur();
+	}
+	if (e.key === "Escape") {
+		localTitle = title;
+		(e.target as HTMLInputElement).blur();
+	}
+}
+
+function handleFocus() {
+	focused = true;
+}
+</script>
+
+<input
+  type="text"
+  class="title-input"
+  class:focused
+  bind:value={localTitle}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  onkeydown={handleKeydown}
+  placeholder={m.doc_title_placeholder()}
+  aria-label={m.doc_title_label()}
+/>
+
+<style>
+  .title-input {
+    border: none;
+    border-bottom: 2px solid transparent;
+    outline: none;
+    background: transparent;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--foreground);
+    width: 100%;
+    padding: 0 0 4px 0;
+    margin-bottom: 8px;
+    transition: border-color 0.15s ease;
+  }
+
+  .title-input::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  .title-input.focused {
+    border-bottom-color: var(--ring);
+  }
+
+  .title-input:hover:not(.focused) {
+    border-bottom-color: var(--border);
+  }
+</style>