fix: dropdown settings buttons | fix: improve model selector

I should have split this into two commits, but I found the issue with the
settings buttons *after* I changed how the model selector worked, so its
all in this single commit.

app/components/Settings/AIServiceProvider.vue

@@ -7,14 +7,17 @@ import ModelItem from './ModelItem.vue';
 import RowVirtualizerDynamic from '../RowVirtualizerDynamic.vue';
 const triplit = useTriplitClient();
 
-const { pageParams } = useSettings();
+const props = defineProps<{
+    params?: string;
+}>();
+
 const { providers } = useModels();
 
 const scrollContainerRef = ref<HTMLDivElement | null>(null);
 
 const provider = computed(() => {
-    if (pageParams.value.length === 0) return null;
-    return providers.value!.find(p => p.id === pageParams.value[0]);
+    if (props.params === undefined) return null;
+    return providers.value!.find(p => p.id === props.params);
 });
 
 watch(provider, async () => {
@@ -28,8 +31,8 @@ const apiKey = ref('');
 const apiProxyUrl = ref(provider.value?.config.apiProxyUrl ?? '');
 const modelSearch = ref('');
 
-watch(pageParams, () => {
-    if (pageParams.value.length === 0) return;
+watch(() => props.params, () => {
+    if (props.params === undefined) return;
     console.log(scrollContainerRef.value);
     apiKey.value = provider.value?.config.apiKey ?? '';
     apiProxyUrl.value = provider.value?.config.apiProxyUrl ?? '';