feat(notes): swap heading and paragraph fonts with a button

Replace the heading/paragraph toggle with the intended UX: keep both font
dropdowns visible and add a button that exchanges the two fonts via a new
swapFonts store action.

src/modules/repo/store/userRepo.store.spec.ts

@@ -147,6 +147,24 @@ describe("userRepo store — synchronous mutations", () => {
     expect(persisted.chosenHeadingFont).toBe("Serif")
     expect(persisted.chosenBodyFont).toBe("Sans")
   })
+
+  it("swapFonts exchanges the heading and body fonts and persists", () => {
+    const store = useUserRepoStore()
+    store.user = "alice"
+    store.repo = "notes"
+    store.setHeadingFont("Lora")
+    store.setBodyFont("Inter")
+
+    store.swapFonts()
+
+    expect(store.userSettings?.chosenHeadingFont).toBe("Inter")
+    expect(store.userSettings?.chosenBodyFont).toBe("Lora")
+    const persisted = JSON.parse(
+      localStorage.getItem("remanso:layout:alice:notes") as string
+    )
+    expect(persisted.chosenHeadingFont).toBe("Inter")
+    expect(persisted.chosenBodyFont).toBe("Lora")
+  })
 })
 
 describe("userRepo store — setUserRepo", () => {

src/modules/repo/store/userRepo.store.ts

@@ -317,6 +317,13 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
       }
       this.userSettings.chosenBodyFont = font
       this._persistLayout()
+    },
+    swapFonts() {
+      if (!this.userSettings) return
+      const { chosenHeadingFont, chosenBodyFont } = this.userSettings
+      this.userSettings.chosenHeadingFont = chosenBodyFont
+      this.userSettings.chosenBodyFont = chosenHeadingFont
+      this._persistLayout()
     }
   }
 })