From a7c44b4a987f6d6e7f2752ba8c3d03caf598b9cd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 10 Jul 2024 17:28:49 +1000
Subject: [PATCH] feat(ui): rename gallery boards on double click

---
 .../Boards/BoardsList/GalleryBoard.tsx        | 46 +++++++++++++++----
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index 4a9c129448..36975d28e2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -9,6 +9,7 @@ import {
   Text,
   Tooltip,
   useDisclosure,
+  useEditableControls,
 } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -18,7 +19,8 @@ import { AutoAddBadge } from 'features/gallery/components/Boards/AutoAddBadge';
 import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMenu';
 import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
 import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback, useMemo, useState } from 'react';
+import type { MouseEvent, MouseEventHandler, MutableRefObject } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArchiveBold, PiImageSquare } from 'react-icons/pi';
 import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
@@ -49,15 +51,19 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
   const { t } = useTranslation();
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
+  const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const editingDisclosure = useDisclosure();
   const [localBoardName, setLocalBoardName] = useState(board.board_name);
+  const onStartEditingRef = useRef<MouseEventHandler | undefined>(undefined);
 
-  const handleSelectBoard = useCallback(() => {
-    dispatch(boardIdSelected({ boardId: board.board_id }));
-    if (autoAssignBoardOnClick) {
+  const onClick = useCallback(() => {
+    if (selectedBoardId !== board.board_id) {
+      dispatch(boardIdSelected({ boardId: board.board_id }));
+    }
+    if (autoAssignBoardOnClick && autoAddBoardId !== board.board_id) {
       dispatch(autoAddBoardIdChanged(board.board_id));
     }
-  }, [dispatch, board.board_id, autoAssignBoardOnClick]);
+  }, [selectedBoardId, board.board_id, autoAssignBoardOnClick, autoAddBoardId, dispatch]);
 
   const [updateBoard, { isLoading: isUpdateBoardLoading }] = useUpdateBoardMutation();
 
@@ -70,7 +76,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
     [board.board_id]
   );
 
-  const handleSubmit = useCallback(
+  const onSubmit = useCallback(
     async (newBoardName: string) => {
       if (!newBoardName.trim()) {
         // empty strings are not allowed
@@ -96,10 +102,16 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
     [board.board_id, board.board_name, editingDisclosure, updateBoard]
   );
 
-  const handleChange = useCallback((newBoardName: string) => {
+  const onChange = useCallback((newBoardName: string) => {
     setLocalBoardName(newBoardName);
   }, []);
 
+  const onDoubleClick = useCallback((e: MouseEvent<HTMLDivElement>) => {
+    if (onStartEditingRef.current) {
+      onStartEditingRef.current(e);
+    }
+  }, []);
+
   return (
     <BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
       {(ref) => (
@@ -110,7 +122,8 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
           <Flex
             position="relative"
             ref={ref}
-            onClick={handleSelectBoard}
+            onClick={onClick}
+            onDoubleClick={onDoubleClick}
             w="full"
             alignItems="center"
             borderRadius="base"
@@ -131,10 +144,12 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
               value={localBoardName}
               isDisabled={isUpdateBoardLoading}
               submitOnBlur={true}
-              onChange={handleChange}
-              onSubmit={handleSubmit}
+              onChange={onChange}
+              onSubmit={onSubmit}
+              isPreviewFocusable={false}
             >
               <EditablePreview
+                cursor="pointer"
                 p={0}
                 fontSize="md"
                 textOverflow="ellipsis"
@@ -145,6 +160,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
                 fontWeight={isSelected ? 'semibold' : 'normal'}
               />
               <EditableInput sx={editableInputStyles} />
+              <JankEditableHijack onStartEditingRef={onStartEditingRef} />
             </Editable>
             {autoAddBoardId === board.board_id && !editingDisclosure.isOpen && <AutoAddBadge />}
             {board.archived && !editingDisclosure.isOpen && <Icon as={PiArchiveBold} fill="base.300" />}
@@ -158,6 +174,16 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
   );
 };
 
+const JankEditableHijack = memo((props: { onStartEditingRef: MutableRefObject<MouseEventHandler | undefined> }) => {
+  const editableControls = useEditableControls();
+  useEffect(() => {
+    props.onStartEditingRef.current = editableControls.getEditButtonProps().onClick;
+  }, [props, editableControls]);
+  return null;
+});
+
+JankEditableHijack.displayName = 'JankEditableHijack';
+
 export default memo(GalleryBoard);
 
 const CoverImage = ({ board }: { board: BoardDTO }) => {