@peaske7/readit 0.1.4 → 0.1.6

package/src/hooks/useClipboard.ts

@@ -0,0 +1,79 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { extractContext, formatForLLM } from "../lib/context";
+import {
+  exportCommentsAsJson,
+  generatePrompt,
+  generateRawText,
+} from "../lib/export";
+import { truncate } from "../lib/utils";
+import type { Comment, Document, Selection } from "../types";
+
+interface UseClipboardParams {
+  comments: Comment[];
+  document: Document | undefined;
+  selection: Selection | undefined;
+  clearSelection: () => void;
+}
+
+export function useClipboard({
+  comments,
+  document,
+  selection,
+  clearSelection,
+}: UseClipboardParams) {
+  // Export handlers
+  const copyAll = useCallback(() => {
+    if (!document) return;
+    const prompt = generatePrompt(comments, document.fileName);
+    navigator.clipboard.writeText(prompt);
+    toast.success("Copied all comments");
+  }, [comments, document]);
+
+  const copyAllRaw = useCallback(() => {
+    if (!document) return;
+    const raw = generateRawText(comments);
+    navigator.clipboard.writeText(raw);
+    toast.success("Copied all comments as raw text");
+  }, [comments, document]);
+
+  const exportJson = useCallback(() => {
+    if (!document) return;
+    exportCommentsAsJson(comments, document);
+  }, [comments, document]);
+
+  // Selection copy handlers
+  const copySelectionRaw = useCallback(() => {
+    if (!selection) return;
+
+    navigator.clipboard.writeText(selection.text);
+    toast.success(`Copied: "${truncate(selection.text)}"`);
+    clearSelection();
+  }, [selection, clearSelection]);
+
+  const copySelectionForLLM = useCallback(() => {
+    if (!selection || !document) return;
+
+    const context = extractContext({
+      content: document.content,
+      startOffset: selection.startOffset,
+      endOffset: selection.endOffset,
+    });
+    const formatted = formatForLLM({
+      context,
+      fileName: document.fileName,
+    });
+
+    navigator.clipboard.writeText(formatted);
+    toast.success(`Copied for LLM: "${truncate(selection.text)}"`);
+    clearSelection();
+  }, [selection, document, clearSelection]);
+
+  return {
+    copyAll,
+    copyAllRaw,
+    exportJson,
+    copySelectionRaw,
+    copySelectionForLLM,
+  };
+}

package/src/hooks/useCommentNavigation.ts

@@ -0,0 +1,130 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { appStore, useAppStore } from "../store";
+import type { Comment } from "../types";
+
+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,
+  );
+
+  // Keep a ref to sortedComments so navigation callbacks stay stable
+  const sortedRef = useRef(sortedComments);
+  sortedRef.current = sortedComments;
+
+  // Cleanup hover timeout on unmount
+  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);
+  }
+
+  // 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) {
+      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) => {
+      appStore.getState().setHoveredCommentId(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}"]`;
+
+      const scrollAndHighlight = (element: Element) => {
+        element.scrollIntoView({ behavior: "smooth", block: "center" });
+        setHoveredCommentId(commentId);
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = setTimeout(
+          () => setHoveredCommentId(undefined),
+          1500,
+        );
+      };
+
+      // 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);
+      }
+    },
+    [setHoveredCommentId],
+  );
+
+  // Navigate to previous comment (cycles to last when at first)
+  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]);
+
+  // Navigate to next comment (cycles to first when at last)
+  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,
+    hoveredCommentId,
+    setHoveredCommentId,
+    navigateToComment,
+    navigatePrevious,
+    navigateNext,
+  };
+}

package/src/hooks/useComments.ts

@@ -0,0 +1,323 @@
+import { useCallback, useEffect, useRef } from "react";
+import { appStore, useAppStore } from "../store";
+import { AnchorConfidences, type Comment } from "../types";
+
+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;
+}
+
+/**
+ * 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 ?? [],
+  );
+  const error = useAppStore(
+    (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
+  const filePathRef = useRef(filePath);
+  filePathRef.current = filePath;
+
+  /**
+   * Execute an optimistic mutation with automatic rollback on error.
+   */
+  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;
+
+      // 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);
+        }
+      } catch (err) {
+        console.error(`${errorMessage}:`, err);
+        appStore
+          .getState()
+          .setCommentsError(
+            err instanceof Error ? err.message : errorMessage,
+            fp,
+          );
+
+        // Rollback on error
+        const rollback = pendingOperations.current.get(operationId);
+        if (rollback) {
+          appStore.getState().setComments(rollback, fp);
+        }
+      } finally {
+        pendingOperations.current.delete(operationId);
+      }
+    },
+    [],
+  );
+
+  // 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;
+
+    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);
+          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

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { appStore, useAppStore } from "../store";
+import type { Document } from "../types";
+
+interface UseDocumentResult {
+  document: Document | null;
+  error: string | null;
+  isInitialized: boolean;
+  reload: () => Promise<void>;
+}
+
+/**
+ * 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;
+    return ds.document;
+  });
+
+  // Fetch document list on mount, populate store
+  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;
+        for (const file of data.files) {
+          appStore.getState().openDocument({
+            content: "", // Content loaded lazily on tab activation
+            type: file.type,
+            filePath: file.path,
+            fileName: file.fileName,
+            clean,
+          });
+        }
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Failed to load documents",
+        );
+      } finally {
+        setIsInitialized(true);
+      }
+    }
+    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) {
+        setError(
+          err instanceof Error ? err.message : "Failed to load document",
+        );
+      }
+    }
+    loadContent();
+  }, [activeDocumentPath]);
+
+  // SSE: listen for file updates, reload content for already-loaded documents
+  useEffect(() => {
+    const eventSource = new EventSource("/api/document/stream");
+    eventSource.onmessage = async (e) => {
+      try {
+        const data = JSON.parse(e.data);
+        if (data.type === "file-added" && data.path) {
+          appStore.getState().openDocument({
+            content: "", // Lazy-loaded when tab activated
+            type: data.fileType,
+            filePath: data.path,
+            fileName: data.fileName,
+            clean: false,
+          });
+          return;
+        }
+        if (data.type === "update" && data.path) {
+          // Only reload if content was previously loaded
+          const state = appStore.getState().documents.get(data.path);
+          if (!state || !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 };
+}