@peaske7/readit 0.1.8 → 0.2.1

package/src/components/TableOfContents.tsx

@@ -1,108 +0,0 @@
-import { use, useMemo, useState } from "react";
-import { LayoutContext } from "../contexts/LayoutContext";
-import type { Heading } from "../hooks/useHeadings";
-import { cn } from "../lib/utils";
-import { FontFamilies } from "../types";
-
-interface TableOfContentsProps {
-  headings: Heading[];
-  activeId: string | null;
-  onHeadingClick: (id: string) => void;
-}
-
-export function TableOfContents({
-  headings,
-  activeId,
-  onHeadingClick,
-}: TableOfContentsProps) {
-  const layout = use(LayoutContext);
-  const fontClass = layout
-    ? layout.fontFamily === FontFamilies.SANS_SERIF
-      ? "font-sans"
-      : "font-serif"
-    : undefined;
-
-  const [expandedH2s, setExpandedH2s] = useState<Set<string>>(() => new Set());
-
-  const h2sWithChildren = useMemo(() => {
-    const result = new Set<string>();
-    let currentH2: string | null = null;
-
-    for (const heading of headings) {
-      if (heading.level === 2) {
-        currentH2 = heading.id;
-      } else if (heading.level > 2 && currentH2) {
-        result.add(currentH2);
-      } else if (heading.level === 1) {
-        currentH2 = null;
-      }
-    }
-    return result;
-  }, [headings]);
-
-  const visibleHeadings = useMemo(() => {
-    let currentH2: string | null = null;
-
-    return headings.filter((heading) => {
-      if (heading.level <= 2) {
-        if (heading.level === 2) {
-          currentH2 = heading.id;
-        } else {
-          currentH2 = null;
-        }
-        return true;
-      }
-
-      return currentH2 && expandedH2s.has(currentH2);
-    });
-  }, [headings, expandedH2s]);
-
-  const toggleH2 = (id: string) => {
-    setExpandedH2s((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-
-  if (headings.length === 0) {
-    return null;
-  }
-
-  return (
-    <nav className={cn("toc", fontClass)} aria-label="Table of contents">
-      {visibleHeadings.map((heading) => {
-        const hasChildren =
-          heading.level === 2 && h2sWithChildren.has(heading.id);
-        const isExpanded = expandedH2s.has(heading.id);
-
-        return (
-          <a
-            key={heading.id}
-            href={`#${heading.id}`}
-            title={heading.text}
-            className={`toc-item toc-level-${heading.level}${activeId === heading.id ? " toc-active" : ""}`}
-            onClick={(e) => {
-              e.preventDefault();
-              if (hasChildren) {
-                toggleH2(heading.id);
-              }
-              onHeadingClick(heading.id);
-            }}
-          >
-            {heading.text}
-            {hasChildren && (
-              <span className="toc-toggle ml-1 opacity-40">
-                {isExpanded ? "▾" : "▸"}
-              </span>
-            )}
-          </a>
-        );
-      })}
-    </nav>
-  );
-}

package/src/components/comments/CommentBadge.tsx

@@ -1,49 +0,0 @@
-import { useState } from "react";
-import { useCommentContext } from "../../contexts/CommentContext";
-import { useLocale } from "../../contexts/LocaleContext";
-import { cn } from "../../lib/utils";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "../ui/DropdownMenu";
-import { CommentManager } from "./CommentManager";
-
-export function CommentBadge() {
-  const { t } = useLocale();
-  const { commentCount } = useCommentContext();
-
-  const [commentsOpen, setCommentsOpen] = useState(false);
-
-  if (commentCount === 0) return null;
-
-  return (
-    <DropdownMenu open={commentsOpen} onOpenChange={setCommentsOpen}>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "inline-flex items-center gap-1 text-xs tabular-nums select-none transition-colors",
-            commentsOpen
-              ? "text-zinc-600"
-              : "text-zinc-400 hover:text-zinc-600",
-          )}
-          title={
-            commentCount === 1
-              ? t("commentBadge.title", { count: commentCount })
-              : t("commentBadge.titlePlural", { count: commentCount })
-          }
-        >
-          <span className="text-zinc-300">·</span>
-          {commentCount}
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        className="w-80 max-h-96 overflow-hidden p-0"
-      >
-        <CommentManager onClose={() => setCommentsOpen(false)} />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/comments/CommentInput.tsx

@@ -1,114 +0,0 @@
-import { BotMessageSquare, Copy } from "lucide-react";
-import { use, useEffect, useRef, useState } from "react";
-import { LayoutContext } from "../../contexts/LayoutContext";
-import { useLocale } from "../../contexts/LocaleContext";
-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 { t } = useLocale();
-  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(() => {
-    // Only auto-focus on devices with precise pointing (desktop)
-    if (textareaRef.current && window.matchMedia("(pointer: fine)").matches) {
-      textareaRef.current.focus();
-    }
-  }, []);
-
-  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={t("comment.placeholder")}
-        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={t("comment.copyRawTitle")}
-            aria-label={t("comment.copyRawLabel")}
-          >
-            <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={t("comment.copyLLMTitle")}
-            aria-label={t("comment.copyLLMLabel")}
-          >
-            <BotMessageSquare size={14} />
-          </Button>
-        </div>
-        <Button variant="ghost" size="sm" onClick={onCancel}>
-          {t("comment.cancel")}
-        </Button>
-        <Button variant="link" size="sm" onClick={handleSubmit} title="⌘↵">
-          {commentText.trim() ? t("comment.addNote") : t("comment.highlight")}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/comments/CommentListItem.tsx

@@ -1,92 +0,0 @@
-import { useState } from "react";
-import { useCommentContext } from "../../contexts/CommentContext";
-import { useLocale } from "../../contexts/LocaleContext";
-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 { t } = useLocale();
-  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">· {t("commentList.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)}>
-              {t("commentList.edit")}
-            </ActionLink>
-            <ActionLink onClick={() => deleteComment(comment.id)}>
-              {t("commentList.delete")}
-            </ActionLink>
-            {canGoTo && (
-              <ActionLink onClick={handleGoTo}>
-                {t("commentList.goTo")}
-              </ActionLink>
-            )}
-            {isUnresolved && (
-              <ActionLink onClick={handleReanchor}>
-                {t("commentList.reanchor")}
-              </ActionLink>
-            )}
-          </ActionBar>
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/comments/CommentManager.tsx

@@ -1,113 +0,0 @@
-import { Copy, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { useCommentContext } from "../../contexts/CommentContext";
-import { useLocale } from "../../contexts/LocaleContext";
-import { Button } from "../ui/Button";
-import { Text } from "../ui/Text";
-import { CommentListItem } from "./CommentListItem";
-
-interface CommentManagerProps {
-  onClose: () => void;
-}
-
-export function CommentManager({ onClose }: CommentManagerProps) {
-  const { t } = useLocale();
-  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">
-            {t("commentManager.deleteAllConfirm", { count: comments.length })}
-          </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();
-              }}
-            >
-              {t("commentManager.delete")}
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-auto p-0 text-xs"
-              onClick={() => setConfirmingDelete(false)}
-            >
-              {t("commentManager.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} {t("commentManager.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={t("commentManager.copyAllTitle")}
-              >
-                <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={t("commentManager.deleteAllTitle")}
-              >
-                <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">
-              {t("commentManager.noComments")}
-            </div>
-          </Text>
-        ) : (
-          sortedComments.map((comment) => (
-            <CommentListItem
-              key={comment.id}
-              comment={comment}
-              onAction={onClose}
-            />
-          ))
-        )}
-      </div>
-    </>
-  );
-}

package/src/components/comments/CommentMinimap.tsx

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

@@ -1,109 +0,0 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useCommentContext } from "../../contexts/CommentContext";
-import { useLocale } from "../../contexts/LocaleContext";
-import { cn } from "../../lib/utils";
-import { Button } from "../ui/Button";
-import { Text } from "../ui/Text";
-
-const ANIMATION_DURATION_MS = 200;
-
-export function CommentNav() {
-  const { t } = useLocale();
-  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={t("commentNav.previous")}
-        >
-          <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",
-            )}
-          >
-            {t("commentNav.of", {
-              current: currentIndex + 1,
-              total: 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={t("commentNav.next")}
-        >
-          <ChevronRight className="w-4 h-4" />
-        </Button>
-      </div>
-    </fieldset>
-  );
-}

package/src/components/ui/ActionBar.tsx

@@ -1,16 +0,0 @@
-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 };