app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+	title: "Gorb",
+    buildTimeString: new Date().toISOString(),
+    gitHash: process.env.GIT_SHORT_REV || "N/A"
+})

app.vue

@@ -33,7 +33,6 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
-	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.4em 0.75em;
+	padding: 0.7dvh 1.2dvw;
 	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: .25em;
+	padding-left: .5dvw;
-	padding-right: .25em;
+	padding-right: .5dvw;
 }
 
 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 1.5em;
+	height: 4dvh;
 	white-space: nowrap;
 	align-items: center;
 }

components/CropPopup.vue

@@ -1,93 +0,0 @@
-<template>
-  <div id="fullscreen-container">
-    <div id="crop-preview">
-      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
-      <Button text="Crop" :callback="cropImage"></Button>
-      <Button text="Cancel" :callback="closePopup"></Button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Cropper from 'cropperjs';
-
-const props = defineProps({
-  imageSrc: String,
-  onCrop: Function,
-  onClose: Function,
-});
-
-const image = ref<HTMLImageElement | null>(null);
-const cropper = ref<Cropper | null>(null);
-
-watch(image, (newValue) => {
-  if (newValue) {
-    cropper.value = new Cropper(newValue)
-    const cropperCanvas = cropper.value.getCropperCanvas()
-    const cropperSelection = cropper.value.getCropperSelection()
-    
-    if (cropperCanvas) {
-      cropperCanvas.background = false
-    }
-
-    if (cropperSelection) {
-      cropperSelection.precise = true
-      cropperSelection.aspectRatio = 1
-      cropperSelection.initialCoverage = 1
-    }
-  }
-});
-
-async function cropImage() {
-  if (cropper) {
-    const selection = cropper.value?.getCropperSelection();
-    if (selection) {
-      const canvas = await selection.$toCanvas({width: 256, height: 256})
-
-      canvas.toBlob((blob) => {
-        if (blob && props.onCrop) {
-          const reader = new FileReader();
-          reader.addEventListener("load", () => {
-            if (reader.result && typeof reader.result === 'string') {
-              if (props.onCrop) {
-                props.onCrop(blob, reader.result)
-              }
-            }
-          });
-          const file = new File([blob], 'preview.png', { type: 'image/png' })
-          reader.readAsDataURL(file)
-        }
-      });
-    }
-  }
-}
-
-function closePopup() {
-  if (props.onClose) {
-    props.onClose();
-  }
-}
-</script>
-
-<style scoped>
-.button {
-  margin: 0.2em
-}
-
-#fullscreen-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-#crop-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>

components/MemberEntry.vue

@@ -2,8 +2,8 @@
     <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
         <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
         <Icon v-else class="member-avatar" name="lucide:user" />
-        <span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
+        <span class="member-display-name">{{ props.member.user.display_name ?? props.member.user.username }}</span>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
     </div>
 </template>
 
