From 556068063548e1be8c2be067bbdca8b4ac9c8061 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 11 Jun 2025 17:42:35 +0200
Subject: [PATCH] feat: use dynamic units, minor refactoring

---
 components/{buttons => Buttons}/Button.vue    |  0
 .../{buttons => Buttons}/ButtonScary.vue      |  0
 .../AppSettings}/Appearance.vue               |  0
 .../AppSettings}/Keybinds.vue                 |  0
 .../AppSettings}/Language.vue                 |  0
 .../AppSettings}/Notifications.vue            |  0
 .../UserSettings}/Account.vue                 | 81 +++++++++----------
 .../UserSettings}/Connections.vue             |  0
 .../UserSettings}/Devices.vue                 |  0
 .../UserSettings}/Privacy.vue                 |  2 +-
 components/{Userpopup.vue => UserPopup.vue}   |  9 ++-
 pages/settings.vue                            | 50 +++++-------
 12 files changed, 66 insertions(+), 76 deletions(-)
 rename components/{buttons => Buttons}/Button.vue (100%)
 rename components/{buttons => Buttons}/ButtonScary.vue (100%)
 rename components/{settings/app_settings => Settings/AppSettings}/Appearance.vue (100%)
 rename components/{settings/app_settings => Settings/AppSettings}/Keybinds.vue (100%)
 rename components/{settings/app_settings => Settings/AppSettings}/Language.vue (100%)
 rename components/{settings/app_settings => Settings/AppSettings}/Notifications.vue (100%)
 rename components/{settings/user_settings => Settings/UserSettings}/Account.vue (71%)
 rename components/{settings/user_settings => Settings/UserSettings}/Connections.vue (100%)
 rename components/{settings/user_settings => Settings/UserSettings}/Devices.vue (100%)
 rename components/{settings/user_settings => Settings/UserSettings}/Privacy.vue (70%)
 rename components/{Userpopup.vue => UserPopup.vue} (81%)

diff --git a/components/buttons/Button.vue b/components/Buttons/Button.vue
similarity index 100%
rename from components/buttons/Button.vue
rename to components/Buttons/Button.vue
diff --git a/components/buttons/ButtonScary.vue b/components/Buttons/ButtonScary.vue
similarity index 100%
rename from components/buttons/ButtonScary.vue
rename to components/Buttons/ButtonScary.vue
diff --git a/components/settings/app_settings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
similarity index 100%
rename from components/settings/app_settings/Appearance.vue
rename to components/Settings/AppSettings/Appearance.vue
diff --git a/components/settings/app_settings/Keybinds.vue b/components/Settings/AppSettings/Keybinds.vue
similarity index 100%
rename from components/settings/app_settings/Keybinds.vue
rename to components/Settings/AppSettings/Keybinds.vue
diff --git a/components/settings/app_settings/Language.vue b/components/Settings/AppSettings/Language.vue
similarity index 100%
rename from components/settings/app_settings/Language.vue
rename to components/Settings/AppSettings/Language.vue
diff --git a/components/settings/app_settings/Notifications.vue b/components/Settings/AppSettings/Notifications.vue
similarity index 100%
rename from components/settings/app_settings/Notifications.vue
rename to components/Settings/AppSettings/Notifications.vue
diff --git a/components/settings/user_settings/Account.vue b/components/Settings/UserSettings/Account.vue
similarity index 71%
rename from components/settings/user_settings/Account.vue
rename to components/Settings/UserSettings/Account.vue
index 28f6a25..120ceb3 100644
--- a/components/settings/user_settings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -1,14 +1,13 @@
 <template>
   <div>
-    <input id="hidden-pfp-uploader" type="file" accept="image/*" style="display: none;">
     <h1>My Account</h1>
 
     <div class="profile-and-user-data-fields">
       <div class="user-data-fields">
         <p class="subtitle">AVATAR</p>
-        <Button text="Change Avatar" :callback="changeAvatar"></Button>
-        <Button text="Remove Avatar" :callback="removeAvatar"
-          style="margin-left: 10px; background-color: grey;"></Button>
+        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
+        <Button text="Remove Avatar" :callback="removeAvatar" style="background-color: grey;"></Button>
+        
         <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
         <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
         <label for="profile-username-input" class="subtitle">USERNAME</label>
