Better toolbar appbar & misc #521
Conversation
|
@Tsurgcom 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
|
WalkthroughThis set of changes primarily refactors and updates UI styling across several components in the web application. Adjustments include class name simplifications, removal of background and margin classes, improved class handling, responsive layout tweaks, and a significant refactor of the TabBar component to remove scroll controls and add tooltips. No core logic or exported API changes are present. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TabBar (UI)
participant Tooltip
Note over TabBar (UI): After refactor (no scroll controls)
User->>TabBar (UI): Clicks tab button
TabBar (UI)->>Tooltip: Shows tab label on hover
TabBar (UI)->>TabBar (UI): Updates active tab state
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ 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 (4)
.vscode/settings.json (1)
13-15: Tab size setting is reasonable but double-check Prettier alignmentPrettier already defaults to a tab width of 2. The extra
editor.tabSizesetting is harmless, yet redundant. If the team ever decides to bump Prettier’stabWidth, this VS Code-only override will become a silent mismatch.Consider dropping the explicit entry or documenting why it diverges.
apps/web/src/components/editor/media-panel/drag-overlay.tsx (1)
8-17:isEmptyStateprop is dead codeThe prop is accepted and given a default but never referenced, causing unnecessary API surface.
- isEmptyState?: boolean; ... - isEmptyState = false,Remove the prop entirely or implement the empty-state branch.
apps/web/src/components/editor/media-panel/tabbar.tsx (2)
5-5: Remove unused React hook imports.The
useRef,useState, anduseEffectimports are no longer used after removing the scroll functionality and should be removed to keep the imports clean.-import { useRef, useState, useEffect } from "react";
21-39: Excellent accessibility and UX improvements.The refactor to use Button components with Tooltips significantly improves accessibility and user experience. The semantic buttons and tooltips are much better than the previous div-based implementation.
However, there's a potential CSS issue:
- activeTab === tabKey ? "hover:text-! text-primary " : "" + activeTab === tabKey ? "text-primary" : ""The
hover:text-!class appears malformed. Consider using a proper hover color class or removing it if not needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
.vscode/settings.json(1 hunks)apps/web/src/app/editor/[project_id]/page.tsx(1 hunks)apps/web/src/app/layout.tsx(1 hunks)apps/web/src/app/projects/page.tsx(4 hunks)apps/web/src/components/editor-header.tsx(1 hunks)apps/web/src/components/editor/media-panel/drag-overlay.tsx(1 hunks)apps/web/src/components/editor/media-panel/index.tsx(1 hunks)apps/web/src/components/editor/media-panel/tabbar.tsx(1 hunks)apps/web/src/components/editor/timeline/timeline-element.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/app/editor/[project_id]/page.tsxapps/web/src/components/editor/media-panel/drag-overlay.tsxapps/web/src/components/editor/media-panel/index.tsxapps/web/src/components/editor/timeline/timeline-element.tsxapps/web/src/components/editor-header.tsxapps/web/src/app/layout.tsxapps/web/src/app/projects/page.tsxapps/web/src/components/editor/media-panel/tabbar.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/app/editor/[project_id]/page.tsxapps/web/src/components/editor/media-panel/drag-overlay.tsxapps/web/src/components/editor/media-panel/index.tsxapps/web/src/components/editor/timeline/timeline-element.tsxapps/web/src/components/editor-header.tsxapps/web/src/app/layout.tsxapps/web/src/app/projects/page.tsxapps/web/src/components/editor/media-panel/tabbar.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/app/editor/[project_id]/page.tsxapps/web/src/components/editor/media-panel/drag-overlay.tsxapps/web/src/components/editor/media-panel/index.tsxapps/web/src/components/editor/timeline/timeline-element.tsxapps/web/src/components/editor-header.tsxapps/web/src/app/layout.tsxapps/web/src/app/projects/page.tsxapps/web/src/components/editor/media-panel/tabbar.tsx
🧠 Learnings (46)
📓 Common learnings
Learnt from: simonorzel26
PR: OpenCut-app/OpenCut#324
File: apps/web/src/components/editor/timeline/timeline-content.tsx:9-34
Timestamp: 2025-07-17T08:22:10.492Z
Learning: User simonorzel26 prefers incremental refactoring approach: moving code first to reduce PR complexity, then cleaning up in separate single-responsibility PRs. This strategy prioritizes safety and manageable PR sizes over immediate perfect code structure.
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.
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 semantic elements instead of role attributes in JSX.
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: 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.
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 assign `tabIndex` to non-interactive HTML elements.
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 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.
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 the `outline-hidden` utility that provides `outline: none !important`, which is used throughout the codebase for focus-visible states.
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.
📚 Learning: applies to **/*.{jsx,tsx} : don't pass children as 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 pass children as props.
Applied to files:
apps/web/src/app/editor/[project_id]/page.tsxapps/web/src/app/layout.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't destructure props inside jsx components in solid projects....
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 destructure props inside JSX components in Solid projects.
Applied to files:
apps/web/src/app/editor/[project_id]/page.tsxapps/web/src/app/projects/page.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't use unnecessary fragments....
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 unnecessary fragments.
Applied to files:
apps/web/src/app/editor/[project_id]/page.tsxapps/web/src/components/editor/media-panel/drag-overlay.tsxapps/web/src/components/editor-header.tsxapps/web/src/app/projects/page.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: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
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/app/editor/[project_id]/page.tsxapps/web/src/components/editor-header.tsxapps/web/src/app/layout.tsxapps/web/src/app/projects/page.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't insert comments as text nodes....
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 insert comments as text nodes.
Applied to files:
apps/web/src/app/editor/[project_id]/page.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/drag-overlay.tsxapps/web/src/components/editor/media-panel/index.tsxapps/web/src/components/editor/media-panel/tabbar.tsx
📚 Learning: applies to **/*.{ts,tsx} : don't export imported variables....
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} : Don't export imported variables.
Applied to files:
apps/web/src/components/editor/media-panel/drag-overlay.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't have unused imports....
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 **/*.{js,jsx,ts,tsx} : Don't have unused imports.
Applied to files:
apps/web/src/components/editor/media-panel/drag-overlay.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't include "image", "picture", or "photo" in img alt prop....
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 include "image", "picture", or "photo" in img alt prop.
Applied to files:
apps/web/src/components/editor/media-panel/drag-overlay.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't export empty modules that don't change anything....
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 **/*.{js,jsx,ts,tsx} : Don't export empty modules that don't change anything.
Applied to files:
apps/web/src/components/editor/media-panel/drag-overlay.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use irregular whitespace characters....
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 **/*.{js,jsx,ts,tsx} : Don't use irregular whitespace characters.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : use numeric separators in numeric literals....
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 **/*.{js,jsx,ts,tsx} : Use numeric separators in numeric literals.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use consecutive spaces in regular expression literals....
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 **/*.{js,jsx,ts,tsx} : Don't use consecutive spaces in regular expression literals.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : make sure object literals are declared consistently (defaults to e...
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 **/*.{js,jsx,ts,tsx} : Make sure object literals are declared consistently (defaults to explicit definitions).
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : follow curly brace conventions....
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 **/*.{js,jsx,ts,tsx} : Follow curly brace conventions.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : use `with { type: "json" }` for json module imports....
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 **/*.{js,jsx,ts,tsx} : Use `with { type: "json" }` for JSON module imports.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't initialize variables to undefined....
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 **/*.{js,jsx,ts,tsx} : Don't initialize variables to undefined.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't rename imports, exports, and destructured assignments to the...
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 **/*.{js,jsx,ts,tsx} : Don't rename imports, exports, and destructured assignments to the same name.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : use standard constants instead of approximated literals....
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 **/*.{js,jsx,ts,tsx} : Use standard constants instead of approximated literals.
Applied to files:
.vscode/settings.jsonapps/web/src/components/editor/timeline/timeline-element.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use two keys with the same name inside objects....
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 **/*.{js,jsx,ts,tsx} : Don't use two keys with the same name inside objects.
Applied to files:
.vscode/settings.json
📚 Learning: applies to **/*.{jsx,tsx} : include caption tracks for audio and video elements....
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} : Include caption tracks for audio and video elements.
Applied to files:
apps/web/src/components/editor/media-panel/index.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/index.tsxapps/web/src/components/editor-header.tsxapps/web/src/app/projects/page.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/editor/media-panel/index.tsxapps/web/src/components/editor/timeline/timeline-element.tsxapps/web/src/app/layout.tsxapps/web/src/app/projects/page.tsxapps/web/src/components/editor/media-panel/tabbar.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: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{jsx,tsx} : Don't assign interactive ARIA roles to non-interactive HTML elements.
Applied to files:
apps/web/src/components/editor/media-panel/index.tsxapps/web/src/app/layout.tsxapps/web/src/components/editor/media-panel/tabbar.tsx
📚 Learning: applies to **/*.{jsx,tsx} : give all elements requiring alt text meaningful information for screen r...
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} : Give all elements requiring alt text meaningful information for screen readers.
Applied to files:
apps/web/src/components/editor/media-panel/index.tsxapps/web/src/components/editor-header.tsxapps/web/src/app/layout.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : use template literals over string concatenation....
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 **/*.{js,jsx,ts,tsx} : Use template literals over string concatenation.
Applied to files:
apps/web/src/components/editor/timeline/timeline-element.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use template literal placeholder syntax in regular strings....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.403Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Don't use template literal placeholder syntax in regular strings.
Applied to files:
apps/web/src/components/editor/timeline/timeline-element.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use unnecessary string or template literal concatenation....
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 **/*.{js,jsx,ts,tsx} : Don't use unnecessary string or template literal concatenation.
Applied to files:
apps/web/src/components/editor/timeline/timeline-element.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use template literals if you don't need interpolation or spe...
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 **/*.{js,jsx,ts,tsx} : Don't use template literals if you don't need interpolation or special-character handling.
Applied to files:
apps/web/src/components/editor/timeline/timeline-element.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use string.raw in template literals when there are no escape...
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 **/*.{js,jsx,ts,tsx} : Don't use String.raw in template literals when there are no escape sequences.
Applied to files:
apps/web/src/components/editor/timeline/timeline-element.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't use duplicate class members....
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 **/*.{js,jsx,ts,tsx} : Don't use duplicate class members.
Applied to files:
apps/web/src/components/editor-header.tsxapps/web/src/app/projects/page.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't have unused private class members....
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 **/*.{js,jsx,ts,tsx} : Don't have unused private class members.
Applied to files:
apps/web/src/components/editor-header.tsx
📚 Learning: applies to **/*.{js,jsx,ts,tsx} : don't reassign class members....
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 **/*.{js,jsx,ts,tsx} : Don't reassign class members.
Applied to files:
apps/web/src/components/editor-header.tsx
📚 Learning: applies to **/*.{jsx,tsx} : give heading elements content that's accessible to screen readers (not h...
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} : Give heading elements content that's accessible to screen readers (not hidden with `aria-hidden`).
Applied to files:
apps/web/src/components/editor-header.tsxapps/web/src/app/layout.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/editor-header.tsx
📚 Learning: applies to **/*.{jsx,tsx} : use a recommended display strategy with google fonts....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.403Z
Learning: Applies to **/*.{jsx,tsx} : Use a recommended display strategy with Google Fonts.
Applied to files:
apps/web/src/app/layout.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't add aria roles, states, and properties to elements that don't supp...
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 add ARIA roles, states, and properties to elements that don't support them.
Applied to files:
apps/web/src/app/layout.tsx
📚 Learning: applies to **/*.{jsx,tsx} : include all required aria attributes 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} : Include all required ARIA attributes for elements with ARIA roles.
Applied to files:
apps/web/src/app/layout.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't use both `children` and `dangerouslysetinnerhtml` props on the sam...
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 both `children` and `dangerouslySetInnerHTML` props on the same element.
Applied to files:
apps/web/src/app/layout.tsx
📚 Learning: applies to **/*.{jsx,tsx} : accompany `onmouseover`/`onmouseout` with `onfocus`/`onblur`....
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} : Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.
Applied to files:
apps/web/src/app/projects/page.tsx
📚 Learning: applies to **/*.{jsx,tsx} : make elements with interactive roles and handlers focusable....
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} : Make elements with interactive roles and handlers focusable.
Applied to files:
apps/web/src/app/projects/page.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't set `aria-hidden="true"` on focusable 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 set `aria-hidden="true"` on focusable elements.
Applied to files:
apps/web/src/app/projects/page.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't assign `tabindex` to non-interactive html elements....
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 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: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
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: 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
🧬 Code Graph Analysis (3)
apps/web/src/app/layout.tsx (1)
apps/web/src/lib/font-config.ts (1)
defaultFont(39-39)
apps/web/src/app/projects/page.tsx (3)
apps/web/src/lib/utils.ts (1)
cn(6-8)apps/web/src/components/ui/checkbox.tsx (1)
Checkbox(30-30)apps/web/src/components/ui/card.tsx (1)
CardContent(79-79)
apps/web/src/components/editor/media-panel/tabbar.tsx (4)
apps/web/src/components/editor/media-panel/store.ts (3)
useMediaPanelStore(76-79)tabs(28-69)Tab(16-26)apps/web/src/components/ui/tooltip.tsx (3)
Tooltip(32-32)TooltipTrigger(32-32)TooltipContent(32-32)apps/web/src/components/ui/button.tsx (1)
Button(59-59)apps/web/src/lib/utils.ts (1)
cn(6-8)
🔇 Additional comments (14)
apps/web/src/components/editor/media-panel/drag-overlay.tsx (1)
1-1: 👍 Unused imports removed – bundle size & lint noise reducedThe import list is now minimal and accurate; good call.
apps/web/src/app/layout.tsx (1)
32-32: Nice UX touch – color transitions will be smoother
transition-colorsshould be covered by Tailwind defaults, so no concerns. Confirm it’s enabled in the safelist if JIT purge rules are strict.apps/web/src/components/editor/timeline/timeline-element.tsx (1)
206-207: Template literal removal is cleaner – goodNo interpolation was needed; simplifies parsing and avoids unnecessary re-renders triggered by new string identity each render.
apps/web/src/app/projects/page.tsx (6)
42-42: LGTM!The
cnutility import is properly added and will be used for improved conditional class name handling.
392-394: Good refactor using thecnutility.The change from template literal concatenation to the
cnutility function improves maintainability and handles Tailwind class conflicts better while preserving the same conditional logic.
403-403: Cleaner checkbox container styling.The background change from semi-transparent with blur to transparent improves visual clarity and aligns with the UI consistency improvements mentioned in the PR.
410-410: Good contrast improvement for checkbox.Adding the white background ensures the checkbox remains visible and accessible after the container background was made transparent.
436-436: Improved card content spacing.The padding adjustment from
px-0 pt-5topx-3 pt-3adds horizontal padding and reduces top padding for better visual balance.
438-438: Text truncation simplified.The change from
line-clamp-2totruncateensures consistent single-line project titles across all cards, though longer names will be truncated more aggressively.apps/web/src/app/editor/[project_id]/page.tsx (1)
153-153: Background styling consistency improvement.Removing the
bg-backgroundclass aligns with the UI consistency improvements across the editor interface and allows for more unified background styling.apps/web/src/components/editor/media-panel/index.tsx (2)
52-52: Good responsive layout improvement.The addition of
flex-col-reverse md:flex-rowcreates a better mobile experience by stacking elements vertically on small screens while maintaining horizontal layout on larger screens.
55-55: Content overflow handling improved.Removing
overflow-hiddenallows content to display naturally, which complements the responsive layout changes and new tab system.apps/web/src/components/editor/media-panel/tabbar.tsx (2)
6-11: LGTM!The Tooltip and cn utility imports are properly added and used in the refactored implementation.
17-17: Good responsive tab layout.The responsive flex direction change from horizontal to column on medium screens aligns well with the parent container's layout changes.
1 participant
Description
better toolbar appbar
removed derelict code from appbar
removed unnecessary dependencies
improved theme change transitions (theme change transitions exist to help visually impaired users, a flashing background defeats the point)
gave the gift of borders to project cards on the
/projectspageType of change
Please delete options that are not relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Test Configuration:
Screenshots (if applicable)
Add screenshots to help explain your changes.
Checklist:
Additional context
Add any other context about the pull request here.
Summary by CodeRabbit