feat(ui): boards list layout & style tweaking

invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx

@@ -52,8 +52,8 @@ const IAIDropOverlay = (props: Props) => {
           bottom={0.5}
           opacity={1}
           borderWidth={2}
-          borderColor={isOver ? 'base.50' : 'base.300'}
+          borderColor={isOver ? 'base.300' : 'base.500'}
-          borderRadius="lg"
+          borderRadius="base"
           borderStyle="dashed"
           transitionProperty="common"
           transitionDuration="0.1s"

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

@@ -1,4 +1,4 @@
-import { Box, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
+import { Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
@@ -45,33 +45,42 @@ const BoardsList = () => {
 
   return (
     <>
-      <Flex layerStyle="first" flexDir="column" gap={2} p={2} mt={2} borderRadius="base">
+      <Flex layerStyle="first" flexDir="column" borderRadius="base">
-        <Flex gap={2} alignItems="center">
+        <Flex gap={2} alignItems="center" pb={2}>
           <BoardsSearch />
           <GallerySettingsPopover />
         </Flex>
-        <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-          <Box maxH={346}>
         {allowPrivateBoards && (
           <>
-                <Flex borderBottom="1px" borderColor="base.400" my="2" justifyContent="space-between">
+            <Flex w="full" gap={2}>
-                  <Flex onClick={privateBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer">
+              <Flex
+                flexGrow={1}
+                onClick={privateBoardsDisclosure.onToggle}
+                gap={2}
+                alignItems="center"
+                cursor="pointer"
+              >
                 <Icon
                   as={PiCaretUpBold}
-                      boxSize={6}
+                  boxSize={4}
                   transform={privateBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
                   transitionProperty="common"
                   transitionDuration="normal"
                   color="base.400"
                 />
-                    <Text fontSize="md" fontWeight="medium">
+                <Text fontSize="md" fontWeight="medium" userSelect="none">
                   {t('boards.private')}
                 </Text>
               </Flex>
               <AddBoardButton isPrivateBoard={true} />
             </Flex>
             <Collapse in={privateBoardsDisclosure.isOpen} animateOpacity>
-                  <Flex direction="column">
+              <OverlayScrollbarsComponent
+                defer
+                style={overlayScrollbarsStyles}
+                options={overlayScrollbarsParams.options}
+              >
+                <Flex direction="column" maxH={346} gap={1}>
                   <NoBoardBoard isSelected={selectedBoardId === 'none'} />
                   {filteredPrivateBoards.map((board) => (
                     <GalleryBoard
@@ -82,27 +91,29 @@ const BoardsList = () => {
                     />
                   ))}
                 </Flex>
+              </OverlayScrollbarsComponent>
             </Collapse>
           </>
         )}
-            <Flex borderBottom="1px" borderColor="base.400" my="2" justifyContent="space-between">
+        <Flex w="full" gap={2}>
-              <Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer">
+          <Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer" flexGrow={1}>
             <Icon
               as={PiCaretUpBold}
-                  boxSize={6}
+              boxSize={4}
               transform={sharedBoardsDisclosure.isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
               transitionProperty="common"
               transitionDuration="normal"
               color="base.400"
             />
-                <Text fontSize="md" fontWeight="medium">
+            <Text fontSize="md" fontWeight="medium" userSelect="none">
               {allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
             </Text>
           </Flex>
           <AddBoardButton isPrivateBoard={false} />
         </Flex>
         <Collapse in={sharedBoardsDisclosure.isOpen} animateOpacity>
-              <Flex direction="column">
+          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+            <Flex direction="column" maxH={346} gap={1}>
               {filteredSharedBoards.map((board) => (
                 <GalleryBoard
                   board={board}
@@ -112,13 +123,11 @@ const BoardsList = () => {
                 />
               ))}
             </Flex>
-            </Collapse>
-          </Box>
           </OverlayScrollbarsComponent>
+        </Collapse>
       </Flex>
       <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
     </>
   );
 };
-
 export default memo(BoardsList);

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -1,16 +1,25 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Box, Editable, EditableInput, EditablePreview, Flex, Icon, Image, Text, Tooltip } from '@invoke-ai/ui-library';
+import {
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Flex,
+  Icon,
+  Image,
+  Text,
+  Tooltip,
+  useDisclosure,
+} from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
-import SelectionOverlay from 'common/components/SelectionOverlay';
 import type { AddToBoardDropData } from 'features/dnd/types';
 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 { useTranslation } from 'react-i18next';
-import { PiArchiveBold, PiImagesSquare } from 'react-icons/pi';
+import { PiArchiveBold, PiImageSquare } from 'react-icons/pi';
 import { useUpdateBoardMutation } from 'services/api/endpoints/boards';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import type { BoardDTO } from 'services/api/types';
@@ -19,14 +28,13 @@ const editableInputStyles: SystemStyleObject = {
   p: 0,
   fontSize: 'md',
   w: '100%',
+  _focusVisible: {
+    p: 0,
+  },
 };
 
-const ArchivedIcon = () => {
+const _hover: SystemStyleObject = {
-  return (
+  bg: 'base.800',
-    <Box position="absolute" top={1} insetInlineEnd={2} p={0} minW={0}>
-      <Icon as={PiArchiveBold} fill="base.300" filter="drop-shadow(0px 0px 0.1rem var(--invoke-colors-base-800))" />
-    </Box>
-  );
 };
 
 interface GalleryBoardProps {
@@ -39,54 +47,38 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
-
+  const editingDisclosure = useDisclosure();
-  const [isHovered, setIsHovered] = useState(false);
+  const [localBoardName, setLocalBoardName] = useState(board.board_name);
-  const handleMouseOver = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-  const handleMouseOut = useCallback(() => {
-    setIsHovered(false);
-  }, []);
-
-  const { currentData: coverImage } = useGetImageDTOQuery(board.cover_image_name ?? skipToken);
-
-  const { board_name, board_id } = board;
-  const [localBoardName, setLocalBoardName] = useState(board_name);
 
   const handleSelectBoard = useCallback(() => {
-    dispatch(boardIdSelected({ boardId: board_id }));
+    dispatch(boardIdSelected({ boardId: board.board_id }));
     if (autoAssignBoardOnClick) {
-      dispatch(autoAddBoardIdChanged(board_id));
+      dispatch(autoAddBoardIdChanged(board.board_id));
     }
-  }, [board_id, autoAssignBoardOnClick, dispatch]);
+  }, [dispatch, board.board_id, autoAssignBoardOnClick]);
 
   const [updateBoard, { isLoading: isUpdateBoardLoading }] = useUpdateBoardMutation();
 
   const droppableData: AddToBoardDropData = useMemo(
     () => ({
-      id: board_id,
+      id: board.board_id,
       actionType: 'ADD_TO_BOARD',
-      context: { boardId: board_id },
+      context: { boardId: board.board_id },
     }),
-    [board_id]
+    [board.board_id]
   );
 
   const handleSubmit = useCallback(
     async (newBoardName: string) => {
-      // empty strings are not allowed
       if (!newBoardName.trim()) {
-        setLocalBoardName(board_name);
+        // empty strings are not allowed
-        return;
+        setLocalBoardName(board.board_name);
-      }
+      } else if (newBoardName === board.board_name) {
-
         // don't updated the board name if it hasn't changed
-      if (newBoardName === board_name) {
+      } else {
-        return;
-      }
-
         try {
           const { board_name } = await updateBoard({
-          board_id,
+            board_id: board.board_id,
             changes: { board_name: newBoardName },
           }).unwrap();
 
@@ -94,10 +86,12 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
           setLocalBoardName(board_name);
         } catch {
           // revert on error
-        setLocalBoardName(board_name);
+          setLocalBoardName(board.board_name);
         }
+      }
+      editingDisclosure.onClose();
     },
-    [board_id, board_name, updateBoard]
+    [board.board_id, board.board_name, editingDisclosure, updateBoard]
   );
 
   const handleChange = useCallback((newBoardName: string) => {
@@ -105,17 +99,6 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
   }, []);
 
   return (
-    <Box w="full" userSelect="none" px="1">
-      <Flex
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-        position="relative"
-        alignItems="center"
-        borderRadius="base"
-        w="full"
-        my="2"
-        userSelect="none"
-      >
     <BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
       {(ref) => (
         <Tooltip
@@ -123,44 +106,26 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
           openDelay={1000}
         >
           <Flex
+            position="relative"
             ref={ref}
             onClick={handleSelectBoard}
             w="full"
             alignItems="center"
-                justifyContent="space-between"
             borderRadius="base"
             cursor="pointer"
-                gap="6"
+            py={1}
-                p="1"
+            px={2}
-              >
+            gap={2}
-                <Flex gap="6">
+            bg={isSelected ? 'base.800' : undefined}
-                  {board.archived && <ArchivedIcon />}
+            _hover={_hover}
-                  {coverImage?.thumbnail_url ? (
-                    <Image
-                      src={coverImage?.thumbnail_url}
-                      draggable={false}
-                      objectFit="cover"
-                      w="8"
-                      h="8"
-                      borderRadius="base"
-                      borderBottomRadius="lg"
-                    />
-                  ) : (
-                    <Flex w="8" h="8" justifyContent="center" alignItems="center">
-                      <Icon boxSize={8} as={PiImagesSquare} opacity={0.7} color="base.500" />
-                    </Flex>
-                  )}
-
-                  <SelectionOverlay isSelected={isSelected} isSelectedForCompare={false} isHovered={isHovered} />
-                  <Flex
-                    p={1}
-                    justifyContent="center"
-                    alignItems="center"
-                    color={isSelected ? 'base.100' : 'base.400'}
-                    lineHeight="short"
-                    fontSize="md"
           >
+            <CoverImage board={board} />
             <Editable
+              as={Flex}
+              alignItems="center"
+              gap={4}
+              flexGrow={1}
+              onEdit={editingDisclosure.onOpen}
               value={localBoardName}
               isDisabled={isUpdateBoardLoading}
               submitOnBlur={true}
@@ -172,25 +137,50 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
                 fontSize="md"
                 textOverflow="ellipsis"
                 noOfLines={1}
-                        color="inherit"
                 w="fit-content"
+                wordBreak="break-all"
+                color={isSelected ? 'base.100' : 'base.400'}
+                fontWeight={isSelected ? 'semibold' : 'normal'}
               />
               <EditableInput sx={editableInputStyles} />
             </Editable>
-                  </Flex>
+            {board.archived && !editingDisclosure.isOpen && (
-                </Flex>
+              <Icon
-                <Text justifySelf="end" color="base.600">
+                as={PiArchiveBold}
-                  {`${t('boards.imagesWithCount', { count: board.image_count })}`}
+                fill="base.300"
-                </Text>
+                filter="drop-shadow(0px 0px 0.1rem var(--invoke-colors-base-800))"
-
+              />
+            )}
             <IAIDroppable data={droppableData} dropLabel={<Text fontSize="md">{t('unifiedCanvas.move')}</Text>} />
           </Flex>
         </Tooltip>
       )}
     </BoardContextMenu>
-      </Flex>
-    </Box>
   );
 };
 
 export default memo(GalleryBoard);
+
+const CoverImage = ({ board }: { board: BoardDTO }) => {
+  const { currentData: coverImage } = useGetImageDTOQuery(board.cover_image_name ?? skipToken);
+
+  if (coverImage) {
+    return (
+      <Image
+        src={coverImage.thumbnail_url}
+        draggable={false}
+        objectFit="cover"
+        w={8}
+        h={8}
+        borderRadius="base"
+        borderBottomRadius="lg"
+      />
+    );
+  }
+
+  return (
+    <Flex w={8} h={8} justifyContent="center" alignItems="center">
+      <Icon boxSize={8} as={PiImageSquare} opacity={0.7} color="base.500" />
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx

@@ -1,13 +1,12 @@
-import { Box, Flex, Image, Text, Tooltip } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
-import SelectionOverlay from 'common/components/SelectionOverlay';
 import type { RemoveFromBoardDropData } from 'features/dnd/types';
 import { BoardTotalsTooltip } from 'features/gallery/components/Boards/BoardsList/BoardTotalsTooltip';
 import NoBoardBoardContextMenu from 'features/gallery/components/Boards/NoBoardBoardContextMenu';
 import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
-import InvokeLogoSVG from 'public/assets/images/invoke-symbol-wht-lrg.svg';
+import { memo, useCallback, useMemo } from 'react';
-import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
@@ -15,6 +14,10 @@ interface Props {
   isSelected: boolean;
 }
 
+const _hover: SystemStyleObject = {
+  bg: 'base.800',
+};
+
 const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
   const autoAssignBoardOnClick = useAppSelector((s) => s.gallery.autoAssignBoardOnClick);
@@ -25,15 +28,6 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
       dispatch(autoAddBoardIdChanged('none'));
     }
   }, [dispatch, autoAssignBoardOnClick]);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseOver = useCallback(() => {
-    setIsHovered(true);
-  }, []);
-
-  const handleMouseOut = useCallback(() => {
-    setIsHovered(false);
-  }, []);
 
   const droppableData: RemoveFromBoardDropData = useMemo(
     () => ({
@@ -44,50 +38,47 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   );
   const { t } = useTranslation();
   return (
-    <Box w="full" userSelect="none" px="1">
-      <Flex
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-        position="relative"
-        alignItems="center"
-        borderRadius="base"
-        w="full"
-        my="2"
-        userSelect="none"
-      >
     <NoBoardBoardContextMenu>
       {(ref) => (
         <Tooltip label={<BoardTotalsTooltip board_id="none" isArchived={false} />} openDelay={1000}>
           <Flex
+            position="relative"
             ref={ref}
             onClick={handleSelectBoard}
             w="full"
             alignItems="center"
             borderRadius="base"
             cursor="pointer"
-                gap="6"
+            px={2}
-                p="1"
+            py={1}
+            gap={2}
+            bg={isSelected ? 'base.800' : undefined}
+            _hover={_hover}
           >
-                <Image
+            <Flex w={8} h={8} justifyContent="center" alignItems="center">
-                  src={InvokeLogoSVG}
+              {/* iconified from public/assets/images/invoke-symbol-wht-lrg.svg */}
-                  alt="invoke-ai-logo"
+              <Icon boxSize={6} opacity={1} stroke="base.500" viewBox="0 0 66 66" fill="none">
-                  opacity={0.7}
+                <path
-                  mixBlendMode="overlay"
+                  d="M43.9137 16H63.1211V3H3.12109V16H22.3285L43.9137 50H63.1211V63H3.12109V50H22.3285"
-                  userSelect="none"
+                  strokeWidth="5"
-                  height="6"
-                  width="6"
                 />
-                <Text fontSize="md" color={isSelected ? 'base.100' : 'base.400'}>
+              </Icon>
+            </Flex>
+
+            <Text
+              fontSize="md"
+              color={isSelected ? 'base.100' : 'base.400'}
+              fontWeight={isSelected ? 'semibold' : 'normal'}
+              noOfLines={1}
+              flexShrink={0}
+            >
               {boardName}
             </Text>
-                <SelectionOverlay isSelected={isSelected} isSelectedForCompare={false} isHovered={isHovered} />
             <IAIDroppable data={droppableData} dropLabel={<Text fontSize="md">{t('unifiedCanvas.move')}</Text>} />
           </Flex>
         </Tooltip>
       )}
     </NoBoardBoardContextMenu>
-      </Flex>
-    </Box>
   );
 });
 

invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx

@@ -16,7 +16,6 @@ const GalleryBoardName = () => {
 
   return (
     <Flex
-      my="1"
       justifyContent="center"
       fontSize="md"
       fontWeight="bold"

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, ButtonGroup, Flex, Tab, TabList, Tabs } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, Tab, TabList, Tabs } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -40,10 +40,8 @@ const ImageGalleryContent = () => {
       gap={2}
     >
       {galleryHeader}
-      <Box>
       <BoardsList />
       <GalleryBoardName />
-      </Box>
       <Flex alignItems="center" justifyContent="space-between" gap={2}>
         <Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">
           <TabList>