Release v0.1.24 — Phase 24: UX Polish#296
Merged
Merged
Conversation
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ppers into develop
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR implements Phase 24 UX polish by adding a global toast notification system, integrating toast dispatches into Livewire user flows, enhancing accessibility across tables with ARIA labels and semantic markup, improving empty-state messaging with calls-to-action, implementing mobile navigation, and activating billing/settings routes. ChangesPhase 24 UX Polish and Accessibility
Sequence Diagram(s)sequenceDiagram
participant Livewire as DashboardConverter
participant Factory as window.toastRegion
participant Component as ToastRegionComponent
Livewire->>Livewire: storeUpload (file uploaded)
Livewire->>Factory: dispatch('toast', {type: 'success', title: '...', message: '...'})
Factory->>Factory: add(detail) - normalize shape
Factory->>Factory: auto-schedule remove(id) after 4000ms
Factory->>Component: toasts updated (reactive)
Component->>Component: render with Alpine transitions
Component->>Component: animate toast enter
Component->>Factory: remove(id) on dismiss or timeout
Factory->>Component: toast filtered out
Component->>Component: animate toast leave
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 19 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
All dispatch('toast', [...]) calls in DashboardConverter replaced with
named-argument form so Livewire 4 produces a flat event.detail object
instead of wrapping it in an array. Alpine toastRegion.add() now also
guards against the array-of-object shape for defensive compatibility.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Owner
Author
|
@CodeRabbit review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (1)
tests/Feature/LayoutSmokeTest.php (1)
9-9: ⚡ Quick winMake the toast-container assertion more specific.
assertSee('toast-region', false)is broad; assertingid="toast-region"better validates the actual container markup.Proposed test tweak
- ->assertSee('toast-region', false); + ->assertSee('id="toast-region"', false);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/Feature/LayoutSmokeTest.php` at line 9, Replace the broad assertion ->assertSee('toast-region', false) in tests/Feature/LayoutSmokeTest.php with a more specific check for the container's id by asserting ->assertSee('id="toast-region"', false) so the test validates the actual markup for the toast container rather than any incidental text; update the assertion in the relevant test method where ->assertSee('toast-region', false) appears.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/Livewire/ConversionHistoryTable.php`:
- Around line 176-184: hasActiveFilters() currently treats empty-string date
inputs as active because it checks $this->dateFrom !== null / $this->dateTo !==
null, while updatedDateFrom() / updatedDateTo() don't normalize '' to null;
update both updatedDateFrom() and updatedDateTo() to normalize empty values to
null (e.g., if trim($this->dateFrom) === '' set $this->dateFrom = null; same for
dateTo) before calling resetPage(), so hasActiveFilters() and jobs() (which uses
when($this->dateFrom)/when($this->dateTo)) behave consistently.
In `@docs/ux/phase24-ux-audit.md`:
- Around line 213-220: Update the document to remove the contradiction between
the “Current behavior/Problem” and the “final completion checklist” for Phase
24: either relabel the earlier section that lists Billing and Settings as
disabled placeholders and focus/aria issues as “Pre-fix findings” (so it’s clear
those were resolved later), or change the “Current behavior” text to describe
the post-fix state (real Billing/Settings links, focus moved into the menu,
aria-label present, tooltips for disabled items removed or updated). Make the
same change consistently for the section referencing Phase 24 and the checklist
entries so the descriptions of “Billing”, “Settings”, the trigger button
behavior, and focus management are aligned across the document.
- Around line 125-133: Remove the stale accessibility claims about missing
row-specific aria-labels and focus rings from the audit text and update the
related entries to reflect the current implementation: remove or edit the
statements that say the "Star/Starred" button, "Convert again" button, and
Download action lack aria-labels and focus styles, and note that those controls
now include row-specific aria-label attributes and the ca-focus-ring class; also
adjust any mentions of statusBadgeClasses()/raw <span> vs <x-badge> to only call
out remaining issues (color-only status badge, missing caption/labels,
responsive overflow) so the document matches the codebase.
In `@resources/js/app.js`:
- Around line 8-22: In add(detail) guard against missing/empty payloads before
dereferencing: treat Array.isArray(detail) ? detail[0] : detail as possibly
undefined and default it to an empty object (e.g., let raw =
Array.isArray(detail) ? detail[0] : detail; let toast = raw ?? {};), then use
toast.type, toast.title, toast.message, and toast.duration with existing
fallback logic; ensure you still use this.nextId, push to this.toasts, and call
setTimeout(() => this.remove(id), duration) so no property access can throw when
detail is absent or an empty array.
In `@resources/views/components/toast-region.blade.php`:
- Around line 20-25: The component currently uses hard-coded Tailwind color
utilities in the :class mapping for toast.type (e.g., 'border-green-200
bg-green-50 text-green-800'); replace those with the RateGuru design-system
token classes instead (for each branch for toast.type ===
'success'|'error'|'info'|'warning' use the corresponding RateGuru tokenized
classes for border, background and text such as rg-border-success /
rg-bg-success / rg-text-success (or the exact token class names from our design
system) so the toast-region.blade.php :class mapping references tokenized
styling rather than raw Tailwind colors.
In `@resources/views/livewire/dashboard/dashboard-converter.blade.php`:
- Line 56: Remove the aria-label from the <label class="cursor-pointer"> element
in dashboard-converter.blade.php to avoid a Label in Name WCAG 2.5.3 violation;
locate the label with class "cursor-pointer" (the one that wraps the file input
and shows "Choose file"/"Uploading…") and delete the aria-label="Upload file"
attribute, or if you need an explicit accessible name for the input instead,
move that text to the associated <input> element (e.g. as aria-label on the
input) rather than on the label.
In `@tests/Feature/Livewire/DashboardConverterTest.php`:
- Around line 192-226: Update the two tests to assert the specific branch state
on the DashboardConverter component instead of only checking that any 'toast'
was dispatched: after calling convert() in the successful path
(DashboardConverter::class test where a credited user and FileRecord exist)
assert that currentConversionJobId is set (not null/empty) and
hasInsufficientCredits is false and convertError is null; in the
insufficient-credits path assert that hasInsufficientCredits is true,
convertError is set (non-empty) and currentConversionJobId is null/empty. Locate
these checks around the existing
Livewire::actingAs(...)->test(DashboardConverter::class)->set(...)->call('selectTargetFormat',
'jpg')->call('convert') flow and replace or augment the final
assertDispatched('toast') with the component state assertions referencing
currentConversionJobId, hasInsufficientCredits, and convertError.
---
Nitpick comments:
In `@tests/Feature/LayoutSmokeTest.php`:
- Line 9: Replace the broad assertion ->assertSee('toast-region', false) in
tests/Feature/LayoutSmokeTest.php with a more specific check for the container's
id by asserting ->assertSee('id="toast-region"', false) so the test validates
the actual markup for the toast container rather than any incidental text;
update the assertion in the relevant test method where
->assertSee('toast-region', false) appears.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 31b8d424-2d53-4eca-a8ec-973105b5e00b
📒 Files selected for processing (19)
app/Livewire/ConversionHistoryTable.phpapp/Livewire/Dashboard/DashboardConverter.phpdocs/ux/phase24-ux-audit.mdresources/js/app.jsresources/views/components/footer-help-cards.blade.phpresources/views/components/layouts/app.blade.phpresources/views/components/toast-region.blade.phpresources/views/components/user-dropdown.blade.phpresources/views/livewire/billing/billing-page.blade.phpresources/views/livewire/conversion-history-table.blade.phpresources/views/livewire/dashboard/dashboard-converter.blade.phpresources/views/livewire/recent-conversions-table.blade.phptests/Feature/AccessibilitySmokeTest.phptests/Feature/LayoutSmokeTest.phptests/Feature/Livewire/Billing/BillingPageTest.phptests/Feature/Livewire/ConversionHistoryTableTest.phptests/Feature/Livewire/DashboardConverterTest.phptests/Feature/Livewire/RecentConversionsTableTest.phptests/Feature/UxPolishSmokeTest.php
Comment on lines
+20
to
+25
| :class="{ | ||
| 'border-green-200 bg-green-50 text-green-800': toast.type === 'success', | ||
| 'border-red-200 bg-red-50 text-red-800': toast.type === 'error', | ||
| 'border-blue-200 bg-blue-50 text-blue-800': toast.type === 'info', | ||
| 'border-amber-200 bg-amber-50 text-amber-800': toast.type === 'warning', | ||
| }" |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Replace hard-coded status colors with RateGuru tokenized styling.
This reusable component introduces raw Tailwind status colors (green/red/blue/amber) instead of tokenized design-system styling.
As per coding guidelines, "Reusable UI components must use RateGuru tokens and must not introduce random Tailwind color utilities unless the deviation is documented in docs/design/design-contract.md".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@resources/views/components/toast-region.blade.php` around lines 20 - 25, The
component currently uses hard-coded Tailwind color utilities in the :class
mapping for toast.type (e.g., 'border-green-200 bg-green-50 text-green-800');
replace those with the RateGuru design-system token classes instead (for each
branch for toast.type === 'success'|'error'|'info'|'warning' use the
corresponding RateGuru tokenized classes for border, background and text such as
rg-border-success / rg-bg-success / rg-text-success (or the exact token class
names from our design system) so the toast-region.blade.php :class mapping
references tokenized styling rather than raw Tailwind colors.
…, test assertions
- ConversionHistoryTable: normalize empty-string dateFrom/dateTo to null in
updatedDateFrom/updatedDateTo so hasActiveFilters() and jobs() behave consistently
- app.js: add `?? {}` fallback after array/object normalization in toastRegion.add()
so missing or empty detail never throws on property access
- dashboard-converter: move aria-label from <label> to <input> to avoid
WCAG 2.5.3 Label in Name violation
- DashboardConverterTest: augment toast dispatch tests with component state assertions
(currentConversionJobId, hasInsufficientCredits, convertError)
- LayoutSmokeTest: tighten assertSee to match id="toast-region" markup specifically
- docs/ux/phase24-ux-audit.md: mark pre-fix sections as resolved, align descriptions
with post-fix state for user dropdown and recent conversions table
Skipped: toast-region rg-* design tokens — no such token classes exist in this project.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.
Summary
docs/ux/phase24-ux-audit.md)aria-live,aria-label,role="region"on dropzonearia-live/aria-hiddenon spinneraria-liveon loading buttontoast-region.blade.php, AlpinetoastRegion(), wired into app layoutaria-label+aria-pressedfor table action buttonsoverflow-x-autoon recent conversions table; desktop nav updatedoverflow-x-auto+min-won history and credit transactions tablesTest plan
composer test— 721 passing, 1 skippednpm run build— clean build🤖 Generated with Claude Code
Summary by cubic
Phase 24 UX polish for v0.1.24. Adds robust toast notifications (Livewire 4 compatible and null-safe), mobile navigation, accessible loading/actions, clearer empty states, and responsive tables; completes CONV-381–CONV-397.
New Features
toast-region.blade.phpandtoastRegion(); uses Livewire 4 named-arg events and handles array/missing payloads; wired into the app layout.UX Polish
aria-label/aria-pressedon table actions; labeled upload region; moved file inputaria-labelto the input (WCAG 2.5.3).null.overflow-x-auto+ min-width on Recent, History, and Credit Transactions; footer help cards no longer use interactive styling without links.docs/ux/phase24-ux-audit.md; new smoke/feature tests cover states, toasts, navigation, accessibility, and responsiveness.Written for commit db819e4. Summary will update on new commits.
Summary by CodeRabbit
New Features
Accessibility
UI Improvements