@peaske7/readit 0.1.8 → 0.2.0

package/src/contexts/SettingsContext.tsx

@@ -0,0 +1,133 @@
+import {
+  createContext,
+  type ReactNode,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { toast } from "sonner";
+import {
+  FontFamilies,
+  type FontFamily,
+  type ThemeMode,
+  ThemeModes,
+} from "../schema";
+
+const THEME_STORAGE_KEY = "readit:theme";
+const DARK_MQ = "(prefers-color-scheme: dark)";
+
+function getStoredTheme(): ThemeMode {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (
+      stored === ThemeModes.LIGHT ||
+      stored === ThemeModes.DARK ||
+      stored === ThemeModes.SYSTEM
+    ) {
+      return stored;
+    }
+  } catch {
+    // localStorage may be unavailable
+  }
+  return ThemeModes.SYSTEM;
+}
+
+function applyTheme(mode: ThemeMode): void {
+  const isDark =
+    mode === ThemeModes.DARK ||
+    (mode === ThemeModes.SYSTEM && window.matchMedia(DARK_MQ).matches);
+
+  document.documentElement.classList.toggle("dark", isDark);
+}
+
+interface SettingsContextValue {
+  fontFamily: FontFamily;
+  setFontFamily: (font: FontFamily) => Promise<void>;
+  themeMode: ThemeMode;
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+export const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+export function useSettings(): SettingsContextValue {
+  const value = use(SettingsContext);
+  if (!value) {
+    throw new Error("useSettings must be used within a SettingsProvider");
+  }
+  return value;
+}
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+  const [fontFamily, setFontFamilyState] = useState<FontFamily>(
+    FontFamilies.SERIF,
+  );
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      try {
+        const response = await fetch("/api/settings");
+        if (response.ok) {
+          const settings = await response.json();
+          setFontFamilyState(settings.fontFamily || FontFamilies.SERIF);
+        }
+      } catch (err) {
+        console.error("Failed to fetch settings:", err);
+      }
+    };
+
+    fetchSettings();
+  }, []);
+
+  const setFontFamily = useCallback(async (font: FontFamily) => {
+    setFontFamilyState(font);
+
+    try {
+      const response = await fetch("/api/settings", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ fontFamily: font }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to save settings");
+      }
+    } catch (err) {
+      console.error("Failed to save font preference:", err);
+      toast.error("Failed to save font preference");
+    }
+  }, []);
+
+  const [themeMode, setThemeModeState] = useState<ThemeMode>(getStoredTheme);
+
+  useEffect(() => {
+    applyTheme(themeMode);
+  }, [themeMode]);
+
+  useEffect(() => {
+    if (themeMode !== ThemeModes.SYSTEM) return;
+
+    const mq = window.matchMedia(DARK_MQ);
+    const handler = () => applyTheme(ThemeModes.SYSTEM);
+
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [themeMode]);
+
+  const setThemeMode = useCallback((mode: ThemeMode) => {
+    setThemeModeState(mode);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, mode);
+    } catch {
+      // localStorage may be unavailable
+    }
+  }, []);
+
+  const value = useMemo<SettingsContextValue>(
+    () => ({ fontFamily, setFontFamily, themeMode, setThemeMode }),
+    [fontFamily, setFontFamily, themeMode, setThemeMode],
+  );
+
+  return <SettingsContext value={value}>{children}</SettingsContext>;
+}

package/src/hooks/useClickOutside.ts

@@ -1,9 +1,5 @@
 import { type RefObject, useEffect } from "react";
 
