Enhance Study Mode: add navbar link and UI/UX improvements #115
Conversation
|
@AadityaHande is attempting to deploy a commit to the devsuraj Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR introduces a comprehensive Study Mode redesign with enhanced CSS utilities for animations and gradients, updated navigation featuring Study Mode links with icons, and substantial UI improvements to the StudyMode component including styled stat pills, gradient progress tracking, and redesigned answer controls. Changes
Sequence DiagramssequenceDiagram
participant User
participant Navbar
participant StudyMode
participant UI as Study UI
User->>Navbar: Click "Study Mode"
Navbar->>StudyMode: Navigate to /flashcards?mode=study
StudyMode->>StudyMode: Initialize study session<br/>(useCallback triggered)
StudyMode->>UI: Render enhanced header<br/>with gradient + icon
rect rgb(200, 220, 255)
Note over StudyMode,UI: Study Session Loop
UI->>UI: Display flashcard with<br/>gradient border
UI->>UI: Show stat pills<br/>(index, correct, incorrect)
UI->>UI: Animate progress bar<br/>with shine effect
User->>UI: Interact with card<br/>(flip/answer/skip)
UI->>UI: Update stats & progress<br/>with transitions
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Rationale: While package.json and Navbar changes are straightforward, the StudyMode component contains substantial refactoring affecting layout, styling, interactivity, and hooks logic across multiple sections. The globals.css adds significant new utilities but follows repetitive patterns. The heterogeneous nature of changes across styling, navigation, and component logic—combined with the density of StudyMode modifications—requires careful review of multiple reasoning paths per area. Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 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 |
|
pl check this and tell if any changes required |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
package.json (1)
35-42: Likely stray packages:button,label,dropdown-menuThese look like tiny/unrelated registry packages that can shadow your local UI components and introduce supply‑chain risk. You shouldn’t depend on them if you use components under
src/components/ui.Apply this diff:
- "button": "^1.1.1", - "dropdown-menu": "^0.1.1", - "label": "^0.2.2",Then ensure imports point at your local components, e.g.
@/components/ui/button.src/components/study/StudyMode.tsx (2)
63-69: Bug: falsy checks on numeric touch coords
if (!touchStart || !touchEnd)fails when coord is 0. Use null checks.- const onTouchEnd = () => { - if (!touchStart || !touchEnd) return; + const onTouchEnd = () => { + if (touchStart === null || touchEnd === null) return;
117-160: Handle non-2xx responses from the API
fetchwon’t throw on 4xx/5xx; you’ll show success UI and advance even if the server rejected the write.- await fetch('/api/study/record', { + const rec = await fetch('/api/study/record', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sessionId, flashcardId: currentCard.id, isCorrect, difficulty, timeSpent: Math.floor((Date.now() - studyStats.startTime) / 1000) }) }); + if (!rec.ok) { + throw new Error(`record failed: ${rec.status}`); + }Apply similar
okchecks incompleteStudySession.
🧹 Nitpick comments (10)
package.json (1)
42-42: Optional: update lucide-reactYou’re on
lucide-react@^0.428.0. Recent releases include fixes and new icons; no breaking API expected for the core props. Consider bumping to the latest stable (e.g., 0.544.x). Based on learnings.src/components/Navbar.tsx (4)
7-7: Remove unused import
ChevronDownisn’t used.-import { ArrowRight, Menu, X, ChevronDown, Sparkles, BookOpen, Brain } from "lucide-react"; +import { ArrowRight, Menu, X, Sparkles, BookOpen, Brain } from "lucide-react";
16-16: Remove unused variable
setThemeis not used.- const { setTheme } = useTheme(); + const { } = useTheme(); // or remove the line if not needed
95-102: Icons should be decorative; add focus-visible styles for keyboard usersAdd
aria-hiddenandfocusable="false"to icons, and ensure links show a visible focus ring.- <Link + <Link href={link.href} - className="group px-4 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/30 rounded-lg transition-all duration-200 border border-purple-200 dark:border-purple-700 hover:border-purple-300 dark:hover:border-purple-600 flex items-center gap-2 hover:shadow-md" + className="group px-4 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-900/30 rounded-lg transition-all duration-200 border border-purple-200 dark:border-purple-700 hover:border-purple-300 dark:hover:border-purple-600 flex items-center gap-2 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900" > - <Icon className="h-4 w-4 group-hover:scale-110 transition-transform duration-200" /> + <Icon aria-hidden focusable="false" className="h-4 w-4 group-hover:scale-110 transition-transform duration-200" /> {link.label} </Link>Repeat the same for the mobile links.
Also applies to: 230-237
86-105: Optional: active-link state for a11yConsider indicating the current page with
aria-current="page"and a selected style (useusePathname()to compare). Improves navigation for screen reader users.Also applies to: 220-240
src/app/globals.css (2)
185-187: Avoid global* { transition-colors }— adds jankApplying transitions to all elements can hurt performance during theme switches and general rendering.
-* { - @apply transition-colors duration-200; -} +/* Limit to interactive/semantic elements to reduce layout thrash */ +html :where(a, button, [role="button"], [role="tab"], input, select, textarea) { + @apply transition-colors duration-200; +}
175-182: Respect reduced motion preferences for animationsWrap key animations with
prefers-reduced-motionso users who opt out aren’t forced to see them.@keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } -.animate-pulse-scale { - animation: pulse-scale 2s ease-in-out infinite; -} +@media (prefers-reduced-motion: no-preference) { + .animate-pulse-scale { animation: pulse-scale 2s ease-in-out infinite; } +} @keyframes progress-shine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } -.progress-shine { - background: linear-gradient( +.progress-shine { + background: linear-gradient( 90deg, rgba(168, 85, 247, 1) 0%, rgba(59, 130, 246, 1) 50%, rgba(168, 85, 247, 1) 100% ); background-size: 200% auto; - animation: progress-shine 3s linear infinite; + @media (prefers-reduced-motion: no-preference) { + animation: progress-shine 3s linear infinite; + } }Also applies to: 204-218
src/components/study/StudyMode.tsx (3)
113-115: Use functional state update for flipPrevents stale state issues during rapid interactions.
-const handleFlip = () => { - setIsFlipped(!isFlipped); -}; +const handleFlip = () => { + setIsFlipped((prev) => !prev); +};
214-246: A11y: mark decorative icons and label the flip action
- Add
aria-hiddento all decorative icons (Brain, Target, CheckCircle, XCircle, etc.).- Add
aria-label="Flip card"to the flip button.- Optionally add
aria-labelto the three answer buttons for clarity.-<Brain className="h-6 w-6 sm:h-7 sm:w-7 text-purple-600 dark:text-purple-400" /> +<Brain aria-hidden focusable="false" className="h-6 w-6 sm:h-7 sm:w-7 text-purple-600 dark:text-purple-400" /> ... -<Button variant="ghost" size="sm" onClick={handleFlip} +<Button variant="ghost" size="sm" onClick={handleFlip} aria-label="Flip card" className="bg-white/80 dark:bg-gray-800/80 ..." >Also applies to: 329-361, 316-325
47-50: Optional: clamp progress and avoid NaN on empty decksEven though you guard render, compute safely.
-const progress = ((currentIndex) / flashcards.length) * 100; +const progress = flashcards.length + ? Math.min(100, Math.max(0, (currentIndex / flashcards.length) * 100)) + : 0;Also applies to: 248-253
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
package.json(1 hunks)src/app/globals.css(1 hunks)src/components/Navbar.tsx(4 hunks)src/components/study/StudyMode.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/study/StudyMode.tsx (4)
src/components/ui/progress.tsx (1)
Progress(28-28)src/components/ui/card.tsx (2)
Card(79-79)CardContent(79-79)src/components/ui/badge.tsx (1)
Badge(36-36)src/components/ui/button.tsx (1)
Button(56-56)
🔇 Additional comments (1)
src/components/study/StudyMode.tsx (1)
248-259: Verify gradient actually styles the filled portionDepending on your
Progressimplementation,classNamemay apply to the container, not the indicator. If so, the gradient won’t reflect the current value.Try this temporary approach to ensure the gradient moves with value:
-<div className="relative h-2.5 sm:h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden"> - <Progress - value={progress} - className="h-full bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-500 dark:to-blue-500 transition-all duration-500 ease-out" - /> -</div> +<div className="relative h-2.5 sm:h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden"> + <div + className="h-full progress-shine rounded-full" + style={{ width: `${Math.max(0, Math.min(100, Math.round(progress)))}%` }} + /> +</div>Or expose an
indicatorClassNameprop on yourProgresscomponent and apply the gradient there.
|
Please review and let me know if any further changes are required @Suraj-kumar00 🤝🏻 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
|
Hey @AadityaHande, the build is failing 
|
2 participants
This pull request introduces a comprehensive visual and usability upgrade to the Study Mode experience and navigation, focusing on improved theming, modern UI feedback, and enhanced accessibility for both light and dark modes. It also updates internal dependency paths for toast components. The most significant changes are summarized below:
Study Mode UI/UX Enhancements:
StudyModecomponent received a major visual overhaul: headers, progress bars, flashcards, and answer buttons now feature gradient backgrounds, improved color contrast, and smoother transitions for both light and dark themes. Interactive elements such as buttons and cards have enhanced hover effects and animations for better feedback. [1] [2]globals.cssto support Study Mode improvements, including card scaling, gradient backgrounds, progress bar shine, button pulsing, and enhanced navbar link hovers.Navigation Improvements:
Navbarnow displays new signed-in navigation links for "Flashcard Sets" and "Study Mode," each with relevant icons (BookOpen,Brain). These links have improved styling, including icons, hover effects, and better support for mobile and dark mode. [1] [2] [3] [4] [5] [6]Dependency Path Updates:
package.jsonwas updated to change thetoastanduse-toastdependencies fromlink:tofile:references, improving local package resolution.Summary by CodeRabbit
New Features
Style