various bug fixes

.eslintrc.json

@@ -20,7 +20,8 @@
         "parseMessageBody": true,
         "storeToRefs": true,
         "useNuxtApp": true,
-        "NodeJS": true
+        "NodeJS": true,
+        "useHeadSafe": true
     },
     "parser": "vue-eslint-parser",
     "parserOptions": {

components/MessagePane.vue

@@ -114,7 +114,7 @@
             <textarea
               id="messageBox"
               v-model="messageContent"
-							maxlength="5000"
+              maxlength="5000"
               type="text"
               class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed h-[44px]"
               cols="1"
@@ -274,7 +274,7 @@ export default {
 				}
 			} else {
 				if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
-					return 'mt-0 mb-0 py-0.5';
+					return 'mt-0 mb-0 !py-0.5';
 				} else {
 					return 'mt-0 pt-0.5 pb-1';
 				}

components/Sidebar.vue

@@ -134,7 +134,8 @@
           <button
             v-for="channel in server.channels"
             :key="channel.id"
-            class="flex text-center bg-inherit hover:backdrop-brightness-[1.35] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
+            :class="(activeChannel.id === channel.id) ? 'backdrop-brightness-[1.35]' : 'hover:backdrop-brightness-[1.35]'"
+            class="flex text-center bg-inherit px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
             @click="openChannel(channel.id)"
           >
             <span class="h-fit">
