settings modal

src/components/TopBar/Settings.vue

@@ -1,61 +1,23 @@
 <script setup lang="ts">
-import { activeNotesSource, availableNotesSources } from '@/composables/useNotes'
-import { signOut as firebaseSignOut } from '@/composables/useFirebase'
 import { OnClickOutside } from '@vueuse/components'
-import { preferredNotesSource } from '@/composables/useSettings'
-
-const sourceLabels: { [source: string]: string } = {
-  local: 'Switch to local notes',
-  firebase: 'Switch to cloud notes'
-}
-
-const signOut = async (close: () => Promise<boolean>) => {
-  await firebaseSignOut()
-  preferredNotesSource.value = null
-  close()
-}
-
-const blur = () => (document.activeElement as HTMLElement)?.blur()
-
-const handleClick = (fn: (...args: any[]) => any) => {
-  blur()
-  fn()
-}
 </script>
 <template>
   <OnClickOutside>
     <UIDropdown class="search-active-hide">
       <template #activator>
-        <UIButton :dropdown="true" size="sm" variant="outline" class="py-1 text-white topbar-button">
+        <UIButton
+          :dropdown="true"
+          size="sm"
+          variant="outline"
+          class="topbar-button py-1 text-white"
+        >
           <i class="fa-fw fa-solid fa-user-gear" />
         </UIButton>
       </template>
       <template #items>
-        <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>
-        <UIModal>
-          <template #activator="{ open }">
-            <UIDropdownItem @click="open">
-              <i class="fa-fw fa-solid fa-right-from-bracket" />
-              Sign out
-            </UIDropdownItem>
-          </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 }">
-            <UIButton size="sm" @click="close">Cancel</UIButton>
-            <UIButton size="sm" color="primary" @click="signOut(close)">Sign out</UIButton>
-          </template>
-        </UIModal>
+        <NotesSourceSwitcher />
+        <AccountSettings />
+        <SignOut />
       </template>
     </UIDropdown>
   </OnClickOutside>