feat: replace settings with a full page

app/components/ModelSelector.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue';
 import { useFloating, offset, flip, shift, autoUpdate, size, hide } from '@floating-ui/vue';
-import { DialogType } from '~/composables/useDialog';
 import type { Model, ModelWithProvider, Provider, ProviderWithModels } from '~/composables/useModels';
 import { sortByReleaseDate } from '~/utils/sort';
 import RowVirtualizerFixed from './RowVirtualizerFixed.vue';
 
-const { openDialog } = useDialog();
 const { allModels } = await useModels();
 const { addShortcut } = useKeyboardShortcuts();
 
@@ -17,6 +15,12 @@ const props = defineProps<{
 
 const selectedModel = defineModel<ModelWithProvider | null>();
 
+const openProviderSettings = async (providerId?: string) => {
+    closeDropdown();
+
+    await navigateTo(providerId ? `/settings/providers/${providerId}` : '/settings/providers');
+};
+
 const isOpen = ref(false);
 const dropdownButton = ref<HTMLElement | null>(null);
 const dropdownContent = ref<HTMLElement | null>(null);
@@ -269,7 +273,7 @@ onUnmounted(() => {
                                             class="px-4 py-1.5 text-[13px] h-10.5 items-end font-medium text-[var(--text-secondary)] case-capital tracking-wider flex justify-between">
                                             {{ item.provider.name }}
                                             <button
-                                                @click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers', params: item.provider.id })"
+                                                @click="openProviderSettings(item.provider.id)"
                                                 class="flex h-5 w-5 items-center justify-center @hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                                                 <span class="i-mynaui-cog-four text-4"></span>
                                             </button>
@@ -295,7 +299,7 @@ onUnmounted(() => {
                     <div class="p-1 border-t border-[var(--color-border)]">
                         <button
                             class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] @hover:text-[var(--text-primary)] @hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
-                            @click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers' });">
+                            @click="openProviderSettings()">
                             <span class="i-mynaui-cog-four text-4.5"></span>
                             <span>Manage Providers</span>
                             <span class="i-mynaui-arrow-right text-4 ml-auto"></span>