add searching to boards list

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

@@ -1,16 +1,19 @@
-import { Grid } from '@chakra-ui/react';
+import { Box, Grid, Input, Spacer } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import {
   boardsSelector,
   selectBoardsAll,
+  setBoardSearchText,
 } from 'features/gallery/store/boardSlice';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import HoverableBoard from './HoverableBoard';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import AddBoardButton from './AddBoardButton';
 import AllImagesBoard from './AllImagesBoard';
+import { searchBoardsSelector } from '../../store/boardSelectors';
+import { useSelector } from 'react-redux';
 
 const selector = createSelector(
   [selectBoardsAll, boardsSelector],
@@ -21,7 +24,16 @@ const selector = createSelector(
 );
 
 const BoardsList = () => {
-  const { boards, selectedBoardId } = useAppSelector(selector);
+  const dispatch = useAppDispatch();
+  const { selectedBoardId } = useAppSelector(selector);
+  const filteredBoards = useSelector(searchBoardsSelector);
+
+  const [searchMode, setSearchMode] = useState(false);
+
+  const handleBoardSearch = (searchTerm: string) => {
+    setSearchMode(searchTerm.length > 0);
+    dispatch(setBoardSearchText(searchTerm));
+  };
 
   return (
     <OverlayScrollbarsComponent
@@ -36,6 +48,14 @@ const BoardsList = () => {
         },
       }}
     >
+      <Box margin="1rem 0">
+        <Input
+          placeholder="Search Boards..."
+          onChange={(e) => {
+            handleBoardSearch(e.target.value);
+          }}
+        />
+      </Box>
       <Grid
         className="list-container"
         sx={{
@@ -45,9 +65,13 @@ const BoardsList = () => {
           gridAutoColumns: '4rem',
         }}
       >
+        {!searchMode && (
+          <>
             <AddBoardButton />
             <AllImagesBoard isSelected={selectedBoardId === null} />
-        {boards.map((board) => (
+          </>
+        )}
+        {filteredBoards.map((board) => (
           <HoverableBoard
             key={board.board_id}
             board={board}

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

@@ -90,7 +90,7 @@ const itemSelector = createSelector(
 
 const mainSelector = createSelector(
   [gallerySelector, uiSelector, boardSelector],
-  (gallery, ui, boardState) => {
+  (gallery, ui, boards) => {
     const {
       galleryImageMinimumWidth,
       galleryImageObjectFit,
@@ -101,9 +101,6 @@ const mainSelector = createSelector(
     } = gallery;
 
     const { shouldPinGallery } = ui;
-
-    const { entities: boards } = boardState;
-
     return {
       shouldPinGallery,
       galleryImageMinimumWidth,

invokeai/frontend/web/src/features/gallery/store/boardSelectors.ts

@@ -1,3 +1,23 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
+import { selectBoardsAll } from './boardSlice';
 
-export const boardSelector = (state: RootState) => state.boards;
+export const boardSelector = (state: RootState) => state.boards.entities;
+
+export const searchBoardsSelector = createSelector(
+  (state: RootState) => state,
+  (state) => {
+    const {
+      boards: { searchText },
+    } = state;
+
+    if (!searchText) {
+      // If no search text provided, return all entities
+      return selectBoardsAll(state);
+    }
+
+    return selectBoardsAll(state).filter((i) =>
+      i.board_name.toLowerCase().includes(searchText.toLowerCase())
+    );
+  }
+);

invokeai/frontend/web/src/features/gallery/store/boardSlice.ts

@@ -26,6 +26,7 @@ type AdditionalBoardsState = {
   total: number;
   isLoading: boolean;
   selectedBoardId: EntityId | null;
+  searchText?: string;
 };
 
 export const initialBoardsState =
@@ -55,6 +56,9 @@ const boardsSlice = createSlice({
     boardIdSelected: (state, action: PayloadAction<string | null>) => {
       state.selectedBoardId = action.payload;
     },
+    setBoardSearchText: (state, action: PayloadAction<string>) => {
+      state.searchText = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(receivedBoards.pending, (state) => {
@@ -95,8 +99,13 @@ export const {
   selectTotal: selectBoardsTotal,
 } = boardsAdapter.getSelectors<RootState>((state) => state.boards);
 
-export const { boardUpserted, boardUpdatedOne, boardRemoved, boardIdSelected } =
+export const {
-  boardsSlice.actions;
+  boardUpserted,
+  boardUpdatedOne,
+  boardRemoved,
+  boardIdSelected,
+  setBoardSearchText,
+} = boardsSlice.actions;
 
 export const boardsSelector = (state: RootState) => state.boards;