fix(profile-editor): render legacy file-manager ids via public URL fallback

Author: coodos

platforms/profile-editor/client/src/lib/components/profile/DocumentsSection.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import { updateProfile } from '$lib/stores/profile';
-	import { uploadFile } from '$lib/utils/file-manager';
+	import { resolveAssetUrl, uploadFile } from '$lib/utils/file-manager';
 	import { toast } from 'svelte-sonner';
 	import { Card, CardContent, CardHeader, CardTitle } from '@metastate-foundation/ui/card';
 	import { Button } from '@metastate-foundation/ui/button';
 	import { Progress } from '@metastate-foundation/ui/progress';
 
 	let { ename, cvFileId, videoIntroFileId, editable = false }: { ename: string; cvFileId?: string; videoIntroFileId?: string; editable?: boolean } = $props();
 
+	// New uploads store a public eVault-blob URL; legacy profiles stored a bare
+	// file-manager id. resolveAssetUrl handles both so old CVs/videos still render.
+	let cvUrl = $derived(resolveAssetUrl(cvFileId));
+	let videoUrl = $derived(resolveAssetUrl(videoIntroFileId));
+
 	let uploadingCv = $state(false);
 	let uploadingVideo = $state(false);
 	let cvProgress = $state(0);
@@ -87,20 +92,20 @@
 						<h3 class="text-sm font-medium text-foreground">CV / Resume</h3>
 					</div>
 
-					{#if cvFileId}
+					{#if cvUrl}
 						<div class="mb-2 overflow-hidden rounded border">
 							<object
-								data={cvFileId}
+								data={cvUrl}
 								type="application/pdf"
 								class="h-48 w-full"
 							>
-								<a href={cvFileId} target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-48 text-sm text-muted-foreground hover:underline">
+								<a href={cvUrl} target="_blank" rel="noopener noreferrer" class="flex items-center justify-center h-48 text-sm text-muted-foreground hover:underline">
 									Download CV
 								</a>
 							</object>
 						</div>
 						<div class="flex items-center gap-2">
-							<Button variant="link" size="sm" href={cvFileId} class="h-auto p-0">Download CV</Button>
+							<Button variant="link" size="sm" href={cvUrl} class="h-auto p-0">Download CV</Button>
 							{#if editable}
 								<Button variant="link" size="sm" class="h-auto p-0 text-destructive" onclick={removeCv}>Remove</Button>
 							{/if}
@@ -131,20 +136,20 @@
 						<h3 class="text-sm font-medium text-foreground">Video Introduction</h3>
 					</div>
 
-					{#if videoIntroFileId}
+					{#if videoUrl}
 						<div class="mb-2 overflow-hidden rounded border">
 							<!-- svelte-ignore a11y_media_has_caption -->
 							<video
-								src={videoIntroFileId}
+								src={videoUrl}
 								controls
 								preload="metadata"
 								class="h-48 w-full bg-black"
 							>
-								<a href={videoIntroFileId} target="_blank" rel="noopener noreferrer">Download Video</a>
+								<a href={videoUrl} target="_blank" rel="noopener noreferrer">Download Video</a>
 							</video>
 						</div>
 						<div class="flex items-center gap-2">
-							<Button variant="link" size="sm" href={videoIntroFileId} class="h-auto p-0">Download Video</Button>
+							<Button variant="link" size="sm" href={videoUrl} class="h-auto p-0">Download Video</Button>
 							{#if editable}
 								<Button variant="link" size="sm" class="h-auto p-0 text-destructive" onclick={removeVideo}>Remove</Button>
 							{/if}

platforms/profile-editor/client/src/lib/components/profile/ProfileCard.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
 	import type { ProfileSearchResult } from '$lib/stores/discovery';
+	import { resolveAssetUrl } from '$lib/utils/file-manager';
 	import { Card, CardContent } from '@metastate-foundation/ui/card';
 	import { Avatar, AvatarImage, AvatarFallback } from '@metastate-foundation/ui/avatar';
 	import { Badge } from '@metastate-foundation/ui/badge';
 
 	let { result }: { result: ProfileSearchResult } = $props();
+
+	// New uploads are public eVault-blob URLs; legacy ones are file-manager ids.
+	let avatarUrl = $derived(resolveAssetUrl(result.avatar));
 </script>
 
 <a href="/profile/{result.ename}" class="block">
 	<Card class="h-full transition-shadow hover:shadow-md">
 		<CardContent class="flex flex-col items-center p-5 text-center">
 			<Avatar class="mb-3 h-16 w-16">
-				{#if result.avatar}
-					<AvatarImage src={result.avatar} alt={result.name} />
+				{#if avatarUrl}
+					<AvatarImage src={avatarUrl} alt={result.name} />
 				{/if}
 				<AvatarFallback class="text-xl font-bold">
 					{(result.name || result.ename || '?')[0]?.toUpperCase()}

platforms/profile-editor/client/src/lib/components/profile/ProfileHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ProfileData } from '$lib/stores/profile';
 	import { updateProfile } from '$lib/stores/profile';
-	import { uploadFile } from '$lib/utils/file-manager';
+	import { resolveAssetUrl, uploadFile } from '$lib/utils/file-manager';
 	import { toast } from 'svelte-sonner';
 	import { Card, CardContent } from '@metastate-foundation/ui/card';
 	import { Button } from '@metastate-foundation/ui/button';
@@ -26,9 +26,10 @@
 	let bannerBroken = $state(false);
 	let avatarBroken = $state(false);
 
-	// avatar/banner are public CDN URLs (eVault blob) — render directly.
-	let avatarSrc = $derived(avatarPreview ?? profile.professional.avatar ?? null);
-	let bannerSrc = $derived(bannerPreview ?? profile.professional.banner ?? null);
+	// New uploads are public eVault-blob URLs; legacy profiles stored a bare
+	// file-manager id. resolveAssetUrl renders either.
+	let avatarSrc = $derived(avatarPreview ?? resolveAssetUrl(profile.professional.avatar));
+	let bannerSrc = $derived(bannerPreview ?? resolveAssetUrl(profile.professional.banner));
 
 	async function handleAvatarUpload(e: Event) {
 		const input = e.target as HTMLInputElement;

platforms/profile-editor/client/src/lib/utils/file-manager.ts

@@ -1,5 +1,26 @@
+import { env as pubEnv } from '$env/dynamic/public';
 import { apiClient } from './axios';
 
+const FILE_MANAGER_BASE = (
+	pubEnv.PUBLIC_FILE_MANAGER_BASE_URL || 'http://localhost:3005'
+).replace(/\/$/, '');
+
+export function isHttpUrl(value?: string | null): boolean {
+	return !!value && /^(https?:)?\/\//i.test(value);
+}
+
+/**
+ * Resolve a stored profile asset (avatar/banner/cv/video) to a renderable URL.
+ * New uploads store a public eVault-blob URL and are used as-is. Legacy
+ * profiles stored a bare file-manager id — fall back to its public
+ * file-manager URL so the asset still renders instead of breaking.
+ */
+export function resolveAssetUrl(value?: string | null): string | null {
+	if (!value) return null;
+	if (isHttpUrl(value)) return value;
+	return `${FILE_MANAGER_BASE}/api/public/files/${encodeURIComponent(value)}`;
+}
+
 export async function uploadFile(
 	file: File,
 	onProgress?: (progress: number) => void