@hiai-gg/hiai-docs 0.0.1

package/frontend/src/lib/components/sidebar/RecentDocs.svelte

@@ -0,0 +1,311 @@
+<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 {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@hiai-gg/hiai-ui/components/ui/dropdown-menu";
+import { Input } from "@hiai-gg/hiai-ui/components/ui/input";
+import { Label } from "@hiai-gg/hiai-ui/components/ui/label";
+import { Check, Copy, FileText, Loader2, MoreVertical } from "lucide-svelte";
+import { onDestroy, onMount } from "svelte";
+import {
+	type Document,
+	deleteDocument,
+	getDocument,
+	listDocuments,
+	updateDocument,
+} from "$lib/api/documents";
+import { ConfirmDialog } from "$lib/components/ui/confirm-dialog";
+import * as m from "$lib/paraglide/messages.js";
+import {
+	getDocRefreshNonce,
+	getSelectedTag,
+	refreshDocs,
+} from "$lib/stores/tag-store.svelte";
+import { copyToClipboard } from "$lib/utils/clipboard.js";
+import { cn } from "$lib/utils.js";
+
+let recentDocs = $state<Document[]>([]);
+let activeId = $state<string | null>(null);
+let loadError = $state<string | null>(null);
+let copiedDocId = $state<string | null>(null);
+let copyLoadingDocId = $state<string | null>(null);
+let copyTimer: ReturnType<typeof setTimeout> | null = null;
+
+// Rename dialog state.
+let showRenameDialog = $state(false);
+let renameTarget = $state<{ id: string; title: string } | null>(null);
+let renameValue = $state("");
+let renameError = $state<string | null>(null);
+let renameSubmitting = $state(false);
+
+// Delete confirmation state.
+let showDeleteDialog = $state(false);
+let deleteTarget = $state<{ id: string; title: string } | null>(null);
+let deleteBusy = $state(false);
+
+async function fetchRecentDocs() {
+	try {
+		const tag = getSelectedTag();
+		const res = await listDocuments({ limit: 6, ...(tag ? { tag } : {}) });
+		recentDocs = res.items;
+		loadError = null;
+	} catch (e) {
+		console.error("RecentDocs: failed to load recent documents", e);
+		loadError = "Failed to load recent documents";
+	}
+}
+
+onMount(() => {
+	void fetchRecentDocs();
+});
+
+// Re-fetch the recent documents list whenever the global doc refresh
+// nonce changes (e.g. after a dashboard import or another component
+// calls refreshDocs()). Reading the nonce inside the effect registers
+// it as a reactive dependency.
+$effect(() => {
+	void getDocRefreshNonce();
+	// Re-filter when the shared selected tag changes (set from TagList).
+	void getSelectedTag();
+	void fetchRecentDocs();
+});
+
+onDestroy(() => {
+	if (copyTimer) {
+		clearTimeout(copyTimer);
+		copyTimer = null;
+	}
+});
+
+async function handleCopyContent(e: MouseEvent, docId: string) {
+	e.preventDefault();
+	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 whatever the list payload already has
+	// (excerpt, then truncated content) so the button never silently
+	// does nothing.
+	const cached = recentDocs.find((d) => d.id === docId);
+	let text = "";
+	copyLoadingDocId = docId;
+	try {
+		const full = await getDocument(docId);
+		text = full.content ?? "";
+	} catch (err) {
+		console.error("RecentDocs: failed to fetch full document for copy", err);
+		text = cached?.excerpt ?? cached?.content ?? "";
+	} finally {
+		copyLoadingDocId = null;
+	}
+	if (!text) return;
+	const ok = await copyToClipboard(text);
+	if (!ok) return;
+	copiedDocId = docId;
+	if (copyTimer) clearTimeout(copyTimer);
+	copyTimer = setTimeout(() => {
+		copiedDocId = null;
+		copyTimer = null;
+	}, 2000);
+}
+
+// --- Rename / delete ---
+function startRename(id: string, title: string) {
+	renameTarget = { id, title };
+	renameValue = title;
+	renameError = null;
+	showRenameDialog = true;
+}
+
+function closeRenameDialog() {
+	showRenameDialog = false;
+	renameTarget = null;
+	renameValue = "";
+	renameError = null;
+	renameSubmitting = false;
+}
+
+async function submitRename(e?: Event) {
+	e?.preventDefault();
+	const target = renameTarget;
+	if (!target) return;
+	const trimmed = renameValue.trim();
+	if (trimmed.length === 0) {
+		renameError = "Name is required";
+		return;
+	}
+	renameSubmitting = true;
+	try {
+		await updateDocument(target.id, { title: trimmed });
+		closeRenameDialog();
+		await fetchRecentDocs();
+		// Notify the other sidebar lists (FolderTree) to refetch.
+		refreshDocs();
+	} catch (err) {
+		console.error("RecentDocs: rename failed", err);
+		renameError = err instanceof Error ? err.message : m.error_generic();
+	} finally {
+		renameSubmitting = false;
+	}
+}
+
+function startDelete(id: string, title: string) {
+	deleteTarget = { id, title };
+	showDeleteDialog = true;
+}
+
+function cancelDelete() {
+	showDeleteDialog = false;
+	deleteTarget = null;
+	deleteBusy = false;
+}
+
+async function confirmDelete() {
+	const target = deleteTarget;
+	if (!target || deleteBusy) return;
+	deleteBusy = true;
+	try {
+		await deleteDocument(target.id);
+		cancelDelete();
+		await fetchRecentDocs();
+		refreshDocs();
+	} catch (err) {
+		console.error("RecentDocs: delete failed", err);
+		loadError = err instanceof Error ? err.message : m.error_generic();
+		deleteBusy = false;
+	}
+}
+</script>
+
+<div class="space-y-1">
+  <h3 class="mb-2 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">{m.sidebar_recent()}</h3>
+  {#if loadError}
+    <p class="px-2 text-xs text-destructive">{loadError}</p>
+  {/if}
+  {#each recentDocs as doc (doc.id)}
+    <div class="group/doc flex min-w-0 items-center gap-1">
+      <a
+        href={`/docs/${doc.id}`}
+        onclick={() => { activeId = doc.id; }}
+        class={cn(
+          "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+          activeId === doc.id && "bg-accent text-accent-foreground"
+        )}
+      >
+        <FileText class="size-4 shrink-0 text-muted-foreground" />
+        <div class="min-w-0 flex-1">
+          <p class="truncate min-w-0">{doc.title}</p>
+          <p class="text-xs text-muted-foreground">{doc.updatedAt}</p>
+        </div>
+      </a>
+      <button
+        type="button"
+        class="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-accent-foreground group-hover/doc:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring {copiedDocId === doc.id || copyLoadingDocId === doc.id ? 'opacity-100' : ''}"
+        aria-label={m.action_copy_content()}
+        title={m.action_copy_content()}
+        disabled={copyLoadingDocId === doc.id}
+        onclick={(e: MouseEvent) => void handleCopyContent(e, doc.id)}
+      >
+        {#if copyLoadingDocId === doc.id}
+          <Loader2 class="size-3.5 animate-spin" />
+        {:else if copiedDocId === doc.id}
+          <Check class="size-3.5" />
+        {:else}
+          <Copy class="size-3.5" />
+        {/if}
+      </button>
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          {#snippet child({ props })}
+            <button
+              {...props}
+              type="button"
+              class="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-accent-foreground group-hover/doc:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={m.editor_more_options()}
+              title={m.editor_more_options()}
+              onclick={(e: MouseEvent) => { e.preventDefault(); e.stopPropagation(); }}
+            >
+              <MoreVertical class="size-3.5" />
+            </button>
+          {/snippet}
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={() => startRename(doc.id, doc.title)}>
+            {m.folders_rename()}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            class="text-destructive focus:text-destructive"
+            onSelect={() => startDelete(doc.id, doc.title)}
+          >
+            {m.action_delete()}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  {/each}
+</div>
+
+<!-- Rename dialog -->
+<Dialog bind:open={showRenameDialog} onOpenChange={(next) => { if (!next) closeRenameDialog(); }}>
+  <DialogHeader>
+    <DialogTitle>{m.folders_rename()}</DialogTitle>
+    <DialogDescription>{m.doc_title_label()}</DialogDescription>
+  </DialogHeader>
+
+  <form onsubmit={submitRename} class="space-y-4">
+    <div class="space-y-2">
+      <Label for="recent-rename-input">{m.doc_title_label()}</Label>
+      <Input
+        id="recent-rename-input"
+        name="name"
+        type="text"
+        bind:value={renameValue}
+        maxlength={255}
+        required
+        disabled={renameSubmitting}
+        aria-invalid={renameError ? "true" : undefined}
+        aria-describedby={renameError ? "recent-rename-input-error" : undefined}
+        autocomplete="off"
+      />
+      {#if renameError}
+        <p id="recent-rename-input-error" class="text-xs text-destructive" role="alert">{renameError}</p>
+      {/if}
+    </div>
+  </form>
+
+  <DialogFooter>
+    <Button variant="outline" type="button" onclick={closeRenameDialog} disabled={renameSubmitting}>
+      {m.action_cancel()}
+    </Button>
+    <Button
+      type="submit"
+      onclick={submitRename}
+      disabled={renameSubmitting || renameValue.trim().length === 0}
+    >
+      {renameSubmitting ? m.action_loading() : m.action_save()}
+    </Button>
+  </DialogFooter>
+</Dialog>
+
+<!-- Delete confirmation -->
+<ConfirmDialog
+  bind:open={showDeleteDialog}
+  title={m.doc_delete()}
+  description={m.doc_delete_confirm()}
+  confirmLabel={m.action_delete()}
+  variant="destructive"
+  busy={deleteBusy}
+  onConfirm={confirmDelete}
+  onCancel={cancelDelete}
+/>

package/frontend/src/lib/components/sidebar/Sidebar.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+import {
+	Clock,
+	Folder,
+	PanelLeftClose,
+	PanelLeftOpen,
+	Search,
+	Settings as SettingsIcon,
+	Tag,
+} from "lucide-svelte";
+import { goto } from "$app/navigation";
+import SearchBar from "$lib/components/SearchBar.svelte";
+import SettingsDialog from "$lib/components/SettingsDialog.svelte";
+import FolderTree from "$lib/components/sidebar/FolderTree.svelte";
+import RecentDocs from "$lib/components/sidebar/RecentDocs.svelte";
+import TagList from "$lib/components/sidebar/TagList.svelte";
+import * as m from "$lib/paraglide/messages.js";
+import { cn } from "$lib/utils";
+
+let collapsed = $state(false);
+let showSettings = $state(false);
+type PanelMode = "all" | "recent" | "tags";
+let activePanel = $state<PanelMode>("all");
+
+function openSearch() {
+	goto("/search");
+}
+
+function togglePanel(mode: PanelMode) {
+	activePanel = activePanel === mode ? "all" : mode;
+	collapsed = false;
+}
+
+function toggleCollapse() {
+	collapsed = !collapsed;
+	if (collapsed) {
+		activePanel = "all";
+	}
+}
+</script>
+
+<aside class={cn(
+  "relative flex h-screen flex-col border-r border-border bg-card transition-[width] duration-200",
+  collapsed ? "w-12" : "w-64"
+)}>
+  <!-- Toggle -->
+  <button
+    onclick={toggleCollapse}
+    class="absolute -right-3 top-4 z-50 flex size-6 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent"
+  >
+    {#if collapsed}
+      <PanelLeftOpen class="size-3.5" />
+    {:else}
+      <PanelLeftClose class="size-3.5" />
+    {/if}
+  </button>
+
+  {#if !collapsed}
+    <div class="flex flex-1 flex-col gap-4 overflow-y-auto p-3">
+      <!-- Search — leave a right gap so the collapse toggle button
+           (positioned at the panel's top-right edge) stays clear of it. -->
+      <SearchBar class="mr-5" />
+
+      {#if activePanel === "all"}
+        <!-- Folders -->
+        <FolderTree />
+
+        <!-- Separator -->
+        <div class="h-px bg-border"></div>
+      {/if}
+
+      {#if activePanel === "all" || activePanel === "recent"}
+        <!-- Recent Docs -->
+        <RecentDocs />
+
+        <!-- Separator -->
+        <div class="h-px bg-border"></div>
+      {/if}
+
+      {#if activePanel === "all" || activePanel === "tags"}
+        <!-- Tags -->
+        <TagList />
+      {/if}
+    </div>
+  {:else}
+    <div class="flex flex-1 flex-col items-center gap-1 pt-14">
+      <button
+        onclick={() => goto("/")}
+        class="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        title={m.sidebar_folders()}
+        aria-label={m.sidebar_folders()}
+      >
+        <Folder class="size-4" />
+      </button>
+      <button
+        onclick={openSearch}
+        class="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        title={m.search_title()}
+        aria-label={m.search_title()}
+      >
+        <Search class="size-4" />
+      </button>
+      <button
+        onclick={() => togglePanel("recent")}
+        class="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        title={m.sidebar_recent()}
+        aria-label={m.sidebar_recent()}
+      >
+        <Clock class="size-4" />
+      </button>
+      <button
+        onclick={() => togglePanel("tags")}
+        class="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        title={m.doc_tags()}
+        aria-label={m.doc_tags()}
+      >
+        <Tag class="size-4" />
+      </button>
+    </div>
+  {/if}
+
+  <div class={cn("p-2", collapsed ? "flex flex-col items-center gap-2" : "space-y-2")}>
+    <button
+      type="button"
+      onclick={() => { showSettings = true; }}
+      class={cn(
+        "flex items-center rounded-md text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+        collapsed ? "size-8 justify-center" : "w-full gap-2 px-2 py-1.5"
+      )}
+      title={m.settings_title()}
+      aria-label={m.settings_title()}
+    >
+      <SettingsIcon class="size-4 shrink-0" />
+      {#if !collapsed}
+        <span class="truncate">{m.settings_title()}</span>
+      {/if}
+    </button>
+  </div>
+  <div class="border-t border-border p-2">
+    <a
+      href="https://hiai.gg/docs"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-xs text-muted-foreground hover:text-foreground transition-colors"
+      title={m.sidebar_powered_by()}
+    >
+      {#if collapsed}
+        HiAi
+      {:else}
+        {m.sidebar_powered_by()}
+      {/if}
+    </a>
+  </div>
+</aside>
+
+<SettingsDialog bind:open={showSettings} />

package/frontend/src/lib/components/sidebar/TagList.svelte

@@ -0,0 +1,200 @@
+<!-- TagList.svelte — Sidebar list of tags with filter toggle, create, edit, delete. -->
+<script lang="ts">
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@hiai-gg/hiai-ui/components/ui/dropdown-menu";
+import { Loader2, MoreVertical, Plus } from "lucide-svelte";
+import { onMount } from "svelte";
+import { deleteTag, listTags, type Tag } from "$lib/api/tags";
+import TagCreateDialog from "$lib/components/TagCreateDialog.svelte";
+import { ConfirmDialog } from "$lib/components/ui/confirm-dialog";
+import * as m from "$lib/paraglide/messages.js";
+import {
+	getSelectedTag,
+	getTagRefreshNonce,
+	refreshTags,
+	setSelectedTag,
+} from "$lib/stores/tag-store.svelte";
+import { cn } from "$lib/utils";
+
+let tags = $state<Tag[]>([]);
+let loadError = $state<string | null>(null);
+let showCreateDialog = $state(false);
+let editTarget = $state<Tag | null>(null);
+let showDeleteDialog = $state(false);
+let deleteTarget = $state<Tag | null>(null);
+let busy = $state(false);
+
+async function refresh() {
+	try {
+		tags = await listTags();
+	} catch (e) {
+		console.error("TagList: failed to load tags", e);
+		loadError = m.tags_load_error();
+	}
+}
+
+onMount(() => {
+	void refresh();
+});
+
+// React to the global refresh nonce so tag mutations from other parts of
+// the app (e.g. the document editor) reflect here without a page reload.
+$effect(() => {
+	getTagRefreshNonce();
+	void refresh();
+});
+
+function handleCreated(created: Tag) {
+	// Optimistically add the new tag to the list so the user sees it
+	// appear immediately. The next listTags() roundtrip will reconcile.
+	tags = [...tags, created];
+	refreshTags();
+	void refresh();
+}
+
+function handleUpdated(updated: Tag) {
+	tags = tags.map((t) => (t.id === updated.id ? updated : t));
+	refreshTags();
+}
+
+function startEdit(t: Tag) {
+	editTarget = t;
+	showCreateDialog = true;
+}
+
+function handleDialogClose() {
+	// Clear the edit target whenever the dialog is dismissed so the next
+	// open defaults back to create mode.
+	editTarget = null;
+}
+
+function startDelete(t: Tag) {
+	deleteTarget = t;
+	showDeleteDialog = true;
+}
+
+function cancelDelete() {
+	showDeleteDialog = false;
+	deleteTarget = null;
+}
+
+async function confirmDelete() {
+	const t = deleteTarget;
+	if (!t || busy) return;
+	busy = true;
+	try {
+		await deleteTag(t.id);
+		tags = tags.filter((tag) => tag.id !== t.id);
+		if (getSelectedTag() === t.id) setSelectedTag(null);
+		showDeleteDialog = false;
+		deleteTarget = null;
+		refreshTags();
+	} catch (e) {
+		console.error("TagList: deleteTag failed", e);
+		loadError = m.error_generic();
+	} finally {
+		busy = false;
+	}
+}
+</script>
+
+<div class="space-y-1">
+  <h3 class="mb-2 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+    {m.doc_tags()}
+  </h3>
+  {#if loadError}
+    <p class="px-2 text-xs text-destructive">{loadError}</p>
+  {/if}
+  <div class="flex flex-wrap gap-1 px-2">
+    {#each tags as tag (tag.id)}
+      <div
+        class={cn(
+          "group/tag relative inline-flex items-center rounded-full transition-colors",
+          getSelectedTag() === tag.id
+            ? "bg-primary text-primary-foreground"
+            : "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        )}
+      >
+        <button
+          type="button"
+          onclick={() => setSelectedTag(getSelectedTag() === tag.id ? null : tag.id, tag.name)}
+          class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+          aria-pressed={getSelectedTag() === tag.id}
+        >
+          <span
+            class="size-2.5 shrink-0 rounded-full"
+            style="background-color: {tag.color || '#888888'}"
+          ></span>
+          {tag.name}
+        </button>
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            {#snippet child({ props })}
+              <button
+                {...props}
+                type="button"
+                class={cn(
+                  "mr-0.5 inline-flex size-5 items-center justify-center rounded-full opacity-0 transition-opacity hover:bg-black/10 focus-visible:opacity-100 focus-visible:outline-none group-hover/tag:opacity-100",
+                  getSelectedTag() === tag.id && "opacity-100",
+                )}
+                aria-label={m.editor_more_options()}
+                title={m.editor_more_options()}
+                disabled={busy}
+              >
+                {#if busy}
+                  <Loader2 class="size-3 animate-spin" />
+                {:else}
+                  <MoreVertical class="size-3" />
+                {/if}
+              </button>
+            {/snippet}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem onSelect={() => startEdit(tag)}>
+              {m.action_edit()}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              class="text-destructive focus:text-destructive"
+              onSelect={() => startDelete(tag)}
+            >
+              {m.action_delete()}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    {/each}
+    <button
+      type="button"
+      onclick={() => { editTarget = null; showCreateDialog = true; }}
+      class="inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-secondary hover:text-secondary-foreground"
+      aria-label={m.tags_new()}
+    >
+      <Plus class="size-3" />
+      {m.tags_add()}
+    </button>
+  </div>
+</div>
+
+<TagCreateDialog
+  bind:open={showCreateDialog}
+  mode={editTarget ? "edit" : "create"}
+  tag={editTarget}
+  onCreated={handleCreated}
+  onUpdated={handleUpdated}
+  onClose={handleDialogClose}
+/>
+
+<ConfirmDialog
+  bind:open={showDeleteDialog}
+  title={m.tags_delete_title()}
+  description={m.tags_delete_description()}
+  confirmLabel={m.action_delete()}
+  variant="destructive"
+  busy={busy}
+  onConfirm={confirmDelete}
+  onCancel={cancelDelete}
+/>