diff --git a/res/css/views/rooms/_2545Stickers.scss b/res/css/views/rooms/_2545Stickers.scss index a58bdb676be8..bbc32b39b50f 100644 --- a/res/css/views/rooms/_2545Stickers.scss +++ b/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; } diff --git a/src/components/views/rooms/MSC2545StickerPicker.tsx b/src/components/views/rooms/MSC2545StickerPicker.tsx index d7b7bcb79010..2c03b5323749 100644 --- a/src/components/views/rooms/MSC2545StickerPicker.tsx +++ b/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,20 +76,21 @@ export const MSC2545StickerPicker: React.FC<{ }; // eslint-disable-next-line new-cap - return