app.vue

@@ -1,14 +1,11 @@
 <template>
   <div>
-    <Banner v-if="banner" />
     <NuxtPage />
   </div>
 </template>
 
 <script lang="ts" setup>
 
-const banner = useState("banner", () => false);
-
 </script>
 
 <style>
@@ -45,8 +42,4 @@ a {
 	border-right: 1px solid rgb(70, 70, 70);
 }
 
-.rounded-corners {
-  border-radius: .3rem;
-}
-
 </style>

components/Message.vue

@@ -31,23 +31,20 @@ const messageDate = ref<string>();
 const showHover = ref(false);
 
 const date = new Date(props.timestamp);
+const now = new Date()
 
-console.log("message:", props.text);
-let dateHour = date.getHours();
-let dateMinute = date.getMinutes();
-if (props.format == "12") {
-	if (dateHour > 12) {
-		dateHour = dateHour - 12;
-		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM`
-	} else {
-		if (dateHour == 0) {
-			dateHour = 12;
+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 < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}`
-	}
-} else {
-	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
+		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour > 0 && dateHour < 13 ? "AM" : "PM"}`
+	} else {
+		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
 	}
+}
 
 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;

components/MessageArea.vue

@@ -4,9 +4,9 @@
 		<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>
-	<div id="message-box" class="rounded-corners">
+	<div id="message-box">
 		<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" type="text" name="message-input" id="message-box-input" autocomplete="off">
 			<button id="submit-button" type="submit">
 				<Icon name="lucide:send" />
 			</button>
@@ -19,18 +19,20 @@
 import type { MessageResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
 
-const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
+const props = defineProps<{ channelUrl: string, amount?: number, offset?: number, reverse?: boolean }>();
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
-if (messagesRes) {
+if (messagesRes && props.reverse) {
   messagesRes.reverse();
 }
 
 const messages = ref<MessageResponse[]>([]);
 
+const route = useRoute();
+
 const messageInput = ref<string>();
 
 const messagesElement = ref<HTMLDivElement>();
@@ -52,7 +54,7 @@ if (accessToken && apiBase) {
 		["Authorization", accessToken]
 	);
 	if (ws) break;
-	await sleep(5000);
+	await sleep(10000);
 } while (!ws);
 
 ws.addEventListener("open", (event) => {
@@ -70,9 +72,6 @@ ws.addEventListener("message", async (event) => {
 		scrollToBottom(messagesElement);
 	}
 });
-
-
-
 } else {
 	await refresh();
 }
@@ -124,15 +123,13 @@ onMounted(async () => {
 #message-form {
 	display: flex;
 	justify-content: center;
+	height: 60%;
 }
 
 #message-box-input {
 	width: 80%;
 	background-color: rgb(50, 50, 50);
 	border: none;
-	color: inherit;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 }
 
 #messages {
@@ -145,12 +142,11 @@ onMounted(async () => {
 #submit-button {
 	background-color: inherit;
 	border: none;
-	color: rgb(200, 200, 200);
-	font-size: 1.5em;
+	color: white;
 }
 
 #submit-button:hover {
-	color: rgb(255, 255, 255);
+	background-color: rgb(40, 40, 40);
 }
 
 </style>