Add stable IDs or classes to UI elements for easier automation

[sanity]

Problem

When automating UI interactions with River (for testing, debugging, etc.), the dynamically generated data-dioxus-id attributes change between renders, making it difficult to reliably target elements.

Current Situation

Elements currently only have dynamic IDs:

<input class="input" data-dioxus-id="43">  <\!-- Room Name -->
<input class="input" data-dioxus-id="44">  <\!-- Nickname -->
<button class="button is-primary" data-dioxus-id="45">Create Room</button>

These IDs (43, 44, 45) change on each render, requiring complex DOM traversal to find elements.

Proposed Solution

Add stable identifiers to key interactive elements:

<input class="input" id="room-name-input" data-dioxus-id="43">
<input class="input" id="nickname-input" data-dioxus-id="44">
<button class="button is-primary" id="create-room-submit" data-dioxus-id="45">Create Room</button>

Or using data attributes:

<input class="input" data-testid="room-name-input" data-dioxus-id="43">
<input class="input" data-testid="nickname-input" data-dioxus-id="44">
<button class="button is-primary" data-testid="create-room-submit" data-dioxus-id="45">Create Room</button>

Benefits

1. Easier automated testing - E2E tests can reliably find elements
2. Better debugging - Developers can quickly identify elements in DevTools
3. Improved documentation - Can reference specific elements by ID
4. Third-party integrations - External tools can interact with River more easily

Suggested Elements to Tag

• Create Room modal: room name input, nickname input, submit button
• Invite Member modal: invite link field, copy button
• Message input and send button
• Room list items
• Member list items
• Settings/configuration fields

This would greatly improve the developer experience when working with River's UI.