@hiai-gg/hiai-docs 0.0.1

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

@@ -0,0 +1,271 @@
+<script lang="ts">
+import { Button } from "@hiai-gg/hiai-ui/components/ui/button";
+import * as Dialog 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 * as Tabs from "@hiai-gg/hiai-ui/components/ui/tabs";
+import { Loader2, LogOut, Save } from "lucide-svelte";
+import { onMount } from "svelte";
+import { goto } from "$app/navigation";
+import { getProfile, updateProfile } from "$lib/api/settings";
+import { authClient, signOut } from "$lib/auth-client";
+import * as m from "$lib/paraglide/messages.js";
+import { type Theme, themeStore } from "$lib/stores/theme.svelte";
+
+let {
+	open = $bindable(false),
+}: {
+	open?: boolean;
+} = $props();
+
+let activeTab = $state("profile");
+
+// Profile
+let name = $state("");
+let email = $state("");
+let profileStatus = $state<"idle" | "saving" | "saved" | "error">("idle");
+let profileError = $state("");
+
+// Password
+let currentPassword = $state("");
+let newPassword = $state("");
+let confirmPassword = $state("");
+let passwordStatus = $state<"idle" | "saving" | "saved" | "error">("idle");
+let passwordError = $state("");
+
+onMount(async () => {
+	try {
+		const profile = await getProfile();
+		if (profile.name) name = profile.name;
+		if (profile.email) email = profile.email;
+	} catch {
+		// use defaults
+	}
+});
+
+async function saveProfile() {
+	profileStatus = "saving";
+	profileError = "";
+	try {
+		await updateProfile({ name });
+		profileStatus = "saved";
+		setTimeout(() => {
+			profileStatus = "idle";
+		}, 2000);
+	} catch (e) {
+		profileStatus = "error";
+		profileError = e instanceof Error ? e.message : m.error_document_save();
+	}
+}
+
+async function changePassword() {
+	passwordError = "";
+	if (newPassword !== confirmPassword) {
+		passwordStatus = "error";
+		passwordError = m.auth_password_mismatch();
+		return;
+	}
+	if (newPassword.length < 8) {
+		passwordStatus = "error";
+		passwordError = m.auth_password_min();
+		return;
+	}
+	passwordStatus = "saving";
+	try {
+		// Better Auth exposes a dedicated change-password endpoint
+		// (POST /api/auth/change-password) that requires `currentPassword` and
+		// `newPassword`. The previous `update-user` route is for profile fields
+		// (name/email) and rejected this body with 400. revokeOtherSessions
+		// invalidates any other active sessions for this user.
+		const { error } = await authClient.changePassword({
+			currentPassword,
+			newPassword,
+			revokeOtherSessions: true,
+		});
+		if (error) {
+			passwordStatus = "error";
+			passwordError = error.message ?? m.error_generic();
+			return;
+		}
+		passwordStatus = "saved";
+		currentPassword = "";
+		newPassword = "";
+		confirmPassword = "";
+		setTimeout(() => {
+			passwordStatus = "idle";
+		}, 2000);
+	} catch (e) {
+		passwordStatus = "error";
+		passwordError = e instanceof Error ? e.message : m.error_generic();
+	}
+}
+
+function pickTheme(value: Theme) {
+	themeStore.set(value);
+}
+
+const themeOptions: Array<{ value: Theme; label: string; key: string }> = [
+	{ value: "light", label: m.theme_light(), key: "light" },
+	{ value: "dark", label: m.theme_dark(), key: "dark" },
+	{ value: "system", label: m.theme_system(), key: "system" },
+];
+
+let loggingOut = $state(false);
+
+async function handleLogout() {
+	loggingOut = true;
+	try {
+		await signOut();
+		open = false;
+		goto("/login");
+	} catch {
+		loggingOut = false;
+	}
+}
+
+function close() {
+	open = false;
+}
+</script>
+
+<Dialog.Dialog bind:open>
+	<Dialog.DialogHeader>
+		<Dialog.DialogTitle>{m.settings_title()}</Dialog.DialogTitle>
+		<Dialog.DialogDescription>
+			{m.settings_account()}
+		</Dialog.DialogDescription>
+	</Dialog.DialogHeader>
+
+	<Tabs.Tabs bind:value={activeTab} class="w-full">
+		<Tabs.TabsList class="grid w-full grid-cols-3">
+			<Tabs.TabsTrigger
+				value="profile"
+				selected={activeTab === "profile"}
+				onclick={(v) => (activeTab = v)}
+			>
+				{m.settings_profile()}
+			</Tabs.TabsTrigger>
+			<Tabs.TabsTrigger
+				value="password"
+				selected={activeTab === "password"}
+				onclick={(v) => (activeTab = v)}
+			>
+				{m.password_label()}
+			</Tabs.TabsTrigger>
+			<Tabs.TabsTrigger
+				value="appearance"
+				selected={activeTab === "appearance"}
+				onclick={(v) => (activeTab = v)}
+			>
+				{m.settings_appearance()}
+			</Tabs.TabsTrigger>
+		</Tabs.TabsList>
+
+		<Tabs.TabsContent value="profile" currentValue={activeTab}>
+			<form onsubmit={(e) => { e.preventDefault(); saveProfile(); }} class="space-y-4">
+				<div class="space-y-2">
+					<Label for="settings-name">{m.settings_name()}</Label>
+					<Input id="settings-name" type="text" name="name" bind:value={name} autocomplete="name" />
+				</div>
+				<div class="space-y-2">
+					<Label for="settings-email">{m.settings_email()}</Label>
+					<Input id="settings-email" type="email" name="email" bind:value={email} autocomplete="email" disabled />
+				</div>
+				{#if profileError}
+					<p class="text-sm text-destructive">{profileError}</p>
+				{/if}
+				<Button type="submit" disabled={profileStatus === "saving"}>
+					{#if profileStatus === "saving"}
+						<Loader2 class="mr-2 size-4 animate-spin" />
+					{:else}
+						<Save class="mr-2 size-4" />
+					{/if}
+					{profileStatus === "saved" ? m.settings_saved_status() : m.settings_save()}
+				</Button>
+			</form>
+		</Tabs.TabsContent>
+
+		<Tabs.TabsContent value="password" currentValue={activeTab}>
+			<form onsubmit={(e) => { e.preventDefault(); changePassword(); }} class="space-y-4">
+				<div class="space-y-2">
+					<Label for="settings-current-password">{m.auth_password()}</Label>
+					<Input
+						id="settings-current-password"
+						type="password"
+						name="current-password"
+						bind:value={currentPassword}
+						autocomplete="current-password"
+					/>
+				</div>
+				<div class="space-y-2">
+					<Label for="settings-new-password">{m.new_password()}</Label>
+					<Input
+						id="settings-new-password"
+						type="password"
+						name="new-password"
+						bind:value={newPassword}
+						autocomplete="new-password"
+					/>
+				</div>
+				<div class="space-y-2">
+					<Label for="settings-confirm-password">{m.confirm_password()}</Label>
+					<Input
+						id="settings-confirm-password"
+						type="password"
+						name="confirm-password"
+						bind:value={confirmPassword}
+						autocomplete="new-password"
+					/>
+				</div>
+				{#if passwordError}
+					<p class="text-sm text-destructive">{passwordError}</p>
+				{/if}
+				<Button type="submit" disabled={passwordStatus === "saving"}>
+					{#if passwordStatus === "saving"}
+						<Loader2 class="mr-2 size-4 animate-spin" />
+					{/if}
+					{passwordStatus === "saved" ? m.settings_saved_status() : m.change_password()}
+				</Button>
+			</form>
+		</Tabs.TabsContent>
+
+		<Tabs.TabsContent value="appearance" currentValue={activeTab}>
+			<div class="space-y-4">
+				<div class="space-y-2">
+					<Label>{m.settings_theme()}</Label>
+					<p class="text-xs text-muted-foreground">{m.settings_appearance()}</p>
+				</div>
+				<div class="grid grid-cols-3 gap-2">
+					{#each themeOptions as opt (opt.key)}
+						<button
+							type="button"
+							onclick={() => pickTheme(opt.value)}
+							class={[
+								"rounded-md border px-3 py-2 text-sm font-medium transition-colors",
+								themeStore.value === opt.value
+									? "border-primary bg-primary text-primary-foreground"
+									: "border-border text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+							].join(" ")}
+						>
+							{opt.label}
+						</button>
+					{/each}
+				</div>
+			</div>
+		</Tabs.TabsContent>
+	</Tabs.Tabs>
+
+	<Dialog.DialogFooter>
+		<Button
+			id="logout-button"
+			variant="ghost"
+			onclick={handleLogout}
+			disabled={loggingOut}
+			class="mr-auto text-muted-foreground hover:text-destructive"
+		>
+			<LogOut class="mr-2 size-4" />
+			{loggingOut ? "…" : m.auth_logout()}
+		</Button>
+		<Button variant="outline" onclick={close}>{m.action_close()}</Button>
+	</Dialog.DialogFooter>
+</Dialog.Dialog>

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

@@ -0,0 +1,158 @@
+<script lang="ts">
+import { createShareLink } from "$lib/api/share";
+import * as m from "$lib/paraglide/messages.js";
+
+let {
+	open = $bindable(false),
+	documentId = "",
+	documentTitle = "",
+}: {
+	open?: boolean;
+	documentId?: string;
+	documentTitle?: string;
+} = $props();
+
+let usePassword = $state(false);
+let password = $state("");
+let expiresIn = $state<"1h" | "1d" | "7d" | "30d" | "never">("7d");
+let guestEmail = $state("");
+let guestEmails = $state<string[]>([]);
+let shareUrl = $state("");
+let copied = $state(false);
+let creating = $state(false);
+let error = $state("");
+
+function addGuest() {
+	const email = guestEmail.trim();
+	if (email?.includes("@") && !guestEmails.includes(email)) {
+		guestEmails = [...guestEmails, email];
+		guestEmail = "";
+	}
+}
+
+function removeGuest(email: string) {
+	guestEmails = guestEmails.filter((e) => e !== email);
+}
+
+async function createLink() {
+	creating = true;
+	error = "";
+	try {
+		const result = await createShareLink({
+			documentId: documentId || undefined,
+			password: usePassword ? password : undefined,
+			expiresIn,
+			guestEmails: guestEmails.length > 0 ? guestEmails : undefined,
+		});
+		shareUrl = `${window.location.origin}/s/${result.token}`;
+	} catch (e) {
+		error = e instanceof Error ? e.message : m.error_generic();
+		console.error("ShareDialog: createShareLink failed", e);
+	} finally {
+		creating = false;
+	}
+}
+
+async function copyLink() {
+	if (shareUrl) {
+		await navigator.clipboard.writeText(shareUrl);
+		copied = true;
+		setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+}
+
+function close() {
+	open = false;
+	shareUrl = "";
+	usePassword = false;
+	password = "";
+	expiresIn = "7d";
+	guestEmails = [];
+	error = "";
+}
+</script>
+
+{#if open}
+  <div class="fixed inset-0 z-50 flex items-center justify-center">
+    <button onclick={close} class="absolute inset-0 bg-black/50" aria-label={m.action_close()}></button>
+    <div class="relative z-10 w-full max-w-md rounded-lg border border-border bg-background p-6 shadow-lg">
+      <div class="mb-4 flex items-center justify-between">
+        <h2 class="text-lg font-semibold">{m.share_create_title()} "{documentTitle}"</h2>
+        <button onclick={close} class="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground" aria-label={m.action_close()}>&#10005;</button>
+      </div>
+
+      {#if !shareUrl}
+        <div class="space-y-4">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-medium">{m.share_password_protection()}</span>
+            <button
+              onclick={() => { usePassword = !usePassword; }}
+              class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors {usePassword ? 'bg-primary' : 'bg-input'}"
+              role="switch"
+              aria-checked={usePassword}
+              aria-label={m.share_toggle_password()}
+            >
+              <span class="inline-block h-4 w-4 rounded-full bg-white shadow transition-transform {usePassword ? 'translate-x-4' : 'translate-x-0.5'}"></span>
+            </button>
+          </div>
+          {#if usePassword}
+            <input type="password" bind:value={password} placeholder={m.share_enter_password()} class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+          {/if}
+
+          <div class="space-y-2">
+            <span class="text-sm font-medium">{m.share_expires()}</span>
+            <div class="flex gap-2">
+              {#each [["1h", m.share_expires_1h()], ["1d", m.share_expires_1d()], ["7d", m.share_expires_7d()], ["30d", m.share_expires_30d()], ["never", m.share_expires_never()]] as [val, label]}
+                <button
+                  onclick={() => { expiresIn = val as typeof expiresIn; }}
+                  class="rounded-md border px-2.5 py-1 text-xs font-medium transition-colors
+                    {expiresIn === val ? 'border-primary bg-primary text-primary-foreground' : 'border-border text-muted-foreground hover:bg-accent'}"
+                >
+                  {label}
+                </button>
+              {/each}
+            </div>
+          </div>
+
+          <div class="space-y-2">
+            <span class="text-sm font-medium">{m.share_guest_access()}</span>
+            <div class="flex gap-2">
+              <input type="email" bind:value={guestEmail} placeholder="guest@email.com" onkeydown={(e) => { if (e.key === "Enter") { e.preventDefault(); addGuest(); } }} class="flex h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+              <button onclick={addGuest} class="rounded-md border border-border px-3 py-1.5 text-sm font-medium hover:bg-accent">{m.share_add()}</button>
+            </div>
+            {#if guestEmails.length > 0}
+              <div class="flex flex-wrap gap-1.5">
+                {#each guestEmails as email}
+                  <span class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs">
+                    {email}
+                    <button onclick={() => removeGuest(email)} class="text-muted-foreground hover:text-foreground">&times;</button>
+                  </span>
+                {/each}
+              </div>
+            {/if}
+          </div>
+
+          {#if error}
+            <p class="text-xs text-destructive">{error}</p>
+          {/if}
+          <button onclick={createLink} disabled={creating} class="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50">
+            {creating ? m.share_creating() : m.share_create_link()}
+          </button>
+        </div>
+      {:else}
+        <div class="space-y-4">
+          <p class="text-sm text-muted-foreground">{m.share_link_created()}</p>
+          <div class="flex items-center gap-2">
+            <code class="flex-1 truncate rounded-md bg-muted px-3 py-2 text-sm">{shareUrl}</code>
+            <button onclick={copyLink} class="rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
+              {copied ? m.share_link_copied() : m.share_copy()}
+            </button>
+          </div>
+          <button onclick={close} class="w-full rounded-md border border-border px-4 py-2 text-sm font-medium hover:bg-accent">{m.action_done()}</button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { apiFetch } from "$lib/api/client";
+import * as m from "$lib/paraglide/messages.js";
+
+const {
+	token = "",
+	expiresAt = "",
+	hasPassword = false,
+	guestEmails = [],
+	linkId = "",
+	onRevoke,
+}: {
+	token?: string;
+	expiresAt?: string;
+	hasPassword?: boolean;
+	guestEmails?: string[];
+	linkId?: string;
+	onRevoke?: () => void;
+} = $props();
+
+let copied = $state(false);
+let confirmRevoke = $state(false);
+
+const shareUrl = $derived(
+	`${typeof window !== "undefined" ? window.location.origin : ""}/s/${token}`,
+);
+
+async function copyLink() {
+	await navigator.clipboard.writeText(shareUrl);
+	copied = true;
+	setTimeout(() => {
+		copied = false;
+	}, 2000);
+}
+
+function formatExpiry(dateStr: string): string {
+	if (!dateStr) return m.share_never_expires();
+	const date = new Date(dateStr);
+	const now = new Date();
+	if (date < now) return m.share_expired_label();
+	return m.share_expires_date({ date: date.toLocaleDateString() });
+}
+
+function removeGuest(email: string) {
+	if (!linkId) {
+		console.error("removeGuest called without linkId");
+		return;
+	}
+	apiFetch(`/api/share/${linkId}/guests/${encodeURIComponent(email)}`, {
+		method: "DELETE",
+	})
+		.then(() => {
+			// Backend already removed the row; consumer should re-fetch guest list
+		})
+		.catch((e: unknown) => console.error("Failed to remove guest", e));
+}
+</script>
+
+<div class="rounded-lg border border-border bg-card p-4">
+  <div class="mb-3 flex items-center gap-2">
+    <code class="flex-1 truncate text-sm">{shareUrl}</code>
+    <button onclick={copyLink} class="rounded-md border border-border px-2.5 py-1 text-xs font-medium hover:bg-accent">
+      {copied ? m.share_link_copied() : m.share_copy()}
+    </button>
+  </div>
+
+  <div class="mb-3 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+    <span>{formatExpiry(expiresAt)}</span>
+    {#if hasPassword}
+      <span class="inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5">
+        <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+        {m.share_password_label()}
+      </span>
+    {/if}
+  </div>
+
+  {#if guestEmails.length > 0}
+    <div class="mb-3 space-y-1">
+      <p class="text-xs font-medium text-muted-foreground">{m.share_guests()}</p>
+      {#each guestEmails as email}
+        <div class="flex items-center justify-between rounded bg-muted px-2 py-1 text-xs">
+          <span>{email}</span>
+          <button onclick={() => removeGuest(email)} class="text-muted-foreground hover:text-destructive" aria-label={m.attachment_remove()}>&times;</button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if !confirmRevoke}
+    <button onclick={() => { confirmRevoke = true; }} class="text-xs font-medium text-destructive hover:underline">{m.share_revoke_link()}</button>
+  {:else}
+    <div class="flex items-center gap-2">
+      <span class="text-xs text-destructive">{m.share_revoke_confirm()}</span>
+      <button onclick={onRevoke} class="rounded bg-destructive px-2 py-0.5 text-xs font-medium text-destructive-foreground">{m.share_yes()}</button>
+      <button onclick={() => { confirmRevoke = false; }} class="rounded border border-border px-2 py-0.5 text-xs">{m.action_cancel()}</button>
+    </div>
+  {/if}
+</div>