zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: content filters (#279)

zio/stable
Ayo Ayco 2022-12-04 20:28:26 +01:00 committed by GitHub
parent 337d2a8b43
commit 4f8f2ed1f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/notification/NotificationCard.vue
View File

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

21
components/status/StatusCard.vue
View File

@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Status } from 'masto' import type { Filter, FilterAction, FilterContext, Status } from 'masto'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
status: Status status: Status
actions?: boolean actions?: boolean
context?: FilterContext
hover?: boolean hover?: boolean
}>(), }>(),
{ actions: true }, { actions: true },
@ -43,10 +44,19 @@ function go(evt: MouseEvent | KeyboardEvent) {
const createdAt = useFormattedDateTime(status.createdAt) const createdAt = useFormattedDateTime(status.createdAt)
const timeAgoOptions = useTimeAgoOptions(true) const timeAgoOptions = useTimeAgoOptions(true)
const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions) 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> </script>
<template> <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 v-if="rebloggedBy" pl8>
<div flex="~ wrap" gap-1 items-center text-secondary text-sm> <div flex="~ wrap" gap-1 items-center text-secondary text-sm>
<div i-ri:repeat-fill mr-1 /> <div i-ri:repeat-fill mr-1 />
@ -83,9 +93,9 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div> </div>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
<div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''"> <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> <template #spoiler>
<p>{{ status.spoilerText }}</p> <p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>
</template> </template>
<StatusBody :status="status" /> <StatusBody :status="status" />
<StatusPoll v-if="status.poll" :poll="status.poll" /> <StatusPoll v-if="status.poll" :poll="status.poll" />
@ -105,4 +115,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="isFiltered" gap-2 px-4>
<p>{{ filterPhrase && `${$t('status.filter_removed_phrase')}: ${filterPhrase}` }}</p>
</div>
</template> </template>

4
components/status/StatusSpoiler.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ enabled: boolean }>() const props = defineProps<{ enabled: boolean; filter: boolean }>()
const showContent = ref(!props.enabled) const showContent = ref(!props.enabled)
const toggleContent = useToggle(showContent) 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()"> <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-if="showContent" i-ri:eye-line />
<div v-else i-ri:eye-close-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> </button>
<div border="t base" flex-auto h-1px /> <div border="t base" flex-auto h-1px />
</div> </div>

7
components/timeline/TimelinePaginator.vue
View File

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

5
locales/en-US.json
View File

@ -149,7 +149,10 @@
"reblogged": "{0} reblogged", "reblogged": "{0} reblogged",
"spoiler_show_less": "Show less", "spoiler_show_less": "Show less",
"spoiler_show_more": "Show more", "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": { "status_history": {
"created": "created {0}", "created": "created {0}",

2
package.json
View File

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

4
pages/@[account]/[status].vue
View File

@ -52,7 +52,7 @@ onReactivated(() => {
<div v-if="status" min-h-100vh> <div v-if="status" min-h-100vh>
<template v-if="context"> <template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id"> <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>
</template> </template>
@ -73,7 +73,7 @@ onReactivated(() => {
<template v-if="context"> <template v-if="context">
<template v-for="comment of context?.descendants" :key="comment.id"> <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>
</template> </template>

2
pages/@[account]/index/index.vue
View File

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

2
pages/explore.vue
View File

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

2
pages/home.vue
View File

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

2
pages/public/index.vue
View File

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

2
pages/public/local.vue
View File

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

2
pages/tags/[tag].vue
View File

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

8
pnpm-lock.yaml
View File

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