extract avatar utilities and update user profile

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`
+}

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