summaryrefslogtreecommitdiff
path: root/apps
diff options
context:
space:
mode:
Diffstat (limited to 'apps')
-rw-r--r--apps/web/src/components/keyboard-shortcuts-help.tsx24
-rw-r--r--apps/web/src/components/ui/dialog.tsx12
-rw-r--r--apps/web/src/hooks/use-keyboard-shortcuts.ts16
3 files changed, 17 insertions, 35 deletions
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 (
<Badge variant="secondary" className="font-mono text-xs px-2 py-1">
@@ -31,7 +31,7 @@ const KeyBadge = ({ keyName }: { keyName: string }) => {
};
const ShortcutItem = ({ shortcut }: { shortcut: any }) => (
- <div className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-muted/50">
+ <div className="flex items-center justify-between">
<div className="flex items-center gap-3">
{shortcut.icon && (
<div className="text-muted-foreground">{shortcut.icon}</div>
@@ -67,7 +67,7 @@ export const KeyboardShortcutsHelp = () => {
Shortcuts
</Button>
</DialogTrigger>
- <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+ <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-hidden flex">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Keyboard className="w-5 h-5" />
@@ -81,11 +81,11 @@ export const KeyboardShortcutsHelp = () => {
<div className="space-y-6">
{categories.map((category) => (
- <div key={category}>
- <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-3">
+ <div key={category} className="flex flex-col gap-1">
+ <h3 className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
{category}
</h3>
- <div className="space-y-1">
+ <div className="space-y-0.5">
{shortcuts
.filter((shortcut) => shortcut.category === category)
.map((shortcut, index) => (
@@ -95,18 +95,6 @@ export const KeyboardShortcutsHelp = () => {
</div>
))}
</div>
-
- <div className="mt-6 p-4 bg-muted/30 rounded-lg">
- <h4 className="font-medium text-sm mb-2">Tips:</h4>
- <ul className="text-sm text-muted-foreground space-y-1">
- <li>
- • Shortcuts work when the editor is focused (not typing in inputs)
- </li>
- <li>• J/K/L are industry-standard video editing shortcuts</li>
- <li>• Use arrow keys for frame-perfect positioning</li>
- <li>• Hold Shift with arrow keys for larger jumps</li>
- </ul>
- </div>
</DialogContent>
</Dialog>
);
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<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+ "fixed inset-0 z-[100] bg-black/20 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@@ -39,9 +39,17 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
- "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+ "fixed left-[50%] top-[50%] z-[150] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
+ onCloseAutoFocus={(e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ onOpenAutoFocus={(e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
{...props}
>
<ScrollArea className="max-h-[85vh]">
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");
}
},
},
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 08:43:28 +0000