feat: improve auth pages

app/components/Dialog/QuickSwitcher.vue

@@ -135,7 +135,7 @@ onMounted(() => { inputRef.value?.focus(); });
                     <!-- AGENT ROW -->
                     <div v-if="item.type === 'agent'" :id="item.uiId" role="option"
                         :aria-selected="selectedIndex === index" @click="selectItem(item.uiId)"
-                        class="group flex items-center px-3 h-10 rounded-md cursor-pointer transition-colors mt-2 hover:bg-[var(--color-hover)]"
+                        class="group flex items-center px-3 h-10 rounded-md cursor-pointer transition-colors hover:bg-[var(--color-hover)]"
                         :class="selectedIndex === index ? 'bg-[var(--color-hover)] text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'">
                         <div
                             :class="['mr-2 w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', item?.imageUrl ? '' : 'border border-[var(--color-border)]']">
@@ -152,8 +152,8 @@ onMounted(() => { inputRef.value?.focus(); });
                         class="group flex items-center h-10 pr-3 rounded-md cursor-pointer transition-colors relative ml-10 hover:bg-[var(--color-hover)]"
                         :class="selectedIndex === index ? 'bg-[var(--color-hover)] text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'">
                         <!-- Visual Tree Lines -->
-                        <div class="absolute -left-4 top-0 bottom-0 w-[1px] h-[110%] bg-[var(--color-border)]"></div>
-                        <div class="absolute -left-4 top-5 w-3 h-[1px] bg-[var(--color-border)]"></div>
+                        <div class="absolute -left-4 top-0 bottom-0 w-[1px] h-[110%] bg-[var(--text-dim)]"></div>
+                        <div class="absolute -left-4 top-5 w-3 h-[1px] bg-[var(--text-dim)]"></div>
 
                         <span class="i-mynaui-hash mx-2 shrink-0 text-[var(--text-dim)] w-4 h-4"></span>
                         <span class="text-sm truncate">{{ item.name }}</span>

app/components/Sidenav/index.vue

@@ -151,7 +151,7 @@ const navKind = computed(() => {
                     </div>
 
                     <div class="flex justify-end gap-1">
-                        <ThemeSwitcher />
+                        <ThemeSwitcher size="small" />
                     </div>
                 </div>
             </div>

app/components/ThemeSwitcher.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import type { DropdownItem } from '~/types/dropdown';
 
+const props = defineProps<{
+    size: 'small' | 'medium' | 'large';
+}>();
+
 type Theme = 'light' | 'dark' | 'system';
 
 const { updateSettings, settings } = await useUserSettings();
@@ -34,7 +38,12 @@ const toggleDropdown = (e: MouseEvent) => {
 
 <template>
     <button aria-label="Open theme switcher" @click="toggleDropdown"
-        class="h-7 w-7 flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]">
-        <span :class="['text-5 pointer-events-none', currentOption!.icon]"></span>
+        class="flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
+        :class="{
+            'h-7 w-7 text-5': size === 'small',
+            'h-9 w-9 text-6': size === 'medium',
+            'h-11 w-11 text-7': size === 'large',
+        }">
+        <span :class="['pointer-events-none', currentOption!.icon]"></span>
     </button>
 </template>