From e9d8a7b26eec733c6910233d2018f271e38b9af4 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 12 Jan 2025 13:43:52 +0530
Subject: [PATCH] add option to edit pack meta

---
 .../image-pack-view/ImagePackContent.tsx      | 409 +++++++++++++++---
 .../image-pack-view/ImagePackView.tsx         |  12 +-
 .../components/image-pack-view/ImageTile.tsx  |  73 +---
 .../image-pack-view/UsageSelector.tsx         |  51 ---
 .../image-pack-view/UsageSwitcher.tsx         | 115 +++++
 .../components/image-pack-view/style.css.ts   |  12 +-
 .../plugins/custom-emoji/PackMetaReader.ts    |   4 +
 src/app/plugins/custom-emoji/utils.ts         |  11 +
 8 files changed, 524 insertions(+), 163 deletions(-)
 delete mode 100644 src/app/components/image-pack-view/UsageSelector.tsx
 create mode 100644 src/app/components/image-pack-view/UsageSwitcher.tsx

diff --git a/src/app/components/image-pack-view/ImagePackContent.tsx b/src/app/components/image-pack-view/ImagePackContent.tsx
index a8dd530e..1ef538d7 100644
--- a/src/app/components/image-pack-view/ImagePackContent.tsx
+++ b/src/app/components/image-pack-view/ImagePackContent.tsx
@@ -1,7 +1,22 @@
-import React, { useMemo } from 'react';
-import { as, Box, Text, config, Avatar, AvatarImage, AvatarFallback, Button } from 'folds';
+import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
+import {
+  as,
+  Box,
+  Text,
+  config,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Button,
+  Icon,
+  Icons,
+  Input,
+  TextArea,
+  Chip,
+  Menu,
+} from 'folds';
 import Linkify from 'linkify-react';
-import { ImagePack, PackMetaReader } from '../../plugins/custom-emoji';
+import { ImagePack, ImageUsage, packMetaEqual, PackMetaReader } from '../../plugins/custom-emoji';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -11,28 +26,219 @@ import { BreakWord } from '../../styles/Text.css';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { ImageTile } from './ImageTile';
+import { SettingTile } from '../setting-tile';
+import { UsageSwitcher } from './UsageSwitcher';
+import { useFilePicker } from '../../hooks/useFilePicker';
+import { useObjectURL } from '../../hooks/useObjectURL';
+import { createUploadAtom, UploadSuccess } from '../../state/upload';
+import { CompactUploadCardRenderer } from '../upload-card';
+import * as css from './style.css';
 
 type ImagePackAvatarProps = {
-  meta: PackMetaReader;
+  url?: string;
+  name?: string;
 };
