zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace nuxt icons with unocss icons

Browse Source
This commit is contained in:
Zoe
2026-02-26 14:51:07 -06:00
parent 3ff0bcce19
commit 97afa1cbe1
30 changed files with 107 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Sidenav/Header.vue
+5 -17
View File
@@ -43,7 +43,7 @@ useClickOutside(dropdownRef, () => {
<div
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
<img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
<Icon v-else name="mynaui:user" class="w-4 h-4 text-[var(--text-secondary)]" />
<span v-else class="i-mynaui-user text-4 text-[var(--text-secondary)]"></span>
</div>
<span
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
@@ -52,8 +52,8 @@ useClickOutside(dropdownRef, () => {
<div :class="['transform-origin-left-center flex-shrink-0 w-4 h-4 text-[var(--text-secondary)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40'
]">
<Icon class="text-4 transition-transform duration-250 ease-in-out"
:class="dropdownOpen ? 'rotate-180' : ''" name="mynaui:chevron-down" />
<span class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-250 ease-in-out"
:class="dropdownOpen ? 'rotate-180' : ''"></span>
</div>
</button>
@@ -65,28 +65,16 @@ useClickOutside(dropdownRef, () => {
class="w-full top-full text-sm mt-1 absolute z-50 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
<button @click="dropdownOpen = false; toggleSettings()"
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:cog-four" class="text-4.5" />
<span class="i-mynaui-cog-four text-4.5"></span>
<span>Settings</span>
</button>
<hr class="border-t border-[var(--color-border)]" />
<button @click="handleLogout"
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:logout" class="text-4.5" />
<span class="i-mynaui-logout text-4.5"></span>
<span>Log out</span>
</button>
</div>
</Transition>
<!-- <Dropdown class="overflow-hidden" v-model="profileOpen" :items="profileItems" placement="left"
verticality="descending" width="100%">
<template #trigger="{ toggle }">
<button aria-label="open user dropdown"
class="flex items-center gap-1.5 pr-2 rounded-xl hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] cursor-pointer transition-colors max-w-full"
@click="toggle">
</button>
</template>
</Dropdown> -->
</header>
</template>
app/components/Sidenav/HeaderAgent.vue
+5 -6
View File
@@ -21,7 +21,7 @@ const toggleDropdown = (e: MouseEvent) => {
for (const agent of agents.value || []) {
items.push({
label: agent.name,
icon: 'mynaui:check-hexagon',
icon: 'i-mynaui-check-hexagon',
active: activeAgent.value?.id === agent.id,
onClick: () => navigateTo(`/agent/${agent.id}`)
});
@@ -39,7 +39,7 @@ const toggleDropdown = (e: MouseEvent) => {
: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-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit text-[var(--text-secondary)] p-1.5">
<Icon name="mynaui:chevron-left" class="w-4.5 h-4.5" />
<span class="i-mynaui-chevron-left text-4.5"></span>
</NuxtLink>
</div>
@@ -50,16 +50,15 @@ const toggleDropdown = (e: MouseEvent) => {
<div
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
<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)]" />
<span v-else class="h-4 w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span>
</div>
<span
class="min-w-0 text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
{{ activeAgent?.name }}
</span>
<div class="shrink-0 w-4 h-4 text-[var(--text-secondary)]">
<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" />
<span
class="i-mynaui-chevron-up-down inline-block text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span>
</div>
</div>
</button>
app/components/Sidenav/Item.vue
+2 -2
View File
@@ -17,7 +17,7 @@ const props = defineProps<{
]">
<div class="flex items-center gap-2 max-w-full flex-1">
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
<Icon class="text-4.5" :name="props.icon" />
<span class="text-4.5" :class="props.icon"></span>
</div>
<div class="flex justify-between items-center w-full">
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
@@ -35,7 +35,7 @@ const props = defineProps<{
]">
<div class="flex items-center gap-2 max-w-full flex-1">
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
<Icon class="text-4.5" :name="props.icon" />
<span class="text-4.5" :class="props.icon"></span>
</div>
<div class="flex justify-between items-center w-full">
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
app/components/Sidenav/NavAgent.vue
+6 -4
View File
@@ -170,14 +170,16 @@ onMounted(() => {
<!-- Agent Info Link -->
<div class="mt-2 flex flex-col">
<SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="mynaui:info-square"
<SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="i-mynaui-info-square"
:active="route.path.endsWith('/profile')" />
<!-- Topics Section -->
<button @click="topicsOpen = !topicsOpen"
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
<span class="text-sm font-medium">Topics</span>
<Icon name="mynaui:chevron-down" :class="['w-4 h-4', topicsOpen ? '' : '-rotate-90']" />
<span
class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="topicsOpen ? '' : '-rotate-90'"></span>
</button>
<Collapsible :is-open="topicsOpen">
@@ -194,7 +196,7 @@ onMounted(() => {
@blur="saveRename"
class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
<div v-else-if="topic.renaming" class="flex w-full">
<Icon name="svg-spinners:3-dots-fade" class="text-6" />
<span class="i-svg-spinners-3-dots-fade text-6"></span>
</div>
<span v-else
class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
@@ -203,7 +205,7 @@ onMounted(() => {
<div data-action="toggle-dropdown"
class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="h-4.5 w-4.5 i-tabler:dots"></span>
<span class="h-4.5 w-4.5 i-tabler-dots"></span>
</div>
</a>
</template>
app/components/Sidenav/NavHome.vue
+8 -7
View File
@@ -99,16 +99,17 @@ onMounted(() => {
<template>
<nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
<SidenavItem name="Search" icon="mynaui:search" />
<SidenavItem to="/" name="Home" icon="mynaui:home" />
<SidenavItem name="Search" icon="i-mynaui-search" />
<SidenavItem to="/" name="Home" icon="i-mynaui-home" />
<!-- Header Toggle -->
<button
class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg hover:bg-[var(--color-hover)] transition-colors w-full"
@click="toggleAgentsList">
<span class="text-sm">Agents</span>
<Icon name="mynaui:chevron-down" class="w-4 h-4 transition-transform duration-200"
:class="{ '-rotate-90': !agentsOpen }" />
<span
class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="{ '-rotate-90': !agentsOpen }"></span>
</button>
<!-- Animated Section -->
@@ -117,8 +118,8 @@ onMounted(() => {
<button @click="newAgent" :disabled="creatingAgent"
class="flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
<div class="h-7 w-7 flex items-center justify-center">
<Icon v-if="creatingAgent" class="text-4.5" name="svg-spinners:ring-resize" />
<Icon v-else class="text-4.5" name="mynaui:plus" />
<span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-4.5"></span>
<span v-else class="i-mynaui-plus text-4.5"></span>
</div>
<span>New Agent</span>
</button>
@@ -140,7 +141,7 @@ onMounted(() => {
<div data-action="toggle-dropdown"
class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="h-4.5 w-4.5 i-tabler:dots"></span>
<span class="h-4.5 w-4.5 i-tabler-dots"></span>
</div>
</a>
</template>
app/components/Sidenav/index.vue
+5 -4
View File
@@ -122,15 +122,16 @@ const navKind = computed(() => {
<button aria-label="close sidebar" @click="closeSidebar" :class="[
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent transition-inherit',
]">
<Icon name="mynaui:panel-left-close"
:class="['transition-inherit transform-origin-right-center', isHovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95']" />
<span
class="i-mynaui-panel-left-close text-5 transition-inherit transform-origin-right-center"
:class="isHovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"></span>
</button>
</div>
<div v-if="navKind === 'agent'" class="flex-shrink-0 overflow-hidden rounded-lg">
<NuxtLink aria-label="Start a new topic" :to="`/agent/${route.params.id}`" :class="[
'flex text-5 h-8 w-8 items-center justify-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent text-inherit',
]">
<Icon name="mynaui:book-plus" />
<span class="i-mynaui-book-plus text-5"></span>
</NuxtLink>
</div>
</div>
@@ -145,7 +146,7 @@ const navKind = computed(() => {
<div class="flex">
<button @click="openDialog(DialogType.Settings)"
class="flex items-center justify-center h-7 w-7 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
<Icon name="mynaui:cog-four" class="text-5" />
<span class="i-mynaui-cog-four text-5"></span>
</button>
</div>