@peaske7/readit 0.1.4 → 0.1.6

package/src/components/Header.tsx

@@ -0,0 +1,63 @@
+import { useCommentContext } from "../contexts/CommentContext";
+import { useLayoutContext } from "../contexts/LayoutContext";
+import { cn } from "../lib/utils";
+import { ActionsMenu } from "./ActionsMenu";
+import { CommentBadge } from "./comments/CommentBadge";
+import { Text } from "./ui/Text";
+
+interface HeaderProps {
+  fileName: string;
+  onCopyAll: () => void;
+  onCopyAllRaw: () => void;
+  onExportJson: () => void;
+  onReload: () => void;
+}
+
+export function Header({
+  fileName,
+  onCopyAll,
+  onCopyAllRaw,
+  onExportJson,
+  onReload,
+}: HeaderProps) {
+  const { reanchorTarget } = useCommentContext();
+  const { isFullscreen } = useLayoutContext();
+
+  return (
+    <header className="sticky top-0 z-50 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-100 dark:border-zinc-800">
+      <div
+        className={cn(
+          "px-6 py-3 flex items-center justify-between",
+          !isFullscreen && "max-w-7xl mx-auto",
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <Text variant="title" asChild>
+            <h1>readit</h1>
+          </Text>
+          <span className="text-zinc-200 dark:text-zinc-700 font-light">—</span>
+          <Text variant="caption" asChild>
+            <span className="truncate max-w-[200px]">{fileName}</span>
+          </Text>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {reanchorTarget && (
+            <Text variant="caption" asChild>
+              <span className="italic">Select text to re-anchor</span>
+            </Text>
+          )}
+
+          <CommentBadge />
+
+          <ActionsMenu
+            onCopyAll={onCopyAll}
+            onCopyAllRaw={onCopyAllRaw}
+            onExportJson={onExportJson}
+            onReload={onReload}
+          />
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/InlineEditor.tsx

@@ -0,0 +1,72 @@
+import { use, useEffect, useRef, useState } from "react";
+import { LayoutContext } from "../contexts/LayoutContext";
+import { cn } from "../lib/utils";
+import { FontFamilies } from "../types";
+import { Button } from "./ui/Button";
+
+interface InlineEditorProps {
+  initialText: string;
+  onSave: (text: string) => void;
+  onCancel: () => void;
+  rows?: number;
+  className?: string;
+}
+
+export function InlineEditor({
+  initialText,
+  onSave,
+  onCancel,
+  rows = 2,
+  className,
+}: InlineEditorProps) {
+  const layout = use(LayoutContext);
+  const fontClass = layout
+    ? layout.fontFamily === FontFamilies.SANS_SERIF
+      ? "font-sans"
+      : "font-serif"
+    : undefined;
+  const [editText, setEditText] = useState(initialText);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const handleSave = () => {
+    if (editText.trim()) {
+      onSave(editText);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <textarea
+        ref={textareaRef}
+        value={editText}
+        onChange={(e) => setEditText(e.target.value)}
+        className={cn(
+          fontClass,
+          "w-full px-2 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800 resize-none focus:outline-none focus:border-zinc-400 dark:focus:border-zinc-500",
+          className,
+        )}
+        rows={rows}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && e.metaKey) {
+            handleSave();
+          }
+          if (e.key === "Escape") {
+            onCancel();
+          }
+        }}
+      />
+      <div className="flex gap-3 text-sm">
+        <Button variant="link" size="sm" onClick={handleSave}>
+          Save
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/MarginNote.tsx

@@ -0,0 +1,198 @@
+import { cva } from "class-variance-authority";
+import { useState } from "react";
+import { useCommentContext } from "../contexts/CommentContext";
+import { useLayoutContext } from "../contexts/LayoutContext";
+import { cn } from "../lib/utils";
+import { type Comment, FontFamilies } from "../types";
+import { InlineEditor } from "./InlineEditor";
+import { ActionBar } from "./ui/ActionBar";
+import { ActionLink } from "./ui/ActionLink";
+import { SeparatorDot } from "./ui/SeparatorDot";
+
+interface MarginNoteProps {
+  comment: Comment;
+  top: number;
+  commentIndex?: number;
+}
+
+const selectedTextVariants = cva(
+  "text-sm italic mb-1 line-clamp-1 flex items-center gap-1 transition-colors duration-150",
+  {
+    variants: {
+      hovered: {
+        true: "text-zinc-600 dark:text-zinc-400",
+        false: "text-zinc-400 dark:text-zinc-500",
+      },
+    },
+    defaultVariants: { hovered: false },
+  },
+);
+
+const commentTextVariants = cva(
+  "text-sm whitespace-pre-wrap transition-colors duration-150",
+  {
+    variants: {
+      hovered: {
+        true: "text-zinc-800 dark:text-zinc-200",
+        false: "text-zinc-500 dark:text-zinc-400",
+      },
+    },
+    defaultVariants: { hovered: false },
+  },
+);
+
+const badgeVariants = cva(
+  "absolute -left-4 top-2 text-xs tabular-nums transition-colors duration-150",
+  {
+    variants: {
+      hovered: {
+        true: "text-zinc-600 dark:text-zinc-400",
+        false: "text-zinc-400 dark:text-zinc-500",
+      },
+    },
+    defaultVariants: { hovered: false },
+  },
+);
+
+export function MarginNote({
+  comment,
+  top,
+  commentIndex = 0,
+}: MarginNoteProps) {
+  const { fontFamily } = useLayoutContext();
+  const {
+    editComment,
+    deleteComment,
+    copyCommentRaw,
+    copyCommentForLLM,
+    hoveredCommentId,
+    setHoveredCommentId,
+    scrollToHighlight,
+  } = useCommentContext();
+
+  const isHovered = hoveredCommentId === comment.id;
+  const fontClass =
+    fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif";
+  const [isEditing, setIsEditing] = useState(false);
+
+  const hasNote = comment.comment.trim().length > 0;
+
+  const handleCopy = () => {
+    copyCommentRaw(comment);
+  };
+
+  const createdAtFormatted = new Date(comment.createdAt).toLocaleString();
+
+  // Highlight-only (no note): minimal em-dash marker
+  if (!hasNote && !isEditing) {
+    return (
+      <article
+        className="absolute left-0 right-0 group"
+        style={{ top }}
+        title={`Added: ${createdAtFormatted}`}
+        data-comment-id={comment.id}
+        onMouseEnter={() => setHoveredCommentId(comment.id)}
+        onMouseLeave={() => setHoveredCommentId(undefined)}
+      >
+        <span className={badgeVariants({ hovered: isHovered })}>—</span>
+
+        <div className="pt-2 pb-2 pl-3">
+          <ActionBar
+            className={cn("gap-1.5 duration-150", isHovered && "opacity-100")}
+          >
+            <ActionLink onClick={() => setIsEditing(true)}>Add note</ActionLink>
+            <SeparatorDot />
+            <ActionLink
+              variant="destructive"
+              onClick={() => deleteComment(comment.id)}
+            >
+              Delete
+            </ActionLink>
+          </ActionBar>
+        </div>
+      </article>
+    );
+  }
+
+  return (
+    <article
+      className="absolute left-0 right-0 group"
+      style={{ top }}
+      title={`Added: ${createdAtFormatted}`}
+      data-comment-id={comment.id}
+      onMouseEnter={() => setHoveredCommentId(comment.id)}
+      onMouseLeave={() => setHoveredCommentId(undefined)}
+    >
+      <span className={badgeVariants({ hovered: isHovered })}>
+        {commentIndex + 1}
+      </span>
+
+      <div
+        className={cn(
+          "relative border-t border-zinc-100 dark:border-zinc-800 pt-3 pb-2 pl-3 transition-colors duration-150",
+          comment.anchorConfidence === "unresolved" && "opacity-60",
+        )}
+      >
+        {!isEditing && (
+          <div
+            className={cn(
+              fontClass,
+              selectedTextVariants({ hovered: isHovered }),
+            )}
+          >
+            <button
+              type="button"
+              onClick={() => scrollToHighlight(comment.id)}
+              className="cursor-pointer hover:underline text-left"
+            >
+              "{comment.selectedText}"
+            </button>
+          </div>
+        )}
+
+        {isEditing ? (
+          <InlineEditor
+            initialText={comment.comment}
+            onSave={(text) => {
+              editComment(comment.id, text);
+              setIsEditing(false);
+            }}
+            onCancel={() => setIsEditing(false)}
+          />
+        ) : (
+          <>
+            <p
+              className={cn(
+                fontClass,
+                commentTextVariants({ hovered: isHovered }),
+              )}
+            >
+              {comment.comment}
+            </p>
+            <ActionBar className="gap-1.5 mt-2">
+              <ActionLink onClick={() => setIsEditing(true)}>Edit</ActionLink>
+              <SeparatorDot />
+              <ActionLink
+                variant="destructive"
+                onClick={() => deleteComment(comment.id)}
+              >
+                Delete
+              </ActionLink>
+              <SeparatorDot />
+              <ActionLink onClick={handleCopy} title="Copy raw text (⌘C)">
+                Copy
+              </ActionLink>
+              <SeparatorDot />
+              <ActionLink
+                onClick={() => copyCommentForLLM(comment)}
+                title="Copy with context for LLM (⌘⇧C)"
+              >
+                LLM
+              </ActionLink>
+            </ActionBar>
+          </>
+        )}
+      </div>
+    </article>
+  );
+}

package/src/components/MarginNotes.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import { resolveMarginNotePositions } from "../lib/margin-layout";
+import type { Comment } from "../types";
+import { MarginNote } from "./MarginNote";
+
+interface MarginNotesProps {
+  /** Comments pre-sorted by startOffset */
+  sortedComments: Comment[];
+  highlightPositions: Record<string, number>;
+  pendingSelectionTop?: number;
+}
+
+export function MarginNotes({
+  sortedComments,
+  highlightPositions,
+  pendingSelectionTop,
+}: MarginNotesProps) {
+  // Calculate resolved positions (avoiding overlaps with input and other notes)
+  const resolvedPositions = useMemo(
+    () =>
+      resolveMarginNotePositions(
+        sortedComments.map((c) => c.id),
+        highlightPositions,
+        pendingSelectionTop,
+      ),
+    [sortedComments, highlightPositions, pendingSelectionTop],
+  );
+
+  if (sortedComments.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="relative w-64">
+      {sortedComments.map((comment, index) => {
+        const top = resolvedPositions.get(comment.id);
+        if (top === undefined) return null;
+
+        return (
+          <MarginNote
+            key={comment.id}
+            comment={comment}
+            top={top}
+            commentIndex={index}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/RawModal.tsx

@@ -0,0 +1,141 @@
+import { Copy } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { useAppStore } from "../store";
+import { Button } from "./ui/Button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/Dialog";
+import { Text } from "./ui/Text";
+
+interface RawModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+type ModalState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "error"; error: string }
+  | { status: "empty"; path: string }
+  | { status: "success"; content: string; path: string };
+
+export function RawModal({ isOpen, onClose }: RawModalProps) {
+  const [state, setState] = useState<ModalState>({ status: "idle" });
+  const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
+
+  // Fetch raw comments when modal opens
+  useEffect(() => {
+    if (!isOpen) {
+      setState({ status: "idle" });
+      return;
+    }
+
+    setState({ status: "loading" });
+
+    const fetchRawComments = async () => {
+      try {
+        const query = activeDocumentPath
+          ? `?path=${encodeURIComponent(activeDocumentPath)}`
+          : "";
+        const response = await fetch(`/api/comments/raw${query}`);
+        if (!response.ok) {
+          throw new Error("Failed to fetch raw comments");
+        }
+        const result = await response.json();
+        if (result.content === null) {
+          setState({ status: "empty", path: result.path });
+        } else {
+          setState({
+            status: "success",
+            content: result.content,
+            path: result.path,
+          });
+        }
+      } catch (err) {
+        setState({
+          status: "error",
+          error: err instanceof Error ? err.message : "Unknown error",
+        });
+      }
+    };
+
+    fetchRawComments();
+  }, [isOpen, activeDocumentPath]);
+
+  const handleCopy = useCallback(async () => {
+    if (state.status !== "success") return;
+
+    try {
+      await navigator.clipboard.writeText(state.content);
+      toast.success("Copied to clipboard");
+    } catch {
+      toast.error("Failed to copy");
+    }
+  }, [state]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent className="max-w-2xl max-h-[80vh]">
+        <DialogHeader>
+          <DialogTitle>Raw Comments</DialogTitle>
+          {state.status === "success" && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              onClick={handleCopy}
+              title="Copy to clipboard"
+            >
+              <Copy className="w-4 h-4" />
+            </Button>
+          )}
+        </DialogHeader>
+
+        {(state.status === "success" || state.status === "empty") && (
+          <DialogDescription className="px-4 py-2 border-b border-zinc-50 dark:border-zinc-800 text-xs text-zinc-400 dark:text-zinc-500 font-mono truncate">
+            {state.path}
+          </DialogDescription>
+        )}
+
+        <DialogBody>
+          {state.status === "loading" && (
+            <Text variant="caption" className="text-center py-8">
+              Loading...
+            </Text>
+          )}
+
+          {state.status === "error" && (
+            <Text variant="body" className="text-red-500 text-center py-8">
+              {state.error}
+            </Text>
+          )}
+
+          {state.status === "empty" && (
+            <Text variant="caption" className="text-center py-8">
+              No comments file yet. Add comments to create one.
+            </Text>
+          )}
+
+          {state.status === "success" && (
+            <Text variant="body" asChild>
+              <pre className="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
+                {state.content}
+              </pre>
+            </Text>
+          )}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ReanchorConfirm.tsx

@@ -0,0 +1,33 @@
+import { Button } from "./ui/Button";
+import { Text } from "./ui/Text";
+
+interface ReanchorConfirmProps {
+  selectionText: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ReanchorConfirm({
+  selectionText,
+  onConfirm,
+  onCancel,
+}: ReanchorConfirmProps) {
+  return (
+    <div className="border-t border-zinc-200 dark:border-zinc-700 pt-2 pb-3 pl-6">
+      <Text variant="body" className="mb-2">
+        Re-anchor to this selection?
+      </Text>
+      <Text variant="caption" asChild>
+        <p className="italic line-clamp-2 mb-2">"{selectionText}"</p>
+      </Text>
+      <div className="flex gap-3 text-sm">
+        <Button variant="link" size="sm" onClick={onConfirm}>
+          Confirm
+        </Button>
+        <Button variant="ghost" size="sm" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}