From 64c6276153e8d361ed4d89a7ebe2b9ed2650b0d0 Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Sat, 7 Jun 2025 06:25:51 +0200 Subject: [PATCH 001/224] feat: add dropdown for guild settings and invite --- components/GuildOptionsMenu.vue | 58 +++++++++++++++++++ .../[serverId]/channels/[channelId].vue | 48 ++++++++++----- 2 files changed, 90 insertions(+), 16 deletions(-) create mode 100644 components/GuildOptionsMenu.vue diff --git a/components/GuildOptionsMenu.vue b/components/GuildOptionsMenu.vue new file mode 100644 index 0000000..d024ec8 --- /dev/null +++ b/components/GuildOptionsMenu.vue @@ -0,0 +1,58 @@ + + + + + \ No newline at end of file diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue index c9aa8d2..b3d492a 100644 --- a/pages/servers/[serverId]/channels/[channelId].vue +++ b/pages/servers/[serverId]/channels/[channelId].vue @@ -1,21 +1,13 @@ \ No newline at end of file From 8f06f25efebd40e155c432cfcff5c9d5c1d4770b Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Mon, 7 Jul 2025 20:40:49 +0200 Subject: [PATCH 008/224] feat: start adding back button for settings --- pages/settings.vue | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/pages/settings.vue b/pages/settings.vue index 1380283..4c36914 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -3,6 +3,13 @@
From d0fe0db3745fb447a0426993bcf1edbb2c22e303 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Mon, 7 Jul 2025 21:00:42 +0200 Subject: [PATCH 009/224] feat: more theme styling options, and description.css --- app.vue | 2 +- components/MessageArea.vue | 3 +- .../[serverId]/channels/[channelId].vue | 1 + public/themes/ash.css | 1 + public/themes/dark.css | 1 + public/themes/description.css | 28 +++++++++++++++++++ public/themes/light.css | 1 + public/themes/rainbow-capitalism.css | 6 +++- 8 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 public/themes/description.css diff --git a/app.vue b/app.vue index 7af306b..cb5ec34 100644 --- a/app.vue +++ b/app.vue @@ -33,7 +33,7 @@ body { font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; color: var(--text-color); - background: var(--optional-chat-background); + background: var(--optional-body-background); background-color: var(--chat-background-color); margin: 0; } diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 18b9ac5..81221f0 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -259,6 +259,7 @@ router.beforeEach((to, from, next) => { margin-bottom: 1dvh; margin-left: 1dvw; margin-right: 1dvw; + background: var(--optional-message-box-background); } #message-form { @@ -268,11 +269,11 @@ router.beforeEach((to, from, next) => { #message-box-input { width: 80%; - background-color: var(--sidebar-background-color); border: none; color: inherit; padding-left: 1dvw; padding-right: 1dvw; + background-color: var(--chatbox-background-color); } #messages { diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue index 6bdcc7c..32b8104 100644 --- a/pages/servers/[serverId]/channels/[channelId].vue +++ b/pages/servers/[serverId]/channels/[channelId].vue @@ -95,6 +95,7 @@ function handleMemberClick(member: GuildMemberResponse) { padding-left: 1dvw; padding-right: 1dvw; border-left: 1px solid var(--padding-color); + background: var(--optional-member-list-background); } #members-list { diff --git a/public/themes/ash.css b/public/themes/ash.css index b685551..75e0745 100644 --- a/public/themes/ash.css +++ b/public/themes/ash.css @@ -7,6 +7,7 @@ --sidebar-background-color: #3e3a37; --sidebar-highlighted-background-color: #46423b; --topbar-background-color: #3a3733; + --chatbox-background-color: #3a3733 --padding-color: #e0e0e0; diff --git a/public/themes/dark.css b/public/themes/dark.css index 8245724..6bf7966 100644 --- a/public/themes/dark.css +++ b/public/themes/dark.css @@ -7,6 +7,7 @@ --sidebar-background-color: #2e2a27; --sidebar-highlighted-background-color: #36322b; --topbar-background-color: #2a2723; + --chatbox-background-color: #2a2723 --padding-color: #484848; diff --git a/public/themes/description.css b/public/themes/description.css new file mode 100644 index 0000000..1e7db0d --- /dev/null +++ b/public/themes/description.css @@ -0,0 +1,28 @@ +/* this is not a real theme, but rather a template for themes */ +:root { + --text-color: #161518; + --secondary-text-color: #2b2930; + + --chat-background-color: #80808000; + --chat-highlighted-background-color: #ffffff20; + --sidebar-background-color: #80808000; + --sidebar-highlighted-background-color: #ffffff20; + --topbar-background-color: #80808000; + + --padding-color: #80808000; + + --primary-color: #21b1ff80; + --primary-highlighted-color: #18a0df80; + --secondary-color: #ffd80080; + --secondary-highlighted-color: #dfb80080; + --accent-color: #ff218c80; + --accent-highlighted-color: #df1b6f80; + + --optional-body-background: ; /* background element for the body */ + --optional-chat-background: ; /* background element for the chat box */ + --optional-topbar-background: ; /* background element for the topbar */ + --optional-sidebar-background: ; /* background element for left server sidebar */ + --optional-channel-list-background: ; /* background element for channel list and settings list */ + --optional-member-list-background: ; /* background element for member list */ + --optional-message-box-background: ; /* background element for message box */ +} \ No newline at end of file diff --git a/public/themes/light.css b/public/themes/light.css index cb51d8c..04c2db6 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -7,6 +7,7 @@ --sidebar-background-color: #dbd8d4; --sidebar-highlighted-background-color: #d4d0ca; --topbar-background-color: #dfdbd6; + --chatbox-background-color: #dfdbd6 --padding-color: #484848; diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css index 8aeffc8..32f7449 100644 --- a/public/themes/rainbow-capitalism.css +++ b/public/themes/rainbow-capitalism.css @@ -7,6 +7,7 @@ --sidebar-background-color: #80808000; --sidebar-highlighted-background-color: #ffffff20; --topbar-background-color: #80808000; + --chatbox-background-color: #80808040; --padding-color: #80808000; @@ -17,8 +18,11 @@ --accent-color: #ff218c80; --accent-highlighted-color: #df1b6f80; - --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); + /* --optional-body-background: background */ + --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); --optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan); --optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0); --optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0); + --optional-member-list-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0); + --optional-message-box-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0); } \ No newline at end of file From f91c29957534dfaceceac7d7b5233ebdf6213e8a Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Mon, 7 Jul 2025 21:04:41 +0200 Subject: [PATCH 010/224] fix: add missing commas from themes --- public/themes/ash.css | 2 +- public/themes/dark.css | 2 +- public/themes/description.css | 1 + public/themes/light.css | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/public/themes/ash.css b/public/themes/ash.css index 75e0745..66923af 100644 --- a/public/themes/ash.css +++ b/public/themes/ash.css @@ -7,7 +7,7 @@ --sidebar-background-color: #3e3a37; --sidebar-highlighted-background-color: #46423b; --topbar-background-color: #3a3733; - --chatbox-background-color: #3a3733 + --chatbox-background-color: #3a3733; --padding-color: #e0e0e0; diff --git a/public/themes/dark.css b/public/themes/dark.css index 6bf7966..b999e93 100644 --- a/public/themes/dark.css +++ b/public/themes/dark.css @@ -7,7 +7,7 @@ --sidebar-background-color: #2e2a27; --sidebar-highlighted-background-color: #36322b; --topbar-background-color: #2a2723; - --chatbox-background-color: #2a2723 + --chatbox-background-color: #2a2723; --padding-color: #484848; diff --git a/public/themes/description.css b/public/themes/description.css index 1e7db0d..4b07f11 100644 --- a/public/themes/description.css +++ b/public/themes/description.css @@ -8,6 +8,7 @@ --sidebar-background-color: #80808000; --sidebar-highlighted-background-color: #ffffff20; --topbar-background-color: #80808000; + --chatbox-background-color: #80808000; --padding-color: #80808000; diff --git a/public/themes/light.css b/public/themes/light.css index 04c2db6..b9b7b86 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -7,7 +7,7 @@ --sidebar-background-color: #dbd8d4; --sidebar-highlighted-background-color: #d4d0ca; --topbar-background-color: #dfdbd6; - --chatbox-background-color: #dfdbd6 + --chatbox-background-color: #dfdbd6; --padding-color: #484848; From 1e0b8e2ba18c680ee626ba274de3df97b076f797 Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Mon, 7 Jul 2025 21:07:33 +0200 Subject: [PATCH 011/224] feat: add Dropdown component --- components/Dropdown.vue | 46 +++++++++++++++++++++++++++++++++++++++++ types/interfaces.ts | 6 ++++++ 2 files changed, 52 insertions(+) create mode 100644 components/Dropdown.vue diff --git a/components/Dropdown.vue b/components/Dropdown.vue new file mode 100644 index 0000000..ff03799 --- /dev/null +++ b/components/Dropdown.vue @@ -0,0 +1,46 @@ + + + + + \ No newline at end of file diff --git a/types/interfaces.ts b/types/interfaces.ts index 1aba1bc..fe58dd2 100644 --- a/types/interfaces.ts +++ b/types/interfaces.ts @@ -81,3 +81,9 @@ export interface ScrollPosition { offsetTop: number, offsetLeft: number } + +export interface DropdownOption { + name: string, + value: string | number, + callback: () => void +} From c0ad1a7c0d22771390b074497681dbfe06a89cb0 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Mon, 7 Jul 2025 21:27:45 +0200 Subject: [PATCH 012/224] feat: pretty button :3 --- pages/settings.vue | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/pages/settings.vue b/pages/settings.vue index 4c36914..3aac506 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -4,9 +4,9 @@
+
+ + + +
+ - + +
+ + + + +
@@ -249,33 +261,51 @@ router.beforeEach((to, from, next) => { } #message-box { - display: flex; - flex-direction: column; - justify-content: center; - align-content: center; - border: 1px solid var(--padding-color); - padding-bottom: 1dvh; - padding-top: 1dvh; - margin-bottom: 1dvh; + /* flex-direction: column; */ + /* justify-content: center; */ + /* align-content: center; */ + /* padding-bottom: 1dvh; */ + /* padding-top: 1dvh; */ + margin-bottom: 2dvh; margin-left: 1dvw; margin-right: 1dvw; - background: var(--optional-message-box-background); + /* background: var(--optional-message-box-background); */ } #message-form { display: flex; + flex-direction: row; + + border: 1px solid var(--padding-color); + height: 100%; + padding-left: 2%; + padding-right: 2%; + + min-height: 100%; justify-content: center; + background-color: var(--chatbox-background-color); } #message-box-input { - width: 80%; + height: 100%; + width: 100%; + margin-left: 1.5%; + margin-right: 1.5%; + + box-sizing: border-box; + display: inline-block; + vertical-align: top; + border: none; color: inherit; - padding-left: 1dvw; - padding-right: 1dvw; background-color: var(--chatbox-background-color); } +#message-box-left-elements, #message-box-right-elements { + display: flex; + align-items: center; +} + #messages { overflow-y: scroll; display: flex; @@ -284,7 +314,7 @@ router.beforeEach((to, from, next) => { padding-right: 1dvw; } -#submit-button { +.message-box-button { background-color: inherit; border: none; color: var(--primary-color); @@ -292,7 +322,7 @@ router.beforeEach((to, from, next) => { font-size: 1.5em; } -#submit-button:hover { +.message-box-button:hover { color: var(--primary-highlighted-color); cursor: pointer; } diff --git a/public/themes/dark.css b/public/themes/dark.css index b999e93..af94112 100644 --- a/public/themes/dark.css +++ b/public/themes/dark.css @@ -7,7 +7,7 @@ --sidebar-background-color: #2e2a27; --sidebar-highlighted-background-color: #36322b; --topbar-background-color: #2a2723; - --chatbox-background-color: #2a2723; + --chatbox-background-color: #1a1713; --padding-color: #484848; From 51c2578e60573b986526d7d1af36cd237f86b603 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Tue, 8 Jul 2025 15:45:18 +0200 Subject: [PATCH 014/224] fix: remove unused code, set chatbox input to a transparent colour --- components/MessageArea.vue | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 1247f31..9bf6df8 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -261,15 +261,9 @@ router.beforeEach((to, from, next) => { } #message-box { - /* flex-direction: column; */ - /* justify-content: center; */ - /* align-content: center; */ - /* padding-bottom: 1dvh; */ - /* padding-top: 1dvh; */ margin-bottom: 2dvh; margin-left: 1dvw; margin-right: 1dvw; - /* background: var(--optional-message-box-background); */ } #message-form { @@ -298,7 +292,7 @@ router.beforeEach((to, from, next) => { border: none; color: inherit; - background-color: var(--chatbox-background-color); + background-color: #00000000; /* completely transparent colour */ } #message-box-left-elements, #message-box-right-elements { From 19113f13034e9c079908024ccb130519b79821c8 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Tue, 8 Jul 2025 20:57:40 +0200 Subject: [PATCH 015/224] feat: implement basic home page --- layouts/client.vue | 2 +- pages/home.vue | 30 ++++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 pages/home.vue diff --git a/layouts/client.vue b/layouts/client.vue index a1ee86d..516658c 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -7,7 +7,7 @@
- +
diff --git a/pages/home.vue b/pages/home.vue new file mode 100644 index 0000000..4182eb3 --- /dev/null +++ b/pages/home.vue @@ -0,0 +1,30 @@ + + + + + \ 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 016/224] 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 @@ - - - - - \ 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 @@ 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 017/224] 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 018/224] 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 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 019/224] 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 @@
- - +
- - +
+ + + +
+ +
+
+
+
+ +
+ + + + +
@@ -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 @@ 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 044/224] 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 045/224] 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 046/224] 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 047/224] 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 048/224] 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 @@ + + \ 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 049/224] 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 050/224] 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 051/224] 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 @@ + + + + + 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 052/224] 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 @@ - - - - - \ 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 053/224] 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 054/224] 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 @@ + + + + + \ 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 075/224] 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 076/224] 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 @@ + + \ 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 092/224] 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 101/224] 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 102/224] 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 @@