chore: fix caps count for empty state + display count in sidebar. #1151
Conversation
WalkthroughAdds userCapsCount to dashboard data flow: computed in dashboard-data.ts, passed through layout to DashboardContexts, exposed via useDashboardContext, and rendered as extraText on the "My Caps" navbar item. Adjusts caps/page.tsx to count user videos within the active organization. Minor context usage tweak in Top.tsx. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant L as dashboard/layout.tsx
participant D as getDashboardData()
participant C as DashboardContexts (Provider)
participant N as Navbar Items (NavItem)
U->>L: Load dashboard
L->>D: Fetch dashboard data
D-->>L: { userCapsCount, ... } or error
alt success
L->>C: Provide context { userCapsCount, ... }
N->>C: useDashboardContext()
C-->>N: { userCapsCount, ... }
N->>N: Render "My Caps" with extraText = userCapsCount
else error
L->>C: Provide context { userCapsCount: null, ... }
N->>N: Render without count (null)
end
sequenceDiagram
autonumber
participant P as caps/page.tsx
participant DB as DB (videos ←→ organizations)
P->>DB: Count distinct videos WHERE ownerId = user AND orgId = activeOrg
DB-->>P: totalUserVideosInActiveOrg
P->>P: Use count in page rendering
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/app/(org)/dashboard/caps/page.tsx (1)
116-122: Consider using an inner join instead of left join.Since the
whereclause filters onorganizations.id, andvideos.orgIdis a required field (schema showsnanoIdRequired), an inner join would be more semantically appropriate and explicit about the relationship requirement.Apply this diff:
const totalCountResult = await db() .select({ count: count() }) .from(videos) - .leftJoin(organizations, eq(videos.orgId, organizations.id)) + .innerJoin(organizations, eq(videos.orgId, organizations.id)) .where( and( eq(videos.ownerId, userId), eq(organizations.id, user.activeOrganizationId), ), );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web/app/(org)/dashboard/Contexts.tsx(4 hunks)apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx(5 hunks)apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx(1 hunks)apps/web/app/(org)/dashboard/caps/page.tsx(1 hunks)apps/web/app/(org)/dashboard/dashboard-data.ts(4 hunks)apps/web/app/(org)/dashboard/layout.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
apps/web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for all client-side server state and data fetching in the web app
Web mutations should call Server Actions directly and perform targeted cache updates with setQueryData/setQueriesData rather than broad invalidations
Client code should use useEffectQuery/useEffectMutation and useRpcClient from apps/web/lib/EffectRuntime.ts; do not create ManagedRuntime inside components
Files:
apps/web/app/(org)/dashboard/caps/page.tsxapps/web/app/(org)/dashboard/layout.tsxapps/web/app/(org)/dashboard/_components/Navbar/Top.tsxapps/web/app/(org)/dashboard/Contexts.tsxapps/web/app/(org)/dashboard/dashboard-data.tsapps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
apps/web/app/**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Prefer Server Components for initial data in the Next.js App Router and pass initialData to client components
Files:
apps/web/app/(org)/dashboard/caps/page.tsxapps/web/app/(org)/dashboard/layout.tsxapps/web/app/(org)/dashboard/_components/Navbar/Top.tsxapps/web/app/(org)/dashboard/Contexts.tsxapps/web/app/(org)/dashboard/dashboard-data.tsapps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
**/*.{ts,tsx,js,jsx,rs}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not add inline, block, or docstring comments in any language; code must be self-explanatory
Files:
apps/web/app/(org)/dashboard/caps/page.tsxapps/web/app/(org)/dashboard/layout.tsxapps/web/app/(org)/dashboard/_components/Navbar/Top.tsxapps/web/app/(org)/dashboard/Contexts.tsxapps/web/app/(org)/dashboard/dashboard-data.tsapps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use strict TypeScript and avoid any; leverage shared types from packages
**/*.{ts,tsx}: Use a 2-space indent for TypeScript code.
Use Biome for formatting and linting TypeScript/JavaScript files by runningpnpm format.
Files:
apps/web/app/(org)/dashboard/caps/page.tsxapps/web/app/(org)/dashboard/layout.tsxapps/web/app/(org)/dashboard/_components/Navbar/Top.tsxapps/web/app/(org)/dashboard/Contexts.tsxapps/web/app/(org)/dashboard/dashboard-data.tsapps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js,jsx}: Use kebab-case for filenames for TypeScript/JavaScript modules (e.g.,user-menu.tsx).
Use PascalCase for React/Solid components.
Files:
apps/web/app/(org)/dashboard/caps/page.tsxapps/web/app/(org)/dashboard/layout.tsxapps/web/app/(org)/dashboard/_components/Navbar/Top.tsxapps/web/app/(org)/dashboard/Contexts.tsxapps/web/app/(org)/dashboard/dashboard-data.tsapps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
apps/web/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
On the client, always use
useEffectQueryoruseEffectMutationfrom@/lib/EffectRuntime; never callEffectRuntime.run*directly in components.
Files:
apps/web/app/(org)/dashboard/caps/page.tsxapps/web/app/(org)/dashboard/layout.tsxapps/web/app/(org)/dashboard/_components/Navbar/Top.tsxapps/web/app/(org)/dashboard/Contexts.tsxapps/web/app/(org)/dashboard/dashboard-data.tsapps/web/app/(org)/dashboard/_components/Navbar/Items.tsx
🧬 Code graph analysis (5)
apps/web/app/(org)/dashboard/caps/page.tsx (1)
packages/database/schema.ts (2)
organizations(152-180)videos(256-311)
apps/web/app/(org)/dashboard/layout.tsx (1)
apps/web/app/(org)/dashboard/dashboard-data.ts (3)
OrganizationSettings(29-31)Spaces(33-39)getDashboardData(43-310)
apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx (1)
apps/web/app/(org)/dashboard/Contexts.tsx (1)
useDashboardContext(51-51)
apps/web/app/(org)/dashboard/dashboard-data.ts (2)
packages/database/index.ts (1)
db(29-34)packages/database/schema.ts (1)
videos(256-311)
apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx (1)
apps/web/app/(org)/dashboard/Contexts.tsx (1)
useDashboardContext(51-51)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
- GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
- GitHub Check: Analyze (rust)
🔇 Additional comments (9)
apps/web/app/(org)/dashboard/dashboard-data.ts (4)
12-12: LGTM!The import is correctly added and used in the SQL query below.
89-89: LGTM!Correct initialization for the count variable.
185-197: LGTM!The SQL query correctly counts the user's videos within the active organization. The query structure is consistent with other queries in the file and properly handles the result with a fallback to 0.
297-297: LGTM!The return values are correctly typed and consistent with error handling patterns throughout the function.
Also applies to: 304-304
apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx (1)
50-50: LGTM!Valid cleanup removing the unused
activeOrganizationfrom the destructured context.apps/web/app/(org)/dashboard/layout.tsx (1)
36-36: LGTM!The state management for
userCapsCountis implemented correctly with proper initialization, success handling, error handling, and propagation to the context provider.Also applies to: 44-44, 52-52, 81-81
apps/web/app/(org)/dashboard/Contexts.tsx (1)
25-25: LGTM!The type definitions and context propagation for
userCapsCountare correctly implemented. The typenumber | nullappropriately handles both success and error states.Also applies to: 58-58, 72-72, 166-166
apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx (2)
53-53: LGTM!The
userCapsCountis correctly read from the dashboard context and assigned to the navigation item'sextraTextproperty.Also applies to: 59-59
440-440: LGTM!The
extraTextparameter is properly typed and conditionally rendered. The display logic correctly shows the count only when the value exists and the sidebar is not collapsed, which provides a good user experience.Also applies to: 452-452, 494-498
Summary by CodeRabbit