From 12cf6f1531c00d84bf1deb2e08815d38492bd58c Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 5 Jan 2024 19:41:11 -0800
Subject: feat(css): navigation avatar

---
 src/app.css                 |  5 +++++
 src/lib/AniList/identity.ts |  6 ++++--
 src/routes/+layout.svelte   | 23 +++++++++++++++--------
 3 files changed, 24 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index ea6ef7e6..b920a8c0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -26,6 +26,11 @@ details {
 	box-shadow: 0 4px 30px var(--base01);
 }
 
+.fancy-image {
+	border-radius: 8px;
+	box-shadow: 0 4px 30px var(--base01);
+}
+
 summary {
 	font-size: 1.05em;
 	font-weight: 600;
diff --git a/src/lib/AniList/identity.ts b/src/lib/AniList/identity.ts
index a77891d6..7214ffa4 100644
--- a/src/lib/AniList/identity.ts
+++ b/src/lib/AniList/identity.ts
@@ -1,6 +1,7 @@
 export interface UserIdentity {
 	id: number;
 	name: string;
+	avatar: string;
 }
 
 export interface AniListAuthorisation {
@@ -21,12 +22,13 @@ export const userIdentity = async (
 				'Content-Type': 'application/json',
 				Accept: 'application/json'
 			},
-			body: JSON.stringify({ query: `{ Viewer { id name } }` })
+			body: JSON.stringify({ query: `{ Viewer { id name avatar { large } } }` })
 		})
 	).json();
 
 	return {
 		id: userIdResponse['data']['Viewer']['id'],
-		name: userIdResponse['data']['Viewer']['name']
+		name: userIdResponse['data']['Viewer']['name'],
+		avatar: userIdResponse['data']['Viewer']['avatar']['large']
 	};
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a15e14ee..e148a076 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,7 +10,7 @@
 
 	export let data;
 
-	let currentUserIdentity = { name: '...', id: -1 };
+	let currentUserIdentity = { name: '...', id: -1, avatar: '' };
 
 	onMount(async () => {
 		if (browser && localStorage.getItem('redirect')) {
@@ -43,7 +43,7 @@
 			<a href="/tools" class="header-item">Tools</a>
 			<a href="/settings" class="header-item">Settings</a>
 
-			<span style="opacity: 50%;">|</span>
+			<span style="opacity: 50%;" class="header-item">|</span>
 
 			{#if data.user}
 				<a href={`/user/${currentUserIdentity.name}`} class="header-item">Profile</a>
@@ -63,11 +63,12 @@
 					Log in with AniList
 				</a>
 			{:else}
-				<a href="/api/authentication/log-out" class="header-item"
-					>Log out<button class="smaller-button button-badge badge-info"
-						>{currentUserIdentity.name}</button
-					></a
-				>
+				<a href="/api/authentication/log-out" class="header-item">Log out </a>
+				{#if data.user}
+					<a href={`/user/${currentUserIdentity.name}`} class="header-item">
+						<img class="fancy-image" id="avatar" src={currentUserIdentity.avatar} alt="Avatar" />
+					</a>
+				{/if}
 			{/if}
 		</div>
 	</div>
@@ -134,7 +135,7 @@
 	}
 
 	.header-item {
-		margin: 0 0.625rem;
+		margin: 0 0.5rem;
 	}
 
 	.header-item:hover {
@@ -144,4 +145,10 @@
 	.header-item:active {
 		outline: none;
 	}
+
+	#avatar {
+		width: 2em;
+		display: inline-block;
+		vertical-align: middle;
+	}
 </style>
-- 
cgit v1.2.3