feat: implement multiline message box

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
2025-07-10 15:48:14 +02:00 · 2025-07-10 15:48:14 +02:00 · 2025-07-10 15:48:14 +02:00 · 2025-07-10 15:48:14 +02:00 · 2025-07-10 15:48:14 +02:00 · 2025-07-10 15:48:14 +02:00
14 changed files with 255 additions and 118 deletions
--- 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;
 }
--- a/components/Button.vue
+++ b/components/Button.vue
@ -21,7 +21,7 @@ const props = defineProps<{
 	background-color: var(--primary-color);
 	color: var(--text-color);

-	padding: 0.7dvh 1.2dvw;
+	padding: 0.4em 0.75em;
 	font-size: 1.1em;
 	transition: background-color 0.2s;

--- a/components/Channel.vue
+++ b/components/Channel.vue
@ -23,14 +23,14 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 .channel-list-link {
 	text-decoration: none;
 	color: inherit;
-	padding-left: .5dvw;
-	padding-right: .5dvw;
+	padding-left: .25em;
+	padding-right: .25em;
 }

 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 4dvh;
+	height: 1.5em;
 	white-space: nowrap;
 	align-items: center;
 }
--- a/components/Message.vue
+++ b/components/Message.vue
@ -188,12 +188,12 @@ function getDayDifference(date1: Date, date2: Date) {

 <style module>
 .message-text ul, h1, h2, h3, h4, h5, h6 {
-	padding-top: 1dvh;
-	padding-bottom: 1dvh;
+	padding-top: .5em;
+	padding-bottom: .5em;
 	margin: 0;
 }

 .message-text ul  {
-	padding-left: 2dvw;
+	padding-left: 1em;
 }
 </style>
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@ -9,11 +9,28 @@
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
-				<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-left-elements">
+					<span class="message-box-button">
+						<Icon name="lucide:file-plus-2" />
+					</span>
+				</div>
+
+				<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">
+						<Icon name="lucide:send" />
+					</button>
+					<span class="message-box-button">
+						<Icon name="lucide:image-play" />
+					</span>
+				</div>
 			</form>
 		</div>
 	</div>
@ -106,11 +123,38 @@ function pushMessage(message: MessageResponse) {
 	messages.value.push(message);
 }

+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") {
+		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 messageTextboxInput = ref<HTMLDivElement>();
+const messageTextboxDisplay = ref<HTMLDivElement>();

 if (messagesRes) messages.value = messagesRes;

@ -158,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()
 	}
 }

@ -241,38 +292,63 @@ 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;
+	flex-grow: 1;
 }

 #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;
+	margin-bottom: 2dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
+
+	padding-left: 2%;
+	padding-right: 2%;
+	
+	align-items: center;
+	
+	color: var(--text-color);
+	border: 1px solid var(--padding-color);
+	background-color: var(--chatbox-background-color);
 }

 #message-form {
 	display: flex;
-	justify-content: center;
+	flex-direction: row;
+	gap: .55em;
 }

-#message-box-input {
-	width: 80%;
-	background-color: var(--sidebar-background-color);
+#message-textarea {
+	flex-grow: 1;
+	min-height: 2.35em;
+}
+
+#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;
-	color: inherit;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	background-color: #40404000; /* completely transparent colour */
+
+	text-align: left;
+	word-break: break-word;
+	overflow-wrap: break-word;
+	
+	overflow-y: auto;
+}
+
+#message-box-left-elements, #message-box-right-elements {
+	display: flex;
+	align-items: center;
 }

 #messages {
