add image edit and delete controls

src/app/components/image-pack-view/ImagePackContent.tsx

@@ -1,244 +1,20 @@
-import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import { as, Box, Text, config, Button, Menu } from 'folds';
 import {
-  as,
-  Box,
-  Text,
-  config,
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  Button,
-  Icon,
-  Icons,
-  Input,
-  TextArea,
-  Chip,
-  Menu,
-} from 'folds';
-import Linkify from 'linkify-react';
-import { ImagePack, ImageUsage, packMetaEqual, PackMetaReader } from '../../plugins/custom-emoji';
-import { mxcUrlToHttp } from '../../utils/matrix';
+  ImagePack,
+  ImageUsage,
+  PackImageReader,
+  packMetaEqual,
+  PackMetaReader,
+} from '../../plugins/custom-emoji';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SequenceCard } from '../sequence-card';
-import { nameInitials } from '../../utils/common';
-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 { ImageTile, ImageTileEdit } 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 { ImagePackProfile, ImagePackProfileEdit } from './PackMeta';
 import * as css from './style.css';
 
-type ImagePackAvatarProps = {
-  url?: string;
-  name?: string;
-};
-function ImagePackAvatar({ url, name }: ImagePackAvatarProps) {
-  return (
-    <Avatar size="500" className={ContainerColor({ variant: 'Secondary' })}>
-      {url ? (
-        <AvatarImage src={url} alt={name ?? 'Unknown'} />
-      ) : (
-        <AvatarFallback>
-          <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;
@@ -250,13 +26,17 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
     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 [savedMeta, setSavedMeta] = useState<PackMetaReader>();
+    const currentMeta = savedMeta ?? imagePack.meta;
+
+    const [imagesEditing, setImagesEditing] = useState<Set<string>>(new Set());
+    const [savedImages, setSavedImages] = useState<Map<string, PackImageReader>>(new Map());
+    const [deleteImages, setDeleteImages] = useState<Set<string>>(new Set());
 
     const handleMetaSave = useCallback(
       (editedMeta: PackMetaReader) => {
         setMetaEditing(false);
-        setUnsavedMeta(
+        setSavedMeta(
           (m) =>
             new PackMetaReader({
               ...imagePack.meta.content,
@@ -272,7 +52,7 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
 
     const handlePackUsageChange = useCallback(
       (usg: ImageUsage[]) => {
-        setUnsavedMeta(
+        setSavedMeta(
           (m) =>
             new PackMetaReader({
               ...imagePack.meta.content,
@@ -284,19 +64,57 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
       [imagePack.meta]
     );
 
-    const handleResetSavedChanges = () => {
-      setUnsavedMeta(undefined);
+    const handleImageEdit = (shortcode: string) => {
+      setImagesEditing((shortcodes) => {
+        const shortcodeSet = new Set(shortcodes);
+        shortcodeSet.add(shortcode);
+        return shortcodeSet;
+      });
     };
-    const handleApplySavedChanges = () => {
-      setUnsavedMeta(undefined);
+    const handleDeleteToggle = (shortcode: string) => {
+      setDeleteImages((shortcodes) => {
+        const shortcodeSet = new Set(shortcodes);
+        if (shortcodeSet.has(shortcode)) shortcodeSet.delete(shortcode);
+        else shortcodeSet.add(shortcode);
+        return shortcodeSet;
+      });
     };
 
-    const unsavedChanges = unsavedMeta && !packMetaEqual(imagePack.meta, unsavedMeta);
-    const canApplyChanges = !metaEditing;
+    const handleImageEditCancel = (shortcode: string) => {
+      setImagesEditing((shortcodes) => {
+        const shortcodeSet = new Set(shortcodes);
+        shortcodeSet.delete(shortcode);
+        return shortcodeSet;
+      });
+    };
+
+    const handleImageEditSave = (shortcode: string, image: PackImageReader) => {
+      handleImageEditCancel(shortcode);
+      setSavedImages((sImgs) => {
+        const imgs = new Map(sImgs);
+        imgs.set(shortcode, image);
+        return imgs;
+      });
+    };
+
+    const handleResetSavedChanges = () => {
+      setSavedMeta(undefined);
+      setSavedImages(new Map());
+      setDeleteImages(new Set());
+    };
+    const handleApplySavedChanges = () => {
+      setSavedMeta(undefined);
+    };
+
+    const savedChanges =
+      (savedMeta && !packMetaEqual(imagePack.meta, savedMeta)) ||
+      savedImages.size > 0 ||
+      deleteImages.size > 0;
+    const canApplyChanges = !metaEditing && imagesEditing.size === 0;
 
     return (
       <Box grow="Yes" direction="Column" gap="700" {...props} ref={ref}>
-        {unsavedChanges && (
+        {savedChanges && (
           <Menu className={css.UnsavedMenu} variant="Success">
             <Box alignItems="Center" gap="400">
               <Box grow="Yes" direction="Column">
@@ -377,16 +195,31 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
                 <SequenceCard
                   key={image.shortcode}
                   style={{ padding: config.space.S300 }}
-                  variant="SurfaceVariant"
+                  variant={deleteImages.has(image.shortcode) ? 'Critical' : 'SurfaceVariant'}
                   direction="Column"
                   gap="400"
                 >
-                  <ImageTile
-                    image={image}
-                    packUsage={currentMeta.usage}
-                    useAuthentication={useAuthentication}
-                    canEdit={canEdit}
-                  />
+                  {imagesEditing.has(image.shortcode) ? (
+                    <ImageTileEdit
+                      defaultShortcode={image.shortcode}
+                      image={savedImages.get(image.shortcode) ?? image}
+                      packUsage={currentMeta.usage}
+                      useAuthentication={useAuthentication}
+                      onCancel={handleImageEditCancel}
+                      onSave={handleImageEditSave}
+                    />
+                  ) : (
+                    <ImageTile
+                      defaultShortcode={image.shortcode}
+                      image={savedImages.get(image.shortcode) ?? image}
+                      packUsage={currentMeta.usage}
+                      useAuthentication={useAuthentication}
+                      canEdit={canEdit}
+                      onEdit={handleImageEdit}
+                      deleted={deleteImages.has(image.shortcode)}
+                      onDeleteToggle={handleDeleteToggle}
+                    />
+                  )}
                 </SequenceCard>
               ))}
             </Box>

src/app/components/image-pack-view/ImageTile.tsx

@@ -1,26 +1,35 @@
-import React, { useCallback } from 'react';
-import { Badge, Box, Chip, Text } from 'folds';
-import { useUsageStr } from './UsageSwitcher';
+import React, { FormEventHandler, useState } from 'react';
+import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
+import { UsageSwitcher, useUsageStr } from './UsageSwitcher';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './style.css';
-import { ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
+import { ImageUsage, imageUsageEqual, PackImageReader } from '../../plugins/custom-emoji';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SettingTile } from '../setting-tile';
 
 type ImageTileProps = {
+  defaultShortcode: string;
   useAuthentication: boolean;
   packUsage: ImageUsage[];
   image: PackImageReader;
   canEdit?: boolean;
+  onEdit?: (defaultShortcode: string, image: PackImageReader) => void;
+  deleted?: boolean;
+  onDeleteToggle?: (defaultShortcode: string) => void;
 };
-export function ImageTile({ image, packUsage, useAuthentication, canEdit }: ImageTileProps) {
+export function ImageTile({
+  defaultShortcode,
+  image,
+  packUsage,
+  useAuthentication,
+  canEdit,
+  onEdit,
+  onDeleteToggle,
+  deleted,
+}: ImageTileProps) {
   const mx = useMatrixClient();
   const getUsageStr = useUsageStr();
 
-  const handleChange = useCallback((usg: ImageUsage[]) => {
-    console.log(usg);
-  }, []);
-
   return (
     <SettingTile
       before={
@@ -30,25 +39,147 @@ export function ImageTile({ image, packUsage, useAuthentication, canEdit }: Imag
           alt={image.shortcode}
         />
       }
-      title={image.shortcode}
-      description={image.body}
+      title={
+        deleted ? (
+          <span className={css.DeleteImageShortcode}>{image.shortcode}</span>
+        ) : (
+          image.shortcode
+        )
+      }
+      description={
+        <Box as="span" gap="200">
+          {image.usage && getUsageStr(image.usage) !== getUsageStr(packUsage) && (
+            <Badge as="span" variant="Secondary" size="400" radii="300" outlined>
+              <Text as="span" size="L400">
+                {getUsageStr(image.usage)}
+              </Text>
+            </Badge>
+          )}
+          {image.body}
+        </Box>
+      }
       after={
         canEdit ? (
           <Box shrink="No" alignItems="Center" gap="200">
-            <Chip variant="Secondary" radii="Pill" outlined>
-              <Text size="B300">Edit</Text>
+            <Chip
+              variant={deleted ? 'Critical' : 'Secondary'}
+              fill="None"
+              radii="Pill"
+              onClick={() => onDeleteToggle?.(defaultShortcode)}
+            >
+              {deleted ? <Text size="B300">Undo</Text> : <Icon size="50" src={Icons.Delete} />}
             </Chip>
+            {!deleted && (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                onClick={() => onEdit?.(defaultShortcode, image)}
+              >
+                <Text size="B300">Edit</Text>
+              </Chip>
+            )}
           </Box>
         ) : undefined
       }
+    />
+  );
+}
+
+type ImageTileEditProps = {
+  defaultShortcode: string;
+  useAuthentication: boolean;
+  packUsage: ImageUsage[];
+  image: PackImageReader;
+  onCancel: (shortcode: string) => void;
+  onSave: (shortcode: string, image: PackImageReader) => void;
+};
+export function ImageTileEdit({
+  defaultShortcode,
+  useAuthentication,
+  packUsage,
+  image,
+  onCancel,
+  onSave,
+}: ImageTileEditProps) {
+  const mx = useMatrixClient();
+  const defaultUsage = image.usage ?? packUsage;
+
+  const [unsavedUsage, setUnsavedUsages] = useState(defaultUsage);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+
+    const target = evt.target as HTMLFormElement | undefined;
+    const shortcodeInput = target?.shortcodeInput as HTMLInputElement | undefined;
+    const bodyInput = target?.bodyInput as HTMLTextAreaElement | undefined;
+    if (!shortcodeInput || !bodyInput) return;
+
+    const shortcode = shortcodeInput.value.trim();
+    const body = bodyInput.value.trim();
+    const usage = unsavedUsage;
+
+    if (!shortcode) return;
+
+    const imageReader = new PackImageReader(shortcode, image.url, {
+      info: image.info,
+      body,
+      usage: imageUsageEqual(usage, packUsage) ? undefined : usage,
+    });
+
+    onSave(defaultShortcode, imageReader);
+  };
+
+  return (
+    <SettingTile
+      before={
+        <img
+          className={css.ImagePackImage}
+          src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
+          alt={image.shortcode}
+        />
+      }
     >
-      {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 as="form" onSubmit={handleSubmit} direction="Column" gap="200">
+        <Box direction="Column" className={css.ImagePackImageInputs}>
+          <Input
+            before={<Text size="L400">Shortcode:</Text>}
+            defaultValue={image.shortcode}
+            name="shortcodeInput"
+            variant="Secondary"
+            size="300"
+            radii="0"
+            required
+            autoFocus
+          />
+          <Input
+            before={<Text size="L400">Body:</Text>}
+            defaultValue={image.body}
+            name="bodyInput"
+            variant="Secondary"
+            size="300"
+            radii="0"
+          />
         </Box>
-      )}
+        <Box gap="200">
+          <Box shrink="No" direction="Column">
+            <UsageSwitcher usage={unsavedUsage} onChange={setUnsavedUsages} canEdit />
+          </Box>
+          <Box grow="Yes" />
+          <Button type="submit" variant="Success" size="300" radii="300">
+            <Text size="B300">Save</Text>
+          </Button>
+          <Button
+            type="reset"
+            variant="Secondary"
+            fill="Soft"
+            size="300"
+            radii="300"
+            onClick={() => onCancel(defaultShortcode)}
+          >
+            <Text size="B300">Cancel</Text>
+          </Button>
+        </Box>
+      </Box>
     </SettingTile>
   );
 }

src/app/components/image-pack-view/PackMeta.tsx

@@ -0,0 +1,232 @@
+import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
+import {
+  Box,
+  Text,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Button,
+  Icon,
+  Icons,
+  Input,
+  TextArea,
+  Chip,
+} from 'folds';
+import Linkify from 'linkify-react';
+import { mxcUrlToHttp } from '../../utils/matrix';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { nameInitials } from '../../utils/common';
+import { BreakWord } from '../../styles/Text.css';
+import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { useFilePicker } from '../../hooks/useFilePicker';
+import { useObjectURL } from '../../hooks/useObjectURL';
+import { createUploadAtom, UploadSuccess } from '../../state/upload';
+import { CompactUploadCardRenderer } from '../upload-card';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { PackMetaReader } from '../../plugins/custom-emoji';
+
+type ImagePackAvatarProps = {
+  url?: string;
+  name?: string;
+};
+function ImagePackAvatar({ url, name }: ImagePackAvatarProps) {
+  return (
+    <Avatar size="500" className={ContainerColor({ variant: 'Secondary' })}>
+      {url ? (
+        <AvatarImage src={url} alt={name ?? 'Unknown'} />
+      ) : (
+        <AvatarFallback>
+          <Text size="H2">{nameInitials(name ?? 'Unknown')}</Text>
+        </AvatarFallback>
+      )}
+    </Avatar>
+  );
+}
+
+type ImagePackProfileProps = {
+  meta: PackMetaReader;
+  canEdit?: boolean;
+  onEdit?: () => void;
+};
+export 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;
+};
+export 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>
+  );
+}

src/app/components/image-pack-view/UsageSwitcher.tsx

@@ -9,7 +9,7 @@ export const useUsageStr = (): ((usage: ImageUsage[]) => string) => {
     const sticker = usage.includes(ImageUsage.Sticker);
     const emoticon = usage.includes(ImageUsage.Emoticon);
 
-    if (sticker && emoticon) return 'Emoji & Sticker';
+    if (sticker && emoticon) return 'Both';
     if (sticker) return 'Sticker';
     if (emoticon) return 'Emoji';
     return 'Both';
@@ -73,6 +73,7 @@ export function UsageSwitcher({ usage, onChange, canEdit }: UsageSwitcherProps)
         fill="Soft"
         size="300"
         radii="300"
+        type="button"
         outlined
         aria-disabled={!canEdit}
         after={canEdit && <Icon src={Icons.ChevronBottom} size="100" />}

src/app/components/image-pack-view/style.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { config, DefaultReset, toRem } from 'folds';
+import { color, config, DefaultReset, toRem } from 'folds';
 
 export const ImagePackImage = style([
   DefaultReset,
@@ -10,6 +10,22 @@ export const ImagePackImage = style([
   },
 ]);
 
+export const DeleteImageShortcode = style([
+  DefaultReset,
+  {
+    color: color.Critical.Main,
+    textDecoration: 'line-through',
+  },
+]);
+
+export const ImagePackImageInputs = style([
+  DefaultReset,
+  {
+    overflow: 'hidden',
+    borderRadius: config.radii.R300,
+  },
+]);
+
 export const UnsavedMenu = style({
   position: 'sticky',
   padding: config.space.S200,

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

@@ -1,18 +1,21 @@
 import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
 import { ImagePack } from './ImagePack';
-import { EmoteRoomsContent } from './types';
+import { EmoteRoomsContent, ImageUsage } 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 imageUsageEqual(u1: ImageUsage[], u2: ImageUsage[]) {
+  return u1.length === u2.length && u1.every((u) => u2.includes(u));
+}
+
 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))
+    imageUsageEqual(a.usage, b.usage)
   );
 }