Add a little avatar cache, change page store to state

src/lib/components/Paginator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { PaginationMeta } from '$lib/types';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { t } from '$lib/i18n';
 
 	interface Props {
@@ -8,7 +8,7 @@
 	}
 
 	let { meta }: Props = $props();
-	let pageNum = $derived(Number($page.url.searchParams.get('page')) || 1);
+	let pageNum = $derived(Number(page.url.searchParams.get('page')) || 1);
 	let firstPage = $derived(pageNum === 1);
 	let lastPage = $derived(!meta.pageCount || pageNum === meta.pageCount);
 	let pageButtons = $derived(Array.from({ length: meta.pageCount }, (_, i) => i + 1));
@@ -23,7 +23,7 @@
 <nav class="pager">
 	<a
 		class="page-button page-prev {firstPage ? 'disabled' : ''}"
-		href={`?${makePageUrl($page.url.searchParams, pageNum - 1)}`}
+		href={`?${makePageUrl(page.url.searchParams, pageNum - 1)}`}
 		tabindex={firstPage ? -1 : 0}
 		aria-label={$t('common.previous')}>&lt;</a
 	>
@@ -32,7 +32,7 @@
 		{@const active = buttonNumber === pageNum}
 		<a
 			class="page-button page-link {active ? 'disabled' : ''}"
-			href={`?${makePageUrl($page.url.searchParams, buttonNumber)}`}
+			href={`?${makePageUrl(page.url.searchParams, buttonNumber)}`}
 			tabindex={active ? -1 : 0}
 			aria-label={`${$t('common.page')} ${buttonNumber}`}>{buttonNumber}</a
 		>
@@ -41,7 +41,7 @@
 	<a
 		class="page-button page-prev {lastPage ? 'disabled' : ''}"
 		tabindex={lastPage ? -1 : 0}
-		href={`?${makePageUrl($page.url.searchParams, pageNum + 1)}`}
+		href={`?${makePageUrl(page.url.searchParams, pageNum + 1)}`}
 		aria-label={$t('common.next')}>&gt;</a
 	>
 </nav>

