Merge branch 'main' into email-verification

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>