From 54221ce42fdd75af81f1506e32b88665497a4094 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 21 Jul 2024 21:17:01 +0200
Subject: [PATCH] feat: :sparkles: Add actions dropdown on user view

---
 bun.lockb                                     | Bin 549780 -> 549780 bytes
 components/buttons/button-dropdown.vue        |   2 +-
 .../notifications/notifications-renderer.vue  |   2 +-
 components/social-elements/notes/note.vue     |  10 +-
 components/social-elements/users/Account.vue  |  60 ++++---
 .../users/AccountActionsDropdown.vue          | 164 ++++++++++++++++++
 components/timelines/account.vue              |   5 +-
 components/timelines/home.vue                 |   5 +-
 components/timelines/local.vue                |   5 +-
 components/timelines/public.vue               |   5 +-
 components/timelines/timeline.vue             |   2 +-
 composables/EventBus.ts                       |   4 +-
 package.json                                  |   2 +-
 13 files changed, 228 insertions(+), 38 deletions(-)
 create mode 100644 components/social-elements/users/AccountActionsDropdown.vue

diff --git a/bun.lockb b/bun.lockb
index 8e3740fac8daf20a34681ad9d3941dffe65f04a8..757b1b4b1cfeee587813de703e326c164b840dcb 100755
GIT binary patch
delta 165
zcmV;W09yZ)$03x*A&@R0)wr!YAyO?u2YV@HBR#D2RfGPehQe@>hG3`Fi1|%Ufljqf
z0g6$R*x@jT2vPyJ2vP$5{6L%YD&$x<4k>e5g2?kZ0x!>1+qt_-&b=u%l$mQt)j}d*
zoAV}f8+?T!h(-(LB_6{liDe#NA5Rd$CuiAs*EfenPXmWVPXxC`PX!Dk0X2tGas`J{
Tat60jatHd30X4Tx0SHH8$qPh3

delta 165
zcmV;W09yZ)$03x*A&@R0w!*pMOm<3;Bu1Wi&!}Nid2y4MRmE5KQY3W6o_JESfljqf
z0g6$R*qktj2vPyJ2vP$5{6J85L@B`P?EPS2tM0C?^5aEid0=FgrUI~<WanA@rN}t}
zh)!O^?<TAitC!_&V(V<}a-BuPO2#1i$8B>5x3Y&tPXmWVPXxC`PX!Dk0W^nFas`J{
Tat60jatHd30W`Nw0SHH8K|M@#

diff --git a/components/buttons/button-dropdown.vue b/components/buttons/button-dropdown.vue
index 0a0df6d..2463143 100644
--- a/components/buttons/button-dropdown.vue
+++ b/components/buttons/button-dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-    <ButtonBase class="enabled:hover:bg-white/20 !rounded-sm !ring-0 !p-4 sm:!p-2 !justify-start">
+    <ButtonBase class="enabled:hover:bg-white/20 text-sm !rounded-sm !ring-0 !py-3 sm:!py-1.5 sm:!px-2 !justify-start">
         <Icon :icon="icon" />
         <slot />
     </ButtonBase>
diff --git a/components/notifications/notifications-renderer.vue b/components/notifications/notifications-renderer.vue
index c4d3269..64dd0e6 100644
--- a/components/notifications/notifications-renderer.vue
+++ b/components/notifications/notifications-renderer.vue
@@ -9,7 +9,7 @@
                             class="h-6 w-6 text-green-400" aria-hidden="true" />
                         <iconify-icon v-else-if="toast.type === 'error'" icon="tabler:alert-triangle" height="none"
                             class="h-6 w-6 text-red-400" aria-hidden="true" />
-                        <iconify-icon v-else-if="toast.type === 'progress'" icon="tabler:loader" height="none"
+                        <iconify-icon v-else-if="toast.type === 'loading'" icon="tabler:loader" height="none"
                             class="h-6 w-6 text-primary-500 animate-spin" aria-hidden="true" />
                         <iconify-icon v-else-if="toast.type === 'info'" icon="tabler:info-circle" height="none"
                             class="h-6 w-6 text-blue-500" aria-hidden="true" />
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index d156bee..ee82e64 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -64,23 +64,23 @@
                                 <ButtonDropdown @click="copy(JSON.stringify(props.element, null, 4))" icon="tabler:code"
                                     class="w-full">
                                     Copy API
-                                    Response
+                                    response
                                 </ButtonDropdown>
                             </Menu.Item>
                             <Menu.Item value="">
                                 <ButtonDropdown @click="copy(url)" icon="tabler:link" class="w-full">
-                                    Copy Link
+                                    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)
+                                    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
+                                    View on remote
                                 </ButtonDropdown>
                             </Menu.Item>
                             <Menu.Item value="" v-if="isMyAccount">
@@ -134,7 +134,7 @@
                             </Menu.Item>
                             <Menu.Item value="" v-if="permissions.includes(RolePermission.ManageAccounts)">
                                 <ButtonDropdown icon="tabler:shield-bolt" class="w-full">
-                                    Open Moderation Panel
+                                    Open moderation panel
                                 </ButtonDropdown>
                             </Menu.Item>
                         </Menu.ItemGroup>
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index 8aa398c..2dd57a2 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -7,20 +7,25 @@
             <Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
                 class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
 
-            <Button theme="secondary" v-if="account && account?.id === identity?.account?.id">Edit Profile
-            </Button>
-            <Button theme="secondary" :loading="isLoading" @click="follow()"
-                v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
-                <span>Follow</span>
-            </Button>
-            <Button theme="secondary" :loading="isLoading" @click="unfollow()"
-                v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
-                <span>Unfollow</span>
-            </Button>
-            <Button theme="secondary" :loading="isLoading" :disabled="true"
-                v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
-                <span>Requested</span>
-            </Button>
+            <div class="flex gap-x-2">
+                <Button theme="secondary" v-if="account && account?.id === identity?.account?.id">Edit Profile
+                </Button>
+                <Button theme="secondary" :loading="isLoading" @click="follow()"
+                    v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
+                    <span>Follow</span>
+                </Button>
+                <Button theme="secondary" :loading="isLoading" @click="unfollow()"
+                    v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
+                    <span>Unfollow</span>
+                </Button>
+                <Button theme="secondary" :loading="isLoading" :disabled="true"
+                    v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
+                    <span>Requested</span>
+                </Button>
+
+                <AccountActionsDropdown v-if="account && relationship" :account="account"
+                    :relationship="relationship" />
+            </div>
         </div>
 
         <div class="mt-2 px-4">
@@ -102,19 +107,26 @@ import type { Account } from "@lysand-org/client/types";
 import Avatar from "~/components/avatars/avatar.vue";
 import Skeleton from "~/components/skeleton/Skeleton.vue";
 import Button from "~/packages/ui/components/buttons/button.vue";
+import AccountActionsDropdown from "./AccountActionsDropdown.vue";
 import Badge from "./Badge.vue";
 
 const props = defineProps<{
     account?: Account;
 }>();
 
-const skeleton = computed(() => !props.account);
+const account = ref(props.account);
+
+watch(props, () => {
+    account.value = props.account;
+});
+
+const skeleton = computed(() => !account.value);
 const config = useConfig();
-const accountId = computed(() => props.account?.id ?? null);
+const accountId = computed(() => account.value?.id ?? null);
 const { relationship, isLoading } = useRelationship(client, accountId);
 
 const follow = () => {
-    if (!(identity.value && props.account && relationship.value)) {
+    if (!(identity.value && account.value && relationship.value)) {
         return;
     }
     relationship.value = {
@@ -124,7 +136,7 @@ const follow = () => {
 };
 
 const unfollow = () => {
-    if (!(identity.value && props.account && relationship.value)) {
+    if (!(identity.value && account.value && relationship.value)) {
         return;
     }
     relationship.value = {
@@ -137,24 +149,24 @@ const formattedJoin = computed(() =>
     Intl.DateTimeFormat("en-US", {
         month: "long",
         year: "numeric",
-    }).format(new Date(props.account?.created_at ?? 0)),
+    }).format(new Date(account.value?.created_at ?? 0)),
 );
 
 const handle = computed(() => {
-    if (!props.account?.acct.includes("@")) {
-        return `${props.account?.acct}@${new URL(useBaseUrl().value).host}`;
+    if (!account.value?.acct.includes("@")) {
+        return `${account.value?.acct}@${new URL(useBaseUrl().value).host}`;
     }
-    return props.account?.acct;
+    return account.value?.acct;
 });
 const isDeveloper = computed(() =>
     config.DEVELOPER_HANDLES.includes(handle.value),
 );
 const visibleRoles = computed(
-    () => props.account?.roles.filter((r) => r.visible) ?? [],
+    () => account.value?.roles.filter((r) => r.visible) ?? [],
 );
 
 const { display_name, fields, note } = useParsedAccount(
-    computed(() => props.account),
+    computed(() => account.value),
     settings,
 );
 </script>
\ No newline at end of file
diff --git a/components/social-elements/users/AccountActionsDropdown.vue b/components/social-elements/users/AccountActionsDropdown.vue
new file mode 100644
index 0000000..ef40c9a
--- /dev/null
+++ b/components/social-elements/users/AccountActionsDropdown.vue
@@ -0,0 +1,164 @@
+<template>
+    <AdaptiveDropdown>
+        <template #button>
+            <Button theme="secondary" class="h-full">
+                <iconify-icon width="unset" icon="tabler:dots" class="size-5 text-gray-200" aria-hidden="true" />
+                <span class="sr-only">Open menu</span>
+            </Button>
+        </template>
+
+        <template #items>
+            <Menu.ItemGroup>
+                <Menu.Item value="">
+                    <ButtonDropdown @click="copyUsername" icon="tabler:at" class="w-full">
+                        Copy username
+                    </ButtonDropdown>
+                </Menu.Item>
+                <Menu.Item value="">
+                    <ButtonDropdown @click="copyId" icon="tabler:hash" class="w-full">
+                        Copy ID
+                    </ButtonDropdown>
+                </Menu.Item>
+                <Menu.Item value="">
+                    <ButtonDropdown @click="copy(JSON.stringify(account, null, 4))" icon="tabler:code" class="w-full">
+                        Copy API
+                        response
+                    </ButtonDropdown>
+                </Menu.Item>
+            </Menu.ItemGroup>
+            <hr class="border-white/10 rounded" />
+            <Menu.ItemGroup>
+                <Menu.Item value="" v-if="isRemoteUser">
+                    <ButtonDropdown @click="viewOnRemote" icon="tabler:external-link" class="w-full">
+                        Open remote profile
+                    </ButtonDropdown>
+                </Menu.Item>
+                <Menu.Item value="">
+                    <ButtonDropdown @click="copyUrl" icon="tabler:link" class="w-full">
+                        Copy URL
+                    </ButtonDropdown>
+                </Menu.Item>
+            </Menu.ItemGroup>
+            <hr class="border-white/10 rounded" v-if="identity && !isMyAccount" />
+            <Menu.ItemGroup v-if="identity && !isMyAccount">
+                <Menu.Item value="">
+                    <ButtonDropdown @click="mute" icon="tabler:volume-off" class="w-full" v-if="!relationship.muting">
+                        Mute
+                    </ButtonDropdown>
+                    <ButtonDropdown @click="unmute" icon="tabler:volume-2" class="w-full" v-else>
+                        Unmute
+                    </ButtonDropdown>
+                </Menu.Item>
+                <Menu.Item value="">
+                    <ButtonDropdown @click="block" icon="tabler:shield-x" class="w-full" v-if="!relationship.blocking">
+                        Block
+                    </ButtonDropdown>
+                    <ButtonDropdown @click="unblock" icon="tabler:shield-check" class="w-full" v-else>
+                        Unblock
+                    </ButtonDropdown>
+                </Menu.Item>
+            </Menu.ItemGroup>
+            <hr class="border-white/10 rounded" v-if="identity && isRemoteUser" />
+            <Menu.ItemGroup v-if="identity && isRemoteUser">
+                <Menu.Item value="">
+                    <ButtonDropdown @click="refetch" icon="tabler:refresh" class="w-full">
+                        Update remote user information
+                    </ButtonDropdown>
+                </Menu.Item>
+            </Menu.ItemGroup>
+            <hr class="border-white/10 rounded" v-if="identity" />
+            <Menu.ItemGroup v-if="identity">
+                <Menu.Item value="">
+                    <ButtonDropdown @click="useEvent('account:report', account)" 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 {
+    type Account,
+    type Relationship,
+    RolePermission,
+} from "@lysand-org/client/types";
+import ButtonDropdown from "~/components/buttons/button-dropdown.vue";
+import AdaptiveDropdown from "~/components/dropdowns/AdaptiveDropdown.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
+
+const props = defineProps<{
+    account: Account;
+    relationship: Relationship;
+}>();
+
+const relationship = ref(props.relationship);
+
+const permissions = usePermissions();
+const isMyAccount = computed(
+    () => identity.value?.account.id === props.account.id,
+);
+const isRemoteUser = computed(() => props.account.acct.includes("@"));
+const { copy } = useClipboard();
+
+const copyUsername = () => copy(props.account.acct);
+const copyId = () => copy(props.account.id);
+const viewOnRemote = () => window.open(props.account.url, "_blank");
+const copyUrl = () => copy(props.account.url);
+
+const mute = async () => {
+    const { data } = await client.value.muteAccount(props.account.id);
+    relationship.value = data;
+    useEvent("notification:new", {
+        type: "success",
+        title: "Account muted",
+        description: `You will no longer see notifications from ${props.account.acct}`,
+    });
+};
+const unmute = async () => {
+    const { data } = await client.value.unmuteAccount(props.account.id);
+    relationship.value = data;
+    useEvent("notification:new", {
+        type: "success",
+        title: "Account unmuted",
+        description: `You will now see notifications from ${props.account.acct}`,
+    });
+};
+
+const block = async () => {
+    const { data } = await client.value.blockAccount(props.account.id);
+    relationship.value = data;
+    useEvent("notification:new", {
+        type: "success",
+        title: "Account blocked",
+        description: `You will no longer see content from ${props.account.acct}`,
+    });
+};
+
+const unblock = async () => {
+    const { data } = await client.value.unblockAccount(props.account.id);
+    relationship.value = data;
+    useEvent("notification:new", {
+        type: "success",
+        title: "Account unblocked",
+        description: `You will now see content from ${props.account.acct}`,
+    });
+};
+
+const refetch = async () => {
+    const { data } = await client.value.refetchAccount(props.account.id);
+    useEvent("account:update", data);
+    useEvent("notification:new", {
+        type: "success",
+        title: "Remote user information updated",
+    });
+};
+</script>
\ No newline at end of file
diff --git a/components/timelines/account.vue b/components/timelines/account.vue
index 9885f00..f8cd26d 100644
--- a/components/timelines/account.vue
+++ b/components/timelines/account.vue
@@ -23,7 +23,6 @@ const {
     updateItem,
 } = useAccountTimeline(client.value, props.id);
 
-// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
     removeItem(id);
 });
@@ -31,4 +30,8 @@ useListen("note:delete", ({ id }) => {
 useListen("note:edit", (updatedNote) => {
     updateItem(updatedNote);
 });
+
+useListen("composer:send", (ee) => {
+    loadPrev();
+});
 </script>
\ No newline at end of file
diff --git a/components/timelines/home.vue b/components/timelines/home.vue
index a6aca74..0c2fd6e 100644
--- a/components/timelines/home.vue
+++ b/components/timelines/home.vue
@@ -20,7 +20,6 @@ const {
     updateItem,
 } = useHomeTimeline(client.value);
 
-// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
     removeItem(id);
 });
@@ -28,4 +27,8 @@ useListen("note:delete", ({ id }) => {
 useListen("note:edit", (updatedNote) => {
     updateItem(updatedNote);
 });
+
+useListen("composer:send", (ee) => {
+    loadPrev();
+});
 </script>
\ No newline at end of file
diff --git a/components/timelines/local.vue b/components/timelines/local.vue
index 69ce555..9d125f7 100644
--- a/components/timelines/local.vue
+++ b/components/timelines/local.vue
@@ -20,7 +20,6 @@ const {
     updateItem,
 } = useLocalTimeline(client.value);
 
-// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
     removeItem(id);
 });
@@ -28,4 +27,8 @@ useListen("note:delete", ({ id }) => {
 useListen("note:edit", (updatedNote) => {
     updateItem(updatedNote);
 });
+
+useListen("composer:send", (ee) => {
+    loadPrev();
+});
 </script>
\ No newline at end of file
diff --git a/components/timelines/public.vue b/components/timelines/public.vue
index ef5a3c3..1bc40f9 100644
--- a/components/timelines/public.vue
+++ b/components/timelines/public.vue
@@ -20,7 +20,6 @@ const {
     updateItem,
 } = usePublicTimeline(client.value);
 
-// Example of how to handle global events
 useListen("note:delete", ({ id }) => {
     removeItem(id);
 });
@@ -28,4 +27,8 @@ useListen("note:delete", ({ id }) => {
 useListen("note:edit", (updatedNote) => {
     updateItem(updatedNote);
 });
+
+useListen("composer:send", (ee) => {
+    loadPrev();
+});
 </script>
\ No newline at end of file
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index 5dfc620..d4de1fd 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -87,6 +87,6 @@ onMounted(() => {
 .timeline-item-enter-from,
 .timeline-item-leave-to {
     opacity: 0;
-    transform: translateX(30px);
+    scale: 0.99;
 }
 </style>
\ No newline at end of file
diff --git a/composables/EventBus.ts b/composables/EventBus.ts
index 0928750..1042b9d 100644
--- a/composables/EventBus.ts
+++ b/composables/EventBus.ts
@@ -1,5 +1,5 @@
 import type { createToaster } from "@ark-ui/vue";
-import type { Attachment, Status } from "@lysand-org/client/types";
+import type { Account, Attachment, Status } from "@lysand-org/client/types";
 import mitt from "mitt";
 import type { Identity } from "./Identities";
 
@@ -24,6 +24,8 @@ type ApplicationEvents = {
     "composer:send": Status;
     "composer:send-edit": Status;
     "composer:close": undefined;
+    "account:report": Account;
+    "account:update": Account;
     "notification:new": NotificationEvent;
     "attachment:view": Attachment;
     "identity:change": Identity;
diff --git a/package.json b/package.json
index 5d7050e..91cf17b 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@ark-ui/vue": "^3.6.0",
-        "@lysand-org/client": "^0.2.4",
+        "@lysand-org/client": "^0.2.5",
         "@nuxt/fonts": "^0.7.1",
         "@tailwindcss/typography": "^0.5.13",
         "@vee-validate/nuxt": "^4.13.2",