feat: totally hide strict filters (#948)

components/conversation/ConversationPaginator.vue

@@ -4,10 +4,16 @@ import type { Paginator, mastodon } from 'masto'
 const { paginator } = defineProps<{
   paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
 }>()
+
+function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {
+  return items.filter(items => !items.lastStatus?.filtered?.find(
+    filter => filter.filter.filterAction === 'hide' && filter.filter.context.includes('thread'),
+  ))
+}
 </script>
 
 <template>
-  <CommonPaginator :paginator="paginator">
+  <CommonPaginator :paginator="paginator" :preprocess="preprocess">
     <template #default="{ item }">
       <ConversationCard
         :conversation="item"

components/notification/NotificationPaginator.vue

@@ -112,6 +112,12 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
   return results
 }
 
+function removeFiltered(items: mastodon.v1.Notification[]): mastodon.v1.Notification[] {
+  return items.filter(item => !item.status?.filtered?.find(
+    filter => filter.filter.filterAction === 'hide' && filter.filter.context.includes('notifications'),
+  ))
+}
+
 function preprocess(items: NotificationSlot[]): NotificationSlot[] {
   const flattenedNotifications: mastodon.v1.Notification[] = []
   for (const item of items) {
@@ -131,7 +137,7 @@ function preprocess(items: NotificationSlot[]): NotificationSlot[] {
       flattenedNotifications.push(item)
     }
   }
-  return groupItems(flattenedNotifications)
+  return groupItems(removeFiltered(flattenedNotifications))
 }
 
 const { clearNotifications } = useNotifications()

components/status/StatusCard.vue

@@ -67,13 +67,6 @@ const createdAt = useFormattedDateTime(status.createdAt)
 const timeAgoOptions = useTimeAgoOptions(true)
 const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
 
-// Content Filter logic
-const filterResult = $computed(() => status.filtered?.length ? status.filtered[0] : null)
-const filter = $computed(() => filterResult?.filter)
-
-const filterPhrase = $computed(() => filter?.title)
-const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false))
-
 const isSelfReply = $computed(() => status.inReplyToAccountId === status.account.id)
 const collapseRebloggedBy = $computed(() => rebloggedBy?.id === status.account.id)
 const isDM = $computed(() => status.visibility === 'direct')
@@ -84,7 +77,6 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
 
 <template>
   <div
-    v-if="filter?.filterAction !== 'hide'"
     :id="`status-${status.id}`"
     ref="el"
     relative flex="~ col gap1" p="l-3 r-4 b-2"
@@ -189,9 +181,4 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
       </div>
     </div>
   </div>
-  <div v-else-if="isFiltered" gap-2 p-4 :class="{ 'border-t border-base': newer }">
-    <p text-center text-secondary text-sm>
-      {{ filterPhrase && `${$t('status.filter_removed_phrase')}: ${filterPhrase}` }}
-    </p>
-  </div>
 </template>

components/status/StatusContent.vue

@@ -27,7 +27,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
     }"
   >
     <StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
-    <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
+    <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered" :is-d-m="isDM">
       <template v-if="filterPhrase" #spoiler>
         <p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
       </template>

components/status/StatusSpoiler.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{ enabled?: boolean; filter?: boolean }>()
+const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean }>()
 
 const showContent = ref(!props.enabled)
 const toggleContent = useToggle(showContent)
@@ -14,8 +14,8 @@ watchEffect(() => {
     <div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
       <slot name="spoiler" />
     </div>
-    <div flex="~ gap-1 center" w-full mt="-4.5">
-      <button btn-text px-2 py-1 bg-base flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
+    <div flex="~ gap-1 center" w-full :mb="isDM && !showContent ? '4' : ''" mt="-4.5">
+      <button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
         <div v-if="showContent" i-ri:eye-line />
         <div v-else i-ri:eye-close-line />
         {{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}

components/timeline/TimelineHome.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import type { mastodon } from 'masto'
+
 const paginator = useMastoClient().v1.timelines.listHome({ limit: 30 })
 const stream = $(useStreaming(client => client.v1.stream.streamUser()))
+const reorderAndFilter = (items: mastodon.v1.Status[]) => reorderedTimeline(items, 'home')
 </script>
 
 <template>
   <div>
     <PublishWidget draft-key="home" border="b base" />
-    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderedTimeline" context="home" />
+    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" />
   </div>
 </template>

components/timeline/TimelinePublic.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { mastodon } from 'masto'
+
 const paginator = useMastoClient().v1.timelines.listPublic({ limit: 30 })
 const stream = useStreaming(client => client.v1.stream.streamPublicTimeline())
+const reorderAndFilter = (items: mastodon.v1.Status[]) => reorderedTimeline(items, 'public')
 </script>
 
 <template>
   <div>
-    <TimelinePaginator v-bind="{ paginator, stream }" context="public" />
+    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
   </div>
 </template>