feat(room): implement room layout with organizer/guest role switching via cookies

[Copilot]

This PR implements a complete room layout component system that provides role-based UI switching between Organizer and Guest views using cookie-based role detection, as specified in the requirements.

Key Features Implemented

Role Detection & Switching

• Cookie-based persistence: First visitor to a room becomes the organizer, subsequent visitors are guests
• Automatic role assignment: No manual role selection needed - seamless experience
• Role-specific UI: Organizer gets full controls, guests get read-only view with helpful messaging

Responsive Layout Design

• Desktop Layout: 3-column grid (1:2:1 ratio) - Participants List | Wheel Section | Timer Panel
• Mobile Layout: Single-column stack - Title → Timer → Wheel → Participants → Instructions
• Responsive breakpoints: Uses Tailwind's lg: classes for proper desktop/mobile switching

Component Architecture

1. RoomTitle: Shows room name, ID, role badge, and copy URL button (organizer only)
2. ParticipantsList: Add/disable participants, status management, role indicators
3. Wheel: Animated spinning wheel with framer-motion, time picker modal, random selection
4. TimerPanel: Countdown timer with color coding (green → yellow → red), control buttons
5. Instructions: Collapsible, role-specific instructions and pro tips
6. RoomLayout: Main orchestrator component handling state and coordination

Wheel Functionality

• Smooth animation: 3-second spin with realistic deceleration using framer-motion
• Time picker modal: Set presentation duration (1-60 minutes, default 10)
• Random selection: Fair selection from eligible participants (queued status)
• Visual feedback: "Spinning..." overlay, disabled controls during animation

Timer & Session Management

• Real-time countdown: MM:SS format with second-level precision
• Color-coded warnings: Green (normal), Yellow (last 2 min), Red (last 30 sec)
• Organizer controls: Mark as finished, stop timer early
• Status transitions: Queued → Active → Finished lifecycle

UI/UX Polish

• Loading states: Spinners and disabled states during operations
• Error handling: User-friendly error messages with dismiss functionality
• Accessibility: Semantic HTML, ARIA labels, keyboard navigation
• Dark mode support: Full Tailwind dark mode compatibility

Technical Implementation

• Pure Tailwind CSS: No additional UI libraries, following design system
• TypeScript: Full type safety with existing domain entities integration
• Framer Motion: Smooth wheel animations and micro-interactions
• Domain Integration: Uses existing Participant and Room entities with proper business logic
• Socket.IO Ready: Architecture prepared for real-time integration (currently using mock data)

Screenshots

Home Page:

Guest View (Read-only):

Organizer View (Full Controls):

Active Presentation State:

Quality Assurance

• ✅ All existing tests pass (193/193)
• ✅ ESLint clean, Prettier formatted
• ✅ TypeScript strict mode compliance
• ✅ Responsive design tested on mobile and desktop
• ✅ Production build optimized and verified

The implementation provides a solid foundation for the MVP while maintaining clean architecture and excellent user experience across both organizer and guest roles.

Fixes #14.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Copilot]

Pull Request Overview

This PR implements a comprehensive room layout system with role-based UI switching between organizer and guest views using cookie-based role detection. The implementation provides a complete room experience with participants management, spinning wheel functionality, timer controls, and responsive design.

• Cookie-based role detection where first visitor becomes organizer, subsequent users are guests
• Complete responsive layout with desktop 3-column grid and mobile single-column stack
• Interactive spinning wheel with time picker modal and smooth animations using framer-motion

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/app/room/utils/role-detection.ts	Cookie-based role detection service for organizer/guest assignment
src/app/room/components/Wheel.tsx	Animated spinning wheel component with participant selection
src/app/room/components/TimerPanel.tsx	Real-time countdown timer with color-coded warnings
src/app/room/components/RoomTitle.tsx	Room header with role display and URL sharing functionality
src/app/room/components/RoomLayout.tsx	Main layout orchestrator handling state and responsive grid
src/app/room/components/ParticipantsList.tsx	Participant management with add/enable/disable controls
src/app/room/components/Instructions.tsx	Collapsible role-specific instructions panel
src/app/room/[id]/page.tsx	Room page implementation using the layout component
package.json	Added framer-motion dependency for animations

Comments suppressed due to low confidence (1)

src/app/room/utils/role-detection.ts:48

• The role detection logic is inverted. On first visit, isOrganizer() returns false because no cookie exists, but then setAsOrganizer() is called. This means the first visitor will always be treated as a guest initially, which contradicts the intended behavior of making the first visitor the organizer.

   */