feat(merge_component): ✨ add new merge layout

change to no overflowing on main x, syncing scroll

client/src/app/features/merge/merge.component.html

@@ -1,4 +1,4 @@
-<div class="h-[80vh]">
+<div class="h-[80vh] overflow-x-hidden">
   <!-- select a commit -->
   <div *ngIf="isPatchMapKeysLoaded()">
     <label for="patchKeys">Select a commit : </label>
@@ -75,7 +75,7 @@
   </div>
 
   <!-- 3 columns with master at center -->
-  <div class="flex flex-grow gap-4 p-4">
+  <div class="flex gap-4 p-4">
     <!-- from patch -->
     <div
       *ngIf="
@@ -110,8 +110,8 @@
         <summary class="collapse-title bg-red-200">
           {{ selectedCommit }}
         </summary>
-        <div class="collapse-content flex flex-row join-item join-horizontal">
+        <div class="collapse-content grid grid-cols-3">
-          <div>
+          <div class="flex-shrink-0 overflow-x-scroll shadow-lg" id="commit-source" (scroll)="addSyncingScrollDiffPane('commit-source')">
             <app-recipe-list
               [productCode]="
                 getCommitAttr(selectedCommit, 'contents').productCode
@@ -123,7 +123,7 @@
               (recipeListFormChange)="onRecipeListFormChange($event)"
             ></app-recipe-list>
           </div>
-          <div>
+          <div class="flex-shrink-0 overflow-x-scroll shadow-lg" id="main-source" (scroll)="addSyncingScrollDiffPane('main-source')">
             <app-recipe-list
               [productCode]="
                 getCommitAttr(selectedCommit, 'contents').productCode!
@@ -139,24 +139,11 @@
             ></app-recipe-list>
           </div>
           <div
+          class="flex-shrink-0 overflow-x-scroll shadow-lg"
             id="another-source"
+            (scroll)="addSyncingScrollDiffPane('another-source')"
             *ngIf="hasProductCodeOfCommits() && anotherSelectedSource != ''"
           >
-            <!-- right as base -->
-            <!-- <div class="flex flex-row justify-evenly w-52">
-              <input type="checkbox" id="right-as-base">
-              <p class="tooltip" data-tip="Recipe from machine has more priority than the saved recipe from web">Main Priority</p>
-            </div>
-            <div *ngFor="let pd of getProductCodesOfCommits()">
-              <div *ngIf="pd == getCommitAttr(selectedCommit, 'contents').productCode && anotherTargetRecipe[pd] != undefined">
-                <details class="collapse collapse-arrow">
-                  <summary class="collapse-title">{{pd}} - {{anotherSelectedSource}}</summary>
-                  <div>
-
-                  </div>
-                </details>
-              </div>
-            </div> -->
             <app-recipe-list
               [productCode]="
                 getCommitAttr(selectedCommit, 'contents').productCode!

client/src/app/features/merge/merge.component.ts

@@ -193,6 +193,7 @@ export class MergeComponent
     //   this.templateRecipeChangeContent,
     //   this._containerRef
     // );
+
   }
 
   ngOnDestroy(): void {
@@ -625,4 +626,37 @@ export class MergeComponent
   // ---------------
   // attach debugger
   eval = () => this.mergeDebugger.eval(this);
+
+
+  // ---------------
+  // scroll
+  addSyncingScrollDiffPane(name: string){
+    // get panes by id
+    let leftPane = document.getElementById('commit-source') as any;
+    let middlePane = document.getElementById('main-source') as any;
+    let rightPane = document.getElementById('another-source') as any;
+
+    //
+
+    switch(name){
+      case "commit-source":
+        middlePane!.scrollLeft = leftPane!.scrollLeft;
+        if(rightPane != null){
+          rightPane!.scrollLeft = leftPane!.scrollLeft;
+        }
+        break;
+      case "main-source":
+        leftPane!.scrollLeft = middlePane!.scrollLeft;
+        if(rightPane != null){
+          rightPane!.scrollLeft = middlePane!.scrollLeft;
+        }
+        break;
+      case "another-source":
+        if(rightPane != null){
+          middlePane!.scrollLeft = rightPane!.scrollLeft;
+          leftPane!.scrollLeft = rightPane!.scrollLeft;
+        }
+        break;
+    }
+  }
 }

client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html

@@ -44,7 +44,7 @@
     </div>
   </div>
 </details>
-<table class="table" [formGroup]="recipeListForm">
+<table class="table table-xs" [formGroup]="recipeListForm">
   <thead>
     <tr class="bg-gray-200">
       <th class="px-6 py-3">Is Use</th>