@peaske7/readit 0.1.6 → 0.1.7

package/src/components/FloatingTOC.tsx

@@ -1,5 +1,6 @@
 import { List } from "lucide-react";
 import { useState } from "react";
+import { useLocale } from "../contexts/LocaleContext";
 import type { Heading } from "../hooks/useHeadings";
 import { cn } from "../lib/utils";
 import { TableOfContents } from "./TableOfContents";
@@ -15,6 +16,7 @@ export function FloatingTOC({
   activeId,
   onHeadingClick,
 }: FloatingTOCProps) {
+  const { t } = useLocale();
   const [isExpanded, setIsExpanded] = useState(false);
 
   if (headings.length === 0) return null;
@@ -24,7 +26,7 @@ export function FloatingTOC({
       className="fixed left-4 top-16 z-40"
       onMouseEnter={() => setIsExpanded(true)}
       onMouseLeave={() => setIsExpanded(false)}
-      aria-label="Table of contents"
+      aria-label={t("floatingTOC.label")}
     >
       {/* Collapsed state: circular button */}
       <button
@@ -34,7 +36,7 @@ export function FloatingTOC({
           "w-10 h-10 rounded-full bg-white dark:bg-zinc-900 shadow-lg border border-zinc-100 dark:border-zinc-800 flex items-center justify-center text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors duration-150",
           isExpanded && "opacity-0 pointer-events-none",
         )}
-        aria-label="Table of Contents"
+        aria-label={t("floatingTOC.label")}
       >
         <List className="w-5 h-5" />
       </button>

package/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { useCommentContext } from "../contexts/CommentContext";
 import { useLayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { cn } from "../lib/utils";
 import { ActionsMenu } from "./ActionsMenu";
 import { CommentBadge } from "./comments/CommentBadge";
@@ -22,6 +23,7 @@ export function Header({
 }: HeaderProps) {
   const { reanchorTarget } = useCommentContext();
   const { isFullscreen } = useLayoutContext();
+  const { t } = useLocale();
 
   return (
     <header className="sticky top-0 z-50 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-100 dark:border-zinc-800">
@@ -44,7 +46,7 @@ export function Header({
         <div className="flex items-center gap-3">
           {reanchorTarget && (
             <Text variant="caption" asChild>
-              <span className="italic">Select text to re-anchor</span>
+              <span className="italic">{t("header.selectTextToReanchor")}</span>
             </Text>
           )}
 

package/src/components/InlineEditor.tsx

@@ -1,5 +1,6 @@
 import { use, useEffect, useRef, useState } from "react";
 import { LayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { cn } from "../lib/utils";
 import { FontFamilies } from "../types";
 import { Button } from "./ui/Button";
@@ -20,6 +21,7 @@ export function InlineEditor({
   className,
 }: InlineEditorProps) {
   const layout = use(LayoutContext);
+  const { t } = useLocale();
   const fontClass = layout
     ? layout.fontFamily === FontFamilies.SANS_SERIF
       ? "font-sans"
@@ -61,10 +63,10 @@ export function InlineEditor({
       />
       <div className="flex gap-3 text-sm">
         <Button variant="link" size="sm" onClick={handleSave}>
-          Save
+          {t("editor.save")}
         </Button>
         <Button variant="ghost" size="sm" onClick={onCancel}>
-          Cancel
+          {t("editor.cancel")}
         </Button>
       </div>
     </div>

package/src/components/MarginNote.tsx

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { useState } from "react";
 import { useCommentContext } from "../contexts/CommentContext";
 import { useLayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { cn } from "../lib/utils";
 import { type Comment, FontFamilies } from "../types";
 import { InlineEditor } from "./InlineEditor";
@@ -60,6 +61,7 @@ export function MarginNote({
   commentIndex = 0,
 }: MarginNoteProps) {
   const { fontFamily } = useLayoutContext();
+  const { t } = useLocale();
   const {
     editComment,
     deleteComment,
@@ -100,13 +102,15 @@ export function MarginNote({
           <ActionBar
             className={cn("gap-1.5 duration-150", isHovered && "opacity-100")}
           >
-            <ActionLink onClick={() => setIsEditing(true)}>Add note</ActionLink>
+            <ActionLink onClick={() => setIsEditing(true)}>
+              {t("marginNote.addNote")}
+            </ActionLink>
             <SeparatorDot />
             <ActionLink
               variant="destructive"
               onClick={() => deleteComment(comment.id)}
             >
-              Delete
+              {t("marginNote.delete")}
             </ActionLink>
           </ActionBar>
         </div>
@@ -170,24 +174,29 @@ export function MarginNote({
               {comment.comment}
             </p>
             <ActionBar className="gap-1.5 mt-2">
-              <ActionLink onClick={() => setIsEditing(true)}>Edit</ActionLink>
+              <ActionLink onClick={() => setIsEditing(true)}>
+                {t("marginNote.edit")}
+              </ActionLink>
               <SeparatorDot />
               <ActionLink
                 variant="destructive"
                 onClick={() => deleteComment(comment.id)}
               >
-                Delete
+                {t("marginNote.delete")}
               </ActionLink>
               <SeparatorDot />
-              <ActionLink onClick={handleCopy} title="Copy raw text (⌘C)">
-                Copy
+              <ActionLink
+                onClick={handleCopy}
+                title={t("marginNote.copyTitle")}
+              >
+                {t("marginNote.copy")}
               </ActionLink>
               <SeparatorDot />
               <ActionLink
                 onClick={() => copyCommentForLLM(comment)}
-                title="Copy with context for LLM (⌘⇧C)"
+                title={t("marginNote.llmTitle")}
               >
-                LLM
+                {t("marginNote.llm")}
               </ActionLink>
             </ActionBar>
           </>

package/src/components/RawModal.tsx

@@ -1,6 +1,7 @@
 import { Copy } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
+import { useLocale } from "../contexts/LocaleContext";
 import { useAppStore } from "../store";
 import { Button } from "./ui/Button";
 import {
@@ -26,6 +27,7 @@ type ModalState =
   | { status: "success"; content: string; path: string };
 
 export function RawModal({ isOpen, onClose }: RawModalProps) {
+  const { t } = useLocale();
   const [state, setState] = useState<ModalState>({ status: "idle" });
   const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
 
@@ -73,11 +75,11 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
 
     try {
       await navigator.clipboard.writeText(state.content);
-      toast.success("Copied to clipboard");
+      toast.success(t("rawModal.copiedToClipboard"));
     } catch {
-      toast.error("Failed to copy");
+      toast.error(t("rawModal.failedToCopy"));
     }
-  }, [state]);
+  }, [state, t]);
 
   return (
     <Dialog
@@ -88,14 +90,14 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
     >
       <DialogContent className="max-w-2xl max-h-[80vh]">
         <DialogHeader>
-          <DialogTitle>Raw Comments</DialogTitle>
+          <DialogTitle>{t("rawModal.title")}</DialogTitle>
           {state.status === "success" && (
             <Button
               variant="ghost"
               size="icon"
               className="size-7"
               onClick={handleCopy}
-              title="Copy to clipboard"
+              title={t("rawModal.copyTitle")}
             >
               <Copy className="w-4 h-4" />
             </Button>
@@ -111,7 +113,7 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
         <DialogBody>
           {state.status === "loading" && (
             <Text variant="caption" className="text-center py-8">
-              Loading...
+              {t("rawModal.loading")}
             </Text>
           )}
 
@@ -123,7 +125,7 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
 
           {state.status === "empty" && (
             <Text variant="caption" className="text-center py-8">
-              No comments file yet. Add comments to create one.
+              {t("rawModal.noComments")}
             </Text>
           )}
 

package/src/components/ReanchorConfirm.tsx

@@ -1,3 +1,4 @@
+import { useLocale } from "../contexts/LocaleContext";
 import { Button } from "./ui/Button";
 import { Text } from "./ui/Text";
 
@@ -12,20 +13,22 @@ export function ReanchorConfirm({
   onConfirm,
   onCancel,
 }: ReanchorConfirmProps) {
+  const { t } = useLocale();
+
   return (
     <div className="border-t border-zinc-200 dark:border-zinc-700 pt-2 pb-3 pl-6">
       <Text variant="body" className="mb-2">
-        Re-anchor to this selection?
+        {t("reanchor.question")}
       </Text>
       <Text variant="caption" asChild>
         <p className="italic line-clamp-2 mb-2">"{selectionText}"</p>
       </Text>
       <div className="flex gap-3 text-sm">
         <Button variant="link" size="sm" onClick={onConfirm}>
-          Confirm
+          {t("reanchor.confirm")}
         </Button>
         <Button variant="ghost" size="sm" onClick={onCancel}>
-          Cancel
+          {t("reanchor.cancel")}
         </Button>
       </div>
     </div>

package/src/components/SettingsModal.tsx

@@ -1,7 +1,11 @@
-import { Check, ChevronDown } from "lucide-react";
+import { Check, ChevronDown, ExternalLink } from "lucide-react";
 import { useLayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
+import { type Locale, Locales } from "../lib/i18n";
 import { cn } from "../lib/utils";
 import {
+  type EditorScheme,
+  EditorSchemes,
   FontFamilies,
   type FontFamily,
   type ThemeMode,
@@ -28,10 +32,9 @@ interface SettingsModalProps {
   onClose: () => void;
 }
 
-const THEME_OPTIONS = [
-  { value: ThemeModes.SYSTEM, label: "System" },
-  { value: ThemeModes.LIGHT, label: "Light" },
-  { value: ThemeModes.DARK, label: "Dark" },
+const LOCALE_OPTIONS = [
+  { value: Locales.JA, label: "日本語" },
+  { value: Locales.EN, label: "English" },
 ] as const;
 
 function ThemeDot({
@@ -73,15 +76,6 @@ function ThemePreviewBadge() {
 
 /* ─── Font selector ──────────────────────────────────────────── */
 
-const FONT_OPTIONS = [
-  { value: FontFamilies.SERIF, label: "Serif", fontClass: "font-serif" },
-  {
-    value: FontFamilies.SANS_SERIF,
-    label: "Sans-serif",
-    fontClass: "font-sans",
-  },
-] as const;
-
 function FontPreviewBadge({ fontClass }: { fontClass: string }) {
   return (
     <span
@@ -112,6 +106,8 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
   const {
     fontFamily,
     setFontFamily,
+    editorScheme,
+    setEditorScheme,
     themeMode,
     setThemeMode,
     shortcuts,
@@ -119,11 +115,45 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
     toggleShortcutEnabled,
     resetShortcutsToDefaults,
   } = useLayoutContext();
+  const { locale, setLocale, t } = useLocale();
+
+  const themeOptions = [
+    { value: ThemeModes.SYSTEM, label: t("settings.theme.system") },
+    { value: ThemeModes.LIGHT, label: t("settings.theme.light") },
+    { value: ThemeModes.DARK, label: t("settings.theme.dark") },
+  ];
+
+  const fontOptions = [
+    {
+      value: FontFamilies.SERIF,
+      label: t("settings.font.serif"),
+      fontClass: "font-serif",
+    },
+    {
+      value: FontFamilies.SANS_SERIF,
+      label: t("settings.font.sansSerif"),
+      fontClass: "font-sans",
+    },
+  ];
+
+  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 =
-    THEME_OPTIONS.find((o) => o.value === themeMode) ?? THEME_OPTIONS[0];
+    themeOptions.find((o) => o.value === themeMode) ?? themeOptions[0];
   const activeFont =
-    FONT_OPTIONS.find((o) => o.value === fontFamily) ?? FONT_OPTIONS[0];
+    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];
 
   return (
     <Dialog
@@ -134,13 +164,13 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
     >
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>Settings</DialogTitle>
+          <DialogTitle>{t("settings.title")}</DialogTitle>
         </DialogHeader>
 
         <DialogBody className="space-y-4">
           <div>
             <Text variant="overline" asChild>
-              <h3 className="mb-3">Theme</h3>
+              <h3 className="mb-3">{t("settings.theme")}</h3>
             </Text>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -152,7 +182,7 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="min-w-[160px]">
-                {THEME_OPTIONS.map((option) => (
+                {themeOptions.map((option) => (
                   <DropdownMenuItem
                     key={option.value}
                     onSelect={() => setThemeMode(option.value)}
@@ -172,7 +202,7 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
 
           <div>
             <Text variant="overline" asChild>
-              <h3 className="mb-3">Font</h3>
+              <h3 className="mb-3">{t("settings.font")}</h3>
             </Text>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -183,7 +213,7 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="min-w-[160px]">
-                {FONT_OPTIONS.map((option) => (
+                {fontOptions.map((option) => (
                   <DropdownMenuItem
                     key={option.value}
                     onSelect={() => setFontFamily(option.value as FontFamily)}
@@ -202,10 +232,69 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
 
           <div>
             <Text variant="overline" asChild>
-              <h3 className="mb-1">Keyboard Shortcuts</h3>
+              <h3 className="mb-3">{t("settings.language")}</h3>
+            </Text>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button type="button" className={triggerClassName}>
+                  <span>{activeLocale.label}</span>
+                  <ChevronDown className="size-3 text-zinc-400 dark:text-zinc-500" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="min-w-[160px]">
+                {LOCALE_OPTIONS.map((option) => (
+                  <DropdownMenuItem
+                    key={option.value}
+                    onSelect={() => setLocale(option.value as Locale)}
+                    className="flex items-center gap-2"
+                  >
+                    <span className="flex-1">{option.label}</span>
+                    {locale === 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-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">
-              Click a key to rebind
+              {t("settings.clickToRebind")}
             </p>
             <ShortcutList
               shortcuts={shortcuts}

package/src/components/ShortcutCapture.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from "react";
+import { useLocale } from "../contexts/LocaleContext";
 import {
   eventToBinding,
   isReservedBinding,
@@ -11,6 +12,8 @@ interface ShortcutCaptureProps {
 }
 
 export function ShortcutCapture({ onCapture, onCancel }: ShortcutCaptureProps) {
+  const { t } = useLocale();
+
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       e.preventDefault();
@@ -39,7 +42,7 @@ export function ShortcutCapture({ onCapture, onCancel }: ShortcutCaptureProps) {
 
   return (
     <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-50 border border-amber-200 text-amber-700 text-xs font-medium animate-pulse">
-      Press keys...
+      {t("shortcutCapture.pressKeys")}
     </span>
   );
 }

package/src/components/ShortcutList.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useMemo, useState } from "react";
+import { useLocale } from "../contexts/LocaleContext";
+import type { TranslationKey } from "../lib/i18n";
 import {
   bindingsEqual,
   formatBinding,
+  type ShortcutAction,
   type ShortcutBinding,
   type ShortcutDefinition,
 } from "../lib/shortcut-registry";
@@ -16,13 +19,50 @@ interface ShortcutListProps {
 
 const SHORTCUT_GROUPS = [
   {
-    label: "Copy",
+    labelKey: "shortcutGroup.copy" as const,
     ids: ["copyAll", "copyAllRaw", "copySelectionRaw", "copySelectionLLM"],
   },
-  { label: "Navigate", ids: ["navigateNext", "navigatePrevious"] },
-  { label: "Other", ids: ["clearSelection"] },
+  {
+    labelKey: "shortcutGroup.navigate" as const,
+    ids: ["navigateNext", "navigatePrevious"],
+  },
+  { labelKey: "shortcutGroup.other" as const, ids: ["clearSelection"] },
 ] as const;
 
+const SHORTCUT_LABEL_KEYS: Record<
+  ShortcutAction,
+  { label: TranslationKey; description: TranslationKey }
+> = {
+  copyAll: {
+    label: "shortcut.copyAll.label",
+    description: "shortcut.copyAll.description",
+  },
+  copyAllRaw: {
+    label: "shortcut.copyAllRaw.label",
+    description: "shortcut.copyAllRaw.description",
+  },
+  navigateNext: {
+    label: "shortcut.navigateNext.label",
+    description: "shortcut.navigateNext.description",
+  },
+  navigatePrevious: {
+    label: "shortcut.navigatePrevious.label",
+    description: "shortcut.navigatePrevious.description",
+  },
+  copySelectionRaw: {
+    label: "shortcut.copySelectionRaw.label",
+    description: "shortcut.copySelectionRaw.description",
+  },
+  copySelectionLLM: {
+    label: "shortcut.copySelectionLLM.label",
+    description: "shortcut.copySelectionLLM.description",
+  },
+  clearSelection: {
+    label: "shortcut.clearSelection.label",
+    description: "shortcut.clearSelection.description",
+  },
+};
+
 const isMac =
   typeof navigator !== "undefined" &&
   /Mac|iPod|iPhone|iPad/.test(navigator.platform);
@@ -33,6 +73,7 @@ export function ShortcutList({
   onToggleEnabled,
   onResetToDefaults,
 }: ShortcutListProps) {
+  const { t } = useLocale();
   const [capturingId, setCapturingId] = useState<string | undefined>();
 
   const hasOverrides = useMemo(
@@ -77,9 +118,9 @@ export function ShortcutList({
         if (groupShortcuts.length === 0) return null;
 
         return (
-          <div key={group.label}>
+          <div key={group.labelKey}>
             <span className="text-[11px] font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider">
-              {group.label}
+              {t(group.labelKey)}
             </span>
             <div className="mt-1 space-y-0.5">
               {groupShortcuts.map((shortcut) => (
@@ -89,9 +130,9 @@ export function ShortcutList({
                 >
                   <span
                     className="flex-1 text-sm text-zinc-700 dark:text-zinc-300 truncate"
-                    title={shortcut.description}
+                    title={t(SHORTCUT_LABEL_KEYS[shortcut.id].description)}
                   >
-                    {shortcut.label}
+                    {t(SHORTCUT_LABEL_KEYS[shortcut.id].label)}
                   </span>
 
                   <div className="flex items-center gap-2.5">
@@ -117,7 +158,7 @@ export function ShortcutList({
                       role="switch"
                       aria-checked={shortcut.enabled}
                       onClick={() => onToggleEnabled(shortcut.id)}
-                      title="Enable/disable shortcut"
+                      title={t("shortcuts.enableDisable")}
                       className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors cursor-pointer ${
                         shortcut.enabled
                           ? "bg-zinc-600 dark:bg-zinc-400"
@@ -150,7 +191,7 @@ export function ShortcutList({
             : "text-xs text-zinc-300 dark:text-zinc-600 cursor-default"
         }
       >
-        Reset to defaults
+        {t("shortcuts.resetToDefaults")}
       </button>
     </div>
   );

package/src/components/comments/CommentBadge.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useCommentContext } from "../../contexts/CommentContext";
+import { useLocale } from "../../contexts/LocaleContext";
 import { cn } from "../../lib/utils";
 import {
   DropdownMenu,
@@ -9,6 +10,7 @@ import {
 import { CommentManager } from "./CommentManager";
 
 export function CommentBadge() {
+  const { t } = useLocale();
   const { commentCount } = useCommentContext();
 
   const [commentsOpen, setCommentsOpen] = useState(false);
@@ -26,7 +28,11 @@ export function CommentBadge() {
               ? "text-zinc-600"
               : "text-zinc-400 hover:text-zinc-600",
           )}
-          title={`${commentCount} comment${commentCount !== 1 ? "s" : ""}`}
+          title={
+            commentCount === 1
+              ? t("commentBadge.title", { count: commentCount })
+              : t("commentBadge.titlePlural", { count: commentCount })
+          }
         >
           <span className="text-zinc-300">·</span>
           {commentCount}