@peaske7/readit 0.1.4 → 0.1.6

package/src/hooks/useScrollSpy.ts

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Hook to track which heading is currently in view
+ * Uses IntersectionObserver to detect when headings enter the "active zone"
+ */
+export function useScrollSpy(headingIds: string[]): string | null {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const hasSetInitialRef = useRef(false);
+
+  useEffect(() => {
+    if (headingIds.length === 0) {
+      setActiveId(null);
+      hasSetInitialRef.current = false;
+      return;
+    }
+
+    // Track visible headings and their positions
+    const visibleHeadings = new Map<string, number>();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const id = entry.target.id;
+
+          if (entry.isIntersecting) {
+            // Store the top position when heading becomes visible
+            visibleHeadings.set(id, entry.boundingClientRect.top);
+          } else {
+            visibleHeadings.delete(id);
+          }
+        }
+
+        // Find the heading closest to the top of the viewport
+        if (visibleHeadings.size > 0) {
+          let closestId: string | null = null;
+          let closestDistance = Number.POSITIVE_INFINITY;
+
+          for (const [id, top] of visibleHeadings) {
+            // Prefer headings that are near the top but still visible
+            const distance = Math.abs(top);
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestId = id;
+            }
+          }
+
+          if (closestId) {
+            setActiveId(closestId);
+          }
+        }
+      },
+      {
+        // Observe when headings are in the top 30% of viewport
+        rootMargin: "-10% 0px -70% 0px",
+        threshold: 0,
+      },
+    );
+
+    // Set initial active heading BEFORE starting observer
+    // to prevent flash when observer fires first
+    if (!hasSetInitialRef.current) {
+      setActiveId(headingIds[0]);
+      hasSetInitialRef.current = true;
+    }
+
+    // Observe all headings
+    for (const id of headingIds) {
+      const element = document.getElementById(id);
+      if (element) {
+        observer.observe(element);
+      }
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [headingIds]);
+
+  return activeId;
+}

package/src/hooks/useTextSelection.ts

@@ -0,0 +1,123 @@
+import { useCallback, useEffect } from "react";
+import { appStore, useAppStore } from "../store";
+import type { Selection } from "../types";
+
+/** Remove pending highlight marks from the DOM without triggering a full clear/reapply cycle. */
+function clearPendingMarks() {
+  for (const mark of document.querySelectorAll("mark[data-pending]")) {
+    const parent = mark.parentNode;
+    if (!parent) continue;
+    while (mark.firstChild) parent.insertBefore(mark.firstChild, mark);
+    parent.removeChild(mark);
+  }
+}
+
+interface UseTextSelectionResult {
+  selection: Selection | null;
+  highlightPositions: Record<string, number>;
+  documentPositions: Record<string, number>;
+  pendingSelectionTop: number | undefined;
+  onTextSelect: (
+    text: string,
+    startOffset: number,
+    endOffset: number,
+    selectionTop: number,
+  ) => void;
+  onPositionsChange: (
+    positions: Record<string, number>,
+    docPositions: Record<string, number>,
+    pendingTop?: number,
+  ) => void;
+  clearSelection: () => void;
+}
+
+/**
+ * Manage text selection state, highlight positions, and click-outside dismissal.
+ * State lives in the Zustand store for tab-switch preservation.
+ */
+export function useTextSelection(): UseTextSelectionResult {
+  const selection = useAppStore(
+    (s) => s.getActiveDocumentState()?.selection ?? null,
+  );
+  const highlightPositions = useAppStore(
+    (s) => s.getActiveDocumentState()?.highlightPositions ?? {},
+  );
+  const documentPositions = useAppStore(
+    (s) => s.getActiveDocumentState()?.documentPositions ?? {},
+  );
+  const pendingSelectionTop = useAppStore(
+    (s) => s.getActiveDocumentState()?.pendingSelectionTop,
+  );
+
+  useEffect(() => {
+    if (!selection) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+
+      // Don't clear if clicking inside the comment input area
+      if (target.closest("[data-comment-input]")) return;
+
+      // Don't clear if clicking on any highlight (pending or comment)
+      if (target.closest("mark[data-pending]")) return;
+      if (target.closest("mark[data-comment-id]")) return;
+
+      // Clear selection state and pending marks
+      appStore.getState().setSelection(null);
+      appStore.getState().setPendingSelectionTop(undefined);
+      clearPendingMarks();
+      requestAnimationFrame(() => {
+        const sel = window.getSelection();
+        if (sel?.isCollapsed) {
+          sel.removeAllRanges();
+        }
+      });
+    };
+
+    // Use mousedown to catch clicks before text selection
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [selection]);
+
+  const onTextSelect = useCallback(
+    (
+      text: string,
+      startOffset: number,
+      endOffset: number,
+      selectionTop: number,
+    ) => {
+      appStore.getState().setSelection({ text, startOffset, endOffset });
+      appStore.getState().setPendingSelectionTop(selectionTop);
+    },
+    [],
+  );
+
+  const onPositionsChange = useCallback(
+    (
+      positions: Record<string, number>,
+      docPositions: Record<string, number>,
+      _pendingTop?: number,
+    ) => {
+      appStore.getState().setHighlightPositions(positions);
+      appStore.getState().setDocumentPositions(docPositions);
+    },
+    [],
+  );
+
+  const clearSelection = useCallback(() => {
+    appStore.getState().setSelection(null);
+    appStore.getState().setPendingSelectionTop(undefined);
+    clearPendingMarks();
+    window.getSelection()?.removeAllRanges();
+  }, []);
+
+  return {
+    selection,
+    highlightPositions,
+    documentPositions,
+    pendingSelectionTop,
+    onTextSelect,
+    onPositionsChange,
+    clearSelection,
+  };
+}

package/src/hooks/useThemePreference.ts

@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from "react";
+import { type ThemeMode, ThemeModes } from "../types";
+
+const STORAGE_KEY = "readit:theme";
+
+const DARK_MQ = "(prefers-color-scheme: dark)";
+
+function getStoredTheme(): ThemeMode {
+  try {
+    const stored = localStorage.getItem(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 UseThemePreferenceResult {
+  themeMode: ThemeMode;
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+export function useThemePreference(): UseThemePreferenceResult {
+  const [themeMode, setThemeModeState] = useState<ThemeMode>(getStoredTheme);
+
+  // Apply theme class whenever mode changes
+  useEffect(() => {
+    applyTheme(themeMode);
+  }, [themeMode]);
+
+  // Listen for system preference changes when in "system" mode
+  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(STORAGE_KEY, mode);
+    } catch {
+      // localStorage may be unavailable
+    }
+  }, []);
+
+  return { themeMode, setThemeMode };
+}