From b1109c2ceb95eb9d24565297a4c231b9ca236501 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 27 Dec 2022 21:07:19 +0100
Subject: [PATCH] feat: rework user picker (#568)

---
 components/user/UserDropdown.vue     | 11 +++++++
 components/user/UserPicker.vue       | 31 ++++++++++--------
 composables/featureFlags.ts          |  8 ++---
 layouts/default.vue                  | 47 ++++++++++------------------
 locales/ar-EG.json                   |  2 +-
 locales/cs-CZ.json                   |  2 +-
 locales/de-DE.json                   |  2 +-
 locales/en-US.json                   |  2 +-
 locales/es-ES.json                   |  2 +-
 locales/fr-FR.json                   |  2 +-
 locales/ja-JP.json                   |  2 +-
 pages/settings/preferences/index.vue |  6 ++--
 12 files changed, 60 insertions(+), 57 deletions(-)
 create mode 100644 components/user/UserDropdown.vue

diff --git a/components/user/UserDropdown.vue b/components/user/UserDropdown.vue
new file mode 100644
index 00000000..612f9c04
--- /dev/null
+++ b/components/user/UserDropdown.vue
@@ -0,0 +1,11 @@
+<template>
+  <VDropdown :distance="0" placement="top-start">
+    <button btn-action-icon :aria-label="$t('action.switch_account')">
+      <div :class="{ 'hidden lg:block': currentUser }" i-ri:more-2-line />
+      <AccountAvatar v-if="currentUser" lg:hidden :account="currentUser.account" w-9 h-9 />
+    </button>
+    <template #popper="{ hide }">
+      <UserSwitcher @click="hide" />
+    </template>
+  </VDropdown>
+</template>
diff --git a/components/user/UserPicker.vue b/components/user/UserPicker.vue
index 9585fd7f..37cfedd5 100644
--- a/components/user/UserPicker.vue
+++ b/components/user/UserPicker.vue
@@ -14,18 +14,23 @@ const switchUser = (user: UserLogin) => {
 </script>
 
 <template>
-  <div flex="~ col" pb8 px4 gap-6 w-20 h-full justify-end>
-    <template v-for="user of all" :key="user.id">
-      <button
-        flex rounded
-        cursor-pointer
-        aria-label="Switch user"
-        :class="user.account.id === currentUser?.account.id ? '' : 'grayscale'"
-        hover:filter-none
-        @click="switchUser(user)"
-      >
-        <AccountAvatar w-12 h-12 :account="user.account" :hover-card="false" />
-      </button>
-    </template>
+  <div flex justify-start items-end px-2 gap-5>
+    <div flex="~ wrap-reverse" gap-5>
+      <template v-for="user of all" :key="user.id">
+        <button
+          flex rounded
+          cursor-pointer
+          aria-label="Switch user"
+          :class="user.account.id === currentUser?.account.id ? '' : 'op25 grayscale'"
+          hover="filter-none op100"
+          @click="switchUser(user)"
+        >
+          <AccountAvatar w-13 h-13 :account="user.account" />
+        </button>
+      </template>
+    </div>
+    <div flex items-center justify-center w-13 h-13>
+      <UserDropdown />
+    </div>
   </div>
 </template>
diff --git a/composables/featureFlags.ts b/composables/featureFlags.ts
index 0a3b8b3b..50530772 100644
--- a/composables/featureFlags.ts
+++ b/composables/featureFlags.ts
@@ -4,7 +4,7 @@ export interface FeatureFlags {
   experimentalVirtualScroll: boolean
   experimentalAvatarOnAvatar: boolean
   experimentalGitHubCards: boolean
-  experimentalUserSwitcherSidebar: boolean
+  experimentalUserPicker: boolean
 }
 export type FeatureFlagsMap = Record<string, FeatureFlags>
 
@@ -13,7 +13,7 @@ export function getDefaultFeatureFlags(): FeatureFlags {
     experimentalVirtualScroll: false,
     experimentalAvatarOnAvatar: true,
     experimentalGitHubCards: true,
-    experimentalUserSwitcherSidebar: true,
+    experimentalUserPicker: true,
   }
 }
 
@@ -36,5 +36,5 @@ export function toggleFeatureFlag(key: keyof FeatureFlags) {
     featureFlags[key] = true
 }
 
-const userSwitcherSidebar = eagerComputed(() => useFeatureFlags().experimentalUserSwitcherSidebar)
-export const showUserSwitcherSidebar = computed(() => useUsers().value.length > 1 && userSwitcherSidebar.value)
+const userPicker = eagerComputed(() => useFeatureFlags().experimentalUserPicker)
+export const showUserPicker = computed(() => useUsers().value.length > 1 && userPicker.value)
diff --git a/layouts/default.vue b/layouts/default.vue
index d38d6d44..87fa4b9d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,10 +6,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
 
 <template>
   <div h-full :class="{ zen: isZenMode }">
-    <div v-if="isHydrated.value && showUserSwitcherSidebar" fixed h-full hidden lg:block bg-code border-r-1 border-base>
-      <UserPicker />
-    </div>
-    <main flex w-full mxa lg:max-w-80rem :class="isHydrated.value && showUserSwitcherSidebar ? 'user-switcher-sidebar' : ''">
+    <main flex w-full mxa lg:max-w-80rem>
       <aside class="hidden sm:flex w-1/8 md:w-1/6 justify-end lg:w-1/4 zen-hide" relative>
         <div sticky top-0 w-20 lg:w-100 h-screen flex="~ col">
           <slot name="left">
@@ -21,24 +18,22 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
               </div>
               <div v-if="isMastoInitialised" flex flex-col>
                 <UserSignInEntry v-if="!currentUser" sm:hidden />
-                <div v-if="currentUser" p6 pb8 w-full flex="~" items-center justify-between>
-                  <NuxtLink
-                    hidden lg:block
-                    rounded-full text-start w-full
-                    hover:bg-active cursor-pointer transition-100
-                    :to="getAccountRoute(currentUser.account)"
-                  >
-                    <AccountInfo :account="currentUser.account" md:break-words />
-                  </NuxtLink>
-                  <VDropdown :distance="0" placement="bottom-end">
-                    <button btn-action-icon :aria-label="$t('action.switch_account')">
-                      <div hidden lg:block i-ri:more-2-line />
-                      <AccountAvatar lg:hidden :account="currentUser.account" w-9 h-9 />
-                    </button>
-                    <template #popper="{ hide }">
-                      <UserSwitcher @click="hide" />
-                    </template>
-                  </VDropdown>
+                <div v-if="currentUser" p6 pb8 w-full>
+                  <div hidden lg-block>
+                    <UserPicker v-if="showUserPicker" />
+                    <div v-else flex="~" items-center justify-between>
+                      <NuxtLink
+                        hidden lg:block
+                        rounded-full text-start w-full
+                        hover:bg-active cursor-pointer transition-100
+                        :to="getAccountRoute(currentUser.account)"
+                      >
+                        <AccountInfo :account="currentUser.account" md:break-words />
+                      </NuxtLink>
+                      <UserDropdown />
+                    </div>
+                  </div>
+                  <UserDropdown lg:hidden />
                 </div>
               </div>
             </div>
@@ -68,11 +63,3 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
     <ModalContainer />
   </div>
 </template>
-
-<style scoped>
-@media (max-width: 1500px) and (min-width: 1024px) {
-  .user-switcher-sidebar {
-    padding-left: min(5rem, calc((1500px - 100vw) / 2));
-  }
-}
-</style>
diff --git a/locales/ar-EG.json b/locales/ar-EG.json
index 333c7b72..a6dc31a8 100644
--- a/locales/ar-EG.json
+++ b/locales/ar-EG.json
@@ -189,7 +189,7 @@
     "feature_flags": {
       "avatar_on_avatar": "الصورة الرمزية على الصورة الرمزية",
       "github_cards": "GitHub بطاقات",
-      "user_switcher_sidebar": "الشريط الجانبي لمبدل المستخدم",
+      "user_picker": "الشريط الجانبي لمبدل المستخدم",
       "virtual_scroll": "التمرير الافتراضي"
     }
   },
