Add Web local version using File System API

package.json

@@ -70,11 +70,13 @@
     "@mantine/hooks": "^7.7.0",
     "@tanstack/react-router": "^1.29.2",
     "@tauri-apps/api": "^1",
+    "@types/sql.js": "^1.4.9",
     "bits-ui": "^0.14.0",
     "clsx": "^2.1.0",
     "mantine-datatable": "^7.6.1",
     "react": "18.2",
     "react-dom": "18.2",
+    "sql.js": "^1.10.3",
     "tailwind-merge": "^2.2.0",
     "tailwind-variants": "^0.1.20",
     "tauri-settings": "^0.3.4"

src/App.tsx

@@ -1,5 +1,5 @@
 import { safeAsyncEventHandler } from "$lib/async";
-import { LibraryProvider } from "$lib/contexts/library";
+import { LocalCalibreLibraryProvider, WebCalibreLibraryProvider } from "$lib/contexts/library";
 import { SettingsProvider } from "$lib/contexts/settings";
 import { theme } from "$lib/theme";
 import { ColorSchemeScript, MantineProvider } from "@mantine/core";
@@ -21,6 +21,9 @@ declare module "@tanstack/react-router" {
 
 export const App = () => {
 	const [libraryPath, setLibraryPath] = useState<string | null>(null);
+	const [libraryFSDirectoryHandle, setLibraryFSDirectoryHandle] = useState<FileSystemDirectoryHandle | null>(
+		null
+	);
 	const updateLibraryPath = useCallback(async () => {
 		const libPath = await settings.get("calibreLibraryPath");
 		setLibraryPath(libPath);
@@ -39,19 +42,31 @@ export const App = () => {
 					onLibraryPathPicked={() => {
 						safeAsyncEventHandler(updateLibraryPath)();
 					}}
+					onLibraryFSDirectoryHandlePicked={setLibraryFSDirectoryHandle}
 				/>
 			</MantineProvider>
 		);
 	}
 
+	if (libraryFSDirectoryHandle) {
+		return <SettingsProvider value={settings}>
+			<WebCalibreLibraryProvider directoryHandle={libraryFSDirectoryHandle}>
+				<ColorSchemeScript defaultColorScheme="auto" />
+				<MantineProvider theme={theme} defaultColorScheme="auto">
+					<RouterProvider router={router} />
+				</MantineProvider>
+			</WebCalibreLibraryProvider>
+		</SettingsProvider>;
+	}
+
 	return (
 		<SettingsProvider value={settings}>
-			<LibraryProvider libraryPath={libraryPath}>
+			<LocalCalibreLibraryProvider libraryPath={libraryPath}>
 				<ColorSchemeScript defaultColorScheme="auto" />
 				<MantineProvider theme={theme} defaultColorScheme="auto">
 					<RouterProvider router={router} />
 				</MantineProvider>
-			</LibraryProvider>
+			</LocalCalibreLibraryProvider>
 		</SettingsProvider>
 	);
 };

src/components/pages/firstTimeSetup.tsx

@@ -1,5 +1,6 @@
 import { commands } from "@/bindings";
 import { safeAsyncEventHandler } from "@/lib/async";
+import { isDesktop } from "@/lib/platform";
 import { pickLibrary } from "@/lib/services/library";
 import { createLibrary } from "@/lib/services/library/_internal/pickLibrary";
 import { settings } from "@/stores/settings";
@@ -23,7 +24,11 @@ const openFilePicker = async (): Promise<
 
 export const FirstTimeSetup = ({
 	onLibraryPathPicked,
-}: { onLibraryPathPicked: () => void }) => {
+	onLibraryFSDirectoryHandlePicked,
+}: {
+	onLibraryPathPicked: () => void;
+	onLibraryFSDirectoryHandlePicked: (handle: FileSystemDirectoryHandle) => void;
+}) => {
 	return (
 		<Stack align="center" justify="flex-start" h={"100vh"} p="sm">
 			<Title>Welcome to Citadel!</Title>
@@ -34,16 +39,33 @@ export const FirstTimeSetup = ({
 			</Text>
 			<Button
 				onPointerDown={safeAsyncEventHandler(async () => {
-					const returnStatus = await openFilePicker();
-					if (returnStatus.type === "invalid library path selected") {
-						return;
-					}
+					if (isDesktop()) {
+						const returnStatus = await openFilePicker();
+						if (returnStatus.type === "invalid library path selected") {
+							return;
+						}
+
+						if (returnStatus.type === "new library selected") {
+							await createLibrary(returnStatus.path);
+						}
+						await settings.set("calibreLibraryPath", returnStatus.path);
+						onLibraryPathPicked();
+					} else {
+						const currentDirHandle = await (
+							// This function is experimental, and not yet in the TS types.
+							window as typeof window & {
+								showDirectoryPicker: () => Promise<FileSystemDirectoryHandle>;
+							}
+						).showDirectoryPicker();
+						if (currentDirHandle === undefined) return;
 
-					if (returnStatus.type === "new library selected") {
-						await createLibrary(returnStatus.path);
+						await settings.set(
+							"calibreLibraryPath",
+							`webfilesystem://${currentDirHandle.name}`,
+						);
+						onLibraryFSDirectoryHandlePicked(currentDirHandle);
+						onLibraryPathPicked();
 					}
-					await settings.set("calibreLibraryPath", returnStatus.path);
-					onLibraryPathPicked();
 				})}
 			>
 				Choose Calibre library folder

src/lib/contexts/library/Provider.tsx

@@ -13,7 +13,7 @@ interface LibraryProviderProps {
 	children: React.ReactNode;
 	libraryPath: string;
 }
-export const LibraryProvider = ({
+export const LocalCalibreLibraryProvider = ({
 	children,
 	libraryPath,
 }: LibraryProviderProps) => {

src/lib/contexts/library/WebProvider.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useReducer } from "react";
+import { DEFAULT_CONTEXT_VALUE, LibraryContext, LibraryState } from "./context";
+import { Options, initClient } from "@/lib/services/library";
+import { reducer } from "./reducer";
+
+const webLibraryFromHandle = (handle: FileSystemDirectoryHandle): Options => ({
+	libraryDirectoryHandle: handle,
+	libraryType: "calibre",
+	connectionType: "web",
+});
+
+interface LibraryProviderProps {
+	children: React.ReactNode;
+	directoryHandle: FileSystemDirectoryHandle;
+}
+export const WebCalibreLibraryProvider = ({
+	children,
+	directoryHandle,
+}: LibraryProviderProps) => {
+	const [context, dispatch] = useReducer(reducer, DEFAULT_CONTEXT_VALUE);
+
+	useEffect(() => {
+		if (context.state === LibraryState.error) {
+			console.log(context.error);
+		}
+	}, [context]);
+
+	useEffect(() => {
+		initClient(webLibraryFromHandle(directoryHandle))
+			.then((client) => {
+				dispatch({
+					type: "init",
+					client,
+				});
+			})
+			.catch(() => {
+				dispatch({ type: "error", error: new Error("Failed to init Library") });
+			});
+
+		return () => {
+			dispatch({ type: "shutdown" });
+		};
+	}, [directoryHandle]);
+
+	return (
+		<LibraryContext.Provider value={context}>
+			{!context.loading && children}
+		</LibraryContext.Provider>
+	);
+};

src/lib/contexts/library/index.ts

@@ -1,5 +1,6 @@
-import { LibraryProvider } from "./Provider";
+import { LocalCalibreLibraryProvider } from "./Provider";
+import {WebCalibreLibraryProvider} from "./WebProvider";
 import { LibraryState } from "./context";
 import { useLibrary } from "./hooks";
 
-export { LibraryProvider, useLibrary, LibraryState };
+export { LocalCalibreLibraryProvider, WebCalibreLibraryProvider, useLibrary, LibraryState };

src/lib/isDefined.ts

@@ -0,0 +1,7 @@
+export const isDefined = <T>(value: T | undefined): value is T =>
+	value !== undefined;
+
+export const isNonNull = <T>(value: T | null): value is T => value !== null;
+
+export const isSomething = <T>(value: T | undefined | null): value is T =>
+	value !== undefined && value !== null;

src/lib/platform.ts

@@ -0,0 +1,3 @@
+export const isDesktop = () => {
+  return "__TAURI__" in window && window.__TAURI__;
+};

src/lib/services/library/_internal/_types.ts

@@ -100,7 +100,11 @@ export interface RemoteConnectionOptions {
 	connectionType: "remote";
 	url: string;
 }
+export interface WebConnectionOptions {
+	connectionType: "web";
+	libraryDirectoryHandle: FileSystemDirectoryHandle;
+}
 
 export type Options = {
 	libraryType: "calibre";
-} & (LocalConnectionOptions | RemoteConnectionOptions);
+} & (LocalConnectionOptions | RemoteConnectionOptions | WebConnectionOptions);

src/lib/services/library/_internal/adapters/calibre.ts

@@ -1,3 +1,4 @@
+
 import {
 	commands,
 	type ImportableFile,
@@ -11,6 +12,7 @@ import type {
 	Options,
 	RemoteConnectionOptions,
 } from "../_types";
+import { genWebCalibreClient } from "./web";
 
 const genLocalCalibreClient = async (
 	options: LocalConnectionOptions,
@@ -176,6 +178,9 @@ export const initCalibreClient = async (options: Options): Promise<Library> => {
 	if (options.connectionType === "remote") {
 		return genRemoteCalibreClient(options);
 	}
+	if (options.connectionType === "web") {
+		return genWebCalibreClient(options);
+	}
 
 	return genLocalCalibreClient(options);
 };

src/lib/services/library/_internal/adapters/web.ts

@@ -0,0 +1,149 @@
+import initSqlJs from "sql.js";
+
+import { LibraryBook } from "@/bindings";
+
+import { Library, WebConnectionOptions } from "../_types";
+import { loadDb } from "./web/db";
+import {
+	createAuthorRepository,
+	createBookAuthorLinkRepository,
+	createBookRepository,
+} from "./web/repositories/sqljs";
+import { createCatalogService } from "./web/services/catalog";
+import { createAuthorService } from "./web/services/author";
+import { libraryAuthor } from "./web/entities/LibraryAuthor";
+
+export const genWebCalibreClient = async (
+	options: WebConnectionOptions,
+): Promise<Library> => {
+	const SQL = await initSqlJs({
+		// TODO: Now Citadel requires being online on the web? ... that is probably fine, yes.
+		locateFile: (file: string) => `https://sql.js.org/dist/${file}`,
+	});
+	const bookRepo = createBookRepository(options.libraryDirectoryHandle, SQL);
+	const bookAuthorLinkRepo = createBookAuthorLinkRepository(
+		options.libraryDirectoryHandle,
+		SQL,
+	);
+	const authorRepo = createAuthorRepository(
+		options.libraryDirectoryHandle,
+		SQL,
+	);
+	const authorService = createAuthorService(authorRepo);
+	const catalogService = createCatalogService(
+		bookRepo,
+		bookAuthorLinkRepo,
+		authorRepo,
+	);
+
+	return {
+		listBooks: async () => {
+			const db = await loadDb(options.libraryDirectoryHandle, SQL);
+			if (!db) return [];
+
+			const res = db.exec("SELECT * FROM 'books'");
+			if (res.length === 0) {
+				return [];
+			}
+			const rows = res[0].values;
+
+			const coverImagePromises = rows.map((row) => {
+				const path = (row[9] ?? "").toString();
+				if (path === "") {
+					return null;
+				}
+				return coverImageFromPath(path, options.libraryDirectoryHandle);
+			});
+			const coverImages = await Promise.all(coverImagePromises);
+
+			const addCoverImageToBook = (
+				book: LibraryBook,
+				coverImage: File | null,
+			): LibraryBook => {
+				if (coverImage === null) {
+					return book;
+				}
+				return {
+					...book,
+					cover_image: {
+						kind: "Remote",
+						url: URL.createObjectURL(coverImage),
+						local_path: null,
+					},
+				};
+			};
+			const books = (await catalogService.all()).map((book, index) =>
+				addCoverImageToBook(book, coverImages[index]),
+			);
+
+			return books;
+		},
+		listAuthors: async () => {
+			return (await authorService.all()).map(libraryAuthor.fromAuthor);
+		},
+		listValidFileTypes: () => {
+			return Promise.resolve([]);
+		},
+		getCoverPathForBook: () => {
+			throw new Error("Not implemented");
+		},
+		getCoverUrlForBook: () => {
+			throw new Error("Not implemented");
+		},
+		getDefaultFilePathForBook: () => {
+			throw new Error("Not implemented");
+		},
+		getImportableFileMetadata: () => {
+			throw new Error("Not implemented");
+		},
+		sendToDevice: () => {
+			throw new Error("Not implemented");
+		},
+		updateBook: () => {
+			throw new Error("Not implemented");
+		},
+		addImportableFileByMetadata: () => {
+			throw new Error("Not implemented");
+		},
+		checkFileImportable: () => {
+			throw new Error("Not implemented");
+		},
+	};
+};
+
+const coverImageFromPath = async (
+	path: string,
+	libraryDirectoryHandle: FileSystemDirectoryHandle,
+): Promise<File | null> => {
+	const parts = path.split("/");
+	const maxDepth = parts.length;
+	let currDepth = 0;
+	let handle: FileSystemDirectoryHandle | FileSystemFileHandle | null =
+		libraryDirectoryHandle;
+
+	while (currDepth < maxDepth) {
+		try {
+			// File names can be invalid, which throws an error.
+			handle = await handle.getDirectoryHandle(parts[currDepth]);
+		} catch (e) {
+			console.log(e, handle, parts[currDepth], parts, currDepth);
+			handle = null;
+			break;
+		}
+		if (handle === null) {
+			break;
+		}
+		currDepth++;
+	}
+
+	if (handle === null) {
+		return null;
+	}
+	try {
+		// Getting the cover image can throw errors
+		const fileHandle = await handle.getFileHandle("cover.jpg");
+		return fileHandle.getFile();
+	} catch (e) {
+		return null;
+	}
+};