Merge branch 'main' into highlight-reply

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 = [
-	{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+const menuItems: ContextMenuItem[] = [
+	{ 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) {

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"
@@ -241,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;
 	}
 }
@@ -270,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);
-						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);
-							}
+						messages.value = [...olderMessages.map(msg => reactive(msg)), ...messages.value];
+						for (const message of messages.value) {
+							groupMessage(message);
 						}
-						offset += offset;
+						offset += amount;
 					}
 				} else {
 					fetched = false;

components/UserInterface/ContextMenu.vue

@@ -1,11 +1,15 @@
 <template>
-	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
-		{{ item.name }}
+	<div id="context-menu">
+		<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;
-	border: .15rem solid cyan;
-	background-color: var(--background-color);
-	text-align: center;
+	width: 10rem;
+	border: .1rem solid var(--reply-text-color);
+	background-color: var(--sidebar-highlighted-background-color);
+	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/ResizableSidebar.vue

@@ -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 }>();
 
@@ -31,6 +31,8 @@ const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
 const storedWidth = ref<string>();
 
+const contextMenu = useState<ContextMenuInterface>("contextMenu");
+
 const menuItems: ContextMenuItem[] = [
 	{ name: "Reset", callback: () => {
 		const defaultWidth = props.width ?? props.minWidth;
@@ -48,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";