Compare commits

...

2 Commits

Author SHA1 Message Date
798bea6bf7 refactor: simplify keyboard shortcut implementation
- Remove unnecessary callback prop from NewDirectoryItemDropdown
- Use atom directly in both components for cleaner code
- Restore WithAtom wrapper for consistent pattern
- Keep keyboard shortcut functionality intact

Co-authored-by: Ona <no-reply@ona.com>
2025-09-28 16:05:05 +00:00
152485e56c feat: add keyboard shortcut for new directory
- Add Cmd/Ctrl+Shift+N keyboard shortcut to create new directory
- Integrate with existing keyboard modifier system
- Refactor NewDirectoryItemDropdown to accept callback prop
- Remove WithAtom wrapper for cleaner state management

Co-authored-by: Ona <no-reply@ona.com>
2025-09-28 15:56:43 +00:00

View File

@@ -14,7 +14,7 @@ import {
PlusIcon, PlusIcon,
UploadCloudIcon, UploadCloudIcon,
} from "lucide-react" } 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 { toast } from "sonner"
import { ImagePreviewDialog } from "@/components/image-preview-dialog" import { ImagePreviewDialog } from "@/components/image-preview-dialog"
import { import {
@@ -42,6 +42,7 @@ import {
import { WithAtom } from "../../components/with-atom" import { WithAtom } from "../../components/with-atom"
import { useFileDrop } from "../../files/use-file-drop" import { useFileDrop } from "../../files/use-file-drop"
import { cn } from "../../lib/utils" import { cn } from "../../lib/utils"
import { isControlOrCommandKeyActive, keyboardModifierAtom } from "../../lib/keyboard"
import { DirectoryPageContext } from "./context" import { DirectoryPageContext } from "./context"
import { DirectoryContentTable } from "./directory-content-table" import { DirectoryContentTable } from "./directory-content-table"
import { NewDirectoryDialog } from "./new-directory-dialog" import { NewDirectoryDialog } from "./new-directory-dialog"
@@ -50,6 +51,26 @@ import { dragInfoAtom, newFileTypeAtom, openedFileAtom } from "./state"
export function DirectoryPage() { export function DirectoryPage() {
const { directory } = useContext(DirectoryPageContext) const { directory } = useContext(DirectoryPageContext)
const setNewFileType = useSetAtom(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 ( return (
<> <>
<header className="flex py-1 shrink-0 items-center gap-2 border-b px-4 w-full"> <header className="flex py-1 shrink-0 items-center gap-2 border-b px-4 w-full">