@@ -19,19 +18,13 @@
         <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
 
         <br>
-        <br>
-        <Button text="Save Changes" :callback="saveChanges"></Button>
+        <Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
       </div>
-      <Userpopup :user=user_me class="profile"></Userpopup>
+
+      <UserPopup :user=user class="profile-popup"></UserPopup>
     </div>
 
-    <!-- i love html -->
-    <br>
-    <br>
-    <br>
-    <br>
-
-    <h2>Password (and eventually authenticator)</h2>
+    <h2 style="margin-top: 8dvh">Password (and eventually authenticator)</h2>
     <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
 
     <h2>Account Deletion</h2>
@@ -41,22 +34,27 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/buttons/Button.vue';
-import ButtonScary from '~/components/buttons/ButtonScary.vue';
+import Button from '~/components/Buttons/Button.vue';
+import ButtonScary from '~/components/Buttons/ButtonScary.vue';
+import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();
 
 const user_me = await fetchUser()
-let user_reference = Object.assign({}, user_me)
-const user = user_me!
+if (user_me === undefined) {
+  alert("could not fetch user info, aborting :(")
+}
 
-let new_pfp_file: any = null
+let userReference = Object.assign({}, user_me)
+const user: UserResponse = user_me!
+
+let newPfpFile: any = null
 
 const saveChanges = async () => {
   const formData = new FormData()
   
-  if (new_pfp_file !== null) {
-    formData.append("avatar", new_pfp_file)
+  if (newPfpFile !== null) {
+    formData.append("avatar", newPfpFile)
   }
   
   const bytes = new TextEncoder().encode(JSON.stringify({
@@ -73,7 +71,7 @@ const saveChanges = async () => {
       body: formData
     })
 
-    user_reference = Object.assign({}, await fetchUser())
+    userReference = Object.assign({}, await fetchUser())
     alert('success!!')
   } catch (error: any) {
     if (error?.response?.status !== 200) {
@@ -93,12 +91,12 @@ const changeAvatar = async () => {
   input.type = 'file';
   input.accept = 'image/*';
 
-  input.onchange = async (e) => {
+  input.addEventListener("change", (e: Event) => {
     if (input.files?.length && input.files.length > 0) {
       const file = input.files[0];
       if (!file) return;
 
-      new_pfp_file = file
+      newPfpFile = file
       
       const reader = new FileReader();
       reader.onload = (e) => {
@@ -108,7 +106,7 @@ const changeAvatar = async () => {
       };
       reader.readAsDataURL(file);
     }
-  }
+  })
 
   input.click()
 }
@@ -124,38 +122,35 @@ const deleteAccount = async () => {
 </script>
 
 <style scoped>
-.profile-container {
-  min-width: 250px;
-  min-height: 200px;
-  padding: 8px;
-  border-radius: 8px;
-}
-
 .profile-and-user-data-fields {
   display: flex;
 }
 
-.profile-container,
-.user-data-fields {
-  min-width: 350px;
-}
-
 .subtitle {
   display: block;
-  font-size: 14px;
+  font-size: 0.8em;
   font-weight: 800;
-  margin: 12px 0;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+}
+
+.user-data-fields {
+  min-width: 35dvw;
+  max-width: 35dvw;
 }
 
 .profile-data-input {
-  min-width: 300px;
+  min-width: 30dvw;
   margin: 2px;
-  padding: 2px 10px;
-  height: 40px;
-  font-size: 16px;
+  padding: 0.1dvh 0.7dvw;
+  height: 2.5em;
+  font-size: 1em;
   border-radius: 8px;
   border: none;
   color: white;
   background-color: #54361b;
 }
+
+.profile-popup {
+  margin-left: 2dvw;
+}
 </style>
\ No newline at end of file
diff --git a/components/settings/user_settings/Connections.vue b/components/Settings/UserSettings/Connections.vue
similarity index 100%
rename from components/settings/user_settings/Connections.vue
rename to components/Settings/UserSettings/Connections.vue
diff --git a/components/settings/user_settings/Devices.vue b/components/Settings/UserSettings/Devices.vue
similarity index 100%
rename from components/settings/user_settings/Devices.vue
rename to components/Settings/UserSettings/Devices.vue
diff --git a/components/settings/user_settings/Privacy.vue b/components/Settings/UserSettings/Privacy.vue
similarity index 70%
rename from components/settings/user_settings/Privacy.vue
rename to components/Settings/UserSettings/Privacy.vue
index b805a7c..1e1c2a1 100644
--- a/components/settings/user_settings/Privacy.vue
+++ b/components/Settings/UserSettings/Privacy.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/buttons/Button.vue';
+import Button from '~/components/Buttons/Button.vue';
 </script>
 
 <style scoped>
diff --git a/components/Userpopup.vue b/components/UserPopup.vue
similarity index 81%
rename from components/Userpopup.vue
rename to components/UserPopup.vue
index eaf7626..95f8816 100644
--- a/components/Userpopup.vue
+++ b/components/UserPopup.vue
@@ -4,13 +4,14 @@
     <div id="cover-colour"></div>
     <div id="main-body">
       <p id="display-name">
-        <strong>{{ props.user.display_name || "display_name" }}</strong>
+        <strong>{{ props.user.display_name }}</strong>
       </p>
       <p id="username-and-pronouns">
-        {{ props.user.username || "username" }} - {{ props.user.pronouns || "un/defined" }} 
+        {{ props.user.username }}
+        <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
       </p>
       <div id="about-me">
-        {{ props.user.about || "about me" }}
+        {{ props.user.about }}
       </div>
     </div>
   </div>
@@ -22,7 +23,7 @@ import type { UserResponse } from '~/types/interfaces';
 const { fetchMembers } = useApi();
 
 const props = defineProps<{
-	user: UserResponse | any, // actually UserResponse | null but TS is yelling at me again
+	user: UserResponse
 }>();
 
 </script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 0c2fefe..5890feb 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import ButtonScary from '~/components/buttons/ButtonScary.vue';
+import ButtonScary from '~/components/Buttons/ButtonScary.vue';
 
 const { logout } = useAuth()
 
@@ -40,15 +40,15 @@ interface Category {
   pages: Page[];
 }
 
-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 Account from '~/components/Settings/UserSettings/Account.vue';
+import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
+import Devices from '~/components/Settings/UserSettings/Devices.vue';
+import Connections from '~/components/Settings/UserSettings/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';
+import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
+import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
+import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
+import Language from '~/components/Settings/AppSettings/Language.vue';
 
 const settingsCategories = {
   user_settings: {
@@ -97,11 +97,11 @@ const selectCategory = (_category: Category, page: Page) => {
 }
 
 #sidebar {
-  min-width: 250px;
-  max-width: 250px;
+  min-width: 25dvw;
+  max-width: 25dvw;
   background-color: #2f3136;
   color: white;
-  padding: 10px;
+  padding: 1dvh 1dvw;
   margin-left: auto;
 
   overflow-y: auto;
@@ -109,8 +109,8 @@ const selectCategory = (_category: Category, page: Page) => {
 }
 
 #sidebar h2 {
-  font-size: 2em;
-  padding: 0 8px;
+  font-size: 0.8rem;
+  padding: 0 0.8dvw;
 }
 
 #sidebar ul {
@@ -121,9 +121,8 @@ const selectCategory = (_category: Category, page: Page) => {
 
 #sidebar li {
   border-radius: 8px;
-  padding: 8px;
-  font-size: 1.3em;
-  margin: 2px 0;
+  padding: 0.8dvh 0.8dvw;
+  font-size: 1.1em;
   cursor: pointer;
   transition: background-color 0.3s;
 }
@@ -138,8 +137,9 @@ const selectCategory = (_category: Category, page: Page) => {
 
 #sub_page {
   flex-grow: 1;
-  max-width: 800px;
-  margin-left: 1.5rem;
+  min-width: 70dvw;
+  max-width: 70dvw;
+  padding-left: 1.5rem;
   margin-right: auto;
 
   overflow-y: auto;
@@ -149,18 +149,12 @@ const selectCategory = (_category: Category, page: Page) => {
 .spacer {
   height: 2px;
   display: block;
-  margin: 8px 10px;
+  margin: 0.8dvh 1dvw;
   background-color: #2c2e32;
 }
 
-.setting-item {
-  margin-bottom: 15px;
-}
-</style>
-
-<!-- not scoped, these are used by children] -->
-<style>
-h5 {
+/* applies to child pages too */
+:deep(h5) {
   color: red;
 }
 </style>
\ No newline at end of file