@peaske7/readit 0.1.8 → 0.2.0

package/src/App.tsx

@@ -1,28 +1,26 @@
-import { use, useCallback, useEffect, useRef } from "react";
-import { Toaster } from "sonner";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Toaster, toast } from "sonner";
 import { CommentInput } from "./components/comments/CommentInput";
-import { CommentMinimap } from "./components/comments/CommentMinimap";
 import { CommentNav } from "./components/comments/CommentNav";
-import { DocumentViewer } from "./components/DocumentViewer";
-import { FloatingTOC } from "./components/FloatingTOC";
+import { DocumentViewer } from "./components/DocumentViewer/DocumentViewer";
 import { Header } from "./components/Header";
 import { MarginNotes } from "./components/MarginNotes";
 import { ReanchorConfirm } from "./components/ReanchorConfirm";
 import { TabBar } from "./components/TabBar";
 import { TableOfContents } from "./components/TableOfContents";
-import { textVariants } from "./components/ui/Text";
-import { CommentContext, CommentProvider } from "./contexts/CommentContext";
-import { LayoutContext, LayoutProvider } from "./contexts/LayoutContext";
+import {
+  CommentProvider,
+  useCommentActions,
+  useCommentData,
+} from "./contexts/CommentContext";
 import { useLocale } from "./contexts/LocaleContext";
-import { useClipboard } from "./hooks/useClipboard";
+import { PositionsProvider, usePositions } from "./contexts/PositionsContext";
+import { SettingsProvider } from "./contexts/SettingsContext";
 import { useDocument } from "./hooks/useDocument";
 import { useHeadings } from "./hooks/useHeadings";
-import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
-import { useScrollMetrics } from "./hooks/useScrollMetrics";
 import { useScrollSpy } from "./hooks/useScrollSpy";
 import { useTextSelection } from "./hooks/useTextSelection";
-import { calculateScrollTarget, getElementTopInDocument } from "./lib/scroll";
-import { ShortcutActions } from "./lib/shortcut-registry";
+import { exportCommentsAsJson, generatePrompt } from "./lib/export";
 import { cn } from "./lib/utils";
 import { appStore, useAppStore } from "./store";
 
@@ -33,7 +31,7 @@ const TOASTER_OPTIONS = {
   classNames: {
     toast: cn(
       "backdrop-blur-sm bg-white/90 dark:bg-zinc-900/90 border border-zinc-100 dark:border-zinc-800 px-3 py-2 shadow-sm rounded-md",
-      textVariants({ variant: "caption" }),
+      "text-xs text-zinc-500 dark:text-zinc-400",
     ),
   },
 };
