From a1ed45593ce921a2c97af544c508feca15a49ec8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 3 Apr 2025 01:43:29 +0300
Subject: [PATCH] cleanup + help

---
 .../settings_modal/helpers/help_indicator.vue |  46 ++++
 .../settings_modal/tabs/filtering_tab.js      |   4 +-
 .../settings_modal/tabs/filtering_tab.vue     | 228 ++++++++++--------
 src/i18n/en.json                              |  11 +-
 4 files changed, 183 insertions(+), 106 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/help_indicator.vue

diff --git a/src/components/settings_modal/helpers/help_indicator.vue b/src/components/settings_modal/helpers/help_indicator.vue
new file mode 100644
index 000000000..c48f97b70
--- /dev/null
+++ b/src/components/settings_modal/helpers/help_indicator.vue
@@ -0,0 +1,46 @@
+<template>
+  <span class="HelpIndicator">
+    <Popover
+      trigger="click"
+      :trigger-attrs="{ 'aria-label': $t('settings.setting_changed') }"
+    >
+      <template #trigger>
+        &nbsp;
+        <FAIcon icon="circle-question" />
+      </template>
+      <template #content>
+        <div class="help-tooltip">
+          <slot />
+        </div>
+      </template>
+    </Popover>
+  </span>
+</template>
+
+<script>
+import Popover from 'src/components/popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleQuestion
+)
+
+export default {
+  components: { Popover }
+}
+</script>
+
+<style lang="scss">
+.HelpIndicator {
+  display: inline-block;
+  position: relative;
+}
+
+.help-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  max-width: 30vw;
+  text-align: center;
+}
+</style>
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 495ea7e29..34ade4dfc 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -7,6 +7,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import UnitSetting from '../helpers/unit_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
+import HelpIndicator from '../helpers/help_indicator.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
@@ -35,7 +36,8 @@ const FilteringTab = {
     UnitSetting,
     IntegerSetting,
     Checkbox,
-    Select
+    Select,
+    HelpIndicator
   },
   computed: {
     ...SharedComputedObject(),
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 052e17256..f7754090b 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -4,74 +4,122 @@
     class="filtering-tab"
   >
     <div class="setting-item">
-      <h2>{{ $t('settings.posts') }}</h2>
       <ul class="setting-list">
+        <h2>{{ $t('settings.filter.clutter') }}</h2>
         <li>
-          <BooleanSetting path="hideFilteredStatuses">
-            {{ $t('settings.hide_filtered_statuses') }}
-          </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                parent-path="hideFilteredStatuses"
-                :parent-invert="true"
-                path="hideWordFilteredPosts"
-              >
-                {{ $t('settings.hide_wordfiltered_statuses') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting
-                v-if="user"
-                parent-path="hideFilteredStatuses"
-                :parent-invert="true"
-                path="hideMutedThreads"
-              >
-                {{ $t('settings.hide_muted_threads') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting
-                v-if="user"
-                parent-path="hideFilteredStatuses"
-                :parent-invert="true"
-                path="hideMutedPosts"
-              >
-                {{ $t('settings.hide_muted_posts') }}
-              </BooleanSetting>
-            </li>
-          </ul>
+          <ChoiceSetting
+            v-if="user"
+            id="replyVisibility"
+            path="replyVisibility"
+            :options="replyVisibilityOptions"
+          >
+            {{ $t('settings.replies_in_timeline') }}
+          </ChoiceSetting>
         </li>
         <li>
-          <BooleanSetting path="muteBotStatuses">
-            {{ $t('settings.mute_bot_posts') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="muteSensitiveStatuses">
-            {{ $t('settings.mute_sensitive_posts') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="hidePostStats">
+          <BooleanSetting expert="1" path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting expert="1" path="hideUserStats">
+            {{ $t('settings.hide_user_stats') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="hideBotIndication">
             {{ $t('settings.hide_actor_type_indication') }}
           </BooleanSetting>
         </li>
-        <ChoiceSetting
-          v-if="user"
-          id="replyVisibility"
-          path="replyVisibility"
-          :options="replyVisibilityOptions"
-        >
-          {{ $t('settings.replies_in_timeline') }}
-        </ChoiceSetting>
         <li>
-          <h3>{{ $t('settings.filter.mute_filter') }}</h3>
+          <BooleanSetting path="hideScrobbles">
+            {{ $t('settings.hide_scrobbles') }}
+          </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <UnitSetting
+                key="hideScrobblesAfter"
+                path="hideScrobblesAfter"
+                :units="['m', 'h', 'd']"
+                unit-set="time"
+                expert="1"
+              >
+                {{ $t('settings.hide_scrobbles_after') }}
+              </UnitSetting>
+            </li>
+          </ul>
+        </li>
+        <h3>{{ $t('settings.attachments') }}</h3>
+        <li>
+          <IntegerSetting
+            path="maxThumbnails"
+            expert="1"
+            :min="0"
+          >
+            {{ $t('settings.max_thumbnails') }}
+          </IntegerSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachments">
+            {{ $t('settings.hide_attachments_in_tl') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideAttachmentsInConv">
+            {{ $t('settings.hide_attachments_in_convo') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+      <ul class="setting-list">
+        <h2>{{ $t('settings.filter.mute_filter') }}</h2>
+        <li>
+          <li>
+            <BooleanSetting path="hideFilteredStatuses">
+              {{ $t('settings.hide_muted_statuses') }}
+            </BooleanSetting>
+            <ul class="setting-list suboptions">
+              <li>
+                <BooleanSetting
+                  parent-path="hideFilteredStatuses"
+                  :parent-invert="true"
+                  path="hideWordFilteredPosts"
+                  expert="1"
+                >
+                  {{ $t('settings.hide_filtered_statuses') }}
+                </BooleanSetting>
+              </li>
+              <li>
+                <BooleanSetting
+                  v-if="user"
+                  parent-path="hideFilteredStatuses"
+                  :parent-invert="true"
+                  path="hideMutedThreads"
+                >
+                  {{ $t('settings.hide_muted_threads') }}
+                </BooleanSetting>
+              </li>
+              <li>
+                <BooleanSetting
+                  v-if="user"
+                  parent-path="hideFilteredStatuses"
+                  :parent-invert="true"
+                  path="hideMutedPosts"
+                >
+                  {{ $t('settings.hide_muted_posts') }}
+                </BooleanSetting>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <BooleanSetting path="muteBotStatuses">
+              {{ $t('settings.mute_bot_posts') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting path="muteSensitiveStatuses">
+              {{ $t('settings.mute_sensitive_posts') }}
+            </BooleanSetting>
+          </li>
           <div class="muteFilterContainer">
             <div
               v-for="filter in muteFiltersDraft"
@@ -114,6 +162,27 @@
               </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
@@ -230,55 +299,6 @@
             </div>
           </div>
         </li>
-        <h3>{{ $t('settings.attachments') }}</h3>
-        <li>
-          <IntegerSetting
-            path="maxThumbnails"
-            expert="1"
-            :min="0"
-          >
-            {{ $t('settings.max_thumbnails') }}
-          </IntegerSetting>
-        </li>
-        <li>
-          <BooleanSetting path="hideAttachments">
-            {{ $t('settings.hide_attachments_in_tl') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="hideAttachmentsInConv">
-            {{ $t('settings.hide_attachments_in_convo') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="hideScrobbles">
-            {{ $t('settings.hide_scrobbles') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <UnitSetting
-            key="hideScrobblesAfter"
-            path="hideScrobblesAfter"
-            :units="['m', 'h', 'd']"
-            unit-set="time"
-            expert="1"
-          >
-            {{ $t('settings.hide_scrobbles_after') }}
-          </UnitSetting>
-        </li>
-      </ul>
-    </div>
-    <div
-      v-if="expertLevel > 0"
-      class="setting-item"
-    >
-      <h2>{{ $t('settings.user_profiles') }}</h2>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="hideUserStats">
-            {{ $t('settings.hide_user_stats') }}
-          </BooleanSetting>
-        </li>
       </ul>
     </div>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 37f52a89f..0ea770c40 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -412,6 +412,7 @@
     "scale_and_layout": "Interface scale and layout",
     "enabled": "Enabled",
     "filter": {
+      "clutter": "Remove clutter",
       "mute_filter": "Mute Filters",
       "type": "Filter type",
       "regexp": "RegExp",
@@ -428,7 +429,14 @@
       "delete": "Remove filter",
       "new": "Create filter",
       "regexp_error": "Invalid Regular Expression",
-      "never_expires": "Never"
+      "never_expires": "Never",
+      "help": {
+        "word": "Simple and RegExp filters test against post's content and subject.",
+        "user": "User filter matches full user handle (user@domain) in the following: author, reply-to and mentions",
+        "regexp": "Regex variants are more advanced and use {link} to match instead of simple substring search.",
+        "regexp_link": "Regular Expressions",
+        "regexp_url": "https://en.wikipedia.org/wiki/Regular_expression"
+      }
     },
     "mfa": {
       "otp": "OTP",
@@ -595,6 +603,7 @@
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
     "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
     "hide_filtered_statuses": "Hide all filtered posts",
+    "hide_muted_statuses": "Completely hide all muted posts",
     "hide_wordfiltered_statuses": "Hide word-filtered statuses",
     "hide_muted_threads": "Hide muted threads",
     "import_blocks_from_a_csv_file": "Import blocks from a csv file",