ModuleManager

Location: src/components/ModuleManager.jsx

Overview

ModuleManager is the dedicated management page for Homeroom modules at /room/modules. Users can enable/disable modules, reorder them, set per-module visibility, and customize per-module styles with inheritance from the Homeroom style.

Props

Prop	Type	Required	Description
session	object	Yes	Supabase auth session

Sub-components

ModuleItem

Per-module row extracted as a child component so each module can call useModuleStyle independently.

Props:

Prop	Type	Description
module	object	Module record from home_room_modules
info	object	Module definition (icon, name, description)
index	number	Position in the list
totalCount	number	Total modules for disable-move logic
onMove	function	Reorder callback
onUpdate	function	Update module fields
onStyleClick	function	Opens the ModuleCustomizer

Each ModuleItem provides:

• Reorder buttons (up/down)
• Paintbrush style button (enabled modules only)
• Inheritance mode selector (Match Room, Room Colors, Room Shapes, Custom)
• Visibility selector (Same as room, Public, Friends only)
• Enable/disable toggle

ModuleStyleEditor

Full-screen overlay wrapping ModuleCustomizer from the customizer sub-app.

Props:

Prop	Type	Description
module	object	Module being styled
homeroomStyle	object | null	Parent Homeroom tokens for inheritance
onClose	function	Cancel callback
onSaved	function	Called with updated module data after save

Key Behaviors

• Style Inheritance: Each module has an inherit_style mode (full, colors, shapes, none) that controls how its tokens merge with the parent Homeroom style via useModuleStyle
• Full-screen Customizer: Clicking the paintbrush button opens ModuleCustomizer as a full-screen overlay, replacing the module list
• Optimistic Updates: Module updates (visibility, enable state) use optimistic UI with database revert on error
• Style Persistence: Saves style_tokens and inherit_style to home_room_modules via useModuleStyle.saveStyle()

Database

Reads from and writes to home_room_modules table. Requires style_tokens (JSONB) and inherit_style (TEXT) columns.

Related

• HomeRoom -- Renders the modules with applied styles
• useModuleStyle -- Style token management with inheritance
• useHomeroomStyle -- Parent Homeroom style
• ModuleCustomizer (src/components/customizer/src/components/ModuleCustomizer.jsx) -- Token editor UI

---

Last updated: 2026-02-08