Add confirmation popup before unsubscribing

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

@@ -3,6 +3,7 @@ import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
 
 import FtButton from '../../components/ft-button/ft-button.vue'
+import FtPrompt from '../../components/ft-prompt/ft-prompt.vue'
 
 import { MAIN_PROFILE_ID } from '../../../constants'
 import { deepCopy, showToast } from '../../helpers/utils'
@@ -11,7 +12,8 @@ import { getFirstCharacter } from '../../helpers/strings'
 export default defineComponent({
   name: 'FtSubscribeButton',
   components: {
-    'ft-button': FtButton
+    'ft-button': FtButton,
+    'ft-prompt': FtPrompt
   },
   props: {
     channelId: {
@@ -42,7 +44,8 @@ export default defineComponent({
   },
   data: function () {
     return {
-      isProfileDropdownOpen: false
+      isProfileDropdownOpen: false,
+      showUnsubscribePopupForProfile: null
     }
   },
   computed: {
@@ -108,34 +111,14 @@ export default defineComponent({
         return
       }
 
-      const currentProfile = deepCopy(profile)
-
       if (this.isProfileSubscribed(profile)) {
-        currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
-          return channel.id !== this.channelId
-        })
-
-        this.updateProfile(currentProfile)
-        showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
-
-        if (profile._id === MAIN_PROFILE_ID) {
-          // Check if a subscription exists in a different profile.
-          // Remove from there as well.
-          let duplicateSubscriptions = 0
-
-          this.profileList.forEach((profileInList) => {
-            if (profileInList._id === MAIN_PROFILE_ID) {
-              return
-            }
-            duplicateSubscriptions += this.unsubscribe(profileInList, this.channelId)
-          })
-
-          if (duplicateSubscriptions > 0) {
-            const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
-            showToast(message)
-          }
+        if (this.$store.getters.getUnsubscriptionPopupStatus) {
+          this.showUnsubscribePopupForProfile = profile
+        } else {
+          this.handleUnsubscription(profile)
         }
       } else {
+        const currentProfile = deepCopy(profile)
         const subscription = {
           id: this.channelId,
           name: this.channelName,
@@ -173,10 +156,46 @@ export default defineComponent({
       }
     },
 
-    toggleProfileDropdown: function() {
+    toggleProfileDropdown: function () {
       this.isProfileDropdownOpen = !this.isProfileDropdownOpen
     },
 
+    handleUnsubscribeConfirmation: async function (value) {
+      const profile = this.showUnsubscribePopupForProfile
+      this.showUnsubscribePopupForProfile = null
+      if (value === 'yes') {
+        this.handleUnsubscription(profile)
+      }
+    },
+
+    handleUnsubscription: function (profile) {
+      const currentProfile = deepCopy(profile)
+      currentProfile.subscriptions = currentProfile.subscriptions.filter((channel) => {
+        return channel.id !== this.channelId
+      })
+
+      this.updateProfile(currentProfile)
+      showToast(this.$t('Channel.Channel has been removed from your subscriptions'))
+
+      if (profile._id === MAIN_PROFILE_ID) {
+        // Check if a subscription exists in a different profile.
+        // Remove from there as well.
+        let duplicateSubscriptions = 0
+
+        this.profileList.forEach((profileInList) => {
+          if (profileInList._id === MAIN_PROFILE_ID) {
+            return
+          }
+          duplicateSubscriptions += this.unsubscribe(profileInList, this.channelId)
+        })
+
+        if (duplicateSubscriptions > 0) {
+          const message = this.$t('Channel.Removed subscription from {count} other channel(s)', { count: duplicateSubscriptions })
+          showToast(message)
+        }
+      }
+    },
+
     isActiveProfile: function (profile) {
       return profile._id === this.activeProfile._id
     },

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

@@ -17,6 +17,14 @@
         text-color="var(--text-with-main-color)"
         @click="handleSubscription"
       />
+      <ft-prompt
+        v-if="showUnsubscribePopupForProfile !== null"
+        :label="$t('Channels.Unsubscribe Prompt', { channelName: channelName })"
+        :option-names="[$t('Yes'), $t('No')]"
+        :option-values="['yes', 'no']"
+        :autosize="true"
+        @click="handleUnsubscribeConfirmation"
+      />
       <ft-button
         v-if="isProfileDropdownEnabled"
         :no-border="true"

src/renderer/components/subscription-settings/subscription-settings.js

@@ -21,14 +21,18 @@ export default defineComponent({
     },
     fetchSubscriptionsAutomatically: function () {
       return this.$store.getters.getFetchSubscriptionsAutomatically
+    },
+    unsubscriptionPopupStatus: function () {
+      return this.$store.getters.getUnsubscriptionPopupStatus
     }
   },
   methods: {
     ...mapActions([
       'updateHideWatchedSubs',
       'updateUseRssFeeds',
       'updateFetchSubscriptionsAutomatically',
-      'updateOnlyShowLatestFromChannel'
+      'updateOnlyShowLatestFromChannel',
+      'updateUnsubscriptionPopupStatus'
     ])
   }
 })

src/renderer/components/subscription-settings/subscription-settings.vue

@@ -33,6 +33,14 @@
           @change="updateOnlyShowLatestFromChannel"
         />
       </div>
+      <div class="switchColumn">
+        <ft-toggle-switch
+          :label="$t('Settings.Subscription Settings.Avoid Accidental Unsubscription')"
+          :default-value="unsubscriptionPopupStatus"
+          :compact="true"
+          @change="updateUnsubscriptionPopupStatus"
+        />
+      </div>
     </div>
   </ft-settings-section>
 </template>

src/renderer/store/modules/settings.js

@@ -226,6 +226,7 @@ const state = {
   hideVideoLikesAndDislikes: false,
   hideVideoViews: false,
   hideWatchedSubs: false,
+  unsubscriptionPopupStatus: false,
   hideLabelsSideBar: false,
   hideChapters: false,
   showDistractionFreeTitles: false,

static/locales/en-US.yaml

@@ -471,6 +471,7 @@ Settings:
     Manage Subscriptions: Manage Subscriptions
     Fetch Automatically: Fetch Feed Automatically
     Only Show Latest Video for Each Channel: Only Show Latest Video for Each Channel
+    Avoid Accidental Unsubscription: Avoid Accidental Unsubscription
   Distraction Free Settings:
     Distraction Free Settings: Distraction Free Settings
     Sections: