typing indicator, mentions + bug fixes

2023-01-14 06:37:13 -06:00
parent c39da0678d
commit f1c5537697
23 changed files with 629 additions and 190 deletions
--- a/components/DropdownItem.vue
+++ b/components/DropdownItem.vue
@@ -1,8 +1,15 @@
 <template>
 	<li>
 		<button
-			class="w-full cursor-pointer bg-[hsl(225,7.7%,10.2%)] hover:bg-[hsl(225,7.7%,17.4%)] text-left px-3 py-1.5 rounded-md flex items-center">
+			class="w-full cursor-pointer bg-[hsl(225,7.7%,10.2%)] hover:bg-[hsl(225,7.7%,17.4%)] text-left px-3 py-1.5 rounded-md flex items-center justify-between transition-colors"
+			:class="(danger) ? 'hover:bg-[hsl(359,66.7%,54.1%)]' : ''">
 			<slot />
 		</button>
 	</li>
-</template>
+</template>
+
+<script>
+export default {
+	props: ['danger']
+}
+</script>
--- a/components/DropdownMenu.vue
+++ b/components/DropdownMenu.vue
@@ -23,8 +23,7 @@ export default {
 	transform-origin: bottom center;
 }

-.dropdown-inverse > ul {
-	display: flex;
+.dropdown-inverse > div > ul {
 	flex-direction: column-reverse;
 }

--- a/components/InviteCard.vue
+++ b/components/InviteCard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="w-6/12 bg-[hsl(223,6.9%,19.8%)] p-4 rounded-md shadow-md mr-2">
+	<div class="w-6/12 bg-[hsl(223,6.9%,19.8%)] mb-1 mt-0.5 p-4 rounded-md shadow-md mr-2">
 		<p class="text-sm font-semibold text-zinc-100">You've been invited to join a
 			server</p>
 		<span class="text-xl font-bold capitalize leading-loose">{{ invite.server.name }}</span>
@@ -47,6 +47,7 @@ export default {
 			const { server } = await $fetch('/api/guilds/joinGuild', { method: 'POST', body: { inviteId: invite.id }, headers })
 			if (!server) return;
 			this.servers?.push(server)
+			this.invite.server.participants.push(this.user)
 		},
 	}
 }
--- a/components/MessagePane.vue
+++ b/components/MessagePane.vue
@@ -1,29 +1,66 @@
 <template>
 	<div class="h-full bg-[hsl(220,calc(1*7.7%),22.9%)] relative text-white">
-		<div class="bg-[hsl(220,calc(1*7.7%),22.9%)] absolute w-full shadow px-4 py-3 flex items-center z-[1] shadow-zinc-900/50">
-			<span>
-				<svg class="text-zinc-300/80 my-auto" xmlns="http://www.w3.org/2000/svg"
-					width="24"
-					height="24"
-					viewBox="0 0 24 24">
-					<path fill="currentColor"
-						d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" />
-				</svg>
-			</span>
-			<span class="text-zinc-100 font-semibold">{{ server.name }}</span>
+		<div class="bg-[hsl(220,calc(1*7.7%),22.9%)] absolute w-full shadow px-4 py-3 z-[1] shadow-zinc-900/50">
+			<div v-if="!server.DM"
+				class="flex items-center">
+				<span class="mr-1">
+					<svg class="text-zinc-300/80 my-auto"
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<path fill="currentColor"
+							d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z" />
+					</svg>
+				</span>
+				<span class="text-zinc-100 font-semibold">{{ server.name }}</span>
+			</div>
+			<div v-else
+				class="flex items-center">
+				<span class="mr-1">
+					<svg class="text-zinc-300/80 my-auto"
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24">
+						<g fill="none"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2">
+							<circle cx="12"
+								cy="12"
+								r="4" />
+							<path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" />
+						</g>
+					</svg>
+				</span>
+				<span class="text-zinc-100 font-semibold">{{
+					server.dmParticipants.find((e: IUser) => e.id !==
+						user.id).username
+				}}</span>
+			</div>
 		</div>
-		<div class="w-full h-[calc(100%-60px)] overflow-y-scroll pb-1"
+		<div class="w-full h-[calc(100%-76px-48px)] top-[48px] absolute overflow-y-scroll pb-1"
 			id="conversation-pane">
 			<div>
 				<div v-if="conversation.length === 0">
 					<p>No messages yet</p>
 				</div>
 				<div v-else
