current session info + some template refactor

src/views/PersonalView/PersonalMainBlock.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useAuthStore } from '@/stores/authStore.js'
+import { onMounted, ref } from 'vue'
+
+const store = useAuthStore()
+
+const userData = ref(null)
+
+onMounted(() => {
+  store.userInfo().then((data) => {
+    userData.value = data
+  })
+})
+</script>
+
+<template>
+  <n-card :bordered="false" title="Main">
+    <n-list hoverable clickable>
+      <n-list-item>
+        <n-thing title="Email" content-style="margin-top: 10px;">
+          {{ userData?.email || '---' }}
+        </n-thing>
+      </n-list-item>
+
+      <n-list-item>
+        <n-thing title="Username" content-style="margin-top: 10px;">
+          {{ userData?.username || '---' }}
+        </n-thing>
+      </n-list-item>
+
+      <n-list-item>
+        <n-thing title="Created At" content-style="margin-top: 10px;">
+          {{ userData?.created_at || '---' }}
+        </n-thing>
+      </n-list-item>
+    </n-list>
+  </n-card>
+</template>
+
+<style scoped></style>