feat: remove scrolling to bottom upon embed load as it causes it to happen on loading older messages

app.vue

@@ -1,21 +1,15 @@
 <template>
-  	<div>
+	<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" />
-    	<NuxtPage :keepalive="true" />
+	</div>
-  	</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()
 
@@ -25,11 +19,11 @@ onMounted(() => {
 		contextMenuHandler(e);
 	});
 	document.addEventListener("mousedown", (e) => {
-		if (e.target instanceof HTMLElement && e.target.closest("#context-menu")) return;
+		if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
 		console.log("click");
 		console.log("target:", e.target);
 		console.log(e.target instanceof HTMLDivElement);
-		removeContextMenu(contextMenu);
+		removeContextMenu();
 		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
 			e.target.contentEditable = "false";
 		}

components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, 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="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
+	<div v-else ref="messageElement" @contextmenu="createContextMenu($event, 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,12 +68,9 @@ 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);
@@ -142,19 +139,13 @@ console.log("media links:", mediaLinks);
 //	showHover.value = !showHover.value;
 //}
 
-const menuItems: ContextMenuItem[] = [
+const menuItems = [
-	{ name: "Reply", icon: "lucide:reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+	{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
 console.log("me:", props.me);
 if (props.author?.uuid == props.me.uuid) {
-	// Inserts "edit" option at index 1 (below the "reply" option)
+	menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
-	menuItems.splice(1, 0, { name: "Edit", icon: "lucide:square-pen", 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", icon: "lucide:trash", callback: () => {} });
 }
 
 function getDayDifference(date1: Date, date2: Date) {

components/UserInterface/ContextMenu.vue

@@ -1,13 +1,11 @@
 <template>
-	<div id="context-menu">
+	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
-		<button v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
+		{{ item.name }}
-			{{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
-		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
+import type { ContextMenuItem } from '~/types/interfaces';
 
 const props = defineProps<{ menuItems: ContextMenuItem[], pointerX: number, pointerY: number }>();
 
@@ -21,8 +19,7 @@ onMounted(() => {
 
 
 function runCallback(item: ContextMenuItem) {
-	const contextMenu = useState<ContextMenuInterface>("contextMenu");
+	removeContextMenu();
-	removeContextMenu(contextMenu);
 	item.callback();
 }
 
@@ -34,25 +31,10 @@ function runCallback(item: ContextMenuItem) {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	width: 10rem;
+	width: 10dvw;
-	border: .1rem solid var(--reply-text-color);
+	border: .15rem solid cyan;
-	background-color: var(--sidebar-highlighted-background-color);
+	background-color: var(--background-color);
-	text-align: left;
+	text-align: center;
-	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 {

components/UserInterface/ResizableSidebar.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
+import type { 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,8 +31,6 @@ const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
 const storedWidth = ref<number>();
 
-const contextMenu = useState<ContextMenuInterface>("contextMenu");
-
 const menuItems: ContextMenuItem[] = [
 	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
 ]
@@ -44,7 +42,7 @@ onMounted(() => {
 		widthResizer.value.addEventListener("pointerdown", (e) => {
 			e.preventDefault();
 			if (e.button == 2) {
-				showContextMenu(e, contextMenu.value, menuItems);
+				createContextMenu(e, menuItems);
 				return
 			};
 			document.body.style.cursor = "ew-resize";

types/interfaces.ts

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

utils/createContextMenu.ts

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

utils/showContextMenu.ts

@@ -1,12 +0,0 @@
-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");
-}