@peaske7/readit 0.2.0 → 0.2.1

package/src/components/TableOfContents.tsx

@@ -1,108 +0,0 @@
-import { use, useMemo, useState } from "react";
-import { SettingsContext } from "../contexts/SettingsContext";
-import type { Heading } from "../hooks/useHeadings";
-import { cn } from "../lib/utils";
-import { FontFamilies } from "../schema";
-
-interface TableOfContentsProps {
-  headings: Heading[];
-  activeId: string | null;
-  onHeadingClick: (id: string) => void;
-}
-
-export function TableOfContents({
-  headings,
-  activeId,
-  onHeadingClick,
-}: TableOfContentsProps) {
-  const settings = use(SettingsContext);
-  const fontClass = settings
-    ? settings.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,86 +0,0 @@
-import { use, useEffect, useRef, useState } from "react";
-import { useLocale } from "../../contexts/LocaleContext";
-import { SettingsContext } from "../../contexts/SettingsContext";
-import { cn } from "../../lib/utils";
-import { FontFamilies } from "../../schema";
-import { Button } from "../ui/Button";
-import { Text } from "../ui/Text";
-
-interface CommentInputProps {
-  selectedText: string | null;
-  onSubmit: (commentText: string) => void;
-  onCancel: () => void;
-}
-
-export function CommentInput({
-  selectedText,
-  onSubmit,
-  onCancel,
-}: CommentInputProps) {
-  const { t } = useLocale();
-  const settings = use(SettingsContext);
-  const fontClass = settings
-    ? settings.fontFamily === FontFamilies.SANS_SERIF
-      ? "font-sans"
-      : "font-serif"
-    : undefined;
-
-  const [commentText, setCommentText] = useState("");
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    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" as="div" className="italic mb-2 line-clamp-2">
-        "{selectedText}"
-      </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">
-        <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,90 +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 "../../schema";
-import { InlineEditor } from "../InlineEditor";
-import { ActionLink } from "../ui/ActionLink";
-import { Text } from "../ui/Text";
-
-interface CommentListItemProps {
-  comment: Comment;
-  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" as="span" className="italic line-clamp-1">
-          "{comment.selectedText}"
-        </Text>
-        {isUnresolved && (
-          <Text variant="caption" as="span" className="shrink-0">
-            · {t("commentList.unresolved")}
-          </Text>
-        )}
-      </div>
-
-      {isEditing ? (
-        <InlineEditor
-          initialText={comment.comment}
-          onSave={(text) => {
-            editComment(comment.id, text);
-            setIsEditing(false);
-          }}
-          onCancel={() => setIsEditing(false)}
-        />
-      ) : (
-        <>
-          <Text variant="body" className="line-clamp-2">
-            {comment.comment}
-          </Text>
-
-          <div className="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity 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>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/src/components/comments/CommentManager.tsx

@@ -1,129 +0,0 @@
-import { Copy, Trash2 } from "lucide-react";
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
-import {
-  useCommentActions,
-  useCommentData,
-} from "../../contexts/CommentContext";
-import { useLocale } from "../../contexts/LocaleContext";
-import { generatePrompt } from "../../lib/export";
-import { useAppStore } from "../../store";
-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 } = useCommentData();
-  const { deleteAll } = useCommentActions();
-  const fileName = useAppStore(
-    (s) => s.getActiveDocumentState()?.document.fileName ?? "",
-  );
-
-  const copyAll = useCallback(() => {
-    const text = generatePrompt(comments, fileName);
-    navigator.clipboard.writeText(text);
-    toast.success(t("toast.copiedAllComments"));
-  }, [comments, fileName, t]);
-  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"
-          as="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={copyAll}
-              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>
-        </Text>
-      )}
-
-      <div className="overflow-y-auto max-h-80">
-        {sortedComments.length === 0 ? (
-          <Text variant="caption" as="div" className="px-3 py-4 text-center">
-            {t("commentManager.noComments")}
-          </Text>
-        ) : (
-          sortedComments.map((comment) => (
-            <CommentListItem
-              key={comment.id}
-              comment={comment}
-              onAction={onClose}
-            />
-          ))
-        )}
-      </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"
-          as="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,
-          })}
-        </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/ActionLink.tsx

@@ -1,28 +0,0 @@
-import { cn } from "../../lib/utils";
-
-const variantStyles = {
-  default: "hover:text-zinc-600",
-  destructive: "hover:text-red-500",
-} as const;
-
-type ActionLinkVariant = keyof typeof variantStyles;
-
-function ActionLink({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<"button"> & { variant?: ActionLinkVariant }) {
-  return (
-    <button
-      type="button"
-      className={cn(
-        "cursor-pointer transition-colors duration-150",
-        variantStyles[variant],
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { ActionLink };