@peaske7/readit 0.1.5 → 0.1.7

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}

package/src/components/comments/CommentInput.tsx

@@ -1,6 +1,7 @@
 import { BotMessageSquare, Copy } from "lucide-react";
 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";
@@ -21,6 +22,7 @@ export function CommentInput({
   onCopyRaw,
   onCopyForLLM,
 }: CommentInputProps) {
+  const { t } = useLocale();
   const layout = use(LayoutContext);
   const fontClass = layout
     ? layout.fontFamily === FontFamilies.SANS_SERIF
@@ -32,18 +34,11 @@ export function CommentInput({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    if (selectedText && textareaRef.current) {
-      // Only auto-focus on devices with precise pointing (desktop)
-      if (window.matchMedia("(pointer: fine)").matches) {
-        textareaRef.current.focus();
-      }
+    // Only auto-focus on devices with precise pointing (desktop)
+    if (textareaRef.current && window.matchMedia("(pointer: fine)").matches) {
+      textareaRef.current.focus();
     }
-  }, [selectedText]);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally reset when selection changes
-  useEffect(() => {
-    setCommentText("");
-  }, [selectedText]);
+  }, []);
 
   const handleSubmit = () => {
     onSubmit(commentText.trim());
@@ -76,7 +71,7 @@ export function CommentInput({
         ref={textareaRef}
         value={commentText}
         onChange={(e) => setCommentText(e.target.value)}
-        placeholder="Add your comment..."
+        placeholder={t("comment.placeholder")}
         className={cn(
           fontClass,
           "w-full px-2 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800 resize-none focus:outline-none focus:border-zinc-400 dark:focus:border-zinc-500",
@@ -91,8 +86,8 @@ export function CommentInput({
             size="icon"
             className="size-7 text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400"
             onClick={onCopyRaw}
-            title="Copy raw text (⌘C)"
-            aria-label="Copy raw text"
+            title={t("comment.copyRawTitle")}
+            aria-label={t("comment.copyRawLabel")}
           >
             <Copy size={14} />
           </Button>
@@ -101,17 +96,17 @@ export function CommentInput({
             size="icon"
             className="size-7 text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400"
             onClick={onCopyForLLM}
-            title="Copy with context for LLM (⌘⇧C)"
-            aria-label="Copy for LLM"
+            title={t("comment.copyLLMTitle")}
+            aria-label={t("comment.copyLLMLabel")}
           >
             <BotMessageSquare size={14} />
           </Button>
         </div>
         <Button variant="ghost" size="sm" onClick={onCancel}>
-          Cancel
+          {t("comment.cancel")}
         </Button>
         <Button variant="link" size="sm" onClick={handleSubmit} title="⌘↵">
-          {commentText.trim() ? "Add Note" : "Highlight"}
+          {commentText.trim() ? t("comment.addNote") : t("comment.highlight")}
         </Button>
       </div>
     </div>

package/src/components/comments/CommentListItem.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 type { Comment } from "../../types";
 import { InlineEditor } from "../InlineEditor";
@@ -14,6 +15,7 @@ interface CommentListItemProps {
 }
 
 export function CommentListItem({ comment, onAction }: CommentListItemProps) {
+  const { t } = useLocale();
   const { editComment, deleteComment, navigateToComment, startReanchor } =
     useCommentContext();
 
@@ -45,7 +47,7 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
         </Text>
         {isUnresolved && (
           <Text variant="caption" asChild>
-            <span className="shrink-0">· unresolved</span>
+            <span className="shrink-0">· {t("commentList.unresolved")}</span>
           </Text>
         )}
       </div>
@@ -66,13 +68,21 @@ export function CommentListItem({ comment, onAction }: CommentListItemProps) {
           </Text>
 
           <ActionBar className="gap-3 mt-1.5">
-            <ActionLink onClick={() => setIsEditing(true)}>Edit</ActionLink>
+            <ActionLink onClick={() => setIsEditing(true)}>
+              {t("commentList.edit")}
+            </ActionLink>
             <ActionLink onClick={() => deleteComment(comment.id)}>
-              Delete
+              {t("commentList.delete")}
             </ActionLink>
-            {canGoTo && <ActionLink onClick={handleGoTo}>Go to</ActionLink>}
+            {canGoTo && (
+              <ActionLink onClick={handleGoTo}>
+                {t("commentList.goTo")}
+              </ActionLink>
+            )}
             {isUnresolved && (
-              <ActionLink onClick={handleReanchor}>Re-anchor</ActionLink>
+              <ActionLink onClick={handleReanchor}>
+                {t("commentList.reanchor")}
+              </ActionLink>
             )}
           </ActionBar>
         </>

package/src/components/comments/CommentManager.tsx

@@ -1,6 +1,7 @@
 import { Copy, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { useCommentContext } from "../../contexts/CommentContext";
+import { useLocale } from "../../contexts/LocaleContext";
 import { Button } from "../ui/Button";
 import { Text } from "../ui/Text";
 import { CommentListItem } from "./CommentListItem";
@@ -10,6 +11,7 @@ interface CommentManagerProps {
 }
 
 export function CommentManager({ onClose }: CommentManagerProps) {
+  const { t } = useLocale();
   const { comments, copyAllForLLM, deleteAll } = useCommentContext();
   const [confirmingDelete, setConfirmingDelete] = useState(false);
 
@@ -31,7 +33,7 @@ export function CommentManager({ onClose }: CommentManagerProps) {
       {confirmingDelete ? (
         <div className="px-3 py-2 border-b border-zinc-100">
           <Text variant="caption" className="mb-1.5">
-            Delete all {comments.length} comments?
+            {t("commentManager.deleteAllConfirm", { count: comments.length })}
           </Text>
           <div className="flex gap-3">
             <Button
@@ -43,7 +45,7 @@ export function CommentManager({ onClose }: CommentManagerProps) {
                 onClose();
               }}
             >
-              Delete
+              {t("commentManager.delete")}
             </Button>
             <Button
               variant="ghost"
@@ -51,7 +53,7 @@ export function CommentManager({ onClose }: CommentManagerProps) {
               className="h-auto p-0 text-xs"
               onClick={() => setConfirmingDelete(false)}
             >
-              Cancel
+              {t("commentManager.cancel")}
             </Button>
           </div>
         </div>
@@ -61,7 +63,10 @@ export function CommentManager({ onClose }: CommentManagerProps) {
             <span>
               {resolvedCount}
               {unresolvedCount > 0 && (
-                <span> · {unresolvedCount} unresolved</span>
+                <span>
+                  {" "}
+                  · {unresolvedCount} {t("commentManager.unresolved")}
+                </span>
               )}
             </span>
             <span className="flex items-center gap-1">
@@ -69,7 +74,7 @@ export function CommentManager({ onClose }: CommentManagerProps) {
                 type="button"
                 className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-zinc-600 transition-colors"
                 onClick={copyAllForLLM}
-                title="Copy all comments"
+                title={t("commentManager.copyAllTitle")}
               >
                 <Copy size={13} />
               </button>
@@ -77,7 +82,7 @@ export function CommentManager({ onClose }: CommentManagerProps) {
                 type="button"
                 className="p-1 rounded hover:bg-zinc-100 text-zinc-400 hover:text-red-500 transition-colors"
                 onClick={() => setConfirmingDelete(true)}
-                title="Delete all comments"
+                title={t("commentManager.deleteAllTitle")}
               >
                 <Trash2 size={13} />
               </button>
@@ -89,7 +94,9 @@ export function CommentManager({ onClose }: CommentManagerProps) {
       <div className="overflow-y-auto max-h-80">
         {sortedComments.length === 0 ? (
           <Text variant="caption" asChild>
-            <div className="px-3 py-4 text-center">No comments yet</div>
+            <div className="px-3 py-4 text-center">
+              {t("commentManager.noComments")}
+            </div>
           </Text>
         ) : (
           sortedComments.map((comment) => (

package/src/components/comments/CommentNav.tsx

@@ -1,6 +1,7 @@
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useCommentContext } from "../../contexts/CommentContext";
+import { useLocale } from "../../contexts/LocaleContext";
 import { cn } from "../../lib/utils";
 import { Button } from "../ui/Button";
 import { Text } from "../ui/Text";
@@ -8,6 +9,7 @@ import { Text } from "../ui/Text";
 const ANIMATION_DURATION_MS = 200;
 
 export function CommentNav() {
+  const { t } = useLocale();
   const { currentIndex, sortedComments, navigatePrevious, navigateNext } =
     useCommentContext();
   const totalComments = sortedComments.length;
@@ -67,7 +69,7 @@ export function CommentNav() {
               "scale-90 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300",
           )}
           onClick={handlePrevious}
-          title="Previous comment (Alt+↑)"
+          title={t("commentNav.previous")}
         >
           <ChevronLeft className="w-4 h-4" />
         </Button>
@@ -81,7 +83,10 @@ export function CommentNav() {
               animating === "next" && "translate-x-0.5",
             )}
           >
-            {currentIndex + 1} of {totalComments}
+            {t("commentNav.of", {
+              current: currentIndex + 1,
+              total: totalComments,
+            })}
           </span>
         </Text>
 
@@ -94,7 +99,7 @@ export function CommentNav() {
               "scale-90 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300",
           )}
           onClick={handleNext}
-          title="Next comment (Alt+↓)"
+          title={t("commentNav.next")}
         >
           <ChevronRight className="w-4 h-4" />
         </Button>