From 8f06f25efebd40e155c432cfcff5c9d5c1d4770b Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 7 Jul 2025 20:40:49 +0200
Subject: [PATCH 01/10] feat: start adding back button for settings

---
 pages/settings.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 1380283..4c36914 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -3,6 +3,13 @@
     <div id="settings-page">
       <div id="sidebar">
         <ul>
+          <p>
+            <button @click="$router.go(-1)">
+              <Icon name="lucide:circle-arrow-left" alt="Back"></Icon>
+            </button>
+          </p>
+          <span class="spacer"></span>
+
           <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
             <h2>{{ category.displayName }}</h2>
@@ -28,7 +35,6 @@
             <br>
             Build Time: {{ appConfig.public.buildTimeString }}
           </p>
-
         </ul>
       </div>
       <div id="sub-page">
-- 
2.47.3


From d0fe0db3745fb447a0426993bcf1edbb2c22e303 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 7 Jul 2025 21:00:42 +0200
Subject: [PATCH 02/10] feat: more theme styling options, and description.css

---
 app.vue                                       |  2 +-
 components/MessageArea.vue                    |  3 +-
 .../[serverId]/channels/[channelId].vue       |  1 +
 public/themes/ash.css                         |  1 +
 public/themes/dark.css                        |  1 +
 public/themes/description.css                 | 28 +++++++++++++++++++
 public/themes/light.css                       |  1 +
 public/themes/rainbow-capitalism.css          |  6 +++-
 8 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 public/themes/description.css

diff --git a/app.vue b/app.vue
index 7af306b..cb5ec34 100644
--- a/app.vue
+++ b/app.vue
@@ -33,7 +33,7 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
-	background: var(--optional-chat-background);
+	background: var(--optional-body-background);
   background-color: var(--chat-background-color);
   margin: 0;
 }
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 18b9ac5..81221f0 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -259,6 +259,7 @@ router.beforeEach((to, from, next) => {
 	margin-bottom: 1dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
+	background: var(--optional-message-box-background);
 }
 
 #message-form {
@@ -268,11 +269,11 @@ router.beforeEach((to, from, next) => {
 
 #message-box-input {
 	width: 80%;
-	background-color: var(--sidebar-background-color);
 	border: none;
 	color: inherit;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
+	background-color: var(--chatbox-background-color);
 }
 
 #messages {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 6bdcc7c..32b8104 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -95,6 +95,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid var(--padding-color);
+	background: var(--optional-member-list-background);
 }
 
 #members-list {
diff --git a/public/themes/ash.css b/public/themes/ash.css
index b685551..75e0745 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
+	--chatbox-background-color: #3a3733
 
     --padding-color: #e0e0e0;
     
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 8245724..6bf7966 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
+	--chatbox-background-color: #2a2723
 
     --padding-color: #484848;
     
diff --git a/public/themes/description.css b/public/themes/description.css
new file mode 100644
index 0000000..1e7db0d
--- /dev/null
+++ b/public/themes/description.css
@@ -0,0 +1,28 @@
+/* this is not a real theme, but rather a template for themes */
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+
+    --chat-background-color: #80808000;
+    --chat-highlighted-background-color: #ffffff20;
+	--sidebar-background-color: #80808000;
+	--sidebar-highlighted-background-color: #ffffff20;
+	--topbar-background-color: #80808000;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    --optional-body-background: ; /* background element for the body */
+    --optional-chat-background: ; /* background element for the chat box */
+	--optional-topbar-background: ; /* background element for the topbar */
+	--optional-sidebar-background: ; /* background element for left server sidebar */
+	--optional-channel-list-background: ; /* background element for channel list and settings list */
+	--optional-member-list-background: ; /* background element for member list */
+	--optional-message-box-background: ; /* background element for message box */
+}
\ No newline at end of file
diff --git a/public/themes/light.css b/public/themes/light.css
index cb51d8c..04c2db6 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
+	--chatbox-background-color: #dfdbd6
 
     --padding-color: #484848;
     
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 8aeffc8..32f7449 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
+	--chatbox-background-color: #80808040;
 
     --padding-color: #80808000;
     