@@ -41,98 +39,50 @@ const TOASTER_OPTIONS = {
 interface AppContentProps {
   document: NonNullable<ReturnType<typeof useDocument>["document"]>;
   reload: ReturnType<typeof useDocument>["reload"];
+  isActive: boolean;
 }
 
-function AppContent({ document, reload }: AppContentProps) {
+function AppContent({ document, reload, isActive }: AppContentProps) {
   const { t } = useLocale();
-  const {
-    comments,
-    sortedComments,
-    addComment,
-    reanchorComment,
-    reanchorTarget,
-    cancelReanchor,
-    hoveredCommentId,
-    setHoveredCommentId,
-    navigatePrevious,
-    navigateNext,
-  } = use(CommentContext)!;
+  const { comments, sortedComments, reanchorTarget } = useCommentData();
+  const { addComment, reanchorComment, cancelReanchor, setHoveredCommentId } =
+    useCommentActions();
 
-  const {
-    selection,
-    highlightPositions,
-    documentPositions,
-    pendingSelectionTop,
-    onTextSelect,
-    onPositionsChange,
-    clearSelection,
-  } = useTextSelection();
-
-  const {
-    copyAll,
-    copyAllRaw,
-    exportJson,
-    copySelectionRaw,
-    copySelectionForLLM,
-  } = useClipboard({
-    comments,
-    document: document ?? undefined,
-    selection: selection ?? undefined,
-    clearSelection,
-    t,
-  });
-
-  const { shortcuts, isFullscreen } = use(LayoutContext)!;
-
-  useKeyboardShortcuts(shortcuts, {
-    [ShortcutActions.COPY_ALL]: copyAll,
-    [ShortcutActions.COPY_ALL_RAW]: copyAllRaw,
-    [ShortcutActions.NAVIGATE_NEXT]: navigateNext,
-    [ShortcutActions.NAVIGATE_PREVIOUS]: navigatePrevious,
-    [ShortcutActions.COPY_SELECTION_RAW]: copySelectionRaw,
-    [ShortcutActions.COPY_SELECTION_LLM]: copySelectionForLLM,
-    [ShortcutActions.CLEAR_SELECTION]: clearSelection,
-  });
-
-  const scrollMetrics = useScrollMetrics();
-
-  const headings = useHeadings(
-    document?.content ?? null,
-    document?.type ?? null,
-  );
-  const activeHeadingId = useScrollSpy(headings.map((h) => h.id));
-
-  const scrollToHeading = useCallback(
-    (id: string) => {
-      let elementRect: DOMRect | undefined;
-      let iframeTopOffset: number | undefined;
-
-      if (document?.type === "html") {
-        const iframe = window.document.querySelector("iframe");
-        const el = iframe?.contentDocument?.getElementById(id);
-        if (!el || !iframe) return;
-        elementRect = el.getBoundingClientRect();
-        iframeTopOffset = iframe.getBoundingClientRect().top;
-      } else {
-        elementRect = window.document
-          .getElementById(id)
-          ?.getBoundingClientRect();
-      }
-      if (!elementRect) return;
+  const { selection, pendingSelectionTop, onTextSelect, clearSelection } =
+    useTextSelection();
 
-      const elementTop = getElementTopInDocument({
-        elementRect,
-        scrollY: window.scrollY,
-        iframeTopOffset,
-      });
-      const scrollTarget = calculateScrollTarget({
-        elementTop,
-        viewportHeight: window.innerHeight,
-      });
-      window.scrollTo({ top: scrollTarget, behavior: "smooth" });
-    },
-    [document?.type],
-  );
+  const pos = usePositions();
+
+  useEffect(() => {
+    pos.setIds(sortedComments.map((c) => c.id));
+  }, [pos, sortedComments]);
+  useEffect(() => {
+    pos.setPending(selection ? pendingSelectionTop : undefined);
+  }, [pos, selection, pendingSelectionTop]);
+
+  const copyAll = useCallback(() => {
+    if (!document) return;
+    navigator.clipboard.writeText(generatePrompt(comments, document.fileName));
+    toast.success(t("toast.copiedAllComments"));
+  }, [comments, document, t]);
+
+  const exportJson = useCallback(() => {
+    if (!document) return;
+    exportCommentsAsJson(comments, document);
+  }, [comments, document]);
+
+  const headings = useHeadings(document?.content ?? null);
+  const headingIds = useMemo(() => headings.map((h) => h.id), [headings]);
+  const activeHeadingId = useScrollSpy(headingIds, isActive);
+
+  const scrollToHeading = useCallback((id: string) => {
+    const rect = window.document.getElementById(id)?.getBoundingClientRect();
+    if (!rect) return;
+
+    const elementTop = window.scrollY + rect.top;
+    const scrollTarget = Math.max(0, elementTop - window.innerHeight * 0.25);
+    window.scrollTo({ top: scrollTarget, behavior: "smooth" });
+  }, []);
 
   const handleHighlightClick = useCallback((commentId: string) => {
     const marginNote = window.document.querySelector(
@@ -143,30 +93,31 @@ function AppContent({ document, reload }: AppContentProps) {
     }
   }, []);
 
-  // Scroll save/restore for tab switching
+  // Scroll save/restore for tab switching (visibility-based, not mount-based)
   const setScrollY = useAppStore((s) => s.setScrollY);
   const savedScrollY = useAppStore(
-    (s) => s.getActiveDocumentState()?.scrollY ?? 0,
+    (s) => s.documents.get(document.filePath)?.scrollY ?? 0,
   );
-  const scrollRestored = useRef(false);
+  const prevActiveRef = useRef(isActive);
 
-  // Save scroll position on unmount
   useEffect(() => {
-    return () => {
-      setScrollY(window.scrollY);
-    };
-  }, [setScrollY]);
+    const wasActive = prevActiveRef.current;
+    prevActiveRef.current = isActive;
 
-  // Restore scroll position on mount (after highlights paint)
-  useEffect(() => {
-    if (savedScrollY === 0 || scrollRestored.current) return;
-    scrollRestored.current = true;
-    requestAnimationFrame(() => {
+    if (wasActive && !isActive) {
+      // Tab becoming hidden — save scroll position
+      setScrollY(window.scrollY, document.filePath);
+    }
+
+    if (!wasActive && isActive) {
+      // Tab becoming visible — restore scroll after layout recalc
       requestAnimationFrame(() => {
-        window.scrollTo(0, savedScrollY);
+        requestAnimationFrame(() => {
+          window.scrollTo(0, savedScrollY);
+        });
       });
-    });
-  }, [savedScrollY]);
+    }
+  }, [isActive, savedScrollY, setScrollY, document.filePath]);
 
   const handleAddComment = useCallback(
     (commentText: string) => {
@@ -213,23 +164,15 @@ function AppContent({ document, reload }: AppContentProps) {
 
   return (
     <div className="min-h-screen bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 flex flex-col">
-      <Toaster
-        position="bottom-right"
-        icons={TOASTER_ICONS}
-        toastOptions={TOASTER_OPTIONS}
-      />
       <Header
         fileName={document.fileName}
         onCopyAll={copyAll}
-        onCopyAllRaw={copyAllRaw}
         onExportJson={exportJson}
         onReload={reload}
       />
 
-      <div
-        className={`flex-1 flex gap-4 w-full ${!isFullscreen ? "max-w-7xl mx-auto" : ""} ${hoveredCommentId ? "has-comment-focus" : ""}`}
-      >
-        {!isFullscreen && headings.length > 0 && (
+      <div className="flex-1 flex gap-4 w-full max-w-7xl mx-auto">
+        {headings.length > 0 && (
           <aside className="w-48 flex-shrink-0 py-6 pl-6 hidden xl:block">
             <div className="sticky top-64 max-h-[calc(100vh-17rem)] overflow-y-auto">
               <TableOfContents
@@ -240,23 +183,14 @@ function AppContent({ document, reload }: AppContentProps) {
             </div>
           </aside>
         )}
-        {isFullscreen && (
-          <FloatingTOC
-            headings={headings}
-            activeId={activeHeadingId}
-            onHeadingClick={scrollToHeading}
-          />
-        )}
 
         <div className="flex-1 px-6 py-6">
           <DocumentViewer
             content={document.content}
-            type={document.type}
             comments={comments}
             headings={headings}
-            pendingSelection={selection ?? undefined}
+            isActive={isActive}
             onTextSelect={onTextSelect}
-            onHighlightPositionsChange={onPositionsChange}
             onHighlightHover={setHoveredCommentId}
             onHighlightClick={handleHighlightClick}
           />
@@ -280,27 +214,15 @@ function AppContent({ document, reload }: AppContentProps) {
                   selectedText={selection.text}
                   onSubmit={handleAddComment}
                   onCancel={clearSelection}
-                  onCopyRaw={copySelectionRaw}
-                  onCopyForLLM={copySelectionForLLM}
                 />
               )}
             </div>
           )}
 
-          <MarginNotes
-            sortedComments={sortedComments}
-            highlightPositions={highlightPositions}
-            pendingSelectionTop={selection ? pendingSelectionTop : undefined}
-          />
+          <MarginNotes sortedComments={sortedComments} />
         </div>
       </div>
 
-      <CommentMinimap
-        documentPositions={documentPositions}
-        documentHeight={scrollMetrics.documentHeight}
-        viewportHeight={scrollMetrics.viewportHeight}
-      />
-
       <CommentNav />
 
       <footer className="py-4 text-center text-sm text-zinc-400 dark:text-zinc-500">
@@ -336,8 +258,10 @@ function useTabKeyboardShortcuts() {
 
 function App() {
   const { t } = useLocale();
-  const { document, error, isInitialized, reload } = useDocument();
+  const { error, isInitialized, reload } = useDocument();
   const documentOrder = useAppStore((s) => s.documentOrder);
+  const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
+  const documents = useAppStore((s) => s.documents);
 
   useTabKeyboardShortcuts();
 
@@ -385,30 +309,58 @@ function App() {
     );
   }
 
-  if (!document) {
-    return (
-      <div className="min-h-screen bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 flex items-center justify-center">
-        <div className="text-zinc-500 dark:text-zinc-400">
-          {t("app.loading")}
-        </div>
-      </div>
-    );
-  }
-
   return (
     <>
       <TabBar />
-      <LayoutProvider>
-        <CommentProvider
-          filePath={document.filePath}
-          clean={document.clean}
-          documentContent={document.content}
-          fileName={document.fileName}
-          documentType={document.type}
-        >
-          <AppContent document={document} reload={reload} />
-        </CommentProvider>
-      </LayoutProvider>
+      <Toaster
+        position="bottom-right"
+        icons={TOASTER_ICONS}
+        toastOptions={TOASTER_OPTIONS}
+      />
+      <SettingsProvider>
+        {documentOrder.map((filePath) => {
+          const docState = documents.get(filePath);
+          const isActive = filePath === activeDocumentPath;
+          const hasContent = !!docState?.document.content;
+
+          // Don't mount inactive tabs that haven't loaded content yet
+          if (!hasContent && !isActive) return null;
+
+          // Active tab without content — show loading placeholder
+          if (!hasContent) {
+            return (
+              <div
+                key={filePath}
+                className="min-h-screen bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 flex items-center justify-center"
+              >
+                <div className="text-zinc-500 dark:text-zinc-400">
+                  {t("app.loading")}
+                </div>
+              </div>
+            );
+          }
+
+          return (
+            <div
+              key={filePath}
+              style={isActive ? undefined : { display: "none" }}
+            >
+              <PositionsProvider>
+                <CommentProvider
+                  filePath={filePath}
+                  clean={docState.document.clean}
+                >
+                  <AppContent
+                    document={docState.document}
+                    reload={reload}
+                    isActive={isActive}
+                  />
+                </CommentProvider>
+              </PositionsProvider>
+            </div>
+          );
+        })}
+      </SettingsProvider>
     </>
   );
 }

package/src/{cli/index.ts → cli.ts}

@@ -13,11 +13,10 @@ import * as os from "node:os";
 import { join, resolve } from "node:path";
 import { Command } from "commander";
 import open from "open";
-import { getCommentPath, parseCommentFile } from "../lib/comment-storage.js";
-import { getFileType } from "../lib/utils.js";
-import type { FileEntry } from "../server/index.js";
-import { removeServerInfo, startServer } from "../server/index.js";
-import type { DocumentType } from "../types/index.js";
+import { getCommentPath, parseCommentFile } from "./lib/comment-storage.js";
+import { isMarkdownFile } from "./lib/utils.js";
+import type { FileEntry } from "./server.js";
+import { removeServerInfo, startServer } from "./server.js";
 
 const program = new Command();
 
@@ -160,7 +159,7 @@ async function discoverServer(): Promise<ServerInfo | null> {
 
 async function attachFiles(
   server: ServerInfo,
-  files: { path: string; type: DocumentType }[],
+  files: { path: string }[],
 ): Promise<void> {
   for (const file of files) {
     try {
@@ -178,9 +177,9 @@ async function attachFiles(
 
       const data = await res.json();
       if (data.status === "added") {
-        console.log(`Added: ${data.fileName} (${data.type})`);
+        console.log(`Added: ${data.fileName}`);
       } else {
-        console.log(`Present: ${data.fileName} (${data.type})`);
+        console.log(`Present: ${data.fileName}`);
       }
     } catch (err) {
       console.error(
@@ -217,9 +216,6 @@ async function getServerTarget(
   });
 }
 
-/**
- * Recursively find all .comments.md files in a directory.
- */
 function findCommentFiles(dir: string): string[] {
   const results: string[] = [];
 
@@ -250,9 +246,6 @@ function findCommentFiles(dir: string): string[] {
   return results;
 }
 
-/**
- * Recursively find reviewable files (.md, .markdown, .html, .htm) in a directory.
- */
 function findReviewableFiles(dir: string): FileEntry[] {
   const results: FileEntry[] = [];
 
@@ -268,14 +261,8 @@ function findReviewableFiles(dir: string): FileEntry[] {
         if (lstat.isSymbolicLink()) continue;
         if (lstat.isDirectory()) {
           results.push(...findReviewableFiles(fullPath));
-        } else {
-          const type = getFileType(entry);
-          if (type) {
-            results.push({
-              type,
-              filePath: fullPath,
-            });
-          }
+        } else if (isMarkdownFile(entry)) {
+          results.push({ filePath: fullPath });
         }
       } catch (err) {
         if (isPermissionError(err)) {
@@ -292,9 +279,6 @@ function findReviewableFiles(dir: string): FileEntry[] {
   return results;
 }
 
-/**
- * Resolve CLI arguments into a deduplicated list of FileEntry objects.
- */
 function resolveFiles(args: string[]): FileEntry[] {
   const seen = new Set<string>();
   const files: FileEntry[] = [];
@@ -322,27 +306,21 @@ function resolveFiles(args: string[]): FileEntry[] {
     } else {
       if (seen.has(filePath)) continue;
 
-      const type = getFileType(filePath);
-      if (!type) {
+      if (!isMarkdownFile(filePath)) {
         console.error(
-          `error: unsupported file type: ${arg} (expected .md, .markdown, .html, or .htm)`,
+          `error: unsupported file type: ${arg} (expected .md or .markdown)`,
         );
         process.exit(1);
       }
 
       seen.add(filePath);
-      files.push({
-        type,
-        filePath,
-      });
+      files.push({ filePath });
     }
   }
 
   return files;
 }
 
-// ─── Onboarding ──────────────────────────────────────────────────────
-
 const SETTINGS_PATH = join(os.homedir(), ".readit", "settings.json");
 
 function isOnboarded(): boolean {
@@ -447,14 +425,11 @@ Go ahead and add a few comments to this document. When you're done, export them
 
 const WELCOME_PATH = join(os.homedir(), ".readit", "welcome.md");
 
-// ─── Program ─────────────────────────────────────────────────────────
-
 program
   .name("readit")
-  .description("Review Markdown and HTML documents with inline comments")
+  .description("Review Markdown documents with inline comments")
   .version("0.1.3");
 
-// List command: show all commented files
 program
   .command("list")
   .description("List all files with comments")
@@ -493,7 +468,6 @@ program
     }
   });
 
-// Show command: display comments for a file
 program
   .command("show <file>")
   .description("Show comments for a file")
@@ -537,9 +511,8 @@ program
     }
   });
 
-// Main review command (default) — accepts zero or more files/directories
 program
-  .argument("[files...]", "Markdown or HTML files/directories to review")
+  .argument("[files...]", "Markdown files/directories to review")
   .option("-p, --port <number>", "Port to run server on", "4567")
   .option("--host <address>", "Host address to bind to", "127.0.0.1")
   .option("--no-open", "Don't automatically open browser")
@@ -563,7 +536,6 @@ program
           files = [
             {
               content: WELCOME_CONTENT,
-              type: "markdown" as DocumentType,
               filePath: WELCOME_PATH,
             },
           ];
@@ -588,6 +560,17 @@ program
         process.exit(1);
       }
 
+      // Snapshot previous session before startServer() overwrites server.json
+      let previousPort: number | undefined;
+      try {
+        const info = JSON.parse(readFileSync(SERVER_INFO_PATH, "utf-8"));
+        if (!isAlive(info.pid)) {
+          previousPort = info.port;
+        }
+      } catch {
+        // No previous session — will open browser normally
+      }
+
       try {
         const { url, server } = await startServer({
           files,
@@ -608,7 +591,7 @@ readit - Document Review Tool
   Server running. Press Ctrl+C to stop.
 `);
         } else {
-          const fileList = files.map((f) => `  ${f.filePath} (${f.type})`);
+          const fileList = files.map((f) => `  ${f.filePath}`);
 
           console.log(`
 readit - Document Review Tool
@@ -622,7 +605,11 @@ ${fileList.join("\n")}
 `);
         }
 
-        if (options.open) {
+        const browserLikelyOpen =
+          previousPort === preferredPort ||
+          process.env.NODE_ENV === "development";
+
+        if (options.open && !browserLikelyOpen) {
           open(url);
         }
 
@@ -648,17 +635,16 @@ ${fileList.join("\n")}
     },
   );
 
-// Open command: add files to running server or start new one
 program
   .command("open")
-  .argument("<files...>", "Markdown or HTML files to add to running server")
+  .argument("<files...>", "Markdown files to add to running server")
   .description("Add files to a running readit server, or start a new one")
   .option("-p, --port <number>", "Port for new server (if starting)", "4567")
   .option("--host <address>", "Host for new server (if starting)", "127.0.0.1")
   .action(
     async (fileArgs: string[], options: { port: string; host: string }) => {
       // Resolve and validate files
-      const resolvedFiles: { path: string; type: DocumentType }[] = [];
+      const resolvedFiles: { path: string }[] = [];
       for (const arg of fileArgs) {
         const inputPath = resolve(process.cwd(), arg);
 
@@ -669,19 +655,17 @@ program
 
         const filePath = realpathSync(inputPath);
 
-        const type = getFileType(filePath);
-        if (!type) {
+        if (!isMarkdownFile(filePath)) {
           console.error(
-            `error: unsupported file type: ${arg} (expected .md, .markdown, .html, or .htm)`,
+            `error: unsupported file type: ${arg} (expected .md or .markdown)`,
           );
           process.exit(1);
         }
 
-        resolvedFiles.push({ path: filePath, type });
+        resolvedFiles.push({ path: filePath });
       }
 
       const files = resolvedFiles.map((f) => ({
-        type: f.type,
         filePath: f.path,
       }));
 
@@ -702,7 +686,7 @@ program
           return;
         }
 
-        const fileList = files.map((f) => `  ${f.filePath} (${f.type})`);
+        const fileList = files.map((f) => `  ${f.filePath}`);
         console.log(`
 readit - Document Review Tool