fixed a bunch of bugs, yay!!!

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

@@ -2,16 +2,6 @@
 	<MessagePane :server="server" />
 </template>
 
-<script async setup lang="ts">
-const route = useRoute()
-
-const server: IChannel = await $fetch(`/api/channels/${route.params.id}`)
-if (server) {
-	useGlobalStore().addDM(server);
-	useGlobalStore().setActive('dms', server.id);
-}
-</script>
-
 <script lang="ts">
 import { useGlobalStore } from '~/stores/store'
 import { IChannel } from '~/types'
@@ -21,8 +11,24 @@ definePageMeta({
 })
 
 export default {
+	async setup() {
+		const route = useRoute()
+
+		const headers = useRequestHeaders(['cookie']) as Record<string, string>
+		const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
+		if (!server) throw new Error('could not find the dm')
+		useGlobalStore().addDM(server);
+		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
+		useGlobalStore().setActive('dms', route.params.id);
+
+		return {
+			server
+		}
+	},
 	async updated() {
-		if (!useGlobalStore().activeServer == this.server) useGlobalStore().setActive('dms', this.server.id)
+		const route = useRoute()
+		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?')
+		if (useGlobalStore().activeServer !== this.server) useGlobalStore().setActive('dms', route.params.id)
 	},
 }
 </script>

pages/channel/@me/index.vue

@@ -19,9 +19,14 @@ export default {
 			userId: ''
 		}
 	},
+	mounted() {
+		console.log('mounted')
+		useGlobalStore().setActive('dms', '@me')
+	},
 	methods: {
 		async startDM() {
-			const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId } }) 
+			const headers = useRequestHeaders(['cookie']) as Record<string, string>
+			const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers }) 
 
 			useGlobalStore().addDM(server)
 			useRouter().push({ path: '/channel/@me/' + server.id })

pages/channel/[id].vue

@@ -2,19 +2,6 @@
 	<MessagePane :server="server" />
 </template>
 
-<script async setup lang="ts">
-const route = useRoute()
-
-const server: IChannel = await $fetch(`/api/channels/${route.params.id}`)
-
-const realServer = useGlobalStore().servers?.filter((e) => e.channels.some((el) => el.id == route.params.id))[0]
-
-if (realServer) {
-	useGlobalStore().addServer(realServer);
-	useGlobalStore().setActive('servers', realServer.id)
-}
-</script>
-
 <script lang="ts">
 import { useGlobalStore } from '~/stores/store'
 import { IChannel } from '~/types'
@@ -24,12 +11,32 @@ definePageMeta({
 })
 
 export default {
+	async setup() {
+		const route = useRoute()
+
+		const headers = useRequestHeaders(['cookie']) as Record<string, string>
+		const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers })
+
+		const realServer = useGlobalStore().servers?.find((e) => e.channels.some((el) => el.id == route.params.id))
+
+		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 presumiably?')
+		useGlobalStore().setActive('servers', route.params.id)
+
+		return {
+			server
+		}
+	},
 	async updated() {
+		const route = useRoute()
+		const headers = useRequestHeaders(['cookie']) as Record<string, string>;
 		if (!this.server) return;
 
-		this.server = await $fetch(`/api/channels/${route.params.id}`);
+		this.server = await $fetch(`/api/channels/${route.params.id}`, { headers });
 
-		if (!useGlobalStore().activeServer == this.server.id) useGlobalStore().setActive('servers', this.server.id)
+		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumiably?')
+		if (useGlobalStore().activeServer.id !== this.server.id) useGlobalStore().setActive('servers', route.params.id)
 	}
 }
 </script>

pages/login.vue

@@ -37,12 +37,14 @@ export default {
 	},
 	methods: {
 		async signup() {
+			const headers = useRequestHeaders(['cookie'])
 			if (!this.username || !this.password) return;
 			const user = await $fetch('/api/login', {
 				method: 'post', body: {
 					username: this.username,
 					password: this.password
-				}
+				},
+				headers
 			}) as { userId: string; token: string; user: SafeUser; }
 
 			const userId = useCookie('userId')

pages/signup.vue

@@ -48,13 +48,15 @@ export default {
 	},
 	methods: {
 		async signup() {
+			const headers = useRequestHeaders(['cookie']) as Record<string, string>
 			if (!this.username || !this.password || !this.email) return;
 			const user = await $fetch('/api/signup', {
 				method: 'post', body: {
 					username: this.username,
 					email: this.email,
 					password: this.password
-				}
+				},
+				headers
 			}) as { userId: string; token: string; user: SafeUser; }
 
 			const userId = useCookie('userId')