v4

src/components/pnAccountBlockName.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center no-wrap overflow-hidden w100">
+    <q-icon v-if="user?.email" size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
+    <q-avatar v-else size="32px" class="q-mr-sm">
+      <q-img v-if="tgUser?.photo_url" :src="tgUser.photo_url"/>
+      <q-icon v-else size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
+    </q-avatar>
+    <span v-if="user?.email" class="ellipsis">
+      {{ user.email }}
+    </span>
+    <span v-else class="ellipsis">
+      {{
+        tgUser?.first_name + 
+        (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
+        tgUser?.last_name +
+        !(tgUser?.first_name || tgUser?.last_name) ? tgUser?.username : ''
+      }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { inject } from 'vue'
+  import { useAuthStore } from 'stores/auth'
+  import type { WebApp } from '@twa-dev/types'
+
+  const authStore = useAuthStore()
+  const user = authStore.user
+  const tg = inject('tg') as WebApp
+  const tgUser = tg.initDataUnsafe.user
+
+</script>
+
+<style lang="scss">
+</style>