feat: show confirmation modal before deleting subscription group (#3596)

src/components/SubscriptionsPage.vue

@@ -53,9 +53,15 @@
             <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
             <div v-if="group.groupName != '' && selectedGroup == group">
                 <i class="i-fa6-solid:pen mx-2" @click="showEditGroupModal = true" />
-                <i class="i-fa6-solid:circle-minus mx-2" @click="deleteGroup(group)" />
+                <i class="i-fa6-solid:circle-minus mx-2" @click="groupToDelete = group.groupName" />
             </div>
         </button>
+        <ConfirmModal
+            v-if="groupToDelete != null"
+            :message="$t('actions.delete_group_confirm')"
+            @close="groupToDelete = null"
+            @confirm="deleteGroup(groupToDelete)"
+        />
         <button class="btn mx-1" @click="showCreateGroupModal = true">
             <i class="i-fa6-solid:circle-plus" />
         </button>
@@ -118,9 +124,10 @@
 <script>
 import ModalComponent from "./ModalComponent.vue";
 import CreateGroupModal from "./CreateGroupModal.vue";
+import ConfirmModal from "./ConfirmModal.vue";
 
 export default {
-    components: { ModalComponent, CreateGroupModal },
+    components: { ModalComponent, CreateGroupModal, ConfirmModal },
     data() {
         return {
             subscriptions: [],
@@ -132,6 +139,7 @@ export default {
             showCreateGroupModal: false,
             showEditGroupModal: false,
             editedGroupName: "",
+            groupToDelete: null,
         };
     },
     computed: {
@@ -153,7 +161,6 @@ export default {
         });
 
         this.channelGroups.push(this.selectedGroup);
-
         if (!window.db) return;
 
         this.loadChannelGroups();
@@ -232,9 +239,10 @@ export default {
             this.showEditGroupModal = false;
         },
         deleteGroup(group) {
-            this.deleteChannelGroup(group.groupName);
-            this.channelGroups = this.channelGroups.filter(g => g != group);
-            this.selectedGroup = this.channelGroups[0];
+            this.deleteChannelGroup(group);
+            this.channelGroups = this.channelGroups.filter(g => g.groupName != group);
+            this.selectedGroup = this.channelGroups[0] || {};
+            this.groupToDelete = null;
         },
         checkedChange(subscription) {
             const channelId = subscription.url.substr(-24);

src/locales/en.json

@@ -101,6 +101,7 @@
         "delete_playlist": "Delete Playlist",
         "select_playlist": "Select a Playlist",
         "delete_playlist_confirm": "Delete this playlist?",
+        "delete_group_confirm": "Delete this group?",
         "please_select_playlist": "Please select a playlist",
         "delete_account": "Delete Account",
         "logout": "Logout from this device",