From b647e23f9121b9beba3ccdc703fc1c4690413b8f Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 23:02:45 +0200
Subject: [PATCH] fix: use presigned S3 URLs for avatar images instead of
 /uploads/ paths

Avatar images were rendered via /uploads/ which doesn't exist since
the S3 migration. Now the server enriches profile responses with
avatarImageUrl (presigned S3 URL) and the frontend uses it directly.
Also fixed the public profile page at /users/:id.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/ProfileSection.tsx | 22 ++++++++++++++--------
 src/client/hooks/useProfile.ts           |  1 +
 src/client/routes/users/$userId.tsx      |  4 ++--
 src/server/routes/auth.ts                |  8 +++++++-
 src/server/routes/profiles.ts            | 14 +++++++++++++-
 5 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/client/components/ProfileSection.tsx b/src/client/components/ProfileSection.tsx
index 98e4191..37b50d8 100644
--- a/src/client/components/ProfileSection.tsx
+++ b/src/client/components/ProfileSection.tsx
@@ -11,7 +11,8 @@ export function ProfileSection() {
 
 	const [displayName, setDisplayName] = useState("");
 	const [bio, setBio] = useState("");
-	const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+	const [avatarFilename, setAvatarFilename] = useState<string | null>(null);
+	const [avatarDisplayUrl, setAvatarDisplayUrl] = useState<string | null>(null);
 	const [dirty, setDirty] = useState(false);
 	const [message, setMessage] = useState<{
 		type: "success" | "error";
@@ -24,7 +25,8 @@ export function ProfileSection() {
 		if (profile && !dirty) {
 			setDisplayName(profile.displayName ?? "");
 			setBio(profile.bio ?? "");
-			setAvatarUrl(profile.avatarUrl ?? null);
+			setAvatarFilename(profile.avatarUrl ?? null);
+			setAvatarDisplayUrl(profile.avatarImageUrl ?? null);
 		}
 	}, [profile, dirty]);
 
@@ -34,7 +36,7 @@ export function ProfileSection() {
 		try {
 			await updateProfile.mutateAsync({
 				displayName: displayName.trim() || undefined,
-				avatarUrl,
+				avatarUrl: avatarFilename,
 				bio: bio.trim() || undefined,
 			});
 			setDirty(false);
@@ -63,13 +65,16 @@ export function ProfileSection() {
 			return;
 		}
 
+		const localPreview = URL.createObjectURL(file);
+		setAvatarDisplayUrl(localPreview);
 		setUploading(true);
 		setMessage(null);
 		try {
 			const result = await apiUpload<{ filename: string }>("/api/images", file);
-			setAvatarUrl(result.filename);
+			setAvatarFilename(result.filename);
 			setDirty(true);
 		} catch {
+			setAvatarDisplayUrl(null);
 			setMessage({ type: "error", text: "Avatar upload failed." });
 		} finally {
 			setUploading(false);
@@ -92,9 +97,9 @@ export function ProfileSection() {
 					onClick={() => fileInputRef.current?.click()}
 					className="relative w-16 h-16 rounded-full overflow-hidden cursor-pointer group shrink-0"
 				>
-					{avatarUrl ? (
+					{avatarDisplayUrl ? (
 						<img
-							src={`/uploads/${avatarUrl}`}
+							src={avatarDisplayUrl}
 							alt="Avatar"
 							className="w-full h-full object-cover"
 						/>
@@ -145,11 +150,12 @@ export function ProfileSection() {
 					>
 						{uploading ? "Uploading..." : "Change avatar"}
 					</button>
-					{avatarUrl && (
+					{avatarFilename && (
 						<button
 							type="button"
 							onClick={() => {
-								setAvatarUrl(null);
+								setAvatarFilename(null);
+								setAvatarDisplayUrl(null);
 								setDirty(true);
 							}}
 							className="block text-xs text-red-500 hover:text-red-700 mt-0.5"
diff --git a/src/client/hooks/useProfile.ts b/src/client/hooks/useProfile.ts
index 7c74c62..f1af010 100644
--- a/src/client/hooks/useProfile.ts
+++ b/src/client/hooks/useProfile.ts
@@ -5,6 +5,7 @@ interface PublicProfile {
 	id: number;
 	displayName: string | null;
 	avatarUrl: string | null;
+	avatarImageUrl: string | null;
 	bio: string | null;
 	setups: { id: number; name: string; createdAt: string }[];
 }
diff --git a/src/client/routes/users/$userId.tsx b/src/client/routes/users/$userId.tsx
index 5b1940d..af5471f 100644
--- a/src/client/routes/users/$userId.tsx
+++ b/src/client/routes/users/$userId.tsx
@@ -52,9 +52,9 @@ function PublicProfilePage() {
 		<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
 			{/* Profile header */}
 			<div className="flex items-center gap-5 mb-8">
-				{profile.avatarUrl ? (
+				{profile.avatarImageUrl ? (
 					<img
-						src={`/uploads/${profile.avatarUrl}`}
+						src={profile.avatarImageUrl}
 						alt={displayName}
 						className="w-20 h-20 rounded-full object-cover"
 					/>
diff --git a/src/server/routes/auth.ts b/src/server/routes/auth.ts
index 1170bd9..c9f2b96 100644
--- a/src/server/routes/auth.ts
+++ b/src/server/routes/auth.ts
@@ -14,6 +14,7 @@ import {
 	listApiKeys,
 } from "../services/auth.service.ts";
 import { updateProfile } from "../services/profile.service.ts";
+import { getImageUrl } from "../services/storage.service.ts";
 
 type Env = { Variables: { db?: any; userId?: number } };
 
@@ -97,7 +98,12 @@ app.put(
 		const data = c.req.valid("json");
 		const updated = await updateProfile(db, userId, data);
 		if (!updated) return c.json({ error: "User not found" }, 404);
-		return c.json(updated);
+		return c.json({
+			...updated,
+			avatarImageUrl: updated.avatarUrl
+				? await getImageUrl(updated.avatarUrl)
+				: null,
+		});
 	},
 );
 
diff --git a/src/server/routes/profiles.ts b/src/server/routes/profiles.ts
index 33a795d..a9be616 100644
--- a/src/server/routes/profiles.ts
+++ b/src/server/routes/profiles.ts
@@ -1,9 +1,21 @@
 import { Hono } from "hono";
 import { parseId } from "../lib/params.ts";
 import { getPublicProfile } from "../services/profile.service.ts";
+import { getImageUrl } from "../services/storage.service.ts";
 
 type Env = { Variables: { db?: any; userId?: number } };
 
+async function enrichAvatarUrl<T extends { avatarUrl: string | null }>(
+	record: T,
+): Promise<T & { avatarImageUrl: string | null }> {
+	return {
+		...record,
+		avatarImageUrl: record.avatarUrl
+			? await getImageUrl(record.avatarUrl)
+			: null,
+	};
+}
+
 const app = new Hono<Env>();
 
 // GET /:id/profile — Public profile (no auth required)
@@ -15,7 +27,7 @@ app.get("/:id/profile", async (c) => {
 	const profile = await getPublicProfile(db, id);
 	if (!profile) return c.json({ error: "User not found" }, 404);
 
-	return c.json(profile);
+	return c.json(await enrichAvatarUrl(profile));
 });
 
 export { app as profileRoutes };