From d40146435397c4aba908f09e87b111c43368439b Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Wed, 30 Apr 2025 07:40:51 +0200
Subject: [PATCH] wip: more work

---
 app.vue                                  |  14 +-
 components/Channel.vue                   |  20 ++
 components/Message.vue                   |  82 ++++++
 layouts/client.vue                       | 247 ++++++++++++++++++
 layouts/default.vue                      |  19 ++
 pages/web/index.vue                      | 307 ++++++++++++++---------
 pages/web/servers/[id]/channels/[id].vue |  13 +
 pages/web/servers/[id]/index.vue         |  13 +
 pages/web/test.vue                       |  15 ++
 9 files changed, 596 insertions(+), 134 deletions(-)
 create mode 100644 components/Channel.vue
 create mode 100644 components/Message.vue
 create mode 100644 layouts/client.vue
 create mode 100644 layouts/default.vue
 create mode 100644 pages/web/servers/[id]/channels/[id].vue
 create mode 100644 pages/web/servers/[id]/index.vue
 create mode 100644 pages/web/test.vue

diff --git a/app.vue b/app.vue
index 4500f2c..8d62023 100644
--- a/app.vue
+++ b/app.vue
@@ -1,15 +1,3 @@
 <template>
-  <NuxtPage />
+  <NuxtLayout />
 </template>
-
-<style>
-html,
-body {
-  font-family: Arial, Helvetica, sans-serif;
-  box-sizing: border-box;
-  color: whitesmoke;
-  background-color: rgb(30, 30, 30);
-  height: 100%;
-  margin: 0;
-}
-</style>
diff --git a/components/Channel.vue b/components/Channel.vue
new file mode 100644
index 0000000..0f06528
--- /dev/null
+++ b/components/Channel.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+	<a class="channel-list-link" :href="href">
+		{{ name }}
+	</a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{ name: string, href: string }>();
+
+</script>
+
+<style scoped>
+.channel-list-link {
+	text-decoration: none;
+	color: inherit;
+}
+</style>
\ No newline at end of file
diff --git a/components/Message.vue b/components/Message.vue
new file mode 100644
index 0000000..44dc983
--- /dev/null
+++ b/components/Message.vue
@@ -0,0 +1,82 @@
+<template>
+	<div class="message">
+		<img class="message-author-pfp" :src="img" :alt="username">
+		<div class="message-data">
+			<div class="message-metadata">
+				<span class="message-author-username">
+					{{ username }}
+				</span>
+				<span class="message-date">
+					{{ messageDate }}
+				</span>
+			</div>
+			<div class="message-text">
+				{{ text }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{ class?: string, img?: string, username: string, text: string, timestamp: number, format: "12" | "24" }>();
+
+const messageDate = ref<string>();
+
+const date = new Date(props.timestamp);
+const now = new Date()
+
+if (now.getUTCHours() >= 0) {
+	let dateHour = date.getUTCHours();
+	let dateMinute = date.getUTCMinutes();
+	if (props.format == "12") {
+		if (dateHour > 12) {
+			dateHour = dateHour - 12;
+		}
+		messageDate.value = `${dateHour}:${dateMinute} ${dateHour > 0 && dateHour < 13 ? "AM" : "PM"}`
+	} else {
+		messageDate.value = `${dateHour}:${dateMinute}`
+	}
+}
+
+</script>
+
+<style scoped>
+.message {
+	text-align: left;
+	/* border: 1px solid lightcoral; */
+	margin-bottom: 1dvh;
+	display: grid;
+	grid-template-columns: 3em auto;
+}
+
+.message-metadata {
+	display: flex;
+	gap: .5dvw;
+	align-items: center;
+}
+
+.message-data {
+	/* border: 1px solid white; */
+	margin-left: .5dvw;
+}
+
+.message-author {
+	display: flex;
+	align-items: center;
+}
+
+.message-author-pfp {
+	margin-right: 1dvw;
+	width: 3em;
+}
+
+.author-username {
+	margin-right: .5dvw;
+	color: white;
+}
+
+.message-date {
+	font-size: small;
+	color: rgb(150, 150, 150);
+}
+</style>
\ No newline at end of file
diff --git a/layouts/client.vue b/layouts/client.vue
new file mode 100644
index 0000000..95d6c0b
--- /dev/null
+++ b/layouts/client.vue
@@ -0,0 +1,247 @@
+<template>
+	<div id="client-root">
+		<div id="home">
+			<NuxtLink href="/web">
+				<img src="~/assets/img/house.svg" alt="Home">
+			</NuxtLink>
+		</div>
+		<div id="current-channel">
+			main bar
+		</div>
+		<div id="test">test</div>
+		<div id="servers-list">
+			<NuxtLink v-for="server of servers" :href="'web' + server.url">
+				<img src="~/assets/img/server.svg" :alt="server.name" width="1%">
+			</NuxtLink>
+		</div>
+		<div id="channels-list" class="main-grid-row">
+			<Channel v-for="channel of channels" :name="channel.name" :href="`${useRoute().path}/${channel.id}`" />
+		</div>
+		<div id="message-history" class="main-grid-row">
+			<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
+				:timestamp="message.timestamp" format="12" />
+		</div>
+		<div id="members-list">
+			<div class="member-item" v-for="member of members">
+				<img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
+				<span class="member-display-name">{{ member.displayName }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+import pfp from "~/assets/img/tiger-head.svg";
+
+const servers = [
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	},
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	},
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	}
+];
+
+const members = [
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	}
+];
+
+const messages = [
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "hello gamers!",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "yo what's up!",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "how are you guys?",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "im doing well",
+		timestamp: 1745948498000
+	}
+]
+
+const channels = [
+	{
+		name: "#super-cool-channel",
+		id: "8gh9548rg44"
+	},
+	{
+		name: "#super-lame-channel",
+		id: "hgff45387hy"
+	},
+	{
+		name: "#secret-channel",
+		id: "g8f734h87gt"
+	},
+]
+
+</script>
+
+<style>
+#client-root {
+	/* border: 1px solid white; */
+	height: 100%;
+	display: grid;
+	grid-template-columns: 1fr 18fr 4fr;
+	grid-template-rows: 8dvh auto;
+	text-align: center;
+}
+
+#client-root > div:nth-child(-n+3) {
+	border-bottom: 1px solid rgb(70, 70, 70);
+}
+
+#client-root div {
+	/* border: 1px solid cyan; */
+}
+
+#main-bar {
+}
+
+#__nuxt {
+	display: flex;
+	flex-flow: column;
+	height: 100%;
+}
+
+.grid-column {
+	padding-top: 1dvh;
+}
+
+#home {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+#current-info {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+#test {
+	grid-column: 3;
+	grid-row: 1;
+}
+
+#utilities {
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 3dvh;
+	justify-content: center;
+}
+
+#left-sidebar-container,
+#right-sidebar-container {
+	text-align: center;
+}
+
+.member-item {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.bottom-border {
+	border-bottom: 1px solid rgb(70, 70, 70);
+}
+
+.left-border {
+	border-left: 1px solid rgb(70, 70, 70);
+}
+
+.right-border {
+	border-right: 1px solid rgb(70, 70, 70);
+}
+
+#main-content {
+	display: grid;
+	grid-template-rows: 1fr 15fr 30fr 2fr;
+	text-align: center;
+	margin-left: 1dvw;
+}
+
+#message-box {
+	border: 1px solid rgb(70, 70, 70);
+	width: 100%;
+	margin-bottom: 1dvh;
+}
+
+#message-box-input {
+	width: 80%;
+	height: 100%;
+}
+
+.main-grid-row {
+	/* border: 1px solid cyan; */
+}
+
+#main-bar {
+}
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..a4fdba3
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,19 @@
+<template>
+  <NuxtPage />
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+html,
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  box-sizing: border-box;
+  color: rgb(190, 190, 190);
+  background-color: rgb(30, 30, 30);
+  height: 100%;
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/pages/web/index.vue b/pages/web/index.vue
index 82c6456..45b7019 100644
--- a/pages/web/index.vue
+++ b/pages/web/index.vue
@@ -1,184 +1,249 @@
 <template>
