feat: content filters (#279)

components/notification/NotificationCard.vue

@@ -31,7 +31,7 @@ const { notification } = defineProps<{
         <AccountInlineInfo :account="notification.account" mr1 />
         {{ $t('notification.favourited_post') }}
       </div>
-      <StatusCard :status="notification.status!" p3 />
+      <StatusCard :status="notification.status!" context="notifications" p3 />
     </template>
     <template v-else-if="notification.type === 'reblog'">
       <div flex ml-4 items-center>
@@ -39,7 +39,7 @@ const { notification } = defineProps<{
         <AccountInlineInfo :account="notification.account" mr1 />
         {{ $t('notification.reblogged_post') }}
       </div>
-      <StatusCard :status="notification.status!" p3 />
+      <StatusCard :status="notification.status!" context="notifications" p3 />
     </template>
     <template v-else-if="notification.type === 'update'">
       <div flex ml-4 items-center>
@@ -47,10 +47,10 @@ const { notification } = defineProps<{
         <AccountInlineInfo :account="notification.account" mr1 />
         {{ $t('notification.update_status') }}
       </div>
-      <StatusCard :status="notification.status!" p3 />
+      <StatusCard :status="notification.status!" context="notifications" p3 />
     </template>
     <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
-      <StatusCard :status="notification.status!" p3 />
+      <StatusCard :status="notification.status!" context="notifications" p3 />
     </template>
     <template v-else>
       <div text-red font-bold>

components/status/StatusCard.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import type { Status } from 'masto'
+import type { Filter, FilterAction, FilterContext, Status } from 'masto'
 
 const props = withDefaults(
   defineProps<{
     status: Status
     actions?: boolean
+    context?: FilterContext
     hover?: boolean
   }>(),
   { actions: true },
@@ -43,10 +44,19 @@ function go(evt: MouseEvent | KeyboardEvent) {
 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)
+
+// a bit of a hack due to Filter being different in v1 and v2
+// clean up when masto.js supports explicit versions: https://github.com/neet/masto.js/issues/722
+const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title)
+const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.context.includes(props.context) : false))
 </script>
 
 <template>
-  <div :id="`status-${status.id}`" ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
+  <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
     <div v-if="rebloggedBy" pl8>
       <div flex="~ wrap" gap-1 items-center text-secondary text-sm>
         <div i-ri:repeat-fill mr-1 />
@@ -83,9 +93,9 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
         </div>
         <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
         <div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''">
-          <StatusSpoiler :enabled="status.sensitive">
+          <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="filter?.filterAction">
             <template #spoiler>
-              <p>{{ status.spoilerText }}</p>
+              <p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>
             </template>
             <StatusBody :status="status" />
             <StatusPoll v-if="status.poll" :poll="status.poll" />
@@ -105,4 +115,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
       </div>
     </div>
   </div>
+  <div v-else-if="isFiltered" gap-2 px-4>
+    <p>{{ filterPhrase && `${$t('status.filter_removed_phrase')}: ${filterPhrase}` }}</p>
+  </div>
 </template>

components/status/StatusSpoiler.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{ enabled: boolean }>()
+const props = defineProps<{ enabled: boolean; filter: boolean }>()
 
 const showContent = ref(!props.enabled)
 const toggleContent = useToggle(showContent)
@@ -19,7 +19,7 @@ watchEffect(() => {
       <button btn-text px-2 py-1 text-3 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('status.spoiler_show_more') }}
+        {{ showContent ? $t('status.spoiler_show_less') : $t(props.filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}
       </button>
       <div border="t base" flex-auto h-1px />
     </div>

components/timeline/TimelinePaginator.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 // @ts-expect-error missing types
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
-import type { Paginator, Status, WsEvents } from 'masto'
+import type { FilterContext, Paginator, Status, WsEvents } from 'masto'
 
 const { paginator, stream } = defineProps<{
   paginator: Paginator<any, Status[]>
   stream?: WsEvents
+  context?: FilterContext
 }>()
 
 const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirtualScroll))
@@ -21,11 +22,11 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
     <template #default="{ item, active }">
       <template v-if="virtualScroller">
         <DynamicScrollerItem :item="item" :active="active" tag="article">
-          <StatusCard :status="item" border="b base" py-3 />
+          <StatusCard :status="item" border="b base" :context="context" py-3 />
         </DynamicScrollerItem>
       </template>
       <template v-else>
-        <StatusCard :status="item" border="b base" py-3 />
+        <StatusCard :status="item" border="b base" :context="context" py-3 />
       </template>
     </template>
     <template #loading>