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 01/13] 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 02/13] 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 03/13] 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 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 04/13] 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 @@
- +
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 06/13] 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 07/13] 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 08/13] 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 09/13] 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 10/13] 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 12/13] 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 a1cd9c482cf841333fafa10b02c09a94f6c3f2cd Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Thu, 10 Jul 2025 11:46:25 +0200 Subject: [PATCH 13/13] feat: increase width of channels and members lists --- layouts/client.vue | 2 +- pages/servers/[serverId]/channels/[channelId].vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/client.vue b/layouts/client.vue index 469800d..e2c4c5b 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -94,7 +94,7 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); padding-left: .25em; padding-right: .25em; border-right: 1px solid var(--padding-color); - min-width: 10em; + min-width: 13em; overflow-y: scroll; overflow-x: hidden; } diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue index d0c702d..cef6ba2 100644 --- a/pages/servers/[serverId]/channels/[channelId].vue +++ b/pages/servers/[serverId]/channels/[channelId].vue @@ -91,7 +91,7 @@ function handleMemberClick(member: GuildMemberResponse) { } #members-container { - width: 12rem; + width: 15rem; border-left: 1px solid var(--padding-color); }