From 60f001bc74b23e46af203a2243d888d4a5207ee5 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 28 Aug 2024 18:48:22 +0530
Subject: [PATCH 1/3] fix(navbar,theme): theme icon not reflecting current
 theme correctly

---
 components/v2/navbar.vue | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/v2/navbar.vue b/components/v2/navbar.vue
index 1ba591b..775fcb5 100644
--- a/components/v2/navbar.vue
+++ b/components/v2/navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
+    class="sticky top-0 left-0 right-0 z-10 text-gray-800 shadow-lg  dark:shadow-dark bg-gray-50 dark:bg-gray-900 dark:text-gray-50"
   >
     <div class="container flex items-center py-4 m-auto">
       <div
@@ -66,8 +66,10 @@
           <slot name="right" />
           <button
             type="button"
-            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
-            aria-label="Toggle Dark Mode"
+            class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75 hover:scale-105 hover:shadow-lg"
+            :aria-label="
+              darkMode ? 'Switch to light theme' : 'Switch to dark theme'
+            "
             @click="toggleDarkMode"
           >
             <svg
@@ -173,8 +175,8 @@ export default Vue.extend({
   },
   mounted() {
     if (darkMode === null) {
-      darkMode = this.$cookies.isDarkMode
-      if (darkMode) {
+      this.darkMode = darkMode = this.$cookies.isDarkMode
+      if (this.$cookies.isDarkMode) {
         document.documentElement.classList.add('dark')
         document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
       }
@@ -183,9 +185,12 @@ export default Vue.extend({
   },
   methods: {
     toggleDarkMode() {
-      darkMode = !darkMode
-      document.documentElement.classList[darkMode ? 'add' : 'remove']('dark')
-      document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
+      const currentDarkMode = this.darkMode
+      document.documentElement.classList[!currentDarkMode ? 'add' : 'remove'](
+        'dark'
+      )
+      document.cookie = `darkMode=${!currentDarkMode}; Secure; max-age=31536000; path=/;`
+      this.darkMode = !currentDarkMode
     },
   },
 })

From 51c28821c7e77a23697dc3fd45d20b3008acf45a Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 28 Aug 2024 18:49:17 +0530
Subject: [PATCH 2/3] fix(tutorial): added tutorials for v2 path too

---
 helpers/driverjsTutorials.ts | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/helpers/driverjsTutorials.ts b/helpers/driverjsTutorials.ts
index 7e1502e..cd3a8b8 100644
--- a/helpers/driverjsTutorials.ts
+++ b/helpers/driverjsTutorials.ts
@@ -90,19 +90,22 @@ const diffTutorials: TutorialMetadata[] = [
   },
 ]
 
+const comparePageTutorials: TutorialMetadata[] = [
+  {
+    tutorial: labelsTutorial,
+    cookieName: 'isSkipTutorial',
+  },
+  {
+    tutorial: submitShortcutTutorial,
+    cookieName: 'isSkipSubmitKbdShortcutTutorial',
+  },
+]
+
 const tutorialsMetadata: TutorialsMetadata = {
   '/v1/diff': diffTutorials,
-  'v2/diff': diffTutorials,
-  '/': [
-    {
-      tutorial: labelsTutorial,
-      cookieName: 'isSkipTutorial',
-    },
-    {
-      tutorial: submitShortcutTutorial,
-      cookieName: 'isSkipSubmitKbdShortcutTutorial',
-    },
-  ],
+  '/v2/diff': diffTutorials,
+  '/': comparePageTutorials,
+  '/v2': comparePageTutorials,
 }
 
 export default async function showTutorials(

From 0caf592aedf17e668b0b79f6f0f1273679ec4894 Mon Sep 17 00:00:00 2001
From: Nikhil Mehta <nikhil.001mehta@gmail.com>
Date: Wed, 28 Aug 2024 20:23:40 +0530
Subject: [PATCH 3/3] fix(theme): changing monaco editor theme programatically
 on theme change

---
 components/v2/navbar.vue |  4 +++-
 pages/v2/diff.vue        | 42 +++++++++++++---------------------------
 pages/v2/index.vue       | 31 +++++++++++++----------------
 store/theme.ts           | 20 +++++++++++++++++++
 4 files changed, 49 insertions(+), 48 deletions(-)
 create mode 100644 store/theme.ts

diff --git a/components/v2/navbar.vue b/components/v2/navbar.vue
index 775fcb5..b612207 100644
--- a/components/v2/navbar.vue
+++ b/components/v2/navbar.vue
@@ -176,9 +176,10 @@ export default Vue.extend({
   mounted() {
     if (darkMode === null) {
       this.darkMode = darkMode = this.$cookies.isDarkMode
-      if (this.$cookies.isDarkMode) {
+      if (darkMode) {
         document.documentElement.classList.add('dark')
         document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
+        this.$store.commit('theme/set', darkMode)
       }
     }
     document.documentElement.classList.remove('hidden')
@@ -190,6 +191,7 @@ export default Vue.extend({
         'dark'
       )
       document.cookie = `darkMode=${!currentDarkMode}; Secure; max-age=31536000; path=/;`
+      this.$store.commit('theme/set', !currentDarkMode)
       this.darkMode = !currentDarkMode
     },
   },
diff --git a/pages/v2/diff.vue b/pages/v2/diff.vue
index 7708741..b6e854d 100644
--- a/pages/v2/diff.vue
+++ b/pages/v2/diff.vue
@@ -1,44 +1,21 @@
 <template>
   <div class="page-contents">
+    <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
+    <input type="hidden" inert :value="onThemeChange" />
     <Navbar :show-back-button="true" />
     <main class="outline-none" tabindex="0">
       <DiffActionBar :diff-navigator="diffNavigator" />
       <section
-        class="
-          flex
-          items-stretch
-          flex-wrap
-          w-full
-          gap-4
-          font-mono
-          text-gray-800
-          dark:text-gray-50
-        "
+        class="flex flex-wrap items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
       >
-        <div class="flex space-around w-full gap-4">
+        <div class="flex w-full gap-4 space-around">
           <p
-            class="
-              flex-grow-0 flex-shrink-0
-              w-1/2
-              text-lg
-              font-bold
-              text-center
-              capitalize
-              break-all
-            "
+            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
           >
             <span class="inline-block w-4/5">{{ lhsLabel }}</span>
           </p>
           <p
-            class="
-              flex-grow-0 flex-shrink-0
-              w-1/2
-              text-lg
-              font-bold
-              text-center
-              capitalize
-              break-all
-            "
+            class="flex-grow-0 flex-shrink-0 w-1/2 text-lg font-bold text-center capitalize break-all "
           >
             <span class="inline-block w-4/5">{{ rhsLabel }}</span>
           </p>
@@ -76,6 +53,13 @@ export default Vue.extend({
       diffNavigator: {},
     }
   },
+  computed: {
+    onThemeChange() {
+      const theme = this.$store.state.theme.darkMode ? 'vs-dark' : 'light'
+      this.monacoDiffEditor?.updateOptions?.({ theme })
+      return this.$store.state.theme.darkMode
+    },
+  },
   beforeMount() {
     const _diff = this.$route.hash
     if (_diff) {
diff --git a/pages/v2/index.vue b/pages/v2/index.vue
index 9bbe977..6200a9e 100644
--- a/pages/v2/index.vue
+++ b/pages/v2/index.vue
@@ -1,6 +1,9 @@
+n
 <template>
   <div class="page-contents">
     <Navbar />
+    <!-- Following hidden input is hacky way to update monaco editor theme when user changes theme manually -->
+    <input type="hidden" inert :value="onThemeChange" />
     <main class="text-gray-800 outline-none dark:text-gray-50" tabindex="0">
       <section>
         <header>
@@ -54,23 +57,7 @@
         <div class="self-end flex-grow-0 w-full mt-4 text-center">
           <button
             id="submitButton"
-            class="
-              inline-flex
-              items-center
-              justify-center
-              w-48
-              px-4
-              py-2
-              transition-transform
-              transform
-              bg-blue-600
-              rounded-md
-              shadow-lg
-              outline-none
-              text-gray-50
-              focus:ring-4
-              active:scale-y-75
-            "
+            class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
             aria-label="Click here to compare the inputted text blocks"
           >
             Compare
@@ -101,6 +88,14 @@ export default Vue.extend({
       rhsEditor: null,
     }
   },
+  computed: {
+    onThemeChange() {
+      const theme = this.$store.state.theme.darkMode ? 'vs-dark' : 'light'
+      this.lhsEditor?.updateOptions({ theme })
+      this.rhsEditor?.updateOptions({ theme })
+      return this.$store.state.theme.darkMode
+    },
+  },
   mounted() {
     showTutorials(this.$cookies, this.$route.path, this.$cookies.isDarkMode)
     document.addEventListener('keydown', this.handleCtrlEnter)
@@ -121,7 +116,7 @@ export default Vue.extend({
         this.rhsEditor = monaco.editor.create(rhs, {
           ...monacoEditorOptions,
           value: this.rhs || '',
-          wordWrap: 'on'
+          wordWrap: 'on',
         })
       }
     })
diff --git a/store/theme.ts b/store/theme.ts
new file mode 100644
index 0000000..c40f2f4
--- /dev/null
+++ b/store/theme.ts
@@ -0,0 +1,20 @@
+import { GetterTree, MutationTree } from 'vuex/types'
+
+export const state = () => ({
+  darkMode: false
+})
+
+export type themeStore = ReturnType<typeof state>
+
+export const getters: GetterTree<themeStore, themeStore> = {
+  isEnabled: (state) => state.darkMode,
+}
+
+export const mutations: MutationTree<themeStore> = {
+  toggle(state) {
+    state.darkMode = !state.darkMode
+  },
+  set(state, value) {
+    state.darkMode = value
+  }
+}