From 55f90e1a3d4633ba219141fe712c7ba35e2fb6a8 Mon Sep 17 00:00:00 2001 From: Stan Runge Date: Sat, 28 Feb 2026 01:46:14 +0100 Subject: [PATCH] layout UI --- src/app.html | 6 ++++ src/lib/components/Header.svelte | 29 +++++++++++++++ src/lib/components/Sidebar.svelte | 57 ++++++++++++++++++++++++++++++ src/routes/(app)/+layout.server.ts | 7 ++++ src/routes/(app)/+layout.svelte | 16 +++++++++ src/routes/(app)/+page.svelte | 46 ++++++++++++++++++++++++ src/routes/(app)/layout.css | 43 ++++++++++++++++++++++ src/routes/+layout.svelte | 9 ----- src/routes/+page.svelte | 2 -- src/routes/layout.css | 2 -- src/routes/page.svelte.spec.ts | 13 ------- 11 files changed, 204 insertions(+), 26 deletions(-) create mode 100644 src/lib/components/Header.svelte create mode 100644 src/lib/components/Sidebar.svelte create mode 100644 src/routes/(app)/+layout.server.ts create mode 100644 src/routes/(app)/+layout.svelte create mode 100644 src/routes/(app)/+page.svelte create mode 100644 src/routes/(app)/layout.css delete mode 100644 src/routes/+layout.svelte delete mode 100644 src/routes/+page.svelte delete mode 100644 src/routes/layout.css delete mode 100644 src/routes/page.svelte.spec.ts diff --git a/src/app.html b/src/app.html index f273cc5..e0a3d41 100644 --- a/src/app.html +++ b/src/app.html @@ -3,6 +3,12 @@ + + + %sveltekit.head% diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte new file mode 100644 index 0000000..ed6a9f3 --- /dev/null +++ b/src/lib/components/Header.svelte @@ -0,0 +1,29 @@ + + +
+
+ +
+ {#if user} +
+ {#if user.image} + {user.name} + {/if} + {user.name} +
+ {:else} + + Sign in with osu! + + {/if} +
+
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte new file mode 100644 index 0000000..2712955 --- /dev/null +++ b/src/lib/components/Sidebar.svelte @@ -0,0 +1,57 @@ + + + diff --git a/src/routes/(app)/+layout.server.ts b/src/routes/(app)/+layout.server.ts new file mode 100644 index 0000000..c9d39ee --- /dev/null +++ b/src/routes/(app)/+layout.server.ts @@ -0,0 +1,7 @@ +import type { LayoutServerLoad } from './$types'; + +export const load: LayoutServerLoad = async ({ locals }) => { + return { + user: locals.user ?? null + }; +}; diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte new file mode 100644 index 0000000..a4de69b --- /dev/null +++ b/src/routes/(app)/+layout.svelte @@ -0,0 +1,16 @@ + + +
+ +
+
+
+ {@render children()} +
+
+
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte new file mode 100644 index 0000000..486ef1c --- /dev/null +++ b/src/routes/(app)/+page.svelte @@ -0,0 +1,46 @@ + + +
+

+ {#if data.user} + Welcome back, {data.user.name} + {:else} + Welcome to VASH + {/if} +

+

Automated esports match management for osu!

+ +
+ +
⚔
+

Matches

+

Create and manage competitive matches

+ + + +
♫
+

Mappools

+

Build and share beatmap pools

+ + + +
⚑
+

Teams

+

Manage your teams and rosters

+ +
+
diff --git a/src/routes/(app)/layout.css b/src/routes/(app)/layout.css new file mode 100644 index 0000000..107af4c --- /dev/null +++ b/src/routes/(app)/layout.css @@ -0,0 +1,43 @@ +@import 'tailwindcss'; +@plugin '@tailwindcss/typography'; + +@theme { + --color-surface-900: #0a0a0f; + --color-surface-800: #12121a; + --color-surface-700: #1a1a25; + --color-surface-600: #24243a; + --color-accent: #ff66ab; + --color-accent-hover: #ff85be; + --color-accent-dim: #ff66ab33; + --color-text-primary: #eeeef0; + --color-text-secondary: #8888a0; + --color-border: #2a2a3d; + --font-display: 'Geist', system-ui, sans-serif; + --font-body: 'Geist', system-ui, sans-serif; + --font-mono: 'Geist Mono', ui-monospace, monospace; +} + +html { + background-color: var(--color-surface-900); + color: var(--color-text-primary); + font-family: var(--font-body); +} + +body { + min-height: 100dvh; +} + +/* Scrollbar */ +::-webkit-scrollbar { + width: 6px; +} +::-webkit-scrollbar-track { + background: var(--color-surface-900); +} +::-webkit-scrollbar-thumb { + background: var(--color-surface-600); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--color-accent); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte deleted file mode 100644 index 0d8eb03..0000000 --- a/src/routes/+layout.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - -{@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte deleted file mode 100644 index cc88df0..0000000 --- a/src/routes/+page.svelte +++ /dev/null @@ -1,2 +0,0 @@ -

Welcome to SvelteKit

-

Visit svelte.dev/docs/kit to read the documentation

diff --git a/src/routes/layout.css b/src/routes/layout.css deleted file mode 100644 index 1c4d2a8..0000000 --- a/src/routes/layout.css +++ /dev/null @@ -1,2 +0,0 @@ -@import 'tailwindcss'; -@plugin '@tailwindcss/typography'; diff --git a/src/routes/page.svelte.spec.ts b/src/routes/page.svelte.spec.ts deleted file mode 100644 index d54f00a..0000000 --- a/src/routes/page.svelte.spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { page } from 'vitest/browser'; -import { describe, expect, it } from 'vitest'; -import { render } from 'vitest-browser-svelte'; -import Page from './+page.svelte'; - -describe('/+page.svelte', () => { - it('should render h1', async () => { - render(Page); - - const heading = page.getByRole('heading', { level: 1 }); - await expect.element(heading).toBeInTheDocument(); - }); -});