@@ -17,8 +18,11 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
-    --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
+    /* --optional-body-background: background */
+    --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
 	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
 	--optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0);
 	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
+	--optional-member-list-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
+    --optional-message-box-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
 }
\ No newline at end of file
-- 
2.47.3


From f91c29957534dfaceceac7d7b5233ebdf6213e8a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 7 Jul 2025 21:04:41 +0200
Subject: [PATCH 03/10] fix: add missing commas from themes

---
 public/themes/ash.css         | 2 +-
 public/themes/dark.css        | 2 +-
 public/themes/description.css | 1 +
 public/themes/light.css       | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/themes/ash.css b/public/themes/ash.css
index 75e0745..66923af 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -7,7 +7,7 @@
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
-	--chatbox-background-color: #3a3733
+	--chatbox-background-color: #3a3733;
 
     --padding-color: #e0e0e0;
     
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 6bf7966..b999e93 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -7,7 +7,7 @@
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
-	--chatbox-background-color: #2a2723
+	--chatbox-background-color: #2a2723;
 
     --padding-color: #484848;
     
diff --git a/public/themes/description.css b/public/themes/description.css
index 1e7db0d..4b07f11 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -8,6 +8,7 @@
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
+	--chatbox-background-color: #80808000;
 
     --padding-color: #80808000;
     
diff --git a/public/themes/light.css b/public/themes/light.css
index 04c2db6..b9b7b86 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -7,7 +7,7 @@
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
-	--chatbox-background-color: #dfdbd6
+	--chatbox-background-color: #dfdbd6;
 
     --padding-color: #484848;
     
-- 
2.47.3


From c0ad1a7c0d22771390b074497681dbfe06a89cb0 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 7 Jul 2025 21:27:45 +0200
Subject: [PATCH 04/10] feat: pretty button :3

---
 pages/settings.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 4c36914..3aac506 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -4,9 +4,9 @@
       <div id="sidebar">
         <ul>
           <p>
-            <button @click="$router.go(-1)">
-              <Icon name="lucide:circle-arrow-left" alt="Back"></Icon>
-            </button>
+            <span @click="$router.go(-1)">
+              <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
+            </span>
           </p>
           <span class="spacer"></span>
 
@@ -182,6 +182,16 @@ onMounted(() => {
   height: 100vh;
 }
 
+.back-button {
+  cursor: pointer;
+  color: var(--primary-color);
+  transition: color 100ms;
+}
+
+.back-button:hover{
+  color: var(--primary-highlighted-color);
+}
+
 #links-and-socials * {
   margin-right: 0.2em;
 }
-- 
2.47.3


From fa93e007590ffe715881cfe890ca170d38ced439 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 7 Jul 2025 22:22:20 +0200
Subject: [PATCH 05/10] feat: improve message box :3

---
 components/MessageArea.vue | 64 ++++++++++++++++++++++++++++----------
 public/themes/dark.css     |  2 +-
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 81221f0..1247f31 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -9,11 +9,23 @@
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
+				<div id="message-box-left-elements">
+					<span class="message-box-button">
+						<Icon name="lucide:file-plus-2" />
+					</span>
+				</div>
+
 				<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
 					name="message-input" autocomplete="off">
-				<button id="submit-button" type="submit">
-					<Icon name="lucide:send" />
-				</button>
+				
+				<div id="message-box-right-elements">
+					<button class="message-box-button" type="submit">
+						<Icon name="lucide:send" />
+					</button>
+					<span class="message-box-button">
+						<Icon name="lucide:image-play" />
+					</span>
+				</div>
 			</form>
 		</div>
 	</div>
@@ -249,33 +261,51 @@ router.beforeEach((to, from, next) => {
 }
 
 #message-box {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-content: center;
-	border: 1px solid var(--padding-color);
-	padding-bottom: 1dvh;
-	padding-top: 1dvh;
-	margin-bottom: 1dvh;
+	/* flex-direction: column; */
+	/* justify-content: center; */
+	/* align-content: center; */
+	/* padding-bottom: 1dvh; */
+	/* padding-top: 1dvh; */
+	margin-bottom: 2dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
-	background: var(--optional-message-box-background);
+	/* background: var(--optional-message-box-background); */
 }
 
 #message-form {
 	display: flex;
