From e6b95f7c12c0645367cb07aef13d6edaabac63e3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 24 Sep 2025 02:51:51 -0700
Subject: [PATCH] extract avatar utilities and update user profile

---
 src/lib/utils/avatar.ts            | 29 +++++++++++++++++++++++++++++
 src/routes/[username]/+page.svelte | 11 +++--------
 2 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/utils/avatar.ts

diff --git a/src/lib/utils/avatar.ts b/src/lib/utils/avatar.ts
new file mode 100644
index 00000000..329d52df
--- /dev/null
+++ b/src/lib/utils/avatar.ts
@@ -0,0 +1,29 @@
+/**
+ * Ensures a filename has a .png extension
+ */
+export function ensurePng(name: string): string {
+	return /\.png$/i.test(name) ? name : `${name}.png`
+}
+
+/**
+ * Converts a filename to its @2x version for retina displays
+ */
+export function to2x(name: string): string {
+	return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
+}
+
+/**
+ * Gets the avatar source path
+ */
+export function getAvatarSrc(avatarFile: string | undefined | null): string {
+	return avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
+}
+
+/**
+ * Gets the avatar srcset for responsive images
+ */
+export function getAvatarSrcSet(avatarFile: string | undefined | null): string {
+	if (!avatarFile) return ''
+	const src = `/profile/${ensurePng(avatarFile)}`
+	return `${src} 1x, /profile/${to2x(avatarFile)} 2x`
+}
\ No newline at end of file
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 5ac5d2fc..7d5c318d 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { PageData } from './$types'
 	import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
+	import { getAvatarSrc, getAvatarSrcSet } from '$lib/utils/avatar'
 
 	const { data } = $props() as { data: PageData }
 	const page = data.page || 1
@@ -9,14 +10,8 @@
 	const isOwner = data.isOwner || false
 
 	const avatarFile = data.user?.avatar?.picture || ''
-	function ensurePng(name: string) {
-		return /\.png$/i.test(name) ? name : `${name}.png`
-	}
-	function to2x(name: string) {
-		return /\.png$/i.test(name) ? name.replace(/\.png$/i, '@2x.png') : `${name}@2x.png`
-	}
-	const avatarSrc = avatarFile ? `/profile/${ensurePng(avatarFile)}` : ''
-	const avatarSrcSet = avatarFile ? `${avatarSrc} 1x, /profile/${to2x(avatarFile)} 2x` : ''
+	const avatarSrc = getAvatarSrc(avatarFile)
+	const avatarSrcSet = getAvatarSrcSet(avatarFile)
 </script>
 
 <section class="profile">