@peaske7/readit 0.1.8 → 0.2.0

package/src/components/ui/DropdownMenu.tsx

@@ -1,114 +1,158 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { createContext, use, useCallback, useRef, useState } from "react";
+import { useClickOutside } from "../../hooks/useClickOutside";
 import { cn } from "../../lib/utils";
-import { textVariants } from "./Text";
+
+interface DropdownState {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DropdownContext = createContext<DropdownState>({
+  open: false,
+  setOpen: () => {},
+});
 
 function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  open: controlledOpen,
+  onOpenChange,
+  children,
+}: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback(
+    (v: boolean) => {
+      if (!isControlled) setInternalOpen(v);
+      onOpenChange?.(v);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, () => setOpen(false), open);
+
+  return (
+    <DropdownContext value={{ open, setOpen }}>
+      <div ref={ref} className="relative inline-block">
+        {children}
+      </div>
+    </DropdownContext>
+  );
 }
 
 function DropdownMenuTrigger({
+  asChild,
+  children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+}: {
+  asChild?: boolean;
+  children: React.ReactNode;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { open, setOpen } = use(DropdownContext);
+
+  if (
+    asChild &&
+    children &&
+    typeof children === "object" &&
+    "props" in children
+  ) {
+    const child = children as React.ReactElement<Record<string, unknown>>;
+    return (
+      <child.type
+        {...child.props}
+        onClick={(e: React.MouseEvent) => {
+          setOpen(!open);
+          if (typeof child.props.onClick === "function") child.props.onClick(e);
+        }}
+      />
+    );
+  }
+
   return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
+    <button type="button" onClick={() => setOpen(!open)} {...props}>
+      {children}
+    </button>
   );
 }
 
 function DropdownMenuContent({
   className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-xl py-1",
-          "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40",
-          "animate-in",
-          className,
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-}
+  align = "start",
+  children,
+}: {
+  className?: string;
+  align?: "start" | "end";
+  children: React.ReactNode;
+}) {
+  const { open } = use(DropdownContext);
+  if (!open) return null;
 
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+    <div
+      className={cn(
+        "absolute top-full mt-1 z-50 min-w-[8rem] overflow-hidden rounded-xl py-1",
+        "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40",
+        align === "end" ? "right-0" : "left-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
   );
 }
 
 function DropdownMenuItem({
   className,
   variant = "default",
+  onSelect,
+  children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+}: {
+  className?: string;
   variant?: "default" | "destructive";
+  onSelect?: () => void;
+  children: React.ReactNode;
+  title?: string;
 }) {
+  const { setOpen } = use(DropdownContext);
+
   return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-variant={variant}
+    <button
+      type="button"
       className={cn(
         "w-full px-3 py-1.5 text-left text-sm outline-none select-none transition-colors duration-150 flex items-center gap-2 cursor-default",
-        "data-[variant=default]:text-zinc-600 dark:data-[variant=default]:text-zinc-400 data-[variant=default]:focus:bg-zinc-50 dark:data-[variant=default]:focus:bg-zinc-800 data-[variant=default]:focus:text-zinc-900 dark:data-[variant=default]:focus:text-zinc-100",
-        "data-[variant=destructive]:text-red-600 dark:data-[variant=destructive]:text-red-400 data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950 data-[variant=destructive]:focus:text-red-700 dark:data-[variant=destructive]:focus:text-red-300",
-        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        variant === "default" &&
+          "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
+        variant === "destructive" &&
+          "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className,
       )}
+      onClick={() => {
+        onSelect?.();
+        setOpen(false);
+      }}
       {...props}
-    />
+    >
+      {children}
+    </button>
   );
 }
 
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+function DropdownMenuSeparator({ className }: { className?: string }) {
   return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label>) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      className={cn(
-        "px-3 py-1.5 font-medium",
-        textVariants({ variant: "caption" }),
-        className,
-      )}
-      {...props}
-    />
+    <div className={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)} />
   );
 }
 
 export {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 };

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>;
+}