gorb/frontend
4
0
Fork 0
Code Issues 14 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

Merge pull request 'More improvements to context menu' (#69) from context-menu-ban-kick into main
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source 
Reviewed-on: #69
Reviewed-by: Twig <git@beaver.mom>
This commit is contained in:
SauceyRed 2025-08-16 14:08:33 +00:00
commit 3e4e3e0ce8
13 changed files with 313 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

27
app.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<Banner v-if="banner" />
<ContextMenu v-if="contextMenu && contextMenu.show" :pointer-x="contextMenu.pointerX" :pointer-y="contextMenu.pointerY" :menu-items="contextMenu.items" />
<ContextMenu v-if="contextMenu && contextMenu.show" :pointer-x="contextMenu.pointerX" :pointer-y="contextMenu.pointerY" :menu-sections="contextMenu.sections" />
<NuxtPage :keepalive="true" />
</div>
</template>
@ -12,22 +12,29 @@ import type { ContextMenuInterface } from './types/interfaces';
const banner = useState("banner", () => false);
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, sections: [] }));
onMounted(() => {
loadPreferredThemes()
document.removeEventListener("contextmenu", contextMenuHandler);
document.addEventListener("contextmenu", (e) => {
if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
contextMenuHandler(e);
if (contextMenu.value.show) {
e.preventDefault();
if (e.target instanceof Element && !e.target.classList.contains("context-menu-item")) {
removeContextMenu(contextMenu);
}
}
});
document.addEventListener("mousedown", (e) => {
if (e.target instanceof HTMLElement && e.target.closest("#context-menu")) return;
if (e.target instanceof HTMLElement && e.target.classList.contains("context-menu-item")) return;
console.log("click");
console.log("target:", e.target);
console.log(e.target instanceof HTMLDivElement);
if (e.button != 2 && contextMenu.value.show) {
console.log("context menu is shown, hiding");
removeContextMenu(contextMenu);
}
if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
e.target.contentEditable = "false";
}
@ -52,14 +59,6 @@ onMounted(() => {
});
});
function contextMenuHandler(e: MouseEvent) {
e.preventDefault();
//console.log("Opened context menu");
//createContextMenu(e, [
// { name: "Wah", callback: () => { return } }
//]);
}
</script>
<style>

21
components/Guild/MemberEntry.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="member-item" @click.prevent="showModalPopup" tabindex="0">
<div class="member-item" @click.prevent="showModalPopup" tabindex="0" @contextmenu="showContextMenu($event, menuSections)">
<Avatar :profile="props.member" class="member-avatar"/>
<span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`">
{{ getDisplayName(props.member) }}
@ -7,11 +7,14 @@
</div>
<ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
:onFinish="hideModalPopup" :keepalive="false" />
<ModalConfirmation v-if="confirmationModal && confirmationModal.show" :action-name="confirmationModal.actionName"
:target-name="getDisplayName(props.member)" :callback="confirmationModal.callback"
:onClose="resetConfirmationModal" :onCancel="resetConfirmationModal" />
</template>
<script lang="ts" setup>
import { ModalProfilePopup } from '#components';
import type { GuildMemberResponse } from '~/types/interfaces';
import type { GuildMemberResponse, IConfirmationModal } from '~/types/interfaces';
const { getDisplayName } = useProfile()
@ -19,8 +22,12 @@ const props = defineProps<{
member: GuildMemberResponse
}>();
const confirmationModal = ref<IConfirmationModal>();
const menuSections = await createMemberContextMenuItems(props.member, props.member.guild_uuid, confirmationModal);
const modalPopupVisible = ref<boolean>(false);
function showModalPopup() {
modalPopupVisible.value = true
}
@ -28,9 +35,18 @@ function showModalPopup() {
function hideModalPopup() {
modalPopupVisible.value = false
}
function resetConfirmationModal() {
console.log("[CONFIRM] resetting");
if (confirmationModal) {
confirmationModal.value = { show: false, actionName: "", callback: () => {} };
}
}
</script>
<style>
.member-item {
display: flex;
margin-top: .5em;
@ -49,6 +65,7 @@ function hideModalPopup() {
}
.member-display-name {
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
}

62
components/Message.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, messageMenuSections)"
class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
:data-message-id="props.message.uuid" :editing.sync="props.editing">
<div v-if="props.replyMessage" class="message-reply-svg">
@ -27,11 +27,12 @@
:text="props.replyMessage?.message"
:reply-id="props.replyMessage.uuid" max-width="reply" />
<div class="left-column">
<Avatar :profile="props.message.member" class="message-author-avatar"/>
<Avatar :profile="props.message.member" class="message-author-avatar" @contextmenu="showContextMenu($event, memberMenuSections)" />
</div>
<div class="message-data">
<div class="message-metadata">
<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`"
@contextmenu="showContextMenu($event, memberMenuSections)">
{{ getDisplayName(props.message.member) }}
</span>
<span class="message-date" :title="date.toString()">
@ -45,7 +46,7 @@
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div>
</div>
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, messageMenuSections)"
class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
:data-message-id="props.message.uuid" :editing.sync="props.editing">
<div class="left-column">
@ -58,6 +59,9 @@
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
</div>
</div>
<ModalConfirmation v-if="confirmationModal && confirmationModal.show" :action-name="confirmationModal.actionName"
:target-name="getDisplayName(props.message.member)" :callback="confirmationModal.callback"
:onClose="resetConfirmationModal" :onCancel="resetConfirmationModal" />
</template>
<script lang="ts" setup>
@ -66,17 +70,17 @@ import { parse } from 'marked';
import type { MessageProps } from '~/types/props';
import MessageMedia from './MessageMedia.vue';
import MessageReply from './UserInterface/MessageReply.vue';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuSection, IConfirmationModal } from '~/types/interfaces';
const { getDisplayName } = useProfile()
const { getUser } = useAuth()
const route = useRoute();
const props = defineProps<MessageProps>();
const me = await getUser()
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
const messageElement = ref<HTMLDivElement>();
const dateHidden = ref<boolean>(true);
@ -85,6 +89,10 @@ const date = uuidToDate(props.message.uuid);
const currentDate: Date = new Date()
const confirmationModal = ref<IConfirmationModal>();
const memberMenuSections = ref<ContextMenuSection[]>([]);
console.log("[MSG] message to render:", props.message);
console.log("author:", props.message.member);
console.log("[MSG] reply message:", props.replyMessage);
@ -152,25 +160,39 @@ onMounted(async () => {
};
console.log("media links:", mediaLinks);
console.log("[CONFIRM] modal:", confirmationModal.value);
memberMenuSections.value = await createMemberContextMenuItems(props.message.member, route.params.serverId as string, confirmationModal);
});
//function toggleTooltip(e: Event) {
// showHover.value = !showHover.value;
//}
const menuItems: ContextMenuItem[] = [
{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
const messageMenuSections: ContextMenuSection[] = [];
const regularSection: ContextMenuSection = {
items: [
{
name: "Reply",
icon: "lucide:reply",
type: "normal",
callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props)}
}
]
};
console.log("me:", me);
if (props.message.member.user.uuid == me!.uuid) {
// Inserts "edit" option at index 1 (below the "reply" option)
menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
regularSection.items.push({ name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
}
if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
// Inserts "edit" option at index 2 (below the "edit" option)
menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
if (props.message.member.user.uuid == me!.uuid) {
regularSection.items.push({ name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
}
if (regularSection.items.length) {
messageMenuSections.push(regularSection);
}
function getDayDifference(date1: Date, date2: Date) {
@ -184,6 +206,13 @@ function getDayDifference(date1: Date, date2: Date) {
return Math.round(dayDifference);
}
function resetConfirmationModal() {
console.log("[CONFIRM] resetting");
if (confirmationModal) {
confirmationModal.value = { show: false, actionName: "", callback: () => {} };
}
}
</script>
<style scoped>
@ -243,6 +272,11 @@ function getDayDifference(date1: Date, date2: Date) {
max-height: 2.5em;
min-width: 2.5em;
max-width: 2.5em;
cursor: pointer;
}
.message-author-username {
cursor: pointer;
}
.left-column {

5
components/Modal/Base.vue
View file

@ -25,6 +25,11 @@ onMounted(() => {
if (props.onCancel) dialog.value.addEventListener("cancel", props.onCancel);
}
});
function close() { dialog.value?.close() }
defineExpose({ close });
</script>
<style scoped>

54
components/Modal/Confirmation.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<ModalBase ref="modal" class="confirmation-modal" :obscure="true" :onClose="props.onClose" :onCancel="props.onCancel">
<div class="confirmation-modal-body">
<div>
<h1 class="confirmation-modal-message">Are you sure you would like to {{ props.actionName.toLowerCase() }} {{ props.targetName }}?</h1>
</div>
<div class="confirmation-modal-buttons">
<Button :variant="'normal'" :text="'Cancel'" @click="closeModal()" />
<Button :variant="'scary'" :text="'Confirm'" :callback="props.callback" />
</div>
</div>
</ModalBase>
</template>
<script lang="ts" setup>
import Button from '../UserInterface/Button.vue';
const props = defineProps<{ actionName: string, targetName?: string, callback: CallableFunction, onClose: () => void, onCancel: () => void }>();
const modal = ref<{ close: () => void }>();
function closeModal() {
const test = document.getElementsByClassName("confirmation-modal")[0];
console.log("[CONFIRM] modal rah:", test);
if (modal.value) {
modal.value.close();
}
}
</script>
<style>
.confirmation-modal-body {
display: flex;
flex-direction: column;
background-color: var(--modal-background-color);
align-items: center;
text-align: center;
padding: 1rem;
color: var(--text-color);
border: .1rem solid var(--primary-color);
}
.confirmation-modal-buttons {
display: flex;
gap: 1rem;
}
.confirmation-modal-message {
font-size: 1.5em;
}
</style>

22
components/UserInterface/ContextMenu.vue
View file

@ -1,23 +1,33 @@
<template>
<div id="context-menu">
<button v-for="item of props.menuItems" class="context-menu-item"
<template v-for="(section, index) of props.menuSections">
<div class="context-menu-section">
<button v-for="item of section.items" class="context-menu-item"
:class="'context-menu-item-' + item.type"
@click="runCallback(item)">
{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
</button>
</div>
<VerticalSpacer v-if="index < props.menuSections.length - 1" class="context-menu-section-spacer" />
</template>
</div>
</template>
<script lang="ts" setup>
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from '~/types/interfaces';
import VerticalSpacer from './VerticalSpacer.vue';
const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
const props = defineProps<{ menuSections: ContextMenuSection[], pointerX: number, pointerY: number }>();
onMounted(() => {
const contextMenu = document.getElementById("context-menu");
if (contextMenu) {
contextMenu.style.left = props.pointerX.toString() + "px";
contextMenu.style.top = props.pointerY.toString() + "px";
const rect = contextMenu.getBoundingClientRect();
if (rect.right > (window.innerWidth || document.documentElement.clientWidth)) {
contextMenu.style.left = (props.pointerX - contextMenu.clientWidth).toString() + "px";
}
}
});
@ -38,7 +48,7 @@ function runCallback(item: ContextMenuItem) {
flex-direction: column;
width: 10rem;
border: .1rem solid var(--reply-text-color);
background-color: var(--sidebar-highlighted-background-color);
background-color: var(--popup-background-color);
text-align: left;
z-index: 100;
}
@ -65,4 +75,8 @@ function runCallback(item: ContextMenuItem) {
color: var(--danger-text-color);
}
.context-menu-section-spacer {
margin: 0 !important;
}
</style>

26
components/UserInterface/ResizableSidebar.vue
View file

@ -8,20 +8,22 @@
'border-top': props.borderSides?.includes('top') ? borderStyling : undefined,
'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined,
}">
<div v-if="props.borderSides != 'right'" class="width-resizer-bar">
<div v-if="props.borderSides != 'right'" class="width-resizer-bar"
@contextmenu="showContextMenu($event, menuSections)">
<div ref="widthResizer" class="width-resizer"></div>
</div>
<div class="sidebar-content">
<slot />
</div>
<div v-if="props.borderSides == 'right'" class="width-resizer-bar">
<div v-if="props.borderSides == 'right'" class="width-resizer-bar"
@contextmenu="showContextMenu($event, menuSections)">
<div ref="widthResizer" class="width-resizer"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from '~/types/interfaces';
const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
@ -31,16 +33,19 @@ const resizableSidebar = ref<HTMLDivElement>();
const widthResizer = ref<HTMLDivElement>();
const storedWidth = ref<string>();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const menuItems: ContextMenuItem[] = [
{ name: "Reset", type: "normal", callback: () => {
const menuSections: ContextMenuSection[] = [{
items: [
{
name: "Reset", type: "normal", callback: () => {
const defaultWidth = props.width ?? props.minWidth;
resizableSidebar.value!.style.width = defaultWidth;
if (props.localStorageName) {
localStorage.setItem(props.localStorageName, defaultWidth);
}
} }
}
}
]
}
]
onMounted(() => {
@ -48,11 +53,8 @@ onMounted(() => {
if (resizableSidebar.value && widthResizer.value) {
widthResizer.value.addEventListener("pointerdown", (e) => {
if (e.button != 0) return;
e.preventDefault();
if (e.button == 2) {
showContextMenu(e, contextMenu.value, menuItems);
return
};
document.body.style.cursor = "ew-resize";
function handleMove(pointer: PointerEvent) {
if (resizableSidebar.value) {

22
composables/api.ts
View file

@ -25,6 +25,17 @@ export const useApi = () => {
return await fetchWithApi("/me")
}
async function fetchMeMember(guildId: string): Promise<GuildMemberResponse | undefined> {
const { getUser } = useAuth();
const me = await getUser();
if (me) {
const members = await fetchMembers(guildId);
const meMember = members.objects.find(member => member.user.uuid == me.uuid);
return meMember;
}
}
async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
}
@ -48,6 +59,14 @@ export const useApi = () => {
return await fetchWithApi(`/guilds/${guildId}/members/${memberId}`);
}
async function kickMember(memberId: string) {
return await fetchWithApi(`/members/${memberId}`, { method: "DELETE" });
}
async function banMember(guildId: string, memberId: string) {
//
}
async function fetchUsers() {
return await fetchWithApi(`/users`);
}
@ -114,10 +133,13 @@ export const useApi = () => {
fetchGuild,
fetchMyGuilds,
fetchMe,
fetchMeMember,
fetchChannels,
fetchChannel,
fetchMembers,
fetchMember,
kickMember,
banMember,
fetchUsers,
fetchUser,
fetchFriends,

9
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -16,6 +16,8 @@
</template>
<script lang="ts" setup>
import type { GuildMemberResponse } from '~/types/interfaces';
const route = useRoute();
const { fetchGuild, fetchChannel } = useApi()
@ -28,6 +30,13 @@ const channelUrlPath = `channels/${channelId}`;
const guild = await fetchGuild(guildId)
const channel = await fetchChannel(channelId)
const { fetchMeMember } = useApi();
const me = useState<GuildMemberResponse | undefined>("me");
if (!me.value || me.value.guild_uuid != guildId) {
const fetchedMe = await fetchMeMember(guildId);
me.value = fetchedMe;
}
// function toggleInvitePopup(e: Event) {
// e.preventDefault();
// showInvitePopup.value = !showInvitePopup.value;

12
types/interfaces.ts
View file

@ -115,11 +115,16 @@ export interface ContextMenuItem {
callback: (...args: any[]) => any;
}
export interface ContextMenuSection {
name?: string
items: ContextMenuItem[]
}
export interface ContextMenuInterface {
show: boolean,
pointerX: number,
pointerY: number,
items: ContextMenuItem[]
sections: ContextMenuSection[]
}
export interface NavbarItem {
@ -140,3 +145,8 @@ export interface NavbarOptions {
isDirectMessages?: boolean
}
export interface IConfirmationModal {
show: boolean,
actionName: string,
callback: CallableFunction
}

70
utils/createMemberContextMenuItems.ts Normal file
View file

@ -0,0 +1,70 @@
import { Permission } from "~/types/enums";
import type { ContextMenuSection, GuildMemberResponse, IConfirmationModal } from "~/types/interfaces";
export default async (member: GuildMemberResponse, guildId: string, confirmationModal?: Ref<IConfirmationModal | undefined>) => {
const menuSections: ContextMenuSection[] = [];
const moderationSection: ContextMenuSection = {
name: "Moderation",
items: []
};
const me = useState<GuildMemberResponse | undefined>("me");
const { banMember, kickMember } = useApi();
console.log("[MENUITEM] hi");
console.log("[MENUITEM] member:", member.user.username);
console.log("[MENUITEM] me:", me.value?.user.username);
if (me.value && member.uuid != me.value.uuid) {
console.log("[MENUITEM] member is not me");
if (hasPermission(me.value, Permission.KickMember)) {
console.log("[MENUITEM] has kick member permission");
moderationSection.items.push({
name: "Kick",
icon: "lucide:user-x",
type: "danger",
callback: async () => {
if (confirmationModal) {
console.log("[CONFIRM] HEYO THERE!!");
confirmationModal.value = {
actionName: "kick",
callback: async () => await kickMember(member.uuid),
show: true
}
} else {
console.log("[CONFIRM] no modal");
await kickMember(member.uuid)
}
}
});
}
if (hasPermission(me.value, Permission.BanMember)) {
console.log("[MENUITEM] has ban permission");
moderationSection.items.push({
name: "Ban (WIP)",
icon: "lucide:ban",
type: "danger",
callback: async () => {
if (confirmationModal) {
console.log("[CONFIRM] HEYO THERE!! 2");
confirmationModal.value = {
actionName: "ban",
callback: async () => await banMember(member.guild_uuid, member.uuid),
show: true
}
} else {
console.log("[CONFIRM] no modal 2");
await banMember(member.guild_uuid, member.uuid)
}
}
});
}
}
if (moderationSection.items.length) {
menuSections.push(moderationSection);
}
console.log("[MENUITEM] returning menu items:", menuSections);
return menuSections;
}

2
utils/removeContextMenu.ts
View file

@ -6,7 +6,7 @@ export default (contextMenu: Ref<ContextMenuInterface>) => {
show: false,
pointerX: 0,
pointerY: 0,
items: []
sections: []
}
console.log("hidden context menu");
}

22
utils/showContextMenu.ts
View file

@ -1,12 +1,22 @@
import { render } from "vue";
import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
import type { ContextMenuInterface, ContextMenuItem } from "~/types/interfaces";
import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from "~/types/interfaces";
export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
export default (e: MouseEvent | PointerEvent, sections: ContextMenuSection[]) => {
e.preventDefault();
e.stopPropagation();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
if (contextMenu.value.show) {
removeContextMenu(contextMenu);
} else {
console.log("Menu sections:", sections);
if (sections.length) {
console.log("Showing context menu");
contextMenu.show = true;
contextMenu.pointerX = e.clientX;
contextMenu.pointerY = e.clientY;
contextMenu.items = menuItems;
contextMenu.value.show = true;
contextMenu.value.pointerX = e.clientX;
contextMenu.value.pointerY = e.clientY;
contextMenu.value.sections = sections;
console.log("Showed");
}
}
}