@hiai-gg/hiai-docs 0.0.1

package/frontend/src/routes/api/[...path]/+server.ts

@@ -0,0 +1,111 @@
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+
+const API_BASE = process.env.API_URL || "http://localhost:50700";
+
+function buildHeaders(request: Request): Headers {
+	const headers = new Headers(request.headers);
+	headers.delete("content-length");
+	return headers;
+}
+
+async function getCsrfToken(): Promise<string | null> {
+	try {
+		const response = await fetch(`${API_BASE}/api/csrf-token`);
+		if (response.ok) {
+			const data = await response.json();
+			return data.token || null;
+		}
+	} catch {
+		return null;
+	}
+	return null;
+}
+
+async function proxy(
+	request: Request,
+	params: { path?: string },
+	fetch: typeof globalThis.fetch,
+): Promise<Response> {
+	const path = params.path;
+	const url = new URL(request.url);
+	const targetUrl = `${API_BASE}/api/${path}${url.search}`;
+
+	const headers = buildHeaders(request);
+
+	if (["POST", "PUT", "PATCH", "DELETE"].includes(request.method)) {
+		const csrfToken = await getCsrfToken();
+		if (csrfToken) {
+			headers.set("x-csrf-token", csrfToken);
+		}
+	}
+
+	const init: RequestInit = {
+		method: request.method,
+		headers,
+		credentials: "include",
+	};
+
+	if (
+		request.method === "POST" ||
+		request.method === "PUT" ||
+		request.method === "PATCH"
+	) {
+		// Forward the raw bytes — NOT request.text(). Reading the body as text
+		// decodes it as UTF-8, which corrupts binary payloads such as
+		// multipart/form-data image uploads (high bytes get replaced with the
+		// U+FFFD replacement character, inflating and mangling the file). The
+		// original content-type header (with its multipart boundary) is
+		// preserved by buildHeaders().
+		const body = await request.arrayBuffer();
+		if (body.byteLength > 0) {
+			init.body = body;
+		}
+	}
+
+	try {
+		const response = await fetch(targetUrl, init);
+		// Read the response as raw bytes for the same reason — image/binary
+		// responses (e.g. /api/attachments/:id/raw) must pass through intact.
+		const data = await response.arrayBuffer();
+
+		const responseHeaders = new Headers();
+		responseHeaders.set(
+			"content-type",
+			response.headers.get("content-type") || "application/json",
+		);
+		const cacheControl = response.headers.get("cache-control");
+		if (cacheControl) {
+			responseHeaders.set("cache-control", cacheControl);
+		}
+
+		response.headers.forEach((value, key) => {
+			if (key.toLowerCase() === "set-cookie") {
+				responseHeaders.append(key, value);
+			}
+		});
+
+		return new Response(data, {
+			status: response.status,
+			headers: responseHeaders,
+		});
+	} catch (error) {
+		console.error("API proxy error:", error);
+		return json({ error: "Failed to proxy request" }, { status: 502 });
+	}
+}
+
+export const GET: RequestHandler = async ({ request, params, fetch }) =>
+	proxy(request, params, fetch);
+
+export const POST: RequestHandler = async ({ request, params, fetch }) =>
+	proxy(request, params, fetch);
+
+export const PUT: RequestHandler = async ({ request, params, fetch }) =>
+	proxy(request, params, fetch);
+
+export const PATCH: RequestHandler = async ({ request, params, fetch }) =>
+	proxy(request, params, fetch);
+
+export const DELETE: RequestHandler = async ({ request, params, fetch }) =>
+	proxy(request, params, fetch);

package/frontend/src/routes/folders/[id]/+page.server.ts

@@ -0,0 +1,10 @@
+import type { ServerLoadEvent } from "@sveltejs/kit";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ params, cookies }: ServerLoadEvent) {
+	const sessionCookie = cookies.get("better-auth.session_token");
+	if (!sessionCookie) {
+		throw redirect(302, "/login");
+	}
+	return { id: params.id };
+}

