feat: rework user picker (#568)

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>

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>
+  <div flex justify-start items-end px-2 gap-5>
-    <template v-for="user of all" :key="user.id">
+    <div flex="~ wrap-reverse" gap-5>
-      <button
+      <template v-for="user of all" :key="user.id">
-        flex rounded
+        <button
-        cursor-pointer
+          flex rounded
-        aria-label="Switch user"
+          cursor-pointer
-        :class="user.account.id === currentUser?.account.id ? '' : 'grayscale'"
+          aria-label="Switch user"
-        hover:filter-none
+          :class="user.account.id === currentUser?.account.id ? '' : 'op25 grayscale'"
-        @click="switchUser(user)"
+          hover="filter-none op100"
-      >
+          @click="switchUser(user)"
-        <AccountAvatar w-12 h-12 :account="user.account" :hover-card="false" />
+        >
-      </button>
+          <AccountAvatar w-13 h-13 :account="user.account" />
-    </template>
+        </button>
+      </template>
+    </div>
+    <div flex items-center justify-center w-13 h-13>
+      <UserDropdown />
+    </div>
   </div>
 </template>

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)
+const userPicker = eagerComputed(() => useFeatureFlags().experimentalUserPicker)
-export const showUserSwitcherSidebar = computed(() => useUsers().value.length > 1 && userSwitcherSidebar.value)
+export const showUserPicker = computed(() => useUsers().value.length > 1 && userPicker.value)

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>
+    <main flex w-full mxa lg:max-w-80rem>
-      <UserPicker />
-    </div>
-    <main flex w-full mxa lg:max-w-80rem :class="isHydrated.value && showUserSwitcherSidebar ? 'user-switcher-sidebar' : ''">
       <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>
+                <div v-if="currentUser" p6 pb8 w-full>
-                  <NuxtLink
+                  <div hidden lg-block>
-                    hidden lg:block
+                    <UserPicker v-if="showUserPicker" />
-                    rounded-full text-start w-full
+                    <div v-else flex="~" items-center justify-between>
-                    hover:bg-active cursor-pointer transition-100
+                      <NuxtLink
-                    :to="getAccountRoute(currentUser.account)"
+                        hidden lg:block
-                  >
+                        rounded-full text-start w-full
-                    <AccountInfo :account="currentUser.account" md:break-words />
+                        hover:bg-active cursor-pointer transition-100
-                  </NuxtLink>
+                        :to="getAccountRoute(currentUser.account)"
-                  <VDropdown :distance="0" placement="bottom-end">
+                      >
-                    <button btn-action-icon :aria-label="$t('action.switch_account')">
+                        <AccountInfo :account="currentUser.account" md:break-words />
-                      <div hidden lg:block i-ri:more-2-line />
+                      </NuxtLink>
-                      <AccountAvatar lg:hidden :account="currentUser.account" w-9 h-9 />
+                      <UserDropdown />
-                    </button>
+                    </div>
-                    <template #popper="{ hide }">
+                  </div>
-                      <UserSwitcher @click="hide" />
+                  <UserDropdown lg:hidden />
-                    </template>
-                  </VDropdown>
                 </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>

locales/ar-EG.json

@@ -189,7 +189,7 @@
     "feature_flags": {
       "avatar_on_avatar": "الصورة الرمزية على الصورة الرمزية",
       "github_cards": "GitHub بطاقات",
-      "user_switcher_sidebar": "الشريط الجانبي لمبدل المستخدم",
+      "user_picker": "الشريط الجانبي لمبدل المستخدم",
       "virtual_scroll": "التمرير الافتراضي"
     }
   },

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"
     }
   },

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"
     }
   },

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": {

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"
     }
   },

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"
     }
   },

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": "仮想スクロール"
     }
   },

pages/settings/preferences/index.vue

@@ -32,10 +32,10 @@ const { lg } = breakpoints
       {{ $t('settings.feature_flags.github_cards') }}
     </SettingsToggle>
     <SettingsToggle
-      :checked="currentUserFeatureFlags.experimentalUserSwitcherSidebar"
+      :checked="currentUserFeatureFlags.experimentalUserPicker"
-      @click="toggleFeatureFlag('experimentalUserSwitcherSidebar')"
+      @click="toggleFeatureFlag('experimentalUserPicker')"
     >
-      {{ $t('settings.feature_flags.user_switcher_sidebar') }}
+      {{ $t('settings.feature_flags.user_picker') }}
     </SettingsToggle>
   </MainContent>
 </template>