diff --git a/locales/cs-CZ.json b/locales/cs-CZ.json
index a9b741c0..fa349f93 100644
--- a/locales/cs-CZ.json
+++ b/locales/cs-CZ.json
@@ -145,7 +145,7 @@
     "feature_flags": {
       "avatar_on_avatar": "Avatar on Avatar",
       "github_cards": "GitHub Cards",
-      "user_switcher_sidebar": "User Switcher Sidebar",
+      "user_picker": "User Picker",
       "virtual_scroll": "Virtual Scrolling"
     }
   },
diff --git a/locales/de-DE.json b/locales/de-DE.json
index d0a39b48..961f9374 100644
--- a/locales/de-DE.json
+++ b/locales/de-DE.json
@@ -150,7 +150,7 @@
     "feature_flags": {
       "avatar_on_avatar": "Avatar auf Avatar",
       "github_cards": "GitHub Cards",
-      "user_switcher_sidebar": "User Switcher Sidebar",
+      "user_picker": "User Picker",
       "virtual_scroll": "Virtuelles Scrollen"
     }
   },
diff --git a/locales/en-US.json b/locales/en-US.json
index 9d83ea5f..93b0e599 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -218,7 +218,7 @@
       "avatar_on_avatar": "Avatar on Avatar",
       "github_cards": "GitHub Cards",
       "title": "Experimental Features",
