chore: sort components into subfolders

components/UserInterface/ContextMenu.vue

@@ -0,0 +1,44 @@
+<template>
+	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
+		{{ item.name }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenuItem } from '~/types/interfaces';
+
+const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
+
+onMounted(() => {
+	const contextMenu = document.getElementById("context-menu");
+	if (contextMenu) {
+		contextMenu.style.left = props.cursorX.toString() + "px";
+		contextMenu.style.top = props.cursorY.toString() + "px";
+	}
+});
+
+
+function runCallback(item: ContextMenuItem) {
+	removeContextMenu();
+	item.callback();
+}
+
+</script>
+
+<style>
+
+#context-menu {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	width: 10dvw;
+	border: .15rem solid cyan;
+	background-color: var(--background-color);
+	text-align: center;
+}
+
+.context-menu-item:hover {
+	background-color: rgb(50, 50, 50);
+}
+
+</style>

components/UserInterface/MessageReply.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :id="props.maxWidth == 'full' ? 'message-reply' : undefined" :class="{ 'message-reply-preview' : props.maxWidth == 'reply' }"
+  		:data-message-id="props.id" @click="scrollToReply">
+    <span id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></span>
+	<!-- <span id="message-reply-cancel"><Icon name="lucide:x" /></span> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import DOMPurify from "dompurify";
+import { parse } from "marked";
+
+const props = defineProps<{ author: string, text: string, id: string, replyId: string, maxWidth: "full" | "reply" }>();
+
+const existingReply = document.getElementById("message-reply");
+
+if (existingReply) {
+	existingReply.remove();
+}
+
+console.log("text:", props.text);
+
+const sanitized = ref<string>();
+
+onMounted(async () => {
+	
+	const parsed = await parse(props.text.trim().replaceAll("<br>", " "), { gfm: true });
+	
+	sanitized.value = DOMPurify.sanitize(parsed, {
+		ALLOWED_TAGS: [],
+		ALLOW_DATA_ATTR: false,
+		ALLOW_SELF_CLOSE_IN_ATTR: false,
+		ALLOWED_ATTR: [],
+		KEEP_CONTENT: true
+	});
+	
+	console.log("sanitized:", sanitized.value);
+
+	const messageBoxInput = document.getElementById("message-textbox-input") as HTMLDivElement;
+	if (messageBoxInput) {
+		messageBoxInput.focus();
+	}
+});
+
+function scrollToReply(e: MouseEvent) {
+	e.preventDefault();
+	console.log("clicked on reply box");
+	const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
+	if (reply) {
+		console.log("reply:", reply);
+		console.log("scrolling into view");
+		reply.scrollIntoView({ behavior: "smooth", block: "center" });
+	}
+}
+
+</script>
+
+<style scoped>
+
+#message-reply, .message-reply-preview {
+	display: flex;
+	text-align: left;
+	margin-bottom: .5rem;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+#message-reply {
+	width: 100%;
+}
+
+.message-reply-preview {
+	margin-left: .5dvw;
+}
+
+#reply-text {
+	color: var(--reply-text-color);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-bottom: 0;
+	margin-top: .2rem;
+	border-bottom: 1px solid var(--padding-color);
+
+}
+
+#reply-author-field {
+	color: var(--text-color);
+}
+
+</style>