Skip to content

Commit 39741f3

Browse files
lukepololukepolo
authored
perf: use localstorage for branding so we can load faster (#243)
1 parent 994a3cb commit 39741f3

10 files changed

Lines changed: 256 additions & 59 deletions

File tree

‎assets/css/tailwind.css‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,17 @@
6565
--sidebar-border: 220 13% 91%;
6666

6767
--sidebar-ring: 217.2 91.2% 59.8%;
68+
69+
--topnav-background: 0 0% 98%;
70+
--topnav-foreground: 240 5.3% 26.1%;
71+
--topnav-primary: 240 5.9% 10%;
72+
--topnav-primary-foreground: 0 0% 98%;
73+
--topnav-accent: 142 77% 73%;
74+
--topnav-accent-foreground: 0 0% 98%;
75+
--topnav-border: 220 13% 91%;
76+
--topnav-ring: 217.2 91.2% 59.8%;
6877
}
69-
78+
7079
.dark {
7180
--background: 240 10% 3.9%;
7281
--foreground: 0 0% 98%;
@@ -118,9 +127,18 @@
118127
--sidebar-border: 240 3.7% 15.9%;
119128

120129
--sidebar-ring: 217.2 91.2% 59.8%;
130+
131+
--topnav-background: 240 4% 16%;
132+
--topnav-foreground: 0 0% 98%;
133+
--topnav-primary: 240 6% 10%;
134+
--topnav-primary-foreground: 0 0% 98%;
135+
--topnav-accent: 142 77% 73%;
136+
--topnav-accent-foreground: 0 0% 98%;
137+
--topnav-border: 240 3% 23%;
138+
--topnav-ring: 217.2 91.2% 59.8%;
121139
}
122140
}
123-
141+
124142
@layer base {
125143
* {
126144
@apply border-border;
@@ -163,6 +181,15 @@ div[role="menuitem"] {
163181
--sidebar-accent-foreground: 240 5.9% 10%;
164182
--sidebar-border: 220 13% 91%;
165183
--sidebar-ring: 217.2 91.2% 59.8%;
184+
185+
--topnav-background: 0 0% 98%;
186+
--topnav-foreground: 240 5.3% 26.1%;
187+
--topnav-primary: 240 5.9% 10%;
188+
--topnav-primary-foreground: 0 0% 98%;
189+
--topnav-accent: 142 77% 73%;
190+
--topnav-accent-foreground: 0 0% 98%;
191+
--topnav-border: 220 13% 91%;
192+
--topnav-ring: 217.2 91.2% 59.8%;
166193
}
167194

168195
.dark {
@@ -174,6 +201,15 @@ div[role="menuitem"] {
174201
--sidebar-accent-foreground: 240 4.8% 95.9%;
175202
--sidebar-border: 240 3.7% 15.9%;
176203
--sidebar-ring: 217.2 91.2% 59.8%;
204+
205+
--topnav-background: 240 4% 16%;
206+
--topnav-foreground: 0 0% 98%;
207+
--topnav-primary: 240 6% 10%;
208+
--topnav-primary-foreground: 0 0% 98%;
209+
--topnav-accent: 142 77% 73%;
210+
--topnav-accent-foreground: 0 0% 98%;
211+
--topnav-border: 240 3% 23%;
212+
--topnav-ring: 217.2 91.2% 59.8%;
177213
}
178214
}
179215

‎assets/favicon/192.png‎

5.5 KB
Loading

‎assets/favicon/512.png‎

17.6 KB
Loading

‎assets/favicon/64.png‎

1.35 KB
Loading

‎composables/useBranding.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,15 @@ const lightColorMap: Record<string, string> = {
3434
"public.color_sidebar_primary": "--sidebar-primary",
3535
"public.color_sidebar_primary_foreground": "--sidebar-primary-foreground",
3636
"public.color_sidebar_ring": "--sidebar-ring",
37+
// Top Nav
38+
"public.color_topnav_background": "--topnav-background",
39+
"public.color_topnav_foreground": "--topnav-foreground",
40+
"public.color_topnav_accent": "--topnav-accent",
41+
"public.color_topnav_accent_foreground": "--topnav-accent-foreground",
42+
"public.color_topnav_border": "--topnav-border",
43+
"public.color_topnav_primary": "--topnav-primary",
44+
"public.color_topnav_primary_foreground": "--topnav-primary-foreground",
45+
"public.color_topnav_ring": "--topnav-ring",
3746
};
3847

3948
const darkColorMap: Record<string, string> = {
@@ -70,6 +79,15 @@ const darkColorMap: Record<string, string> = {
7079
"public.color_dark_sidebar_primary_foreground":
7180
"--sidebar-primary-foreground",
7281
"public.color_dark_sidebar_ring": "--sidebar-ring",
82+
// Top Nav
83+
"public.color_dark_topnav_background": "--topnav-background",
84+
"public.color_dark_topnav_foreground": "--topnav-foreground",
85+
"public.color_dark_topnav_accent": "--topnav-accent",
86+
"public.color_dark_topnav_accent_foreground": "--topnav-accent-foreground",
87+
"public.color_dark_topnav_border": "--topnav-border",
88+
"public.color_dark_topnav_primary": "--topnav-primary",
89+
"public.color_dark_topnav_primary_foreground": "--topnav-primary-foreground",
90+
"public.color_dark_topnav_ring": "--topnav-ring",
7391
};
7492

7593
export function useBranding() {

‎i18n/locales/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@
184184
"updated": "Chat settings updated successfully"
185185
},
186186
"discord": {
187-
"title": "Discord",
187+
"title": "Discord / Notifications",
188188
"invite_link": "Discord Invite Link",
189189
"webhook": "Discord Webhook",
190190
"webhook_description": "We use this discord webhook to send notifications that require action from a player. Ex. match issues, bugs, etc.",

‎layouts/components/TopNav.vue‎

Lines changed: 62 additions & 45 deletions
Large diffs are not rendered by default.

‎pages/settings/application/branding.vue‎

Lines changed: 104 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,51 @@ const lightColorSections: ColorSection[] = [
462462
},
463463
],
464464
},
465+
{
466+
title: "Top Nav",
467+
fields: [
468+
{
469+
key: "public.color_topnav_background",
470+
label: "Top Nav Background",
471+
default: "0 0% 98%",
472+
},
473+
{
474+
key: "public.color_topnav_foreground",
475+
label: "Top Nav Text",
476+
default: "240 5.3% 26.1%",
477+
},
478+
{
479+
key: "public.color_topnav_accent",
480+
label: "Top Nav Hover",
481+
default: "142 77% 73%",
482+
},
483+
{
484+
key: "public.color_topnav_accent_foreground",
485+
label: "Top Nav Hover Text",
486+
default: "0 0% 98%",
487+
},
488+
{
489+
key: "public.color_topnav_border",
490+
label: "Top Nav Border",
491+
default: "220 13% 91%",
492+
},
493+
{
494+
key: "public.color_topnav_primary",
495+
label: "Top Nav Primary",
496+
default: "240 5.9% 10%",
497+
},
498+
{
499+
key: "public.color_topnav_primary_foreground",
500+
label: "Top Nav Primary Text",
501+
default: "0 0% 98%",
502+
},
503+
{
504+
key: "public.color_topnav_ring",
505+
label: "Top Nav Focus Ring",
506+
default: "217.2 91.2% 59.8%",
507+
},
508+
],
509+
},
465510
];
466511
467512
const darkColorSections: ColorSection[] = [
@@ -625,6 +670,51 @@ const darkColorSections: ColorSection[] = [
625670
},
626671
],
627672
},
673+
{
674+
title: "Top Nav",
675+
fields: [
676+
{
677+
key: "public.color_dark_topnav_background",
678+
label: "Top Nav Background",
679+
default: "240 4% 16%",
680+
},
681+
{
682+
key: "public.color_dark_topnav_foreground",
683+
label: "Top Nav Text",
684+
default: "0 0% 98%",
685+
},
686+
{
687+
key: "public.color_dark_topnav_accent",
688+
label: "Top Nav Hover",
689+
default: "142 77% 73%",
690+
},
691+
{
692+
key: "public.color_dark_topnav_accent_foreground",
693+
label: "Top Nav Hover Text",
694+
default: "0 0% 98%",
695+
},
696+
{
697+
key: "public.color_dark_topnav_border",
698+
label: "Top Nav Border",
699+
default: "240 3% 23%",
700+
},
701+
{
702+
key: "public.color_dark_topnav_primary",
703+
label: "Top Nav Primary",
704+
default: "240 6% 10%",
705+
},
706+
{
707+
key: "public.color_dark_topnav_primary_foreground",
708+
label: "Top Nav Primary Text",
709+
default: "0 0% 98%",
710+
},
711+
{
712+
key: "public.color_dark_topnav_ring",
713+
label: "Top Nav Focus Ring",
714+
default: "217.2 91.2% 59.8%",
715+
},
716+
],
717+
},
628718
];
629719
630720
export default {
@@ -808,7 +898,7 @@ export default {
808898
async removeFavicon() {
809899
await this.deleteBrandingFile("favicon");
810900
},
811-
async deleteBrandingFile(type: "logo" | "favicon") {
901+
async deleteBrandingFile(type: "logo" | "favicon", silent = false) {
812902
try {
813903
const response = await fetch(
814904
`https://${this.apiDomain}/branding/${type}`,
@@ -822,13 +912,17 @@ export default {
822912
throw new Error(`Delete failed: ${response.statusText}`);
823913
}
824914
825-
toast({ title: `${type === "logo" ? "Logo" : "Favicon"} removed` });
915+
if (!silent) {
916+
toast({ title: `${type === "logo" ? "Logo" : "Favicon"} removed` });
917+
}
826918
} catch (error: any) {
827-
toast({
828-
title: "Delete failed",
829-
description: error.message,
830-
variant: "destructive",
831-
});
919+
if (!silent) {
920+
toast({
921+
title: "Delete failed",
922+
description: error.message,
923+
variant: "destructive",
924+
});
925+
}
832926
}
833927
},
834928
onColorChange(key: string, event: Event) {
@@ -929,8 +1023,8 @@ export default {
9291023
9301024
// Delete uploaded files
9311025
await Promise.allSettled([
932-
this.deleteBrandingFile("logo"),
933-
this.deleteBrandingFile("favicon"),
1026+
this.deleteBrandingFile("logo", true),
1027+
this.deleteBrandingFile("favicon", true),
9341028
]);
9351029
9361030
this.brandName = "";
@@ -939,7 +1033,7 @@ export default {
9391033
this.loginFooterUrl = "";
9401034
this.colorValues = {};
9411035
942-
await this.saveAll();
1036+
toast({ title: "Branding reset to defaults" });
9431037
} catch (error: any) {
9441038
toast({
9451039
title: "Reset failed",

‎stores/ApplicationSettings.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,23 @@ interface Region {
1717
export const useApplicationSettingsStore = defineStore(
1818
"applicationSettings",
1919
() => {
20-
const settings = ref<Array<{ name: string; value: string }>>([]);
20+
const SETTINGS_CACHE_KEY = "5stack:application-settings";
21+
22+
const loadCachedSettings = (): Array<{
23+
name: string;
24+
value: string;
25+
}> => {
26+
try {
27+
const cached = localStorage.getItem(SETTINGS_CACHE_KEY);
28+
if (cached) {
29+
return JSON.parse(cached);
30+
}
31+
} catch {}
32+
return [];
33+
};
34+
35+
const settings =
36+
ref<Array<{ name: string; value: string }>>(loadCachedSettings());
2137

2238
const subscribeToSettings = async () => {
2339
const subscription = getGraphqlClient().subscribe({
@@ -35,6 +51,12 @@ export const useApplicationSettingsStore = defineStore(
3551
subscription.subscribe({
3652
next: ({ data }) => {
3753
settings.value = data.settings;
54+
try {
55+
localStorage.setItem(
56+
SETTINGS_CACHE_KEY,
57+
JSON.stringify(data.settings),
58+
);
59+
} catch {}
3860
},
3961
});
4062
};

‎tailwind.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,16 @@ module.exports = {
7777
border: "hsl(var(--sidebar-border))",
7878
ring: "hsl(var(--sidebar-ring))",
7979
},
80+
topnav: {
81+
DEFAULT: "hsl(var(--topnav-background))",
82+
foreground: "hsl(var(--topnav-foreground))",
83+
primary: "hsl(var(--topnav-primary))",
84+
"primary-foreground": "hsl(var(--topnav-primary-foreground))",
85+
accent: "hsl(var(--topnav-accent))",
86+
"accent-foreground": "hsl(var(--topnav-accent-foreground))",
87+
border: "hsl(var(--topnav-border))",
88+
ring: "hsl(var(--topnav-ring))",
89+
},
8090
},
8191
borderRadius: {
8292
xl: "calc(var(--radius) + 4px)",

0 commit comments

Comments
 (0)