From b6d3295255892774bc71c09b7e2520cf2dc815aa Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Tue, 21 May 2024 09:07:27 +0800
Subject: [PATCH 01/15] $ Extract add video to playlist button into a component

---
 .../components/ft-list-video/ft-list-video.js |  29 +--
 .../ft-list-video/ft-list-video.vue           |  12 +-
 .../ft-playlist-add-video-button.js           |  63 +++++++
 .../ft-playlist-add-video-button.scss         | 176 ++++++++++++++++++
 .../ft-playlist-add-video-button.vue          |  12 ++
 .../watch-video-info/watch-video-info.js      |  26 +--
 .../watch-video-info/watch-video-info.vue     |  13 +-
 7 files changed, 277 insertions(+), 54 deletions(-)
 create mode 100644 src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
 create mode 100644 src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss
 create mode 100644 src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue

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 578e1f4cf9fd7..88182168b5b60 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtPlaylistAddVideoButton from '../ft-playlist-add-video-button/ft-playlist-add-video-button.vue'
 import { mapActions } from 'vuex'
 import {
   copyToClipboard,
@@ -17,7 +18,8 @@ import debounce from 'lodash.debounce'
 export default defineComponent({
   name: 'FtListVideo',
   components: {
-    'ft-icon-button': FtIconButton
+    'ft-icon-button': FtIconButton,
+    'ft-playlist-add-video-button': FtPlaylistAddVideoButton,
   },
   props: {
     data: {
@@ -725,30 +727,6 @@ export default defineComponent({
       this.watchProgress = 0
     },
 
-    togglePlaylistPrompt: function () {
-      const videoData = {
-        videoId: this.id,
-        title: this.title,
-        author: this.channelName,
-        authorId: this.channelId,
-        description: this.description,
-        viewCount: this.viewCount,
-        lengthSeconds: this.data.lengthSeconds,
-      }
-
-      this.showAddToPlaylistPromptForManyVideos({ videos: [videoData] })
-
-      // Focus when prompt closed
-      this.addToPlaylistPromptCloseCallback = () => {
-        // Run once only
-        this.addToPlaylistPromptCloseCallback = null
-
-        // `thumbnailLink` is a `router-link`
-        // `focus()` can only be called on the actual element
-        this.$refs.addToPlaylistIcon?.$el?.focus()
-      }
-    },
-
     hideChannel: function(channelName, channelId) {
       const hiddenChannels = JSON.parse(this.$store.getters.getChannelsHidden)
       hiddenChannels.push(channelId)
@@ -826,7 +804,6 @@ export default defineComponent({
       'updateHistory',
       'removeFromHistory',
       'updateChannelsHidden',
-      'showAddToPlaylistPromptForManyVideos',
       'addVideos',
       'updatePlaylist',
       'removeVideo',
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 4492b86fbb019..c2fb6913c7f52 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -44,16 +44,18 @@
         @click="handleExternalPlayer"
       />
       <span class="playlistIcons">
-        <ft-icon-button
+        <ft-playlist-add-video-button
           v-if="showPlaylists"
-          ref="addToPlaylistIcon"
-          :title="$t('User Playlists.Add to Playlist')"
-          :icon="['fas', 'plus']"
           class="addToPlaylistIcon"
           :class="alwaysShowAddToPlaylistButton ? 'alwaysVisible' : ''"
+          :video-id="id"
+          :video-title="title"
+          :channel-id="channelId"
+          :channel-name="channelName"
+          :view-count="viewCount"
+          :length-seconds="lengthSeconds"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
-          @click="togglePlaylistPrompt"
         />
         <ft-icon-button
           v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
new file mode 100644
index 0000000000000..0ff1850a4b873
--- /dev/null
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -0,0 +1,63 @@
+import { defineComponent } from 'vue'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import { mapActions } from 'vuex'
+
+export default defineComponent({
+  name: 'FtPlaylistAddVideoButton',
+  components: {
+    'ft-icon-button': FtIconButton,
+  },
+  props: {
+    videoId: {
+      type: String,
+      required: true
+    },
+    videoTitle: {
+      type: String,
+      required: true
+    },
+    channelId: {
+      type: String,
+      required: true
+    },
+    channelName: {
+      type: String,
+      required: true
+    },
+    viewCount: {
+      type: Number,
+      required: true
+    },
+    lengthSeconds: {
+      type: Number,
+      required: true
+    },
+
+    padding: {
+      type: Number,
+      default: 10
+    },
+    size: {
+      type: Number,
+      default: 20
+    },
+  },
+  methods: {
+    togglePlaylistPrompt: function () {
+      const videoData = {
+        videoId: this.videoId,
+        title: this.videoTitle,
+        author: this.channelName,
+        authorId: this.channelId,
+        viewCount: this.viewCount,
+        lengthSeconds: this.lengthSeconds,
+      }
+
+      this.showAddToPlaylistPromptForManyVideos({ videos: [videoData] })
+    },
+
+    ...mapActions([
+      'showAddToPlaylistPromptForManyVideos',
+    ])
+  },
+})
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss
new file mode 100644
index 0000000000000..d4f0eca364740
--- /dev/null
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss
@@ -0,0 +1,176 @@
+.ftIconButton {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  position: relative;
+  user-select: none;
+}
+
+.iconButton {
+  border-radius: 50%;
+  cursor: pointer;
+  block-size: 1em;
+  transition: background 0.15s ease-out;
+  inline-size: 1em;
+
+  &.shadow {
+    box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  }
+
+  &.base {
+    background-color: var(--card-bg-color);
+    color: var(--primary-text-color);
+
+    &:not(.disabled) {
+      &:hover,
+      &:focus-visible {
+        background-color: var(--side-nav-hover-color);
+        color: var(--side-nav-hover-text-color);
+      }
+
+      &:active {
+        background-color: var(--side-nav-active-color);
+        color: var(--side-nav-active-text-color);
+      }
+    }
+  }
+
+  &.base-no-default:not(.disabled) {
+    &:hover,
+    &:focus-visible {
+      background-color: var(--side-nav-hover-color);
+      color: var(--side-nav-hover-text-color);
+    }
+
+    &:active {
+      background-color: var(--side-nav-active-color);
+      color: var(--side-nav-active-text-color);
+    }
+  }
+
+  &.primary {
+    background-color: var(--primary-color);
+    color: var(--text-with-main-color);
+
+    &:not(.disabled) {
+      &:hover,
+      &:focus-visible {
+        background-color: var(--primary-color-hover);
+      }
+
+      &:active {
+        background-color: var(--primary-color-active);
+      }
+    }
+  }
+
+
+  &.secondary {
+    background-color: var(--accent-color);
+    color: var(--text-with-accent-color);
+
+    &:not(.disabled) {
+      &:hover,
+      &:focus-visible {
+        background-color: var(--accent-color-hover);
+      }
+
+      &:active {
+        background-color: var(--accent-color-active);
+      }
+    }
+  }
+
+  &.destructive {
+    background-color: var(--destructive-color);
+    color: var(--destructive-text-color);
+
+    &:not(.disabled) {
+      &:hover,
+      &:focus-visible {
+        background-color: var(--destructive-hover-color);
+      }
+
+      &:active {
+        background-color: var(--destructive-active-color);
+      }
+    }
+  }
+
+  &.favorite, &.favorite:hover, &.favorite:focus-visible {
+    color: var(--favorite-icon-color);
+  }
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: auto;
+  cursor: default;
+  user-select: none;
+}
+
+.iconDropdown {
+  background-color: var(--side-nav-color);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
+  color: var(--secondary-text-color);
+  display: inline;
+  font-size: 12px;
+  list-style-type: none;
+  position: absolute;
+  text-align: center;
+  user-select: none;
+  z-index: 3;
+
+  &.left {
+    inset-inline-end: calc(50% - 10px);
+  }
+
+  &.right {
+    inset-inline-start: calc(50% - 10px);
+  }
+
+  &.top {
+    inset-block-end: 45px;
+  }
+
+  &.bottom {
+    inset-block-start: 45px;
+  }
+
+  .list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .listItem {
+    cursor: pointer;
+    margin: 0;
+    padding-block: 8px;
+    padding-inline: 10px;
+    transition: background 0.2s ease-out;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--side-nav-hover-color);
+      color: var(--side-nav-hover-text-color);
+      transition: background 0.2s ease-in;
+    }
+
+    &:active {
+      background-color: var(--side-nav-active-color);
+      color: var(--side-nav-active-text-color);
+      transition: background 0.1s ease-in;
+    }
+  }
+
+  .listItemDivider {
+    border-block-start: 1px solid var(--tertiary-text-color);
+    margin-block: 1px;
+    margin-inline: auto;
+    // Too "visible" with current color
+    opacity: 0.5;
+    inline-size: 95%;
+  }
+}
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
new file mode 100644
index 0000000000000..b9610d58ef070
--- /dev/null
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
@@ -0,0 +1,12 @@
+<template>
+  <ft-icon-button
+    :title="$t('User Playlists.Add to Playlist')"
+    :icon="['fas', 'plus']"
+    :padding="padding"
+    :size="size"
+    @click="togglePlaylistPrompt"
+  />
+</template>
+
+<script src="./ft-playlist-add-video-button.js" />
+<style scoped lang="scss" src="./ft-playlist-add-video-button.scss" />
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 09b9c319e0631..83d3caf646fcb 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -4,7 +4,13 @@ import FtCard from '../ft-card/ft-card.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import FtShareButton from '../ft-share-button/ft-share-button.vue'
 import FtSubscribeButton from '../ft-subscribe-button/ft-subscribe-button.vue'
-import { formatNumber, openExternalLink, showToast } from '../../helpers/utils'
+import FtPlaylistAddVideoButton from '../ft-playlist-add-video-button/ft-playlist-add-video-button.vue'
+import {
+  formatNumber,
+  openExternalLink,
+  openInternalPath,
+  showToast,
+} from '../../helpers/utils'
 
 export default defineComponent({
   name: 'WatchVideoInfo',
@@ -12,7 +18,8 @@ export default defineComponent({
     'ft-card': FtCard,
     'ft-icon-button': FtIconButton,
     'ft-share-button': FtShareButton,
-    'ft-subscribe-button': FtSubscribeButton
+    'ft-subscribe-button': FtSubscribeButton,
+    'ft-playlist-add-video-button': FtPlaylistAddVideoButton,
   },
   props: {
     id: {
@@ -328,20 +335,6 @@ export default defineComponent({
       return group[1]
     },
 
-    togglePlaylistPrompt: function () {
-      const videoData = {
-        videoId: this.id,
-        title: this.title,
-        author: this.channelName,
-        authorId: this.channelId,
-        description: this.description,
-        viewCount: this.viewCount,
-        lengthSeconds: this.lengthSeconds,
-      }
-
-      this.showAddToPlaylistPromptForManyVideos({ videos: [videoData] })
-    },
-
     toggleQuickBookmarked() {
       if (!this.isQuickBookmarkEnabled) {
         // This should be prevented by UI
@@ -395,7 +388,6 @@ export default defineComponent({
     ...mapActions([
       'openInExternalPlayer',
       'downloadMedia',
-      'showAddToPlaylistPromptForManyVideos',
       'addVideos',
       'updatePlaylist',
       'removeVideo',
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index c49c3a1f65446..ced45668a4aa6 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -79,13 +79,14 @@
         </div>
       </div>
       <div class="videoOptions">
-        <ft-icon-button
+        <ft-playlist-add-video-button
           v-if="showPlaylists && !isUpcoming"
-          :title="$t('User Playlists.Add to Playlist')"
-          :icon="['fas', 'plus']"
-          class="option"
-          theme="base"
-          @click="togglePlaylistPrompt"
+          :video-id="id"
+          :video-title="title"
+          :channel-id="channelId"
+          :channel-name="channelName"
+          :view-count="viewCount"
+          :length-seconds="lengthSeconds"
         />
         <ft-icon-button
           v-if="isQuickBookmarkEnabled"

From bff595df7ff9afc4aa94b919f1fc2571732774a3 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Tue, 21 May 2024 09:43:14 +0800
Subject: [PATCH 02/15] * Show no of playlist a video already added to

---
 .../ft-icon-button/ft-icon-button.js          |  4 ++
 .../ft-icon-button/ft-icon-button.scss        |  9 +++
 .../ft-icon-button/ft-icon-button.vue         | 62 ++++++++++++-------
 .../ft-playlist-add-video-button.js           | 18 ++++++
 .../ft-playlist-add-video-button.vue          |  1 +
 src/renderer/main.js                          |  8 ++-
 6 files changed, 80 insertions(+), 22 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 90ca0fb20f555..902d88de42c5e 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -16,6 +16,10 @@ export default defineComponent({
       type: Array,
       default: () => ['fas', 'ellipsis-v']
     },
+    counterValue: {
+      type: Number,
+      default: 0,
+    },
     disabled: {
       type: Boolean,
       default: false
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index d4f0eca364740..a61d978c928e8 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -102,6 +102,15 @@
   }
 }
 
+.iconCounter {
+  box-shadow: -1px 1px 5px 0 rgb(0 0 0 / 50%);
+
+  &.base {
+    background-color: var(--card-bg-color);
+    color: var(--primary-text-color);
+  }
+}
+
 .disabled {
   opacity: 0.5;
   pointer-events: auto;
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..3ac63b366ffcd 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -1,28 +1,48 @@
 <template>
   <div class="ftIconButton">
-    <font-awesome-icon
-      ref="iconButton"
-      class="iconButton"
-      :title="title"
-      :icon="icon"
-      :class="{
-        [theme]: true,
-        shadow: useShadow,
-        disabled
-      }"
+    <font-awesome-layers
       :style="{
-        padding: padding + 'px',
-        fontSize: size + 'px'
+        width: `${size + padding * 2}px`,
+        height: `${size + padding * 2}px`,
       }"
-      tabindex="0"
-      role="button"
-      :aria-disabled="disabled"
-      :aria-expanded="dropdownShown"
-      @click="handleIconClick"
-      @mousedown="handleIconMouseDown"
-      @keydown.enter.prevent="handleIconClick"
-      @keydown.space.prevent="handleIconClick"
-    />
+    >
+      <font-awesome-icon
+        ref="iconButton"
+        class="iconButton"
+        :title="title"
+        :icon="icon"
+        :class="{
+          [theme]: true,
+          shadow: useShadow,
+          disabled
+        }"
+        :style="{
+          padding: padding + 'px',
+          fontSize: size + 'px'
+        }"
+        tabindex="0"
+        role="button"
+        :aria-disabled="disabled"
+        :aria-expanded="dropdownShown"
+        @click="handleIconClick"
+        @mousedown="handleIconMouseDown"
+        @keydown.enter.prevent="handleIconClick"
+        @keydown.space.prevent="handleIconClick"
+      />
+      <font-awesome-layers-text
+        v-if="counterValue > 0"
+        class="iconCounter"
+        :class="{
+          [theme]: true,
+        }"
+        :style="{
+          fontSize: `${size + padding * 2}px`,
+        }"
+        counter
+        :value="counterValue"
+        position="top-right"
+      />
+    </font-awesome-layers>
     <template
       v-if="dropdownShown"
     >
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
index 0ff1850a4b873..1b2a0a1cfa295 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -42,6 +42,24 @@ export default defineComponent({
       default: 20
     },
   },
+  computed: {
+    allPlaylists: function () {
+      return this.$store.getters.getAllPlaylists
+    },
+
+    videoAddedToPlaylistCount() {
+      let count = 0
+
+      this.allPlaylists.forEach((playlist) => {
+        const videoAlreadyAdded = playlist.videos.some((v) => {
+          return v.videoId === this.videoId
+        })
+        if (videoAlreadyAdded) { count += 1 }
+      })
+
+      return count
+    },
+  },
   methods: {
     togglePlaylistPrompt: function () {
       const videoData = {
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
index b9610d58ef070..e548c941d8bc7 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
@@ -2,6 +2,7 @@
   <ft-icon-button
     :title="$t('User Playlists.Add to Playlist')"
     :icon="['fas', 'plus']"
+    :counter-value="videoAddedToPlaylistCount"
     :padding="padding"
     :size="size"
     @click="togglePlaylistPrompt"
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 4eaa8845c68d5..d4366133f11f8 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -99,7 +99,11 @@ import {
   faMastodon,
   faMonero
 } from '@fortawesome/free-brands-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  FontAwesomeIcon,
+  FontAwesomeLayers,
+  FontAwesomeLayersText,
+} from '@fortawesome/vue-fontawesome'
 import PortalVue from 'portal-vue'
 
 Vue.config.devtools = process.env.NODE_ENV === 'development'
@@ -201,6 +205,8 @@ library.add(
 registerSwiper()
 
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
+Vue.component('FontAwesomeLayers', FontAwesomeLayers)
+Vue.component('FontAwesomeLayersText', FontAwesomeLayersText)
 Vue.directive('observe-visibility', ObserveVisibility)
 
 /* eslint-disable-next-line no-new */

From 78d10e9438b2a89f68aa9dc2dd55017a0d8daa49 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Wed, 22 May 2024 09:37:22 +0800
Subject: [PATCH 03/15] $ Remove meaningless CSS file

---
 .../ft-playlist-add-video-button.scss         | 176 ------------------
 .../ft-playlist-add-video-button.vue          |   1 -
 2 files changed, 177 deletions(-)
 delete mode 100644 src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss

diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss
deleted file mode 100644
index d4f0eca364740..0000000000000
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.scss
+++ /dev/null
@@ -1,176 +0,0 @@
-.ftIconButton {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-  position: relative;
-  user-select: none;
-}
-
-.iconButton {
-  border-radius: 50%;
-  cursor: pointer;
-  block-size: 1em;
-  transition: background 0.15s ease-out;
-  inline-size: 1em;
-
-  &.shadow {
-    box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-  }
-
-  &.base {
-    background-color: var(--card-bg-color);
-    color: var(--primary-text-color);
-
-    &:not(.disabled) {
-      &:hover,
-      &:focus-visible {
-        background-color: var(--side-nav-hover-color);
-        color: var(--side-nav-hover-text-color);
-      }
-
-      &:active {
-        background-color: var(--side-nav-active-color);
-        color: var(--side-nav-active-text-color);
-      }
-    }
-  }
-
-  &.base-no-default:not(.disabled) {
-    &:hover,
-    &:focus-visible {
-      background-color: var(--side-nav-hover-color);
-      color: var(--side-nav-hover-text-color);
-    }
-
-    &:active {
-      background-color: var(--side-nav-active-color);
-      color: var(--side-nav-active-text-color);
-    }
-  }
-
-  &.primary {
-    background-color: var(--primary-color);
-    color: var(--text-with-main-color);
-
-    &:not(.disabled) {
-      &:hover,
-      &:focus-visible {
-        background-color: var(--primary-color-hover);
-      }
-
-      &:active {
-        background-color: var(--primary-color-active);
-      }
-    }
-  }
-
-
-  &.secondary {
-    background-color: var(--accent-color);
-    color: var(--text-with-accent-color);
-
-    &:not(.disabled) {
-      &:hover,
-      &:focus-visible {
-        background-color: var(--accent-color-hover);
-      }
-
-      &:active {
-        background-color: var(--accent-color-active);
-      }
-    }
-  }
-
-  &.destructive {
-    background-color: var(--destructive-color);
-    color: var(--destructive-text-color);
-
-    &:not(.disabled) {
-      &:hover,
-      &:focus-visible {
-        background-color: var(--destructive-hover-color);
-      }
-
-      &:active {
-        background-color: var(--destructive-active-color);
-      }
-    }
-  }
-
-  &.favorite, &.favorite:hover, &.favorite:focus-visible {
-    color: var(--favorite-icon-color);
-  }
-}
-
-.disabled {
-  opacity: 0.5;
-  pointer-events: auto;
-  cursor: default;
-  user-select: none;
-}
-
-.iconDropdown {
-  background-color: var(--side-nav-color);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-  color: var(--secondary-text-color);
-  display: inline;
-  font-size: 12px;
-  list-style-type: none;
-  position: absolute;
-  text-align: center;
-  user-select: none;
-  z-index: 3;
-
-  &.left {
-    inset-inline-end: calc(50% - 10px);
-  }
-
-  &.right {
-    inset-inline-start: calc(50% - 10px);
-  }
-
-  &.top {
-    inset-block-end: 45px;
-  }
-
-  &.bottom {
-    inset-block-start: 45px;
-  }
-
-  .list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .listItem {
-    cursor: pointer;
-    margin: 0;
-    padding-block: 8px;
-    padding-inline: 10px;
-    transition: background 0.2s ease-out;
-    white-space: nowrap;
-
-    &:hover,
-    &:focus-visible {
-      background-color: var(--side-nav-hover-color);
-      color: var(--side-nav-hover-text-color);
-      transition: background 0.2s ease-in;
-    }
-
-    &:active {
-      background-color: var(--side-nav-active-color);
-      color: var(--side-nav-active-text-color);
-      transition: background 0.1s ease-in;
-    }
-  }
-
-  .listItemDivider {
-    border-block-start: 1px solid var(--tertiary-text-color);
-    margin-block: 1px;
-    margin-inline: auto;
-    // Too "visible" with current color
-    opacity: 0.5;
-    inline-size: 95%;
-  }
-}
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
index e548c941d8bc7..4ff893a197177 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
@@ -10,4 +10,3 @@
 </template>
 
 <script src="./ft-playlist-add-video-button.js" />
-<style scoped lang="scss" src="./ft-playlist-add-video-button.scss" />

From d0831f34072f21d5515b725cc2a9b163c00aabf2 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Wed, 22 May 2024 10:13:13 +0800
Subject: [PATCH 04/15] * Update style & button title

---
 .../components/ft-icon-button/ft-icon-button.scss  |  5 +++++
 .../components/ft-icon-button/ft-icon-button.vue   |  3 ---
 .../ft-playlist-add-video-button.js                | 14 ++++++++++++++
 .../ft-playlist-add-video-button.vue               |  2 +-
 static/locales/en-US.yaml                          |  1 +
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index a61d978c928e8..3cc577577975f 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -103,7 +103,12 @@
 }
 
 .iconCounter {
+  // Reset
+  transform: none;
+  // Our style
+  translate: 50% -50%;
   box-shadow: -1px 1px 5px 0 rgb(0 0 0 / 50%);
+  font-size: 12px;
 
   &.base {
     background-color: var(--card-bg-color);
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 3ac63b366ffcd..a864207a5ab99 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -35,9 +35,6 @@
         :class="{
           [theme]: true,
         }"
-        :style="{
-          fontSize: `${size + padding * 2}px`,
-        }"
         counter
         :value="counterValue"
         position="top-right"
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
index 1b2a0a1cfa295..b8cb6cda572c6 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -47,6 +47,13 @@ export default defineComponent({
       return this.$store.getters.getAllPlaylists
     },
 
+    title() {
+      const initialText = this.$t('User Playlists.Add to Playlist')
+      if (this.videoAddedToPlaylistCountText == null) { return initialText }
+
+      return `${this.$t('User Playlists.Add to Playlist')} (${this.videoAddedToPlaylistCountText})`
+    },
+
     videoAddedToPlaylistCount() {
       let count = 0
 
@@ -59,6 +66,13 @@ export default defineComponent({
 
       return count
     },
+    videoAddedToPlaylistCountText() {
+      if (this.videoAddedToPlaylistCount === 0) { return null }
+
+      return this.$tc('User Playlists.Already Added to {playlistCount} Playlist(s)', this.videoAddedToPlaylistCount, {
+        playlistCount: this.videoAddedToPlaylistCount,
+      })
+    },
   },
   methods: {
     togglePlaylistPrompt: function () {
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
index 4ff893a197177..1f38c6ae8de4d 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.vue
@@ -1,6 +1,6 @@
 <template>
   <ft-icon-button
-    :title="$t('User Playlists.Add to Playlist')"
+    :title="title"
     :icon="['fas', 'plus']"
     :counter-value="videoAddedToPlaylistCount"
     :padding="padding"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index b6dce12a550c5..5f61710f7af6b 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -153,6 +153,7 @@ User Playlists:
   Create New Playlist: Create New Playlist
 
   Add to Playlist: Add to Playlist
+  Already Added to {playlistCount} Playlist(s): Already Added to {playlistCount} Playlist | Already Added to {playlistCount} Playlists
   Add to Favorites: Add to {playlistName}
   Remove from Favorites: Remove from {playlistName}
 

From c164bead16473e9c23d863925746b5dd61319907 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Thu, 23 May 2024 10:35:21 +0800
Subject: [PATCH 05/15] ! Fix property type for can be missing view count

---
 src/renderer/components/ft-list-video/ft-list-video.vue        | 2 +-
 .../ft-playlist-add-video-button.js                            | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

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 5cb57d80a2178..3e657eb366aed 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -52,7 +52,7 @@
           :video-title="title"
           :channel-id="channelId"
           :channel-name="channelName"
-          :view-count="viewCount"
+          :view-count="viewCount ?? null"
           :length-seconds="lengthSeconds"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
index b8cb6cda572c6..fa88cde9c8b41 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -26,7 +26,8 @@ export default defineComponent({
     },
     viewCount: {
       type: Number,
-      required: true
+      required: false,
+      default: null,
     },
     lengthSeconds: {
       type: Number,

From 99b5b419a75bff56d8fdd435674feef2121b7c32 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Thu, 23 May 2024 10:54:26 +0800
Subject: [PATCH 06/15] * Address RTL and style issue

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

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 3cc577577975f..82242dd8a7876 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -106,7 +106,9 @@
   // Reset
   transform: none;
   // Our style
-  translate: 50% -50%;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  translate: 40% -40%;
   box-shadow: -1px 1px 5px 0 rgb(0 0 0 / 50%);
   font-size: 12px;
 
@@ -114,6 +116,10 @@
     background-color: var(--card-bg-color);
     color: var(--primary-text-color);
   }
+
+  body[dir='rtl'] & {
+    translate: -40% -40%;
+  }
 }
 
 .disabled {
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 a864207a5ab99..cc46b5e8615e5 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -37,7 +37,6 @@
         }"
         counter
         :value="counterValue"
-        position="top-right"
       />
     </font-awesome-layers>
     <template

From 78ed0829b18e866a7cee7cd63610f95c5db916a9 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Thu, 23 May 2024 15:09:49 +0800
Subject: [PATCH 07/15] * Make counter appear top left (for LTR locales)

---
 src/renderer/components/ft-icon-button/ft-icon-button.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 82242dd8a7876..53c30b476c132 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -107,8 +107,8 @@
   transform: none;
   // Our style
   inset-block-start: 0;
-  inset-inline-end: 0;
-  translate: 40% -40%;
+  inset-inline-start: 0;
+  translate: -40% -40%;
   box-shadow: -1px 1px 5px 0 rgb(0 0 0 / 50%);
   font-size: 12px;
 
@@ -118,7 +118,7 @@
   }
 
   body[dir='rtl'] & {
-    translate: -40% -40%;
+    translate: 40% -40%;
   }
 }
 

From 57a0bdc04e87a162d4ac94cbfa8bec250c45adc7 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Thu, 23 May 2024 15:20:06 +0800
Subject: [PATCH 08/15] * Hide counter in single user playlist view

---
 .../ft-element-list/ft-element-list.js        |  4 +++
 .../ft-element-list/ft-element-list.vue       |  1 +
 .../ft-list-lazy-wrapper.js                   |  4 +++
 .../ft-list-lazy-wrapper.vue                  |  1 +
 .../ft-list-video-lazy/ft-list-video-lazy.js  |  4 +++
 .../ft-list-video-lazy/ft-list-video-lazy.vue |  1 +
 .../ft-list-video-numbered.js                 |  4 +++
 .../ft-list-video-numbered.vue                |  1 +
 .../components/ft-list-video/ft-list-video.js |  5 ++++
 .../ft-list-video/ft-list-video.vue           |  1 +
 .../ft-playlist-add-video-button.js           | 29 +++++++++++++++++++
 src/renderer/views/Playlist/Playlist.vue      |  2 ++
 12 files changed, 57 insertions(+)

diff --git a/src/renderer/components/ft-element-list/ft-element-list.js b/src/renderer/components/ft-element-list/ft-element-list.js
index b82b04f95afe0..1ee96b6d401af 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.js
+++ b/src/renderer/components/ft-element-list/ft-element-list.js
@@ -59,6 +59,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
     playlistItemsLength: {
       type: Number,
       default: 0
diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 7331d2e7ff8b6..23a55442c8c3b 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -18,6 +18,7 @@
       :can-move-video-up="canMoveVideoUp && index > 0"
       :can-move-video-down="canMoveVideoDown && index < playlistItemsLength - 1"
       :can-remove-from-playlist="canRemoveFromPlaylist"
+      :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
       :search-query-text="searchQueryText"
       :playlist-id="playlistId"
       :playlist-type="playlistType"
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
index f94037ef774bd..127650d215499 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.js
@@ -84,6 +84,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['move-video-down', 'move-video-up', 'remove-from-playlist'],
   data: function () {
diff --git a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
index df93ed245667b..9acb7929c44b2 100644
--- a/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
+++ b/src/renderer/components/ft-list-lazy-wrapper/ft-list-lazy-wrapper.vue
@@ -26,6 +26,7 @@
         :can-move-video-up="canMoveVideoUp"
         :can-move-video-down="canMoveVideoDown"
         :can-remove-from-playlist="canRemoveFromPlaylist"
+        :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
         @move-video-up="moveVideoUp"
         @move-video-down="moveVideoDown"
         @remove-from-playlist="removeFromPlaylist"
diff --git a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js
index 559e3a032c89b..448de4aec396f 100644
--- a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js
+++ b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.js
@@ -71,6 +71,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
     useChannelsHiddenPreference: {
       type: Boolean,
       default: false,
diff --git a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue
index a3e9d5f91545f..72652e48a8fa6 100644
--- a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue
+++ b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue
@@ -23,6 +23,7 @@
       :can-move-video-up="canMoveVideoUp"
       :can-move-video-down="canMoveVideoDown"
       :can-remove-from-playlist="canRemoveFromPlaylist"
+      :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
       @pause-player="pausePlayer"
       @move-video-up="moveVideoUp"
       @move-video-down="moveVideoDown"
diff --git a/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js
index 50f1fb96d91f7..90684fc59331b 100644
--- a/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js
+++ b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.js
@@ -67,6 +67,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
     videoIndex: {
       type: Number,
       default: -1
diff --git a/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue
index 44f7b808092d0..f0b6894edb7cb 100644
--- a/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue
+++ b/src/renderer/components/ft-list-video-numbered/ft-list-video-numbered.vue
@@ -40,6 +40,7 @@
         :can-move-video-up="canMoveVideoUp"
         :can-move-video-down="canMoveVideoDown"
         :can-remove-from-playlist="canRemoveFromPlaylist"
+        :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
         @pause-player="pausePlayer"
         @move-video-up="moveVideoUp"
         @move-video-down="moveVideoDown"
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 530df822b88aa..2011b670032ba 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -86,6 +86,11 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['move-video-down', 'move-video-up', 'pause-player', 'remove-from-playlist'],
   data: 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 3e657eb366aed..68f5db6cc95e3 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -56,6 +56,7 @@
           :length-seconds="lengthSeconds"
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
+          :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
         />
         <ft-icon-button
           v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
index fa88cde9c8b41..58e7e5fa18ca7 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -42,6 +42,11 @@ export default defineComponent({
       type: Number,
       default: 20
     },
+
+    showVideoAddedToPlaylistCount: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     allPlaylists: function () {
@@ -56,6 +61,8 @@ export default defineComponent({
     },
 
     videoAddedToPlaylistCount() {
+      if (!this.showVideoAddedToPlaylistCount) { return 0 }
+
       let count = 0
 
       this.allPlaylists.forEach((playlist) => {
@@ -65,6 +72,11 @@ export default defineComponent({
         if (videoAlreadyAdded) { count += 1 }
       })
 
+      // If only saved in quick bookmark target, don't show the count which is confusing
+      if (count === 1 && this.isInQuickBookmarkPlaylist) {
+        return 0
+      }
+
       return count
     },
     videoAddedToPlaylistCountText() {
@@ -74,6 +86,23 @@ export default defineComponent({
         playlistCount: this.videoAddedToPlaylistCount,
       })
     },
+
+    quickBookmarkPlaylistId() {
+      return this.$store.getters.getQuickBookmarkTargetPlaylistId
+    },
+    quickBookmarkPlaylist() {
+      return this.$store.getters.getPlaylist(this.quickBookmarkPlaylistId)
+    },
+    isQuickBookmarkEnabled() {
+      return this.quickBookmarkPlaylist != null
+    },
+    isInQuickBookmarkPlaylist: function () {
+      if (!this.isQuickBookmarkEnabled) { return false }
+
+      return this.quickBookmarkPlaylist.videos.some((video) => {
+        return video.videoId === this.videoId
+      })
+    },
   },
   methods: {
     togglePlaylistPrompt: function () {
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index c7e6efb8b30af..81fdf5358fa80 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -78,6 +78,7 @@
             :can-move-video-down="!playlistInVideoSearchMode && isSortOrderCustom"
             :playlist-items-length="playlistItems.length"
             :can-remove-from-playlist="true"
+            :show-video-added-to-playlist-count="!isUserPlaylistRequested"
             @move-video-up="moveVideoUp"
             @move-video-down="moveVideoDown"
             @remove-from-playlist="removeVideoFromPlaylist"
@@ -103,6 +104,7 @@
               :can-move-video-up="index > 0 && !playlistInVideoSearchMode && isSortOrderCustom"
               :can-move-video-down="index < playlistItems.length - 1 && !playlistInVideoSearchMode && isSortOrderCustom"
               :can-remove-from-playlist="true"
+              :show-video-added-to-playlist-count="!isUserPlaylistRequested"
               :video-index="playlistInVideoSearchMode ? playlistItems.findIndex(i => i === item) : index"
               :initial-visible-state="index < 10"
               @move-video-up="moveVideoUp(item.videoId, item.playlistItemId)"

From d61af90ff0eb65c223b30b37edc1ab6188ddacb0 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Thu, 23 May 2024 15:24:29 +0800
Subject: [PATCH 09/15] ! Fix counter style

---
 src/renderer/components/ft-icon-button/ft-icon-button.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.scss b/src/renderer/components/ft-icon-button/ft-icon-button.scss
index 53c30b476c132..09bd5b47405d1 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.scss
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.scss
@@ -105,9 +105,9 @@
 .iconCounter {
   // Reset
   transform: none;
-  // Our style
   inset-block-start: 0;
-  inset-inline-start: 0;
+  inset-inline: 0 auto;
+  // Our style
   translate: -40% -40%;
   box-shadow: -1px 1px 5px 0 rgb(0 0 0 / 50%);
   font-size: 12px;

From de255e584d95920e7a1be44c940ffb1238b5aaf9 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sat, 25 May 2024 06:51:09 +0800
Subject: [PATCH 10/15] $ Remove unused import

---
 src/renderer/components/watch-video-info/watch-video-info.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 83d3caf646fcb..34930f9d842ce 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -8,7 +8,6 @@ import FtPlaylistAddVideoButton from '../ft-playlist-add-video-button/ft-playlis
 import {
   formatNumber,
   openExternalLink,
-  openInternalPath,
   showToast,
 } from '../../helpers/utils'
 

From adb2ea38aec9bc937fe21e6bf4b453ff911ca882 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sun, 26 May 2024 08:36:25 +0800
Subject: [PATCH 11/15] $ Remove unused watcher & data

---
 src/renderer/components/ft-list-video/ft-list-video.js | 8 --------
 1 file changed, 8 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 ba92144b6b7d4..091f117ef9379 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -111,7 +111,6 @@ export default defineComponent({
       isUpcoming: false,
       isPremium: false,
       hideViews: false,
-      addToPlaylistPromptCloseCallback: null,
       debounceGetDeArrowThumbnail: null,
     }
   },
@@ -495,13 +494,6 @@ export default defineComponent({
     historyEntry() {
       this.checkIfWatched()
     },
-    showAddToPlaylistPrompt(value) {
-      if (value) { return }
-      // Execute on prompt close
-
-      if (this.addToPlaylistPromptCloseCallback == null) { return }
-      this.addToPlaylistPromptCloseCallback()
-    },
   },
   created: function () {
     this.parseVideoData()

From e38bc8dcb520ffeb733904ddaa21c30f376be03e Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sun, 26 May 2024 08:37:09 +0800
Subject: [PATCH 12/15] * Read reactive property less frequently

---
 .../ft-playlist-add-video-button.js           | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
index 58e7e5fa18ca7..8bc33baebbe1c 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -63,11 +63,17 @@ export default defineComponent({
     videoAddedToPlaylistCount() {
       if (!this.showVideoAddedToPlaylistCount) { return 0 }
 
+      // Accessing a reactive property has a negligible amount of overhead,
+      // however as we know that some users have playlists that have more than 10k items in them
+      // it adds up quickly, especially as there are usually lots of ft-list-video instances active at the same time.
+      // So create a temporary variable outside of the array, so we only have to do it once.
+      // Also the search is re-triggered every time any playlist is modified.
+      const videoId = this.videoId
       let count = 0
 
       this.allPlaylists.forEach((playlist) => {
         const videoAlreadyAdded = playlist.videos.some((v) => {
-          return v.videoId === this.videoId
+          return v.videoId === videoId
         })
         if (videoAlreadyAdded) { count += 1 }
       })
@@ -87,11 +93,8 @@ export default defineComponent({
       })
     },
 
-    quickBookmarkPlaylistId() {
-      return this.$store.getters.getQuickBookmarkTargetPlaylistId
-    },
     quickBookmarkPlaylist() {
-      return this.$store.getters.getPlaylist(this.quickBookmarkPlaylistId)
+      return this.$store.getters.getQuickBookmarkPlaylist
     },
     isQuickBookmarkEnabled() {
       return this.quickBookmarkPlaylist != null
@@ -99,8 +102,15 @@ export default defineComponent({
     isInQuickBookmarkPlaylist: function () {
       if (!this.isQuickBookmarkEnabled) { return false }
 
+      // Accessing a reactive property has a negligible amount of overhead,
+      // however as we know that some users have playlists that have more than 10k items in them
+      // it adds up quickly, especially as there are usually lots of ft-list-video instances active at the same time.
+      // So create a temporary variable outside of the array, so we only have to do it once.
+      // Also the search is re-triggered every time any playlist is modified.
+      const videoId = this.videoId
+
       return this.quickBookmarkPlaylist.videos.some((video) => {
-        return video.videoId === this.videoId
+        return video.videoId === videoId
       })
     },
   },

From 60869e9d69c75aa753559f03757dd947b101773f Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sun, 26 May 2024 08:39:54 +0800
Subject: [PATCH 13/15] $ Use already translated text

---
 .../ft-playlist-add-video-button.js                             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
index 8bc33baebbe1c..881c3ac000d6b 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -57,7 +57,7 @@ export default defineComponent({
       const initialText = this.$t('User Playlists.Add to Playlist')
       if (this.videoAddedToPlaylistCountText == null) { return initialText }
 
-      return `${this.$t('User Playlists.Add to Playlist')} (${this.videoAddedToPlaylistCountText})`
+      return `${initialText} (${this.videoAddedToPlaylistCountText})`
     },
 
     videoAddedToPlaylistCount() {

From 7440581bd802b1939bd305b15300fc6ca687f58e Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Sun, 26 May 2024 08:43:58 +0800
Subject: [PATCH 14/15] * Update title text to be shorter

---
 static/locales/en-US.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 5f61710f7af6b..9a95fe62c1509 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -153,7 +153,7 @@ User Playlists:
   Create New Playlist: Create New Playlist
 
   Add to Playlist: Add to Playlist
-  Already Added to {playlistCount} Playlist(s): Already Added to {playlistCount} Playlist | Already Added to {playlistCount} Playlists
+  Already Added to {playlistCount} Playlist(s): Already Added to {playlistCount}
   Add to Favorites: Add to {playlistName}
   Remove from Favorites: Remove from {playlistName}
 

From 3a4d0a6b4808ab5ac426ac7069fc72a06b29da39 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Mon, 27 May 2024 09:42:24 +0800
Subject: [PATCH 15/15] * Pass computed value instead of re-computing

---
 .../ft-list-video/ft-list-video.vue           |  1 +
 .../ft-playlist-add-video-button.js           | 35 +++++++++----------
 .../watch-video-info/watch-video-info.vue     |  1 +
 3 files changed, 19 insertions(+), 18 deletions(-)

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 68f5db6cc95e3..e025183631705 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -57,6 +57,7 @@
           :padding="appearance === `watchPlaylistItem` ? 5 : 6"
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
           :show-video-added-to-playlist-count="showVideoAddedToPlaylistCount"
+          :is-in-quick-bookmark-playlist="isInQuickBookmarkPlaylist"
         />
         <ft-icon-button
           v-if="isQuickBookmarkEnabled && quickBookmarkButtonEnabled"
diff --git a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
index 881c3ac000d6b..e620eb60022e0 100644
--- a/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
+++ b/src/renderer/components/ft-playlist-add-video-button/ft-playlist-add-video-button.js
@@ -47,6 +47,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    isInQuickBookmarkPlaylist: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     allPlaylists: function () {
@@ -71,16 +75,25 @@ export default defineComponent({
       const videoId = this.videoId
       let count = 0
 
+      const isQuickBookmarkEnabled = this.isQuickBookmarkEnabled
+      let quickBookmarkPlaylistId
+      if (isQuickBookmarkEnabled) {
+        quickBookmarkPlaylistId = this.quickBookmarkPlaylist._id
+      }
       this.allPlaylists.forEach((playlist) => {
+        // We don't need to check the quick bookmark playlist
+        // as we already know it from isInQuickBookmarkPlaylist
+        if (isQuickBookmarkEnabled && quickBookmarkPlaylistId === playlist._id) {
+          return
+        }
         const videoAlreadyAdded = playlist.videos.some((v) => {
           return v.videoId === videoId
         })
-        if (videoAlreadyAdded) { count += 1 }
+        if (videoAlreadyAdded) { count++ }
       })
-
       // If only saved in quick bookmark target, don't show the count which is confusing
-      if (count === 1 && this.isInQuickBookmarkPlaylist) {
-        return 0
+      if (count > 0 && this.isInQuickBookmarkPlaylist) {
+        count++
       }
 
       return count
@@ -99,20 +112,6 @@ export default defineComponent({
     isQuickBookmarkEnabled() {
       return this.quickBookmarkPlaylist != null
     },
-    isInQuickBookmarkPlaylist: function () {
-      if (!this.isQuickBookmarkEnabled) { return false }
-
-      // Accessing a reactive property has a negligible amount of overhead,
-      // however as we know that some users have playlists that have more than 10k items in them
-      // it adds up quickly, especially as there are usually lots of ft-list-video instances active at the same time.
-      // So create a temporary variable outside of the array, so we only have to do it once.
-      // Also the search is re-triggered every time any playlist is modified.
-      const videoId = this.videoId
-
-      return this.quickBookmarkPlaylist.videos.some((video) => {
-        return video.videoId === videoId
-      })
-    },
   },
   methods: {
     togglePlaylistPrompt: function () {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index ced45668a4aa6..3037cfed311ca 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -87,6 +87,7 @@
           :channel-name="channelName"
           :view-count="viewCount"
           :length-seconds="lengthSeconds"
+          :is-in-quick-bookmark-playlist="isInQuickBookmarkPlaylist"
         />
         <ft-icon-button
           v-if="isQuickBookmarkEnabled"