feat: Initial clean release of CHM

packages/app-desktop/gui/Sidebar/hooks/useOnRenderListWrapper.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { _ } from '@joplin/lib/locale';
+import CommandService from '@joplin/lib/services/CommandService';
+import SyncButton from '../SyncButton';
+
+interface Props {
+	selectedIndex: number;
+	onKeyDown: React.KeyboardEventHandler;
+	allFoldersCollapsed: boolean;
+	hasSubFolders: boolean;
+}
+
+const onAddFolderButtonClick = () => {
+	void CommandService.instance().execute('newFolder');
+};
+
+const onToggleAllFolders = (allFoldersCollapsed: boolean) => {
+	void CommandService.instance().execute('toggleAllFolders', !allFoldersCollapsed);
+};
+
+interface CollapseExpandAllButtonProps {
+	allFoldersCollapsed: boolean;
+	hasSubFolders: boolean;
+}
+
+const CollapseExpandAllButton = (props: CollapseExpandAllButtonProps) => {
+	// To allow it to be accessed by accessibility tools, the toggle button
+	// is not included in the portion of the list with role='tree'.
+	const icon = props.allFoldersCollapsed ? 'far fa-caret-square-right' : 'far fa-caret-square-down';
+	const label = props.allFoldersCollapsed ? _('Expand all notebooks') : _('Collapse all notebooks');
+
+	return <button
+		onClick={() => onToggleAllFolders(props.allFoldersCollapsed)}
+		className={`sidebar-header-button -collapseall ${props.hasSubFolders ? '' : '-disabled'}`}
+		title={label}
+		disabled={!props.hasSubFolders}
+	>
+		<i
+			aria-label={label}
+			role='img'
+			className={icon}
+		/>
+	</button>;
+};
+
+const ToggleNoteListButton = () => {
+	// Visible one-click switch for the note list pane (mirrors View > Toggle note list),
+	// so hiding/showing the middle pane doesn't require a menu or shortcut.
+	const label = _('Toggle note list');
+
+	return <button onClick={() => void CommandService.instance().execute('toggleNoteList')} className='sidebar-header-button -toggle-note-list' title={label}>
+		<i
+			aria-label={label}
+			role='img'
+			className='fas fa-list'
+		/>
+	</button>;
+};
+
+const NewFolderButton = () => {
+	// To allow it to be accessed by accessibility tools, the new folder button
+	// is not included in the portion of the list with role='tree'.
+	const label = _('New notebook');
+
+	return <button onClick={onAddFolderButtonClick} className='sidebar-header-button -newfolder' title={label}>
+		<i
+			aria-label={label}
+			role='img'
+			className='fas fa-plus'
+		/>
+	</button>;
+};
+
+const useOnRenderListWrapper = (props: Props) => {
+	return useCallback((listItems: React.ReactNode[]) => {
+		const listHasValidSelection = props.selectedIndex >= 0;
+		const allowContainerFocus = !listHasValidSelection;
+		return <>
+			<CollapseExpandAllButton allFoldersCollapsed={props.allFoldersCollapsed} hasSubFolders={props.hasSubFolders}/>
+			<NewFolderButton/>
+			<ToggleNoteListButton/>
+			<SyncButton/>
+			<div
+				role='tree'
+				className='sidebar-list-items-wrapper'
+				tabIndex={allowContainerFocus ? 0 : undefined}
+				onKeyDown={props.onKeyDown}
+			>
+				{...listItems}
+			</div>
+		</>;
+	}, [props.selectedIndex, props.onKeyDown, props.allFoldersCollapsed, props.hasSubFolders]);
+};
+
+export default useOnRenderListWrapper;