refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/components/nav/NavUser.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const { busy, oauth, singleInstanceServer } = useSignIn()
+</script>
+
+<template>
+  <VDropdown v-if="isHydrated && currentUser" sm:hidden>
+    <div style="-webkit-touch-callout: none;">
+      <AccountAvatar
+        :account="currentUser.account"
+        h-8
+        w-8
+        :draggable="false"
+        square
+      />
+    </div>
+
+    <template #popper="{ hide }">
+      <UserSwitcher @click="hide()" />
+    </template>
+  </VDropdown>
+  <template v-else>
+    <button
+      v-if="singleInstanceServer"
+      flex="~ row"
+      gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
+      :disabled="busy"
+      @click="oauth()"
+    >
+      <span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
+        <span block i-ri:loader-2-fill aria-hidden="true" />
+      </span>
+      <span v-else aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
+      <i18n-t keypath="action.sign_in_to">
+        <strong>{{ currentServer }}</strong>
+      </i18n-t>
+    </button>
+    <button
+      v-else
+      flex="~ row"
+      gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
+      @click="openSigninDialog()"
+    >
+      <span aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
+      {{ $t('action.sign_in') }}
+    </button>
+  </template>
+</template>