feat: Add keyboard shortcut enhancements with Kbd component

- Add shadcn kbd component for displaying keyboard shortcuts
- Enhance file manager context menu to display shortcuts with Kbd component
- Add 5 new keyboard shortcuts to file manager:
  - Ctrl+D: Download selected files
  - Ctrl+N: Create new file
  - Ctrl+Shift+N: Create new folder
  - Ctrl+U: Upload files
  - Enter: Open/run selected file
- Add keyboard shortcut hints to command palette footer
- Create helper function to parse and render keyboard shortcuts
This commit is contained in:
ZacharyZcR
2025-11-09 06:29:34 +08:00
parent 62a7734777
commit e6a0f20ccd
5 changed files with 109 additions and 3 deletions

View File

@@ -19,6 +19,7 @@ import {
Bookmark,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
interface FileItem {
name: string;
@@ -425,6 +426,20 @@ export function FileManagerContextMenu({
return index > 0 && index < filteredMenuItems.length - 1;
});
const renderShortcut = (shortcut: string) => {
const keys = shortcut.split("+");
if (keys.length === 1) {
return <Kbd>{keys[0]}</Kbd>;
}
return (
<KbdGroup>
{keys.map((key, index) => (
<Kbd key={index}>{key}</Kbd>
))}
</KbdGroup>
);
};
return (
<>
<div className="fixed inset-0 z-[99990]" />
@@ -470,9 +485,9 @@ export function FileManagerContextMenu({
<span className="flex-1">{item.label}</span>
</div>
{item.shortcut && (
<span className="text-xs text-muted-foreground ml-2 flex-shrink-0">
{item.shortcut}
</span>
<div className="ml-2 flex-shrink-0">
{renderShortcut(item.shortcut)}
</div>
)}
</button>
);