small fixes so calls make sense

App.vue

@@ -5,7 +5,7 @@
 				<Nav :servers="servers" />
 				<Sidebar :server="activeServer"
 					:user="user" />
-				<div class="w-full h-full">
+				<div class="w-[calc(100vw-88px-240px)] h-full">
 					<NuxtPage :user="user" />
 				</div>
 			</div>

components/Nav.vue

@@ -96,7 +96,7 @@ export default {
 	methods: {
 		async createServer() {
 			const serverStore = useServerStore();
-			const { server } = await $fetch('/api/channel/create', { method: 'post', body: { serverName: this.serverName } })
+			const { server } = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName } })
 			this.createServerModelOpen = false;
 			this.serverName = '';
 			serverStore.addServer(server)

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

@@ -1,9 +1,9 @@
 <template>
-	<div class="w-full h-full bg-[hsl(220,calc(1*7.7%),22.9%)] relative text-white">
+	<div class="h-full bg-[hsl(220,calc(1*7.7%),22.9%)] relative text-white">
 		<div class="w-full h-[calc(100%-60px)] overflow-y-scroll pb-1"
 			id="conversation-pane">
 			<div>
-				<div v-if="conversation.length === 0">
+				<div v-if="!conversation">
 					<p>No messages yet</p>
 				</div>
 				<div v-else
@@ -22,7 +22,7 @@
 						class="message-container">
 						<div class="message-sender">
 							<div class="message-sender-text">
-								<p class="message-sender-you">{{ conversations.userId }}</p>
+								<p class="message-sender">{{ conversations.userId }}</p>
 								<p>{{ conversations.body }}</p>
 							</div>
 						</div>
@@ -30,17 +30,34 @@
 				</div>
 			</div>
 		</div>
-		<div class="conversation-input w-full">
+		<div class="conversation-input w-[calc(100vw-88px-240px)]">
 			<form @submit.prevent="sendMessage"
-				class="relative px-4 w-[calc(100%-12rem)]">
+				class="relative px-4 w-full">
-				<input type="text"
+				<div
-					class="py-2 px-4 rounded-md bg-[hsl(218,calc(1*7.9%),27.3%)]"
+					id="textbox"
-					id="message"
+					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"
+						id="messageBox"
+						style="position: relative; outline: none; white-space: pre-wrap; overflow-wrap: break-word;"
+						class="bg-transparent focus:outline-none py-2 w-full resize-none leading-relaxed"
 						v-model="messageContent"
 						placeholder="Send a Message..." />
 					<input type="submit"
-					class=""
+						class="absolute -top-full -left-full invisible"
-					value="Send" />
+						id="submit">
+					<label for="submit"
+						class="py-1 px-1.5 h-fit my-auto"><svg width="32"
+							height="32"
+							viewBox="0 0 24 24">
+							<path fill="none"
+								stroke="currentColor"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								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>
 			</form>
 		</div>
 	</div>
@@ -52,27 +69,24 @@ import { useServerStore } from '~/stores/servers'
 export default {
 	data() {
 		return {
-			conversation: [],
 			messageContent: ''
 		}
 	},
 	async setup() {
 		const route = useRoute()
 
-		const { server } = await $fetch(`/api/channel/${route.params.dmId}`)
+		const { channel: server } = await $fetch(`/api/channels/${route.params.dmId}`)
 		if (!server) return;
 		useServerStore().addDM(server);
-		const channelId = server.channels[0].id
 		await useServerStore().setActive('dms', server.id);
+
+		const conversation: Array<Record<string, unknown>> = server.messages
+
 		return {
 			server,
-			channelId
+			conversation
 		}
 	},
-	async mounted() {
-		const { channel } = await $fetch(`/api/channel/messages/${this.channelId}`)
-		this.conversation = channel.messages
-	},
 	async updated() {
 		if (!useServerStore().activeServer == this.server) await useServerStore().setActive('dms', this.server.id)
 	},
@@ -81,10 +95,22 @@ export default {
 			const route = useRoute()
 			if (!this.messageContent) return;
 
-			const { message } = await $fetch(`/api/channel/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: this.channelId } })
+			const { message } = await $fetch(`/api/channels/sendMessage`, { method: 'post', body: { body: this.messageContent, channelId: route.params.dmId } })
 
 			this.conversation.push(message)
-		}
+			this.messageContent = '';
+		},
+		// resizeTextarea() {
+		// 	const textArea = document.getElementById('messageBox')
+		// 	const textBox = document.getElementById('textBox')
+		// 	var taLineHeight = 26; // This should match the line-height in the CSS
+		// 	var taHeight = textArea.scrollHeight; // Get the scroll height of the textarea
+		// 	textArea.style.height = taHeight + 'px'; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
+		// 	textBox.style.height = taHeight + 'px'; 
+		// 	var numberOfLines = Math.floor(taHeight / taLineHeight);
+		// 	console.log("there are " + numberOfLines + " lines in the text area");
+		// 	console.log('a')
+		// }
 	},
 	props: ['user']
 }
@@ -98,8 +124,25 @@ export default {
 	margin-top: 0.5rem;
 	margin-bottom: 0.5rem;
 	height: 60px;
-	border-top: #ffffff 1px solid;
+	background-color: hsl(220, calc(1 * 7.7%), 22.9%);
-	background-color: #3C3C3C;
 	bottom: calc(0px - 0.5rem);
 }
+
+.message-container {
+	transition: backdrop-filter 150ms cubic-bezier(.37, .64, .59, .33);
+	margin-top: 0.35rem;
+	margin-bottom: 0.35rem;
+	padding-left: 1.75rem;
+	padding-right: 1.75rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+}
+
+.message-container:hover {
+	backdrop-filter: brightness(1.15);
+}
+
+.message-sender-you {
+	font-weight: 600;
+}
 </style>

pages/channel/@me/index.vue

@@ -16,7 +16,7 @@ export default {
 	},
 	methods: {
 		async startDM() {
-			const { server } = await $fetch('/api/channel/createDM', { method: 'post', body: { partnerId: this.userId } })
+			const { server } = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId } })
 
 			useServerStore().addDM(server)
 			useRouter().push({ path: '/channel/@me/' + server.id })

pages/channel/[id].vue

@@ -9,7 +9,7 @@ export default {
 	async setup() {
 		const route = useRoute()
 
-		const { server } = await $fetch(`/api/channel/${route.params.id}`)
+		const { server } = await $fetch(`/api/channels/${route.params.id}`)
 		if (!server) return;
 		useServerStore().addServer(server);
 		await useServerStore().setActive('servers', server.id)

prisma/schema.prisma

@@ -16,6 +16,8 @@ model User {
   serverId     String?
   messages     Message[]
   session      Session[]
+  Channel      Channel?  @relation(fields: [channelId], references: [id])
+  channelId    String?
 }
 
 model Server {
@@ -31,6 +33,8 @@ model Channel {
   server         Server?   @relation(fields: [serverId], references: [id])
   serverId       String?
   messages       Message[]
+  DM             Boolean?
+  dmParticipants User[]
 }
 
 model Message {

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

@@ -29,6 +29,27 @@ export default defineEventHandler(async (event) => {
 		}
 	}
 
+	if (channel.id && !channel.DM) {
+		const server = await prisma.server.findFirst({
+			where: {
+				id: channel.id
+			},
+			include: {
+				participants: true
+			}
+		})
+
+
+		const userInServer = server.participants.filter((e) => e.id === event.context.user.id)
+
+		if (!userInServer) {
+			event.node.res.statusCode = 401;
+			return {
+				message: `You mus be in the server to access a channel in that server`
+			}
+		}
+	}
+
 	return {
 		channel
 	}

server/api/channels/createDM.post.ts

@@ -30,9 +30,17 @@ export default defineEventHandler(async (event) => {
 		}
 	})
 
-	const preExistingServer = await prisma.server.findFirst({
+	if (!partner) {
+		event.node.res.statusCode = 400;
+		return {
+			message: 'No partner found'
+		}
+	}
+
+	const preExistingServer = await prisma.channel.findFirst({
 		where: {
-			name: `${user.username} and ${partner.username}`
+			name: `${user.id}-${partner.id}`,
+			DM: true
 		}
 	})
 
@@ -43,21 +51,14 @@ export default defineEventHandler(async (event) => {
 		}
 	}
 
-	const server = await prisma.server.create({
+	const server = await prisma.channel.create({
 		data: {
-			name: `${user.username} and ${partner.username}`,
+			name: `${user.username}-${partner.username}`,
-			participants: { connect: [{ id: event.context.user.id }, { id: partner.id }] },
+			dmParticipants: { connect: [{ id: event.context.user.id }, { id: partner.id }] },
-			channels: {
+			DM: true
-				create: [
-					{
-						name: 'default',
-					},
-				]
-			}
 		},
 		include: {
-			channels: true,
+			dmParticipants: true
-			participants: true
 		}
 	})
 

server/api/channels/sendMessage.post.ts

@@ -21,9 +21,15 @@ export default defineEventHandler(async (event) => {
 	const channel = await prisma.channel.findFirst({
 		where: {
 			id: channelId
+		},
+		include: {
+			dmParticipants: true
 		}
 	})
 
+	console.log(channel)
+
+	if (!channel.DM) {
 		const server = await prisma.server.findFirst({
 			where: {
 				id: channel.serverId
@@ -48,6 +54,16 @@ export default defineEventHandler(async (event) => {
 				message: 'Server not found'
 			}
 		}
+	} else {
+		const userInDM = channel.dmParticipants.filter((e) => e.id === event.context.user.id)
+
+		if (!userInDM.length > 0) {
+			event.node.res.statusCode = 401;
+			return {
+				message: 'You must be in the DM to send a message.'
+			}
+		}
+	}
 
 	const message = await prisma.message.create({
 		data: {