Audience display

[TheCommandCat]

✨ New Audience Display & Real-time Updates ✨

This PR introduces a dedicated audience display interface with real-time updates and new functionalities for election managers:

• Audience Display:

  • 📺 Added a new "Audience Display" role and a dedicated page to show election
    progress to the audience.
  • 🔄 Implemented real-time updates for member presence, voting status, and
    active rounds.
  • 📊 Allows switching between "Round," "Presence," and "Voting" views for the
    audience.

• Member Presence Management:

  • 👥 Enhanced member presence tracking with a new "Audience Display" option for managers.
  • 🚀 Presence updates are now handled via WebSocket for immediate propagation.

• Code Enhancements:

  • 🧹 Refactored mm-members API for better validation and error handling.
  • 🛠️ Introduced new useKeyboardShortcut and useWindowSize hooks for improved UX.
  • 🎨 Updated UI components (MemberCard, MemberDisplay, WaitingState) for better
    visuals and audience display compatibility.

This makes the election process more transparent and engaging for the audience!

[Copilot]

Pull Request Overview

This PR adds a new audience-facing display with real-time WebSocket updates and associated controls, plus related type, schema, and API enhancements.

• Introduces an “Audience Display” role, pages, and components for live views of rounds, presence, and voting
• Implements WebSocket events and handlers for pushing presence and audience-display changes
• Adds new hooks (useWindowSize, useKeyboardShortcut) and refactors APIs/UI for better validation, styling, and error handling

Reviewed Changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
libs/types/src/lib/websocket.ts	Define new WS events for presence and audience display
libs/types/src/lib/schemas/election-state.ts	Simplify ElectionState and add audienceDisplay field
libs/types/src/lib/roles.ts	Include audience-display in allowed RoleTypes
libs/types/src/lib/constants.ts	List valid AudienceDisplayScreenTypes
apps/frontend/pages/mtes/election-manager.tsx	Hook up AudienceControl UI and presence WS handling
apps/frontend/pages/mtes/audience-display.tsx	Implement audience-facing page with live updates
apps/frontend/localization/roles.ts	Add Hebrew label for audience-display role
apps/frontend/localization/displays.ts	Localize audience display view names
apps/frontend/hooks/use-window-size.ts	New hook to get viewport size for scaling
apps/frontend/hooks/use-keyboard-shortcut.ts	New hook to register keyboard shortcuts
apps/frontend/components/mtes/waiting-state.tsx	Restyle waiting placeholder as a Paper
apps/frontend/components/mtes/readonly-voting-stands-grid.tsx	New read-only grid for voting stands status
apps/frontend/components/mtes/readonly-stand-status-card.tsx	New card for stand status with hover styles
apps/frontend/components/mtes/members-grid.tsx	Add audianceDisplay prop, marquee scroll for overflow
apps/frontend/components/mtes/members-column.tsx	Add simple column layout for member cards
apps/frontend/components/mtes/member-presence.tsx	Remove Tooltip wrapper around presence buttons
apps/frontend/components/mtes/member-display.tsx	Update styling, use Paper variant, reflect isPresent state
apps/frontend/components/mtes/member-card.tsx	Add audianceDisplay prop, conditionally hide signature button
apps/frontend/components/mtes/city-grouped-members-grid.tsx	Scrollable city-grouped member grid with marquee effect
apps/frontend/components/mtes/audience/audience-voting-display.tsx	Layout for audience voting view
apps/frontend/components/mtes/audience/audience-round-display.tsx	Layout for audience round info
apps/frontend/components/mtes/audience/audience-presence.tsx	Layout for audience presence view
apps/frontend/components/mtes/audience/audience-display-container.tsx	Full-screen scaling container for audience displays
apps/frontend/components/mtes/audience/audience-control.tsx	Control panel to switch views, emit WS events
apps/backend/src/websocket/index.ts	Register WS handlers for presence and audience control
apps/backend/src/websocket/handlers.ts	Implement handlers for presence and audience display updates
apps/backend/src/routers/api/events/mm-members.ts	Improve validation and error handling for MM-members API
apps/backend/src/routers/api/admin/events/index.ts	Initialize audienceDisplay in new event state
apps/backend/src/lib/schedule/voting-stands-users.ts	Include audience-display user in scheduled stand assignments

Comments suppressed due to low confidence (3)

apps/frontend/components/mtes/members-grid.tsx:16

• The prop name "audianceDisplay" is misspelled. Rename it to "audienceDisplay" to match the domain concept and maintain consistency.

  audianceDisplay?: boolean; // Optional prop for audience display

apps/frontend/components/mtes/member-card.tsx:27

• Fix the spelling of the prop: change "audianceDisplay" to "audienceDisplay" so it aligns with other components and typings.

  audianceDisplay?: boolean;

apps/backend/src/websocket/index.ts:19

• The handler calls handleUpdateMemberPresence(namespace, ...) but namespace is not defined. You likely need to pass socket.nsp or another valid namespace reference.

  socket.on('updateMemberPresence', (...args) => {