ui: make sheet mob. responsive #170
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds Next.js build optimizations, introduces an ActiveTag UI component, refactors account and sheet pages to use memoized internal components and hooks for performance, tweaks a module label, and configures subscription query caching. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant UI as Sheet Page (UI)
participant Row as SheetTableRow (memo)
participant Hook as useSubscription / tRPC
participant API as Backend tRPC
rect rgb(220,235,255)
Note right of UI: Page renders\n(useMemo totals, handlers)
end
UI->>Hook: query subscriptionStatus (cached)
Hook->>API: fetch subscriptionStatus (if stale)
API-->>Hook: subscription data
Hook-->>UI: isPaidUser
UI->>Row: render rows with isPaidUser, handlers
Row->>Hook: mutate completedSteps (on checkbox)
Hook->>API: mutation (onMutate -> optimistic update)
API-->>Hook: mutation result
Hook-->>Row: settled (revalidate/update)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 |
![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 (1)
apps/web/src/data/sheet/module-8.ts (1)
5-9: Fix title inconsistency in docContent.The module
namewas shortened to "Adhoc: How to learn anything fast?" but thedocContentheader on Line 7 still contains the old title "Adhoc: How to learn anything fast while contributing?". These should match for consistency.Apply this diff to align the titles:
docContent: ` - <h1>Adhoc: How to learn anything fast while contributing?</h1> + <h1>Adhoc: How to learn anything fast?</h1> <p>Strategies and techniques for learning quickly while actively contributing to OPEN SOURCE projects.</p> `,
🧹 Nitpick comments (4)
apps/web/next.config.js (1)
15-18: LGTM! Consider removing redundant swcMinify.The
optimizePackageImportsconfiguration is a valid optimization for tree-shaking icon libraries. However,swcMinify: truehas been the default since Next.js 13 and is redundant in Next.js 15.Apply this diff to remove the redundant setting:
experimental: { optimizePackageImports: ['lucide-react', '@heroicons/react'], }, - swcMinify: true,apps/web/src/components/ui/ActiveTag.tsx (1)
1-23: Consider using theme variables instead of hardcoded colors.The component uses hardcoded hex values (
#002d21,#00bd7c) for colors. For better maintainability and consistency with the design system, consider using CSS variables or Tailwind theme colors.If theme variables exist for these colors (e.g.,
ox-active-bg,ox-active-text), refactor to use them:<span className={cn( "inline-flex items-center justify-center", "px-2 py-0.5 rounded-lg", - "bg-[#002d21] text-[#00bd7c]", + "bg-ox-active-bg text-ox-active-text", "text-xs font-sm", - "border border-[#00bd7c]", + "border border-ox-active-text", className )} > {text} </span>Otherwise, define these colors in your Tailwind config for reusability.
apps/web/src/app/(main)/dashboard/account/page.tsx (1)
9-54: LGTM! Consider simplifying plan calculation.The memoization pattern is good, but the
useMemofor theplanvariable (Line 14) is unnecessary overhead for a simple ternary operation. Direct computation would be more efficient.Apply this diff to simplify:
- const plan = useMemo(() => (isPaidUser ? "Pro" : "Free"), [isPaidUser]); + const plan = isPaidUser ? "Pro" : "Free";apps/web/src/app/(main)/dashboard/sheet/page.tsx (1)
203-314: LGTM! Proper memoization patterns.The callback memoization prevents unnecessary re-renders of child components. All dependency arrays are correctly specified.
Minor optimization:
totalModuleson Line 218 could be a simple constant sincesheetModules.lengthdoesn't change:-const totalModules = useMemo(() => sheetModules.length, []); +const totalModules = sheetModules.length;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/web/next.config.js(1 hunks)apps/web/src/app/(main)/dashboard/account/page.tsx(1 hunks)apps/web/src/app/(main)/dashboard/sheet/page.tsx(8 hunks)apps/web/src/app/(main)/sheet/[moduleId]/page.tsx(1 hunks)apps/web/src/components/ui/ActiveTag.tsx(1 hunks)apps/web/src/data/sheet/module-8.ts(1 hunks)apps/web/src/hooks/useSubscription.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
apps/web/src/app/(main)/dashboard/account/page.tsx (2)
apps/web/src/components/ui/ActiveTag.tsx (1)
ActiveTag(8-23)apps/web/src/hooks/useSubscription.ts (1)
useSubscription(11-77)
apps/web/src/components/ui/ActiveTag.tsx (2)
apps/web/src/lib/utils.ts (1)
cn(4-6)apps/web/src/components/ui/badge.tsx (2)
Badge(30-34)BadgeProps(26-28)
apps/web/src/app/(main)/dashboard/sheet/page.tsx (7)
apps/web/src/data/sheet/types.ts (1)
SheetModule(1-7)apps/web/src/data/sheet/sheet.ts (2)
SheetModule(35-35)sheetModules(36-69)apps/web/src/components/icons/icons.tsx (1)
Youtube(200-202)apps/web/src/components/ui/ActiveTag.tsx (1)
ActiveTag(8-23)apps/web/src/components/sheet/OpensoxProBadge.tsx (1)
OpensoxProBadge(8-28)apps/web/src/hooks/useSubscription.ts (1)
useSubscription(11-77)apps/web/src/components/sheet/ProgressBar.tsx (1)
ProgressBar(11-64)
🔇 Additional comments (5)
apps/web/src/app/(main)/sheet/[moduleId]/page.tsx (1)
178-178: LGTM! Mobile-friendly text improvement.The shortened badge text "Soon" is more appropriate for mobile displays while maintaining clarity.
apps/web/src/app/(main)/dashboard/sheet/page.tsx (4)
3-24: LGTM! Well-organized imports.The additional imports support the memoization strategy and new ActiveTag component, aligning with the performance optimization goals of this PR.
26-33: LGTM! Column definitions updated.The table columns are appropriately defined with the "Live Sessions" column added for the new isPaidUser feature.
35-131: LGTM! Well-structured memoized row component.The
SheetTableRowmemo optimization is excellent for list rendering performance. The component properly handles:
- Coming Soon state with appropriate disabled/visual states
- Conditional rendering based on
isPaidUser- Proper prop typing and event handling
329-424: LGTM! Mobile-responsive layout improvements.The responsive width constraints and minimum table widths ensure proper rendering across device sizes. The custom scrollbar styling enhances the mobile experience while maintaining desktop usability.
Summary by CodeRabbit
New Features
UI Improvements