Working

app/components/App/Category.vue

@@ -30,7 +30,7 @@ const { canCreateTabInCategory } = await useUserLimits()
       <UDropdown
         :items="dropdownItems"
         :popper="{ placement: 'bottom-end', arrow: true }"
-        :ui="{ width: 'w-40', shadow: 'shadow-xl' }"
+        :ui="{ container: 'group z-50', width: 'w-40', shadow: 'shadow-xl' }"
       >
         <UButton
           color="white"

app/components/App/Tab.vue

@@ -69,7 +69,7 @@ function visitLink() {
       <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :class="`bg-${tab.color}-400`" />
       <span class="relative inline-flex rounded-full h-3 w-3" :class="`bg-${tab.color}-400`" />
     </div>
-    <div class="flex items-center justify-between h-full">
+    <div class="flex items-center justify-between h-full z-20">
       <div class="flex gap-4 items-center h-full">
         <UBadge :color="tab.color" class="p-2" variant="soft">
           <UIcon :name="tab.icon" size="32" />
@@ -83,7 +83,7 @@ function visitLink() {
       <UDropdown
         :items="items"
         :popper="{ placement: 'bottom-end', arrow: true }"
-        :ui="{ container: 'z-50 group', width: 'w-40', shadow: 'shadow-2xl', wrapper: 'absolute inline-flex -top-3 -right-3' }"
+        :ui="{ container: 'z-40 group', width: 'w-40', shadow: 'shadow-2xl', wrapper: 'absolute inline-flex -top-3 -right-3' }"
       >
         <UButton
           v-show="editMode"

app/components/App/UserSettingsForm.vue

@@ -28,27 +28,18 @@ watchEffect(() => {
   state.email = props.user.email
 })
 
-async function handleUpdate(event: FormSubmitEvent<UpdateUserSchemaType>) {
-  try {
-    await useRequestFetch()(`/api/users/me`, {
-      method: 'PUT',
-      body: JSON.stringify({
-        username: event.data.username,
-        name: event.data.name,
-        description: event.data.description,
-        location: event.data.location,
-        language: event.data.language,
-        private: event.data.private,
-      }),
-    })
-    useSuccessToast('Profile successfully updated!')
-  }
-  catch (error) {
-    useErrorToast('Profile update failed!', error as string)
-  }
-}
+const { deleteAvatar, uploadAvatar, updateUser } = await useUser()
 
-const { deleteAvatar, uploadAvatar } = await useUser()
+async function handleUpdate(event: FormSubmitEvent<UpdateUserSchemaType>) {
+  await updateUser({
+    username: event.data.username,
+    name: event.data.name,
+    description: event.data.description,
+    location: event.data.location,
+    language: event.data.language,
+    private: event.data.private,
+  })
+}
 </script>
 
 <template>

app/components/old/Map.vue

@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-const config = useRuntimeConfig()
-
-const coordinates = ref<[number, number]>([2.179040, 48.877419])
-const zoom = ref(11)
-</script>
-
-<template>
-  <ClientOnly>
-    <UCard :ui="{ base: 'h-72 md:col-span-2', body: { padding: '' } }">
-      <div class="relative">
-        <MapboxMap
-          :options="{
-            accessToken: config.public.mapbox.accessToken,
-            style: config.public.mapbox.style,
-            center: coordinates,
-            zoom,
-            projection: 'globe',
-          }"
-          class="absolute h-72"
-          map-id="map"
-        >
-          <MapboxDefaultMarker
-            :lnglat="coordinates"
-            :options="{
-              color: '#808080',
-              size: 1.5,
-            }"
-            marker-id="marker"
-          />
-        </MapboxMap>
-      </div>
-    </UCard>
-  </ClientOnly>
-</template>
-
-<style>
-.mapboxgl-control-container {
-  display: none !important;
-}
-
-.mapboxgl-canvas {
-  border-radius: 1rem;
-}
-</style>

app/components/old/Weather.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import type { WeatherType } from '~~/types/types'
-
-const { data: weather } = await useFetch<WeatherType>('/api/weather')
-</script>
-
-<template>
-  <section>
-    <UCard v-if="weather" :ui="{ base: 'h-full' }">
-      <template #header>
-        <div class="flex items-center gap-2 text-blue-600 dark:text-blue-300">
-          <UIcon name="i-ph:cloud-duotone" size="24" />
-          <h3 class="font-bold text-lg">
-            Météo
-          </h3>
-        </div>
-      </template>
-      <template #default>
-        <div class="flex items-center h-full">
-          <p class="text-lg h-full">
-            Il fait actuellement
-            <span class="text-blue-600 dark:text-blue-300">{{ weather.weather }}</span>
-            à
-            <span>{{ weather.city }}</span>,
-            avec une température de
-            <span class="text-blue-600 dark:text-blue-300">{{ weather.temp }}
-            </span>
-            °C
-          </p>
-        </div>
-      </template>
-    </UCard>
-  </section>
-</template>