search stikers

res/css/views/rooms/_2545Stickers.scss

@@ -7,6 +7,9 @@
         // grrr
         height: unset !important;
     }
+    .mx_EmojiPicker_search {
+        margin: 0px 0px 8px 0px;
+    }
 }
 
 .mx_2545Stickers_grid {
@@ -28,7 +31,5 @@
 }
 
 .mx_2545Stickers_label {
-    padding-left: 1em;
-    padding-right: 1em;
     margin-top: 0px;
 }

src/components/views/rooms/MSC2545StickerPicker.tsx

@@ -18,13 +18,14 @@ limitations under the License.
 */
 
 import { IImageInfo, Room } from 'matrix-js-sdk/src/matrix';
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import { mediaFromMxc } from '../../../customisations/Media';
 import ContextMenu, { ChevronFace } from '../../structures/ContextMenu';
 import ScrollPanel from '../../structures/ScrollPanel';
 import GenericElementContextMenu from '../context_menus/GenericElementContextMenu';
+import Search from '../emojipicker/Search';
 
 const EMOTE_ROOMS_EVENT_TYPE = "im.ponies.emote_rooms";
 const ROOM_EMOTES_EVENT_TYPE = "im.ponies.room_emotes";
@@ -58,22 +59,12 @@ export const MSC2545StickerPicker: React.FC<{
     setStickerPickerOpen: (isStickerPickerOpen: boolean) => void;
 }> = ({ room, threadId, menuPosition, isStickerPickerOpen, setStickerPickerOpen }) => {
     const cli = useContext(MatrixClientContext);
+    const [searchFilter, setSearchFilter] = useState("");
     if (!isStickerPickerOpen) return null;
 
     const evt = cli.getAccountData(EMOTE_ROOMS_EVENT_TYPE);
     const evtContent = evt.event.content as { rooms: { [roomId: string]: { [packName: string]: {} } } };
 
-    const packs = Object.keys(evtContent.rooms)
-        .map(roomId => {
-            const room = cli.getRoom(roomId);
-            return Object.keys(evtContent.rooms[roomId])
-                .map(name => {
-                    const pack = room.currentState.getStateEvents(ROOM_EMOTES_EVENT_TYPE, name)
-                        .event.content as I2545Pack;
-                    return { room, pack, packName: name };
-                });
-        }).flat(1);
-
     const packImage = (image: I2545Image) => {
         const media = mediaFromMxc(image.url, cli);
         // noinspection JSIgnoredPromiseFromCall
@@ -85,27 +76,44 @@ export const MSC2545StickerPicker: React.FC<{
         };
 
         // eslint-disable-next-line new-cap
-        return <div key={image.url} className={cc("imageContainer")}>
+        return <div key={image.url + image.body} className={cc("imageContainer")}>
             <img src={media.srcHttp} onClick={onImageClick} />
         </div>;
     };
 
-    const renderedPacks = packs.map(({ room, pack, packName }) => {
-        const images = Object.values(pack.images).map(packImage);
-        return <div key={packName}>
-            <h3 className={cc("label")}>{ pack.pack.display_name }</h3>
-            <div className={cc("grid")}>
-                { images }
-            </div>
-        </div>;
-    });
+    const packs = Object.keys(evtContent.rooms)
+        .map(roomId => {
+            const room = cli.getRoom(roomId);
+            return Object.keys(evtContent.rooms[roomId])
+                .map(name => {
+                    const pack = room.currentState.getStateEvents(ROOM_EMOTES_EVENT_TYPE, name)
+                        .event.content as I2545Pack;
+                    return { room, pack, packName: name };
+                });
+        }).flat(1);
 
     const finished = () => {
         if (isStickerPickerOpen) {
             setStickerPickerOpen(false);
         }
     };
 
+    const renderedPacks = packs.map(({ pack, packName }) => {
+        const lcFilter = searchFilter.toLowerCase().trim(); // filter is case insensitive
+        const images = Object.values(pack.images)
+            .filter(im => im.body.toLowerCase().includes(lcFilter));
+
+        if (images.length == 0) return;
+
+        return <div key={"pack-" + packName}>
+            <h3 className={cc("label")}>{pack.pack.display_name}</h3>
+            <div className={cc("grid")}>
+                {images.map(packImage)}
+            </div>
+        </div>;
+    });
+
+
     return <ContextMenu
         chevronFace={ChevronFace.Bottom}
         menuWidth={300}
@@ -119,9 +127,10 @@ export const MSC2545StickerPicker: React.FC<{
     >
         <GenericElementContextMenu element={
             <ScrollPanel startAtBottom={false} className={cc("root")}>
-                { renderedPacks }
+                <Search query={searchFilter} onChange={setSearchFilter} onEnter={() => { }} />
+                {renderedPacks}
             </ScrollPanel>}
-        onResize={finished} />
+            onResize={finished} />
     </ContextMenu>;
 };