settings modal

src/components/TopBar/Settings/NotesSourceSwitcher.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { activeNotesSource, availableNotesSources } from '@/composables/useNotes'
+import { preferredNotesSource } from '@/composables/useSettings'
+
+const sourceLabels: { [source: string]: string } = {
+  local: 'Switch to local notes',
+  firebase: 'Switch to cloud notes'
+}
+
+const blur = () => (document.activeElement as HTMLElement)?.blur()
+
+const handleClick = (fn: (...args: any[]) => any) => {
+  blur()
+  fn()
+}
+</script>
+<template>
+  <UIDropdownItem
+    v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
+    :key="source"
+    @click="handleClick(() => (preferredNotesSource = source))"
+  >
+    <i class="fa-fw fa-solid fa-database" />
+    {{ sourceLabels[source] }}
+  </UIDropdownItem>
+</template>