feat: add better provider support, icons, regen, and a lot more

app/components/Sidenav/HeaderAgent.vue

@@ -2,47 +2,14 @@
 import type { DropdownItem } from '~/types/dropdown';
 
 const route = useRoute();
-const { agents, getAgent } = await useAgents();
-const homeButtonRef = ref<HTMLElement | null>(null);
+const { agents, getAgent, unsubscribe: unsubscribeAgents } = await useAgents();
 
 const activeAgent = computed(() => getAgent(route.params.id as string));
 
-const hovering = defineModel<boolean>({ required: true });
-const initialized = ref(false);
-
-let lastHovering: boolean | null = null;
-onMounted(() => {
-    console.log(hovering.value);
-
-    if (hovering.value && homeButtonRef.value) {
-        const width = homeButtonRef.value.scrollWidth;
-        homeButtonRef.value.style.width = `calc(${width}px + 0.5rem)`;
-    }
-
-    watch(hovering, (value) => {
-        if (lastHovering === value) {
-            console.warn('Hovering value did not change, but watcher was triggered');
-        }
-        console.log(value, lastHovering);
-        lastHovering = value;
-
-        if (!initialized.value) {
-            initialized.value = true;
-        }
-
-        if (!homeButtonRef.value) return;
-
-        if (value) {
-            const width = homeButtonRef.value.scrollWidth;
-            homeButtonRef.value.style.width = `calc(${width}px + 0.5rem)`;
-        } else {
-            homeButtonRef.value.style.width = '0';
-        }
-    });
-});
+const { isHovered } = useSidenavContext();
 
 onUnmounted(() => {
-    console.log('unmounted');
+    unsubscribeAgents?.();
 });
 
 const agentDropdownOpen = ref(false);
@@ -52,8 +19,8 @@ const agentItems: DropdownItem[] = [];
 
 <template>
     <header class="flex items-center rounded-lg overflow-hidden">
-        <div ref="homeButtonRef" style="width: 0;"
-            :class="['flex flex-shrink-0 items-center overflow-hidden', initialized ? 'transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]' : '', hovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95']">
+        <div :style="isHovered ? 'width: 32px;' : 'width: 0px;'"
+            :class="['flex flex-shrink-0 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-95']">
             <NuxtLink to="/"
                 class="flex hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)] rounded-lg decoration-none transition-inherit text-[var(--color-muted)] p-1.5">
                 <Icon name="mynaui:chevron-left" class="w-4.5 h-4.5" />