HomeRoom

Overview

The HomeRoom is each user's personal space on CommonPlace -- a customizable profile page that serves as the destination when anyone clicks on a user's name or avatar. Rather than a static profile card, the HomeRoom is a modular canvas where users can arrange different content modules (About, Photos, Links, Featured Posts, MeBook, Guestbook, Recent Posts, Friends, Spotify, and Custom modules) in their preferred order.

HomeRooms support deep visual customization through a room style system that allows users to set custom fonts, colors, backgrounds, animations, and spacing density. This expressive freedom is intentionally contained to the HomeRoom (Invariant #10) so that the main feed remains calm and consistent while users can fully express their personality in their own space.

Visitors to a HomeRoom can add the owner as a friend, send them a message, view their public relationships, report them, or block them. If a block exists in either direction, the room renders a blocked state instead of the profile content.

Relevant Invariants

• Invariant #10: "Expressive Freedom Is Spatially Contained" -- Deep customization is available in HomeRooms only, not in the feed or other shared spaces.
• Invariant #7: "Human-Scale Social Contexts" -- HomeRooms are personal spaces; visitor interactions are direct and intentional.
• Invariant #14: "Privacy Is Infrastructure" -- Block state checks happen before any profile content is rendered.

User Experience

User Flow

1. Navigate to /room/:username (or click any user's name/avatar in the app).
2. The HomeRoom loads the room owner's profile, settings, styles, and enabled modules.
3. The header shows the owner's avatar, display name, pronouns (if enabled), and tagline.
4. For visitors: Friend button, Message button, and More menu (with Report and Block options) appear.
5. For the owner: A Settings gear button navigates to /room/customize for room customization.
6. Below the header, relationship displays show public connections and (for visitors) a private relationship view.
7. The main canvas renders enabled modules in their configured order, each in a collapsible section.
8. Empty rooms show "Your room is empty! Add some modules" for owners, or "This room is still being set up." for visitors.

Available Modules

Module Type	Component	Default Title	Description
about	AboutModule	About	Bio and personal information
photos	PhotosModule	Photos	Photo gallery
links	LinksModule	Links	External links collection
featured_posts	FeaturedPostsModule	Featured Posts	Pinned/highlighted posts
mebook	MeBookModule	How to Connect With Me	MeBook interaction manual
guestbook	GuestbookModule	Guestbook	Visitor messages
posts	PostsModule	Recent Posts	Recent posts by the owner
friends	FriendsModule	Friends	Friends list
spotify	SpotifyModule	Spotify	Spotify integration
custom	CustomModule	Custom	User-defined module

Technical Implementation

Key Files

File	Purpose
src/components/HomeRoom.jsx	Main HomeRoom page component (466 lines). Loads profile, settings, styles, and modules; handles block states
src/components/HomeRoomCustomize.jsx	Customization page for room owners
src/components/room/RoomCanvas.jsx	Canvas component for module rendering
src/components/room/CustomizeRoom.jsx	Room style customization controls
src/components/room/StyleEditor.jsx	Style editing panel
src/components/room/ModuleRenderer.jsx	Renders individual modules
src/components/room/ModuleBar.jsx	Module management toolbar
src/components/room/layouts/	Layout components: SingleColumn, Columns, Masonry, Freeform, Magazine, Mindmap
src/lib/roomStyleUtils.js	Utility functions for building room style CSS variables
src/lib/googleFonts.js	Google Fonts dynamic loading
src/components/modules/	Individual module components (About, Photos, Links, etc.)

Profile Resolution

The HomeRoom resolves the room owner through a two-step process:

1. Try matching username via case-insensitive query (ilike).
2. If no match, fall back to matching by display_name or id.

Room Styling

Room styles are loaded from the room_styles table and converted to CSS custom properties via buildRoomStyleVars() and background styles via buildRoomBackgroundStyle(). Google Fonts are dynamically loaded when custom fonts are configured.

The room container receives classes for spacing density (spacing-comfortable, etc.) and animation presets (animation-{preset}).

Block State Handling

Block state is checked via useBlockState(roomOwner?.id) before rendering any profile content:

• Current user blocked them: Shows ProfileBlockedState with unblock option.
• They blocked current user: Shows ProfileBlockedState indicating the profile is not available.

Module System

Each module is rendered by the HomeRoomModule component which:

1. Looks up the module component from MODULE_COMPONENTS map.
2. Wraps it in a collapsible section with a custom or default title.
3. Passes module, roomOwner, isOwner, and currentUser props.

Database Tables

Table	Purpose
profiles	User profile data: display_name, username, avatar_url, bio, etc.
home_room_settings	Room configuration: tagline, pronouns, show_pronouns, spacing_density
room_styles	Visual customization: font_family, font_family_headings, colors, background, animation_preset
home_room_modules	Enabled modules with order_index, module_type, custom_title, default_collapsed, is_enabled

Edge Cases

Scenario	Behavior
Username not found	"Room Not Found" error page with back button
Room owner is blocked by visitor	ProfileBlockedState with variant "i-blocked-them" and unblock option
Visitor is blocked by room owner	ProfileBlockedState with variant "they-blocked-me" (no action available)
No modules enabled	"Your room is empty!" (owner) or "This room is still being set up." (visitor)
Module component not found in map	Returns null (silently skipped)
Custom Google Font	Dynamically loaded via loadGoogleFont() when room styles change
Owner visits their own room	Settings gear appears; Friend/Message/Block buttons are hidden

Related

• MeBook -- MeBook module can be displayed in the HomeRoom
• Friends -- Friend button on visitor view; Friends module
• Messaging -- Message button on visitor view
• Posts -- Featured Posts and Recent Posts modules

---

Last updated: 2026-02-07