@hiai-gg/hiai-docs 0.0.1

package/frontend/src/lib/components/ui/confirm-dialog/ConfirmDialog.svelte

@@ -0,0 +1,76 @@
+<!-- ConfirmDialog.svelte — Generic confirmation dialog used in place of
+     window.confirm() so destructive actions get styled, accessible UI. -->
+<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 { Loader2 } from "lucide-svelte";
+import * as m from "$lib/paraglide/messages.js";
+
+let {
+	open = $bindable(false),
+	title,
+	description,
+	confirmLabel,
+	cancelLabel,
+	variant = "default",
+	busy = false,
+	onConfirm,
+	onCancel,
+}: {
+	open?: boolean;
+	title: string;
+	description?: string;
+	confirmLabel?: string;
+	cancelLabel?: string;
+	variant?: "default" | "destructive";
+	busy?: boolean;
+	onConfirm?: () => void;
+	onCancel?: () => void;
+} = $props();
+
+function close() {
+	if (busy) return;
+	open = false;
+	onCancel?.();
+}
+
+function handleConfirm() {
+	onConfirm?.();
+}
+</script>
+
+<Dialog
+	bind:open
+	onOpenChange={(next) => {
+		if (!next) onCancel?.();
+	}}
+>
+	<DialogHeader>
+		<DialogTitle>{title}</DialogTitle>
+		{#if description}
+			<DialogDescription>{description}</DialogDescription>
+		{/if}
+	</DialogHeader>
+	<DialogFooter>
+		<Button variant="outline" type="button" onclick={close} disabled={busy}>
+			{cancelLabel ?? m.action_cancel()}
+		</Button>
+		<Button
+			type="button"
+			variant={variant === "destructive" ? "destructive" : "default"}
+			onclick={handleConfirm}
+			disabled={busy}
+		>
+			{#if busy}
+				<Loader2 class="mr-1 size-4 animate-spin" />
+			{/if}
+			{confirmLabel ?? m.action_confirm()}
+		</Button>
+	</DialogFooter>
+</Dialog>

package/frontend/src/lib/components/ui/confirm-dialog/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmDialog } from "./ConfirmDialog.svelte";

package/frontend/src/lib/stores/tag-store.svelte.ts

@@ -0,0 +1,56 @@
+// tag-store.svelte.ts — Module-level reactive signal for cross-component
+// tag list refresh. The sidebar TagList loads tags only on mount, so any
+// tag mutation elsewhere (e.g. the document editor) needs to nudge it to
+// reload. We expose a simple monotonically-increasing nonce that callers
+// can read inside a $effect to trigger refreshes.
+
+let tagRefreshNonce = $state(0);
+
+export function refreshTags(): void {
+	tagRefreshNonce++;
+}
+
+export function getTagRefreshNonce(): number {
+	return tagRefreshNonce;
+}
+
+// Module-level reactive signal for cross-component document list refresh.
+// The sidebar components (RecentDocs, FolderTree) and any other doc
+// consumer load documents only on mount, so any document mutation
+// elsewhere (e.g. the dashboard Import button) needs to nudge them to
+// reload. Same nonce pattern as tagRefreshNonce: callers read it inside
+// a $effect to trigger refreshes.
+let docRefreshNonce = $state(0);
+
+export function refreshDocs(): void {
+	docRefreshNonce++;
+}
+
+export function getDocRefreshNonce(): number {
+	return docRefreshNonce;
+}
+
+// Module-level reactive signal for the currently selected tag filter. Set by
+// the sidebar TagList; read by the dashboard and the sidebar RecentDocs so a
+// tag selection filters every document list in one place. `null` means no
+// filter (show all).
+let selectedTagId = $state<string | null>(null);
+// Tag NAME for the same selection. List endpoints filter by tag id, but the
+// search endpoint filters by tag name, so we keep both in sync here.
+let selectedTagName = $state<string | null>(null);
+
+export function setSelectedTag(
+	id: string | null,
+	name: string | null = null,
+): void {
+	selectedTagId = id;
+	selectedTagName = id ? name : null;
+}
+
+export function getSelectedTag(): string | null {
+	return selectedTagId;
+}
+
+export function getSelectedTagName(): string | null {
+	return selectedTagName;
+}

package/frontend/src/lib/stores/theme.svelte.ts

@@ -0,0 +1,97 @@
+import { browser } from "$app/environment";
+
+export type Theme = "light" | "dark" | "system";
+
+const STORAGE_KEY = "hiai-docs-theme";
+
+type Listener = () => void;
+const listeners = new Set<Listener>();
+
+function readStored(): Theme {
+	if (!browser) return "system";
+	const value = localStorage.getItem(STORAGE_KEY);
+	if (value === "light" || value === "dark" || value === "system") return value;
+	return "system";
+}
+
+function systemPrefersDark(): boolean {
+	if (!browser) return false;
+	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function resolveIsDark(theme: Theme): boolean {
+	if (theme === "dark") return true;
+	if (theme === "light") return false;
+	return systemPrefersDark();
+}
+
+function applyTheme(theme: Theme) {
+	if (!browser) return;
+	const isDark = resolveIsDark(theme);
+	document.documentElement.classList.toggle("dark", isDark);
+}
+
+function notify() {
+	for (const listener of listeners) listener();
+}
+
+// Runes-backed reactive state so `themeStore.value` / `.isDark` update the UI
+// (e.g. the Settings theme picker highlight) when the theme changes.
+let theme = $state<Theme>("system");
+let resolvedIsDark = $state(false);
+let initialized = false;
+
+function initTheme() {
+	if (!browser || initialized) return;
+	initialized = true;
+	theme = readStored();
+	resolvedIsDark = resolveIsDark(theme);
+	applyTheme(theme);
+
+	const mql = window.matchMedia("(prefers-color-scheme: dark)");
+	const onSystemChange = () => {
+		if (theme !== "system") return;
+		resolvedIsDark = mql.matches;
+		applyTheme("system");
+		notify();
+	};
+	mql.addEventListener("change", onSystemChange);
+}
+
+function setTheme(value: Theme) {
+	theme = value;
+	if (browser) {
+		localStorage.setItem(STORAGE_KEY, value);
+	}
+	resolvedIsDark = resolveIsDark(value);
+	applyTheme(value);
+	notify();
+}
+
+function getTheme(): Theme {
+	return theme;
+}
+
+function getIsDark(): boolean {
+	return resolvedIsDark;
+}
+
+function subscribeTheme(listener: Listener): () => void {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+
+export const themeStore = {
+	get value(): Theme {
+		return theme;
+	},
+	get isDark(): boolean {
+		return resolvedIsDark;
+	},
+	init: initTheme,
+	set: setTheme,
+};
+
+export { getIsDark, getTheme, initTheme, setTheme, subscribeTheme };

package/frontend/src/lib/svelte.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svelte" {
+	import type { Component } from "svelte";
+
+	const component: Component;
+	export default component;
+}

package/frontend/src/lib/types.ts

@@ -0,0 +1,44 @@
+/** Shared types for hiai-docs frontend */
+
+export interface Document {
+	id: string;
+	title: string;
+	content?: string;
+	folderId: string | null;
+	folderName: string;
+	tags: string[];
+	createdAt: string; // ISO 8601
+	updatedAt: string; // ISO 8601
+	excerpt: string;
+}
+
+export interface Folder {
+	id: string;
+	name: string;
+	parentId: string | null;
+	documentCount: number;
+	children: Folder[];
+	documents: Document[];
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface Tag {
+	id: string;
+	name: string;
+	color: string;
+}
+
+export type ViewMode = "grid" | "list";
+export type SortOption = "name" | "updated" | "created";
+export type SortDirection = "asc" | "desc";
+
+export interface CreateFolderData {
+	name: string;
+	parentId?: string | null;
+}
+
+export interface UpdateFolderData {
+	name?: string;
+	parentId?: string | null;
+}

package/frontend/src/lib/utils/clipboard.ts

@@ -0,0 +1,17 @@
+/**
+ * Copy `text` to the system clipboard via the async Clipboard API.
+ *
+ * Returns `true` if the copy succeeded and `false` if it was rejected or
+ * the API is unavailable (e.g. older browsers, insecure contexts, missing
+ * permissions). Callers should treat `false` as a soft failure — show
+ * feedback or fall back to a manual selection prompt rather than
+ * throwing.
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}

package/frontend/src/lib/utils/strip-markdown.ts

@@ -0,0 +1,59 @@
+/**
+ * Strip common markdown syntax from a string, returning plain text.
+ * Intended for preview snippets — not a full markdown-to-text converter.
+ */
+export function stripMarkdown(markdown: string): string {
+	let text = markdown;
+
+	// Fenced code blocks → content (strip ``` fences)
+	text = text.replace(/^```[\s\S]*?\n([\s\S]*?)^```/gm, "$1");
+
+	// Inline code
+	text = text.replace(/`([^`]+)`/g, "$1");
+
+	// Images → drop entirely (alt text included)
+	text = text.replace(/!\[([^\]]*)\]\([^)]*\)/g, "");
+
+	// Truncated image markdown (no closing paren)
+	text = text.replace(/!\[[^\]]*\]\([^)]*$/g, "");
+
+	// Links → link text
+	text = text.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1");
+
+	// Truncated link markdown (no closing paren)
+	text = text.replace(/\[[^\]]*\]\([^)]*$/g, "");
+
+	// Bold (both flavors)
+	text = text.replace(/\*\*([^*]+)\*\*/g, "$1");
+	text = text.replace(/__([^_]+)__/g, "$1");
+
+	// Italic (both flavors)
+	text = text.replace(/\*([^*]+)\*/g, "$1");
+	text = text.replace(/_([^_]+)_/g, "$1");
+
+	// Strikethrough
+	text = text.replace(/~~([^~]+)~~/g, "$1");
+
+	// Headings: strip leading # + space
+	text = text.replace(/^#{1,6}\s+/gm, "");
+
+	// Blockquotes: strip leading > + space
+	text = text.replace(/^>\s?/gm, "");
+
+	// Horizontal rules
+	text = text.replace(/^[-*_]{3,}\s*$/gm, "");
+
+	// Unordered list markers at line start
+	text = text.replace(/^[\s]*[-*+]\s+/gm, "");
+
+	// Ordered list markers at line start
+	text = text.replace(/^[\s]*\d+\.\s+/gm, "");
+
+	// Collapse multiple blank lines
+	text = text.replace(/\n{3,}/g, "\n\n");
+
+	// Collapse internal whitespace (but preserve newlines)
+	text = text.replace(/[^\S\n]+/g, " ");
+
+	return text.trim();
+}

package/frontend/src/lib/utils.ts

@@ -0,0 +1,33 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+export type WithElementRef<T> = T & { ref?: Element | null };
+
+/** Format an ISO timestamp as a human-readable relative time string. */
+export function formatRelativeTime(isoDate: string): string {
+	const now = Date.now();
+	const then = new Date(isoDate).getTime();
+	const diffMs = now - then;
+
+	const seconds = Math.floor(diffMs / 1000);
+	if (seconds < 60) return "just now";
+
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m ago`;
+
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h ago`;
+
+	const days = Math.floor(hours / 24);
+	if (days < 30) return `${days}d ago`;
+
+	const months = Math.floor(days / 30);
+	if (months < 12) return `${months}mo ago`;
+
+	const years = Math.floor(months / 12);
+	return `${years}y ago`;
+}

package/frontend/src/routes/(app)/+layout.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import ScrollToTop from "$lib/components/ScrollToTop.svelte";
+import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
+
+const { children } = $props();
+
+let mainElement = $state<HTMLElement | null>(null);
+</script>
+
+<div class="flex h-screen">
+  <Sidebar />
+  <main id="main-content" bind:this={mainElement} class="relative z-0 flex-1 overflow-auto">
+    {@render children()}
+  </main>
+</div>
+
+<ScrollToTop scrollTarget={mainElement} />

package/frontend/src/routes/(app)/+page.server.ts

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