mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 11:39:16 +01:00
feat: ✨ Add quoting, replies, refactor parts of old code
This commit is contained in:
Jesse Wierzbinski
parent
0f214b6a17
commit
b4e682a562
8 changed files with 167 additions and 64 deletions
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div
|
||||
class="first:rounded-t last:rounded-b ring-1 ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
|
||||
class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
|
||||
<!-- Overlay that blocks clicks for disabled notes -->
|
||||
<div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
|
||||
</div>
|
||||
<div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
|
||||
<Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
|
||||
<Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" />
|
||||
|
|
@ -12,7 +15,7 @@
|
|||
<SocialElementsNotesHeader :note="note" :small="small" />
|
||||
<div v-if="!collapsed">
|
||||
<NuxtLink :href="url" class="mt-6 block relative">
|
||||
<Skeleton :enabled="!loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
|
||||
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
|
||||
type="content">
|
||||
<div v-if="content"
|
||||
:class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline content']"
|
||||
|
|
@ -24,6 +27,9 @@
|
|||
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
|
||||
:attachment="attachment" />
|
||||
</div>
|
||||
<div v-if="isQuote && note?.reblog" class="mt-4">
|
||||
<SocialElementsNotesNote :note="note?.reblog" :small="true" />
|
||||
</div>
|
||||
</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">
|
||||
|
|
@ -34,55 +40,64 @@
|
|||
}}</span>
|
||||
<ButtonsSecondary @click="collapsed = false" class="mt-4">Show content</ButtonsSecondary>
|
||||
</div>
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="!note && !small"></Skeleton>
|
||||
<div v-else-if="!small"
|
||||
class="mt-6 flex flex-row items-stretch relative justify-between text-sm h-10 hover:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
|
||||
<button>
|
||||
<Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
|
||||
</button>
|
||||
<button>
|
||||
<Icon name="tabler:heart" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
|
||||
</button>
|
||||
<button>
|
||||
<Icon name="tabler:repeat" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
|
||||
</button>
|
||||
<button>
|
||||
<Icon name="tabler:quote" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
|
||||
</button>
|
||||
<DropdownsAdaptiveDropdown>
|
||||
<template #button>
|
||||
<HeadlessMenuButton>
|
||||
<Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="sr-only">Open menu</span>
|
||||
</HeadlessMenuButton>
|
||||
</template>
|
||||
<Skeleton class="!h-10 w-full mt-6" :enabled="!props.note || !loaded" v-if="!small || !showInteractions">
|
||||
<div v-if="showInteractions"
|
||||
class="mt-6 flex flex-row items-stretch relative justify-between text-sm h-10 hover:[&>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="note && useEvent('note:reply', note)">
|
||||
<Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200 group-hover:text-blue-600"
|
||||
aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
|
||||
</button>
|
||||
<button class="group">
|
||||
<Icon name="tabler:heart" v-if="!note?.favourited"
|
||||
class="h-5 w-5 text-gray-200 group-hover:text-pink-600" aria-hidden="true" />
|
||||
<Icon name="tabler:heart-filled" v-else class="h-5 w-5 text-pink-600 group-hover:text-gray-200"
|
||||
aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
|
||||
</button>
|
||||
<button class="group">
|
||||
<Icon name="tabler:repeat" v-if="!note?.reblogged"
|
||||
class="h-5 w-5 text-gray-200 group-hover:text-green-600" aria-hidden="true" />
|
||||
<Icon name="tabler:repeat-off" v-else class="h-5 w-5 text-green-600 group-hover:text-gray-200"
|
||||
aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
|
||||
</button>
|
||||
<button class="group" @click="note && useEvent('note:quote', note)">
|
||||
<Icon name="tabler:quote" class="h-5 w-5 text-gray-200 group-hover:text-blue-600"
|
||||
aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
|
||||
</button>
|
||||
<DropdownsAdaptiveDropdown>
|
||||
<template #button>
|
||||
<HeadlessMenuButton>
|
||||
<Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
|
||||
<span class="sr-only">Open menu</span>
|
||||
</HeadlessMenuButton>
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<HeadlessMenuItem>
|
||||
<ButtonsDropdownElement @click="copy(JSON.stringify(note, null, 4))" icon="tabler:code"
|
||||
class="w-full">
|
||||
Copy API
|
||||
Response
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem>
|
||||
<ButtonsDropdownElement @click="copy(url)" icon="tabler:link" class="w-full">
|
||||
Copy Link
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem>
|
||||
<ButtonsDropdownElement @click="remove" icon="tabler:backspace"
|
||||
class="w-full border-r-2 border-red-500">
|
||||
Delete
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
</template>
|
||||
</DropdownsAdaptiveDropdown>
|
||||
</div>
|
||||
<template #items>
|
||||
<HeadlessMenuItem>
|
||||
<ButtonsDropdownElement @click="copy(JSON.stringify(note, null, 4))" icon="tabler:code"
|
||||
class="w-full">
|
||||
Copy API
|
||||
Response
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem>
|
||||
<ButtonsDropdownElement @click="copy(url)" icon="tabler:link" class="w-full">
|
||||
Copy Link
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
<HeadlessMenuItem>
|
||||
<ButtonsDropdownElement @click="remove" icon="tabler:backspace"
|
||||
class="w-full border-r-2 border-red-500">
|
||||
Delete
|
||||
</ButtonsDropdownElement>
|
||||
</HeadlessMenuItem>
|
||||
</template>
|
||||
</DropdownsAdaptiveDropdown>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -90,10 +105,17 @@
|
|||
import Skeleton from "~/components/skeleton/Skeleton.vue";
|
||||
import type { Status } from "~/types/mastodon/status";
|
||||
|
||||
const props = defineProps<{
|
||||
note?: Status;
|
||||
small?: boolean;
|
||||
}>();
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
note?: Status;
|
||||
small?: boolean;
|
||||
disabled?: boolean;
|
||||
showInteractions?: boolean;
|
||||
}>(),
|
||||
{
|
||||
showInteractions: true,
|
||||
},
|
||||
);
|
||||
|
||||
const tokenData = useTokenData();
|
||||
const client = useMegalodon(tokenData);
|
||||
|
|
@ -104,12 +126,11 @@ const {
|
|||
content,
|
||||
shouldHide,
|
||||
url,
|
||||
isQuote,
|
||||
reblog,
|
||||
reblogDisplayName,
|
||||
} = useNoteData(ref(props.note), client);
|
||||
|
||||
console.log(props.note?.account.display_name ?? "");
|
||||
|
||||
const collapsed = ref(shouldHide.value);
|
||||
|
||||
const { copy } = useClipboard();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue