feat: update servers array to fetch from /me/guilds

app.vue

@@ -49,4 +49,9 @@ a {
   border-radius: .3rem;
 }
 
+
+.invisible {
+	visibility: hidden;
+}
+
 </style>

components/Channel.vue

@@ -1,19 +1,21 @@
 <template>
-  <div v-if="current" class="channel-list-link-container">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ name }}
+		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container current-channel">
+  <div v-else class="channel-list-link-container rounded-corners">
 	<NuxtLink class="channel-list-link" :href="props.href">
-		# {{ name }}
+		# {{ props.name }}
 	</NuxtLink>
   </div>
 </template>
 
 <script lang="ts" setup>
 
-const props = defineProps<{ name: string, href: string, current?: boolean }>();
+const props = defineProps<{ name: string, uuid: string, currentUuid: string, href: string }>();
+
+const isCurrentChannel = props.uuid == props.currentUuid;
 
 </script>
 
@@ -30,6 +32,7 @@ const props = defineProps<{ name: string, href: string, current?: boolean }>();
 	display: flex;
 	height: 4dvh;
 	white-space: nowrap;
+	align-items: center;
 }
 
 .current-channel {

components/Message.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="message">
-		<div>
+	<div v-if="props.type == 'normal'" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+		<div class="left-column">
 			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
@@ -11,10 +11,6 @@
 				</span>
 				<span class="message-date" :title="date.toString()">
 					{{ messageDate }}
-					<!--
-					<div class="message-date-hover" v-if="showHover">
-					</div>
-					-->
 				</span>
 			</div>
 			<div class="message-text">
@@ -22,17 +18,45 @@
 			</div>
 		</div>
 	</div>
+	<div v-else ref="messageElement" class="message compact-message">
+		<div class="left-column">
+			<div>
+				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
+					{{ messageDate }}
+				</span>
+			</div>
+		</div>
+		<div class="message-data">
+			<div class="message-text">
+				{{ text }}
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{ class?: string, img?: string | null, username: string, text: string, timestamp: number, format: "12" | "24" }>();
+const props = defineProps<{
+	class?: string,
+	img?: string | null,
+	username: string,
+	text: string,
+	timestamp: number,
+	format: "12" | "24",
+	type: "normal" | "compact",
+	marginBottom: boolean
+}>();
 
 const messageDate = ref<string>();
-const showHover = ref(false);
+
+const messageElement = ref<HTMLDivElement>();
+
+const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
 
-console.log("message:", props.text);
+console.log("Message.vue: message:", props.text);
+console.log("Message.vue: message type:", props.type);
+
 let dateHour = date.getHours();
 let dateMinute = date.getMinutes();
 if (props.format == "12") {
@@ -47,7 +71,19 @@ if (props.format == "12") {
 	}
 } else {
 	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
-	}
+}
+
+onMounted(() => {
+	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
+		console.log("mouse enter");
+		dateHidden.value = false;
+	});
+
+	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
+		console.log("mouse leave");
+		dateHidden.value = true;
+	});
+});
 
 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;
