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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user