@peaske7/readit 0.1.7 → 0.2.0

package/src/components/MarginNotes.tsx

@@ -1,50 +1,23 @@
-import { useMemo } from "react";
-import { resolveMarginNotePositions } from "../lib/margin-layout";
-import type { Comment } from "../types";
+import { memo } from "react";
+import type { Comment } from "../schema";
 import { MarginNote } from "./MarginNote";
 
 interface MarginNotesProps {
-  /** Comments pre-sorted by startOffset */
   sortedComments: Comment[];
-  highlightPositions: Record<string, number>;
-  pendingSelectionTop?: number;
 }
 
-export function MarginNotes({
+export const MarginNotes = memo(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}
-          />
-        );
-      })}
+      {sortedComments.map((comment, index) => (
+        <MarginNote key={comment.id} comment={comment} commentIndex={index} />
+      ))}
     </div>
   );
-}
+});

package/src/components/RawModal.tsx

@@ -8,7 +8,6 @@ import {
   Dialog,
   DialogBody,
   DialogContent,
-  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from "./ui/Dialog";
@@ -88,7 +87,7 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
         if (!open) onClose();
       }}
     >
-      <DialogContent className="max-w-2xl max-h-[80vh]">
+      <DialogContent className="max-w-2xl max-h-[80vh]" onClose={onClose}>
         <DialogHeader>
           <DialogTitle>{t("rawModal.title")}</DialogTitle>
           {state.status === "success" && (
@@ -105,9 +104,9 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
         </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">
+          <div 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>
+          </div>
         )}
 
         <DialogBody>
@@ -130,10 +129,12 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
           )}
 
           {state.status === "success" && (
-            <Text variant="body" asChild>
-              <pre className="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed">
-                {state.content}
-              </pre>
+            <Text
+              variant="body"
+              as="pre"
+              className="text-xs font-mono whitespace-pre-wrap break-words leading-relaxed"
+            >
+              {state.content}
             </Text>
           )}
         </DialogBody>

package/src/components/ReanchorConfirm.tsx

@@ -20,8 +20,8 @@ export function ReanchorConfirm({
       <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 variant="caption" className="italic line-clamp-2 mb-2">
+        "{selectionText}"
       </Text>
       <div className="flex gap-3 text-sm">
         <Button variant="link" size="sm" onClick={onConfirm}>

package/src/components/SettingsModal.tsx

@@ -1,17 +1,14 @@
-import { Check, ChevronDown, ExternalLink } from "lucide-react";
-import { useLayoutContext } from "../contexts/LayoutContext";
+import { Check, ChevronDown } from "lucide-react";
 import { useLocale } from "../contexts/LocaleContext";
+import { useSettings } from "../contexts/SettingsContext";
 import { type Locale, Locales } from "../lib/i18n";
 import { cn } from "../lib/utils";
 import {
-  type EditorScheme,
-  EditorSchemes,
   FontFamilies,
   type FontFamily,
   type ThemeMode,
   ThemeModes,
-} from "../types";
-import { ShortcutList } from "./ShortcutList";
+} from "../schema";
 import {
   Dialog,
   DialogBody,
@@ -74,8 +71,6 @@ function ThemePreviewBadge() {
   );
 }
 
-/* ─── Font selector ──────────────────────────────────────────── */
-
 function FontPreviewBadge({ fontClass }: { fontClass: string }) {
   return (
     <span
@@ -89,8 +84,6 @@ function FontPreviewBadge({ fontClass }: { fontClass: string }) {
   );
 }
 
-/* ─── Shared trigger style ───────────────────────────────────── */
-
 const triggerClassName = cn(
   "inline-flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm",
   "border border-zinc-200 dark:border-zinc-700",
@@ -100,21 +93,8 @@ const triggerClassName = cn(
   "transition-colors cursor-pointer",
 );
 
-/* ─── Settings Modal ─────────────────────────────────────────── */
-
 export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
-  const {
-    fontFamily,
-    setFontFamily,
-    editorScheme,
-    setEditorScheme,
-    themeMode,
-    setThemeMode,
-    shortcuts,
-    updateBinding,
-    toggleShortcutEnabled,
-    resetShortcutsToDefaults,
-  } = useLayoutContext();
+  const { fontFamily, setFontFamily, themeMode, setThemeMode } = useSettings();
   const { locale, setLocale, t } = useLocale();
 
   const themeOptions = [
@@ -136,22 +116,10 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
     },
   ];
 
-  const editorOptions = [
-    { value: EditorSchemes.NONE, label: t("settings.editor.none") },
-    { value: EditorSchemes.VSCODE, label: t("settings.editor.vscode") },
-    {
-      value: EditorSchemes.VSCODE_INSIDERS,
-      label: t("settings.editor.vscodeInsiders"),
-    },
-    { value: EditorSchemes.CURSOR, label: t("settings.editor.cursor") },
-  ];
-
   const activeTheme =
     themeOptions.find((o) => o.value === themeMode) ?? themeOptions[0];
   const activeFont =
     fontOptions.find((o) => o.value === fontFamily) ?? fontOptions[0];
-  const activeEditor =
-    editorOptions.find((o) => o.value === editorScheme) ?? editorOptions[0];
   const activeLocale =
     LOCALE_OPTIONS.find((o) => o.value === locale) ?? LOCALE_OPTIONS[0];
 
@@ -162,15 +130,15 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
         if (!open) onClose();
       }}
     >
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md" onClose={onClose}>
         <DialogHeader>
           <DialogTitle>{t("settings.title")}</DialogTitle>
         </DialogHeader>
 
         <DialogBody className="space-y-4">
           <div>