@@ -32,4 +32,9 @@ const hidePopup = () => {
 .member-item {
     position: relative; /* Set the position to relative for absolute positioning of the popup */
 }
+
+.profile-popup {
+    position: absolute; /* Use absolute positioning */
+    left: -100px; /* Adjust this value to position the popup to the left */
+}
 </style>

components/Message.vue

@@ -60,16 +60,7 @@ const sanitized = ref<string>();
 
 onMounted(async () => {
 	const parsed = await parse(props.text, { gfm: true });
-	sanitized.value = DOMPurify.sanitize(parsed, {
+	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
-		ALLOWED_TAGS: [
-			"strong", "em", "br", "blockquote",
-			"code", "ul", "ol", "li", "a", "h1",
-			"h2", "h3", "h4", "h5", "h6"
-		],
-		ALLOW_DATA_ATTR: false,
-		ALLOW_SELF_CLOSE_IN_ATTR: false,
-		ALLOWED_ATTR: []
-	});
 	console.log("adding listeners")
 	await nextTick();
 	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
@@ -108,7 +99,6 @@ function getDayDifference(date1: Date, date2: Date) {
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
-	overflow-wrap: anywhere;
 }
 
 .message:hover {
@@ -188,12 +178,12 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style module>
 .message-text ul, h1, h2, h3, h4, h5, h6 {
-	padding-top: .5em;
+	padding-top: 1dvh;
-	padding-bottom: .5em;
+	padding-bottom: 1dvh;
 	margin: 0;
 }
 
 .message-text ul  {
-	padding-left: 1em;
+	padding-left: 2dvw;
 }
 </style>

components/MessageArea.vue

@@ -9,28 +9,11 @@
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
-				<div id="message-box-left-elements">
+				<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
-					<span class="message-box-button">
+					name="message-input" autocomplete="off">
-						<Icon name="lucide:file-plus-2" />
+				<button id="submit-button" type="submit">
-					</span>
+					<Icon name="lucide:send" />
-				</div>
+				</button>
-
-				<div id="message-textarea">
-					<div id="message-textbox-input"
-							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>
@@ -123,38 +106,11 @@ 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;
 
@@ -202,21 +158,14 @@ if (accessToken && apiBase) {
 
 function sendMessage(e: Event) {
 	e.preventDefault();
-	if (messageInput.value && messageInput.value.trim() !== "") {
+	const message = {
-		const message = {
+		message: messageInput.value
-			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 = "";
-		// reset input field
+		console.log("MESSAGE SENT!!!");
-		messageInput.value = ""
-		if (messageTextboxInput.value) {
-			messageTextboxInput.value.innerText = ""
-		}
-
-		adjustTextboxHeight()
 	}
 }
 
@@ -292,64 +241,38 @@ router.beforeEach((to, from, next) => {
 
 <style scoped>
 #message-area {
-	display: flex;
+	display: grid;
-	flex-direction: column;
+	grid-template-rows: 8fr 1fr;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
-	flex-grow: 1;
 }
 
 #message-box {
-	margin-top: auto; /* force it to the bottom of the screen */
+	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;
-	flex-direction: row;
+	justify-content: center;
-	gap: .55em;
 }
 
-#message-textarea {
+#message-box-input {
-	flex-grow: 1;
+	width: 80%;
-	min-height: 2.35em;
+	background-color: var(--sidebar-background-color);
-}
-
-#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 */
+	color: inherit;
-
+	padding-left: 1dvw;
-	text-align: left;
+	padding-right: 1dvw;
-	word-break: break-word;
-	overflow-wrap: break-word;
-	
-	overflow-y: auto;
-}
-
-#message-box-left-elements, #message-box-right-elements {
-	display: flex;
-	align-items: end;
 }
 
 #messages {
@@ -360,7 +283,7 @@ router.beforeEach((to, from, next) => {
 	padding-right: 1dvw;
 }
 
-.message-box-button {
+#submit-button {
 	background-color: inherit;
 	border: none;
 	color: var(--primary-color);
@@ -368,7 +291,7 @@ router.beforeEach((to, from, next) => {
 	font-size: 1.5em;
 }
 
-.message-box-button:hover {
+#submit-button:hover {
 	color: var(--primary-highlighted-color);
 	cursor: pointer;
 }

components/Settings/AppSettings/Appearance.vue

@@ -1,100 +1,14 @@
 <template>
   <div>
-    <h1>Appearance</h1>
+    <h1>hi</h1>
-    
+    <h5>TEST</h5>
-    <p class="subtitle">THEMES</p>
+    <h5>TEST</h5>
-    <div class="themes">
-      <div v-for="theme of themes" class="theme-preview-container">
-        <span class="theme-preview"
-          :title="theme.displayName"
-          :style="{background:`linear-gradient(${theme.previewGradient})`}"
-          @click="changeTheme(theme.id, theme.themeUrl)"
-        >
-          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
-            {{ theme.displayName }}
-          </span>
-        </span>
-      </div>
-    </div>
-
-    <p class="subtitle">ICONS</p>
-    <div class="themes">
-    </div>
-
-
   </div>
 </template>
 
 <script lang="ts" setup>
-const runtimeConfig = useRuntimeConfig()
-const defaultThemes = runtimeConfig.public.defaultThemes
-const baseURL = runtimeConfig.app.baseURL;
-let themeLinkElement: HTMLLinkElement | null = null;
-
-const themes: Array<Theme> = []
-
-interface Theme {
-  id: string
-  displayName: string
-  previewGradient: string
-  complementaryColor: string
-  themeUrl: string
-}
-
-function changeTheme(id: string, url: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
-    return;
-  }
-
-  localStorage.setItem("selectedTheme", id);
-
-  // if the theme didn't originally load for some reason, create it
-  if (!themeLinkElement) {
-    themeLinkElement = document.createElement('link');
-    themeLinkElement.rel = 'stylesheet';
-    document.head.appendChild(themeLinkElement);
-  }
-
-  themeLinkElement.href = `${baseURL}themes/${url}`;
-}
-
-async function fetchThemes() {
-  for (const theme of defaultThemes) {
-    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
-    themeConfig.id = theme
-
-    themes.push(themeConfig)
-  }
-}
-
-await fetchThemes()
 </script>
 
 <style scoped>
-.themes {
-  display: flex;
-}
 
-.theme-preview-container {
-  margin: .5em;
-  width: 5em;
-  height: 5em;
-}
-
-.theme-preview {
-  width: 5em;
-  height: 5em;
-  border-radius: 100%;
-  border: .1em solid var(--primary-color);
-
-  display: inline-block;
-  text-align: center;
-  align-content: center;
-  cursor: pointer;
-}
-
-.theme-title {
-  font-size: .8em;
-  line-height: 5em; /* same height as the parent to centre it vertically */
-}
 </style>

components/Settings/UserSettings/Account.vue

@@ -43,14 +43,6 @@ async function changeEmail() {
       body: formData
     })
 
-	const apiBase = useCookie("api_base").value;
-
-	if (apiBase) {
-		const stats = await useApi().fetchInstanceStats(apiBase);
-		if (stats.email_verification_required) {
-			return window.location.reload();
-		}
-	}
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
@@ -78,6 +70,13 @@ async function deleteAccount() {
 </script>
 
 <style scoped>
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
+}
+
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
@@ -94,4 +93,8 @@ async function deleteAccount() {
   color: var(--text-color);
   background-color: var(--accent-color);
 }
+
+.profile-popup {
+  margin-left: 2dvw;
+}
 </style>

components/Settings/UserSettings/Profile.vue

@@ -20,25 +20,15 @@
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
-
     </div>
   </div>
-  <CropPopup
-    v-if="isCropPopupVisible"
-    :imageSrc="cropImageSrc"
-    :onCrop="handleCrop"
-    :onClose="closeCropPopup"
-  />
 </template>
 
 <script lang="ts" setup>
+import Button from '~/components/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
-let newPfpFile: File;
-const isCropPopupVisible = ref(false);
-const cropImageSrc = ref("")
-;
 const { fetchUser } = useAuth();
 
 const user: UserResponse | undefined = await fetchUser()
@@ -46,6 +36,8 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
+let newPfpFile: File;
+
 async function saveChanges() {
   if (!user) return;
   
@@ -72,7 +64,7 @@ async function saveChanges() {
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
-      alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
+      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
     }
   }
 };
@@ -95,11 +87,12 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
+      newPfpFile = file
+      
       const reader = new FileReader();
-      reader.addEventListener("load", () => {
+      reader.addEventListener("onload", () => {
         if (reader.result && typeof reader.result === 'string') {
-          cropImageSrc.value = reader.result;
+          user.avatar = reader.result;
-          isCropPopupVisible.value = true;
         }
       });
       reader.readAsDataURL(file);
@@ -108,19 +101,6 @@ async function changeAvatar() {
 
   input.click()
 }
-
-
-function handleCrop(blob: Blob, url: string) {
-  if (!user) return;
-
-  user.avatar = url;
-  newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
-  closeCropPopup()
-}
-
-function closeCropPopup() {
-  isCropPopupVisible.value = false
-}
 </script>
 
 <style scoped>
@@ -128,6 +108,13 @@ function closeCropPopup() {
   display: flex;
 }
 
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+}
+
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
@@ -145,7 +132,7 @@ function closeCropPopup() {
   background-color: var(--accent-color);
 }
 
-#profile-popup {
+.profile-popup {
   margin-left: 2dvw;
 }
 </style>

components/UserPopup.vue

@@ -59,14 +59,12 @@ const props = defineProps<{
   width: 96px;
   height: 96px;
   border: 5px solid #4b3018;
-  background-color: var(--secondary-color);
   border-radius: 100%;
   position: absolute;
   left: 16px;
   top: 16px;
 }
 
-
 #display-name {
   margin-top: 60px;
   margin-bottom: 0;

composables/api.ts

@@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
 
 export const useApi = () => {
 	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
@@ -41,15 +41,6 @@ export const useApi = () => {
 		return await fetchWithApi(`/channels/${channelId}/messages/${messageId}`);
 	}
 
-	async function fetchInstanceStats(apiBase: string): Promise<StatsResponse> {
-		return await $fetch(`${apiBase}/stats`, { method: "GET" });
-	}
-
-	async function sendVerificationEmail(): Promise<void> {
-		const email = useAuth().user.value?.email;
-		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
-	}
-
 	return {
 		fetchGuilds,
 		fetchGuild,
@@ -60,8 +51,6 @@ export const useApi = () => {
 		fetchUsers,
 		fetchUser,
 		fetchMessages,
-		fetchMessage,
+		fetchMessage
-		fetchInstanceStats,
-		sendVerificationEmail
 	}
 }

composables/auth.ts

@@ -7,7 +7,6 @@ export const useAuth = () => {
   async function clearAuth() {
     accessToken.value = null;
     user.value = null;
-	await navigateTo("/login");
   }
 
   async function register(username: string, email: string, password: string) {

layouts/auth.vue

@@ -20,7 +20,30 @@
 				<slot />
 			</div>
 			<div v-if="instanceUrl">
-				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
+				Instance URL is set to {{ instanceUrl }}
+			</div>
+			<div v-if="auth.accessToken.value">
+				You're logged in!
+				<form @submit="logout">
+					<div>
+						<label for="logout-password">Password</label>
+						<br>
+						<input type="password" name="logout-password" id="logout-password" v-model="form.password"
+							required>
+					</div>
+					<div>
+						<button type="submit">Log out</button>
+					</div>
+				</form>
+				<div>
+					<button @click="refresh">Refresh</button>
+				</div>
+				<div>
+					<button @click="showUser">Show user</button>
+				</div>
+				<div>
+					<button @click="getUser">Get me</button>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -28,6 +51,7 @@
 
 <script lang="ts" setup>
 import { FetchError } from 'ofetch';
+import type { StatsResponse } from '~/types/interfaces';
 
 const instanceUrl = ref<string | null | undefined>(null);
 const instanceUrlInput = ref<string>();
@@ -39,7 +63,9 @@ const registrationEnabled = useState("registrationEnabled", () => true);
 const auth = useAuth();
 
 onMounted(async () => {
-	instanceUrl.value = useCookie("instance_url").value;
+	const cookie = useCookie("instance_url").value;
+	instanceUrl.value = cookie;
+	console.log(cookie);
 	console.log("set instance url to:", instanceUrl.value);
 });
 
@@ -47,8 +73,8 @@ async function selectInstance(e: Event) {
 	e.preventDefault();
 	console.log("trying input instance");
 	if (instanceUrlInput.value) {
-		const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value);
 		console.log("input has value");
+		const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value);
 		try {
 			console.log("trying to get gorb.txt:", gorbTxtUrl);
 			const res = await $fetch.raw(gorbTxtUrl.href, { responseType: "text" });
@@ -61,10 +87,10 @@ async function selectInstance(e: Event) {
 				instanceUrl.value = origin;
 				useCookie("instance_url").value = origin;
 				console.log("set instance url to:", origin);
-				const stats = await useApi().fetchInstanceStats(apiBase.value);
+				const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
-				if (stats) {
+				if (status.value == "success" && data.value) {
-					registrationEnabled.value = stats.registration_enabled;
+					registrationEnabled.value = data.value.registration_enabled;
-					console.log("set registration enabled value to:", stats.registration_enabled);
+					console.log("set registration enabled value to:", data.value.registration_enabled);
 				}
 				return;
 			}
@@ -122,22 +148,18 @@ async function showUser(e: Event) {
 	align-items: center;
 }
 
-#auth-form-container {
+#auth-form-container,
+#auth-form-container form {
 	display: flex;
-	width: 20dvw;
+	width: 50dvw;
 	flex-direction: column;
 	align-items: center;
-	text-align: center;
 	gap: 1em;
-	margin-bottom: 2dvh;
 }
 
 #auth-form-container form {
-	display: flex;
-	flex-direction: column;
 	text-align: left;
 	margin-top: 10dvh;
-	gap: 1em;
 }
 
 #instance-error-container {

layouts/client.vue

@@ -3,28 +3,24 @@
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div id="homebar">
 			<div class="homebar-item">
-				<marquee>
+				main bar
-					gorb!!!!!
-				</marquee>
 			</div>
 		</div>
-		<div id = "page-content">
+		<div id="left-column">
-			<div id="left-column">
+			<NuxtLink id="home-button" href="/">
-				<NuxtLink id="home-button" href="/">
+				<img class="sidebar-icon" src="/public/icon.svg"/>
-					<img class="sidebar-icon" src="/public/icon.svg"/>
+			</NuxtLink>
-				</NuxtLink>
+			<div id="servers-list">
-				<div id="servers-list">
+				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+					<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :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" />
-						<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>
-			<slot />
+			<NuxtLink id="settings-menu" href="/settings">
+				<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
+			</NuxtLink>
 		</div>
+		<slot />
 	</div>
 </template>
 
@@ -38,11 +34,13 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 <style>
 #client-root {
+	/* border: 1px solid white; */
 	height: 100dvh;
-	width: 100dvw;
+	display: grid;
-	display: flex;
+	grid-template-columns: 1fr 4fr 18fr 4fr;
-	flex-direction: column;
+	grid-template-rows: 4dvh auto;
 	text-align: center;
+	
 }
 
 .hidden {
@@ -51,77 +49,79 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 .visible {
 	opacity: 100%;
-	transition: opacity 500ms;
+	transition-duration: 500ms;
 }
 
 #homebar {
-	min-height: 4dvh;
+	grid-row: 1;
+	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;
 }
 
-.homebar-item {
+#client-root>div:nth-child(-n+4) {
-	width: 100dvw;
+	border-bottom: 1px solid var(--padding-color);
 }
 
-#page-content {
+#__nuxt {
 	display: flex;
-	flex-direction: row;
+	flex-flow: column;
-	flex-grow: 1;
-    overflow: auto;
 }
 
-#left-column {
+.grid-column {
-	display: flex;
+	padding-top: 1dvh;
-	flex-direction: column;
-	gap: .75em;
-	padding-left: .25em;
-	padding-right: .25em;
-	padding-top: .5em;
-	border-right: 1px solid var(--padding-color);
-	background: var(--optional-sidebar-background);
-	background-color: var(--sidebar-background-color);
 }
 
-#servers-list {
+#home {
-	display: flex;
+	padding-left: .5dvw;
-	flex-direction: column;
+	padding-right: .5dvw;
-	gap: 1em;
-	width: 3.2rem;	
-	padding-top: .5em;
-}
-
-#middle-left-column {
-	padding-left: .25em;
-	padding-right: .25em;
-	border-right: 1px solid var(--padding-color);
-	min-width: 13em;
-	max-width: 13em;
-	overflow-y: scroll;
-	overflow-x: hidden;
 }
 
 .sidebar-icon {
 	width: 3rem;
 	height: 3rem;
-	overflow-y: scroll;
+}
-	overflow-x: hidden;
+
+#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-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: .375em;
+	padding-bottom: 1dvh;
 }
 
 #settings-menu {
 	position: absolute;
-	bottom: .25em;
+	bottom: .25dvh
+}
+
+#servers-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1dvh;
 }
 
 </style>

middleware/auth.global.ts

@@ -2,21 +2,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 	console.log("to.fullPath:", to.fullPath);
 	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
-	const apiBase = useCookie("api_base").value;
+	if (["/login", "/register"].includes(to.path)) {
-	const { fetchInstanceStats } = useApi();
-	
-	console.log("[AUTH] instance url:", apiBase);
-	if (apiBase && !Object.keys(to.query).includes("special") && to.path != "/verify-email") {
-		const user = await useAuth().getUser();
-		const stats = await fetchInstanceStats(apiBase);
-		console.log("[AUTH] stats:", stats);
-		console.log("[AUTH] email verification check:", user?.email && !user.email_verified && stats.email_verification_required);
-		if (user?.email && !user.email_verified && stats.email_verification_required) {
-			return await navigateTo("/register?special=verify_email");
-		}
-	}
-
-	if (["/login", "/register"].includes(to.path) && !Object.keys(to.query).includes("special")) {
 		console.log("path is login or register");
 		const apiBase = useCookie("api_base");
 		console.log("apiBase gotten:", apiBase.value);
@@ -33,14 +19,6 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 				if (parsed.ApiBaseUrl) {
 					apiBase.value = `${parsed.ApiBaseUrl}/v${apiVersion}`;
 					console.log("set apiBase to:", parsed.ApiBaseUrl);
-					console.log("hHEYOO");
-					const instanceUrl = useCookie("instance_url");
-					console.log("hHEYOO 2");
-					console.log("instance url:", instanceUrl.value);
-					if (!instanceUrl.value) {
-						instanceUrl.value = `${requestUrl.protocol}//${requestUrl.host}`;
-						console.log("set instance url to:", instanceUrl.value);
-					}
 				}
 			}
 		}

nuxt.config.ts

@@ -27,12 +27,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       apiVersion: 1,
-      messageGroupingMaxDifference: 300000,
+      messageGroupingMaxDifference: 300000
-      buildTimeString: new Date().toISOString(),
-      gitHash: process.env.GIT_SHORT_REV || "N/A",
-      defaultThemes: [
-        "light", "ash", "dark", "rainbow-capitalism"
-      ]
     }
   },
   /* nitro: {

package.json

@@ -15,7 +15,6 @@
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
     "@tauri-apps/plugin-http": "~2.5.0",
-    "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
     "nuxt": "^3.17.0",

pages/index.vue

@@ -1,19 +1,6 @@
 <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/login.vue

@@ -44,9 +44,10 @@ const apiBase = useCookie("api_base");
 
 if (apiBase.value) {
 	console.log("apiBase:", apiBase.value);
-	const stats = await useApi().fetchInstanceStats(apiBase.value);
+	const statsUrl = new URL("/stats", apiBase.value).href;
-	if (stats) {
+	const { status, data } = await useFetch<StatsResponse>(statsUrl);
-		registrationEnabled.value = stats.registration_enabled;
+	if (status.value == "success" && data.value) {
+		registrationEnabled.value = data.value.registration_enabled;
 	}
 }
 

pages/register.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLayout>
-    <form v-if="registrationEnabled && !registrationSubmitted && !showEmailVerificationScreen" @submit="register">
+    <form v-if="registrationEnabled" @submit="register">
       <div>
         <!--
         <span class="form-error" v-if="errors.username.length > 0">
@@ -32,87 +32,32 @@
         <button type="submit">Register</button>
       </div>
     </form>
-	<div v-else-if="registrationEnabled && (registrationSubmitted || showEmailVerificationScreen) && !emailSent">
-		<p v-if="emailVerificationRequired">
-			This instance requires email verification to use it.
-			<br><br>
-			<span v-if="registrationSubmitted">
-				Please open the link sent to your email.
-			</span>
-			<span v-else-if="showEmailVerificationScreen">
-				Please click on the link you've already received, or click on the button below to receive a new email.
-			</span>
-		</p>
-		<p v-else>
-			Would you like to verify your email?
-			<!--
-			<br>
-			This is required for resetting your password and making other important changes.
-			-->
-		</p>
-		<Button v-if="(!emailVerificationRequired || showEmailVerificationScreen) && !emailSent" text="Send email" variant="neutral" :callback="sendEmail"></Button>
-	</div>
-	<div v-else-if="emailSent">
-		<p>
-			An email has been sent and should arrive soon.
-			<br>
-			If you don't see it in your inbox, try checking the spam folder.
-		</p>
-	</div>
     <div v-else>
       <h3>This instance has disabled registration.</h3>
     </div>
-    <div v-if="loggedIn">
+    <div>
-	  <Button text="Log out" variant="scary" :callback="() => {}"></Button>
+      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
-	</div>
-    <div v-else>
-	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
     </div>
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
+import type { StatsResponse } from '~/types/interfaces';
 definePageMeta({
   layout: "auth"
-});
+})
 
 const registrationEnabled = useState("registrationEnabled", () => true);
-const emailVerificationRequired = useState("emailVerificationRequired", () => false);
-const registrationSubmitted = ref(false);
-const emailSent = ref(false);
-
-const auth = useAuth();
-
-const loggedIn = ref(await auth.getUser());
-
-const query = new URLSearchParams(useRoute().query as Record<string, string>);
-
-const user = await useAuth().getUser();
-
-if (user?.email_verified) {
-	if (query.get("redirect_to")) {
-		await navigateTo(query.get("redirect_to"));
-	} else {
-		await navigateTo("/");
-	}
-}
-
-const showEmailVerificationScreen = query.get("special") == "verify_email";
-console.log("show email verification screen?", showEmailVerificationScreen);
-
-const { fetchInstanceStats, sendVerificationEmail } = useApi();
 
 console.log("wah");
 console.log("weoooo")
 const apiBase = useCookie("api_base");
 console.log("apiBase:", apiBase.value);
 if (apiBase.value) {
-	const stats = await fetchInstanceStats(apiBase.value);
+	const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
-	if (stats) {
+	if (status.value == "success" && data.value) {
-		registrationEnabled.value = stats.registration_enabled;
+		registrationEnabled.value = data.value.registration_enabled;
-		console.log("set registration enabled value to:", stats.registration_enabled);
+		console.log("set registration enabled value to:", data.value.registration_enabled);
-		emailVerificationRequired.value = stats.email_verification_required;
-		console.log("set email verification required value to:", stats.email_verification_required);
 	}
 }
 
@@ -145,6 +90,8 @@ const errorMessages = reactive({
 */
 
 //const authStore = useAuthStore();
