Skip to content

feat: multiple UI improvements and new features #698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nino-chavez wants to merge 10 commits into from
Closed

feat: multiple UI improvements and new features #698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
acf689f
fix: UI improvements and multiple keyboard shortcuts support
nino-chavez Jan 31, 2026
7670144
feat: add "open in new tab" icon next to project names (#644)
nino-chavez Jan 31, 2026
6bad0d4
feat: add file size validation for media uploads (#653)
nino-chavez Jan 31, 2026
147f473
feat: add Ctrl+X cut shortcut for timeline elements (#672)
nino-chavez Jan 31, 2026
de5293b
feat: add dedicated About page (#624)
nino-chavez Jan 31, 2026
80b229c
fix: properly dispose WebCodecs resources in video cache (#663)
nino-chavez Jan 31, 2026
905238d
fix: improve audio mixing quality and prevent clipping (#677)
nino-chavez Jan 31, 2026
71bdafa
fix: make track visibility toggle button clickable (#658)
nino-chavez Jan 31, 2026
edd2138
fix: show user-friendly error for unsupported video codecs (#637)
nino-chavez Jan 31, 2026
5854906
fix: dispose Input objects to prevent memory leaks (#656)
nino-chavez Jan 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions apps/web/src/app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import type { Metadata } from "next";
import Link from "next/link";
import { BasePage } from "@/app/base-page";
import { Button } from "@/components/ui/button";
import { SOCIAL_LINKS } from "@/constants/site-constants";
import { ArrowRight } from "lucide-react";

export const metadata: Metadata = {
title: "About - OpenCut",
description:
"OpenCut is a free, open-source video editor built for privacy and simplicity. Edit videos directly in your browser without uploading to servers.",
openGraph: {
title: "About - OpenCut",
description:
"OpenCut is a free, open-source video editor built for privacy and simplicity. Edit videos directly in your browser without uploading to servers.",
type: "website",
},
};

export default function AboutPage() {
return (
<BasePage
title="About OpenCut"
description="A free, open-source video editor that respects your privacy and gets the job done."
>
<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Our Mission</h2>
<p>
OpenCut was created to provide a powerful video editing experience
that doesn't compromise on privacy. We believe that editing your
videos should be simple, fast, and free from data collection.
</p>
<p>
Your videos stay on your device. No uploads to external servers for
basic editing. No tracking of your content. Just a clean, efficient
editor that works anywhere.
</p>
</section>

<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Key Features</h2>
<ul className="list-disc space-y-2 pl-6">
<li>
<strong>Privacy-first:</strong> Basic editing happens entirely in
your browser - your files never leave your device
</li>
<li>
<strong>Multi-track timeline:</strong> Arrange video, audio, and
images across multiple tracks with precision
</li>
<li>
<strong>Real-time preview:</strong> See your edits instantly without
waiting for renders
</li>
<li>
<strong>Cross-platform:</strong> Works on any device with a modern
web browser
</li>
<li>
<strong>Open source:</strong> Fully transparent code you can audit,
modify, or self-host
</li>
<li>
<strong>Free forever:</strong> No subscriptions, no paywalls, no
hidden costs
</li>
</ul>
</section>

<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Open Source</h2>
<p>
OpenCut is completely open source under the MIT license. This means
you can view, modify, and distribute the code freely. We believe in
transparency and community-driven development.
</p>
<p>
Our source code is available on GitHub, where you can report issues,
suggest features, or contribute code. Every contribution helps make
OpenCut better for everyone.
</p>
<div className="flex gap-4 pt-2">
<Button variant="outline" asChild>
<Link href={SOCIAL_LINKS.github} target="_blank" rel="noopener">
View on GitHub
<ArrowRight className="ml-1 size-4" />
</Link>
</Button>
</div>
</section>

<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Community</h2>
<p>
Join our growing community of creators, developers, and video editing
enthusiasts. Whether you need help, want to share your creations, or
are interested in contributing, we'd love to have you.
</p>
<div className="flex flex-wrap gap-4 pt-2">
<Button variant="outline" asChild>
<Link href={SOCIAL_LINKS.discord} target="_blank" rel="noopener">
Join Discord
</Link>
</Button>
<Button variant="outline" asChild>
<Link href={SOCIAL_LINKS.x} target="_blank" rel="noopener">
Follow on X
</Link>
</Button>
<Button variant="outline" asChild>
<Link href="/contributors">View Contributors</Link>
</Button>
</div>
</section>

<section className="flex flex-col gap-4">
<h2 className="text-2xl font-semibold">Get Started</h2>
<p>
Ready to start editing? OpenCut runs directly in your browser - no
downloads or installations required.
</p>
<div className="pt-2">
<Button variant="foreground" asChild>
<Link href="/projects">
Start Editing
<ArrowRight className="ml-1 size-4" />
</Link>
</Button>
</div>
</section>
</BasePage>
);
}
43 changes: 37 additions & 6 deletions apps/web/src/app/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {
Edit03Icon,
ArrowDown02Icon,
InformationCircleIcon,
LinkSquare02Icon,
} from "@hugeicons/core-free-icons";
import { OcVideoIcon } from "@opencut/ui/icons";
import { Label } from "@/components/ui/label";
Expand All @@ -56,6 +57,7 @@ import {
import { DeleteProjectDialog } from "@/components/editor/dialogs/delete-project-dialog";
import { ProjectInfoDialog } from "@/components/editor/dialogs/project-info-dialog";
import { RenameProjectDialog } from "@/components/editor/dialogs/rename-project-dialog";
import { ThemeToggle } from "@/components/theme-toggle";
import { cn } from "@/utils/ui";

const formatProjectDuration = ({
Expand Down Expand Up @@ -175,6 +177,7 @@ function ProjectsHeader() {
<div className="flex items-center gap-3 md:gap-4">
<SearchBar className="hidden md:block" />
<NewProjectButton />
<ThemeToggle />
</div>
</div>
<SearchBar className="block md:hidden mb-4" />
Expand Down Expand Up @@ -578,9 +581,23 @@ function ProjectItem({
</div>

<CardContent className="flex flex-col gap-2 px-0 pt-4">
<h3 className="group-hover:text-foreground/90 line-clamp-2 text-sm leading-snug font-medium">
{project.name}
</h3>
<div className="flex items-center gap-1.5">
<h3 className="group-hover:text-foreground/90 line-clamp-2 text-sm leading-snug font-medium">
{project.name}
</h3>
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
window.open(`/editor/${project.id}`, "_blank");
}}
className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-accent rounded shrink-0"
title="Open in new tab"
>
<HugeiconsIcon icon={LinkSquare02Icon} className="size-3.5 text-muted-foreground" />
</button>
</div>
Comment on lines +584 to +600
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Fix nested interactive elements and harden the “open in new tab” control.

The icon button sits inside a Link (both grid and list views), which is invalid HTML and problematic for accessibility. Also, window.open without noopener enables tabnabbing, and the icon-only control needs an accessible label/title. A safer pattern is to move the icon link outside the main Link and use a real anchor with target="_blank" + rel, plus aria-label and an icon title.

🔧 Proposed approach (apply to both grid + list) 
-				<div className="flex items-center gap-1.5">
+				<div className="flex items-center gap-1.5">
 					<h3 className="group-hover:text-foreground/90 line-clamp-2 text-sm leading-snug font-medium">
 						{project.name}
 					</h3>
-					<button
-						type="button"
-						onClick={(e) => {
-							e.preventDefault();
-							e.stopPropagation();
-							window.open(`/editor/${project.id}`, "_blank");
-						}}
-						className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-accent rounded shrink-0"
-						title="Open in new tab"
-					>
-						<HugeiconsIcon icon={LinkSquare02Icon} className="size-3.5 text-muted-foreground" />
-					</button>
 				</div>
-			<Link href={`/editor/${project.id}`} className="flex-1 min-w-0">
+			<Link href={`/editor/${project.id}`} className="flex-1 min-w-0">
 				{listRowContent}
 			</Link>
+			<Link
+				href={`/editor/${project.id}`}
+				target="_blank"
+				rel="noopener noreferrer"
+				aria-label="Open in new tab"
+				className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-accent rounded shrink-0"
+			>
+				<HugeiconsIcon
+					icon={LinkSquare02Icon}
+					className="size-3.5 text-muted-foreground"
+					title="Open in new tab"
+				/>
+			</Link>

For grid cards, place the icon link as a sibling overlay (similar to the checkbox) so it’s not nested inside the main Link.

As per coding guidelines: Don't use target="_blank" without rel="noopener"; Always include a title element for icons unless there's text beside the icon; Make sure anchors have content that's accessible to screen readers.

Also applies to: 640-656

🤖 Prompt for AI Agents 
In `@apps/web/src/app/projects/page.tsx` around lines 598 - 614, The icon "open in
new tab" control inside the project card (the button using project.id,
HugeiconsIcon and LinkSquare02Icon) must be removed from inside the main Link
and converted into a sibling anchor overlay so it's not a nested interactive
element; replace the inline window.open with a real <a> element that uses
target="_blank" and rel="noopener noreferrer", add an accessible label
(aria-label) and keep a title element for the icon (or include readable text for
screen readers), and position it as a sibling overlay similar to the checkbox
overlay in both grid and list card render paths so it remains clickable without
breaking the parent Link.

<div className="text-muted-foreground flex items-center gap-1.5 text-sm">
<HugeiconsIcon icon={Calendar04Icon} className="size-4" />
<span>Created {formatDate({ date: project.createdAt })}</span>
Expand All @@ -606,9 +623,23 @@ function ProjectItem({
)}
</div>

<h3 className="group-hover:text-foreground/90 text-sm font-medium truncate flex-1 min-w-0">
{project.name}
</h3>
<div className="flex items-center gap-1.5 flex-1 min-w-0">
<h3 className="group-hover:text-foreground/90 text-sm font-medium truncate">
{project.name}
</h3>
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
window.open(`/editor/${project.id}`, "_blank");
}}
className="opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-accent rounded shrink-0"
title="Open in new tab"
>
<HugeiconsIcon icon={LinkSquare02Icon} className="size-3.5 text-muted-foreground" />
</button>
</div>

<span className="text-muted-foreground text-sm shrink-0 hidden sm:block">
{durationLabel ?? "—"}
Expand Down
Loading