Repository navigation
fix(app): close the UI audit and polish the app - #402
Merged
Merged
Conversation
- add button roles to lightbox close and gallery prev/next - expose selected state on thumbnails and camera cells, checked on sort items - keep toast, offline and save-bar status regions mounted; pause toast on hover and focus - mark invalid fields with aria-invalid and name ControlledTextField from its label - add level-1 heading in edit mode, aria-current in top nav and section nav - add a visible Select control and a select action for camera cells - label video inputs, join profile row title and subtitle, enlarge retry target
- wrap the lightbox, camera dialogs, terms prompt and shortcuts panel in a boundary that renders nothing, raises a toast and closes the overlay - swap in a fresh lazy() after a caught failure so reopening fetches the chunk again
- local Pi capture network failures and timeouts now say the camera is unreachable instead of blaming Relab - request timeouts map to the connection message instead of a raw millisecond detail
…v state natively - give non-control scrim and wrapper Pressables tabIndex -1 on web - mark the active section chip selected for native screen readers - read camera cells as toggles only in selection mode - give the category Retry a 44px target and announce the load failure - name the menu once, on the Modal - speak the save bar's attention summary through its status region - keep a replacement toast held while the pointer or focus rests on it - stop a click on a hovered tooltip icon from closing the tooltip on web
- note the next first-load bundle lever and the WebP background re-encode - point the delete TODO at the offline guard below it
- Offline, "Create & add another" queues the draft (photos and its own Idempotency-Key ride in the paused mutation) and hands back an empty form at once - The queued item is named in a toast; a later success or failure is reported even after the screen has gone - Create buttons track this draft's own create, so a queued earlier draft no longer locks the form
The delete mutation no longer pauses offline, so a dropped connection fails at once with the connection error instead of queueing a delete that could land much later or fail unseen.
…t resumed failures - A handler from a render before the form reset no longer sends the queued draft again under a new Idempotency-Key - A create restored after a restart that fails, or whose photos fail, raises an alert naming the item
A dialog raised while another is open now waits its turn, so several failure alerts in a row (queued saves failing on reconnect) are each shown in order.
A session that ends with saves still queued offline now reports how many were discarded, including when no one saw the sign-out confirm.
- fade the backdrop and controls in while the photo scales 0.96 to 1 over 250ms on an exponential settle - run the close as its own 150ms tween with the modal kept mounted until it lands, instead of the modal's stock fade - reduced motion keeps the fade and drops the scale - let the test mock of withTiming report completion so exit callbacks run
- shared row motion: fade in 200ms, fade out 150ms, neighbours slide over 200ms - rows present on mount stay still, and leaving the screen skips every row's exit - test that a component row keeps its expanded state when the list stops collapsing
…ys faster - fade product detail content and spec-row values in where they replace a skeleton; cached content is simply there - slide the save bar up 12px with a 200ms fade when it appears and fade it out in 150ms; leaving the screen skips the exit - dialogs, menus, filter pickers and tooltips fade in over 200ms and out over 150ms instead of the modal's 300ms fade both ways - closing overlays ignore presses and return focus only once the modal is gone - one presence hook serves the overlays and the lightbox
The wordmark sits at the head of the login and onboarding card, capped at 220px, so the column reads as one panel. Below md the Browse button joins the flow above the card instead of overlapping it.
- OverviewFacts states brand, model, amount and type in one row, with the type's description and list link under it; ProductTags and ProductType are edit controls - the type slot is present from the first frame and pulses until it resolves - SpecFacts takes loading per fact, and its doc names every caller
Replace the centred stat cards with the same SpecFacts row the account screen uses; weight carries its unit on the value.
Disabled buttons take a faint muted fill, the hairline and muted ink in every variant, with hover and pressed frozen to it, so a disabled control reads inert in both schemes and the capture row shows one idiom. Drops the redundant web pointer-events class.
The press target stops short of the owner link, so the tint is drawn on a card-wide layer driven by the target's hover and press state.
…row merge Stub OverviewFacts in the product page order test, memoise the type link handler, split the card tint out of ProductCard and drop an unused test pattern.
- Motion subsection: overlay presence, row motion, the lightbox's reduced-motion path, the CSS transition rule - the ReduceMotion.System rule names the lightbox exception - mirrored-rule markers point at the current assets/DESIGN.md lines
- FAB and the amount stepper take the muted disabled fill and ink instead of an opacity fade - the lightbox chevrons keep their fade over the photo, with a note on why - Go Live no longer dims while it stays pressable - capture name, camera name and onboarding username share the login's (required) label
- product cards, component rows, View all, the header pill and the brand are links - the header pill carries aria-current=page on /account; section chips use aria-current=location - compact ErrorState is a hairline-top row instead of a nested card - the filled chip segment takes primary-strong on web hover too - the filter picker takes the overlay shadow and ignores keys while it closes
* origin/main: perf(app): load shared leaf screens on demand on web (#401) ci: retry registry image pulls before starting the e2e stack (#397) fix(app): save native exports to a file and share them (#398) perf(backend): decode each upload once for thumbnails and drop the 2560px width (#400) fix(app): tint profile rows on hover and press (#396) # Conflicts: # app/babel.config.js # app/src/components/product/ExportMenu.tsx # app/src/components/product/ProductImageGallery.tsx # app/src/components/product/__tests__/ExportMenu.test.tsx # app/src/components/profile/shared.tsx
babel.config.js names the preset, but it was only reachable through hoisting, so Jest stopped finding it when the hoist layout changed.
- Self-host the 14.7 KB Latin regular face, synced from assets/fonts, with font-display: swap - Put it first in the web data stack; native keeps the platform monospace - Record the one exception to the system-font rule in both design docs
The sign-out dialog no longer counts queued items; the session alert reports every discard, so the flag that suppressed it after a confirmed sign-out is gone.
- PressOverlay draws the one tint for cards, gallery tiles, camera cells and the stream banner - motion.ts replaces rowMotion.ts and holds the shared enter and exit timings - LoadMoreFooter serves both the products list and the public profile - Skeleton returns to a per-instance pulse - press classes rely on the global reduced-motion rule
useCpvType builds the recorded-type snapshot itself, so view and edit callers pass the product type directly.
- one upload-failure check serves both the online and the queued create path - the pass-through query hooks give way to useQuery with the option factories - the save bar reuses its upload message for the button label
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes the findings from a UI audit of the app (accessibility, theming, responsive layout, errors and offline, performance), then refines the visual and motion language within the existing design system.