Merge remote-tracking branch 'origin/main' into irc-colours

Reviewed-on: #39
Reviewed-by: JustTemmie <git@beaver.mom>

app.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import ContextMenu from '~/components/ContextMenu.vue';
+import ContextMenu from '~/components/UserInterface/ContextMenu.vue';
 import { render } from 'vue';
 
 const banner = useState("banner", () => false);
@@ -14,6 +14,7 @@ const banner = useState("banner", () => false);
 onMounted(() => {
 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
+		if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
 		contextMenuHandler(e);
 	});
 	document.addEventListener("mousedown", (e) => {

components/Guild/GuildOptionsMenu.vue

@@ -4,23 +4,20 @@
       <button class="guild-option-button" @click="setting.action" tabindex="0">{{ setting.name }}</button>
     </div>
   </div>
+  <ModalInvite v-if="showInviteModal" :guild-id="guildId" />
 </template>
 
 <script lang="ts" setup>
-import { render } from 'vue';
-import InviteModal from './InviteModal.vue';
 
 const settings = [
   { name: "Invite", icon: "lucide:letter", action: openInviteModal }
 ]
 
+const guildId = useRoute().params.serverId as string;
+const showInviteModal = ref(false);
+
 function openInviteModal() {
-  const div = document.createElement("div");
+  showInviteModal.value = true;
-  const guildId = useRoute().params.serverId as string;
-  console.log("guild id:", guildId);
-  const inviteModal = h(InviteModal, { guildId });
-  document.body.appendChild(div);
-  render(inviteModal, div);
 }
 
 </script>

components/Me/AddFriend.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '../UserInterface/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 
 const inputField = ref<HTMLInputElement>();
 const { addFriend } = useApi();

components/Message.vue

@@ -4,14 +4,10 @@
 			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
-				width="1.5em"
+				width="1.5em" height="1.5em"
-				height="1.5em"
+				viewBox="0 0 150 87.5" version="1.1" id="svg1"
-				viewBox="0 0 151.14355 87.562065"
-				version="1.1"
-				id="svg1"
-				xmlns="http://www.w3.org/2000/svg"
-				xmlns:svg="http://www.w3.org/2000/svg"
 				style="overflow: visible;">
+				<defs id="defs1" />
 				<defs
 					id="defs1" />
 				<g
@@ -50,8 +46,9 @@
 					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" tabindex="0"></div>
+			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
 		</div>
+		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 	<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 }"
@@ -62,8 +59,9 @@
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
 		</div>
+		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
@@ -72,6 +70,8 @@ import DOMPurify from 'dompurify';
 import { parse } from 'marked';
 import type { MessageProps } from '~/types/props';
 import generateIrcColor from '~/utils/generateIrcColor';
+import MessageMedia from './MessageMedia.vue';
+import MessageReply from './UserInterface/MessageReply.vue';
 
 const props = defineProps<MessageProps>();
 
@@ -86,6 +86,13 @@ console.log("[MSG] message to render:", props.message);
 console.log("author:", props.author);
 console.log("[MSG] reply message:", props.replyMessage);
 
+const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
+const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
+const mediaLinks: string[] = [];
+console.log("link matches:", linkMatches);
+
+const hasEmbed = ref(false);
+
 const sanitized = ref<string>();
 
 onMounted(async () => {
@@ -98,7 +105,7 @@ onMounted(async () => {
 		],
 		ALLOW_DATA_ATTR: false,
 		ALLOW_SELF_CLOSE_IN_ATTR: false,
-		ALLOWED_ATTR: []
+		ALLOWED_ATTR: ["href"]
 	});
 	console.log("adding listeners")
 	await nextTick();
@@ -112,6 +119,27 @@ onMounted(async () => {
 		});
 		console.log("added listeners");
 	}
+
+	for (const link of linkMatches) {
+	console.log("link:", link);
+	try {
+		const res = await $fetch.raw(link);
+		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
+			console.log("link is image");
+			mediaLinks.push(link);
+		}
+		if (mediaLinks.length) {
+			hasEmbed.value = true
+			setTimeout(() => {
+				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
+			}, 500);
+		};
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+console.log("media links:", mediaLinks);
 });
 
 //function toggleTooltip(e: Event) {

components/MessageArea.vue

