From 8b298c800f3b95bc3176d2011b2bbe9de6cb92c6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Apr 2025 18:20:37 +0300
Subject: [PATCH] better layout & button to remove all expired filters

---
 .../settings_modal/tabs/filtering_tab.js      |  14 +
 .../settings_modal/tabs/filtering_tab.scss    |  14 +-
 .../settings_modal/tabs/filtering_tab.vue     | 369 +++++++++---------
 src/i18n/en.json                              |   5 +-
 4 files changed, 223 insertions(+), 179 deletions(-)

diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 3345cb0c9..5d621bc67 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -95,6 +95,12 @@ const FilteringTab = {
     ),
     muteFiltersDraft () {
       return Object.entries(this.muteFiltersDraftObject)
+    },
+    muteFiltersExpired () {
+      const now = Date.now()
+      return Object
+        .entries(this.muteFiltersDraftObject)
+        .filter(([, { expires }]) => expires != null && expires <= now)
     }
   },
   methods: {
@@ -164,6 +170,14 @@ const FilteringTab = {
       this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
       this.pushServerSideStorage()
     },
+    purgeExpiredFilters () {
+      this.muteFiltersExpired.forEach(([id]) => {
+        console.log(id)
+        delete this.muteFiltersDraftObject[id]
+        this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
+      })
+      this.pushServerSideStorage()
+    },
     updateFilter(id, field, value) {
       const filter = { ...this.muteFiltersDraftObject[id] }
       if (field === 'expires-never') {
diff --git a/src/components/settings_modal/tabs/filtering_tab.scss b/src/components/settings_modal/tabs/filtering_tab.scss
index 3f3fa3b58..29ec8e280 100644
--- a/src/components/settings_modal/tabs/filtering_tab.scss
+++ b/src/components/settings_modal/tabs/filtering_tab.scss
@@ -63,8 +63,18 @@
     justify-content: end;
   }
 
-  .total {
-    text-align: center;
+  .muteFiltersActions,
+  .muteFiltersActionsBottom {
+    display: grid;
+    align-items: baseline;
+    grid-auto-flow: column;
+    grid-template-columns: 1fr;
+    grid-gap: 0.5em;
+    margin: 0.5em 0;
+
+    .total {
+      flex: 1;
+    }
   }
 }
 
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 968a7a0e7..703a0c65e 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -119,182 +119,11 @@
             {{ $t('settings.mute_sensitive_posts') }}
           </BooleanSetting>
         </li>
-        <div class="muteFilterContainer">
-          <div
-            v-for="filter in muteFiltersDraft"
-            :key="filter[0]"
-            class="mute-filter"
-            :style="{ order: filter[1].order }"
-          >
-            <div class="filter-name">
-              <label
-                :for="'filterName' + filter[0]"
-              >
-                {{ $t('settings.filter.name') }}
-              </label>
-              {{ ' ' }}
-              <input
-                :id="'filterName' + filter[0]"
-                class="input"
-                :value="filter[1].name"
-                @input="updateFilter(filter[0], 'name', $event.target.value)"
-              >
-            </div>
-            <div class="filter-enabled">
-              <Checkbox
-                :id="'filterHide' + filter[0]"
-                :model-value="filter[1].hide"
-                :name="'filterHide' + filter[0]"
-                @update:model-value="updateFilter(filter[0], 'hide', $event)"
-              >
-                {{ $t('settings.filter.hide') }}
-              </Checkbox>
-              {{ ' ' }}
-              <Checkbox
-                :id="'filterEnabled' + filter[0]"
-                :model-value="filter[1].enabled"
-                :name="'filterEnabled' + filter[0]"
-                @update:model-value="updateFilter(filter[0], 'enabled', $event)"
-              >
-                {{ $t('settings.enabled') }}
-              </Checkbox>
-            </div>
-            <div class="filter-type filter-field">
-              <label :for="'filterType' + filter[0]">
-                <HelpIndicator>
-                  <p>
-                    {{ $t('settings.filter.help.word') }}
-                  </p>
-                  <p>
-                    {{ $t('settings.filter.help.user') }}
-                  </p>
-                  <i18n-t
-                    keypath="settings.filter.help.regexp"
-                    tag="p"
-                  >
-                    <template #link>
-                      <a
-                        :href="$t('settings.filter.help.regexp_url')"
-                        target="_blank"
-                      >
-                        {{ $t('settings.filter.help.regexp_link') }}
-                      </a>
-                    </template>
-                  </i18n-t>
-                </HelpIndicator>
-                {{ $t('settings.filter.type') }}
-              </label>
-              <Select
-                :id="'filterType' + filter[0]"
-                class="filter-field-value"
-                :model-value="filter[1].type"
-                @update:model-value="updateFilter(filter[0], 'type', $event)"
-              >
-                <option value="word">
-                  {{ $t('settings.filter.plain') }}
-                </option>
-                <option value="regexp">
-                  {{ $t('settings.filter.regexp') }}
-                </option>
-                <option value="user">
-                  {{ $t('settings.filter.user') }}
-                </option>
-                <option value="user_regexp">
-                  {{ $t('settings.filter.user_regexp') }}
-                </option>
-              </Select>
-            </div>
-            <div class="filter-value filter-field">
-              <label
-                :for="'filterValue' + filter[0]"
-              >
-                {{ $t('settings.filter.value') }}
-              </label>
-              {{ ' ' }}
-              <input
-                :id="'filterValue' + filter[0]"
-                class="input filter-field-value"
-                :value="filter[1].value"
-                @input="updateFilter(filter[0], 'value', $event.target.value)"
-              >
-            </div>
-            <div class="filter-expires filter-field">
-              <label
-                :for="'filterExpires' + filter[0]"
-              >
-                {{ $t('settings.filter.expires') }}
-              </label>
-              {{ ' ' }}
-              <div class="filter-field-value">
-                <input
-                  :id="'filterExpires' + filter[0]"
-                  class="input"
-                  :class="{ disabled: filter[1].expires === null }"
-                  type="datetime-local"
-                  :disabled="filter[1].expires === null"
-                  :value="filter[1].expires ? getDatetimeLocal(filter[1].expires) : null"
-                  @input="updateFilter(filter[0], 'expires', $event.target.value)"
-                >
-                {{ ' ' }}
-                <Checkbox
-                  :id="'filterExpiresNever' + filter[0]"
-                  :model-value="filter[1].expires === null"
-                  :name="'filterExpiresNever' + filter[0]"
-                  class="input-inset input-boolean"
-                  @update:model-value="updateFilter(filter[0], 'expires-never', $event)"
-                >
-                  {{ $t('settings.filter.never_expires') }}
-                </Checkbox>
-                <span
-                  v-if="filter[1].expires !== null && Date.now() > filter[1].expires"
-                  class="alert neutral"
-                >
-                  {{ $t('settings.filter.expired') }}
-                </span>
-              </div>
-            </div>
-            <div
-              v-if="!checkRegexValid(filter[0])"
-              class="alert error"
-            >
-              {{ $t('settings.filter.regexp_error') }}
-            </div>
-            <div class="filter-buttons">
-              <button
-                class="delete-button button-default -danger"
-                type="button"
-                @click="deleteFilter(filter[0])"
-              >
-                {{ $t('settings.filter.delete') }}
-              </button>
-              <button
-                class="export-button button-default"
-                type="button"
-                @click="exportFilter(filter[0])"
-              >
-                {{ $t('settings.filter.export') }}
-              </button>
-              <button
-                class="copy-button button-default"
-                type="button"
-                @click="copyFilter(filter[0])"
-              >
-                {{ $t('settings.filter.copy') }}
-              </button>
-              <button
-                class="save-button button-default"
-                :class="{ disabled: !muteFiltersDraftDirty[filter[0]] }"
-                :disabled="!muteFiltersDraftDirty[filter[0]]"
-                type="button"
-                @click="saveFilter(filter[0])"
-              >
-                {{ $t('settings.filter.save') }}
-              </button>
-            </div>
-          </div>
-          <div class="mute-filter new-filter">
+        <li>
+          <h3>{{ $t('settings.filter.custom_filters') }}</h3>
+          <p class="muteFiltersActions">
             <span class="total">
-              {{ $t('settings.filter.count', { count: muteFiltersDraft.length }) }}
+              {{ $t('settings.filter.total_count', { count: muteFiltersDraft.length }) }}
             </span>
             <button
               class="add-button button-default"
@@ -310,8 +139,196 @@
             >
               {{ $t('settings.filter.import') }}
             </button>
+          </p>
+          <div class="muteFilterContainer">
+            <div
+              v-for="filter in muteFiltersDraft"
+              :key="filter[0]"
+              class="mute-filter"
+              :style="{ order: filter[1].order }"
+            >
+              <div class="filter-name">
+                <label
+                  :for="'filterName' + filter[0]"
+                >
+                  {{ $t('settings.filter.name') }}
+                </label>
+                {{ ' ' }}
+                <input
+                  :id="'filterName' + filter[0]"
+                  class="input"
+                  :value="filter[1].name"
+                  @input="updateFilter(filter[0], 'name', $event.target.value)"
+                >
+                <span
+                  v-if="filter[1].expires !== null && Date.now() > filter[1].expires"
+                  class="alert neutral"
+                >
+                  {{ $t('settings.filter.expired') }}
+                </span>
+              </div>
+              <div class="filter-enabled">
+                <Checkbox
+                  :id="'filterHide' + filter[0]"
+                  :model-value="filter[1].hide"
+                  :name="'filterHide' + filter[0]"
+                  @update:model-value="updateFilter(filter[0], 'hide', $event)"
+                >
+                  {{ $t('settings.filter.hide') }}
+                </Checkbox>
+                {{ ' ' }}
+                <Checkbox
+                  :id="'filterEnabled' + filter[0]"
+                  :model-value="filter[1].enabled"
+                  :name="'filterEnabled' + filter[0]"
+                  @update:model-value="updateFilter(filter[0], 'enabled', $event)"
+                >
+                  {{ $t('settings.enabled') }}
+                </Checkbox>
+              </div>
+              <div class="filter-type filter-field">
+                <label :for="'filterType' + filter[0]">
+                  <HelpIndicator>
+                    <p>
+                      {{ $t('settings.filter.help.word') }}
+                    </p>
+                    <p>
+                      {{ $t('settings.filter.help.user') }}
+                    </p>
+                    <i18n-t
+                      keypath="settings.filter.help.regexp"
+                      tag="p"
+                    >
+                      <template #link>
+                        <a
+                          :href="$t('settings.filter.help.regexp_url')"
+                          target="_blank"
+                        >
+                          {{ $t('settings.filter.help.regexp_link') }}
+                        </a>
+                      </template>
+                    </i18n-t>
+                  </HelpIndicator>
+                  {{ $t('settings.filter.type') }}
+                </label>
+                <Select
+                  :id="'filterType' + filter[0]"
+                  class="filter-field-value"
+                  :model-value="filter[1].type"
+                  @update:model-value="updateFilter(filter[0], 'type', $event)"
+                >
+                  <option value="word">
+                    {{ $t('settings.filter.plain') }}
+                  </option>
+                  <option value="regexp">
+                    {{ $t('settings.filter.regexp') }}
+                  </option>
+                  <option value="user">
+                    {{ $t('settings.filter.user') }}
+                  </option>
+                  <option value="user_regexp">
+                    {{ $t('settings.filter.user_regexp') }}
+                  </option>
+                </Select>
+              </div>
+              <div class="filter-value filter-field">
+                <label
+                  :for="'filterValue' + filter[0]"
+                >
+                  {{ $t('settings.filter.value') }}
+                </label>
+                {{ ' ' }}
+                <input
+                  :id="'filterValue' + filter[0]"
+                  class="input filter-field-value"
+                  :value="filter[1].value"
+                  @input="updateFilter(filter[0], 'value', $event.target.value)"
+                >
+              </div>
+              <div class="filter-expires filter-field">
+                <label
+                  :for="'filterExpires' + filter[0]"
+                >
+                  {{ $t('settings.filter.expires') }}
+                </label>
+                {{ ' ' }}
+                <div class="filter-field-value">
+                  <input
+                    :id="'filterExpires' + filter[0]"
+                    class="input"
+                    :class="{ disabled: filter[1].expires === null }"
+                    type="datetime-local"
+                    :disabled="filter[1].expires === null"
+                    :value="filter[1].expires ? getDatetimeLocal(filter[1].expires) : null"
+                    @input="updateFilter(filter[0], 'expires', $event.target.value)"
+                  >
+                  {{ ' ' }}
+                  <Checkbox
+                    :id="'filterExpiresNever' + filter[0]"
+                    :model-value="filter[1].expires === null"
+                    :name="'filterExpiresNever' + filter[0]"
+                    class="input-inset input-boolean"
+                    @update:model-value="updateFilter(filter[0], 'expires-never', $event)"
+                  >
+                    {{ $t('settings.filter.never_expires') }}
+                  </Checkbox>
+                </div>
+              </div>
+              <div
+                v-if="!checkRegexValid(filter[0])"
+                class="alert error"
+              >
+                {{ $t('settings.filter.regexp_error') }}
+              </div>
+              <div class="filter-buttons">
+                <button
+                  class="delete-button button-default -danger"
+                  type="button"
+                  @click="deleteFilter(filter[0])"
+                >
+                  {{ $t('settings.filter.delete') }}
+                </button>
+                <button
+                  class="export-button button-default"
+                  type="button"
+                  @click="exportFilter(filter[0])"
+                >
+                  {{ $t('settings.filter.export') }}
+                </button>
+                <button
+                  class="copy-button button-default"
+                  type="button"
+                  @click="copyFilter(filter[0])"
+                >
+                  {{ $t('settings.filter.copy') }}
+                </button>
+                <button
+                  class="save-button button-default"
+                  :class="{ disabled: !muteFiltersDraftDirty[filter[0]] }"
+                  :disabled="!muteFiltersDraftDirty[filter[0]]"
+                  type="button"
+                  @click="saveFilter(filter[0])"
+                >
+                  {{ $t('settings.filter.save') }}
+                </button>
+              </div>
+            </div>
           </div>
-        </div>
+          <p class="muteFiltersActionsBottom">
+            <span class="total">
+              {{ $t('settings.filter.expired_count', { count: muteFiltersExpired.length }) }}
+            </span>
+            <button
+              class="add-button button-default"
+              type="button"
+              :class="{ disabled: muteFiltersExpired.length === 0 }"
+              :disabled="muteFiltersExpired.length === 0"
+              @click="purgeExpiredFilters()"
+            >
+              {{ $t('settings.filter.purge_expired') }}
+            </button>
+          </p>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f5f451467..01de88223 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -432,7 +432,10 @@
       "export": "Export",
       "regexp_error": "Invalid Regular Expression",
       "never_expires": "Never",
-      "count": "{count} filter|{count} filters",
+      "total_count": "Total {count} custom filter|Total {count} custom filters",
+      "expired_count": "{count} expired filter|{count} expired filters",
+      "custom_filters": "Custom filters",
+      "purge_expired": "Remove expired filters",
       "import_failure": "The selected file is not a supported Pleroma filter.",
       "help": {
         "word": "Simple and RegExp filters test against post's content and subject.",