+	flex-direction: row;
+	
+	border: 1px solid var(--padding-color);
+	height: 100%;
+	padding-left: 2%;
+	padding-right: 2%;
+
+	min-height: 100%;
 	justify-content: center;
+	background-color: var(--chatbox-background-color);
 }
 
 #message-box-input {
-	width: 80%;
+	height: 100%;
+	width: 100%;
+	margin-left: 1.5%;
+	margin-right: 1.5%;
+
+	box-sizing: border-box;
+	display: inline-block;
+	vertical-align: top;
+
 	border: none;
 	color: inherit;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	background-color: var(--chatbox-background-color);
 }
 
+#message-box-left-elements, #message-box-right-elements {
+	display: flex;
+	align-items: center;
+}
+
 #messages {
 	overflow-y: scroll;
 	display: flex;
@@ -284,7 +314,7 @@ router.beforeEach((to, from, next) => {
 	padding-right: 1dvw;
 }
 
-#submit-button {
+.message-box-button {
 	background-color: inherit;
 	border: none;
 	color: var(--primary-color);
@@ -292,7 +322,7 @@ router.beforeEach((to, from, next) => {
 	font-size: 1.5em;
 }
 
-#submit-button:hover {
+.message-box-button:hover {
 	color: var(--primary-highlighted-color);
 	cursor: pointer;
 }
diff --git a/public/themes/dark.css b/public/themes/dark.css
index b999e93..af94112 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -7,7 +7,7 @@
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
-	--chatbox-background-color: #2a2723;
+	--chatbox-background-color: #1a1713;
 
     --padding-color: #484848;
     
-- 
2.47.3


From 51c2578e60573b986526d7d1af36cd237f86b603 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 8 Jul 2025 15:45:18 +0200
Subject: [PATCH 06/10] fix: remove unused code, set chatbox input to a
 transparent colour

---
 components/MessageArea.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 1247f31..9bf6df8 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -261,15 +261,9 @@ router.beforeEach((to, from, next) => {
 }
 
 #message-box {
-	/* flex-direction: column; */
-	/* justify-content: center; */
-	/* align-content: center; */
-	/* padding-bottom: 1dvh; */
-	/* padding-top: 1dvh; */
 	margin-bottom: 2dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
-	/* background: var(--optional-message-box-background); */
 }
 
 #message-form {
@@ -298,7 +292,7 @@ router.beforeEach((to, from, next) => {
 
 	border: none;
 	color: inherit;
-	background-color: var(--chatbox-background-color);
+	background-color: #00000000; /* completely transparent colour */
 }
 
 #message-box-left-elements, #message-box-right-elements {
-- 
2.47.3


From f1bec945fe0cd7a23eccb9a499a0b11da4de951a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 03:36:30 +0200
Subject: [PATCH 07/10] feat: multiline message box

this implementation SUCKS and i probably have to write an entirely custom solution where every line is a div or something
---
 components/MessageArea.vue | 64 +++++++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 9bf6df8..34a79fa 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -14,9 +14,11 @@
 						<Icon name="lucide:file-plus-2" />
 					</span>
 				</div>
-
-				<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
-					name="message-input" autocomplete="off">
+				<textarea v-model="messageInput" id="message-box-input" ref="messageInputField"
+						class="rounded-corners" type="text" name="message-input"
+						autocomplete="off" contenteditable="true" spellcheck="true"
+						@keydown="handleMessageKeyDown">
+				</textarea>
 				
 				<div id="message-box-right-elements">
 					<button class="message-box-button" type="submit">
@@ -118,11 +120,19 @@ function pushMessage(message: MessageResponse) {
 	messages.value.push(message);
 }
 
+function handleMessageKeyDown(event: KeyboardEvent) {
+	if (event.key === "Enter" && event.shiftKey) {
+		event.preventDefault();
+		messageInput.value += "\n"
+	} else if (event.key === "Enter") {
+		// <send message>
+	}
+}
+
 const messages = ref<MessageResponse[]>([]);
-
 const messageInput = ref<string>();
-
 const messagesElement = ref<HTMLDivElement>();
+const messageInputField = ref<HTMLTextAreaElement>();
 
 if (messagesRes) messages.value = messagesRes;
 
@@ -253,8 +263,8 @@ router.beforeEach((to, from, next) => {
 
 <style scoped>
 #message-area {
-	display: grid;
-	grid-template-rows: 8fr 1fr;
+	display: flex;
+	flex-direction: column;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
@@ -264,35 +274,39 @@ router.beforeEach((to, from, next) => {
 	margin-bottom: 2dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
-}
 
-#message-form {
-	display: flex;
-	flex-direction: row;
-	
-	border: 1px solid var(--padding-color);
-	height: 100%;
 	padding-left: 2%;
 	padding-right: 2%;
+	
+	min-height: 5em;
+	max-height: 50%;
+	flex-grow: 1;
 
-	min-height: 100%;
-	justify-content: center;
+	border: 1px solid var(--padding-color);
 	background-color: var(--chatbox-background-color);
 }
 
-#message-box-input {
+#message-form {
 	height: 100%;
-	width: 100%;
-	margin-left: 1.5%;
-	margin-right: 1.5%;
+
+	display: flex;
+	flex-direction: row;
+	gap: .5em;
+}
+
+#message-box-input {
+	flex-grow: 1;
+
+	color: inherit;
+	font: inherit;
+	border: none;
+	background-color: #40404000; /* completely transparent colour */
 
 	box-sizing: border-box;
 	display: inline-block;
-	vertical-align: top;
-
-	border: none;
-	color: inherit;
-	background-color: #00000000; /* completely transparent colour */
+	
+	overflow: auto;
+	resize: none;
 }
 
 #message-box-left-elements, #message-box-right-elements {
-- 
2.47.3


From e58809b4241d720e6bc1a2d62ac920510fbc3f40 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 16:34:39 +0200
Subject: [PATCH 08/10] feat: implement multiline message box

---
 components/MessageArea.vue | 102 +++++++++++++++++++++++++------------
 1 file changed, 69 insertions(+), 33 deletions(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 34a79fa..1470955 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -14,11 +14,14 @@
 						<Icon name="lucide:file-plus-2" />
 					</span>
 				</div>
-				<textarea v-model="messageInput" id="message-box-input" ref="messageInputField"
-						class="rounded-corners" type="text" name="message-input"
-						autocomplete="off" contenteditable="true" spellcheck="true"
-						@keydown="handleMessageKeyDown">
-				</textarea>
+
+				<div id="message-textarea">
+					<div id="message-textbox-input" class=""
+							role="textbox" ref="messageTextboxInput"
+							autocorrect="off" spellcheck="true" contenteditable="true"
+							@keydown="handleTextboxKeyDown" @input="handleTextboxInput">
+					</div>
+				</div>
 				
 				<div id="message-box-right-elements">
 					<button class="message-box-button" type="submit">
@@ -120,19 +123,38 @@ function pushMessage(message: MessageResponse) {
 	messages.value.push(message);
 }
 
-function handleMessageKeyDown(event: KeyboardEvent) {
-	if (event.key === "Enter" && event.shiftKey) {
-		event.preventDefault();
-		messageInput.value += "\n"
+function handleTextboxKeyDown(event: KeyboardEvent) {
+	if (event.key === "Enter" && event.shiftKey && messageTextboxInput.value) {
+		// this enters a newline, due to not preventing default
 	} else if (event.key === "Enter") {
-		// <send message>
+		event.preventDefault()
+		sendMessage(event)
+	}
+	
+	adjustTextboxHeight()
+}
+
+function handleTextboxInput() {
+	if (messageTextboxInput.value) {
+        messageInput.value = messageTextboxInput.value.innerText;
+    }
+
+	adjustTextboxHeight()
+}
+
+// this technically uses pixel units, but it's still set using dynamic units
+function adjustTextboxHeight() {
+	if (messageTextboxInput.value && messageTextboxDisplay.value) {
+		messageTextboxInput.value.style.height = "auto"
+		messageTextboxInput.value.style.height = `${messageTextboxInput.value.scrollHeight}px`
 	}
 }
 
 const messages = ref<MessageResponse[]>([]);
-const messageInput = ref<string>();
+const messageInput = ref<string>("");
 const messagesElement = ref<HTMLDivElement>();
-const messageInputField = ref<HTMLTextAreaElement>();
+const messageTextboxInput = ref<HTMLDivElement>();
+const messageTextboxDisplay = ref<HTMLDivElement>();
 
 if (messagesRes) messages.value = messagesRes;
 
@@ -180,14 +202,21 @@ if (accessToken && apiBase) {
 
 function sendMessage(e: Event) {
 	e.preventDefault();
-	const message = {
-		message: messageInput.value
-	}
-	console.log("message:", message);
-	if (message.message) {
+	if (messageInput.value && messageInput.value.trim() !== "") {
+		const message = {
+			message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
+		}
+
+		console.log("message:", message);
 		ws.send(JSON.stringify(message));
-		messageInput.value = "";
-		console.log("MESSAGE SENT!!!");
+
+		// reset input field
+		messageInput.value = ""
+		if (messageTextboxInput.value) {
+			messageTextboxInput.value.innerText = ""
+		}
+
+		adjustTextboxHeight()
 	}
 }
 
@@ -278,35 +307,42 @@ router.beforeEach((to, from, next) => {
 	padding-left: 2%;
 	padding-right: 2%;
 	
-	min-height: 5em;
-	max-height: 50%;
-	flex-grow: 1;
-
+	align-items: center;
+	
+	color: var(--text-color);
 	border: 1px solid var(--padding-color);
 	background-color: var(--chatbox-background-color);
 }
 
 #message-form {
-	height: 100%;
-
 	display: flex;
 	flex-direction: row;
-	gap: .5em;
+	gap: .55em;
 }
 
-#message-box-input {
+#message-textarea {
 	flex-grow: 1;
+	min-height: 2.35em;
+}
 
-	color: inherit;
-	font: inherit;
+#message-textbox-input {
+	width: 100%;
+	max-height: 50dvh;
+
+	padding: 0.5em 0;
+	user-select: text;
+
+	font-family: inherit;
+	font-size: inherit;
+	line-height: normal;
 	border: none;
 	background-color: #40404000; /* completely transparent colour */
 
-	box-sizing: border-box;
-	display: inline-block;
+	text-align: left;
+	word-break: break-word;
+	overflow-wrap: break-word;
 	
-	overflow: auto;
-	resize: none;
+	overflow-y: auto;
 }
 
 #message-box-left-elements, #message-box-right-elements {
-- 
2.47.3


From 2665f29341ec7b00ffef8a735a869849b9c081b2 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 11:55:45 +0200
Subject: [PATCH 09/10] feat: align message box buttons to bottom

---
 components/MessageArea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 1470955..8a6cc80 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -347,7 +347,7 @@ router.beforeEach((to, from, next) => {
 
 #message-box-left-elements, #message-box-right-elements {
 	display: flex;
-	align-items: center;
+	align-items: end;
 }
 
 #messages {
-- 
2.47.3


From e71db5f57172fcaa35d59bbd55360da346bd8e9f Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 10 Jul 2025 11:56:54 +0200
Subject: [PATCH 10/10] chore: remove unused class attribute in message text
 box element

---
 components/MessageArea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 8a6cc80..aa50cbc 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -16,7 +16,7 @@
 				</div>
 
 				<div id="message-textarea">
-					<div id="message-textbox-input" class=""
+					<div id="message-textbox-input"
 							role="textbox" ref="messageTextboxInput"
 							autocorrect="off" spellcheck="true" contenteditable="true"
 							@keydown="handleTextboxKeyDown" @input="handleTextboxInput">
-- 
2.47.3