@peaske7/readit 0.1.7 → 0.2.0

package/src/components/ui/Text.tsx

@@ -1,54 +1,47 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
 import { use } from "react";
-import { LayoutContext } from "../../contexts/LayoutContext";
+import { SettingsContext } from "../../contexts/SettingsContext";
 import { cn } from "../../lib/utils";
-import { FontFamilies } from "../../types";
+import { FontFamilies } from "../../schema";
 
-const textVariants = cva("", {
-  variants: {
-    variant: {
-      title:
-        "text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100",
-      section: "text-sm font-medium text-zinc-900 dark:text-zinc-100",
-      subsection: "text-xs font-medium text-zinc-700 dark:text-zinc-300",
-      overline:
-        "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider",
-      body: "text-sm text-zinc-600 dark:text-zinc-400",
-      caption: "text-xs text-zinc-500 dark:text-zinc-400",
-      micro: "text-[10px] text-zinc-400 dark:text-zinc-500",
-    },
-  },
-  defaultVariants: {
-    variant: "body",
-  },
-});
+const variantStyles = {
+  title:
+    "text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100",
+  section: "text-sm font-medium text-zinc-900 dark:text-zinc-100",
+  subsection: "text-xs font-medium text-zinc-700 dark:text-zinc-300",
+  overline:
+    "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider",
+  body: "text-sm text-zinc-600 dark:text-zinc-400",
+  caption: "text-xs text-zinc-500 dark:text-zinc-400",
+  micro: "text-[10px] text-zinc-400 dark:text-zinc-500",
+} as const;
+
+type TextVariant = keyof typeof variantStyles;
+
+interface TextProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: TextVariant;
+  as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "label" | "pre";
+}
 
 function Text({
   className,
-  variant,
-  asChild = false,
+  variant = "body",
+  as: Tag = "p",
   ...props
-}: React.ComponentProps<"p"> &
-  VariantProps<typeof textVariants> & {
-    asChild?: boolean;
-  }) {
-  const layout = use(LayoutContext);
-  const fontClass = layout
-    ? layout.fontFamily === FontFamilies.SANS_SERIF
+}: TextProps) {
+  const settings = use(SettingsContext);
+  const fontClass = settings
+    ? settings.fontFamily === FontFamilies.SANS_SERIF
       ? "font-sans"
       : "font-serif"
     : undefined;
 
-  const Comp = asChild ? Slot : "p";
-
   return (
-    <Comp
-      data-slot="text"
-      className={cn(fontClass, textVariants({ variant }), className)}
+    <Tag
+      className={cn(fontClass, variantStyles[variant], className)}
       {...props}
     />
   );
 }
 
-export { Text, textVariants };
+export type { TextVariant };
+export { Text, variantStyles };

package/src/contexts/CommentContext.tsx

