optimized ux of area designer

resources/js/components/AreaDesginer.vue

@@ -6,11 +6,37 @@
                 <span v-if="p !== 0" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,-1)">
                     <i class="ri-arrow-up-line"></i>
                 </span>
-                <span v-if="p != partsData.length - 1" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,1)">
+                <span v-if="p != partsData.length - 1" class="btn btn-secondary btn-sm float-end mx-1"
+                      @click="shiftArray(p,1)">
                     <i class="ri-arrow-down-line"></i>
                 </span>
             </div>
             <div class="part-body">
+                <div class="row text-center">
+                    <div class="col">
+                        <button type="button" class="btn btn-secondary mt-4" @click="activeIndex = p">
+                            <i class="ri-edit-2-line"></i>
+                        </button>
+                    </div>
+                    <div class="col-6">
+                        <div class="text-center">
+                            <template v-for="(valid,i) in valids">
+                                <div v-if="valid.data.name == part.part">
+                                    <img class="img-fluid" :src="imageLink+'/'+valid.segment+'/'+valid.part"
+                                         alt="screeshot">
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <button type="button" class="btn btn-danger mt-4" @click="rem(p)">
+                            <i class="ri-close-line"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <div v-if="p == activeIndex">
+                    <hr>
                     <div class="rw">
                         <template v-for="(valid,i) in valids">
                             <div @click="changePart(p,valid.segment,valid.part)"
@@ -22,10 +48,6 @@
                         </template>
                     </div>
                 </div>
-            <div class="card-footer">
-                <button type="button" class="btn btn-danger" @click="rem(p)">
-                    <i class="ri-close-line"></i>
-                </button>
             </div>
             <input type="hidden" name="parts[]" :value="JSON.stringify(part)" class="form-control">
         </div>
@@ -46,6 +68,7 @@ export default {
         return {
             partsData: [],
             removed: [],
+            activeIndex: null,
         }
     },
     props: {
@@ -89,7 +112,7 @@ export default {
             this.partsData.splice(i, 1);
         },
         shiftArray(index, offset) {
-            console.log(index,offset);
+            console.log(index, offset);
             if (index < 0 || index >= this.partsData.length) {
                 return "Index out of bounds";
             }
@@ -125,9 +148,10 @@ export default {
     cursor: pointer;
 }
 
-.rw{
+.rw {
     column-count: 3;
-    div{
+
+    div {
         margin-bottom: 1rem;
     }
 }