-  <div id="client-root">
-    <div id="grid-container">
-      <div id="left-sidebar-container" class="grid-column right-border">
-        <div id="home" class="bottom-border">
-          <NuxtLink href="web">
-            <img src="~/assets/img/house.svg" alt="Home" width="70%">
-          </NuxtLink>
-        </div>
-        <div id="servers-list" v-for="server of servers">
-          <NuxtLink :href="'web' + server.url">
-            <img src="~/assets/img/server.svg" :alt="server.name" width="70%">
-          </NuxtLink>
-        </div>
-      </div>
-      <div id="main-content" class="grid-column">
-        <div id="main-bar" class="main-grid-row">
-          main bar
-        </div>
-        <div id="message-history-container" class="main-grid-row">
-          message history
-        </div>
-        <div id="message-box" class="main-grid-row">
-          <input type="text" name="message-box-input" id="message-box-input">
-        </div>
-      </div>
-      <div id="right-sidebar-container" class="grid-column left-border">
-        <div id="utilities" class="bottom-border">
-          <div>
-            <NuxtLink>
-              <img src="~/assets/img/envelope.svg" alt="Inbox" width="30dvw">
-            </NuxtLink>
-          </div>
-        </div>
-        <div id="members-list">
-          <div class="member-item" v-for="member of members">
-            <img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
-            <span class="member-display-name">{{ member.displayName }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div id="client-root">
+		<div id="grid-container">
+			<div id="left-sidebar-container" class="grid-column right-border">
+				<div id="home" class="bottom-border">
+					<NuxtLink href="web">
+						<img src="~/assets/img/house.svg" alt="Home" width="70%">
+					</NuxtLink>
+				</div>
+				<div id="servers-list" v-for="server of servers">
+					<NuxtLink :href="'web' + server.url">
+						<img src="~/assets/img/server.svg" :alt="server.name" width="70%">
+					</NuxtLink>
+				</div>
+			</div>
+			<div id="main-content" class="grid-column">
+				<div id="main-bar" class="main-grid-row bottom-border">
+					main bar
+				</div>
+				<div id="channels-list" class="main-grid-row">
+					<Channel v-for="channel of channels" :name="channel.name" :href="`${useRoute().path}/${channel.id}`" />
+				</div>
+				<div id="message-history" class="main-grid-row">
+					<Message v-for="message of messages" :img="pfp" :username="message.author.username" :text="message.text"
+						:timestamp="message.timestamp" format="12" />
+				</div>
+				<div id="message-box" class="main-grid-row">
+					<input type="text" name="message-box-input" id="message-box-input">
+				</div>
+			</div>
+			<div id="right-sidebar-container" class="grid-column left-border">
+				<div id="utilities" class="bottom-border">
+					<div>
+						<NuxtLink>
+							<img src="~/assets/img/envelope.svg" alt="Inbox" width="30dvw">
+						</NuxtLink>
+					</div>
+				</div>
+				<div id="members-list">
+					<div class="member-item" v-for="member of members">
+						<img src="~/assets/img/tiger-head.svg" :alt="member.displayName" width="30dvw">
+						<span class="member-display-name">{{ member.displayName }}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
 
+import pfp from "~/assets/img/tiger-head.svg";
+
 const servers = [
-  {
-    name: "Test",
-    url: "/servers/284103257435"
-  },
-  {
-    name: "Test",
-    url: "/servers/284103257435"
-  },
-  {
-    name: "Test",
-    url: "/servers/284103257435"
-  }
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	},
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	},
+	{
+		name: "Test",
+		url: "/servers/284103257435"
+	}
 ];
 
 const members = [
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  },
-  {
-    id: "3287484395",
-    displayName: "SauceyRed"
-  }
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	},
+	{
+		id: "3287484395",
+		displayName: "SauceyRed"
+	}
 ];
 
