Merge remote-tracking branch 'origin/main' into fix-canvas-images

.woodpecker/build-and-publish.yml

@@ -8,7 +8,6 @@ steps:
       - pnpm build
     when:
     - event: push
-    - event: pull_request
 
   - name: container-build-and-publish
     image: docker

app.vue

@@ -1,15 +1,21 @@
 <template>
   	<div>
 		<Banner v-if="banner" />
+		<ContextMenu v-if="contextMenu && contextMenu.show" :pointer-x="contextMenu.pointerX" :pointer-y="contextMenu.pointerY" :menu-items="contextMenu.items" />
     	<NuxtPage :keepalive="true" />
   	</div>
 </template>
 
 <script lang="ts" setup>
+import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
+import { render } from 'vue';
+import type { ContextMenuInterface } from './types/interfaces';
 import loadPreferredTheme from '~/utils/loadPreferredTheme';
 
 const banner = useState("banner", () => false);
 
+const contextMenu = useState<ContextMenuInterface>("contextMenu");
+
 onMounted(() => {
 	loadPreferredTheme()
 
@@ -19,11 +25,11 @@ onMounted(() => {
 		contextMenuHandler(e);
 	});
 	document.addEventListener("mousedown", (e) => {
-		if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
+		if (e.target instanceof HTMLElement && e.target.closest("#context-menu")) return;
 		console.log("click");
 		console.log("target:", e.target);
 		console.log(e.target instanceof HTMLDivElement);
-		removeContextMenu();
+		removeContextMenu(contextMenu);
 		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
 			e.target.contentEditable = "false";
 		}
@@ -40,6 +46,10 @@ onMounted(() => {
 		if (e.key == "Escape" && messageReply) {
 			e.preventDefault();
 			messageReply.remove();
+			const replyToMessage = document.querySelector(`.message[data-message-id='${messageReply.dataset.messageId}']`);
+			if (replyToMessage) {
+				replyToMessage.classList.remove("replying-to");
+			}
 		}
 	});
 });

components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
@@ -47,7 +47,7 @@
 		</div>
 		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
-	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
 			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
 			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div class="left-column">
@@ -68,9 +68,12 @@ 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';
 
 const props = defineProps<MessageProps>();
 
+const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
+
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
@@ -126,9 +129,6 @@ onMounted(async () => {
 		}
 		if (mediaLinks.length) {
 			hasEmbed.value = true
-			setTimeout(() => {
-				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
-			}, 500);
 		};
 	} catch (error) {
 		console.error(error);
@@ -142,13 +142,19 @@ console.log("media links:", mediaLinks);
 //	showHover.value = !showHover.value;
 //}
 
-const menuItems = [
+const menuItems: ContextMenuItem[] = [
-	{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
 console.log("me:", props.me);
 if (props.author?.uuid == props.me.uuid) {
-	menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
+	// 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) */ } });
+}
+
+if (props.author?.uuid == props.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: () => {} });
 }
 
 function getDayDifference(date1: Date, date2: Date) {
@@ -287,3 +293,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	padding-left: 1em;
 }
 </style>
+
+<style>
+
+.replying-to {
+	background-color: var(--primary-highlighted-color);
+}
+
+</style>

components/MessageArea.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)" :key="message.uuid"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
@@ -221,6 +221,10 @@ function sendMessage(e: Event) {
 		if (messageReply && messageReply.dataset.messageId) {
 			console.log("[MSG] message is a reply");
 			message.reply_to = messageReply.dataset.messageId;
+			const replyToMessage = document.querySelector(`.message[data-message-id='${message.reply_to}']`);
+			if (replyToMessage) {
+				replyToMessage.classList.remove("replying-to");
+			}
 		}
 
 		console.log("[MSG] sent message:", message);
@@ -237,12 +241,8 @@ function sendMessage(e: Event) {
 }
 
 function getReplyMessage(id: string) {
-	console.log("[REPLYMSG] id:", id);
 	const messagesValues = Object.values(messages.value);
-	console.log("[REPLYMSG] messages values:", messagesValues);
 	for (const message of messagesValues) {
-		console.log("[REPLYMSG] message:", message);
-		console.log("[REPLYMSG] IDs match?", message.uuid == id);
 		if (message.uuid == id) return message;
 	}
 }
@@ -266,21 +266,14 @@ onMounted(async () => {
 					if (fetched) return;
 					fetched = true;
 					console.log("scroll height is at 10% or less");
-					//console.log("current oldest:", currentOldestMessage);
 					const olderMessages = await fetchMessages(route.params.channelId as string, { amount, offset });
-					if (olderMessages) {
+					if (olderMessages?.length) {
 						olderMessages.reverse();
-						console.log("older messages:", olderMessages);
+						messages.value = [...olderMessages.map(msg => reactive(msg)), ...messages.value];
-						if (olderMessages.length == 0) return;
-						olderMessages.reverse();
-						for (const [i, oldMessage] of olderMessages.entries()) {
-							console.log("old message:", oldMessage);
-							messages.value.unshift(oldMessage);
 						for (const message of messages.value) {
 							groupMessage(message);
 						}
-						}
+						offset += amount;
-						offset += offset;
 					}
 				} else {
 					fetched = false;

components/Popups/CropPopup.vue

@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import Cropper from 'cropperjs';
+import Button from '../UserInterface/Button.vue';
 
 const props = defineProps({
   imageSrc: String,

components/Settings/UserSettings/Profile.vue

@@ -33,6 +33,7 @@
 </template>
 
 <script lang="ts" setup>
+import CropPopup from '~/components/Popups/CropPopup.vue';
 import UserPopup from '~/components/User/UserPopup.vue';
 import Button from '~/components/UserInterface/Button.vue';
 
@@ -41,7 +42,7 @@ import type { UserResponse } from '~/types/interfaces';
 let newPfpFile: File;
 const isCropPopupVisible = ref(false);
 const cropImageSrc = ref("")
-;
+
 const { fetchUser } = useAuth();
 
 const user: UserResponse | undefined = await fetchUser()

components/UserInterface/ContextMenu.vue

@@ -1,11 +1,15 @@
 <template>
-	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
+	<div id="context-menu">
-		{{ item.name }}
+		<button v-for="item of props.menuItems" 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>
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuItem } from '~/types/interfaces';
+import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
 
@@ -19,7 +23,8 @@ onMounted(() => {
 
 
 function runCallback(item: ContextMenuItem) {
-	removeContextMenu();
+	const contextMenu = useState<ContextMenuInterface>("contextMenu");
+	removeContextMenu(contextMenu);
 	item.callback();
 }
 
@@ -31,14 +36,33 @@ function runCallback(item: ContextMenuItem) {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	width: 10dvw;
+	width: 10rem;
-	border: .15rem solid cyan;
+	border: .1rem solid var(--reply-text-color);
-	background-color: var(--background-color);
+	background-color: var(--sidebar-highlighted-background-color);
-	text-align: center;
+	text-align: left;
+	z-index: 100;
+}
+
+.context-menu-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 2rem;
+	width: 100%;
+	color: var(--text-color);
+	background-color: var(--sidebar-highlighted-background-color);
+	border: none;
+	text-align: left;
+	padding-left: 1rem;
+	padding-right: 1rem;
 }
 
 .context-menu-item:hover {
 	background-color: rgb(50, 50, 50);
 }
 
+.context-menu-item-danger {
+	color: var(--danger-text-color);
+}
+
 </style>

components/UserInterface/MessageReply.vue

@@ -46,11 +46,22 @@ onMounted(async () => {
 function scrollToReply(e: MouseEvent) {
 	e.preventDefault();
 	console.log("clicked on reply box");
-	const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
+	let replyId: string;
-	if (reply) {
+	if (props.maxWidth == "reply") {
+		replyId = props.replyId;
+	} else {
+		replyId = props.id;
+	}
+	const reply = document.querySelector(`.message[data-message-id="${replyId}"]`);
+	if (reply instanceof HTMLDivElement) {
 		console.log("reply:", reply);
 		console.log("scrolling into view");
 		reply.scrollIntoView({ behavior: "smooth", block: "center" });
+		reply.style.transition = "background-color .3s";
+		reply.style.backgroundColor = "var(--primary-highlighted-color)";
+		setTimeout(() => {
+			reply.style.backgroundColor = "";
+		}, 1000);
 	}
 }
 

components/UserInterface/ResizableSidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div ref="resizableSidebar" class="resizable-sidebar"
 			:style="{
-				'width': storedWidth ? `${storedWidth}px` : props.width,
+				'width': storedWidth ? storedWidth : props.width,
 				'min-width': props.minWidth,
 				'max-width': props.maxWidth,
 				'border': props.borderSides == 'all' ? borderStyling : undefined,
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuItem } from '~/types/interfaces';
+import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
 
@@ -29,10 +29,18 @@ const borderStyling = ".1rem solid var(--padding-color)";
 
 const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
-const storedWidth = ref<number>();
+const storedWidth = ref<string>();
+
+const contextMenu = useState<ContextMenuInterface>("contextMenu");
 
 const menuItems: ContextMenuItem[] = [
-	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
+	{ name: "Reset", callback: () => {
+		const defaultWidth = props.width ?? props.minWidth;
+		resizableSidebar.value!.style.width = defaultWidth;
+		if (props.localStorageName) {
+			localStorage.setItem(props.localStorageName, defaultWidth);
+		}
+	} }
 ]
 
 onMounted(() => {
@@ -42,7 +50,7 @@ onMounted(() => {
 		widthResizer.value.addEventListener("pointerdown", (e) => {
 			e.preventDefault();
 			if (e.button == 2) {
-				createContextMenu(e, menuItems);
+				showContextMenu(e, contextMenu.value, menuItems);
 				return
 			};
 			document.body.style.cursor = "ew-resize";
@@ -88,7 +96,7 @@ function loadStoredWidth() {
 	if (props.localStorageName) {
 		const storedWidthValue = localStorage.getItem(props.localStorageName);
 		if (storedWidthValue) {
-			storedWidth.value = parseInt(storedWidthValue) || undefined;
+			storedWidth.value = storedWidthValue;
 			console.log("[res] loaded stored width");
 		}
 	}

composables/api.ts

@@ -94,6 +94,10 @@ export const useApi = () => {
 		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
 	}
 
+	async function fetchInvite(id: string): Promise<GuildResponse | undefined> {
+		return await fetchWithApi(`/invites/${id}`);
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
@@ -115,6 +119,7 @@ export const useApi = () => {
 		fetchInstanceStats,
 		sendVerificationEmail,
 		sendPasswordResetEmail,
-		resetPassword
+		resetPassword,
+		fetchInvite
 	}
 }

composables/auth.ts

@@ -41,7 +41,7 @@ export const useAuth = () => {
   async function logout() {
     console.log("access:", accessToken.value);
 
-    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    await fetchWithApi("/auth/logout", { method: "DELETE", credentials: "include" });
     clearAuth();
 
 	  return await navigateTo("/login");

layouts/client.vue

@@ -50,6 +50,7 @@ import { ModalBase } from '#components';
 import { render } from 'vue';
 import DefaultIcon from '~/components/DefaultIcon.vue';
 import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
+import Loading from '~/components/Popups/Loading.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import type { GuildResponse } from '~/types/interfaces';

pages/invite/[inviteId].vue

@@ -0,0 +1,180 @@
+<template>
+  <div id="invite-root">
+	<div id="invite-container">
+		<div id="guild-container" v-if="guild">
+			<h1>You have been invited to {{ guild.name }}!</h1>
+			<div id="guild-card">
+				<div id="card-grid">
+					<div id="guild-details">
+						<div id="guild-name" title="Server name">
+							<span>{{ guild.name }}</span>
+						</div>
+						<div id="guild-member-count" :title="`${guild.member_count} members`">
+							<Icon name="lucide:users" />
+							<span>{{ guild.member_count }}</span>
+						</div>
+					</div>
+					<VerticalSpacer id="space" />
+					<div id="guild-description">
+						<span>{{ guild.description }}</span>
+					</div>
+					<div id="guild-icon">
+						<NuxtImg v-if="guild.icon" id="guild-icon-img" :src="guild.icon" :alt="`${guild.name} server icon`" />
+					</div>
+				</div>
+				<Button :text="isMember ? 'Joined' : 'Join'" variant="normal" :callback="acceptInvite" />
+			</div>
+		</div>
+		<div v-else-if="errorMessage">
+			<h1>{{ errorMessage }}</h1>
+		</div>
+	</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+
+const route = useRoute();
+const { fetchInvite, joinGuild, fetchMembers } = useApi();
+const { getUser } = useAuth();
+
+const inviteId = route.params.inviteId as string;
+
+const guild = ref<GuildResponse>();
+const errorMessage = ref<string>();
+const isMember = ref(false);
+
+const accessToken = useCookie("access_token");
+
+if (inviteId) {
+	try {
+		guild.value = await fetchInvite(inviteId);
+		console.log("invite guild:", guild.value);
+		if (accessToken.value && guild.value) {
+			const members = await fetchMembers(guild.value.uuid);
+			const me = await getUser();
+			if (me && members.find(member => member.user.uuid == me.uuid)) {
+				isMember.value = true;
+			}
+		} 
+	} catch (error: any) {
+		if (error.response) {
+			if (error.status == 404) {
+				errorMessage.value = "That invite doesn't exist or has expired.";
+			}
+		}
+		console.error(error);
+	}
+}
+
+async function acceptInvite() {
+	if (accessToken.value && guild.value) {		
+		await joinGuild(inviteId);
+		return await navigateTo(`/servers/${guild.value.uuid}`);
+	}
+
+	return await navigateTo(`/login?redirect_to=${route.fullPath}`);
+}
+
+</script>
+
+<style>
+
+#invite-root {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100dvh;
+}
+
+#invite-container {
+	border: .5rem solid var(--chat-highlighted-background-color);
+	border-radius: var(--standard-radius);
+	height: 50%;
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-card {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	background-color: var(--sidebar-highlighted-background-color);
+	border: .5rem solid black;
+	border-radius: var(--standard-radius);
+	padding: .5rem;
+}
+
+#card-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 5rem auto 1fr;
+	height: 100%;
+	width: 100%;
+}
+
+#guild-details {
+	grid-row: 1;
+	grid-column: span 2;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-name {
+	font-size: 2rem;
+	flex-direction: column;
+}
+
+#guild-member-count {
+	gap: .3rem;
+}
+
+#space {
+	grid-row: 2;
+	grid-column: span 3;
+}
+
+#guild-description {
+	grid-row: 3;
+	grid-column: span 3;
+	word-break: break-all;
+	padding: .3rem;
+}
+
+#guild-name, #guild-member-count {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-icon-img {
+	height: 100%;
+	width: 100%;
+	object-fit: scale-down;
+}
+
+</style>

pages/servers/[serverId]/channels/[channelId].vue

@@ -77,7 +77,7 @@ onActivated(async () => {
 });
 
 async function setArrayVariables() {
-	members.value = sortMembers(await fetchMembers(route.params.serverId as string))
+	members.value = await fetchMembers(route.params.serverId as string);
 	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);

public/themes/ash.css

@@ -2,6 +2,7 @@
 	--text-color: #f0e5e0;
 	--secondary-text-color: #e8e0db;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
 	--chat-background-color: #2f2e2d;
     --chat-highlighted-background-color: #3f3b38;

public/themes/dark.css

@@ -2,6 +2,7 @@
 	--text-color: #f7eee8;
 	--secondary-text-color: #f0e8e4;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
 	--chat-background-color: #1f1e1d;
     --chat-highlighted-background-color: #2f2b28;

public/themes/light.css

@@ -2,6 +2,7 @@
 	--text-color: #170f08;
 	--secondary-text-color: #2f2b28;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
     --chat-background-color: #f0ebe8;
     --chat-highlighted-background-color: #e8e4e0;

public/themes/rainbow-capitalism.css

@@ -2,6 +2,7 @@
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
 	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
 
     --chat-background-color: #80808000;
     --chat-highlighted-background-color: #ffffff20;

types/interfaces.ts

@@ -101,5 +101,14 @@ export interface ModalProps {
 
 export interface ContextMenuItem {
 	name: string,
+	icon?: string,
+	type: "normal" | "danger"
 	callback: (...args: any[]) => any;
 }
+
+export interface ContextMenuInterface {
+	show: boolean,
+	pointerX: number,
+	pointerY: number,
+	items: ContextMenuItem[]
+}

utils/createContextMenu.ts

@@ -1,21 +0,0 @@
-import { render } from "vue";
-import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
-import type { ContextMenuItem } from "~/types/interfaces";
-
-export default (e: PointerEvent | MouseEvent, menuItems: ContextMenuItem[]) => {
-  console.log("Rendering new context menu");
-  const menuContainer = document.createElement("div");
-  console.log("hello");
-  menuContainer.id = "context-menu";
-  document.body.appendChild(menuContainer);
-  console.log("pointer x:", e.clientX);
-  console.log("pointer y:", e.clientY);
-  console.log("menu items:", menuItems);
-  const contextMenu = h(ContextMenu, {
-  	menuItems,
-  	pointerX: e.clientX,
-  	pointerY: e.clientY 
-  });
-  render(contextMenu, menuContainer);
-  console.log("Rendered");
-}

utils/removeContextMenu.ts

@@ -1,6 +1,12 @@
-export default () => {
+import type { ContextMenuInterface } from "~/types/interfaces";
-	const contextMenu = document.getElementById("context-menu");
+
-	if (contextMenu) {
+export default (contextMenu: Ref<ContextMenuInterface>) => {
-		contextMenu.remove();
+	console.log("resetting and hiding context menu");
+	contextMenu.value = {
+		show: false,
+		pointerX: 0,
+		pointerY: 0,
+		items: []
 	}
+	console.log("hidden context menu");
 }

utils/replyToMessage.ts

@@ -10,5 +10,9 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
+		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);
+		if (message) {
+			message.classList.add("replying-to");
+		}
 	}
 }

utils/showContextMenu.ts

@@ -0,0 +1,12 @@
+import { render } from "vue";
+import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
+import type { ContextMenuInterface, ContextMenuItem } from "~/types/interfaces";
+
+export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
+  console.log("Showing context menu");
+  contextMenu.show = true;
+  contextMenu.pointerX = e.clientX;
+  contextMenu.pointerY = e.clientY;
+  contextMenu.items = menuItems;
+  console.log("Showed");
+}