versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Add actions dropdown on user view

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-07-21 21:17:01 +02:00
parent 8ee6aa83b3
commit 54221ce42f
No known key found for this signature in database
13 changed files with 228 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

2
components/buttons/button-dropdown.vue
View file

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

2
components/notifications/notifications-renderer.vue
View file

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

10
components/social-elements/notes/note.vue
View file

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

32
components/social-elements/users/Account.vue
View file

@ -7,6 +7,7 @@
<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" />
<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()"
@ -21,6 +22,10 @@
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>

164
components/social-elements/users/AccountActionsDropdown.vue Normal file
View file

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

5
components/timelines/account.vue
View file

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

5
components/timelines/home.vue
View file

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

5
components/timelines/local.vue
View file

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

5
components/timelines/public.vue
View file

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

2
components/timelines/timeline.vue
View file

@ -87,6 +87,6 @@ onMounted(() => {
.timeline-item-enter-from,
.timeline-item-leave-to {
opacity: 0;
transform: translateX(30px);
scale: 0.99;
}
</style>

4
composables/EventBus.ts
View file

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

2
package.json
View file

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