Frontend and UX help wanted

[7akob]

Skood's sync engine is the part I cared about, and it works well. The interface is where the project is weakest, and that is exactly where help would make the most difference. If you like frontend work or UX, there is a lot of low-hanging fruit here, and every item below is small enough to be its own pull request.

Concrete things worth doing

Replace the four native browser dialogs. This is the biggest single win. window.prompt and window.confirm block the page, cannot be styled, and look alien in all three themes:

• first-run username prompt (public/script.js:56)
• rename prompt (public/script.js:63)
• clipboard fallback prompt (public/script.js:217)
• clear-queue confirm (public/script.js:334)

A small in-page modal or inline editing pattern, theme-aware through the existing CSS custom properties, would replace all four.

Accessibility pass. Currently there is nothing: no aria attributes and no :focus or :focus-visible rules anywhere in public/. Specifically worth fixing:

• keyboard focus is invisible on every button and input
• the icon buttons are bare emoji glyphs with only a title, so screen readers announce them poorly
• the chat box is not a live region, so new messages are not announced
• the connection dot blinks via a CSS animation with no prefers-reduced-motion guard

Mobile polish. The layout survives at 375px and the panels stack correctly, but nothing is tuned. The chat box is a fixed 250px tall, the video input row wraps awkwardly, and tap targets are small.

Queue reordering. Drag to reorder is the most requested-feeling missing thing. The server already keys queue items by a stable qid, so the sync side is straightforward.

Unread chat indicator. Nothing tells you a message arrived while you were scrolled up or on another tab.

Loading and empty states. "Loading..." is the entire feedback while a title resolves, and the empty panels are a single line of italic text.

Keyboard shortcuts. Space to play/pause, arrow keys to seek. Needs care, since the YouTube iframe steals focus and typing in chat must never trigger them.

More themes. See #2, which has a designed but unbuilt light theme ready to claim.

Constraints to work within

Skood stays vanilla: no framework, no bundler, no build step, no client dependencies. Two specific things to know before you start:

• index.html wires handlers with inline onclick attributes, so handler functions must stay global in script.js. Changing that is fine as a deliberate PR, but do not do it as a side effect of something else.
• Theme rules change look only, never layout that the mobile media query owns. CONTRIBUTING.md explains the theme system.

Claiming something

Comment on this issue saying which item you want, so two people do not build the same modal. One item per pull request keeps review easy. If you want to redesign something more broadly rather than fix a specific item, open a separate issue with a mockup first so we can talk it through before you spend time on it.

[7akob]

Two of the four dialogs are now gone, so the list at the top of this issue is out of date.

Naming no longer uses a dialog at all. A name is generated on the first visit and shown in the lobby as an ordinary field, and renaming inside a room edits in place with Enter to commit and Escape to cancel. The old first-run prompt was the worst of the four: it fired before the page had rendered, so people met a bare browser dialog asking who they are with nothing behind it, and cancelling re-prompted forever because of the retry loop around it.

Still open, and still worth someone's time:

• the clipboard fallback prompt (public/script.js:275), which only fires when the async clipboard write is refused
• the clear-queue confirm (public/script.js:412), where a real confirmation step is reasonable but a native confirm is not

Everything else in the original list stands, and the accessibility pass is now the biggest single item: there are still no :focus styles and no aria attributes anywhere in public/.

[olaobajujohn]

Hi! I'd like to work on replacing the native confirm dialog for clearing the queue with an in-page, theme-aware confirmation modal.

[7akob]

Hello @olaobajujohn ! Yes please, go ahead :)

Feel free to go crazy and let me know if you find other improvements worth making.

Ping me if something is unclear, thanks!

[7akob]

Small update: queue reordering now has its own issue at #8, so claim it there rather than here.

There's also a new small one worth picking up if you're looking for somewhere to start: #9, adding a favorite button to queue items. Self-contained, and there's already a working example next to it in the code.

Everything else in the list above still stands, and the accessibility pass is still the biggest single item.

[7akob]

@olaobajujohn one thing worth knowing before you build the queue confirmation, since it affects the shape rather than the work: two more callers are coming.

Delete all local data, and the Replace option when importing a profile (#5), both destroy data and both need the same confirmation step. So it is worth building this as a reusable function, something like confirmAction({ title, body, confirmLabel, danger }), rather than inline in clearQueue. Otherwise the next two either duplicate it or refactor yours.

Still one pull request, still just the queue as the first caller. Only the signature matters.

Separately, the clipboard fallback prompt at public/script.js:275 displays a value to copy rather than asking for confirmation, so it needs a different shape. Not part of this.