@@ -9,18 +9,14 @@ import {
 import { toast } from "sonner";
 import { useCommentNavigation } from "../hooks/useCommentNavigation";
 import { useComments } from "../hooks/useComments";
-import { useReanchorMode } from "../hooks/useReanchorMode";
-import { extractContext, formatForLLM } from "../lib/context";
-import { generatePrompt } from "../lib/export";
+import { formatComment } from "../lib/export";
 import { truncate } from "../lib/utils";
-import { useAppStore } from "../store";
-import type { Comment, DocumentType } from "../types";
+import type { Comment } from "../schema";
+import { appStore, useAppStore } from "../store";
 import { useLocale } from "./LocaleContext";
 
-interface CommentContextValue {
-  // From useComments
-  comments: Comment[];
-  commentCount: number;
+// Stable callbacks — never causes re-renders
+interface CommentActionsValue {
   addComment: (
     selectedText: string,
     comment: string,
@@ -36,52 +32,62 @@ interface CommentContextValue {
     startOffset: number,
     endOffset: number,
   ) => void;
-  // Derived
-  sortedComments: Comment[];
-  // From useCommentNavigation
-  currentIndex: number;
-  hoveredCommentId: string | undefined;
   setHoveredCommentId: (id: string | undefined) => void;
   navigateToComment: (commentId: string) => void;
   navigatePrevious: () => void;
   navigateNext: () => void;
-  // From useReanchorMode
-  reanchorTarget: { commentId: string } | null;
   startReanchor: (commentId: string) => void;
   cancelReanchor: () => void;
-  // Copy operations
-  copyCommentRaw: (comment: Comment) => void;
-  copyCommentForLLM: (comment: Comment) => void;
-  copyAllForLLM: () => void;
-  // Scroll to highlight
+  copyComment: (comment: Comment) => void;
   scrollToHighlight: (commentId: string) => void;
 }
 
-export const CommentContext = createContext<CommentContextValue | null>(null);
+const CommentActionsContext = createContext<CommentActionsValue | null>(null);
 
-export function useCommentContext(): CommentContextValue {
-  const value = use(CommentContext);
+export function useCommentActions(): CommentActionsValue {
+  const value = use(CommentActionsContext);
   if (!value) {
-    throw new Error("useCommentContext must be used within a CommentProvider");
+    throw new Error("useCommentActions must be used within a CommentProvider");
   }
   return value;
 }
 
+// Volatile — re-renders consumers on change
+interface CommentDataValue {
+  comments: Comment[];
+  commentCount: number;
+  sortedComments: Comment[];
+  currentIndex: number;
+  reanchorTarget: { commentId: string } | null;
+}
+
+const CommentDataContext = createContext<CommentDataValue | null>(null);
+
+export function useCommentData(): CommentDataValue {
+  const value = use(CommentDataContext);
+  if (!value) {
+    throw new Error("useCommentData must be used within a CommentProvider");
+  }
+  return value;
+}
+
+export type CommentContextValue = CommentActionsValue & CommentDataValue;
+
+export function useCommentContext(): CommentContextValue {
+  return { ...useCommentActions(), ...useCommentData() };
+}
+
+export const CommentContext = CommentDataContext;
+
 interface CommentProviderProps {
   filePath: string;
   clean: boolean;
-  documentContent: string;
-  fileName: string;
-  documentType: DocumentType;
   children: ReactNode;
 }
 
 export function CommentProvider({
   filePath,
   clean,
-  documentContent,
-  fileName,
-  documentType,
   children,
 }: CommentProviderProps) {
   const {
@@ -94,136 +100,99 @@ export function CommentProvider({
     reanchorComment,
   } = useComments(filePath, { clean });
 
-  // sortedComments from store (already sorted by setComments)
   const sortedComments = useAppStore(
     (s) => s.documents.get(filePath)?.sortedComments ?? [],
   );
 
   const {
     currentIndex,
-    hoveredCommentId,
     setHoveredCommentId,
     navigateToComment,
     navigatePrevious,
     navigateNext,
   } = useCommentNavigation(sortedComments);
 
-  const { reanchorTarget, startReanchor, cancelReanchor } = useReanchorMode();
+  const reanchorTarget = useAppStore(
+    (s) => s.getActiveDocumentState()?.reanchorTarget ?? null,
+  );
+  const startReanchor = useCallback((commentId: string) => {
+    appStore.getState().setReanchorTarget({ commentId });
+  }, []);
+  const cancelReanchor = useCallback(() => {
+    appStore.getState().setReanchorTarget(null);
+  }, []);
   const { t } = useLocale();
 
-  // Show comments errors as toast
   useEffect(() => {
     if (commentsError) {
       toast.error(commentsError);
     }
   }, [commentsError]);
 
-  const copyCommentRaw = useCallback(
+  const copyComment = useCallback(
     (comment: Comment) => {
-      const raw = `${comment.selectedText}\n\n${comment.comment}`;
-      navigator.clipboard.writeText(raw);
+      navigator.clipboard.writeText(formatComment(comment));
       toast.success(t("toast.copied", { text: truncate(comment.comment) }));
     },
     [t],
   );
 
-  const copyCommentForLLM = useCallback(
-    (comment: Comment) => {
-      const context = extractContext({
-        content: documentContent,
-        startOffset: comment.startOffset,
-        endOffset: comment.endOffset,
-      });
-      const formatted = formatForLLM({
-        context,
-        fileName,
-        comment: comment.comment,
-      });
-
-      navigator.clipboard.writeText(formatted);
-      toast.success(
-        t("toast.copiedForLLM", { text: truncate(comment.comment) }),
-      );
-    },
-    [documentContent, fileName, t],
-  );
-
-  const copyAllForLLM = useCallback(() => {
-    const prompt = generatePrompt(comments, fileName);
-    navigator.clipboard.writeText(prompt);
-    toast.success(t("toast.copiedAllComments"));
-  }, [comments, fileName, t]);
-
-  const scrollToHighlight = useCallback(
-    (commentId: string) => {
-      if (documentType === "html") {
-        const iframe = window.document.querySelector("iframe");
-        iframe?.contentWindow?.postMessage(
-          { type: "scrollToHighlight", commentId },
-          "*",
-        );
-      } else {
-        const mark = window.document.querySelector(
-          `mark[data-comment-id="${commentId}"]`,
-        );
-        if (mark) {
-          mark.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-      }
-    },
-    [documentType],
-  );
-
-  const commentCount = comments.length;
+  const scrollToHighlight = useCallback((commentId: string) => {
+    const mark = window.document.querySelector(
+      `mark[data-comment-id="${commentId}"]`,
+    );
+    if (mark) {
+      mark.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, []);
 
-  const value = useMemo<CommentContextValue>(
+  const actions = useMemo<CommentActionsValue>(
     () => ({
-      comments,
-      commentCount,
       addComment,
       editComment,
       deleteComment,
       deleteAll,
       reanchorComment,
-      sortedComments,
-      currentIndex,
-      hoveredCommentId,
       setHoveredCommentId,
       navigateToComment,
       navigatePrevious,
       navigateNext,
-      reanchorTarget,
       startReanchor,
       cancelReanchor,
-      copyCommentRaw,
-      copyCommentForLLM,
-      copyAllForLLM,
+      copyComment,
       scrollToHighlight,
     }),
     [
-      comments,
-      commentCount,
       addComment,
       editComment,
       deleteComment,
       deleteAll,
       reanchorComment,
-      sortedComments,
-      currentIndex,
-      hoveredCommentId,
       setHoveredCommentId,
       navigateToComment,
       navigatePrevious,
       navigateNext,
-      reanchorTarget,
       startReanchor,
       cancelReanchor,
-      copyCommentRaw,
-      copyCommentForLLM,
-      copyAllForLLM,
+      copyComment,
       scrollToHighlight,
     ],
   );
 
-  return <CommentContext value={value}>{children}</CommentContext>;
+  const data = useMemo<CommentDataValue>(
+    () => ({
+      comments,
+      commentCount: comments.length,
+      sortedComments,
+      currentIndex,
+      reanchorTarget,
+    }),
+    [comments, sortedComments, currentIndex, reanchorTarget],
+  );
+
+  return (
+    <CommentActionsContext value={actions}>
+      <CommentDataContext value={data}>{children}</CommentDataContext>
+    </CommentActionsContext>
+  );
 }

package/src/contexts/LocaleContext.tsx

@@ -1,6 +1,37 @@
-import { createContext, type ReactNode, use, useMemo } from "react";
-import { useLocalePreference } from "../hooks/useLocalePreference";
-import { createT, type Locale, type TranslationKey } from "../lib/i18n";
+import {
+  createContext,
+  type ReactNode,
+  use,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+import {
+  createT,
+  type Locale,
+  Locales,
+  type TranslationKey,
+} from "../lib/i18n";
+
+const STORAGE_KEY = "readit:locale";
+
+function detectLocale(): Locale {
+  const browserLang = navigator.language.slice(0, 2).toLowerCase();
+  if (browserLang === "ja") return Locales.JA;
+  return Locales.EN;
+}
+
+function getStoredLocale(): Locale {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === Locales.JA || stored === Locales.EN) {
+      return stored;
+    }
+  } catch {
+    // localStorage may be unavailable
+  }
+  return detectLocale();
+}
 
 interface LocaleContextValue {
   locale: Locale;
@@ -23,7 +54,17 @@ interface LocaleProviderProps {
 }
 
 export function LocaleProvider({ children }: LocaleProviderProps) {
-  const { locale, setLocale } = useLocalePreference();
+  const [locale, setLocaleState] = useState<Locale>(getStoredLocale);
+
+  const setLocale = useCallback((newLocale: Locale) => {
+    setLocaleState(newLocale);
+    try {
+      localStorage.setItem(STORAGE_KEY, newLocale);
+    } catch {
+      // localStorage may be unavailable
+    }
+  }, []);
+
   const t = useMemo(() => createT(locale), [locale]);
 
   const value = useMemo<LocaleContextValue>(

package/src/contexts/PositionsContext.tsx

@@ -0,0 +1,16 @@
+import { createContext, type ReactNode, use, useRef } from "react";
+import { Positions } from "../lib/positions";
+
+const Ctx = createContext<Positions | null>(null);
+
+export function usePositions(): Positions {
+  const value = use(Ctx);
+  if (!value) throw new Error("usePositions requires PositionsProvider");
+  return value;
+}
+
+export function PositionsProvider({ children }: { children: ReactNode }) {
+  const ref = useRef<Positions | null>(null);
+  if (!ref.current) ref.current = new Positions();
+  return <Ctx value={ref.current}>{children}</Ctx>;
+}

package/src/contexts/SettingsContext.tsx

@@ -0,0 +1,133 @@
+import {
+  createContext,
+  type ReactNode,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { toast } from "sonner";
+import {
+  FontFamilies,
+  type FontFamily,
+  type ThemeMode,
+  ThemeModes,
+} from "../schema";
+
+const THEME_STORAGE_KEY = "readit:theme";
+const DARK_MQ = "(prefers-color-scheme: dark)";
+
+function getStoredTheme(): ThemeMode {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (
+      stored === ThemeModes.LIGHT ||
+      stored === ThemeModes.DARK ||
+      stored === ThemeModes.SYSTEM
+    ) {
+      return stored;
+    }
+  } catch {
+    // localStorage may be unavailable
+  }
+  return ThemeModes.SYSTEM;
+}
+
+function applyTheme(mode: ThemeMode): void {
+  const isDark =
+    mode === ThemeModes.DARK ||
+    (mode === ThemeModes.SYSTEM && window.matchMedia(DARK_MQ).matches);
+
+  document.documentElement.classList.toggle("dark", isDark);
+}
+
+interface SettingsContextValue {
+  fontFamily: FontFamily;
+  setFontFamily: (font: FontFamily) => Promise<void>;
+  themeMode: ThemeMode;
+  setThemeMode: (mode: ThemeMode) => void;
+}
+
+export const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+export function useSettings(): SettingsContextValue {
+  const value = use(SettingsContext);
+  if (!value) {
+    throw new Error("useSettings must be used within a SettingsProvider");
+  }
+  return value;
+}
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+  const [fontFamily, setFontFamilyState] = useState<FontFamily>(
+    FontFamilies.SERIF,
+  );
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      try {
+        const response = await fetch("/api/settings");
+        if (response.ok) {
+          const settings = await response.json();
+          setFontFamilyState(settings.fontFamily || FontFamilies.SERIF);
+        }
+      } catch (err) {
+        console.error("Failed to fetch settings:", err);
+      }
+    };
+
+    fetchSettings();
+  }, []);
+
+  const setFontFamily = useCallback(async (font: FontFamily) => {
+    setFontFamilyState(font);
+
+    try {
+      const response = await fetch("/api/settings", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ fontFamily: font }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to save settings");
+      }
+    } catch (err) {
+      console.error("Failed to save font preference:", err);
+      toast.error("Failed to save font preference");
+    }
+  }, []);
+
+  const [themeMode, setThemeModeState] = useState<ThemeMode>(getStoredTheme);
+
+  useEffect(() => {
+    applyTheme(themeMode);
+  }, [themeMode]);
+
+  useEffect(() => {
+    if (themeMode !== ThemeModes.SYSTEM) return;
+
+    const mq = window.matchMedia(DARK_MQ);
+    const handler = () => applyTheme(ThemeModes.SYSTEM);
+
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [themeMode]);
+
+  const setThemeMode = useCallback((mode: ThemeMode) => {
+    setThemeModeState(mode);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, mode);
+    } catch {
+      // localStorage may be unavailable
+    }
+  }, []);
+
+  const value = useMemo<SettingsContextValue>(
+    () => ({ fontFamily, setFontFamily, themeMode, setThemeMode }),
+    [fontFamily, setFontFamily, themeMode, setThemeMode],
+  );
+
+  return <SettingsContext value={value}>{children}</SettingsContext>;
+}

package/src/hooks/useClickOutside.ts

@@ -1,9 +1,5 @@
 import { type RefObject, useEffect } from "react";
 
-/**
- * Close a dropdown/popover when clicking outside or pressing Escape.
- * Only attaches listeners when `active` is true.
- */
 export function useClickOutside(
   ref: RefObject<HTMLElement | null>,
   onClose: () => void,

package/src/hooks/useCommentNavigation.ts

@@ -1,27 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { appStore, useAppStore } from "../store";
-import type { Comment } from "../types";
+import type { Comment } from "../schema";
+import { uiStore } from "../store";
 
 interface UseCommentNavigationResult {
   currentIndex: number;
-  hoveredCommentId: string | undefined;
   setHoveredCommentId: (id: string | undefined) => void;
   navigateToComment: (commentId: string) => void;
   navigatePrevious: () => void;
   navigateNext: () => void;
 }
 
-/**
- * Manage comment navigation with cycling, keyboard shortcuts, and scroll-to-comment.
- * Handles Alt+↑/↓ keyboard navigation.
- */
 export function useCommentNavigation(
   sortedComments: Comment[],
 ): UseCommentNavigationResult {
   const [currentIndex, setCurrentIndex] = useState(0);
-  const hoveredCommentId = useAppStore(
-    (s) => s.getActiveDocumentState()?.hoveredCommentId,
-  );
   const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
     undefined,
   );
@@ -30,7 +22,6 @@ export function useCommentNavigation(
   const sortedRef = useRef(sortedComments);
   sortedRef.current = sortedComments;
 
-  // Cleanup hover timeout on unmount
   useEffect(() => {
     return () => clearTimeout(hoverTimeoutRef.current);
   }, []);
@@ -44,7 +35,6 @@ export function useCommentNavigation(
     setCurrentIndex(clampedIndex);
   }
 
-  // Update DOM data-focused attributes imperatively
   const updateFocusedMarks = useCallback((commentId: string | undefined) => {
     const marks = window.document.querySelectorAll("mark[data-comment-id]");
     for (const mark of marks) {
@@ -59,13 +49,12 @@ export function useCommentNavigation(
 
   const setHoveredCommentId = useCallback(
     (id: string | undefined) => {
-      appStore.getState().setHoveredCommentId(id);
+      uiStore.setState({ hoveredCommentId: id });
       updateFocusedMarks(id);
     },
     [updateFocusedMarks],
   );
 
-  // Navigate to a comment by scrolling its highlight into view
   const navigateToComment = useCallback(
     (commentId: string) => {
       const selector = `mark[data-comment-id="${commentId}"]`;
@@ -80,24 +69,14 @@ export function useCommentNavigation(
         );
       };
 
-      // Try main document first (for markdown)
-      const mainHighlight = document.querySelector(selector);
-      if (mainHighlight) {
-        scrollAndHighlight(mainHighlight);
-        return;
-      }
-
-      // Try inside iframe (for HTML content)
-      const iframe = document.querySelector("iframe");
-      const iframeHighlight = iframe?.contentDocument?.querySelector(selector);
-      if (iframeHighlight) {
-        scrollAndHighlight(iframeHighlight);
+      const highlight = document.querySelector(selector);
+      if (highlight) {
+        scrollAndHighlight(highlight);
       }
     },
     [setHoveredCommentId],
   );
 
-  // Navigate to previous comment (cycles to last when at first)
   const navigatePrevious = useCallback(() => {
     const sc = sortedRef.current;
     if (sc.length === 0) return;
@@ -108,7 +87,6 @@ export function useCommentNavigation(
     });
   }, [navigateToComment]);
 
-  // Navigate to next comment (cycles to first when at last)
   const navigateNext = useCallback(() => {
     const sc = sortedRef.current;
     if (sc.length === 0) return;
@@ -121,7 +99,6 @@ export function useCommentNavigation(
 
   return {
     currentIndex: clampedIndex,
-    hoveredCommentId,
     setHoveredCommentId,
     navigateToComment,
     navigatePrevious,