From 26b32b40e2495878419a160316146e6755ff5016 Mon Sep 17 00:00:00 2001
From: sam <sam@vulpine.solutions>
Date: Sat, 14 Dec 2024 14:00:48 +0100
Subject: [PATCH] feat: show utc offset on profile

---
 .../components/profile/ProfileHeader.svelte   |  5 ++++-
 .../lib/components/profile/TimeOffset.svelte  | 19 +++++++++++++++++++
 .../src/routes/@[username]/+page.svelte       |  2 +-
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 Foxnouns.Frontend/src/lib/components/profile/TimeOffset.svelte

diff --git a/Foxnouns.Frontend/src/lib/components/profile/ProfileHeader.svelte b/Foxnouns.Frontend/src/lib/components/profile/ProfileHeader.svelte
index aa413db..9a0ebff 100644
--- a/Foxnouns.Frontend/src/lib/components/profile/ProfileHeader.svelte
+++ b/Foxnouns.Frontend/src/lib/components/profile/ProfileHeader.svelte
@@ -5,14 +5,16 @@
 	import ProfileLink from "./ProfileLink.svelte";
 	import ProfileFlag from "./ProfileFlag.svelte";
 	import Avatar from "$components/Avatar.svelte";
+	import TimeOffset from "./TimeOffset.svelte";
 
 	type Props = {
 		name: string;
 		profile: User | Member;
 		lazyLoadAvatar?: boolean;
+		offset?: number | null;
 	};
 
-	let { name, profile, lazyLoadAvatar }: Props = $props();
+	let { name, profile, lazyLoadAvatar, offset }: Props = $props();
 
 	// renderMarkdown sanitizes the output HTML for us
 	let bio = $derived(renderMarkdown(profile.bio));
@@ -45,6 +47,7 @@
 			{:else}
 				<h2>{name}</h2>
 			{/if}
+			{#if offset}<TimeOffset {offset} />{/if}
 			{#if bio}
 				<hr />
 				<!-- bios are sanitized before being passed to @html and the allowed markdown is heavily restricted -->
diff --git a/Foxnouns.Frontend/src/lib/components/profile/TimeOffset.svelte b/Foxnouns.Frontend/src/lib/components/profile/TimeOffset.svelte
new file mode 100644
index 0000000..f6d2de4
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/profile/TimeOffset.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { DateTime, FixedOffsetZone } from "luxon";
+	import Clock from "svelte-bootstrap-icons/lib/Clock.svelte";
+
+	type Props = { offset: number };
+	let { offset }: Props = $props();
+
+	let { currentTime, timezone } = $derived.by(() => {
+		const zone = FixedOffsetZone.instance(offset / 60);
+
+		return {
+			currentTime: DateTime.now().setZone(zone).toLocaleString(DateTime.TIME_SIMPLE),
+			timezone: zone.formatOffset(DateTime.now().toUnixInteger(), "narrow"),
+		};
+	});
+</script>
+
+<Clock aria-hidden />
+{currentTime} <span class="text-body-secondary">(UTC{timezone})</span>
diff --git a/Foxnouns.Frontend/src/routes/@[username]/+page.svelte b/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
index 903312d..cefd8bc 100644
--- a/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
+++ b/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
@@ -25,7 +25,7 @@
 		<OwnProfileNotice editLink="/settings/profile" />
 	{/if}
 
-	<ProfileHeader name="@{data.user.username}" profile={data.user} />
+	<ProfileHeader name="@{data.user.username}" profile={data.user} offset={data.user.utc_offset} />
 	<ProfileFields profile={data.user} {allPreferences} />
 
 	{#if data.members.length > 0}