+const messages = [
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "hello gamers!",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "yo what's up!",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "how are you guys?",
+		timestamp: 1745948498000
+	},
+	{
+		author: {
+			id: "3287484395",
+			username: "SauceyRed",
+			avatar: "~/assets/img/tiger-head.svg"
+		},
+		text: "im doing well",
+		timestamp: 1745948498000
+	}
+]
+
+const channels = [
+	{
+		name: "#super-cool-channel",
+		id: "8gh9548rg44"
+	},
+	{
+		name: "#super-lame-channel",
+		id: "hgff45387hy"
+	},
+	{
+		name: "#secret-channel",
+		id: "g8f734h87gt"
+	},
+]
+
 </script>
 
 <style>
 #client-root {
-  /* border: 1px solid white; */
-  height: 100%;
+	/* border: 1px solid white; */
+	height: 100%;
 }
 
 #client-root div {
-  /* border: 1px solid cyan; */
+	/* border: 1px solid cyan; */
 }
 
 #__nuxt {
-  display: flex;
-  flex-flow: column;
-  height: 100%;
+	display: flex;
+	flex-flow: column;
+	height: 100%;
 }
 
 #grid-container {
-  display: grid;
-  grid-template-columns: 1fr 18fr 4fr;
-  height: 100%;
+	display: grid;
+	grid-template-columns: 1fr 18fr 4fr;
+	height: 100%;
 }
 
 .grid-column {
-  padding-top: 1dvh;
+	padding-top: 1dvh;
 }
 
 #home {
-  margin-bottom: 3dvh;
+	margin-bottom: 3dvh;
 }
 
 #utilities {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 3dvh;
-  justify-content: center;
+	display: flex;
+	flex-direction: row;
+	margin-bottom: 3dvh;
+	justify-content: center;
 }
 
 #left-sidebar-container,
 #right-sidebar-container {
-  text-align: center;
+	text-align: center;
 }
 
 .member-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .bottom-border {
-  border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid rgb(70, 70, 70);
 }
 
 .left-border {
-  border-left: 1px solid rgb(70, 70, 70);
+	border-left: 1px solid rgb(70, 70, 70);
 }
 
 .right-border {
-  border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid rgb(70, 70, 70);
 }
 
 #main-content {
-  display: grid;
-  grid-template-rows: 1fr 15fr 1fr;
-  text-align: center;
+	display: grid;
+	grid-template-rows: 1fr 15fr 30fr 2fr;
+	text-align: center;
+	margin-left: 1dvw;
 }
 
 #message-box {
-  border: 1px solid rgb(70, 70, 70);
-  width: 100%;
-  margin-bottom: 1dvh;
+	border: 1px solid rgb(70, 70, 70);
+	width: 100%;
+	margin-bottom: 1dvh;
 }
 
 #message-box-input {
-  width: 80%;
-  height: 100%;
+	width: 80%;
+	height: 100%;
 }
 
 .main-grid-row {
-  border: 1px solid cyan;
+	/* border: 1px solid cyan; */
+}
+
+#main-bar {
+	margin-bottom: 2dvh;
 }
 </style>
\ No newline at end of file
diff --git a/pages/web/servers/[id]/channels/[id].vue b/pages/web/servers/[id]/channels/[id].vue
new file mode 100644
index 0000000..b9b4da4
--- /dev/null
+++ b/pages/web/servers/[id]/channels/[id].vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/web/servers/[id]/index.vue b/pages/web/servers/[id]/index.vue
new file mode 100644
index 0000000..b9b4da4
--- /dev/null
+++ b/pages/web/servers/[id]/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/web/test.vue b/pages/web/test.vue
new file mode 100644
index 0000000..91879f8
--- /dev/null
+++ b/pages/web/test.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+	layout: "client"
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file