feat: use square avatars for logged in user

components/account/AccountAvatar.vue

@@ -3,6 +3,7 @@ import type { Account } from 'masto'
 
 defineProps<{
   account: Account
+  square?: boolean
 }>()
 
 const loaded = $ref(false)
@@ -17,8 +18,7 @@ const error = $ref(false)
     :src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
-    rounded-full
-    :class="loaded ? 'bg-base' : 'bg-gray:10'"
+    :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' rounded-3' : ' rounded-full')"
     v-bind="$attrs"
     @load="loaded = true"
     @error="error = true"

components/account/AccountBigAvatar.vue

@@ -6,11 +6,12 @@ import type { Account } from 'masto'
 
 defineProps<{
   account: Account
+  square?: boolean
 }>()
 </script>
 
 <template>
   <div :key="account.avatar" v-bind="$attrs" rounded-full bg-base w-54px h-54px flex items-center justify-center>
-    <AccountAvatar :account="account" w-48px h-48px />
+    <AccountAvatar :account="account" w-48px h-48px :square="square" />
   </div>
 </template>

components/account/AccountInfo.vue

@@ -5,6 +5,7 @@ const { account, as = 'div' } = defineProps<{
   account: Account
   as?: string
   hoverCard?: boolean
+  square?: boolean
 }>()
 
 defineOptions({
@@ -17,7 +18,7 @@ defineOptions({
 <template>
   <component :is="as" flex gap-3 v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
-      <AccountBigAvatar :account="account" shrink-0 />
+      <AccountBigAvatar :account="account" shrink-0 :square="square" />
     </AccountHoverWrapper>
     <div flex="~ col" shrink overflow-hidden justify-center leading-none>
       <div flex="~" gap-2>

components/nav/NavUser.vue

@@ -7,6 +7,7 @@
         h-8
         w-8
         :draggable="false"
+        square
       />
     </div>
 

components/user/UserDropdown.vue

@@ -2,7 +2,7 @@
   <VDropdown :distance="0" placement="top-start">
     <button btn-action-icon :aria-label="$t('action.switch_account')">
       <div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line />
-      <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 />
+      <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 square />
     </button>
     <template #popper="{ hide }">
       <UserSwitcher @click="hide" />

layouts/default.vue

@@ -28,7 +28,7 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
                         hover:bg-active cursor-pointer transition-100
                         :to="getAccountRoute(currentUser.account)"
                       >
-                        <AccountInfo :account="currentUser.account" md:break-words />
+                        <AccountInfo :account="currentUser.account" md:break-words square />
                       </NuxtLink>
                       <UserDropdown />
                     </div>