update search results

src/components/TopBar/Settings.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { activeNotesSource, notesSources } from '@/composables/useNotes'
+import { signOut as firebaseSignOut } from '@/composables/useFirebase'
+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()
+  close()
+}
+
+const handleClick = (fn: (...args: any[]) => any) => {
+  ;(document.activeElement as HTMLElement)?.blur()
+  fn()
+}
+</script>
+<template>
+  <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" />
+    </label>
+    <ul
+      tabindex="0"
+      class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
+    >
+      <li
+        class="text-base"
+        v-for="{ source, label } in availableNoteSources"
+        :key="source"
+        @click="handleClick(() => (activeNotesSource = source))"
+      >
+        <a>
+          <i class="fa-fw fa-solid fa-database" />
+          {{ label }}
+        </a>
+      </li>
+      <Modal>
+        <template #activator="{ open }">
+          <li @click="open" class="text-base">
+            <a>
+              <i class="fa-fw fa-solid fa-right-from-bracket" />
+              Sign out
+            </a>
+          </li>
+        </template>
+        <template #title>Sign out</template>
+        <template #default>
+          <p>Are you sure want to signout?</p>
+          <p>Your synchronized notes can't be accessed until you sign-in again.</p>
+        </template>
+        <template #actions="{ close }">
+          <button class="btn-sm btn" @click="close">Cancel</button>
+          <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
+        </template>
+      </Modal>
+    </ul>
+  </div>
+</template>