HomeRoom
Location: src/components/HomeRoom.jsx
Overview
HomeRoom is the personal space for each user, accessible at /room/:username. It replaces the traditional profile page with a modular, customizable room. The room owner can add, remove, and reorder modules (about, photos, links, featured posts, MeBook, guestbook, posts, friends, Spotify, custom), and apply room-level styling (colors, fonts, backgrounds).
Visitors who are blocked see a ProfileBlockedState. The owner sees editing controls. Non-owners see a read-only view with friend, message, and report actions.
Relevant Invariants
- Invariant #10: "Expressive Freedom Is Spatially Contained" -- Deep customization is confined to the user own HomeRoom.
- Invariant #7: "Human-Scale Social Contexts" -- The friends module and guestbook keep interactions personal.
- Invariant #14: "Privacy Is Infrastructure" -- Block state is checked before any content renders.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
session | object | Yes | -- | Supabase auth session |
URL Parameters
| Parameter | Description |
|---|---|
:username | The username of the room owner, resolved from the profiles table |
Module Types
| Module | Component | Description |
|---|---|---|
about | AboutModule | Bio and personal info |
photos | PhotosModule | Photo gallery |
links | LinksModule | External links collection |
featured_posts | FeaturedPostsModule | Pinned/featured posts |
mebook | MeBookModule | Personal Q&A / journal |
guestbook | GuestbookModule | Visitor messages |
posts | PostsModule | User recent posts |
friends | FriendsModule | Friends list display |
spotify | SpotifyModule | Spotify embed |
custom | CustomModule | User-defined custom content |
Token-Based Styling
When the room owner has a homeroom_style saved on their profile, HomeRoom applies token-based visual styling via useStyleFor(roomOwner.homeroom_style). This includes:
- Container: Background color, pattern SVG, font family
- Avatar: Custom shape (hexagon, diamond, star, etc.) via
StyledAvatar - Module cards: Per-module style via
useModuleStylewith inheritance, or room-level fallback - Headings: Weight, transform, letter-spacing, glow, ornament prefix
- Dividers: Token-based divider style between header and content via
StyledDivider
Rooms without homeroom_style render with the existing CSS-variable system (from room_styles table) unchanged.
Per-Module Styling
Each module can have its own style_tokens and inherit_style (stored in home_room_modules). The HomeRoomModule component uses useModuleStyle to compute the effective merged tokens, then useStyleFor to derive visual values:
- Module has effective style (own tokens + inheritance merge) — renders with per-module computed style
- No module style but room has tokenStyle — falls back to room-level computed style
- Neither — renders with default CSS classes
Module cards use the clip-path border wrapper technique for non-rounded corners, with glass/backdrop-blur support when tokens.glass is enabled.
Owner Controls
The room owner sees two buttons:
- Paintbrush icon — navigates to
/room/style(token-based customizer) - Settings icon — navigates to
/room/customize(layout, modules, visibility)
Styled Components Used
| Component | Location | Purpose |
|---|---|---|
StyledAvatar | src/components/homeroom-styled/StyledAvatar.jsx | Avatar with clip-path shape, border, glow |
StyledDivider | src/components/homeroom-styled/StyledDivider.jsx | Divider with gradient, glow, ornament, dashed styles |
Related Hooks
| Hook | Purpose |
|---|---|
useModuleStyle | Per-module style tokens with Homeroom inheritance |
useStyleFor | Computes visual values from tokens (via StyleContext) |
Last updated: 2026-02-08