@peaske7/readit 0.1.4 → 0.1.6

package/src/components/comments/CommentInput.tsx

@@ -0,0 +1,119 @@
+import { BotMessageSquare, Copy } from "lucide-react";
+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";
+import { Text } from "../ui/Text";
+
+interface CommentInputProps {
+  selectedText: string | null;
+  onSubmit: (commentText: string) => void;
+  onCancel: () => void;
+  onCopyRaw: () => void;
+  onCopyForLLM: () => void;
+}
+
+export function CommentInput({
+  selectedText,
+  onSubmit,
+  onCancel,
+  onCopyRaw,
+  onCopyForLLM,
+}: CommentInputProps) {
+  const layout = use(LayoutContext);
+  const fontClass = layout
+    ? layout.fontFamily === FontFamilies.SANS_SERIF
+      ? "font-sans"
+      : "font-serif"
+    : undefined;
+
+  const [commentText, setCommentText] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (selectedText && textareaRef.current) {
+      // Only auto-focus on devices with precise pointing (desktop)
+      if (window.matchMedia("(pointer: fine)").matches) {
+        textareaRef.current.focus();
+      }
+    }
+  }, [selectedText]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally reset when selection changes
+  useEffect(() => {
+    setCommentText("");
+  }, [selectedText]);
+
+  const handleSubmit = () => {
+    onSubmit(commentText.trim());
+    setCommentText("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && e.metaKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === "Escape") {
+      onCancel();
+    }
+  };
+
+  if (!selectedText) {
+    return null;
+  }
+
+  return (
+    <div
+      data-comment-input
+      className="border-t border-zinc-200 dark:border-zinc-700 pt-3 pb-2"
+    >
+      <Text variant="caption" asChild>
+        <div className="italic mb-2 line-clamp-2">"{selectedText}"</div>
+      </Text>
+      <textarea
+        ref={textareaRef}
+        value={commentText}
+        onChange={(e) => setCommentText(e.target.value)}
+        placeholder="Add your comment..."
+        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",
+        )}
+        rows={2}
+        onKeyDown={handleKeyDown}
+      />
+      <div className="flex justify-end items-center gap-3 mt-2 text-sm">
+        <div className="flex gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400"
+            onClick={onCopyRaw}
+            title="Copy raw text (⌘C)"
+            aria-label="Copy raw text"
+          >
+            <Copy size={14} />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7 text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400"
+            onClick={onCopyForLLM}
+            title="Copy with context for LLM (⌘⇧C)"
+            aria-label="Copy for LLM"
+          >
+            <BotMessageSquare size={14} />
+          </Button>
+        </div>
+        <Button variant="ghost" size="sm" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button variant="link" size="sm" onClick={handleSubmit} title="⌘↵">
+          {commentText.trim() ? "Add Note" : "Highlight"}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/comments/CommentListItem.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { useCommentContext } from "../../contexts/CommentContext";
+import { cn } from "../../lib/utils";
+import type { Comment } from "../../types";
+import { InlineEditor } from "../InlineEditor";
+import { ActionBar } from "../ui/ActionBar";
+import { ActionLink } from "../ui/ActionLink";
+import { Text } from "../ui/Text";
+
+interface CommentListItemProps {
+  comment: Comment;
+  /** Called after navigation actions (Go to, Re-anchor) to close parent dropdown */
+  onAction?: () => void;
+}
+
+export function CommentListItem({ comment, onAction }: CommentListItemProps) {
+  const { editComment, deleteComment, navigateToComment, startReanchor } =
+    useCommentContext();
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const isUnresolved = comment.anchorConfidence === "unresolved";
+  const canGoTo = !isUnresolved;
+
+  const handleGoTo = () => {
+    navigateToComment(comment.id);
+    onAction?.();
+  };
+
+  const handleReanchor = () => {
+    startReanchor(comment.id);
+    onAction?.();
+  };
+
+  return (
+    <div
+      className={cn(
+        "group px-3 py-2 border-b border-zinc-100 dark:border-zinc-800 last:border-b-0",
+        isUnresolved && "opacity-50",
+      )}
+    >
+      <div className="flex items-center gap-1.5 mb-1">
+        <Text variant="caption" asChild>
+          <span className="italic line-clamp-1">"{comment.selectedText}"</span>
+        </Text>
+        {isUnresolved && (
+          <Text variant="caption" asChild>
+            <span className="shrink-0">· unresolved</span>
+          </Text>
+        )}
+      </div>
+
+      {isEditing ? (
+        <InlineEditor
+          initialText={comment.comment}
+          onSave={(text) => {
+            editComment(comment.id, text);
+            setIsEditing(false);
+          }}
+          onCancel={() => setIsEditing(false)}
+        />
+      ) : (
+        <>
+          <Text variant="body" asChild>
+            <p className="line-clamp-2">{comment.comment}</p>
+          </Text>
+
+          <ActionBar className="gap-3 mt-1.5">
+            <ActionLink onClick={() => setIsEditing(true)}>Edit</ActionLink>
+            <ActionLink onClick={() => deleteComment(comment.id)}>
+              Delete
+            </ActionLink>
+            {canGoTo && <ActionLink onClick={handleGoTo}>Go to</ActionLink>}
+            {isUnresolved && (
+              <ActionLink onClick={handleReanchor}>Re-anchor</ActionLink>
+            )}
+          </ActionBar>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/comments/CommentManager.tsx

@@ -0,0 +1,106 @@
+import { Copy, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useCommentContext } from "../../contexts/CommentContext";
+import { Button } from "../ui/Button";
+import { Text } from "../ui/Text";
+import { CommentListItem } from "./CommentListItem";
+
+interface CommentManagerProps {
+  onClose: () => void;
+}
+
+export function CommentManager({ onClose }: CommentManagerProps) {
+  const { comments, copyAllForLLM, deleteAll } = useCommentContext();
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
+
+  const unresolvedCount = comments.filter(
+    (c) => c.anchorConfidence === "unresolved",
+  ).length;
+  const resolvedCount = comments.length - unresolvedCount;
+
+  // Sort: resolved first, then unresolved
+  const sortedComments = [...comments].sort((a, b) => {
+    const aUnresolved = a.anchorConfidence === "unresolved";
+    const bUnresolved = b.anchorConfidence === "unresolved";
+    if (aUnresolved === bUnresolved) return 0;
+    return aUnresolved ? 1 : -1;
+  });
+
+  return (
+    <>
+      {confirmingDelete ? (
+        <div className="px-3 py-2 border-b border-zinc-100">
+          <Text variant="caption" className="mb-1.5">
+            Delete all {comments.length} comments?
+          </Text>
+          <div className="flex gap-3">
+            <Button
+              variant="link"
+              size="sm"
+              className="text-red-600 hover:text-red-700 h-auto p-0 text-xs"
+              onClick={() => {
+                deleteAll();
+                onClose();
+              }}
+            >
+              Delete
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto p-0 text-xs"
+              onClick={() => setConfirmingDelete(false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <Text variant="caption" asChild>
+          <div className="flex items-center justify-between px-3 py-2 border-b border-zinc-100">
+            <span>
+              {resolvedCount}
+              {unresolvedCount > 0 && (
+                <span> · {unresolvedCount} unresolved</span>
+              )}
+            </span>
+            <span className="flex items-center gap-1">
+              <button
+                type="button"
+                className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors"
+                onClick={copyAllForLLM}
+                title="Copy all comments"
+              >
+                <Copy size={13} />
+              </button>
+              <button
+                type="button"
+                className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-red-500 transition-colors"
+                onClick={() => setConfirmingDelete(true)}
+                title="Delete all comments"
+              >
+                <Trash2 size={13} />
+              </button>
+            </span>
+          </div>
+        </Text>
+      )}
+
+      <div className="overflow-y-auto max-h-80">
+        {sortedComments.length === 0 ? (
+          <Text variant="caption" asChild>
+            <div className="px-3 py-4 text-center">No comments yet</div>
+          </Text>
+        ) : (
+          sortedComments.map((comment) => (
+            <CommentListItem
+              key={comment.id}
+              comment={comment}
+              onAction={onClose}
+            />
+          ))
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/comments/CommentMinimap.tsx

@@ -0,0 +1,62 @@
+import { useCommentContext } from "../../contexts/CommentContext";
+import { MINIMAP_HEADER_OFFSET_PX } from "../../lib/layout-constants";
+import { cn } from "../../lib/utils";
+
+interface CommentMinimapProps {
+  /** Absolute Y-positions from document top for each comment */
+  documentPositions: Record<string, number>;
+  documentHeight: number;
+  viewportHeight: number;
+}
+
+export function CommentMinimap({
+  documentPositions,
+  documentHeight,
+  viewportHeight,
+}: CommentMinimapProps) {
+  const { sortedComments, hoveredCommentId, navigateToComment } =
+    useCommentContext();
+
+  // Don't render if no comments or document height is 0
+  if (sortedComments.length === 0 || documentHeight === 0) {
+    return null;
+  }
+
+  // Minimap height is the viewport height minus header
+  const minimapHeight = viewportHeight - MINIMAP_HEADER_OFFSET_PX;
+
+  return (
+    <div
+      className="fixed right-0 top-12 w-3 z-40"
+      style={{ height: minimapHeight }}
+    >
+      {sortedComments.map((comment) => {
+        const position = documentPositions[comment.id];
+        if (position === undefined) return null;
+
+        // Scale absolute position to minimap height
+        const indicatorTop = (position / documentHeight) * minimapHeight;
+
+        const isHovered = hoveredCommentId === comment.id;
+
+        return (
+          <button
+            type="button"
+            key={comment.id}
+            className={cn(
+              "absolute left-0 right-0 h-1.5 rounded-l transition-all duration-150 cursor-pointer",
+              isHovered
+                ? "bg-amber-500 w-4 -translate-x-1"
+                : "bg-amber-500 hover:bg-amber-600 hover:w-4 hover:-translate-x-1",
+            )}
+            style={{
+              top: Math.max(0, Math.min(indicatorTop, minimapHeight - 6)),
+            }}
+            onClick={() => navigateToComment(comment.id)}
+            title={`"${comment.selectedText.slice(0, 30)}${comment.selectedText.length > 30 ? "..." : ""}"`}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/comments/CommentNav.tsx

@@ -0,0 +1,104 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useCommentContext } from "../../contexts/CommentContext";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/Button";
+import { Text } from "../ui/Text";
+
+const ANIMATION_DURATION_MS = 200;
+
+export function CommentNav() {
+  const { currentIndex, sortedComments, navigatePrevious, navigateNext } =
+    useCommentContext();
+  const totalComments = sortedComments.length;
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [animating, setAnimating] = useState<"prev" | "next" | null>(null);
+  const animationTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    return () => clearTimeout(animationTimeoutRef.current);
+  }, []);
+
+  if (totalComments <= 1) return null;
+
+  const handlePrevious = () => {
+    setAnimating("prev");
+    navigatePrevious();
+    clearTimeout(animationTimeoutRef.current);
+    animationTimeoutRef.current = setTimeout(
+      () => setAnimating(null),
+      ANIMATION_DURATION_MS,
+    );
+  };
+
+  const handleNext = () => {
+    setAnimating("next");
+    navigateNext();
+    clearTimeout(animationTimeoutRef.current);
+    animationTimeoutRef.current = setTimeout(
+      () => setAnimating(null),
+      ANIMATION_DURATION_MS,
+    );
+  };
+
+  return (
+    <fieldset
+      className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div
+        className={cn(
+          "inline-flex items-center gap-1 h-9 px-3 rounded-full",
+          "bg-white/90 dark:bg-zinc-900/90 backdrop-blur-md shadow-lg border border-zinc-200/60 dark:border-zinc-700/60",
+          "transition-opacity duration-150 ease-out",
+          isHovered ? "opacity-100" : "opacity-0",
+        )}
+      >
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "size-7 rounded-full text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300",
+            animating === "prev" &&
+              "scale-90 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300",
+          )}
+          onClick={handlePrevious}
+          title="Previous comment (Alt+↑)"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+
+        <Text variant="body" asChild>
+          <span
+            className={cn(
+              "px-3 tabular-nums select-none min-w-[4rem] text-center",
+              "transition-transform duration-200 ease-out",
+              animating === "prev" && "-translate-x-0.5",
+              animating === "next" && "translate-x-0.5",
+            )}
+          >
+            {currentIndex + 1} of {totalComments}
+          </span>
+        </Text>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "size-7 rounded-full text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300",
+            animating === "next" &&
+              "scale-90 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300",
+          )}
+          onClick={handleNext}
+          title="Next comment (Alt+↓)"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+    </fieldset>
+  );
+}

package/src/components/ui/ActionBar.tsx

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/utils";
+
+function ActionBar({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="action-bar"
+      className={cn(
+        "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ActionBar };

package/src/components/ui/ActionLink.tsx

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const actionLinkVariants = cva(
+  "cursor-pointer transition-colors duration-150",
+  {
+    variants: {
+      variant: {
+        default: "hover:text-zinc-600",
+        destructive: "hover:text-red-500",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+function ActionLink({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"button"> & VariantProps<typeof actionLinkVariants>) {
+  return (
+    <button
+      type="button"
+      data-slot="action-link"
+      className={cn(actionLinkVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+export { ActionLink, actionLinkVariants };

package/src/components/ui/Button.tsx

@@ -0,0 +1,55 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors duration-150 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-blue-600 text-white hover:bg-blue-700",
+        secondary:
+          "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-zinc-700",
+        outline:
+          "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800",
+        ghost:
+          "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
+        destructive: "bg-red-600 text-white hover:bg-red-700",
+        link: "text-zinc-600 dark:text-zinc-400 underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-10 px-6",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };