Skip to content

Error toast redesign: dedupe repeats and anchor above the station menu - #97

Open
rodrigohpalmeirim wants to merge 1 commit into
mainfrom
error-toast-redesign
Open

Error toast redesign: dedupe repeats and anchor above the station menu#97
rodrigohpalmeirim wants to merge 1 commit into
mainfrom
error-toast-redesign

Conversation

@rodrigohpalmeirim

@rodrigohpalmeirim rodrigohpalmeirim commented Aug 18, 2026

Copy link
Copy Markdown
Member

Summary

Error toasts had two problems: they were anchored bottom-center, right on top of the station menu's bike list, and repeated messages (e.g. from retried requests) stacked up as duplicates, eating screen space.

Dedupe with counter

Re-adding a message that's already visible now refreshes its timer and bumps a ×N badge on the existing toast instead of stacking a duplicate (ui.svelte.ts).

New look and placement

Toasts keep the warning-orange palette but get the rounded card shape with a warning icon, and anchor just above the station sheet's top edge instead of the screen bottom, so they never cover the bike list or its unlock buttons.

Before After
3 identical pills burying the bike list 1 toast with ×3 badge, floating above the sheet

Anchor tracking

The sheet reports a new anchorTop binding: its predicted top edge, computed from the skeleton list height (known from the station's bike count the moment a station is tapped) rather than a rect measurement, so it's correct while bike info is still loading and while the resize animation is in flight. The toast container transitions bottom over 300ms, so anchor changes glide instead of snapping. While dragging, the last anchor is held; during trips and with no sheet open, toasts fall back to the bottom, which is free then.

The existing posTop binding (used by the location button, which intentionally hides while the sheet loads) is unchanged.

Dev tooling

giraDebug console hooks (dev builds only): fakeLogin(), fakeStations(), selectStation(), and addError() allow exercising the map UI and toasts without a real account.

Testing

  • svelte-check: 0 errors, 0 warnings; eslint clean on changed files; 45/45 vitest tests pass.
  • Verified visually with Playwright in light and dark mode, including a station-switch sequence with an artificially delayed bikes fetch: the toast holds/moves to the predicted anchor mid-load and glides to the settled position when data arrives.

Repeated error messages (e.g. from retried requests) now refresh the
existing toast and show a xN counter instead of stacking duplicates.

Toasts move from the bottom of the screen, where they covered the
station menu's bike list, to just above the sheet's top edge. The
anchor tracks the sheet's predicted height as soon as a station is
tapped (the skeleton list is sized from the station's bike count), so
toasts don't wait for bike info to load, and a short transition glides
them to the settled position. During trips, and while no sheet is open,
they fall back to the bottom, which is free then.

Also adds giraDebug console hooks (dev only) to fake a login, inject
stations, and spawn toasts without a real account.
@rodrigohpalmeirim
rodrigohpalmeirim requested a review from ttmx August 23, 2026 17:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant