@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/components/ui/Dialog.tsx

@@ -1,116 +0,0 @@
-import { X } from "lucide-react";
-import { useEffect, useRef } from "react";
-import { cn } from "../../lib/utils";
-
-interface DialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  children: React.ReactNode;
-}
-
-function Dialog({ open, onOpenChange, children }: DialogProps) {
-  const ref = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = ref.current;
-    if (!dialog) return;
-
-    if (open && !dialog.open) {
-      dialog.showModal();
-    } else if (!open && dialog.open) {
-      dialog.close();
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const dialog = ref.current;
-    if (!dialog) return;
-
-    const handleClose = () => onOpenChange(false);
-    dialog.addEventListener("close", handleClose);
-    return () => dialog.removeEventListener("close", handleClose);
-  }, [onOpenChange]);
-
-  const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (e.target === ref.current) onOpenChange(false);
-  };
-
-  return (
-    <dialog
-      ref={ref}
-      onClick={handleClick}
-      className="backdrop:bg-black/20 dark:backdrop:bg-black/40 backdrop:backdrop-blur-sm bg-transparent p-0 m-auto max-w-none"
-    >
-      {open ? children : null}
-    </dialog>
-  );
-}
-
-function DialogContent({
-  className,
-  children,
-  onClose,
-}: {
-  className?: string;
-  children: React.ReactNode;
-  onClose?: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "w-full bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 rounded-xl flex flex-col",
-        className,
-      )}
-    >
-      {children}
-      {onClose && (
-        <button
-          type="button"
-          onClick={onClose}
-          className="absolute top-3 right-3 size-7 inline-flex items-center justify-center rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      )}
-    </div>
-  );
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between pl-4 pr-12 py-3 border-b border-zinc-100 dark:border-zinc-800",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({
-  className,
-  children,
-}: {
-  className?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <h2
-      className={cn(
-        "text-sm font-medium text-zinc-900 dark:text-zinc-100",
-        className,
-      )}
-    >
-      {children}
-    </h2>
-  );
-}
-
-function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
-  );
-}
-
-export { Dialog, DialogBody, DialogContent, DialogHeader, DialogTitle };

package/src/components/ui/DropdownMenu.tsx

@@ -1,158 +0,0 @@
-import { createContext, use, useCallback, useRef, useState } from "react";
-import { useClickOutside } from "../../hooks/useClickOutside";
-import { cn } from "../../lib/utils";
-
-interface DropdownState {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-}
-
-const DropdownContext = createContext<DropdownState>({
-  open: false,
-  setOpen: () => {},
-});
-
-function DropdownMenu({
-  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
-}: {
-  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 (
-    <button type="button" onClick={() => setOpen(!open)} {...props}>
-      {children}
-    </button>
-  );
-}
-
-function DropdownMenuContent({
-  className,
-  align = "start",
-  children,
-}: {
-  className?: string;
-  align?: "start" | "end";
-  children: React.ReactNode;
-}) {
-  const { open } = use(DropdownContext);
-  if (!open) return null;
-
-  return (
-    <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
-}: {
-  className?: string;
-  variant?: "default" | "destructive";
-  onSelect?: () => void;
-  children: React.ReactNode;
-  title?: string;
-}) {
-  const { setOpen } = use(DropdownContext);
-
-  return (
-    <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",
-        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 }: { className?: string }) {
-  return (
-    <div className={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)} />
-  );
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-};

package/src/contexts/CommentContext.tsx

