feat: migrate to tailwind v4 and fix user token API

server/components/AddLibraryButton.vue

@@ -4,7 +4,7 @@
       :loading="isLibraryLoading"
       @click="() => toggleLibrary()"
       :style="'none'"
-      class="transition w-48 inline-flex items-center justify-center gap-x-2 rounded-l-md bg-white/10 group-hover:bg-white/15 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
+      class="transition w-48 h-fit gap-x-2 rounded-none rounded-l-md bg-white/10 hover:bg-white/20 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
     >
       {{ inLibrary ? "In Library" : "Add to Library" }}
       <CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
@@ -15,7 +15,7 @@
     <Menu as="div" class="relative">
       <MenuButton
         as="div"
-        class="transition cursor-pointer inline-flex items-center rounded-r-md h-full ml-[2px] bg-white/10 group-hover:bg-white/15 backdrop-blur py-3.5 px-2 justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
+        class="transition cursor-pointer inline-flex items-center rounded-r-md h-full ml-[2px] bg-white/10 hover:bg-white/20 backdrop-blur py-3.5 px-2 justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/20"
       >
         <ChevronDownIcon class="h-5 w-5 text-white" aria-hidden="true" />
       </MenuButton>

server/components/UserHeader/UserWidget.vue

@@ -39,15 +39,16 @@
           </NuxtLink>
           <div class="h-0.5 rounded-full w-full bg-zinc-800" />
           <div class="flex flex-col">
-            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active }">
-              <NuxtLink
+            <MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active, close }">
+              <button
                 :href="nav.route"
+                @click="() => navigateTo(nav.route, close)"
                 :class="[
                   active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
-                  'transition block px-4 py-2 text-sm',
+                  'text-left transition block px-4 py-2 text-sm',
                 ]"
               >
-                {{ nav.label }}</NuxtLink
+                {{ nav.label }}</button
               >
             </MenuItem>
           </div>
@@ -84,4 +85,11 @@ const navigation: NavigationItem[] = [
     prefix: "",
   },
 ].filter((e) => e !== undefined);
+
+const router = useRouter();
+
+function navigateLink(href: string, closeFn: () => any) {
+  closeFn();
+  router.push(href);
+}
 </script>