From 158a65c6e80c2509f673ca2630e055b2c5610386 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 19:21:52 -0500
Subject: [PATCH 01/14] Add title and aria-pressed attributes to filter button

---
 src/renderer/components/top-nav/top-nav.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 291948ec65b7d..b4a604b393fc9 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -90,7 +90,9 @@
         <font-awesome-icon
           class="navFilterIcon navIcon"
           :class="{ filterChanged: searchFilterValueChanged }"
+          :aria-pressed="showFilters"
           :icon="['fas', 'filter']"
+          :title="$t('Search Filters.Search Filters')"
           role="button"
           tabindex="0"
           @click="showFilters = !showFilters"

From 80db02c726d22c7897032658f4f0b5d0e7979384 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 20:25:38 -0500
Subject: [PATCH 02/14] Add radio button hover and focus styling with
 accent-color

---
 src/renderer/components/ft-radio-button/ft-radio-button.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 7c5aa29e1254f..762f4f41163ee 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -10,7 +10,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 }
 
 .pure-checkbox input[type="checkbox"]:focus + label:before, .pure-radiobutton input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="radio"]:focus + label:before, .pure-radiobutton input[type="radio"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before, .pure-radiobutton input[type="checkbox"]:hover + label:before, .pure-checkbox input[type="radio"]:hover + label:before, .pure-radiobutton input[type="radio"]:hover + label:before {
-  border-color: var(--primary-color);
+  border: 2px solid var(--accent-color-active);
 }
 
 .pure-checkbox input[type="checkbox"]:active + label:before, .pure-radiobutton input[type="checkbox"]:active + label:before, .pure-checkbox input[type="radio"]:active + label:before, .pure-radiobutton input[type="radio"]:active + label:before { transition-duration: 0s; }
@@ -85,6 +85,10 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
   animation: borderscale 300ms ease-in;
 }
 
+.pure-radiobutton input[type="radio"]:focus + label:after{
+  background-color: var(--accent-color-active);
+}
+
 .pure-checkbox input[type="radio"]:checked + label:after, .pure-radiobutton input[type="radio"]:checked + label:after { transform: scale(1); }
 
 .pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after { border-radius: 50%; }

From 60b0594a832a21caf0817cf2cac4783b1416042a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 20:26:28 -0500
Subject: [PATCH 03/14] Programmatically apply focus after clicking to open
 filter

---
 src/renderer/components/top-nav/top-nav.js  | 9 ++++++++-
 src/renderer/components/top-nav/top-nav.vue | 4 ++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 347d02ab6fc37..c7075f8c7ab8d 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import FtInput from '../ft-input/ft-input.vue'
 import FtSearchFilters from '../ft-search-filters/ft-search-filters.vue'
@@ -273,6 +273,13 @@ export default defineComponent({
       this.showFilters = false
     },
 
+    toggleSearchFiltersDisplayed: function() {
+      this.showFilters = !this.showFilters
+      if (this.showFilters) {
+        nextTick(() => this.$refs.sortByRadio?.focus())
+      }
+    },
+
     handleSearchFilterValueChanged: function (filterValueChanged) {
       this.searchFilterValueChanged = filterValueChanged
     },
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index b4a604b393fc9..2337941125ba9 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -95,8 +95,8 @@
           :title="$t('Search Filters.Search Filters')"
           role="button"
           tabindex="0"
-          @click="showFilters = !showFilters"
-          @keydown.enter.prevent="showFilters = !showFilters"
+          @click="toggleSearchFiltersDisplayed"
+          @keydown.enter.prevent="toggleSearchFiltersDisplayed"
         />
       </div>
       <ft-search-filters

From 1525582ec25baf2ffc77a3f6be854aa3c0b0423b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 29 Aug 2023 21:38:46 -0500
Subject: [PATCH 04/14] Implement filter-button-visible icon styling

---
 src/renderer/components/top-nav/top-nav.scss | 5 +++++
 src/renderer/components/top-nav/top-nav.vue  | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 6647409ff283f..7308177ffdbc7 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -96,6 +96,11 @@
       box-shadow: 0 0 $effect-distance var(--text-with-main-color);
     }
   }
