inicontent 1.0.0

package/app/composables/useOfflineQueue.ts

@@ -0,0 +1,302 @@
+import type { IDBPDatabase } from "idb";
+import { openDB } from "idb";
+
+const DB_NAME = "inicontent-offline-queue";
+const STORE_NAME = "pending-mutations";
+const DB_VERSION = 1;
+
+type HTTPMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+
+/**
+ * A single queued mutation that could not be sent to the remote API because
+ * the device was offline (or the request failed transiently).
+ */
+export type PendingMutation = {
+	/** unique id for this queued mutation */
+	id: string;
+	method: Exclude<HTTPMethod, "GET">;
+	/** full API url, including protocol and host */
+	url: string;
+	/** request body (if any) — kept as raw JSON-safe data */
+	body: Record<string, any> | string | null;
+	/** request query params (if any) */
+	params?: Record<string, any>;
+	/** database slug scope */
+	database: string;
+	/** table slug scope (if applicable) */
+	table: string;
+	timestamp: number;
+	retryCount: number;
+	status: "pending" | "retrying" | "conflict";
+	/** populated when status === 'conflict': what the server currently has */
+	conflictData?: { local: any; server: any } | null;
+	errorMessage?: string | null;
+};
+
+let dbPromise: Promise<IDBPDatabase> | null = null;
+
+function initDB(): Promise<IDBPDatabase> {
+	if (!dbPromise) {
+		dbPromise = openDB(DB_NAME, DB_VERSION, {
+			upgrade(db) {
+				if (!db.objectStoreNames.contains(STORE_NAME)) {
+					const store = db.createObjectStore(STORE_NAME, { keyPath: "id" });
+					store.createIndex("timestamp", "timestamp", { unique: false });
+					store.createIndex("status", "status", { unique: false });
+					store.createIndex("database", "database", { unique: false });
+				}
+			},
+		});
+	}
+	return dbPromise;
+}
+
+/**
+ * Push a mutation onto the offline queue. No-op when the app is online and the
+ * request could be sent directly, but kept here so callers can enqueue
+ * unconditionally after a failed fetch.
+ */
+export async function enqueueMutation(
+	mutation: Omit<PendingMutation, "id" | "timestamp" | "retryCount" | "status">,
+): Promise<PendingMutation> {
+	// Make the body JSON-safe before persisting — IndexedDB uses structured
+	// clone, which throws on functions/cycles. Falling back to JSON.stringify
+	// guarantees we never lose a queued change because of an exotic value.
+	let safeBody = mutation.body;
+	if (safeBody !== null && typeof safeBody === "object") {
+		try {
+			const clone = structuredClone(safeBody);
+			JSON.stringify(clone); // throws on non-serializable values
+			safeBody = clone as typeof safeBody;
+		} catch {
+			try {
+				safeBody = JSON.parse(JSON.stringify(safeBody)) as typeof safeBody;
+			} catch {
+				safeBody = null;
+			}
+		}
+	}
+
+	const record: PendingMutation = {
+		...mutation,
+		body: safeBody,
+		id: randomID(),
+		timestamp: Date.now(),
+		retryCount: 0,
+		status: "pending",
+	};
+	try {
+		const db = await initDB();
+		await db.put(STORE_NAME, record);
+	} catch (error) {
+		console.warn("[OfflineQueue] Failed to enqueue mutation:", error);
+	}
+	return record;
+}
+
+/** Fetch all pending (non-conflict) mutations, oldest first. */
+export async function getPendingMutations(): Promise<PendingMutation[]> {
+	try {
+		const db = await initDB();
+		const all = await db.getAll(STORE_NAME);
+		return all
+			.filter((m) => m.status !== "conflict")
+			.sort((a, b) => a.timestamp - b.timestamp);
+	} catch (error) {
+		console.warn("[OfflineQueue] Failed to read mutations:", error);
+		return [];
+	}
+}
+
+/** Fetch every queued mutation including conflicts. */
+export async function getAllMutations(): Promise<PendingMutation[]> {
+	try {
+		const db = await initDB();
+		const all = await db.getAll(STORE_NAME);
+		return all.sort((a, b) => a.timestamp - b.timestamp);
+	} catch (error) {
+		console.warn("[OfflineQueue] Failed to read mutations:", error);
+		return [];
+	}
+}
+
+/** Get all mutations scoped to a specific database (and optionally table). */
+export async function getMutationsByScope(
+	database: string,
+	table?: string,
+): Promise<PendingMutation[]> {
+	try {
+		const db = await initDB();
+		const all = await db.getAll(STORE_NAME);
+		return all
+			.filter(
+				(m) =>
+					m.database === database &&
+					(!table || m.table === table) &&
+					m.status !== "conflict",
+			)
+			.sort((a, b) => a.timestamp - b.timestamp);
+	} catch (error) {
+		console.warn("[OfflineQueue] Failed to read scoped mutations:", error);
+		return [];
+	}
+}
+
+/** Drop a mutation from the queue after successful sync or user discard. */
+export async function removeMutation(id: string): Promise<void> {
+	try {
+		const db = await initDB();
+		await db.delete(STORE_NAME, id);
+	} catch (error) {
+		console.warn(`[OfflineQueue] Failed to remove mutation ${id}:`, error);
+	}
+}
+
+/** Mark a mutation as conflicted, storing both sides for later resolution. */
+export async function markConflict(
+	id: string,
+	serverData: any,
+): Promise<PendingMutation | undefined> {
+	try {
+		const db = await initDB();
+		const existing = await db.get(STORE_NAME, id);
+		if (!existing) return undefined;
+		const updated: PendingMutation = {
+			...existing,
+			status: "conflict",
+			conflictData: { local: existing.body, server: serverData },
+		};
+		await db.put(STORE_NAME, updated);
+		return updated;
+	} catch (error) {
+		console.warn(`[OfflineQueue] Failed to mark conflict for ${id}:`, error);
+		return undefined;
+	}
+}
+
+/** Increment the retry counter for a mutation that failed transiently. */
+export async function incrementRetry(id: string): Promise<void> {
+	try {
+		const db = await initDB();
+		const existing = await db.get(STORE_NAME, id);
+		if (!existing) return;
+		await db.put(STORE_NAME, {
+			...existing,
+			retryCount: (existing.retryCount ?? 0) + 1,
+			status: "pending",
+		});
+	} catch (error) {
+		console.warn(`[OfflineQueue] Failed to increment retry for ${id}:`, error);
+	}
+}
+
+/** Re-queue a conflicted mutation (user chose "keep local"). */
+export async function requeueMutation(id: string): Promise<void> {
+	try {
+		const db = await initDB();
+		const existing = await db.get(STORE_NAME, id);
+		if (!existing) return;
+		await db.put(STORE_NAME, {
+			...existing,
+			status: "pending",
+			retryCount: 0,
+			conflictData: null,
+		});
+	} catch (error) {
+		console.warn(`[OfflineQueue] Failed to requeue mutation ${id}:`, error);
+	}
+}
+
+/** Total count of pending mutations (excluding conflicts). */
+export async function getPendingCount(): Promise<number> {
+	try {
+		const db = await initDB();
+		const all = await db.getAll(STORE_NAME);
+		return all.filter((m) => m.status !== "conflict").length;
+	} catch (error) {
+		return 0;
+	}
+}
+
+/** Total count of conflicted mutations. */
+export async function getConflictCount(): Promise<number> {
+	try {
+		const db = await initDB();
+		const all = await db.getAll(STORE_NAME);
+		return all.filter((m) => m.status === "conflict").length;
+	} catch (error) {
+		return 0;
+	}
+}
+
+/** Number of pending mutations scoped to a database (optional table). */
+export async function getPendingCountByScope(
+	database: string,
+	table?: string,
+): Promise<number> {
+	try {
+		const db = await initDB();
+		const all = await db.getAll(STORE_NAME);
+		return all.filter(
+			(m) =>
+				m.status !== "conflict" &&
+				m.database === database &&
+				(!table || m.table === table),
+		).length;
+	} catch (error) {
+		return 0;
+	}
+}
+
+/** All converged mutations for a given scope. */
+export async function getConflicts(): Promise<PendingMutation[]> {
+	try {
+		const db = await initDB();
+		const all = await db.getAll(STORE_NAME);
+		return all
+			.filter((m) => m.status === "conflict")
+			.sort((a, b) => a.timestamp - b.timestamp);
+	} catch (error) {
+		return [];
+	}
+}
+
+export async function clearAllMutations(): Promise<void> {
+	try {
+		const db = await initDB();
+		await db.clear(STORE_NAME);
+	} catch (error) {
+		console.warn("[OfflineQueue] Failed to clear queue:", error);
+	}
+}
+
+/**
+ * Build virtual rows for queued POST (create) mutations scoped to a table, so
+ * items created while offline still appear in the table view until they sync.
+ * Each virtual row carries a `__pending` marker (with the queued mutation id)
+ * and a synthetic id so the grid can key it without colliding with real ids.
+ */
+export async function getPendingCreates(
+	database: string,
+	table: string,
+): Promise<Item[]> {
+	try {
+		const mutations = await getMutationsByScope(database, table);
+		return mutations
+			.filter((m) => m.method === "POST")
+			.map((m) => {
+				const body =
+					m.body && typeof m.body === "object" && !Array.isArray(m.body)
+						? (m.body as Record<string, any>)
+						: {};
+				return {
+					...body,
+					id: `${String(body.id ?? "")}` || `pending__${m.id}`,
+					__pending: { queuedId: m.id },
+				} as Item;
+			});
+	} catch (error) {
+		console.warn("[OfflineQueue] Failed to build pending creates:", error);
+		return [];
+	}
+}

