Repository navigation
feat: UI external pages design overhaul - #9
Merged
Merged
Conversation
…code handling - Created a new component `TakeAQuizStrip` that allows users to enter a quiz link or code to start a quiz. - Implemented validation for quiz codes and links, including a regex check for code format. - Integrated Supabase to fetch quiz data based on the provided code. - Added a new column `code` to the `quizzes` table in the database with a unique index for efficient lookups.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
Next review available in: 28 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (16)
📝 WalkthroughWalkthroughThe PR adds a themed PREP application shell, redesigned homepage, authentication and quiz-bank interfaces, quiz-code creation and lookup, animated components, updated documentation styling, and supporting dependencies and scripts. ChangesApplication foundation
Public experience
Documentation
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Visitor
participant ExternalNav
participant ThemeProvider
participant TakeAQuizStrip
participant Supabase
Visitor->>ExternalNav: toggle theme
ExternalNav->>ThemeProvider: setTheme(light or dark)
ThemeProvider-->>ExternalNav: update resolvedTheme
Visitor->>TakeAQuizStrip: submit quiz code
TakeAQuizStrip->>Supabase: query quiz by code
Supabase-->>TakeAQuizStrip: return quiz id
TakeAQuizStrip-->>Visitor: navigate to quiz route
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 21
🤖 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/globals.css`:
- Around line 30-32: Wrap the global transition rule under the `*` selector in
an `@media (prefers-reduced-motion: no-preference)` block so transitions apply
only when users have not requested reduced motion; preserve the existing
transition properties and timing.
In `@docs/PREP_INTERNAL_PRT.md`:
- Around line 79-81: Remove the unauthenticated insert policies for
quiz_attempts, including the corresponding policy block around the later
referenced section. Route attempt submission through a server endpoint or action
that verifies the user’s quiz access, derives the score server-side, and writes
only validated attempt data.
In `@docs/PREP_UI_PRT.md`:
- Around line 30-38: Add a darker light-mode accent-text token alongside the
existing light theme tokens, retaining `#B8960A` for fills. Update normal-text
accent usages in DocsSidebar and CSV validation feedback to use the new
--color-accent-text token, while leaving fill and accent-dim usages unchanged.
In `@package.json`:
- Around line 16-24: Remove the unused next-themes dependency from the
dependencies list, since app/layout.tsx uses the custom ThemeProvider from
src/lib/theme.tsx rather than next-themes; update the lockfile if required by
the package manager.
In `@src/components/auth/AuthPageClient.tsx`:
- Around line 7-33: Remove the unused AuthPageClient component and its file,
including imports and implementation; keep the existing app/auth/page.tsx
AuthView rendering unchanged as the sole auth entry point.
In `@src/components/docs/DocsLayout.tsx`:
- Around line 36-45: Update the docs section select in DocsLayout to remove the
focus:outline-none suppression and add a visible focus-visible styling rule,
such as a ring or border change, so keyboard users can clearly identify the
focused control while preserving the existing styling.
In `@src/components/docs/GettingStarted.tsx`:
- Around line 39-44: Update the step-number span in GettingStarted so it uses
the theme text color token instead of the hardcoded text-white class, preserving
readable contrast against the var(--color-surface-raised) background in light
mode.
In `@src/components/docs/Troubleshooting.tsx`:
- Around line 67-75: Update the error message styling in the Troubleshooting
component to use a theme-aware var(--color-error) token instead of the hardcoded
`#EF4444` value, and define the token with separate light and dark theme values in
the existing color token configuration.
In `@src/components/ExternalNav.tsx`:
- Around line 45-51: Update the theme toggle button in ExternalNav to explicitly
use button type "button", preserving its existing onClick behavior and
presentation.
In `@src/components/home/Hero.tsx`:
- Around line 39-60: Update the internal CTA elements in the Hero component to
use Next.js Link instead of raw anchor tags for the /auth and /take routes,
preserving their existing classes, styles, and labels.
In `@src/components/home/TakeAQuizStrip.tsx`:
- Around line 82-87: Remove the autoFocus prop from the quiz code input in the
TakeAQuizStrip component, while preserving its value, change handling,
placeholder, and other input behavior so visitors choose when to focus the
field.
In `@src/components/quiz-bank/QuizBankCard.tsx`:
- Around line 6-10: Remove the local DIFFICULTY_STYLES definition in
QuizBankCard and import and reuse the exported difficulty-style map from the
shared quiz-bank constants. Update the component’s references to use that
imported map, preserving the existing styling behavior.
- Around line 71-74: Update the rating display in QuizBankCard so a numeric
average_rating of 0 renders as “0.0” rather than the unavailable marker. Check
explicitly for a missing or nullish value instead of relying on truthiness,
while preserving the existing toFixed(1) formatting for all numeric ratings.
- Line 75: Update the times_taken formatting in QuizBankCard to call
toLocaleString with the application’s fixed locale, such as en-US, instead of
relying on the runtime default locale. Keep the existing “taken” label and
numeric formatting behavior unchanged.
In `@src/components/quiz-bank/QuizBankFilters.tsx`:
- Around line 43-103: Restore accessible names for the category, difficulty, and
sort controls in QuizBankFilters by adding associated labels or equivalent
aria-label attributes to each select. Ensure each control has a unique,
descriptive accessible name while preserving the existing values and change
handlers.
In `@src/components/quiz/TakeQuizInputClient.tsx`:
- Line 94: Remove the autoFocus prop from the quiz input in TakeQuizInputClient
so the field no longer receives focus automatically on page load; leave the
input’s other behavior unchanged.
In `@src/hooks/useCreateQuiz.ts`:
- Around line 95-119: Update the successful retry path in the quiz creation flow
to set isCreatingQuiz to false before returning, alongside the existing quiz
state update and success toast. Keep the failure-path reset and duplicate-code
retry behavior unchanged.
In `@src/lib/theme.tsx`:
- Around line 34-47: Update the theme context logic to add an effect keyed by
theme that invokes applyTheme(theme) whenever the synchronized theme changes,
including storage-driven cross-tab updates. Keep the existing setTheme behavior
and applyTheme implementation unchanged.
In `@src/views/Auth/AuthForm.tsx`:
- Around line 20-26: Update the signUp and signIn contract and their callers so
authentication failures are propagated or represented by an unsuccessful result
instead of resolving as success. In the AuthForm authentication flow, show each
success toast only after confirming the corresponding auth operation succeeded,
while preserving failure handling without displaying a success message.
- Around line 88-128: Associate the Email and Password labels in AuthForm with
their corresponding input controls by adding unique id attributes to both inputs
and matching htmlFor attributes to the labels. Keep the existing form behavior
and styling unchanged.
In `@supabase/migrations/20260728000000_add_code_to_quizzes.sql`:
- Line 4: Update the idx_quizzes_code creation in the migration to use a
deployment-safe concurrent unique index strategy, and configure the migration
runner so this statement executes outside a transaction because concurrent index
creation cannot run within one. Preserve the existing partial uniqueness
condition for non-null code values.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c1f3b365-3701-444b-9a55-1257b6454b20
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (43)
app/auth/page.tsxapp/globals.cssapp/layout.tsxapp/page.tsxapp/quiz-bank/page.tsxdocs/PREP_INTERNAL_PRT.mddocs/PREP_UI_PRT.mdpackage.jsonsrc/components/ExternalNav.tsxsrc/components/auth/AuthPageClient.tsxsrc/components/docs/CSVGuide.tsxsrc/components/docs/DocsLayout.tsxsrc/components/docs/DocsSidebar.tsxsrc/components/docs/GettingStarted.tsxsrc/components/docs/QuestionTips.tsxsrc/components/docs/Troubleshooting.tsxsrc/components/home/CTASection.tsxsrc/components/home/FadeUp.tsxsrc/components/home/Features.tsxsrc/components/home/Footer.tsxsrc/components/home/Hero.tsxsrc/components/home/HeroCard.tsxsrc/components/home/HowItWorks.tsxsrc/components/home/QuizBankPreview.tsxsrc/components/home/TakeAQuizStrip.tsxsrc/components/home/WhoItsFor.tsxsrc/components/quiz-bank/QuizBankCard.tsxsrc/components/quiz-bank/QuizBankEmpty.tsxsrc/components/quiz-bank/QuizBankError.tsxsrc/components/quiz-bank/QuizBankFilters.tsxsrc/components/quiz-bank/QuizBankGrid.tsxsrc/components/quiz-bank/QuizBankHero.tsxsrc/components/quiz-bank/QuizBankLoading.tsxsrc/components/quiz/TakeQuizInputClient.tsxsrc/constants/home.tssrc/constants/quizBank.tssrc/hooks/useCreateQuiz.tssrc/lib/theme.tsxsrc/lib/types.tssrc/views/Auth/AuthForm.tsxsrc/views/Auth/AuthView.tsxsrc/views/QuizBankView.tsxsupabase/migrations/20260728000000_add_code_to_quizzes.sql
Comment on lines
+20
to
+26
| if (isSignup) { | ||
| await signUp(email, password); | ||
| toast.success("Account created successfully!"); | ||
| } else { | ||
| await signIn(email, password); | ||
| toast.success("Logged in successfully!"); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Do not show a success toast when authentication fails.
signUp and signIn catch Supabase errors internally and resolve without throwing, so these success toasts run even after rejected credentials or failed registration. Change the auth-method contract to propagate a failure/result, then toast success only after a confirmed successful response.
🤖 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 `@src/views/Auth/AuthForm.tsx` around lines 20 - 26, Update the signUp and
signIn contract and their callers so authentication failures are propagated or
represented by an unsuccessful result instead of resolving as success. In the
AuthForm authentication flow, show each success toast only after confirming the
corresponding auth operation succeeded, while preserving failure handling
without displaying a success message.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@docs/PREP_UI_PRT.md`:
- Around line 1575-1583: Update the checklist entries in the documented
validation checklist to use valid Markdown task-list syntax by changing each “-
[]” marker to “- [ ]”. Apply this consistently to all listed items, preserving
their wording and order.
In `@src/components/ExternalNav.tsx`:
- Around line 21-50: Update the ExternalNav component’s navigation layout to add
mobile breakpoint behavior, collapsing or hiding lower-priority links behind a
responsive menu while keeping the logo, all destinations, sign-in action, and
theme toggle reachable. Preserve the existing desktop single-row presentation
and ensure the mobile layout does not overflow narrow viewports.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 626ca660-276f-4f13-8dc0-69b2a797f7af
📒 Files selected for processing (3)
docs/PREP_UI_PRT.mdsrc/components/ExternalNav.tsxsrc/components/home/Hero.tsx
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Mistura <101476258+Truella@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Mistura <101476258+Truella@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Mistura <101476258+Truella@users.noreply.github.com>
…used AuthPageClient component
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Mistura <101476258+Truella@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Signed-off-by: Mistura <101476258+Truella@users.noreply.github.com>
…n components for consistency
8 tasks done
Merged
This branch was successfully deployed
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
Full external pages UI overhaul. Token-based design system with dark/light theme switching via
next-themes. DM Serif Display for display headings, JetBrains Mono for data/code, Inter for UI text. Homepage rebuilt with 6 content sections and an animated hero carousel cycling through 5 CBT-style demo questions across different categories and levels — correct answer highlights in amber then slides to the next question via Framer Motion. Quiz Bank gets a proper grid layout with skeleton loading, a redesigned empty state, and updated cards with amber CTAs. Take a Quiz entry page simplified and focused. Docs section gets ExternalNav and full token system pass with amber active states on the sidebar.New dependencies
framer-motionnext-themesChanged files
app/globals.cssapp/layout.tsxapp/page.tsxapp/quiz-bank/page.tsxsrc/components/ExternalNav.tsx(new)src/components/home/HeroCard.tsx(new)src/components/home/FadeUp.tsx(new)src/components/quiz/TakeQuizInputClient.tsxsrc/views/QuizBankView.tsxsrc/components/quiz-bank/QuizBankCard.tsxsrc/components/quiz-bank/QuizBankFilters.tsxsrc/components/docs/DocsLayout.tsxsrc/components/docs/DocsSidebar.tsxsrc/components/docs/GettingStarted.tsxsrc/components/docs/CSVGuide.tsxsrc/components/docs/Troubleshooting.tsxsrc/components/docs/QuestionTips.tsxChecklist
npm install framer-motion next-themescompletednpx tsc --noEmitpassesnpx next lintpassesconsole.logstatementsmainSummary by CodeRabbit