feat(notes): toggle one font picker between heading and paragraph

Replace the two side-by-side font dropdowns with a single picker plus a
small h/p switch that flips which font it edits, keeping the modal compact.

src/components/FontChange.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, ref } from "vue"
 
 import ThemeSwap from "@/components/ThemeSwap.vue"
 
@@ -32,13 +32,15 @@ const sortedFontFamilies = computed(() => {
 })
 const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
 
-const headingFont = computed({
+// false → the dropdown edits the heading font, true → the paragraph font.
-  get: () => store.userSettings?.chosenHeadingFont,
+const editingBody = ref(false)
-  set: (value) => store.setHeadingFont(value!)
+const activeFont = computed({
-})
+  get: () =>
-const bodyFont = computed({
+    editingBody.value
-  get: () => store.userSettings?.chosenBodyFont,
+      ? store.userSettings?.chosenBodyFont
-  set: (value) => store.setBodyFont(value!)
+      : store.userSettings?.chosenHeadingFont,
+  set: (value) =>
+    editingBody.value ? store.setBodyFont(value!) : store.setHeadingFont(value!)
 })
 const fontSize = computed({
   get: () => store.userSettings?.chosenFontSize,
@@ -49,15 +51,22 @@ const fontSize = computed({
 <template>
   <div class="font-change">
     <div>
-      <label for="heading-font" class="font-label">h</label>
+      <label class="font-toggle">
-      <select id="heading-font" class="select" v-model="headingFont">
+        <span class="font-label" :class="{ active: !editingBody }">h</span>
-        <option v-for="font in sortedFontFamilies" :key="font" :value="font">
+        <input
-          {{ font }}
+          type="checkbox"
-        </option>
+          class="toggle toggle-sm"
-      </select>
+          v-model="editingBody"
-
+          aria-label="Switch between heading and paragraph font"
-      <label for="body-font" class="font-label">p</label>
+        />
-      <select id="body-font" class="select" v-model="bodyFont">
+        <span class="font-label" :class="{ active: editingBody }">p</span>
+      </label>
+      <select
+        id="font-target"
+        class="select"
+        v-model="activeFont"
+        :aria-label="editingBody ? 'Paragraph font' : 'Heading font'"
+      >
         <option v-for="font in sortedFontFamilies" :key="font" :value="font">
           {{ font }}
         </option>
@@ -92,6 +101,17 @@ const fontSize = computed({
   }
 }
 
+.font-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  .font-label.active {
+    opacity: 1;
+  }
+}
+
 .font-label {
   font-weight: bold;
   font-size: 0.75rem;