Merge branch 'main' into email-verification

app.vue

@@ -33,6 +33,7 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
+	background: var(--optional-chat-background);
   background-color: var(--chat-background-color);
   margin: 0;
 }

components/CropPopup.vue

@@ -0,0 +1,93 @@
+<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

@@ -3,7 +3,7 @@
         <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>
-        <UserPopup v-if="isPopupVisible" :user="props.member.user" class="profile-popup" />
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
 
@@ -32,9 +32,4 @@ 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,7 +60,16 @@ const sanitized = ref<string>();
 
 onMounted(async () => {
 	const parsed = await parse(props.text, { gfm: true });
-	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
+	sanitized.value = DOMPurify.sanitize(parsed, {
+		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) => {
@@ -99,6 +108,7 @@ function getDayDifference(date1: Date, date2: Date) {
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
+	overflow-wrap: anywhere;
 }
 
 .message:hover {

components/MessageArea.vue

@@ -158,10 +158,12 @@ if (accessToken && apiBase) {
 
 function sendMessage(e: Event) {
 	e.preventDefault();
-	const text = messageInput.value;
-	console.log("text:", text);
-	if (text) {
-		ws.send(text);
+	const message = {
+		message: messageInput.value
+	}
+	console.log("message:", message);
+	if (message.message) {
+		ws.send(JSON.stringify(message));
 		messageInput.value = "";
 		console.log("MESSAGE SENT!!!");
 	}

components/Settings/AppSettings/Appearance.vue

@@ -1,14 +1,100 @@
 <template>
   <div>
-    <h1>hi</h1>
-    <h5>TEST</h5>
-    <h5>TEST</h5>
+    <h1>Appearance</h1>
+    
+    <p class="subtitle">THEMES</p>
+    <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;
+}
 
-</style>
+.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

@@ -78,13 +78,6 @@ 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;
@@ -101,8 +94,4 @@ async function deleteAccount() {
   color: var(--text-color);
   background-color: var(--accent-color);
 }
-
-.profile-popup {
-  margin-left: 2dvw;
-}
 </style>

components/Settings/UserSettings/Profile.vue

@@ -20,15 +20,25 @@
         <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
 
-      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+      <UserPopup v-if="user" :user="user" id="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()
@@ -36,8 +46,6 @@ if (!user) {
   alert("could not fetch user info, aborting :(")
 }
 
-let newPfpFile: File;
-
 async function saveChanges() {
   if (!user) return;
   
@@ -64,7 +72,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`)
+      alert(`error ${error?.response?.status} met whilst trying to update profile info\n"${error?.response._data?.message}"`)
     }
   }
 };
@@ -87,12 +95,11 @@ async function changeAvatar() {
       const file = input.files[0];
       if (!file) return;
 
-      newPfpFile = file
-      
       const reader = new FileReader();
-      reader.addEventListener("onload", () => {
+      reader.addEventListener("load", () => {
         if (reader.result && typeof reader.result === 'string') {
-          user.avatar = reader.result;
+          cropImageSrc.value = reader.result;
+          isCropPopupVisible.value = true;
         }
       });
       reader.readAsDataURL(file);
@@ -101,6 +108,19 @@ 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>
@@ -108,13 +128,6 @@ async function changeAvatar() {
   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;
@@ -132,7 +145,7 @@ async function changeAvatar() {
   background-color: var(--accent-color);
 }
 
-.profile-popup {
+#profile-popup {
   margin-left: 2dvw;
 }
 </style>

components/UserPopup.vue

@@ -59,12 +59,14 @@ 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/auth.ts

@@ -38,13 +38,19 @@ export const useAuth = () => {
     //await fetchUser();
   }
 
-  async function logout(password: string) {
-    console.log("password:", password);
+  async function logout() {
     console.log("access:", accessToken.value);
-    const hashedPass = await hashPassword(password);
-    console.log("hashed");
 
-    const res = await fetchWithApi("/auth/revoke", {
+    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    clearAuth();
+
+	return await navigateTo("/login");
+  }
+
+  async function revoke(password: string) {
+    const hashedPass = await hashPassword(password);
+
+    await fetchWithApi("/auth/revoke", {
       method: "POST",
       body:
       {
@@ -55,10 +61,6 @@ export const useAuth = () => {
     clearAuth();
   }
 
-  async function revoke() {
-    clearAuth();
-  }
-
   async function refresh() {
     console.log("refreshing");
     const res = await fetchWithApi("/auth/refresh", {

layouts/client.vue

@@ -40,7 +40,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	grid-template-columns: 1fr 4fr 18fr 4fr;
 	grid-template-rows: 4dvh auto;
 	text-align: center;
-	
 }
 
 .hidden {
@@ -58,6 +57,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	background: var(--optional-topbar-background);
 	background-color: var(--topbar-background-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
@@ -98,6 +98,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 	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;
 }

nuxt.config.ts

@@ -27,7 +27,12 @@ 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

@@ -14,6 +14,7 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
+    "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
     "nuxt": "^3.17.0",

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

@@ -86,6 +86,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-right: 1px solid var(--padding-color);
+	background: var(--optional-channel-list-background);
 	background-color: var(--sidebar-background-color);
 }
 
@@ -100,6 +101,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	display: flex;
 	flex-direction: column;
 	overflow-y: scroll;
+	max-height: 92dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	margin-top: 1dvh;

pages/settings.vue

@@ -2,8 +2,8 @@
   <div id="settings-page-container">
     <div id="settings-page">
       <div id="sidebar">
-        <h4>(Search bar here)</h4>
         <ul>
+          <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
             <h2>{{ category.displayName }}</h2>
             <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
@@ -12,8 +12,23 @@
             </li>
             <span class="spacer"></span>
           </div>
+          
+          <p>
+            <Button text="Log Out" :callback=logout variant="scary"></Button>
+          </p>
+          <span class="spacer"></span>
+
+          <p id="links-and-socials">
+            <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
+            <NuxtLink href="https://docs.gorb.app" title="Backend Documentation"><Icon name="lucide:book-open-text" /></NuxtLink>
+          </p>
+          
+          <p style="font-size: .8em; color: var(--secondary-text-color)">
+            Version Hash: {{ appConfig.public.gitHash }}
+            <br>
+            Build Time: {{ appConfig.public.buildTimeString }}
+          </p>
 
-          <Button text="Log Out" :callback=logout variant="scary"></Button>
         </ul>
       </div>
       <div id="sub-page">
@@ -25,9 +40,8 @@
 
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
-
 const { logout } = useAuth()
+const appConfig = useRuntimeConfig()
 
 interface Page {
   displayName: string;
@@ -82,6 +96,16 @@ 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>
@@ -100,10 +124,11 @@ function selectCategory(page: Page) {
 #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;
-  margin-left: auto;
+  margin-left: 0;
 
   overflow-y: auto;
   height: 100vh;
@@ -128,6 +153,10 @@ function selectCategory(page: Page) {
   transition: background-color 0.3s;
 }
 
+#sidebar p {
+  margin: 2dvh 0.8dvw;
+}
+
 .sidebar-focus {
   background-color: var(--sidebar-highlighted-background-color);
 }
@@ -147,15 +176,22 @@ function selectCategory(page: Page) {
   height: 100vh;
 }
 
+#links-and-socials * {
+  margin-right: 0.2em;
+}
+
 .spacer {
   height: 0.2dvh;
   display: block;
   margin: 0.8dvh 1dvw;
-  background-color: var(--spacing-color);
+  background-color: var(--padding-color);
 }
 
 /* applies to child pages too */
-:deep(h5) {
-  color: red;
+:deep(.subtitle) {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
 }
 </style>

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
+      cropperjs:
+        specifier: ^2.0.0
+        version: 2.0.0
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
@@ -205,6 +208,39 @@ 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==}
 
@@ -1900,6 +1936,9 @@ 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'}
@@ -4965,6 +5004,72 @@ 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
@@ -6895,6 +7000,11 @@ 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

@@ -0,0 +1,19 @@
+: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;
+
+    --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

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

public/themes/dark.json

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

public/themes/default-themes.json

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

public/themes/light.json

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

public/themes/rainbow-capitalism.css

@@ -0,0 +1,24 @@
+: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-chat-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);
+}

public/themes/rainbow-capitalism.json

@@ -0,0 +1,6 @@
+{
+	"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"
+}