-function ImagePackAvatar({ meta }: ImagePackAvatarProps) {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const packAvatar = meta.avatar ? mxcUrlToHttp(mx, meta.avatar, useAuthentication) : undefined;
-
+function ImagePackAvatar({ url, name }: ImagePackAvatarProps) {
   return (
-    <Avatar size="400" className={ContainerColor({ variant: 'Secondary' })}>
-      {packAvatar ? (
-        <AvatarImage src={packAvatar} alt={meta.name ?? 'Unknown'} />
+    <Avatar size="500" className={ContainerColor({ variant: 'Secondary' })}>
+      {url ? (
+        <AvatarImage src={url} alt={name ?? 'Unknown'} />
       ) : (
         <AvatarFallback>
-          <Text size="H4">{nameInitials(meta.name ?? 'Unknown')}</Text>
+          <Text size="H2">{nameInitials(name ?? 'Unknown')}</Text>
         </AvatarFallback>
       )}
     </Avatar>
   );
 }
 
+type ImagePackProfileProps = {
+  meta: PackMetaReader;
+  canEdit?: boolean;
+  onEdit?: () => void;
+};
+function ImagePackProfile({ meta, canEdit, onEdit }: ImagePackProfileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const avatarUrl = meta.avatar
+    ? mxcUrlToHttp(mx, meta.avatar, useAuthentication) ?? undefined
+    : undefined;
+
+  return (
+    <Box gap="400">
+      <Box grow="Yes" direction="Column" gap="300">
+        <Box direction="Column" gap="100">
+          <Text className={BreakWord} size="H5">
+            {meta.name ?? 'Unknown'}
+          </Text>
+          {meta.attribution && (
+            <Text className={BreakWord} size="T200">
+              <Linkify options={LINKIFY_OPTS}>{meta.attribution}</Linkify>
+            </Text>
+          )}
+        </Box>
+        {canEdit && (
+          <Box gap="200">
+            <Chip
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
+              before={<Icon size="50" src={Icons.Pencil} />}
+              onClick={onEdit}
+              outlined
+            >
+              <Text size="B300">Edit</Text>
+            </Chip>
+          </Box>
+        )}
+      </Box>
+      <Box shrink="No">
+        <ImagePackAvatar url={avatarUrl} name={meta.name} />
+      </Box>
+    </Box>
+  );
+}
+
+type ImagePackProfileEditProps = {
+  meta: PackMetaReader;
+  onCancel: () => void;
+  onSave: (meta: PackMetaReader) => void;
+};
+function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfileEditProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [avatar, setAvatar] = useState(meta.avatar);
+
+  const avatarUrl = avatar ? mxcUrlToHttp(mx, avatar, useAuthentication) ?? undefined : undefined;
+
+  const [imageFile, setImageFile] = useState<File>();
+  const avatarFileUrl = useObjectURL(imageFile);
+  const uploadingAvatar = avatarFileUrl ? avatar === meta.avatar : false;
+  const uploadAtom = useMemo(() => {
+    if (imageFile) return createUploadAtom(imageFile);
+    return undefined;
+  }, [imageFile]);
+
+  const pickFile = useFilePicker(setImageFile, false);
+
+  const handleRemoveUpload = useCallback(() => {
+    setImageFile(undefined);
+    setAvatar(meta.avatar);
+  }, [meta.avatar]);
+
+  const handleUploaded = useCallback((upload: UploadSuccess) => {
+    setAvatar(upload.mxc);
+  }, []);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    if (uploadingAvatar) return;
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const nameInput = target?.nameInput as HTMLInputElement | undefined;
+    const attributionTextArea = target?.attributionTextArea as HTMLTextAreaElement | undefined;
+    if (!nameInput || !attributionTextArea) return;
+
+    const name = nameInput.value.trim();
+    const attribution = attributionTextArea.value.trim();
+    if (!name) return;
+
+    const metaReader = new PackMetaReader({
+      avatar_url: avatar,
+      display_name: name,
+      attribution,
+    });
+    onSave(metaReader);
+  };
+
+  return (
+    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
+      <Box gap="400">
+        <Box grow="Yes" direction="Column" gap="100">
+          <Text size="L400">Pack Avatar</Text>
+          {uploadAtom ? (
+            <Box gap="200" direction="Column">
+              <CompactUploadCardRenderer
+                uploadAtom={uploadAtom}
+                onRemove={handleRemoveUpload}
+                onComplete={handleUploaded}
+              />
+            </Box>
+          ) : (
+            <Box gap="200">
+              <Button
+                type="button"
+                size="300"
+                variant="Secondary"
+                fill="Soft"
+                radii="300"
+                onClick={() => pickFile('image/*')}
+              >
+                <Text size="B300">Upload</Text>
+              </Button>
+              {!avatar && meta.avatar && (
+                <Button
+                  type="button"
+                  size="300"
+                  variant="Success"
+                  fill="None"
+                  radii="300"
+                  onClick={() => setAvatar(meta.avatar)}
+                >
+                  <Text size="B300">Reset</Text>
+                </Button>
+              )}
+              {avatar && (
+                <Button
+                  type="button"
+                  size="300"
+                  variant="Critical"
+                  fill="None"
+                  radii="300"
+                  onClick={() => setAvatar(undefined)}
+                >
+                  <Text size="B300">Remove</Text>
+                </Button>
+              )}
+            </Box>
+          )}
+        </Box>
+        <Box shrink="No">
+          <ImagePackAvatar url={avatarFileUrl ?? avatarUrl} name={meta.name} />
+        </Box>
+      </Box>
+      <Box direction="Inherit" gap="100">
+        <Text size="L400">Name</Text>
+        <Input name="nameInput" defaultValue={meta.name} variant="Secondary" radii="300" required />
+      </Box>
+      <Box direction="Inherit" gap="100">
+        <Text size="L400">Attribution</Text>
+        <TextArea
+          name="attributionTextArea"
+          defaultValue={meta.attribution}
+          variant="Secondary"
+          radii="300"
+        />
+      </Box>
+      <Box gap="300">
+        <Button type="submit" variant="Success" size="300" radii="300" disabled={uploadingAvatar}>
+          <Text size="B300">Save</Text>
+        </Button>
+        <Button
+          type="reset"
+          onClick={onCancel}
+          variant="Secondary"
+          fill="Soft"
+          size="300"
+          radii="300"
+        >
+          <Text size="B300">Cancel</Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+}
+
 export type ImagePackContentProps = {
   imagePack: ImagePack;
   canEdit?: boolean;
@@ -41,56 +247,151 @@ export type ImagePackContentProps = {
 export const ImagePackContent = as<'div', ImagePackContentProps>(
   ({ imagePack, canEdit, ...props }, ref) => {
     const useAuthentication = useMediaAuthentication();
-
-    const { meta } = imagePack;
     const images = useMemo(() => Array.from(imagePack.images.collection.values()), [imagePack]);
 
+    const [metaEditing, setMetaEditing] = useState(false);
+    const [unsavedMeta, setUnsavedMeta] = useState<PackMetaReader>();
+    const currentMeta = unsavedMeta ?? imagePack.meta;
+
+    const handleMetaSave = useCallback(
+      (editedMeta: PackMetaReader) => {
+        setMetaEditing(false);
+        setUnsavedMeta(
+          (m) =>
+            new PackMetaReader({
+              ...imagePack.meta.content,
+              ...m?.content,
+              ...editedMeta.content,
+            })
+        );
+      },
+      [imagePack.meta]
+    );
+
+    const handleMetaCancel = () => setMetaEditing(false);
+
+    const handlePackUsageChange = useCallback(
+      (usg: ImageUsage[]) => {
+        setUnsavedMeta(
+          (m) =>
+            new PackMetaReader({
+              ...imagePack.meta.content,
+              ...m?.content,
+              usage: usg,
+            })
+        );
+      },
+      [imagePack.meta]
+    );
+
+    const handleResetSavedChanges = () => {
+      setUnsavedMeta(undefined);
+    };
+    const handleApplySavedChanges = () => {
+      setUnsavedMeta(undefined);
+    };
+
+    const unsavedChanges = unsavedMeta && !packMetaEqual(imagePack.meta, unsavedMeta);
+    const canApplyChanges = !metaEditing;
+
     return (
       <Box grow="Yes" direction="Column" gap="700" {...props} ref={ref}>
-        <Box gap="400">
-          <Box shrink="No">
-            <ImagePackAvatar meta={meta} />
-          </Box>
-          <Box grow="Yes" direction="Column" gap="300">
-            <Box direction="Column" gap="100">
-              <Text className={BreakWord} size="H5">
-                {meta.name ?? 'Unknown'}
-              </Text>
-              {meta.attribution && (
-                <Text className={BreakWord} size="T200">
-                  <Linkify options={LINKIFY_OPTS}>{meta.attribution}</Linkify>
+        {unsavedChanges && (
+          <Menu className={css.UnsavedMenu} variant="Success">
+            <Box alignItems="Center" gap="400">
+              <Box grow="Yes" direction="Column">
+                <Text size="T300">
+                  <b>You have saved changes!</b>
                 </Text>
-              )}
+              </Box>
+              <Box shrink="No" gap="200">
+                <Button
+                  size="300"
+                  variant="Success"
+                  fill="None"
+                  radii="300"
+                  disabled={!canApplyChanges}
+                  onClick={handleResetSavedChanges}
+                >
+                  <Text size="B300">Reset</Text>
+                </Button>
+                <Button
+                  size="300"
+                  variant="Success"
+                  radii="300"
+                  disabled={!canApplyChanges}
+                  onClick={handleApplySavedChanges}
+                >
+                  <Text size="B300">Apply Changes</Text>
+                </Button>
+              </Box>
             </Box>
-          </Box>
-          {canEdit && (
-            <Box gap="200" wrap="Wrap">
-              <Button variant="Secondary" fill="Soft" size="400" radii="300">
-                <Text size="B400">Edit</Text>
-              </Button>
-            </Box>
-          )}
-        </Box>
+          </Menu>
+        )}
         <Box direction="Column" gap="100">
-          <Text size="L400">Images</Text>
-          <Box direction="Column" gap="100">
-            {images.map((image) => (
-              <SequenceCard
-                key={image.shortcode}
-                style={{ padding: config.space.S300 }}
-                variant="SurfaceVariant"
-                direction="Column"
-                gap="400"
-              >
-                <ImageTile
-                  image={image}
-                  packUsage={meta.usage}
-                  useAuthentication={useAuthentication}
+          <Text size="L400">Pack</Text>
+          <SequenceCard
+            style={{ padding: config.space.S300 }}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="400"
+          >
+            {metaEditing ? (
+              <ImagePackProfileEdit
+                meta={currentMeta}
+                onCancel={handleMetaCancel}
+                onSave={handleMetaSave}
+              />
+            ) : (
+              <ImagePackProfile
+                meta={currentMeta}
+                canEdit={canEdit}
+                onEdit={() => setMetaEditing(true)}
+              />
+            )}
+          </SequenceCard>
+          <SequenceCard
+            style={{ padding: config.space.S300 }}
+            variant="SurfaceVariant"
+            direction="Column"
+            gap="400"
+          >
+            <SettingTile
+              title="Images Usage"
+              description="Select how the images are being used: as emojis, as stickers, or as both."
+              after={
+                <UsageSwitcher
+                  usage={currentMeta.usage}
+                  canEdit={canEdit}
+                  onChange={handlePackUsageChange}
                 />
-              </SequenceCard>
-            ))}
-          </Box>
+              }
+            />
+          </SequenceCard>
         </Box>
+        {images.length > 0 && (
+          <Box direction="Column" gap="100">
+            <Text size="L400">Images</Text>
+            <Box direction="Column" gap="100">
+              {images.map((image) => (
+                <SequenceCard
+                  key={image.shortcode}
+                  style={{ padding: config.space.S300 }}
+                  variant="SurfaceVariant"
+                  direction="Column"
+                  gap="400"
+                >
+                  <ImageTile
+                    image={image}
+                    packUsage={currentMeta.usage}
+                    useAuthentication={useAuthentication}
+                    canEdit={canEdit}
+                  />
+                </SequenceCard>
+              ))}
+            </Box>
+          </Box>
+        )}
       </Box>
     );
   }
diff --git a/src/app/components/image-pack-view/ImagePackView.tsx b/src/app/components/image-pack-view/ImagePackView.tsx
index 417ed0b8..15b66ea1 100644
--- a/src/app/components/image-pack-view/ImagePackView.tsx
+++ b/src/app/components/image-pack-view/ImagePackView.tsx
@@ -39,13 +39,11 @@ export function ImagePackView({ imagePack, requestClose }: ImagePackViewProps) {
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">
           <PageContent>
-            <Box direction="Column" gap="700">
-              {room ? (
-                <RoomImagePack room={room} imagePack={imagePack} />
-              ) : (
-                <UserImagePack imagePack={imagePack} />
-              )}
-            </Box>
+            {room ? (
+              <RoomImagePack room={room} imagePack={imagePack} />
+            ) : (
+              <UserImagePack imagePack={imagePack} />
+            )}
           </PageContent>
         </Scroll>
       </Box>
diff --git a/src/app/components/image-pack-view/ImageTile.tsx b/src/app/components/image-pack-view/ImageTile.tsx
index 9b6e8ada..87fa28b0 100644
--- a/src/app/components/image-pack-view/ImageTile.tsx
+++ b/src/app/components/image-pack-view/ImageTile.tsx
@@ -1,8 +1,6 @@
-import React, { MouseEventHandler, useState } from 'react';
-import { Chip, Icon, Icons, Text, PopOut, Menu, RectCords } from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { stopPropagation } from '../../utils/keyboard';
-import { UsageSelector, useUsageStr } from './UsageSelector';
+import React, { useCallback } from 'react';
+import { Badge, Box, Chip, Text } from 'folds';
+import { useUsageStr } from './UsageSwitcher';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './style.css';
 import { ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
@@ -13,21 +11,15 @@ type ImageTileProps = {
   useAuthentication: boolean;
   packUsage: ImageUsage[];
   image: PackImageReader;
+  canEdit?: boolean;
 };
-export function ImageTile({ image, packUsage, useAuthentication }: ImageTileProps) {
+export function ImageTile({ image, packUsage, useAuthentication, canEdit }: ImageTileProps) {
   const mx = useMatrixClient();
   const getUsageStr = useUsageStr();
-  const usage = image.usage ?? packUsage;
 
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleChange = (usg: ImageUsage[]) => {
+  const handleChange = useCallback((usg: ImageUsage[]) => {
     console.log(usg);
-  };
-
-  const handleSelectUsage: MouseEventHandler<HTMLButtonElement> = (event) => {
-    setMenuCords(event.currentTarget.getBoundingClientRect());
-  };
+  }, []);
 
   return (
     <SettingTile
@@ -41,41 +33,22 @@ export function ImageTile({ image, packUsage, useAuthentication }: ImageTileProp
       title={image.shortcode}
       description={image.body}
       after={
-        <>
-          <Chip
-            variant="Secondary"
-            radii="Pill"
-            after={<Icon src={Icons.ChevronBottom} size="100" />}
-            onClick={handleSelectUsage}
-          >
-            <Text size="B300">{getUsageStr(usage)}</Text>
-          </Chip>
-          <PopOut
-            anchor={menuCords}
-            offset={5}
-            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>
-                  <UsageSelector selected={usage} onChange={handleChange} />
-                </Menu>
-              </FocusTrap>
-            }
-          />
-        </>
+        canEdit ? (
+          <Box shrink="No" alignItems="Center" gap="200">
+            <Chip variant="Secondary" radii="Pill" outlined>
+              <Text size="B300">Edit</Text>
+            </Chip>
+          </Box>
+        ) : undefined
       }
-    />
+    >
+      {image.usage && getUsageStr(image.usage) !== getUsageStr(packUsage) && (
+        <Box>
+          <Badge variant="Secondary" size="400" radii="300" outlined>
+            <Text size="L400">{getUsageStr(image.usage)}</Text>
+          </Badge>
+        </Box>
+      )}
+    </SettingTile>
   );
 }
diff --git a/src/app/components/image-pack-view/UsageSelector.tsx b/src/app/components/image-pack-view/UsageSelector.tsx
deleted file mode 100644
index baca7811..00000000
--- a/src/app/components/image-pack-view/UsageSelector.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, { useMemo } from 'react';
-import { Box, config, MenuItem, Text } from 'folds';
-import { ImageUsage } from '../../plugins/custom-emoji';
-
-export const useUsageStr = (): ((usage: ImageUsage[]) => string) => {
-  const getUsageStr = (usage: ImageUsage[]): string => {
-    const sticker = usage.includes(ImageUsage.Sticker);
-    const emoticon = usage.includes(ImageUsage.Emoticon);
-
-    if (sticker && emoticon) return 'Both';
-    if (sticker) return 'Sticker';
-    if (emoticon) return 'Emoji';
-    return 'Both';
-  };
-  return getUsageStr;
-};
-
-type UsageSelectorProps = {
-  selected: ImageUsage[];
-  onChange: (usage: ImageUsage[]) => void;
-};
-export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
-  const getUsageStr = useUsageStr();
-
-  const selectedUsageStr = getUsageStr(selected);
-  const isSelected = (usage: ImageUsage[]) => getUsageStr(usage) === selectedUsageStr;
-
-  const allUsages: ImageUsage[][] = useMemo(
-    () => [[ImageUsage.Emoticon], [ImageUsage.Sticker], [ImageUsage.Sticker, ImageUsage.Emoticon]],
-    []
-  );
-
-  return (
-    <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-      {allUsages.map((usage) => (
-        <MenuItem
-          key={getUsageStr(usage)}
-          size="300"
-          variant={isSelected(usage) ? 'SurfaceVariant' : 'Surface'}
-          aria-selected={isSelected(usage)}
-          radii="300"
-          onClick={() => onChange(usage)}
-        >
-          <Box grow="Yes">
-            <Text size="T300">{getUsageStr(usage)}</Text>
-          </Box>
-        </MenuItem>
-      ))}
-    </Box>
-  );
-}
diff --git a/src/app/components/image-pack-view/UsageSwitcher.tsx b/src/app/components/image-pack-view/UsageSwitcher.tsx
new file mode 100644
index 00000000..544c7dc5
--- /dev/null
+++ b/src/app/components/image-pack-view/UsageSwitcher.tsx
@@ -0,0 +1,115 @@
+import React, { MouseEventHandler, useMemo, useState } from 'react';
+import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { ImageUsage } from '../../plugins/custom-emoji';
+import { stopPropagation } from '../../utils/keyboard';
+
+export const useUsageStr = (): ((usage: ImageUsage[]) => string) => {
+  const getUsageStr = (usage: ImageUsage[]): string => {
+    const sticker = usage.includes(ImageUsage.Sticker);
+    const emoticon = usage.includes(ImageUsage.Emoticon);
+
+    if (sticker && emoticon) return 'Emoji & Sticker';
+    if (sticker) return 'Sticker';
+    if (emoticon) return 'Emoji';
+    return 'Both';
+  };
+  return getUsageStr;
+};
+
+type UsageSelectorProps = {
+  selected: ImageUsage[];
+  onChange: (usage: ImageUsage[]) => void;
+};
+export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
+  const getUsageStr = useUsageStr();
+
+  const selectedUsageStr = getUsageStr(selected);
+  const isSelected = (usage: ImageUsage[]) => getUsageStr(usage) === selectedUsageStr;
+
+  const allUsages: ImageUsage[][] = useMemo(
+    () => [[ImageUsage.Emoticon], [ImageUsage.Sticker], [ImageUsage.Sticker, ImageUsage.Emoticon]],
+    []
+  );
+
+  return (
+    <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+      {allUsages.map((usage) => (
+        <MenuItem
+          key={getUsageStr(usage)}
+          size="300"
+          variant={isSelected(usage) ? 'SurfaceVariant' : 'Surface'}
+          aria-selected={isSelected(usage)}
+          radii="300"
+          onClick={() => onChange(usage)}
+        >
+          <Box grow="Yes">
+            <Text size="T300">{getUsageStr(usage)}</Text>
+          </Box>
+        </MenuItem>
+      ))}
+    </Box>
+  );
+}
+
+type UsageSwitcherProps = {
+  usage: ImageUsage[];
+  canEdit?: boolean;
+  onChange: (usage: ImageUsage[]) => void;
+};
+export function UsageSwitcher({ usage, onChange, canEdit }: UsageSwitcherProps) {
+  const getUsageStr = useUsageStr();
+
+  const [menuCords, setMenuCords] = useState<RectCords>();
+
+  const handleSelectUsage: MouseEventHandler<HTMLButtonElement> = (event) => {
+    setMenuCords(event.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <>
+      <Button
+        variant="Secondary"
+        fill="Soft"
+        size="300"
+        radii="300"
+        outlined
+        aria-disabled={!canEdit}
+        after={canEdit && <Icon src={Icons.ChevronBottom} size="100" />}
+        onClick={canEdit ? handleSelectUsage : undefined}
+      >
+        <Text size="B300">{getUsageStr(usage)}</Text>
+      </Button>
+      <PopOut
+        anchor={menuCords}
+        offset={5}
+        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>
+              <UsageSelector
+                selected={usage}
+                onChange={(usg) => {
+                  setMenuCords(undefined);
+                  onChange(usg);
+                }}
+              />
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
diff --git a/src/app/components/image-pack-view/style.css.ts b/src/app/components/image-pack-view/style.css.ts
index 6aadc7d8..41c33f7c 100644
--- a/src/app/components/image-pack-view/style.css.ts
+++ b/src/app/components/image-pack-view/style.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { DefaultReset, toRem } from 'folds';
+import { config, DefaultReset, toRem } from 'folds';
 
 export const ImagePackImage = style([
   DefaultReset,
@@ -9,3 +9,13 @@ export const ImagePackImage = style([
     objectFit: 'contain',
   },
 ]);
+
+export const UnsavedMenu = style({
+  position: 'sticky',
+  padding: config.space.S200,
+  paddingLeft: config.space.S400,
+  top: config.space.S400,
+  left: config.space.S400,
+  right: 0,
+  zIndex: 1,
+});
diff --git a/src/app/plugins/custom-emoji/PackMetaReader.ts b/src/app/plugins/custom-emoji/PackMetaReader.ts
index e791551c..537addf4 100644
--- a/src/app/plugins/custom-emoji/PackMetaReader.ts
+++ b/src/app/plugins/custom-emoji/PackMetaReader.ts
@@ -38,4 +38,8 @@ export class PackMetaReader {
 
     return knownUsage;
   }
+
+  get content(): PackMeta {
+    return this.meta;
+  }
 }
diff --git a/src/app/plugins/custom-emoji/utils.ts b/src/app/plugins/custom-emoji/utils.ts
index 068127af..b3a42ec4 100644
--- a/src/app/plugins/custom-emoji/utils.ts
+++ b/src/app/plugins/custom-emoji/utils.ts
@@ -4,6 +4,17 @@ import { EmoteRoomsContent } from './types';
 import { StateEvent } from '../../../types/matrix/room';
 import { getAccountData, getStateEvents } from '../../utils/room';
 import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { PackMetaReader } from './PackMetaReader';
+
+export function packMetaEqual(a: PackMetaReader, b: PackMetaReader): boolean {
+  return (
+    a.name === b.name &&
+    a.avatar === b.avatar &&
+    a.attribution === b.attribution &&
+    a.usage.length === b.usage.length &&
+    a.usage.every((u) => b.usage.includes(u))
+  );
+}
 
 export function makeImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
   return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {