fix: notes localization

Author: nchopra

apps/desktop/src/i18n/locales/en.json

@@ -356,6 +356,7 @@
       "brand": "Amical"
     },
     "search": {
+      "buttonLabel": "Search",
       "buttonPlaceholder": "Search...",
       "inputPlaceholder": "Search settings and notes...",
       "noResults": "No results found.",
@@ -385,6 +386,10 @@
         "label": "Mute system audio during recording",
         "description": "Silence system output while capturing microphone audio"
       },
+      "autoDictateOnNewNote": {
+        "label": "Auto-dictate on new note",
+        "description": "Automatically start dictation when creating a new note"
+      },
       "language": {
         "label": "Language",
         "description": "Choose the language used throughout the app",
@@ -641,6 +646,7 @@
     },
     "notes": {
       "create": "Create note",
+      "defaultTitleWithDate": "Note - {{date}}",
       "untitledTitle": "Untitled Note",
       "empty": {
         "title": "No notes yet",
@@ -656,6 +662,7 @@
         "deleted": "Note deleted",
         "deleteFailed": "Failed to delete note: {{message}}",
         "saveFailed": "Failed to save changes",
+        "upgradedToRichNotes": "Your notes have been upgraded to rich notes with markdown formatting.",
         "loadFailed": "Failed to load note"
       },
       "note": {

apps/desktop/src/lib/utils.ts

@@ -7,16 +7,27 @@ export function cn(...inputs: ClassValue[]) {
 
 export function formatDate(date: Date): string {
   const now = new Date();
-  const diffInDays = Math.floor(
-    (now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24),
+  const resolvedLocale =
+    typeof navigator !== "undefined"
+      ? navigator.language
+      : Intl.DateTimeFormat().resolvedOptions().locale;
+
+  const rtf = new Intl.RelativeTimeFormat(resolvedLocale, { numeric: "auto" });
+
+  const startOfToday = new Date(now);
+  startOfToday.setHours(0, 0, 0, 0);
+  const startOfDate = new Date(date);
+  startOfDate.setHours(0, 0, 0, 0);
+  const diffInDays = Math.round(
+    (startOfToday.getTime() - startOfDate.getTime()) / (1000 * 60 * 60 * 24),
   );
 
-  if (diffInDays === 0) return "Today";
-  if (diffInDays === 1) return "Yesterday";
+  if (diffInDays === 0) return rtf.format(0, "day");
+  if (diffInDays === 1) return rtf.format(-1, "day");
 
-  return date.toLocaleDateString("en-US", {
+  return new Intl.DateTimeFormat(resolvedLocale, {
     month: "short",
     day: "numeric",
     year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
-  });
+  }).format(date);
 }

apps/desktop/src/renderer/main/components/command-search-button.tsx

@@ -94,7 +94,7 @@ export function CommandSearchButton() {
     <>
       <SidebarMenuButton onClick={() => setOpen(true)}>
         <IconSearch />
-        <span>Search</span>
+        <span>{t("settings.search.buttonLabel")}</span>
         <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground ml-auto">
           {shortcutDisplay}
         </kbd>

apps/desktop/src/renderer/main/components/create-note-button.tsx

@@ -4,8 +4,10 @@ import { useNavigate } from "@tanstack/react-router";
 import { SidebarMenuButton } from "@/components/ui/sidebar";
 import { api } from "@/trpc/react";
 import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
 
 export function CreateNoteButton() {
+  const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const utils = api.useUtils();
   const preferencesQuery = api.settings.getPreferences.useQuery();
@@ -31,21 +33,23 @@ export function CreateNoteButton() {
       });
     },
     onError: (error) => {
-      toast.error("Failed to create note: " + error.message);
+      toast.error(
+        t("settings.notes.toast.createFailed", { message: error.message }),
+      );
     },
   });
 
   const onCreateNote = useCallback(() => {
     if (createNoteMutation.isPending) return;
-    const dateStr = new Date().toLocaleDateString("en-GB", {
+    const dateStr = new Date().toLocaleDateString(i18n.language, {
       day: "numeric",
       month: "short",
     });
     createNoteMutation.mutate({
-      title: `Note - ${dateStr}`,
+      title: t("settings.notes.defaultTitleWithDate", { date: dateStr }),
       initialContent: "",
     });
-  }, [createNoteMutation]);
+  }, [createNoteMutation, i18n.language, t]);
 
   // Keyboard shortcut: Cmd+N (Mac) / Ctrl+N (Windows/Linux)
   useEffect(() => {
@@ -69,7 +73,7 @@ export function CreateNoteButton() {
       disabled={createNoteMutation.isPending}
     >
       <Plus />
-      <span>New Note</span>
+      <span>{t("settings.notes.create")}</span>
       <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground ml-auto">
         {shortcutDisplay}
       </kbd>

apps/desktop/src/renderer/main/components/editor/yjs-sync-plugin.tsx

@@ -4,6 +4,7 @@ import { $createParagraphNode, $createTextNode, $getRoot } from "lexical";
 import type * as Y from "yjs";
 import { toast } from "sonner";
 import { debounce } from "@/renderer/main/utils/debounce";
+import { useTranslation } from "react-i18next";
 
 interface YjsSyncPluginProps {
   yText: Y.Text;
@@ -14,6 +15,7 @@ export function YjsSyncPlugin({
   yText,
   onSyncStatusChange,
 }: YjsSyncPluginProps): null {
+  const { t } = useTranslation();
   const [editor] = useLexicalComposerContext();
   const isUpdatingFromYjsRef = useRef(false);
   const isUpdatingFromLexicalRef = useRef(false);
@@ -105,7 +107,7 @@ export function YjsSyncPlugin({
       }
 
       toast.success(
-        "Your notes have been upgraded to rich notes with markdown formatting.",
+        t("settings.notes.toast.upgradedToRichNotes"),
       );
 
       isMigratingRef.current = false;

apps/desktop/src/renderer/main/pages/notes/components/note-editor.tsx

@@ -27,6 +27,8 @@ import { NoteSyncProvider } from "@/renderer/main/providers/sync-provider";
 import { YjsSyncPlugin } from "@/renderer/main/components/editor/yjs-sync-plugin";
 import { CodeBlockShortcutPlugin } from "@/renderer/main/components/editor/code-block-plugin";
 import { ChecklistShortcutPlugin } from "@/renderer/main/components/editor/checklist-shortcut-plugin";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
 
 interface NoteEditorProps {
   noteId: number;
@@ -175,13 +177,17 @@ export function NoteEditor({
   onSyncStatusChange,
   onReady,
 }: NoteEditorProps): React.ReactNode {
+  const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(true);
   const [syncProvider, setSyncProvider] = useState<NoteSyncProvider | null>(
     null,
   );
   const providerRef = useRef<NoteSyncProvider | null>(null);
   const destroyQueueRef = useRef<Array<NoteSyncProvider>>([]);
   const onReadyCalledRef = useRef(false);
+  const onSaveErrorRef = useRef(() =>
+    toast.error(t("settings.notes.toast.saveFailed")),
+  );
 
   // Handle sync status changes and propagate to parent
   const handleSyncStatusChange = useCallback(
@@ -196,6 +202,11 @@ export function NoteEditor({
     onReadyCalledRef.current = false;
   }, [noteId]);
 
+  useEffect(() => {
+    onSaveErrorRef.current = () =>
+      toast.error(t("settings.notes.toast.saveFailed"));
+  }, [t]);
+
   // Notify parent when editor is ready
   useEffect(() => {
     if (!isLoading && syncProvider && !onReadyCalledRef.current) {
@@ -236,6 +247,7 @@ export function NoteEditor({
 
       const provider = new NoteSyncProvider({
         noteId,
+        onSaveError: () => onSaveErrorRef.current(),
       });
 
       providerRef.current = provider;
@@ -299,10 +311,10 @@ export function NoteEditor({
           contentEditable={
             <ContentEditable
               className="min-h-[500px] px-4 py-2 outline-none text-base leading-relaxed"
-              aria-placeholder="Start writing your note..."
+              aria-placeholder={t("settings.notes.note.bodyPlaceholder")}
               placeholder={
                 <div className="absolute top-2 left-4 text-muted-foreground pointer-events-none">
-                  Start writing your note...
+                  {t("settings.notes.note.bodyPlaceholder")}
                 </div>
               }
             />

apps/desktop/src/renderer/main/pages/notes/components/note.tsx

@@ -78,44 +78,40 @@ export type NotePageUIProps = {
   children?: React.ReactNode;
 };
 
-function formatRelativeTime(date: Date): string {
+function formatRelativeTime(date: Date, locale: string): string {
   const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / (1000 * 60));
-  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
 
-  // Less than 1 minute
-  if (diffMins < 1) {
-    return "now";
+  if (diffSeconds < 60) {
+    return rtf.format(0, "second");
   }
 
-  // Less than 1 hour
+  const diffMins = Math.floor(diffSeconds / 60);
   if (diffMins < 60) {
-    return `${diffMins} min${diffMins === 1 ? "" : "s"} ago`;
+    return rtf.format(-diffMins, "minute");
   }
 
-  // Less than 24 hours
+  const diffHours = Math.floor(diffMins / 60);
   if (diffHours < 24) {
-    return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+    return rtf.format(-diffHours, "hour");
   }
 
-  // Check if yesterday
   const yesterday = new Date(now);
   yesterday.setDate(yesterday.getDate() - 1);
   if (
     date.getDate() === yesterday.getDate() &&
     date.getMonth() === yesterday.getMonth() &&
     date.getFullYear() === yesterday.getFullYear()
   ) {
-    return "yesterday";
+    return rtf.format(-1, "day");
   }
 
-  // Older than yesterday - show date
-  return date.toLocaleDateString("en-GB", {
+  return new Intl.DateTimeFormat(locale, {
     day: "numeric",
     month: "short",
     year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
-  });
+  }).format(date);
 }
 
 export default function Note({
@@ -130,7 +126,7 @@ export default function Note({
   isDeleting = false,
   children,
 }: NotePageUIProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   // Local UI state
   const [shareEmail, setShareEmail] = useState("");
   const [accessLevel, setAccessLevel] = useState("can-read");
@@ -301,6 +297,7 @@ export default function Note({
                     localEditTime && localEditTime > lastEditDate
                       ? localEditTime
                       : lastEditDate,
+                    i18n.language,
                   ),
                 })}
               </span>

apps/desktop/src/renderer/main/pages/notes/components/notes-list.tsx

@@ -3,8 +3,10 @@ import { NoteCard } from "./note-card";
 import { api } from "@/trpc/react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
 
 export function NotesList() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
   const { data: notes, isLoading } = api.notes.getNotes.useQuery({
@@ -28,7 +30,7 @@ export function NotesList() {
     return (
       <div className="container mx-auto p-6 max-w-5xl">
         <div className="mb-8">
-          <h1 className="text-xl font-bold">Notes</h1>
+          <h1 className="text-xl font-bold">{t("settings.nav.notes.title")}</h1>
         </div>
         <div className="space-y-2">
           {[1, 2, 3].map((i) => (
@@ -49,7 +51,7 @@ export function NotesList() {
     <div className="container mx-auto p-6 max-w-5xl">
       {/* Header Section */}
       <div className="mb-8">
-        <h1 className="text-xl font-bold">Notes</h1>
+        <h1 className="text-xl font-bold">{t("settings.nav.notes.title")}</h1>
       </div>
 
       {formattedNotes.length > 0 && (
@@ -64,9 +66,11 @@ export function NotesList() {
         <div className="border border-dashed rounded-lg p-6 text-center space-y-4">
           <NotebookText className="w-8 h-8 text-muted-foreground mx-auto" />
           <div className="space-y-2">
-            <p className="text-sm text-muted-foreground">No notes yet</p>
+            <p className="text-sm text-muted-foreground">
+              {t("settings.notes.empty.title")}
+            </p>
             <p className="text-xs text-muted-foreground">
-              Click "New Note" in the sidebar to create your first note
+              {t("settings.notes.empty.description")}
             </p>
           </div>
         </div>

apps/desktop/src/renderer/main/pages/settings/preferences/index.tsx

@@ -245,10 +245,10 @@ export default function PreferencesSettingsPage() {
             <div className="flex items-center justify-between">
               <div className="space-y-1">
                 <Label className="text-base font-medium text-foreground">
-                  Auto-dictate on new note
+                  {t("settings.preferences.autoDictateOnNewNote.label")}
                 </Label>
                 <p className="text-xs text-muted-foreground">
-                  Automatically start dictation when creating a new note
+                  {t("settings.preferences.autoDictateOnNewNote.description")}
                 </p>
               </div>
               <Switch

apps/desktop/src/renderer/main/providers/sync-provider.ts

@@ -3,18 +3,21 @@ import { toast } from "sonner";
 
 export interface SyncProviderConfig {
   noteId: number;
+  onSaveError?: () => void;
 }
 
 export class NoteSyncProvider {
   private ydoc: Y.Doc;
   private text: Y.Text;
   private noteId: number;
+  private onSaveError: (() => void) | undefined;
   private destroyed = false;
   private updateHandler: ((update: Uint8Array, origin: unknown) => void) | null =
     null;
 
   constructor(config: SyncProviderConfig) {
     this.noteId = config.noteId;
+    this.onSaveError = config.onSaveError;
 
     // Initialize Y.Doc and Y.Text
     this.ydoc = new Y.Doc();
@@ -44,7 +47,11 @@ export class NoteSyncProvider {
       } catch (error) {
         if (!this.destroyed) {
           console.error("Failed to save yjs update:", error);
-          toast.error("Failed to save changes");
+          if (this.onSaveError) {
+            this.onSaveError();
+          } else {
+            toast.error("Failed to save changes");
+          }
         }
       }
     };