kyuno/watchparty
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Replace every blocking alert() with a light toast, fix a mobile grid bug #12

Merged
kyuno merged 2 commits from feature/toast-notifications into master 2026-09-16 18:33:02 +02:00
Conversation 0 Commits 2 Files changed 13 +228 -12
kyuno commented 2026-09-16 17:34:40 +02:00
Owner
Copy link

Summary

  • New toast.ts/toast.css: a light, auto-dismissing toast notification, styled after Player.css's existing .requestBanner but generalized to work from any page (position: fixed against the viewport, self-mounting singleton - no Shell.ts wiring needed).
  • Replaces every blocking alert() in the client (10 call sites: the host-handoff notice in Player.ts, plus every "couldn't start/join a party" error across Player/MusicBar/tiles.ts's shared wireTileButtons/Home/Series/Playlist/Artist/Album) with showToast(message, { variant }).
  • Two variants: info (default - the host-handoff message) and error (every migrated failure) - the only visual difference is a plain border-left accent, deliberately not a red banner/fill, matching this app's existing restraint elsewhere.
  • Also fixes a real reported bug: the library/artist grid's minmax(160px, 1fr) floor left no room for a second column on an ordinary ~360-393px-wide phone once .mainContent's padding is subtracted - unlike the sidebar/music bar, this grid never got a narrow-screen treatment at all. Fixed with a fluid clamp(100px, 28vw, 160px) floor instead of a fixed breakpoint.

Context

Asked for directly ("rework the messages sent to the client, especially when becoming host - show a light toast"). Once looking at that one call site, every other alert() turned out to be the exact same pattern, so all of them moved together rather than leaving a half-migrated mix of toasts and blocking alerts. The grid fix was a separate, concrete bug report from a real device that came in mid-task; small and unrelated enough in cause to not need its own branch, but reported and fixed in the same sitting.

Verification

  • Full typecheck/build (client only).
  • Confirmed zero real alert( calls remain in client/src (only comments mentioning the word).
  • The fade-in double-requestAnimationFrame trick (needed so the transition isn't coalesced with the element's own insert) checked against a real element in a real browser.
  • Grid fix: confirmed empirically at 320/360/375/393/430/768/1200px using an <iframe> (its own independent viewport for vw units - this sandbox's resize_window emulation has been unreliable all session). Every phone width from 320-393px now gets 2 columns (was 1), 430px gets 3, and 768/1200px match the old fixed-160px behavior exactly - confirmed empirically, not just computed by hand.

Test plan

  • Have the host leave mid-party on a second device, confirm the new host sees a light toast (not a blocking alert) instead of the old "tu es maintenant l'hôte" popup
  • Trigger a real error (e.g. start a party on a deleted item, or disconnect the network mid-join) and confirm it shows as a toast with the left accent instead of a blocking alert
  • Open the Films/Musique library on a real phone, confirm more than one tile now fits per row

🤖 Generated with Claude Code

## Summary - New `toast.ts`/`toast.css`: a light, auto-dismissing toast notification, styled after `Player.css`'s existing `.requestBanner` but generalized to work from any page (`position: fixed` against the viewport, self-mounting singleton - no Shell.ts wiring needed). - Replaces **every** blocking `alert()` in the client (10 call sites: the host-handoff notice in `Player.ts`, plus every "couldn't start/join a party" error across `Player`/`MusicBar`/`tiles.ts`'s shared `wireTileButtons`/`Home`/`Series`/`Playlist`/`Artist`/`Album`) with `showToast(message, { variant })`. - Two variants: `info` (default - the host-handoff message) and `error` (every migrated failure) - the only visual difference is a plain `border-left` accent, deliberately not a red banner/fill, matching this app's existing restraint elsewhere. - **Also fixes a real reported bug**: the library/artist grid's `minmax(160px, 1fr)` floor left no room for a second column on an ordinary ~360-393px-wide phone once `.mainContent`'s padding is subtracted - unlike the sidebar/music bar, this grid never got a narrow-screen treatment at all. Fixed with a fluid `clamp(100px, 28vw, 160px)` floor instead of a fixed breakpoint. ## Context Asked for directly ("rework the messages sent to the client, especially when becoming host - show a light toast"). Once looking at that one call site, every other `alert()` turned out to be the exact same pattern, so all of them moved together rather than leaving a half-migrated mix of toasts and blocking alerts. The grid fix was a separate, concrete bug report from a real device that came in mid-task; small and unrelated enough in cause to not need its own branch, but reported and fixed in the same sitting. ## Verification - Full `typecheck`/`build` (client only). - Confirmed zero real `alert(` calls remain in `client/src` (only comments mentioning the word). - The fade-in double-`requestAnimationFrame` trick (needed so the transition isn't coalesced with the element's own insert) checked against a real element in a real browser. - **Grid fix**: confirmed empirically at 320/360/375/393/430/768/1200px using an `<iframe>` (its own independent viewport for `vw` units - this sandbox's `resize_window` emulation has been unreliable all session). Every phone width from 320-393px now gets 2 columns (was 1), 430px gets 3, and 768/1200px match the old fixed-160px behavior exactly - confirmed empirically, not just computed by hand. ## Test plan - [ ] Have the host leave mid-party on a second device, confirm the new host sees a light toast (not a blocking alert) instead of the old "tu es maintenant l'hôte" popup - [ ] Trigger a real error (e.g. start a party on a deleted item, or disconnect the network mid-join) and confirm it shows as a toast with the left accent instead of a blocking alert - [ ] Open the Films/Musique library on a real phone, confirm more than one tile now fits per row 🤖 Generated with [Claude Code](https://claude.com/claude-code)
kyuno added 1 commit 2026-09-16 17:34:41 +02:00
Replace every blocking alert() with a light toast, fix a mobile grid bug
Some checks failed
Publier l'image Docker / test (pull_request) Failing after 4s
Details
Publier l'image Docker / publish (pull_request) Has been skipped
Details
ff664f2c2b 
Every message this app ever showed the client - the host-handoff
notice, every "couldn't start/join a party" error - went through a
blocking alert(), freezing the tab for what's usually just a heads-up.
New toast.ts is a self-mounting singleton (no per-party state, so it
doesn't need Shell.ts wiring like musicBar/MusicBar does) styled after
Player.css's own .requestBanner, with an 'error' variant that's still
just a plain left accent, not a red banner - even a failed click
doesn't need this app to suddenly shout. All ten alert() call sites
across Player/MusicBar/tiles/Home/Series/Playlist/Artist/Album now go
through it.

Also fixes a real reported bug while in the area: the library/artist
grid's minmax(160px, 1fr) floor left no room for a second column once
a real phone's padding was subtracted, unlike everything else mobile
in this app (the sidebar, the music bar) which already got a
narrow-screen treatment. Switched to a fluid clamp(100px, 28vw, 160px)
floor instead of a fixed breakpoint, confirmed at seven real widths via
an iframe (its own independent viewport for vw units, sidestepping
this sandbox's own unreliable viewport-resize emulation).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
kyuno added 1 commit 2026-09-16 18:32:54 +02:00
Merge remote-tracking branch 'origin/master' into feature/toast-notifications
Some checks failed
Publier l'image Docker / test (pull_request) Failing after 4s
Details
Publier l'image Docker / publish (pull_request) Has been skipped
Details
acb45c8a1a 
# Conflicts:
#	README.md
#	docs/architecture.md
kyuno merged commit 0a9b3fb498 into master 2026-09-16 18:33:02 +02:00
kyuno deleted branch feature/toast-notifications 2026-09-16 18:33:02 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: kyuno/watchparty#12
No description provided.
Delete branch "feature/toast-notifications"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?