feat: Implement initial dashboard layout, authentication composable, …

app/components/UserMenu.vue

@@ -42,28 +42,29 @@ await loadAuthUser()
 
 user.value.avatar = {
   src: `https://api.dicebear.com/8.x/initials/svg?seed=${
-    user.value.name || user.value.email
+    user.value.user_metadata.name || user.value.email
   }`,
-  alt: user.value.name || user.value.email
+  alt: user.value.user_metadata.name || user.value.email
 }
 
 const items = computed<DropdownMenuItem[][]>(() => [
   [
     {
       type: 'label',
-      label: user.value.email,
+      label: user.value.user_metadata.name || user.value.email,
       avatar: user.value.avatar
     }
   ],
   [
     {
       label: 'Perfil',
-      icon: 'i-lucide-user'
+      icon: 'i-lucide-user',
+      to: '/settings'
     },
     {
       label: 'Ajustes',
       icon: 'i-lucide-settings',
-      to: '/settings'
+      to: '/settings/security'
     }
   ],
   [
@@ -174,7 +175,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
     <UButton
       v-bind="{
         ...user,
-        label: collapsed ? undefined : user?.email,
+        label: collapsed ? undefined : user?.user_metadata.name || user?.email,
         trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
       }"
       color="neutral"

app/composables/useAuth.ts

@@ -1,6 +1,6 @@
 export const useAuth = () => {
   const supabase = useSupabaseClient()
-  const user = ref<any>(null)
+  const user = useState<any>('auth-user', () => null)
 
   const loadAuthUser = async () => {
     const { data } = await supabase.auth.getUser()
@@ -32,8 +32,6 @@ export const useAuth = () => {
     user.value = null
   }
 
-  loadAuthUser()
-
   return {
     user,
     loadAuthUser,

app/layouts/default.vue

@@ -14,8 +14,8 @@ const links = [
       }
     },
     {
-      label: 'Anúncios App',
-      icon: 'i-lucide-megaphone',
+      label: 'Anúncios (App)',
+      icon: 'i-lucide-smartphone',
       to: '/anuncios',
       onSelect: () => {
         open.value = false

app/pages/index.vue

@@ -35,15 +35,16 @@ const items = [
       </UDashboardNavbar>
     </template>
 
-    <UDashboardPanelContent>
+    <template #body>
       <UPageBody>
-        <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-4 px-4">
           <h2 class="text-lg font-semibold">Bem-vindo ao Painel</h2>
-          <p class="text-gray-500">
-            Selecione uma opção no menu lateral para começar.
-          </p>
+          <small class="text-gray-500">Dashboard em construção...</small>
+          <small>
+            Enquanto isso, selecione uma opção no menu lateral para começar.
+          </small>
         </div>
       </UPageBody>
-    </UDashboardPanelContent>
+    </template>
   </UDashboardPanel>
 </template>

app/pages/settings/index.vue

@@ -16,19 +16,38 @@ type ProfileSchema = z.output<typeof profileSchema>
 await loadAuthUser()
 
 const profile = reactive<Partial<ProfileSchema>>({
-  name: user.value.user_metadata.name,
-  email: user.value.email
+  name: user.value?.user_metadata?.name || '',
+  email: user.value?.email || ''
 })
 
+const { updateUser } = useUsers()
 const toast = useToast()
+
 async function onSubmit(event: FormSubmitEvent<ProfileSchema>) {
-  toast.add({
-    title: 'Success',
-    description: 'Your settings have been updated.',
-    icon: 'i-lucide-check',
-    color: 'success'
-  })
-  console.log(event.data)
+  try {
+    if (!user.value?.id) return
+
+    await updateUser({
+      id: user.value.id,
+      name: event.data.name
+    })
+
+    await loadAuthUser()
+
+    toast.add({
+      title: 'Sucesso',
+      description: 'Suas configurações foram atualizadas.',
+      icon: 'i-lucide-check',
+      color: 'success'
+    })
+  } catch (error: any) {
+    toast.add({
+      title: 'Erro',
+      description: error.data?.statusMessage || error.message || 'Falha ao atualizar configurações.',
+      icon: 'i-lucide-circle-x',
+      color: 'error'
+    })
+  }
 }
 
 // function onFileChange(e: Event) {