src/lib/components/admin/AdminSidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { UserSession } from '$lib/types';
 	import { hasPrivileges } from '$lib/utils';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { t } from '$lib/i18n';
 
 	interface Props {
@@ -40,7 +40,7 @@
 				<li>
 					<a
 						href={link.href}
-						class="sidebar-link{$page.url.pathname.startsWith(link.href) ? ' active' : ''}"
+						class="sidebar-link{page.url.pathname.startsWith(link.href) ? ' active' : ''}"
 						>{link.title}</a
 					>
 				</li>

src/routes/+error.svelte

@@ -1,15 +1,15 @@
 <script>
 	import { invalidateAll } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import Button from '$lib/components/Button.svelte';
 	import MainContainer from '$lib/components/container/MainContainer.svelte';
 </script>
 
 <MainContainer>
 	<div class="centered">
-		<h1>{$page.status}</h1>
+		<h1>{page.status}</h1>
-		<p>{$page.error?.message}</p>
+		<p>{page.error?.message}</p>
-		{#if $page.status !== 404}
+		{#if page.status !== 404}
 			<Button onclick={() => invalidateAll()} variant="link">Go back</Button>
 		{/if}
 	</div>

src/routes/api/avatar/[uuid]/+server.ts

@@ -8,7 +8,8 @@ export async function GET({ params: { uuid } }) {
 		return new Response(fallback, {
 			status: 200,
 			headers: {
-				'Content-Type': 'image/png'
+				'Content-Type': 'image/png',
+				'Cache-Control': 'max-age=3600'
 			}
 		});
 	}
@@ -17,7 +18,8 @@ export async function GET({ params: { uuid } }) {
 	return new Response(readUpload, {
 		status: 200,
 		headers: {
-			'Content-Type': uploadFile.mimetype
+			'Content-Type': uploadFile.mimetype,
+			'Cache-Control': 'max-age=3600'
 		}
 	});
 }

src/routes/api/avatar/client/[uuid]/+server.ts

@@ -8,7 +8,8 @@ export async function GET({ params: { uuid } }) {
 		return new Response(fallback, {
 			status: 200,
 			headers: {
-				'Content-Type': 'image/png'
+				'Content-Type': 'image/png',
+				'Cache-Control': 'max-age=3600'
 			}
 		});
 	}
@@ -17,7 +18,8 @@ export async function GET({ params: { uuid } }) {
 	return new Response(readUpload, {
 		status: 200,
 		headers: {
-			'Content-Type': uploadFile.mimetype
+			'Content-Type': uploadFile.mimetype,
+			'Cache-Control': 'max-age=3600'
 		}
 	});
 }

src/routes/login/+page.svelte

@@ -12,7 +12,6 @@
 	import ButtonRow from '$lib/components/container/ButtonRow.svelte';
 	import TitleRow from '$lib/components/container/TitleRow.svelte';
 	import ThemeButton from '$lib/components/ThemeButton.svelte';
-	import { page } from '$app/stores';
 
 	interface Props {
 		data: PageData;

src/routes/login/password/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { env } from '$env/dynamic/public';
 	import Alert from '$lib/components/Alert.svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -24,7 +24,7 @@
 	let submitted = $state(false);
 	let errors = $derived([...internalErrors, ...(form?.errors?.length ? form.errors : [])]);
 	let actionUrl = $derived(
-		data.setter ? `?/setPassword&token=${$page.url.searchParams.get('token')}` : '?/sendEmail'
+		data.setter ? `?/setPassword&token=${page.url.searchParams.get('token')}` : '?/sendEmail'
 	);
 	let pageTitle = $derived(data.setter ? 'setNewPassword' : 'resetPassword');
 

src/routes/ssoadmin/audit/+page.svelte

@@ -2,7 +2,7 @@
 	import type { PageData } from './$types';
 	import { t } from '$lib/i18n';
 	import { env } from '$env/dynamic/public';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import Paginator from '$lib/components/Paginator.svelte';
 	import FormControl from '$lib/components/form/FormControl.svelte';
 	import ColumnView from '$lib/components/container/ColumnView.svelte';
@@ -32,7 +32,7 @@
 					<select
 						name="actions"
 						id="actions"
-						value={$page.url.searchParams.getAll('actions')}
+						value={page.url.searchParams.getAll('actions')}
 						multiple
 					>
 						{#each data.actions as action}
@@ -44,11 +44,11 @@
 				<ColumnView>
 					<FormControl>
 						<label for="content">{$t('admin.audit.comment')}</label>
-						<input name="content" id="content" value={$page.url.searchParams.get('content')} />
+						<input name="content" id="content" value={page.url.searchParams.get('content')} />
 					</FormControl>
 					<FormControl>
 						<label for="ip">{$t('admin.audit.ip')}</label>
-						<input name="ip" id="ip" value={$page.url.searchParams.get('ip')} />
+						<input name="ip" id="ip" value={page.url.searchParams.get('ip')} />
 					</FormControl>
 				</ColumnView>
 			</SplitView>
@@ -56,7 +56,7 @@
 			<SplitView>
 				<FormControl>
 					<label for="user">{$t('admin.audit.user')}</label>
-					<input name="user" id="user" value={$page.url.searchParams.get('user')} />
+					<input name="user" id="user" value={page.url.searchParams.get('user')} />
 				</FormControl>
 			</SplitView>
 
@@ -66,7 +66,7 @@
 					name="flagged"
 					id="flagged"
 					type="checkbox"
-					checked={!!$page.url.searchParams.get('flagged')}
+					checked={!!page.url.searchParams.get('flagged')}
 				/>
 			</FormControl>
 

src/routes/ssoadmin/oauth2/+page.svelte

@@ -7,7 +7,7 @@
 	import ColumnView from '$lib/components/container/ColumnView.svelte';
 	import { env } from '$env/dynamic/public';
 	import FormControl from '$lib/components/form/FormControl.svelte';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	interface Props {
 		data: PageData;
@@ -31,7 +31,7 @@
 	<form action="" method="get">
 		<FormControl>
 			<label for="filter">{$t('common.filter')}</label>
-			<input name="filter" value={$page.url.searchParams.get('filter')} />
+			<input name="filter" value={page.url.searchParams.get('filter')} />
 		</FormControl>
 	</form>
 

src/routes/ssoadmin/oauth2/[uuid]/+page.svelte

@@ -13,7 +13,7 @@
 	import ActionButton from '$lib/components/ActionButton.svelte';
 	import type { ActionData, PageData } from './$types';
 	import { t } from '$lib/i18n';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { writable } from 'svelte/store';
 	import { env } from '$env/dynamic/public';
 	import { OAUTH2_MAX_REDIRECTS, OAUTH2_MAX_URLS } from '$lib/constants';
@@ -456,7 +456,7 @@
 						<b>{$t('admin.oauth2.revoked')}</b>
 					{/if}
 				</div>
-				<a href={`${$page.url.pathname}/user/${user.uuid}`}>{$t('admin.oauth2.privileges.edit')}</a>
+				<a href={`${page.url.pathname}/user/${user.uuid}`}>{$t('admin.oauth2.privileges.edit')}</a>
 			</div>
 		{:else}
 			<b>{$t('admin.oauth2.noAuthorizations')}</b>
@@ -464,7 +464,7 @@
 	</div>
 </ColumnView>
 
-<AvatarModal show={showAvatarModal} url={$page.url.pathname} />
+<AvatarModal show={showAvatarModal} url={page.url.pathname} />
 
 <style>
 	h2,

src/routes/ssoadmin/users/+page.svelte

@@ -6,7 +6,7 @@
 	import { env } from '$env/dynamic/public';
 	import FormControl from '$lib/components/form/FormControl.svelte';
 	import ColumnView from '$lib/components/container/ColumnView.svelte';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	interface Props {
 		data: PageData;
@@ -25,7 +25,7 @@
 	<form action="" method="get">
 		<FormControl>
 			<label for="filter">{$t('common.filter')}</label>
-			<input name="filter" value={$page.url.searchParams.get('filter')} />
+			<input name="filter" value={page.url.searchParams.get('filter')} />
 		</FormControl>
 	</form>