From 39e200f6397ffe2884a209a57ffd1f0e466b7b67 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 27 Nov 2022 11:34:55 +0800
Subject: [PATCH] refactor: use dropdown instead of drawer for user switch

---
 components/account/AccountInfo.vue      | 19 ++++---------
 components/modal/ModalContainer.vue     |  4 ---
 components/modal/ModalDialog.vue        |  2 +-
 components/tiptap/TiptapMentionList.vue |  2 +-
 components/user/UserSwitcher.vue        | 36 ++++++++++---------------
 composables/dialog.ts                   |  6 -----
 layouts/default.vue                     | 24 ++++++++++-------
 7 files changed, 36 insertions(+), 57 deletions(-)

diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index aae3cf7a..6e423fa3 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -1,28 +1,19 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
 
-const { account, link = true, fullServer = false } = defineProps<{
+const { account } = defineProps<{
   account: Account
-  link?: boolean
-  fullServer?: boolean
-  hover?: boolean
 }>()
 </script>
 
 <!-- TODO: Make this work for both buttons and links -->
 <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
 <template>
-  <div flex gap-3 cursor-default>
-    <div flex-shrink-0>
-      <NuxtLink :to="link ? getAccountPath(account) : null">
-        <AccountAvatar :account="account" :hover="hover" w-12 h-12 />
-      </NuxtLink>
-    </div>
-    <NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
+  <div flex gap-3>
+    <AccountAvatar :account="account" w-12 h-12 />
+    <div flex="~ col">
       <ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" text-sm />
-      <slot name="bottom" />
-    </NuxtLink>
-    <slot />
+    </div>
   </div>
 </template>
diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index 777fa115..f2ddec39 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -5,14 +5,10 @@ import {
   isPreviewHelpOpen,
   isPublishDialogOpen,
   isSigninDialogOpen,
-  isUserSwitcherOpen,
 } from '~/composables/dialog'
 </script>
 
 <template>
-  <ModalDialog v-model="isUserSwitcherOpen" type="right">
-    <UserSwitcher min-w-100 />
-  </ModalDialog>
   <ModalDialog v-model="isSigninDialogOpen">
     <UserSignIn m6 />
   </ModalDialog>
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index b028aed0..f0746009 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -98,7 +98,7 @@ function onTransitionEnd() {
 <template>
   <div
     v-if="isVisible"
-    fixed top-0 bottom-0 left-0 right-0 z-40
+    fixed top-0 bottom-0 left-0 right-0 z-20000
     :class="modelValue ? '' : 'pointer-events-none'"
   >
     <div
diff --git a/components/tiptap/TiptapMentionList.vue b/components/tiptap/TiptapMentionList.vue
index 51dd2e1f..d60ef70a 100644
--- a/components/tiptap/TiptapMentionList.vue
+++ b/components/tiptap/TiptapMentionList.vue
@@ -50,7 +50,7 @@ defineExpose({
         block m0 w-full text-left px2 py1
         @click="selectItem(index)"
       >
-        <AccountInfo :link="false" :account="item" />
+        <AccountInfo :account="item" />
       </button>
     </template>
     <div v-else block m0 w-full text-left px2 py1 italic op30>
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 7471f26f..7b36b39f 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -10,28 +10,20 @@ const sorted = computed(() => {
 </script>
 
 <template>
-  <div max-w-40rem mxa p4 flex="~ col gap2">
-    <h1 text-2xl>
-      Account
-    </h1>
-    <div mx--2>
-      <template v-for="user of sorted" :key="user.id">
-        <AccountInfo
-          :account="user.account"
-          :link="false"
-          :full-server="true"
-          rounded p2
-          :class="user.token !== currentUser?.token ? 'hover:bg-active cursor-pointer transition-100' : ''"
-          @click="loginTo(user)"
-        >
-          <template v-if="user.token === currentUser?.token">
-            <div flex-auto />
-            <div i-ri:check-line text-primary mya text-2xl />
-          </template>
-        </AccountInfo>
-      </template>
-    </div>
-    <div mx--4 border="t base" pt2>
+  <div min-w-80 mxa py2 flex="~ col">
+    <template v-for="user of sorted" :key="user.id">
+      <Component
+        :is="user.token !== currentUser?.token ? 'button' : 'div'"
+        flex rounded px4 py3 text-left
+        :class="user.token !== currentUser?.token ? 'hover:bg-active cursor-pointer transition-100' : ''"
+        @click="loginTo(user)"
+      >
+        <AccountInfo :account="user.account" />
+        <div flex-auto />
+        <div v-if="user.token === currentUser?.token" i-ri:check-line text-primary mya text-2xl />
+      </Component>
+    </template>
+    <div border="t base" pt2>
       <button btn-text flex="~ gap-1" items-center @click="openSigninDialog">
         <div i-ri:user-add-line />
         Add an existing account
diff --git a/composables/dialog.ts b/composables/dialog.ts
index 440f3c64..bb54761c 100644
--- a/composables/dialog.ts
+++ b/composables/dialog.ts
@@ -8,20 +8,14 @@ export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
 export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
 export const toggleZenMode = useToggle(isZenMode)
 
-export const isUserSwitcherOpen = ref(false)
 export const isSigninDialogOpen = ref(false)
 export const isPublishDialogOpen = ref(false)
 export const isImagePreviewDialogOpen = ref(false)
 export const isEditHistoryDialogOpen = ref(false)
 export const isPreviewHelpOpen = ref(isFirstVisit.value)
 
-export function openUserSwitcher() {
-  isUserSwitcherOpen.value = true
-}
-
 export function openSigninDialog() {
   isSigninDialogOpen.value = true
-  isUserSwitcherOpen.value = false
 }
 
 export function openPublishDialog(draft?: Draft) {
diff --git a/layouts/default.vue b/layouts/default.vue
index 941a151c..a4f13fbf 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -21,16 +21,22 @@
         <div sticky top-0 h-screen flex="~ col">
           <slot name="right">
             <UserSignInEntry v-if="!currentUser" />
-            <AccountInfo
+            <VDropdown
               v-if="currentUser"
-              m5 p2 rounded-full
-              hover:bg-active cursor-pointer transition-100
-              :account="currentUser.account"
-              :full-server="true"
-              :link="false"
-              @keydown.enter="openUserSwitcher"
-              @click="openUserSwitcher"
-            />
+              :triggers="['click', 'focus']"
+              :distance="0"
+              placement="bottom-end"
+            >
+              <button
+                m5 p2 rounded-full text-start w-full
+                hover:bg-active cursor-pointer transition-100
+              >
+                <AccountInfo :account="currentUser.account" />
+              </button>
+              <template #popper>
+                <UserSwitcher />
+              </template>
+            </VDropdown>
             <div flex-auto />
             <NavFooter />
           </slot>