feat: add quests feature with onboarding and loading states - #32
Merged
Conversation
iflames1
commented
Sep 1, 2026
iflames1
commented
Member
- Introduced new quests functionality, including actions for claiming quests and retrieving user quests.
- Added QuestOnboardingDialog for user onboarding related to quests.
- Implemented loading states for quests, profile, settings, wallet, and leaderboard pages using skeleton components.
- Updated sitemap to include a route for quests.
- Refactored loading components to utilize new skeleton structures for improved UI consistency.
- Introduced new quests functionality, including actions for claiming quests and retrieving user quests. - Added QuestOnboardingDialog for user onboarding related to quests. - Implemented loading states for quests, profile, settings, wallet, and leaderboard pages using skeleton components. - Updated sitemap to include a route for quests. - Refactored loading components to utilize new skeleton structures for improved UI consistency.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
🟡 Changes recommended
The quests React Query cache key is not scoped by user, which can leak a previous user’s quest data across logout/login.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Adds a new Quests surface area to the app (API types + server actions + client UI), introduces quest onboarding/referral prompting, and expands route-level loading UX with a shared skeleton system while extending the leaderboard to support quests/all boards.
Changes:
- Introduced quests domain types, server endpoints, server actions, and client hooks/mutations for fetching/claiming quests.
- Added new Quests route/UI (including Getting Started rail + onboarding dialog) and wired quest updates through the WS protocol.
- Refactored/standardized loading states across multiple routes using new skeleton components and updated navigation/sitemap.
File summaries
| File | Description |
|---|---|
| lib/ws/protocol.ts | Adds quest.updated to the server message kind union. |
| lib/quests.ts | Adds quest helper utilities (progress formatting, next quest selection, claim application). |
| lib/api/types.ts | Introduces quest-related API types and adds leaderboard board support. |
| lib/api/server.ts | Adds quests/referral endpoints and supports leaderboard board query param. |
| hooks/use-quests-me.ts | Adds React Query hook for fetching the current user’s quests. |
| hooks/use-leaderboard.ts | Extends leaderboard scope to include board and updates cache keying. |
| hooks/use-claim-quest.ts | Adds mutation hook to claim quests and update cached quest state. |
| components/ws/app-ws-provider.tsx | Invalidates quests query on quest.updated websocket messages. |
| components/wallet/transaction-list.tsx | Updates wallet transaction loading UI to a richer skeleton list layout. |
| components/ui/button.tsx | Adjusts base button styling (adds cursor-pointer). |
| components/shell/app-header.tsx | Adds Quests nav item and repositions nav to centered layout on large screens. |
| components/shell/app-footer.tsx | Adds Quests link to footer navigation. |
| components/room/room-skeleton.tsx | Replaces room loading UI with a more structured skeleton layout. |
| components/quests/quests-view.tsx | New main quests screen UI and state handling (empty/loading/loaded). |
| components/quests/quests-skeleton.tsx | Adds a route/component-level skeleton for quests. |
| components/quests/quest-step.tsx | Adds quest row UI with progress, CTA, and claim handling. |
| components/quests/getting-started-rail.tsx | Adds “Getting Started” progress rail for the landing page. |
| components/quests/bonus-mission.tsx | Adds UI for bonus mission quest rendering and claiming. |
| components/profile/match-history.tsx | Improves match history loading skeleton layout. |
| components/leaderboard/leaderboard-view.tsx | Adds board switcher (Game/Quests/All) and updates filters/copy accordingly. |
| components/leaderboard/leaderboard-table.tsx | Adds board-aware empty states and option to hide match stats for quest board. |
| components/common/page-container.tsx | Updates max-width sizing classes for page layout containers. |
| components/common/list-skeleton.tsx | Major expansion/refactor of shared skeleton components used by multiple routes. |
| components/auth/quest-onboarding-dialog.tsx | Adds referral prompt + quest intro dialog flow for signed-in users. |
| app/sitemap.ts | Adds /quests to sitemap. |
| app/provider.tsx | Wires QuestOnboardingDialog into the app provider stack. |
| app/auth/reset-password/page.tsx | Refines suspense fallback skeleton for reset password UI. |
| app/(app)/wallet/page.tsx | Uses shared WalletPageSkeleton for unauthenticated loading state. |
| app/(app)/wallet/loading.tsx | Adds route-level wallet loading skeleton. |
| app/(app)/settings/page.tsx | Uses shared SettingsPageSkeleton for unauthenticated loading state. |
| app/(app)/settings/loading.tsx | Adds route-level settings loading skeleton. |
| app/(app)/quests/page.tsx | Adds the Quests page route with SSR initial fetch. |
| app/(app)/quests/loading.tsx | Adds route-level quests loading UI. |
| app/(app)/profile/[username]/loading.tsx | Switches profile loading UI to shared ProfilePageSkeleton. |
| app/(app)/page.tsx | Adds GettingStartedRail to the landing page. |
| app/(app)/lobbies/page.tsx | Uses shared LobbyBrowserSkeleton as Suspense fallback. |
| app/(app)/lobbies/loading.tsx | Switches lobbies route-level loading to shared LobbiesPageSkeleton. |
| app/(app)/leaderboard/page.tsx | Updates leaderboard metadata/copy to reflect new boards. |
| app/(app)/leaderboard/loading.tsx | Switches leaderboard loading to shared LeaderboardPageSkeleton. |
| app/(app)/games/loading.tsx | Switches games loading to shared GamesPageSkeleton. |
| app/(app)/games/[gameId]/loading.tsx | Switches game detail loading to shared GameDetailSkeleton. |
| AGENTS.md | Updates embedded Next.js agent guidance block text. |
| actions/quests.ts | Adds server actions for quests/referral/intro flows. |
Review details
- Files reviewed: 43/43 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+12
to
+16
| const user = useSessionUser() | ||
| return useQuery({ | ||
| queryKey: QUESTS_ME_KEY, | ||
| queryFn: getMyQuestsAction, | ||
| enabled: Boolean(user), |
Comment on lines
109
to
+110
| type="button" | ||
| onClick={() => setTab(item.id)} | ||
| onClick={() => setBoardKind(item.id)} |
Comment on lines
+133
to
+134
| type="button" | ||
| onClick={() => setTab(item.id)} |
Comment on lines
+19
to
+23
| queryClient.setQueryData<QuestMe>(QUESTS_ME_KEY, (current) => | ||
| current ? applyQuestClaim(current, result) : current | ||
| ) | ||
| void queryClient.invalidateQueries({ queryKey: QUESTS_ME_KEY }) | ||
| if (!result.alreadyClaimed) playSfx("success") |
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.