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

@@ -8,6 +8,7 @@ import {
} from "@/components/ui/command.tsx";
import React, { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
Key,
Server,
@@ -377,6 +378,20 @@ export function CommandPalette({
</CommandItem>
</CommandGroup>
</CommandList>
<div className="border-t border-dark-border px-4 py-2 bg-dark-hover/50 flex items-center justify-between text-xs text-muted-foreground">
<div className="flex items-center gap-2">
<span>Press</span>
<KbdGroup>
<Kbd>Shift</Kbd>
<Kbd>Shift</Kbd>
</KbdGroup>
<span>to toggle</span>
</div>
<div className="flex items-center gap-2">
<span>Close</span>
<Kbd>Esc</Kbd>
</div>
</div>
</Command>
</div>
);