package/app/composables/useOfflineSync.ts

@@ -0,0 +1,235 @@
+import {
+	getConflicts,
+	getPendingCount,
+	getPendingMutations,
+	incrementRetry,
+	markConflict,
+	removeMutation,
+	requeueMutation,
+} from "./useOfflineQueue";
+
+type SyncResult = {
+	id: string;
+	method: string;
+	url: string;
+	status: "success" | "conflict" | "error" | "skipped";
+	message?: string;
+};
+
+const MAX_RETRIES = 5;
+
+/** Bound for a single mutation/conflict request so a hung request can never
+ * block the sync loop forever (navigator.onLine can stay true even when the
+ * device has no real route to the API). Generous enough that slow-but-working
+ * API calls are NOT mistaken for offline failures. */
+const REQUEST_TIMEOUT_MS = 30_000;
+
+let initialized = false;
+
+/**
+ * Manages background sync of offline-queued mutations. On reconnect (or when
+ * explicitly triggered) it drains the queue in order, re-sending each mutation
+ * to the remote API. Conflicted writes are parked for manual resolution.
+ *
+ * Shared state is stored in Nuxt `useState` so every consumer (Header badge,
+ * conflict drawer, etc.) observes the same values.
+ */
+export function useOfflineSync() {
+	const isOnline = useState<boolean>("offline_isOnline", () =>
+		typeof navigator === "undefined" ? true : navigator.onLine !== false,
+	);
+	const isSyncing = useState<boolean>("offline_isSyncing", () => false);
+	const syncResults = useState<SyncResult[]>("offline_syncResults", () => []);
+	const conflicts = useState<any[]>("offline_conflicts", () => []);
+	const pendingCount = useState<number>("offline_pendingCount", () => 0);
+
+	async function refreshCounts() {
+		pendingCount.value = await getPendingCount();
+		conflicts.value = await getConflicts();
+	}
+
+	/**
+	 * Send a single queued mutation to the API.
+	 * @returns true on success, 'conflict' on 409/4xx conflict, false on transient failure
+	 */
+	async function sendMutation(mutation: any): Promise<boolean | "conflict"> {
+		const fetchOptions: Record<string, any> = {
+			method: mutation.method,
+			credentials: "include",
+			timeout: REQUEST_TIMEOUT_MS,
+		};
+		if (mutation.method !== "DELETE") {
+			fetchOptions.body = mutation.body ?? undefined;
+		}
+		if (mutation.params && Object.keys(mutation.params).length > 0) {
+			fetchOptions.params = mutation.params;
+		}
+
+		try {
+			const res = await $fetch(mutation.url, fetchOptions);
+			// Some endpoints return a response with .code on conflict-like states
+			if (res && typeof res === "object" && "code" in res) {
+				const code = (res as any).code;
+				if (code === 409 || code === "409" || code === "CONFLICT") {
+					return "conflict";
+				}
+			}
+			// A response means it worked — remove from queue.
+			await removeMutation(mutation.id);
+			return true;
+		} catch (error: any) {
+			const status = error?.response?.status ?? error?.status;
+			// Treat 4xx (except network) as conflict, not retryable.
+			if (status && status >= 400 && status < 500) {
+				return "conflict";
+			}
+			// 5xx / network errors: retryable
+			return false;
+		}
+	}
+
+	async function syncPendingMutations(): Promise<SyncResult[]> {
+		if (isSyncing.value) return syncResults.value;
+		isSyncing.value = true;
+		const results: SyncResult[] = [];
+
+		try {
+			const mutations = await getPendingMutations();
+			if (mutations.length === 0) {
+				return results;
+			}
+
+			// Nothing to do if the user is explicitly offline (e.g. "Sync now"
+			// clicked while offline) — every request would fail. The online
+			// event listener re-triggers sync automatically on reconnect.
+			if (typeof navigator !== "undefined" && !navigator.onLine) {
+				return results;
+			}
+
+			for (const mutation of mutations) {
+				// Stop if we've gone offline mid-sync
+				if (typeof navigator !== "undefined" && !navigator.onLine) break;
+
+				let outcome: boolean | "conflict" = false;
+				let attempts = 0;
+				while (attempts <= MAX_RETRIES) {
+					outcome = await sendMutation(mutation);
+					if (outcome === true || outcome === "conflict") break;
+					await incrementRetry(mutation.id);
+					attempts++;
+					await new Promise((r) => setTimeout(r, 500 * Math.min(attempts, 4)));
+				}
+
+				if (outcome === true) {
+					results.push({
+						id: mutation.id,
+						method: mutation.method,
+						url: mutation.url,
+						status: "success",
+					});
+				} else if (outcome === "conflict") {
+					// Fetch current server value to present to the resolution UI.
+					let serverData: any = null;
+					try {
+						const serverRes = await $fetch(mutation.url, {
+							method: "GET",
+							credentials: "include",
+							timeout: REQUEST_TIMEOUT_MS,
+						});
+						serverData = serverRes;
+					} catch {
+						serverData = null;
+					}
+					await markConflict(mutation.id, serverData);
+					results.push({
+						id: mutation.id,
+						method: mutation.method,
+						url: mutation.url,
+						status: "conflict",
+					});
+				} else {
+					results.push({
+						id: mutation.id,
+						method: mutation.method,
+						url: mutation.url,
+						status: "error",
+						message: "Max retries reached",
+					});
+				}
+			}
+
+			syncResults.value = results;
+			return results;
+		} catch (error) {
+			// Never let an unexpected failure wedge the sync flag — the finally
+			// below resets it, but log so we can trace what interrupted the sync.
+			console.warn("[OfflineSync] Sync interrupted:", error);
+			return results;
+		} finally {
+			// Always clear the flag so the UI can never show an endless spinner.
+			isSyncing.value = false;
+
+			// Refresh any cached Nuxt data so the UI shows the synced state.
+			try {
+				await refreshNuxtData();
+			} catch (error) {
+				console.warn("[OfflineSync] refreshNuxtData failed:", error);
+			}
+			try {
+				await refreshCounts();
+			} catch (error) {
+				console.warn("[OfflineSync] refreshCounts failed:", error);
+			}
+		}
+	}
+
+	function initSync() {
+		if (initialized) return;
+		initialized = true;
+
+		if (typeof window !== "undefined") {
+			window.addEventListener("online", () => {
+				isOnline.value = true;
+				syncPendingMutations();
+			});
+			window.addEventListener("offline", () => {
+				isOnline.value = false;
+			});
+
+			// Kick off the initial queue count (runs once, independent of any
+			// component lifecycle so callers can invoke it anywhere).
+			refreshCounts().then(() => {});
+		}
+	}
+
+	return {
+		isOnline,
+		isSyncing,
+		syncResults,
+		conflicts,
+		pendingCount,
+		syncPendingMutations,
+		refreshCounts,
+		initSync,
+	};
+}
+
+// Convenience exports for components that only need conflict management
+export async function resolveConflictKeepLocal(id: string) {
+	await requeueMutation(id);
+	// Immediately try to sync it
+	const state = useOfflineSync();
+	await state.syncPendingMutations();
+}
+
+export async function resolveConflictKeepServer(id: string) {
+	await removeMutation(id);
+}
+
+/** Discard ALL local changes (server wins for everything). */
+export async function discardAllConflicts() {
+	const all = await getConflicts();
+	for (const c of all) {
+		await removeMutation(c.id);
+	}
+}