@ -283,7 +359,7 @@ router.beforeEach((to, from, next) => {
 	padding-right: 1dvw;
 }

-#submit-button {
+.message-box-button {
 	background-color: inherit;
 	border: none;
 	color: var(--primary-color);
@ -291,7 +367,7 @@ router.beforeEach((to, from, next) => {
 	font-size: 1.5em;
 }

-#submit-button:hover {
+.message-box-button:hover {
 	color: var(--primary-highlighted-color);
 	cursor: pointer;
 }
--- a/layouts/client.vue
+++ b/layouts/client.vue
@ -3,24 +3,28 @@
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div id="homebar">
 			<div class="homebar-item">
-				main bar
+				<marquee>
+					gorb!!!!!
+				</marquee>
 			</div>
 		</div>
-		<div id="left-column">
-			<NuxtLink id="home-button" href="/">
-				<img class="sidebar-icon" src="/public/icon.svg"/>
-			</NuxtLink>
-			<div id="servers-list">
-				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
-					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+		<div id = "page-content">
+			<div id="left-column">
+				<NuxtLink id="home-button" href="/">
+					<img class="sidebar-icon" src="/public/icon.svg"/>
+				</NuxtLink>
+				<div id="servers-list">
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+						<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+						<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+					</NuxtLink>
+				</div>
+				<NuxtLink id="settings-menu" href="/settings">
+					<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
 				</NuxtLink>
 			</div>
-			<NuxtLink id="settings-menu" href="/settings">
-				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
-			</NuxtLink>
+			<slot />
 		</div>
-		<slot />
 	</div>
 </template>

@ -34,11 +38,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");

 <style>
 #client-root {
-	/* border: 1px solid white; */
 	height: 100dvh;
-	display: grid;
-	grid-template-columns: 1fr 4fr 18fr 4fr;
-	grid-template-rows: 4dvh auto;
+	width: 100dvw;
+	display: flex;
+	flex-direction: column;
 	text-align: center;
 }

@ -48,37 +51,59 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");

 .visible {
 	opacity: 100%;
-	transition-duration: 500ms;
+	transition: opacity 500ms;
 }

 #homebar {
-	grid-row: 1;
-	grid-column: 1 / -1;
+	min-height: 4dvh;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
 	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
+	border-bottom: 1px solid var(--padding-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
+
 }

-#client-root>div:nth-child(-n+4) {
-	border-bottom: 1px solid var(--padding-color);
+.homebar-item {
+	width: 100dvw;
 }

-#__nuxt {
+#page-content {
 	display: flex;
-	flex-flow: column;
+	flex-direction: row;
+	flex-grow: 1;
+    overflow: auto;
 }

-.grid-column {
-	padding-top: 1dvh;
+#left-column {
+	display: flex;
+	flex-direction: column;
+	gap: .75em;
+	padding-left: .25em;
+	padding-right: .25em;
+	border-right: 1px solid var(--padding-color);
+	background: var(--optional-sidebar-background);
+	background-color: var(--sidebar-background-color);
+	padding-top: .5em;
 }

-#home {
-	padding-left: .5dvw;
-	padding-right: .5dvw;
+#servers-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+	width: 3.2rem;	
+}
+
+#middle-left-column {
+	padding-left: .25em;
+	padding-right: .25em;
+	border-right: 1px solid var(--padding-color);
+	min-width: 10em;
+	overflow-y: scroll;
+	overflow-x: hidden;
 }

 .sidebar-icon {
@ -86,43 +111,14 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	height: 3rem;
 }

-#current-info {
-	grid-column: 2;
-	grid-row: 1;
-}
-
-#left-column {
-	display: flex;
-	flex-direction: column;
-	gap: 2dvh;
-	padding-left: .5dvw;
-	padding-right: .5dvw;
-	border-right: 1px solid var(--padding-color);
-	background: var(--optional-sidebar-background);
-	background-color: var(--sidebar-background-color);
-	padding-top: 1.5dvh;
-}
-
-#middle-left-column {
-	padding-left: 1dvw;
-	padding-right: 1dvw;
-	border-right: 1px solid var(--padding-color);
-}
-
 #home-button {
 	border-bottom: 1px solid var(--padding-color);
-	padding-bottom: 1dvh;
+	padding-bottom: .375em;
 }

 #settings-menu {
 	position: absolute;
-	bottom: .25dvh
-}
-
-#servers-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
+	bottom: .25em
 }

 </style>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -1,6 +1,19 @@
 <template>
  <NuxtLayout>
-
+    <div id="left-bar">
+    </div>
+	<div id="middle-bar">
+      <h1>
+        Welcome to gorb :3
+      </h1>
+	  <p>
+		Click on a guild to the left to view a guild.
+		<br>
+		Or click the button in the bottom left to join a guild.
+	  </p>
+    </div>
+	<div id="right-bar">
+    </div>
  </NuxtLayout>
 </template>

