feat: add saving state and error handling to NoteWidget, update localization for save messages

Author: PythonSmall-Q

src/i18n/locales/en/widgets.json

@@ -116,6 +116,8 @@
     "untitled": "Untitled note",
     "savedAt": "Saved at",
     "unsaved": "Unsaved changes",
+    "saving": "Saving...",
+    "saveFailed": "Could not save changes",
     "recovered": "Notes restored from backup",
     "restore": "Restore from backup"
   },

src/i18n/locales/zh-CN/widgets.json

@@ -116,6 +116,8 @@
     "untitled": "未命名便签",
     "savedAt": "已保存于",
     "unsaved": "未保存的更改",
+    "saving": "保存中...",
+    "saveFailed": "保存失败",
     "recovered": "已从备份恢复便签",
     "restore": "从备份恢复"
   },

src/i18n/locales/zh-TW/widgets.json

@@ -116,6 +116,8 @@
     "untitled": "未命名便箋",
     "savedAt": "儲存於",
     "unsaved": "有未儲存的變更",
+    "saving": "儲存中...",
+    "saveFailed": "無法儲存變更",
     "recovered": "便箋已從備份還原",
     "restore": "從備份還原"
   },

src/widgets/NoteWidget.tsx

@@ -57,6 +57,7 @@ export default function NoteWidget({ widgetId }: Props) {
   const [selectedId, setSelectedId] = useState<string>("");
   const [draft, setDraft] = useState<string>("");
   const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
+  const [saveState, setSaveState] = useState<"idle" | "saving" | "error">("idle");
   const [showRecovered, setShowRecovered] = useState(false);
   const [autoBlur, setAutoBlur] = useState(() => {
     try {
@@ -160,8 +161,9 @@ export default function NoteWidget({ widgetId }: Props) {
         client.setState(BACKUP_KEY, serializeNotes(nextNotes)),
       ]);
       setLastSavedAt(new Date());
+      return true;
     } catch {
-      // Keep local state even if gateway write fails.
+      return false;
     }
   }, [client]);
 
@@ -250,12 +252,14 @@ export default function NoteWidget({ widgetId }: Props) {
 
   const saveCurrent = async () => {
     if (!selectedNote) return;
+    setSaveState("saving");
     const next = notes.map((n) =>
       n.id === selectedNote.id
         ? { ...n, content: draft, updatedAt: new Date().toISOString() }
         : n
     );
-    await persist(next);
+    const saved = await persist(next);
+    setSaveState(saved ? "idle" : "error");
   };
 
   const deleteCurrent = async () => {
@@ -387,22 +391,32 @@ export default function NoteWidget({ widgetId }: Props) {
             <>
               <textarea
                 value={draft}
-                onChange={(e) => setDraft(e.target.value)}
+                onChange={(e) => {
+                  setDraft(e.target.value);
+                  setLastSavedAt(null);
+                  setSaveState("idle");
+                }}
                 placeholder={t("note.placeholder")}
                 className="ui-field flex-1 min-h-0 resize-none leading-relaxed"
               />
               <div className="flex justify-between items-center">
-                <span className={clsx("text-[11px] transition-colors", lastSavedAt ? "text-accent-green" : "text-text-muted")}>
-                  {lastSavedAt
+                <span className={clsx(
+                  "text-[11px] transition-colors",
+                  saveState === "error" ? "text-accent-red" : lastSavedAt ? "text-accent-green" : "text-text-muted"
+                )}>
+                  {saveState === "error"
+                    ? t("note.saveFailed")
+                    : lastSavedAt
                     ? `${t("note.savedAt")} ${lastSavedAt.toLocaleTimeString()}`
                     : t("note.unsaved")}
                 </span>
                 <button
                   onClick={() => void saveCurrent()}
+                  disabled={saveState === "saving"}
                   className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-lg border border-accent-blue/50 text-accent-blue hover:bg-accent-blue/10 transition-colors"
                 >
                   <Save size={12} />
-                  {t("note.save")}
+                  {saveState === "saving" ? t("note.saving") : t("note.save")}
                 </button>
               </div>
             </>

src/widgets/__tests__/NoteWidget.test.tsx

@@ -71,6 +71,26 @@ describe("NoteWidget", () => {
     window.removeEventListener("timelens-widget-auto-blur-changed", onAutoBlurChanged);
   });
 
+  it("saves edited note content when Save is clicked", async () => {
+    const notes = JSON.stringify([
+      { id: "n1", content: "First note", updatedAt: new Date().toISOString() },
+    ]);
+    mockGatewayState({ notes, notes_backup: notes });
+    renderWithProviders(<NoteWidget widgetId="note-test" />);
+
+    const editor = await screen.findByRole("textbox");
+    await userEvent.type(editor, " updated");
+    await userEvent.click(screen.getByRole("button", { name: "Save" }));
+
+    await waitFor(() => {
+      const writeCalls = mockTauriApi.widgetGatewayRequest.mock.calls.filter(
+        (call) => call[0].request_type === "state_write"
+      );
+      expect(writeCalls).toHaveLength(2);
+    });
+    expect(screen.getByText(/^Saved at/)).toBeInTheDocument();
+  });
+
   it("deletes the current note", async () => {
     const notes = JSON.stringify([
       { id: "n1", content: "First note", updatedAt: new Date().toISOString() },