feat: add tooltip in TabBar #515
Conversation
|
@Pratiyankkumar is attempting to deploy a commit to the OpenCut OSS Team on Vercel. A member of the Team first needs to authorize it. |
👷 Deploy request for appcut pending review.Visit the deploys page to approve it
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe TabBar component was updated to wrap each tab icon with a Tooltip that displays the tab's label on hover, using a new "sidebar" visual variant. The Tooltip component itself was refactored to use class-variance-authority (cva) for managing multiple style variants, and its API was extended to support these variants. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TabBar
participant Tooltip
User->>TabBar: Hover over tab icon
TabBar->>Tooltip: Show Tooltip (label, sidebar variant, right side)
Tooltip-->>User: Display tooltip with sidebar styling and arrow
User->>TabBar: Move mouse away
TabBar->>Tooltip: Hide Tooltip
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (2)
apps/web/src/components/editor/media-panel/tabbar.tsx (2)
89-89: Consider removing redundant opacity class.The icon has both
opacity-100andhover:opacity-75classes, but sinceopacity-100is the default, it's redundant.-<tab.icon className="size-[1.1rem]! opacity-100 hover:opacity-75" /> +<tab.icon className="size-[1.1rem]! hover:opacity-75" />
92-92: Simplify redundant text color classes.The tooltip content has redundant text color classes that could be simplified.
-<div className="dark:text-base-gray-950 text-black text-sm font-medium leading-none dark:text-white">{tab.label}</div> +<div className="text-black dark:text-white text-sm font-medium leading-none">{tab.label}</div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/components/editor/media-panel/tabbar.tsx(2 hunks)apps/web/src/components/ui/tooltip.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
**/*.{jsx,tsx}: Don't useaccessKeyattribute on any HTML element.
Don't setaria-hidden="true"on focusable elements.
Don't add ARIA roles, states, and properties to elements that don't support them.
Don't use distracting elements like<marquee>or<blink>.
Only use thescopeprop on<th>elements.
Don't assign non-interactive ARIA roles to interactive HTML elements.
Make sure label elements have text content and are associated with an input.
Don't assign interactive ARIA roles to non-interactive HTML elements.
Don't assigntabIndexto non-interactive HTML elements.
Don't use positive integers fortabIndexproperty.
Don't include "image", "picture", or "photo" in img alt prop.
Don't use explicit role property that's the same as the implicit/default role.
Make static elements with click handlers use a valid role attribute.
Always include atitleelement for SVG elements.
Give all elements requiring alt text meaningful information for screen readers.
Make sure anchors have content that's accessible to screen readers.
AssigntabIndexto non-interactive HTML elements witharia-activedescendant.
Include all required ARIA attributes for elements with ARIA roles.
Make sure ARIA properties are valid for the element's supported roles.
Always include atypeattribute for button elements.
Make elements with interactive roles and handlers focusable.
Give heading elements content that's accessible to screen readers (not hidden witharia-hidden).
Always include alangattribute on the html element.
Always include atitleattribute for iframe elements.
AccompanyonClickwith at least one of:onKeyUp,onKeyDown, oronKeyPress.
AccompanyonMouseOver/onMouseOutwithonFocus/onBlur.
Include caption tracks for audio and video elements.
Use semantic elements instead of role attributes in JSX.
Make sure all anchors are valid and navigable.
Ensure all ARIA properties (aria-*) are valid.
Use valid, non-abstract ARIA roles for elements with...
Files:
apps/web/src/components/editor/media-panel/tabbar.tsxapps/web/src/components/ui/tooltip.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
**/*.{js,jsx,ts,tsx}: Don't use consecutive spaces in regular expression literals.
Don't use theargumentsobject.
Don't use the comma operator.
Don't write functions that exceed a given Cognitive Complexity score.
Don't use unnecessary boolean casts.
Don't use unnecessary callbacks with flatMap.
Use for...of statements instead of Array.forEach.
Don't create classes that only have static members (like a static namespace).
Don't use this and super in static contexts.
Don't use unnecessary catch clauses.
Don't use unnecessary constructors.
Don't use unnecessary continue statements.
Don't export empty modules that don't change anything.
Don't use unnecessary escape sequences in regular expression literals.
Don't use unnecessary labels.
Don't use unnecessary nested block statements.
Don't rename imports, exports, and destructured assignments to the same name.
Don't use unnecessary string or template literal concatenation.
Don't use String.raw in template literals when there are no escape sequences.
Don't use useless case statements in switch statements.
Don't use ternary operators when simpler alternatives exist.
Don't use uselessthisaliasing.
Don't initialize variables to undefined.
Don't use the void operators (they're not familiar).
Use arrow functions instead of function expressions.
Use Date.now() to get milliseconds since the Unix Epoch.
Use .flatMap() instead of map().flat() when possible.
Use literal property access instead of computed property access.
Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.
Use concise optional chaining instead of chained logical expressions.
Use regular expression literals instead of the RegExp constructor when possible.
Don't use number literal object member names that aren't base 10 or use underscore separators.
Remove redundant terms from logical expressions.
Use while loops instead of for loops when you don't need initializer and update expressions.
Don't reassign const variables....
Files:
apps/web/src/components/editor/media-panel/tabbar.tsxapps/web/src/components/ui/tooltip.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Don't use primitive type aliases or misleading types.
Don't use empty type parameters in type aliases and interfaces.
Don't use any or unknown as type constraints.
Don't return a value from a function with the return type 'void'.
Don't use the TypeScript directive @ts-ignore.
Don't use TypeScript enums.
Don't export imported variables.
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.
Don't use TypeScript namespaces.
Don't use non-null assertions with the!postfix operator.
Don't use parameter properties in class constructors.
Don't use user-defined types.
Useas constinstead of literal types and type annotations.
Use eitherT[]orArray<T>consistently.
Initialize each enum member value explicitly.
Useexport typefor types.
Useimport typefor types.
Make sure all enum members are literal values.
Don't use TypeScript const enum.
Don't declare empty interfaces.
Don't let variables evolve into any type through reassignments.
Don't use the any type.
Don't misuse the non-null assertion operator (!) in TypeScript files.
Don't use implicit any type on variable declarations.
Don't merge interfaces and classes unsafely.
Don't use overload signatures that aren't next to each other.
Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.
Use consistent accessibility modifiers on class properties and methods.
Use function types instead of object types with call signatures.
Don't use void type outside of generic or return types.
**/*.{ts,tsx}: Don't use TypeScript enums.
Don't export imported variables.
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.
Don't use TypeScript namespaces.
Don't use non-null assertions with the!postfix operator.
Don't use parameter properties in class constructors.
Don't use user-defined types.
Useas constinstead of literal types and...
Files:
apps/web/src/components/editor/media-panel/tabbar.tsxapps/web/src/components/ui/tooltip.tsx
🧠 Learnings (16)
📓 Common learnings
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{jsx,tsx} : Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/ui/sponsor-button.tsx:22-22
Timestamp: 2025-07-30T23:19:36.977Z
Learning: Tailwind CSS v4 introduces new `xs` size variants for utilities including `backdrop-blur-xs` (4px blur radius), `shadow-xs`, and other sizing utilities that were not available in v3. It also adds 3D transform utilities, expanded gradient APIs, container queries, and font stretch utilities.
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/ui/checkbox.tsx:16-17
Timestamp: 2025-07-30T23:20:36.075Z
Learning: Tailwind CSS v4 introduces new `xs` size variants for utilities including `backdrop-blur-xs`, `shadow-xs`, and other sizing utilities that were not available in v3. It also adds 3D transform utilities, expanded gradient APIs, container queries, and font stretch utilities.
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/ui/radio-group.tsx:31-31
Timestamp: 2025-07-30T23:20:22.117Z
Learning: Tailwind CSS v4 introduces the `outline-hidden` utility class (and its variants like `focus:outline-hidden`, `focus-visible:outline-hidden`) as a replacement for the previous `outline-none` approach used in v3.
📚 Learning: applies to **/*.{jsx,tsx} : assign `tabindex` to non-interactive html elements with `aria-activedesc...
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{jsx,tsx} : Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.
Applied to files:
apps/web/src/components/editor/media-panel/tabbar.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't assign `tabindex` to non-interactive html elements....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't assign `tabIndex` to non-interactive HTML elements.
Applied to files:
apps/web/src/components/editor/media-panel/tabbar.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't use positive integers for `tabindex` property....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't use positive integers for `tabIndex` property.
Applied to files:
apps/web/src/components/editor/media-panel/tabbar.tsx
📚 Learning: the file apps/web/src/components/editor/media-panel/views/media.tsx uses "use client" directive, mak...
Learnt from: khanguyen74
PR: OpenCut-app/OpenCut#466
File: apps/web/src/components/editor/media-panel/views/media.tsx:47-52
Timestamp: 2025-07-26T21:07:57.582Z
Learning: The file apps/web/src/components/editor/media-panel/views/media.tsx uses "use client" directive, making it client-only code where window object is always available, so SSR safety checks are not needed.
Applied to files:
apps/web/src/components/editor/media-panel/tabbar.tsx
📚 Learning: applies to **/*.{jsx,tsx} : accompany `onmouseover`/`onmouseout` with `onfocus`/`onblur`....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.
Applied to files:
apps/web/src/components/editor/media-panel/tabbar.tsxapps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{ts,tsx} : use consistent accessibility modifiers on class properties and methods....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{ts,tsx} : Use consistent accessibility modifiers on class properties and methods.
Applied to files:
apps/web/src/components/editor/media-panel/tabbar.tsxapps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : make elements with interactive roles and handlers focusable....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Make elements with interactive roles and handlers focusable.
Applied to files:
apps/web/src/components/editor/media-panel/tabbar.tsx
📚 Learning: applies to **/*.{jsx,tsx} : use semantic elements instead of role attributes in jsx....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{jsx,tsx} : Use semantic elements instead of role attributes in JSX.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't assign interactive aria roles to non-interactive html elements....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't assign interactive ARIA roles to non-interactive HTML elements.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't use explicit role property that's the same as the implicit/default...
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{jsx,tsx} : Don't use explicit role property that's the same as the implicit/default role.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't assign non-interactive aria roles to interactive html elements....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't assign non-interactive ARIA roles to interactive HTML elements.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : use valid, non-abstract aria roles for elements with aria roles....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Use valid, non-abstract ARIA roles for elements with ARIA roles.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't use dangerous jsx props....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't use dangerous JSX props.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't define react components inside other components....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't define React components inside other components.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't assign to react component props....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't assign to React component props.
Applied to files:
apps/web/src/components/ui/tooltip.tsx
🧬 Code Graph Analysis (2)
apps/web/src/components/editor/media-panel/tabbar.tsx (1)
apps/web/src/components/ui/tooltip.tsx (3)
Tooltip(72-72)TooltipTrigger(72-72)TooltipContent(72-72)
apps/web/src/components/ui/tooltip.tsx (1)
apps/web/src/lib/utils.ts (1)
cn(6-8)
🔇 Additional comments (6)
apps/web/src/components/ui/tooltip.tsx (3)
1-5: LGTM: Clean import organization and proper dependencies.The imports are well-organized with proper separation between external libraries and internal utilities. The addition of
cvaandVariantPropssupports the new variant-based styling approach.
13-39: Well-structured CVA configuration with comprehensive variant options.The
tooltipVariantsconfiguration provides a good range of semantic variants with appropriate styling. The sidebar variant correctly implements the specific styling needed for the TabBar use case.
41-43: LGTM: Proper TypeScript interface extension.The interface correctly extends both the Radix primitive props and the CVA variant props, providing type safety for the new variant system.
apps/web/src/components/editor/media-panel/tabbar.tsx (3)
8-8: LGTM: Proper import of tooltip components.The import statement correctly includes all necessary tooltip components for the implementation.
87-94: Excellent tooltip integration with proper configuration.The tooltip implementation is well-configured with appropriate timing (10ms delay), positioning (right side, center aligned), and styling (sidebar variant with 8px offset). The use of
asChildonTooltipTriggermaintains proper DOM structure.
81-81: LGTM: Proper z-index for tooltip layering.The addition of
z-[100]ensures tooltips appear above other UI elements, which is appropriate for this component's positioning in the layout.
| <svg | ||
| width="6" | ||
| height="10" | ||
| viewBox="0 0 6 10" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| className="absolute left-[-6px] top-1/2 -translate-y-1/2" | ||
| > | ||
| <path d="M6 0L0 5L6 10V0Z" className="fill-white/80 dark:fill-[#413F3E]" /> | ||
| </svg> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to the SVG arrow.
The SVG arrow lacks proper accessibility attributes and could confuse screen readers.
<svg
width="6"
height="10"
viewBox="0 0 6 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="absolute left-[-6px] top-1/2 -translate-y-1/2"
+ aria-hidden="true"
+ role="presentation"
>
+ <title>Tooltip arrow</title>
<path d="M6 0L0 5L6 10V0Z" className="fill-white/80 dark:fill-[#413F3E]" />
</svg>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <svg | |
| width="6" | |
| height="10" | |
| viewBox="0 0 6 10" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| className="absolute left-[-6px] top-1/2 -translate-y-1/2" | |
| > | |
| <path d="M6 0L0 5L6 10V0Z" className="fill-white/80 dark:fill-[#413F3E]" /> | |
| </svg> | |
| )} | |
| <svg | |
| width="6" | |
| height="10" | |
| viewBox="0 0 6 10" | |
| fill="none" | |
| xmlns="http://www.w3.org/2000/svg" | |
| className="absolute left-[-6px] top-1/2 -translate-y-1/2" | |
| aria-hidden="true" | |
| role="presentation" | |
| > | |
| <title>Tooltip arrow</title> | |
| <path d="M6 0L0 5L6 10V0Z" className="fill-white/80 dark:fill-[#413F3E]" /> | |
| </svg> |
🤖 Prompt for AI Agents
In apps/web/src/components/ui/tooltip.tsx around lines 56 to 66, the SVG arrow
element lacks accessibility attributes, which can confuse screen readers. Add
appropriate attributes such as role="img" and aria-hidden="true" to indicate the
SVG is decorative and should be ignored by assistive technologies. This will
improve accessibility without affecting visual rendering.
|
seems we got one merge conflict |
@mazeincoding are you gonna resolve it or should i ? |
|
@mazeincoding resolved , you can now merge |
|
thank you! |
2 participants
Here is the video that represents my changes :
Screen.Recording.2025-08-04.134958.mp4
Summary by CodeRabbit
New Features
Style