Add checkbox to make pack global

src/app/molecules/image-pack/ImagePack.jsx

@@ -79,7 +79,7 @@ function useRoomImagePack(roomId, stateKey) {
 
   const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
   const pack = useMemo(() => (
-    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent(), room)
+    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
   ), [room, stateKey]);
 
   const sendPackContent = (content) => {
@@ -183,10 +183,29 @@ function useImagePackHandles(pack, sendPackContent) {
   };
 }
 
+function addGlobalImagePack(mx, roomId, stateKey) {
+  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  if (!content.rooms) content.rooms = {};
+  if (!content.rooms[roomId]) content.rooms[roomId] = {};
+  content.rooms[roomId][stateKey] = {};
+  return mx.setAccountData('im.ponies.emote_rooms', content);
+}
+function removeGlobalImagePack(mx, roomId, stateKey) {
+  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  if (!content.rooms) return Promise.resolve();
+  if (!content.rooms[roomId]) return Promise.resolve();
+  delete content.rooms[roomId][stateKey];
+  if (Object.keys(content.rooms[roomId]).length === 0) {
+    delete content.rooms[roomId];
+  }
+  return mx.setAccountData('im.ponies.emote_rooms', content);
+}
+
 function ImagePack({ roomId, stateKey }) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
   const [viewMore, setViewMore] = useState(false);
+  const [isGlobal, setIsGlobal] = useState(isGlobalPack(roomId, stateKey));
 
   const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
 
@@ -200,6 +219,12 @@ function ImagePack({ roomId, stateKey }) {
     handleAddItem,
   } = useImagePackHandles(pack, sendPackContent);
 
+  const handleGlobalChange = (isG) => {
+    setIsGlobal(isG);
+    if (isG) addGlobalImagePack(mx, roomId, stateKey);
+    else removeGlobalImagePack(mx, roomId, stateKey);
+  };
+
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
   const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
 
@@ -251,7 +276,7 @@ function ImagePack({ roomId, stateKey }) {
         </div>
       )}
       <div className="image-pack__global">
-        <Checkbox variant="positive" isActive={isGlobalPack(roomId, stateKey)} />
+        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
         <div>
           <Text variant="b2">Use globally</Text>
           <Text variant="b3">Add this pack to your account to use in all rooms.</Text>

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

@@ -18,7 +18,7 @@ function RoomEmojis({ roomId }) {
     return true;
   });
 
-  return usablePacks.map((mEvent) => (
+  return usablePacks.reverse().map((mEvent) => (
     <ImagePack
       key={mEvent.getId()}
       roomId={roomId}

src/app/organisms/emoji-board/custom-emoji.js

@@ -3,23 +3,20 @@ import { emojis } from './emoji';
 // https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
 
 class ImagePack {
-  static parsePack(eventId, packContent, room) {
+  static parsePack(eventId, packContent) {
     if (!eventId || typeof packContent?.images !== 'object') {
       return null;
     }
 
-    return new ImagePack(eventId, packContent, room);
+    return new ImagePack(eventId, packContent);
   }
 
-  constructor(eventId, content, room) {
+  constructor(eventId, content) {
     this.id = eventId;
     this.content = JSON.parse(JSON.stringify(content));
 
     this.applyPack(content);
     this.applyImages(content);
-
-    this.displayName ??= room?.name;
-    this.avatarUrl ??= room?.getMxcAvatarUrl();
   }
 
   applyPack(content) {
@@ -160,7 +157,12 @@ function getGlobalImagePacks(mx) {
 
     return stateKeys.map((stateKey) => {
       const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-      return ImagePack.parsePack(data?.getId(), data?.getContent(), room);
+      const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
+      if (pack) {
+        pack.displayName ??= room.name;
+        pack.avatarUrl ??= room.getMxcAvatarUrl();
+      }
+      return pack;
     }).filter((pack) => pack !== null);
   });
 
@@ -174,6 +176,7 @@ function getUserImagePack(mx) {
   }
 
   const userImagePack = ImagePack.parsePack(mx.getUserId(), accountDataEmoji.event.content);
+  userImagePack.displayName ??= 'Personal Emoji';
   return userImagePack;
 }
 
@@ -181,7 +184,14 @@ function getRoomImagePacks(room) {
   const dataEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
 
   return dataEvents
-    .map((data) => ImagePack.parsePack(data.getId(), data.getContent(), room))
+    .map((data) => {
+      const pack = ImagePack.parsePack(data?.getId(), data?.getContent());
+      if (pack) {
+        pack.displayName ??= room.name;
+        pack.avatarUrl ??= room.getMxcAvatarUrl();
+      }
+      return pack;
+    })
     .filter((pack) => pack !== null);
 }