Desktop: Add left/right arrow keys as expand/collapse shortcuts for n…

…otebooks (#10944)
laurent22 · Aug 31, 2024 · 4f2d0c8 · 4f2d0c8
1 parent 3bca12f
commit 4f2d0c8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx b/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx
@@ -51,6 +51,7 @@ const FolderAndTagList: React.FC<Props> = props => {
 		listItems: listItems,
 		selectedIndex,
 		updateSelectedIndex,
+		collapsedFolderIds: props.collapsedFolderIds,
 	});
 
 	const itemListRef = useRef<ItemList<ListItem>>();

diff --git a/packages/app-desktop/gui/Sidebar/hooks/useOnSidebarKeyDownHandler.ts b/packages/app-desktop/gui/Sidebar/hooks/useOnSidebarKeyDownHandler.ts
@@ -1,28 +1,44 @@
 import { Dispatch } from 'redux';
-import { ListItem, ListItemType, SetSelectedIndexCallback } from '../types';
+import { FolderListItem, ListItem, ListItemType, SetSelectedIndexCallback } from '../types';
 import { KeyboardEventHandler, useCallback } from 'react';
 import CommandService from '@joplin/lib/services/CommandService';
 
 interface Props {
 	dispatch: Dispatch;
 	listItems: ListItem[];
+	collapsedFolderIds: string[];
 	selectedIndex: number;
 	updateSelectedIndex: SetSelectedIndexCallback;
 }
 
+
+const isToggleShortcut = (keyCode: string, selectedItem: FolderListItem, collapsedFolderIds: string[]) => {
+	if (!['Space', 'ArrowLeft', 'ArrowRight'].includes(keyCode)) {
+		return false;
+	}
+	if (keyCode === 'Space') {
+		return true;
+	}
+
+	const isCollapsed = collapsedFolderIds.includes(selectedItem.folder.id);
+	return (keyCode === 'ArrowRight') === isCollapsed;
+};
+
 const useOnSidebarKeyDownHandler = (props: Props) => {
-	const { updateSelectedIndex, listItems, selectedIndex, dispatch } = props;
+	const { updateSelectedIndex, listItems, selectedIndex, collapsedFolderIds, dispatch } = props;
 
 	return useCallback<KeyboardEventHandler<HTMLElement>>((event) => {
 		const selectedItem = listItems[selectedIndex];
-		if (selectedItem && selectedItem.kind === ListItemType.Folder && event.code === 'Space') {
+		if (selectedItem?.kind === ListItemType.Folder && isToggleShortcut(event.code, selectedItem, collapsedFolderIds)) {
 			event.preventDefault();
 
 			dispatch({
 				type: 'FOLDER_TOGGLE',
 				id: selectedItem.folder.id,
 			});
-		} else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') { // ctrl+a or cmd+a
+		}
+
+		if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') { // ctrl+a or cmd+a
 			event.preventDefault();
 		}
 
@@ -45,7 +61,7 @@ const useOnSidebarKeyDownHandler = (props: Props) => {
 			event.preventDefault();
 			updateSelectedIndex(selectedIndex + indexChange);
 		}
-	}, [selectedIndex, listItems, updateSelectedIndex, dispatch]);
+	}, [selectedIndex, collapsedFolderIds, listItems, updateSelectedIndex, dispatch]);
 };
 
 export default useOnSidebarKeyDownHandler;