Add Go to Next Difference feature - vue3.

Author: QusaiSabri

src/CodeDiff.vue

@@ -78,6 +78,35 @@ const raw = computed(() =>
 const diffChange = ref(raw.value)
 const isNotChanged = computed(() => diffChange.value.stat.additionsNum === 0 && diffChange.value.stat.deletionsNum === 0)
 
+const currentDiffIndex = ref(-1);
+
+const goToNextDiff = () => {
+  const diffs = document.querySelectorAll('.split-side-right.blob-code-addition');
+  if (currentDiffIndex.value < diffs.length - 1) {
+    currentDiffIndex.value++;
+    updateCurrentDiffHighlight(diffs);
+  }
+}
+
+const goToPrevDiff = () => {
+  const diffs = document.querySelectorAll('.split-side-right.blob-code-addition');
+  if (currentDiffIndex.value > 0) {
+    currentDiffIndex.value--;
+    updateCurrentDiffHighlight(diffs);
+  }
+}
+
+const updateCurrentDiffHighlight = (diffs: NodeListOf<Element>) => {
+  diffs.forEach((diff: { classList: { remove: (arg0: string) => any } }) => diff.classList.remove('current-diff'));
+
+  const currentDiff = diffs[currentDiffIndex.value];
+
+  if (currentDiff) {
+    currentDiff.classList.add('current-diff');
+    currentDiff.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+}
+
 watch(() => props, () => {
   diffChange.value = raw.value
   emits('diff', {
@@ -111,8 +140,20 @@ watch(() => props, () => {
         <span class="info-left">{{ filename }}</span>
         <span class="info-right">
           <span style="margin-left: 20px;">{{ newFilename }}</span>
-          <span v-if="!hideStat" class="diff-stat">
-            <slot name="stat" :stat="diffChange.stat">
+          <span class="diff-commandbar">
+              <button class="command-item-button" title="Next Change" @click="goToNextDiff">
+                <svg width="1rem" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M383.6,322.7L278.6,423c-5.8,6-13.7,9-22.4,9c-8.7,0-16.5-3-22.4-9L128.4,322.7c-12.5-11.9-12.5-31.3,0-43.2  c12.5-11.9,32.7-11.9,45.2,0l50.4,48.2v-217c0-16.9,14.3-30.6,32-30.6c17.7,0,32,13.7,32,30.6v217l50.4-48.2  c12.5-11.9,32.7-11.9,45.2,0C396.1,291.4,396.1,310.7,383.6,322.7z"/>
+                </svg>
+              </button>
+              <button class="command-item-button" title="Previous Change" @click="goToPrevDiff">
+                <svg width="1rem" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M128.4,189.3L233.4,89c5.8-6,13.7-9,22.4-9c8.7,0,16.5,3,22.4,9l105.4,100.3c12.5,11.9,12.5,31.3,0,43.2  c-12.5,11.9-32.7,11.9-45.2,0L288,184.4v217c0,16.9-14.3,30.6-32,30.6c-17.7,0-32-13.7-32-30.6v-217l-50.4,48.2  c-12.5,11.9-32.7,11.9-45.2,0C115.9,220.6,115.9,201.3,128.4,189.3z"/>
+                </svg>
+              </button>
+          </span>
+          <span v-if="!hideStat" class="diff-stat">         
+            <slot name="stat" :stat="diffChange.stat">             
               <span class="diff-stat-added">+{{ diffChange.stat.additionsNum }} additions</span>
               <span class="diff-stat-deleted">-{{ diffChange.stat.deletionsNum }} deletions</span>
             </slot>

src/style.scss

@@ -51,6 +51,25 @@
           color: var(--color-fg-subtle);
         }
       }
+
+      .diff-commandbar {
+        margin-left: auto;
+        margin-right: 1rem;
+        
+        .command-item-button {
+          background-color: transparent;
+          color: var(--color-fg-subtle);
+          border: none;
+
+          svg {
+            fill: var(--color-fg-subtle);          
+          }
+        }
+
+        .command-item-button:hover {
+          background-color: var(--color-btn-outline-hover-border);
+        }
+      }
     }
   }
 
@@ -122,6 +141,10 @@
         background-color: var(--color-diff-blob-addition-word-bg);
       }
     }
+    
+    .current-diff {
+      border: 1px solid var(--color-border-muted);
+    }
 
     .blob-code-context,
     .blob-code-addition,