package/frontend/src/routes/folders/[id]/+page.svelte

@@ -0,0 +1,319 @@
+<script lang="ts">
+import { Badge } from "@hiai-gg/hiai-ui/components/ui/badge";
+import { Button } from "@hiai-gg/hiai-ui/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@hiai-gg/hiai-ui/components/ui/dropdown-menu";
+import {
+	ArrowUpDown,
+	ChevronRight,
+	Clock,
+	File,
+	FileText,
+	FolderOpen,
+	FolderPlus,
+	Plus,
+	SortAsc,
+} from "lucide-svelte";
+import { goto } from "$app/navigation";
+import { apiFetch } from "$lib/api/client";
+import DocumentCard from "$lib/components/DocumentCard.svelte";
+import FolderCard from "$lib/components/FolderCard.svelte";
+import { ConfirmDialog } from "$lib/components/ui/confirm-dialog";
+import * as m from "$lib/paraglide/messages.js";
+import type { Document, Folder, SortOption } from "$lib/types.js";
+
+const { data } = $props();
+
+let sortBy = $state<SortOption>("updated");
+let editingName = $state(false);
+let editName = $state("");
+let showDeleteDialog = $state(false);
+let deleteTargetId = $state<string | null>(null);
+let deleteBusy = $state(false);
+
+/** Sort documents by the selected option. */
+const sortedDocuments = $derived.by(() => {
+	const docs = [...data.folder.documents];
+	switch (sortBy) {
+		case "name":
+			return docs.sort((a, b) => a.title.localeCompare(b.title));
+		case "created":
+			return docs.sort(
+				(a, b) =>
+					new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+			);
+		default:
+			return docs.sort(
+				(a, b) =>
+					new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+			);
+	}
+});
+
+/** Sort subfolders by name. */
+const sortedSubfolders = $derived(
+	[...data.folder.children].sort((a, b) => a.name.localeCompare(b.name)),
+);
+
+const isEmpty = $derived(
+	sortedSubfolders.length === 0 && sortedDocuments.length === 0,
+);
+
+function startRename() {
+	editName = data.folder.name;
+	editingName = true;
+}
+
+function cancelRename() {
+	editingName = false;
+	editName = "";
+}
+
+function submitRename() {
+	if (editName.trim() && editName.trim() !== data.folder.name) {
+		// In production, call updateFolder(data.folder.id, { name: editName.trim() })
+		data.folder.name = editName.trim();
+	}
+	editingName = false;
+}
+
+function handleRenameKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter") submitRename();
+	if (e.key === "Escape") cancelRename();
+}
+
+function handleDeleteFolder(id: string) {
+	deleteTargetId = id;
+	showDeleteDialog = true;
+}
+
+function cancelDeleteFolder() {
+	showDeleteDialog = false;
+	deleteTargetId = null;
+}
+
+async function confirmDeleteFolder() {
+	const id = deleteTargetId;
+	if (!id || deleteBusy) return;
+	deleteBusy = true;
+	try {
+		await apiFetch(`/api/folders/${id}`, { method: "DELETE" });
+		data.folder.children = data.folder.children.filter(
+			(c: Folder) => c.id !== id,
+		);
+		showDeleteDialog = false;
+		deleteTargetId = null;
+	} catch (e: unknown) {
+		console.error("Failed to delete folder", e);
+	} finally {
+		deleteBusy = false;
+	}
+}
+
+function handleRenameFolder(id: string) {
+	const folder = data.folder.children.find((c: Folder) => c.id === id);
+	const current = folder?.name ?? "";
+	const name = prompt(m.folders_rename(), current);
+	const trimmed = name?.trim();
+	if (!trimmed || trimmed === current) return;
+	apiFetch<Folder>(`/api/folders/${id}`, {
+		method: "PATCH",
+		body: JSON.stringify({ name: trimmed }),
+	})
+		.then((updated) => {
+			const target = data.folder.children.find((c: Folder) => c.id === id);
+			if (target) {
+				target.name = updated.name;
+				target.updatedAt = updated.updatedAt;
+			}
+		})
+		.catch((e: unknown) => console.error("Failed to rename folder", e));
+}
+
+function handleDeleteDocument(id: string) {
+	data.folder.documents = data.folder.documents.filter(
+		(d: Document) => d.id !== id,
+	);
+}
+
+function handleDuplicateDocument(id: string) {
+	apiFetch<Document>(`/api/documents/${id}/duplicate`, { method: "POST" })
+		.then((doc) => {
+			data.folder.documents = [...data.folder.documents, doc];
+		})
+		.catch((e: unknown) => console.error("Failed to duplicate document", e));
+}
+
+function getSortLabel(option: SortOption): string {
+	switch (option) {
+		case "name":
+			return m.sort_name();
+		case "updated":
+			return m.sort_date_modified();
+		case "created":
+			return m.sort_date_created();
+	}
+}
+</script>
+
+<svelte:head>
+  <title>{m.folder_page_title({ name: data.folder.name })}</title>
+</svelte:head>
+
+<div class="mx-auto max-w-5xl px-4 py-8">
+  <!-- Breadcrumb -->
+  <nav class="mb-4 flex items-center gap-1 text-sm text-muted-foreground" aria-label={m.aria_breadcrumb()}>
+    {#each data.breadcrumb as crumb, i (crumb.id)}
+      {#if i > 0}
+        <ChevronRight class="size-3.5 shrink-0" />
+      {/if}
+      {#if i === data.breadcrumb.length - 1}
+        <span class="font-medium text-foreground">{crumb.name}</span>
+      {:else}
+        <a href="/folders/{crumb.id}" class="transition-colors hover:text-foreground">
+          {crumb.name}
+        </a>
+      {/if}
+    {/each}
+  </nav>
+
+  <!-- Header -->
+  <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
+    <div class="flex items-center gap-3">
+      <FolderOpen class="size-7 shrink-0 text-primary" />
+      {#if editingName}
+        <input
+          type="text"
+          bind:value={editName}
+          onblur={submitRename}
+          onkeydown={handleRenameKeydown}
+          class="rounded-md border border-input bg-transparent px-2 py-1 text-2xl font-semibold tracking-tight focus:outline-none focus:ring-1 focus:ring-ring"
+        />
+      {:else}
+        <button
+          class="cursor-pointer text-left text-2xl font-semibold tracking-tight transition-colors hover:text-primary"
+          onclick={startRename}
+          onkeydown={(e: KeyboardEvent) => e.key === "Enter" && startRename()}
+          title={m.folder_click_to_rename()}
+        >
+          {data.folder.name}
+        </button>
+      {/if}
+    </div>
+
+    <div class="flex items-center gap-2">
+      <!-- Sort dropdown -->
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          class="inline-flex h-8 items-center gap-1.5 rounded-md border border-input bg-transparent px-3 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+        >
+          <ArrowUpDown class="size-3.5" />
+          {getSortLabel(sortBy)}
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onclick={() => (sortBy = "updated")}>
+            <Clock class="size-4" />
+            {m.sort_date_modified()}
+          </DropdownMenuItem>
+          <DropdownMenuItem onclick={() => (sortBy = "created")}>
+            <File class="size-4" />
+            {m.sort_date_created()}
+          </DropdownMenuItem>
+          <DropdownMenuItem onclick={() => (sortBy = "name")}>
+            <SortAsc class="size-4" />
+            {m.sort_name()}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <!-- New Subfolder -->
+      <Button variant="outline" size="sm" onclick={() => goto(`/folders/new?parent=${data.folder.id}`)}>
+        <FolderPlus class="size-3.5" />
+        {m.folder_new_subfolder()}
+      </Button>
+
+      <!-- New Document -->
+      <Button size="sm" onclick={() => goto(`/docs/new?folder=${data.folder.id}`)}>
+        <Plus class="size-3.5" />
+        {m.dashboard_new_document()}
+      </Button>
+    </div>
+  </div>
+
+  {#if isEmpty}
+    <!-- Empty state -->
+    <div class="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-20">
+      <div class="mb-4 rounded-full bg-muted p-4">
+        <FileText class="size-8 text-muted-foreground" />
+      </div>
+      <h2 class="mb-1 text-lg font-semibold">{m.folder_empty_title()}</h2>
+      <p class="mb-4 text-sm text-muted-foreground">
+        {m.folder_empty_description()}
+      </p>
+      <div class="flex gap-2">
+        <Button onclick={() => goto(`/docs/new?folder=${data.folder.id}`)}>
+          <FileText class="size-4" />
+          {m.dashboard_new_document()}
+        </Button>
+        <Button variant="outline" onclick={() => goto(`/folders/new?parent=${data.folder.id}`)}>
+          <FolderPlus class="size-4" />
+          {m.folder_new_subfolder()}
+        </Button>
+      </div>
+    </div>
+  {:else}
+    <!-- Subfolders section -->
+    {#if sortedSubfolders.length > 0}
+      <section class="mb-8">
+        <h2 class="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {m.nav_folders()}
+          <Badge variant="secondary" class="ml-1.5 text-[10px]">{sortedSubfolders.length}</Badge>
+        </h2>
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {#each sortedSubfolders as folder (folder.id)}
+            <FolderCard
+              {folder}
+              onDelete={handleDeleteFolder}
+              onRename={handleRenameFolder}
+            />
+          {/each}
+        </div>
+      </section>
+    {/if}
+
+    <!-- Documents section -->
+    {#if sortedDocuments.length > 0}
+      <section>
+        <h2 class="mb-3 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          {m.nav_documents()}
+          <Badge variant="secondary" class="ml-1.5 text-[10px]">{sortedDocuments.length}</Badge>
+        </h2>
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {#each sortedDocuments as doc (doc.id)}
+            <DocumentCard
+              document={doc}
+              onDelete={handleDeleteDocument}
+              onDuplicate={handleDuplicateDocument}
+            />
+          {/each}
+        </div>
+      </section>
+    {/if}
+  {/if}
+</div>
+
+<ConfirmDialog
+  bind:open={showDeleteDialog}
+  title={m.folders_delete_title()}
+  description={m.folders_delete_description()}
+  confirmLabel={m.action_delete()}
+  cancelLabel={m.action_cancel()}
+  variant="destructive"
+  busy={deleteBusy}
+  onConfirm={confirmDeleteFolder}
+  onCancel={cancelDeleteFolder}
+/>

package/frontend/src/routes/folders/[id]/+page.ts

@@ -0,0 +1,14 @@
+import { getFolder, getFolderPath } from "$lib/api/folders.js";
+import type { PageLoad } from "./$types.js";
+
+export const load: PageLoad = async ({ params }) => {
+	const [folder, breadcrumb] = await Promise.all([
+		getFolder(params.id),
+		getFolderPath(params.id),
+	]);
+
+	return {
+		folder,
+		breadcrumb,
+	};
+};

package/frontend/src/routes/login/+page.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { signIn } from "$lib/auth-client";
+import * as m from "$lib/paraglide/messages.js";
+
+let email = $state("");
+let password = $state("");
+let error = $state("");
+let loading = $state(false);
+
+async function handleSubmit(e: SubmitEvent) {
+	e.preventDefault();
+	loading = true;
+	error = "";
+
+	const result = await signIn.email({
+		email,
+		password,
+		callbackURL: "/",
+	});
+
+	if (result.error) {
+		error = result.error.message ?? m.auth_login_error();
+		loading = false;
+	} else {
+		goto("/");
+	}
+}
+</script>
+
+<svelte:head>
+	<title>{m.login_page_title()}</title>
+</svelte:head>
+
+<div class="flex min-h-screen items-center justify-center bg-background">
+	<form
+		onsubmit={handleSubmit}
+		class="w-full max-w-sm space-y-4 rounded-lg border border-border bg-card p-6 shadow-sm"
+	>
+		<div class="space-y-2">
+			<div class="flex items-center gap-2">
+				<img src="/logo.png" alt="HiAi-Docs" class="h-8 w-auto dark:invert" />
+				<h1 class="text-2xl font-semibold tracking-tight">{m.login_title()}</h1>
+			</div>
+			<p class="text-sm text-muted-foreground">{m.login_subtitle()}</p>
+		</div>
+
+			{#if error}
+				<p class="text-sm text-destructive">{error}</p>
+			{/if}
+
+			<div class="space-y-2">
+				<label for="email" class="text-sm font-medium">{m.auth_email()}</label>
+				<input
+					id="email"
+					type="email"
+					bind:value={email}
+					required
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+					placeholder="you@example.com"
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<label for="password" class="text-sm font-medium">{m.auth_password()}</label>
+				<input
+					id="password"
+					type="password"
+					bind:value={password}
+					required
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+					placeholder="••••••••"
+				/>
+			</div>
+
+			<button
+				type="submit"
+				disabled={loading}
+				class="inline-flex h-9 w-full 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 disabled:opacity-50"
+			>
+				{loading ? m.login_loading() : m.login_submit()}
+		</button>
+
+		<p class="text-center text-sm text-muted-foreground">
+			{m.auth_no_account()} <a href="/register" class="text-primary underline underline-offset-4 hover:text-primary/80"
+				>{m.register_title()}</a
+			>
+		</p>
+	</form>
+</div>

package/frontend/src/routes/register/+page.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+import { goto } from "$app/navigation";
+import { signUp } from "$lib/auth-client";
+import * as m from "$lib/paraglide/messages.js";
+
+let name = $state("");
+let email = $state("");
+let password = $state("");
+let error = $state("");
+let loading = $state(false);
+
+async function handleSubmit(e: SubmitEvent) {
+	e.preventDefault();
+	loading = true;
+	error = "";
+
+	const result = await signUp.email({
+		name,
+		email,
+		password,
+		callbackURL: "/",
+	});
+
+	if (result.error) {
+		error = result.error.message ?? m.auth_signup_error();
+		loading = false;
+	} else {
+		goto("/");
+	}
+}
+</script>
+
+<svelte:head>
+  <title>{m.register_page_title()}</title>
+</svelte:head>
+
+<div class="flex min-h-screen items-center justify-center bg-background">
+  <form onsubmit={handleSubmit} class="w-full max-w-sm space-y-4 rounded-lg border border-border bg-card p-6 shadow-sm">
+    <div class="space-y-1">
+      <h1 class="text-2xl font-semibold tracking-tight">{m.register_title()}</h1>
+      <p class="text-sm text-muted-foreground">{m.register_subtitle()}</p>
+    </div>
+
+    {#if error}
+      <p class="text-sm text-destructive">{error}</p>
+    {/if}
+
+    <div class="space-y-2">
+      <label for="name" class="text-sm font-medium">{m.settings_name()}</label>
+      <input
+        id="name"
+        type="text"
+        bind:value={name}
+        required
+        class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        placeholder={m.auth_name_placeholder()}
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label for="email" class="text-sm font-medium">{m.auth_email()}</label>
+      <input
+        id="email"
+        type="email"
+        bind:value={email}
+        required
+        class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        placeholder="you@example.com"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label for="password" class="text-sm font-medium">{m.auth_password()}</label>
+      <input
+        id="password"
+        type="password"
+        bind:value={password}
+        required
+        minlength={8}
+        class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        placeholder="••••••••"
+      />
+    </div>
+
+    <button
+      type="submit"
+      disabled={loading}
+      class="inline-flex h-9 w-full 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 disabled:opacity-50"
+    >
+      {loading ? m.register_loading() : m.register_title()}
+    </button>
+
+    <p class="text-center text-sm text-muted-foreground">
+      {m.auth_has_account()} <a href="/login" class="text-primary underline underline-offset-4 hover:text-primary/80">{m.auth_login()}</a>
+    </p>
+  </form>
+</div>