@@ -59,12 +95,15 @@ if (props.format == "12") {
 .message {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
-	margin-bottom: 1dvh;
 	display: grid;
-	grid-template-columns: auto 1fr;
+	grid-template-columns: 1fr 19fr;
 	align-items: center;
 }
 
+.message-margin-bottom {
+	margin-bottom: 1dvh;
+}
+
 .message-metadata {
 	display: flex;
 	gap: .5dvw;
@@ -86,22 +125,25 @@ if (props.format == "12") {
 }
 
 .message-author-avatar {
-	margin-right: 1dvw;
-	width: 3em;
+	height: 2.3em;
+	width: 2.3em;
 	border-radius: 50%;
 }
 
+.left-column {
+	margin-right: .5dvw;
+	text-align: center;
+	align-content: center;
+}
+
 .author-username {
 	margin-right: .5dvw;
 	color: white;
 }
 
 .message-date {
-	font-size: small;
+	font-size: .7em;
 	color: rgb(150, 150, 150);
-}
-
-.message-date:hover {
 	cursor: default;
 }
 

components/MessageArea.vue

@@ -1,18 +1,23 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-		<Message v-for="message of messages" :username="message.user.display_name ?? message.user.username" :text="message.message"
-			:timestamp="uuidToTimestamp(message.uuid)" :img="message.user.avatar" format="12" />
+			<div v-for="(message, i) of messages">
+				<Message :username="message.user.display_name ?? message.user.username"
+					:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
+					format="12" :type="messagesType[message.uuid]"
+					:margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'" />
+			</div>
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
-			<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text" name="message-input" autocomplete="off">
+				<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
+					name="message-input" autocomplete="off">
 				<button id="submit-button" type="submit">
 					<Icon name="lucide:send" />
 				</button>
 			</form>
 		</div>
-</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -21,12 +26,59 @@ import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
+const messageTimestamps = ref<Record<string, number>>({});
+const messagesType = ref<Record<string, "normal" | "compact">>({});
+
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
 if (messagesRes) {
 	messagesRes.reverse();
+	console.log("messages res:", messagesRes.map(msg => msg.message));
+	const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
+	for (const message of messagesRes) {
+		messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
+
+		console.log("message:", message.message);
+		const firstByUser = firstMessageByUsers.value[message.user.uuid];
+		if (firstByUser) {
+			console.log("first by user exists");
+			if (message.user.uuid != firstByUser.user.uuid) {
+				console.log("message is by new user, setting their first message")
+				firstMessageByUsers.value[message.user.uuid] = message;
+				console.log("RETURNING FALSE");
+				messagesType.value[message.uuid] = "normal";
+				continue;
+			}
+		} else {
+			console.log("first by user doesn't exist");
+			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+			firstMessageByUsers.value[message.user.uuid] = message;
+			console.log("RETURNING FALSE");
+			messagesType.value[message.uuid] = "normal";
+			continue;
+		}
+		const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference;
+		const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
+		const timestamp = messageTimestamps.value[message.uuid];
+		console.log("first message timestamp:", prevTimestamp);
+		console.log("timestamp:", timestamp);
+		const diff = (timestamp - prevTimestamp);
+		console.log("min diff:", messageGroupingMaxDifference);
+		console.log("diff:", diff);
+		const lessThanMax = diff <= messageGroupingMaxDifference;
+		console.log("group?", lessThanMax);
+		if (!lessThanMax) {
+			console.log("diff exceeds max");
+			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
+			firstMessageByUsers.value[message.user.uuid] = message;
+			messagesType.value[message.uuid] = "normal";
+			continue;
+		}
+		console.log("RETURNING " + lessThanMax.toString().toUpperCase());
+		messagesType.value[message.uuid] = "compact";
+	}
 }
 
 const messages = ref<MessageResponse[]>([]);
@@ -53,25 +105,24 @@ if (accessToken && apiBase) {
 		);
 		if (ws) break;
 		await sleep(5000);
-} while (!ws);
+	} while (!ws);
 
-ws.addEventListener("open", (event) => {
+	ws.addEventListener("open", (event) => {
 		console.log("WebSocket connected!");
-});
+	});
 
