From 18d2186101043c251687235bddf13b7f00b16846 Mon Sep 17 00:00:00 2001 From: Dominik Koch Date: Wed, 16 Jul 2025 15:19:06 +0200 Subject: feat(hero): add sponsored by vercel to hero --- apps/web/src/components/icons.tsx | 8 +++++ apps/web/src/components/landing/hero.tsx | 14 +++++++++ apps/web/src/components/ui/sponsor-button.tsx | 42 +++++++++++++++++++++++++++ 3 files changed, 64 insertions(+) create mode 100644 apps/web/src/components/ui/sponsor-button.tsx (limited to 'apps/web/src/components') diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx index 4f3986e3..68e8f0ff 100644 --- a/apps/web/src/components/icons.tsx +++ b/apps/web/src/components/icons.tsx @@ -38,6 +38,14 @@ export function GithubIcon({ className }: { className?: string }) { ); } +export function VercelIcon({ className }: { className?: string }) { + return ( + + + + ); +} + export function BackgroundIcon({ className }: { className?: string }) { return ( + + + ; + companyName: string; + className?: string; +} + +export function SponsorButton({ + href, + logo: Logo, + companyName, + className = "", +}: SponsorButtonProps) { + + return ( + + + Sponsored by + + +
+
+ +
+ + + {companyName} + +
+ + ); +} -- cgit v1.3.1 From 5483db83de2c8d3a051148dfc56d6ab52335ee73 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 16 Jul 2025 15:52:25 +0200 Subject: fix keyboard shortcuts --- .../web/src/components/keyboard-shortcuts-help.tsx | 24 ++++++---------------- apps/web/src/components/ui/dialog.tsx | 12 +++++++++-- apps/web/src/hooks/use-keyboard-shortcuts.ts | 16 +-------------- 3 files changed, 17 insertions(+), 35 deletions(-) (limited to 'apps/web/src/components') diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index 9f0d1e57..95fb6031 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -21,7 +21,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => { .replace("Shift", "⇧") .replace("←", "◀") .replace("→", "▶") - .replace("Space", "⎵"); + .replace("Space", "Space"); return ( @@ -31,7 +31,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => { }; const ShortcutItem = ({ shortcut }: { shortcut: any }) => ( -
+
{shortcut.icon && (
{shortcut.icon}
@@ -67,7 +67,7 @@ export const KeyboardShortcutsHelp = () => { Shortcuts - + @@ -81,11 +81,11 @@ export const KeyboardShortcutsHelp = () => {
{categories.map((category) => ( -
-

+
+

{category}

-
+
{shortcuts .filter((shortcut) => shortcut.category === category) .map((shortcut, index) => ( @@ -95,18 +95,6 @@ export const KeyboardShortcutsHelp = () => {
))}
- -
-

Tips:

-
    -
  • - • Shortcuts work when the editor is focused (not typing in inputs) -
    • -
  • • J/K/L are industry-standard video editing shortcuts
    • -
  • • Use arrow keys for frame-perfect positioning
    • -
  • • Hold Shift with arrow keys for larger jumps
    • -
-
); diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx index 0a487d0a..ebfd8907 100644 --- a/apps/web/src/components/ui/dialog.tsx +++ b/apps/web/src/components/ui/dialog.tsx @@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef< { + e.stopPropagation(); + e.preventDefault(); + }} + onOpenAutoFocus={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} {...props} > diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts index 86190c94..d8fc032e 100644 --- a/apps/web/src/hooks/use-keyboard-shortcuts.ts +++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts @@ -15,6 +15,7 @@ export interface KeyboardShortcut { enabled?: boolean; requiresSelection?: boolean; icon?: React.ReactNode; + displayKeys?: string[]; // Keys to show in help (defaults to keys if not provided) } interface UseKeyboardShortcutsOptions { @@ -66,7 +67,6 @@ export const useKeyboardShortcuts = ( category: "Playback", action: () => { toggle(); - toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 }); }, }, { @@ -76,7 +76,6 @@ export const useKeyboardShortcuts = ( category: "Playback", action: () => { seek(Math.max(0, currentTime - 1)); - toast.info("Rewind 1s", { duration: 1000 }); }, }, { @@ -86,7 +85,6 @@ export const useKeyboardShortcuts = ( category: "Playback", action: () => { toggle(); - toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 }); }, }, { @@ -96,7 +94,6 @@ export const useKeyboardShortcuts = ( category: "Playback", action: () => { seek(Math.min(duration, currentTime + 1)); - toast.info("Forward 1s", { duration: 1000 }); }, }, @@ -146,7 +143,6 @@ export const useKeyboardShortcuts = ( category: "Navigation", action: () => { seek(0); - toast.info("Start of timeline", { duration: 1000 }); }, }, { @@ -156,7 +152,6 @@ export const useKeyboardShortcuts = ( category: "Navigation", action: () => { seek(duration); - toast.info("End of timeline", { duration: 1000 }); }, }, @@ -185,7 +180,6 @@ export const useKeyboardShortcuts = ( if (currentTime > effectiveStart && currentTime < effectiveEnd) { splitElement(trackId, elementId, currentTime); - toast.success("Element split at playhead"); } else { toast.error("Playhead must be within selected element"); } @@ -218,9 +212,6 @@ export const useKeyboardShortcuts = ( category: "Editing", action: () => { toggleSnapping(); - toast.info(`Snapping ${snappingEnabled ? "disabled" : "enabled"}`, { - duration: 1000, - }); }, }, @@ -238,9 +229,6 @@ export const useKeyboardShortcuts = ( })) ); setSelectedElements(allElements); - toast.info(`Selected ${allElements.length} elements`, { - duration: 1000, - }); }, }, { @@ -270,8 +258,6 @@ export const useKeyboardShortcuts = ( ...elementWithoutId, startTime: newStartTime, }); - - toast.success("Element duplicated"); } }, }, -- cgit v1.3.1 From 0c086e3c240e229b3dd89e6925b34f8c5fc20052 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 16 Jul 2025 16:05:30 +0200 Subject: more shortcut fixes --- .../web/src/components/keyboard-shortcuts-help.tsx | 76 +++++++++++++++------- apps/web/src/hooks/use-keyboard-shortcuts.ts | 1 - 2 files changed, 54 insertions(+), 23 deletions(-) (limited to 'apps/web/src/components') diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index 95fb6031..936254be 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -15,41 +15,73 @@ import { Keyboard } from "lucide-react"; import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts"; const KeyBadge = ({ keyName }: { keyName: string }) => { - // Replace common key names with symbols + // Replace common key names with symbols or friendly names const displayKey = keyName .replace("Cmd", "⌘") - .replace("Shift", "⇧") + .replace("Shift", "Shift") + .replace("ArrowLeft", "Arrow Left") + .replace("ArrowRight", "Arrow Right") + .replace("ArrowUp", "Arrow Up") + .replace("ArrowDown", "Arrow Down") .replace("←", "◀") .replace("→", "▶") .replace("Space", "Space"); return ( - + {displayKey} ); }; -const ShortcutItem = ({ shortcut }: { shortcut: any }) => ( -
-
- {shortcut.icon && ( -
{shortcut.icon}
- )} - {shortcut.description} -
-
- {shortcut.keys.map((key: string, index: number) => ( -
- - {index < shortcut.keys.length - 1 && ( - + - )} -
- ))} +const ShortcutItem = ({ shortcut }: { shortcut: any }) => { + // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J" + const displayKeys = shortcut.keys.filter((key: string) => { + const lowerKey = key.toLowerCase(); + const upperKey = key.toUpperCase(); + + // If this is a lowercase letter and the uppercase version exists, skip it + if ( + key === lowerKey && + key !== upperKey && + shortcut.keys.includes(upperKey) + ) { + return false; + } + + return true; + }); + + return ( +
+
+ {shortcut.icon && ( +
{shortcut.icon}
+ )} + {shortcut.description} +
+
+ {displayKeys.map((key: string, index: number) => ( +
+
+ {key.split("+").map((keyPart: string, partIndex: number) => ( +
+ + {partIndex < key.split("+").length - 1 && ( + + + )} +
+ ))} +
+ {index < displayKeys.length - 1 && ( + or + )} +
+ ))} +
-
-); + ); +}; export const KeyboardShortcutsHelp = () => { const [open, setOpen] = useState(false); diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts index d8fc032e..84cb78f8 100644 --- a/apps/web/src/hooks/use-keyboard-shortcuts.ts +++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts @@ -15,7 +15,6 @@ export interface KeyboardShortcut { enabled?: boolean; requiresSelection?: boolean; icon?: React.ReactNode; - displayKeys?: string[]; // Keys to show in help (defaults to keys if not provided) } interface UseKeyboardShortcutsOptions { -- cgit v1.3.1