diff options
| author | Hyteq <DerpsDer.es@gmail.com> | 2025-07-20 10:50:17 +0300 |
|---|---|---|
| committer | Hyteq <DerpsDer.es@gmail.com> | 2025-07-20 10:50:17 +0300 |
| commit | fe020be6cea00691d6ce66e21843915defa5e944 (patch) | |
| tree | 65718c8aee56a61b6c42032f8ebd96915cd13dc6 /apps/web/src/components/keyboard-shortcuts-help.tsx | |
| parent | eab8ec3ba81b86fdd4ade920d999c28fb34785b1 (diff) | |
| download | opencut-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.tsx | 210 |
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> + ); +}; |
