@hiai-gg/hiai-docs 0.0.1

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

@@ -0,0 +1,166 @@
+<script lang="ts">
+import { Badge } from "@hiai-gg/hiai-ui/components/ui/badge";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+} from "@hiai-gg/hiai-ui/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@hiai-gg/hiai-ui/components/ui/dropdown-menu";
+import {
+	ArrowUpRight,
+	Check,
+	Copy,
+	Files,
+	FileText,
+	FolderInput,
+	Loader2,
+	MoreVertical,
+	Trash2,
+} from "lucide-svelte";
+import { goto } from "$app/navigation";
+import { getDocument } from "$lib/api/documents";
+import * as m from "$lib/paraglide/messages.js";
+import type { Document } from "$lib/types.js";
+import { copyToClipboard } from "$lib/utils/clipboard.js";
+import { stripMarkdown } from "$lib/utils/strip-markdown";
+import { cn, formatRelativeTime } from "$lib/utils.js";
+
+const {
+	document: doc,
+	onDelete,
+	onDuplicate,
+}: {
+	document: Document;
+	onDelete?: (id: string) => void;
+	onDuplicate?: (id: string) => void;
+} = $props();
+
+function navigateToDoc() {
+	goto(`/docs/${doc.id}`);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		navigateToDoc();
+	}
+}
+
+let contentCopied = $state(false);
+let contentCopying = $state(false);
+let copyTimer: ReturnType<typeof setTimeout> | null = null;
+
+async function handleCopyContent(e: Event) {
+	e.stopPropagation();
+	if (typeof window === "undefined") return;
+	// Copy the document's full markdown source. The list endpoint returns
+	// `content` truncated to 200 chars at the SQL level, so we fetch the
+	// single-document endpoint first to get the complete text. If the
+	// fetch fails we fall back to the card payload (excerpt, then
+	// truncated content) so the menu item still does something.
+	let text = "";
+	contentCopying = true;
+	try {
+		const full = await getDocument(doc.id);
+		text = full.content ?? "";
+	} catch (err) {
+		console.error("DocumentCard: failed to fetch full document for copy", err);
+		text = doc.excerpt || doc.content || "";
+	} finally {
+		contentCopying = false;
+	}
+	if (!text) return;
+	const ok = await copyToClipboard(text);
+	if (!ok) return;
+	contentCopied = true;
+	if (copyTimer) clearTimeout(copyTimer);
+	copyTimer = setTimeout(() => {
+		contentCopied = false;
+		copyTimer = null;
+	}, 2000);
+}
+
+const preview = $derived(
+	stripMarkdown(doc.excerpt || doc.content || "").slice(0, 100),
+);
+</script>
+
+<Card
+  class="group cursor-pointer transition-shadow duration-200 hover:shadow-md"
+  onclick={navigateToDoc}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex={0}
+>
+  <CardHeader class="flex-row items-start justify-between space-y-0 pb-2">
+    <div class="flex items-center gap-2 text-muted-foreground">
+      <FileText class="size-4 shrink-0" />
+      <span class="text-xs">{m.doc_updated({ time: formatRelativeTime(doc.updatedAt) })}</span>
+    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        class="inline-flex size-8 items-center justify-center rounded-md opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
+        onclick={(e: MouseEvent) => e.stopPropagation()}
+      >
+        <MoreVertical class="size-4" />
+        <span class="sr-only">{m.doc_open_menu()}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onclick={() => goto(`/docs/${doc.id}`)}>
+          <ArrowUpRight class="size-4" />
+          {m.doc_open()}
+        </DropdownMenuItem>
+        <DropdownMenuItem onclick={handleCopyContent} disabled={contentCopying}>
+          {#if contentCopying}
+            <Loader2 class="size-4 animate-spin" />
+            {m.action_copy_content()}
+          {:else if contentCopied}
+            <Check class="size-4" />
+            {m.share_copied()}
+          {:else}
+            <Copy class="size-4" />
+            {m.action_copy_content()}
+          {/if}
+        </DropdownMenuItem>
+        <DropdownMenuItem onclick={(e: Event) => { e.stopPropagation(); onDuplicate?.(doc.id); }}>
+          <Files class="size-4" />
+          {m.doc_duplicate()}
+        </DropdownMenuItem>
+        <DropdownMenuItem onclick={(e: Event) => e.stopPropagation()}>
+          <FolderInput class="size-4" />
+          {m.doc_move_to_folder()}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          class="text-destructive"
+          onclick={(e: Event) => { e.stopPropagation(); onDelete?.(doc.id); }}
+        >
+          <Trash2 class="size-4" />
+          {m.action_delete()}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </CardHeader>
+  <CardContent>
+    <h3 class="mb-1 truncate text-sm font-medium leading-snug">{doc.title}</h3>
+    {#if preview}
+      <p class="mb-3 line-clamp-2 text-xs text-muted-foreground">{preview}</p>
+    {/if}
+    {#if doc.tags.length > 0}
+      <div class="flex flex-wrap gap-1">
+        {#each doc.tags.slice(0, 3) as tag (tag)}
+          <Badge variant="secondary" class="text-[10px]">{tag}</Badge>
+        {/each}
+        {#if doc.tags.length > 3}
+          <Badge variant="outline" class="text-[10px]">+{doc.tags.length - 3}</Badge>
+        {/if}
+      </div>
+    {/if}
+  </CardContent>
+</Card>

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { cn } from "$lib/utils.js";
+
+interface Props {
+	icon?: typeof import("lucide-svelte").FileText;
+	title: string;
+	description?: string;
+	actionLabel?: string;
+	onAction?: () => void;
+	class?: string;
+}
+
+const {
+	icon: Icon,
+	title,
+	description,
+	actionLabel,
+	onAction,
+	class: className,
+}: Props = $props();
+</script>
+
+<div
+  class={cn(
+    "flex flex-col items-center justify-center rounded-lg border border-dashed border-border p-12 text-center",
+    className,
+  )}
+>
+  {#if Icon}
+    <div class="mb-4 rounded-full bg-muted p-4">
+      <Icon class="h-8 w-8 text-muted-foreground" strokeWidth={1.5} />
+    </div>
+  {/if}
+
+  <h3 class="text-lg font-medium text-foreground">{title}</h3>
+
+  {#if description}
+    <p class="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>
+  {/if}
+
+  {#if actionLabel && onAction}
+    <button
+      onclick={onAction}
+      class="mt-4 inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90"
+    >
+      {actionLabel}
+    </button>
+  {/if}
+</div>

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+import { Card, CardContent } from "@hiai-gg/hiai-ui/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@hiai-gg/hiai-ui/components/ui/dropdown-menu";
+import {
+	Folder,
+	FolderInput,
+	MoreVertical,
+	Pencil,
+	Trash2,
+} from "lucide-svelte";
+import { goto } from "$app/navigation";
+import * as m from "$lib/paraglide/messages.js";
+import type { Folder as FolderType } from "$lib/types.js";
+import { formatRelativeTime } from "$lib/utils.js";
+
+const {
+	folder,
+	onDelete,
+	onRename,
+}: {
+	folder: FolderType;
+	onDelete?: (id: string) => void;
+	onRename?: (id: string) => void;
+} = $props();
+
+function navigateToFolder() {
+	goto(`/folders/${folder.id}`);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		navigateToFolder();
+	}
+}
+</script>
+
+<Card
+  class="group cursor-pointer transition-shadow duration-200 hover:shadow-md"
+  onclick={navigateToFolder}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex={0}
+>
+  <CardContent class="flex items-center gap-3 p-4">
+    <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+      <Folder class="size-5 text-primary" />
+    </div>
+    <div class="min-w-0 flex-1">
+      <h3 class="truncate text-sm font-medium">{folder.name}</h3>
+      <p class="text-xs text-muted-foreground">
+        {folder.documentCount} {folder.documentCount === 1 ? m.folders_document() : m.folders_documents()} &middot; {formatRelativeTime(folder.updatedAt)}
+      </p>
+    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        class="inline-flex size-8 shrink-0 items-center justify-center rounded-md opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
+        onclick={(e: MouseEvent) => e.stopPropagation()}
+      >
+        <MoreVertical class="size-4" />
+        <span class="sr-only">{m.doc_open_menu()}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onclick={() => goto(`/folders/${folder.id}`)}>
+          <Folder class="size-4" />
+          {m.doc_open()}
+        </DropdownMenuItem>
+        <DropdownMenuItem onclick={(e: Event) => { e.stopPropagation(); onRename?.(folder.id); }}>
+          <Pencil class="size-4" />
+          {m.folders_rename()}
+        </DropdownMenuItem>
+        <DropdownMenuItem onclick={(e: Event) => e.stopPropagation()}>
+          <FolderInput class="size-4" />
+          {m.folders_move()}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          class="text-destructive"
+          onclick={(e: Event) => { e.stopPropagation(); onDelete?.(folder.id); }}
+        >
+          <Trash2 class="size-4" />
+          {m.action_delete()}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </CardContent>
+</Card>

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { ArrowUp } from "lucide-svelte";
+import { onDestroy } from "svelte";
+import * as m from "$lib/paraglide/messages.js";
+
+const SCROLL_THRESHOLD = 300;
+
+let { scrollTarget }: { scrollTarget?: HTMLElement | null } = $props();
+
+let visible = $state(false);
+let activeTarget: HTMLElement | null = null;
+
+function handleScroll() {
+	visible =
+		(activeTarget ? activeTarget.scrollTop : window.scrollY) > SCROLL_THRESHOLD;
+}
+
+function scrollToTop() {
+	if (activeTarget) {
+		activeTarget.scrollTo({ top: 0, behavior: "smooth" });
+	} else {
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}
+}
+
+function attach(target: HTMLElement | null | undefined) {
+	detach();
+	if (!target) return;
+	activeTarget = target;
+	target.addEventListener("scroll", handleScroll, { passive: true });
+	handleScroll();
+}
+
+function detach() {
+	if (activeTarget) {
+		activeTarget.removeEventListener("scroll", handleScroll);
+	}
+	activeTarget = null;
+}
+
+// React to changes in scrollTarget so we always listen on the right element.
+// When scrollTarget is undefined, fall back to window-level scroll.
+$effect(() => {
+	const target = scrollTarget;
+	attach(target);
+	if (!target) {
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		handleScroll();
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}
+	return () => {
+		detach();
+	};
+});
+
+onDestroy(() => {
+	detach();
+	visible = false;
+});
+</script>
+
+<button
+	type="button"
+	class="fixed bottom-6 right-6 z-50 inline-flex size-10 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-md transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring {visible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
+	aria-label={m.scroll_to_top_aria()}
+	title={m.scroll_to_top_aria()}
+	onclick={scrollToTop}
+>
+	<ArrowUp class="size-5" />
+</button>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { Search, X } from "lucide-svelte";
+import { goto } from "$app/navigation";
+import * as m from "$lib/paraglide/messages.js";
+import { cn } from "$lib/utils.js";
+
+const { class: className }: { class?: string } = $props();
+let query = $state("");
+let inputEl = $state<HTMLInputElement | null>(null);
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter" && query.trim()) {
+		goto(`/search?q=${encodeURIComponent(query.trim())}`);
+	}
+}
+
+function clearQuery() {
+	query = "";
+	inputEl?.focus();
+}
+</script>
+
+<div class={cn("relative", className)}>
+  <Search class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+  <input
+    bind:this={inputEl}
+    type="text"
+    bind:value={query}
+    onkeydown={handleKeydown}
+    placeholder={m.search_placeholder()}
+    class={cn(
+      "flex h-9 w-full rounded-md border border-input bg-transparent pl-9 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      query ? "pr-9" : "pr-3"
+    )}
+  />
+  {#if query}
+    <button
+      type="button"
+      onclick={clearQuery}
+      class="absolute right-2 top-1/2 inline-flex size-5 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      aria-label={m.search_clear()}
+      title={m.search_clear()}
+    >
+      <X class="size-3.5" />
+    </button>
+  {/if}
+</div>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+import { Calendar, Folder, Tag } from "lucide-svelte";
+
+interface Props {
+	id: string;
+	title: string;
+	snippet: string; // may contain <mark> tags
+	score: number;
+	folderName: string;
+	tags: Array<{ id: string; name: string; color: string | null }>;
+	createdAt: string;
+	query?: string;
+}
+
+const {
+	id,
+	title,
+	snippet,
+	score,
+	folderName,
+	tags,
+	createdAt,
+	query = "",
+}: Props = $props();
+
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}
+
+function highlightText(text: string, q: string): string {
+	if (!q) return escapeHtml(text);
+	const escapedQuery = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const safe = escapeHtml(text);
+	return safe.replace(new RegExp(`(${escapedQuery})`, "gi"), "<mark>$1</mark>");
+}
+
+const highlightedSnippet = $derived(highlightText(snippet, query));
+
+const scorePercent = $derived(Math.round(score * 100));
+
+const scoreColor = $derived(
+	scorePercent >= 90
+		? "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300"
+		: scorePercent >= 75
+			? "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
+			: "bg-muted text-muted-foreground",
+);
+
+const formattedDate = $derived(
+	new Date(createdAt).toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	}),
+);
+</script>
+
+<a
+  href="/docs/{id}"
+  class="group block rounded-lg border border-border bg-card p-5 shadow-sm transition-all hover:border-primary/30 hover:shadow-md"
+>
+  <!-- Header: title + score -->
+  <div class="flex items-start justify-between gap-3">
+    <h3
+      class="text-lg font-semibold leading-snug text-foreground group-hover:text-primary transition-colors"
+    >
+      {title}
+    </h3>
+    <span
+      class="shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium {scoreColor}"
+    >
+      {scorePercent}%
+    </span>
+  </div>
+
+  <!-- Snippet with highlighted terms -->
+  <p
+    class="mt-2 text-sm leading-relaxed text-muted-foreground [&_mark]:rounded-sm [&_mark]:bg-yellow-200 [&_mark]:px-0.5 [&_mark]:text-foreground dark:[&_mark]:bg-yellow-900/60"
+  >
+    {@html highlightedSnippet}
+  </p>
+
+  <!-- Meta row: folder + tags + date -->
+  <div
+    class="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground"
+  >
+    {#if folderName}
+      <span class="inline-flex items-center gap-1">
+        <Folder class="size-3.5" />
+        {folderName}
+      </span>
+    {/if}
+
+    {#if tags.length > 0}
+      {#each tags as tag (tag.id)}
+        <span class="inline-flex items-center gap-1 rounded-full bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground">
+          {#if tag.color}
+            <span class="inline-block size-2 rounded-full" style="background-color: {tag.color}"></span>
+          {/if}
+          {tag.name}
+        </span>
+      {/each}
+    {/if}
+
+    <span class="inline-flex items-center gap-1">
+      <Calendar class="size-3.5" />
+      {formattedDate}
+    </span>
+  </div>
+</a>