undo the last 6 merges i fucked up

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;
 }

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;
 

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-left: .25em;
-	padding-right: .5dvw;
+	padding-right: .25em;
 }
 
 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 4dvh;
+	height: 1.5em;
 	white-space: nowrap;
 	align-items: center;
 }

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-top: .5em;
-	padding-bottom: 1dvh;
+	padding-bottom: .5em;
 	margin: 0;
 }
 
 .message-text ul  {
-	padding-left: 2dvw;
+	padding-left: 1em;
 }
 </style>

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"
+				<div id="message-box-left-elements">
-					name="message-input" autocomplete="off">
+					<span class="message-box-button">
-				<button id="submit-button" type="submit">
+						<Icon name="lucide:file-plus-2" />
-					<Icon name="lucide:send" />
+					</span>
-				</button>
+				</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 = {
+	if (messageInput.value && messageInput.value.trim() !== "") {
-		message: messageInput.value
+		const message = {
-	}
+			message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
-	console.log("message:", message);
+		}
-	if (message.message) {
+
+		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;
+	display: flex;
-	grid-template-rows: 8fr 1fr;
+	flex-direction: column;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
+	flex-grow: 1;
 }
 
 #message-box {
-	display: flex;
+	margin-bottom: 2dvh;
-	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-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 {
+#message-textarea {
-	width: 80%;
+	flex-grow: 1;
-	background-color: var(--sidebar-background-color);
+	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;
+	background-color: #40404000; /* completely transparent colour */
-	padding-left: 1dvw;
+
-	padding-right: 1dvw;
+	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;
 }

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">
+		<div id = "page-content">
-			<NuxtLink id="home-button" href="/">
+			<div id="left-column">
-				<img class="sidebar-icon" src="/public/icon.svg"/>
+				<NuxtLink id="home-button" href="/">
-			</NuxtLink>
+					<img class="sidebar-icon" src="/public/icon.svg"/>
-			<div id="servers-list">
+				</NuxtLink>
-				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+				<div id="servers-list">
-					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
+						<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">
+			<slot />
-				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
-			</NuxtLink>
 		</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;
+	width: 100dvw;
-	grid-template-columns: 1fr 4fr 18fr 4fr;
+	display: flex;
-	grid-template-rows: 4dvh auto;
+	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;
+	min-height: 4dvh;
-	grid-column: 1 / -1;
 	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) {
+.homebar-item {
-	border-bottom: 1px solid var(--padding-color);
+	width: 100dvw;
 }
 
-#__nuxt {
+#page-content {
 	display: flex;
-	flex-flow: column;
+	flex-direction: row;
+	flex-grow: 1;
+    overflow: auto;
 }
 
-.grid-column {
+#left-column {
-	padding-top: 1dvh;
+	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 {
+#servers-list {
-	padding-left: .5dvw;
+	display: flex;
-	padding-right: .5dvw;
+	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
+	bottom: .25em
-}
-
-#servers-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1dvh;
 }
 
 </style>

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>
 

pages/servers/[serverId]/channels/[channelId].vue

@@ -83,36 +83,36 @@ function handleMemberClick(member: GuildMemberResponse) {
 <style>
 
 #middle-left-column {
-	padding-left: 1dvw;
+	padding-left: .5em;
-	padding-right: 1dvw;
+	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;
+	width: 12rem;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
 	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: 1.25em;
-	padding-left: 1dvw;
+	padding-right: 1.25em;
-	padding-right: 1dvw;
+	padding-top: 0.75em;
-	margin-top: 1dvh;
+	padding-bottom: 0.75em;
+	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
 }
 
 .member-item {
-	display: grid;
+	display: flex;
-	grid-template-columns: 2dvw 1fr;
 	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 {

pages/settings.vue

@@ -4,9 +4,9 @@
       <div id="sidebar">
         <ul>
           <p>
-            <button @click="$router.go(-1)">
+            <span @click="$router.go(-1)">
-              <Icon name="lucide:circle-arrow-left" alt="Back"></Icon>
+              <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
-            </button>
+            </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;
 }

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;
     

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;
     

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 */
+}

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;
     

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);
 }