refactors IslandMenu to use UserPanelWrapper; adds UserPanel and User…

…PanelWrapper components for user authentication and session management; enhances styling for improved usability

apps/hub/app/components/IslandMenu.vue

@@ -2,6 +2,7 @@
 import { Button, ButtonGroup, IconPaint, IconText } from '@nobel/core'
 import { onClickOutside } from '@vueuse/core'
 import { useTemplateRef } from 'vue'
+import UserPanelWrapper from './UserPanelWrapper.vue'
 
 const theme = useUmbra()
 const hover = ref(false)
@@ -42,7 +43,7 @@ onClickOutside(islandMenu, () => (expandedTab.value = false))
     @mouseleave="hover = false"
   >
     <div class="island-panel">
-      <SignUser v-if="activeTab === 'user'" />
+      <UserPanelWrapper v-if="activeTab === 'user'" />
       <h1 v-if="activeTab === 'settings'">Settings</h1>
     </div>
 
@@ -107,7 +108,7 @@ onClickOutside(islandMenu, () => (expandedTab.value = false))
 
 #island-menu.expanded .island-panel {
   height: auto;
-  width: auto;
+  width: 30em;
   padding: var(--space-2) var(--space-2) var(--space-3);
 }
 

apps/hub/app/components/SignUser.vue

@@ -5,7 +5,7 @@ const signMode = ref<'signin' | 'signup'>('signin')
 
 <template>
   <div class="signin">
-    <div class="toggle-wrapper border">
+    <div class="toggle-wrapper border sibling-blur">
       <ButtonGroup>
         <Button
           :variant="signMode === 'signin' ? 'primary' : 'base'"
@@ -37,7 +37,6 @@ form {
 .signin {
   display: grid;
   gap: var(--space-2);
-  width: 30em;
 }
 
 .toggle-wrapper {

apps/hub/app/components/UserPanel.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { Button, toast } from '@nobel/core'
+const { user, session, client } = useAuth()
+
+const signOut = async () => {
+  await client.signOut()
+  toast.success('Signed out')
+}
+
+const sessionAge = computed(() => {
+  if (!session.value?.createdAt) return
+  const startedAt = new Date(session.value.createdAt)
+  const now = new Date()
+  const diff = now.getTime() - startedAt.getTime()
+  return Math.floor(diff / 1000)
+})
+</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>{{ user?.name }}</h2>
+    </div>
+    <div class="email">
+      <p>{{ user?.email }}</p>
+      <div v-if="!user?.emailVerified" class="verified border">
+        <Icon name="pixelarticons:check" />
+      </div>
+    </div>
+    <p>IP Adress: {{ session?.ipAddress }}</p>
+    <p>Session age: {{ sessionAge }}</p>
+    <Button size="medium" @click="signOut">Sign out</Button>
+  </div>
+</template>
+
+<style lang="scss">
+.user-panel button {
+  width: 100%;
+}
+
+.user-panel img {
+  height: var(--block-big);
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  border-radius: 100%;
+}
+
+.user-panel .verified {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  background-color: var(--success-40);
+  width: var(--block);
+  aspect-ratio: 1 / 1;
+  .iconify {
+    background-color: var(--success-120);
+  }
+}
+
+.email {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.identity {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+</style>

apps/hub/app/components/UserPanelWrapper.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const { user } = useAuth()
+</script>
+
+<template>
+  <SignUser v-if="!user" />
+  <UserPanel v-else />
+</template>

packages/nobel/components/ui/Input.vue

@@ -17,7 +17,7 @@ const focused = ref(false)
 </script>
 
 <template>
-  <div class="input">
+  <div class="input sibling-blur">
     <label
       for="html"
       class="button buttonText buttonHover buttonActive buttonFocus focus"
@@ -69,7 +69,7 @@ div.input:has(input:not(:placeholder-shown)):not(:focus-within) label {
   opacity: 0;
 }
 
-div.input:has(+ div:focus-within) {
+div.sibling-blur:has(+ *:focus-within) {
   filter: blur(4px);
 }