versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Rewrite timeline rendering code

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-28 17:05:50 -10:00
parent 091615b04e
commit d6f36eaecf
No known key found for this signature in database
24 changed files with 392 additions and 435 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/social-elements/notifications/notif.vue
View file

@ -1,22 +1,20 @@
<template>
<div class="flex flex-col p-1 bg-dark-400">
<div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
<Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
width-unit="%">
<Skeleton :enabled="!element" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
<Avatar v-if="notification?.account?.avatar" :src="notification?.account.avatar"
:alt="`${notification?.account.acct}'s avatar'`"
class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
<Avatar v-if="element?.account?.avatar" :src="element?.account.avatar"
:alt="`${element?.account.acct}'s avatar'`" class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />
<span class="text-gray-200 line-clamp-1"><strong v-html="display_name"></strong> {{ text
}}</span>
</Skeleton>
</div>
<div>
<Note v-if="notification?.status || !notification" :note="notification?.status" :small="true" />
<div v-else-if="notification.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
<SmallCard :account="notification.account" />
<Note v-if="element?.status || !element" :element="element?.status" :small="true" />
<div v-else-if="element.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
<SmallCard :account="element.account" />
</div>
<div v-if="notification?.type === 'follow_request' && relationship?.requested_by"
<div v-if="element?.type === 'follow_request' && relationship?.requested_by"
class="w-full grid grid-cols-2 gap-4 p-2 ">
<Button theme="primary" :loading="isWorkingOnFollowRequest"
@click="acceptFollowRequest"><span>Accept</span>
@ -38,52 +36,49 @@ import Note from "../notes/note.vue";
import SmallCard from "../users/SmallCard.vue";
const props = defineProps<{
notification?: Notification;
element?: Notification;
}>();
const client = useClient();
const isWorkingOnFollowRequest = ref(false);
const { relationship } = useRelationship(
client,
props.notification?.account?.id ?? null,
props.element?.account?.id ?? null,
);
const acceptFollowRequest = async () => {
if (!props.notification?.account) {
if (!props.element?.account) {
return;
}
isWorkingOnFollowRequest.value = true;
const { data } = await client.value.acceptFollowRequest(
props.notification.account.id,
props.element.account.id,
);
relationship.value = data;
isWorkingOnFollowRequest.value = false;
};
const rejectFollowRequest = async () => {
if (!props.notification?.account) {
if (!props.element?.account) {
return;
}
isWorkingOnFollowRequest.value = true;
const { data } = await client.value.rejectFollowRequest(
props.notification.account.id,
props.element.account.id,
);
relationship.value = data;
isWorkingOnFollowRequest.value = false;
};
const settings = useSettings();
const { display_name } = useParsedAccount(
props.notification?.account,
settings,
);
const { display_name } = useParsedAccount(props.element?.account, settings);
const text = computed(() => {
if (!props.notification) {
if (!props.element) {
return "";
}
switch (props.notification.type) {
switch (props.element.type) {
case "mention":
return "mentioned you";
case "reblog":
@ -95,17 +90,17 @@ const text = computed(() => {
case "follow_request":
return "requested to follow you";
default: {
console.error("Unknown notification type", props.notification.type);
console.error("Unknown notification type", props.element.type);
return "";
}
}
});
const icon = computed(() => {
if (!props.notification) {
if (!props.element) {
return "";
}
switch (props.notification.type) {
switch (props.element.type) {
case "mention":
return "tabler:at";
case "reblog":