-					v-for="message in conversation">
-					<div class="message-container">
+					v-for="(message, i) in conversation">
+					<div class="transition-[backdrop-filter] hover:backdrop-brightness-110 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2"
+						:class="(i === 0 || conversation[i - 1].creator.id !== message.creator.id) ?
+	(i === conversation.length - 1 || conversation[i + 1].creator.id !== message.creator.id) ?
+						/* above and below message is not ours */ '' :
+						/* below message is ours */ 'mb-0 pb-0.5' :
+	(i === conversation.length - 1 || conversation[i + 1].creator.id !== message.creator.id) ?
+						/* above message is ours */ 'mt-0 pt-0.5 pb-1' :
+						/* above and below message is ours */ 'mt-0 mb-0 py-0.5'">
 						<div>
 							<div class="message-sender-text">
-								<p class="mb-1.5 font-semibold">
+								<p class="mb-1 font-semibold"
+									v-if="i === 0 || conversation[i - 1].creator.id !== message.creator.id">
 									{{ message.creator.username }}
 								</p>
 								<p class="break-words max-w-full">{{ message.body }}</p>
@@ -36,10 +73,22 @@
 				</div>
 			</div>
 		</div>
-		<div class="conversation-input w-[calc(100vw-88px-240px)] h-[61.1px]">
-			<form @submit.prevent="sendMessage"
+		<div v-if="showSearch"
+			class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[hsl(223,6.9%,19.8%)] rounded-lg shadow-md z-5">
+			<div class="relative flex flex-col">
+				<div v-for="user in searchResults"
+					class="mx-2 my-1 w-[calc(100vw-88px-240px-64px-16px)] px-4 py-3 hover:bg-[hsl(223,6.9%,24.3%)] select-none rounded-md transition-colors"
+					@click="completeMention(user)">
+					{{ user.username }}
+				</div>
+			</div>
+		</div>
+		<div class="conversation-input w-[calc(100vw-88px-240px)] h-[75px]">
+			<form @keyup="checkForMentions"
+				@keypress="typing($event)"
+				@submit.prevent="sendMessage"
 				@keydown.enter.exact.prevent="sendMessage"
-				class="relative px-4 w-full pt-1.5">
+				class="relative px-4 w-full pt-1.5 h-fit pb-1">
 				<div id="textbox"
 					class="px-4 rounded-md w-full h-[44px] bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[hsl(218,calc(1*4.6%),46.9%)] flex flex-row">
 					<textarea type="text"
@@ -63,15 +112,30 @@
 								d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1L21 3" />
 						</svg></label>
 				</div>
+				<div class="w-full">
+					<p class="text-sm"
+						v-if="usersTyping.length > 0">
+						<span v-if="usersTyping.length < 4">
+							<span v-for="(username, i) in usersTyping"
+								class="font-semibold">
+								<span v-if="i === usersTyping.length - 1 && usersTyping.length > 1">and </span>
+								{{ username }}
+								<span v-if="i !== usersTyping.length - 1 && usersTyping.length > 1">, </span>
+							</span>
+							is typing
+						</span>
+						<span v-else>Several users are typing</span>
+					</p>
+				</div>
 			</form>
 		</div>
 	</div>
 </template>

 <script lang="ts">
+import { Server } from 'socket.io';
 import { useGlobalStore } from '~/stores/store';
-import { io } from 'socket.io-client'
-import { IChannel, IInviteCode, IMessage } from '~/types';
+import { IMessage, IUser } from '~/types';

 export default {
 	props: ['server'],
@@ -81,12 +145,16 @@ export default {
 			messageContent: '',
 			conversation: this.server.messages as IMessage[],
 			canSendNotifications: false,
-			servers: storeToRefs(useGlobalStore()).servers
+			servers: storeToRefs(useGlobalStore()).servers,
+			usersTyping: [] as string[],
+			socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
+			showSearch: false,
+			searchResults: [] as IUser[],
+			search: ''
 		}
 	},
 	mounted() {
 		const route = useRoute()
-		const socket = io();

 		Notification.requestPermission().then((result) => {
 			const permission = (result === 'granted') ? true : false
@@ -97,13 +165,25 @@ export default {
 		if (!conversationDiv) throw new Error('conversation div not found')
 		this.scrollToBottom()

-		socket.on(`message-${route.params.id}`, (ev) => {
+		this.socket.on(`message-${route.params.id}`, (ev: { message: IMessage }) => {
 			const { message } = ev
 			if (message.creator.id === this.user.id) return;
 			if (!document.hasFocus()) {
-				new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: message.serverId });
+				new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: route.params.id });
 			}

+			const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g);
+
+			if (mentions) {
+				const participants = (this.server.DM) ? this.server.dmParticipants : this.server.participants;
+				mentions.forEach((e: string) => {
+					if (!e) return
+					const id = e.split('<@')[1]?.split('>')[0];
+					if (!id) return;
+					const user = participants.find((e) => e.id === id)
+					message.body = message.body.split(e).join(`@${user.username}`)
+				});
+			}
 			this.conversation.push(message)

 			const lastElementChild = conversationDiv.children[0]?.lastElementChild
@@ -114,10 +194,20 @@ export default {
 				conversationDiv.scrollTop = conversationDiv.scrollHeight;
 			})
 		});
