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;
}