fetch auth session data from token

frontend/components/AppSidebar.vue

@@ -15,6 +15,7 @@ import {
 const route = useRoute();
 
 const store = useWarrenStore();
+const session = useAuthSession();
 
 async function selectWarren(id: string) {
     await store.setCurrentWarren(id, '/');
@@ -77,7 +78,7 @@ async function selectWarren(id: string) {
             </SidebarGroup>
         </SidebarContent>
         <SidebarFooter>
-            <SidebarUser />
+            <SidebarUser v-if="session != null" :user="session.user" />
         </SidebarFooter>
     </Sidebar>
 </template>

frontend/components/SidebarUser.vue

@@ -13,14 +13,15 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { logout } from '~/lib/api/auth/logout';
+import type { AuthUser } from '~/types/auth';
 
 const { isMobile } = useSidebar();
+const { user } = defineProps<{
+    user: AuthUser;
+}>();
 
-const user = {
-    name: '409',
-    email: 'user@example.com',
-    avatar: 'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp',
-};
+const AVATAR =
+    'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp';
 </script>
 
 <template>
@@ -34,7 +35,7 @@ const user = {
                         tooltip="Settings"
                     >
                         <Avatar class="h-8 w-8 rounded-lg">
-                            <AvatarImage :src="user.avatar" />
+                            <AvatarImage :src="AVATAR" />
                             <AvatarFallback class="rounded-lg"
                                 >A</AvatarFallback
                             >
@@ -66,10 +67,7 @@ const user = {
                             class="flex items-center gap-2 px-1 py-1.5 text-left text-sm"
                         >
                             <Avatar class="h-8 w-8 rounded-lg">
-                                <AvatarImage
-                                    :src="user.avatar"
-                                    :alt="user.name"
-                                />
+                                <AvatarImage :src="AVATAR" :alt="user.name" />
                                 <AvatarFallback class="rounded-lg">
                                     CN
                                 </AvatarFallback>
@@ -86,7 +84,7 @@ const user = {
                             </div>
                         </div>
                     </DropdownMenuLabel>
-                    <DropdownMenuSeparator />
+                    <!-- <DropdownMenuSeparator />
                     <DropdownMenuGroup>
                         <DropdownMenuItem>
                             <Icon name="lucide:user" />
@@ -99,7 +97,7 @@ const user = {
                             <Icon name="lucide:settings" />
                             Settings
                         </DropdownMenuItem>
-                    </DropdownMenuGroup>
+                    </DropdownMenuGroup> -->
                     <DropdownMenuSeparator />
                     <DropdownMenuItem @click="logout">
                         <Icon name="lucide:door-open" />