+const auth = useAuth();
+const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
 const loginUrl = `/login?${searchParams}`
 
@@ -186,22 +133,13 @@ async function register(e: Event) {
   console.log("Sending registration data");
   try {
     await auth.register(form.username, form.email, form.password);
-	if (!emailVerificationRequired.value) {
+    return await navigateTo(query.redirect_to);
-		return await navigateTo(query.get("redirect_to"));
-	}
-	await sendVerificationEmail();
-	registrationSubmitted.value = true;
   } catch (error) {
     console.error("Error registering:", error);
   }
   //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
 }
 
-async function sendEmail() {
-	await sendVerificationEmail();
-	emailSent.value = true;
-}
-
 </script>
 
 <style></style>

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

@@ -83,36 +83,34 @@ function handleMemberClick(member: GuildMemberResponse) {
 <style>
 
 #middle-left-column {
-	padding-left: .5em;
+	padding-left: 1dvw;
-	padding-right: .5em;
+	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
-	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
 
 #members-container {
-	width: 15rem;
+	padding-top: 1dvh;
+	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;
-	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: flex;
+	display: grid;
+	grid-template-columns: 2dvw 1fr;
 	margin-top: .5em;
 	margin-bottom: .5em;
-	gap: .5em;
+	gap: 1em;
 	align-items: center;
 	text-align: left;
 	cursor: pointer;
@@ -121,7 +119,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 #channels-list {
 	display: flex;
 	flex-direction: column;
-	gap: .5em;
+	gap: 1dvh;
 }
 
 .member-avatar {

pages/settings.vue

@@ -3,13 +3,6 @@
     <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>
@@ -31,10 +24,11 @@
           </p>
           
           <p style="font-size: .8em; color: var(--secondary-text-color)">
-            Version Hash: {{ appConfig.public.gitHash }}
+            Version Hash: {{ appConfig.gitHash }}
             <br>
-            Build Time: {{ appConfig.public.buildTimeString }}
+            Build Time: {{ appConfig.buildTimeString }}
           </p>
+
         </ul>
       </div>
       <div id="sub-page">
@@ -46,8 +40,11 @@
 
 
 <script lang="ts" setup>
+import Button from '~/components/Button.vue';
+
 const { logout } = useAuth()
-const appConfig = useRuntimeConfig()
+
+const appConfig = useAppConfig()
 
 interface Page {
   displayName: string;
@@ -102,16 +99,6 @@ function selectCategory(page: Page) {
   selectedPage.value = page.displayName;
 };
 
-// redirects to you privacy if you go to settings#privacy
-onMounted(() => {
-  const hash = window.location.hash.substring(1).toLowerCase();
-  const foundPage = categories.flatMap(category => category.pages).find(page => page.displayName.toLowerCase() === hash);
-
-  if (foundPage) {
-    currentPage.value = foundPage;
-    selectedPage.value = foundPage.displayName;
-  }
-});
 </script>
 
 <style scoped>
@@ -130,7 +117,6 @@ onMounted(() => {
 #sidebar {
   min-width: 25dvw;
   max-width: 25dvw;
-  background: var(--optional-channel-list-background);
   background-color: var(--sidebar-background-color);
   color: var(--text-color);
   padding: 1dvh 1dvw;
@@ -182,16 +168,6 @@ 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;
 }
@@ -204,10 +180,7 @@ onMounted(() => {
 }
 
 /* applies to child pages too */
-:deep(.subtitle) {
+:deep(h5) {
-  display: block;
+  color: red;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 4dvh 0 0.5dvh 0.25dvw;
 }
 </style>

pages/verify-email.vue

@@ -15,12 +15,6 @@ const token = useRoute().query.token;
 try {
 	const res = await fetchWithApi("/auth/verify-email", { query: { token } });
 	console.log("hi");
-	const query = useRoute().query;
-	if (query.redirect_to) {
-		await navigateTo(`/?redirect_to=${query.redirect_to}`);
-	} else {
-		await navigateTo("/");
-	}
 } catch (error) {
 	console.error("Error verifying email:", error);
 	errorMessage.value = error;

pnpm-lock.yaml

@@ -23,9 +23,6 @@ importers:
       '@tauri-apps/plugin-http':
         specifier: ~2.5.0
         version: 2.5.0
-      cropperjs:
-        specifier: ^2.0.0
-        version: 2.0.0
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
@@ -214,39 +211,6 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
-  '@cropper/element-canvas@2.0.0':
-    resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
-
-  '@cropper/element-crosshair@2.0.0':
-    resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
-
-  '@cropper/element-grid@2.0.0':
-    resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
-
-  '@cropper/element-handle@2.0.0':
-    resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
-
-  '@cropper/element-image@2.0.0':
-    resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
-
-  '@cropper/element-selection@2.0.0':
-    resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
-
-  '@cropper/element-shade@2.0.0':
-    resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
-
-  '@cropper/element-viewer@2.0.0':
-    resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
-
-  '@cropper/element@2.0.0':
-    resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
-
-  '@cropper/elements@2.0.0':
-    resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
-
-  '@cropper/utils@2.0.0':
-    resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
-
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
@@ -2033,9 +1997,6 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cropperjs@2.0.0:
-    resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -5122,72 +5083,6 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
-  '@cropper/element-canvas@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-crosshair@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-grid@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-handle@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-image@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-selection@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-shade@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element-viewer@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/utils': 2.0.0
-
-  '@cropper/element@2.0.0':
-    dependencies:
-      '@cropper/utils': 2.0.0
-
-  '@cropper/elements@2.0.0':
-    dependencies:
-      '@cropper/element': 2.0.0
-      '@cropper/element-canvas': 2.0.0
-      '@cropper/element-crosshair': 2.0.0
-      '@cropper/element-grid': 2.0.0
-      '@cropper/element-handle': 2.0.0
-      '@cropper/element-image': 2.0.0
-      '@cropper/element-selection': 2.0.0
-      '@cropper/element-shade': 2.0.0
-      '@cropper/element-viewer': 2.0.0
-
-  '@cropper/utils@2.0.0': {}
-
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -7184,11 +7079,6 @@ snapshots:
 
   croner@9.0.0: {}
 
-  cropperjs@2.0.0:
-    dependencies:
-      '@cropper/elements': 2.0.0
-      '@cropper/utils': 2.0.0
-
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1

public/themes/ash.css

@@ -1,20 +0,0 @@
-:root {
-	--text-color: #f0e5e0;
-	--secondary-text-color: #e8e0db;
-
-	--chat-background-color: #2f2e2d;
-    --chat-highlighted-background-color: #3f3b38;
-	--sidebar-background-color: #3e3a37;
-	--sidebar-highlighted-background-color: #46423b;
-	--topbar-background-color: #3a3733;
-	--chatbox-background-color: #3a3733;
-
-    --padding-color: #e0e0e0;
-    
-	--primary-color: #f07028;
-	--primary-highlighted-color: #f28f4b;
-	--secondary-color: #683820;
-	--secondary-highlighted-color: #885830;
-	--accent-color: #a04b24;
-	--accent-highlighted-color: #b86038;
-}

public/themes/ash.json

@@ -1,6 +0,0 @@
-{
-	"displayName": "Ash",
-	"previewGradient": "45deg, #2f2e2d, #46423b",
-	"complementaryColor": "white",
-	"themeUrl": "ash.css"
-}

public/themes/dark.css

@@ -7,7 +7,6 @@
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
-	--chatbox-background-color: #1a1713;
 
     --padding-color: #484848;
     

public/themes/dark.json

@@ -1,6 +0,0 @@
-{
-	"displayName": "Dark",
-	"previewGradient": "45deg, #1f1e1d, #36322b",
-	"complementaryColor": "white",
-	"themeUrl": "dark.css"
-}

public/themes/default-themes.json

@@ -0,0 +1,4 @@
+[
+	"dark.css",
+	"light.css"
+]

public/themes/description.css

@@ -1,29 +0,0 @@
-/* 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,7 +7,6 @@
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
-	--chatbox-background-color: #dfdbd6;
 
     --padding-color: #484848;
     

public/themes/light.json

@@ -1,6 +0,0 @@
-{
-	"displayName": "Light",
-	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
-	"complementaryColor": "black",
-	"themeUrl": "light.css"
-}

public/themes/rainbow-capitalism.css

@@ -1,28 +0,0 @@
-: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: #80808040;
-
-    --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 */
-    --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);
-}

public/themes/rainbow-capitalism.json

@@ -1,6 +0,0 @@
-{
-	"displayName": "Woke",
-	"previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e",
-	"complementaryColor": "white",
-	"themeUrl": "rainbow-capitalism.css"
-}