@@ -1,198 +0,0 @@
-import {
-  createContext,
-  type ReactNode,
-  use,
-  useCallback,
-  useEffect,
-  useMemo,
-} from "react";
-import { toast } from "sonner";
-import { useCommentNavigation } from "../hooks/useCommentNavigation";
-import { useComments } from "../hooks/useComments";
-import { formatComment } from "../lib/export";
-import { truncate } from "../lib/utils";
-import type { Comment } from "../schema";
-import { appStore, useAppStore } from "../store";
-import { useLocale } from "./LocaleContext";
-
-// Stable callbacks — never causes re-renders
-interface CommentActionsValue {
-  addComment: (
-    selectedText: string,
-    comment: string,
-    startOffset: number,
-    endOffset: number,
-  ) => void;
-  editComment: (id: string, newText: string) => void;
-  deleteComment: (id: string) => void;
-  deleteAll: () => void;
-  reanchorComment: (
-    id: string,
-    selectedText: string,
-    startOffset: number,
-    endOffset: number,
-  ) => void;
-  setHoveredCommentId: (id: string | undefined) => void;
-  navigateToComment: (commentId: string) => void;
-  navigatePrevious: () => void;
-  navigateNext: () => void;
-  startReanchor: (commentId: string) => void;
-  cancelReanchor: () => void;
-  copyComment: (comment: Comment) => void;
-  scrollToHighlight: (commentId: string) => void;
-}
-
-const CommentActionsContext = createContext<CommentActionsValue | null>(null);
-
-export function useCommentActions(): CommentActionsValue {
-  const value = use(CommentActionsContext);
-  if (!value) {
-    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;
-  children: ReactNode;
-}
-
-export function CommentProvider({
-  filePath,
-  clean,
-  children,
-}: CommentProviderProps) {
-  const {
-    comments,
-    error: commentsError,
-    addComment,
-    deleteComment,
-    deleteAll,
-    editComment,
-    reanchorComment,
-  } = useComments(filePath, { clean });
-
-  const sortedComments = useAppStore(
-    (s) => s.documents.get(filePath)?.sortedComments ?? [],
-  );
-
-  const {
-    currentIndex,
-    setHoveredCommentId,
-    navigateToComment,
-    navigatePrevious,
-    navigateNext,
-  } = useCommentNavigation(sortedComments);
-
-  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();
-
-  useEffect(() => {
-    if (commentsError) {
-      toast.error(commentsError);
-    }
-  }, [commentsError]);
-
-  const copyComment = useCallback(
-    (comment: Comment) => {
-      navigator.clipboard.writeText(formatComment(comment));
-      toast.success(t("toast.copied", { text: truncate(comment.comment) }));
-    },
-    [t],
-  );
-
-  const scrollToHighlight = useCallback((commentId: string) => {
-    const mark = window.document.querySelector(
-      `mark[data-comment-id="${commentId}"]`,
-    );
-    if (mark) {
-      mark.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  }, []);
-
-  const actions = useMemo<CommentActionsValue>(
-    () => ({
-      addComment,
-      editComment,
-      deleteComment,
-      deleteAll,
-      reanchorComment,
-      setHoveredCommentId,
-      navigateToComment,
-      navigatePrevious,
-      navigateNext,
-      startReanchor,
-      cancelReanchor,
-      copyComment,
-      scrollToHighlight,
-    }),
-    [
-      addComment,
-      editComment,
-      deleteComment,
-      deleteAll,
-      reanchorComment,
-      setHoveredCommentId,
-      navigateToComment,
-      navigatePrevious,
-      navigateNext,
-      startReanchor,
-      cancelReanchor,
-      copyComment,
-      scrollToHighlight,
-    ],
-  );
-
-  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,76 +0,0 @@
-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;
-  setLocale: (locale: Locale) => void;
-  t: (key: TranslationKey, params?: Record<string, string | number>) => string;
-}
-
-const LocaleContext = createContext<LocaleContextValue | null>(null);
-
-export function useLocale(): LocaleContextValue {
-  const value = use(LocaleContext);
-  if (!value) {
-    throw new Error("useLocale must be used within a LocaleProvider");
-  }
-  return value;
-}
-
-interface LocaleProviderProps {
-  children: ReactNode;
-}
-
-export function LocaleProvider({ children }: LocaleProviderProps) {
-  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>(
-    () => ({ locale, setLocale, t }),
-    [locale, setLocale, t],
-  );
-
-  return <LocaleContext value={value}>{children}</LocaleContext>;
-}

package/src/contexts/PositionsContext.tsx

@@ -1,16 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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>;
-}