Implements color clues for history navigation arrows (#1579)

Co-authored-by: Preston <freetubeapp@protonmail.com>

src/renderer/App.js

@@ -138,6 +138,10 @@ export default Vue.extend({
           this.checkForNewBlogPosts()
         }, 500)
       })
+
+      this.$router.afterEach((to, from) => {
+        this.$refs.topNav.navigateHistory()
+      })
     })
   },
   methods: {
@@ -278,10 +282,10 @@ export default Vue.extend({
       if (event.altKey) {
         switch (event.code) {
           case 'ArrowRight':
-            window.history.forward()
+            this.$refs.topNav.historyForward()
             break
           case 'ArrowLeft':
-            window.history.back()
+            this.$refs.topNav.historyBack()
             break
         }
       }

src/renderer/components/top-nav/top-nav.js

@@ -20,6 +20,8 @@ export default Vue.extend({
       windowWidth: 0,
       showFilters: false,
       searchFilterValueChanged: false,
+      historyIndex: 1,
+      isForwardOrBack: false,
       searchSuggestionsDataList: []
     }
   },
@@ -257,12 +259,41 @@ export default Vue.extend({
       this.searchFilterValueChanged = filterValueChanged
     },
 
+    navigateHistory: function() {
+      if (!this.isForwardOrBack) {
+        this.historyIndex = window.history.length
+        $('#historyArrowBack').removeClass('fa-arrow-left')
+        $('#historyArrowForward').addClass('fa-arrow-right')
+      } else {
+        this.isForwardOrBack = false
+      }
+    },
+
     historyBack: function () {
+      this.isForwardOrBack = true
       window.history.back()
+
+      if (this.historyIndex > 1) {
+        this.historyIndex--
+        $('#historyArrowForward').removeClass('fa-arrow-right')
+        if (this.historyIndex === 1) {
+          $('#historyArrowBack').addClass('fa-arrow-left')
+        }
+      }
     },
 
     historyForward: function () {
+      this.isForwardOrBack = true
       window.history.forward()
+
+      if (this.historyIndex < window.history.length) {
+        this.historyIndex++
+        $('#historyArrowBack').removeClass('fa-arrow-left')
+
+        if (this.historyIndex === window.history.length) {
+          $('#historyArrowForward').addClass('fa-arrow-right')
+        }
+      }
     },
 
     toggleSideNav: function () {

src/renderer/components/top-nav/top-nav.sass

@@ -38,6 +38,12 @@
   width: 1em
   height: 1em
 
+  &.fa-arrow-left, &.fa-arrow-right
+    color: gray
+    opacity: 0.5
+    pointer-events: none
+    user-select: none
+
   @include top-nav-is-colored
     color: var(--text-with-main-color)
 

src/renderer/components/top-nav/top-nav.vue

@@ -13,7 +13,8 @@
         @keypress="toggleSideNav"
       />
       <font-awesome-icon
-        class="navBackIcon navIcon"
+        id="historyArrowBack"
+        class="navBackIcon navIcon fa-arrow-left"
         icon="arrow-left"
         role="button"
         tabindex="0"
@@ -22,7 +23,8 @@
         @keypress="historyBack"
       />
       <font-awesome-icon
-        class="navForwardIcon navIcon"
+        id="historyArrowForward"
+        class="navForwardIcon navIcon fa-arrow-right"
         icon="arrow-right"
         role="button"
         tabindex="0"