package/app/composables/usePasskeyAuth.ts

@@ -0,0 +1,156 @@
+import {
+	startAuthentication,
+	startRegistration,
+} from "@simplewebauthn/browser";
+
+interface PasskeyBeginOptions {
+	challenge: string;
+	challengeRef?: string;
+	[key: string]: unknown;
+}
+
+type PasskeyBeginResponse = apiResponse<PasskeyBeginOptions>;
+type LoginPayload = User & { sessionID: string };
+type LoginResponse = apiResponse<LoginPayload>;
+type PasskeyRegisterResponse = apiResponse<Record<string, unknown>>;
+
+export function usePasskeyAuth() {
+	const config = useRuntimeConfig();
+	const database = useState<Database>("database");
+	const language = useScopedCookie<LanguagesType>("language", database.value?.slug);
+	const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+
+	const isPasskeySupported = ref(false);
+
+	onMounted(() => {
+		isPasskeySupported.value =
+			typeof window.PublicKeyCredential !== "undefined";
+	});
+
+	function mapPasskeyError(error: unknown, fallback: string) {
+		if (!(error instanceof Error)) return fallback;
+
+		if (error.name === "AbortError") {
+			return "Passkey prompt was closed before completion.";
+		}
+
+		if (error.name === "NotAllowedError") {
+			return "Passkey verification was cancelled or not allowed.";
+		}
+
+		if (error.name === "InvalidStateError") {
+			return "This device is already registered with a passkey for this account.";
+		}
+
+		return error.message || fallback;
+	}
+
+	async function beginPasskeySignIn(identifier: string) {
+		const beginResponse = await $fetch<PasskeyBeginResponse>(
+			`${config.public.apiBase}${database.value.slug}/auth/passkey/authenticate/begin`,
+			{
+				method: "PUT",
+				credentials: "include",
+				body: {
+					identifier,
+				},
+				params: {
+					locale: language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+			},
+		);
+
+		if (!beginResponse.result?.challenge) {
+			throw new Error(
+				beginResponse.message || "Passkey sign-in could not start",
+			);
+		}
+
+		let credential: unknown;
+		try {
+			credential = await startAuthentication({
+				optionsJSON: beginResponse.result,
+			});
+		} catch (error) {
+			throw new Error(
+				mapPasskeyError(error, "Passkey sign-in could not be completed"),
+			);
+		}
+
+		return $fetch<LoginResponse>(
+			`${config.public.apiBase}${database.value.slug}/auth/passkey/authenticate/complete`,
+			{
+				method: "PUT",
+				credentials: "include",
+				body: {
+					identifier,
+					challenge: beginResponse.result.challenge,
+					challengeRef: beginResponse.result.challengeRef,
+					credential,
+				},
+				params: {
+					locale: language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+			},
+		);
+	}
+
+	async function registerCurrentUserPasskey() {
+		const beginResponse = await $fetch<PasskeyBeginResponse>(
+			`${config.public.apiBase}${database.value.slug}/auth/passkey/register/begin`,
+			{
+				method: "PUT",
+				credentials: "include",
+				body: {
+					source: "auth",
+				},
+				params: {
+					locale: language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+			},
+		);
+
+		if (!beginResponse.result?.challenge) {
+			throw new Error(
+				beginResponse.message || "Passkey registration could not start",
+			);
+		}
+
+		let credential: unknown;
+		try {
+			credential = await startRegistration({
+				optionsJSON: beginResponse.result,
+			});
+		} catch (error) {
+			throw new Error(
+				mapPasskeyError(error, "Passkey registration could not be completed"),
+			);
+		}
+
+		return $fetch<PasskeyRegisterResponse>(
+			`${config.public.apiBase}${database.value.slug}/auth/passkey/register/complete`,
+			{
+				method: "PUT",
+				credentials: "include",
+				body: {
+					challenge: beginResponse.result.challenge,
+					challengeRef: beginResponse.result.challengeRef,
+					credential,
+				},
+				params: {
+					locale: language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+			},
+		);
+	}
+
+	return {
+		isPasskeySupported,
+		beginPasskeySignIn,
+		registerCurrentUserPasskey,
+	};
+}