refactor: simplify BulkSearchControls activeStep logic, remove watchers, update styling

Author: akramcodez

openlibrary/components/BulkSearch/components/BulkSearchControls.vue

@@ -169,10 +169,18 @@ export default {
             loadingMatchedBooks: false,
             matchBooksDisabled: true,
             createListDisabled: true,
-            activeStep: 1,
         }
     },
     computed: {
+        activeStep() {
+            if (!this.createListDisabled) {
+                return 3;
+            } else if (!this.matchBooksDisabled) {
+                return 2;
+            } else {
+                return 1;
+            }
+        },
         showApiKey(){
             if (this.bulkSearchState.activeExtractor) return 'model' in this.bulkSearchState.activeExtractor
             return false
@@ -195,22 +203,6 @@ export default {
             if (newValue!==''){
                 this.bulkSearchState.inputText = newValue;
             }
-        },
-        matchBooksDisabled(newValue) {
-            if (!newValue) {
-                this.activeStep = 2;
-                this.$nextTick(() => {
-                    this.$refs.step2?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
-                });
-            }
-        },
-        createListDisabled(newValue) {
-            if (!newValue) {
-                this.activeStep = 3;
-                this.$nextTick(() => {
-                    this.$refs.step3?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
-                });
-            }
         }
     },
     methods: {
@@ -288,6 +280,12 @@ textarea {
     display:flex;
     column-gap:16px;
     flex-shrink:0;
+    border: 1px solid transparent;
+    border-bottom: 5px solid transparent;
+    
+    &.activeStep {
+        border-color: #0376B8;
+    }
     .info{
         display:flex;
         flex-direction:column;
@@ -341,12 +339,6 @@ textarea {
     opacity:50%;
 }
 
-.activeStep{
-    border: 1px solid #0376B8;
-    border-bottom: 5px solid #0376B8;
-}
-
-
 .api-key-bar{
     width:100%;
     box-sizing:border-box;

openlibrary/components/BulkSearch/components/MatchRow.vue

@@ -60,6 +60,10 @@ th {
     align-items: center;
     overflow-x:auto;
     scrollbar-width:thin;
+    
+    .book-card--primary {
+        margin-right: 20px;
+    }
 }