@peaske7/readit 0.1.8 → 0.2.1

package/src/contexts/LayoutContext.tsx

@@ -1,88 +0,0 @@
-import { createContext, type ReactNode, use, useMemo } from "react";
-import { useEditorScheme } from "../hooks/useEditorScheme";
-import { useFontPreference } from "../hooks/useFontPreference";
-import { useKeybindings } from "../hooks/useKeybindings";
-import { useLayoutMode } from "../hooks/useLayoutMode";
-import { useThemePreference } from "../hooks/useThemePreference";
-import type { ShortcutDefinition } from "../lib/shortcut-registry";
-import type {
-  EditorScheme,
-  FontFamily,
-  ShortcutBinding,
-  ThemeMode,
-} from "../types";
-
-interface LayoutContextValue {
-  isFullscreen: boolean;
-  toggleLayoutMode: () => void;
-  fontFamily: FontFamily;
-  setFontFamily: (font: FontFamily) => Promise<void>;
-  editorScheme: EditorScheme;
-  setEditorScheme: (scheme: EditorScheme) => Promise<void>;
-  themeMode: ThemeMode;
-  setThemeMode: (mode: ThemeMode) => void;
-  shortcuts: ShortcutDefinition[];
-  updateBinding: (id: string, binding: ShortcutBinding) => Promise<void>;
-  toggleShortcutEnabled: (id: string) => Promise<void>;
-  resetShortcutsToDefaults: () => Promise<void>;
-}
-
-export const LayoutContext = createContext<LayoutContextValue | null>(null);
-
-export function useLayoutContext(): LayoutContextValue {
-  const value = use(LayoutContext);
-  if (!value) {
-    throw new Error("useLayoutContext must be used within a LayoutProvider");
-  }
-  return value;
-}
-
-interface LayoutProviderProps {
-  children: ReactNode;
-}
-
-export function LayoutProvider({ children }: LayoutProviderProps) {
-  const { isFullscreen, toggleLayoutMode } = useLayoutMode();
-  const { fontFamily, setFontFamily } = useFontPreference();
-  const { editorScheme, setEditorScheme } = useEditorScheme();
-  const { themeMode, setThemeMode } = useThemePreference();
-  const {
-    shortcuts,
-    updateBinding,
-    toggleEnabled: toggleShortcutEnabled,
-    resetToDefaults: resetShortcutsToDefaults,
-  } = useKeybindings();
-
-  const value = useMemo<LayoutContextValue>(
-    () => ({
-      isFullscreen,
-      toggleLayoutMode,
-      fontFamily,
-      setFontFamily,
-      editorScheme,
-      setEditorScheme,
-      themeMode,
-      setThemeMode,
-      shortcuts,
-      updateBinding,
-      toggleShortcutEnabled,
-      resetShortcutsToDefaults,
-    }),
-    [
-      isFullscreen,
-      toggleLayoutMode,
-      fontFamily,
-      setFontFamily,
-      editorScheme,
-      setEditorScheme,
-      themeMode,
-      setThemeMode,
-      shortcuts,
-      updateBinding,
-      toggleShortcutEnabled,
-      resetShortcutsToDefaults,
-    ],
-  );
-
-  return <LayoutContext value={value}>{children}</LayoutContext>;
-}

package/src/contexts/LocaleContext.tsx

@@ -1,35 +0,0 @@
-import { createContext, type ReactNode, use, useMemo } from "react";
-import { useLocalePreference } from "../hooks/useLocalePreference";
-import { createT, type Locale, type TranslationKey } from "../lib/i18n";
-
-interface LocaleContextValue {
-  locale: Locale;
-  setLocale: (locale: Locale) => void;
-  t: (key: TranslationKey, params?: Record<string, string | number>) => string;
-}
-
-const LocaleContext = createContext<LocaleContextValue | null>(null);
-
-export function useLocale(): LocaleContextValue {
-  const value = use(LocaleContext);
-  if (!value) {
-    throw new Error("useLocale must be used within a LocaleProvider");
-  }
-  return value;
-}
-
-interface LocaleProviderProps {
-  children: ReactNode;
-}
-
-export function LocaleProvider({ children }: LocaleProviderProps) {
-  const { locale, setLocale } = useLocalePreference();
-  const t = useMemo(() => createT(locale), [locale]);
-
-  const value = useMemo<LocaleContextValue>(
-    () => ({ locale, setLocale, t }),
-    [locale, setLocale, t],
-  );
-
-  return <LocaleContext value={value}>{children}</LocaleContext>;
-}

package/src/hooks/useClickOutside.ts

@@ -1,35 +0,0 @@
-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,
-  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/useClipboard.ts

@@ -1,82 +0,0 @@
-import { useCallback } from "react";
-import { toast } from "sonner";
-import { extractContext, formatForLLM } from "../lib/context";
-import {
-  exportCommentsAsJson,
-  generatePrompt,
-  generateRawText,
-} from "../lib/export";
-import type { TranslationKey } from "../lib/i18n";
-import { truncate } from "../lib/utils";
-import type { Comment, Document, Selection } from "../types";
-
-interface UseClipboardParams {
-  comments: Comment[];
-  document: Document | undefined;
-  selection: Selection | undefined;
-  clearSelection: () => void;
-  t: (key: TranslationKey, params?: Record<string, string | number>) => string;
-}
-
-export function useClipboard({
-  comments,
-  document,
-  selection,
-  clearSelection,
-  t,
-}: UseClipboardParams) {
-  // Export handlers
-  const copyAll = useCallback(() => {
-    if (!document) return;
-    const prompt = generatePrompt(comments, document.fileName);
-    navigator.clipboard.writeText(prompt);
-    toast.success(t("toast.copiedAllComments"));
-  }, [comments, document, t]);
-
-  const copyAllRaw = useCallback(() => {
-    if (!document) return;
-    const raw = generateRawText(comments);
-    navigator.clipboard.writeText(raw);
-    toast.success(t("toast.copiedAllRaw"));
-  }, [comments, document, t]);
-
-  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(t("toast.copied", { text: truncate(selection.text) }));
-    clearSelection();
-  }, [selection, clearSelection, t]);
-
-  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(t("toast.copiedForLLM", { text: truncate(selection.text) }));
-    clearSelection();
-  }, [selection, document, clearSelection, t]);
-
-  return {
-    copyAll,
-    copyAllRaw,
-    exportJson,
-    copySelectionRaw,
-    copySelectionForLLM,
-  };
-}

package/src/hooks/useCommentNavigation.ts

@@ -1,130 +0,0 @@
-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

@@ -1,323 +0,0 @@
-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,
-  };
-}