+
+  &.showFilters {
+    background-color: var(--primary-text-color);
+    color: var(--card-bg-color);
+  }
 }
 
 .side {
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 2337941125ba9..9c9be81351300 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -89,7 +89,7 @@
         />
         <font-awesome-icon
           class="navFilterIcon navIcon"
-          :class="{ filterChanged: searchFilterValueChanged }"
+          :class="{ filterChanged: searchFilterValueChanged, showFilters: showFilters }"
           :aria-pressed="showFilters"
           :icon="['fas', 'filter']"
           :title="$t('Search Filters.Search Filters')"

From bfeccf6071df606590bf6c548bd574b653e7dec9 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 30 Aug 2023 12:52:27 -0500
Subject: [PATCH 05/14] Use more standard means to grab grandchild ref

---
 src/renderer/components/top-nav/top-nav.js  | 2 +-
 src/renderer/components/top-nav/top-nav.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index c7075f8c7ab8d..2eeb016a63fa7 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -276,7 +276,7 @@ export default defineComponent({
     toggleSearchFiltersDisplayed: function() {
       this.showFilters = !this.showFilters
       if (this.showFilters) {
-        nextTick(() => this.$refs.sortByRadio?.focus())
+        nextTick(() => this.$refs.searchFilters?.$refs.sortByRadio?.$el?.focus())
       }
     },
 
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index 9c9be81351300..143f22541f25e 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -100,6 +100,7 @@
         />
       </div>
       <ft-search-filters
+        ref="searchFilters"
         v-if="!hideSearchBar"
         v-show="showFilters"
         class="searchFilters"

From f5acc0eebfbad9009e4f789ea80c653061ee7f6b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 30 Aug 2023 19:24:02 -0500
Subject: [PATCH 06/14] Make search filters heading not selectable

---
 src/renderer/components/ft-search-filters/ft-search-filters.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index b9052b3050c85..a124c04d86791 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -15,6 +15,8 @@
 
 .center {
   text-align: center;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .searchRadio {

From b136e15216cb5566b7caf9e54e33e2b66da16ce8 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 30 Aug 2023 19:24:33 -0500
Subject: [PATCH 07/14] Additional icon and radio button styling updates

---
 .../ft-radio-button/ft-radio-button.css       | 14 ++++++-------
 src/renderer/components/top-nav/top-nav.scss  | 21 +++++++++++++------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.css b/src/renderer/components/ft-radio-button/ft-radio-button.css
index 762f4f41163ee..45d58d75a084d 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.css
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.css
@@ -10,7 +10,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 }
 
 .pure-checkbox input[type="checkbox"]:focus + label:before, .pure-radiobutton input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="radio"]:focus + label:before, .pure-radiobutton input[type="radio"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before, .pure-radiobutton input[type="checkbox"]:hover + label:before, .pure-checkbox input[type="radio"]:hover + label:before, .pure-radiobutton input[type="radio"]:hover + label:before {
-  border: 2px solid var(--accent-color-active);
+  border: 2px solid var(--primary-color);
 }
 
 .pure-checkbox input[type="checkbox"]:active + label:before, .pure-radiobutton input[type="checkbox"]:active + label:before, .pure-checkbox input[type="radio"]:active + label:before, .pure-radiobutton input[type="radio"]:active + label:before { transition-duration: 0s; }
@@ -29,14 +29,14 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 .pure-checkbox input[type="checkbox"] + label:before, .pure-radiobutton input[type="checkbox"] + label:before, .pure-checkbox input[type="radio"] + label:before, .pure-radiobutton input[type="radio"] + label:before {
   box-sizing: content-box;
   content: '';
-  color: var(--primary-color);
+  color: var(--primary-text-color);
   position: absolute;
   top: 50%;
   left: 0;
   width: 14px;
   height: 14px;
   margin-top: -9px;
-  border: 2px solid var(--primary-color);
+  border: 2px solid var(--primary-text-color);
   text-align: center;
   transition: all 0.4s ease;
 }
@@ -44,7 +44,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 .pure-checkbox input[type="checkbox"] + label:after, .pure-radiobutton input[type="checkbox"] + label:after, .pure-checkbox input[type="radio"] + label:after, .pure-radiobutton input[type="radio"] + label:after {
   box-sizing: content-box;
   content: '';
-  background-color: var(--primary-color);
+  background-color: var(--primary-text-color);
   position: absolute;
   top: 50%;
   left: 4px;
@@ -86,7 +86,7 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 }
 
 .pure-radiobutton input[type="radio"]:focus + label:after{
-  background-color: var(--accent-color-active);
+  background-color: var(--primary-color);
 }
 
 .pure-checkbox input[type="radio"]:checked + label:after, .pure-radiobutton input[type="radio"]:checked + label:after { transform: scale(1); }
@@ -95,14 +95,14 @@ pure-checkbox input[type="checkbox"], .pure-radiobutton input[type="checkbox"],
 
 .pure-checkbox input[type="checkbox"]:checked + label:before, .pure-radiobutton input[type="checkbox"]:checked + label:before {
   animation: borderscale 200ms ease-in;
-  background: var(--primary-color);
+  background: var(--primary-text-color);
 }
 
 .pure-checkbox input[type="checkbox"]:checked + label:after, .pure-radiobutton input[type="checkbox"]:checked + label:after { transform: rotate(-45deg) scale(1); }
 
 @keyframes
 borderscale {  50% {
- box-shadow: 0 0 0 2px var(--primary-color);
+ box-shadow: 0 0 0 2px var(--primary-text-color);
 }
 }
 
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index 7308177ffdbc7..12d686ad98ebc 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -85,22 +85,31 @@
 }
 
 .navFilterIcon {
-  $effect-distance: 10px;
+  $effect-distance: 20px;
 
   margin-left: $effect-distance;
 
+  &.showFilters {
+    background-color: var(--primary-text-color);
+    color: var(--card-bg-color);
+    box-shadow: 0 0 $effect-distance var(--primary-color);
+    transform: translateY(1px);
+
+    // @include top-nav-is-colored {
+    //   background-color: var(--primary-text-color);
+    //   color: var(--card-bg-color);
+    // }
+  }
+
   &.filterChanged {
     box-shadow: 0 0 $effect-distance var(--primary-color);
+    color: var(--primary-color);
 
     @include top-nav-is-colored {
       box-shadow: 0 0 $effect-distance var(--text-with-main-color);
+      color: var(--text-with-main-color);
     }
   }
-
-  &.showFilters {
-    background-color: var(--primary-text-color);
-    color: var(--card-bg-color);
-  }
 }
 
 .side {

From fbb633275874e1f0f5709c182fef2689b645d1aa Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 18 Apr 2024 09:36:07 -0500
Subject: [PATCH 08/14] Implement modal focus management with portal-vue

For the importance of modal focus management, see: https://accessibility.huit.harvard.edu/technique-accessible-modal-dialogs
---
 package.json                                  |  1 +
 src/renderer/App.js                           | 13 ++-
 src/renderer/App.vue                          | 90 +++++++++--------
 .../ft-create-playlist-prompt.js              |  4 +-
 .../ft-playlist-add-video-prompt.js           |  4 +-
 .../components/ft-prompt/ft-prompt.js         | 17 ++--
 .../components/ft-prompt/ft-prompt.vue        | 97 ++++++++++---------
 .../ft-search-filters/ft-search-filters.js    |  2 +-
 .../ft-search-filters/ft-search-filters.vue   |  4 +-
 src/renderer/main.js                          |  2 +
 yarn.lock                                     |  5 +
 11 files changed, 131 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index a9ae18cc225a1..3e4437969dd5f 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "marked": "^12.0.1",
     "path-browserify": "^1.0.1",
+    "portal-vue": "^2.1.7",
     "process": "^0.11.10",
     "swiper": "^11.1.1",
     "video.js": "7.21.5",
diff --git a/src/renderer/App.js b/src/renderer/App.js
index 009dc2cc46805..853f308a77e34 100644
--- a/src/renderer/App.js
+++ b/src/renderer/App.js
@@ -48,6 +48,7 @@ export default defineComponent({
       latestBlogUrl: '',
       updateChangelog: '',
       changeLogTitle: '',
+      isPromptOpen: false,
       lastExternalLinkToBeOpened: '',
       showExternalLinkOpeningPrompt: false,
       externalLinkOpeningPromptValues: [
@@ -148,12 +149,6 @@ export default defineComponent({
     secColor: 'checkThemeSettings',
 
     locale: 'setLocale',
-
-    $route () {
-      // react to route changes...
-      // Hide top nav filter panel on page change
-      this.$refs.topNav?.hideFilters()
-    }
   },
   created () {
     this.checkThemeSettings()
@@ -300,6 +295,10 @@ export default defineComponent({
       this.showBlogBanner = false
     },
 
+    handlePromptPortalUpdate: function(newVal) {
+      this.isPromptOpen = newVal
+    },
+
     openDownloadsPage: function () {
       const url = 'https://freetubeapp.io#download'
       openExternalLink(url)
@@ -549,7 +548,7 @@ export default defineComponent({
       'updateMainColor',
       'updateSecColor',
       'showOutlines',
-      'hideOutlines'
+      'hideOutlines',
     ])
   }
 })
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index dbd207735b66c..159f5ce38dfbd 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -8,45 +8,10 @@
       isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
-    <top-nav ref="topNav" />
-    <side-nav ref="sideNav" />
-    <ft-flex-box
-      class="flexBox routerView"
-      role="main"
-    >
-      <div
-        v-if="showUpdatesBanner || showBlogBanner"
-        class="banner-wrapper"
-      >
-        <ft-notification-banner
-          v-if="showUpdatesBanner"
-          class="banner"
-          :message="updateBannerMessage"
-          role="link"
-          @click="handleUpdateBannerClick"
-        />
-        <ft-notification-banner
-          v-if="showBlogBanner"
-          class="banner"
-          :message="blogBannerMessage"
-          role="link"
-          @click="handleNewBlogBannerClick"
-        />
-      </div>
-      <transition
-        v-if="dataReady"
-        mode="out-in"
-        name="fade"
-      >
-        <!-- <keep-alive> -->
-        <RouterView
-          ref="router"
-          class="routerView"
-        />
-      <!-- </keep-alive> -->
-      </transition>
-    </ft-flex-box>
-
+    <portal-target
+      name="promptPortal"
+      @change="handlePromptPortalUpdate"
+    />
     <ft-prompt
       v-if="showReleaseNotes"
       :label="changeLogTitle"
@@ -77,7 +42,7 @@
     />
     <!-- !hideSearchBar &&  -->
     <ft-search-filters
-      v-show="showSearchFilters"
+      v-if="showSearchFilters"
     />
     <ft-playlist-add-video-prompt
       v-if="showAddToPlaylistPrompt"
@@ -89,6 +54,51 @@
     <ft-progress-bar
       v-if="showProgressBar"
     />
+    <top-nav
+      ref="topNav"
+      :inert="isPromptOpen"
+    />
+    <side-nav
+      ref="sideNav"
+      :inert="isPromptOpen"
+    />
+    <ft-flex-box
+      class="flexBox routerView"
+      role="main"
+      :inert="isPromptOpen"
+    >
+      <div
+        v-if="showUpdatesBanner || showBlogBanner"
+        class="banner-wrapper"
+      >
+        <ft-notification-banner
+          v-if="showUpdatesBanner"
+          class="banner"
+          :message="updateBannerMessage"
+          role="link"
+          @click="handleUpdateBannerClick"
+        />
+        <ft-notification-banner
+          v-if="showBlogBanner"
+          class="banner"
+          :message="blogBannerMessage"
+          role="link"
+          @click="handleNewBlogBannerClick"
+        />
+      </div>
+      <transition
+        v-if="dataReady"
+        mode="out-in"
+        name="fade"
+      >
+        <!-- <keep-alive> -->
+        <RouterView
+          ref="router"
+          class="routerView"
+        />
+        <!-- </keep-alive> -->
+      </transition>
+    </ft-flex-box>
   </div>
 </template>
 
diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
index 1beac5852a38a..f2e989dde68ba 100644
--- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
+++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'
@@ -34,7 +34,7 @@ export default defineComponent({
   mounted: function () {
     this.playlistName = this.newPlaylistVideoObject.title
     // Faster to input required playlist name
-    this.$refs.playlistNameInput.focus()
+    nextTick(() => this.$refs.playlistNameInput.focus())
   },
   methods: {
     createNewPlaylist: function () {
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
index 27c1f376925e1..b66f5333fa732 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import debounce from 'lodash.debounce'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
@@ -201,7 +201,7 @@ export default defineComponent({
 
     this.updateQueryDebounce = debounce(this.updateQuery, 500)
     // User might want to search first if they have many playlists
-    this.$refs.searchBar.focus()
+    nextTick(() => this.$refs.searchBar.focus())
   },
   beforeDestroy() {
     this.lastActiveElement?.focus()
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
index 45296bbfd8feb..c73e2cdcb68f8 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.js
+++ b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -56,15 +56,16 @@ export default defineComponent({
   },
   mounted: function () {
     this.lastActiveElement = document.activeElement
-
-    document.addEventListener('keydown', this.closeEventFunction, true)
-    document.querySelector('.prompt').addEventListener('keydown', this.arrowKeys, true)
-    this.promptButtons = Array.from(
-      document.querySelector('.prompt .promptCard .ft-flex-box').childNodes
-    ).filter((e) => {
-      return e.id && e.id.startsWith('prompt')
+    this.$nextTick(() => {
+      document.addEventListener('keydown', this.closeEventFunction, true)
+      document.querySelector('.prompt').addEventListener('keydown', this.arrowKeys, true)
+      this.promptButtons = Array.from(
+        document.querySelector('.prompt .promptCard .ft-flex-box').childNodes
+      ).filter((e) => {
+        return e.id && e.id.startsWith('prompt')
+      })
+      this.focusItem(0)
     })
-    this.focusItem(0)
   },
   methods: {
     hide: function() {
diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue
index dfcd84ad71e94..02d2ac0154490 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.vue
+++ b/src/renderer/components/ft-prompt/ft-prompt.vue
@@ -1,52 +1,55 @@
 <template>
-  <div
-    class="prompt"
-    tabindex="-1"
-    @click="handleHide"
-    @keydown.enter="handleHide"
-  >
-    <ft-card
-      class="promptCard"
-      :class="{ autosize }"
-      :aria-labelledby="('dialog-' + sanitizedLabel)"
+  <portal to="promptPortal">
+    <div
+      ref="openPrompt"
+      class="prompt"
+      tabindex="-1"
+      @click="handleHide"
+      @keydown.enter="handleHide"
     >
-      <slot>
-        <h2
-          :id="'dialog-' + sanitizedLabel"
-          class="center"
-        >
-          {{ label }}
-        </h2>
-        <p
-          v-for="extraLabel in extraLabels"
-          :key="extraLabel"
-          class="center"
-        >
-          <strong>
-            {{ extraLabel }}
-          </strong>
-        </p>
-        <ft-flex-box>
-          <ft-button
-            v-for="(option, index) in optionNames"
-            :id="'prompt-' + sanitizedLabel + '-' + index"
-            :key="index"
-            :label="option"
-            @click="$emit('click', optionValues[index])"
-          />
-          <ft-button
-            v-if="showClose"
-            :id="'prompt-' + sanitizedLabel + '-close'"
-            :label="$t('Close')"
-            :tabindex="0"
-            text-color="'var(--accent-color)'"
-            background-color="'var(--text-with-accent-color)'"
-            @click="hide"
-          />
-        </ft-flex-box>
-      </slot>
-    </ft-card>
-  </div>
+      <ft-card
+        class="promptCard"
+        :class="{ autosize }"
+        :aria-labelledby="('dialog-' + sanitizedLabel)"
+      >
+        <slot>
+          <h2
+            :id="'dialog-' + sanitizedLabel"
+            class="center"
+          >
+            {{ label }}
+          </h2>
+          <p
+            v-for="extraLabel in extraLabels"
+            :key="extraLabel"
+            class="center"
+          >
+            <strong>
+              {{ extraLabel }}
+            </strong>
+          </p>
+          <ft-flex-box>
+            <ft-button
+              v-for="(option, index) in optionNames"
+              :id="'prompt-' + sanitizedLabel + '-' + index"
+              :key="index"
+              :label="option"
+              @click="$emit('click', optionValues[index])"
+            />
+            <ft-button
+              v-if="showClose"
+              :id="'prompt-' + sanitizedLabel + '-close'"
+              :label="$t('Close')"
+              :tabindex="0"
+              text-color="'var(--accent-color)'"
+              background-color="'var(--text-with-accent-color)'"
+              @click="hide"
+            />
+          </ft-flex-box>
+        </slot>
+      </ft-card>
+    </div>
+  </portal>
 </template>
 
 <script src="./ft-prompt.js" />
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.js b/src/renderer/components/ft-search-filters/ft-search-filters.js
index 6aa6312dfa7e9..a0a4b2defd339 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.js
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtRadioButton from '../ft-radio-button/ft-radio-button.vue'
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.vue b/src/renderer/components/ft-search-filters/ft-search-filters.vue
index 06dad14a4f830..dd418eb635dec 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.vue
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.vue
@@ -3,7 +3,9 @@
     @click="hideSearchFilters"
   >
     <div>
-      <h2 class="center">
+      <h2
+        class="center"
+      >
         {{ title }}
       </h2>
       <ft-flex-box class="radioFlexBox">
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 11d87890841d4..c769fc5a45411 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -81,6 +81,7 @@ import {
   faMonero
 } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import PortalVue from 'portal-vue'
 
 Vue.config.devtools = process.env.NODE_ENV === 'development'
 Vue.config.performance = process.env.NODE_ENV === 'development'
@@ -172,6 +173,7 @@ new Vue({
   i18n,
   render: h => h(App)
 })
+Vue.use(PortalVue)
 
 // to avoid accessing electron api from web app build
 if (process.env.IS_ELECTRON) {
diff --git a/yarn.lock b/yarn.lock
index 52a248799483c..2de367c0fd9a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6681,6 +6681,11 @@ pluralize@^8.0.0:
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
+portal-vue@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
+  integrity sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==
+
 postcss-calc@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-9.0.1.tgz#a744fd592438a93d6de0f1434c572670361eb6c6"

From 8b2fb32b41a715b3895a075ed29d7e9ab332a31a Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 18 Apr 2024 10:53:49 -0500
Subject: [PATCH 09/14] Add themes for handling ft-prompt styling

This is a portal-compatible way of affecting prompt styling, as ':deep' does not work for portals.
---
 .../ft-playlist-add-video-prompt.css          | 10 -------
 .../ft-playlist-add-video-prompt.vue          |  1 +
 .../components/ft-prompt/ft-prompt.css        | 26 +++++++++++++++++++
 .../components/ft-prompt/ft-prompt.js         |  4 +++
 .../components/ft-prompt/ft-prompt.vue        |  4 ++-
 .../ft-search-filters/ft-search-filters.css   | 23 ----------------
 .../ft-search-filters/ft-search-filters.js    |  2 +-
 .../ft-search-filters/ft-search-filters.vue   |  1 +
 8 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
index 1824909255479..aa18554033106 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
@@ -6,16 +6,6 @@
   text-align: center;
 }
 
-/* Style for `ft-prompt` */
-:deep(.promptCard) {
-  /* Currently only this prompt has enough content to make prompt too high */
-  max-block-size: 95%;
-
-  /* Some child(s) will grow vertically */
-  display: flex;
-  flex-direction: column;
-}
-
 .searchInputsRow {
   display: grid;
 
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
index 92dd088056b78..5a2d9416b0fbd 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -1,5 +1,6 @@
 <template>
   <ft-prompt
+    theme="flex-column"
     @click="hide"
   >
     <h2 class="heading">
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 06312c5a864ac..5647f9450fb45 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -17,6 +17,7 @@
 
 .promptCard {
   overflow-y: scroll;
+  max-block-size: 95%;
 }
 
 .promptCard.autosize {
@@ -34,6 +35,31 @@
   box-sizing: border-box;
 }
 
+.promptCard.flex-column {
+    /* Some child(ren) will grow vertically */
+    display: flex;
+    flex-direction: column;
+}
+
+.promptCard.slim {
+  max-inline-size: 70%;
+  inset-inline-start: 15%;
+  padding-block: 10px;
+}
+
 .center {
   text-align: center;
 }
+
+@media only screen and (width <= 680px) {
+  .promptCard.slim {
+    padding-block: 5px;
+  }
+}
+
+@media only screen and (width <= 500px) {
+  .promptCard.slim {
+    max-inline-size: 80%;
+    inset-inline-start: 10%;
+  }
+}
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
index c73e2cdcb68f8..eff9ee6457820 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.js
+++ b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -36,6 +36,10 @@ export default defineComponent({
     autosize: {
       type: Boolean,
       default: false
+    },
+    theme: {
+      type: String,
+      default: 'base'
     }
   },
   emits: ['click'],
diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue
index 02d2ac0154490..d8c93b339b472 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.vue
+++ b/src/renderer/components/ft-prompt/ft-prompt.vue
@@ -9,7 +9,9 @@
     >
       <ft-card
         class="promptCard"
-        :class="{ autosize }"
+        :class="{ autosize, [theme]: true }"
+        role="dialog"
+        aria-modal="true"
         :aria-labelledby="('dialog-' + sanitizedLabel)"
       >
         <slot>
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.css b/src/renderer/components/ft-search-filters/ft-search-filters.css
index 0e9f6a5d0c82d..071a9b42c3f55 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.css
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.css
@@ -4,16 +4,6 @@
   user-select: none;
 }
 
-/* Style for `ft-prompt` */
-:deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-  max-inline-size: 70%;
-  inset-inline-start: 15%;
-  padding-block: 10px;
-
-  /* Currently only this prompt has enough content to make prompt too high */
-  max-block-size: 95%;
-}
-
 .searchRadio {
   padding: 5px;
 }
@@ -29,11 +19,6 @@
 }
 
 @media only screen and (width <= 680px) {
-  /* Style for `ft-prompt` */
-  :deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-    padding-block: 5px;
-  }
-
   .searchRadio {
     border-inline-end: 0;
     padding-block-start: 0;
@@ -43,11 +28,3 @@
     flex-flow: column;
   }
 }
-
-@media only screen and (width <= 500px) {
-  /* Style for `ft-prompt` */
-  :deep(.promptCard):has(.searchFilterCloseButtonContainer) {
-    max-inline-size: 80%;
-    inset-inline-start: 10%;
-  }
-}
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.js b/src/renderer/components/ft-search-filters/ft-search-filters.js
index a0a4b2defd339..6aa6312dfa7e9 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.js
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.js
@@ -1,4 +1,4 @@
-import { defineComponent, nextTick } from 'vue'
+import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtRadioButton from '../ft-radio-button/ft-radio-button.vue'
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.vue b/src/renderer/components/ft-search-filters/ft-search-filters.vue
index dd418eb635dec..229b67ee28f2a 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.vue
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.vue
@@ -1,5 +1,6 @@
 <template>
   <ft-prompt
+    theme="slim"
     @click="hideSearchFilters"
   >
     <div>

From 2c6a1dee94852aee38d5a0fc651aec0a89780b18 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 18 Apr 2024 11:13:12 -0500
Subject: [PATCH 10/14] Require title in ft-prompt to ensure accessible
 properties are functional

---
 .../ft-create-playlist-prompt/ft-create-playlist-prompt.js  | 3 +++
 .../ft-create-playlist-prompt/ft-create-playlist-prompt.vue | 3 ++-
 .../ft-playlist-add-video-prompt.js                         | 6 ++++++
 .../ft-playlist-add-video-prompt.vue                        | 5 ++---
 src/renderer/components/ft-prompt/ft-prompt.js              | 2 +-
 .../components/ft-search-filters/ft-search-filters.vue      | 2 ++
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
index f2e989dde68ba..1a01b59df8987 100644
--- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
+++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
@@ -24,6 +24,9 @@ export default defineComponent({
     }
   },
   computed: {
+    title: function () {
+      return this.$t('User Playlists.CreatePlaylistPrompt.New Playlist Name')
+    },
     allPlaylists: function () {
       return this.$store.getters.getAllPlaylists
     },
diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue
index f541d08892a36..e82ca98ac1dd6 100644
--- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue
+++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue
@@ -1,9 +1,10 @@
 <template>
   <ft-prompt
+    :label="title"
     @click="hideCreatePlaylistPrompt"
   >
     <h2 class="center">
-      {{ $t('User Playlists.CreatePlaylistPrompt.New Playlist Name') }}
+      {{ title }}
     </h2>
     <ft-flex-box>
       <ft-input
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
index b66f5333fa732..bbb06a24b260e 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -47,6 +47,12 @@ export default defineComponent({
     }
   },
   computed: {
+    title: function () {
+      return this.$tc('User Playlists.AddVideoPrompt.Select a playlist to add your N videos to', this.toBeAddedToPlaylistVideoCount, {
+        videoCount: this.toBeAddedToPlaylistVideoCount,
+      })
+    },
+
     showingCreatePlaylistPrompt: function () {
       return this.$store.getters.getShowCreatePlaylistPrompt
     },
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
index 5a2d9416b0fbd..dfca973d0c093 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -1,12 +1,11 @@
 <template>
   <ft-prompt
     theme="flex-column"
+    :label="title"
     @click="hide"
   >
     <h2 class="heading">
-      {{ $tc('User Playlists.AddVideoPrompt.Select a playlist to add your N videos to', toBeAddedToPlaylistVideoCount, {
-        videoCount: toBeAddedToPlaylistVideoCount,
-      }) }}
+      {{ title }}
     </h2>
     <p class="selected-count">
       {{ $tc('User Playlists.AddVideoPrompt.N playlists selected', selectedPlaylistCount, {
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
index eff9ee6457820..5cdecadff2e04 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.js
+++ b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -15,7 +15,7 @@ export default defineComponent({
   props: {
     label: {
       type: String,
-      default: ''
+      required: true
     },
     extraLabels: {
       type: Array,
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.vue b/src/renderer/components/ft-search-filters/ft-search-filters.vue
index 229b67ee28f2a..9c6236060e109 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.vue
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.vue
@@ -1,11 +1,13 @@
 <template>
   <ft-prompt
     theme="slim"
+    :label="title"
     @click="hideSearchFilters"
   >
     <div>
       <h2
         class="center"
+        name="title"
       >
         {{ title }}
       </h2>

From 10a06e6d8053799018c9dcc5101e576369ac7211 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 18 Apr 2024 12:14:34 -0500
Subject: [PATCH 11/14] Set initial radio button value on load

---
 .../ft-radio-button/ft-radio-button.js        |  6 +++++-
 .../ft-radio-button/ft-radio-button.vue       |  2 +-
 .../ft-search-filters/ft-search-filters.js    | 10 ++++++++++
 .../ft-search-filters/ft-search-filters.vue   |  4 ++++
 src/renderer/components/top-nav/top-nav.js    |  4 ----
 src/renderer/components/top-nav/top-nav.scss  | 19 -------------------
 src/renderer/components/top-nav/top-nav.vue   |  3 +--
 src/renderer/store/modules/utils.js           | 10 +++++-----
 8 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.js b/src/renderer/components/ft-radio-button/ft-radio-button.js
index f9135811536c9..62d5a545c3e98 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.js
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.js
@@ -18,6 +18,10 @@ export default defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    initialValueIndex: {
+      type: Number,
+      default: 0
     }
   },
   data: function () {
@@ -34,7 +38,7 @@ export default defineComponent({
   },
   mounted: function () {
     this.id = this._uid
-    this.selectedValue = this.values[0]
+    this.selectedValue = this.values[this.initialValueIndex]
   },
   methods: {
     updateSelectedValue: function (value) {
diff --git a/src/renderer/components/ft-radio-button/ft-radio-button.vue b/src/renderer/components/ft-radio-button/ft-radio-button.vue
index 4822888d2861e..9c6d14ed3a02a 100644
--- a/src/renderer/components/ft-radio-button/ft-radio-button.vue
+++ b/src/renderer/components/ft-radio-button/ft-radio-button.vue
@@ -14,7 +14,7 @@
         v-model="selectedValue"
         :name="inputName"
         :value="values[index]"
-        :checked="index === 0"
+        :checked="index === initialValueIndex"
         :disabled="disabled"
         class="radio"
         type="radio"
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.js b/src/renderer/components/ft-search-filters/ft-search-filters.js
index 6aa6312dfa7e9..49aa6efcfb886 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.js
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.js
@@ -15,6 +15,10 @@ export default defineComponent({
   },
   data: function () {
     return {
+      searchSortByStartIndex: 0,
+      searchTimeStartIndex: 0,
+      searchTypeStartIndex: 0,
+      searchDurationStartIndex: 0,
       sortByValues: [
         'relevance',
         'rating',
@@ -101,6 +105,12 @@ export default defineComponent({
       ]
     }
   },
+  created: function () {
+    this.searchSortByStartIndex = this.sortByValues.indexOf(this.searchSettings.sortBy)
+    this.searchTimeStartIndex = this.timeValues.indexOf(this.searchSettings.time)
+    this.searchTypeStartIndex = this.typeValues.indexOf(this.searchSettings.type)
+    this.searchDurationStartIndex = this.durationValues.indexOf(this.searchSettings.duration)
+  },
   methods: {
     isVideoOrMovieOrAll(type) {
       return type === 'video' || type === 'movie' || type === 'all'
diff --git a/src/renderer/components/ft-search-filters/ft-search-filters.vue b/src/renderer/components/ft-search-filters/ft-search-filters.vue
index 9c6236060e109..fce3bc3429ca3 100644
--- a/src/renderer/components/ft-search-filters/ft-search-filters.vue
+++ b/src/renderer/components/ft-search-filters/ft-search-filters.vue
@@ -17,6 +17,7 @@
           :title="$t('Search Filters.Sort By.Sort By')"
           :labels="sortByLabels"
           :values="sortByValues"
+          :initial-value-index="searchSortByStartIndex"
           class="searchRadio"
           @change="updateSortBy"
         />
@@ -25,6 +26,7 @@
           :title="$t('Search Filters.Time.Time')"
           :labels="timeLabels"
           :values="timeValues"
+          :initial-value-index="searchTimeStartIndex"
           class="searchRadio"
           @change="updateTime"
         />
@@ -33,6 +35,7 @@
           :title="$t('Search Filters.Type.Type')"
           :labels="typeLabels"
           :values="typeValues"
+          :initial-value-index="searchTypeStartIndex"
           class="searchRadio"
           @change="updateType"
         />
@@ -41,6 +44,7 @@
           :title="$t('Search Filters.Duration.Duration')"
           :labels="durationLabels"
           :values="durationValues"
+          :initial-value-index="searchDurationStartIndex"
           class="searchRadio"
           @change="updateDuration"
         />
diff --git a/src/renderer/components/top-nav/top-nav.js b/src/renderer/components/top-nav/top-nav.js
index 46e9e252775d2..8e9d2433c4f8e 100644
--- a/src/renderer/components/top-nav/top-nav.js
+++ b/src/renderer/components/top-nav/top-nav.js
@@ -84,10 +84,6 @@ export default defineComponent({
       return this.$store.getters.getSearchFilterValueChanged
     },
 
-    showFilters: function () {
-      return this.$store.getters.getShowSearchFilters
-    },
-
     forwardText: function () {
       return this.$t('Forward')
     },
diff --git a/src/renderer/components/top-nav/top-nav.scss b/src/renderer/components/top-nav/top-nav.scss
index d630f9d6b3cec..1adf8b5d7b1e5 100644
--- a/src/renderer/components/top-nav/top-nav.scss
+++ b/src/renderer/components/top-nav/top-nav.scss
@@ -89,11 +89,6 @@
 
   margin-inline-start: $effect-distance;
 
-  &.showFilters {
-    box-shadow: 0 0 $effect-distance var(--primary-color);
-    transform: translateY(1px);
-  }
-
   &.filterChanged {
     box-shadow: 0 0 $effect-distance var(--primary-color);
     color: var(--primary-color);
@@ -212,18 +207,4 @@
       flex: 1;
     }
   }
-
-  // .searchFilters {
-  //   inset-inline: 0;
-  //   margin-block: 10px 20px;
-  //   margin-inline: 220px 20px;
-  //   position: absolute;
-  //   transition: margin 150ms ease-in-out;
-
-  //   @media only screen and (width <= 680px) {
-  //     inset-inline: 0;
-  //     margin-block: 95px 0;
-  //     margin-inline: 10px;
-  //   }
-  // }
 }
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index d5c849bfcbd34..ca023d47795b1 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -92,8 +92,7 @@
         />
         <font-awesome-icon
           class="navFilterIcon navIcon"
-          :class="{ filterChanged: searchFilterValueChanged, showFilters: showFilters }"
-          :aria-pressed="showFilters"
+          :class="{ filterChanged: searchFilterValueChanged }"
           :icon="['fas', 'filter']"
           :title="$t('Search Filters.Search Filters')"
           role="button"
diff --git a/src/renderer/store/modules/utils.js b/src/renderer/store/modules/utils.js
index 8dad020370978..a4163aeed851a 100644
--- a/src/renderer/store/modules/utils.js
+++ b/src/renderer/store/modules/utils.js
@@ -178,7 +178,7 @@ const getters = {
 
   getLastVideoRefreshTimestampByProfile: (state) => (profileId) => {
     return state.lastVideoRefreshTimestampByProfile[profileId]
-  }
+  },
 }
 
 const actions = {
@@ -921,14 +921,14 @@ const mutations = {
     state.cachedPlaylist = value
   },
 
-  setSearchSortBy (state, value) {
-    state.searchSettings.sortBy = value
-  },
-
   setSearchFilterValueChanged (state, value) {
     state.searchFilterValueChanged = value
   },
 
+  setSearchSortBy (state, value) {
+    state.searchSettings.sortBy = value
+  },
+
   setSearchTime (state, value) {
     state.searchSettings.time = value
   },

From 009422feaa2566e2ce367607c0451d56d42bf687 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Sat, 20 Apr 2024 23:20:37 +0000
Subject: [PATCH 12/14] Update App.vue

---
 src/renderer/App.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 159f5ce38dfbd..668622c77c206 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -40,7 +40,6 @@
       :option-values="externalLinkOpeningPromptValues"
       @click="handleExternalLinkOpeningPromptAnswer"
     />
-    <!-- !hideSearchBar &&  -->
     <ft-search-filters
       v-if="showSearchFilters"
     />

From 8ab7e3f727ffae9b7746726e4a83e68176590a85 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sat, 20 Apr 2024 21:20:53 -0500
Subject: [PATCH 13/14] Fix z-index and modal error issue

---
 .../ft-playlist-add-video-prompt.js                         | 6 +++---
 src/renderer/components/ft-prompt/ft-prompt.css             | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
index bbb06a24b260e..7a4d5702bbf7a 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -189,7 +189,7 @@ export default defineComponent({
       if (val > oldVal) {
         // Focus back to search input only when playlist added
         // Allow search and easier deselecting new created playlist
-        this.$refs.searchBar.focus()
+        nextTick(() => this.$refs.searchBar.focus())
       }
     },
 
@@ -199,7 +199,7 @@ export default defineComponent({
       // Only care when CreatePlaylistPrompt hidden
       // Shift focus from button to prevent unwanted click event
       // due to enter key press in CreatePlaylistPrompt
-      this.$refs.searchBar.focus()
+      nextTick(() => this.$refs.searchBar.focus())
     },
   },
   mounted: function () {
@@ -210,7 +210,7 @@ export default defineComponent({
     nextTick(() => this.$refs.searchBar.focus())
   },
   beforeDestroy() {
-    this.lastActiveElement?.focus()
+    nextTick(() => this.lastActiveElement?.focus())
   },
   methods: {
     hide: function () {
diff --git a/src/renderer/components/ft-prompt/ft-prompt.css b/src/renderer/components/ft-prompt/ft-prompt.css
index 5647f9450fb45..2e303bca90ed8 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.css
+++ b/src/renderer/components/ft-prompt/ft-prompt.css
@@ -7,7 +7,7 @@
   background-color: rgb(0 0 0 / 70%);
 
   /* Higher than components like playlist info */
-  z-index: 200;
+  z-index: 201;
   padding: 15px;
   box-sizing: border-box;
   display: flex;

From 194696c79d60285a425e96718bcecece13131597 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 30 Apr 2024 07:05:47 -0500
Subject: [PATCH 14/14] Remove unnecessary additionl focus restoration logic in
 add-video-prompt

---
 .../ft-playlist-add-video-prompt.js                    |  3 ---
 src/renderer/components/ft-prompt/ft-prompt.js         | 10 +++++-----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
index 4c45bdad795c8..3e51d789a959f 100644
--- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -44,7 +44,6 @@ export default defineComponent({
       doSearchPlaylistsWithMatchingVideos: false,
       updateQueryDebounce: function() {},
       lastShownAt: Date.now(),
-      lastActiveElement: null,
       sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
     }
   },
@@ -205,7 +204,6 @@ export default defineComponent({
     },
   },
   mounted: function () {
-    this.lastActiveElement = document.activeElement
     this.updateQueryDebounce = debounce(this.updateQuery, 500)
     document.addEventListener('keydown', this.keyboardShortcutHandler)
     // User might want to search first if they have many playlists
@@ -213,7 +211,6 @@ export default defineComponent({
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.keyboardShortcutHandler)
-    nextTick(() => this.lastActiveElement?.focus())
   },
   methods: {
     hide: function () {
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
index 3904ca8030dd1..c28bb3d4cda87 100644
--- a/src/renderer/components/ft-prompt/ft-prompt.js
+++ b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
@@ -54,10 +54,6 @@ export default defineComponent({
       return sanitizeForHtmlId(this.label)
     }
   },
-  beforeDestroy: function () {
-    document.removeEventListener('keydown', this.closeEventFunction, true)
-    this.lastActiveElement?.focus()
-  },
   mounted: function () {
     this.lastActiveElement = document.activeElement
     this.$nextTick(() => {
@@ -71,6 +67,10 @@ export default defineComponent({
       this.focusItem(0)
     })
   },
+  beforeDestroy: function () {
+    document.removeEventListener('keydown', this.closeEventFunction, true)
+    nextTick(() => this.lastActiveElement?.focus())
+  },
   methods: {
     click: function (value) {
       this.$emit('click', value)