mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 11:39:16 +01:00
refactor: ♻️ Disable Nuxt component auto-importing (obscures code flow)
This commit is contained in:
Jesse Wierzbinski
parent
32d1acb4c1
commit
e309c56a86
58 changed files with 440 additions and 292 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="small" class="flex flex-row">
|
||||
<NuxtLink :href="accountUrl" class="shrink-0">
|
||||
<AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
|
||||
<Avatar :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
|
||||
class="size-6 rounded ring-1 ring-white/5" />
|
||||
<span class="sr-only">Account profile</span>
|
||||
</NuxtLink>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
<div v-else class="flex flex-row">
|
||||
<NuxtLink :href="accountUrl" class="shrink-0">
|
||||
<AvatarsCentered :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
|
||||
<Avatar :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
|
||||
class="h-12 w-12 rounded ring-1 ring-white/5" />
|
||||
<span class="sr-only">Account profile</span>
|
||||
</NuxtLink>
|
||||
|
|
@ -67,6 +67,8 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@lysand-org/client/types";
|
||||
import Avatar from "~/components/avatars/avatar.vue";
|
||||
import Skeleton from "~/components/skeleton/Skeleton.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
note?: Status;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { Account } from "@lysand-org/client/types";
|
||||
|
||||
const props = defineProps<{
|
||||
defineProps<{
|
||||
account: Account;
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -9,11 +9,9 @@
|
|||
</Skeleton>
|
||||
<div v-if="note && note.media_attachments.length > 0"
|
||||
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">
|
||||
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
|
||||
:attachment="attachment" />
|
||||
<Attachment v-for="attachment of note.media_attachments" :key="attachment.id" :attachment="attachment" />
|
||||
</div>
|
||||
<LazySocialElementsNotesNote v-if="isQuote && note?.quote" :note="note?.quote" :small="true"
|
||||
class="mt-4 !rounded" />
|
||||
<Note v-if="isQuote && note?.quote" :note="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">
|
||||
|
|
@ -22,12 +20,16 @@
|
|||
<!-- Spoiler text is it's specified -->
|
||||
<span v-if="note?.spoiler_text" class="mt-2 break-all">{{ note.spoiler_text
|
||||
}}</span>
|
||||
<ButtonsSecondary @click="collapsed = false" class="mt-4">Show content</ButtonsSecondary>
|
||||
<ButtonSecondary @click="collapsed = false" class="mt-4">Show content</ButtonSecondary>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@lysand-org/client/types";
|
||||
import ButtonSecondary from "~/components/buttons/button-secondary.vue";
|
||||
import Skeleton from "~/components/skeleton/Skeleton.vue";
|
||||
import Attachment from "./attachment.vue";
|
||||
import Note from "./note.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
content: string | null;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
<div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-primary-400">
|
||||
<Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
|
||||
<iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
|
||||
<AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
|
||||
<Avatar v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
|
||||
class="size-6 rounded shrink-0 ring-1 ring-white/10" />
|
||||
<span><strong v-html="reblogDisplayName"></strong> reblogged</span>
|
||||
</Skeleton>
|
||||
</div>
|
||||
<SocialElementsNotesReplyHeader v-if="isReply" :account_id="outputtedNote?.in_reply_to_account_id ?? null" />
|
||||
<SocialElementsNotesHeader :note="outputtedNote" :small="small" />
|
||||
<LazySocialElementsNotesNoteContent :note="outputtedNote" :loaded="loaded" :url="url" :content="content"
|
||||
:is-quote="isQuote" :should-hide="shouldHide" />
|
||||
<ReplyHeader v-if="isReply" :account_id="outputtedNote?.in_reply_to_account_id ?? null" />
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
|
||||
</button>
|
||||
<DropdownsAdaptiveDropdown>
|
||||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-200"
|
||||
aria-hidden="true" />
|
||||
|
|
@ -55,93 +55,91 @@
|
|||
<template #items>
|
||||
<Menu.ItemGroup>
|
||||
<Menu.Item value="" v-if="isMyAccount">
|
||||
<ButtonsDropdownElement @click="outputtedNote && useEvent('note:edit', outputtedNote)"
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:edit', outputtedNote)"
|
||||
icon="tabler:pencil" class="w-full">
|
||||
Edit
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonsDropdownElement @click="copy(JSON.stringify(props.note, null, 4))"
|
||||
icon="tabler:code" class="w-full">
|
||||
<ButtonDropdown @click="copy(JSON.stringify(props.note, null, 4))" icon="tabler:code"
|
||||
class="w-full">
|
||||
Copy API
|
||||
Response
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonsDropdownElement @click="copy(url)" icon="tabler:link" class="w-full">
|
||||
<ButtonDropdown @click="copy(url)" icon="tabler:link" class="w-full">
|
||||
Copy Link
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="outputtedNote?.url && isRemote">
|
||||
<ButtonsDropdownElement @click="copy(outputtedNote.url)" icon="tabler:link"
|
||||
class="w-full">
|
||||
<ButtonDropdown @click="copy(outputtedNote.url)" icon="tabler:link" class="w-full">
|
||||
Copy Link (Origin)
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="outputtedNote?.url && isRemote">
|
||||
<ButtonsDropdownElement @click="openBlank(outputtedNote.url)"
|
||||
icon="tabler:external-link" class="w-full">
|
||||
<ButtonDropdown @click="openBlank(outputtedNote.url)" icon="tabler:external-link"
|
||||
class="w-full">
|
||||
View on Remote
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="isMyAccount">
|
||||
<ButtonsDropdownElement @click="remove" icon="tabler:backspace" :disabled="!identity"
|
||||
<ButtonDropdown @click="remove" icon="tabler:backspace" :disabled="!identity"
|
||||
class="w-full border-r-2 border-red-500">
|
||||
Delete
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<hr class="border-white/10 rounded" v-if="identity" />
|
||||
<Menu.ItemGroup v-if="identity">
|
||||
<Menu.Item value="">
|
||||
<ButtonsDropdownElement @click="outputtedNote && useEvent('note:reply', outputtedNote)"
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:reply', outputtedNote)"
|
||||
icon="tabler:arrow-back-up" class="w-full">
|
||||
Reply
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonsDropdownElement @click="likeFn" icon="tabler:heart" class="w-full"
|
||||
<ButtonDropdown @click="likeFn" icon="tabler:heart" class="w-full"
|
||||
v-if="!outputtedNote?.favourited">
|
||||
Like
|
||||
</ButtonsDropdownElement>
|
||||
<ButtonsDropdownElement @click="likeFn" icon="tabler:heart-filled" class="w-full"
|
||||
v-else>
|
||||
</ButtonDropdown>
|
||||
<ButtonDropdown @click="likeFn" icon="tabler:heart-filled" class="w-full" v-else>
|
||||
Unlike
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonsDropdownElement @click="reblogFn" icon="tabler:repeat" class="w-full"
|
||||
<ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full"
|
||||
v-if="!outputtedNote?.reblogged">
|
||||
Reblog
|
||||
</ButtonsDropdownElement>
|
||||
<ButtonsDropdownElement @click="reblogFn" icon="tabler:repeat" class="w-full" v-else>
|
||||
</ButtonDropdown>
|
||||
<ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full" v-else>
|
||||
Unreblog
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonsDropdownElement @click="outputtedNote && useEvent('note:quote', outputtedNote)"
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:quote', outputtedNote)"
|
||||
icon="tabler:quote" class="w-full">
|
||||
Quote
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<hr class="border-white/10 rounded" v-if="identity" />
|
||||
<Menu.ItemGroup v-if="identity">
|
||||
<Menu.Item value="">
|
||||
<ButtonsDropdownElement @click="outputtedNote && useEvent('note:report', outputtedNote)"
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:report', outputtedNote)"
|
||||
icon="tabler:flag" class="w-full"
|
||||
:disabled="!permissions.includes(RolePermission.ManageOwnReports)">
|
||||
Report
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="permissions.includes(RolePermission.ManageAccounts)">
|
||||
<ButtonsDropdownElement icon="tabler:shield-bolt" class="w-full">
|
||||
<ButtonDropdown icon="tabler:shield-bolt" class="w-full">
|
||||
Open Moderation Panel
|
||||
</ButtonsDropdownElement>
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
</template>
|
||||
</DropdownsAdaptiveDropdown>
|
||||
</AdaptiveDropdown>
|
||||
</div>
|
||||
</Skeleton>
|
||||
</article>
|
||||
|
|
@ -150,7 +148,13 @@
|
|||
<script lang="ts" setup>
|
||||
import { Menu } from "@ark-ui/vue";
|
||||
import { RolePermission, type Status } from "@lysand-org/client/types";
|
||||
import Avatar from "~/components/avatars/avatar.vue";
|
||||
import ButtonDropdown from "~/components/buttons/button-dropdown.vue";
|
||||
import AdaptiveDropdown from "~/components/dropdowns/AdaptiveDropdown.vue";
|
||||
import Skeleton from "~/components/skeleton/Skeleton.vue";
|
||||
import Header from "./header.vue";
|
||||
import NoteContent from "./note-content.vue";
|
||||
import ReplyHeader from "./reply-header.vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
|
||||
<iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
|
||||
<span class="shrink-0">Replying to</span>
|
||||
<AvatarsCentered v-if="account?.avatar" :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
|
||||
<Avatar v-if="account?.avatar" :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
|
||||
class="size-5 shrink-0 rounded ring-1 ring-white/10" />
|
||||
<strong class="line-clamp-1">{{ account?.display_name || account?.acct }}</strong>
|
||||
</Skeleton>
|
||||
|
|
@ -11,6 +11,9 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Avatar from "~/components/avatars/avatar.vue";
|
||||
import Skeleton from "~/components/skeleton/Skeleton.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
account_id: string | null;
|
||||
}>();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue