feat(diff fashion): added ability to see inline/side by side diff

components/buttons/copyLink.vue

@@ -1,32 +1,30 @@
 <template>
-  <div>
-    <button
-      id="copyLinkButton"
-      type="button"
-      class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow  justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
-      aria-label="Click here to copy url to clipboard"
-      :class="{
-        'bg-blue-500 text-white': !copied,
-        'bg-green-500 text-gray-800': copied,
-      }"
-      @click="clickHandler"
+  <button
+    id="copyLinkButton"
+    type="button"
+    class="inline-flex items-center justify-center gap-1 p-2 text-sm transition-transform transform rounded-md shadow  justify-self-end focus-visible:ring-4 active:scale-y-75 hover:scale-105 hover:shadow-lg copy-uri-button"
+    aria-label="Click here to copy url to clipboard"
+    :class="{
+      'bg-blue-500 text-white': !copied,
+      'bg-green-500 text-gray-800': copied,
+    }"
+    @click="clickHandler"
+  >
+    <span
+      class="inline-flex items-center justify-center gap-1"
+      aria-live="assertive"
+      role="status"
     >
-      <span
-        class="inline-flex items-center justify-center gap-1"
-        aria-live="assertive"
-        role="status"
-      >
-        <span v-show="copied" class="inline" aria-hidden="true">
-          <Copied />
-        </span>
-        <span v-show="copied" class="hidden md:inline-block">Copied</span>
-        <span v-show="!copied" class="inline" aria-hidden="true">
-          <Link />
-        </span>
-        <span v-show="!copied" class="hidden md:inline-block">Copy link</span>
+      <span v-show="copied" class="inline" aria-hidden="true">
+        <Copied />
       </span>
-    </button>
-  </div>
+      <span v-show="copied" class="hidden md:inline-block">Copied</span>
+      <span v-show="!copied" class="inline" aria-hidden="true">
+        <Link />
+      </span>
+      <span v-show="!copied" class="hidden md:inline-block">Copy link</span>
+    </span>
+  </button>
 </template>
 <script lang="ts">
 import Vue from 'vue'

components/buttons/diffStyle.vue

@@ -0,0 +1,53 @@
+<template>
+  <button
+    class="inline-flex items-center justify-center px-1 py-1 text-sm text-gray-600 transition-transform transform bg-gray-300 border border-gray-800 rounded-sm  dark:border-gray-400 dark:text-white dark:bg-gray-800 align-center focus-visible:ring-4 active:scale-y-75"
+    role="button"
+    :aria-label="label"
+    :title="label"
+    @click="handleClick"
+  >
+    <span
+      aria-live="assertive"
+      role="status"
+      :class="{
+        'inline-block transition-transform bg-gray-100': true,
+        'rotate-90': sideBySide,
+      }"
+    >
+      <DiffStyle class="w-6 h-6" />
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import DiffStyle from '~/components/icons/diffStyle.vue'
+export default Vue.extend({
+  components: { DiffStyle },
+  props: {
+    clickHandler: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      sideBySide: true,
+    }
+  },
+  computed: {
+    label() {
+      if (this.sideBySide) {
+        return 'Switch unified diff layout'
+      }
+      return 'Switch to split diff layout'
+    },
+  },
+  methods: {
+    handleClick() {
+      this.sideBySide = !this.sideBySide
+      this.clickHandler(this.sideBySide === true)
+    },
+  },
+})
+</script>

components/icons/diffStyle.vue

