diff --git a/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx b/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx index 3847cf71d..dd3e2844e 100644 --- a/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx +++ b/interface/app/$libraryId/Explorer/FilePath/RenameTextBox.tsx @@ -8,7 +8,7 @@ import { useState, type ComponentProps } from 'react'; -import { useKey } from 'rooks'; +import { useKey, useKeys } from 'rooks'; import { useLibraryMutation, useRspcLibraryContext } from '@sd/client'; import { toast, Tooltip } from '@sd/ui'; import { useIsTextTruncated, useOperatingSystem } from '~/hooks'; @@ -115,9 +115,9 @@ export const RenameTextBoxBase = forwardRef( } }; - useKey('Enter', (e) => { + useKey(['F2', 'Enter'], (e) => { e.preventDefault(); - + if (os === 'windows' && e.key === 'Enter') return; if (allowRename) blur(); else if (!disabled) setAllowRename(true); }); diff --git a/interface/app/$libraryId/settings/client/keybindings.tsx b/interface/app/$libraryId/settings/client/keybindings.tsx index bd2340bba..325629673 100644 --- a/interface/app/$libraryId/settings/client/keybindings.tsx +++ b/interface/app/$libraryId/settings/client/keybindings.tsx @@ -15,9 +15,15 @@ import { Heading } from '../Layout'; import Setting from '../Setting'; type Shortcut = { - action: string; - description?: string; - key: [ModifierKeys[], string[]][]; + action: string; //the name of the action the shortcut is performing + description?: string; //what does this shortcut do? + keys: { + //the operating system the shortcut is for + [K in OperatingSystem | 'all']?: { + value: string | ModifierKeys | (string | ModifierKeys)[]; //if the shortcut is a single key, use a string, if it's a combination of keys, make it an array + split?: boolean; //if the 'length' of the shortcut is 2, should it be split into 2 keys? + }; + }; }; const shortcutCategories: Record = { @@ -25,72 +31,115 @@ const shortcutCategories: Record = { { description: 'Different pages in the app', action: 'Navigate to Settings page', - key: [ - [[], ['G']], - [[], ['S']] - ] + keys: { + all: { + value: ['G', 'S'] + } + } } ], Dialogs: [ { description: 'To perform actions and operations', action: 'Toggle Job Manager', - key: [[[ModifierKeys.Control], ['J']]] + keys: { + all: { + value: [ModifierKeys.Control, 'J'] + } + } } ], Explorer: [ { description: 'Where you explore your folders and files', action: 'Navigate explorer items', - key: [ - [[], ['ArrowUp']], - [[], ['ArrowDown']], - [[], ['ArrowRight']], - [[], ['ArrowLeft']] - ] + keys: { + all: { + value: ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'] + } + } }, { action: 'Navigate forward in folder history', - key: [[[ModifierKeys.Control], [']']]] + keys: { + all: { + value: [ModifierKeys.Control, ']'] + } + } }, { action: 'Navigate backward in folder history', - key: [[[ModifierKeys.Control], ['[']]] + keys: { + all: { + value: [ModifierKeys.Control, '['] + } + } }, { action: 'Switch explorer layout', - key: [[[ModifierKeys.Control], ['b']]] + keys: { + all: { + value: [ModifierKeys.Control, 'b'] + } + } }, { action: 'Open selected item', - key: [[[ModifierKeys.Control], ['ArrowUp']]] + keys: { + all: { + value: [ModifierKeys.Control, 'ArrowUp'] + } + } }, { action: 'Show inspector', - key: [[[ModifierKeys.Control], ['i']]] + keys: { + all: { + value: [ModifierKeys.Control, 'i'] + } + } }, { action: 'Show path bar', - key: [[[ModifierKeys.Control], ['p']]] + keys: { + all: { + value: [ModifierKeys.Control, 'p'] + } + } }, { action: 'Rename file or folder', - key: [[[], ['Enter']]] + keys: { + windows: { + value: 'F2', + split: false + }, + all: { + value: 'Enter' + } + } }, { action: 'Select first item in explorer', - key: [[[], ['ArrowDown']]] + keys: { + all: { + value: 'ArrowDown' + } + } }, { action: 'Open Quick Preview on selected item', - key: [[[], [' ']]] + keys: { + all: { + value: ' ' + } + } } ] }; export const Component = () => { const [syncWithLibrary, setSyncWithLibrary] = useState(true); - return ( <> {' '} @@ -111,12 +160,9 @@ export const Component = () => {

{category}

- {shortcutCategories[category]?.map((category) => { + {shortcutCategories[category]?.map((category, i) => { return ( -

+

{category.description}

); @@ -152,21 +198,25 @@ function KeybindTable({ data }: { data: Shortcut[] }) { ))} - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ))} - - ))} + {table.getRowModel().rows.map((row) => { + return ( + + {row.getVisibleCells().map((cell) => { + return ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ); + })} + + ); + })} ); @@ -180,29 +230,49 @@ function createKeybindColumns(os: OperatingSystem) { header: 'Description', cell: (info) =>

{info.getValue()}

}), - columnHelper.accessor('key', { + columnHelper.accessor('keys', { header: () =>

Key

, size: 200, cell: (info) => { - const shortcuts = info - .getValue() - .map(([modifiers, keys]) => keybind(modifiers, keys)); - return shortcuts.map((shortcut, i) => ( -
- {shortcut.split('').map((key) => { - const controlSymbolCheck = - key === '⌘' ? (os === 'macOS' ? '⌘' : 'Ctrl') : key; + const checkData = info.getValue()[os]?.value ?? info.getValue()['all']?.value; + const data = Array.isArray(checkData) ? checkData : [checkData]; + const shortcuts = data.map((value) => { + if (value) { + const modifierKeyCheck = value in ModifierKeys ? [value] : []; + return keybind(modifierKeyCheck as ModifierKeys[], [value]); + } + }); + return shortcuts.map((shortcut, idx) => { + if (shortcut) { + if (shortcut.length === 2) { return ( - - {controlSymbolCheck} - +
+ + {shortcut} + +
); - })} -
- )); + } else { + return shortcut?.split(' ').map(([key]) => { + const controlSymbolCheck = + key === '⌘' ? (os === 'macOS' ? '⌘' : 'Ctrl') : key; + return ( +
+ + {controlSymbolCheck} + +
+ ); + }); + } + } + }); } }) ];