@peaske7/readit 0.1.5 → 0.1.7

package/src/contexts/CommentContext.tsx

@@ -15,6 +15,7 @@ import { generatePrompt } from "../lib/export";
 import { truncate } from "../lib/utils";
 import { useAppStore } from "../store";
 import type { Comment, DocumentType } from "../types";
+import { useLocale } from "./LocaleContext";
 
 interface CommentContextValue {
   // From useComments
@@ -108,6 +109,7 @@ export function CommentProvider({
   } = useCommentNavigation(sortedComments);
 
   const { reanchorTarget, startReanchor, cancelReanchor } = useReanchorMode();
+  const { t } = useLocale();
 
   // Show comments errors as toast
   useEffect(() => {
@@ -116,11 +118,14 @@ export function CommentProvider({
     }
   }, [commentsError]);
 
-  const copyCommentRaw = useCallback((comment: Comment) => {
-    const raw = `${comment.selectedText}\n\n${comment.comment}`;
-    navigator.clipboard.writeText(raw);
-    toast.success(`Copied: "${truncate(comment.comment)}"`);
-  }, []);
+  const copyCommentRaw = useCallback(
+    (comment: Comment) => {
+      const raw = `${comment.selectedText}\n\n${comment.comment}`;
+      navigator.clipboard.writeText(raw);
+      toast.success(t("toast.copied", { text: truncate(comment.comment) }));
+    },
+    [t],
+  );
 
   const copyCommentForLLM = useCallback(
     (comment: Comment) => {
@@ -136,16 +141,18 @@ export function CommentProvider({
       });
 
       navigator.clipboard.writeText(formatted);
-      toast.success(`Copied for LLM: "${truncate(comment.comment)}"`);
+      toast.success(
+        t("toast.copiedForLLM", { text: truncate(comment.comment) }),
+      );
     },
-    [documentContent, fileName],
+    [documentContent, fileName, t],
   );
 
   const copyAllForLLM = useCallback(() => {
     const prompt = generatePrompt(comments, fileName);
     navigator.clipboard.writeText(prompt);
-    toast.success("Copied all comments");
-  }, [comments, fileName]);
+    toast.success(t("toast.copiedAllComments"));
+  }, [comments, fileName, t]);
 
   const scrollToHighlight = useCallback(
     (commentId: string) => {

package/src/contexts/LayoutContext.tsx

@@ -1,16 +1,24 @@
 import { createContext, type ReactNode, use, useMemo } from "react";
+import { useEditorScheme } from "../hooks/useEditorScheme";
 import { useFontPreference } from "../hooks/useFontPreference";
 import { useKeybindings } from "../hooks/useKeybindings";
 import { useLayoutMode } from "../hooks/useLayoutMode";
 import { useThemePreference } from "../hooks/useThemePreference";
 import type { ShortcutDefinition } from "../lib/shortcut-registry";
-import type { FontFamily, ShortcutBinding, ThemeMode } from "../types";
+import type {
+  EditorScheme,
+  FontFamily,
+  ShortcutBinding,
+  ThemeMode,
+} from "../types";
 
 interface LayoutContextValue {
   isFullscreen: boolean;
   toggleLayoutMode: () => void;
   fontFamily: FontFamily;
   setFontFamily: (font: FontFamily) => Promise<void>;
+  editorScheme: EditorScheme;
+  setEditorScheme: (scheme: EditorScheme) => Promise<void>;
   themeMode: ThemeMode;
   setThemeMode: (mode: ThemeMode) => void;
   shortcuts: ShortcutDefinition[];
@@ -30,20 +38,20 @@ export function useLayoutContext(): LayoutContextValue {
 }
 
 interface LayoutProviderProps {
-  filePath: string;
   children: ReactNode;
 }
 
-export function LayoutProvider({ filePath, children }: LayoutProviderProps) {
+export function LayoutProvider({ children }: LayoutProviderProps) {
   const { isFullscreen, toggleLayoutMode } = useLayoutMode();
-  const { fontFamily, setFontFamily } = useFontPreference(filePath);
+  const { fontFamily, setFontFamily } = useFontPreference();
+  const { editorScheme, setEditorScheme } = useEditorScheme();
   const { themeMode, setThemeMode } = useThemePreference();
   const {
     shortcuts,
     updateBinding,
     toggleEnabled: toggleShortcutEnabled,
     resetToDefaults: resetShortcutsToDefaults,
-  } = useKeybindings(filePath);
+  } = useKeybindings();
 
   const value = useMemo<LayoutContextValue>(
     () => ({
@@ -51,6 +59,8 @@ export function LayoutProvider({ filePath, children }: LayoutProviderProps) {
       toggleLayoutMode,
       fontFamily,
       setFontFamily,
+      editorScheme,
+      setEditorScheme,
       themeMode,
       setThemeMode,
       shortcuts,
@@ -63,6 +73,8 @@ export function LayoutProvider({ filePath, children }: LayoutProviderProps) {
       toggleLayoutMode,
       fontFamily,
       setFontFamily,
+      editorScheme,
+      setEditorScheme,
       themeMode,
       setThemeMode,
       shortcuts,

package/src/contexts/LocaleContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, type ReactNode, use, useMemo } from "react";
+import { useLocalePreference } from "../hooks/useLocalePreference";
+import { createT, type Locale, type TranslationKey } from "../lib/i18n";
+
+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, setLocale } = useLocalePreference();
+  const t = useMemo(() => createT(locale), [locale]);
+
+  const value = useMemo<LocaleContextValue>(
+    () => ({ locale, setLocale, t }),
+    [locale, setLocale, t],
+  );
+
+  return <LocaleContext value={value}>{children}</LocaleContext>;
+}

package/src/hooks/useClipboard.ts

@@ -6,6 +6,7 @@ import {
   generatePrompt,
   generateRawText,
 } from "../lib/export";
+import type { TranslationKey } from "../lib/i18n";
 import { truncate } from "../lib/utils";
 import type { Comment, Document, Selection } from "../types";
 
@@ -14,6 +15,7 @@ interface UseClipboardParams {
   document: Document | undefined;
   selection: Selection | undefined;
   clearSelection: () => void;
+  t: (key: TranslationKey, params?: Record<string, string | number>) => string;
 }
 
 export function useClipboard({
@@ -21,21 +23,22 @@ export function useClipboard({
   document,
   selection,
   clearSelection,
+  t,
 }: UseClipboardParams) {
   // Export handlers
   const copyAll = useCallback(() => {
     if (!document) return;
     const prompt = generatePrompt(comments, document.fileName);
     navigator.clipboard.writeText(prompt);
-    toast.success("Copied all comments");
-  }, [comments, document]);
+    toast.success(t("toast.copiedAllComments"));
+  }, [comments, document, t]);
 
   const copyAllRaw = useCallback(() => {
     if (!document) return;
     const raw = generateRawText(comments);
     navigator.clipboard.writeText(raw);
-    toast.success("Copied all comments as raw text");
-  }, [comments, document]);
+    toast.success(t("toast.copiedAllRaw"));
+  }, [comments, document, t]);
 
   const exportJson = useCallback(() => {
     if (!document) return;
@@ -47,9 +50,9 @@ export function useClipboard({
     if (!selection) return;
 
     navigator.clipboard.writeText(selection.text);
-    toast.success(`Copied: "${truncate(selection.text)}"`);
+    toast.success(t("toast.copied", { text: truncate(selection.text) }));
     clearSelection();
-  }, [selection, clearSelection]);
+  }, [selection, clearSelection, t]);
 
   const copySelectionForLLM = useCallback(() => {
     if (!selection || !document) return;
@@ -65,9 +68,9 @@ export function useClipboard({
     });
 
     navigator.clipboard.writeText(formatted);
-    toast.success(`Copied for LLM: "${truncate(selection.text)}"`);
+    toast.success(t("toast.copiedForLLM", { text: truncate(selection.text) }));
     clearSelection();
-  }, [selection, document, clearSelection]);
+  }, [selection, document, clearSelection, t]);
 
   return {
     copyAll,

package/src/hooks/useDocument.ts

@@ -10,6 +10,12 @@ interface UseDocumentResult {
   reload: () => Promise<void>;
 }
 
+interface DocListItem {
+  path: string;
+  fileName: string;
+  type: Document["type"];
+}
+
 /**
  * Manage multi-document loading, lazy content fetching, and live reloading.
  *
@@ -39,15 +45,21 @@ export function useDocument(): UseDocumentResult {
         const data = await res.json();
 
         const clean = data.clean || false;
-        for (const file of data.files) {
-          appStore.getState().openDocument({
-            content: "", // Content loaded lazily on tab activation
-            type: file.type,
-            filePath: file.path,
-            fileName: file.fileName,
-            clean,
-          });
+        if (data.workingDirectory) {
+          appStore.getState().setWorkingDirectory(data.workingDirectory);
         }
+        data.files.forEach((file: DocListItem, index: number) => {
+          appStore.getState().openDocument(
+            {
+              content: "", // Content loaded lazily on tab activation
+              type: file.type,
+              filePath: file.path,
+              fileName: file.fileName,
+              clean,
+            },
+            { active: index === 0 },
+          );
+        });
       } catch (err) {
         setError(
           err instanceof Error ? err.message : "Failed to load documents",
@@ -84,13 +96,26 @@ export function useDocument(): UseDocumentResult {
     loadContent();
   }, [activeDocumentPath]);
 
-  // SSE: listen for file updates, reload content for already-loaded documents
+  // SSE: register new documents without stealing focus; reload loaded docs on updates
   useEffect(() => {
     const eventSource = new EventSource("/api/document/stream");
     eventSource.onmessage = async (e) => {
       try {
         const data = JSON.parse(e.data);
-        if (data.type === "update" && data.path) {
+        if (data.type === "document-added" && data.path) {
+          appStore.getState().openDocument(
+            {
+              content: "", // Lazy-loaded when tab activated
+              type: data.fileType,
+              filePath: data.path,
+              fileName: data.fileName,
+              clean: false,
+            },
+            { active: false },
+          );
+          return;
+        }
+        if (data.type === "document-updated" && data.path) {
           // Only reload if content was previously loaded
           const state = appStore.getState().documents.get(data.path);
           if (!state || !state.document.content) return;

package/src/hooks/useEditorScheme.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { type EditorScheme, EditorSchemes } from "../types";
+
+interface UseEditorSchemeResult {
+  editorScheme: EditorScheme;
+  setEditorScheme: (scheme: EditorScheme) => Promise<void>;
+}
+
+export function useEditorScheme(): UseEditorSchemeResult {
+  const [editorScheme, setEditorSchemeState] = useState<EditorScheme>(
+    EditorSchemes.NONE,
+  );
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      try {
+        const response = await fetch("/api/settings");
+        if (response.ok) {
+          const settings = await response.json();
+          setEditorSchemeState(settings.editorScheme || EditorSchemes.NONE);
+        }
+      } catch (err) {
+        console.error("Failed to fetch settings:", err);
+      }
+    };
+
+    fetchSettings();
+  }, []);
+
+  const setEditorScheme = useCallback(async (scheme: EditorScheme) => {
+    setEditorSchemeState(scheme);
+
+    try {
+      const response = await fetch("/api/settings", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ editorScheme: scheme }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to save settings");
+      }
+    } catch (err) {
+      console.error("Failed to save editor scheme:", err);
+      toast.error("Failed to save editor scheme");
+    }
+  }, []);
+
+  return { editorScheme, setEditorScheme };
+}

package/src/hooks/useFontPreference.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import { FontFamilies, type FontFamily } from "../types";
 
@@ -8,30 +8,16 @@ interface UseFontPreferenceResult {
   isLoading: boolean;
 }
 
-export function useFontPreference(
-  filePath: string | null,
-): UseFontPreferenceResult {
+export function useFontPreference(): UseFontPreferenceResult {
   const [fontFamily, setFontFamilyState] = useState<FontFamily>(
     FontFamilies.SERIF,
   );
   const [isLoading, setIsLoading] = useState(true);
 
-  const filePathRef = useRef(filePath);
-  filePathRef.current = filePath;
-
-  // Fetch settings when filePath changes
   useEffect(() => {
-    if (!filePath) {
-      setIsLoading(false);
-      return;
-    }
-
-    setIsLoading(true);
-
     const fetchSettings = async () => {
       try {
-        const query = `?path=${encodeURIComponent(filePath)}`;
-        const response = await fetch(`/api/settings${query}`);
+        const response = await fetch("/api/settings");
         if (response.ok) {
           const settings = await response.json();
           setFontFamilyState(settings.fontFamily || FontFamilies.SERIF);
@@ -44,16 +30,13 @@ export function useFontPreference(
     };
 
     fetchSettings();
-  }, [filePath]);
+  }, []);
 
   const setFontFamily = useCallback(async (font: FontFamily) => {
-    // Optimistic update
     setFontFamilyState(font);
 
     try {
-      const fp = filePathRef.current;
-      const query = fp ? `?path=${encodeURIComponent(fp)}` : "";
-      const response = await fetch(`/api/settings${query}`, {
+      const response = await fetch("/api/settings", {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ fontFamily: font }),

package/src/hooks/useKeybindings.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import {
   resolveShortcuts,
@@ -14,24 +14,14 @@ interface UseKeybindingsResult {
   isLoading: boolean;
 }
 
-export function useKeybindings(filePath: string | null): UseKeybindingsResult {
+export function useKeybindings(): UseKeybindingsResult {
   const [overrides, setOverrides] = useState<KeybindingOverride[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  const filePathRef = useRef(filePath);
-  filePathRef.current = filePath;
-
-  // Fetch keybindings from settings on mount
   useEffect(() => {
-    if (!filePath) {
-      setIsLoading(false);
-      return;
-    }
-
     const fetchKeybindings = async () => {
       try {
-        const query = `?path=${encodeURIComponent(filePath)}`;
-        const response = await fetch(`/api/settings${query}`);
+        const response = await fetch("/api/settings");
         if (response.ok) {
           const settings = await response.json();
           setOverrides(settings.keybindings ?? []);
@@ -44,20 +34,18 @@ export function useKeybindings(filePath: string | null): UseKeybindingsResult {
     };
 
     fetchKeybindings();
-  }, [filePath]);
+  }, []);
 
   const persistOverrides = useCallback(
     async (newOverrides: KeybindingOverride[]) => {
       try {
-        const fp = filePathRef.current;
-        const query = fp ? `?path=${encodeURIComponent(fp)}` : "";
-        const response = await fetch(`/api/settings${query}`);
+        const response = await fetch("/api/settings");
         if (!response.ok) return;
 
         const currentSettings = await response.json();
         const updated = { ...currentSettings, keybindings: newOverrides };
 
-        const putResponse = await fetch(`/api/settings${query}`, {
+        const putResponse = await fetch("/api/settings", {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(updated),

package/src/hooks/useLocalePreference.ts

@@ -0,0 +1,42 @@
+import { useCallback, useState } from "react";
+import { type Locale, Locales } 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 UseLocalePreferenceResult {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+}
+
+export function useLocalePreference(): UseLocalePreferenceResult {
+  const [locale, setLocaleState] = useState<Locale>(getStoredLocale);
+
+  const setLocale = useCallback((newLocale: Locale) => {
+    setLocaleState(newLocale);
+    try {
+      localStorage.setItem(STORAGE_KEY, newLocale);
+    } catch {
+      // localStorage may be unavailable
+    }
+  }, []);
+
+  return { locale, setLocale };
+}