Add personal emoji in settings

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 (
+    <div className="image-pack">
+      <ImagePackProfile
+        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        displayName={pack.displayName ?? 'Personal'}
+        attribution={pack.attribution}
+        usage={getUsage(pack.usage)}
+        onUsageChange={handleUsageChange}
+        onAvatarChange={handleAvatarChange}
+        onEditProfile={handleEditProfile}
+      />
+      <ImagePackUpload onUpload={handleAddItem} />
+      { images.length === 0 ? null : (
+        <div>
+          <div className="image-pack__header">
+            <Text variant="b3">Image</Text>
+            <Text variant="b3">Shortcode</Text>
+            <Text variant="b3">Usage</Text>
+          </div>
+          {images.map(([shortcode, image]) => (
+            <ImagePackItem
+              key={shortcode}
+              url={mx.mxcUrlToHttp(image.mxc)}
+              shortcode={shortcode}
+              usage={getUsage(image.usage)}
+              onUsageChange={handleUsageItem}
+              onDelete={handleDeleteItem}
+              onRename={handleRenameItem}
+            />
+          ))}
+        </div>
+      )}
+      {(pack.images.size > 2) && (
+        <div className="image-pack__footer">
+          <Button onClick={() => setViewMore(!viewMore)}>
+            {
+              viewMore
+                ? 'View less'
+                : `View ${pack.images.size - 2} more`
+            }
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default ImagePack;
+
+export { ImagePackUser };

src/app/molecules/room-emojis/RoomEmojis.jsx

@@ -115,7 +115,7 @@ function RoomEmojis({ roomId }) {
             />
           )) : (
             <div className="room-emojis__empty">
-              <Text>No emojis or stickers pack yet.</Text>
+              <Text>No emoji or sticker pack.</Text>
             </div>
           )
       }

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 <div className="settings-emoji__card"><ImagePackUser /></div>;
+}
+
 function SecuritySection() {
   return (
     <div className="settings-security">
@@ -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: () => <NotificationsSection />,
+}, {
+  text: tabText.EMOJI,
+  iconSrc: EmojiIC,
+  disabled: false,
+  render: () => <EmojiSection />,
 }, {
   text: tabText.SECURITY,
   iconSrc: LockIC,

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