initial commit

2026-01-11 05:04:29 -06:00
commit 0877cc10bd
65 changed files with 5009 additions and 0 deletions
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const { user } = useAuth()
+const { agents, activeAgent } = await useAgents()
+const homeButtonRef = ref<HTMLElement | null>(null)
+const agentDropdownRef = ref<HTMLElement | null>(null)
+const agentDropdownOpen = ref(false)
+
+const hovering = defineModel<boolean>({ required: true })
+const initialized = ref(false)
+
+onMounted(() => {
+    if (hovering.value) {
+        const width = homeButtonRef.value!.scrollWidth
+        homeButtonRef.value!.style.width = `calc(${width}px + 0.5rem)`
+    }
+
+    watch(hovering, (value) => {
+        if (!initialized.value) {
+            initialized.value = true
+        }
+
+        if (value) {
+            const width = homeButtonRef.value!.scrollWidth
+            homeButtonRef.value!.style.width = `calc(${width}px + 0.5rem)`
+        } else {
+            homeButtonRef.value!.style.width = '0'
+        }
+    })
+});
+
+useClickOutside(agentDropdownRef, () => {
+    agentDropdownOpen.value = false
+})
+</script>
+
+<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']">
+            <NuxtLink to="/"
+                class="flex hover:bg-[var(--color-highlight)] rounded-lg decoration-none transition-inherit text-[var(--color-subtle)] p-1.5">
+                <Icon name="mynaui:chevron-left" class="w-4.5 h-4.5" />
+            </NuxtLink>
+        </div>
+
+        <div class="flex overflow-hidden gap-1.5 pr-2 items-center cursor-pointer hover:bg-[var(--color-highlight)] rounded-lg"
+            ref="agentDropdownRef" @click="agentDropdownOpen = !agentDropdownOpen">
+            <div
+                :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-highlight-high)]']">
+                <img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl" class="w-full h-full object-cover" />
+                <Icon v-else name="mynaui:check-hexagon" class="w-4 h-4 text-[var(--color-accent)]" />
+            </div>
+            <span class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--color-text)] whitespace-nowrap">
+                {{ activeAgent?.name }}
+            </span>
+            <div class="w-4 h-4 text-[var(--color-subtle)]">
+                <Icon
+                    class="text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"
+                    name="mynaui:chevron-up-down" />
+            </div>
+        </div>
+
+        <!-- Agent Dropdown -->
+        <div v-show="agentDropdownOpen" class="absolute top-full left-1/10 z-50 mt-1.5 bg-[var(--color-neutral)] border border-[var(--color-highlight)]
+        rounded-xl p-2 w-8/10">
+            <div class="flex flex-col gap-1.5 max-h-[calc(2.25rem*4+0.375rem*3)] overflow-y-auto">
+                <NuxtLink v-for="agent in agents" :to="`/agent/${agent.id}`" :key="agent.id" :class="['decoration-none whitespace-nowrap', activeAgent?.id === agent.id ? 'text-[var(--color-text)]' :
+                    'text-[var(--color-subtle)]']" @click="agentDropdownOpen = false">
+                    <SidenavItem :name="agent.name" icon="mynaui:check-hexagon"
+                        :active="activeAgent?.id === agent.id" />
+                </NuxtLink>
+            </div>
+        </div>
+    </header>
+</template>