web: re-arrange cap card buttons, share page show owner, and more... #1156
Conversation
|
Warning Rate limit exceeded@ameer2468 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 13 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
WalkthroughTightened Caps empty-state early-return to require no folders; added a Share dialog and new share/download/settings actions to CapCard with environment-aware copy-link logic; changed CapCardButton icon prop to a JSX element; refactored ShareHeader to add owner avatar/name, buttonized share status, guarded title saves, and extended props for orgs/spaces. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant CapCard
participant Env as usePublicEnv
participant Dialog as SharingDialog
participant Clipboard
participant Toast
User->>CapCard: Click "Share"
CapCard->>Dialog: set isSharingDialogOpen = true
Note right of Dialog #E8F5E9: Sharing UI shown
User->>CapCard: Click "Copy link"
CapCard->>Env: retrieve webUrl / env flags
CapCard->>CapCard: build URL (prod/dev/domain rules)
CapCard->>Clipboard: writeText(URL)
Clipboard-->>CapCard: success/failure
CapCard->>Toast: show copied or error
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
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 (2)
apps/web/app/s/[videoId]/_components/ShareHeader.tsx (2)
38-50: Remove unused props or implement their intended functionality.The
userOrganizationsanduserSpacesprops are declared but never used in the component. This introduces unnecessary API surface and suggests incomplete implementation.If these props are not needed, remove them:
sharedOrganizations?: { id: string; name: string }[]; - userOrganizations?: { id: string; name: string }[]; sharedSpaces?: { id: string; name: string; iconUrl?: string; organizationId: string; }[]; - userSpaces?: { - id: string; - name: string; - iconUrl?: string; - organizationId: string; - }[]; spacesData?: Spaces[] | null;If they are intended for future use, please implement the functionality or document why they exist.
1-326: Fix indentation to follow coding guidelines.The file uses tabs for indentation instead of 2 spaces. As per coding guidelines: "Use a 2-space indent for TypeScript code. Use Biome for formatting and linting TypeScript/JavaScript files by running
pnpm format."Run the following command to auto-format the file:
#!/bin/bash # Description: Format the file using Biome as specified in coding guidelines. pnpm format apps/web/app/s/[videoId]/_components/ShareHeader.tsxBased on coding guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/app/(org)/dashboard/caps/Caps.tsx(1 hunks)apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx(5 hunks)apps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsx(2 hunks)apps/web/app/s/[videoId]/_components/ShareHeader.tsx(5 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/Caps.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/Caps.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/Caps.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/Caps.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/Caps.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/Caps.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsxapps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsxapps/web/app/s/[videoId]/_components/ShareHeader.tsx
🧬 Code graph analysis (3)
apps/web/app/(org)/dashboard/caps/Caps.tsx (1)
apps/web/app/(org)/dashboard/caps/components/EmptyCapState.tsx (1)
EmptyCapState(12-48)
apps/web/app/(org)/dashboard/caps/components/CapCard/CapCard.tsx (1)
apps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsx (1)
CapCardButton(18-44)
apps/web/app/s/[videoId]/_components/ShareHeader.tsx (1)
packages/ui-solid/src/Button.tsx (1)
Button(40-50)
⏰ 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 (4)
apps/web/app/s/[videoId]/_components/ShareHeader.tsx (4)
74-75: LGTM!The editing guard correctly prevents saving empty or unchanged titles, avoiding unnecessary API calls and potential data integrity issues.
222-222: LGTM!The input className matches the heading's responsive text sizing, ensuring consistent visual appearance during editing.
147-179: Approve: Button component from @cap/ui is React-compatible and correctly used.
213-260: LGTM — verifyuserSelectPropsselectsname&image
Confirm that theuserSelectPropsinference from theuserstable includes bothnameandimagefields to ensure the avatar fallback has the required data.
apps/web/app/(org)/dashboard/caps/components/CapCard/CapCardButton.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/app/s/[videoId]/_components/ShareHeader.tsx (1)
40-52: Remove unused prop definitions.The
userOrganizationsanduserSpacesprops are defined in the type but never destructured or used in the component. Remove them to reduce confusion and maintain a clean interface.Apply this diff:
sharedOrganizations?: { id: string; name: string }[]; - userOrganizations?: { id: string; name: string }[]; sharedSpaces?: { id: string; name: string; iconUrl?: string; organizationId: string; }[]; - userSpaces?: { - id: string; - name: string; - iconUrl?: string; - organizationId: string; - }[]; spacesData?: Spaces[] | null;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/app/s/[videoId]/_components/ShareHeader.tsx(6 hunks)apps/web/app/s/[videoId]/page.tsx(3 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/s/[videoId]/page.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/s/[videoId]/page.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/s/[videoId]/page.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/s/[videoId]/page.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/s/[videoId]/page.tsxapps/web/app/s/[videoId]/_components/ShareHeader.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/s/[videoId]/page.tsxapps/web/app/s/[videoId]/_components/ShareHeader.tsx
🧬 Code graph analysis (2)
apps/web/app/s/[videoId]/page.tsx (1)
packages/database/schema.ts (1)
users(58-110)
apps/web/app/s/[videoId]/_components/ShareHeader.tsx (2)
packages/database/schema.ts (1)
videos(277-332)packages/ui-solid/src/Button.tsx (1)
Button(40-50)
⏰ 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 (x86_64-pc-windows-msvc, windows-latest)
- GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
- GitHub Check: Analyze (rust)
🔇 Additional comments (8)
apps/web/app/s/[videoId]/page.tsx (3)
273-274: LGTM: Owner fields correctly retrieved from joined users table.The
ownerNameandownerImagefields are properly selected from theuserstable via the existingleftJoinon line 312. The nullable types align with the database schema.
368-369: LGTM: Type definitions correctly reflect database schema.The optional and nullable type annotations for
ownerNameandownerImageaccurately match the database schema and query results.
473-474: LGTM: Owner fields consistently included in updated query.Including
ownerNameandownerImagein the post-transcription query ensures the owner display data remains available throughout the video lifecycle.apps/web/app/s/[videoId]/_components/ShareHeader.tsx (5)
32-35: LGTM: Type extension correctly reflects incoming data shape.The optional and nullable types for
ownerNameandownerImagematch the data structure passed from the parent component.
76-77: LGTM: handleBlur logic properly guards against empty or unchanged titles.The addition of
trim()and the check for empty or unchanged values prevents unnecessary API calls and improves the user experience.
149-157: LGTM: Shared status converted to interactive Button component.The conversion from plain text to a
Buttoncomponent provides consistent styling and proper interactive semantics.
173-181: LGTM: Non-interactive shared status properly styled.The
pointer-events-noneclass correctly disables interaction for non-owners while maintaining visual consistency with the owner's interactive buttons.
224-224: LGTM: Input styling matches display heading.The className addition ensures the editable input maintains consistent width and text sizing with the display heading below.
This PR:
Summary by CodeRabbit