Merge branch 'sss-objects' into shigusegubu-themes3

src/components/settings_modal/tabs/filtering_tab.js

@@ -95,22 +95,27 @@ 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: {
     ...mapActions(useServerSideStorageStore, ['setPreference', 'unsetPreference', 'pushServerSideStorage']),
     getDatetimeLocal (timestamp) {
       const date = new Date(timestamp)
+      let fmt = new Intl.NumberFormat("en-US", {minimumIntegerDigits: 2})
       const datetime = [
         date.getFullYear(),
         '-',
-        date.getMonth() < 9 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1),
+        fmt.format(date.getMonth() + 1),
-        '-',
-        date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate(),
         'T',
-        date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours(),
+        fmt.format(date.getHours()),
         ':',
-        date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes(),
+        fmt.format(date.getMinutes())
       ].join('')
       return datetime
     },
@@ -164,6 +169,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

@@ -12,11 +12,14 @@
     margin: 0.5em;
     padding: 0.5em;
     display: grid;
-    grid-template-columns: fit-content 1fr fit-content;
     align-items: baseline;
     grid-gap: 0.5em;
   }
 
+  .never {
+    margin-left: 0.5em;
+  }
+
   .filter-name {
     grid-column: 1 / span 2;
     grid-row: 1;
@@ -63,8 +66,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

@@ -4,8 +4,8 @@
     class="filtering-tab"
   >
     <div class="setting-item">
-      <ul class="setting-list">
       <h2>{{ $t('settings.filter.clutter') }}</h2>
+      <ul class="setting-list">
         <li>
           <ChoiceSetting
             v-if="user"
@@ -17,12 +17,18 @@
           </ChoiceSetting>
         </li>
         <li>
-          <BooleanSetting expert="1" path="hidePostStats">
+          <BooleanSetting
+            expert="1"
+            path="hidePostStats"
+          >
             {{ $t('settings.hide_post_stats') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting expert="1" path="hideUserStats">
+          <BooleanSetting
+            expert="1"
+            path="hideUserStats"
+          >
             {{ $t('settings.hide_user_stats') }}
           </BooleanSetting>
         </li>
@@ -70,8 +76,10 @@
           </BooleanSetting>
         </li>
       </ul>
-      <ul class="setting-list">
+    </div>
+    <div class="setting-item">
       <h2>{{ $t('settings.filter.mute_filter') }}</h2>
+      <ul class="setting-list">
         <li>
           <BooleanSetting path="hideFilteredStatuses">
             {{ $t('settings.hide_muted_statuses') }}
@@ -119,6 +127,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 +168,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
@@ -240,17 +275,11 @@
                     :id="'filterExpiresNever' + filter[0]"
                     :model-value="filter[1].expires === null"
                     :name="'filterExpiresNever' + filter[0]"
-                  class="input-inset input-boolean"
+                    class="input-inset input-boolean never"
                     @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
@@ -292,26 +321,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.",