fix click outside

src/components/TopBar/Settings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { activeNotesSource, notesSources } from '@/composables/useNotes'
+import { activeNotesSource, availableNotesSources } from '@/composables/useNotes'
 import { signOut as firebaseSignOut } from '@/composables/useFirebase'
 import { OnClickOutside } from '@vueuse/components'
 import { preferredNotesSource } from '@/composables/useSettings'
@@ -8,14 +8,6 @@ const sourceLabels: { [source: string]: string } = {
   local: 'Switch to local notes',
   firebase: 'Switch to cloud notes'
 }
-const availableNoteSources = computed(() =>
-  Object.entries(notesSources.value)
-    .filter(([source, enabled]) => enabled && source !== activeNotesSource.value)
-    .map(([source]) => ({
-      source: source as keyof typeof notesSources.value,
-      label: sourceLabels[source]
-    }))
-)
 
 const signOut = async (close: () => Promise<boolean>) => {
   await firebaseSignOut()
@@ -31,7 +23,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
 }
 </script>
 <template>
-  <OnClickOutside @trigger="blur">
+  <OnClickOutside>
     <div class="search-active-hide dropdown-end dropdown">
       <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
         <i class="fa-fw fa-solid fa-user-gear" />
@@ -42,13 +34,15 @@ const handleClick = (fn: (...args: any[]) => any) => {
       >
         <li
           class="text-base"
-          v-for="{ source, label } in availableNoteSources"
+          v-for="source in availableNotesSources.filter(
+            (source) => source !== activeNotesSource
+          )"
           :key="source"
           @click="handleClick(() => (preferredNotesSource = source))"
         >
           <a>
             <i class="fa-fw fa-solid fa-database" />
-            {{ label }}
+            {{ sourceLabels[source] }}
           </a>
         </li>
         <Modal>

src/composables/useNotes.ts

@@ -14,18 +14,18 @@ export const notesSources = computed(() => ({
   firebase: initialized.value && user.value
 }))
 
-export const availableNotesSources = computed(() =>
+export const availableNotesSources = computed<notesSourceValues[]>(() =>
   Object.entries(notesSources.value)
     .filter(([, enabled]) => enabled)
-    .map(([source]) => source)
+    .map(([source]) => source as notesSourceValues)
 )
 
-export type notesSourceValues = keyof typeof notesSources.value | null
+export type notesSourceValues = keyof typeof notesSources.value
 
-export const activeNotesSource = ref<notesSourceValues>(null)
+export const activeNotesSource = ref<notesSourceValues | null>(null)
 
 watchEffect(() => {
-  const getSource = (): notesSourceValues => {
+  const getSource = (): notesSourceValues | null => {
     if (!initialized.value) return null
     if (
       preferredNotesSource.value &&

src/composables/useSettings.ts

@@ -1,10 +1,10 @@
 import type { notesSourceValues } from '@/composables/useNotes'
 
 interface Settings {
-  preferredNotesSource: notesSourceValues
+  preferredNotesSource: notesSourceValues | null
 }
 
-export const preferredNotesSource = ref<notesSourceValues>(null)
+export const preferredNotesSource = ref<notesSourceValues | null>(null)
 
 const updateSettings = () => {
   const settings: Settings = {