--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@ -83,36 +83,36 @@ function handleMemberClick(member: GuildMemberResponse) {
 <style>

 #middle-left-column {
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	padding-left: .5em;
+	padding-right: .5em;
 	border-right: 1px solid var(--padding-color);
 	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }

 #members-container {
-	padding-top: 1dvh;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	width: 12rem;
 	border-left: 1px solid var(--padding-color);
+	background: var(--optional-member-list-background);
 }

 #members-list {
 	display: flex;
 	flex-direction: column;
+	overflow-x: hidden;
 	overflow-y: scroll;
-	max-height: 92dvh;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
-	margin-top: 1dvh;
+	padding-left: 1.25em;
+	padding-right: 1.25em;
+	padding-top: 0.75em;
+	padding-bottom: 0.75em;
+	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
 }

 .member-item {
-	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	display: flex;
 	margin-top: .5em;
 	margin-bottom: .5em;
-	gap: 1em;
+	gap: .5em;
 	align-items: center;
 	text-align: left;
 	cursor: pointer;
@ -121,7 +121,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 #channels-list {
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
+	gap: .5em;
 }

 .member-avatar {
--- a/pages/settings.vue
+++ b/pages/settings.vue
@ -3,6 +3,13 @@
    <div id="settings-page">
      <div id="sidebar">
        <ul>
+          <p>
+            <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>
+
          <!-- 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">
@ -176,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;
 }
--- 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;
    
--- 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: #1a1713;

    --padding-color: #484848;
    
--- a/public/themes/description.css
+++ b/public/themes/description.css
@ -0,0 +1,29 @@
+/* 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;
+	--chatbox-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 */
+}
--- 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;
    
--- 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);
 }
Author	SHA1	Message	Date
JustTemmie	cc32ec9018	feat: implement multiline message box All checks were successful ci/woodpecker/push/build-and-publish Pipeline was successful Details	2025-07-10 15:48:14 +02:00
JustTemmie	a5fd626bb7	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	2025-07-10 15:48:14 +02:00
JustTemmie	cd13eedaf8	fix: remove accidental duplication of member list this was for local testing, forgot to remove it	2025-07-10 15:48:14 +02:00
JustTemmie	3c1ac0589f	refactor: more dv to em	2025-07-10 15:48:14 +02:00
JustTemmie	e645767cb2	refactor: change a lot of dynamic sizes to em and rem this makes the client feel a LOT snappier	2025-07-10 15:48:14 +02:00
JustTemmie	9c08db29d5	refactor: change the client from table to flexbox this makes the server, channel, and member list a constant size, making the text messages take up the entire remaining width this also fixes the text wrapping you have already fixed on one of your branches this change is required if we want to make the member list toggelable, or channel list resizable	2025-07-10 15:48:14 +02:00
JustTemmie	13971eff94	feat: spice up the home bar	2025-07-10 15:48:14 +02:00
JustTemmie	b13ba80a06	fix: rephrase sentace from "server" to "guild"	2025-07-10 15:48:14 +02:00
JustTemmie	ffc09d4c2f	fix: put the home page into index.vue instead	2025-07-10 15:48:14 +02:00
JustTemmie	8e9dd596a3	feat: implement basic home page	2025-07-10 15:48:14 +02:00
JustTemmie	6b7fab0077	fix: remove unused code, set chatbox input to a transparent colour	2025-07-10 15:48:14 +02:00
JustTemmie	43d1f3798d	feat: improve message box :3	2025-07-10 15:48:14 +02:00
JustTemmie	180ae1e85d	feat: pretty button :3	2025-07-10 15:48:14 +02:00
JustTemmie	4ed9a406e3	fix: add missing commas from themes	2025-07-10 15:48:14 +02:00
JustTemmie	8fa8aabfce	feat: more theme styling options, and description.css	2025-07-10 15:48:14 +02:00
JustTemmie	0afb269788	feat: start adding back button for settings	2025-07-10 15:48:14 +02:00