update search results

src/components/TopBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
-import { user, signOut as firebaseSignOut } from '@/composables/useFirebase'
+import { user } from '@/composables/useFirebase'
 import { initialized } from '@/composables/useFirebase'
 
 const loading = inject<boolean>('loading')
@@ -15,11 +15,6 @@ const emit = defineEmits<{
 
 const searchActive = ref<boolean>(false)
 
-const signOut = async (close: () => Promise<boolean>) => {
-  await firebaseSignOut()
-  close()
-}
-
 const authUI: any = inject('firebaseAuthUI')
 const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
 </script>
@@ -69,37 +64,7 @@ const authModalInitialStateOpen = ref<boolean>(authUI.isPendingRedirect())
               <button class="btn-sm btn" @click="close">Close</button>
             </template>
           </Modal>
-          <template v-else-if="user">
-            <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"
-              >
-                <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>
+          <Settings v-else-if="user" />
         </template>
         <SkeletonTopBar v-else />
       </div>