@@ -252,6 +252,8 @@ onMounted(async () => {
 	if (import.meta.server) return;
 	console.log("[MSG] messages keys:", Object.values(messages.value));
 	if (messagesElement.value) {
+		await nextTick();
+		await nextTick();
 		scrollToBottom(messagesElement.value);
 		let fetched = false;
 		const amount = messages.value.length;

components/MessageMedia.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="media-container">
+		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ModalBase } from '#components';
+import { render } from 'vue';
+
+
+const props = defineProps<{ links: string[] }>();
+
+function createModal(link: string) {
+	const div = document.createElement("div");
+	const modal = h(ModalBase, {
+		obscure: true,
+		onClose: () => unrender(div),
+		onCancel: () => unrender(div),
+	},
+	[
+		h("img", {
+			src: link,
+			class: "default-contextmenu"
+		})
+	]);
+	
+	document.body.appendChild(div);
+	render(modal, div);
+}
+
+</script>
+
+<style scoped>
+
+.media-container {
+	grid-column: 2;
+	grid-row: 3;
+	margin-left: .5dvw;
+}
+
+.media-item {
+	cursor: pointer;
+	max-width: 15dvw;
+}
+
+</style>

components/Modal/Base.vue

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-import Button from './UserInterface/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();

components/Modal/Invite.vue

@@ -1,5 +1,5 @@
 <template>
-	<Modal v-bind="props" :title="props.title || 'Create an invite'">
+	<ModalBase v-bind="props" :title="props.title || 'Create an invite'">
 		<div v-if="invite" id="invite-body">
 			<div id="invite-label">{{ invite }}</div>
 			<div id="invite-buttons">
@@ -10,12 +10,12 @@
 		<div v-else>
 			<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
 		</div>
-	</Modal>
+	</ModalBase>
 </template>
 
 <script lang="ts" setup>
 import type { InviteResponse, ModalProps } from '~/types/interfaces';
-import Button from './UserInterface/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 
 const props = defineProps<ModalProps & { guildId: string }>();
 

layouts/client.vue

@@ -38,9 +38,9 @@
 </template>
 
 <script lang="ts" setup>
+import { ModalBase } from '#components';
 import { render } from 'vue';
-import Dropdown from '~/components/Dropdown.vue';
+import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
-import Modal from '~/components/Modal.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
@@ -54,7 +54,7 @@ const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
 			const div = document.createElement("div");
-			const guildJoinModal = h(Modal, {
+			const guildJoinModal = h(ModalBase, {
 				title: "Join Guild",
 				id: "guild-join-modal",
 				onClose: () => {
@@ -97,7 +97,7 @@ const options = [
 			console.log("create guild");
 			const user = await useAuth().getUser();
 			const div = document.createElement("div");
-			const guildCreateModal = h(Modal, {
+			const guildCreateModal = h(ModalBase, {
 				title: "Create a Guild",
 				id: "guild-join-modal",
 				onClose: () => {
@@ -138,49 +138,8 @@ const options = [
 
 const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
-//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
-//console.log("servers:", servers);
-const members = [
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed"
-	}
-];
-
 function createDropdown() {
-	const dropdown = h(Dropdown, { options });
+	const dropdown = h(GuildDropdown, { options });
 	const div = document.createElement("div");
 	div.classList.add("dropdown", "destroy-on-click");
 	if (createButtonContainer.value) {
@@ -261,6 +220,11 @@ function createDropdown() {
 	align-items: center;
 	gap: 1.5dvh;
 	overflow-y: scroll;
+	scrollbar-width: none;
+}
+
+#left-column-top::-webkit-scrollbar, #left-column-bottom::-webkit-scrollbar {
+	display: none;
 }
 
 #left-column-bottom {
@@ -331,4 +295,4 @@ function createDropdown() {
 	color: var(--primary-highlighted-color)
 }
 
-</style>
+</style>

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

@@ -25,6 +25,9 @@
 
 <script lang="ts" setup>
 import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
+import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
+import MemberEntry from "~/components/Member/MemberEntry.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 const route = useRoute();
 
@@ -41,8 +44,6 @@ const members = ref<GuildMemberResponse[]>();
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);
 
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
-
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
 

utils/createContextMenu.ts

@@ -1,5 +1,5 @@
 import { render } from "vue";
-import ContextMenu from "~/components/ContextMenu.vue";
+import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
 import type { ContextMenuItem } from "~/types/interfaces";
 
 export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {

utils/replyToMessage.ts

@@ -1,5 +1,5 @@
 import { render } from "vue";
-import MessageReply from "~/components/MessageReply.vue";
+import MessageReply from "~/components/UserInterface/MessageReply.vue";
 import type { MessageProps } from "~/types/props";
 
 export default (element: HTMLDivElement, props: MessageProps) => {