refactors IslandMenu to collapse expanded tab; adds user ID display i…

…n UserPanel; cleans up user retrieval API; introduces user detail page with authentication warning

apps/hub/app/components/IslandMenu.vue

@@ -13,7 +13,7 @@ const hazeStrength = computed(() => {
 type Tab = 'user' | 'settings'
 
 const activeTab = ref<Tab>('user')
-const expandedTab = ref(true)
+const expandedTab = ref(false)
 
 function switchTab(tab: Tab) {
   if (activeTab.value === tab) {

apps/hub/app/components/UserPanel.vue

@@ -33,6 +33,8 @@ const sessionAge = computed(() => {
     </div>
     <p>IP Adress: {{ session?.ipAddress }}</p>
     <p>Session age: {{ sessionAge }}</p>
+    <p>{{ user?.id }}</p>
+
     <Button size="medium" @click="signOut">Sign out</Button>
   </div>
 </template>

apps/hub/app/pages/users/[id].vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const route = useRoute()
+
+if (!route.params.id) {
+  console.log('Warning! Make sure user is authenticasted!')
+}
+
+const { data } = await useFetch(`/api/users/${route.params.id}`)
+</script>
+
+<template>
+  <div class="user-panel">
+    <div class="identity">
+      <NuxtImg
+        src="https://images.unsplash.com/photo-1740475339769-664748d1193e?q=80&w=3464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="User Image"
+      />
+      <h2>Name: {{ data?.name }}</h2>
+    </div>
+    <div class="email">
+      <p>Email: {{ data?.email }}</p>
+      <div v-if="!data?.emailVerified" class="verified border">
+        <Icon name="pixelarticons:check" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss"></style>

apps/hub/server/api/users/[id].get.ts

@@ -11,6 +11,5 @@ export default defineEventHandler(async (event) => {
   })
 
   if (!user) throw new Error('User not found')
-
   return user
 })