-/**
- * Close a dropdown/popover when clicking outside or pressing Escape.
- * Only attaches listeners when `active` is true.
- */
 export function useClickOutside(
   ref: RefObject<HTMLElement | null>,
   onClose: () => void,

package/src/hooks/useCommentNavigation.ts

@@ -1,27 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { appStore, useAppStore } from "../store";
-import type { Comment } from "../types";
+import type { Comment } from "../schema";
+import { uiStore } from "../store";
 
 interface UseCommentNavigationResult {
   currentIndex: number;
-  hoveredCommentId: string | undefined;
   setHoveredCommentId: (id: string | undefined) => void;
   navigateToComment: (commentId: string) => void;
   navigatePrevious: () => void;
   navigateNext: () => void;
 }
 
-/**
- * Manage comment navigation with cycling, keyboard shortcuts, and scroll-to-comment.
- * Handles Alt+↑/↓ keyboard navigation.
- */
 export function useCommentNavigation(
   sortedComments: Comment[],
 ): UseCommentNavigationResult {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const hoveredCommentId = useAppStore(
-    (s) => s.getActiveDocumentState()?.hoveredCommentId,
-  );
   const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
     undefined,
   );
@@ -30,7 +22,6 @@ export function useCommentNavigation(
   const sortedRef = useRef(sortedComments);
   sortedRef.current = sortedComments;
 
-  // Cleanup hover timeout on unmount
   useEffect(() => {
     return () => clearTimeout(hoverTimeoutRef.current);
   }, []);
@@ -44,7 +35,6 @@ export function useCommentNavigation(
     setCurrentIndex(clampedIndex);
   }
 
-  // Update DOM data-focused attributes imperatively
   const updateFocusedMarks = useCallback((commentId: string | undefined) => {
     const marks = window.document.querySelectorAll("mark[data-comment-id]");
     for (const mark of marks) {
@@ -59,13 +49,12 @@ export function useCommentNavigation(
 
   const setHoveredCommentId = useCallback(
     (id: string | undefined) => {
-      appStore.getState().setHoveredCommentId(id);
+      uiStore.setState({ hoveredCommentId: id });
       updateFocusedMarks(id);
     },
     [updateFocusedMarks],
   );
 
-  // Navigate to a comment by scrolling its highlight into view
   const navigateToComment = useCallback(
     (commentId: string) => {
       const selector = `mark[data-comment-id="${commentId}"]`;
@@ -80,24 +69,14 @@ export function useCommentNavigation(
         );
       };
 
-      // Try main document first (for markdown)
-      const mainHighlight = document.querySelector(selector);
-      if (mainHighlight) {
-        scrollAndHighlight(mainHighlight);
-        return;
-      }
-
-      // Try inside iframe (for HTML content)
-      const iframe = document.querySelector("iframe");
-      const iframeHighlight = iframe?.contentDocument?.querySelector(selector);
-      if (iframeHighlight) {
-        scrollAndHighlight(iframeHighlight);
+      const highlight = document.querySelector(selector);
+      if (highlight) {
+        scrollAndHighlight(highlight);
       }
     },
     [setHoveredCommentId],
   );
 
-  // Navigate to previous comment (cycles to last when at first)
   const navigatePrevious = useCallback(() => {
     const sc = sortedRef.current;
     if (sc.length === 0) return;
@@ -108,7 +87,6 @@ export function useCommentNavigation(
     });
   }, [navigateToComment]);
 
-  // Navigate to next comment (cycles to first when at last)
   const navigateNext = useCallback(() => {
     const sc = sortedRef.current;
     if (sc.length === 0) return;
@@ -121,7 +99,6 @@ export function useCommentNavigation(
 
   return {
     currentIndex: clampedIndex,
-    hoveredCommentId,
     setHoveredCommentId,
     navigateToComment,
     navigatePrevious,

package/src/hooks/useComments.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
+import { AnchorConfidences, type Comment } from "../schema";
 import { appStore, useAppStore } from "../store";
-import { AnchorConfidences, type Comment } from "../types";
 
 interface UseCommentsOptions {
   clean?: boolean;
@@ -26,17 +26,12 @@ interface UseCommentsResult {
   ) => void;
 }
 
-/**
- * Hook for managing comments with optimistic updates.
- * State lives in the Zustand store; this hook coordinates API mutations.
- */
 export function useComments(
   filePath: string | null,
   options: UseCommentsOptions = {},
 ): UseCommentsResult {
   const { clean = false } = options;
 
-  // Read comments and error from the store
   const comments = useAppStore(
     (s) => s.documents.get(filePath ?? "")?.comments ?? [],
   );
@@ -44,16 +39,12 @@ export function useComments(
     (s) => s.documents.get(filePath ?? "")?.commentsError ?? undefined,
   );
 
-  // Track pending operations for rollback on error
   const pendingOperations = useRef<Map<string, Comment[]>>(new Map());
 
-  // Capture filePath at call time for stable closures
+  // Capture filePath at call time so callbacks stay stable across renders
   const filePathRef = useRef(filePath);
   filePathRef.current = filePath;
 
-  /**
-   * Execute an optimistic mutation with automatic rollback on error.
-   */
   const executeMutation = useCallback(
     async <T>({
       operationId,
@@ -71,19 +62,16 @@ export function useComments(
       const fp = filePathRef.current;
       if (!fp) return;
 
-      // Read current comments from store for rollback
       const currentDocState = appStore.getState().documents.get(fp);
       const previousComments = [...(currentDocState?.comments ?? [])];
       pendingOperations.current.set(operationId, previousComments);
 
-      // Apply optimistic update
       appStore.getState().setComments(optimisticUpdate(previousComments), fp);
       appStore.getState().setCommentsError(null, fp);
 
       try {
         const result = await apiCall();
 
-        // Apply server response transformation if provided
         if (onSuccess) {
           const current = appStore.getState().documents.get(fp)?.comments ?? [];
           appStore.getState().setComments(onSuccess(result, current), fp);
@@ -97,7 +85,6 @@ export function useComments(
             fp,
           );
 
-        // Rollback on error
         const rollback = pendingOperations.current.get(operationId);
         if (rollback) {
           appStore.getState().setComments(rollback, fp);
@@ -109,23 +96,24 @@ export function useComments(
     [],
   );
 
-  // Build path-scoped API URL
   const pathQuery = useCallback((base: string) => {
     const fp = filePathRef.current;
     if (!fp) return base;
     return `${base}?path=${encodeURIComponent(fp)}`;
   }, []);
 
-  // Load comments from API
   useEffect(() => {
     if (!filePath) return;
 
+    // Skip fetch if comments were already pre-fetched by useDocument (parallel loading)
+    const existing = appStore.getState().documents.get(filePath);
+    if (!clean && existing && existing.comments.length > 0) return;
+
     const loadComments = async () => {
       appStore.getState().setCommentsError(null, filePath);
       const query = `?path=${encodeURIComponent(filePath)}`;
 
       try {
-        // If clean flag is set, clear comments first
         if (clean) {
           await fetch(`/api/comments${query}`, { method: "DELETE" });
           appStore.getState().setComments([], filePath);

package/src/hooks/useDocument.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
+import type { Document } from "../schema";
 import { appStore, useAppStore } from "../store";
-import type { Document } from "../types";
 
 interface UseDocumentResult {
   document: Document | null;
@@ -13,30 +13,20 @@ interface UseDocumentResult {
 interface DocListItem {
   path: string;
   fileName: string;
-  type: Document["type"];
 }
 
-/**
- * Manage multi-document loading, lazy content fetching, and live reloading.
- *
- * On mount: fetches the document list from `/api/documents` and opens all
- * files in the store. Content is loaded lazily when a tab becomes active.
- * SSE events trigger content updates for already-loaded documents.
- */
 export function useDocument(): UseDocumentResult {
   const [error, setError] = useState<string | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
 
   const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
 
-  // Active document — null until content is loaded
   const document = useAppStore((s) => {
     const ds = s.getActiveDocumentState();
-    if (!ds || !ds.document.content) return null;
+    if (!ds?.document.content) return null;
     return ds.document;
   });
 
-  // Fetch document list on mount, populate store
   useEffect(() => {
     async function init() {
       try {
@@ -51,8 +41,7 @@ export function useDocument(): UseDocumentResult {
         data.files.forEach((file: DocListItem, index: number) => {
           appStore.getState().openDocument(
             {
-              content: "", // Content loaded lazily on tab activation
-              type: file.type,
+              content: "",
               filePath: file.path,
               fileName: file.fileName,
               clean,
@@ -71,32 +60,46 @@ export function useDocument(): UseDocumentResult {
     init();
   }, []);
 
-  // Load content when active document changes and has no content yet
   useEffect(() => {
     if (!activeDocumentPath) return;
     const state = appStore.getState().documents.get(activeDocumentPath);
     if (!state || state.document.content) return;
 
-    async function loadContent() {
-      try {
-        const res = await fetch(
-          `/api/document?path=${encodeURIComponent(activeDocumentPath!)}`,
-        );
-        if (!res.ok) throw new Error(`Server error: ${res.status}`);
-        const data = await res.json();
-        appStore
-          .getState()
-          .updateDocumentContent(data.content, activeDocumentPath!);
-      } catch (err) {
+    const path = activeDocumentPath;
+    const query = `?path=${encodeURIComponent(path)}`;
+    const isClean = state.document.clean;
+
+    // Fetch document content and comments in parallel so highlights
+    // can apply immediately when CommentProvider mounts.
+    const docFetch = fetch(`/api/document${query}`).then((r) => {
+      if (!r.ok) throw new Error(`Server error: ${r.status}`);
+      return r.json();
+    });
+
+    const commentsFetch = isClean
+      ? fetch(`/api/comments${query}`, { method: "DELETE" }).then(
+          () => [] as unknown[],
+        )
+      : fetch(`/api/comments${query}`)
+          .then((r) => (r.ok ? r.json() : { comments: [] }))
+          .then((d) => d.comments || []);
+
+    Promise.all([docFetch, commentsFetch]).then(
+      ([docData, comments]) => {
+        // Set comments BEFORE content: content triggers CommentProvider mount,
+        // so comments must already be in the store to avoid a wasted empty render.
+        appStore.getState().setComments(comments, path);
+        appStore.getState().updateDocumentContent(docData.content, path);
+      },
+      (err) => {
         setError(
           err instanceof Error ? err.message : "Failed to load document",
         );
-      }
-    }
-    loadContent();
+      },
+    );
   }, [activeDocumentPath]);
 
-  // SSE: register new documents without stealing focus; reload loaded docs on updates
+  // SSE: register new documents without stealing focus; reload already-loaded docs on updates
   useEffect(() => {
     const eventSource = new EventSource("/api/document/stream");
     eventSource.onmessage = async (e) => {
@@ -105,8 +108,7 @@ export function useDocument(): UseDocumentResult {
         if (data.type === "document-added" && data.path) {
           appStore.getState().openDocument(
             {
-              content: "", // Lazy-loaded when tab activated
-              type: data.fileType,
+              content: "",
               filePath: data.path,
               fileName: data.fileName,
               clean: false,
@@ -116,9 +118,8 @@ export function useDocument(): UseDocumentResult {
           return;
         }
         if (data.type === "document-updated" && data.path) {
-          // Only reload if content was previously loaded
           const state = appStore.getState().documents.get(data.path);
-          if (!state || !state.document.content) return;
+          if (!state?.document.content) return;
 
           const res = await fetch(
             `/api/document?path=${encodeURIComponent(data.path)}`,

package/src/hooks/useHeadings.test.ts

@@ -2,13 +2,13 @@ import { renderHook } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { useHeadings } from "./useHeadings";
 
-describe("useHeadings - markdown", () => {
+describe("useHeadings", () => {
   it("extracts basic headings", () => {
     const content = `# Heading 1
 ## Heading 2
 ### Heading 3`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "heading-1", text: "Heading 1", level: 1 },
@@ -22,7 +22,7 @@ describe("useHeadings - markdown", () => {
 ## Section
 ## Section`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "section", text: "Section", level: 2 },
@@ -41,7 +41,7 @@ echo "hello"
 
 ## Another Real Heading`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "real-heading", text: "Real Heading", level: 1 },
@@ -60,7 +60,7 @@ def foo():
 
 ## Another Real Heading`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "real-heading", text: "Real Heading", level: 1 },
@@ -83,7 +83,7 @@ def foo():
 
 ## Results`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "introduction", text: "Introduction", level: 1 },
@@ -102,7 +102,7 @@ npx readit document.md --port 3000
 
 ## Usage`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "setup", text: "Setup", level: 1 },
@@ -111,49 +111,7 @@ npx readit document.md --port 3000
   });
 
   it("returns empty array for null content", () => {
-    const { result } = renderHook(() => useHeadings(null, "markdown"));
+    const { result } = renderHook(() => useHeadings(null));
     expect(result.current).toEqual([]);
   });
-
-  it("returns empty array for null type", () => {
-    const { result } = renderHook(() => useHeadings("# Heading", null));
-    expect(result.current).toEqual([]);
-  });
-});
-
-describe("useHeadings - html", () => {
-  it("extracts basic headings", () => {
-    const content = `<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>`;
-
-    const { result } = renderHook(() => useHeadings(content, "html"));
-
-    expect(result.current).toEqual([
-      { id: "heading-1", text: "Heading 1", level: 1 },
-      { id: "heading-2", text: "Heading 2", level: 2 },
-      { id: "heading-3", text: "Heading 3", level: 3 },
-    ]);
-  });
-
-  it("uses existing id attribute", () => {
-    const content = `<h1 id="custom-id">Heading 1</h1>`;
-
-    const { result } = renderHook(() => useHeadings(content, "html"));
-
-    expect(result.current).toEqual([
-      { id: "custom-id", text: "Heading 1", level: 1 },
-    ]);
-  });
-
-  it("decodes HTML entities", () => {
-    const content = `<h1>Hello &amp; World</h1>`;
-
-    const { result } = renderHook(() => useHeadings(content, "html"));
-
-    // Note: & is stripped, leaving "Hello  World" → "hello-world" (hyphens collapsed)
-    expect(result.current).toEqual([
-      { id: "hello-world", text: "Hello & World", level: 1 },
-    ]);
-  });
 });