@peaske7/readit 0.2.0 → 0.2.1

package/src/hooks/useClickOutside.ts

@@ -1,31 +0,0 @@
-import { type RefObject, useEffect } from "react";
-
-export function useClickOutside(
-  ref: RefObject<HTMLElement | null>,
-  onClose: () => void,
-  active: boolean,
-): void {
-  useEffect(() => {
-    if (!active) return;
-
-    const handleClickOutside = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [ref, onClose, active]);
-}

package/src/hooks/useCommentNavigation.ts

@@ -1,107 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { Comment } from "../schema";
-import { uiStore } from "../store";
-
-interface UseCommentNavigationResult {
-  currentIndex: number;
-  setHoveredCommentId: (id: string | undefined) => void;
-  navigateToComment: (commentId: string) => void;
-  navigatePrevious: () => void;
-  navigateNext: () => void;
-}
-
-export function useCommentNavigation(
-  sortedComments: Comment[],
-): UseCommentNavigationResult {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
-
-  // Keep a ref to sortedComments so navigation callbacks stay stable
-  const sortedRef = useRef(sortedComments);
-  sortedRef.current = sortedComments;
-
-  useEffect(() => {
-    return () => clearTimeout(hoverTimeoutRef.current);
-  }, []);
-
-  // Clamp index when comments are removed (derived during render, no effect needed)
-  const clampedIndex =
-    sortedComments.length === 0
-      ? 0
-      : Math.min(currentIndex, sortedComments.length - 1);
-  if (clampedIndex !== currentIndex) {
-    setCurrentIndex(clampedIndex);
-  }
-
-  const updateFocusedMarks = useCallback((commentId: string | undefined) => {
-    const marks = window.document.querySelectorAll("mark[data-comment-id]");
-    for (const mark of marks) {
-      const id = mark.getAttribute("data-comment-id");
-      if (id === commentId) {
-        mark.setAttribute("data-focused", "true");
-      } else {
-        mark.removeAttribute("data-focused");
-      }
-    }
-  }, []);
-
-  const setHoveredCommentId = useCallback(
-    (id: string | undefined) => {
-      uiStore.setState({ hoveredCommentId: id });
-      updateFocusedMarks(id);
-    },
-    [updateFocusedMarks],
-  );
-
-  const navigateToComment = useCallback(
-    (commentId: string) => {
-      const selector = `mark[data-comment-id="${commentId}"]`;
-
-      const scrollAndHighlight = (element: Element) => {
-        element.scrollIntoView({ behavior: "smooth", block: "center" });
-        setHoveredCommentId(commentId);
-        clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = setTimeout(
-          () => setHoveredCommentId(undefined),
-          1500,
-        );
-      };
-
-      const highlight = document.querySelector(selector);
-      if (highlight) {
-        scrollAndHighlight(highlight);
-      }
-    },
-    [setHoveredCommentId],
-  );
-
-  const navigatePrevious = useCallback(() => {
-    const sc = sortedRef.current;
-    if (sc.length === 0) return;
-    setCurrentIndex((prev) => {
-      const newIndex = prev === 0 ? sc.length - 1 : prev - 1;
-      navigateToComment(sc[newIndex].id);
-      return newIndex;
-    });
-  }, [navigateToComment]);
-
-  const navigateNext = useCallback(() => {
-    const sc = sortedRef.current;
-    if (sc.length === 0) return;
-    setCurrentIndex((prev) => {
-      const newIndex = prev === sc.length - 1 ? 0 : prev + 1;
-      navigateToComment(sc[newIndex].id);
-      return newIndex;
-    });
-  }, [navigateToComment]);
-
-  return {
-    currentIndex: clampedIndex,
-    setHoveredCommentId,
-    navigateToComment,
-    navigatePrevious,
-    navigateNext,
-  };
-}

package/src/hooks/useComments.ts

@@ -1,311 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-import { AnchorConfidences, type Comment } from "../schema";
-import { appStore, useAppStore } from "../store";
-
-interface UseCommentsOptions {
-  clean?: boolean;
-}
-
-interface UseCommentsResult {
-  comments: Comment[];
-  error?: string;
-  addComment: (
-    selectedText: string,
-    comment: string,
-    startOffset: number,
-    endOffset: number,
-  ) => void;
-  deleteComment: (id: string) => void;
-  deleteAll: () => void;
-  editComment: (id: string, newText: string) => void;
-  reanchorComment: (
-    id: string,
-    selectedText: string,
-    startOffset: number,
-    endOffset: number,
-  ) => void;
-}
-
-export function useComments(
-  filePath: string | null,
-  options: UseCommentsOptions = {},
-): UseCommentsResult {
-  const { clean = false } = options;
-
-  const comments = useAppStore(
-    (s) => s.documents.get(filePath ?? "")?.comments ?? [],
-  );
-  const error = useAppStore(
-    (s) => s.documents.get(filePath ?? "")?.commentsError ?? undefined,
-  );
-
-  const pendingOperations = useRef<Map<string, Comment[]>>(new Map());
-
-  // Capture filePath at call time so callbacks stay stable across renders
-  const filePathRef = useRef(filePath);
-  filePathRef.current = filePath;
-
-  const executeMutation = useCallback(
-    async <T>({
-      operationId,
-      optimisticUpdate,
-      apiCall,
-      onSuccess,
-      errorMessage,
-    }: {
-      operationId: string;
-      optimisticUpdate: (prev: Comment[]) => Comment[];
-      apiCall: () => Promise<T>;
-      onSuccess?: (result: T, prev: Comment[]) => Comment[];
-      errorMessage: string;
-    }) => {
-      const fp = filePathRef.current;
-      if (!fp) return;
-
-      const currentDocState = appStore.getState().documents.get(fp);
-      const previousComments = [...(currentDocState?.comments ?? [])];
-      pendingOperations.current.set(operationId, previousComments);
-
-      appStore.getState().setComments(optimisticUpdate(previousComments), fp);
-      appStore.getState().setCommentsError(null, fp);
-
-      try {
-        const result = await apiCall();
-
-        if (onSuccess) {
-          const current = appStore.getState().documents.get(fp)?.comments ?? [];
-          appStore.getState().setComments(onSuccess(result, current), fp);
-        }
-      } catch (err) {
-        console.error(`${errorMessage}:`, err);
-        appStore
-          .getState()
-          .setCommentsError(
-            err instanceof Error ? err.message : errorMessage,
-            fp,
-          );
-
-        const rollback = pendingOperations.current.get(operationId);
-        if (rollback) {
-          appStore.getState().setComments(rollback, fp);
-        }
-      } finally {
-        pendingOperations.current.delete(operationId);
-      }
-    },
-    [],
-  );
-
-  const pathQuery = useCallback((base: string) => {
-    const fp = filePathRef.current;
-    if (!fp) return base;
-    return `${base}?path=${encodeURIComponent(fp)}`;
-  }, []);
-
-  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) {
-          await fetch(`/api/comments${query}`, { method: "DELETE" });
-          appStore.getState().setComments([], filePath);
-          return;
-        }
-
-        const response = await fetch(`/api/comments${query}`);
-        if (!response.ok) {
-          throw new Error(`Failed to load comments: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-        appStore.getState().setComments(data.comments || [], filePath);
-      } catch (err) {
-        console.error("Failed to load comments:", err);
-        appStore
-          .getState()
-          .setCommentsError(
-            err instanceof Error ? err.message : "Failed to load comments",
-            filePath,
-          );
-        appStore.getState().setComments([], filePath);
-      }
-    };
-
-    loadComments();
-  }, [filePath, clean]);
-
-  const addComment = useCallback(
-    (
-      selectedText: string,
-      commentText: string,
-      startOffset: number,
-      endOffset: number,
-    ) => {
-      const tempId = `temp-${crypto.randomUUID()}`;
-      const optimisticComment: Comment = {
-        id: tempId,
-        selectedText,
-        comment: commentText.trim(),
-        createdAt: new Date().toISOString(),
-        startOffset,
-        endOffset,
-      };
-
-      executeMutation({
-        operationId: tempId,
-        optimisticUpdate: (prev) => [...prev, optimisticComment],
-        apiCall: async () => {
-          const response = await fetch(pathQuery("/api/comments"), {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              selectedText,
-              comment: commentText.trim(),
-              startOffset,
-              endOffset,
-            }),
-          });
-
-          if (!response.ok) {
-            throw new Error(`Failed to add comment: ${response.statusText}`);
-          }
-
-          return response.json();
-        },
-        onSuccess: (data, prev) =>
-          prev.map((c) => (c.id === tempId ? data.comment : c)),
-        errorMessage: "Failed to add comment",
-      });
-    },
-    [executeMutation, pathQuery],
-  );
-
-  const deleteComment = useCallback(
-    (id: string) => {
-      executeMutation({
-        operationId: `delete-${id}`,
-        optimisticUpdate: (prev) => prev.filter((c) => c.id !== id),
-        apiCall: async () => {
-          const response = await fetch(pathQuery(`/api/comments/${id}`), {
-            method: "DELETE",
-          });
-
-          if (!response.ok) {
-            throw new Error(`Failed to delete comment: ${response.statusText}`);
-          }
-        },
-        errorMessage: "Failed to delete comment",
-      });
-    },
-    [executeMutation, pathQuery],
-  );
-
-  const deleteAll = useCallback(() => {
-    executeMutation({
-      operationId: "delete-all",
-      optimisticUpdate: () => [],
-      apiCall: async () => {
-        const response = await fetch(pathQuery("/api/comments"), {
-          method: "DELETE",
-        });
-        if (!response.ok) {
-          throw new Error(
-            `Failed to delete all comments: ${response.statusText}`,
-          );
-        }
-      },
-      errorMessage: "Failed to delete all comments",
-    });
-  }, [executeMutation, pathQuery]);
-
-  const editComment = useCallback(
-    (id: string, newText: string) => {
-      const trimmed = newText.trim();
-      if (!trimmed) return;
-
-      executeMutation({
-        operationId: `edit-${id}`,
-        optimisticUpdate: (prev) =>
-          prev.map((c) => (c.id === id ? { ...c, comment: trimmed } : c)),
-        apiCall: async () => {
-          const response = await fetch(pathQuery(`/api/comments/${id}`), {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ comment: trimmed }),
-          });
-
-          if (!response.ok) {
-            throw new Error(`Failed to update comment: ${response.statusText}`);
-          }
-        },
-        errorMessage: "Failed to edit comment",
-      });
-    },
-    [executeMutation, pathQuery],
-  );
-
-  const reanchorComment = useCallback(
-    (
-      id: string,
-      selectedText: string,
-      startOffset: number,
-      endOffset: number,
-    ) => {
-      executeMutation({
-        operationId: `reanchor-${id}`,
-        optimisticUpdate: (prev) =>
-          prev.map((c) =>
-            c.id === id
-              ? {
-                  ...c,
-                  selectedText,
-                  startOffset,
-                  endOffset,
-                  anchorConfidence: AnchorConfidences.EXACT,
-                }
-              : c,
-          ),
-        apiCall: async () => {
-          const response = await fetch(
-            pathQuery(`/api/comments/${id}/reanchor`),
-            {
-              method: "PUT",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ selectedText, startOffset, endOffset }),
-            },
-          );
-
-          if (!response.ok) {
-            throw new Error(
-              `Failed to re-anchor comment: ${response.statusText}`,
-            );
-          }
-
-          return response.json();
-        },
-        onSuccess: (data, prev) =>
-          prev.map((c) => (c.id === id ? data.comment : c)),
-        errorMessage: "Failed to re-anchor comment",
-      });
-    },
-    [executeMutation, pathQuery],
-  );
-
-  return {
-    comments,
-    error,
-    addComment,
-    deleteComment,
-    deleteAll,
-    editComment,
-    reanchorComment,
-  };
-}

package/src/hooks/useDocument.ts

@@ -1,157 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-import type { Document } from "../schema";
-import { appStore, useAppStore } from "../store";
-
-interface UseDocumentResult {
-  document: Document | null;
-  error: string | null;
-  isInitialized: boolean;
-  reload: () => Promise<void>;
-}
-
-interface DocListItem {
-  path: string;
-  fileName: string;
-}
-
-export function useDocument(): UseDocumentResult {
-  const [error, setError] = useState<string | null>(null);
-  const [isInitialized, setIsInitialized] = useState(false);
-
-  const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
-
-  const document = useAppStore((s) => {
-    const ds = s.getActiveDocumentState();
-    if (!ds?.document.content) return null;
-    return ds.document;
-  });
-
-  useEffect(() => {
-    async function init() {
-      try {
-        const res = await fetch("/api/documents");
-        if (!res.ok) throw new Error(`Server error: ${res.status}`);
-        const data = await res.json();
-
-        const clean = data.clean || false;
-        if (data.workingDirectory) {
-          appStore.getState().setWorkingDirectory(data.workingDirectory);
-        }
-        data.files.forEach((file: DocListItem, index: number) => {
-          appStore.getState().openDocument(
-            {
-              content: "",
-              filePath: file.path,
-              fileName: file.fileName,
-              clean,
-            },
-            { active: index === 0 },
-          );
-        });
-      } catch (err) {
-        setError(
-          err instanceof Error ? err.message : "Failed to load documents",
-        );
-      } finally {
-        setIsInitialized(true);
-      }
-    }
-    init();
-  }, []);
-
-  useEffect(() => {
-    if (!activeDocumentPath) return;
-    const state = appStore.getState().documents.get(activeDocumentPath);
-    if (!state || state.document.content) return;
-
-    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",
-        );
-      },
-    );
-  }, [activeDocumentPath]);
-
-  // 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) => {
-      try {
-        const data = JSON.parse(e.data);
-        if (data.type === "document-added" && data.path) {
-          appStore.getState().openDocument(
-            {
-              content: "",
-              filePath: data.path,
-              fileName: data.fileName,
-              clean: false,
-            },
-            { active: false },
-          );
-          return;
-        }
-        if (data.type === "document-updated" && data.path) {
-          const state = appStore.getState().documents.get(data.path);
-          if (!state?.document.content) return;
-
-          const res = await fetch(
-            `/api/document?path=${encodeURIComponent(data.path)}`,
-          );
-          if (res.ok) {
-            const doc = await res.json();
-            appStore.getState().updateDocumentContent(doc.content, data.path);
-          }
-        }
-      } catch {
-        // Ignore non-JSON messages ("connected", "ping")
-      }
-    };
-    return () => eventSource.close();
-  }, []);
-
-  const reload = useCallback(async () => {
-    if (!activeDocumentPath) return;
-    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);
-      toast.success("Document reloaded");
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Failed to reload");
-    }
-  }, [activeDocumentPath]);
-
-  return { document, error, isInitialized, reload };
-}

package/src/hooks/useScrollSpy.ts

@@ -1,77 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-export function useScrollSpy(
-  headingIds: string[],
-  enabled = true,
-): string | null {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const hasSetInitialRef = useRef(false);
-
-  useEffect(() => {
-    if (!enabled || headingIds.length === 0) {
-      if (headingIds.length === 0) {
-        setActiveId(null);
-        hasSetInitialRef.current = false;
-      }
-      return;
-    }
-
-    const visibleHeadings = new Map<string, number>();
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          const id = entry.target.id;
-
-          if (entry.isIntersecting) {
-            visibleHeadings.set(id, entry.boundingClientRect.top);
-          } else {
-            visibleHeadings.delete(id);
-          }
-        }
-
-        if (visibleHeadings.size > 0) {
-          let closestId: string | null = null;
-          let closestDistance = Number.POSITIVE_INFINITY;
-
-          for (const [id, top] of visibleHeadings) {
-            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;
-    }
-
-    for (const id of headingIds) {
-      const element = document.getElementById(id);
-      if (element) {
-        observer.observe(element);
-      }
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [headingIds, enabled]);
-
-  return activeId;
-}