Added buttons to hide hidden channels/text

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

@@ -111,6 +111,12 @@ export default defineComponent({
     showDistractionFreeTitles: function () {
       return this.$store.getters.getShowDistractionFreeTitles
     },
+    showAddedChannelsHidden: function () {
+      return this.$store.getters.getShowAddedChannelsHidden
+    },
+    showAddedForbiddenTitles: function () {
+      return this.$store.getters.getShowAddedForbiddenTitles
+    },
     channelsHidden: function () {
       return JSON.parse(this.$store.getters.getChannelsHidden).map((ch) => {
         // Legacy support
@@ -157,6 +163,12 @@ export default defineComponent({
     handleChannelsExists: function () {
       showToast(this.$t('Settings.Distraction Free Settings.Hide Channels Already Exists'))
     },
+    handleAddedChannelsHidden: function () {
+      this.updateShowAddedChannelsHidden(!this.showAddedChannelsHidden)
+    },
+    handleAddedForbiddenTitles: function () {
+      this.updateShowAddedForbiddenTitles(!this.showAddedForbiddenTitles)
+    },
     validateChannelId: function (text) {
       return checkYoutubeChannelId(text)
     },
@@ -224,6 +236,8 @@ export default defineComponent({
       'updateHideSubscriptionsShorts',
       'updateHideSubscriptionsLive',
       'updateHideSubscriptionsCommunity',
+      'updateShowAddedChannelsHidden',
+      'updateShowAddedForbiddenTitles',
     ])
   }
 })

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

@@ -240,21 +240,25 @@
         :validate-tag-name="validateChannelId"
         :find-tag-info="findChannelTagInfo"
         :are-channel-tags="true"
+        :show-tags="showAddedChannelsHidden"
         @invalid-name="handleInvalidChannel"
         @error-find-tag-info="handleChannelAPIError"
         @change="handleChannelsHidden"
         @already-exists="handleChannelsExists"
+        @toggle-show-tags="handleAddedChannelsHidden"
       />
     </ft-flex-box>
     <ft-flex-box>
       <ft-input-tags
         :label="$t('Settings.Distraction Free Settings.Hide Videos and Playlists Containing Text')"
         :tag-name-placeholder="$t('Settings.Distraction Free Settings.Hide Videos and Playlists Containing Text Placeholder')"
         :show-action-button="true"
+        :show-tags="showAddedForbiddenTitles"
         :tag-list="forbiddenTitles"
         :min-input-length="3"
         :tooltip="$t('Tooltips.Distraction Free Settings.Hide Videos and Playlists Containing Text')"
         @change="handleForbiddenTitles"
+        @toggle-show-tags="handleAddedForbiddenTitles"
       />
     </ft-flex-box>
   </ft-settings-section>

src/renderer/components/ft-input-tags/ft-input-tags.css

@@ -38,6 +38,13 @@
   user-select: text;
 }
 
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  accent-color: var(--accent-color);
+}
+
 .tag-icon {
   border-radius: 50%;
   vertical-align: middle;

src/renderer/components/ft-input-tags/ft-input-tags.js

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 import FtInput from '../ft-input/ft-input.vue'
 import { showToast } from '../../helpers/utils'
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default defineComponent({
   name: 'FtInputTags',
@@ -36,6 +37,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    showTags: {
+      type: Boolean,
+      default: true
+    },
     tagList: {
       type: Array,
       default: () => { return [] }
@@ -53,7 +58,12 @@ export default defineComponent({
       default: (_) => ({ preferredName: '', icon: '' }),
     }
   },
-  emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name'],
+  emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name', 'toggle-show-tags'],
+  computed: {
+    sanitizedId: function() {
+      return sanitizeForHtmlId(`checkbox-${this.label}`)
+    },
+  },
   methods: {
     updateTags: async function (text, _e) {
       if (this.areChannelTags) {
@@ -126,6 +136,9 @@ export default defineComponent({
         const newList = this.tagList.filter((tmpTag) => tmpTag.name !== tag.name)
         this.$emit('change', newList)
       }
-    }
+    },
+    toggleShowTags: function () {
+      this.$emit('toggle-show-tags')
+    },
   }
 })

src/renderer/components/ft-input-tags/ft-input-tags.vue

@@ -21,7 +21,24 @@
       :force-action-button-icon-name="['fas', 'arrow-right']"
       @click="updateTags"
     />
-    <div class="ft-tag-box">
+    <div
+      v-if="tagList.length >= 1"
+      class="checkbox-container"
+    >
+      <input
+        :id="sanitizedId"
+        type="checkbox"
+        :checked="showTags"
+        @change="toggleShowTags"
+      >
+      <label :for="sanitizedId">
+        {{ $t('Settings.Distraction Free Settings.Show Added Items') }}
+      </label>
+    </div>
+    <div
+      v-if="showTags"
+      class="ft-tag-box"
+    >
       <ul>
         <li
           v-for="tag in tagList"

src/renderer/store/modules/settings.js

@@ -205,6 +205,8 @@ const state = {
   hideFeaturedChannels: false,
   channelsHidden: '[]',
   forbiddenTitles: '[]',
+  showAddedChannelsHidden: true,
+  showAddedForbiddenTitles: true,
   hideVideoDescription: false,
   hideLiveChat: false,
   hideLiveStreams: false,

static/locales/en-US.yaml

@@ -520,6 +520,7 @@ Settings:
     Hide Subscriptions Shorts: Hide Subscriptions Shorts
     Hide Subscriptions Live: Hide Subscriptions Live
     Hide Subscriptions Community: Hide Subscriptions Community
+    Show Added Items: Show Added Items
   Data Settings:
     Data Settings: Data
     Select Import Type: Select Import Type