From d18b549509e6fffda356570d9dc1f02b194df032 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 2 Jun 2024 20:42:09 -0500
Subject: [PATCH 01/18] Supplant mousedown handler for ft-icon-button

---
 .../components/ft-icon-button/ft-icon-button.js  | 16 +++-------------
 .../components/ft-icon-button/ft-icon-button.vue |  9 +++++----
 2 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 90ca0fb20f55..3d32ab000a0f 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -69,7 +69,6 @@ export default defineComponent({
   data: function () {
     return {
       dropdownShown: false,
-      mouseDownOnIcon: false,
       useModal: false
     }
   },
@@ -111,24 +110,15 @@ export default defineComponent({
       }
     },
 
-    handleIconMouseDown: function () {
-      if (this.disabled) { return }
-      if (this.dropdownShown) {
-        this.mouseDownOnIcon = true
-      }
-    },
-
     handleDropdownFocusOut: function () {
-      if (this.mouseDownOnIcon) {
-        this.mouseDownOnIcon = false
-      } else if (!this.$refs.dropdown.matches(':focus-within')) {
+      if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
       }
     },
 
     handleDropdownEscape: function () {
-      this.$refs.iconButton.focus()
-      // handleDropdownFocusOut will hide the dropdown for us
+      this.dropdownShown = false
+      this.$refs.ftIconButton.firstElementChild.focus()
     },
 
     handleDropdownClick: function ({ url, index }) {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 4c6af4f0e3d4..27580a600930 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -1,7 +1,10 @@
 <template>
-  <div class="ftIconButton">
+  <div
+    ref="ftIconButton"
+    class="ftIconButton"
+    @focusout="handleDropdownFocusOut"
+  >
     <font-awesome-icon
-      ref="iconButton"
       class="iconButton"
       :title="title"
       :icon="icon"
@@ -19,7 +22,6 @@
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
       @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
@@ -67,7 +69,6 @@
           bottom: dropdownPositionY === 'bottom',
           top: dropdownPositionY === 'top'
         }"
-        @focusout="handleDropdownFocusOut"
         @keydown.esc.stop="handleDropdownEscape"
       >
         <slot>

From 041b1ec0445e6238d4d1affea2e7dfd3466eecdc Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sat, 27 Apr 2024 10:03:35 -0500
Subject: [PATCH 02/18] Implement navigation history dropdowns

---
 src/renderer/App.js                           |  2 +-
 .../ft-icon-button/ft-icon-button.js          | 34 +++++++++++--
 .../ft-icon-button/ft-icon-button.vue         |  2 +
 src/renderer/components/top-nav/top-nav.js    | 51 +++++++++++++++----
 src/renderer/components/top-nav/top-nav.scss  | 18 ++++---
 src/renderer/components/top-nav/top-nav.vue   | 28 ++++++----
 src/renderer/store/modules/utils.js           | 33 +++++++++++-
 7 files changed, 134 insertions(+), 34 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index c669960c5c88..52df473d8245 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -200,7 +200,7 @@ export default defineComponent({
       })
 
       this.$router.afterEach((to, from) => {
-        this.$refs.topNav?.navigateHistory()
+        this.$refs.topNav?.navigateHistory(to)
       })
 
       this.$router.onReady(() => {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 3d32ab000a0f..d24fc6ec1901 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -63,12 +63,17 @@ export default defineComponent({
     dropdownModalOnMobile: {
       type: Boolean,
       default: false
+    },
+    openOnRightOrLongClick: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['click', 'disabled-click'],
   data: function () {
     return {
       dropdownShown: false,
+      longPressTimer: null,
       useModal: false
     }
   },
@@ -90,14 +95,15 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconClick: function () {
+    handleIconClick: function (event, isRightOrLongClick) {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
       }
-      if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
-        this.dropdownShown = !this.dropdownShown
 
+      if ((!this.openOnRightOrLongClick || (this.openOnRightOrLongClick && isRightOrLongClick)) &&
+       (this.forceDropdown || this.dropdownOptions.length > 0)) {
+        this.dropdownShown = !this.dropdownShown
         if (this.dropdownShown && !this.useModal) {
           // wait until the dropdown is visible
           // then focus it so we can hide it automatically when it loses focus
@@ -110,6 +116,28 @@ export default defineComponent({
       }
     },
 
+    triggerRightOrLongClick: function (event) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.handleIconClick(event, true)
+    },
+
+    handleIconPointerDown: function (event) {
+      if (!this.openOnRightOrLongClick) { return }
+      if (event.button === 2) { // right button click
+        this.triggerRightOrLongClick(event)
+      } else if (event.button === 0) { // left button click
+        this.longPressTimer = setTimeout(() => {
+          this.triggerRightOrLongClick(event)
+        }, 500)
+      }
+    },
+
+    handleIconPointerUp: function (event) {
+      if (!this.longPressTimer) { return }
+      clearTimeout(this.longPressTimer)
+    },
+
     handleDropdownFocusOut: function () {
       if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 27580a600930..258c7004cb9c 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -22,6 +22,8 @@
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
       @click="handleIconClick"
+      @pointerdown="handleIconPointerDown"
+      @pointerup="handleIconPointerUp"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"
     />
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index e1f2963e7a99..e270a6648b18 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtInput from '../ft-input/ft-input.vue'
 import FtProfileSelector from '../ft-profile-selector/ft-profile-selector.vue'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import debounce from 'lodash.debounce'
 
 import { IpcChannels, MOBILE_WIDTH_THRESHOLD } from '../../../constants'
@@ -13,6 +14,7 @@ import { invidiousAPICall } from '../../helpers/api/invidious'
 export default defineComponent({
   name: 'TopNav',
   components: {
+    FtIconButton,
     FtInput,
     FtProfileSelector
   },
@@ -94,6 +96,22 @@ export default defineComponent({
 
     newWindowText: function () {
       return this.$t('Open New Window')
+    },
+
+    sessionNavigationHistory: function () {
+      return this.$store.getters.getSessionNavigationHistory
+    },
+
+    sessionNavigationHistoryCurrentIndex: function () {
+      return this.$store.getters.getSessionNavigationHistoryCurrentIndex
+    },
+
+    sessionNavigationHistoryPastRouteNames: function () {
+      return this.sessionNavigationHistory.slice(0, this.sessionNavigationHistoryCurrentIndex)
+    },
+
+    sessionNavigationHistoryFutureRouteNames: function () {
+      return this.sessionNavigationHistory.slice(this.sessionNavigationHistoryCurrentIndex + 1)
     }
   },
   mounted: function () {
@@ -295,9 +313,9 @@ export default defineComponent({
       this.showSearchContainer = !this.showSearchContainer
     },
 
-    navigateHistory: function () {
+    navigateHistory: function (toRoute) {
       if (!this.isForwardOrBack) {
-        this.historyIndex = window.history.length
+        this.$store.commit('navigateSessionNavigationHistoryForward', toRoute)
         this.isArrowBackwardDisabled = false
         this.isArrowForwardDisabled = true
       } else {
@@ -305,33 +323,46 @@ export default defineComponent({
       }
     },
 
-    historyBack: function () {
+    historyBack: function (option) {
+      if (option != null) {
+        this.goToSessionNavigationHistoryIndex(this.sessionNavigationHistoryFutureRouteNames.length - option)
+      }
       this.isForwardOrBack = true
       window.history.back()
+      this.$store.commit('navigateSessionNavigationHistoryForward')
 
-      if (this.historyIndex > 1) {
-        this.historyIndex--
+      if (this.sessionNavigationHistoryCurrentIndex > 1) {
+        this.sessionNavigationHistoryCurrentIndex--
         this.isArrowForwardDisabled = false
-        if (this.historyIndex === 1) {
+        if (this.sessionNavigationHistoryCurrentIndex === 1) {
           this.isArrowBackwardDisabled = true
         }
       }
     },
 
-    historyForward: function () {
+    historyForward: function (option) {
+      if (option != null) {
+        this.goToSessionNavigationHistoryIndex(this.sessionNavigationHistoryFutureRouteNames.length + option)
+      }
       this.isForwardOrBack = true
       window.history.forward()
+      this.$store.commit('navigateSessionNavigationHistoryForward')
 
-      if (this.historyIndex < window.history.length) {
-        this.historyIndex++
+      if (this.sessionNavigationHistoryCurrentIndex < window.history.length) {
+        this.sessionNavigationHistoryCurrentIndex++
         this.isArrowBackwardDisabled = false
 
-        if (this.historyIndex === window.history.length) {
+        if (this.sessionNavigationHistoryCurrentIndex === window.history.length) {
           this.isArrowForwardDisabled = true
         }
       }
     },
 
+    goToSessionNavigationHistoryIndex: function (n) {
+      window.history.go(this.sessionNavigationHistoryCurrentIndex + n)
+      this.$store.commit('setSessionNavigationHistoryCurrentIndex', n)
+    },
+
     toggleSideNav: function () {
       this.$store.commit('toggleSideNav')
     },
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index c5917b0a7070..dea34f59b7e5 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -46,14 +46,16 @@
 }
 
 .navIcon {
-  border-radius: 50%;
-  color: var(--primary-text-color);
-  cursor: pointer;
-  font-size: 20px;
-  block-size: 1em;
-  padding: 10px;
-  transition: background 0.2s ease-out;
-  inline-size: 1em;
+  &:not(.navIconButton) {
+    border-radius: 50%;
+    color: var(--primary-text-color);
+    cursor: pointer;
+    font-size: 20px;
+    block-size: 1em;
+    padding: 10px;
+    transition: background 0.2s ease-out;
+    inline-size: 1em;
+  }
 
   @include top-nav-is-colored {
     color: var(--text-with-main-color);
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index ca023d47795b..f1131ee62633 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -13,24 +13,32 @@
         @click="toggleSideNav"
         @keydown.enter.prevent="toggleSideNav"
       />
-      <font-awesome-icon
+      <ft-icon-button
         :aria-disabled="isArrowBackwardDisabled"
-        class="navIcon"
-        :class="{ arrowBackwardDisabled: isArrowBackwardDisabled}"
+        class="navIcon navIconButton"
+        :disabled="isArrowBackwardDisabled"
         :icon="['fas', 'arrow-left']"
-        role="button"
-        tabindex="0"
+        theme="base-no-default"
+        :size="16"
+        :use-shadow="false"
+        dropdown-position-x="right"
+        :dropdown-options="sessionNavigationHistoryPastRouteNames"
+        :open-on-right-or-long-click="true"
         :title="backwardText"
         @click="historyBack"
         @keydown.enter.prevent="historyBack"
       />
-      <font-awesome-icon
+      <ft-icon-button
         :aria-disabled="isArrowForwardDisabled"
-        class="navIcon"
-        :class="{ arrowForwardDisabled: isArrowForwardDisabled}"
+        class="navIcon navIconButton"
+        :disabled="isArrowForwardDisabled"
         :icon="['fas', 'arrow-right']"
-        role="button"
-        tabindex="0"
+        theme="base-no-default"
+        :size="16"
+        :use-shadow="false"
+        dropdown-position-x="right"
+        :dropdown-options="sessionNavigationHistoryFutureRouteNames"
+        :open-on-right-or-long-click="true"
         :title="forwardText"
         @click="historyForward"
         @keydown.enter.prevent="historyForward"
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 2d2bcb118f82..9bd8536650da 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -21,6 +21,8 @@ const state = {
   isSideNavOpen: false,
   outlinesHidden: true,
   sessionSearchHistory: [],
+  sessionNavigationHistory: [],
+  sessionNavigationHistoryCurrentIndex: -1,
   popularCache: null,
   trendingCache: {
     default: null,
@@ -77,6 +79,14 @@ const getters = {
     return state.sessionSearchHistory
   },
 
+  getSessionNavigationHistory () {
+    return state.sessionNavigationHistory
+  },
+
+  getSessionNavigationHistoryCurrentIndex () {
+    return state.sessionNavigationHistoryCurrentIndex
+  },
+
   getDeArrowCache: (state) => {
     return state.deArrowCache
   },
@@ -639,6 +649,10 @@ const actions = {
     commit('setSessionSearchHistory', [])
   },
 
+  clearSessionNavigationHistory ({ commit }) {
+    commit('setSessionNavigationHistory', [])
+  },
+
   async getExternalPlayerCmdArgumentsData ({ commit }) {
     const url = createWebURL('/static/external-player-map.json')
     const externalPlayerMap = await (await fetch(url)).json()
@@ -814,6 +828,10 @@ const mutations = {
     state.sessionSearchHistory = history
   },
 
+  setSessionNavigationHistory (state, history) {
+    state.sessionNavigationHistory = history
+  },
+
   setDeArrowCache (state, cache) {
     state.deArrowCache = cache
   },
@@ -851,8 +869,19 @@ const mutations = {
     }
   },
 
-  setShowAddToPlaylistPrompt (state, payload) {
-    state.showAddToPlaylistPrompt = payload
+  setSessionNavigationHistoryCurrentIndex (state, value) {
+    state.sessionNavigationHistoryCurrentIndex = value
+  },
+
+  navigateSessionNavigationHistoryForward (state, route) {
+    // remove "forward" history if that history is diverged from
+    // !route.name !== state.sessionNavigationHistory[state.sessionNavigationHistoryCurrentIndex]
+    if (route) {
+      state.sessionSearchHistory.length = state.sessionNavigationHistoryCurrentIndex + 1
+      state.sessionNavigationHistory.push(route.meta.title)
+    }
+
+    state.sessionNavigationHistoryCurrentIndex++
   },
 
   setShowCreatePlaylistPrompt (state, payload) {

From a4e0718f76a3d1aa88e7bcee279d16a4d28b4957 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 2 Jun 2024 23:17:18 -0500
Subject: [PATCH 03/18] Update top nav to handle icon button styling

---
 .../ft-icon-button/ft-icon-button.js          | 16 ++++++++------
 .../ft-icon-button/ft-icon-button.scss        | 12 +++++-----
 .../ft-icon-button/ft-icon-button.vue         |  6 ++---
 src/renderer/components/top-nav/top-nav.scss  | 22 +++++++++----------
 src/renderer/components/top-nav/top-nav.vue   |  8 +++----
 5 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index d24fc6ec1901..b05a10450c8f 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -95,12 +95,17 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconClick: function (event, isRightOrLongClick) {
+    handleIconPointerUp: function (event, isRightOrLongClick) {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
       }
 
+      if (this.longPressTimer != null) {
+        clearTimeout(this.longPressTimer)
+        this.longPressTimer = null
+      }
+
       if ((!this.openOnRightOrLongClick || (this.openOnRightOrLongClick && isRightOrLongClick)) &&
        (this.forceDropdown || this.dropdownOptions.length > 0)) {
         this.dropdownShown = !this.dropdownShown
@@ -119,7 +124,9 @@ export default defineComponent({
     triggerRightOrLongClick: function (event) {
       event.preventDefault()
       event.stopPropagation()
-      this.handleIconClick(event, true)
+      clearTimeout(this.longPressTimer)
+      this.longPressTimer = null
+      this.handleIconPointerUp(event, true)
     },
 
     handleIconPointerDown: function (event) {
@@ -133,11 +140,6 @@ export default defineComponent({
       }
     },
 
-    handleIconPointerUp: function (event) {
-      if (!this.longPressTimer) { return }
-      clearTimeout(this.longPressTimer)
-    },
-
     handleDropdownFocusOut: function () {
       if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 41dd14b2d0a3..5cc48365cbaa 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -29,7 +29,7 @@
         color: var(--side-nav-hover-text-color);
       }
 
-      &:active {
+      &:active, &.pressed {
         background-color: var(--side-nav-active-color);
         color: var(--side-nav-active-text-color);
       }
@@ -43,7 +43,7 @@
       color: var(--side-nav-hover-text-color);
     }
 
-    &:active {
+    &:active, &.pressed {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
     }
@@ -59,7 +59,7 @@
         background-color: var(--primary-color-hover);
       }
 
-      &:active {
+      &:active, &.pressed {
         background-color: var(--primary-color-active);
       }
     }
@@ -76,7 +76,7 @@
         background-color: var(--accent-color-hover);
       }
 
-      &:active {
+      &:active, &.pressed {
         background-color: var(--accent-color-active);
       }
     }
@@ -92,7 +92,7 @@
         background-color: var(--destructive-hover-color);
       }
 
-      &:active {
+      &:active, &.pressed {
         background-color: var(--destructive-active-color);
       }
     }
@@ -163,7 +163,7 @@
       transition: background 0.2s ease-in;
     }
 
-    &:active {
+    &:active, &.pressed {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
       transition: background 0.1s ease-in;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 258c7004cb9c..a1fd77db07fd 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -11,6 +11,7 @@
       :class="{
         [theme]: true,
         shadow: useShadow,
+        pressed: openOnRightOrLongClick && dropdownShown,
         disabled
       }"
       :style="{
@@ -21,11 +22,10 @@
       role="button"
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
-      @click="handleIconClick"
       @pointerdown="handleIconPointerDown"
       @pointerup="handleIconPointerUp"
-      @keydown.enter.prevent="handleIconClick"
-      @keydown.space.prevent="handleIconClick"
+      @keydown.enter.prevent="handleIconPointerUp"
+      @keydown.space.prevent="handleIconPointerUp"
     />
     <template
       v-if="dropdownShown"
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index dea34f59b7e5..225b092aefa7 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -46,20 +46,20 @@
 }
 
 .navIcon {
-  &:not(.navIconButton) {
-    border-radius: 50%;
-    color: var(--primary-text-color);
-    cursor: pointer;
-    font-size: 20px;
-    block-size: 1em;
-    padding: 10px;
-    transition: background 0.2s ease-out;
-    inline-size: 1em;
-  }
-
   @include top-nav-is-colored {
     color: var(--text-with-main-color);
   }
+}
+
+.navIcon, :deep(.iconButton) {
+  border-radius: 50%;
+  color: var(--primary-text-color);
+  cursor: pointer;
+  font-size: 20px;
+  block-size: 1em;
+  padding: 10px;
+  transition: background 0.2s ease-out;
+  inline-size: 1em;
 
   &.arrowBackwardDisabled,
   &.arrowForwardDisabled {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index f1131ee62633..cc49ebb4566e 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -15,11 +15,11 @@
       />
       <ft-icon-button
         :aria-disabled="isArrowBackwardDisabled"
-        class="navIcon navIconButton"
+        class="navIconButton"
         :disabled="isArrowBackwardDisabled"
         :icon="['fas', 'arrow-left']"
         theme="base-no-default"
-        :size="16"
+        :size="20"
         :use-shadow="false"
         dropdown-position-x="right"
         :dropdown-options="sessionNavigationHistoryPastRouteNames"
@@ -30,11 +30,11 @@
       />
       <ft-icon-button
         :aria-disabled="isArrowForwardDisabled"
-        class="navIcon navIconButton"
+        class="navIconButton"
         :disabled="isArrowForwardDisabled"
         :icon="['fas', 'arrow-right']"
         theme="base-no-default"
-        :size="16"
+        :size="20"
         :use-shadow="false"
         dropdown-position-x="right"
         :dropdown-options="sessionNavigationHistoryFutureRouteNames"

From 49a36645cf4781b52fba2a53c9d512d90f89e9f9 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 12:17:25 -0500
Subject: [PATCH 04/18] Implement long-press handling & adjust arrow logic

---
 .../ft-icon-button/ft-icon-button.js          | 36 ++++++----
 .../ft-icon-button/ft-icon-button.scss        |  2 +-
 .../ft-icon-button/ft-icon-button.vue         | 14 ++--
 src/renderer/components/top-nav/top-nav.js    | 70 ++++++++-----------
 src/renderer/components/top-nav/top-nav.scss  | 31 ++++----
 src/renderer/components/top-nav/top-nav.vue   | 12 ++--
 src/renderer/store/modules/utils.js           |  6 +-
 7 files changed, 87 insertions(+), 84 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index b05a10450c8f..3c1679077e8f 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -55,8 +55,9 @@ export default defineComponent({
     dropdownOptions: {
       // Array of objects with these properties
       // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
-      // - label: String (if type == 'labelValue')
-      // - value: String (if type == 'labelValue')
+      // - label: String (if type === 'labelValue')
+      // - value: String (if type === 'labelValue')
+      // - (OPTIONAL) active: Number (if type === 'labelValue')
       type: Array,
       default: () => { return [] }
     },
@@ -73,6 +74,7 @@ export default defineComponent({
   data: function () {
     return {
       dropdownShown: false,
+      blockClick: false,
       longPressTimer: null,
       useModal: false
     }
@@ -95,12 +97,16 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconPointerUp: function (event, isRightOrLongClick) {
+    handleIconClick: function (event, isRightOrLongClick = false) {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
       }
 
+      if (this.blockClick) {
+        return
+      }
+
       if (this.longPressTimer != null) {
         clearTimeout(this.longPressTimer)
         this.longPressTimer = null
@@ -121,25 +127,29 @@ export default defineComponent({
       }
     },
 
-    triggerRightOrLongClick: function (event) {
-      event.preventDefault()
-      event.stopPropagation()
-      clearTimeout(this.longPressTimer)
-      this.longPressTimer = null
-      this.handleIconPointerUp(event, true)
-    },
-
     handleIconPointerDown: function (event) {
       if (!this.openOnRightOrLongClick) { return }
       if (event.button === 2) { // right button click
-        this.triggerRightOrLongClick(event)
+        this.handleIconClick(null, true)
       } else if (event.button === 0) { // left button click
         this.longPressTimer = setTimeout(() => {
-          this.triggerRightOrLongClick(event)
+          this.handleIconClick(null, true)
+
+          // prevent a long click that ends on the icon button from firing the handleIconClick handler
+          window.addEventListener('pointerup', this.preventButtonClickAfterLongPress, { once: true })
+          window.addEventListener('pointercancel', () => {
+            window.removeEventListener('pointerup', this.preventButtonClickAfterLongPress)
+          }, { once: true })
         }, 500)
       }
     },
 
+    // prevent the handleIconClick handler from firing for an instant
+    preventButtonClickAfterLongPress: function () {
+      this.blockClick = true
+      setTimeout(() => { this.blockClick = false }, 0)
+    },
+
     handleDropdownFocusOut: function () {
       if (this.dropdownShown && !this.$refs.ftIconButton.matches(':focus-within')) {
         this.dropdownShown = false
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 5cc48365cbaa..59c73c6a16f1 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -163,7 +163,7 @@
       transition: background 0.2s ease-in;
     }
 
-    &:active, &.pressed {
+    &:active, &.active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
       transition: background 0.1s ease-in;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index a1fd77db07fd..2d8f58e59e02 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -23,9 +23,9 @@
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
       @pointerdown="handleIconPointerDown"
-      @pointerup="handleIconPointerUp"
-      @keydown.enter.prevent="handleIconPointerUp"
-      @keydown.space.prevent="handleIconPointerUp"
+      @click="handleIconClick"
+      @keydown.enter.prevent="handleIconClick"
+      @keydown.space.prevent="handleIconClick"
     />
     <template
       v-if="dropdownShown"
@@ -47,9 +47,13 @@
               :id="sanitizeForHtmlId(title + '-' + index)"
               :key="index"
               role="option"
-              aria-selected="false"
+              :aria-selected="option.active"
               tabindex="-1"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              :class="{
+                listItemDivider: option.type === 'divider',
+                listItem: option.type !== 'divider',
+                active: option.active
+              }"
               @click="handleDropdownClick({url: option.value, index: index})"
               @keydown.enter="handleDropdownClick({url: option.value, index: index})"
               @keydown.space="handleDropdownClick({url: option.value, index: index})"
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index e270a6648b18..99e574e73415 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -22,15 +22,20 @@ export default defineComponent({
     return {
       component: this,
       showSearchContainer: true,
-      historyIndex: 1,
       isForwardOrBack: false,
-      isArrowBackwardDisabled: true,
-      isArrowForwardDisabled: true,
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
   },
   computed: {
+    arrowBackwardDisabled: function() {
+      return this.sessionNavigationHistoryCurrentIndex === -1
+    },
+
+    arrowForwardDisabled: function() {
+      return this.sessionNavigationHistoryCurrentIndex >= this.sessionNavigationHistory.length - 1
+    },
+
     hideSearchBar: function () {
       return this.$store.getters.getHideSearchBar
     },
@@ -99,20 +104,26 @@ export default defineComponent({
     },
 
     sessionNavigationHistory: function () {
+      // console.log(this.$store.getters.getSessionNavigationHistory)
       return this.$store.getters.getSessionNavigationHistory
     },
 
     sessionNavigationHistoryCurrentIndex: function () {
+      // console.log(this.$store.getters.getSessionNavigationHistoryCurrentIndex)
       return this.$store.getters.getSessionNavigationHistoryCurrentIndex
     },
 
-    sessionNavigationHistoryPastRouteNames: function () {
-      return this.sessionNavigationHistory.slice(0, this.sessionNavigationHistoryCurrentIndex)
+    sessionNavigationHistoryDropdownOptions: function () {
+      const sessionNavigationHistory = this.sessionNavigationHistory
+      return sessionNavigationHistory.map((routeLabel, index) => {
+        return {
+          label: translateWindowTitle(routeLabel, this.$i18n),
+          value: index - this.sessionNavigationHistoryCurrentIndex,
+          active: index === this.sessionNavigationHistoryCurrentIndex
+        }
+      }).toReversed()
     },
 
-    sessionNavigationHistoryFutureRouteNames: function () {
-      return this.sessionNavigationHistory.slice(this.sessionNavigationHistoryCurrentIndex + 1)
-    }
   },
   mounted: function () {
     let previousWidth = window.innerWidth
@@ -120,6 +131,8 @@ export default defineComponent({
       this.showSearchContainer = false
     }
 
+    this.$store.commit('setSessionNavigationHistoryCurrentIndex', this.sessionNavigationHistory.length - 1)
+
     // Store is not up-to-date when the component mounts, so we use timeout.
     setTimeout(() => {
       if (this.expandSideBar) {
@@ -316,51 +329,24 @@ export default defineComponent({
     navigateHistory: function (toRoute) {
       if (!this.isForwardOrBack) {
         this.$store.commit('navigateSessionNavigationHistoryForward', toRoute)
-        this.isArrowBackwardDisabled = false
-        this.isArrowForwardDisabled = true
       } else {
         this.isForwardOrBack = false
       }
     },
 
-    historyBack: function (option) {
-      if (option != null) {
-        this.goToSessionNavigationHistoryIndex(this.sessionNavigationHistoryFutureRouteNames.length - option)
-      }
+    historyBack: function (option = 1) {
+      this.updateSessionNavigationIndexBy(-option)
       this.isForwardOrBack = true
-      window.history.back()
-      this.$store.commit('navigateSessionNavigationHistoryForward')
-
-      if (this.sessionNavigationHistoryCurrentIndex > 1) {
-        this.sessionNavigationHistoryCurrentIndex--
-        this.isArrowForwardDisabled = false
-        if (this.sessionNavigationHistoryCurrentIndex === 1) {
-          this.isArrowBackwardDisabled = true
-        }
-      }
     },
 
-    historyForward: function (option) {
-      if (option != null) {
-        this.goToSessionNavigationHistoryIndex(this.sessionNavigationHistoryFutureRouteNames.length + option)
-      }
+    historyForward: function (option = 1) {
+      this.updateSessionNavigationIndexBy(option)
       this.isForwardOrBack = true
-      window.history.forward()
-      this.$store.commit('navigateSessionNavigationHistoryForward')
-
-      if (this.sessionNavigationHistoryCurrentIndex < window.history.length) {
-        this.sessionNavigationHistoryCurrentIndex++
-        this.isArrowBackwardDisabled = false
-
-        if (this.sessionNavigationHistoryCurrentIndex === window.history.length) {
-          this.isArrowForwardDisabled = true
-        }
-      }
     },
 
-    goToSessionNavigationHistoryIndex: function (n) {
-      window.history.go(this.sessionNavigationHistoryCurrentIndex + n)
-      this.$store.commit('setSessionNavigationHistoryCurrentIndex', n)
+    updateSessionNavigationIndexBy: function (n) {
+      window.history.go(n)
+      this.$store.commit('setSessionNavigationHistoryCurrentIndex', n + this.sessionNavigationHistoryCurrentIndex)
     },
 
     toggleSideNav: function () {
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 225b092aefa7..cb2f5b60a127 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -51,6 +51,13 @@
   }
 }
 
+.arrowDisabled :deep(.iconButton) {
+  color: #808080;
+  opacity: 0.5;
+  pointer-events: none;
+  user-select: none;
+}
+
 .navIcon, :deep(.iconButton) {
   border-radius: 50%;
   color: var(--primary-text-color);
@@ -61,35 +68,31 @@
   transition: background 0.2s ease-out;
   inline-size: 1em;
 
-  &.arrowBackwardDisabled,
-  &.arrowForwardDisabled {
-    color: #808080;
-    opacity: 0.5;
-    pointer-events: none;
-    user-select: none;
-  }
-
   &:hover {
     background-color: var(--side-nav-hover-color);
     color: var(--side-nav-hover-text-color);
     transition: background 0.2s ease-in;
 
-    @include top-nav-is-colored {
-      background-color: var(--primary-color-hover);
-    }
   }
 
   &:active {
     background-color: var(--tertiary-text-color);
     color: var(--side-nav-active-text-color);
     transition: background 0.2s ease-in;
+  }
+}
 
-    @include top-nav-is-colored {
-      background-color: var(--primary-color-active);
-    }
+.topNavBarColor .navIcon, .topNavBarColor :deep(.iconButton)  {
+  &:hover {
+    background-color: var(--primary-color-hover);
+  }
+
+  &:active {
+    background-color: var(--primary-color-active);
   }
 }
 
+
 .navFilterIcon {
   $effect-distance: 20px;
 
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index cc49ebb4566e..7ee64949ff52 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -14,30 +14,30 @@
         @keydown.enter.prevent="toggleSideNav"
       />
       <ft-icon-button
-        :aria-disabled="isArrowBackwardDisabled"
         class="navIconButton"
-        :disabled="isArrowBackwardDisabled"
+        :disabled="arrowBackwardDisabled"
+        :class="{ arrowDisabled: arrowBackwardDisabled }"
         :icon="['fas', 'arrow-left']"
         theme="base-no-default"
         :size="20"
         :use-shadow="false"
         dropdown-position-x="right"
-        :dropdown-options="sessionNavigationHistoryPastRouteNames"
+        :dropdown-options="sessionNavigationHistoryDropdownOptions"
         :open-on-right-or-long-click="true"
         :title="backwardText"
         @click="historyBack"
         @keydown.enter.prevent="historyBack"
       />
       <ft-icon-button
-        :aria-disabled="isArrowForwardDisabled"
         class="navIconButton"
-        :disabled="isArrowForwardDisabled"
+        :disabled="arrowForwardDisabled"
+        :class="{ arrowDisabled: arrowForwardDisabled }"
         :icon="['fas', 'arrow-right']"
         theme="base-no-default"
         :size="20"
         :use-shadow="false"
         dropdown-position-x="right"
-        :dropdown-options="sessionNavigationHistoryFutureRouteNames"
+        :dropdown-options="sessionNavigationHistoryDropdownOptions"
         :open-on-right-or-long-click="true"
         :title="forwardText"
         @click="historyForward"
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 9bd8536650da..778283736136 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -79,11 +79,11 @@ const getters = {
     return state.sessionSearchHistory
   },
 
-  getSessionNavigationHistory () {
+  getSessionNavigationHistory (state) {
     return state.sessionNavigationHistory
   },
 
-  getSessionNavigationHistoryCurrentIndex () {
+  getSessionNavigationHistoryCurrentIndex (state) {
     return state.sessionNavigationHistoryCurrentIndex
   },
 
@@ -877,7 +877,7 @@ const mutations = {
     // remove "forward" history if that history is diverged from
     // !route.name !== state.sessionNavigationHistory[state.sessionNavigationHistoryCurrentIndex]
     if (route) {
-      state.sessionSearchHistory.length = state.sessionNavigationHistoryCurrentIndex + 1
+      state.sessionNavigationHistory.length = state.sessionNavigationHistoryCurrentIndex + 1
       state.sessionNavigationHistory.push(route.meta.title)
     }
 

From d16cce5d966fc603b5281a4c28a163fecf09b63e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 12:36:14 -0500
Subject: [PATCH 05/18] Prevent context menu from appearing in dev

---
 src/renderer/components/ft-icon-button/ft-icon-button.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 2d8f58e59e02..74297666d3e1 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -23,6 +23,7 @@
       :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
       @pointerdown="handleIconPointerDown"
+      @contextmenu.prevent=""
       @click="handleIconClick"
       @keydown.enter.prevent="handleIconClick"
       @keydown.space.prevent="handleIconClick"

From 9683bcd68c490e95ceb2bb23893a6a7e2e445b85 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 19:00:19 -0500
Subject: [PATCH 06/18] Implement base nav history range determination logic

---
 src/renderer/App.js                           |  2 +-
 .../ft-icon-button/ft-icon-button.scss        |  6 +-
 .../ft-icon-button/ft-icon-button.vue         |  8 ++-
 src/renderer/components/top-nav/top-nav.js    | 61 ++++++++++++++-----
 src/renderer/store/modules/utils.js           | 11 ++--
 5 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 52df473d8245..c669960c5c88 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -200,7 +200,7 @@ export default defineComponent({
       })
 
       this.$router.afterEach((to, from) => {
-        this.$refs.topNav?.navigateHistory(to)
+        this.$refs.topNav?.navigateHistory()
       })
 
       this.$router.onReady(() => {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 59c73c6a16f1..aba4399cac7e 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -4,6 +4,7 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
   position: relative;
+  line-height: normal;
   user-select: none;
 }
 
@@ -157,13 +158,14 @@
     white-space: nowrap;
 
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &.active {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
       transition: background 0.2s ease-in;
     }
 
-    &:active, &.active {
+    &:active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
       transition: background 0.1s ease-in;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 74297666d3e1..9a8fbaa1d9d7 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -89,9 +89,13 @@
               :id="sanitizeForHtmlId(title + '-' + index)"
               :key="index"
               :role="option.type === 'divider' ? 'separator' : 'option'"
-              aria-selected="false"
+              :aria-selected="option.active"
               :tabindex="option.type === 'divider' ? '-1' : '0'"
-              :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+              :class="{
+                listItemDivider: option.type === 'divider',
+                listItem: option.type !== 'divider',
+                active: option.active
+              }"
               @click="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 99e574e73415..31cf076864f9 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -11,6 +11,8 @@ import { translateWindowTitle } from '../../helpers/strings'
 import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '../../helpers/api/local'
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
+const NAV_HISTORY_DISPLAY_LIMIT = 15
+
 export default defineComponent({
   name: 'TopNav',
   components: {
@@ -113,15 +115,42 @@ export default defineComponent({
       return this.$store.getters.getSessionNavigationHistoryCurrentIndex
     },
 
+    sessionNavigationHistoryResultEndIndex: function () {
+      if (this.sessionNavigationHistoryCurrentIndex < NAV_HISTORY_DISPLAY_LIMIT / 2) {
+        return NAV_HISTORY_DISPLAY_LIMIT
+      } else if (this.sessionNavigationHistory.length - this.sessionNavigationHistoryCurrentIndex - 1 < NAV_HISTORY_DISPLAY_LIMIT / 2) {
+        return this.sessionNavigationHistory.length
+      } else {
+        return this.sessionNavigationHistoryCurrentIndex + NAV_HISTORY_DISPLAY_LIMIT / 2
+      }
+    },
+
     sessionNavigationHistoryDropdownOptions: function () {
-      const sessionNavigationHistory = this.sessionNavigationHistory
-      return sessionNavigationHistory.map((routeLabel, index) => {
-        return {
-          label: translateWindowTitle(routeLabel, this.$i18n),
-          value: index - this.sessionNavigationHistoryCurrentIndex,
-          active: index === this.sessionNavigationHistoryCurrentIndex
-        }
-      }).toReversed()
+      const sessionNavigationHistory = []
+      const end = this.sessionNavigationHistoryResultEndIndex
+      for (let index = end; index > Math.max(0, end - NAV_HISTORY_DISPLAY_LIMIT); --index) {
+        const routeLabel = this.sessionNavigationHistory[index]
+        sessionNavigationHistory.push({
+          label: translateWindowTitle(routeLabel, this.$i18n) ?? routeLabel,
+          value: index - this.sessionNavigationHistoryCurrentIndex - 1,
+          active: index === this.sessionNavigationHistoryCurrentIndex + 1
+        })
+      }
+
+      /* Add transient entry for the current route if it's at the top of the stack.
+      * This is transient because the proper <title> that we use for the other title entries in the nav history dropdown
+      * cannot be consistently waited for with our current implementation, so we show a temporary route.meta.title instead. */
+      if (this.sessionNavigationHistoryCurrentIndex === sessionNavigationHistory.length - 1) {
+        sessionNavigationHistory.push({
+          label: translateWindowTitle(this.$router.currentRoute.meta.title, this.$i18n),
+          value: 0,
+          active: true
+        })
+      }
+
+      // console.log(sessionNavigationHistory)
+
+      return sessionNavigationHistory
     },
 
   },
@@ -131,8 +160,6 @@ export default defineComponent({
       this.showSearchContainer = false
     }
 
-    this.$store.commit('setSessionNavigationHistoryCurrentIndex', this.sessionNavigationHistory.length - 1)
-
     // Store is not up-to-date when the component mounts, so we use timeout.
     setTimeout(() => {
       if (this.expandSideBar) {
@@ -326,16 +353,16 @@ export default defineComponent({
       this.showSearchContainer = !this.showSearchContainer
     },
 
-    navigateHistory: function (toRoute) {
+    navigateHistory: function () {
       if (!this.isForwardOrBack) {
-        this.$store.commit('navigateSessionNavigationHistoryForward', toRoute)
+        this.$store.commit('navigateSessionNavigationHistoryForward')
       } else {
         this.isForwardOrBack = false
       }
     },
 
-    historyBack: function (option = 1) {
-      this.updateSessionNavigationIndexBy(-option)
+    historyBack: function (option = -1) {
+      this.updateSessionNavigationIndexBy(option)
       this.isForwardOrBack = true
     },
 
@@ -345,6 +372,12 @@ export default defineComponent({
     },
 
     updateSessionNavigationIndexBy: function (n) {
+      // console.log('navigate to: ' + n)
+      // avoid reloading the page
+      if (n === 0) {
+        return
+      }
+
       window.history.go(n)
       this.$store.commit('setSessionNavigationHistoryCurrentIndex', n + this.sessionNavigationHistoryCurrentIndex)
     },
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 778283736136..a985da60b3d7 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -873,13 +873,12 @@ const mutations = {
     state.sessionNavigationHistoryCurrentIndex = value
   },
 
-  navigateSessionNavigationHistoryForward (state, route) {
+  navigateSessionNavigationHistoryForward (state) {
     // remove "forward" history if that history is diverged from
-    // !route.name !== state.sessionNavigationHistory[state.sessionNavigationHistoryCurrentIndex]
-    if (route) {
-      state.sessionNavigationHistory.length = state.sessionNavigationHistoryCurrentIndex + 1
-      state.sessionNavigationHistory.push(route.meta.title)
-    }
+    state.sessionNavigationHistory.length = state.sessionNavigationHistoryCurrentIndex + 1
+
+    const title = document.title.replace(' - FreeTube', '')
+    state.sessionNavigationHistory.push(title)
 
     state.sessionNavigationHistoryCurrentIndex++
   },

From 112bd272ff55c072e2955adbe3c01148c13e2523 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 19:50:25 -0500
Subject: [PATCH 07/18] Solidify route.meta.title labelling & specify future
 steps

---
 src/renderer/App.js                           |  6 ++-
 .../ft-icon-button/ft-icon-button.scss        |  4 ++
 src/renderer/components/top-nav/top-nav.js    | 48 +++++++------------
 src/renderer/store/modules/utils.js           |  8 ++--
 4 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index c669960c5c88..0c6e5220754a 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue'
 import TopNav from './components/top-nav/top-nav.vue'
@@ -200,13 +200,15 @@ export default defineComponent({
       })
 
       this.$router.afterEach((to, from) => {
-        this.$refs.topNav?.navigateHistory()
+        this.$refs.topNav?.trackHistoryNavigation(to)
       })
 
       this.$router.onReady(() => {
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
+
+        nextTick(() => this.$store.commit('pushSessionNavigationHistoryState', this.$router.currentRoute))
       })
     })
   },
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index aba4399cac7e..32c23dfc8178 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -165,6 +165,10 @@
       transition: background 0.2s ease-in;
     }
 
+    &.active {
+      font-weight: 600;
+    }
+
     &:active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 31cf076864f9..fff1efbdf05a 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -12,6 +12,7 @@ import { clearLocalSearchSuggestionsSession, getLocalSearchSuggestions } from '.
 import { invidiousAPICall } from '../../helpers/api/invidious'
 
 const NAV_HISTORY_DISPLAY_LIMIT = 15
+const HALF_OF_NAV_HISTORY_DISPLAY_LIMIT = Math.floor(NAV_HISTORY_DISPLAY_LIMIT / 2)
 
 export default defineComponent({
   name: 'TopNav',
@@ -31,7 +32,7 @@ export default defineComponent({
   },
   computed: {
     arrowBackwardDisabled: function() {
-      return this.sessionNavigationHistoryCurrentIndex === -1
+      return this.sessionNavigationHistoryCurrentIndex === 0
     },
 
     arrowForwardDisabled: function() {
@@ -106,51 +107,37 @@ export default defineComponent({
     },
 
     sessionNavigationHistory: function () {
-      // console.log(this.$store.getters.getSessionNavigationHistory)
       return this.$store.getters.getSessionNavigationHistory
     },
 
     sessionNavigationHistoryCurrentIndex: function () {
-      // console.log(this.$store.getters.getSessionNavigationHistoryCurrentIndex)
       return this.$store.getters.getSessionNavigationHistoryCurrentIndex
     },
 
     sessionNavigationHistoryResultEndIndex: function () {
-      if (this.sessionNavigationHistoryCurrentIndex < NAV_HISTORY_DISPLAY_LIMIT / 2) {
-        return NAV_HISTORY_DISPLAY_LIMIT
-      } else if (this.sessionNavigationHistory.length - this.sessionNavigationHistoryCurrentIndex - 1 < NAV_HISTORY_DISPLAY_LIMIT / 2) {
-        return this.sessionNavigationHistory.length
+      if (this.sessionNavigationHistoryCurrentIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT) {
+        return Math.min(this.sessionNavigationHistory.length - 1, NAV_HISTORY_DISPLAY_LIMIT - 1)
+      } else if (this.sessionNavigationHistory.length - this.sessionNavigationHistoryCurrentIndex - 1 < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT) {
+        return this.sessionNavigationHistory.length - 1
       } else {
-        return this.sessionNavigationHistoryCurrentIndex + NAV_HISTORY_DISPLAY_LIMIT / 2
+        return this.sessionNavigationHistoryCurrentIndex + HALF_OF_NAV_HISTORY_DISPLAY_LIMIT
       }
     },
 
     sessionNavigationHistoryDropdownOptions: function () {
-      const sessionNavigationHistory = []
+      const dropdownOptions = []
       const end = this.sessionNavigationHistoryResultEndIndex
-      for (let index = end; index > Math.max(0, end - NAV_HISTORY_DISPLAY_LIMIT); --index) {
+      for (let index = end; index >= Math.max(0, end + 1 - NAV_HISTORY_DISPLAY_LIMIT); --index) {
         const routeLabel = this.sessionNavigationHistory[index]
-        sessionNavigationHistory.push({
+        dropdownOptions.push({
+          // TODO: pass & show the more useful document.title instead
+          // Difficult to do now because we update it asynchronously on some pages after an indeterminately long load
           label: translateWindowTitle(routeLabel, this.$i18n) ?? routeLabel,
-          value: index - this.sessionNavigationHistoryCurrentIndex - 1,
-          active: index === this.sessionNavigationHistoryCurrentIndex + 1
+          value: index - this.sessionNavigationHistoryCurrentIndex,
+          active: index === this.sessionNavigationHistoryCurrentIndex
         })
       }
-
-      /* Add transient entry for the current route if it's at the top of the stack.
-      * This is transient because the proper <title> that we use for the other title entries in the nav history dropdown
-      * cannot be consistently waited for with our current implementation, so we show a temporary route.meta.title instead. */
-      if (this.sessionNavigationHistoryCurrentIndex === sessionNavigationHistory.length - 1) {
-        sessionNavigationHistory.push({
-          label: translateWindowTitle(this.$router.currentRoute.meta.title, this.$i18n),
-          value: 0,
-          active: true
-        })
-      }
-
-      // console.log(sessionNavigationHistory)
-
-      return sessionNavigationHistory
+      return dropdownOptions
     },
 
   },
@@ -353,9 +340,9 @@ export default defineComponent({
       this.showSearchContainer = !this.showSearchContainer
     },
 
-    navigateHistory: function () {
+    trackHistoryNavigation: function (toRoute) {
       if (!this.isForwardOrBack) {
-        this.$store.commit('navigateSessionNavigationHistoryForward')
+        this.$store.commit('pushSessionNavigationHistoryState', toRoute)
       } else {
         this.isForwardOrBack = false
       }
@@ -372,7 +359,6 @@ export default defineComponent({
     },
 
     updateSessionNavigationIndexBy: function (n) {
-      // console.log('navigate to: ' + n)
       // avoid reloading the page
       if (n === 0) {
         return
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index a985da60b3d7..3026ad93e0b9 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -873,13 +873,11 @@ const mutations = {
     state.sessionNavigationHistoryCurrentIndex = value
   },
 
-  navigateSessionNavigationHistoryForward (state) {
-    // remove "forward" history if that history is diverged from
+  pushSessionNavigationHistoryState (state, route) {
+    // remove "future" history if that timeline is diverged from
     state.sessionNavigationHistory.length = state.sessionNavigationHistoryCurrentIndex + 1
 
-    const title = document.title.replace(' - FreeTube', '')
-    state.sessionNavigationHistory.push(title)
-
+    state.sessionNavigationHistory.push(route.meta.title)
     state.sessionNavigationHistoryCurrentIndex++
   },
 

From 0cbb649e42f950ed9228842df5ffd223e019d05c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 20:51:05 -0500
Subject: [PATCH 08/18] Improve readability & fix top-nav-with-main-color icon
 button styling

---
 src/renderer/App.js                           |  1 +
 .../ft-icon-button/ft-icon-button.js          | 14 +++++-----
 .../ft-icon-button/ft-icon-button.scss        | 26 ++++++++++++-------
 src/renderer/components/top-nav/top-nav.vue   |  4 +--
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 0c6e5220754a..2ca502a10aef 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -208,6 +208,7 @@ export default defineComponent({
           this.$router.replace({ path: this.landingPage })
         }
 
+        // initialize navigation history with starting route
         nextTick(() => this.$store.commit('pushSessionNavigationHistoryState', this.$router.currentRoute))
       })
     })
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 3c1679077e8f..7347e580f02c 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -2,6 +2,8 @@ import { defineComponent } from 'vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
 import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
+const LONG_CLICK_BOUNDARY_MS = 500
+
 export default defineComponent({
   name: 'FtIconButton',
   components: {
@@ -74,7 +76,7 @@ export default defineComponent({
   data: function () {
     return {
       dropdownShown: false,
-      blockClick: false,
+      blockLeftClick: false,
       longPressTimer: null,
       useModal: false
     }
@@ -103,7 +105,7 @@ export default defineComponent({
         return
       }
 
-      if (this.blockClick) {
+      if (this.blockLeftClick) {
         return
       }
 
@@ -135,19 +137,19 @@ export default defineComponent({
         this.longPressTimer = setTimeout(() => {
           this.handleIconClick(null, true)
 
-          // prevent a long click that ends on the icon button from firing the handleIconClick handler
+          // prevent a long press that ends on the icon button from firing the handleIconClick handler
           window.addEventListener('pointerup', this.preventButtonClickAfterLongPress, { once: true })
           window.addEventListener('pointercancel', () => {
             window.removeEventListener('pointerup', this.preventButtonClickAfterLongPress)
           }, { once: true })
-        }, 500)
+        }, LONG_CLICK_BOUNDARY_MS)
       }
     },
 
     // prevent the handleIconClick handler from firing for an instant
     preventButtonClickAfterLongPress: function () {
-      this.blockClick = true
-      setTimeout(() => { this.blockClick = false }, 0)
+      this.blockLeftClick = true
+      setTimeout(() => { this.blockLeftClick = false }, 0)
     },
 
     handleDropdownFocusOut: function () {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 32c23dfc8178..3afa3c701ff1 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -25,12 +25,13 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--side-nav-hover-color);
         color: var(--side-nav-hover-text-color);
       }
 
-      &:active, &.pressed {
+      &.active {
         background-color: var(--side-nav-active-color);
         color: var(--side-nav-active-text-color);
       }
@@ -39,12 +40,13 @@
 
   &.base-no-default:not(.disabled) {
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    &.pressed {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
     }
 
-    &:active, &.pressed {
+    &.active {
       background-color: var(--side-nav-active-color);
       color: var(--side-nav-active-text-color);
     }
@@ -56,11 +58,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--primary-color-hover);
       }
 
-      &:active, &.pressed {
+      &.active {
         background-color: var(--primary-color-active);
       }
     }
@@ -73,11 +76,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--accent-color-hover);
       }
 
-      &:active, &.pressed {
+      &.active {
         background-color: var(--accent-color-active);
       }
     }
@@ -89,11 +93,12 @@
 
     &:not(.disabled) {
       &:hover,
-      &:focus-visible {
+      &:focus-visible,
+      &.pressed {
         background-color: var(--destructive-hover-color);
       }
 
-      &:active, &.pressed {
+      &.active {
         background-color: var(--destructive-active-color);
       }
     }
@@ -159,6 +164,7 @@
 
     &:hover,
     &:focus-visible,
+      &.pressed,
     &.active {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 7ee64949ff52..14314e170d5e 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -18,7 +18,7 @@
         :disabled="arrowBackwardDisabled"
         :class="{ arrowDisabled: arrowBackwardDisabled }"
         :icon="['fas', 'arrow-left']"
-        theme="base-no-default"
+        :theme="null"
         :size="20"
         :use-shadow="false"
         dropdown-position-x="right"
@@ -33,7 +33,7 @@
         :disabled="arrowForwardDisabled"
         :class="{ arrowDisabled: arrowForwardDisabled }"
         :icon="['fas', 'arrow-right']"
-        theme="base-no-default"
+        :theme="null"
         :size="20"
         :use-shadow="false"
         dropdown-position-x="right"

From 22a136577fbe947d6c09c8de55b4105f2776c0b9 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 21:36:15 -0500
Subject: [PATCH 09/18] Update nav icon titles to reflect new behavior, & make
 their title text show even when disabled

---
 src/renderer/components/top-nav/top-nav.js   | 4 ++--
 src/renderer/components/top-nav/top-nav.scss | 8 +++++---
 src/renderer/store/modules/utils.js          | 4 ++++
 static/locales/en-US.yaml                    | 4 ++--
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index fff1efbdf05a..73f23543b1b6 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -95,11 +95,11 @@ export default defineComponent({
     },
 
     forwardText: function () {
-      return this.$t('Forward')
+      return this.$t('Click to go forward, right-click or hold to see history')
     },
 
     backwardText: function () {
-      return this.$t('Back')
+      return this.$t('Click to go back, right-click or hold to see history')
     },
 
     newWindowText: function () {
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index cb2f5b60a127..48864edc7fcb 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -53,12 +53,14 @@
 
 .arrowDisabled :deep(.iconButton) {
   color: #808080;
+  background-color: inherit;
   opacity: 0.5;
-  pointer-events: none;
+  pointer-events: auto;
+  cursor: default;
   user-select: none;
 }
 
-.navIcon, :deep(.iconButton) {
+.navIcon, :deep(.ftIconButton:not(.arrowDisabled) .iconButton) {
   border-radius: 50%;
   color: var(--primary-text-color);
   cursor: pointer;
@@ -82,7 +84,7 @@
   }
 }
 
-.topNavBarColor .navIcon, .topNavBarColor :deep(.iconButton)  {
+.topNavBarColor .navIcon, .topNavBarColor :deep(.ftIconButton:not(.arrowDisabled) .iconButton)  {
   &:hover {
     background-color: var(--primary-color-hover);
   }
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 3026ad93e0b9..e44443c1f91a 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -869,6 +869,10 @@ const mutations = {
     }
   },
 
+  setShowAddToPlaylistPrompt (state, payload) {
+    state.showAddToPlaylistPrompt = payload
+  },
+
   setSessionNavigationHistoryCurrentIndex (state, value) {
     state.sessionNavigationHistoryCurrentIndex = value
   },
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index c1bf4dec855b..eeadf377e010 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -27,8 +27,8 @@ Toggle fullscreen: Toggle fullscreen
 Window: Window
 Minimize: Minimize
 Close: Close
-Back: Back
-Forward: Forward
+Click to go back, right-click or hold to see history: Click to go back, right-click or hold to see history
+Click to go forward, right-click or hold to see history: Click to go forward, right-click or hold to see history
 Open New Window: Open New Window
 Go to page: Go to {page}
 Close Banner: Close Banner

From 45256bb7533f5138608c631e48cb1b21e1351884 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 22:13:07 -0500
Subject: [PATCH 10/18] Add checkmark icon to active history entry

---
 src/renderer/components/ft-icon-button/ft-icon-button.scss | 4 +++-
 src/renderer/components/ft-icon-button/ft-icon-button.vue  | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 3afa3c701ff1..8d624057abb5 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -164,7 +164,7 @@
 
     &:hover,
     &:focus-visible,
-      &.pressed,
+    &.pressed,
     &.active {
       background-color: var(--side-nav-hover-color);
       color: var(--side-nav-hover-text-color);
@@ -173,6 +173,8 @@
 
     &.active {
       font-weight: 600;
+      display: flex;
+      gap: 6px;
     }
 
     &:active {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 9a8fbaa1d9d7..9983f4111a80 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -100,6 +100,10 @@
               @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
             >
+              <font-awesome-icon
+                v-if="option.active"
+                :icon="['fas', 'check']"
+              />
               {{ option.type === 'divider' ? '' : option.label }}
             </li>
           </ul>

From 699a87e22fa885d931b5da680c5658fbc8d561c7 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 22:24:17 -0500
Subject: [PATCH 11/18] Update checkmark styling to have uniform flex-start
 alignment

---
 .../components/ft-icon-button/ft-icon-button.scss     | 11 +++++++++++
 .../components/ft-icon-button/ft-icon-button.vue      | 10 ++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 8d624057abb5..dba283dcd43c 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -154,6 +154,17 @@
     padding: 0;
   }
 
+  :has(.active) {
+    .checkmarkColumn {
+      min-inline-size: 12px;
+    }
+
+    .listItem {
+      display: flex;
+      gap: 6px;
+    }
+  }
+
   .listItem {
     cursor: pointer;
     margin: 0;
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 9983f4111a80..f31aa5afdd09 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -100,10 +100,12 @@
               @keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
               @keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
             >
-              <font-awesome-icon
-                v-if="option.active"
-                :icon="['fas', 'check']"
-              />
+              <div class="checkmarkColumn">
+                <font-awesome-icon
+                  v-if="option.active"
+                  :icon="['fas', 'check']"
+                />
+              </div>
               {{ option.type === 'divider' ? '' : option.label }}
             </li>
           </ul>

From fe44226da29d953c0082855a8c84fd87acf1c42e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 22:44:40 -0500
Subject: [PATCH 12/18] Fix top bar with main color navigation arrow icon bug

---
 src/renderer/components/top-nav/top-nav.scss | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 48864edc7fcb..aaa72da300f6 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -45,12 +45,6 @@
   }
 }
 
-.navIcon {
-  @include top-nav-is-colored {
-    color: var(--text-with-main-color);
-  }
-}
-
 .arrowDisabled :deep(.iconButton) {
   color: #808080;
   background-color: inherit;
@@ -85,6 +79,8 @@
 }
 
 .topNavBarColor .navIcon, .topNavBarColor :deep(.ftIconButton:not(.arrowDisabled) .iconButton)  {
+  color: var(--text-with-main-color);
+
   &:hover {
     background-color: var(--primary-color-hover);
   }

From 5328d241c211f970960477a58c6f523334bb2b9a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 24 Oct 2024 22:24:22 -0500
Subject: [PATCH 13/18] Update to use the NavigationHistory API

---
 src/constants.js                              |  5 +-
 src/main/index.js                             | 16 ++-
 .../ft-icon-button/ft-icon-button.js          |  2 +-
 src/renderer/components/top-nav/top-nav.js    | 98 ++++++++++---------
 src/renderer/components/top-nav/top-nav.scss  |  6 +-
 src/renderer/components/top-nav/top-nav.vue   | 12 +--
 6 files changed, 79 insertions(+), 60 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index e311b571136b..6a40a323ab56 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,7 +5,10 @@ const IpcChannels = {
   OPEN_EXTERNAL_LINK: 'open-external-link',
   GET_SYSTEM_LOCALE: 'get-system-locale',
   GET_PICTURES_PATH: 'get-pictures-path',
-  GET_NAV_HISTORY: 'get-navigation-history',
+  GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX: 'get-navigation-history-entry-at-index',
+  GET_NAV_HISTORY_ACTIVE_INDEX: 'get-navigation-history-active-index',
+  GET_NAV_HISTORY_LENGTH: 'get-navigation-history-length',
+  GO_TO_NAV_HISTORY_OFFSET: 'go-to-navigation-history-index',
   SHOW_OPEN_DIALOG: 'show-open-dialog',
   SHOW_SAVE_DIALOG: 'show-save-dialog',
   STOP_POWER_SAVE_BLOCKER: 'stop-power-save-blocker',
diff --git a/src/main/index.js b/src/main/index.js
index ca9aa757fa73..2dcc1d3d84c1 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -927,8 +927,20 @@ function runApp() {
     return app.getPath('pictures')
   })
 
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY, ({ sender }) => {
-    return sender.navigationHistory
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
+    return sender.navigationHistory.getEntryAtIndex(index)?.title
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
+    return sender.navigationHistory.getActiveIndex()
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
+    return sender.navigationHistory.length()
+  })
+
+  ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, async ({ sender }, offset) => {
+    sender.navigationHistory.goToOffset(offset)
   })
 
   ipcMain.handle(IpcChannels.SHOW_OPEN_DIALOG, async ({ sender }, options) => {
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 38243dc4d83d..89defc78efe9 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -99,7 +99,7 @@ export default defineComponent({
       this.dropdownShown = false
     },
 
-    handleIconClick: function (event, isRightOrLongClick = false) {
+    handleIconClick: function (e, isRightOrLongClick = false) {
       if (this.disabled) {
         this.$emit('disabled-click')
         return
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 9b6a7dbb43fd..0392ed19a94a 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -36,9 +36,7 @@ export default defineComponent({
       showSearchContainer: true,
       isArrowBackwardDisabled,
       isArrowForwardDisabled,
-      /** @type {Electron.NavigationHistory | null} */
-      navigationHistory: null,
-      navigationHistoryCurrentIndex: -1,
+      navigationHistoryDropdownOptions: [],
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
     }
@@ -95,7 +93,7 @@ export default defineComponent({
     },
 
     navigationHistoryAddendum: function () {
-      if (this.navigationHistory == null) {
+      if (this.navigationHistoryDropdownOptions.length === 0) {
         return ''
       }
 
@@ -113,38 +111,10 @@ export default defineComponent({
     newWindowText: function () {
       return this.$t('Open New Window')
     },
-
-    navigationHistoryResultEndIndex: function () {
-      if (this.navigationHistoryCurrentIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT) {
-        return Math.min(this.navigationHistory.length - 1, NAV_HISTORY_DISPLAY_LIMIT - 1)
-      } else if (this.navigationHistory.length - this.navigationHistoryCurrentIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT + 1) {
-        return this.navigationHistory.length - 1
-      } else {
-        return this.navigationHistoryCurrentIndex + HALF_OF_NAV_HISTORY_DISPLAY_LIMIT
-      }
-    },
-
-    navigationHistoryDropdownOptions: function () {
-      const dropdownOptions = []
-      const end = this.navigationHistoryResultEndIndex
-      for (let index = end; index >= Math.max(0, end + 1 - NAV_HISTORY_DISPLAY_LIMIT); --index) {
-        const routeLabel = this.navigationHistory.getEntryAtIndex(index).title
-        dropdownOptions.push({
-          // TODO: pass & show the more useful document.title instead
-          // Difficult to do now because we update it asynchronously on some pages after an indeterminately long load
-          // translateWindowTitle(routeLabel, this.$i18n) ?? routeLabel
-          label: routeLabel,
-          value: index - this.navigationHistoryCurrentIndex,
-          active: index === this.navigationHistoryCurrentIndex
-        })
-      }
-      return dropdownOptions
-    },
-
   },
   watch: {
     $route: function () {
-      this.setNavigationHistory()
+      this.setNavigationHistoryDropdownOptions()
       if ('navigation' in window) {
         this.isArrowForwardDisabled = !window.navigation.canGoForward
         this.isArrowBackwardDisabled = !window.navigation.canGoBack
@@ -371,30 +341,62 @@ export default defineComponent({
       this.showSearchContainer = !this.showSearchContainer
     },
 
-    setNavigationHistory: function() {
-      if (process.env.IS_ELECTRON) {
-        const { ipcRenderer } = require('electron')
-        this.navigationHistory = ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY)
-        this.navigationHistoryCurrentIndex = this.navigationHistory.getActiveIndex()
+    getNavigationHistoryResultEndIndex: function (navigationHistoryActiveIndex, navigationHistoryLength) {
+      if (navigationHistoryActiveIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT) {
+        return Math.min(navigationHistoryLength - 1, NAV_HISTORY_DISPLAY_LIMIT - 1)
+      } else if (navigationHistoryLength - navigationHistoryActiveIndex < HALF_OF_NAV_HISTORY_DISPLAY_LIMIT + 1) {
+        return navigationHistoryLength - 1
+      } else {
+        return navigationHistoryActiveIndex + HALF_OF_NAV_HISTORY_DISPLAY_LIMIT
       }
     },
 
-    historyBack: function (index) {
-      if (!index) {
-        this.$router.back()
-        return
+    getNavigationHistoryDropdownOptions: async function (ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength) {
+      const dropdownOptions = []
+      const end = this.getNavigationHistoryResultEndIndex(navigationHistoryActiveIndex, navigationHistoryLength)
+
+      for (let index = end; index >= Math.max(0, end + 1 - NAV_HISTORY_DISPLAY_LIMIT); --index) {
+        const routeLabel = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, index)
+        dropdownOptions.push({
+          label: routeLabel,
+          value: index - navigationHistoryActiveIndex,
+          active: index === navigationHistoryActiveIndex
+        })
       }
+      return dropdownOptions
+    },
+
+    setNavigationHistoryDropdownOptions: async function() {
+      if (!process.env.IS_ELECTRON) { return }
 
-      this.navigationHistory.goToIndex(index)
+      const { ipcRenderer } = require('electron')
+      const navigationHistoryLength = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_LENGTH)
+      const navigationHistoryActiveIndex = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX)
+
+      this.navigationHistoryDropdownOptions = await this.getNavigationHistoryDropdownOptions(ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength)
     },
 
-    historyForward: function (index) {
-      if (!index) {
-        this.$router.forward()
-        return
+    goToOffset: function (offset) {
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        ipcRenderer.send(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, offset)
       }
+    },
 
-      this.navigationHistory.goToIndex(index)
+    historyBack: function (offset) {
+      if (offset != null) {
+        this.goToOffset(offset)
+      } else {
+        this.$router.back() 
+      }
+    },
+
+    historyForward: function (offset) {
+      if (offset != null) {
+        this.goToOffset(offset)
+      } else {
+        this.$router.forward() 
+      }
     },
 
     toggleSideNav: function () {
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index aaa72da300f6..62ab62f52ddd 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -54,7 +54,8 @@
   user-select: none;
 }
 
-.navIcon, :deep(.ftIconButton:not(.arrowDisabled) .iconButton) {
+.navIcon,
+:deep(.ftIconButton:not(.arrowDisabled) .iconButton) {
   border-radius: 50%;
   color: var(--primary-text-color);
   cursor: pointer;
@@ -78,7 +79,8 @@
   }
 }
 
-.topNavBarColor .navIcon, .topNavBarColor :deep(.ftIconButton:not(.arrowDisabled) .iconButton)  {
+.topNavBarColor .navIcon,
+.topNavBarColor :deep(.ftIconButton:not(.arrowDisabled) .iconButton) {
   color: var(--text-with-main-color);
 
   &:hover {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 14314e170d5e..d156e0296854 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -15,14 +15,14 @@
       />
       <ft-icon-button
         class="navIconButton"
-        :disabled="arrowBackwardDisabled"
-        :class="{ arrowDisabled: arrowBackwardDisabled }"
+        :disabled="isArrowBackwardDisabled"
+        :class="{ arrowDisabled: isArrowBackwardDisabled }"
         :icon="['fas', 'arrow-left']"
         :theme="null"
         :size="20"
         :use-shadow="false"
         dropdown-position-x="right"
-        :dropdown-options="sessionNavigationHistoryDropdownOptions"
+        :dropdown-options="navigationHistoryDropdownOptions"
         :open-on-right-or-long-click="true"
         :title="backwardText"
         @click="historyBack"
@@ -30,14 +30,14 @@
       />
       <ft-icon-button
         class="navIconButton"
-        :disabled="arrowForwardDisabled"
-        :class="{ arrowDisabled: arrowForwardDisabled }"
+        :disabled="isArrowForwardDisabled"
+        :class="{ arrowDisabled: isArrowForwardDisabled }"
         :icon="['fas', 'arrow-right']"
         :theme="null"
         :size="20"
         :use-shadow="false"
         dropdown-position-x="right"
-        :dropdown-options="sessionNavigationHistoryDropdownOptions"
+        :dropdown-options="navigationHistoryDropdownOptions"
         :open-on-right-or-long-click="true"
         :title="forwardText"
         @click="historyForward"

From d9b8637acf0aaa1f17adf4a160771071d72cf49c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 24 Oct 2024 23:21:50 -0500
Subject: [PATCH 14/18] Implement workaround for updating the current page
 title in the dropdown list

---
 src/renderer/components/top-nav/top-nav.js | 26 +++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 0392ed19a94a..2f7aa31f626f 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -36,6 +36,7 @@ export default defineComponent({
       showSearchContainer: true,
       isArrowBackwardDisabled,
       isArrowForwardDisabled,
+      navigationHistoryDropdownActiveEntry: null,
       navigationHistoryDropdownOptions: [],
       searchSuggestionsDataList: [],
       lastSuggestionQuery: ''
@@ -119,6 +120,18 @@ export default defineComponent({
         this.isArrowForwardDisabled = !window.navigation.canGoForward
         this.isArrowBackwardDisabled = !window.navigation.canGoBack
       }
+
+      /*
+        We currently don't have a good system for computing the current document title,
+        which can update asynchronously
+      */
+      const updateActiveNavigationEntryTitle = () => {
+        if (this.navigationHistoryDropdownActiveEntry?.label && this.navigationHistoryDropdownActiveEntry.label !== document.title) {
+          this.navigationHistoryDropdownActiveEntry.label = document.title
+          clearInterval(awaitDocumentTitleUpdateInterval)
+        }
+      }
+      const awaitDocumentTitleUpdateInterval = setInterval(updateActiveNavigationEntryTitle, 500)
     }
   },
   mounted: function () {
@@ -357,11 +370,18 @@ export default defineComponent({
 
       for (let index = end; index >= Math.max(0, end + 1 - NAV_HISTORY_DISPLAY_LIMIT); --index) {
         const routeLabel = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, index)
-        dropdownOptions.push({
+        const isActiveIndex = index === navigationHistoryActiveIndex
+        const dropdownOption = {
           label: routeLabel,
           value: index - navigationHistoryActiveIndex,
-          active: index === navigationHistoryActiveIndex
-        })
+          active: isActiveIndex
+        }
+
+        dropdownOptions.push(dropdownOption)
+
+        if (isActiveIndex) {
+          this.navigationHistoryDropdownActiveEntry = dropdownOption
+        }
       }
       return dropdownOptions
     },

From 71c09d7ba3a4cb7467af4ddb4db027097214dc12 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 24 Oct 2024 23:49:15 -0500
Subject: [PATCH 15/18] Have document title update properly

---
 src/main/index.js                          | 38 +++++++++++++---------
 src/renderer/App.js                        |  3 +-
 src/renderer/components/top-nav/top-nav.js | 20 +++++-------
 src/renderer/store/modules/utils.js        | 14 +++++++-
 src/renderer/views/Channel/Channel.js      |  7 ++--
 src/renderer/views/Hashtag/Hashtag.js      |  9 +++--
 src/renderer/views/Playlist/Playlist.js    |  3 +-
 src/renderer/views/Watch/Watch.js          |  3 +-
 8 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index 2dcc1d3d84c1..1ec2fde23f7d 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -887,6 +887,28 @@ function runApp() {
     session.defaultSession.closeAllConnections()
   })
 
+
+  // #region navigation history
+
+  ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, ({ sender }, offset) => {
+    sender.navigationHistory.goToOffset(offset)
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
+    return sender.navigationHistory.getEntryAtIndex(index)?.title
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
+    return sender.navigationHistory.getActiveIndex()
+  })
+
+  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
+    return sender.navigationHistory.length()
+  })
+
+  // #endregion navigation history
+
+
   ipcMain.handle(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
     if (typeof url === 'string') {
       let parsedURL
@@ -927,22 +949,6 @@ function runApp() {
     return app.getPath('pictures')
   })
 
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ENTRY_TITLE_AT_INDEX, async ({ sender }, index) => {
-    return sender.navigationHistory.getEntryAtIndex(index)?.title
-  })
-
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX, async ({ sender }) => {
-    return sender.navigationHistory.getActiveIndex()
-  })
-
-  ipcMain.handle(IpcChannels.GET_NAV_HISTORY_LENGTH, async ({ sender }) => {
-    return sender.navigationHistory.length()
-  })
-
-  ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, async ({ sender }, offset) => {
-    sender.navigationHistory.goToOffset(offset)
-  })
-
   ipcMain.handle(IpcChannels.SHOW_OPEN_DIALOG, async ({ sender }, options) => {
     const senderWindow = findSenderWindow(sender)
     if (senderWindow) {
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 6f29f4e2a7c4..294374d9735f 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -535,7 +535,7 @@ export default defineComponent({
 
     setWindowTitle: function() {
       if (this.windowTitle !== null) {
-        document.title = this.windowTitle
+        this.setAppTitle(this.windowTitle)
       }
     },
 
@@ -558,6 +558,7 @@ export default defineComponent({
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',
       'fetchInvidiousInstancesFromFile',
+      'setAppTitle',
       'setRandomCurrentInvidiousInstance',
       'setupListenersToSyncWindows',
       'updateBaseTheme',
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 2f7aa31f626f..9a84b0c1d3ab 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -43,6 +43,10 @@ export default defineComponent({
     }
   },
   computed: {
+    appTitle: function () {
+      return this.$store.getters.getAppTitle
+    },
+
     hideSearchBar: function () {
       return this.$store.getters.getHideSearchBar
     },
@@ -120,18 +124,12 @@ export default defineComponent({
         this.isArrowForwardDisabled = !window.navigation.canGoForward
         this.isArrowBackwardDisabled = !window.navigation.canGoBack
       }
-
-      /*
-        We currently don't have a good system for computing the current document title,
-        which can update asynchronously
-      */
-      const updateActiveNavigationEntryTitle = () => {
-        if (this.navigationHistoryDropdownActiveEntry?.label && this.navigationHistoryDropdownActiveEntry.label !== document.title) {
-          this.navigationHistoryDropdownActiveEntry.label = document.title
-          clearInterval(awaitDocumentTitleUpdateInterval)
-        }
+    },
+    appTitle: function (value) {
+      document.title = value
+      if (this.navigationHistoryDropdownActiveEntry?.label) {
+        this.navigationHistoryDropdownActiveEntry.label = value
       }
-      const awaitDocumentTitleUpdateInterval = setInterval(updateActiveNavigationEntryTitle, 500)
     }
   },
   mounted: function () {
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 53385c9c22a6..e3dad4adc0a6 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -60,6 +60,7 @@ const state = {
     shorts: false,
     communityPosts: false,
   },
+  appTitle: ''
 }
 
 const getters = {
@@ -175,6 +176,9 @@ const getters = {
   getSubscriptionForCommunityPostsFirstAutoFetchRun (state) {
     return state.subscriptionFirstAutoFetchRunData.communityPosts === true
   },
+  getAppTitle (state) {
+    return state.appTitle
+  }
 }
 
 const actions = {
@@ -793,6 +797,10 @@ const actions = {
       ipcRenderer.send(IpcChannels.OPEN_IN_EXTERNAL_PLAYER, { executable, args })
     }
   },
+
+  setAppTitle({ commit }, title) {
+    commit('setAppTitle', title)
+  }
 }
 
 const mutations = {
@@ -957,6 +965,10 @@ const mutations = {
     state.externalPlayerCmdArguments = value
   },
 
+  setAppTitle (state, value) {
+    state.appTitle = value
+  },
+
   setSubscriptionForVideosFirstAutoFetchRun (state) {
     state.subscriptionFirstAutoFetchRunData.videos = true
   },
@@ -968,7 +980,7 @@ const mutations = {
   },
   setSubscriptionForCommunityPostsFirstAutoFetchRun (state) {
     state.subscriptionFirstAutoFetchRunData.communityPosts = true
-  },
+  }
 }
 
 export default {
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index eeb6c7b289ff..6c3d5887da0c 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -522,7 +522,7 @@ export default defineComponent({
           this.channelName = channelName
           this.thumbnailUrl = channelThumbnailUrl
 
-          document.title = `${channelName} - ${packageDetails.productName}`
+          this.setAppTitle(`${channelName} - ${packageDetails.productName}`)
 
           this.updateSubscriptionDetails({ channelThumbnailUrl, channelName, channelId: this.id })
 
@@ -566,7 +566,7 @@ export default defineComponent({
         }
         this.tags = tags
 
-        document.title = `${channelName} - ${packageDetails.productName}`
+        this.setAppTitle(`${channelName} - ${packageDetails.productName}`)
 
         if (subscriberText) {
           const subCount = parseLocalSubscriberCount(subscriberText)
@@ -1018,7 +1018,7 @@ export default defineComponent({
         const channelName = response.author
         const channelId = response.authorId
         this.channelName = channelName
-        document.title = `${this.channelName} - ${packageDetails.productName}`
+        this.setAppTitle(`${this.channelName} - ${packageDetails.productName}`)
         this.id = channelId
         this.isFamilyFriendly = response.isFamilyFriendly
         this.subCount = response.subCount
@@ -2021,6 +2021,7 @@ export default defineComponent({
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
     ...mapActions([
+      'setAppTitle',
       'showOutlines',
       'updateSubscriptionDetails',
       'updateSubscriptionVideosCacheByChannel',
diff --git a/src/renderer/views/Hashtag/Hashtag.js b/src/renderer/views/Hashtag/Hashtag.js
index 3bc62f9b5dc1..33fa12b354b0 100644
--- a/src/renderer/views/Hashtag/Hashtag.js
+++ b/src/renderer/views/Hashtag/Hashtag.js
@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtElementList from '../../components/FtElementList/FtElementList.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -68,7 +69,7 @@ export default defineComponent({
       } else {
         await this.getInvidiousHashtag(hashtag)
       }
-      document.title = `${this.hashtag} - ${packageDetails.productName}`
+      this.setAppTitle(`${this.hashtag} - ${packageDetails.productName}`)
     },
 
     getInvidiousHashtag: async function(hashtag, page) {
@@ -167,6 +168,10 @@ export default defineComponent({
       } else if (this.apiUsed === 'invidious') {
         this.getInvidiousHashtag(this.hashtag.substring(1), this.pageNumber)
       }
-    }
+    },
+
+    ...mapActions([
+      'setAppTitle'
+    ])
   }
 })
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
index 82faccfb8f91..44281b557856 100644
--- a/src/renderer/views/Playlist/Playlist.js
+++ b/src/renderer/views/Playlist/Playlist.js
@@ -602,7 +602,7 @@ export default defineComponent({
         playlistTitle,
         channelName,
       ].filter(v => v).join(' | ')
-      document.title = `${titleText} - ${packageDetails.productName}`
+      this.setAppTitle(`${titleText} - ${packageDetails.productName}`)
     },
 
     handleResize: function () {
@@ -616,6 +616,7 @@ export default defineComponent({
       'updatePlaylist',
       'updateUserPlaylistSortOrder',
       'removeVideo',
+      'setAppTitle'
     ]),
 
     ...mapMutations([
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 171f6c530276..121531cad36c 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -1590,7 +1590,7 @@ export default defineComponent({
     },
 
     updateTitle: function () {
-      document.title = `${this.videoTitle} - ${packageDetails.productName}`
+      this.setAppTitle(`${this.videoTitle} - ${packageDetails.productName}`)
     },
 
     isHiddenVideo: function (forbiddenTitles, channelsHidden, video) {
@@ -1607,6 +1607,7 @@ export default defineComponent({
     },
 
     ...mapActions([
+      'setAppTitle',
       'updateHistory',
       'updateWatchProgress',
       'updateLastViewedPlaylist',

From 3c4adc0b62325c920b2b9c91ea901c31aa090d54 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 25 Oct 2024 08:36:15 -0500
Subject: [PATCH 16/18] Fix webpack build issue

---
 src/renderer/components/top-nav/top-nav.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 9a84b0c1d3ab..b42c946c711e 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -385,13 +385,13 @@ export default defineComponent({
     },
 
     setNavigationHistoryDropdownOptions: async function() {
-      if (!process.env.IS_ELECTRON) { return }
-
-      const { ipcRenderer } = require('electron')
-      const navigationHistoryLength = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_LENGTH)
-      const navigationHistoryActiveIndex = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX)
+      if (process.env.IS_ELECTRON) {
+        const { ipcRenderer } = require('electron')
+        const navigationHistoryLength = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_LENGTH)
+        const navigationHistoryActiveIndex = await ipcRenderer.invoke(IpcChannels.GET_NAV_HISTORY_ACTIVE_INDEX)
 
-      this.navigationHistoryDropdownOptions = await this.getNavigationHistoryDropdownOptions(ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength)
+        this.navigationHistoryDropdownOptions = await this.getNavigationHistoryDropdownOptions(ipcRenderer, navigationHistoryActiveIndex, navigationHistoryLength)
+      }
     },
 
     goToOffset: function (offset) {

From 1e9d706217f0f7896884ec02f3cd817d376036b8 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 25 Oct 2024 09:17:27 -0500
Subject: [PATCH 17/18] Fix document.title not populating on the first page
 after loading the app.

---
 src/renderer/App.js                        | 16 ++++++++++++++--
 src/renderer/components/top-nav/top-nav.js | 18 ++++++++----------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 294374d9735f..71fa8411fc43 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -97,6 +97,7 @@ export default defineComponent({
     externalPlayer: function () {
       return this.$store.getters.getExternalPlayer
     },
+
     defaultInvidiousInstance: function () {
       return this.$store.getters.getDefaultInvidiousInstance
     },
@@ -142,7 +143,11 @@ export default defineComponent({
 
     externalLinkHandling: function () {
       return this.$store.getters.getExternalLinkHandling
-    }
+    },
+
+    appTitle: function () {
+      return this.$store.getters.getAppTitle
+    },
   },
   watch: {
     windowTitle: 'setWindowTitle',
@@ -154,10 +159,11 @@ export default defineComponent({
     secColor: 'checkThemeSettings',
 
     locale: 'setLocale',
+
+    appTitle: 'setDocumentTitle'
   },
   created () {
     this.checkThemeSettings()
-    this.setWindowTitle()
     this.setLocale()
   },
   mounted: function () {
@@ -203,10 +209,16 @@ export default defineComponent({
         if (this.$router.currentRoute.path === '/') {
           this.$router.replace({ path: this.landingPage })
         }
+
+        this.setWindowTitle()
       })
     })
   },
   methods: {
+    setDocumentTitle: function(value) {
+      document.title = value
+      this.$nextTick(() => this.$refs.topNav?.setActiveNavigationHistoryEntryTitle(value))
+    },
     checkThemeSettings: function () {
       const theme = {
         baseTheme: this.baseTheme || 'dark',
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index b42c946c711e..e3b985e7486f 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -43,10 +43,6 @@ export default defineComponent({
     }
   },
   computed: {
-    appTitle: function () {
-      return this.$store.getters.getAppTitle
-    },
-
     hideSearchBar: function () {
       return this.$store.getters.getHideSearchBar
     },
@@ -125,12 +121,6 @@ export default defineComponent({
         this.isArrowBackwardDisabled = !window.navigation.canGoBack
       }
     },
-    appTitle: function (value) {
-      document.title = value
-      if (this.navigationHistoryDropdownActiveEntry?.label) {
-        this.navigationHistoryDropdownActiveEntry.label = value
-      }
-    }
   },
   mounted: function () {
     let previousWidth = window.innerWidth
@@ -435,6 +425,14 @@ export default defineComponent({
     updateSearchInputText: function (text) {
       this.$refs.searchInput.updateInputData(text)
     },
+    setActiveNavigationHistoryEntryTitle(value) {
+      this.$nextTick(() => {
+        if (this.navigationHistoryDropdownActiveEntry?.label) {
+          this.navigationHistoryDropdownActiveEntry.label = value
+        }
+      })
+    },
+
     ...mapActions([
       'getYoutubeUrlInfo',
       'showSearchFilters'

From c4ae192f4885a4f6aa2dcb11291a01e8b4327606 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 27 Oct 2024 19:44:19 -0500
Subject: [PATCH 18/18] Fix linting

---
 src/main/index.js                          | 2 --
 src/renderer/components/top-nav/top-nav.js | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/main/index.js b/src/main/index.js
index e8cd67522f4f..9cccd635de59 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -888,7 +888,6 @@ function runApp() {
     session.defaultSession.closeAllConnections()
   })
 
-
   // #region navigation history
 
   ipcMain.on(IpcChannels.GO_TO_NAV_HISTORY_OFFSET, ({ sender }, offset) => {
@@ -909,7 +908,6 @@ function runApp() {
 
   // #endregion navigation history
 
-
   ipcMain.handle(IpcChannels.OPEN_EXTERNAL_LINK, (_, url) => {
     if (typeof url === 'string') {
       let parsedURL
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index e3b985e7486f..8dfdeabc42de 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -395,7 +395,7 @@ export default defineComponent({
       if (offset != null) {
         this.goToOffset(offset)
       } else {
-        this.$router.back() 
+        this.$router.back()
       }
     },
 
@@ -403,7 +403,7 @@ export default defineComponent({
       if (offset != null) {
         this.goToOffset(offset)
       } else {
-        this.$router.forward() 
+        this.$router.forward()
       }
     },