Add profile_photos table with client-side resize #74
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Resolves #61
Profile photos for Nametags were being uploaded at full resolution and rendered at 120×120px — a huge bandwidth waste. This PR adds a
profile_photostable and client-side image processing to serve properly sized images.How it works
Zero-cost client-side resizing
Photos are resized in the browser using the Canvas API before upload. No server-side image processing needed. Three sizes are produced:
thumbmediumoriginalAll variants are converted to WebP for optimal file size.
Hash-based deduplication
Each original image is SHA-256 hashed before upload. If the same image has been uploaded before, the existing versions are reused — no duplicate storage.
Storage layout
Inside the
avatarsbucket:Backward compatible
Existing
profile_photoURLs continue to work. The Nametag component uses the optimized thumb URL when aphoto_idhash is available, falling back to the legacy URL otherwise.Changes
New files
supabase/migrations/20260204000000_create_profile_photos.sql— Createsprofile_photostable + addsphoto_idFK toprofileslib/imageUtils.ts— Client-side image hashing and resizing utilitieslib/photoService.ts— Upload service with dedup + multi-size storage + URL helpersModified files
app/components/Nametag.tsx— Uses optimized thumb URL when hash availableapp/setup/page.tsx— Uses new upload flow, storesphoto_idapp/whois/ProfileDisplay.tsx— Uses new upload flow, storesphoto_idapp/whois/ProfileList.tsx— Loadsphoto_id, passes to Nametagapp/whois/page.tsx— Loadsphoto_idfrom profile dataMigration notes
After merging, run the Supabase migration to create the
profile_photostable and add thephoto_idcolumn toprofiles. Existing profiles will havephoto_id = NULLand continue using their legacyprofile_photoURLs.