diff --git a/packages/web/src/directories/directory-page/directory-page.tsx b/packages/web/src/directories/directory-page/directory-page.tsx index d0e8c6e..82a74fa 100644 --- a/packages/web/src/directories/directory-page/directory-page.tsx +++ b/packages/web/src/directories/directory-page/directory-page.tsx @@ -14,7 +14,7 @@ import { PlusIcon, UploadCloudIcon, } from "lucide-react" -import React, { type ChangeEvent, Fragment, useContext, useRef } from "react" +import React, { type ChangeEvent, Fragment, useContext, useEffect, useRef } from "react" import { toast } from "sonner" import { ImagePreviewDialog } from "@/components/image-preview-dialog" import { @@ -42,6 +42,7 @@ import { import { WithAtom } from "../../components/with-atom" import { useFileDrop } from "../../files/use-file-drop" import { cn } from "../../lib/utils" +import { isControlOrCommandKeyActive, keyboardModifierAtom } from "../../lib/keyboard" import { DirectoryPageContext } from "./context" import { DirectoryContentTable } from "./directory-content-table" import { NewDirectoryDialog } from "./new-directory-dialog" @@ -50,12 +51,32 @@ import { dragInfoAtom, newFileTypeAtom, openedFileAtom } from "./state" export function DirectoryPage() { const { directory } = useContext(DirectoryPageContext) + const [newFileType, setNewFileType] = useAtom(newFileTypeAtom) + const keyboardModifiers = useAtomValue(keyboardModifierAtom) + + // Keyboard shortcut handler for Cmd/Ctrl+Shift+N to create new directory + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if ( + event.key === "N" && + event.shiftKey && + isControlOrCommandKeyActive(keyboardModifiers) + ) { + event.preventDefault() + setNewFileType(FileType.Directory) + } + } + + window.addEventListener("keydown", handleKeyDown) + return () => window.removeEventListener("keydown", handleKeyDown) + }, [keyboardModifiers, setNewFileType]) + return ( <>
- + setNewFileType(FileType.Directory)} />
@@ -64,19 +85,15 @@ export function DirectoryPage() { - - {(newFileType, setNewFileType) => ( - { - if (!open) { - setNewFileType(null) - } - }} - /> - )} - + { + if (!open) { + setNewFileType(null) + } + }} + /> ) } @@ -210,11 +227,11 @@ function UploadFileButton() { ) } -function NewDirectoryItemDropdown() { - const [newFileType, setNewFileType] = useAtom(newFileTypeAtom) +function NewDirectoryItemDropdown({ onNewDirectory }: { onNewDirectory: () => void }) { + const [newFileType] = useAtom(newFileTypeAtom) const addNewDirectory = () => { - setNewFileType(FileType.Directory) + onNewDirectory() } const handleCloseAutoFocus = (event: Event) => {