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>