@@ -52,21 +53,18 @@ const saveChanges = async () => {
try {
const formData = new FormData()
- if (new_pfp_file) {
- formData.append('avatar', new_pfp_file, new_pfp_file.name)
- new_pfp_file = null
+ const upload_field = document.getElementById("hidden-pfp-uploader")
+ if (upload_field.files?.length && upload_field.files.length > 0) {
+ console.log(upload_field.files[0])
+ formData.append("avatar", upload_field.files[0])
}
- // oh lord praise deep seek v3
- const jsonBlob = new Blob(
- [JSON.stringify({
+ const bytes = new TextEncoder().encode(JSON.stringify({
display_name: user.display_name,
username: user.username,
pronouns: user.pronouns,
- })],
- { type: 'application/json' }
- );
- formData.append('json', jsonBlob, 'data.json');
+ }));
+ formData.append("json", new Blob([bytes], { type: "application/json" }));
await fetchWithApi("/me", {
method: "PATCH",
@@ -91,29 +89,23 @@ const removeAvatar = async () => {
}
const changeAvatar = async () => {
- try {
- let input = document.createElement('input');
- input.type = 'file';
- input.accept = 'image/*';
+ const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader")
+
+ // upload_field.onchange = async(e) => {
+ // console.log(upload_field.files)
+ // if (upload_field.files?.length && upload_field.files.length > 0) {
+ // const file = upload_field.files[0];
+ // if (!file) return;
- input.onchange = async(e) => {
- const file = e.target.files?.[0];
- if (!file) return;
+ // const reader = new FileReader();
+ // reader.onload = (e) => {
+ // user.avatar = e?.target?.result;
+ // };
+ // reader.readAsDataURL(file);
+ // }
+ // }
- new_pfp_file = file;
-
- const reader = new FileReader();
- reader.onload = (e) => {
- user.avatar = e?.target?.result;
- };
- reader.readAsDataURL(file);
- }
-
- input.oncancel = () => alert("cancelled upload!");
- input.click();
- } catch (err) {
- console.error('User canceled or error:', err);
- }
+ upload_field?.click()
}
const resetPassword = async () => {
diff --git a/pages/settings.vue b/pages/settings.vue
index fb66aa2..60c4265 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -4,14 +4,14 @@
@@ -74,8 +74,11 @@ const props = defineProps<{
}
#about-me {
- margin-top: 4px;
- padding: 4px;
+ background-color: #34200f;
+ border-radius: 12px;
+
+ margin-top: 32px;
+ padding: 16px;
font-size: 16px;
}
\ No newline at end of file
diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue
index bb50f07..6438946 100644
--- a/components/settings/user_settings/Account.vue
+++ b/components/settings/user_settings/Account.vue
@@ -2,21 +2,24 @@
My Account
-
+
@@ -29,10 +32,10 @@
Password (and eventually authenticator)
-
+
Account Deletion
-
+
@@ -50,36 +53,33 @@ const user = user_me!
let new_pfp_file: any = null
const saveChanges = async () => {
+ const formData = new FormData()
+
+ if (new_pfp_file !== null) {
+ formData.append("avatar", new_pfp_file)
+ }
+
+ const bytes = new TextEncoder().encode(JSON.stringify({
+ display_name: user.display_name,
+ username: user.username,
+ pronouns: user.pronouns,
+ about: user.about,
+ }));
+ formData.append('json', new Blob([bytes], { type: 'application/json' }));
+
try {
- const formData = new FormData()
-
- const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader")
- if (upload_field.files?.length && upload_field.files.length > 0) {
- console.log(upload_field.files[0])
- formData.append("avatar", upload_field.files[0])
- }
-
- const bytes = new TextEncoder().encode(JSON.stringify({
- display_name: user.display_name,
- username: user.username,
- pronouns: user.pronouns,
- }));
- formData.append("json", new Blob([bytes], { type: "application/json" }));
-
- await fetchWithApi("/me", {
- method: "PATCH",
+ await fetchWithApi('/me', {
+ method: 'PATCH',
body: formData
})
- user_reference = Object.assign({}, user_me)
- alert("success!!")
+ user_reference = Object.assign({}, await fetchUser())
+ alert('success!!')
} catch (error: any) {
if (error?.response?.status !== 200) {
- const errorData = await error?.response?.json()
-
- alert(`error ${error?.response?.status} met whilst trying to update profile info\n${errorData}`)
+ alert(`error ${error?.response?.status} met whilst trying to update profile info`)
}
- }
+ }
};
@@ -89,23 +89,28 @@ const removeAvatar = async () => {
}
const changeAvatar = async () => {
- const upload_field: HTMLInputElement = document.getElementById("hidden-pfp-uploader")
-
- // upload_field.onchange = async(e) => {
- // console.log(upload_field.files)
- // if (upload_field.files?.length && upload_field.files.length > 0) {
- // const file = upload_field.files[0];
- // if (!file) return;
+ let input = document.createElement('input');
+ input.type = 'file';
+ input.accept = 'image/*';
- // const reader = new FileReader();
- // reader.onload = (e) => {
- // user.avatar = e?.target?.result;
- // };
- // reader.readAsDataURL(file);
- // }
- // }
+ input.onchange = async (e) => {
+ if (input.files?.length && input.files.length > 0) {
+ const file = input.files[0];
+ if (!file) return;
- upload_field?.click()
+ new_pfp_file = file
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ if (e.target?.result && typeof e.target.result === 'string') {
+ user.avatar = e.target.result;
+ }
+ };
+ reader.readAsDataURL(file);
+ }
+ }
+
+ input.click()
}
const resetPassword = async () => {
@@ -130,7 +135,8 @@ const deleteAccount = async () => {
display: flex;
}
-.profile-container, .user-data-fields {
+.profile-container,
+.user-data-fields {
min-width: 350px;
}
@@ -139,4 +145,16 @@ const deleteAccount = async () => {
font-weight: 800;
margin: 12px 0;
}
+
+.profile-data-input {
+ min-width: 300px;
+ margin: 2px;
+ padding: 2px 10px;
+ height: 40px;
+ font-size: 16px;
+ border-radius: 8px;
+ border: none;
+ color: white;
+ background-color: #54361b;
+}
\ No newline at end of file
diff --git a/pages/settings.vue b/pages/settings.vue
index 60c4265..0c2fefe 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -69,24 +69,6 @@ const settingsCategories = {
{ display_name: "Language", page_data: Language },
]
},
- app_settings2: {
- display_name: "App Settings",
- pages: [
- { display_name: "Appearance", page_data: Appearance },
- { display_name: "Notifications", page_data: Notifications },
- { display_name: "Keybinds", page_data: Keybinds },
- { display_name: "Language", page_data: Language },
- ]
- },
- app_settings3: {
- display_name: "App Settings",
- pages: [
- { display_name: "Appearance", page_data: Appearance },
- { display_name: "Notifications", page_data: Notifications },
- { display_name: "Keybinds", page_data: Keybinds },
- { display_name: "Language", page_data: Language },
- ]
- },
};
const categories = Object.values(settingsCategories);
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 04da39a..b5b1995 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -59,7 +59,7 @@ export interface UserResponse {
display_name: string | null,
avatar: string | null,
pronouns: string | null,
- about_me: string | null,
+ about: string | null,
email?: string,
email_verified?: boolean
}
From a38589615b7fe13efd36ca302a1410c05bc32718 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Mon, 2 Jun 2025 13:14:08 +0200
Subject: [PATCH 013/170] chore: finnish merge
---
components/settings/user_settings/Account.vue | 33 +++++++++----------
1 file changed, 16 insertions(+), 17 deletions(-)
diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue
index f8e15bc..6438946 100644
--- a/components/settings/user_settings/Account.vue
+++ b/components/settings/user_settings/Account.vue
@@ -53,24 +53,23 @@ const user = user_me!
let new_pfp_file: any = null
const saveChanges = async () => {
+ const formData = new FormData()
+
+ if (new_pfp_file !== null) {
+ formData.append("avatar", new_pfp_file)
+ }
+
+ const bytes = new TextEncoder().encode(JSON.stringify({
+ display_name: user.display_name,
+ username: user.username,
+ pronouns: user.pronouns,
+ about: user.about,
+ }));
+ formData.append('json', new Blob([bytes], { type: 'application/json' }));
+
try {
- const formData = new FormData()
-
- const upload_field = document.getElementById("hidden-pfp-uploader")
- if (upload_field.files?.length && upload_field.files.length > 0) {
- console.log(upload_field.files[0])
- formData.append("avatar", upload_field.files[0])
- }
-
- const bytes = new TextEncoder().encode(JSON.stringify({
- display_name: user.display_name,
- username: user.username,
- pronouns: user.pronouns,
- }));
- formData.append("json", new Blob([bytes], { type: "application/json" }));
-
- await fetchWithApi("/me", {
- method: "PATCH",
+ await fetchWithApi('/me', {
+ method: 'PATCH',
body: formData
})
From 22b43cde79d6a7f7d74ffdeedcfffbc118015485 Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Tue, 3 Jun 2025 22:04:05 +0200
Subject: [PATCH 014/170] feat: make profile settings headings into block
labels for accessibility
---
components/settings/user_settings/Account.vue | 19 ++++++++++---------
1 file changed, 10 insertions(+), 9 deletions(-)
diff --git a/components/settings/user_settings/Account.vue b/components/settings/user_settings/Account.vue
index 6438946..28f6a25 100644
--- a/components/settings/user_settings/Account.vue
+++ b/components/settings/user_settings/Account.vue
@@ -5,18 +5,18 @@
-
AVATAR
+
AVATAR
-
DISPLAY NAME
-
-
USERNAME
-
-
PRONOUNS
-
-
ABOUT ME
-
+
DISPLAY NAME
+
+
USERNAME
+
+
PRONOUNS
+
+
ABOUT ME
+
@@ -141,6 +141,7 @@ const deleteAccount = async () => {
}
.subtitle {
+ display: block;
font-size: 14px;
font-weight: 800;
margin: 12px 0;
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 015/170] 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 @@
-
My Account
AVATAR
-
-
+
+
+
DISPLAY NAME
USERNAME
@@ -19,19 +18,13 @@
-
-
+
-
+
+
-
-
-
-
-
-
-
Password (and eventually authenticator)
+
Password (and eventually authenticator)
Account Deletion
@@ -41,22 +34,27 @@
\ 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 @@
-
-
-
\ No newline at end of file
From 714f75ce1230e9c49ee16336859c008fef4ed7a1 Mon Sep 17 00:00:00 2001
From: Radical
Date: Mon, 23 Jun 2025 19:59:52 +0200
Subject: [PATCH 016/170] feat: update button component
co-authored-by: JustTemmie
---
components/Button.vue | 44 ++++++++++++++
components/Buttons/Button.vue | 43 --------------
components/Buttons/ButtonScary.vue | 43 --------------
components/Settings/UserSettings/Account.vue | 13 ++---
components/Settings/UserSettings/Privacy.vue | 2 +-
components/UserPopup.vue | 2 +-
pages/settings.vue | 61 ++++++++++----------
7 files changed, 82 insertions(+), 126 deletions(-)
create mode 100644 components/Button.vue
delete mode 100644 components/Buttons/Button.vue
delete mode 100644 components/Buttons/ButtonScary.vue
diff --git a/components/Button.vue b/components/Button.vue
new file mode 100644
index 0000000..1374344
--- /dev/null
+++ b/components/Button.vue
@@ -0,0 +1,44 @@
+
+
+ {{ props.text }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/Buttons/Button.vue b/components/Buttons/Button.vue
deleted file mode 100644
index 2544fbb..0000000
--- a/components/Buttons/Button.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
-
- {{ props.text }}
-
-
-
-
-
-
\ No newline at end of file
diff --git a/components/Buttons/ButtonScary.vue b/components/Buttons/ButtonScary.vue
deleted file mode 100644
index 1fa2c85..0000000
--- a/components/Buttons/ButtonScary.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-
-
-
-
- {{ props.text }}
-
-
-
-
-
-
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 120ceb3..5e883f5 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -6,7 +6,7 @@
AVATAR
-
+
DISPLAY NAME
@@ -34,8 +34,7 @@
\ No newline at end of file
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 5e883f5..0fe5013 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -2,8 +2,8 @@
My Account
-
-
+
+
AVATAR
@@ -21,14 +21,14 @@
-
+
-
Password (and eventually authenticator)
+
Password (and eventually authenticator)
-
+
Account Deletion
-
+
@@ -39,20 +39,19 @@ import type { UserResponse } from '~/types/interfaces';
const { fetchUser } = useAuth();
-const user_me = await fetchUser()
-if (user_me === undefined) {
+const user: UserResponse | undefined = await fetchUser()
+if (!user) {
alert("could not fetch user info, aborting :(")
}
-let userReference = Object.assign({}, user_me)
-const user: UserResponse = user_me!
-
-let newPfpFile: any = null
+let newPfpFile: File;
const saveChanges = async () => {
+ if (!user) return;
+
const formData = new FormData()
- if (newPfpFile !== null) {
+ if (newPfpFile) {
formData.append("avatar", newPfpFile)
}
@@ -70,7 +69,6 @@ const saveChanges = async () => {
body: formData
})
- userReference = Object.assign({}, await fetchUser())
alert('success!!')
} catch (error: any) {
if (error?.response?.status !== 200) {
@@ -86,7 +84,9 @@ const removeAvatar = async () => {
}
const changeAvatar = async () => {
- let input = document.createElement('input');
+ if (!user) return;
+
+ const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
@@ -98,7 +98,7 @@ const changeAvatar = async () => {
newPfpFile = file
const reader = new FileReader();
- reader.addEventListener("onload", (e: Event) => {
+ reader.addEventListener("onload", () => {
if (reader.result && typeof reader.result === 'string') {
user.avatar = reader.result;
}
@@ -121,7 +121,7 @@ const deleteAccount = async () => {
diff --git a/components/Message.vue b/components/Message.vue
index 5cd7773..05392a0 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -81,7 +81,7 @@ onMounted(async () => {
text-align: left;
/* border: 1px solid lightcoral; */
display: grid;
- grid-template-columns: 2dvw 1fr;
+ grid-template-columns: 2rem 1fr;
align-items: center;
column-gap: 1dvw;
width: 100%;
@@ -129,10 +129,11 @@ onMounted(async () => {
}
.left-column {
+ min-width: 2rem;
display: flex;
+ justify-content: center;
text-align: center;
white-space: nowrap;
-
}
.author-username {
diff --git a/components/UserArea.vue b/components/UserArea.vue
new file mode 100644
index 0000000..d922c3f
--- /dev/null
+++ b/components/UserArea.vue
@@ -0,0 +1,20 @@
+
+
+ HELLO!!
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 092e7d5..befe4f5 100644
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@@ -1,6 +1,8 @@
@@ -133,7 +133,7 @@ async function changeAvatar() {
background-color: var(--accent-color);
}
-.profile-popup {
+#profile-popup {
margin-left: 2dvw;
}
\ No newline at end of file
From 3c4965c06f96ee215834dc2ea1fb14f0037d600d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 08:04:50 +0200
Subject: [PATCH 036/170] feat: start implementing image cropping when
uploading pfp
still need to fix the selection to within the canvas boundries, and fix theming
---
components/CropPopup.vue | 61 ++++++++++
components/Settings/UserSettings/Profile.vue | 37 ++++++-
package.json | 1 +
pnpm-lock.yaml | 110 +++++++++++++++++++
4 files changed, 208 insertions(+), 1 deletion(-)
create mode 100644 components/CropPopup.vue
diff --git a/components/CropPopup.vue b/components/CropPopup.vue
new file mode 100644
index 0000000..2e1a6b1
--- /dev/null
+++ b/components/CropPopup.vue
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index f1a550b..1df8c44 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -21,12 +21,23 @@
+
+
+
+
+
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index 1df8c44..e9542c9 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -22,16 +22,15 @@
-
-
-
+
@@ -101,8 +100,6 @@ async function changeAvatar() {
const file = input.files[0];
if (!file) return;
- newPfpFile = file
-
const reader = new FileReader();
reader.addEventListener("load", () => {
if (reader.result && typeof reader.result === 'string') {
@@ -171,4 +168,21 @@ function closeCropPopup() {
#profile-popup {
margin-left: 2dvw;
}
+
+#crop-popup-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ background: rgba(0,0,0,0.5);
+}
+
+#crop-popup-preview {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
\ No newline at end of file
From 181fcd04dbdc1a3bb66557a88c071a908582404b Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:27:51 +0200
Subject: [PATCH 038/170] feat: ensure there's a background colour for the user
popup's avatar
---
components/UserPopup.vue | 2 ++
1 file changed, 2 insertions(+)
diff --git a/components/UserPopup.vue b/components/UserPopup.vue
index 3a65cf0..a3a15cb 100644
--- a/components/UserPopup.vue
+++ b/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;
From d9c6faa6ab4a2aad29189a03e855e0461c9eb969 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 4 Jul 2025 09:43:05 +0200
Subject: [PATCH 039/170] refactor: move stuff from profile to within the crop
popup itself
---
components/CropPopup.vue | 32 ++++++++++++++------
components/Settings/UserSettings/Profile.vue | 31 ++++---------------
2 files changed, 29 insertions(+), 34 deletions(-)
diff --git a/components/CropPopup.vue b/components/CropPopup.vue
index 7671e4d..8321cb1 100644
--- a/components/CropPopup.vue
+++ b/components/CropPopup.vue
@@ -1,8 +1,10 @@
-
-
+
\ No newline at end of file
From 768b011961d52159500be5c7b2f7328d9a2d11ef Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:02:22 +0200
Subject: [PATCH 049/170] feat: add theme previews
---
.../Settings/AppSettings/Appearance.vue | 58 ++++++++++++++++++-
nuxt.config.ts | 3 +
public/themes/ash.css | 19 ++++++
public/themes/ash.json | 6 ++
public/themes/dark.json | 6 ++
public/themes/default-themes.json | 4 --
public/themes/light.json | 6 ++
7 files changed, 96 insertions(+), 6 deletions(-)
create mode 100644 public/themes/ash.css
create mode 100644 public/themes/ash.json
create mode 100644 public/themes/dark.json
delete mode 100644 public/themes/default-themes.json
create mode 100644 public/themes/light.json
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 51b06ee..59e417c 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -1,12 +1,66 @@
-
hi
+
Appearance
+
+
THEMES
+
+
+
+
+ {{ theme.displayName }}
+
+
+
+
+
+
ICONS
+
+
+
+
\ No newline at end of file
+ display: inline-block;
+ text-align: center;
+ align-content: center;
+}
+
+.theme-title {
+ font-size: .8em;
+ line-height: 6em; /* same height as the parent to centre it vertically */
+}
+
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 05a40fa..489e1b8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,6 +30,9 @@ export default defineNuxtConfig({
messageGroupingMaxDifference: 300000,
buildTimeString: new Date().toISOString(),
gitHash: process.env.GIT_SHORT_REV || "N/A",
+ defaultThemes: [
+ "light", "ash", "dark"
+ ]
}
},
/* nitro: {
diff --git a/public/themes/ash.css b/public/themes/ash.css
new file mode 100644
index 0000000..b685551
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/public/themes/ash.json b/public/themes/ash.json
new file mode 100644
index 0000000..fb9cc93
--- /dev/null
+++ b/public/themes/ash.json
@@ -0,0 +1,6 @@
+{
+ "displayName": "Ash",
+ "previewGradient": "45deg, #2f2e2d, #46423b",
+ "complementaryColor": "white",
+ "themeData": "ash.css"
+}
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
new file mode 100644
index 0000000..3cecba6
--- /dev/null
+++ b/public/themes/dark.json
@@ -0,0 +1,6 @@
+{
+ "displayName": "Dark",
+ "previewGradient": "45deg, #1f1e1d, #36322b",
+ "complementaryColor": "white",
+ "themeData": "dark.css"
+}
\ No newline at end of file
diff --git a/public/themes/default-themes.json b/public/themes/default-themes.json
deleted file mode 100644
index fb9478d..0000000
--- a/public/themes/default-themes.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
- "dark.css",
- "light.css"
-]
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
new file mode 100644
index 0000000..fe0b678
--- /dev/null
+++ b/public/themes/light.json
@@ -0,0 +1,6 @@
+{
+ "displayName": "Light",
+ "previewGradient": "45deg, #f0ebe8, #d4d0ca",
+ "complementaryColor": "black",
+ "themeData": "light.css"
+}
\ No newline at end of file
From c03f72ceccf81f7501b4ae71d711959bdf66465d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:05:40 +0200
Subject: [PATCH 050/170] feat: implement "hash navigation" for settings
---
pages/settings.vue | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/pages/settings.vue b/pages/settings.vue
index 0f297e3..01b78d7 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -40,10 +40,10 @@
From 441dc0c15cdb3391db283e89ec678970ca9e6b1c Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:36:08 +0200
Subject: [PATCH 052/170] feat: actually add theme switching :mind_blown:
---
.../Settings/AppSettings/Appearance.vue | 29 ++++++++++++++++++-
public/themes/ash.json | 2 +-
public/themes/dark.json | 2 +-
public/themes/light.json | 2 +-
4 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 68759d9..0f7b504 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -5,7 +5,11 @@
THEMES
-
+
{{ theme.displayName }}
@@ -25,23 +29,45 @@
const runtimeConfig = useRuntimeConfig()
const defaultThemes = runtimeConfig.public.defaultThemes
const baseURL = runtimeConfig.app.baseURL;
+let themeLinkElement: HTMLLinkElement | null = null;
const themes: Array = []
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}`;
+}
const fetchThemes = async () => {
for (const theme of defaultThemes) {
const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
const themeConfigJson = await themeConfig.json() as Theme
+ themeConfigJson.ID = theme
+
themes.push(themeConfigJson)
}
+
+ console.log(themes)
}
await fetchThemes()
@@ -67,6 +93,7 @@ await fetchThemes()
display: inline-block;
text-align: center;
align-content: center;
+ cursor: pointer;
}
.theme-title {
diff --git a/public/themes/ash.json b/public/themes/ash.json
index fb9cc93..1bd7670 100644
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@@ -2,5 +2,5 @@
"displayName": "Ash",
"previewGradient": "45deg, #2f2e2d, #46423b",
"complementaryColor": "white",
- "themeData": "ash.css"
+ "themeURL": "ash.css"
}
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
index 3cecba6..0ff69be 100644
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@@ -2,5 +2,5 @@
"displayName": "Dark",
"previewGradient": "45deg, #1f1e1d, #36322b",
"complementaryColor": "white",
- "themeData": "dark.css"
+ "themeURL": "dark.css"
}
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
index fe0b678..3745abb 100644
--- a/public/themes/light.json
+++ b/public/themes/light.json
@@ -2,5 +2,5 @@
"displayName": "Light",
"previewGradient": "45deg, #f0ebe8, #d4d0ca",
"complementaryColor": "black",
- "themeData": "light.css"
+ "themeURL": "light.css"
}
\ No newline at end of file
From 6abfd8e44bcf8f232e251e64269e7532612ec42f Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:02:57 +0200
Subject: [PATCH 053/170] chore: pascalCase
---
components/Settings/AppSettings/Appearance.vue | 16 ++++++++--------
public/themes/ash.json | 2 +-
public/themes/dark.json | 2 +-
public/themes/light.json | 2 +-
4 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 0f7b504..82e3845 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -8,7 +8,7 @@
{{ theme.displayName }}
@@ -34,19 +34,19 @@ let themeLinkElement: HTMLLinkElement | null = null;
const themes: Array = []
interface Theme {
- ID: string
+ id: string
displayName: string
previewGradient: string
complementaryColor: string
- themeURL: string
+ themeUrl: string
}
-function changeTheme(ID: string, URL: string) {
- if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
+function changeTheme(id: string, url: string) {
+ if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
return;
}
- localStorage.setItem("selectedTheme", ID);
+ localStorage.setItem("selectedTheme", id);
// if the theme didn't originally load for some reason, create it
if (!themeLinkElement) {
@@ -55,14 +55,14 @@ function changeTheme(ID: string, URL: string) {
document.head.appendChild(themeLinkElement);
}
- themeLinkElement.href = `${baseURL}themes/${URL}`;
+ themeLinkElement.href = `${baseURL}themes/${url}`;
}
const fetchThemes = async () => {
for (const theme of defaultThemes) {
const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
const themeConfigJson = await themeConfig.json() as Theme
- themeConfigJson.ID = theme
+ themeConfigJson.id = theme
themes.push(themeConfigJson)
}
diff --git a/public/themes/ash.json b/public/themes/ash.json
index 1bd7670..d5d2a59 100644
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@@ -2,5 +2,5 @@
"displayName": "Ash",
"previewGradient": "45deg, #2f2e2d, #46423b",
"complementaryColor": "white",
- "themeURL": "ash.css"
+ "themeUrl": "ash.css"
}
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
index 0ff69be..4731d43 100644
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@@ -2,5 +2,5 @@
"displayName": "Dark",
"previewGradient": "45deg, #1f1e1d, #36322b",
"complementaryColor": "white",
- "themeURL": "dark.css"
+ "themeUrl": "dark.css"
}
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
index 3745abb..b95c78b 100644
--- a/public/themes/light.json
+++ b/public/themes/light.json
@@ -2,5 +2,5 @@
"displayName": "Light",
"previewGradient": "45deg, #f0ebe8, #d4d0ca",
"complementaryColor": "black",
- "themeURL": "light.css"
+ "themeUrl": "light.css"
}
\ No newline at end of file
From 7098dda6b4f1a6d530978caa8120d2552ac303be Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:03:24 +0200
Subject: [PATCH 054/170] fix: remove un-necessary imports
---
pages/settings.vue | 3 ---
1 file changed, 3 deletions(-)
diff --git a/pages/settings.vue b/pages/settings.vue
index 01b78d7..17558b1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -40,9 +40,6 @@
+
+
\ No newline at end of file
From bb5ff3750967a938ad8daec495c20893d264cbef Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 8 Jul 2025 20:58:40 +0200
Subject: [PATCH 072/170] fix: put the home page into index.vue instead
---
layouts/client.vue | 2 +-
pages/home.vue | 30 ------------------------------
pages/index.vue | 15 ++++++++++++++-
3 files changed, 15 insertions(+), 32 deletions(-)
delete mode 100644 pages/home.vue
diff --git a/layouts/client.vue b/layouts/client.vue
index 516658c..a1ee86d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -7,7 +7,7 @@
-
+
diff --git a/pages/home.vue b/pages/home.vue
deleted file mode 100644
index 4182eb3..0000000
--- a/pages/home.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
-
- Welcome to gorb :3
-
-
- Click on a server to the left to view a guild.
-
- Or click the button in the bottom left to join a guild.
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f970926..4182eb3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,19 @@
-
+
+
+
+
+ Welcome to gorb :3
+
+
+ Click on a server to the left to view a guild.
+
+ Or click the button in the bottom left to join a guild.
+
+
+
+
From bd6307f16e06cc2b53b62ab2017c9cfdf29c7ca8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 8 Jul 2025 21:00:05 +0200
Subject: [PATCH 073/170] fix: rephrase sentace from "server" to "guild"
---
pages/index.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/pages/index.vue b/pages/index.vue
index 4182eb3..41deadf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,7 +7,7 @@
Welcome to gorb :3
- Click on a server to the left to view a guild.
+ Click on a guild to the left to view a guild.
Or click the button in the bottom left to join a guild.
From 8932070fcc64fae57036b9e5fc4d08398e236d68 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 8 Jul 2025 21:11:14 +0200
Subject: [PATCH 074/170] feat: spice up the home bar
---
layouts/client.vue | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/layouts/client.vue b/layouts/client.vue
index a1ee86d..9ce451e 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -3,7 +3,9 @@
- main bar
+
+ gorb!!!!!
+
@@ -61,6 +63,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
background-color: var(--topbar-background-color);
padding-left: 5dvw;
padding-right: 5dvw;
+
+}
+
+.homebar-item {
+ width: 100dvw;
}
#client-root>div:nth-child(-n+4) {
From 730b0cb1dcece7264d81e07902e1576e7d92b1cb Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 00:25:52 +0200
Subject: [PATCH 075/170] refactor: change the client from table to flexbox
this makes the server, channel, and member list a constant size, making the text messages take up the entire remaining width
this also fixes the text wrapping you have already fixed on one of your branches
this change is required if we want to make the member list toggelable, or channel list resizable
---
components/Channel.vue | 2 +-
layouts/client.vue | 89 ++++++++-----------
.../[serverId]/channels/[channelId].vue | 13 ++-
3 files changed, 46 insertions(+), 58 deletions(-)
diff --git a/components/Channel.vue b/components/Channel.vue
index 0f48323..6bdc28b 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -30,7 +30,7 @@ const isCurrentChannel = props.uuid == props.currentUuid;
.channel-list-link-container {
text-align: left;
display: flex;
- height: 4dvh;
+ height: 1.5em;
white-space: nowrap;
align-items: center;
}
diff --git a/layouts/client.vue b/layouts/client.vue
index a1ee86d..b98e304 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -6,21 +6,23 @@
main bar
-
-
-
-
-
@@ -34,11 +36,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 6bdcc7c..b5ee86a 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -91,9 +91,8 @@ function handleMemberClick(member: GuildMemberResponse) {
}
#members-container {
- padding-top: 1dvh;
- padding-left: 1dvw;
- padding-right: 1dvw;
+ min-width: 12rem;
+ padding-top: 1em;
border-left: 1px solid var(--padding-color);
}
@@ -102,14 +101,14 @@ function handleMemberClick(member: GuildMemberResponse) {
flex-direction: column;
overflow-y: scroll;
max-height: 92dvh;
- padding-left: 1dvw;
- padding-right: 1dvw;
+ padding-left: 1.3em;
+ padding-right: 1.3em;
margin-top: 1dvh;
}
.member-item {
display: grid;
- grid-template-columns: 2dvw 1fr;
+ grid-template-columns: 1.5em 1fr;
margin-top: .5em;
margin-bottom: .5em;
gap: 1em;
@@ -121,7 +120,7 @@ function handleMemberClick(member: GuildMemberResponse) {
#channels-list {
display: flex;
flex-direction: column;
- gap: 1dvh;
+ gap: .5em;
}
.member-avatar {
From 9a2fe8fb373c006ac074031057d0fe4e5b90fa62 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 00:43:23 +0200
Subject: [PATCH 076/170] refactor: change a lot of dynamic sizes to em and rem
this makes the client feel a LOT snappier
---
components/Button.vue | 2 +-
components/Channel.vue | 4 ++--
components/MessageArea.vue | 1 +
layouts/client.vue | 20 ++++++++--------
.../[serverId]/channels/[channelId].vue | 23 ++++++++++---------
5 files changed, 26 insertions(+), 24 deletions(-)
diff --git a/components/Button.vue b/components/Button.vue
index fb44cf2..66706de 100644
--- a/components/Button.vue
+++ b/components/Button.vue
@@ -21,7 +21,7 @@ const props = defineProps<{
background-color: var(--primary-color);
color: var(--text-color);
- padding: 0.7dvh 1.2dvw;
+ padding: 0.4em 0.75em;
font-size: 1.1em;
transition: background-color 0.2s;
diff --git a/components/Channel.vue b/components/Channel.vue
index 6bdc28b..98f210e 100644
--- a/components/Channel.vue
+++ b/components/Channel.vue
@@ -23,8 +23,8 @@ const isCurrentChannel = props.uuid == props.currentUuid;
.channel-list-link {
text-decoration: none;
color: inherit;
- padding-left: .5dvw;
- padding-right: .5dvw;
+ padding-left: .25em;
+ padding-right: .25em;
}
.channel-list-link-container {
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 18b9ac5..244b239 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -246,6 +246,7 @@ router.beforeEach((to, from, next) => {
padding-left: 1dvw;
padding-right: 1dvw;
overflow: hidden;
+ flex-grow: 1;
}
#message-box {
diff --git a/layouts/client.vue b/layouts/client.vue
index b98e304..469800d 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -74,27 +74,27 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
#left-column {
display: flex;
flex-direction: column;
- gap: 2dvh;
- padding-left: .5dvw;
- padding-right: .5dvw;
+ gap: .75em;
+ padding-left: .25em;
+ padding-right: .25em;
border-right: 1px solid var(--padding-color);
background: var(--optional-sidebar-background);
background-color: var(--sidebar-background-color);
- padding-top: 1.5dvh;
+ padding-top: .5em;
}
#servers-list {
display: flex;
flex-direction: column;
- gap: 1dvh;
+ gap: 1em;
width: 3.2rem;
}
#middle-left-column {
- padding-left: 1dvw;
- padding-right: 1dvw;
+ padding-left: .25em;
+ padding-right: .25em;
border-right: 1px solid var(--padding-color);
- min-width: 10rem;
+ min-width: 10em;
overflow-y: scroll;
overflow-x: hidden;
}
@@ -106,12 +106,12 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
#home-button {
border-bottom: 1px solid var(--padding-color);
- padding-bottom: 1dvh;
+ padding-bottom: .375em;
}
#settings-menu {
position: absolute;
- bottom: .25dvh
+ bottom: .25em
}
\ No newline at end of file
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index b5ee86a..04d56f9 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -27,6 +27,7 @@
@@ -83,35 +84,35 @@ function handleMemberClick(member: GuildMemberResponse) {
From a6572c20f971c4f0d8e05d99f6fac86f29c59541 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 01:04:37 +0200
Subject: [PATCH 078/170] fix: remove accidental duplication of member list
this was for local testing, forgot to remove it
---
pages/servers/[serverId]/channels/[channelId].vue | 1 -
1 file changed, 1 deletion(-)
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 04d56f9..d0c702d 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -27,7 +27,6 @@
From f1bec945fe0cd7a23eccb9a499a0b11da4de951a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 9 Jul 2025 03:36:30 +0200
Subject: [PATCH 079/170] feat: multiline message box
this implementation SUCKS and i probably have to write an entirely custom solution where every line is a div or something
---
components/MessageArea.vue | 64 +++++++++++++++++++++++---------------
1 file changed, 39 insertions(+), 25 deletions(-)
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 9bf6df8..34a79fa 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -14,9 +14,11 @@
-
-
+
@@ -118,11 +120,19 @@ function pushMessage(message: MessageResponse) {
messages.value.push(message);
}
+function handleMessageKeyDown(event: KeyboardEvent) {
+ if (event.key === "Enter" && event.shiftKey) {
+ event.preventDefault();
+ messageInput.value += "\n"
+ } else if (event.key === "Enter") {
+ //
+ }
+}
+
const messages = ref([]);
-
const messageInput = ref();
-
const messagesElement = ref();
+const messageInputField = ref();
if (messagesRes) messages.value = messagesRes;
@@ -253,8 +263,8 @@ router.beforeEach((to, from, next) => {
\ No newline at end of file
From 84aa1f95fe555a60ff0f23cb8e4e320afaf3e090 Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Wed, 9 Jul 2025 07:30:06 +0200
Subject: [PATCH 091/170] feat: add auto redirection in verify-email page
---
pages/verify-email.vue | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/pages/verify-email.vue b/pages/verify-email.vue
index cae02ea..f160a1d 100644
--- a/pages/verify-email.vue
+++ b/pages/verify-email.vue
@@ -15,6 +15,12 @@ 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;
From 4b6dc03b136e3d19662f1f87eb09753c655d5c27 Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Wed, 9 Jul 2025 07:30:46 +0200
Subject: [PATCH 092/170] feat: refresh page when email is changed and instance
requires verification
---
components/Settings/UserSettings/Account.vue | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 85589e7..a08cffc 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -43,6 +43,14 @@ 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) {
From 7ddc2acb02aaa4c5d4bd4b3bd27903a299208d0c Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Wed, 9 Jul 2025 07:37:05 +0200
Subject: [PATCH 093/170] feat: add message id as data field of Message
component
---
components/Message.vue | 7 ++++---
components/MessageArea.vue | 2 +-
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/components/Message.vue b/components/Message.vue
index 5cd7773..188960a 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,5 @@
-
+
@@ -16,7 +16,7 @@
-
+
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@@ -41,7 +41,8 @@ const props = defineProps<{
format: "12" | "24",
type: "normal" | "grouped",
marginBottom: boolean,
- last: boolean
+ last: boolean,
+ messageId: string
}>();
const messageElement = ref();
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 49577f9..2b3e408 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -5,7 +5,7 @@
:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
format="12" :type="messagesType[message.uuid]"
:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
- :last="i == messages.length - 1" />
+ :last="i == messages.length - 1" :message-id="message.uuid" />
@@ -106,11 +123,38 @@ 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
([]);
-
-const messageInput = ref();
-
+const messageInput = ref("");
const messagesElement = ref();
+const messageTextboxInput = ref();
+const messageTextboxDisplay = ref();
if (messagesRes) messages.value = messagesRes;
@@ -158,14 +202,21 @@ if (accessToken && apiBase) {
function sendMessage(e: Event) {
e.preventDefault();
- const message = {
- message: messageInput.value
- }
- console.log("message:", message);
- if (message.message) {
+ if (messageInput.value && messageInput.value.trim() !== "") {
+ const message = {
+ message: messageInput.value.trim().replace(/\n/g, " ") // trim, and replace \n with
+ }
+
+ console.log("message:", message);
ws.send(JSON.stringify(message));
- messageInput.value = "";
- console.log("MESSAGE SENT!!!");
+
+ // reset input field
+ messageInput.value = ""
+ if (messageTextboxInput.value) {
+ messageTextboxInput.value.innerText = ""
+ }
+
+ adjustTextboxHeight()
}
}
@@ -241,38 +292,63 @@ router.beforeEach((to, from, next) => {
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f970926..41deadf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,19 @@
-
+
+
+
+
+ Welcome to gorb :3
+
+
+ Click on a guild to the left to view a guild.
+
+ Or click the button in the bottom left to join a guild.
+
+
+
+
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 6bdcc7c..5c55655 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -83,36 +83,36 @@ function handleMemberClick(member: GuildMemberResponse) {
\ No newline at end of file
From 2790772cb7c1fd9a73a3f6df766a9e9be7ff0906 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 16:32:41 +0200
Subject: [PATCH 105/170] fix: some of the worst merging i've done in my life
---
layouts/client.vue | 47 +---------------------------------------------
1 file changed, 1 insertion(+), 46 deletions(-)
diff --git a/layouts/client.vue b/layouts/client.vue
index bd3921a..a28d6bc 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -25,23 +25,6 @@
-
@@ -69,11 +52,9 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
.visible {
opacity: 100%;
transition: opacity 500ms;
- transition: opacity 500ms;
}
#homebar {
- min-height: 4dvh;
min-height: 4dvh;
display: flex;
justify-content: space-evenly;
@@ -81,14 +62,8 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
background: var(--optional-topbar-background);
background-color: var(--topbar-background-color);
border-bottom: 1px solid var(--padding-color);
- border-bottom: 1px solid var(--padding-color);
padding-left: 5dvw;
padding-right: 5dvw;
-
-}
-
-.homebar-item {
- width: 100dvw;
}
.homebar-item {
@@ -100,9 +75,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
flex-direction: row;
flex-grow: 1;
overflow: auto;
- flex-direction: row;
- flex-grow: 1;
- overflow: auto;
}
#left-column {
@@ -111,13 +83,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
gap: .75em;
padding-left: .25em;
padding-right: .25em;
- 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);
- padding-top: .5em;
}
#servers-list {
@@ -128,16 +97,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
padding-top: .5em;
}
-#servers-list {
- display: flex;
- flex-direction: column;
- gap: 1em;
- width: 3.2rem;
-}
-
#middle-left-column {
- padding-left: .25em;
- padding-right: .25em;
padding-left: .25em;
padding-right: .25em;
border-right: 1px solid var(--padding-color);
@@ -154,11 +114,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
overflow-x: hidden;
}
-.sidebar-icon {
- width: 3rem;
- height: 3rem;
-}
-
#home-button {
border-bottom: 1px solid var(--padding-color);
padding-bottom: .375em;
From f59162bad596ac953d0eeba91529b3952f4eb2a8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 20:13:25 +0200
Subject: [PATCH 106/170] fix: width of icon and channel lists
---
layouts/client.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/layouts/client.vue b/layouts/client.vue
index a28d6bc..966e60a 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -102,6 +102,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
padding-right: .25em;
border-right: 1px solid var(--padding-color);
min-width: 13em;
+ max-width: 13em;
overflow-y: scroll;
overflow-x: hidden;
}
@@ -109,7 +110,6 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
.sidebar-icon {
width: 3rem;
height: 3rem;
- min-width: 10em;
overflow-y: scroll;
overflow-x: hidden;
}
From 04358e9c917c00b95b7debd51b7f476e2a79472c Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 21:04:27 +0200
Subject: [PATCH 107/170] feat: make settings menu remember your page on reload
---
pages/settings.vue | 1 +
1 file changed, 1 insertion(+)
diff --git a/pages/settings.vue b/pages/settings.vue
index 3aac506..6bf3c9e 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -98,6 +98,7 @@ let currentPage = ref(categories[0].pages[0]);
let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
function selectCategory(page: Page) {
+ window.location.hash = page.displayName.toLowerCase()
currentPage.value = page;
selectedPage.value = page.displayName;
};
From 71242d0543ace0b581e01cf09ab8a44d33b882d3 Mon Sep 17 00:00:00 2001
From: justtemmie
Date: Thu, 10 Jul 2025 19:37:04 +0000
Subject: [PATCH 108/170] revert 04358e9c917c00b95b7debd51b7f476e2a79472c
revert feat: make settings menu remember your page on reload
it breaks the back button, my bad
---
pages/settings.vue | 1 -
1 file changed, 1 deletion(-)
diff --git a/pages/settings.vue b/pages/settings.vue
index 6bf3c9e..3aac506 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -98,7 +98,6 @@ let currentPage = ref(categories[0].pages[0]);
let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
function selectCategory(page: Page) {
- window.location.hash = page.displayName.toLowerCase()
currentPage.value = page;
selectedPage.value = page.displayName;
};
From a90f06218126547a1e3c681515895c8f0efbd3d3 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 21:53:25 +0200
Subject: [PATCH 109/170] refactor: move the homepage to /me from /
---
layouts/client.vue | 2 +-
pages/index.vue | 16 ++--------------
pages/me/index.vue | 30 ++++++++++++++++++++++++++++++
3 files changed, 33 insertions(+), 15 deletions(-)
create mode 100644 pages/me/index.vue
diff --git a/layouts/client.vue b/layouts/client.vue
index 966e60a..de1e029 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -10,7 +10,7 @@
-
+
diff --git a/pages/index.vue b/pages/index.vue
index 41deadf..cb5f57e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,23 +1,11 @@
-
-
-
-
- Welcome to gorb :3
-
-
- Click on a guild to the left to view a guild.
-
- Or click the button in the bottom left to join a guild.
-
-
-
-
+
+
+
\ No newline at end of file
From b1a3ce9b00977c4bf74af610f944c885eb2ef719 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:18:28 +0200
Subject: [PATCH 110/170] feat: update interface to include friends_since
---
types/interfaces.ts | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/types/interfaces.ts b/types/interfaces.ts
index 610d007..7b9a97b 100644
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@@ -61,7 +61,8 @@ export interface UserResponse {
pronouns: string | null,
about: string | null,
email?: string,
- email_verified?: boolean
+ email_verified?: boolean,
+ friends_since: string | null,
}
export interface StatsResponse {
From 8a9ecaa2e2ead30576367a2bd275c70edeb1da19 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:44:18 +0200
Subject: [PATCH 111/170] refactor: move spacer into it's own component
---
components/VerticalSpacer.vue | 21 +++++++++++++++++++++
1 file changed, 21 insertions(+)
create mode 100644 components/VerticalSpacer.vue
diff --git a/components/VerticalSpacer.vue b/components/VerticalSpacer.vue
new file mode 100644
index 0000000..293e9f0
--- /dev/null
+++ b/components/VerticalSpacer.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
From 5dbf21b0abb975d98ae1e825fd6edaf01fab36dc Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:44:46 +0200
Subject: [PATCH 112/170] feat: implement friends list
---
components/DirectMessagesSidebar.vue | 38 ++++++++++++++++++++++++++++
components/UserEntry.vue | 35 +++++++++++++++++++++++++
2 files changed, 73 insertions(+)
create mode 100644 components/DirectMessagesSidebar.vue
create mode 100644 components/UserEntry.vue
diff --git a/components/DirectMessagesSidebar.vue b/components/DirectMessagesSidebar.vue
new file mode 100644
index 0000000..d9f677d
--- /dev/null
+++ b/components/DirectMessagesSidebar.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/UserEntry.vue b/components/UserEntry.vue
new file mode 100644
index 0000000..dcea368
--- /dev/null
+++ b/components/UserEntry.vue
@@ -0,0 +1,35 @@
+
+
+
+
+ {{ props.user.display_name || props.user.username }}
+
+
+
+
+
+
From 15e5a21277f487174f66dcc6113edf2aae2265bd Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:47:52 +0200
Subject: [PATCH 113/170] refactor: try sorting components into sub-folders
---
components/{ => Guild}/Channel.vue | 0
components/{ => Member}/MemberEntry.vue | 0
components/{ => Popups}/CropPopup.vue | 0
components/{ => Popups}/InvitePopup.vue | 0
components/{ => Popups}/Loading.vue | 0
components/{ => User}/UserEntry.vue | 0
components/{ => User}/UserPopup.vue | 0
components/UserArea.vue | 20 -------------------
components/{ => UserInterface}/Button.vue | 0
.../{ => UserInterface}/VerticalSpacer.vue | 0
10 files changed, 20 deletions(-)
rename components/{ => Guild}/Channel.vue (100%)
rename components/{ => Member}/MemberEntry.vue (100%)
rename components/{ => Popups}/CropPopup.vue (100%)
rename components/{ => Popups}/InvitePopup.vue (100%)
rename components/{ => Popups}/Loading.vue (100%)
rename components/{ => User}/UserEntry.vue (100%)
rename components/{ => User}/UserPopup.vue (100%)
delete mode 100644 components/UserArea.vue
rename components/{ => UserInterface}/Button.vue (100%)
rename components/{ => UserInterface}/VerticalSpacer.vue (100%)
diff --git a/components/Channel.vue b/components/Guild/Channel.vue
similarity index 100%
rename from components/Channel.vue
rename to components/Guild/Channel.vue
diff --git a/components/MemberEntry.vue b/components/Member/MemberEntry.vue
similarity index 100%
rename from components/MemberEntry.vue
rename to components/Member/MemberEntry.vue
diff --git a/components/CropPopup.vue b/components/Popups/CropPopup.vue
similarity index 100%
rename from components/CropPopup.vue
rename to components/Popups/CropPopup.vue
diff --git a/components/InvitePopup.vue b/components/Popups/InvitePopup.vue
similarity index 100%
rename from components/InvitePopup.vue
rename to components/Popups/InvitePopup.vue
diff --git a/components/Loading.vue b/components/Popups/Loading.vue
similarity index 100%
rename from components/Loading.vue
rename to components/Popups/Loading.vue
diff --git a/components/UserEntry.vue b/components/User/UserEntry.vue
similarity index 100%
rename from components/UserEntry.vue
rename to components/User/UserEntry.vue
diff --git a/components/UserPopup.vue b/components/User/UserPopup.vue
similarity index 100%
rename from components/UserPopup.vue
rename to components/User/UserPopup.vue
diff --git a/components/UserArea.vue b/components/UserArea.vue
deleted file mode 100644
index d922c3f..0000000
--- a/components/UserArea.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
- HELLO!!
-
-
-
-
-
-
\ No newline at end of file
diff --git a/components/Button.vue b/components/UserInterface/Button.vue
similarity index 100%
rename from components/Button.vue
rename to components/UserInterface/Button.vue
diff --git a/components/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
similarity index 100%
rename from components/VerticalSpacer.vue
rename to components/UserInterface/VerticalSpacer.vue
From 59000709fe5f3ae0c3b7f3254870481094e90da2 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:51:14 +0200
Subject: [PATCH 114/170] feat: update api
---
composables/api.ts | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/composables/api.ts b/composables/api.ts
index d2ca7a0..8a37a8e 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
export const useApi = () => {
async function fetchGuilds(): Promise
{
@@ -24,14 +24,18 @@ export const useApi = () => {
async function fetchMember(guildId: string, memberId: string): Promise {
return await fetchWithApi(`/guilds/${guildId}/members/${memberId}`);
}
-
+
async function fetchUsers() {
return await fetchWithApi(`/users`);
}
-
+
async function fetchUser(userId: string) {
return await fetchWithApi(`/users/${userId}`);
}
+
+ async function fetchFriends(): Promise {
+ return await fetchWithApi('/me/friends')
+ }
async function fetchMessages(channelId: string, options?: { amount?: number, offset?: number }): Promise {
return await fetchWithApi(`/channels/${channelId}/messages`, { query: { amount: options?.amount ?? 100, offset: options?.offset ?? 0 } });
@@ -59,6 +63,7 @@ export const useApi = () => {
fetchMember,
fetchUsers,
fetchUser,
+ fetchFriends,
fetchMessages,
fetchMessage,
fetchInstanceStats,
From 8e69dc805e20e5feab0493b9b9aafac5a23f3c57 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 10 Jul 2025 22:51:56 +0200
Subject: [PATCH 115/170] chore: remove unused popups
---
components/Member/MemberEntry.vue | 1 -
components/Settings/UserSettings/Account.vue | 1 -
components/Settings/UserSettings/Privacy.vue | 1 -
pages/servers/[serverId]/channels/[channelId].vue | 1 -
4 files changed, 4 deletions(-)
diff --git a/components/Member/MemberEntry.vue b/components/Member/MemberEntry.vue
index ed4cd48..1ea4170 100644
--- a/components/Member/MemberEntry.vue
+++ b/components/Member/MemberEntry.vue
@@ -10,7 +10,6 @@
\ No newline at end of file
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index dcea368..b463759 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -24,7 +24,12 @@ const props = defineProps<{
margin-bottom: .5em;
gap: .5em;
- cursor: pointer;
+ text-decoration: none;
+ color: inherit;
+}
+
+.user-item:hover {
+ background-color: #00000020
}
.user-avatar {
diff --git a/components/UserInterface/VerticalSpacer.vue b/components/UserInterface/VerticalSpacer.vue
index 293e9f0..8ac1bd6 100644
--- a/components/UserInterface/VerticalSpacer.vue
+++ b/components/UserInterface/VerticalSpacer.vue
@@ -2,15 +2,6 @@
-
-
\ No newline at end of file
diff --git a/components/DirectMessagesSidebar.vue b/components/Me/DirectMessagesSidebar.vue
similarity index 73%
rename from components/DirectMessagesSidebar.vue
rename to components/Me/DirectMessagesSidebar.vue
index dece975..5a0e99d 100644
--- a/components/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@@ -5,24 +5,24 @@
Direct Messages
+
Friends
+
-
+ :href="`/me/${user.uuid}`"/>
+
+
\ No newline at end of file
diff --git a/composables/api.ts b/composables/api.ts
index 8a37a8e..0cd6db0 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -37,6 +37,14 @@ export const useApi = () => {
return await fetchWithApi('/me/friends')
}
+ async function addFriend(username: string): Promise {
+ await fetchWithApi('/me/friends', { method: "POST", body: { username } });
+ }
+
+ async function removeFriend(userId: string): Promise {
+ await fetchWithApi(`/me/friends/${userId}`, { method: "DELETE" });
+ }
+
async function fetchMessages(channelId: string, options?: { amount?: number, offset?: number }): Promise {
return await fetchWithApi(`/channels/${channelId}/messages`, { query: { amount: options?.amount ?? 100, offset: options?.offset ?? 0 } });
}
@@ -64,6 +72,8 @@ export const useApi = () => {
fetchUsers,
fetchUser,
fetchFriends,
+ addFriend,
+ removeFriend,
fetchMessages,
fetchMessage,
fetchInstanceStats,
diff --git a/pages/me/[userId].vue b/pages/me/[userId].vue
new file mode 100644
index 0000000..d466938
--- /dev/null
+++ b/pages/me/[userId].vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/me/friends.vue b/pages/me/friends.vue
new file mode 100644
index 0000000..b284658
--- /dev/null
+++ b/pages/me/friends.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+ All Friends
+ Online
+ Pending
+ Add Friend
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/me/index.vue b/pages/me/index.vue
index 701481d..b075668 100644
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@@ -5,6 +5,8 @@
\ No newline at end of file
From 2ff892b0da73a9d0e1ad5522e2dece2f74c7a16f Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Fri, 11 Jul 2025 03:31:25 +0200
Subject: [PATCH 136/170] feat: add util to create MessageReply instance
---
utils/replyToMessage.ts | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/utils/replyToMessage.ts b/utils/replyToMessage.ts
index 03253d2..bbb453b 100644
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@@ -1,5 +1,14 @@
+import { render } from "vue";
+import MessageReply from "~/components/MessageReply.vue";
import type { MessageProps } from "~/types/props";
export default (element: HTMLDivElement, props: MessageProps) => {
console.log("element:", element);
+ const messageBox = document.getElementById("message-box") as HTMLDivElement;
+ if (messageBox) {
+ const div = document.createElement("div");
+ const messageReply = h(MessageReply, { author: props.author?.display_name || props.author!.username, text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+ messageBox.prepend(div);
+ render(messageReply, div);
+ }
}
From a8ee8122ee0f7d03a0e3abc65a9595d041684d56 Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Fri, 11 Jul 2025 03:33:24 +0200
Subject: [PATCH 137/170] feat: implement message replies
---
components/Message.vue | 27 ++++++++++++++++++++++++---
components/MessageArea.vue | 29 ++++++++++++++++++++++++++---
2 files changed, 50 insertions(+), 6 deletions(-)
diff --git a/components/Message.vue b/components/Message.vue
index d3d4086..d86f0ad 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -1,5 +1,9 @@
-
+
+
@@ -18,7 +22,9 @@
-
+
{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@@ -44,8 +50,9 @@ const dateHidden = ref(true);
const date = new Date(props.timestamp);
const currentDate: Date = new Date()
-console.log("message:", props.text);
+console.log("[MSG] message to render:", props.message);
console.log("author:", props.author);
+console.log("[MSG] reply message:", props.replyMessage);
const sanitized = ref();
@@ -113,6 +120,11 @@ function getDayDifference(date1: Date, date2: Date) {
overflow-wrap: anywhere;
}
+.message-reply-preview {
+ grid-row: 1;
+ grid-column: 2;
+}
+
.message:hover {
background-color: var(--chat-highlighted-background-color);
}
@@ -142,6 +154,8 @@ function getDayDifference(date1: Date, date2: Date) {
flex-direction: column;
height: fit-content;
width: 100%;
+ grid-row: 2;
+ grid-column: 2;
}
.message-author {
@@ -160,6 +174,8 @@ function getDayDifference(date1: Date, date2: Date) {
justify-content: center;
text-align: center;
white-space: nowrap;
+ grid-row: 2;
+ grid-column: 1;
}
.author-username {
@@ -186,6 +202,11 @@ function getDayDifference(date1: Date, date2: Date) {
width: 20px;
}
*/
+
+.mentioned {
+ background-color: var(--secondary-color);
+}
+
diff --git a/components/MessageReply.vue b/components/MessageReply.vue
index 0e069aa..8ba0902 100644
--- a/components/MessageReply.vue
+++ b/components/MessageReply.vue
@@ -77,10 +77,11 @@ function scrollToReply(e: MouseEvent) {
}
#reply-text {
- color: var(--secondary-text-color);
+ color: rgb(150, 150, 150);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ margin-bottom: 0;
}
From cd1f294600a0ef40d1553066a4e3ce2fea7d7742 Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Fri, 11 Jul 2025 04:12:29 +0200
Subject: [PATCH 142/170] feat: change color of reply background and add
highlight color
---
components/Message.vue | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/components/Message.vue b/components/Message.vue
index c9a8331..929092a 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -204,7 +204,11 @@ function getDayDifference(date1: Date, date2: Date) {
*/
.mentioned {
- background-color: rgba(90, 255, 200, 0.123);
+ background-color: rgba(0, 255, 166, 0.123);
+}
+
+.mentioned:hover {
+ background-color: rgba(90, 255, 200, 0.233);
}
From 5b4c278b837ae58309afbcace5c9c031403da7e6 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Fri, 11 Jul 2025 23:48:03 +0200
Subject: [PATCH 143/170] refactor: load and save settings from a single object
---
app.vue | 18 ++++++----------
.../Settings/AppSettings/Appearance.vue | 4 +++-
utils/settingLoad.ts | 19 +++++++++++++++++
utils/settingSave.ts | 21 +++++++++++++++++++
4 files changed, 49 insertions(+), 13 deletions(-)
create mode 100644 utils/settingLoad.ts
create mode 100644 utils/settingSave.ts
diff --git a/app.vue b/app.vue
index 758cde0..beab80b 100644
--- a/app.vue
+++ b/app.vue
@@ -8,6 +8,7 @@
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 3adfda6..a35e719 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -26,6 +26,8 @@
+
+
\ No newline at end of file
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index a35e719..39e7410 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -17,11 +17,15 @@
-
ICONS
-
+
+
+
TIME FORMAT
+
+
-
-
@@ -70,6 +74,11 @@ async function fetchThemes() {
}
await fetchThemes()
+
+
+async function onTimeFormatClicked(index: number) {
+ console.log(index)
+}
\ No newline at end of file
From 890fbebbe9f3dd91d37ff605b1fc95aeaee1a2cc Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Sat, 12 Jul 2025 18:58:09 +0200
Subject: [PATCH 153/170] feat: use
\ No newline at end of file
From eb4945075646eb595404ad743b6d39be418dc728 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 12 Jul 2025 20:43:25 +0200
Subject: [PATCH 162/170] feat: support 12 and 24 hour formats
---
components/Message.vue | 3 ++-
components/MessageArea.vue | 2 +-
utils/getPreferredTimeFormat.ts | 11 +++++++++++
3 files changed, 14 insertions(+), 2 deletions(-)
create mode 100644 utils/getPreferredTimeFormat.ts
diff --git a/components/Message.vue b/components/Message.vue
index a8329dd..db08258 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -46,7 +46,8 @@
Yesterday at
{{ date.toLocaleDateString(undefined) }},
- {{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
+
+ {{ date.toLocaleTimeString(undefined, { hour12: props.format=="12", timeStyle: "short" }) }}
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index b2338f5..d59b862 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -49,7 +49,7 @@ const me = await fetchWithApi("/me") as UserResponse;
const messageTimestamps = ref
>({});
const messagesType = ref>({});
const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
-const timeFormat = settingLoad("timeFormat") ?? "24"
+const timeFormat = getPreferredTimeFormat()
const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
`${props.channelUrl}/messages`,
diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts
new file mode 100644
index 0000000..4cf03e0
--- /dev/null
+++ b/utils/getPreferredTimeFormat.ts
@@ -0,0 +1,11 @@
+export default (): "12" | "24" => {
+ const format = settingLoad("timeFormat").timeFormat ?? "auto"
+
+ if (format == "12-hour") {
+ return "12"
+ } else if (format == "24-hour") {
+ return "24"
+ }
+
+ return "24"
+}
\ No newline at end of file
From 6221359a156f27e292dee3d1bcd65313d15fa89d Mon Sep 17 00:00:00 2001
From: SauceyRed
Date: Sat, 12 Jul 2025 22:20:28 +0200
Subject: [PATCH 163/170] style(ui): move homebar to app.vue outside to avoid it being rerendered on route change
---
app.vue | 7 +++++++
layouts/client.vue | 7 -------
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/app.vue b/app.vue
index c4fd0dc..850f19a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,12 @@
diff --git a/layouts/client.vue b/layouts/client.vue
index de1e029..bdfe068 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -1,13 +1,6 @@
-
From 195322f3b04711bafe34fcbd1379a76c60e3f735 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 12 Jul 2025 22:39:26 +0200
Subject: [PATCH 164/170] feat: make settings typed and store "12" and "24"
over "12-hour" and "24-hour" internally
---
app.vue | 3 +--
components/Settings/AppSettings/Appearance.vue | 17 ++++++++++++++---
types/settings.ts | 9 +++++++++
utils/getPreferredTimeFormat.ts | 6 +++---
utils/{settingLoad.ts => settingsLoad.ts} | 8 +++++---
5 files changed, 32 insertions(+), 11 deletions(-)
create mode 100644 types/settings.ts
rename utils/{settingLoad.ts => settingsLoad.ts} (66%)
diff --git a/app.vue b/app.vue
index beab80b..686a15e 100644
--- a/app.vue
+++ b/app.vue
@@ -8,7 +8,6 @@
diff --git a/types/settings.ts b/types/settings.ts
new file mode 100644
index 0000000..28e3bfc
--- /dev/null
+++ b/types/settings.ts
@@ -0,0 +1,9 @@
+export interface ClientSettings {
+ selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark"
+ timeFormat?: TimeFormat
+}
+
+export interface TimeFormat {
+ index: number,
+ format: "auto" | "12" | "24"
+}
\ No newline at end of file
diff --git a/utils/getPreferredTimeFormat.ts b/utils/getPreferredTimeFormat.ts
index 4cf03e0..86b9635 100644
--- a/utils/getPreferredTimeFormat.ts
+++ b/utils/getPreferredTimeFormat.ts
@@ -1,9 +1,9 @@
export default (): "12" | "24" => {
- const format = settingLoad("timeFormat").timeFormat ?? "auto"
+ const format = settingsLoad().timeFormat?.format ?? "auto"
- if (format == "12-hour") {
+ if (format == "12") {
return "12"
- } else if (format == "24-hour") {
+ } else if (format == "24") {
return "24"
}
diff --git a/utils/settingLoad.ts b/utils/settingsLoad.ts
similarity index 66%
rename from utils/settingLoad.ts
rename to utils/settingsLoad.ts
index d0f315c..e7fdfaf 100644
--- a/utils/settingLoad.ts
+++ b/utils/settingsLoad.ts
@@ -1,10 +1,12 @@
-export default (key: string): any => {
+import type { ClientSettings } from "~/types/settings"
+
+export default (): ClientSettings => {
let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
if (typeof clientSettingsItem != "string") {
clientSettingsItem = "{}"
}
- let clientSettings: { [key: string]: any } = {}
+ let clientSettings: ClientSettings = {}
try {
clientSettings = JSON.parse(clientSettingsItem)
} catch {
@@ -15,5 +17,5 @@ export default (key: string): any => {
clientSettings = {}
}
- return clientSettings[key]
+ return clientSettings
}
\ No newline at end of file
From 885fc5f9064e960477f1dba12739072c24a79af7 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 12 Jul 2025 22:40:54 +0200
Subject: [PATCH 165/170] fix: PR complaints
---
components/Message.vue | 2 +-
components/UserInterface/RadioButtons.vue | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/components/Message.vue b/components/Message.vue
index db08258..15d656f 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -47,7 +47,7 @@
Yesterday at
{{ date.toLocaleDateString(undefined) }},
- {{ date.toLocaleTimeString(undefined, { hour12: props.format=="12", timeStyle: "short" }) }}
+ {{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
diff --git a/components/UserInterface/RadioButtons.vue b/components/UserInterface/RadioButtons.vue
index a43a80a..c36b5d0 100644
--- a/components/UserInterface/RadioButtons.vue
+++ b/components/UserInterface/RadioButtons.vue
@@ -1,6 +1,6 @@