feat: start of "My Account" page, need API help

components/settings/app_settings/Appearance.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script lang="ts" setup>
-console.log("Loading appearance.vue...")
 </script>
 
 <style scoped>

components/settings/app_settings/Keybinds.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Keybinds (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/app_settings/Language.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Language (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/app_settings/Notifications.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Notifications (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/user_settings/Account.vue

@@ -1,11 +1,35 @@
 <template>
   <div>
-    <h1>hi!!</h1>
+    <h1>My Account</h1>
+    
+    <div id="profile-container">
+
+    </div>
+
+    <h2>Password (and eventually authenticator)</h2>
+    <Button text="Reset Password" :callback=resetPassword></Button> 
+
+    <h2>Account Deletion</h2>
+    <ButtonScary text="Delete Account" :callback=deleteAccount></ButtonScary> 
+
   </div>
 </template>
 
 <script lang="ts" setup>
-console.log("Loading account.vue...")
+import Button from '~/components/buttons/Button.vue';
+import ButtonScary from '~/components/buttons/ButtonScary.vue';
+
+const { user } = useAuth();
+
+
+const resetPassword = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+const deleteAccount = () => {
+  alert("TBD")
+}
 </script>
 
 <style scoped>

components/settings/user_settings/Connections.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Connections (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/user_settings/Devices.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Devices (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/settings/user_settings/Privacy.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Privacy (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/buttons/Button.vue';
+</script>
+
+<style scoped>
+
+</style>

pages/settings.vue

@@ -2,36 +2,34 @@
   <div id="settings-page-container">
     <div id="settings-page">
       <div id="sidebar">
-        <h4>Search bar here</h4>
+        <h4>(Search bar here)</h4>
         <ul>
           <template v-for="category in categories" :key="category.display_name">
-            <h3>{{ category.display_name }}</h3>
-            <ul>
-              <li 
-                v-for="page in category.pages" 
-                :key="page.display_name" 
-                @click="selectCategory(page)"
-              >
-                {{ page.display_name }}
-              </li>
-            </ul>
+            <h2>{{ category.display_name }}</h2>
+            <li v-for="page in category.pages" :key="page.display_name" @click="selectCategory(page)">
+              {{ page.display_name }}
+            </li>
+            <span class="spacer"></span>
           </template>
+
+          <ButtonScary text="Log Out" :callback=logout></ButtonScary>
         </ul>
       </div>
       <div id="sub_page">
-        <component :is="currentPage.page_data"></component>
+        <component :is="currentPage.page_data" />
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import type { NuxtTemplate } from 'nuxt/schema';
-import { defineComponent, ref } from 'vue';
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import ButtonScary from '~/components/buttons/ButtonScary.vue';
 
 interface Page {
   display_name: string;
-  page_data: any;
+  page_data: any; // is actually Component but TS is yelling at me :(
 }
 
 interface Category {
@@ -40,54 +38,56 @@ interface Category {
 }
 
 import Account from '~/components/settings/user_settings/Account.vue';
+import Privacy from '~/components/settings/user_settings/Privacy.vue';
+import Devices from '~/components/settings/user_settings/Devices.vue';
+import Connections from '~/components/settings/user_settings/Connections.vue';
+
 import Appearance from '~/components/settings/app_settings/Appearance.vue';
+import Notifications from '~/components/settings/app_settings/Notifications.vue';
+import Keybinds from '~/components/settings/app_settings/Keybinds.vue';
+import Language from '~/components/settings/app_settings/Language.vue';
 
 const settingsCategories = {
   user_settings: {
     display_name: "User Settings",
     pages: [
       { display_name: "My Account", page_data: Account },
-      { display_name: "Privacy", page_data: Account },
-      { display_name: "Devices", page_data: Account },
-      { display_name: "Connections", page_data: Account },
+      { display_name: "Privacy", page_data: Privacy },
+      { display_name: "Devices", page_data: Devices },
+      { display_name: "Connections", page_data: Connections },
     ]
   },
   app_settings: {
     display_name: "App Settings",
     pages: [
       { display_name: "Appearance", page_data: Appearance },
-      { display_name: "Notifications", page_data: Appearance },
-      { display_name: "Keybinds", page_data: Appearance },
-      { display_name: "Language", page_data: Appearance },
+      { display_name: "Notifications", page_data: Notifications },
+      { display_name: "Keybinds", page_data: Keybinds },
+      { display_name: "Language", page_data: Language },
     ]
   },
 };
 
-export default defineComponent({
-  setup() {
-    const categories = Object.values(settingsCategories);
+const categories = Object.values(settingsCategories);
 
-    let currentPage = ref(categories[0].pages[0]);
+let currentPage = ref(categories[0].pages[0]);
 
-    const selectCategory = (page: Page) => {
-      currentPage.value = page;
-      console.log(`switching to ${page.display_name}`)
-    };
+const selectCategory = (page: Page) => {
+  currentPage.value = page;
+  console.log(`switching to ${page.display_name}`)
+};
 
-    return {
-      categories,
-      selectCategory,
-      currentPage
-    };
-  }
-});
+function logout() {
+  alert("hi")
+}
 </script>
 
 <style scoped>
 #settings-page-container {
-  height: 100vh;
+  height: 100%;
   align-content: center;
-  border: 2px solid purple;
+  overflow-y: hidden;
+  margin: 0;
 }
 
 #settings-page {
@@ -96,25 +96,30 @@ export default defineComponent({
 }
 
 #sidebar {
-  width: 200px;
+  min-width: 200px;
+  max-width: 200px;
   background-color: #2f3136;
   color: white;
   padding: 10px;
   margin-left: auto;
-  border: 2px solid blue;
+
+  overflow-y: auto;
+  height: 100vh;
 }
 
 #sidebar h2 {
   font-size: 1.5em;
+  padding: 0 8px;
 }
 
 #sidebar ul {
   list-style-type: none;
   padding: 0;
+  margin: 0;
 }
 
 #sidebar li {
-  padding: 10px;
+  padding: 8px;
   cursor: pointer;
   transition: all 0.3s;
 }
@@ -125,11 +130,19 @@ export default defineComponent({
 
 #sub_page {
   flex-grow: 1;
-  margin: 0 1rem;
   max-width: 600px;
+  margin-left: 1.5rem;
   margin-right: auto;
 
-  border: 2px solid red;
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.spacer {
+  height: 2px;
+  display: block;
+  margin: 8px 10px;
+  background-color: #2c2e32;
 }
 
 .setting-item {