better layout & button to remove all expired filters

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') {

src/components/settings_modal/tabs/filtering_tab.scss

@@ -63,8 +63,18 @@
     justify-content: end;
   }
 
+  .muteFiltersActions,
+  .muteFiltersActionsBottom {
+    display: grid;
+    align-items: baseline;
+    grid-auto-flow: column;
+    grid-template-columns: 1fr;
+    grid-gap: 0.5em;
+    margin: 0.5em 0;
+
     .total {
-    text-align: center;
+      flex: 1;
+    }
   }
 }
 

src/components/settings_modal/tabs/filtering_tab.vue

@@ -119,6 +119,27 @@
             {{ $t('settings.mute_sensitive_posts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <h3>{{ $t('settings.filter.custom_filters') }}</h3>
+          <p class="muteFiltersActions">
+            <span class="total">
+              {{ $t('settings.filter.total_count', { count: muteFiltersDraft.length }) }}
+            </span>
+            <button
+              class="add-button button-default"
+              type="button"
+              @click="createFilter()"
+            >
+              {{ $t('settings.filter.new') }}
+            </button>
+            <button
+              class="add-button button-default"
+              type="button"
+              @click="importFilter()"
+            >
+              {{ $t('settings.filter.import') }}
+            </button>
+          </p>
           <div class="muteFilterContainer">
             <div
               v-for="filter in muteFiltersDraft"
@@ -139,6 +160,12 @@
                   :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
@@ -245,12 +272,6 @@
                   >
                     {{ $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
@@ -292,26 +313,22 @@
                 </button>
               </div>
             </div>
-          <div class="mute-filter new-filter">
+          </div>
+          <p class="muteFiltersActionsBottom">
             <span class="total">
-              {{ $t('settings.filter.count', { count: muteFiltersDraft.length }) }}
+              {{ $t('settings.filter.expired_count', { count: muteFiltersExpired.length }) }}
             </span>
             <button
               class="add-button button-default"
               type="button"
-              @click="createFilter()"
+              :class="{ disabled: muteFiltersExpired.length === 0 }"
+              :disabled="muteFiltersExpired.length === 0"
+              @click="purgeExpiredFilters()"
             >
-              {{ $t('settings.filter.new') }}
+              {{ $t('settings.filter.purge_expired') }}
             </button>
-            <button
+          </p>
-              class="add-button button-default"
+        </li>
-              type="button"
-              @click="importFilter()"
-            >
-              {{ $t('settings.filter.import') }}
-            </button>
-          </div>
-        </div>
       </ul>
     </div>
   </div>

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.",