Component Refactoring & Organization Notes

Recent Changes (January 7, 2026)

Dashboard UI extracted

• Dashboard UI primitives moved to src/components/dashboard/Primitives.jsx (shared DashboardButton, DashboardCard, DashboardBadge).
• Offer promo components moved to src/components/dashboard/OfferCards.jsx (HeroOfferCard, OfferPill).
• View components moved to src/components/dashboard/ (HomeView, VenueView, ActiveLanternView, ScheduleConfirmationView, DashboardNavigation).
• Dashboard now imports these instead of inlining, reducing file size and clarifying ownership.
• Screen wrappers added in src/screens/dashboard/ (PlacesScreen.jsx, VenueDetailScreen.jsx, ActiveLanternScreen.jsx, LanternSuccessScreen.jsx) so Dashboard renders screens instead of inline views.

Recent Changes (January 3, 2026)

Components Extracted from Dashboard

The following components were previously embedded in Dashboard.jsx and have been extracted into standalone, reusable components:

1. LightLanternForm → src/components/LightLanternForm.jsx
   • Previously: 70 lines embedded in Dashboard
   • Now: Standalone component, reusable for immediate and scheduled lighting
   • Storybook: 4 stories showcasing different configurations

New Components Created

2. VenuePicker → src/components/VenuePicker.jsx

   • Purpose: Global venue selection interface
   • Features: List/map views, search, category filtering
   • Use cases: Light lantern, schedule light, future features

3. ScheduleLightForm → src/components/ScheduleLightForm.jsx

   • Purpose: Multi-step wizard for scheduling future lights
   • Steps: Venue → Date/Time → Interest/Mood
   • Integrates with: VenuePicker, LightLanternForm

Future Refactoring Considerations

Potential Component Extractions

Based on the conversation about "potentially moving places and lantern lights into their own components or screens," here are recommendations:

1. Places/Venues Screen

Current State:

• Venue list and map are rendered via PlacesScreen.jsx (wraps HomeView)
• Venue detail lives in VenueDetailScreen.jsx (wraps VenueView)

Remaining Recommendation:

• Extract venue map view → src/components/VenuesMap.jsx
• Extract venue list → src/components/VenuesList.jsx
• Keep VenueView but consider renaming to VenueDetail.jsx for clarity

2. Active Lantern Screen

Current State:

• ActiveLanternView component inside Dashboard.jsx (lines ~632-695)

Recommendation:

• Extract → src/screens/ActiveLanternScreen.jsx or src/components/ActiveLantern.jsx

Benefits:

• Standalone testing
• Easier to add features (edit lantern, view waves, etc.)
• Could become a full "My Lantern" screen with tabs

Current File Structure (as of January 7, 2026)

Note: Screens have been migrated to src/screens/{domain}/. See SCREENS_ORGANIZATION.md.

src/
  components/          # Reusable UI components
    Button.jsx
    Card.jsx
    Badge.jsx
    LanternBeacon.jsx
    LanternHub.jsx
    LightLanternForm.jsx
    VenuePicker.jsx
    ScheduleLightForm.jsx
    WaveManager.jsx
    Chat.jsx
    VenuesMap.jsx      # FUTURE - extracted map view
    VenuesList.jsx     # FUTURE - extracted list view
    VenueCard.jsx      # FUTURE - individual venue card
    ActiveLantern.jsx  # FUTURE - active lantern view
    
  screens/             # Full-screen views (routes)
    auth/
      SignupFlow.jsx
    dashboard/
      Dashboard.jsx    # Orchestrates dashboard flows
      PlacesScreen.jsx # Wraps HomeView
      VenueDetailScreen.jsx
      ActiveLanternScreen.jsx
      LanternSuccessScreen.jsx
    merchant/
      MerchantDashboard.jsx
      OfferForm.jsx
    profile/
      ProfileSettings.jsx
      CreateNewProfile.jsx

Benefits of Further Refactoring

Current State (Partially Refactored)

✅ Forms are reusable ✅ Picker is standalone ✅ Hub triggers flows cleanly ⚠️ Dashboard.jsx still ~1100 lines ⚠️ HomeView, VenueView, ActiveLanternView embedded

After Full Refactoring

• Dashboard.jsx → ~400 lines (orchestration only)
• Each screen → 100-300 lines (focused, testable)
• Components → 50-200 lines (highly reusable)
• Storybook coverage for all screens
• Easier onboarding for new developers
• Simpler unit testing

Recommended Next Steps

Phase 1: Extract Screens (High Impact, Low Risk)

1. Extract HomeView → PlacesScreen.jsx
2. Extract VenueView → VenueDetailScreen.jsx
3. Extract ActiveLanternView → ActiveLanternScreen.jsx
4. Update Dashboard to import and render screens
5. Create Storybook stories for each screen

Phase 2: Break Down Places Screen (Medium Impact)

1. Extract map view → VenuesMap.jsx
2. Extract list view → VenuesList.jsx
3. Extract individual venue card → VenueCard.jsx
4. PlacesScreen uses these components

Phase 3: Advanced Organization (Lower Priority)

1. Create src/features/ directory
2. Group related components by feature:
   • features/venues/ (map, list, detail, picker)
   • features/lantern/ (hub, form, active view)
   • features/social/ (waves, chat, beacon)
3. Update imports across codebase

Trade-offs to Consider

✅ Pros of Refactoring

• Better code organization
• Easier testing and maintenance
• Smaller, focused files
• Better for team collaboration
• Clearer dependencies

⚠️ Cons to Watch For

• Initial time investment
• Need to update all imports
• Risk of breaking existing flows
• More files to navigate

When to Refactor

• ✅ Do it now if planning to add more features
• ✅ Do it if team is growing
• ⚠️ Wait if launching pilot soon (defer until after)
• ⚠️ Wait if no immediate pain points

Current Status

As of this refactoring session:

• ✅ Forms are extracted and reusable
• ✅ Multi-step flows work smoothly
• ✅ Storybook coverage good for new components
• ⚠️ Dashboard still contains screen views
• ⚠️ Could benefit from screen/component split

Recommendation: The current state is production-ready for the pilot. Further refactoring can be done iteratively as new features are added.

---

Related Documentation

• Component Standards
• Dashboard Component
• Global Lantern Flows