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>

locales/en-US.json

@@ -149,7 +149,10 @@
     "reblogged": "{0} reblogged",
     "spoiler_show_less": "Show less",
     "spoiler_show_more": "Show more",
-    "try_original_site": "Try original site"
+    "try_original_site": "Try original site",
+    "filter_show_anyway": "Show anyway",
+    "filter_hidden_phrase": "Filtered by",
+    "filter_removed_phrase": "Removed by filter"
   },
   "status_history": {
     "created": "created {0}",

package.json

@@ -59,7 +59,7 @@
     "lint-staged": "^13.0.4",
     "lowlight": "^2.8.0",
     "lru-cache": "^7.14.1",
-    "masto": "^4.7.4",
+    "masto": "^4.7.5",
     "nuxt": "^3.0.0",
     "parse5": "^7.1.2",
     "pinia": "^2.0.27",

pages/@[account]/[status].vue

@@ -52,7 +52,7 @@ onReactivated(() => {
       <div v-if="status" min-h-100vh>
         <template v-if="context">
           <template v-for="comment of context?.ancestors" :key="comment.id">
-            <StatusCard :status="comment" border="t base" py3 />
+            <StatusCard :status="comment" context="account" border="t base" py3 />
           </template>
         </template>
 
@@ -73,7 +73,7 @@ onReactivated(() => {
 
         <template v-if="context">
           <template v-for="comment of context?.descendants" :key="comment.id">
-            <StatusCard :status="comment" border="t base" py3 />
+            <StatusCard :status="comment" context="account" border="t base" py3 />
           </template>
         </template>
 

pages/@[account]/index/index.vue

@@ -46,7 +46,7 @@ const paginator = $computed(() => tabs.find(t => t.name === tab)!.paginator)
   <div>
     <CommonTabs v-model="tab" :options="tabs" command />
     <KeepAlive>
-      <TimelinePaginator :key="tab" :paginator="paginator" />
+      <TimelinePaginator :key="tab" :paginator="paginator" context="account" />
     </KeepAlive>
   </div>
 </template>

pages/explore.vue

@@ -19,7 +19,7 @@ useHeadFixed({
 
     <slot>
       <!-- TODO: Tabs for trending statuses, tags, and links -->
-      <TimelinePaginator :paginator="paginator" />
+      <TimelinePaginator :paginator="paginator" context="public" />
     </slot>
   </MainContent>
 </template>

pages/home.vue

@@ -31,7 +31,7 @@ useHeadFixed({
     </template>
     <slot>
       <PublishWidget draft-key="home" border="b base" />
-      <TimelinePaginator v-bind="{ paginator, stream }" />
+      <TimelinePaginator v-bind="{ paginator, stream }" context="home" />
     </slot>
   </MainContent>
 </template>

pages/public/index.vue

@@ -20,7 +20,7 @@ useHeadFixed({
     </template>
 
     <slot>
-      <TimelinePaginator v-bind="{ paginator, stream }" />
+      <TimelinePaginator v-bind="{ paginator, stream }" context="public" />
     </slot>
   </MainContent>
 </template>

pages/public/local.vue

@@ -20,7 +20,7 @@ useHeadFixed({
     </template>
 
     <slot>
-      <TimelinePaginator v-bind="{ paginator, stream }" />
+      <TimelinePaginator v-bind="{ paginator, stream }" context="public" />
     </slot>
   </MainContent>
 </template>

pages/tags/[tag].vue

@@ -32,7 +32,7 @@ onReactivated(() => {
     </template>
 
     <slot>
-      <TimelinePaginator v-bind="{ paginator, stream }" />
+      <TimelinePaginator v-bind="{ paginator, stream }" context="public" />
     </slot>
   </MainContent>
 </template>

pnpm-lock.yaml

@@ -42,7 +42,7 @@ specifiers:
   lint-staged: ^13.0.4
   lowlight: ^2.8.0
   lru-cache: ^7.14.1
-  masto: ^4.7.4
+  masto: ^4.7.5
   nuxt: ^3.0.0
   parse5: ^7.1.2
   pinia: ^2.0.27
@@ -106,7 +106,7 @@ devDependencies:
   lint-staged: 13.0.4
   lowlight: 2.8.0
   lru-cache: 7.14.1
-  masto: 4.7.4
+  masto: 4.7.5
   nuxt: 3.0.0_s5ps7njkmjlaqajutnox5ntcla
   parse5: 7.1.2
   pinia: 2.0.27_typescript@4.9.3
@@ -5632,8 +5632,8 @@ packages:
       semver: 6.3.0
     dev: true
 
-  /masto/4.7.4:
+  /masto/4.7.5:
-    resolution: {integrity: sha512-iR4tkRnpsLWNsVu/KJXrpK0b3c8uVOlBsE8eca6wKW94sw8Hnw83t94Rx+t27KqDlVK2Vo0Aebz0InkqOCeLVg==}
+    resolution: {integrity: sha512-FRqr5yAAJm6PVCPqxrQt7uIwCft+FmPZgcjvLpzo4kzhgvBPGax70rFiGrULYZ34ehnrbcGOp4J+VcM1FxDU2w==}
     dependencies:
       axios: 1.1.3
       change-case: 4.1.2