From 4f2d0c8e5d8d6e181b973caeb0cd1f77d24c5048 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Sat, 31 Aug 2024 07:44:12 -0700
Subject: [PATCH] Desktop: Add left/right arrow keys as expand/collapse
 shortcuts for notebooks (#10944)

---
 .../gui/Sidebar/FolderAndTagList.tsx          |  1 +
 .../hooks/useOnSidebarKeyDownHandler.ts       | 26 +++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx b/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx
index 63517e18139..85bb4606981 100644
--- 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
index ab71369bce4..acd335c3e8c 100644
--- 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;