Centralize discovery badges: add DiscoveryBadgeState and switch badges to data-badge attributes

[erikraft]

Motivation

• Replace scattered DOM manipulation for discovery badges with a single stateful component to avoid duplication and race conditions across header/footer/chat UIs.
• Make discovery badges declarative via data-badge attributes so multiple badge instances (header/footer/chat) render consistently from one source of truth.
• Improve robustness by debouncing and synchronizing events from peers, room-secrets, WebSocket and public-room flows.

Description

• Added a new DiscoveryBadgeState class in public/scripts/ui-main.js that maintains badge state (lan, ip, paired, publicRoom/publicRoomId), hydrates from storage, queues and deduplicates events, handles sync handshakes and graceful hide animations, and renders all badges by data-badge attribute.
• Updated public/index.html to add data-badge attributes (lan, ip, paired, public) to the discovery badge elements and adjusted some initial hidden/text content so the new renderer controls visibility and text.
• Reworked code to emit and consume events instead of directly toggling badge DOM in several places: Events.fire('room-secrets') / room-secrets-deleted, discovery-public-room-id, evaluate-footer-badges, join-public-room, and WebSocket/peers events are enqueued by DiscoveryBadgeState.
• Replaced previous direct DOM queries/selectors for paired/public badges with data-badge selectors across public/scripts/main.js, public/scripts/ui.js and public/scripts/ui-main.js (Chat UI and dialogs now bind click handlers to all badge instances via [data-badge=...]).
• Removed duplicate badge-show/hide logic from dialogs and main initializer; discovery rendering and hide-grace timing are implemented centrally in DiscoveryBadgeState (including a public badge text update showing room id).

Testing

• No automated tests were added or executed as part of this change.

---

Codex Task

Summary by CodeRabbit

• Refactor
  • Restructured badge management system to use event-driven architecture instead of direct DOM manipulation, improving reliability and state synchronization across discovery badges (LAN, IP, paired devices, public room).
  • Implemented centralized badge state management with automatic recovery and sync handshake on reconnection, reducing synchronization inconsistencies and badge visibility glitches.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[netlify]

✅ Deploy Preview for discordactivitydrop canceled.

Name	Link
🔨 Latest commit	9f39e4e
🔍 Latest deploy log	https://app.netlify.com/projects/discordactivitydrop/deploys/69e794437fad9d000836c88d

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

The changes convert badge visibility management from direct DOM manipulation to an event-driven architecture. A new DiscoveryBadgeState class centralizes badge state, implements event pipelines with debouncing and deduplication, synchronizes state via websockets with recovery mechanisms, and uses attribute-based selectors instead of class-based ones.

Changes

Cohort / File(s)	Summary
Badge Attribute Markup public/index.html	Added data-badge attributes (lan, ip, paired, public) to discovery/footer badge elements for attribute-based selection and state tracking.
Event-Driven Control Flow public/scripts/main.js	Removed direct DOM lookups for footer badges; replaced badge visibility updates with centralized event dispatch via Events.fire('room-secrets', roomSecrets); initialized new DiscoveryBadgeState in localization setup.
Discovery Badge State Management public/scripts/ui-main.js	Added new DiscoveryBadgeState class encapsulating badge visibility state, event ingestion pipeline with debouncing/deduplication, sessionStorage hydration, websocket sync handshake with recovery/resync logic, centralized renderBadges() with per-element timers, and disconnect handling.
Badge Element Selection & Handlers public/scripts/ui.js	Updated dialog classes to emit events instead of directly manipulating badges; switched footer badge element selection from class-based (.badge-room-secret) to attribute-based ([data-badge=...]) selectors; updated click handlers to use forEach for batch attachment.

Sequence Diagram

sequenceDiagram
    participant Main as Main Component
    participant Events as Events System
    participant DiscoveryBadgeState as DiscoveryBadgeState
    participant Dialog as Dialog<br/>(PairDevice/PublicRoom)
    participant Storage as SessionStorage<br/>& WebSocket
    participant UI as Badge UI Elements

    Main->>DiscoveryBadgeState: Initialize discoveryBadgeState
    Dialog->>Events: fire('room-secrets', secretsData)
    Events->>DiscoveryBadgeState: Enqueue event in pipeline
    DiscoveryBadgeState->>DiscoveryBadgeState: Debounce & dedup events
    DiscoveryBadgeState->>Storage: Hydrate state from sessionStorage
    DiscoveryBadgeState->>DiscoveryBadgeState: patchState() with validation
    DiscoveryBadgeState->>DiscoveryBadgeState: scheduleRender() (debounced)
    DiscoveryBadgeState->>DiscoveryBadgeState: renderBadges() with timers
    DiscoveryBadgeState->>UI: Update badge visibility [data-badge=...]
    DiscoveryBadgeState->>Events: fire('evaluate-footer-badges')
    
    alt WebSocket Connected
        Storage->>DiscoveryBadgeState: ws-connected event
        DiscoveryBadgeState->>Storage: Sync handshake & recovery
    else WebSocket Disconnected
        Storage->>DiscoveryBadgeState: ws-disconnected event
        DiscoveryBadgeState->>DiscoveryBadgeState: Increment recoveryToken, clear timers
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• Harden UI initialization, fix NoSleep & WebChat binding, and refresh badges on peer updates #251: Both PRs centralize footer badge updates via Events.fire('evaluate-footer-badges') and migrate from class-based to attribute-based badge element selection, moving toward an event-driven architecture.

Poem

🐰 Badges hop with event-driven grace,
No more direct DOM in this place,
State syncs soft through websocket streams,
With recovery dreams and debounce schemes,
Data attributes guide the way,
To render and glow a brighter day! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: centralization of discovery badges through a new DiscoveryBadgeState class and migration to data-badge attributes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/implement-unified-discovery-badge-system-ydb57q

---

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.}