From e7944b9aa09decca541615f8f848e2c0f7e9d890 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 15 Feb 2024 04:28:31 +0100
Subject: [PATCH] Correctly display user with pfp if available

---
 src/lib/components/UserHeader.svelte | 18 +++++++++++++-----
 src/routes/(main)/+layout.svelte     |  7 +++----
 src/routes/rezepte/+layout.server.ts |  8 ++++----
 src/routes/rezepte/+layout.svelte    |  6 +++---
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/UserHeader.svelte b/src/lib/components/UserHeader.svelte
index 0cefa45..65a87b8 100644
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	export let username;
+	export let user;
+
 	function toggle_options(){
 		const el = document.querySelector("#options")
 		el.hidden = !el.hidden
 	}
-	let src="https://bocken.org/static/user/thumb/" +  username + ".webp"
+
 	onMount( () => {
 		document.addEventListener("click", (e) => {
 			const el = document.querySelector("#button")
@@ -101,6 +102,12 @@
 	/* (B2) BOTTOM "CALLOUT TAIL" */
 h2{
 	margin-block: 0;
+	font-size: 1.2rem;
+}
+h2 + p{
+	padding-top: 0;
+	margin-top: 0;
+	font-size: 1.2rem;
 }
 @media screen and (max-width: 800px){
 	#options{
@@ -125,10 +132,11 @@ h2{
 }
 </style>
 
-{#if username}
-	<button on:click={toggle_options} style="background-image: url({src})" id=button>
+{#if user}
+	<button on:click={toggle_options} style="background-image: url(https://bocken.org/static/user/thumb/{user.nickname}.webp)" id=button>
 	<div id=options class="speech top" hidden>
-			<h2>{username}</h2>
+			<h2>{user.name}</h2>
+			<p>({user.nickname})</p>
 			<ul>
 				<li><a href="https://sso.bocken.org/if/user/#/settings" >Einstellungen</a></li>
 				<li><a href="/auth/signout" >Log Out</a></li>
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index b778ddc..11061fb 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -2,11 +2,10 @@
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
 export let data
-let username = ""
+let user;
 if(data.session){
-	username = data.session.user.name
+	user = data.session.user
 }
-console.log(data)
 </script>
 
 <Header>
@@ -19,6 +18,6 @@ console.log(data)
 	<li><a href="https://cloud.bocken.org">Cloud</a></li>
 	<li><a href="/searx">Searx</a></li>
 	</ul>
-	<UserHeader {username} slot=right_side></UserHeader>
+	<UserHeader {user} slot=right_side></UserHeader>
 	<slot></slot>
 </Header>
diff --git a/src/routes/rezepte/+layout.server.ts b/src/routes/rezepte/+layout.server.ts
index 090a40e..57ca38d 100644
--- a/src/routes/rezepte/+layout.server.ts
+++ b/src/routes/rezepte/+layout.server.ts
@@ -1,8 +1,8 @@
-import type { Actions, PageServerLoad } from "./$types"
+import type { PageServerLoad } from "./$types"
 import { error } from "@sveltejs/kit"
 
-export const load = (async ({cookies, locals}) => {
+export const load : PageServerLoad = async ({locals}) => {
 	return {
-		session: await locals.getSession()
+		session: await locals.auth()
 	}
-});
+};
diff --git a/src/routes/rezepte/+layout.svelte b/src/routes/rezepte/+layout.svelte
index 334cbfb..362156b 100644
--- a/src/routes/rezepte/+layout.svelte
+++ b/src/routes/rezepte/+layout.svelte
@@ -2,9 +2,9 @@
 import Header from '$lib/components/Header.svelte'
     import UserHeader from '$lib/components/UserHeader.svelte';
 export let data
-let username = ""
+let user;
 if(data.session){
-	username = data.session.user.name
+	user = data.session.user
 }
 </script>
 
@@ -16,6 +16,6 @@ if(data.session){
 	<li><a href="/rezepte/icon">Icon</a></li>
 	<li><a href="/rezepte/tag">Stichwörter</a></li>
 	</ul>
-	<UserHeader slot=right_side {username}></UserHeader>
+	<UserHeader slot=right_side {user}></UserHeader>
 	<slot></slot>
 </Header>