@peaske7/readit 0.1.4 → 0.1.5

package/playwright.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: false, // Run sequentially to avoid port conflicts
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1, // Single worker to avoid port conflicts
+  reporter: "html",
+  timeout: 30_000,
+
+  use: {
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});

package/skills-lock.json

@@ -0,0 +1,20 @@
+{
+  "version": 1,
+  "skills": {
+    "remotion-best-practices": {
+      "source": "remotion-dev/skills",
+      "sourceType": "github",
+      "computedHash": "9851afb52e1b892c43b2af973bda1776ce01fedfdfe704e0cfd70069a3a9c300"
+    },
+    "simple": {
+      "source": "roin-orca/skills",
+      "sourceType": "github",
+      "computedHash": "cfde9dde00c9b1f8934e0312440a5ae2ed76dbd81e49ba7433e0e63ea6551d13"
+    },
+    "vercel-react-best-practices": {
+      "source": "vercel-labs/agent-skills",
+      "sourceType": "github",
+      "computedHash": "afeca00ac2f492d88fdd010e73d91719a5b57c564bb4a73325b0bd77e11323ab"
+    }
+  }
+}

package/src/App.tsx

@@ -0,0 +1,396 @@
+import { use, useCallback, useEffect, useRef } from "react";
+import { Toaster } 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 { 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 { useClipboard } from "./hooks/useClipboard";
+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 { cn } from "./lib/utils";
+import { appStore, useAppStore } from "./store";
+
+const TOASTER_ICONS = { success: null, error: null, info: null, warning: null };
+const TOASTER_OPTIONS = {
+  unstyled: true,
+  duration: 2000,
+  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" }),
+    ),
+  },
+};
+
+function AppContent() {
+  const {
+    comments,
+    sortedComments,
+    addComment,
+    reanchorComment,
+    reanchorTarget,
+    cancelReanchor,
+    hoveredCommentId,
+    setHoveredCommentId,
+    navigatePrevious,
+    navigateNext,
+  } = use(CommentContext)!;
+
+  const { document, reload } = useDocument();
+
+  const {
+    selection,
+    highlightPositions,
+    documentPositions,
+    pendingSelectionTop,
+    onTextSelect,
+    onPositionsChange,
+    clearSelection,
+  } = useTextSelection();
+
+  const {
+    copyAll,
+    copyAllRaw,
+    exportJson,
+    copySelectionRaw,
+    copySelectionForLLM,
+  } = useClipboard({
+    comments,
+    document: document ?? undefined,
+    selection: selection ?? undefined,
+    clearSelection,
+  });
+
+  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 elementTop = getElementTopInDocument({
+        elementRect,
+        scrollY: window.scrollY,
+        iframeTopOffset,
+      });
+      const scrollTarget = calculateScrollTarget({
+        elementTop,
+        viewportHeight: window.innerHeight,
+      });
+      window.scrollTo({ top: scrollTarget, behavior: "smooth" });
+    },
+    [document?.type],
+  );
+
+  const handleHighlightClick = useCallback((commentId: string) => {
+    const marginNote = window.document.querySelector(
+      `article[data-comment-id="${commentId}"]`,
+    );
+    if (marginNote) {
+      marginNote.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, []);
+
+  useEffect(() => {
+    const eventSource = new EventSource("/api/heartbeat");
+    return () => eventSource.close();
+  }, []);
+
+  // Scroll save/restore for tab switching
+  const setScrollY = useAppStore((s) => s.setScrollY);
+  const savedScrollY = useAppStore(
+    (s) => s.getActiveDocumentState()?.scrollY ?? 0,
+  );
+  const scrollRestored = useRef(false);
+
+  // Save scroll position on unmount
+  useEffect(() => {
+    return () => {
+      setScrollY(window.scrollY);
+    };
+  }, [setScrollY]);
+
+  // Restore scroll position on mount (after highlights paint)
+  useEffect(() => {
+    if (savedScrollY === 0 || scrollRestored.current) return;
+    scrollRestored.current = true;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        window.scrollTo(0, savedScrollY);
+      });
+    });
+  }, [savedScrollY]);
+
+  const handleAddComment = useCallback(
+    (commentText: string) => {
+      if (!selection) return;
+
+      addComment(
+        selection.text,
+        commentText,
+        selection.startOffset,
+        selection.endOffset,
+      );
+
+      clearSelection();
+    },
+    [selection, addComment, clearSelection],
+  );
+
+  const handleConfirmReanchor = useCallback(() => {
+    if (!selection || !reanchorTarget) return;
+
+    reanchorComment(
+      reanchorTarget.commentId,
+      selection.text,
+      selection.startOffset,
+      selection.endOffset,
+    );
+
+    cancelReanchor();
+    clearSelection();
+  }, [
+    selection,
+    reanchorTarget,
+    reanchorComment,
+    cancelReanchor,
+    clearSelection,
+  ]);
+
+  const handleCancelReanchor = useCallback(() => {
+    cancelReanchor();
+    clearSelection();
+  }, [cancelReanchor, clearSelection]);
+
+  if (!document) return null;
+
+  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 && (
+          <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
+                headings={headings}
+                activeId={activeHeadingId}
+                onHeadingClick={scrollToHeading}
+              />
+            </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}
+            onTextSelect={onTextSelect}
+            onHighlightPositionsChange={onPositionsChange}
+            onHighlightHover={setHoveredCommentId}
+            onHighlightClick={handleHighlightClick}
+          />
+        </div>
+
+        <div className="w-72 flex-shrink-0 py-6 pr-4 relative">
+          {selection && pendingSelectionTop !== undefined && (
+            <div
+              className="absolute left-0 right-0 z-10 bg-white dark:bg-zinc-900"
+              style={{ top: pendingSelectionTop }}
+            >
+              {reanchorTarget !== null ? (
+                <ReanchorConfirm
+                  selectionText={selection.text}
+                  onConfirm={handleConfirmReanchor}
+                  onCancel={handleCancelReanchor}
+                />
+              ) : (
+                <CommentInput
+                  selectedText={selection.text}
+                  onSubmit={handleAddComment}
+                  onCancel={clearSelection}
+                  onCopyRaw={copySelectionRaw}
+                  onCopyForLLM={copySelectionForLLM}
+                />
+              )}
+            </div>
+          )}
+
+          <MarginNotes
+            sortedComments={sortedComments}
+            highlightPositions={highlightPositions}
+            pendingSelectionTop={selection ? pendingSelectionTop : undefined}
+          />
+        </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">
+        Made with ❤️ by Jay and Claude
+      </footer>
+    </div>
+  );
+}
+
+function useTabKeyboardShortcuts() {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!event.metaKey) return;
+
+      // Cmd+1-9: switch to tab by index
+      const digit = Number.parseInt(event.key, 10);
+      if (digit >= 1 && digit <= 9) {
+        const { documentOrder } = appStore.getState();
+        if (documentOrder.length <= 1) return;
+        const targetIndex = Math.min(digit - 1, documentOrder.length - 1);
+        const targetPath = documentOrder[targetIndex];
+        if (targetPath) {
+          event.preventDefault();
+          appStore.getState().setActiveDocument(targetPath);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+}
+
+function App() {
+  const { document, error, isInitialized } = useDocument();
+  const documentOrder = useAppStore((s) => s.documentOrder);
+
+  useTabKeyboardShortcuts();
+
+  if (error) {
+    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-red-600">{error}</div>
+      </div>
+    );
+  }
+
+  if (!isInitialized) {
+    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">Loading...</div>
+      </div>
+    );
+  }
+
+  if (documentOrder.length === 0) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 flex flex-col">
+        <TabBar />
+        <div className="flex-1 flex items-center justify-center">
+          <p className="text-zinc-400 dark:text-zinc-500 text-sm">
+            No documents open.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  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">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <TabBar />
+      <LayoutProvider filePath={document.filePath}>
+        <CommentProvider
+          filePath={document.filePath}
+          clean={document.clean}
+          documentContent={document.content}
+          fileName={document.fileName}
+          documentType={document.type}
+        >
+          <AppContent />
+        </CommentProvider>
+      </LayoutProvider>
+    </>
+  );
+}
+
+export default App;