mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
refactor: ♻️ Improve Note rendering structure
This commit is contained in:
Jesse Wierzbinski
parent
d6fe8dbcdf
commit
c188d97dee
|
|
@ -2,7 +2,7 @@
|
|||
<Menu.Root :positioning="{
|
||||
strategy: 'fixed',
|
||||
}" @update:open="(o) => open = o" :open="open">
|
||||
<Menu.Trigger>
|
||||
<Menu.Trigger :as-child="true">
|
||||
<slot name="button"></slot>
|
||||
</Menu.Trigger>
|
||||
|
||||
|
|
|
|||
9
components/social-elements/notes/interactions/button.vue
Normal file
9
components/social-elements/notes/interactions/button.vue
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<button class="group disabled:opacity-70 max-w-28 disabled:cursor-not-allowed hover:enabled:bg-dark-800 duration-200 rounded flex flex-1 flex-row items-center justify-center">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
86
components/social-elements/notes/interactions/row.vue
Normal file
86
components/social-elements/notes/interactions/row.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div
|
||||
class="mt-6 flex flex-row items-stretch relative justify-around text-sm h-10">
|
||||
<InteractionButton @click="useEvent('note:reply', note)"
|
||||
:disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
|
||||
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.replies_count) }}</span>
|
||||
</InteractionButton>
|
||||
<InteractionButton @click="likeFn" :disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note.favourited"
|
||||
class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
|
||||
class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.favourites_count) }}</span>
|
||||
</InteractionButton>
|
||||
<InteractionButton @click="reblogFn" :disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note.reblogged"
|
||||
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
|
||||
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.reblogs_count) }}</span>
|
||||
</InteractionButton>
|
||||
<InteractionButton @click="useEvent('note:quote', note)"
|
||||
:disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
|
||||
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>
|
||||
</InteractionButton>
|
||||
<NoteMenu v-model:note="note" :url="url" :remove="remove" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Status } from "@versia/client/types";
|
||||
import NoteMenu from "../note-menu.vue";
|
||||
import InteractionButton from "./button.vue";
|
||||
|
||||
defineProps<{
|
||||
url: string;
|
||||
remove: () => Promise<void>;
|
||||
}>();
|
||||
|
||||
const note = defineModel<Status>("note", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const numberFormat = (number = 0) =>
|
||||
new Intl.NumberFormat(undefined, {
|
||||
notation: "compact",
|
||||
compactDisplay: "short",
|
||||
maximumFractionDigits: 1,
|
||||
}).format(number);
|
||||
|
||||
const likeFn = async () => {
|
||||
if (note.value.favourited) {
|
||||
const output = await client.value.unfavouriteStatus(note.value.id);
|
||||
|
||||
if (output?.data) {
|
||||
note.value = output.data;
|
||||
}
|
||||
} else {
|
||||
const output = await client.value.favouriteStatus(note.value.id);
|
||||
|
||||
if (output?.data) {
|
||||
note.value = output.data;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const reblogFn = async () => {
|
||||
if (note.value?.reblogged) {
|
||||
const output = await client.value.unreblogStatus(note.value.id);
|
||||
|
||||
if (output?.data) {
|
||||
note.value = output.data;
|
||||
}
|
||||
} else {
|
||||
const output = await client.value.reblogStatus(note.value.id);
|
||||
|
||||
if (output?.data.reblog) {
|
||||
note.value = output.data.reblog;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
156
components/social-elements/notes/note-menu.vue
Normal file
156
components/social-elements/notes/note-menu.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
<InteractionButton>
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-200"
|
||||
aria-hidden="true" />
|
||||
<span class="sr-only">Open menu</span>
|
||||
</InteractionButton>
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<Menu.ItemGroup>
|
||||
<Menu.Item value="" v-if="isMyAccount">
|
||||
<ButtonDropdown @click="note && useEvent('note:edit', note)" icon="tabler:pencil" class="w-full">
|
||||
Edit
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="copy(JSON.stringify(note, null, 4))" icon="tabler:code"
|
||||
class="w-full">
|
||||
Copy API
|
||||
response
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="copy(url)" icon="tabler:link" class="w-full">
|
||||
Copy link
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="note?.url && isRemote">
|
||||
<ButtonDropdown @click="copy(note.url)" icon="tabler:link" class="w-full">
|
||||
Copy link (origin)
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="note?.url && isRemote">
|
||||
<ButtonDropdown @click="openBlank(note.url)" icon="tabler:external-link" class="w-full">
|
||||
View on remote
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="isMyAccount">
|
||||
<ButtonDropdown @click="remove" icon="tabler:backspace" :disabled="!identity"
|
||||
class="w-full border-r-2 border-red-500">
|
||||
Delete
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<hr class="border-white/10 rounded" v-if="identity" />
|
||||
<Menu.ItemGroup v-if="identity">
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="note && useEvent('note:reply', note)" icon="tabler:arrow-back-up"
|
||||
class="w-full">
|
||||
Reply
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="likeFn" icon="tabler:heart" class="w-full" v-if="!note?.favourited">
|
||||
Like
|
||||
</ButtonDropdown>
|
||||
<ButtonDropdown @click="likeFn" icon="tabler:heart-filled" class="w-full" v-else>
|
||||
Unlike
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full" v-if="!note?.reblogged">
|
||||
Reblog
|
||||
</ButtonDropdown>
|
||||
<ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full" v-else>
|
||||
Unreblog
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="note && useEvent('note:quote', note)" icon="tabler:quote" class="w-full">
|
||||
Quote
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<hr class="border-white/10 rounded" v-if="identity" />
|
||||
<Menu.ItemGroup v-if="identity">
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="note && useEvent('note:report', note)" icon="tabler:flag" class="w-full"
|
||||
:disabled="!permissions.includes(RolePermission.ManageOwnReports)">
|
||||
Report
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="permissions.includes(RolePermission.ManageAccounts)">
|
||||
<ButtonDropdown icon="tabler:shield-bolt" class="w-full">
|
||||
Open moderation panel
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
</template>
|
||||
</AdaptiveDropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Menu } from "@ark-ui/vue";
|
||||
import { RolePermission, type Status } from "@versia/client/types";
|
||||
import ButtonDropdown from "~/components/buttons/button-dropdown.vue";
|
||||
import AdaptiveDropdown from "~/components/dropdowns/AdaptiveDropdown.vue";
|
||||
import InteractionButton from "./interactions/button.vue";
|
||||
|
||||
defineProps<{
|
||||
url: string;
|
||||
remove: () => Promise<void>;
|
||||
}>();
|
||||
|
||||
const note = defineModel<Status>("note", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
const openBlank = (url: string) => window.open(url, "_blank");
|
||||
const { copy } = useClipboard();
|
||||
const isMyAccount = computed(
|
||||
() => identity.value?.account.id === note.value?.account.id,
|
||||
);
|
||||
const isRemote = computed(() => note.value?.account.acct.includes("@"));
|
||||
const permissions = usePermissions();
|
||||
|
||||
const likeFn = async () => {
|
||||
if (!note.value) {
|
||||
return;
|
||||
}
|
||||
if (note.value.favourited) {
|
||||
const output = await client.value.unfavouriteStatus(note.value.id);
|
||||
|
||||
if (output.data) {
|
||||
note.value = output.data;
|
||||
}
|
||||
} else {
|
||||
const output = await client.value.favouriteStatus(note.value.id);
|
||||
|
||||
if (output.data) {
|
||||
note.value = output.data;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const reblogFn = async () => {
|
||||
if (!note.value) {
|
||||
return;
|
||||
}
|
||||
if (note.value.reblogged) {
|
||||
const output = await client.value.unreblogStatus(note.value.id);
|
||||
|
||||
if (output.data) {
|
||||
note.value = output.data;
|
||||
}
|
||||
} else {
|
||||
const output = await client.value.reblogStatus(note.value.id);
|
||||
|
||||
if (output.data.reblog) {
|
||||
note.value = output.data.reblog;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -17,142 +17,17 @@
|
|||
<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.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)"
|
||||
:disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
|
||||
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.replies_count) }}</span>
|
||||
</button>
|
||||
<button class="group" @click="likeFn" :disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!outputtedNote?.favourited"
|
||||
class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
|
||||
class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.favourites_count) }}</span>
|
||||
</button>
|
||||
<button class="group" @click="reblogFn" :disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!outputtedNote?.reblogged"
|
||||
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
|
||||
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
|
||||
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(outputtedNote?.reblogs_count) }}</span>
|
||||
</button>
|
||||
<button class="group" @click="outputtedNote && useEvent('note:quote', outputtedNote)"
|
||||
:disabled="!identity">
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
|
||||
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>
|
||||
<AdaptiveDropdown>
|
||||
<template #button>
|
||||
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots" class="size-5 text-gray-200"
|
||||
aria-hidden="true" />
|
||||
<span class="sr-only">Open menu</span>
|
||||
</template>
|
||||
|
||||
<template #items>
|
||||
<Menu.ItemGroup>
|
||||
<Menu.Item value="" v-if="isMyAccount">
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:edit', outputtedNote)"
|
||||
icon="tabler:pencil" class="w-full">
|
||||
Edit
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="copy(JSON.stringify(props.element, null, 4))" icon="tabler:code"
|
||||
class="w-full">
|
||||
Copy API
|
||||
response
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="copy(url)" icon="tabler:link" class="w-full">
|
||||
Copy link
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="outputtedNote?.url && isRemote">
|
||||
<ButtonDropdown @click="copy(outputtedNote.url)" icon="tabler:link" class="w-full">
|
||||
Copy link (origin)
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="outputtedNote?.url && isRemote">
|
||||
<ButtonDropdown @click="openBlank(outputtedNote.url)" icon="tabler:external-link"
|
||||
class="w-full">
|
||||
View on remote
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="isMyAccount">
|
||||
<ButtonDropdown @click="remove" icon="tabler:backspace" :disabled="!identity"
|
||||
class="w-full border-r-2 border-red-500">
|
||||
Delete
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<hr class="border-white/10 rounded" v-if="identity" />
|
||||
<Menu.ItemGroup v-if="identity">
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:reply', outputtedNote)"
|
||||
icon="tabler:arrow-back-up" class="w-full">
|
||||
Reply
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="likeFn" icon="tabler:heart" class="w-full"
|
||||
v-if="!outputtedNote?.favourited">
|
||||
Like
|
||||
</ButtonDropdown>
|
||||
<ButtonDropdown @click="likeFn" icon="tabler:heart-filled" class="w-full" v-else>
|
||||
Unlike
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full"
|
||||
v-if="!outputtedNote?.reblogged">
|
||||
Reblog
|
||||
</ButtonDropdown>
|
||||
<ButtonDropdown @click="reblogFn" icon="tabler:repeat" class="w-full" v-else>
|
||||
Unreblog
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:quote', outputtedNote)"
|
||||
icon="tabler:quote" class="w-full">
|
||||
Quote
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<hr class="border-white/10 rounded" v-if="identity" />
|
||||
<Menu.ItemGroup v-if="identity">
|
||||
<Menu.Item value="">
|
||||
<ButtonDropdown @click="outputtedNote && useEvent('note:report', outputtedNote)"
|
||||
icon="tabler:flag" class="w-full"
|
||||
:disabled="!permissions.includes(RolePermission.ManageOwnReports)">
|
||||
Report
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="" v-if="permissions.includes(RolePermission.ManageAccounts)">
|
||||
<ButtonDropdown icon="tabler:shield-bolt" class="w-full">
|
||||
Open moderation panel
|
||||
</ButtonDropdown>
|
||||
</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
</template>
|
||||
</AdaptiveDropdown>
|
||||
</div>
|
||||
<InteractionRow v-if="showInteractions && outputtedNote" :note="outputtedNote" :url="url" :remove="remove" />
|
||||
</Skeleton>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Menu } from "@ark-ui/vue";
|
||||
import { RolePermission, type Status } from "@versia/client/types";
|
||||
import type { Status } from "@versia/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 InteractionRow from "./interactions/row.vue";
|
||||
import NoteContent from "./note-content.vue";
|
||||
import ReplyHeader from "./reply-header.vue";
|
||||
|
||||
|
|
@ -188,65 +63,4 @@ const {
|
|||
isReply,
|
||||
reblogDisplayName,
|
||||
} = useNoteData(noteRef, client, settings);
|
||||
|
||||
const openBlank = (url: string) => window.open(url, "_blank");
|
||||
|
||||
const { copy } = useClipboard();
|
||||
const isMyAccount = computed(
|
||||
() => identity.value?.account.id === outputtedNote.value?.account.id,
|
||||
);
|
||||
const isRemote = computed(() =>
|
||||
outputtedNote.value?.account.acct.includes("@"),
|
||||
);
|
||||
const permissions = usePermissions();
|
||||
const numberFormat = (number = 0) =>
|
||||
new Intl.NumberFormat(undefined, {
|
||||
notation: "compact",
|
||||
compactDisplay: "short",
|
||||
maximumFractionDigits: 1,
|
||||
}).format(number);
|
||||
|
||||
const likeFn = async () => {
|
||||
if (!outputtedNote.value) {
|
||||
return;
|
||||
}
|
||||
if (outputtedNote.value.favourited) {
|
||||
const output = await client.value.unfavouriteStatus(
|
||||
outputtedNote.value.id,
|
||||
);
|
||||
|
||||
if (output?.data) {
|
||||
noteRef.value = output.data;
|
||||
}
|
||||
} else {
|
||||
const output = await client.value.favouriteStatus(
|
||||
outputtedNote.value.id,
|
||||
);
|
||||
|
||||
if (output?.data) {
|
||||
noteRef.value = output.data;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const reblogFn = async () => {
|
||||
if (!outputtedNote.value) {
|
||||
return;
|
||||
}
|
||||
if (outputtedNote.value?.reblogged) {
|
||||
const output = await client.value.unreblogStatus(
|
||||
outputtedNote.value.id,
|
||||
);
|
||||
|
||||
if (output?.data) {
|
||||
noteRef.value = output.data;
|
||||
}
|
||||
} else {
|
||||
const output = await client.value.reblogStatus(outputtedNote.value.id);
|
||||
|
||||
if (output?.data.reblog) {
|
||||
noteRef.value = output.data.reblog;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in a new issue