From a2d5d5dc8d012e5e70666e386c42ac7414dd10a9 Mon Sep 17 00:00:00 2001 From: Christian Beutel <> Date: Thu, 9 Jan 2025 20:34:31 +0100 Subject: [PATCH] server rendering improvements --- web/src/lib/components/nav_bar.svelte | 30 +++++++++++-------- .../components/trail/trail_info_panel.svelte | 11 ++++--- web/src/lib/stores/theme_store.ts | 19 ++++++++++-- web/src/routes/+layout.ts | 4 ++- web/src/routes/map/+page.svelte | 2 +- web/src/routes/trails/+page.svelte | 2 +- 6 files changed, 46 insertions(+), 22 deletions(-) diff --git a/web/src/lib/components/nav_bar.svelte b/web/src/lib/components/nav_bar.svelte index aae87fe1..c61dbb8e 100644 --- a/web/src/lib/components/nav_bar.svelte +++ b/web/src/lib/components/nav_bar.svelte @@ -2,6 +2,7 @@ import { afterNavigate, goto } from "$app/navigation"; import { page } from "$app/stores"; import LogoText from "$lib/components/logo/logo_text.svelte"; + import { pb } from "$lib/pocketbase"; import { theme, toggleTheme } from "$lib/stores/theme_store"; import { currentUser, logout } from "$lib/stores/user_store"; import { getFileURL } from "$lib/util/file_util"; @@ -121,27 +122,30 @@
- {#if $currentUser} + {#if pb.authStore.model} {$_("new-trail")}
- + avatar - -

{$currentUser.username}

+ +

{pb.authStore.model.username}

- {$currentUser.email} + {pb.authStore.model.email}

diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte index 61343fc9..21e49711 100644 --- a/web/src/lib/components/trail/trail_info_panel.svelte +++ b/web/src/lib/components/trail/trail_info_panel.svelte @@ -42,6 +42,7 @@ import EmptyStatePhotos from "../empty_states/empty_state_photos.svelte"; import EmptyStateWaypoint from "../empty_states/empty_state_waypoint.svelte"; import EmptyStateDescription from "../empty_states/empty_state_description.svelte"; + import { browser } from "$app/environment"; export let trail: Trail; export let mode: "overview" | "map" | "list" = "map"; @@ -53,7 +54,7 @@ $_("waypoints", { values: { n: 2 } }), $_("photos"), $_("summit-book"), - ...($currentUser ? [$_("comment", { values: { n: 2 } })] : []), + ...(pb.authStore.model ? [$_("comment", { values: { n: 2 } })] : []), ]; const trailIsShared = @@ -69,11 +70,11 @@ let newComment: Comment = new Comment("", 0, "", trail.id ?? ""); - let commentsLoading: boolean = false; + let commentsLoading: boolean = activeTab == 4; let commentCreateLoading: boolean = false; let commentDeleteLoading: boolean = false; - $: if (activeTab == 4) { + $: if (browser && activeTab == 4) { fetchComments(); } @@ -402,7 +403,9 @@ > {/each} {:else if $comments.length == 0} -
+
+ +
{:else}
    {#each $comments ?? [] as comment} diff --git a/web/src/lib/stores/theme_store.ts b/web/src/lib/stores/theme_store.ts index dae28a22..48dd84ad 100644 --- a/web/src/lib/stores/theme_store.ts +++ b/web/src/lib/stores/theme_store.ts @@ -3,13 +3,28 @@ import { get, writable, type Writable } from "svelte/store"; type Theme = "dark" | "light" -export const theme: Writable = writable(browser && localStorage.getItem("theme") as Theme || "light" ); +export const theme: Writable = writable(getDefaultTheme()); + +function getDefaultTheme(): Theme { + if (browser) { + if (localStorage.getItem("theme")) { + return localStorage.getItem("theme") as Theme; + } else if (document.documentElement.classList.contains("light")) { + return "light" + } else if (document.documentElement.classList.contains("dark")) { + return "dark"; + } + } + + return "light"; + +} export function toggleTheme() { const currentTheme = get(theme); const newTheme = currentTheme === "light" ? "dark" : "light"; document.documentElement.classList.remove(currentTheme) - document.documentElement.classList.add(newTheme) + document.documentElement.classList.add(newTheme) theme.set(newTheme) localStorage.setItem("theme", newTheme); } \ No newline at end of file diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts index dcfc6230..32e20a7c 100644 --- a/web/src/routes/+layout.ts +++ b/web/src/routes/+layout.ts @@ -3,6 +3,8 @@ import '$lib/i18n' import { waitLocale } from 'svelte-i18n' import type { LayoutLoad } from './$types' -export const load: LayoutLoad = async () => { +export const load: LayoutLoad = async ({ data }) => { await waitLocale() + + return data; } \ No newline at end of file diff --git a/web/src/routes/map/+page.svelte b/web/src/routes/map/+page.svelte index 9cf7ef1a..ca68889c 100644 --- a/web/src/routes/map/+page.svelte +++ b/web/src/routes/map/+page.svelte @@ -39,7 +39,7 @@ const MIN_ZOOM = 6; - let loading: boolean = false; + let loading: boolean = true; onMount(async () => {}); diff --git a/web/src/routes/trails/+page.svelte b/web/src/routes/trails/+page.svelte index 7bc62dd3..1505293c 100644 --- a/web/src/routes/trails/+page.svelte +++ b/web/src/routes/trails/+page.svelte @@ -10,7 +10,7 @@ let filterExpanded: boolean = true; - let loading: boolean = false; + let loading: boolean = true; const filter: TrailFilter = $page.data.filter; const pagination: { page: number; totalPages: number } = {