From f953f08b023c66baf649306eb5399f26ab5870d5 Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Wed, 13 Nov 2024 19:12:17 +0000
Subject: [PATCH 01/16] added buttons to show original title and thumbnail

---
 .../components/ft-list-video/ft-list-video.js | 28 +++++++++++++-
 .../ft-list-video/ft-list-video.vue           | 38 ++++++++++++++-----
 src/renderer/scss-partials/_ft-list-item.scss |  6 +++
 static/locales/en-US.yaml                     |  2 +
 4 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 67acb17bb96a1..2255d78922341 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -112,6 +112,12 @@ export default defineComponent({
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
+      deArrowToggleTitle: this.$t('Video.Sponsor Block category.Show Original Details'),
+      showDeArrowToggle: false,
+      deArrowToggleAlwaysVisible: false,
+      useDeArrowTitles: null,
+      useDeArrowThumbnails: null,
+      isHovered: false,
     }
   },
   computed: {
@@ -493,11 +499,11 @@ export default defineComponent({
       return query
     },
 
-    useDeArrowTitles: function () {
+    globalUseDeArrowTitles: function () {
       return this.$store.getters.getUseDeArrowTitles
     },
 
-    useDeArrowThumbnails: function () {
+    globalUseDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
 
@@ -517,6 +523,12 @@ export default defineComponent({
   created: function () {
     this.parseVideoData()
 
+    this.useDeArrowTitles = this.globalUseDeArrowTitles
+    this.useDeArrowThumbnails = this.globalUseDeArrowThumbnails
+    if (this.useDeArrowTitles || this.useDeArrowThumbnails) {
+      this.showDeArrowToggle = true
+    }
+
     if ((this.useDeArrowTitles || this.useDeArrowThumbnails) && !this.deArrowCache) {
       this.fetchDeArrowData()
     }
@@ -567,6 +579,18 @@ export default defineComponent({
         this.debounceGetDeArrowThumbnail()
       }
     },
+    toggleDeArrow() {
+      this.deArrowToggleAlwaysVisible = !this.deArrowToggleAlwaysVisible
+      this.deArrowToggleTitle = this.showDeArrowToggle
+        ? this.$t('Video.Sponsor Block category.Show Original Details')
+        : this.$t('Video.Sponsor Block category.Show Modified Details')
+      if (this.globalUseDeArrowTitles) {
+        this.useDeArrowTitles = !this.useDeArrowTitles
+      }
+      if (this.globalUseDeArrowThumbnails) {
+        this.useDeArrowThumbnails = !this.useDeArrowThumbnails
+      }
+    },
 
     handleExternalPlayer: function () {
       this.$emit('pause-player')
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 7d63dcf983228..49e1d6e0f9c54 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -109,15 +109,35 @@
         :style="{inlineSize: progressPercentage + '%'}"
       />
     </div>
-    <div class="info">
-      <router-link
-        class="title"
-        :to="watchPageLinkTo"
-      >
-        <h3 class="h3Title">
-          {{ displayTitle }}
-        </h3>
-      </router-link>
+    <div
+      class="info"
+      @mouseover="isHovered = true"
+      @mouseleave="isHovered = false"
+      @focusin="isHovered = true"
+      @blur="isHovered = false"
+    >
+      <div class="title">
+        <router-link
+          class="title"
+          :to="watchPageLinkTo"
+        >
+          <h3 class="h3Title">
+            {{ displayTitle }}
+          </h3>
+        </router-link>
+        <ft-icon-button
+          v-if="(showDeArrowToggle && isHovered) || deArrowToggleAlwaysVisible"
+          class="optionsButton"
+          :class="{alwaysVisible: deArrowToggleAlwaysVisible}"
+          :icon="['fas', 'times-circle']"
+          :title="deArrowToggleTitle"
+          theme="base-no-default"
+          :size="16"
+          :use-shadow="false"
+          role="button"
+          @click="toggleDeArrow"
+        />
+      </div>
       <div class="infoLine">
         <router-link
           v-if="channelId !== null"
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 7cecbb502784b..e5ce1e4b19e8f 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -227,6 +227,8 @@ $watched-transition-duration: 0.5s;
     }
 
     .title {
+      display: flex;
+      justify-content: space-between;
       font-size: 20px;
       grid-area: title;
       text-decoration: none;
@@ -369,6 +371,10 @@ $watched-transition-duration: 0.5s;
       opacity: 1;
     }
 
+    .optionsButton.alwaysVisible {
+      opacity: 1;
+    }
+
     .quickBookmarkVideoIcon:not(.alwaysVisible),
     .addToPlaylistIcon:not(.alwaysVisible),
     .externalPlayerIcon,
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 636a43eece59e..4ac7810a056aa 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -830,6 +830,8 @@ Video:
   Streamed on: Streamed on
   Started streaming on: Started streaming on
   Sponsor Block category:
+    Show Original Details: Show Original Details
+    Show Modified Details: Show Modified Details
     sponsor: Sponsor
     intro: Intro
     outro: Outro

From 604388cd15d5fa96c857d72de2c94224c8495314 Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Wed, 13 Nov 2024 20:58:29 +0000
Subject: [PATCH 02/16] refactored logic

---
 src/renderer/components/ft-list-video/ft-list-video.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 2255d78922341..6fc30c629ab2b 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -112,7 +112,7 @@ export default defineComponent({
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
-      deArrowToggleTitle: this.$t('Video.Sponsor Block category.Show Original Details'),
+      deArrowToggleTitle: '',
       showDeArrowToggle: false,
       deArrowToggleAlwaysVisible: false,
       useDeArrowTitles: null,
@@ -527,6 +527,7 @@ export default defineComponent({
     this.useDeArrowThumbnails = this.globalUseDeArrowThumbnails
     if (this.useDeArrowTitles || this.useDeArrowThumbnails) {
       this.showDeArrowToggle = true
+      this.deArrowToggleTitle = this.$t('Video.Sponsor Block category.Show Original Details')
     }
 
     if ((this.useDeArrowTitles || this.useDeArrowThumbnails) && !this.deArrowCache) {
@@ -581,9 +582,10 @@ export default defineComponent({
     },
     toggleDeArrow() {
       this.deArrowToggleAlwaysVisible = !this.deArrowToggleAlwaysVisible
-      this.deArrowToggleTitle = this.showDeArrowToggle
-        ? this.$t('Video.Sponsor Block category.Show Original Details')
-        : this.$t('Video.Sponsor Block category.Show Modified Details')
+      this.deArrowToggleTitle = this.deArrowToggleAlwaysVisible
+        ? this.$t('Video.Sponsor Block category.Show Modified Details')
+        : this.$t('Video.Sponsor Block category.Show Original Details')
+
       if (this.globalUseDeArrowTitles) {
         this.useDeArrowTitles = !this.useDeArrowTitles
       }

From 37abd5c609accf4011894d296efaf02fc7e652ae Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Wed, 13 Nov 2024 23:31:32 +0000
Subject: [PATCH 03/16] added small button for non changed titles

---
 .../components/ft-list-video/ft-list-video.js        | 12 +++++++++++-
 .../components/ft-list-video/ft-list-video.vue       |  4 +++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 6fc30c629ab2b..7d0971a3300f9 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -502,11 +502,21 @@ export default defineComponent({
     globalUseDeArrowTitles: function () {
       return this.$store.getters.getUseDeArrowTitles
     },
-
     globalUseDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
 
+    deArrowToggleStyle() {
+      let defaultStyle = { size: 12, padding: 4 }
+
+      if (this.globalUseDeArrowTitles && this.deArrowCache?.title &&
+        this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0) {
+        defaultStyle = { size: 16, padding: 2 }
+      }
+
+      return defaultStyle
+    },
+
     deArrowCache: function () {
       return this.$store.getters.getDeArrowCache[this.id]
     },
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 49e1d6e0f9c54..b971659b11332 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -132,7 +132,8 @@
           :icon="['fas', 'times-circle']"
           :title="deArrowToggleTitle"
           theme="base-no-default"
-          :size="16"
+          :size="deArrowToggleStyle.size"
+          :padding="deArrowToggleStyle.padding"
           :use-shadow="false"
           role="button"
           @click="toggleDeArrow"
@@ -232,6 +233,7 @@
         :title="$t('Video.More Options')"
         theme="base-no-default"
         :size="16"
+        :padding="2"
         :use-shadow="false"
         dropdown-position-x="left"
         :dropdown-options="dropdownOptions"

From e9a7342c8d900854d0cced2ce69ed30959946b7e Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Thu, 14 Nov 2024 00:09:20 +0000
Subject: [PATCH 04/16] dont allow button to be permanent if dearrow doesnt
 change anything

---
 src/renderer/components/ft-list-video/ft-list-video.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 7d0971a3300f9..080a2c8e517d0 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -506,9 +506,8 @@ export default defineComponent({
       return this.$store.getters.getUseDeArrowThumbnails
     },
 
-    deArrowToggleStyle() {
+    deArrowToggleStyle: function () {
       let defaultStyle = { size: 12, padding: 4 }
-
       if (this.globalUseDeArrowTitles && this.deArrowCache?.title &&
         this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0) {
         defaultStyle = { size: 16, padding: 2 }
@@ -591,6 +590,10 @@ export default defineComponent({
       }
     },
     toggleDeArrow() {
+      if (this.deArrowCache?.thumbnail === null && this.deArrowCache?.title == null) {
+        return
+      }
+
       this.deArrowToggleAlwaysVisible = !this.deArrowToggleAlwaysVisible
       this.deArrowToggleTitle = this.deArrowToggleAlwaysVisible
         ? this.$t('Video.Sponsor Block category.Show Modified Details')

From 12b3d73c6fd2ae095f7cfc220f5c638450a088ce Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Fri, 15 Nov 2024 11:22:08 +0000
Subject: [PATCH 05/16] changed button padding to before

---
 src/renderer/components/ft-list-video/ft-list-video.js  | 8 ++++----
 src/renderer/components/ft-list-video/ft-list-video.vue | 4 +---
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 080a2c8e517d0..c091352cb5f9d 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -506,14 +506,14 @@ export default defineComponent({
       return this.$store.getters.getUseDeArrowThumbnails
     },
 
-    deArrowToggleStyle: function () {
-      let defaultStyle = { size: 12, padding: 4 }
+    deArrowToggleSize: function () {
+      let defaultSize = 12
       if (this.globalUseDeArrowTitles && this.deArrowCache?.title &&
         this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0) {
-        defaultStyle = { size: 16, padding: 2 }
+        defaultSize = 16
       }
 
-      return defaultStyle
+      return defaultSize
     },
 
     deArrowCache: function () {
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index b971659b11332..bebac8ad0bc5d 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -132,8 +132,7 @@
           :icon="['fas', 'times-circle']"
           :title="deArrowToggleTitle"
           theme="base-no-default"
-          :size="deArrowToggleStyle.size"
-          :padding="deArrowToggleStyle.padding"
+          :size="deArrowToggleSize"
           :use-shadow="false"
           role="button"
           @click="toggleDeArrow"
@@ -233,7 +232,6 @@
         :title="$t('Video.More Options')"
         theme="base-no-default"
         :size="16"
-        :padding="2"
         :use-shadow="false"
         dropdown-position-x="left"
         :dropdown-options="dropdownOptions"

From a7e09182cca5ead961d5e737f8e0021a137b989c Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Fri, 22 Nov 2024 16:35:15 +0000
Subject: [PATCH 06/16] added new setting and changed colour

---
 .../ft-icon-button/ft-icon-button.js          |  5 ++
 .../ft-icon-button/ft-icon-button.vue         |  3 +-
 .../components/ft-list-video/ft-list-video.js | 26 +++++-----
 .../ft-list-video/ft-list-video.vue           | 27 +++++-----
 .../sponsor-block-settings.js                 |  8 +++
 .../sponsor-block-settings.vue                | 52 ++++++++++++-------
 src/renderer/main.js                          |  2 +
 src/renderer/scss-partials/_ft-list-item.scss |  7 +++
 src/renderer/store/modules/settings.js        |  1 +
 static/locales/en-US.yaml                     |  2 +
 10 files changed, 87 insertions(+), 46 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 6c12092874425..996f928f86f21 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -24,6 +24,11 @@ export default defineComponent({
       type: String,
       default: 'base'
     },
+    color: {
+      type: String,
+      required: false,
+      default: ''
+    },
     useShadow: {
       type: Boolean,
       default: true
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 4c6af4f0e3d4d..11e3b40ef791d 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -12,7 +12,8 @@
       }"
       :style="{
         padding: padding + 'px',
-        fontSize: size + 'px'
+        fontSize: size + 'px',
+        ...(color ? { color: color } : {})
       }"
       tabindex="0"
       role="button"
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index c091352cb5f9d..4d03693816794 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -114,7 +114,7 @@ export default defineComponent({
       debounceGetDeArrowThumbnail: null,
       deArrowToggleTitle: '',
       showDeArrowToggle: false,
-      deArrowToggleAlwaysVisible: false,
+      deArrowTogglePinned: false,
       useDeArrowTitles: null,
       useDeArrowThumbnails: null,
       isHovered: false,
@@ -499,21 +499,19 @@ export default defineComponent({
       return query
     },
 
+    deArrowChangedContent: function () {
+      return (this.globalUseDeArrowThumbnails && this.deArrowCache?.thumbnail) ||
+        (this.globalUseDeArrowTitles && this.deArrowCache?.title &&
+        this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
+    },
     globalUseDeArrowTitles: function () {
       return this.$store.getters.getUseDeArrowTitles
     },
     globalUseDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
-
-    deArrowToggleSize: function () {
-      let defaultSize = 12
-      if (this.globalUseDeArrowTitles && this.deArrowCache?.title &&
-        this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0) {
-        defaultSize = 16
-      }
-
-      return defaultSize
+    deArrowShowOriginal: function () {
+      return this.$store.getters.getDeArrowShowOriginal
     },
 
     deArrowCache: function () {
@@ -534,7 +532,7 @@ export default defineComponent({
 
     this.useDeArrowTitles = this.globalUseDeArrowTitles
     this.useDeArrowThumbnails = this.globalUseDeArrowThumbnails
-    if (this.useDeArrowTitles || this.useDeArrowThumbnails) {
+    if (this.deArrowShowOriginal && (this.useDeArrowTitles || this.useDeArrowThumbnails)) {
       this.showDeArrowToggle = true
       this.deArrowToggleTitle = this.$t('Video.Sponsor Block category.Show Original Details')
     }
@@ -590,12 +588,12 @@ export default defineComponent({
       }
     },
     toggleDeArrow() {
-      if (this.deArrowCache?.thumbnail === null && this.deArrowCache?.title == null) {
+      if (!this.deArrowChangedContent) {
         return
       }
 
-      this.deArrowToggleAlwaysVisible = !this.deArrowToggleAlwaysVisible
-      this.deArrowToggleTitle = this.deArrowToggleAlwaysVisible
+      this.deArrowTogglePinned = !this.deArrowTogglePinned
+      this.deArrowToggleTitle = this.deArrowTogglePinned
         ? this.$t('Video.Sponsor Block category.Show Modified Details')
         : this.$t('Video.Sponsor Block category.Show Original Details')
 
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index bebac8ad0bc5d..23f884e9705fc 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -125,18 +125,6 @@
             {{ displayTitle }}
           </h3>
         </router-link>
-        <ft-icon-button
-          v-if="(showDeArrowToggle && isHovered) || deArrowToggleAlwaysVisible"
-          class="optionsButton"
-          :class="{alwaysVisible: deArrowToggleAlwaysVisible}"
-          :icon="['fas', 'times-circle']"
-          :title="deArrowToggleTitle"
-          theme="base-no-default"
-          :size="deArrowToggleSize"
-          :use-shadow="false"
-          role="button"
-          @click="toggleDeArrow"
-        />
       </div>
       <div class="infoLine">
         <router-link
@@ -226,6 +214,21 @@
           {{ $t('Search Listing.Label.Subtitles') }}
         </div>
       </div>
+
+      <ft-icon-button
+        v-if="(showDeArrowToggle && isHovered) || deArrowTogglePinned"
+        class="deArrowToggleButton"
+        :class="{alwaysVisible: deArrowTogglePinned}"
+        :icon="['fas', 'dot-circle']"
+        :color="deArrowChangedContent ? 'var(--primary-color)' : ''"
+        :padding="deArrowChangedContent ? 10 : 12"
+        :title="deArrowToggleTitle"
+        theme="base-no-default"
+        :size="deArrowChangedContent ? 16 : 12"
+        :use-shadow="false"
+        role="button"
+        @click="toggleDeArrow"
+      />
       <ft-icon-button
         class="optionsButton"
         :icon="['fas', 'ellipsis-v']"
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
index ca1fb50d31fb6..695022978ec9d 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
@@ -46,6 +46,12 @@ export default defineComponent({
     useDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
+    deArrowShowOriginal: function () {
+      return this.$store.getters.getDeArrowShowOriginal
+    },
+    deArrowShowOriginalAlwaysOn: function () {
+      return this.$store.getters.getDeArrowShowOriginalAlwaysOn
+    },
     deArrowThumbnailGeneratorUrl: function () {
       return this.$store.getters.getDeArrowThumbnailGeneratorUrl
     },
@@ -85,6 +91,8 @@ export default defineComponent({
       'updateSponsorBlockShowSkippedToast',
       'updateUseDeArrowTitles',
       'updateUseDeArrowThumbnails',
+      'updateDeArrowShowOriginal',
+      'updateDeArrowShowOriginalAlwaysOn',
       'updateDeArrowThumbnailGeneratorUrl'
     ])
   }
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index 52be4a4fbc8ba..3b6cc42aec305 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -2,25 +2,39 @@
   <ft-settings-section
     :title="$t('Settings.SponsorBlock Settings.SponsorBlock Settings')"
   >
-    <ft-flex-box class="settingsFlexStart500px">
-      <ft-toggle-switch
-        :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
-        :default-value="useSponsorBlock"
-        @change="handleUpdateSponsorBlock"
-      />
-      <ft-toggle-switch
-        :label="$t('Settings.SponsorBlock Settings.UseDeArrowTitles')"
-        :default-value="useDeArrowTitles"
-        :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowTitles')"
-        @change="handleUpdateUseDeArrowTitles"
-      />
-      <ft-toggle-switch
-        :label="$t('Settings.SponsorBlock Settings.UseDeArrowThumbnails')"
-        :default-value="useDeArrowThumbnails"
-        :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowThumbnails')"
-        @change="handleUpdateUseDeArrowThumbnails"
-      />
-    </ft-flex-box>
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
+          :default-value="useSponsorBlock"
+          :compact="true"
+          @change="handleUpdateSponsorBlock"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.SponsorBlock Settings.UseDeArrowThumbnails')"
+          :default-value="useDeArrowThumbnails"
+          :compact="true"
+          :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowThumbnails')"
+          @change="handleUpdateUseDeArrowThumbnails"
+        />
+      </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.SponsorBlock Settings.UseDeArrowTitles')"
+          :default-value="useDeArrowTitles"
+          :compact="true"
+          :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowTitles')"
+          @change="handleUpdateUseDeArrowTitles"
+        />
+        <ft-toggle-switch
+          :label="$t('Settings.SponsorBlock Settings.Show Show Original Button')"
+          :default-value="deArrowShowOriginal"
+          :compact="true"
+          :tooltip="$t('Tooltips.SponsorBlock Settings.Show Show Original Button')"
+          @change="updateDeArrowShowOriginal"
+        />
+      </div>
+    </div>
     <template
       v-if="useSponsorBlock || useDeArrowTitles || useDeArrowThumbnails"
     >
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 548eb98caeaa7..c8cfb91b545a5 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -38,6 +38,7 @@ import {
   faCopy,
   faDatabase,
   faDisplay,
+  faDotCircle,
   faDownload,
   faEdit,
   faEllipsisH,
@@ -151,6 +152,7 @@ library.add(
   faCopy,
   faDatabase,
   faDisplay,
+  faDotCircle,
   faDownload,
   faEdit,
   faEllipsisH,
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index e5ce1e4b19e8f..50cd4c5bcecdd 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -220,6 +220,13 @@ $watched-transition-duration: 0.5s;
 
     .optionsButton {
       grid-area: optionsExternalButton;
+      justify-self: end;
+    }
+
+    .deArrowToggleButton {
+      grid-area: optionsExternalButton;
+      margin-inline-end: 36px;
+      position: relative;
     }
 
     .externalPlayerButton {
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index b790b4da2abd4..96dc87ab3b436 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -300,6 +300,7 @@ const state = {
   settingsPassword: '',
   useDeArrowTitles: false,
   useDeArrowThumbnails: false,
+  deArrowShowOriginal: false,
   deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app',
   // This makes the `favorites` playlist uses as quick bookmark target
   // If the playlist is removed quick bookmark is disabled
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 4ac7810a056aa..cf44e1bbad62f 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -592,6 +592,7 @@ Settings:
     Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
     UseDeArrowTitles: Use DeArrow Video Titles
     UseDeArrowThumbnails: Use DeArrow for thumbnails
+    Show Show Original Button: Show "Show Original" Button
     'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)': 'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)'
     Skip Options:
       Skip Option: Skip Option
@@ -1036,6 +1037,7 @@ Tooltips:
   SponsorBlock Settings:
     UseDeArrowTitles: Replace video titles with user-submitted titles from DeArrow.
     UseDeArrowThumbnails: Replace video thumbnails with thumbnails from DeArrow.
+    Show Show Original Button: Displays a toggle next to the title that switches between the original and modified title/thumbnail
 
 # Toast Messages
 Local API Error (Click to copy): Local API Error (Click to copy)

From 2e35cccbb40d9749f244c965047c1d944150f212 Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Fri, 22 Nov 2024 16:47:19 +0000
Subject: [PATCH 07/16] changed disabled dot colour to grey

---
 src/renderer/components/ft-list-video/ft-list-video.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 23f884e9705fc..62b9814dd9442 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -220,7 +220,7 @@
         class="deArrowToggleButton"
         :class="{alwaysVisible: deArrowTogglePinned}"
         :icon="['fas', 'dot-circle']"
-        :color="deArrowChangedContent ? 'var(--primary-color)' : ''"
+        :color="deArrowChangedContent ? 'var(--primary-color)' : '#808080'"
         :padding="deArrowChangedContent ? 10 : 12"
         :title="deArrowToggleTitle"
         theme="base-no-default"

From 6481c3a1a2a5d551be5bf8156912f6f293556c1f Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Sat, 23 Nov 2024 18:46:06 +0000
Subject: [PATCH 08/16] moved button location and changed button icon

---
 .../ft-icon-button/ft-icon-button.js          |  5 --
 .../ft-icon-button/ft-icon-button.vue         |  2 -
 .../components/ft-list-video/ft-list-video.js | 52 ++++++------
 .../ft-list-video/ft-list-video.scss          | 25 ++++++
 .../ft-list-video/ft-list-video.vue           | 79 +++++++++----------
 .../sponsor-block-settings.js                 |  4 -
 .../sponsor-block-settings.vue                |  1 +
 src/renderer/main.js                          |  5 +-
 src/renderer/scss-partials/_ft-list-item.scss | 13 +--
 9 files changed, 92 insertions(+), 94 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 996f928f86f21..6c12092874425 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -24,11 +24,6 @@ export default defineComponent({
       type: String,
       default: 'base'
     },
-    color: {
-      type: String,
-      required: false,
-      default: ''
-    },
     useShadow: {
       type: Boolean,
       default: true
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 11e3b40ef791d..fa0fe3ff64b03 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -12,8 +12,6 @@
       }"
       :style="{
         padding: padding + 'px',
-        fontSize: size + 'px',
-        ...(color ? { color: color } : {})
       }"
       tabindex="0"
       role="button"
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 4d03693816794..7a95a07670518 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -112,11 +112,10 @@ export default defineComponent({
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
-      deArrowToggleTitle: '',
-      showDeArrowToggle: false,
+      deArrowToggleTitle: this.$t('Video.Sponsor Block category.Show Original Details'),
       deArrowTogglePinned: false,
-      useDeArrowTitles: null,
-      useDeArrowThumbnails: null,
+      showDeArrowTitle: false,
+      showDeArrowThumbnail: false,
       isHovered: false,
     }
   },
@@ -343,7 +342,7 @@ export default defineComponent({
         return require('../../assets/img/thumbnail_placeholder.svg')
       }
 
-      if (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail != null) {
+      if (this.showDeArrowThumbnail && this.deArrowCache?.thumbnail != null) {
         return this.deArrowCache.thumbnail
       }
 
@@ -400,7 +399,7 @@ export default defineComponent({
 
     displayTitle: function () {
       let title
-      if (this.useDeArrowTitles && this.deArrowCache?.title) {
+      if (this.showDeArrowTitle && this.deArrowCache?.title) {
         title = this.deArrowCache.title
       } else {
         title = this.title
@@ -414,7 +413,7 @@ export default defineComponent({
     },
 
     displayDuration: function () {
-      if (this.useDeArrowTitles && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
+      if (this.showDeArrowTitle && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
         return formatDurationAsTimestamp(this.deArrowCache.videoDuration)
       }
       return this.duration
@@ -499,20 +498,23 @@ export default defineComponent({
       return query
     },
 
-    deArrowChangedContent: function () {
-      return (this.globalUseDeArrowThumbnails && this.deArrowCache?.thumbnail) ||
-        (this.globalUseDeArrowTitles && this.deArrowCache?.title &&
-        this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
-    },
-    globalUseDeArrowTitles: function () {
+    useDeArrowTitles: function () {
       return this.$store.getters.getUseDeArrowTitles
     },
-    globalUseDeArrowThumbnails: function () {
+    useDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
     deArrowShowOriginal: function () {
       return this.$store.getters.getDeArrowShowOriginal
     },
+    deArrowChangedContent: function () {
+      return (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail) ||
+        (this.useDeArrowTitles && this.deArrowCache?.title &&
+          this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
+    },
+    showDeArrowToggle: function () {
+      return this.deArrowShowOriginal && this.deArrowChangedContent
+    },
 
     deArrowCache: function () {
       return this.$store.getters.getDeArrowCache[this.id]
@@ -530,18 +532,14 @@ export default defineComponent({
   created: function () {
     this.parseVideoData()
 
-    this.useDeArrowTitles = this.globalUseDeArrowTitles
-    this.useDeArrowThumbnails = this.globalUseDeArrowThumbnails
-    if (this.deArrowShowOriginal && (this.useDeArrowTitles || this.useDeArrowThumbnails)) {
-      this.showDeArrowToggle = true
-      this.deArrowToggleTitle = this.$t('Video.Sponsor Block category.Show Original Details')
-    }
+    this.showDeArrowTitle = this.useDeArrowTitles
+    this.showDeArrowThumbnail = this.useDeArrowThumbnails
 
-    if ((this.useDeArrowTitles || this.useDeArrowThumbnails) && !this.deArrowCache) {
+    if ((this.showDeArrowTitle || this.showDeArrowThumbnail) && !this.deArrowCache) {
       this.fetchDeArrowData()
     }
 
-    if (this.useDeArrowThumbnails && this.deArrowCache && this.deArrowCache.thumbnail == null) {
+    if (this.showDeArrowThumbnail && this.deArrowCache && this.deArrowCache.thumbnail == null) {
       if (this.debounceGetDeArrowThumbnail == null) {
         this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
       }
@@ -579,7 +577,7 @@ export default defineComponent({
       this.$store.commit('addVideoToDeArrowCache', cacheData)
 
       // fetch dearrow thumbnails if enabled
-      if (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail === null) {
+      if (this.showDeArrowThumbnail && this.deArrowCache?.thumbnail === null) {
         if (this.debounceGetDeArrowThumbnail == null) {
           this.debounceGetDeArrowThumbnail = debounce(this.fetchDeArrowThumbnail, 1000)
         }
@@ -597,11 +595,11 @@ export default defineComponent({
         ? this.$t('Video.Sponsor Block category.Show Modified Details')
         : this.$t('Video.Sponsor Block category.Show Original Details')
 
-      if (this.globalUseDeArrowTitles) {
-        this.useDeArrowTitles = !this.useDeArrowTitles
+      if (this.useDeArrowTitles) {
+        this.showDeArrowTitle = !this.showDeArrowTitle
       }
-      if (this.globalUseDeArrowThumbnails) {
-        this.useDeArrowThumbnails = !this.useDeArrowThumbnails
+      if (this.useDeArrowThumbnails) {
+        this.showDeArrowThumbnail = !this.showDeArrowThumbnail
       }
     },
 
diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss
index b8856f1151021..e81156583c347 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/src/renderer/components/ft-list-video/ft-list-video.scss
@@ -27,3 +27,28 @@
 .videoTagLine .videoTag:first-child {
   margin-inline-start: 0;
 }
+
+.deArrowToggleButton {
+  border-radius: 50%;
+  cursor: pointer;
+  block-size: 1em;
+  transition: background 0.15s ease-out;
+  inline-size: 1em;
+  color: var(--primary-color);
+
+  &:not(.disabled) {
+    &:hover,
+    &:focus-visible {
+      background-color: var(--side-nav-hover-color);
+    }
+
+    &:active {
+      background-color: var(--side-nav-active-color);
+    }
+
+    &.alwaysVisible {
+      opacity: 1;
+      filter: grayscale(1);
+    }
+  }
+}
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 62b9814dd9442..3fd9e9eabb09d 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -109,23 +109,15 @@
         :style="{inlineSize: progressPercentage + '%'}"
       />
     </div>
-    <div
-      class="info"
-      @mouseover="isHovered = true"
-      @mouseleave="isHovered = false"
-      @focusin="isHovered = true"
-      @blur="isHovered = false"
-    >
-      <div class="title">
-        <router-link
-          class="title"
-          :to="watchPageLinkTo"
-        >
-          <h3 class="h3Title">
-            {{ displayTitle }}
-          </h3>
-        </router-link>
-      </div>
+    <div class="info">
+      <router-link
+        class="title"
+        :to="watchPageLinkTo"
+      >
+        <h3 class="h3Title">
+          {{ displayTitle }}
+        </h3>
+      </router-link>
       <div class="infoLine">
         <router-link
           v-if="channelId !== null"
@@ -214,32 +206,33 @@
           {{ $t('Search Listing.Label.Subtitles') }}
         </div>
       </div>
-
-      <ft-icon-button
-        v-if="(showDeArrowToggle && isHovered) || deArrowTogglePinned"
-        class="deArrowToggleButton"
-        :class="{alwaysVisible: deArrowTogglePinned}"
-        :icon="['fas', 'dot-circle']"
-        :color="deArrowChangedContent ? 'var(--primary-color)' : '#808080'"
-        :padding="deArrowChangedContent ? 10 : 12"
-        :title="deArrowToggleTitle"
-        theme="base-no-default"
-        :size="deArrowChangedContent ? 16 : 12"
-        :use-shadow="false"
-        role="button"
-        @click="toggleDeArrow"
-      />
-      <ft-icon-button
-        class="optionsButton"
-        :icon="['fas', 'ellipsis-v']"
-        :title="$t('Video.More Options')"
-        theme="base-no-default"
-        :size="16"
-        :use-shadow="false"
-        dropdown-position-x="left"
-        :dropdown-options="dropdownOptions"
-        @click="handleOptionsClick"
-      />
+      <div class="buttonStack">
+        <font-awesome-icon
+          v-if="showDeArrowToggle || deArrowTogglePinned"
+          :title="deArrowToggleTitle"
+          :icon="['far', 'dot-circle']"
+          class="optionsButton deArrowToggleButton"
+          :class="{ alwaysVisible: deArrowTogglePinned }"
+          :style="{
+            padding: 10 + 'px',
+            fontSize: 16 + 'px'
+          }"
+          tabindex="0"
+          role="button"
+          @click="toggleDeArrow"
+        />
+        <ft-icon-button
+          class="optionsButton"
+          :icon="['fas', 'ellipsis-v']"
+          :title="$t('Video.More Options')"
+          theme="base-no-default"
+          :size="16"
+          :use-shadow="false"
+          dropdown-position-x="left"
+          :dropdown-options="dropdownOptions"
+          @click="handleOptionsClick"
+        />
+      </div>
       <p
         v-if="description && effectiveListTypeIsList && appearance === 'result'"
         class="description"
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
index 695022978ec9d..1615c4f1e439c 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
@@ -49,9 +49,6 @@ export default defineComponent({
     deArrowShowOriginal: function () {
       return this.$store.getters.getDeArrowShowOriginal
     },
-    deArrowShowOriginalAlwaysOn: function () {
-      return this.$store.getters.getDeArrowShowOriginalAlwaysOn
-    },
     deArrowThumbnailGeneratorUrl: function () {
       return this.$store.getters.getDeArrowThumbnailGeneratorUrl
     },
@@ -92,7 +89,6 @@ export default defineComponent({
       'updateUseDeArrowTitles',
       'updateUseDeArrowThumbnails',
       'updateDeArrowShowOriginal',
-      'updateDeArrowShowOriginalAlwaysOn',
       'updateDeArrowThumbnailGeneratorUrl'
     ])
   }
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index 3b6cc42aec305..746984b757bc7 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -31,6 +31,7 @@
           :default-value="deArrowShowOriginal"
           :compact="true"
           :tooltip="$t('Tooltips.SponsorBlock Settings.Show Show Original Button')"
+          :disabled="!(useDeArrowTitles || useDeArrowThumbnails)"
           @change="updateDeArrowShowOriginal"
         />
       </div>
diff --git a/src/renderer/main.js b/src/renderer/main.js
index c8cfb91b545a5..25e64d55f41f8 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -110,7 +110,8 @@ import {
   faWifi
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as farBookmark
+  faBookmark as farBookmark,
+  faDotCircle as farDotCircle
 } from '@fortawesome/free-regular-svg-icons'
 import {
   faBitcoin,
@@ -152,7 +153,6 @@ library.add(
   faCopy,
   faDatabase,
   faDisplay,
-  faDotCircle,
   faDownload,
   faEdit,
   faEllipsisH,
@@ -225,6 +225,7 @@ library.add(
 
   // solid icons
   farBookmark,
+  farDotCircle,
 
   // brand icons
   faGithub,
diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index 50cd4c5bcecdd..d564202be2ce6 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -218,15 +218,12 @@ $watched-transition-duration: 0.5s;
       'infoLine optionsExternalButton' auto
       'description description' auto / 1fr auto;
 
-    .optionsButton {
+    .buttonStack {
       grid-area: optionsExternalButton;
-      justify-self: end;
     }
 
-    .deArrowToggleButton {
+    .optionsButton {
       grid-area: optionsExternalButton;
-      margin-inline-end: 36px;
-      position: relative;
     }
 
     .externalPlayerButton {
@@ -234,8 +231,6 @@ $watched-transition-duration: 0.5s;
     }
 
     .title {
-      display: flex;
-      justify-content: space-between;
       font-size: 20px;
       grid-area: title;
       text-decoration: none;
@@ -378,10 +373,6 @@ $watched-transition-duration: 0.5s;
       opacity: 1;
     }
 
-    .optionsButton.alwaysVisible {
-      opacity: 1;
-    }
-
     .quickBookmarkVideoIcon:not(.alwaysVisible),
     .addToPlaylistIcon:not(.alwaysVisible),
     .externalPlayerIcon,

From 1f41814e0dce97417ff1ce082341155d6628e09a Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Sat, 23 Nov 2024 18:49:24 +0000
Subject: [PATCH 09/16] removed unused code

---
 src/renderer/components/ft-icon-button/ft-icon-button.vue | 1 +
 src/renderer/main.js                                      | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

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 fa0fe3ff64b03..4c6af4f0e3d4d 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -12,6 +12,7 @@
       }"
       :style="{
         padding: padding + 'px',
+        fontSize: size + 'px'
       }"
       tabindex="0"
       role="button"
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 25e64d55f41f8..c75296433a738 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -38,7 +38,6 @@ import {
   faCopy,
   faDatabase,
   faDisplay,
-  faDotCircle,
   faDownload,
   faEdit,
   faEllipsisH,

From 501bf04aadc61f173ffda072ab4e3fea491e47eb Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Sat, 23 Nov 2024 19:03:37 +0000
Subject: [PATCH 10/16] moved static css to scss file

---
 src/renderer/components/ft-list-video/ft-list-video.scss | 4 +++-
 src/renderer/components/ft-list-video/ft-list-video.vue  | 4 ----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.scss b/src/renderer/components/ft-list-video/ft-list-video.scss
index e81156583c347..eb3c52df7a9c9 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.scss
+++ b/src/renderer/components/ft-list-video/ft-list-video.scss
@@ -32,8 +32,10 @@
   border-radius: 50%;
   cursor: pointer;
   block-size: 1em;
-  transition: background 0.15s ease-out;
   inline-size: 1em;
+  padding: 10px;
+  font-size: 16px;
+  transition: background 0.15s ease-out;
   color: var(--primary-color);
 
   &:not(.disabled) {
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 3fd9e9eabb09d..cc5e282ddf4ad 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -213,10 +213,6 @@
           :icon="['far', 'dot-circle']"
           class="optionsButton deArrowToggleButton"
           :class="{ alwaysVisible: deArrowTogglePinned }"
-          :style="{
-            padding: 10 + 'px',
-            fontSize: 16 + 'px'
-          }"
           tabindex="0"
           role="button"
           @click="toggleDeArrow"

From 13fa7f9193761f905f96163372498731e7ddc9b5 Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Sat, 23 Nov 2024 19:58:53 +0000
Subject: [PATCH 11/16] allow option button to overflow to the third row

---
 src/renderer/scss-partials/_ft-list-item.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
index d564202be2ce6..650acb9b7a229 100644
--- a/src/renderer/scss-partials/_ft-list-item.scss
+++ b/src/renderer/scss-partials/_ft-list-item.scss
@@ -216,7 +216,7 @@ $watched-transition-duration: 0.5s;
     grid-template:
       'title optionsExternalButton' auto
       'infoLine optionsExternalButton' auto
-      'description description' auto / 1fr auto;
+      'description optionsExternalButton' auto / 1fr auto;
 
     .buttonStack {
       grid-area: optionsExternalButton;

From bc9dc9867f1c3670289951e9802024dcc596cc5d Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Sat, 23 Nov 2024 22:34:49 +0000
Subject: [PATCH 12/16] removed new setting and relocated toggle

---
 .../components/ft-list-video/ft-list-video.js |  6 ---
 .../ft-list-video/ft-list-video.vue           | 20 +++----
 .../sponsor-block-settings.js                 |  4 --
 .../sponsor-block-settings.vue                | 53 +++++++------------
 static/locales/en-US.yaml                     |  2 -
 5 files changed, 29 insertions(+), 56 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 7a95a07670518..5712fb75b9ca8 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -504,17 +504,11 @@ export default defineComponent({
     useDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
-    deArrowShowOriginal: function () {
-      return this.$store.getters.getDeArrowShowOriginal
-    },
     deArrowChangedContent: function () {
       return (this.useDeArrowThumbnails && this.deArrowCache?.thumbnail) ||
         (this.useDeArrowTitles && this.deArrowCache?.title &&
           this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
     },
-    showDeArrowToggle: function () {
-      return this.deArrowShowOriginal && this.deArrowChangedContent
-    },
 
     deArrowCache: function () {
       return this.$store.getters.getDeArrowCache[this.id]
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index cc5e282ddf4ad..a14c696b37e4c 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -207,16 +207,6 @@
         </div>
       </div>
       <div class="buttonStack">
-        <font-awesome-icon
-          v-if="showDeArrowToggle || deArrowTogglePinned"
-          :title="deArrowToggleTitle"
-          :icon="['far', 'dot-circle']"
-          class="optionsButton deArrowToggleButton"
-          :class="{ alwaysVisible: deArrowTogglePinned }"
-          tabindex="0"
-          role="button"
-          @click="toggleDeArrow"
-        />
         <ft-icon-button
           class="optionsButton"
           :icon="['fas', 'ellipsis-v']"
@@ -228,6 +218,16 @@
           :dropdown-options="dropdownOptions"
           @click="handleOptionsClick"
         />
+        <font-awesome-icon
+          v-if="deArrowChangedContent || deArrowTogglePinned"
+          :title="deArrowToggleTitle"
+          :icon="['far', 'dot-circle']"
+          class="optionsButton deArrowToggleButton"
+          :class="{ alwaysVisible: deArrowTogglePinned }"
+          tabindex="0"
+          role="button"
+          @click="toggleDeArrow"
+        />
       </div>
       <p
         v-if="description && effectiveListTypeIsList && appearance === 'result'"
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
index 1615c4f1e439c..ca1fb50d31fb6 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.js
@@ -46,9 +46,6 @@ export default defineComponent({
     useDeArrowThumbnails: function () {
       return this.$store.getters.getUseDeArrowThumbnails
     },
-    deArrowShowOriginal: function () {
-      return this.$store.getters.getDeArrowShowOriginal
-    },
     deArrowThumbnailGeneratorUrl: function () {
       return this.$store.getters.getDeArrowThumbnailGeneratorUrl
     },
@@ -88,7 +85,6 @@ export default defineComponent({
       'updateSponsorBlockShowSkippedToast',
       'updateUseDeArrowTitles',
       'updateUseDeArrowThumbnails',
-      'updateDeArrowShowOriginal',
       'updateDeArrowThumbnailGeneratorUrl'
     ])
   }
diff --git a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
index 746984b757bc7..52be4a4fbc8ba 100644
--- a/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
+++ b/src/renderer/components/sponsor-block-settings/sponsor-block-settings.vue
@@ -2,40 +2,25 @@
   <ft-settings-section
     :title="$t('Settings.SponsorBlock Settings.SponsorBlock Settings')"
   >
-    <div class="switchColumnGrid">
-      <div class="switchColumn">
-        <ft-toggle-switch
-          :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
-          :default-value="useSponsorBlock"
-          :compact="true"
-          @change="handleUpdateSponsorBlock"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.SponsorBlock Settings.UseDeArrowThumbnails')"
-          :default-value="useDeArrowThumbnails"
-          :compact="true"
-          :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowThumbnails')"
-          @change="handleUpdateUseDeArrowThumbnails"
-        />
-      </div>
-      <div class="switchColumn">
-        <ft-toggle-switch
-          :label="$t('Settings.SponsorBlock Settings.UseDeArrowTitles')"
-          :default-value="useDeArrowTitles"
-          :compact="true"
-          :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowTitles')"
-          @change="handleUpdateUseDeArrowTitles"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.SponsorBlock Settings.Show Show Original Button')"
-          :default-value="deArrowShowOriginal"
-          :compact="true"
-          :tooltip="$t('Tooltips.SponsorBlock Settings.Show Show Original Button')"
-          :disabled="!(useDeArrowTitles || useDeArrowThumbnails)"
-          @change="updateDeArrowShowOriginal"
-        />
-      </div>
-    </div>
+    <ft-flex-box class="settingsFlexStart500px">
+      <ft-toggle-switch
+        :label="$t('Settings.SponsorBlock Settings.Enable SponsorBlock')"
+        :default-value="useSponsorBlock"
+        @change="handleUpdateSponsorBlock"
+      />
+      <ft-toggle-switch
+        :label="$t('Settings.SponsorBlock Settings.UseDeArrowTitles')"
+        :default-value="useDeArrowTitles"
+        :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowTitles')"
+        @change="handleUpdateUseDeArrowTitles"
+      />
+      <ft-toggle-switch
+        :label="$t('Settings.SponsorBlock Settings.UseDeArrowThumbnails')"
+        :default-value="useDeArrowThumbnails"
+        :tooltip="$t('Tooltips.SponsorBlock Settings.UseDeArrowThumbnails')"
+        @change="handleUpdateUseDeArrowThumbnails"
+      />
+    </ft-flex-box>
     <template
       v-if="useSponsorBlock || useDeArrowTitles || useDeArrowThumbnails"
     >
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index cf44e1bbad62f..4ac7810a056aa 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -592,7 +592,6 @@ Settings:
     Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
     UseDeArrowTitles: Use DeArrow Video Titles
     UseDeArrowThumbnails: Use DeArrow for thumbnails
-    Show Show Original Button: Show "Show Original" Button
     'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)': 'DeArrow Thumbnail Generator API Url (Default is https://dearrow-thumb.ajay.app)'
     Skip Options:
       Skip Option: Skip Option
@@ -1037,7 +1036,6 @@ Tooltips:
   SponsorBlock Settings:
     UseDeArrowTitles: Replace video titles with user-submitted titles from DeArrow.
     UseDeArrowThumbnails: Replace video thumbnails with thumbnails from DeArrow.
-    Show Show Original Button: Displays a toggle next to the title that switches between the original and modified title/thumbnail
 
 # Toast Messages
 Local API Error (Click to copy): Local API Error (Click to copy)

From 362f134fe395b86ddf8f73231c8350e52335acdd Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Sat, 23 Nov 2024 22:37:13 +0000
Subject: [PATCH 13/16] removed unused code

---
 src/renderer/components/ft-list-video/ft-list-video.js | 1 -
 src/renderer/store/modules/settings.js                 | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 5712fb75b9ca8..75fedfc70aea7 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -116,7 +116,6 @@ export default defineComponent({
       deArrowTogglePinned: false,
       showDeArrowTitle: false,
       showDeArrowThumbnail: false,
-      isHovered: false,
     }
   },
   computed: {
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 96dc87ab3b436..b790b4da2abd4 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -300,7 +300,6 @@ const state = {
   settingsPassword: '',
   useDeArrowTitles: false,
   useDeArrowThumbnails: false,
-  deArrowShowOriginal: false,
   deArrowThumbnailGeneratorUrl: 'https://dearrow-thumb.ajay.app',
   // This makes the `favorites` playlist uses as quick bookmark target
   // If the playlist is removed quick bookmark is disabled

From 7c93d7feb794d912d54c4c5cf61ec4dc34aa66ed Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Sat, 23 Nov 2024 23:33:18 +0000
Subject: [PATCH 14/16] moved dearrow strings

---
 src/renderer/components/ft-list-video/ft-list-video.js | 6 +++---
 static/locales/en-US.yaml                              | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 75fedfc70aea7..043f097d86a0b 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -112,7 +112,7 @@ export default defineComponent({
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
-      deArrowToggleTitle: this.$t('Video.Sponsor Block category.Show Original Details'),
+      deArrowToggleTitle: this.$t('Video.DeArrow.Show Original Details'),
       deArrowTogglePinned: false,
       showDeArrowTitle: false,
       showDeArrowThumbnail: false,
@@ -585,8 +585,8 @@ export default defineComponent({
 
       this.deArrowTogglePinned = !this.deArrowTogglePinned
       this.deArrowToggleTitle = this.deArrowTogglePinned
-        ? this.$t('Video.Sponsor Block category.Show Modified Details')
-        : this.$t('Video.Sponsor Block category.Show Original Details')
+        ? this.$t('Video.DeArrow.Show Modified Details')
+        : this.$t('Video.DeArrow.Show Original Details')
 
       if (this.useDeArrowTitles) {
         this.showDeArrowTitle = !this.showDeArrowTitle
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 4ac7810a056aa..fe734c5cf583c 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -829,9 +829,10 @@ Video:
   Published on: Published on
   Streamed on: Streamed on
   Started streaming on: Started streaming on
-  Sponsor Block category:
+  DeArrow:
     Show Original Details: Show Original Details
     Show Modified Details: Show Modified Details
+  Sponsor Block category:
     sponsor: Sponsor
     intro: Intro
     outro: Outro

From d48c57e26524ad17131fb6ed43d1b021c3350d29 Mon Sep 17 00:00:00 2001
From: Jie Li <91730179+JL0000@users.noreply.github.com>
Date: Mon, 25 Nov 2024 14:40:32 +0000
Subject: [PATCH 15/16] Added keyboard navigation

Co-authored-by: Jason <84899178+kommunarr@users.noreply.github.com>
---
 src/renderer/components/ft-list-video/ft-list-video.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index a14c696b37e4c..e53bbf3a5a4f3 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -227,6 +227,8 @@
           tabindex="0"
           role="button"
           @click="toggleDeArrow"
+          @keydown.enter.prevent="toggleDeArrow"
+          @keydown.space.prevent="toggleDeArrow"
         />
       </div>
       <p

From 91afdb406a823dd7977ad8a5ebfc0dd1dc44c3c1 Mon Sep 17 00:00:00 2001
From: Jie Li <jieli.pro@protonmail.com>
Date: Mon, 25 Nov 2024 20:37:20 +0000
Subject: [PATCH 16/16] made toggle title into prop

---
 .../components/ft-list-video/ft-list-video.js        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 043f097d86a0b..7697364b00a0f 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -112,7 +112,6 @@ export default defineComponent({
       hideViews: false,
       addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
-      deArrowToggleTitle: this.$t('Video.DeArrow.Show Original Details'),
       deArrowTogglePinned: false,
       showDeArrowTitle: false,
       showDeArrowThumbnail: false,
@@ -412,7 +411,7 @@ export default defineComponent({
     },
 
     displayDuration: function () {
-      if (this.showDeArrowTitle && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
+      if (this.useDeArrowTitles && (this.duration === '' || this.duration === '0:00') && this.deArrowCache?.videoDuration) {
         return formatDurationAsTimestamp(this.deArrowCache.videoDuration)
       }
       return this.duration
@@ -509,6 +508,12 @@ export default defineComponent({
           this.data.title.localeCompare(this.deArrowCache.title, undefined, { sensitivity: 'accent' }) !== 0)
     },
 
+    deArrowToggleTitle: function() {
+      return this.deArrowTogglePinned
+        ? this.$t('Video.DeArrow.Show Modified Details')
+        : this.$t('Video.DeArrow.Show Original Details')
+    },
+
     deArrowCache: function () {
       return this.$store.getters.getDeArrowCache[this.id]
     },
@@ -584,9 +589,6 @@ export default defineComponent({
       }
 
       this.deArrowTogglePinned = !this.deArrowTogglePinned
-      this.deArrowToggleTitle = this.deArrowTogglePinned
-        ? this.$t('Video.DeArrow.Show Modified Details')
-        : this.$t('Video.DeArrow.Show Original Details')
 
       if (this.useDeArrowTitles) {
         this.showDeArrowTitle = !this.showDeArrowTitle