-            <Text variant="overline" asChild>
-              <h3 className="mb-3">{t("settings.theme")}</h3>
+            <Text variant="overline" as="h3" className="mb-3">
+              {t("settings.theme")}
             </Text>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -201,8 +169,8 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
           </div>
 
           <div>
-            <Text variant="overline" asChild>
-              <h3 className="mb-3">{t("settings.font")}</h3>
+            <Text variant="overline" as="h3" className="mb-3">
+              {t("settings.font")}
             </Text>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -231,8 +199,8 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
           </div>
 
           <div>
-            <Text variant="overline" asChild>
-              <h3 className="mb-3">{t("settings.language")}</h3>
+            <Text variant="overline" as="h3" className="mb-3">
+              {t("settings.language")}
             </Text>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -257,52 +225,6 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-
-          <div>
-            <Text variant="overline" asChild>
-              <h3 className="mb-3">{t("settings.editor")}</h3>
-            </Text>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button type="button" className={triggerClassName}>
-                  <ExternalLink className="size-3 text-zinc-400 dark:text-zinc-500" />
-                  <span>{activeEditor.label}</span>
-                  <ChevronDown className="size-3 text-zinc-400 dark:text-zinc-500" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="min-w-[160px]">
-                {editorOptions.map((option) => (
-                  <DropdownMenuItem
-                    key={option.value}
-                    onSelect={() =>
-                      setEditorScheme(option.value as EditorScheme)
-                    }
-                    className="flex items-center gap-2"
-                  >
-                    <span className="flex-1">{option.label}</span>
-                    {editorScheme === option.value && (
-                      <Check className="size-3.5 text-zinc-500 dark:text-zinc-400" />
-                    )}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-
-          <div>
-            <Text variant="overline" asChild>
-              <h3 className="mb-1">{t("settings.keyboardShortcuts")}</h3>
-            </Text>
-            <p className="text-xs text-zinc-400 dark:text-zinc-500 mb-3">
-              {t("settings.clickToRebind")}
-            </p>
-            <ShortcutList
-              shortcuts={shortcuts}
-              onUpdateBinding={updateBinding}
-              onToggleEnabled={toggleShortcutEnabled}
-              onResetToDefaults={resetShortcutsToDefaults}
-            />
-          </div>
         </DialogBody>
       </DialogContent>
     </Dialog>

package/src/components/TabBar.tsx

@@ -13,7 +13,7 @@ export function TabBar() {
 
   return (
     <div
-      className="flex border-b border-zinc-200 bg-zinc-50 px-2 overflow-x-auto"
+      className="flex border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 px-2 overflow-x-auto"
       role="tablist"
     >
       {documentOrder.map((filePath) => {
@@ -30,8 +30,8 @@ export function TabBar() {
             className={cn(
               "flex items-center gap-1.5 px-3 py-1.5 text-sm border-b-2 whitespace-nowrap cursor-pointer select-none",
               isActive
-                ? "border-zinc-900 text-zinc-900"
-                : "border-transparent text-zinc-500 hover:text-zinc-700 hover:bg-zinc-100",
+                ? "border-zinc-900 dark:border-zinc-100 text-zinc-900 dark:text-zinc-100"
+                : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800",
             )}
             onClick={() => setActiveDocument(filePath)}
             onKeyDown={(e) => {
@@ -44,7 +44,7 @@ export function TabBar() {
             <span>{docState.document.fileName}</span>
             <button
               type="button"
-              className="ml-1 rounded p-0.5 hover:bg-zinc-200"
+              className="ml-1 rounded p-0.5 hover:bg-zinc-200 dark:hover:bg-zinc-700"
               onClick={(e) => {
                 e.stopPropagation();
                 closeDocument(filePath);

package/src/components/TableOfContents.tsx

@@ -1,8 +1,8 @@
 import { use, useMemo, useState } from "react";
-import { LayoutContext } from "../contexts/LayoutContext";
+import { SettingsContext } from "../contexts/SettingsContext";
 import type { Heading } from "../hooks/useHeadings";
 import { cn } from "../lib/utils";
-import { FontFamilies } from "../types";
+import { FontFamilies } from "../schema";
 
 interface TableOfContentsProps {
   headings: Heading[];
@@ -15,9 +15,9 @@ export function TableOfContents({
   activeId,
   onHeadingClick,
 }: TableOfContentsProps) {
-  const layout = use(LayoutContext);
-  const fontClass = layout
-    ? layout.fontFamily === FontFamilies.SANS_SERIF
+  const settings = use(SettingsContext);
+  const fontClass = settings
+    ? settings.fontFamily === FontFamilies.SANS_SERIF
       ? "font-sans"
       : "font-serif"
     : undefined;

package/src/components/comments/CommentInput.tsx

@@ -1,9 +1,8 @@
-import { BotMessageSquare, Copy } from "lucide-react";
 import { use, useEffect, useRef, useState } from "react";
-import { LayoutContext } from "../../contexts/LayoutContext";
 import { useLocale } from "../../contexts/LocaleContext";
+import { SettingsContext } from "../../contexts/SettingsContext";
 import { cn } from "../../lib/utils";
-import { FontFamilies } from "../../types";
+import { FontFamilies } from "../../schema";
 import { Button } from "../ui/Button";
 import { Text } from "../ui/Text";
 
@@ -11,21 +10,17 @@ 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
+  const settings = use(SettingsContext);
+  const fontClass = settings
+    ? settings.fontFamily === FontFamilies.SANS_SERIF
       ? "font-sans"
       : "font-serif"
     : undefined;
@@ -34,7 +29,6 @@ export function CommentInput({
   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();
     }
@@ -64,8 +58,8 @@ export function CommentInput({
       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 variant="caption" as="div" className="italic mb-2 line-clamp-2">
+        "{selectedText}"
       </Text>
       <textarea
         ref={textareaRef}
@@ -80,28 +74,6 @@ export function CommentInput({
         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>

package/src/components/comments/CommentListItem.tsx

@@ -2,15 +2,13 @@ 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 type { Comment } from "../../schema";
 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;
 }
 
@@ -42,12 +40,12 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
       )}
     >
       <div className="flex items-center gap-1.5 mb-1">
-        <Text variant="caption" asChild>
-          <span className="italic line-clamp-1">"{comment.selectedText}"</span>
+        <Text variant="caption" as="span" className="italic line-clamp-1">
+          "{comment.selectedText}"
         </Text>
         {isUnresolved && (
-          <Text variant="caption" asChild>
-            <span className="shrink-0">· {t("commentList.unresolved")}</span>
+          <Text variant="caption" as="span" className="shrink-0">
+            · {t("commentList.unresolved")}
           </Text>
         )}
       </div>
@@ -63,11 +61,11 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
         />
       ) : (
         <>
-          <Text variant="body" asChild>
-            <p className="line-clamp-2">{comment.comment}</p>
+          <Text variant="body" className="line-clamp-2">
+            {comment.comment}
           </Text>
 
-          <ActionBar className="gap-3 mt-1.5">
+          <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>
@@ -84,7 +82,7 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
                 {t("commentList.reanchor")}
               </ActionLink>
             )}
-          </ActionBar>
+          </div>
         </>
       )}
     </div>

package/src/components/comments/CommentManager.tsx

@@ -1,7 +1,13 @@
 import { Copy, Trash2 } from "lucide-react";
-import { useState } from "react";
-import { useCommentContext } from "../../contexts/CommentContext";
+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";
@@ -12,7 +18,17 @@ interface CommentManagerProps {
 
 export function CommentManager({ onClose }: CommentManagerProps) {
   const { t } = useLocale();
-  const { comments, copyAllForLLM, deleteAll } = useCommentContext();
+  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(
@@ -58,45 +74,45 @@ export function CommentManager({ onClose }: CommentManagerProps) {
           </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
+          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" asChild>
-            <div className="px-3 py-4 text-center">
-              {t("commentManager.noComments")}
-            </div>
+          <Text variant="caption" as="div" className="px-3 py-4 text-center">
+            {t("commentManager.noComments")}
           </Text>
         ) : (
           sortedComments.map((comment) => (

package/src/components/comments/CommentNav.tsx

@@ -74,20 +74,20 @@ export function CommentNav() {
           <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
+          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