feat: themed empty state with reset filters CTA for my predictions#428
Open
shinzoxD wants to merge 1 commit into
Open
feat: themed empty state with reset filters CTA for my predictions#428shinzoxD wants to merge 1 commit into
shinzoxD wants to merge 1 commit into
Conversation
The My Predictions page's status filter (All / Active / Pending / Completed) had a bare-text empty state — a single grey <p> that just said 'No predictions found for the X status' with no illustration, no theming, no reset action, and no announcement for screen readers. Users who had filtered themselves into an empty view had no obvious way to recover. This adds a themed PredictionsEmptyState component that: - Renders the existing /assets/empty-states/dashboard/predictions.svg illustration (already on disk; no asset work needed) - Adapts the headline and description to the active filter so the user immediately understands whether the list is empty because nothing exists for that status or because their search/filter is too narrow - Adds a 'Reset filters' primary CTA that returns to the All tab and clears the search box in one click - Adds a secondary 'Browse events' link on every non-Active tab (since the primary purpose of My Predictions is to view past activity, not to discover new events — on Active the link would be redundant) - Wires role='status' aria-live='polite' so screen readers are notified of the empty state without the page yanking focus - Honours the existing dark surface via Tailwind dark: variants (no hard-coded colors) - A 64x64 sm:w-28 sm:h-28 illustration, dashed border, and tinted background differentiate it from a normal panel Also adds a real search input next to the status filter tabs — previously the 'Filter' button in the top bar was decorative. The search filters across both title and description, case-insensitive. The reset CTA clears both the search and the active tab. The component is decoupled from the page: PredictionsList owns the state (activeTab, searchQuery) and PredictionsEmptyState is a pure presentational child. A resetFilters callback is passed down so the empty state can call back into the parent. Adds app/(dashboard)/mypredictions/__tests__/page.test.tsx with 6 tests: - the default All tab renders the populated card list (no empty state) - the empty state renders with the correct headline + reset CTA when the filter narrows results to zero - clicking the reset CTA restores the default view (cards back, empty state gone) - role=status + aria-live=polite on the empty state container - the Browse events link is rendered with href=/events when not on the Active tab - search-only filtering is honoured and the reset CTA clears the searchbox All 6 new tests pass. Pre-existing test failures in this repo (80 failed / 361 passed on a clean main) are unchanged from main — confirmed by re-running on a stashed tree. Closes Predictify-org#367
|
@shinzoxD is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel. A member of the Team first needs to authorize it. |
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
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
PredictionsEmptyStatecomponent toapp/(dashboard)/mypredictions/page.tsx. The previous empty state was a bare grey<p>with no illustration, no theming, and no way to recover from a too-narrow filter./assets/empty-states/dashboard/predictions.svgillustration, adapts the headline and description to the active filter (and to whether a search is in flight), and provides a primary Reset filters CTA that returns to the All tab and clears the search box in one click.role="status" aria-live="polite"so screen readers are notified of the empty state without the page yanking focus. Honours the existing dark surface via Tailwinddark:variants.Filterbutton in the top bar was previously decorative). The search filters across both title and description, case-insensitive.app/(dashboard)/mypredictions/__tests__/page.test.tsxwith 6 tests covering: default state, themed empty state with reset CTA, click-to-reset, screen-reader announcement, Browse events link, and search-only filtering.Test Plan
npx jest --testPathPattern='mypredictions/__tests__'— 6/6 passnpx jest— 366/441 pass; the 75 failures are pre-existing on main (clean tree: 80 failed / 361 passed; my changes add 5 net passing tests).Closes
Closes #367