Always have quick bookmark set

package.json

@@ -56,6 +56,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/vue-fontawesome": "^2.0.10",
     "@seald-io/nedb": "^4.0.4",
     "@silvermine/videojs-quality-selector": "^1.3.1",

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -65,7 +65,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['click'],
+  emits: ['click', 'disabled-click'],
   data: function () {
     return {
       dropdownShown: false,
@@ -92,7 +92,10 @@ export default defineComponent({
     },
 
     handleIconClick: function () {
-      if (this.disabled) { return }
+      if (this.disabled) {
+        this.$emit('disabled-click')
+        return
+      }
       if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
         this.dropdownShown = !this.dropdownShown
 

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -21,19 +21,21 @@
     background-color: var(--card-bg-color);
     color: var(--primary-text-color);
 
-    &: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);
+    &: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 {
+  &.base-no-default:not(.disabled) {
     &:hover,
     &:focus-visible {
       background-color: var(--side-nav-hover-color);
@@ -50,41 +52,48 @@
     background-color: var(--primary-color);
     color: var(--text-with-main-color);
 
-    &:hover,
-    &:focus-visible {
-      background-color: var(--primary-color-hover);
-    }
+    &:not(.disabled) {
+      &:hover,
+      &:focus-visible {
+        background-color: var(--primary-color-hover);
+      }
 
-    &:active {
-      background-color: var(--primary-color-active);
+      &:active {
+        background-color: var(--primary-color-active);
+      }
     }
   }
 
+
   &.secondary {
     background-color: var(--accent-color);
     color: var(--text-with-accent-color);
 
-    &:hover,
-    &:focus-visible {
-      background-color: var(--accent-color-hover);
-    }
+    &:not(.disabled) {
+      &:hover,
+      &:focus-visible {
+        background-color: var(--accent-color-hover);
+      }
 
-    &:active {
-      background-color: var(--accent-color-active);
+      &:active {
+        background-color: var(--accent-color-active);
+      }
     }
   }
 
   &.destructive {
     background-color: var(--destructive-color);
     color: var(--destructive-text-color);
 
-    &:hover,
-    &:focus-visible {
-      background-color: var(--destructive-hover-color);
-    }
+    &:not(.disabled) {
+      &:hover,
+      &:focus-visible {
+        background-color: var(--destructive-hover-color);
+      }
 
-    &:active {
-      background-color: var(--destructive-active-color);
+      &:active {
+        background-color: var(--destructive-active-color);
+      }
     }
   }
 
@@ -95,7 +104,8 @@
 
 .disabled {
   opacity: 0.5;
-  pointer-events: none;
+  pointer-events: auto;
+  cursor: default;
   user-select: none;
 }
 

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -16,6 +16,7 @@
       }"
       tabindex="0"
       role="button"
+      :aria-disabled="disabled"
       :aria-expanded="dropdownShown"
       @click="handleIconClick"
       @mousedown="handleIconMouseDown"

src/renderer/components/ft-list-playlist/ft-list-playlist.js

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
 import { mapActions } from 'vuex'
+import { showToast } from '../../helpers/utils'
 
 export default defineComponent({
   name: 'FtListPlaylist',
@@ -40,6 +41,20 @@ export default defineComponent({
       return this.$store.getters.getCurrentInvidiousInstance
     },
 
+    quickBookmarkPlaylistId() {
+      return this.$store.getters.getQuickBookmarkTargetPlaylistId
+    },
+    quickBookmarkPlaylist() {
+      return this.$store.getters.getPlaylist(this.quickBookmarkPlaylistId)
+    },
+    markedAsQuickBookmarkTarget() {
+      // Only user playlists can be target
+      if (this.playlistId == null) { return false }
+      if (this.quickBookmarkPlaylistId == null) { return false }
+
+      return this.quickBookmarkPlaylistId === this.playlistId
+    },
+
     listType: function () {
       return this.$store.getters.getListType
     },
@@ -112,6 +127,10 @@ export default defineComponent({
       })
     },
 
+    handleQuickBookmarkEnabledDisabledClick: function () {
+      showToast(this.$t('User Playlists.SinglePlaylistView.Toast["This playlist is already being used for quick bookmark."]'))
+    },
+
     parseInvidiousData: function () {
       this.title = this.data.title
       if (this.thumbnailCanBeShown) {
@@ -154,8 +173,34 @@ export default defineComponent({
       this.videoCount = this.data.videos.length
     },
 
+    enableQuickBookmarkForThisPlaylist: function () {
+      const currentQuickBookmarkTargetPlaylist = this.quickBookmarkPlaylist
+
+      this.updateQuickBookmarkTargetPlaylistId(this.playlistId)
+      if (currentQuickBookmarkTargetPlaylist != null) {
+        showToast(
+          this.$t('User Playlists.SinglePlaylistView.Toast["This playlist is now used for quick bookmark instead of {oldPlaylistName}. Click here to undo"]', {
+            oldPlaylistName: currentQuickBookmarkTargetPlaylist.playlistName,
+          }),
+          5000,
+          () => {
+            this.updateQuickBookmarkTargetPlaylistId(currentQuickBookmarkTargetPlaylist._id)
+            showToast(
+              this.$t('User Playlists.SinglePlaylistView.Toast["Reverted to use {oldPlaylistName} for quick bookmark"]', {
+                oldPlaylistName: currentQuickBookmarkTargetPlaylist.playlistName,
+              }),
+              5000,
+            )
+          },
+        )
+      } else {
+        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.This playlist is now used for quick bookmark'))
+      }
+    },
+
     ...mapActions([
-      'openInExternalPlayer'
+      'openInExternalPlayer',
+      'updateQuickBookmarkTargetPlaylistId'
     ])
   }
 })

src/renderer/components/ft-list-playlist/ft-list-playlist.vue

@@ -67,6 +67,20 @@
         :use-shadow="false"
         @click="handleExternalPlayer"
       />
+      <span
+        v-if="isUserPlaylist"
+        class="playlistIcons"
+      >
+        <ft-icon-button
+          :title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
+          :icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
+          :disabled="markedAsQuickBookmarkTarget"
+          :theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
+          :size="16"
+          @disabled-click="handleQuickBookmarkEnabledDisabledClick"
+          @click="enableQuickBookmarkForThisPlaylist"
+        />
+      </span>
     </div>
   </div>
 </template>

src/renderer/components/playlist-info/playlist-info.js

@@ -230,16 +230,16 @@ export default defineComponent({
     quickBookmarkPlaylist() {
       return this.$store.getters.getPlaylist(this.quickBookmarkPlaylistId)
     },
-    quickBookmarkEnabled() {
-      return this.quickBookmarkPlaylist != null
-    },
     markedAsQuickBookmarkTarget() {
       // Only user playlists can be target
       if (this.selectedUserPlaylist == null) { return false }
       if (this.quickBookmarkPlaylist == null) { return false }
 
       return this.quickBookmarkPlaylist._id === this.selectedUserPlaylist._id
     },
+    playlistDeletionDisabledLabel: function () {
+      return this.$t('User Playlists["Cannot delete the quick bookmark target playlist."]')
+    },
   },
   watch: {
     showDeletePlaylistPrompt(shown) {
@@ -319,6 +319,14 @@ export default defineComponent({
       })
     },
 
+    handleQuickBookmarkEnabledDisabledClick: function () {
+      showToast(this.$t('User Playlists.SinglePlaylistView.Toast["This playlist is already being used for quick bookmark."]'))
+    },
+
+    handlePlaylistDeleteDisabledClick: function () {
+      showToast(this.playlistDeletionDisabledLabel)
+    },
+
     exitEditMode: function () {
       this.editMode = false
 
@@ -402,10 +410,6 @@ export default defineComponent({
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast.This playlist is now used for quick bookmark'))
       }
     },
-    disableQuickBookmark() {
-      this.updateQuickBookmarkTargetPlaylistId(null)
-      showToast(this.$t('User Playlists.SinglePlaylistView.Toast.Quick bookmark disabled'))
-    },
 
     updateQuery(query) {
       this.query = query

src/renderer/components/playlist-info/playlist-info.vue

@@ -122,7 +122,15 @@
           theme="secondary"
           @click="exitEditMode"
         />
-
+        <ft-icon-button
+          v-if="!editMode && isUserPlaylist"
+          :title="markedAsQuickBookmarkTarget ? $t('User Playlists.Quick Bookmark Enabled') : $t('User Playlists.Enable Quick Bookmark With This Playlist')"
+          :icon="markedAsQuickBookmarkTarget ? ['fas', 'bookmark'] : ['far', 'bookmark']"
+          :disabled="markedAsQuickBookmarkTarget"
+          :theme="markedAsQuickBookmarkTarget ? 'secondary' : 'base-no-default'"
+          @disabled-click="handleQuickBookmarkEnabledDisabledClick"
+          @click="enableQuickBookmarkForThisPlaylist"
+        />
         <ft-icon-button
           v-if="!editMode && isUserPlaylist"
           :title="$t('User Playlists.Edit Playlist Info')"
@@ -137,20 +145,6 @@
           theme="secondary"
           @click="toggleCopyVideosPrompt"
         />
-        <ft-icon-button
-          v-if="!editMode && isUserPlaylist && !markedAsQuickBookmarkTarget"
-          :title="$t('User Playlists.Enable Quick Bookmark With This Playlist')"
-          :icon="['fas', 'link']"
-          theme="secondary"
-          @click="enableQuickBookmarkForThisPlaylist"
-        />
-        <ft-icon-button
-          v-if="!editMode && isUserPlaylist && markedAsQuickBookmarkTarget"
-          :title="$t('User Playlists.Disable Quick Bookmark')"
-          :icon="['fas', 'link-slash']"
-          theme="secondary"
-          @click="disableQuickBookmark"
-        />
         <ft-icon-button
           v-if="!editMode && isUserPlaylist && videoCount > 0"
           :title="$t('User Playlists.Remove Watched Videos')"
@@ -160,9 +154,11 @@
         />
         <ft-icon-button
           v-if="deletePlaylistButtonVisible"
-          :title="$t('User Playlists.Delete Playlist')"
+          :disabled="markedAsQuickBookmarkTarget"
+          :title="!markedAsQuickBookmarkTarget ? $t('User Playlists.Delete Playlist') : playlistDeletionDisabledLabel"
           :icon="['fas', 'trash']"
           theme="destructive"
+          @disabled-click="handlePlaylistDeleteDisabledClick"
           @click="showDeletePlaylistPrompt = true"
         />
         <ft-share-button

src/renderer/main.js

@@ -90,6 +90,9 @@ import {
   faTrash,
   faUsers,
 } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBookmark as farBookmark
+} from '@fortawesome/free-regular-svg-icons'
 import {
   faBitcoin,
   faGithub,
@@ -185,6 +188,9 @@ library.add(
   faTrash,
   faUsers,
 
+  // solid icons
+  farBookmark,
+
   // brand icons
   faGithub,
   faBitcoin,