refactor: ♻️ Improve Note rendering structure

components/dropdowns/AdaptiveDropdown.vue

@@ -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>
 

components/social-elements/notes/interactions/button.vue

@@ -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>

components/social-elements/notes/interactions/row.vue

@@ -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>

components/social-elements/notes/note-menu.vue

@@ -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>

components/social-elements/notes/note.vue

@@ -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"
+            <InteractionRow v-if="showInteractions && outputtedNote" :note="outputtedNote" :url="url" :remove="remove" />
-                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>
         </Skeleton>
     </article>
 </template>
 
 <script lang="ts" setup>
-import { Menu } from "@ark-ui/vue";
+import type { Status } from "@versia/client/types";
-import { RolePermission, 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>