@peaske7/readit 0.1.8 → 0.2.1

package/src/components/MarginNote.tsx

@@ -1,207 +0,0 @@
-import { cva } from "class-variance-authority";
-import { useState } from "react";
-import { useCommentContext } from "../contexts/CommentContext";
-import { useLayoutContext } from "../contexts/LayoutContext";
-import { useLocale } from "../contexts/LocaleContext";
-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 { t } = useLocale();
-  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)}>
-              {t("marginNote.addNote")}
-            </ActionLink>
-            <SeparatorDot />
-            <ActionLink
-              variant="destructive"
-              onClick={() => deleteComment(comment.id)}
-            >
-              {t("marginNote.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)}>
-                {t("marginNote.edit")}
-              </ActionLink>
-              <SeparatorDot />
-              <ActionLink
-                variant="destructive"
-                onClick={() => deleteComment(comment.id)}
-              >
-                {t("marginNote.delete")}
-              </ActionLink>
-              <SeparatorDot />
-              <ActionLink
-                onClick={handleCopy}
-                title={t("marginNote.copyTitle")}
-              >
-                {t("marginNote.copy")}
-              </ActionLink>
-              <SeparatorDot />
-              <ActionLink
-                onClick={() => copyCommentForLLM(comment)}
-                title={t("marginNote.llmTitle")}
-              >
-                {t("marginNote.llm")}
-              </ActionLink>
-            </ActionBar>
-          </>
-        )}
-      </div>
-    </article>
-  );
-}

package/src/components/MarginNotes.tsx

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

@@ -1,143 +0,0 @@
-import { Copy } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
-import { useLocale } from "../contexts/LocaleContext";
-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 { t } = useLocale();
-  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(t("rawModal.copiedToClipboard"));
-    } catch {
-      toast.error(t("rawModal.failedToCopy"));
-    }
-  }, [state, t]);
-
-  return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) onClose();
-      }}
-    >
-      <DialogContent className="max-w-2xl max-h-[80vh]">
-        <DialogHeader>
-          <DialogTitle>{t("rawModal.title")}</DialogTitle>
-          {state.status === "success" && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="size-7"
-              onClick={handleCopy}
-              title={t("rawModal.copyTitle")}
-            >
-              <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">
-              {t("rawModal.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">
-              {t("rawModal.noComments")}
-            </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

@@ -1,36 +0,0 @@
-import { useLocale } from "../contexts/LocaleContext";
-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) {
-  const { t } = useLocale();
-
-  return (
-    <div className="border-t border-zinc-200 dark:border-zinc-700 pt-2 pb-3 pl-6">
-      <Text variant="body" className="mb-2">
-        {t("reanchor.question")}
-      </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}>
-          {t("reanchor.confirm")}
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onCancel}>
-          {t("reanchor.cancel")}
-        </Button>
-      </div>
-    </div>
-  );
-}