@@ -0,0 +1,26 @@
+<template>
+  <svg
+    id="Layer_1"
+    viewBox="0 0 122.742 122.881"
+    enable-background="new 0 0 122.742 122.881"
+    stroke="currentColor"
+    :class="className"
+  >
+    <g>
+      <path
+        d="M5.709,23.974h47.709V5.691c0-1.581,0.643-3.015,1.679-4.05C56.108,0.629,57.492,0,59,0h58.163 c1.508,0,2.891,0.628,3.902,1.641c1.035,1.036,1.678,2.469,1.678,4.05v87.524c0,1.582-0.643,3.016-1.678,4.051 c-1.012,1.012-2.395,1.641-3.902,1.641H69.453v18.283c0,1.582-0.645,3.016-1.68,4.051c-1.012,1.012-2.395,1.641-3.902,1.641H5.709 c-1.509,0-2.891-0.629-3.903-1.641c-1.036-1.035-1.679-2.469-1.679-4.051V74.389C0.044,74.082,0,73.76,0,73.428 c0-0.334,0.044-0.656,0.127-0.963V29.666c0-1.582,0.643-3.016,1.679-4.051C2.818,24.603,4.2,23.974,5.709,23.974L5.709,23.974z M94.113,29.137c1.395-1.468,3.717-1.525,5.184-0.129c1.469,1.396,1.525,3.718,0.129,5.185L88.514,45.609h27.131V7.319H60.517 v16.655h3.354c1.508,0,2.891,0.628,3.902,1.641c1.035,1.035,1.68,2.469,1.68,4.051v61.922h46.191V52.963h-27.15l10.932,11.476 c1.396,1.469,1.34,3.789-0.129,5.186c-1.467,1.396-3.789,1.338-5.184-0.129L77.27,51.815c-1.34-1.407-1.354-3.634,0-5.057 L94.113,29.137L94.113,29.137z M22.943,58.333c-1.396-1.468-1.338-3.789,0.129-5.185c1.468-1.396,3.789-1.338,5.185,0.129 L45.1,70.898c1.354,1.424,1.34,3.65-0.001,5.057L28.257,93.637c-1.396,1.467-3.717,1.525-5.185,0.129 c-1.467-1.395-1.525-3.717-0.129-5.184l10.932-11.479H7.227v38.459h55.127v-84.27H7.227V69.75h26.628L22.943,58.333L22.943,58.333z"
+      />
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    className: {
+      type: String,
+      required: false,
+    },
+  },
+})
+</script>

components/v2/diffActionBar.vue

@@ -20,7 +20,10 @@
       <NextDiff :click-handler="goToNextDiff" />
       <PrevDiff :click-handler="goToPreviousDiff" />
     </div>
-    <CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
+    <div class="flex items-center gap-4">
+      <DiffStyle :click-handler="toggleDiffFashion" />
+      <CopyLink :click-handler="copyUrlToClipboard" :copied="copied"></CopyLink>
+    </div>
   </section>
 </template>
 
@@ -29,19 +32,25 @@ import Vue from 'vue'
 import PrevDiff from '../buttons/prevDiff.vue'
 import NextDiff from '../buttons/nextDiff.vue'
 import CopyLink from '../buttons/copyLink.vue'
+import DiffStyle from '../buttons/diffStyle.vue'
 import { putToClipboard } from '~/helpers/utils'
 import { DiffActionBarData } from '~/helpers/types'
 export default Vue.extend({
   components: {
     PrevDiff,
     NextDiff,
     CopyLink,
+    DiffStyle,
   },
   props: {
     diffNavigator: {
       type: Object,
       required: true,
     },
+    onDiffFashion: {
+      type: Function,
+      required: true,
+    },
   },
   data(): DiffActionBarData {
     return {
@@ -88,6 +97,9 @@ export default Vue.extend({
     goToPreviousDiff() {
       this.diffNavigator.previous()
     },
+    toggleDiffFashion(value: boolean) {
+      this.onDiffFashion(value)
+    },
   },
 })
 </script>

helpers/types.ts

@@ -45,4 +45,5 @@ export interface v2DiffData {
   lhsLabel: string
   monacoDiffEditor: any
   diffNavigator: any
+  isSideBySideDiff: boolean
 }

pages/v2/diff.vue

@@ -11,11 +11,19 @@
       />
       <Navbar :show-back-button="true" />
       <main class="outline-none" tabindex="0">
-        <DiffActionBar :diff-navigator="diffNavigator" />
+        <DiffActionBar
+          :diff-navigator="diffNavigator"
+          :on-diff-fashion="toggleDiffFashion"
+        />
         <section
           class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
         >
-          <div class="flex w-full gap-4 space-around">
+          <div
+            :class="{
+              'flex w-full gap-4 space-around transition-opacity': true,
+              'opacity-0': !isSideBySideDiff,
+            }"
+          >
             <p
               class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
             >
@@ -61,6 +69,7 @@ export default Vue.extend({
       lhsLabel: '',
       monacoDiffEditor: {},
       diffNavigator: {},
+      isSideBySideDiff: true,
     }
   },
   head() {
@@ -127,6 +136,12 @@ export default Vue.extend({
       }
     })
   },
+  methods: {
+    toggleDiffFashion(value: boolean) {
+      this.monacoDiffEditor?.updateOptions?.({ renderSideBySide: value })
+      this.isSideBySideDiff = value
+    },
+  },
 })
 </script>