+
+		let timeout: NodeJS.Timeout;
+		this.socket.on(`typing-${route.params.id}`, (ev: string) => {
+			if (ev === this.user.username) return;
+			clearTimeout(timeout)
+			timeout = setTimeout(() => {
+				this.usersTyping = this.usersTyping.filter(username => username !== ev)
+			}, 750);
+			if (this.usersTyping.includes(ev)) return;
+			this.usersTyping.push(ev);
+		})
 	},
 	unmounted() {
-		const socket = io();
-		socket.removeAllListeners();
+		this.socket.removeAllListeners();
 	},
 	methods: {
 		async sendMessage() {
@@ -130,7 +220,22 @@ export default {
 			if (!message) return;
 			if (this.conversation.includes(message)) return;

+			const mentions = message.body.match(/<@([a-z]|[0-9]){25}>/g);
+
+			if (mentions) {
+				const participants = (this.server.DM) ? this.server.dmParticipants : this.server.server.participants;
+				console.log(participants)
+				mentions.forEach((e: string) => {
+					if (!e) return
+					const id = e.split('<@')[1]?.split('>')[0];
+					if (!id) return;
+					const user = participants.find((e) => e.id === id)
+					message.body = message.body.split(e).join(`@${user.username}`)
+					console.log(id)
+				});
+			}
 			this.conversation.push(message)
+			console.log('sent')
 			this.messageContent = '';
 			const conversationDiv = document.getElementById('conversation-pane');
 			if (!conversationDiv) throw new Error('wtf');
@@ -142,6 +247,76 @@ export default {
 			const conversationDiv = document.getElementById('conversation-pane');
 			if (!conversationDiv) throw new Error('wtf');
 			conversationDiv.scrollTo(0, conversationDiv.scrollHeight);
+		},
+		typing(event: KeyboardEvent) {
+			const specialKeys = [
+				"Backspace",
+				"Enter",
+				"Shift",
+				"Control"
+			]
+			if (specialKeys.indexOf(event.key) !== -1) {
+				return
+			}
+
+			if (event.ctrlKey) {
+				return
+			}
+			const route = useRoute()
+			this.socket.emit(`typing`, route.params.id);
+		},
+		checkForMentions() {
+			const input = document.getElementById('messageBox') as HTMLTextAreaElement;
+			const startPosition = input.selectionStart;
+			const endPosition = input.selectionEnd;
+
+			if (startPosition === endPosition && this.inMention(startPosition)) {
+				let participants
+				if (this.server.DM) {
+					participants = this.server.dmParticipants
+				} else {
+					participants = this.server.server.participants
+				}
+
+				this.search = this.messageContent.split(' ')[this.messageContent.substring(0, startPosition).split(' ').length - 1].slice(1);
+				if (this.search.length === 0) {
+					this.showSearch = false
+					return;
+				}
+
+				const results = participants.filter((e: IUser) => e.username.includes(this.search)).sort((a: IUser, b: IUser) => {
+					const usernameA = a.username.toLowerCase();
+					const usernameB = b.username.toLowerCase();
+
+					if (usernameA < usernameB) {
+						return -1
+					} else if (usernameA > usernameB) {
+						return 1
+					} else {
+						return 0
+					}
+				})
+
+				if (results.length === 0) {
+					this.showSearch = false;
+					return;
+				}
+				this.searchResults = results
+				this.showSearch = true;
+			} else {
+				this.showSearch = false
+			}
+		},
+		inMention(cursorPos: number): boolean {
+			if (this.messageContent[cursorPos - 1] === '@') return true;
+			if (this.messageContent[cursorPos - 1] === ' ') return false;
+			if (cursorPos === 0) return false;
+			return this.inMention(cursorPos - 1)
+		},
+		completeMention(user: IUser) {
+			this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`)
+			this.showSearch = false;
+			document.getElementById('messageBox')?.focus()
 		}
 		// resizeTextarea() {
 		// 	const textArea = document.getElementById('messageBox')
@@ -182,8 +357,4 @@ export default {
 .message-container:hover {
 	backdrop-filter: brightness(1.15);
 }
-
-.message-sender-you {
-	font-weight: 600;
-}
 </style>
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -3,7 +3,7 @@
 		class="p-4 bg-[hsl(216,calc(1*7.2%),13.5%)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative">
 		<div>
 			<nuxt-link to="/channel/@me">
-				<div @click="openServer('@me', 'dms')"
+				<div
 					class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300">
 					<span>
 						<svg width="32"
@@ -36,7 +36,6 @@
 			<nuxt-link v-for="server in servers"
 				:to="'/channel/' + server.channels[0].id">
 				<div :key="server.id"
-					@click="openServer(server.id, 'servers')"
 					class="bg-zinc-600/80 p-3 rounded-full transition-all hover:rounded-2xl ease-in-out hover:bg-zinc-500/60 duration-300 h-[56px] w-[56px]">
 					<svg width="32"
 						height="32"
@@ -123,9 +122,6 @@ export default {
 			this.serverName = '';
 			globalStore.addServer(server)
 		},
-		openServer(id: string, type: "servers" | "dms"): void {
-			useGlobalStore().setActive(type, id)
-		}
 	},
 }
 </script>
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -7,7 +7,7 @@
 					:to="'/channel/@me/' + dm.id">
 					<div
 						class="mx-2 my-4 hover:bg-[hsl(223,calc(1*6.9%),25.8%)] px-2 py-2 w-[calc(240px-1rem)] max-h-10 h-10 overflow-ellipsis rounded-md transition-colors">
-						{{ (dm.name).split('-').find((e: string) => e !== user.id) }}
+						{{ dm.dmParticipants.find((e) => e.id !== user.id).username }}
 					</div>
 				</nuxt-link>
 			</div>
@@ -55,7 +55,10 @@
 						<ul class="flex flex-col gap-y-1">
 							<DropdownItem v-if="userIsOwner || userIsAdmin"
 								@click="createInvite">
-								<span class="mr-1.5 h-fit">
+								<span>
+									Invite a friend
+								</span>
+								<span class="h-fit">
 									<svg xmlns="http://www.w3.org/2000/svg"
 										width="20"
 										height="20"
@@ -72,9 +75,6 @@
 										</g>
 									</svg>
 								</span>
-								<span>
-									Invite a friend
-								</span>
 							</DropdownItem>
 						</ul>
 					</div>
@@ -102,7 +102,8 @@
 					@click="openCreateChannelModel"
 					class="flex text-center hover:bg-[hsl(223,calc(1*6.9%),26.4%)] px-2 py-1.5 w-full transition-colors rounded drop-shadow-sm cursor-pointer items-center">
 					<span>
-						<svg class="text-zinc-300/80 my-auto" xmlns="http://www.w3.org/2000/svg"
+						<svg class="text-zinc-300/80 my-auto"
+							xmlns="http://www.w3.org/2000/svg"
 							width="20"
 							height="20"
 							viewBox="0 0 24 24">
@@ -127,6 +128,9 @@
 					<ul class="flex flex-col gap-y-1">
 						<DropdownItem v-if="userIsOwner || userIsAdmin"
 							@click="createInvite">
+							<span>
+								Invite a friend
+							</span>
 							<span class="mr-1.5 h-fit">
 								<svg xmlns="http://www.w3.org/2000/svg"
 									width="20"
@@ -144,8 +148,26 @@
 									</g>
 								</svg>
 							</span>
+						</DropdownItem>
+						<DropdownItem @click="logout" danger="true">
 							<span>
-								Invite a friend
+								Logout
+							</span>
+							<span class="mr-1.5 h-fit">
+								<svg xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+									viewBox="0 0 24 24">
+									<g fill="none"
+										stroke="currentColor"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2">
+										<path
+											d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
+										<path d="M7 12h14l-3-3m0 6l3-3" />
+									</g>
+								</svg>
 							</span>
 						</DropdownItem>
 					</ul>
@@ -206,9 +228,10 @@

 <script lang="ts">
 import { useGlobalStore } from '~/stores/store';
-import { IChannel, IRole, IServer } from '~/types';
+import { IChannel, IRole } from '~/types';

 export default {
+	props: ['server'],
 	data() {
 		return {
 			server: storeToRefs(useGlobalStore()).activeServer,
@@ -251,6 +274,14 @@ export default {
 			const headers = useRequestHeaders(['cookie']) as Record<string, string>
 			const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST', headers })
 		},
+		async logout() {
+			await $fetch(`/api/user/logout`)
+			useCookie('sessionToken').value = null;
+			useCookie('userId').value = null;
+
+			useGlobalStore().logout();
+			navigateTo('/login')
+		}
 	},
 }
 </script>