Skip to main content

Profile

Location: src/components/Profile.jsx

Overview​

Profile displays a user's public profile including their avatar, display name, bio, friends list, and posts. For the authenticated user's own profile, it provides editing capabilities (display name, bio) and avatar upload. For other users' profiles, it shows friend request, message, report, and block actions.

The component handles blocked states by rendering a ProfileBlockedState screen instead of the full profile when either party has blocked the other.

Relevant Invariants​

  • Invariant #5: "Repair Over Punishment" -- Blocking shows a neutral state, not a punitive one. Unblock is always available.
  • Invariant #7: "Human-Scale Social Contexts" -- Friends list is capped at 12 displayed, with a "View all" link.
  • Invariant #14: "Privacy Is Infrastructure" -- Block states are checked before any profile content renders.

Props​

PropTypeRequiredDefaultDescription
sessionobjectYes--Supabase auth session with user.id

URL Parameters​

ParamDescription
userIdThe ID of the profile to display (from route :userId)

Key Behaviors​

  • Own Profile Editing: When viewing your own profile, an "Edit Profile" button reveals a form for display name and bio.
  • Avatar Upload: Own profile shows a camera overlay on the avatar. Supports JPEG, PNG, and WebP images up to 2MB. Files are uploaded to Supabase Storage under post-images/avatars/.
  • Friends Grid: Displays up to 12 friends with avatars (using intent-specific avatars when available) and message buttons. Links to friend profiles use /room/:username routing.
  • Pending Requests Count: Shown on own profile when there are pending friend requests.
  • Block/Report: Other users' profiles show a "More" menu with Report and Block options. Blocking navigates back to feed.
  • Blocked States: If you blocked someone or they blocked you, the profile renders a dedicated ProfileBlockedState component instead of the full profile.
  • Author Intent Styles: Fetches the profile user's intent styles to apply visual customization to their posts.
  • Post Display: All posts by the user are shown in a masonry grid using the Post component.

Usage​

import Profile from '@/components/Profile';

// Rendered via React Router
<Route path="/user/:userId" element={<Profile session={session} />} />
  • Avatar -- Used for profile and friend avatars
  • Post -- Renders the user's posts
  • HomeRoom -- Alternative personal space view at /room/:username

Last updated: 2026-02-07