mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
refactor: ♻️ Rewrite timeline rendering code
This commit is contained in:
Jesse Wierzbinski
parent
091615b04e
commit
d6f36eaecf
24 changed files with 392 additions and 435 deletions
|
|
@ -11,7 +11,7 @@
|
|||
class="[&:not(:first-child)]:mt-6 grid grid-cols-2 gap-4 [&>*]:aspect-square [&:has(>:last-child:nth-child(1))>*]:aspect-video [&:has(>:last-child:nth-child(1))]:block">
|
||||
<Attachment v-for="attachment of note.media_attachments" :key="attachment.id" :attachment="attachment" />
|
||||
</div>
|
||||
<Note v-if="isQuote && note?.quote" :note="note?.quote" :small="true" class="mt-4 !rounded" />
|
||||
<Note v-if="isQuote && note?.quote" :element="note?.quote" :small="true" class="mt-4 !rounded" />
|
||||
</div>
|
||||
<div v-else
|
||||
class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<Header :note="outputtedNote" :small="small" />
|
||||
<NoteContent :note="outputtedNote" :loaded="loaded" :url="url" :content="content" :is-quote="isQuote"
|
||||
:should-hide="shouldHide" />
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded" v-if="!small || !showInteractions">
|
||||
<div v-if="showInteractions"
|
||||
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
<button class="group" @click="outputtedNote && useEvent('note:reply', outputtedNote)"
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="copy(JSON.stringify(props.note, null, 4))" icon="tabler:code"
|
||||
<ButtonDropdown @click="copy(JSON.stringify(props.element, null, 4))" icon="tabler:code"
|
||||
class="w-full">
|
||||
Copy API
|
||||
Response
|
||||
|
|
@ -158,7 +158,7 @@ import ReplyHeader from "./reply-header.vue";
|
|||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
note?: Status;
|
||||
element?: Status;
|
||||
small?: boolean;
|
||||
disabled?: boolean;
|
||||
showInteractions?: boolean;
|
||||
|
|
@ -168,7 +168,7 @@ const props = withDefaults(
|
|||
},
|
||||
);
|
||||
|
||||
const noteRef = ref(props.note);
|
||||
const noteRef = ref(props.element);
|
||||
|
||||
useListen("composer:send-edit", (note) => {
|
||||
if (note.id === noteRef.value?.id) {
|
||||
|
|
|
|||
|
|
@ -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":
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue