Dev: notification types, update UX, Contact/Event fixes, premium glassmorphism UI

[jerryagenyi]

Summary

• Notification types — Duplicate stream name/source shows a simple modal (no troubleshooting link); real failures use existing error handling with diagnosis link. FFmpegStreamsManager: isDuplicateError(), showDuplicateModal(); scoped modal with data-duplicate-* attributes.
• Update notification UX — Header update icon (system_update); auto-check on load; badge when update available; click opens modal or runs check. Single button header-update-bell-btn; release URL validated (GitHub only) before opening.
• Event Details & Contact — ContactManager fetches latest /api/contact-details before save so event fields are not overwritten; EventManager preserves contact fields when saving event. Collapsible removed; sections always expanded. Inline validation (email, phone, WhatsApp) on input/blur.
• Premium glassmorphism UI (v2) — Glass card system, gradient background (body-bg), glass buttons (primary/success/danger/secondary), live badge with dual-layer pulse, glass form inputs, glass header (header-glass), icon buttons. Applied to index.html, streams.html, HeaderComponent, FFmpegStreamsManager, IcecastManager, EventManager, ContactManager. Streams page: header-glass and btn-glass primary/secondary defined. Accessibility: prefers-reduced-motion, focus-visible, 44px touch targets.
• TODO.md — Wording fixes; notification types, update UX, Event/Contact items marked done.

Implements docs/UI-UX-RECOMMENDATIONS-v2.md Phase 1–2.

Summary by CodeRabbit

Release Notes

• New Features

  • Duplicate stream detection now triggers a dedicated error modal for improved clarity
  • Event details integrated with contact information management
  • Update notifications now display in the header with automatic checking on app load

• UI/UX Improvements

  • Redesigned dashboard with a premium glassmorphism aesthetic across all components
  • Enhanced form validation with real-time error feedback on contact fields
  • Improved visual feedback for update availability with badge indicators and enhanced modals

[coderabbitai]

Warning

Rate limit exceeded

@jerryagenyi has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 29 minutes and 55 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

This pull request introduces a comprehensive glassmorphism design system across the UI, adds validation methods to contact and event forms, implements duplicate error detection with dedicated modal displays, and removes collapse-expand functionality from contact and event detail cards. Key additions include CSS-based glass components, form field validation helpers, and refined error handling for stream operations.

Changes

Cohort / File(s)	Summary
Design System & Documentation TODO.md, docs/UI-UX-RECOMMENDATIONS-v2.md	Task status updates for notification types (completed), WhatsApp contact (completed with "Not working" note), and update notification UX. New comprehensive glassmorphism design guide documenting glass cards, gradients, buttons, badges, form inputs, accessibility, and implementation priorities.
Global Glassmorphism Styling public/index.html, public/streams.html	Introduced extensive CSS custom properties and component classes for glassmorphism aesthetic: glass-card variants, gradient backgrounds, premium glass buttons, live badges, form inputs, and animation curves. Updated static templates and range inputs to use glass-themed styling; enhanced accessibility with focus-visible outlines and reduced-motion support. Replaced legacy dark/solid backgrounds with glass equivalents across UI sections.
Error Handling & Stream Management public/components/FFmpegStreamsManager.js	Added methods isDuplicateError(message) and showDuplicateModal(title, message) to detect and display duplicate-name/duplicate-source errors in modals without troubleshooting links. Updated error paths in startStream, restartStream, and startAllStreams to conditionally show duplicate modals versus standard error notifications based on error type.
Form Validation & Contact Management public/components/ContactManager.js	Added per-field validation methods: validateEmailField(value), validatePhoneField(value), validateWhatsAppField(value), and setFieldValidationState(inputId, errorId, message). Introduced event-related fields (eventTitle, eventSubtitle, eventImage, aboutDescription) to contactDetails. Enhanced save flow to fetch latest server event fields before merging with local inputs. Removed collapse toggle UI; updated rendering to glass-card styling and wired real-time validation with error display.
Event Details Management public/components/EventManager.js	Added contact-related fields to eventDetails state (email, phone, whatsapp, showEmail, showPhone, showWhatsapp) and integrated them into loadEventDetails and saveEventSettings payload. Removed collapse-related state and toggle UI; simplified render to always-expanded "Edit Event Details" section with glass-card styling.
Header & Update Management public/components/HeaderComponent.js	Refactored updateBellIcon() to display system_update icon with conditional green badge when update is available. Added initialization call to synchronize bell state on load. Updated update modal and logout confirmation to use glass-card styling with btn-glass button variants. Enhanced loading state to show spinning icon during manual update checks. Restricted "View Release" button action to GitHub URLs.
Server Component Styling public/components/IcecastManager.js	Replaced card container from complex Tailwind classes to simplified glass-card p-6 wrapper. Updated Server Status panel from dark bordered block to glass-card-inset variant.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Dev: notification types, update UX, contact/event fixes, single scrollbar, UX v2 doc #9: Modifies the same core components (FFmpegStreamsManager, HeaderComponent, ContactManager, EventManager) with overlapping changes to error handling, header bell state, and field validation.
• Release: Play after edit, WhatsApp, stream labels S1/S2/S3, sortable streams #8: Overlaps on ContactManager WhatsApp validation and FFmpegStreamsManager stream-related error handling methods.
• Release: dev → main (Start All, unique names, LAN IP, AGENTS removal) #6: Shares modifications to FFmpegStreamsManager error/duplicate handling and HeaderComponent update-bell UI behaviour.

Poem

🐰 With glass so smooth and validation tight,
Our forms now sparkle, catching light!
Duplicates trapped in modals true,
A glassmorphic dashboard shining new. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the five primary themes of the changeset: notification type handling, update UX improvements, Contact/Event component fixes, and the new premium glassmorphism design system applied throughout the codebase.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dev

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}