From 26db79584bfb63037426701fa013836b1a4db2ea Mon Sep 17 00:00:00 2001
From: aakashb95 <aakashbakhle@gmail.com>
Date: Thu, 18 Dec 2025 13:09:34 +0530
Subject: [PATCH] fix dropdowns

---
 .../captain/components/ModelSelector.vue      | 26 ++++++++-----------
 .../dashboard/store/captain/config.js         |  6 +----
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue
index f8d2cfbf0..4e7aa9343 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue
@@ -24,7 +24,6 @@ const emit = defineEmits(['change']);
 const { t } = useI18n();
 const isOpen = ref(false);
 
-const models = useMapGetter('captainConfig/getModels');
 const getModelsForFeature = useMapGetter('captainConfig/getModelsForFeature');
 const getDefaultModelForFeature = useMapGetter(
   'captainConfig/getDefaultModelForFeature'
@@ -36,26 +35,23 @@ const availableModels = computed(() =>
 const defaultModel = computed(() =>
   getDefaultModelForFeature.value(props.featureKey)
 );
-const selectedModel = ref(null);
+const selectedModelId = ref(null);
 
 watch(
   defaultModel,
   newDefault => {
-    if (newDefault && !selectedModel.value) {
-      selectedModel.value = newDefault;
+    if (newDefault && !selectedModelId.value) {
+      selectedModelId.value = newDefault;
     }
   },
   { immediate: true }
 );
 
 const selectedModelDetails = computed(() => {
-  if (!selectedModel.value || !models.value[selectedModel.value]) {
-    return null;
-  }
-  return {
-    key: selectedModel.value,
-    ...models.value[selectedModel.value],
-  };
+  if (!selectedModelId.value) return null;
+  return (
+    availableModels.value.find(m => m.id === selectedModelId.value) || null
+  );
 });
 
 const toggleDropdown = () => {
@@ -67,8 +63,8 @@ const closeDropdown = () => {
 };
 
 const selectModel = model => {
-  selectedModel.value = model.key;
-  emit('change', { feature: props.featureKey, model: model.key });
+  selectedModelId.value = model.id;
+  emit('change', { feature: props.featureKey, model: model.id });
   closeDropdown();
 };
 
@@ -113,11 +109,11 @@ const getCreditLabel = model => {
         <div class="py-1">
           <button
             v-for="model in availableModels"
-            :key="model.key"
+            :key="model.id"
             type="button"
             class="flex flex-col w-full px-3 py-2 text-left hover:bg-n-alpha-1"
             :class="{
-              'bg-n-alpha-2': selectedModel === model.key,
+              'bg-n-alpha-2': selectedModelId === model.id,
             }"
             @click="selectModel(model)"
           >
diff --git a/app/javascript/dashboard/store/captain/config.js b/app/javascript/dashboard/store/captain/config.js
index 77e7c2400..3a6b39fec 100644
--- a/app/javascript/dashboard/store/captain/config.js
+++ b/app/javascript/dashboard/store/captain/config.js
@@ -16,11 +16,7 @@ const getters = {
   getUIFlags: $state => $state.uiFlags,
   getModelsForFeature: $state => featureKey => {
     const feature = $state.features[featureKey];
-    if (!feature?.models) return [];
-    return feature.models.map(modelKey => ({
-      key: modelKey,
-      ...$state.models[modelKey],
-    }));
+    return feature?.models || [];
   },
   getDefaultModelForFeature: $state => featureKey => {
     const feature = $state.features[featureKey];