File Structure
Complete annotated directory structure for CommonPlace.
Root Level
friends-network/
├── src/ # Application source code
├── supabase/ # Database migrations
├── docs/ # Documentation (Docusaurus)
├── extension/ # Browser extension (Chrome/Edge)
├── public/ # Static assets
├── scripts/ # Dev & CI scripts
├── .claude/ # Claude Code config
├── package.json # npm configuration
├── vite.config.js # Vite build configuration
├── eslint.config.js # ESLint configuration
├── .env.example # Environment variable template
├── .gitignore # Git ignore rules
└── README.md # Project readme
Source (src/)
Entry files: App.jsx (routing), main.jsx (Vite entry), index.css (global styles).
Components — Root Level
These are the top-level component files that live directly in src/components/:
src/components/
├── About.jsx # About/info page
├── Account.jsx # Account settings page
├── AdvancedComposer.jsx # Rich text composer (746 lines)
├── AudienceSelector.jsx # Post audience picker
├── Auth.jsx # Authentication forms
├── Avatar.jsx # Avatar display
├── AvatarLibraryModal.jsx # Avatar library picker
├── CreatePost.jsx # Post creation (515 lines)
├── ErrorBoundary.jsx # React error boundary
├── Feed.jsx # Main feed (855 lines)
├── Header.jsx # Top navigation bar
├── HomeRoom.jsx # User's HomeRoom
├── HomeRoomCustomize.jsx # HomeRoom customization entry
├── IntentStylesSettings.jsx # Intent style configuration
├── MeBookPrompt.jsx # MeBook prompt component
├── ModuleManager.jsx # HomeRoom module management
├── NewAccountBadge.jsx # New account indicator
├── Post.jsx # Post display (792 lines)
├── PostDetail.jsx # Single post view
├── PrivacyCurtain.jsx # Privacy auto-lock overlay
├── Profile.jsx # User profile
├── ProfileRedirect.jsx # Profile routing helper
├── PublicProfile.jsx # Public profile view
└── SavedPage.jsx # Saved posts / shelves (520 lines)
Components — Subdirectories
There are 26 subdirectories under src/components/. Each has an index.js barrel export.
src/components/
├── account/ # Account-level components
│ └── AccountFriends.jsx
├── admin/ # Admin panel components
│ ├── AuditDetailModal.jsx
│ ├── ReportDetailModal.jsx
│ └── UserActionModal.jsx
├── circles/ # Circle management
│ ├── CharterDisplay.jsx
│ ├── CharterEditor.jsx
│ ├── CreateCircleChooser.jsx
│ ├── CreateCircleModal.jsx
│ ├── CreateDynamicCircleModal.jsx
│ └── InviteFriendModal.jsx
├── clips/ # External content clips
│ └── ExternalContentCard.jsx
├── common/ # Shared UI utilities
│ ├── MessageButton.jsx
│ └── UserNameWithMessage.jsx
├── composer/ # Post composition tools
│ ├── AvatarDropdown.jsx
│ ├── BuildOnComposer.jsx
│ ├── ComposerToolbar.jsx
│ ├── ContentNoteInput.jsx
│ ├── DraftPanel.jsx
│ ├── PostConfirmationGate.jsx
│ ├── PostPreview.jsx
│ ├── SharingToggle.jsx
│ └── editors/ # Editor types
│ ├── DrawingEditor.jsx
│ ├── LongformEditor.jsx
│ ├── MagneticPoetryEditor.jsx
│ └── SimpleTextEditor.jsx
├── dev/ # Development tools
│ ├── FeedbackFooter.jsx
│ └── ThemeSwitcher.jsx
├── friends/ # Friend management
│ ├── BlockConfirmDialog.jsx
│ ├── BlockedUsersList.jsx
│ ├── FriendButton.jsx # Unified friend actions
│ ├── FriendSearchInput.jsx
│ ├── FriendsList.jsx
│ ├── ProfileBlockedState.jsx
│ ├── StepBackModal.jsx
│ └── UsernameLookup.jsx
├── HowItWorks/ # Onboarding slideshow
│ ├── ChapterNav.jsx
│ ├── HowItWorksModal.jsx
│ ├── Slide.jsx
│ └── slideData.js
├── invites/ # Invite link management
│ └── InviteLinksManager.jsx
├── mebook/ # MeBook system
│ ├── MeBookCard.jsx
│ ├── MeBookFlow.jsx
│ ├── MeBookViewer.jsx
│ ├── MeBookViewPage.jsx
│ ├── QuestionCard.jsx
│ ├── QuestionRenderer.jsx
│ ├── SectionSummary.jsx
│ ├── inputs/ # MeBook input types
│ │ ├── CardSelect.jsx
│ │ ├── DragArrange.jsx
│ │ ├── FreeText.jsx
│ │ ├── MultiSelect.jsx
│ │ ├── SingleSelect.jsx
│ │ ├── Spectrum.jsx
│ │ ├── Toggle.jsx
│ │ └── iconMap.jsx
│ └── screens/ # MeBook flow screens
│ ├── CompletionScreen.jsx
│ ├── FreeformFlow.jsx
│ ├── MapFlow.jsx
│ ├── PacingScreen.jsx
│ ├── RippleFlow.jsx
│ ├── SurpriseFlow.jsx
│ └── WelcomeScreen.jsx
├── messaging/ # Chat and messaging
│ ├── ConversationPreview.jsx
│ ├── ConversationView.jsx
│ ├── EditMessageModal.jsx
│ ├── MessageContextMenu.jsx
│ ├── MessageReactions.jsx
│ ├── MessageReplyBadge.jsx
│ ├── NewConversationModal.jsx
│ ├── PresenceNoteBadge.jsx
│ ├── PresenceNoteEditor.jsx
│ ├── ReactionPicker.jsx
│ ├── ReplyPreview.jsx
│ ├── ScrollToBottomButton.jsx
│ ├── SteppedAwayModal.jsx
│ └── SteppedAwayPrompt.jsx
├── modules/ # HomeRoom modules
│ ├── AboutModule.jsx
│ ├── CustomModule.jsx
│ ├── FeaturedPostsModule.jsx
│ ├── FriendsModule.jsx
│ ├── GuestbookModule.jsx
│ ├── LinksModule.jsx
│ ├── MeBookModule.jsx
│ ├── PhotosModule.jsx
│ ├── PostsModule.jsx
│ └── SpotifyModule.jsx
├── notifications/ # Notification system
│ ├── BuildOnNotification.jsx
│ ├── NotificationBadge.jsx
│ ├── NotificationItem.jsx
│ ├── NotificationsPanel.jsx
│ └── ShareNotification.jsx
├── post/ # Post display helpers
│ ├── ContentNoteDisplay.jsx
│ └── MagneticPoetryDisplay.jsx
├── post-parts/ # Post sub-components
│ ├── IntentBadge.jsx
│ ├── Lightbox.jsx
│ ├── PostActions.jsx
│ ├── PostContent.jsx
│ ├── PostHeader.jsx
│ ├── PostImages.jsx
│ └── SavePopover.jsx
├── posts/ # Post feature components
│ ├── OriginalPostCard.jsx
│ └── PostSettingsPanel.jsx
├── profile/ # Profile display
│ └── ProfileRelationshipsDisplay.jsx
├── relationships/ # Relationship management
│ ├── AddRelationshipModal.jsx
│ ├── ProfileRelationships.jsx
│ └── RelationshipsPage.jsx
├── report/ # Report system
│ └── ReportModal.jsx
├── room/ # HomeRoom customization
│ ├── ConnectionLines.jsx
│ ├── CustomizeRoom.jsx
│ ├── ModuleBar.jsx
│ ├── ModuleRenderer.jsx
│ ├── ModuleStyleEditor.jsx
│ ├── RoomCanvas.jsx
│ ├── RoomPreview.jsx
│ ├── StyleEditor.jsx
│ ├── ToolbarDropdown.jsx
│ ├── layouts/ # Room layout engines
│ │ ├── ColumnsLayout.jsx
│ │ ├── FreeformLayout.jsx
│ │ ├── MagazineLayout.jsx
│ │ ├── MasonryLayout.jsx
│ │ ├── MindmapLayout.jsx
│ │ └── SingleColumnLayout.jsx
│ └── style-controls/ # Room style editors
│ ├── AnimationPicker.jsx
│ ├── BackgroundEditor.jsx
│ ├── ColorPicker.jsx
│ ├── CustomCSSEditor.jsx
│ └── FontPicker.jsx
├── settings/ # Settings panels
│ ├── DataRetentionSettings.jsx
│ ├── ExtensionSettings.jsx
│ ├── MeBookPreferencesPanel.jsx
│ ├── RelationshipEncryptionSettings.jsx
│ └── RelationshipTypesSettings.jsx
├── sharing/ # Post sharing
│ ├── ShareButton.jsx
│ ├── SharedPostCard.jsx
│ └── ShareToCircleModal.jsx
├── ui/ # Reusable UI primitives
│ ├── BottomSheet.jsx
│ ├── ErrorMessage.jsx
│ ├── Modal.jsx
│ ├── NotificationSkeleton.jsx
│ ├── Toast.jsx
│ └── WelPrompt.jsx
└── voice/ # Voice narration
├── VoiceContext.jsx
├── VoicePlayer.jsx
└── VoiceRecorder.jsx
Hooks
src/hooks/
├── index.js # Barrel exports
├── useAccountTier.js # Account tier checks
├── useAdmin.js # Admin panel operations
├── useAdminUsers.js # Admin user management
├── useAuditLog.js # Audit log access
├── useAutoSave.js # Auto-save for drafts
├── useBlock.js # Block functionality
├── useBuildOn.js # Build-on-post feature
├── useCircleCharter.js # Circle charter CRUD
├── useCircleFeedState.js # Per-circle feed pacing
├── useCircles.js # Circle management
├── useClickOutside.js # Click-outside detection
├── useConversation.js # Messaging conversations
├── useDashboardMetrics.js # Admin dashboard metrics
├── useDataRetention.js # Data retention settings
├── useDrafts.js # Draft management
├── useDrag.js # Drag interactions
├── useEscapeKey.js # Escape key handler
├── useFocusTrap.js # Focus trap for modals
├── useFriends.js # Friends list queries
├── useFriendship.js # Friend relationship CRUD
├── useIdleDetection.js # Idle/away detection
├── useIntentStyles.js # Intent style configuration
├── useInviteLinks.js # Invite link management
├── useIsMobile.js # Mobile viewport detection
├── useLocalStorage.js # localStorage wrapper
├── useMeBookQuestion.js # MeBook question data
├── useMessageReactions.js # Message reaction CRUD
├── useNotifications.js # Notification system
├── usePostPresets.js # Post style presets
├── usePrivacyCurtain.js # Privacy curtain state
├── useRateLimit.js # Rate limiting
├── useRelationshipEdges.js # Relationship graph edges
├── useRelationshipEncryption.js # Relationship encryption
├── useRelationshipTypes.js # Relationship type CRUD
├── useReport.js # Report system
├── useShareNotifications.js # Share notification handling
├── useShareToCircle.js # Share-to-circle action
├── useSharedCircles.js # Shared circle queries
├── useSteppedAway.js # Stepped-away status
├── useSteppedBack.js # Stepped-back status
├── useThemeSwitcher.js # Theme toggle
└── useUserLookup.js # Username/user lookup
Context
src/context/
├── ThemeContext.jsx # Theme (light/dark)
├── MessagingContext.jsx # Messaging state
└── AnnouncerContext.jsx # Accessibility announcer
Pages
src/pages/
├── AdminTest.jsx # Admin test page
├── ClipsQueue.jsx # Clips management
├── FindPage.jsx # Find friends
├── JoinPage.jsx # Join via invite
├── MeBookPage.jsx # MeBook creation
├── Messages.jsx # Messages page
├── UserStorage.jsx # User's saved content
└── admin/ # Admin panel
├── AdminAudit.jsx
├── AdminFeedback.jsx
├── AdminLayout.jsx
├── AdminOverview.jsx
├── AdminReports.jsx
├── AdminSettings.jsx
├── AdminTest.jsx
├── AdminUserDetail.jsx
├── AdminUsers.jsx
└── index.js
Lib
src/lib/
├── supabase.js # Supabase client init
├── encryption.js # Encryption utilities
├── fontVoices.js # Font voice mappings
├── googleFonts.js # Google Fonts integration
├── layoutModes.js # Room layout mode definitions
├── roomStyleUtils.js # Room style utilities
├── sanitize.js # HTML sanitization
├── welPrompts.js # Welcome prompt content
├── constants/ # Constant definitions
│ ├── index.js
│ ├── fonts.js # Font constants
│ └── intents.js # Intent key definitions
├── shortcodes/ # Shortcode system
│ ├── index.js
│ ├── parser.js # Shortcode parser
│ └── components.jsx # Shortcode renderers
└── utils/ # Utility functions
├── index.js
├── clipboard.js # Clipboard helpers
├── date.js # Date formatting
└── string.js # String utilities
Database (supabase/)
supabase/
├── migrations/ # SQL migration files (40+ files)
│ ├── 20260130_homeroom_foundation.sql
│ ├── 20260130_avatar_library.sql
│ ├── 20260130_mebook_system.sql
│ ├── 20260131_circles_schema.sql
│ ├── 20260131_messaging_system.sql
│ ├── 20260201_stepped_away_tracking.sql
│ ├── 20260202_admin_system.sql
│ ├── 20260202_room_layouts.sql
│ ├── 20260205_rate_limiting_fixed.sql
│ ├── 20260205_account_tiers.sql
│ ├── 20260205_block_enhancement.sql
│ ├── 20260205_browser_extension.sql
│ ├── 20260207_admin_report_functions.sql
│ └── ...
└── .temp/ # Local Supabase data
Browser Extension (extension/)
extension/
├── manifest.json # Chrome extension manifest
├── background/
│ └── service-worker.js
├── content/
│ └── content-script.js
├── popup/
│ ├── popup.html
│ ├── popup.js
│ ├── popup.css
│ └── auth.js
├── options/
│ ├── options.html
│ ├── options.js
│ └── options.css
├── lib/
│ ├── api.js
│ ├── auth.js
│ ├── config.js
│ ├── oembed.js
│ ├── offline-queue.js
│ └── utils.js
└── assets/ # Extension icons
Naming Conventions
| Type | Convention | Example |
|---|---|---|
| Component | PascalCase | CreatePost.jsx |
| Hook | camelCase with use | useFriendship.js |
| Utility | camelCase | date.js |
| Migration | date_description | 20260205_rate_limiting.sql |
| CSS Module | PascalCase.module.css | ChapterNav.module.css |
| CSS | PascalCase.css (co-located) | MessageButton.css |
Last updated: 2026-02-07