remember pairlist collapsed state

src/components/ftbot/PairlistConfigItem.vue

@@ -26,22 +26,22 @@
           @click="pairlistStore.removeFromConfig(index)"
         />
         <i-mdi-chevron-down
-          v-if="!showParameters"
+          v-if="!pairlist.showParameters"
-          :class="hasParameters && !showParameters ? 'visible' : 'invisible'"
+          :class="hasParameters && !pairlist.showParameters ? 'visible' : 'invisible'"
           role="button"
           class="fs-4"
           @click="toggleVisible"
         />
         <i-mdi-chevron-up
-          v-if="showParameters"
+          v-if="pairlist.showParameters"
-          :class="hasParameters && showParameters ? 'visible' : 'invisible'"
+          :class="hasParameters && pairlist.showParameters ? 'visible' : 'invisible'"
           role="button"
           class="fs-4"
           @click="toggleVisible"
         />
       </div>
     </template>
-    <b-collapse v-model="showParameters">
+    <b-collapse v-model="pairlist.showParameters">
       <b-card-body>
         <PairlistConfigParameter
           v-for="(parameter, key) in pairlist.params"
@@ -58,7 +58,7 @@
 import PairlistConfigParameter from '@/components/ftbot/PairlistConfigParameter.vue';
 import { usePairlistConfigStore } from '@/stores/pairlistConfig';
 import { Pairlist } from '@/types';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 const pairlistStore = usePairlistConfigStore();
 
@@ -66,15 +66,13 @@ defineProps<{
   index: number;
 }>();
 
-const showParameters = ref(false);
-
 const pairlist = defineModel<Pairlist>({ required: true });
 
 const hasParameters = computed(() => Object.keys(pairlist.value.params).length > 0);
 
 function toggleVisible() {
   if (hasParameters.value) {
-    showParameters.value = !showParameters.value;
+    pairlist.value.showParameters = !pairlist.value.showParameters;
   }
 }
 </script>

src/components/ftbot/PairlistConfigurator.vue

@@ -58,7 +58,7 @@
         :class="{ empty: configEmpty }"
       >
         <PairlistConfigItem
-          v-for="(pairlist, i) in pairlistsComp"
+          v-for="(pairlist, i) in pairlistStore.config.pairlists"
           :key="pairlist.id"
           v-model="pairlistStore.config.pairlists[i]"
           :index="i"
@@ -103,17 +103,6 @@ const pairlistConfigsEl = ref<HTMLElement | null>(null);
 const availablePairlistsEl = ref<HTMLElement | null>(null);
 const selectedView = ref<'Config' | 'Results'>('Config');
 
-// v-for updates with sorting, deleting and adding items seem to get wonky without unique keys for every item
-const pairlistsComp = computed(() =>
-  pairlistStore.config.pairlists.map((p) => {
-    if (p.id) {
-      return p;
-    } else {
-      return { id: Date.now().toString(36) + Math.random().toString(36).substring(2), ...p };
-    }
-  }),
-);
-
 const configEmpty = computed(() => {
   return pairlistStore.config.pairlists.length == 0;
 });

src/stores/pairlistConfig.ts

@@ -62,6 +62,10 @@ export const usePairlistConfigStore = defineStore(
 
     function addToConfig(pairlist: Pairlist, index: number) {
       pairlist = structuredClone(toRaw(pairlist));
+      pairlist.showParameters = false;
+      if (!pairlist.id) {
+        pairlist.id = Date.now().toString(36) + Math.random().toString(36).substring(2);
+      }
       for (const param in pairlist.params) {
         pairlist.params[param].value = isNotUndefined(pairlist.params[param].default)
           ? pairlist.params[param].default

src/types/pairlists.ts

@@ -15,6 +15,7 @@ export interface Pairlist {
   is_pairlist_generator: boolean;
   name: string;
   description: string;
+  showParameters: boolean;
   params: Record<string, PairlistParameter>;
 }