-      "user_switcher_sidebar": "User Switcher Sidebar",
+      "user_picker": "User Picker",
       "virtual_scroll": "Virtual Scrolling"
     },
     "interface": {
diff --git a/locales/es-ES.json b/locales/es-ES.json
index 872d1f2d..eb7f4757 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -206,7 +206,7 @@
     "feature_flags": {
       "avatar_on_avatar": "Avatar en Avatar",
       "github_cards": "GitHub Cards",
-      "user_switcher_sidebar": "User Switcher Sidebar",
+      "user_picker": "User Picker",
       "virtual_scroll": "Virtual Scrolling"
     }
   },
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index c6cd9979..71afec0b 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -206,7 +206,7 @@
     "feature_flags": {
       "avatar_on_avatar": "Avatar sur avatar",
       "github_cards": "GitHub Cards",
-      "user_switcher_sidebar": "User Switcher Sidebar",
+      "user_picker": "User Picker",
       "virtual_scroll": "Défilement virtuel"
     }
   },
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index d2a44c5d..6d45c40d 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -69,7 +69,7 @@
   "settings": {
     "feature_flags": {
       "github_cards": "GitHub Cards",
-      "user_switcher_sidebar": "User Switcher Sidebar",
+      "user_picker": "User Picker",
       "virtual_scroll": "仮想スクロール"
     }
   },
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 3d66e0df..18c62eb9 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -32,10 +32,10 @@ const { lg } = breakpoints
       {{ $t('settings.feature_flags.github_cards') }}
     </SettingsToggle>
     <SettingsToggle
-      :checked="currentUserFeatureFlags.experimentalUserSwitcherSidebar"
-      @click="toggleFeatureFlag('experimentalUserSwitcherSidebar')"
+      :checked="currentUserFeatureFlags.experimentalUserPicker"
+      @click="toggleFeatureFlag('experimentalUserPicker')"
     >
-      {{ $t('settings.feature_flags.user_switcher_sidebar') }}
+      {{ $t('settings.feature_flags.user_picker') }}
     </SettingsToggle>
   </MainContent>
 </template>