diff --git a/src/app/molecules/image-pack/ImagePack.jsx b/src/app/molecules/image-pack/ImagePack.jsx index 3850ad20..d66895ff 100644 --- a/src/app/molecules/image-pack/ImagePack.jsx +++ b/src/app/molecules/image-pack/ImagePack.jsx @@ -92,6 +92,26 @@ function useRoomImagePack(roomId, stateKey) { }; } +function useUserImagePack() { + const mx = initMatrix.matrixClient; + const packEvent = mx.getAccountData('im.ponies.user_emotes'); + const pack = useMemo(() => ( + ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? { + pack: { display_name: 'Personal' }, + images: {}, + }) + ), []); + + const sendPackContent = (content) => { + mx.setAccountData('im.ponies.user_emotes', content); + }; + + return { + pack, + sendPackContent, + }; +} + function useImagePackHandles(pack, sendPackContent) { const [, forceUpdate] = useReducer((count) => count + 1, 0); @@ -309,4 +329,71 @@ ImagePack.propTypes = { handlePackDelete: PropTypes.func, }; +function ImagePackUser() { + const mx = initMatrix.matrixClient; + const [viewMore, setViewMore] = useState(false); + + const { pack, sendPackContent } = useUserImagePack(); + + const { + handleAvatarChange, + handleEditProfile, + handleUsageChange, + handleRenameItem, + handleDeleteItem, + handleUsageItem, + handleAddItem, + } = useImagePackHandles(pack, sendPackContent); + + const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2); + + return ( +
+ + + { images.length === 0 ? null : ( +
+
+ Image + Shortcode + Usage +
+ {images.map(([shortcode, image]) => ( + + ))} +
+ )} + {(pack.images.size > 2) && ( +
+ +
+ )} +
+ ); +} + export default ImagePack; + +export { ImagePackUser }; diff --git a/src/app/molecules/room-emojis/RoomEmojis.jsx b/src/app/molecules/room-emojis/RoomEmojis.jsx index 8e92b8b8..81cee0a8 100644 --- a/src/app/molecules/room-emojis/RoomEmojis.jsx +++ b/src/app/molecules/room-emojis/RoomEmojis.jsx @@ -115,7 +115,7 @@ function RoomEmojis({ roomId }) { /> )) : (
- No emojis or stickers pack yet. + No emoji or sticker pack.
) } diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index b0f45f41..618a4e72 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/src/app/organisms/settings/Settings.jsx @@ -24,6 +24,7 @@ import PopupWindow from '../../molecules/popup-window/PopupWindow'; import SettingTile from '../../molecules/setting-tile/SettingTile'; import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ImportE2ERoomKeys'; import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys'; +import { ImagePackUser } from '../../molecules/image-pack/ImagePack'; import ProfileEditor from '../profile-editor/ProfileEditor'; import CrossSigning from './CrossSigning'; @@ -31,6 +32,7 @@ import KeyBackup from './KeyBackup'; import DeviceManage from './DeviceManage'; import SunIC from '../../../../public/res/ic/outlined/sun.svg'; +import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg'; import BellIC from '../../../../public/res/ic/outlined/bell.svg'; import InfoIC from '../../../../public/res/ic/outlined/info.svg'; @@ -169,6 +171,10 @@ function NotificationsSection() { ); } +function EmojiSection() { + return
; +} + function SecuritySection() { return (
@@ -250,6 +256,7 @@ function AboutSection() { export const tabText = { APPEARANCE: 'Appearance', NOTIFICATIONS: 'Notifications', + EMOJI: 'Emoji', SECURITY: 'Security', ABOUT: 'About', }; @@ -263,6 +270,11 @@ const tabItems = [{ iconSrc: BellIC, disabled: false, render: () => , +}, { + text: tabText.EMOJI, + iconSrc: EmojiIC, + disabled: false, + render: () => , }, { text: tabText.SECURITY, iconSrc: LockIC, diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss index dac53d7a..d77e634a 100644 --- a/src/app/organisms/settings/Settings.scss +++ b/src/app/organisms/settings/Settings.scss @@ -40,7 +40,8 @@ .settings-notifications, .settings-security__card, .settings-security .device-manage, -.settings-about__card { +.settings-about__card, +.settings-emoji__card { @extend .settings-window__card; }