feat: show utc offset on profile

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 -->

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>

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}