-ws.addEventListener("message", async (event) => {
+	ws.addEventListener("message", async (event) => {
 		console.log("event data:", event.data);
-	messages.value?.push(
-		JSON.parse(event.data)
-	);
+		console.log("message uuid:", event.data.uuid);
+		const parsedData = JSON.parse(event.data);
+		messageTimestamps.value[parsedData.uuid] = uuidToTimestamp(parsedData.uuid);
+		messages.value.push(parsedData);
 		await nextTick();
 		if (messagesElement.value) {
 			console.log("scrolling to bottom");
 			scrollToBottom(messagesElement);
 		}
-});
-
-
+	});
 
 } else {
 	await refresh();
@@ -97,13 +148,11 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-
 #message-area {
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 8fr 1fr;
 	justify-content: space-between;
-	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
@@ -118,7 +167,7 @@ onMounted(async () => {
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	margin-top: 1dvh;
+	margin-top: 2dvh;
 }
 
 #message-form {
@@ -152,5 +201,4 @@ onMounted(async () => {
 #submit-button:hover {
 	color: rgb(255, 255, 255);
 }
-
 </style>

layouts/client.vue

@@ -21,23 +21,12 @@
 </template>
 
 <script lang="ts" setup>
+import type { GuildResponse } from '~/types/interfaces';
+
 
 const loading = useState("loading", () => false);
 
-const servers = [
-	{
-		name: "Test",
-		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
-	},
-	{
-		name: "Test",
-		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
-	},
-	{
-		name: "Test",
-		uuid: "0197088b-e4e8-7033-8e6b-7ceb065e9acd"
-	}
-];
+const servers: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("servers:", servers);
@@ -80,14 +69,6 @@ const members = [
 	}
 ];
 
-function sendMessage(e: Event) {
-	e.preventDefault();
-	const textInput = document.getElementById("message-box-input") as HTMLInputElement;
-	const text = textInput.value;
-	console.log("MESSAGE SENT!!!");
-	console.log("text:", text);
-}
-
 </script>
 
 <style>

nuxt.config.ts

@@ -26,7 +26,8 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     public: {
-      apiVersion: 1
+      apiVersion: 1,
+      messageGroupingMaxDifference: 300000
     }
   },
   /* nitro: {

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

@@ -18,10 +18,9 @@
 				</h3>
 			</div>
 			<div id="channels-list">
-				<Channel v-for="channel of channels" v-if="route.params.channelId == channel?.uuid" :name="channel.name"
-					:href="route.path" :current="true" />
-				<Channel v-for="channel of channels" v-else :name="channel.name"
-					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
+				<Channel v-for="channel of channels" :name="channel.name"
+					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
+					:href="`/guilds/${route.params.serverId}/channels/${channel.uuid}`" />
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
@@ -41,7 +40,7 @@ const route = useRoute();
 
 const loading = useState("loading");
 
-const channelUrlPath = `servers/${route.params.serverId}/channels/${route.params.channelId}`;
+const channelUrlPath = `/channels/${route.params.channelId}`;
 
 const server = ref<GuildResponse | undefined>();
 const channels = ref<ChannelResponse[] | undefined>();
@@ -102,19 +101,15 @@ const members = [
 ];
 
 onMounted(async () => {
-	loading.value = true;
 	console.log("channelid: set loading to true");
 	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
 
-	channels.value = await fetchWithApi(
-		`servers/${route.params.serverId}/channels`
-	);
-	channel.value = await fetchWithApi(
-		route.path
-	);
+	channels.value = await fetchWithApi(`/channels`);
+	console.log("channels:", channels.value);
+	channel.value = await fetchWithApi(route.path);
+	console.log("channel:", channel.value);
 
 	console.log("channelid: channel:", channel);
-	loading.value = false;
 	console.log("channelid: set loading to false");
 });
 
@@ -151,4 +146,10 @@ function toggleInvitePopup(e: Event) {
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
+#channels-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
+}
+
 </style>

pages/servers/[serverId]/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-const server = await fetchWithApi(`/servers/${useRoute().params.serverId}`);
+const server = await fetchWithApi(`/guilds/${useRoute().params.serverId}`);
 console.log("server:", server);
 
 </script>

utils/fetchMember.ts

@@ -1,6 +1,6 @@
 import type { UserResponse } from "~/types/interfaces"
 
 export default async (serverId: string, memberId: string): Promise<UserResponse> => {
-	const user = await fetchWithApi(`/servers/${serverId}/members/${memberId}`) as UserResponse;
+	const user = await fetchWithApi(`/guilds/${serverId}/members/${memberId}`) as UserResponse;
 	return user;
 }