Add open/close collapsible, enable animation for blacklist

src/components/ftbot/PairlistConfigBlacklist.vue

@@ -2,15 +2,30 @@
   <b-card no-body class="mb-2">
     <template #header>
       <div
-        class="d-flex flex-column align-items-center fw-bold fd-italic"
+        class="d-flex flex-row align-items-center justify-content-between"
         role="button"
         @click="visible = !visible"
       >
-        Blacklist
+        <span class="fw-bold fd-italic">Blacklist</span>
+        <i-mdi-chevron-down
+          v-if="!visible"
+          :class="!visible ? 'visible' : 'invisible'"
+          role="button"
+          class="fs-4"
+          @click="visible = !visible"
+        />
+        <i-mdi-chevron-up
+          v-if="visible"
+          :class="visible ? 'visible' : 'invisible'"
+          role="button"
+          class="fs-4"
+          @click="visible = !visible"
+        />
       </div>
     </template>
-    <b-card-body :class="{ hidden: !visible }">
+    <b-card-body class="p-0">
       <b-collapse v-model="visible">
+        <div class="p-3">
           <b-input-group v-for="(item, i) in pairlistStore.blacklist" :key="i" class="mb-2">
             <b-form-input v-model="pairlistStore.blacklist[i]" />
             <b-input-group-append>
@@ -20,6 +35,7 @@
             </b-input-group-append>
           </b-input-group>
           <b-button @click="pairlistStore.addToBlacklist()">Add</b-button>
+        </div>
       </b-collapse>
     </b-card-body>
   </b-card>
@@ -31,14 +47,4 @@ const pairlistStore = usePairlistConfigStore();
 
 const visible = ref(false);
 </script>
-<style lang="scss" scoped>
-.hidden {
-  padding: 0;
-}
-
-:deep(.collapsing) {
-  -webkit-transition: none;
-  transition: none;
-  display: none;
-}
-</style>
+<style lang="scss" scoped></style>