feat: replace nuxt icons with unocss icons

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
@@ -210,7 +210,7 @@ defineEmits(['navigate']);
@input="updateApiKey(($event.target! as HTMLInputElement).value)" />
<button @click="apiKeyVisible = !apiKeyVisible"
class="text-sm p-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)]">
<Icon :name="apiKeyVisible ? 'mynaui:eye' : 'mynaui:eye-slash'" class="text-4 min-h-4 min-w-4" />
<span class="text-4" :class="apiKeyVisible ? 'i-mynaui-eye' : 'i-mynaui-eye-slash'"></span>
</button>
</div>
</div>
@@ -227,8 +227,8 @@ defineEmits(['navigate']);
<div class="flex flex-row justify-center text-xs">
<p class="text-[var(--text-secondary)]">
<Icon name="mynaui:lock" /> Your API key is encrypted using <a
href="https://datatracker.ietf.org/doc/html/draft-ietf-avt-srtp-aes-gcm-01">AES-GCM</a> encryption.
<span class="i-mynaui-lock inline-block"></span> Your API key is encrypted using
<a href="https://datatracker.ietf.org/doc/html/draft-ietf-avt-srtp-aes-gcm-01">AES-GCM</a> encryption.
</p>
</div>
@@ -240,7 +240,7 @@ defineEmits(['navigate']);
{{ provider?.models.length }} models available <button
class="p-0.5 hover:bg-[var(--color-hover)] rounded transition-colors duration-200"
@click="deleteModels">
<Icon name="mynaui:x-solid" />
<span class="i-mynaui-x-solid"></span>
</button>
</span>
</h4>
@@ -251,20 +251,20 @@ defineEmits(['navigate']);
type="text" placeholder="Search models..." />
<button :class="modelSearch.length > 0 ? 'visible' : 'invisible'" @click="modelSearch = ''"
class="right-1 hover:bg-[var(--color-hover)] rounded transition-colors duration-200 p-0.5">
<Icon name="mynaui:x" class="text-3.5 block text-[var(--text-secondary)]" />
<span class="i-mynaui-x-solid text-3.5 block text-[var(--text-secondary)]"></span>
</button>
</div>
<button @click="fetchModels"
class="whitespace-nowrap flex bg-[var(--bg-container)] hover:bg-[var(--color-hover)] text-sm rounded-md items-center px-2 py-0.5 gap-2 transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon :class="[fetchingModels ? 'animate-rotate' : '']" name="mynaui:refresh" />
<span class="i-mynaui-refresh" :class="{ 'animate-rotate': fetchingModels }"></span>
fetch models
</button>
</div>
</div>
<div v-if="provider?.models?.length === 0" class="flex flex-row items-center justify-center gap-2 mt-2">
<Icon name="mynaui:info-circle" class="text-4" />
<span class="i-mynaui-info-circle text-4"></span>
<span class="text-sm text-[var(--text-secondary)]">
No models found
</span>
@@ -29,19 +29,19 @@ defineEmits(['navigate']);
<button @click="updateSettings({ appearance: { colorScheme: 'system' } })"
class="flex items-center gap-1 px-1 rounded-md hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="colorScheme.preference.value === 'system' ? 'bg-[var(--color-hover)]' : ''">
<Icon name="tabler:device-desktop" class="text-4" />
<span class="i-tabler-device-desktop text-4"></span>
<span>System</span>
</button>
<button @click="updateSettings({ appearance: { colorScheme: 'dark' } })"
class="flex items-center gap-1 px-1 rounded-md hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="colorScheme.preference.value === 'dark' ? 'bg-[var(--color-hover)]' : ''">
<Icon name="mynaui:moon" class="text-4" />
<span class="i-mynaui-moon text-4"></span>
<span>Dark</span>
</button>
<button @click="updateSettings({ appearance: { colorScheme: 'light' } })"
class="flex items-center gap-1 px-1 rounded-md hover:bg-[var(--color-hover)] transition-[background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
:class="colorScheme.preference.value === 'light' ? 'bg-[var(--color-hover)]' : ''">
<Icon name="mynaui:sun" class="text-4" />
<span class="i-mynaui-sun text-4"></span>
<span>Light</span>
</button>
</div>
+2 -2
View File
@@ -13,12 +13,12 @@ defineEmits(['navigate']);
<div class="flex flex-col gap-1 overflow-auto">
<button @click="$emit('navigate', 'general')"
class="flex items-center gap-2 p-2 rounded-lg text-sm hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:chevron-left" class="text-4" /> Back to General
<span class="i-mynaui-chevron-left text-4"></span> Back to General
</button>
<button @click="$emit('navigate', 'providers')"
class="flex items-center gap-2 p-2 rounded-lg text-sm hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<Icon name="mynaui:envelope-open" class="text-4" /> All
<span class="i-mynaui-envelope-open text-4"></span> All
</button>
<div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Enabled Providers</div>