add option to add or remove global image packs

src/app/features/settings/emojis-stickers/GlobalPacks.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Box,
   Text,
@@ -9,16 +9,191 @@ import {
   Avatar,
   AvatarImage,
   AvatarFallback,
+  config,
+  Spinner,
+  Menu,
+  RectCords,
+  PopOut,
+  Checkbox,
+  toRem,
+  Scroll,
+  Header,
+  Line,
+  Chip,
 } from 'folds';
-import { useGlobalImagePacks } from '../../../hooks/useImagePacks';
+import FocusTrap from 'focus-trap-react';
+import { useAtomValue } from 'jotai';
+import { Room } from 'matrix-js-sdk';
+import { useGlobalImagePacks, useRoomsImagePacks } from '../../../hooks/useImagePacks';
 import { SequenceCardStyle } from '../styles.css';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SettingTile } from '../../../components/setting-tile';
 import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { ImagePack, ImageUsage } from '../../../plugins/custom-emoji';
+import {
+  EmoteRoomsContent,
+  ImagePack,
+  ImageUsage,
+  PackAddress,
+  packAddressEqual,
+} from '../../../plugins/custom-emoji';
 import { LineClamp2 } from '../../../styles/Text.css';
+import { allRoomsAtom } from '../../../state/room-list/roomList';
+import { AccountDataEvent } from '../../../../types/matrix/accountData';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { stopPropagation } from '../../../utils/keyboard';
+
+function GlobalPackSelector({
+  packs,
+  useAuthentication,
+  onSelect,
+}: {
+  packs: ImagePack[];
+  useAuthentication: boolean;
+  onSelect: (addresses: PackAddress[]) => void;
+}) {
+  const mx = useMatrixClient();
+  const roomToPacks = useMemo(() => {
+    const rToP = new Map<string, ImagePack[]>();
+    packs
+      .filter((pack) => !pack.deleted)
+      .forEach((pack) => {
+        if (!pack.address) return;
+        const pks = rToP.get(pack.address.roomId) ?? [];
+        pks.push(pack);
+        rToP.set(pack.address.roomId, pks);
+      });
+    return rToP;
+  }, [packs]);
+
+  const [selected, setSelected] = useState<PackAddress[]>([]);
+  const toggleSelect = (address: PackAddress) => {
+    setSelected((addresses) => {
+      const newAddresses = addresses.filter((addr) => !packAddressEqual(addr, address));
+      if (newAddresses.length !== addresses.length) {
+        return newAddresses;
+      }
+      newAddresses.push(address);
+      return newAddresses;
+    });
+  };
+
+  const hasSelected = selected.length > 0;
+  return (
+    <Box grow="Yes" direction="Column">
+      <Header size="400" variant="Surface" style={{ padding: `0 ${config.space.S300}` }}>
+        <Box grow="Yes">
+          <Text size="L400" truncate>
+            Room Packs
+          </Text>
+        </Box>
+        <Box shrink="No">
+          <Chip
+            radii="Pill"
+            variant={hasSelected ? 'Success' : 'SurfaceVariant'}
+            outlined={hasSelected}
+            onClick={() => onSelect(selected)}
+          >
+            <Text size="B300">{hasSelected ? 'Save' : 'Close'}</Text>
+          </Chip>
+        </Box>
+      </Header>
+      <Line variant="Surface" size="300" />
+      <Box grow="Yes">
+        <Scroll size="300" hideTrack visibility="Hover">
+          <Box
+            direction="Column"
+            gap="400"
+            style={{
+              paddingLeft: config.space.S300,
+              paddingTop: config.space.S300,
+              paddingBottom: config.space.S300,
+              paddingRight: config.space.S100,
+            }}
+          >
+            {Array.from(roomToPacks.entries()).map(([roomId, roomPacks]) => {
+              const room = mx.getRoom(roomId);
+              if (!room) return null;
+              return (
+                <Box key={roomId} direction="Column" gap="100">
+                  <Text size="L400">{room.name}</Text>
+                  {roomPacks.map((pack) => {
+                    const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
+                    const avatarUrl = avatarMxc
+                      ? mxcUrlToHttp(mx, avatarMxc, useAuthentication)
+                      : undefined;
+                    const { address } = pack;
+                    if (!address) return null;
+
+                    const added = selected.find((addr) => packAddressEqual(addr, address));
+                    return (
+                      <SequenceCard
+                        key={pack.id}
+                        className={SequenceCardStyle}
+                        variant={added ? 'Success' : 'SurfaceVariant'}
+                        direction="Column"
+                        gap="400"
+                      >
+                        <SettingTile
+                          title={pack.meta.name ?? 'Unknown'}
+                          description={<span className={LineClamp2}>{pack.meta.attribution}</span>}
+                          before={
+                            <Box alignItems="Center" gap="300">
+                              <Avatar size="300" radii="300">
+                                {avatarUrl ? (
+                                  <AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
+                                ) : (
+                                  <AvatarFallback>
+                                    <Icon size="400" src={Icons.Sticker} filled />
+                                  </AvatarFallback>
+                                )}
+                              </Avatar>
+                            </Box>
+                          }
+                          after={
+                            <Checkbox variant="Success" onClick={() => toggleSelect(address)} />
+                          }
+                        />
+                      </SequenceCard>
+                    );
+                  })}
+                </Box>
+              );
+            })}
+
+            {roomToPacks.size === 0 && (
+              <SequenceCard
+                className={SequenceCardStyle}
+                variant="SurfaceVariant"
+                direction="Column"
+                gap="400"
+              >
+                <Box
+                  justifyContent="Center"
+                  direction="Column"
+                  gap="200"
+                  style={{
+                    padding: `${config.space.S700} ${config.space.S400}`,
+                    maxWidth: toRem(300),
+                    margin: 'auto',
+                  }}
+                >
+                  <Text size="H5" align="Center">
+                    No Packs
+                  </Text>
+                  <Text size="T200" align="Center">
+                    Pack from rooms will appear here. You do not have any room with packs yet.
+                  </Text>
+                </Box>
+              </SequenceCard>
+            )}
+          </Box>
+        </Scroll>
+      </Box>
+    </Box>
+  );
+}
 
 type GlobalPacksProps = {
   onViewPack: (imagePack: ImagePack) => void;
@@ -27,73 +202,287 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const globalPacks = useGlobalImagePacks();
+  const [menuCords, setMenuCords] = useState<RectCords>();
 
-  return (
-    <Box direction="Column" gap="100">
-      <Text size="L400">Favorite Packs</Text>
+  const roomIds = useAtomValue(allRoomsAtom);
+  const rooms = useMemo(() => {
+    const rs: Room[] = [];
+    roomIds.forEach((rId) => {
+      const r = mx.getRoom(rId);
+      if (r) rs.push(r);
+    });
+    return rs;
+  }, [mx, roomIds]);
+  const roomsImagePack = useRoomsImagePacks(rooms);
+  const nonGlobalPacks = useMemo(
+    () =>
+      roomsImagePack.filter(
+        (pack) => !globalPacks.find((p) => packAddressEqual(pack.address, p.address))
+      ),
+    [roomsImagePack, globalPacks]
+  );
+
+  const [selectedPacks, setSelectedPacks] = useState<PackAddress[]>([]);
+  const [removedPacks, setRemovedPacks] = useState<PackAddress[]>([]);
+
+  const unselectedGlobalPacks = useMemo(
+    () =>
+      nonGlobalPacks.filter(
+        (pack) => !selectedPacks.find((addr) => packAddressEqual(pack.address, addr))
+      ),
+    [selectedPacks, nonGlobalPacks]
+  );
+
+  const handleRemove = (address: PackAddress) => {
+    setRemovedPacks((addresses) => [...addresses, address]);
+  };
+
+  const handleUndoRemove = (address: PackAddress) => {
+    setRemovedPacks((addresses) => addresses.filter((addr) => !packAddressEqual(addr, address)));
+  };
+
+  const handleSelected = (addresses: PackAddress[]) => {
+    setMenuCords(undefined);
+    if (addresses.length > 0) {
+      setSelectedPacks((a) => [...addresses, ...a]);
+    }
+  };
+
+  const [applyState, applyChanges] = useAsyncCallback(
+    useCallback(async () => {
+      const content =
+        mx.getAccountData(AccountDataEvent.PoniesEmoteRooms)?.getContent<EmoteRoomsContent>() ?? {};
+      const updatedContent: EmoteRoomsContent = JSON.parse(JSON.stringify(content));
+
+      selectedPacks.forEach((addr) => {
+        const roomsToState = updatedContent.rooms ?? {};
+        const stateKeyToObj = roomsToState[addr.roomId] ?? {};
+        stateKeyToObj[addr.stateKey] = {};
+        roomsToState[addr.roomId] = stateKeyToObj;
+        updatedContent.rooms = roomsToState;
+      });
+
+      removedPacks.forEach((addr) => {
+        if (updatedContent.rooms?.[addr.roomId]?.[addr.stateKey]) {
+          delete updatedContent.rooms?.[addr.roomId][addr.stateKey];
+        }
+      });
+
+      await mx.setAccountData(AccountDataEvent.PoniesEmoteRooms, updatedContent);
+    }, [mx, selectedPacks, removedPacks])
+  );
+
+  const resetChanges = useCallback(() => {
+    setSelectedPacks([]);
+    setRemovedPacks([]);
+  }, []);
+
+  useEffect(() => {
+    if (applyState.status === AsyncStatus.Success) {
+      resetChanges();
+    }
+  }, [applyState, resetChanges]);
+
+  const handleSelectMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const applyingChanges = applyState.status === AsyncStatus.Loading;
+  const hasChanges = removedPacks.length > 0 || selectedPacks.length > 0;
+
+  const renderPack = (pack: ImagePack) => {
+    const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
+    const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+    const { address } = pack;
+    if (!address) return null;
+    const removed = !!removedPacks.find((addr) => packAddressEqual(addr, address));
+
+    return (
       <SequenceCard
+        key={pack.id}
         className={SequenceCardStyle}
-        variant="SurfaceVariant"
+        variant={removed ? 'Critical' : 'SurfaceVariant'}
         direction="Column"
         gap="400"
       >
         <SettingTile
-          title="Select Pack"
-          description="Pick emojis and stickers pack from rooms to use in all rooms."
+          title={
+            <span style={{ textDecoration: removed ? 'line-through' : undefined }}>
+              {pack.meta.name ?? 'Unknown'}
+            </span>
+          }
+          description={<span className={LineClamp2}>{pack.meta.attribution}</span>}
+          before={
+            <Box alignItems="Center" gap="300">
+              {removed ? (
+                <IconButton
+                  size="300"
+                  radii="Pill"
+                  variant="Critical"
+                  onClick={() => handleUndoRemove(address)}
+                  disabled={applyingChanges}
+                >
+                  <Icon src={Icons.Plus} size="100" />
+                </IconButton>
+              ) : (
+                <IconButton
+                  size="300"
+                  radii="Pill"
+                  variant="Secondary"
+                  onClick={() => handleRemove(address)}
+                  disabled={applyingChanges}
+                >
+                  <Icon src={Icons.Cross} size="100" />
+                </IconButton>
+              )}
+              <Avatar size="300" radii="300">
+                {avatarUrl ? (
+                  <AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
+                ) : (
+                  <AvatarFallback>
+                    <Icon size="400" src={Icons.Sticker} filled />
+                  </AvatarFallback>
+                )}
+              </Avatar>
+            </Box>
+          }
           after={
-            <Button variant="Secondary" fill="Soft" size="300" radii="300" outlined>
-              <Text size="B300">Select</Text>
-            </Button>
+            !removed && (
+              <Button
+                variant="Secondary"
+                fill="Soft"
+                size="300"
+                radii="300"
+                outlined
+                onClick={() => onViewPack(pack)}
+              >
+                <Text size="B300">View</Text>
+              </Button>
+            )
           }
         />
       </SequenceCard>
-      {globalPacks.map((pack) => {
-        const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
-        const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+    );
+  };
 
-        return (
-          <SequenceCard
-            key={pack.id}
-            className={SequenceCardStyle}
-            variant="SurfaceVariant"
-            direction="Column"
-            gap="400"
-          >
-            <SettingTile
-              title={pack.meta.name ?? 'Unknown'}
-              description={<span className={LineClamp2}>{pack.meta.attribution}</span>}
-              before={
-                <Box alignItems="Center" gap="300">
-                  <IconButton size="300" radii="Pill" variant="Secondary">
-                    <Icon src={Icons.Cross} size="100" />
-                  </IconButton>
-                  <Avatar size="300" radii="300">
-                    {avatarUrl ? (
-                      <AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
-                    ) : (
-                      <AvatarFallback>
-                        <Icon size="400" src={Icons.Sticker} filled />
-                      </AvatarFallback>
-                    )}
-                  </Avatar>
-                </Box>
-              }
-              after={
+  return (
+    <>
+      <Box direction="Column" gap="100">
+        <Text size="L400">Favorite Packs</Text>
+        <SequenceCard
+          className={SequenceCardStyle}
+          variant="SurfaceVariant"
+          direction="Column"
+          gap="400"
+        >
+          <SettingTile
+            title="Select Pack"
+            description="Pick emojis and stickers pack from rooms to use in all rooms."
+            after={
+              <>
                 <Button
+                  onClick={handleSelectMenu}
                   variant="Secondary"
                   fill="Soft"
                   size="300"
                   radii="300"
                   outlined
-                  onClick={() => onViewPack(pack)}
                 >
-                  <Text size="B300">View</Text>
+                  <Text size="B300">Select</Text>
                 </Button>
-              }
-            />
-          </SequenceCard>
-        );
-      })}
-    </Box>
+                <PopOut
+                  anchor={menuCords}
+                  position="Bottom"
+                  align="End"
+                  content={
+                    <FocusTrap
+                      focusTrapOptions={{
+                        initialFocus: false,
+                        onDeactivate: () => setMenuCords(undefined),
+                        clickOutsideDeactivates: true,
+                        isKeyForward: (evt: KeyboardEvent) =>
+                          evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                        isKeyBackward: (evt: KeyboardEvent) =>
+                          evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                        escapeDeactivates: stopPropagation,
+                      }}
+                    >
+                      <Menu
+                        style={{
+                          display: 'flex',
+                          maxWidth: toRem(400),
+                          width: '100vw',
+                          maxHeight: toRem(500),
+                        }}
+                      >
+                        <GlobalPackSelector
+                          packs={unselectedGlobalPacks}
+                          useAuthentication={useAuthentication}
+                          onSelect={handleSelected}
+                        />
+                      </Menu>
+                    </FocusTrap>
+                  }
+                />
+              </>
+            }
+          />
+        </SequenceCard>
+        {globalPacks.map(renderPack)}
+        {nonGlobalPacks
+          .filter((pack) => !!selectedPacks.find((addr) => packAddressEqual(pack.address, addr)))
+          .map(renderPack)}
+      </Box>
+      {hasChanges && (
+        <Menu
+          style={{
+            position: 'sticky',
+            padding: config.space.S200,
+            paddingLeft: config.space.S400,
+            bottom: config.space.S400,
+            left: config.space.S400,
+            right: 0,
+            zIndex: 1,
+          }}
+          variant="Success"
+        >
+          <Box alignItems="Center" gap="400">
+            <Box grow="Yes" direction="Column">
+              {applyState.status === AsyncStatus.Error ? (
+                <Text size="T200">
+                  <b>Failed to apply changes! Please try again.</b>
+                </Text>
+              ) : (
+                <Text size="T200">
+                  <b>Changes saved! Apply when ready.</b>
+                </Text>
+              )}
+            </Box>
+            <Box shrink="No" gap="200">
+              <Button
+                size="300"
+                variant="Success"
+                fill="None"
+                radii="300"
+                disabled={applyingChanges}
+                onClick={resetChanges}
+              >
+                <Text size="B300">Reset</Text>
+              </Button>
+              <Button
+                size="300"
+                variant="Success"
+                radii="300"
+                disabled={applyingChanges}
+                before={applyingChanges && <Spinner variant="Success" fill="Soft" size="100" />}
+                onClick={applyChanges}
+              >
+                <Text size="B300">Apply Changes</Text>
+              </Button>
+            </Box>
+          </Box>
+        </Menu>
+      )}
+    </>
   );
 }

src/app/plugins/custom-emoji/ImagePack.ts

@@ -8,6 +8,8 @@ import { ImageUsage, PackContent } from './types';
 export class ImagePack {
   public readonly id: string;
 
+  public readonly deleted: boolean;
+
   public readonly address: PackAddress | undefined;
 
   public readonly meta: PackMetaReader;
@@ -23,6 +25,8 @@ export class ImagePack {
 
     this.address = address;
 
+    this.deleted = content.pack === undefined && content.images === undefined;
+
     this.meta = new PackMetaReader(content.pack ?? {});
     this.images = new PackImagesReader(content.images ?? {});
   }

src/app/plugins/custom-emoji/types.ts

@@ -5,10 +5,10 @@ import { IImageInfo } from '../../../types/matrix/common';
 /**
  * im.ponies.emote_rooms content
  */
-export type PackStateKeyToUnknown = Record<string, unknown>;
-export type RoomIdToPackInfo = Record<string, PackStateKeyToUnknown>;
+export type PackStateKeyToObject = Record<string, object>;
+export type RoomIdToStateKey = Record<string, PackStateKeyToObject>;
 export type EmoteRoomsContent = {
-  rooms?: RoomIdToPackInfo;
+  rooms?: RoomIdToStateKey;
 };
 
 /**

src/app/plugins/custom-emoji/utils.ts

@@ -5,6 +5,13 @@ import { StateEvent } from '../../../types/matrix/room';
 import { getAccountData, getStateEvent, getStateEvents } from '../../utils/room';
 import { AccountDataEvent } from '../../../types/matrix/accountData';
 import { PackMetaReader } from './PackMetaReader';
+import { PackAddress } from './PackAddress';
+
+export function packAddressEqual(a1?: PackAddress, a2?: PackAddress): boolean {
+  if (!a1 && !a2) return true;
+  if (!a1 || !a2) return false;
+  return a1.roomId === a2.roomId && a1.stateKey === a2.stateKey;
+}
 
 export function imageUsageEqual(u1: ImageUsage[], u2: ImageUsage[]) {
   return u1.length === u2.length && u1.every((u) => u2.includes(u));