@@ -330,10 +331,14 @@ import { useGlobalStore } from '~/stores/store';
 import { IChannel, IRole } from '~/types';
 
 export default {
+	setup() {
+		console.log('sidebar', useGlobalStore().activeServer.channels);
+	},
 	data() {
 		return {
 			server: storeToRefs(useGlobalStore()).activeServer,
 			serverType: storeToRefs(useGlobalStore()).activeServerType,
+			activeChannel: storeToRefs(useGlobalStore()).activeChannel,
 			user: storeToRefs(useGlobalStore()).user,
 			dms: storeToRefs(useGlobalStore()).dms,
 			createChannelModelOpen: false,

layouts/default.vue

@@ -1,16 +1,11 @@
 <template>
-  <Suspense>
-    <div class="flex h-screen max-h-screen text-white">
-      <Nav />
-      <Sidebar />
-      <div class="w-[calc(100vw-88px-240px)] h-full">
-        <slot />
-      </div>
-    </div>
-    <template #fallback>
-      Loading...
-    </template>
-  </Suspense>
+	<div class="flex h-screen max-h-screen text-white">
+		<Nav />
+		<Sidebar />
+		<div class="w-[calc(100vw-88px-240px)] h-full">
+			<slot />
+		</div>
+	</div>
 </template>
   
 <script lang="ts">
@@ -21,8 +16,7 @@ import { io } from 'socket.io-client';
 export default {
 	async setup() {
 		const globalStore = useGlobalStore();
-		const sessionToken = useCookie('sessionToken');
-		if (globalStore.user.id === undefined && sessionToken.value) {
+		if (globalStore.user.id === undefined) {
 			const route = useRoute();
 			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
 			const [user, { dms, servers }] = await Promise.all([
@@ -37,7 +31,13 @@ export default {
 			globalStore.setServers(servers);
 			globalStore.setDms(dms);
 			if (route.params.id && typeof route.params.id === 'string') {
+				if (!globalStore.getServerByChannelId(route.params.id)) {
+					navigateTo('/');
+					return;
+				}
 				globalStore.setActiveServer(route.path.includes('@me') ? 'dms' : 'servers', route.params.id);
+			} else {
+				globalStore.setActiveServerType(route.path.includes('@me') ? 'dms' : 'servers');
 			}
 		}
 	},

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 
 export default defineNuxtConfig({
-	ssr: true,
+	ssr: false,
 	app: {
 		head: {
 			meta: [

pages/channel/@me/[id].vue

@@ -43,6 +43,12 @@ export default {
 			e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
 		});
 
+		const friend = server.dmParticipants?.find((e) => e.id !== useGlobalStore().user.id)?.username;
+
+		useHeadSafe({
+			title: `@${friend} - Blop`
+		});
+
 		return {
 			server
 		};

pages/channel/[id].vue

@@ -1,18 +1,11 @@
 <!-- eslint-disable vue/no-multiple-template-root -->
 <template>
-  <MessagePane />
-  <div
-    class="fixed mr-3"
-    :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
-  >
-    <Transition>
-      <Popup
-        :opened="emojiPickerData.opened"
-        :openedBy="emojiPickerData.type"
-        @pickedEmoji="pickedEmoji($event)"
-      />
-    </Transition>
-  </div>
+	<MessagePane />
+	<div class="fixed mr-3" :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
+		<Transition>
+			<Popup :opened="emojiPickerData.opened" :openedBy="emojiPickerData.type" @pickedEmoji="pickedEmoji($event)" />
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts">
@@ -27,14 +20,15 @@ definePageMeta({
 export default {
 	async setup() {
 		const route = useRoute();
+		if (useGlobalStore().servers.find((e) => { return e.channels.some((e) => e.id === route.params.id); } ) == undefined) navigateTo('/');
 		const headers = useRequestHeaders(['cookie']) as Record<string, string>;
-		const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers });
+		const [server, realServer] = await Promise.all([
+			await $fetch(`/api/channels/${route.params.id}`, { headers }) as IChannel,
+			await $fetch(`/api/channels/${route.params.id}/guild`, { headers }) as IServer,
+		]);
 
-		// if (!useGlobalStore().servers.find((e) => e.id == server.serverId)?.participants) {
-		const realServer: IServer = await $fetch(`/api/guilds/${server.serverId}`, { headers });
 		if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
 		useGlobalStore().addServer(realServer);
-		// }
 
 		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
 		useGlobalStore().setActiveServer('servers', route.params.id);
@@ -45,6 +39,10 @@ export default {
 			e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
 		});
 
+		useHeadSafe({
+			title: `#${server.name} | ${realServer.name} - Blop`
+		});
+
 		return {
 			server,
 		};
@@ -67,7 +65,7 @@ export default {
 	},
 	async updated() {
 		const route = useRoute();
-		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?');
+		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
 		if (useGlobalStore().activeChannel.id !== this.server.id) {
 			useGlobalStore().closeEmojiPicker();
 			useGlobalStore().setActiveServer('servers', route.params.id);

pages/test.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <Popup />
-  </div>
+  <div>lorem ipsum</div>
 </template>

server/api/channels/[id]/guild.get.ts

@@ -0,0 +1,73 @@
+import { IServer } from '~/types';
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+export default defineEventHandler(async (event) => {
+	if (!event.context.user.authenticated) {
+		throw createError({
+			statusCode: 401,
+			statusMessage: 'You must be logged in to view a channel.',
+		});
+	}
+
+	if (!event.context.params?.id) {
+		throw createError({
+			statusCode: 400,
+			statusMessage: 'A channelId is required',
+		});
+	}
+
+	const server = await prisma.server.findFirst({
+		where: {
+			channels: {
+				some: { id: event.context.params.id }
+			}
+		},
+		select: {
+			id: true,
+			name: true,
+			participants: {
+				select: {
+					id: true,
+					username: true
+				}
+			},
+			channels: {
+				select: {
+					id: true,
+					DM: true,
+					name: true,
+				}
+			},
+			roles: {
+				select: {
+					id: true,
+					name: true,
+					administrator: true,
+					owner: true,
+					users: {
+						select: {
+							id: true
+						}
+					}
+				}
+			}
+		}
+	}) as IServer | null;
+
+	if (!server) {
+		throw createError({
+			statusCode: 404,
+			statusMessage: `Channel with id "${event.context.params.id}" not found`,
+		});
+	}
+
+	if (!server.participants.find((participant) => participant.id === event.context.user.id)) {
+		throw createError({
+			statusCode: 403,
+			statusMessage: `Can't find participant with id "${event.context.params.id}" in guild with id "${event.context.params.id}"`,
+		});
+	}
+
+	return server;
+});

server/api/guilds/[id]/index.get.ts

@@ -60,5 +60,12 @@ export default defineEventHandler(async (event) => {
 		});
 	}
 
+	if (!server.participants.find((participant) => participant.id === event.context.user.id)) {
+		throw createError({
+			statusCode: 403,
+			statusMessage: `Can't find participant with id "${event.context.params.id}" in guild with id "${event.context.params.id}"`,
+		});
+	}
+
 	return server;
 });

stores/store.ts

@@ -40,6 +40,9 @@ export const useGlobalStore = defineStore('global', {
 		setActiveChannel(channel: IChannel) {
 			this.activeChannel = channel;
 		},
+		setActiveServerType(type: 'dms' | 'servers') {
+			this.activeServerType = type;
+		},
 		updateServer(channelId: string, server: IServer) {
 			const serverIndex = this.servers.findIndex(s => s.channels.some((c) => c.id === channelId));
 			this.servers[serverIndex] = server;
@@ -70,6 +73,12 @@ export const useGlobalStore = defineStore('global', {
 			}
 			this.servers.push(server);
 		},
+		getServerByChannelId(channelId: string) {
+			let channel: IChannel | IServer | undefined = this.dms.find((e) => e.id === channelId);
+			if (channel) return channel;
+			channel = this.servers.find((e) => e.channels.some((c) => c.id === channelId));
+			return channel;
+		},
 		setDms(dms: Array<IChannel>) {
 			this.dms = dms;
 		},

tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"version":"5.0.2"}