Desktop: Resolves #11664: Double click to open a note in a new window

.eslintignore

@@ -312,6 +312,7 @@ packages/app-desktop/gui/NoteList/utils/useItemCss.js
 packages/app-desktop/gui/NoteList/utils/useMoveNote.js
 packages/app-desktop/gui/NoteList/utils/useOnKeyDown.js
 packages/app-desktop/gui/NoteList/utils/useOnNoteClick.js
+packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.js
 packages/app-desktop/gui/NoteList/utils/useScroll.js
 packages/app-desktop/gui/NoteList/utils/useVisibleRange.test.js
 packages/app-desktop/gui/NoteList/utils/useVisibleRange.js

.gitignore

@@ -287,6 +287,7 @@ packages/app-desktop/gui/NoteList/utils/useItemCss.js
 packages/app-desktop/gui/NoteList/utils/useMoveNote.js
 packages/app-desktop/gui/NoteList/utils/useOnKeyDown.js
 packages/app-desktop/gui/NoteList/utils/useOnNoteClick.js
+packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.js
 packages/app-desktop/gui/NoteList/utils/useScroll.js
 packages/app-desktop/gui/NoteList/utils/useVisibleRange.test.js
 packages/app-desktop/gui/NoteList/utils/useVisibleRange.js

packages/app-desktop/gui/MultiNoteActions.tsx

@@ -32,6 +32,14 @@ function styles_(props: MultiNoteActionsProps) {
 				display: 'flex',
 				flexDirection: 'column',
 			},
+			divider: {
+				borderTopWidth: 1,
+				borderTopStyle: 'solid',
+				borderTopColor: theme.dividerColor,
+				width: '100%',
+				height: 1,
+				marginBottom: 10,
+			},
 			button: {
 				...theme.buttonStyle,
 				marginBottom: 10,
@@ -68,11 +76,17 @@ export default function MultiNoteActions(props: MultiNoteActionsProps) {
 		const item = menuItems[i];
 		if (!item.enabled) continue;
 
-		itemComps.push(
-			<button key={item.label} style={styles.button} onClick={() => multiNotesButton_click(item)}>
-				{item.label}
-			</button>,
-		);
+		if (item.type === 'separator') {
+			itemComps.push(
+				<div key={`divider${i}`} style={styles.divider}/>,
+			);
+		} else {
+			itemComps.push(
+				<button key={item.label} style={styles.button} onClick={() => multiNotesButton_click(item)}>
+					{item.label}
+				</button>,
+			);
+		}
 	}
 
 	return (

packages/app-desktop/gui/NoteList/NoteList2.tsx

@@ -29,6 +29,7 @@ import getNoteElementIdFromJoplinId from '../NoteListItem/utils/getNoteElementId
 import useFocusVisible from './utils/useFocusVisible';
 import { stateUtils } from '@joplin/lib/reducer';
 import { connect } from 'react-redux';
+import useOnNoteDoubleClick from './utils/useOnNoteDoubleClick';
 
 const commands = {
 	focusElementNoteList,
@@ -103,6 +104,8 @@ const NoteList = (props: Props) => {
 
 	const onNoteClick = useOnNoteClick(props.dispatch, focusNote);
 
+	const onNoteDoubleClick = useOnNoteDoubleClick();
+
 	const onKeyDown = useOnKeyDown(
 		activeNoteId,
 		props.selectedNoteIds,
@@ -226,6 +229,7 @@ const NoteList = (props: Props) => {
 					itemSize={itemSize}
 					onChange={listRenderer.onChange}
 					onClick={onNoteClick}
+					onDoubleClick={onNoteDoubleClick}
 					onContextMenu={onItemContextMenu}
 					onDragStart={onDragStart}
 					onDragOver={onDragOver}

packages/app-desktop/gui/NoteList/utils/useOnNoteDoubleClick.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import CommandService from '@joplin/lib/services/CommandService';
+
+export default () => {
+	return useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+		const noteId = event.currentTarget.getAttribute('data-id');
+		void CommandService.instance().execute('openNoteInNewWindow', noteId);
+	}, []);
+};

packages/app-desktop/gui/NoteListItem/NoteListItem.tsx

@@ -22,6 +22,7 @@ interface NoteItemProps {
 	noteCount: number;
 	onChange: OnChangeHandler;
 	onClick: MouseEventHandler<HTMLDivElement>;
+	onDoubleClick: MouseEventHandler<HTMLDivElement>;
 	onContextMenu: MouseEventHandler;
 	onDragOver: DragEventHandler;
 	onDragStart: DragEventHandler;
@@ -79,6 +80,7 @@ const NoteListItem = (props: NoteItemProps, ref: LegacyRef<HTMLDivElement>) => {
 		props.style,
 		props.itemSize,
 		props.onClick,
+		props.onDoubleClick,
 		props.flow,
 	);
 

packages/app-desktop/gui/NoteListItem/utils/useItemElement.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { ItemFlow } from '@joplin/lib/services/plugins/api/noteListType';
 
 const useItemElement = (
-	rootElement: HTMLDivElement, noteId: string, noteHtml: string, focusVisible: boolean, style: React.CSSProperties, itemSize: Size, onClick: React.MouseEventHandler<HTMLDivElement>, flow: ItemFlow,
+	rootElement: HTMLDivElement, noteId: string, noteHtml: string, focusVisible: boolean, style: React.CSSProperties, itemSize: Size, onClick: React.MouseEventHandler<HTMLDivElement>, onDoubleClick: React.MouseEventHandler<HTMLDivElement>, flow: ItemFlow,
 ) => {
 	const [itemElement, setItemElement] = useState<HTMLDivElement>(null);
 
@@ -21,8 +21,10 @@ const useItemElement = (
 		if (flow === ItemFlow.LeftToRight) element.style.width = `${itemSize.width}px`;
 		element.style.height = `${itemSize.height}px`;
 		element.innerHTML = noteHtml;
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're mixing React synthetic events with DOM events which ideally should not be done but it is fine in this particular case
 		element.addEventListener('click', onClick as any);
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're mixing React synthetic events with DOM events which ideally should not be done but it is fine in this particular case
+		element.addEventListener('dblclick', onDoubleClick as any);
 
 		rootElement.appendChild(element);
 
@@ -31,7 +33,7 @@ const useItemElement = (
 		return () => {
 			element.remove();
 		};
-	}, [rootElement, itemSize, noteHtml, noteId, style, onClick, flow]);
+	}, [rootElement, itemSize, noteHtml, noteId, style, onClick, onDoubleClick, flow]);
 
 	useEffect(() => {
 		if (!itemElement) return;