diff --git a/.changeset/add_button_to_add_a_sticker_you_see_in_a_message_to_your_own_user_sticker_pack.md b/.changeset/add_button_to_add_a_sticker_you_see_in_a_message_to_your_own_user_sticker_pack.md new file mode 100644 index 000000000..e416559ac --- /dev/null +++ b/.changeset/add_button_to_add_a_sticker_you_see_in_a_message_to_your_own_user_sticker_pack.md @@ -0,0 +1,5 @@ +--- +sable: minor +--- + +add button to save a sticker you see in the message timeline to your personal account sticker pack diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index a556ee0a1..f89297d66 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -80,6 +80,10 @@ import { MessageDeleteItem } from '$components/message/modals/MessageDelete'; import { MessageReportItem } from '$components/message/modals/MessageReport'; import { filterPronounsByLanguage } from '$utils/pronouns'; import { useMentionClickHandler } from '$hooks/useMentionClickHandler'; +import { + addStickerToDefaultPack, + doesStickerExistInDefaultPack, +} from '$utils/addStickerToDefaultStickerPack'; import { MessageEditor } from './MessageEditor'; import * as css from './styles.css'; @@ -649,6 +653,7 @@ function MessageInternal( }); const isThreadedMessage = mEvent.threadRootId !== undefined; + const isStickerMessage = mEvent.getType() === 'm.sticker'; return ( )} + {isStickerMessage && + !doesStickerExistInDefaultPack(mx, mEvent.getContent().url) && ( + } + radii="300" + onClick={() => { + addStickerToDefaultPack( + mx, + `sticker-${mEvent.getId()}`, + mEvent.getContent().url, + mEvent.getContent().body, + mEvent.getContent().info + ); + closeMenu(); + }} + > + + Add to User Sticker Pack + + + )} {relations && } () ?? {}; + + // modified content with the new sticker added. + // We add the new sticker under the "images" key, using the shortcode as the key for the sticker. + // The sticker content includes the mxc URL, body, info, and usage (which we set to "sticker"). + const next: PackContent = { + ...current, + images: { + ...(current.images ?? {}), + [shortcode]: { + ...(current.images?.[shortcode] ?? {}), + url: mxc, + body, + info, + usage: [ImageUsage.Sticker], + }, + }, + }; + + // update the account data with the modified content, which effectively adds the new sticker to the default sticker pack. + await mx.setAccountData(AccountDataEvent.PoniesUserEmotes, next); +} + +// check if a sticker exists in the account sticker pack +export function doesStickerExistInDefaultPack(mx: MatrixClient, mxc: string) { + const imgs = mx + .getAccountData(AccountDataEvent.PoniesUserEmotes) + ?.getContent().images; + if (imgs === undefined) return false; + return Object.values(imgs).some((image) => image.url === mxc) ?? false; +}