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

feat: simplify notifications (#1905)

Browse source
This commit is contained in:
Anthony Fu 2023-03-19 21:55:19 +01:00 • committed by GitHub
parent a25376b60d
commit 5dd3f4bfa3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 113 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/notification/NotificationCard.vue
View file

@ -47,28 +47,8 @@ const { notification } = defineProps<{
<!-- TODO: accept request -->
<AccountCard :account="notification.account" />
</template>
<template v-else-if="notification.type === 'favourite'">
<StatusCard :status="notification.status!" :faded="true">
<template #meta>
<div flex="~" gap-1 items-center mt1>
<div i-ri:heart-fill text-xl me-1 color-red />
<AccountInlineInfo text-primary font-bold :account="notification.account" me1 />
</div>
</template>
</StatusCard>
</template>
<template v-else-if="notification.type === 'reblog'">
<StatusCard :status="notification.status!" :faded="true">
<template #meta>
<div flex="~" gap-1 items-center mt1>
<div i-ri:repeat-fill text-xl me-1 color-green />
<AccountInlineInfo text-primary font-bold :account="notification.account" me1 />
</div>
</template>
</StatusCard>
</template>
<template v-else-if="notification.type === 'update'">
<StatusCard :status="notification.status!" :faded="true">
<StatusCard :status="notification.status!" :in-notification="true" :actions="false">
<template #meta>
<div flex="~" gap-1 items-center mt1>
<div i-ri:edit-2-fill text-xl me-1 text-secondary />
@ -84,6 +64,7 @@ const { notification } = defineProps<{
<StatusCard :status="notification.status!" />
</template>
<template v-else>
<!-- type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes -->
<div text-red font-bold>
[DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}'
</div>

57
components/notification/NotificationGroupedLikes.vue
View file

@ -4,21 +4,58 @@ import type { GroupedLikeNotifications } from '~/types'
const { group } = defineProps<{
group: GroupedLikeNotifications
}>()
const reblogs = $computed(() => group.likes.filter(i => i.reblog))
const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
</script>
<template>
<article flex flex-col relative>
<StatusCard :status="group.status!" :faded="true">
<template #meta>
<div flex flex-col gap-1 mt-1>
<div v-for="like of group.likes" :key="like.account.id" flex>
<div v-if="like.reblog" i-ri:repeat-fill text-xl me-2 color-green />
<div v-if="like.favourite && !like.reblog" i-ri:heart-fill text-xl me-2 color-red />
<AccountInlineInfo text-primary font-bold :account="like.account" me2 />
<div v-if="like.favourite && like.reblog" i-ri:heart-fill text-xl me-2 color-red />
<StatusLink :status="group.status!" pb2 pt3>
<div flex flex-col gap-2>
<div v-if="reblogs.length" flex="~ gap-1">
<div i-ri:repeat-fill text-xl me-1 color-green />
<template v-for="i, idx of reblogs" :key="idx">
<AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)">
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
</NuxtLink>
</AccountHoverWrapper>
</template>
<div ml1>
{{ $t('notification.reblogged_post') }}
</div>
</div>
</template>
</StatusCard>
<div v-if="likes.length" flex="~ gap-1">
<div i-ri:heart-fill text-xl me-1 color-red />
<template v-for="i, idx of likes" :key="idx">
<AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)">
<AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
</NuxtLink>
</AccountHoverWrapper>
</template>
<div ml1>
{{ $t('notification.favourited_post') }}
</div>
</div>
</div>
<div pl8 mt-1>
<StatusBody :status="group.status!" text-secondary />
<!-- When no text content is presented, we show media instead -->
<template v-if="!group.status!.content">
<StatusMedia
v-if="group.status!.mediaAttachments?.length"
:status="group.status!"
:is-preview="false"
pointer-events-none
/>
<StatusPoll
v-else-if="group.status!.poll"
:status="group.status!"
/>
</template>
</div>
</StatusLink>
</article>
</template>

6
components/notification/NotificationPaginator.vue
View file

@ -75,9 +75,7 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
}
return
}
const { status } = group[0]
if (status && group.length > 1 && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
else if (group.length && group[0].status && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
// All notifications in these group are reblogs or favourites of the same status
const likes: GroupedAccountLike[] = []
for (const notification of group) {
@ -96,7 +94,7 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
results.push({
id: `grouped-${id++}`,
type: 'grouped-reblogs-and-favourites',
status,
status: group[0].status,
likes,
})
return