@peaske7/readit 0.1.8 → 0.2.0

package/src/components/MarginNote.tsx

@@ -1,87 +1,77 @@
-import { cva } from "class-variance-authority";
-import { useState } from "react";
-import { useCommentContext } from "../contexts/CommentContext";
-import { useLayoutContext } from "../contexts/LayoutContext";
+import { memo, useCallback, useState } from "react";
+import { useCommentActions } from "../contexts/CommentContext";
 import { useLocale } from "../contexts/LocaleContext";
+import { usePositions } from "../contexts/PositionsContext";
+import { useSettings } from "../contexts/SettingsContext";
 import { cn } from "../lib/utils";
-import { type Comment, FontFamilies } from "../types";
+import { type Comment, FontFamilies } from "../schema";
+import { useUI } from "../store";
 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 },
-  },
-);
+function selectedTextClass(hovered: boolean) {
+  return cn(
+    "text-sm italic mb-1 line-clamp-1 flex items-center gap-1 transition-colors duration-150",
+    hovered
+      ? "text-zinc-600 dark:text-zinc-400"
+      : "text-zinc-400 dark:text-zinc-500",
+  );
+}
 
-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 },
-  },
-);
+function commentTextClass(hovered: boolean) {
+  return cn(
+    "text-sm whitespace-pre-wrap transition-colors duration-150",
+    hovered
+      ? "text-zinc-800 dark:text-zinc-200"
+      : "text-zinc-500 dark:text-zinc-400",
+  );
+}
 
-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 },
-  },
-);
+function badgeClass(hovered: boolean) {
+  return cn(
+    "absolute -left-4 top-2 text-xs tabular-nums transition-colors duration-150",
+    hovered
+      ? "text-zinc-600 dark:text-zinc-400"
+      : "text-zinc-400 dark:text-zinc-500",
+  );
+}
 
-export function MarginNote({
+export const MarginNote = memo(function MarginNote({
   comment,
-  top,
   commentIndex = 0,
 }: MarginNoteProps) {
-  const { fontFamily } = useLayoutContext();
+  const { fontFamily } = useSettings();
   const { t } = useLocale();
   const {
     editComment,
     deleteComment,
-    copyCommentRaw,
-    copyCommentForLLM,
-    hoveredCommentId,
+    copyComment,
     setHoveredCommentId,
     scrollToHighlight,
-  } = useCommentContext();
+  } = useCommentActions();
 
-  const isHovered = hoveredCommentId === comment.id;
+  const pos = usePositions();
+  const refCallback = useCallback(
+    (el: HTMLElement | null) => {
+      if (el) pos.register(comment.id, el);
+      else pos.unregister(comment.id);
+    },
+    [pos, comment.id],
+  );
+
+  const isHovered = useUI((s) => s.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 handleCopy = () => copyComment(comment);
 
   const createdAtFormatted = new Date(comment.createdAt).toLocaleString();
 
@@ -89,30 +79,39 @@ export function MarginNote({
   if (!hasNote && !isEditing) {
     return (
       <article
+        ref={refCallback}
         className="absolute left-0 right-0 group"
-        style={{ top }}
+        style={{
+          visibility: "hidden",
+          contentVisibility: "auto",
+          containIntrinsicSize: "auto 80px",
+        }}
         title={`Added: ${createdAtFormatted}`}
         data-comment-id={comment.id}
         onMouseEnter={() => setHoveredCommentId(comment.id)}
         onMouseLeave={() => setHoveredCommentId(undefined)}
       >
-        <span className={badgeVariants({ hovered: isHovered })}>—</span>
+        <span className={badgeClass(isHovered)}>—</span>
 
         <div className="pt-2 pb-2 pl-3">
-          <ActionBar
-            className={cn("gap-1.5 duration-150", isHovered && "opacity-100")}
+          <div
+            className={cn(
+              "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
+              "gap-1.5 duration-150",
+              isHovered && "opacity-100",
+            )}
           >
             <ActionLink onClick={() => setIsEditing(true)}>
               {t("marginNote.addNote")}
             </ActionLink>
-            <SeparatorDot />
+            <span aria-hidden="true">·</span>
             <ActionLink
               variant="destructive"
               onClick={() => deleteComment(comment.id)}
             >
               {t("marginNote.delete")}
             </ActionLink>
-          </ActionBar>
+          </div>
         </div>
       </article>
     );
@@ -120,16 +119,15 @@ export function MarginNote({
 
   return (
     <article
+      ref={refCallback}
       className="absolute left-0 right-0 group"
-      style={{ top }}
+      style={{ visibility: "hidden" }}
       title={`Added: ${createdAtFormatted}`}
       data-comment-id={comment.id}
       onMouseEnter={() => setHoveredCommentId(comment.id)}
       onMouseLeave={() => setHoveredCommentId(undefined)}
     >
-      <span className={badgeVariants({ hovered: isHovered })}>
-        {commentIndex + 1}
-      </span>
+      <span className={badgeClass(isHovered)}>{commentIndex + 1}</span>
 
       <div
         className={cn(
@@ -138,12 +136,7 @@ export function MarginNote({
         )}
       >
         {!isEditing && (
-          <div
-            className={cn(
-              fontClass,
-              selectedTextVariants({ hovered: isHovered }),
-            )}
-          >
+          <div className={cn(fontClass, selectedTextClass(isHovered))}>
             <button
               type="button"
               onClick={() => scrollToHighlight(comment.id)}
@@ -165,43 +158,28 @@ export function MarginNote({
           />
         ) : (
           <>
-            <p
-              className={cn(
-                fontClass,
-                commentTextVariants({ hovered: isHovered }),
-              )}
-            >
+            <p className={cn(fontClass, commentTextClass(isHovered))}>
               {comment.comment}
             </p>
-            <ActionBar className="gap-1.5 mt-2">
+            <div className="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity gap-1.5 mt-2">
               <ActionLink onClick={() => setIsEditing(true)}>
                 {t("marginNote.edit")}
               </ActionLink>
-              <SeparatorDot />
+              <span aria-hidden="true">·</span>
               <ActionLink
                 variant="destructive"
                 onClick={() => deleteComment(comment.id)}
               >
                 {t("marginNote.delete")}
               </ActionLink>
-              <SeparatorDot />
-              <ActionLink
-                onClick={handleCopy}
-                title={t("marginNote.copyTitle")}
-              >
+              <span aria-hidden="true">·</span>
+              <ActionLink onClick={handleCopy}>
                 {t("marginNote.copy")}
               </ActionLink>
-              <SeparatorDot />
-              <ActionLink
-                onClick={() => copyCommentForLLM(comment)}
-                title={t("marginNote.llmTitle")}
-              >
-                {t("marginNote.llm")}
-              </ActionLink>
-            </ActionBar>
+            </div>
           </>
         )}
       </div>
     </article>
   );
-}
+});

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;