summaryrefslogtreecommitdiff
path: root/apps/web/src/components/keyboard-shortcuts-help.tsx
diff options
context:
space:
mode:
authorHyteq <DerpsDer.es@gmail.com>2025-07-20 10:50:17 +0300
committerHyteq <DerpsDer.es@gmail.com>2025-07-20 10:50:17 +0300
commitfe020be6cea00691d6ce66e21843915defa5e944 (patch)
tree65718c8aee56a61b6c42032f8ebd96915cd13dc6 /apps/web/src/components/keyboard-shortcuts-help.tsx
parenteab8ec3ba81b86fdd4ade920d999c28fb34785b1 (diff)
downloadopencut-fe020be6cea00691d6ce66e21843915defa5e944.tar.gz
Revert "format, cleanup, deps"
This reverts commit eab8ec3ba81b86fdd4ade920d999c28fb34785b1.
Diffstat (limited to 'apps/web/src/components/keyboard-shortcuts-help.tsx')
-rw-r--r--apps/web/src/components/keyboard-shortcuts-help.tsx210
1 files changed, 105 insertions, 105 deletions
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 9e37cf52..a48b3c21 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -5,131 +5,131 @@ import { Keyboard } from "lucide-react";
import { useState } from "react";
import { Button } from "./ui/button";
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
} from "./ui/dialog";
import { getPlatformSpecialKey } from "@/lib/utils";
const modifier: {
- [key: string]: string;
+ [key: string]: string;
} = {
- Shift: "Shift",
- Alt: "Alt",
- ArrowLeft: "←",
- ArrowRight: "→",
- ArrowUp: "↑",
- ArrowDown: "↓",
- Space: "Space",
+ Shift: "Shift",
+ Alt: "Alt",
+ ArrowLeft: "←",
+ ArrowRight: "→",
+ ArrowUp: "↑",
+ ArrowDown: "↓",
+ Space: "Space",
};
function getKeyWithModifier(key: string) {
- if (key === "Ctrl") return getPlatformSpecialKey();
- return modifier[key] || key;
+ if (key === "Ctrl") return getPlatformSpecialKey();
+ return modifier[key] || key;
}
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) => {
- if (
- key.includes("Cmd") &&
- shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
- )
- return false;
+ // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
+ const displayKeys = shortcut.keys.filter((key: string) => {
+ if (
+ key.includes("Cmd") &&
+ shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
+ )
+ return false;
- return true;
- });
+ return true;
+ });
- return (
- <div className="flex items-center justify-between">
- <div className="flex items-center gap-3">
- {shortcut.icon && (
- <div className="text-muted-foreground">{shortcut.icon}</div>
- )}
- <span className="text-sm">{shortcut.description}</span>
- </div>
- <div className="flex items-center gap-1">
- {displayKeys.map((key: string, index: number) => (
- <div key={index} className="flex items-center gap-1">
- <div className="flex items-center">
- {key.split("+").map((keyPart: string, partIndex: number) => (
- <ShortcutKey key={partIndex}>
- {getKeyWithModifier(keyPart)}
- </ShortcutKey>
- ))}
- </div>
- {index < displayKeys.length - 1 && (
- <span className="text-xs text-muted-foreground">or</span>
- )}
- </div>
- ))}
- </div>
- </div>
- );
+ return (
+ <div className="flex items-center justify-between">
+ <div className="flex items-center gap-3">
+ {shortcut.icon && (
+ <div className="text-muted-foreground">{shortcut.icon}</div>
+ )}
+ <span className="text-sm">{shortcut.description}</span>
+ </div>
+ <div className="flex items-center gap-1">
+ {displayKeys.map((key: string, index: number) => (
+ <div key={index} className="flex items-center gap-1">
+ <div className="flex items-center">
+ {key.split("+").map((keyPart: string, partIndex: number) => (
+ <ShortcutKey key={partIndex}>
+ {getKeyWithModifier(keyPart)}
+ </ShortcutKey>
+ ))}
+ </div>
+ {index < displayKeys.length - 1 && (
+ <span className="text-xs text-muted-foreground">or</span>
+ )}
+ </div>
+ ))}
+ </div>
+ </div>
+ );
};
export const KeyboardShortcutsHelp = () => {
- const [open, setOpen] = useState(false);
+ const [open, setOpen] = useState(false);
- // Get shortcuts from centralized hook (disabled so it doesn't add event listeners)
- const { shortcuts } = useKeyboardShortcuts({ enabled: false });
+ // Get shortcuts from centralized hook (disabled so it doesn't add event listeners)
+ const { shortcuts } = useKeyboardShortcuts({ enabled: false });
- const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
+ const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
- return (
- <Dialog open={open} onOpenChange={setOpen}>
- <DialogTrigger asChild>
- <Button variant="text" size="sm" className="gap-2">
- <Keyboard className="w-4 h-4" />
- Shortcuts
- </Button>
- </DialogTrigger>
- <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" />
- Keyboard Shortcuts
- </DialogTitle>
- <DialogDescription>
- Speed up your video editing workflow with these keyboard shortcuts.
- Most shortcuts work when the timeline is focused.
- </DialogDescription>
- </DialogHeader>
+ return (
+ <Dialog open={open} onOpenChange={setOpen}>
+ <DialogTrigger asChild>
+ <Button variant="text" size="sm" className="gap-2">
+ <Keyboard className="w-4 h-4" />
+ Shortcuts
+ </Button>
+ </DialogTrigger>
+ <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" />
+ Keyboard Shortcuts
+ </DialogTitle>
+ <DialogDescription>
+ Speed up your video editing workflow with these keyboard shortcuts.
+ Most shortcuts work when the timeline is focused.
+ </DialogDescription>
+ </DialogHeader>
- <div className="space-y-6">
- {categories.map((category) => (
- <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-0.5">
- {shortcuts
- .filter((shortcut) => shortcut.category === category)
- .map((shortcut, index) => (
- <ShortcutItem key={index} shortcut={shortcut} />
- ))}
- </div>
- </div>
- ))}
- </div>
- </DialogContent>
- </Dialog>
- );
+ <div className="space-y-6">
+ {categories.map((category) => (
+ <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-0.5">
+ {shortcuts
+ .filter((shortcut) => shortcut.category === category)
+ .map((shortcut, index) => (
+ <ShortcutItem key={index} shortcut={shortcut} />
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </DialogContent>
+ </Dialog>
+ );
};
function ShortcutKey({ children }: { children: React.ReactNode }) {
- return (
- <kbd
- className="inline-flex font-sans text-xs rounded px-2 min-w-[1.5rem] min-h-[1.5rem] leading-none items-center justify-center shadow-sm border mr-1"
- style={{
- backgroundColor: "rgba(0, 0, 0, 0.2)",
- borderColor: "rgba(255, 255, 255, 0.1)",
- }}
- >
- {children}
- </kbd>
- );
-}
+ return (
+ <kbd
+ className="inline-flex font-sans text-xs rounded px-2 min-w-[1.5rem] min-h-[1.5rem] leading-none items-center justify-center shadow-sm border mr-1"
+ style={{
+ backgroundColor: "rgba(0, 0, 0, 0.2)",
+ borderColor: "rgba(255, 255, 255, 0.1)"
+ }}
+ >
+ {children}
+ </kbd>
+ );
+};