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 (
<>
@@ -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) => {