malice

public

Star0

Fork 0

Watch0

24 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `d095131eec0e`

tarball

atagen <boss@atagen.co>2026-10-24 08:50 UTC

18 files changed+1214-18

web: add a sticker picker, a pack manager and clone actions for stickers and packs

Cloning goes through macltok rehost_media so a copied sticker lives on your own homeserver and survives the original server purging it, and clone_pack reports the images it could not fetch instead of failing the whole pack. Pack targets travel as a tagged {kind} object that malice-core maps to ImagePackSource, and set_pack_meta tells an absent avatar (keep) from null (clear) since macltok takes a three-way Patch.

Modified file: crates/malice-core/src/request.rs+276 additions−9 deletions@@ -1,8 +1,8 @@
 use macltok::ruma::{events::GlobalAccountDataEventType, serde::Raw};
 use macltok::{
-    AttachmentUpload, ClientHandle, CreateRoomOptions, MediaId, MediaSize, MemberFilter,
-    MessageContent, MessageEditContent, MirrorHandle, RichText, TimelineId, VerificationAction,
-    VerificationTarget,
+    AttachmentUpload, ClientHandle, CreateRoomOptions, ImagePackSource, MediaId, MediaSize,
+    MemberFilter, MessageContent, MessageEditContent, MirrorHandle, PackImageInfo, PackUsage,
+    Patch, RichText, TimelineId, VerificationAction, VerificationTarget,
 };
 use serde::Deserialize;
 use serde_json::json;
@@ -227,11 +227,128 @@ pub enum Request {
     PowerLevels {
         room_id: String,
     },
+    UploadMedia {
+        #[serde(skip)]
+        bytes: Vec<u8>,
+    },
+    SendSticker {
+        room_id: String,
+        pack_id: String,
+        shortcode: String,
+    },
+    CreateRoomPack {
+        room_id: String,
+        state_key: String,
+        display_name: String,
+    },
+    DeletePack {
+        target: PackTarget,
+    },
+    SetPackMeta {
+        target: PackTarget,
+        #[serde(default)]
+        display_name: Option<String>,
+        #[serde(default, deserialize_with = "present")]
+        avatar: Option<Option<String>>,
+        #[serde(default)]
+        usage: Option<Vec<PackUsage>>,
+    },
+    PutPackImage {
+        target: PackTarget,
+        shortcode: String,
+        mxc: String,
+        #[serde(default)]
+        body: Option<String>,
+        #[serde(default)]
+        usage: Option<Vec<PackUsage>>,
+        #[serde(default)]
+        info: Option<ImageInfo>,
+    },
+    RenamePackImage {
+        target: PackTarget,
+        from: String,
+        to: String,
+    },
+    RemovePackImage {
+        target: PackTarget,
+        shortcode: String,
+    },
+    SetPackEnabled {
+        room_id: String,
+        state_key: String,
+        enabled: bool,
+    },
+    ClonePackImage {
+        from_pack: String,
+        shortcode: String,
+        to: PackTarget,
+    },
+    CloneSticker {
+        room_id: String,
+        event_id: String,
+        to: PackTarget,
+        shortcode: String,
+    },
+    ClonePack {
+        from_pack: String,
+        to: PackTarget,
+        #[serde(default)]
+        display_name: Option<String>,
+    },
     Unignore {
         user_id: String,
     },
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(tag = "kind", rename_all = "snake_case")]
+pub enum PackTarget {
+    User,
+    Room { room_id: String, state_key: String },
+}
+
+impl PackTarget {
+    fn source(self) -> Result<ImagePackSource, CoreError> {
+        Ok(match self {
+            Self::User => ImagePackSource::User,
+            Self::Room { room_id, state_key } => ImagePackSource::Room {
+                room_id: parse_room_id(&room_id)?,
+                state_key: pack_text(state_key, "state_key")?,
+            },
+        })
+    }
+}
+
+#[derive(Debug, Deserialize)]
+pub struct ImageInfo {
+    #[serde(default)]
+    mimetype: Option<String>,
+    #[serde(default)]
+    size_bytes: Option<u64>,
+    #[serde(default)]
+    width: Option<u64>,
+    #[serde(default)]
+    height: Option<u64>,
+}
+
+/// Tells an absent field (keep) apart from an explicit null (clear).
+fn present<'de, D, T>(deserializer: D) -> Result<Option<Option<T>>, D::Error>
+where
+    D: serde::Deserializer<'de>,
+    T: Deserialize<'de>,
+{
+    Option::<T>::deserialize(deserializer).map(Some)
+}
+
+fn pack_text(value: String, what: &str) -> Result<String, CoreError> {
+    if value.is_empty() || value.len() > 255 {
+        return Err(CoreError::bad_request(format!(
+            "{what} must be 1..255 bytes"
+        )));
+    }
+    Ok(value)
+}
+
 #[derive(Debug, Default, Clone, Copy, PartialEq, Eq, Deserialize)]
 #[serde(rename_all = "snake_case")]
 pub enum SendKind {
@@ -641,7 +758,7 @@ pub async fn dispatch(
             Ok(Reply::Done)
         }
         Request::UploadAvatar { bytes } => {
-            let content_type = avatar_content_type(&bytes)?;
+            let content_type = image_upload_type(&bytes)?;
             handle.upload_avatar(content_type, bytes).await?;
             Ok(Reply::Done)
         }
@@ -705,7 +822,7 @@ pub async fn dispatch(
         }
         Request::UploadRoomAvatar { room_id, bytes } => {
             let room_id = parse_room_id(&room_id)?;
-            let content_type = avatar_content_type(&bytes)?;
+            let content_type = image_upload_type(&bytes)?;
             let mxc = handle.upload_media(content_type, bytes).await?;
             handle.set_room_avatar(room_id, Some(mxc)).await?;
             Ok(Reply::Done)
@@ -720,6 +837,157 @@ pub async fn dispatch(
                 .await?;
             Ok(Reply::Done)
         }
+        Request::UploadMedia { bytes } => {
+            let content_type = image_upload_type(&bytes)?;
+            let mxc = handle.upload_media(content_type, bytes).await?;
+            Ok(Reply::Json(json!({ "mxc": mxc })))
+        }
+        Request::SendSticker {
+            room_id,
+            pack_id,
+            shortcode,
+        } => {
+            handle
+                .send_sticker(
+                    parse_room_id(&room_id)?,
+                    pack_text(pack_id, "pack_id")?,
+                    pack_text(shortcode, "shortcode")?,
+                )
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::CreateRoomPack {
+            room_id,
+            state_key,
+            display_name,
+        } => {
+            handle
+                .create_room_pack(
+                    parse_room_id(&room_id)?,
+                    pack_text(state_key, "state_key")?,
+                    pack_text(display_name.trim().to_owned(), "display_name")?,
+                )
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::DeletePack { target } => {
+            handle.delete_pack(target.source()?).await?;
+            Ok(Reply::Done)
+        }
+        Request::SetPackMeta {
+            target,
+            display_name,
+            avatar,
+            usage,
+        } => {
+            let display_name = match display_name.map(|n| n.trim().to_owned()) {
+                None => Patch::Keep,
+                Some(name) if name.is_empty() => Patch::Clear,
+                Some(name) => Patch::Set(pack_text(name, "display_name")?),
+            };
+            let avatar = match avatar {
+                None => Patch::Keep,
+                Some(None) => Patch::Clear,
+                Some(Some(mxc)) => Patch::Set(parse_mxc(&mxc)?),
+            };
+            let usage = usage.map_or(Patch::Keep, Patch::Set);
+            handle
+                .set_pack_meta(target.source()?, display_name, avatar, usage)
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::PutPackImage {
+            target,
+            shortcode,
+            mxc,
+            body,
+            usage,
+            info,
+        } => {
+            let info =
+                info.map(|i| PackImageInfo::new(i.mimetype, i.size_bytes, i.width, i.height));
+            handle
+                .put_pack_image(
+                    target.source()?,
+                    pack_text(shortcode, "shortcode")?,
+                    parse_mxc(&mxc)?,
+                    body,
+                    usage,
+                    info,
+                )
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::RenamePackImage { target, from, to } => {
+            handle
+                .rename_pack_image(
+                    target.source()?,
+                    pack_text(from, "shortcode")?,
+                    pack_text(to, "shortcode")?,
+                )
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::RemovePackImage { target, shortcode } => {
+            handle
+                .remove_pack_image(target.source()?, pack_text(shortcode, "shortcode")?)
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::SetPackEnabled {
+            room_id,
+            state_key,
+            enabled,
+        } => {
+            handle
+                .set_pack_enabled_everywhere(
+                    parse_room_id(&room_id)?,
+                    pack_text(state_key, "state_key")?,
+                    enabled,
+                )
+                .await?;
+            Ok(Reply::Done)
+        }
+        Request::ClonePackImage {
+            from_pack,
+            shortcode,
+            to,
+        } => {
+            let shortcode = handle
+                .clone_pack_image(
+                    pack_text(from_pack, "pack_id")?,
+                    pack_text(shortcode, "shortcode")?,
+                    to.source()?,
+                )
+                .await?;
+            Ok(Reply::Json(json!({ "shortcode": shortcode })))
+        }
+        Request::CloneSticker {
+            room_id,
+            event_id,
+            to,
+            shortcode,
+        } => {
+            let shortcode = handle
+                .clone_sticker(
+                    parse_room_id(&room_id)?,
+                    parse_event_id(&event_id)?,
+                    to.source()?,
+                    pack_text(shortcode, "shortcode")?,
+                )
+                .await?;
+            Ok(Reply::Json(json!({ "shortcode": shortcode })))
+        }
+        Request::ClonePack {
+            from_pack,
+            to,
+            display_name,
+        } => {
+            let skipped = handle
+                .clone_pack(pack_text(from_pack, "pack_id")?, to.source()?, display_name)
+                .await?;
+            Ok(Reply::Json(json!({ "skipped": skipped })))
+        }
         Request::PowerLevels { room_id } => {
             let levels = handle.room_power_levels(&parse_room_id(&room_id)?).await?;
             let value = serde_json::to_value(levels)
@@ -737,14 +1005,13 @@ pub async fn dispatch(
     }
 }
 
-fn avatar_content_type(bytes: &[u8]) -> Result<&'static str, CoreError> {
+fn image_upload_type(bytes: &[u8]) -> Result<&'static str, CoreError> {
     if bytes.is_empty() || bytes.len() > 10 * 1024 * 1024 {
         return Err(CoreError::bad_request(
-            "avatar must be between 1 byte and 10 MiB",
+            "image must be between 1 byte and 10 MiB",
         ));
     }
-    image_content_type(bytes)
-        .ok_or_else(|| CoreError::unsupported("avatar is not a supported image"))
+    image_content_type(bytes).ok_or_else(|| CoreError::unsupported("not a supported image"))
 }
 
 // The spec's power level range is a canonical-JSON integer, which tops out at 2^53 - 1.

Modified file: crates/malice-server/src/routes.rs+36 additions@@ -549,6 +549,17 @@ async fn post_command(
             | Request::Ignore { .. }
             | Request::Unignore { .. }
             | Request::PowerLevels { .. }
+            | Request::SendSticker { .. }
+            | Request::CreateRoomPack { .. }
+            | Request::DeletePack { .. }
+            | Request::SetPackMeta { .. }
+            | Request::PutPackImage { .. }
+            | Request::RenamePackImage { .. }
+            | Request::RemovePackImage { .. }
+            | Request::SetPackEnabled { .. }
+            | Request::ClonePackImage { .. }
+            | Request::CloneSticker { .. }
+            | Request::ClonePack { .. }
     ) {
         return ApiError::bad_request("op is not available as a command").into_response();
     }
@@ -604,6 +615,27 @@ async fn rooms_avatar(
     )
 }
 
+async fn media_upload(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    bytes: axum::body::Bytes,
+) -> Response {
+    let (user, _) = match auth(&state, &headers).await {
+        Ok(pair) => pair,
+        Err(error) => return error.into_response(),
+    };
+    respond(
+        dispatch(
+            &user.handle,
+            &user.mirror,
+            Request::UploadMedia {
+                bytes: bytes.to_vec(),
+            },
+        )
+        .await,
+    )
+}
+
 async fn rooms_paginate(
     State(state): State<AppState>,
     headers: HeaderMap,
@@ -1037,6 +1069,10 @@ pub fn router(state: AppState, web_dir: Option<String>) -> Router {
             "/rooms/avatar",
             post(rooms_avatar).layer(DefaultBodyLimit::max(10 * 1024 * 1024)),
         )
+        .route(
+            "/media/upload",
+            post(media_upload).layer(DefaultBodyLimit::max(10 * 1024 * 1024)),
+        )
         .route("/media", get(get_media))
         .route("/message-media", get(get_message_media))
         .route("/spaces/children", get(get_space_children))

Modified file: crates/malice-worker/src/lib.rs+2 additions−1 deletions@@ -172,7 +172,8 @@ impl Host {
             .map_err(|error| error_value("bad_request", error.to_string()))?;
         if let Request::Upload { bytes: slot, .. }
         | Request::UploadAvatar { bytes: slot }
-        | Request::UploadRoomAvatar { bytes: slot, .. } = &mut request
+        | Request::UploadRoomAvatar { bytes: slot, .. }
+        | Request::UploadMedia { bytes: slot } = &mut request
         {
             *slot = bytes.map(|array| array.to_vec()).unwrap_or_default();
         }

Modified file: web/src/App.svelte+99 additions−2 deletions@@ -5,6 +5,10 @@
   import MxcAvatar from './lib/MxcAvatar.svelte';
   import PinButton from './lib/PinButton.svelte';
   import ContextMenu, { type MenuItem } from './lib/ContextMenu.svelte';
+  import StickerPicker from './lib/StickerPicker.svelte';
+  import PackManager from './lib/PackManager.svelte';
+  import { clonePackDestinations, editableChoices, shortcodeFor } from './lib/packs';
+  import type { CommandRequest } from './lib/transport';
   import UserCard, { type UserAction } from './lib/UserCard.svelte';
   import { allowed, isMuted, parsePowerLevels, type PowerLevels } from './lib/permissions';
   import { moveBefore, pinnedFirst, sortSpaces } from './lib/rail-order';
@@ -74,7 +78,7 @@
   import { lastSpaceRooms, lineHeight, markdownEnabled, messageSpacing, navFolded, railFolded } from './lib/appearance';
   import SettingsPanel from './lib/SettingsPanel.svelte';
   import { packsForRoom, parseEncryptionState, parseOwnProfile, parseVerificationState, contentPreview, senderLabel } from './lib/types';
-  import type { MemberSummary, OwnProfile, Person, QuickReaction, ReplyReference, RoomSummary, SendState, TimelineEvent, TimelineItem } from './lib/types';
+  import type { ImagePack, MemberSummary, OwnProfile, PackImage, Person, QuickReaction, ReplyReference, RoomSummary, SendState, TimelineEvent, TimelineItem } from './lib/types';
 
   let roomsLoading = false;
   let booted = false;
@@ -83,7 +87,8 @@
   let sidebarOpen = false;
   let membersOpen = false;
   let replyingTo: ReplyReference | null = null;
-  let dialog: 'join' | 'create' | 'security' | 'settings' | null = null;
+  let dialog: 'join' | 'create' | 'security' | 'settings' | 'packs' | null = null;
+  let stickersOpen = false;
   let joinTarget = '';
   let joinBusy = false;
   let createName = '';
@@ -1284,6 +1289,66 @@
     menu = { items: roomMenuItems(room), x: ev.clientX, y: ev.clientY };
   }
 
+  function roomName(roomId: string): string {
+    return $rooms.find((r) => r.room_id === roomId)?.name ?? roomId;
+  }
+
+  async function sendSticker(roomId: string, pack: ImagePack, image: PackImage): Promise<void> {
+    stickersOpen = false;
+    stickToBottom = true;
+    try {
+      await runCommand({ op: 'send_sticker', room_id: roomId, pack_id: pack.id, shortcode: image.shortcode });
+      if (peeking === roomId) stopPeeking();
+    } catch (e) {
+      pushBanner(e instanceof Error ? e.message : 'Could not send the sticker');
+    }
+  }
+
+  async function runClone(request: CommandRequest, failure: string): Promise<void> {
+    try {
+      const res = (await runCommand(request)) as { skipped?: string[] } | undefined;
+      if (res?.skipped?.length) pushBanner(`Couldn't copy ${res.skipped.map((s) => `:${s}:`).join(', ')}`);
+    } catch (e) {
+      pushBanner(e instanceof Error ? e.message : failure);
+    }
+  }
+
+  function openCloneImageMenu(pack: ImagePack, image: PackImage, x: number, y: number): void {
+    const items = editableChoices($imagePacks, roomName)
+      .filter((c) => c.pack?.id !== pack.id)
+      .map((choice) => ({
+        label: `Clone to ${choice.label}`,
+        action: () =>
+          void runClone({ op: 'clone_pack_image', from_pack: pack.id, shortcode: image.shortcode, to: choice.target }, 'Could not clone the sticker')
+      }));
+    menu = { items, x, y };
+  }
+
+  function openClonePackMenu(pack: ImagePack, x: number, y: number): void {
+    const packRooms = $rooms.filter((r) => r.can_edit_packs && r.membership === 'Joined');
+    const items = clonePackDestinations(pack, packRooms, roomName).map((d) => ({
+      label: d.label,
+      action: () => void runClone({ op: 'clone_pack', from_pack: pack.id, to: d.target, display_name: d.display_name }, 'Could not clone the pack')
+    }));
+    menu = { items, x, y };
+  }
+
+  function openCloneStickerMenu(eventId: string, body: string, x: number, y: number): void {
+    const roomId = $selectedRoomId;
+    if (!roomId) return;
+    const items = editableChoices($imagePacks, roomName).map((choice) => ({
+      label: `Clone to ${choice.label}`,
+      action: () => {
+        const taken = new Set(choice.pack?.images.map((i) => i.shortcode) ?? []);
+        void runClone(
+          { op: 'clone_sticker', room_id: roomId, event_id: eventId, to: choice.target, shortcode: shortcodeFor(body || 'sticker', taken) },
+          'Could not clone the sticker'
+        );
+      }
+    }));
+    menu = { items, x, y };
+  }
+
   function stopPeeking(): void {
     peeking = null;
     queueReadReceipt();
@@ -1932,6 +1997,7 @@
                     {people}
                     self={$sessionUser ?? null}
                     onUser={(userId, x, y, asMenu) => void openUser(userId, x, y, asMenu)}
+                    onCloneSticker={openCloneStickerMenu}
                     onReply={selectedRoom.membership === 'Joined' ? startReply : null}
                     onJump={jumpTo}
                     onEdit={selectedRoom.membership === 'Joined' ? startEdit : null}
@@ -2057,6 +2123,34 @@
             >
               {uploadBusy ? `Uploading ${uploadName ?? 'file'}…` : '📎'}
             </button>
+            <button
+              type="button"
+              class="icon-btn sticker-btn"
+              title="Stickers"
+              aria-label="Stickers"
+              aria-expanded={stickersOpen}
+              disabled={!($selectedRoomId && openReady[$selectedRoomId])}
+              on:click={() => (stickersOpen = !stickersOpen)}
+            >
+              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+                <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7l-7 7H6a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="1.8" />
+                <path d="M13 20v-5a2 2 0 0 1 2-2h5" fill="none" stroke="currentColor" stroke-width="1.8" />
+              </svg>
+            </button>
+            {#if stickersOpen && $selectedRoomId}
+              {@const stickerRoom = $selectedRoomId}
+              <div class="sticker-pop">
+                <StickerPicker
+                  packs={roomPacks}
+                  {roomName}
+                  onSend={(pack, image) => void sendSticker(stickerRoom, pack, image)}
+                  onClone={(pack, image, x, y) => openCloneImageMenu(pack, image, x, y)}
+                  onClonePack={(pack, x, y) => openClonePackMenu(pack, x, y)}
+                  onManage={() => ((stickersOpen = false), (dialog = 'packs'))}
+                  onClose={() => (stickersOpen = false)}
+                />
+              </div>
+            {/if}
             <textarea
               id="composer"
               bind:this={composerEl}
@@ -2167,7 +2261,10 @@
             packs={roomPacks}
             onQuickChange={(list) => void changeQuickReactions(list)}
             on:close={() => (dialog = null)}
+            on:packs={() => (dialog = 'packs')}
           />
+        {:else if dialog === 'packs'}
+          <PackManager packs={$imagePacks} rooms={$rooms} onError={pushBanner} on:close={() => (dialog = null)} />
         {:else}
           <div class="modal" role="dialog" aria-modal="true" aria-label={dialog === 'join' ? 'Join a room' : 'Create a room'}>
             <div class="modal-tabs" role="tablist" aria-label="Room actions">

Modified file: web/src/app.css+3 additions@@ -581,6 +581,9 @@ input, textarea { font: inherit; }
 .reply-bar-text { margin-left: 6px; }
 .composer.replying, .composer.staging, .reply-bar + .staged { border-top: none; }
 .composer { position: relative; }
+.sticker-pop { position: absolute; bottom: calc(100% - 6px); left: 16px; z-index: 30; }
+.sticker-btn { align-self: center; padding: 4px 6px; }
+.sticker-btn[aria-expanded='true'] { color: var(--accent); }
 .mention-finder {
   position: absolute;
   left: 16px;

Modified file: web/src/lib/MessageRow.stories.ts+2

@@ -201,6 +201,8 @@ export const PackEmotePick: Story = {

201201 avatar: null,

202202 attribution: null,

203203 source: 'User',

204+ editable: true,

205+ enabled_everywhere: true,

204206 images: [

205207 {

206208 shortcode: 'rabbit',

Modified file: web/src/lib/MessageRow.svelte+13 additions@@ -32,6 +32,7 @@
   export let showSent = true;
   export let self: string | null = null;
   export let onUser: ((userId: string, x: number, y: number, menu: boolean) => void) | null = null;
+  export let onCloneSticker: ((eventId: string, body: string, x: number, y: number) => void) | null = null;
 
   function openUser(ev: MouseEvent, menu: boolean): void {
     if (!onUser) return;
@@ -277,6 +278,18 @@
       >
         ☺+
       </button>
+      {#if onCloneSticker && event.content.kind === 'Sticker'}
+        {@const stickerBody = event.content.body}
+        {@const stickerId = event.event_id}
+        <button
+          type="button"
+          title="Clone sticker"
+          aria-label="Clone sticker to one of your packs"
+          on:click|stopPropagation={(ev) => onCloneSticker?.(stickerId, stickerBody, ev.clientX, ev.clientY)}
+        >
+          ⧉
+        </button>
+      {/if}
       {#if onReply}
         <button
           type="button"

Added file: web/src/lib/PackManager.svelte+399 additions@@ -0,0 +1,399 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import ContextMenu, { type MenuItem } from './ContextMenu.svelte';
+  import MxcAvatar from './MxcAvatar.svelte';
+  import { messageMediaUrl, runCommand, uploadMedia } from './api';
+  import {
+    allPacks,
+    clonePackDestinations,
+    editableChoices,
+    hasUsage,
+    packLabel,
+    packSlug,
+    packTarget,
+    shortcodeFor,
+    validShortcode
+  } from './packs';
+  import type { PackTarget } from './transport';
+  import type { ImagePack, ImagePacks, PackImage, PackUsage, RoomSummary } from './types';
+
+  export let packs: ImagePacks;
+  export let rooms: RoomSummary[];
+  export let onError: (message: string) => void;
+
+  const dispatch = createEventDispatcher<{ close: void }>();
+
+  let selectedId: string | null = 'user';
+  let creating = false;
+  let newRoom = '';
+  let newName = '';
+  let confirmDelete = false;
+  let uploading: { done: number; total: number } | null = null;
+  let menu: { items: MenuItem[]; x: number; y: number } | null = null;
+  let fileInput: HTMLInputElement;
+  let avatarInput: HTMLInputElement;
+
+  const roomName = (roomId: string) => rooms.find((r) => r.room_id === roomId)?.name ?? roomId;
+
+  $: list = allPacks(packs);
+  $: userPack = list.find((p) => p.source === 'User') ?? null;
+  $: roomPacks = list.filter((p) => p.source !== 'User' && p.editable);
+  $: otherPacks = list.filter((p) => p.source !== 'User' && !p.editable);
+  $: packRooms = rooms.filter((r) => r.can_edit_packs && r.membership === 'Joined');
+  $: selected = selectedId === 'user' ? userPack : (list.find((p) => p.id === selectedId) ?? null);
+  $: target = selectedId === 'user' ? ({ kind: 'user' } as PackTarget) : selected ? packTarget(selected) : null;
+  $: editable = selectedId === 'user' || (selected?.editable ?? false);
+  $: if (selectedId) confirmDelete = false;
+
+  async function run(work: () => Promise<unknown>, failure: string): Promise<boolean> {
+    try {
+      await work();
+      return true;
+    } catch (e) {
+      onError(e instanceof Error ? e.message : failure);
+      return false;
+    }
+  }
+
+  async function createPack(): Promise<void> {
+    const name = newName.trim();
+    if (!newRoom || !name) return;
+    const state_key = packSlug(name);
+    const ok = await run(
+      () => runCommand({ op: 'create_room_pack', room_id: newRoom, state_key, display_name: name }),
+      'Could not create the pack'
+    );
+    if (!ok) return;
+    creating = false;
+    newName = '';
+    selectedId = `room:${newRoom}:${state_key}`;
+  }
+
+  async function rename(event: Event): Promise<void> {
+    const name = (event.currentTarget as HTMLInputElement).value.trim();
+    if (!target || !name || name === (selected?.display_name ?? '')) return;
+    await run(() => runCommand({ op: 'set_pack_meta', target: target!, display_name: name }), 'Could not rename the pack');
+  }
+
+  async function changeAvatar(): Promise<void> {
+    const file = avatarInput.files?.[0];
+    avatarInput.value = '';
+    if (!file || !target) return;
+    const t = target;
+    await run(async () => {
+      const { mxc } = await uploadMedia(file);
+      await runCommand({ op: 'set_pack_meta', target: t, avatar: mxc });
+    }, 'Could not change the pack avatar');
+  }
+
+  async function addImages(): Promise<void> {
+    const files = [...(fileInput.files ?? [])].filter((f) => f.type.startsWith('image/'));
+    fileInput.value = '';
+    if (!files.length || !target) return;
+    const t = target;
+    const taken = new Set(selected?.images.map((i) => i.shortcode) ?? []);
+    uploading = { done: 0, total: files.length };
+    for (const file of files) {
+      const shortcode = shortcodeFor(file.name, taken);
+      await run(async () => {
+        const { mxc } = await uploadMedia(file);
+        const size = await imageSize(file);
+        const info = { mimetype: file.type || null, size_bytes: file.size, width: size?.width ?? null, height: size?.height ?? null };
+        await runCommand({ op: 'put_pack_image', target: t, shortcode, mxc, body: null, usage: null, info });
+      }, `Could not add ${file.name}`);
+      uploading = { done: uploading.done + 1, total: files.length };
+    }
+    uploading = null;
+  }
+
+  async function imageSize(file: File): Promise<{ width: number; height: number } | null> {
+    try {
+      const bitmap = await createImageBitmap(file);
+      const size = { width: bitmap.width, height: bitmap.height };
+      bitmap.close();
+      return size;
+    } catch {
+      return null;
+    }
+  }
+
+  async function renameImage(image: PackImage, event: Event): Promise<void> {
+    const input = event.currentTarget as HTMLInputElement;
+    const to = input.value.trim();
+    if (!target || to === image.shortcode) return;
+    if (!validShortcode(to) || selected?.images.some((i) => i.shortcode === to)) {
+      input.value = image.shortcode;
+      onError(`Can't rename to "${to}"`);
+      return;
+    }
+    await run(() => runCommand({ op: 'rename_pack_image', target: target!, from: image.shortcode, to }), 'Could not rename');
+  }
+
+  async function toggleUsage(image: PackImage, usage: PackUsage): Promise<void> {
+    if (!target) return;
+    const current: PackUsage[] = image.usage.length ? image.usage : ['Emoticon', 'Sticker'];
+    const next = current.includes(usage) ? current.filter((u) => u !== usage) : [...current, usage];
+    if (next.length === 0) return;
+    await run(
+      () =>
+        runCommand({
+          op: 'put_pack_image',
+          target: target!,
+          shortcode: image.shortcode,
+          mxc: image.media_id,
+          body: image.body,
+          usage: next
+        }),
+      'Could not change how the image is used'
+    );
+  }
+
+  async function removeImage(image: PackImage): Promise<void> {
+    if (!target) return;
+    await run(() => runCommand({ op: 'remove_pack_image', target: target!, shortcode: image.shortcode }), 'Could not remove');
+  }
+
+  async function setEverywhere(enabled: boolean): Promise<void> {
+    if (!selected || selected.source === 'User') return;
+    const { room_id, state_key } = selected.source.Room;
+    await run(() => runCommand({ op: 'set_pack_enabled', room_id, state_key, enabled }), 'Could not change the pack');
+  }
+
+  async function deletePack(): Promise<void> {
+    if (!target) return;
+    const ok = await run(() => runCommand({ op: 'delete_pack', target: target! }), 'Could not delete the pack');
+    if (ok) selectedId = 'user';
+  }
+
+  function cloneImageMenu(pack: ImagePack, image: PackImage, ev: MouseEvent): void {
+    menu = {
+      x: ev.clientX,
+      y: ev.clientY,
+      items: editableChoices(packs, roomName).map((choice) => ({
+        label: `Clone to ${choice.label}`,
+        action: () =>
+          void run(
+            () => runCommand({ op: 'clone_pack_image', from_pack: pack.id, shortcode: image.shortcode, to: choice.target }),
+            'Could not clone the image'
+          )
+      }))
+    };
+  }
+
+  function clonePackMenu(pack: ImagePack, ev: MouseEvent): void {
+    menu = {
+      x: ev.clientX,
+      y: ev.clientY,
+      items: clonePackDestinations(pack, packRooms, roomName).map((d) => ({
+        label: d.label,
+        action: () =>
+          void run(async () => {
+            const res = (await runCommand({ op: 'clone_pack', from_pack: pack.id, to: d.target, display_name: d.display_name })) as {
+              skipped?: string[];
+            };
+            if (res?.skipped?.length) onError(`Couldn't copy ${res.skipped.map((s) => `:${s}:`).join(', ')}`);
+          }, 'Could not clone the pack')
+      }))
+    };
+  }
+</script>
+
+<div class="modal packs" role="dialog" aria-modal="true" aria-label="Sticker and emoji packs">
+  <div class="modal-tabs" role="tablist" aria-label="Packs">
+    <button type="button" role="tab" aria-selected="true" class="active">Packs</button>
+    <button type="button" class="icon-btn modal-x" aria-label="Close packs" on:click={() => dispatch('close')}>
+      <span aria-hidden="true">✕</span>
+    </button>
+  </div>
+
+  <div class="layout">
+    <nav class="pack-list" aria-label="Packs">
+      <button type="button" class="pack-item" class:active={selectedId === 'user'} on:click={() => (selectedId = 'user')}>
+        <MxcAvatar mxc={userPack?.avatar ?? null} label="Your pack" size={28} shape="rounded" />
+        <span>{userPack?.display_name ?? 'Your pack'}</span>
+      </button>
+      {#if roomPacks.length}
+        <h4>Room packs</h4>
+        {#each roomPacks as pack (pack.id)}
+          <button type="button" class="pack-item" class:active={selectedId === pack.id} on:click={() => (selectedId = pack.id)}>
+            <MxcAvatar mxc={pack.avatar} label={packLabel(pack, roomName)} size={28} shape="rounded" />
+            <span>{packLabel(pack, roomName)}</span>
+          </button>
+        {/each}
+      {/if}
+      {#if otherPacks.length}
+        <h4>Other packs</h4>
+        {#each otherPacks as pack (pack.id)}
+          <button type="button" class="pack-item" class:active={selectedId === pack.id} on:click={() => (selectedId = pack.id)}>
+            <MxcAvatar mxc={pack.avatar} label={packLabel(pack, roomName)} size={28} shape="rounded" />
+            <span>{packLabel(pack, roomName)}</span>
+          </button>
+        {/each}
+      {/if}
+      {#if packRooms.length}
+        {#if creating}
+          <form class="new-pack" on:submit|preventDefault={() => void createPack()}>
+            <select bind:value={newRoom} aria-label="Room">
+              <option value="" disabled>Room</option>
+              {#each packRooms as room (room.room_id)}
+                <option value={room.room_id}>{room.name}</option>
+              {/each}
+            </select>
+            <input type="text" placeholder="Pack name" bind:value={newName} aria-label="Pack name" />
+            <div class="row">
+              <button type="button" class="ghost-btn" on:click={() => (creating = false)}>Cancel</button>
+              <button type="submit" class="primary-btn" disabled={!newRoom || !newName.trim()}>Create</button>
+            </div>
+          </form>
+        {:else}
+          <button type="button" class="ghost-btn new-btn" on:click={() => (creating = true)}>New room pack</button>
+        {/if}
+      {/if}
+    </nav>
+
+    <section class="editor" aria-label="Pack">
+      {#if editable && target}
+        <div class="meta">
+          <button type="button" class="avatar-btn" title="Change pack avatar" on:click={() => avatarInput.click()}>
+            <MxcAvatar mxc={selected?.avatar ?? null} label={selected?.display_name ?? 'Pack'} size={48} shape="rounded" />
+          </button>
+          <input
+            class="name"
+            type="text"
+            value={selected?.display_name ?? ''}
+            placeholder={selectedId === 'user' ? 'Your pack' : 'Pack name'}
+            aria-label="Pack name"
+            on:change={(e) => void rename(e)}
+          />
+          <input type="file" accept="image/*" class="visually-hidden" bind:this={avatarInput} on:change={() => void changeAvatar()} />
+        </div>
+        <div class="row">
+          {#if selected && selected.source !== 'User'}
+            <label class="check">
+              <input type="checkbox" checked={selected.enabled_everywhere} on:change={(e) => void setEverywhere(e.currentTarget.checked)} />
+              Use everywhere
+            </label>
+          {/if}
+          <span class="spacer"></span>
+          <button type="button" class="primary-btn" disabled={uploading !== null} on:click={() => fileInput.click()}>
+            {uploading ? `Uploading ${uploading.done}/${uploading.total}` : 'Add images'}
+          </button>
+          <input type="file" accept="image/*" multiple class="visually-hidden" bind:this={fileInput} on:change={() => void addImages()} />
+          {#if selected}
+            {#if confirmDelete}
+              <button type="button" class="ghost-btn" on:click={() => (confirmDelete = false)}>Keep</button>
+              <button type="button" class="ghost-btn danger" on:click={() => void deletePack()}>Delete pack</button>
+            {:else}
+              <button type="button" class="ghost-btn danger" on:click={() => (confirmDelete = true)}>Delete</button>
+            {/if}
+          {/if}
+        </div>
+        <div class="images">
+          {#each selected?.images ?? [] as image (image.shortcode)}
+            <div class="image">
+              <img src={messageMediaUrl(image.media_id, 'Thumbnail')} alt={image.shortcode} loading="lazy" />
+              <input type="text" value={image.shortcode} aria-label="Shortcode" on:change={(e) => void renameImage(image, e)} />
+              <div class="usage">
+                <button type="button" aria-pressed={hasUsage(image, 'Emoticon')} title="Emoji" on:click={() => void toggleUsage(image, 'Emoticon')}>☺</button>
+                <button type="button" aria-pressed={hasUsage(image, 'Sticker')} title="Sticker" on:click={() => void toggleUsage(image, 'Sticker')}>▣</button>
+                <button type="button" class="remove" title="Remove" aria-label={`Remove ${image.shortcode}`} on:click={() => void removeImage(image)}>✕</button>
+              </div>
+            </div>
+          {:else}
+            <p class="empty">No images yet</p>
+          {/each}
+        </div>
+      {:else if selected}
+        <div class="meta">
+          <MxcAvatar mxc={selected.avatar} label={packLabel(selected, roomName)} size={48} shape="rounded" />
+          <strong class="name">{packLabel(selected, roomName)}</strong>
+          <span class="spacer"></span>
+          <button type="button" class="primary-btn" on:click={(ev) => selected && clonePackMenu(selected, ev)}>Clone pack</button>
+        </div>
+        <div class="images">
+          {#each selected.images as image (image.shortcode)}
+            <div class="image">
+              <img src={messageMediaUrl(image.media_id, 'Thumbnail')} alt={image.shortcode} loading="lazy" />
+              <span class="code">{image.shortcode}</span>
+              <button type="button" class="ghost-btn" on:click={(ev) => selected && cloneImageMenu(selected, image, ev)}>Clone</button>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  </div>
+</div>
+
+{#if menu}
+  <ContextMenu items={menu.items} x={menu.x} y={menu.y} onClose={() => (menu = null)} />
+{/if}
+
+<style>
+  .packs { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; }
+  .layout { display: flex; gap: 14px; min-height: 0; flex: 1; }
+  .pack-list { flex: none; width: 210px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
+  h4 { margin: 10px 6px 4px; font-size: 12px; color: var(--muted); font-weight: 650; }
+  .pack-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: 13.5px;
+    text-align: left;
+    cursor: pointer;
+  }
+  .pack-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .pack-item:hover { background: var(--hover); }
+  .pack-item.active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
+  .new-btn { margin-top: 8px; }
+  .new-pack { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+  .editor { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
+  .meta { display: flex; align-items: center; gap: 10px; }
+  .avatar-btn { padding: 0; border: none; background: none; cursor: pointer; border-radius: 10px; }
+  .name { flex: 1; font-size: 15px; }
+  .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .spacer { flex: 1; }
+  .check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
+  input[type='text'], select {
+    background: var(--bg-soft);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    padding: 6px 8px;
+    font: inherit;
+    font-size: 13px;
+    min-width: 0;
+  }
+  .images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
+  .image {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg-soft);
+  }
+  .image img { width: 100%; aspect-ratio: 1; object-fit: contain; }
+  .image input { width: 100%; font-size: 12px; padding: 3px 6px; }
+  .code { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .usage { display: flex; gap: 4px; }
+  .usage button {
+    flex: 1;
+    padding: 2px 0;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+  }
+  .usage button[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); }
+  .usage .remove { flex: none; padding: 2px 6px; }
+  .usage .remove:hover { color: var(--danger); border-color: var(--danger); }
+  .empty { color: var(--muted); font-size: 13px; }
+</style>

Modified file: web/src/lib/ReactionPicker.stories.ts+4 additions@@ -15,6 +15,8 @@ const packs: ImagePack[] = [
     avatar: null,
     attribution: null,
     source: 'User',
+    editable: true,
+    enabled_everywhere: true,
     images: [
       image('rabbit', 'White rabbit', ['Emoticon']),
       image('teapot', null, ['Emoticon', 'Sticker'])
@@ -26,6 +28,8 @@ const packs: ImagePack[] = [
     avatar: null,
     attribution: null,
     source: { Room: { room_id: '!tea:example.org', state_key: 'tea' } },
+    editable: false,
+    enabled_everywhere: true,
     images: [image('dormouse', null, ['Sticker'])]
   }
 ];

Modified file: web/src/lib/SettingsPanel.svelte+8 additions−1 deletions@@ -21,7 +21,7 @@
   export let packs: ImagePack[] = [];
   export let onQuickChange: (list: QuickReaction[]) => void;
 
-  const dispatch = createEventDispatcher<{ close: void }>();
+  const dispatch = createEventDispatcher<{ close: void; packs: void }>();
 
   $: quickIsDefault =
     quick.length === DEFAULT_QUICK_REACTIONS.length && quick.every((r, i) => r.key === DEFAULT_QUICK_REACTIONS[i].key);
@@ -116,6 +116,13 @@
     </div>
     <ReactionPicker embedded {quick} {packs} {onQuickChange} onPick={() => {}} onClose={() => dispatch('close')} />
   </section>
+
+  <section aria-label="Packs">
+    <div class="sec-head">
+      <h3 class="sec-h">Sticker and emoji packs</h3>
+      <button type="button" class="ghost-btn" on:click={() => dispatch('packs')}>Manage</button>
+    </div>
+  </section>
 </div>
 
 <style>

Added file: web/src/lib/StickerPicker.svelte+171 additions@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { messageMediaUrl } from './api';
+  import MxcAvatar from './MxcAvatar.svelte';
+  import { packLabel, stickersOf } from './packs';
+  import type { ImagePack, PackImage } from './types';
+
+  export let packs: ImagePack[];
+  export let roomName: (roomId: string) => string;
+  export let onSend: (pack: ImagePack, image: PackImage) => void;
+  export let onClone: (pack: ImagePack, image: PackImage, x: number, y: number) => void;
+  export let onClonePack: (pack: ImagePack, x: number, y: number) => void;
+  export let onManage: () => void;
+  export let onClose: () => void;
+
+  let root: HTMLDivElement;
+  let search: HTMLInputElement;
+  let query = '';
+  let activeId: string | null = null;
+
+  $: withStickers = packs.filter((p) => stickersOf(p).length > 0);
+  $: q = query.trim().toLowerCase();
+  $: shown = withStickers
+    .map((pack) => ({
+      pack,
+      images: stickersOf(pack).filter(
+        (i) => !q || i.shortcode.toLowerCase().includes(q) || (i.body ?? '').toLowerCase().includes(q)
+      )
+    }))
+    .filter((g) => g.images.length > 0 && (q || activeId === null || g.pack.id === activeId));
+
+  onMount(() => search?.focus());
+
+  function outside(ev: PointerEvent): void {
+    if (!root.contains(ev.target as Node) && !(ev.target as Element).closest?.('.context-menu, .sticker-btn')) onClose();
+  }
+
+  function key(ev: KeyboardEvent): void {
+    if (ev.key === 'Escape' && !document.querySelector('.context-menu')) {
+      ev.stopPropagation();
+      onClose();
+    }
+  }
+</script>
+
+<svelte:window on:pointerdown|capture={outside} on:keydown|capture={key} />
+
+<div class="sticker-picker" role="dialog" aria-label="Stickers" bind:this={root}>
+  <div class="top">
+    <input class="search" type="search" placeholder="Search stickers" bind:value={query} bind:this={search} />
+    <button type="button" class="icon-btn" title="Manage packs" aria-label="Manage packs" on:click={onManage}>
+      <span aria-hidden="true">⚙</span>
+    </button>
+  </div>
+  {#if withStickers.length > 1}
+    <div class="tabs" role="tablist" aria-label="Packs">
+      <button type="button" role="tab" class="tab all" aria-selected={activeId === null} on:click={() => (activeId = null)}>All</button>
+      {#each withStickers as pack (pack.id)}
+        <button
+          type="button"
+          role="tab"
+          class="tab"
+          aria-selected={activeId === pack.id}
+          title={packLabel(pack, roomName)}
+          on:click={() => (activeId = pack.id)}
+        >
+          {#if pack.avatar}
+            <MxcAvatar mxc={pack.avatar} label={packLabel(pack, roomName)} size={24} shape="rounded" />
+          {:else}
+            <img src={messageMediaUrl(stickersOf(pack)[0].media_id, 'Thumbnail')} alt={packLabel(pack, roomName)} />
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+  <div class="scroll">
+    {#each shown as g (g.pack.id)}
+      <section class="group" aria-label={packLabel(g.pack, roomName)}>
+        <div class="group-head">
+          <h3>{packLabel(g.pack, roomName)}</h3>
+          {#if !g.pack.editable}
+            <button type="button" class="clone-pack" on:click={(ev) => onClonePack(g.pack, ev.clientX, ev.clientY)}>Clone pack</button>
+          {/if}
+        </div>
+        <div class="grid">
+          {#each g.images as image (image.shortcode)}
+            <button
+              type="button"
+              class="cell"
+              title={image.body ?? image.shortcode}
+              aria-label={image.body ?? image.shortcode}
+              on:click={() => onSend(g.pack, image)}
+              on:contextmenu|preventDefault={(ev) => onClone(g.pack, image, ev.clientX, ev.clientY)}
+            >
+              <img src={messageMediaUrl(image.media_id, 'Thumbnail')} alt="" loading="lazy" />
+            </button>
+          {/each}
+        </div>
+      </section>
+    {:else}
+      <p class="status">{withStickers.length === 0 ? 'No stickers yet' : `No stickers match "${query.trim()}"`}</p>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .sticker-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 360px;
+    height: 420px;
+    max-width: calc(100vw - 16px);
+    max-height: calc(100vh - 120px);
+    padding: 8px;
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-shadow: 0 6px 24px rgb(0 0 0 / 0.5);
+  }
+  .top { display: flex; gap: 6px; }
+  .search {
+    flex: 1;
+    background: var(--bg-soft);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--text);
+    padding: 6px 10px;
+    font-size: 13px;
+  }
+  .search:focus-visible { outline: none; border-color: var(--accent); }
+  .tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
+  .tab {
+    flex: none;
+    display: grid;
+    place-items: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 2px 6px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--muted);
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .tab img { width: 24px; height: 24px; object-fit: contain; }
+  .tab[aria-selected='true'] { border-color: var(--accent); color: var(--text); }
+  .scroll { flex: 1; overflow-y: auto; min-height: 0; }
+  .group-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 4px; }
+  h3 { margin: 0; font-size: 12px; font-weight: 650; color: var(--muted); }
+  .clone-pack {
+    border: none;
+    background: none;
+    color: var(--accent);
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; }
+  .cell {
+    aspect-ratio: 1;
+    padding: 4px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    background: transparent;
+    cursor: pointer;
+  }
+  .cell:hover, .cell:focus-visible { background: var(--hover); border-color: var(--border); outline: none; }
+  .cell img { width: 100%; height: 100%; object-fit: contain; }
+  .status { color: var(--muted); font-size: 13px; text-align: center; margin-top: 24px; }
+</style>

Modified file: web/src/lib/api.ts+1

@@ -46,6 +46,7 @@ export const sendMessage = (

4646 export const runCommand = (request: CommandRequest) => transport.command(request);

4747 export const uploadAvatar = (file: File) => transport.uploadAvatar(file);

4848 export const uploadRoomAvatar = (room_id: string, file: File) => transport.uploadRoomAvatar(room_id, file);

49+export const uploadMedia = (file: File) => transport.uploadMedia(file);

4950 export const paginateRoom = (room_id: string) => transport.paginateRoom(room_id);

5051 export const setTyping = (room_id: string, typing: boolean) => transport.setTyping(room_id, typing);

5152 export const getAccountData = (eventType: string) => transport.getAccountData(eventType);

Added file: web/src/lib/packs.ts+102 additions@@ -0,0 +1,102 @@
+import type { PackTarget } from './transport';
+import type { ImagePack, ImagePacks, PackImage, PackUsage } from './types';
+
+export interface PackChoice {
+  label: string;
+  target: PackTarget;
+  pack: ImagePack | null;
+}
+
+export function packTarget(pack: ImagePack): PackTarget {
+  if (pack.source === 'User') return { kind: 'user' };
+  return { kind: 'room', room_id: pack.source.Room.room_id, state_key: pack.source.Room.state_key };
+}
+
+export function packLabel(pack: ImagePack, roomName: (roomId: string) => string): string {
+  if (pack.display_name) return pack.display_name;
+  if (pack.source === 'User') return 'Your pack';
+  return roomName(pack.source.Room.room_id);
+}
+
+export function allPacks(packs: ImagePacks): ImagePack[] {
+  const seen = new Set<string>();
+  const out: ImagePack[] = [];
+  for (const pack of [...packs.global, ...Object.values(packs.rooms).flat()]) {
+    if (seen.has(pack.id)) continue;
+    seen.add(pack.id);
+    out.push(pack);
+  }
+  return out;
+}
+
+/** Packs you can write to, with your own pack first even before it exists. */
+export function editableChoices(packs: ImagePacks, roomName: (roomId: string) => string): PackChoice[] {
+  const all = allPacks(packs);
+  const user = all.find((p) => p.source === 'User') ?? null;
+  const choices: PackChoice[] = [{ label: user?.display_name ?? 'Your pack', target: { kind: 'user' }, pack: user }];
+  for (const pack of all) {
+    if (pack.source === 'User' || !pack.editable) continue;
+    choices.push({ label: packLabel(pack, roomName), target: packTarget(pack), pack });
+  }
+  return choices;
+}
+
+export function hasUsage(image: PackImage, usage: PackUsage): boolean {
+  return image.usage.length === 0 || image.usage.includes(usage);
+}
+
+export function stickersOf(pack: ImagePack): PackImage[] {
+  return pack.images.filter((image) => hasUsage(image, 'Sticker'));
+}
+
+/** A shortcode from a file name, unique within `taken`. */
+export function shortcodeFor(filename: string, taken: Set<string>): string {
+  const stem = filename.replace(/\.[^.]+$/, '');
+  const base =
+    stem
+      .toLowerCase()
+      .replace(/[^a-z0-9_-]+/g, '_')
+      .replace(/^_+|_+$/g, '')
+      .slice(0, 64) || 'image';
+  let candidate = base;
+  for (let n = 2; taken.has(candidate); n += 1) candidate = `${base}_${n}`;
+  taken.add(candidate);
+  return candidate;
+}
+
+export function validShortcode(code: string): boolean {
+  return /^[^\s:]{1,100}$/.test(code);
+}
+
+export function packSlug(name: string): string {
+  return (
+    name
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .slice(0, 48) || 'pack'
+  );
+}
+
+export interface CloneDestination {
+  label: string;
+  target: PackTarget;
+  display_name: string | null;
+}
+
+/** Where a whole pack can be cloned to: merged into your pack, or as a new pack in a room you can edit. */
+export function clonePackDestinations(
+  pack: ImagePack,
+  rooms: { room_id: string; name: string }[],
+  roomName: (roomId: string) => string
+): CloneDestination[] {
+  const name = packLabel(pack, roomName);
+  return [
+    { label: 'Merge into your pack', target: { kind: 'user' }, display_name: null },
+    ...rooms.map((room) => ({
+      label: `New pack in ${room.name}`,
+      target: { kind: 'room', room_id: room.room_id, state_key: packSlug(name) } as PackTarget,
+      display_name: name
+    }))
+  ];
+}

Modified file: web/src/lib/transport-http.ts+10 additions@@ -238,6 +238,16 @@ export class HttpTransport implements Transport {
     return json(res, 'Avatar upload failed');
   }
 
+  async uploadMedia(file: File): Promise<{ mxc: string }> {
+    const res = await fetch('/api/media/upload', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: { 'content-type': file.type || 'application/octet-stream' },
+      body: file
+    });
+    return json(res, 'Upload failed');
+  }
+
   async uploadRoomAvatar(room_id: string, file: File): Promise<void> {
     const res = await fetch(`/api/rooms/avatar?room_id=${encodeURIComponent(room_id)}`, {
       method: 'POST',

Modified file: web/src/lib/transport-worker.ts+4 additions@@ -289,6 +289,10 @@ export class WorkerTransport implements Transport {
     await this.client.call('upload_avatar', {}, await file.arrayBuffer());
   }
 
+  async uploadMedia(file: File): Promise<{ mxc: string }> {
+    return this.client.call('upload_media', {}, await file.arrayBuffer());
+  }
+
   async uploadRoomAvatar(room_id: string, file: File): Promise<void> {
     await this.client.call('upload_room_avatar', { room_id }, await file.arrayBuffer());
   }

Modified file: web/src/lib/transport.ts+30 additions−2 deletions@@ -1,4 +1,4 @@
-import type { MemberSummary, RoomSummary } from './types';
+import type { MemberSummary, PackUsage, RoomSummary } from './types';
 
 export class ApiError extends Error {
   status: number;
@@ -35,7 +35,34 @@ export type CommandRequest =
   | { op: 'set_room_avatar'; room_id: string; mxc: string | null }
   | { op: 'mute'; room_id: string; user_id: string; muted: boolean }
   | { op: 'ignore' | 'unignore'; user_id: string }
-  | { op: 'power_levels'; room_id: string };
+  | { op: 'power_levels'; room_id: string }
+  | { op: 'send_sticker'; room_id: string; pack_id: string; shortcode: string }
+  | { op: 'create_room_pack'; room_id: string; state_key: string; display_name: string }
+  | { op: 'delete_pack'; target: PackTarget }
+  | {
+      op: 'set_pack_meta';
+      target: PackTarget;
+      display_name?: string;
+      avatar?: string | null;
+      usage?: PackUsage[];
+    }
+  | {
+      op: 'put_pack_image';
+      target: PackTarget;
+      shortcode: string;
+      mxc: string;
+      body: string | null;
+      usage: PackUsage[] | null;
+      info?: { mimetype: string | null; size_bytes: number | null; width: number | null; height: number | null };
+    }
+  | { op: 'rename_pack_image'; target: PackTarget; from: string; to: string }
+  | { op: 'remove_pack_image'; target: PackTarget; shortcode: string }
+  | { op: 'set_pack_enabled'; room_id: string; state_key: string; enabled: boolean }
+  | { op: 'clone_pack_image'; from_pack: string; shortcode: string; to: PackTarget }
+  | { op: 'clone_sticker'; room_id: string; event_id: string; to: PackTarget; shortcode: string }
+  | { op: 'clone_pack'; from_pack: string; to: PackTarget; display_name: string | null };
+
+export type PackTarget = { kind: 'user' } | { kind: 'room'; room_id: string; state_key: string };
 
 export type SendKind = 'text' | 'emote' | 'notice';
 
@@ -91,6 +118,7 @@ export interface Transport {
   command(request: CommandRequest): Promise<unknown>;
   uploadAvatar(file: File): Promise<void>;
   uploadRoomAvatar(room_id: string, file: File): Promise<void>;
+  uploadMedia(file: File): Promise<{ mxc: string }>;
   /**
    * Wire events as raw JSON text, snapshot first. Returns an unsubscribe
    * function. onDisconnect fires whenever the underlying connection drops;

Modified file: web/src/lib/types.ts+9 additions−3 deletions@@ -41,6 +41,7 @@ export interface RoomSummary {
   parent_spaces: string[];
   children: string[];
   space_order: string | null;
+  can_edit_packs: boolean;
 }
 
 export interface MemberSummary {
@@ -364,7 +365,8 @@ export function parseRoomSummary(raw: unknown): RoomSummary | null {
     inviter: optionalString(raw, 'inviter'),
     parent_spaces: stringList(raw['parent_spaces']),
     children: stringList(raw['children']),
-    space_order: optionalString(raw, 'space_order')
+    space_order: optionalString(raw, 'space_order'),
+    can_edit_packs: raw['can_edit_packs'] === true
   };
 }
 
@@ -693,6 +695,8 @@ export interface ImagePack {
   attribution: string | null;
   source: PackSource;
   images: PackImage[];
+  editable: boolean;
+  enabled_everywhere: boolean;
 }
 export interface ImagePacks {
   global: ImagePack[];
@@ -742,7 +746,9 @@ function parseImagePack(raw: unknown): ImagePack | null {
     avatar: optionalString(raw, 'avatar'),
     attribution: optionalString(raw, 'attribution'),
     source: parsePackSource(raw['source']),
-    images
+    images,
+    editable: raw['editable'] === true,
+    enabled_everywhere: raw['enabled_everywhere'] === true
   };
 }
 
@@ -771,7 +777,7 @@ export function packsForRoom(packs: ImagePacks, roomId: string | null): ImagePac
   const seen = new Set<string>();
   const out: ImagePack[] = [];
   const add = (pack: ImagePack) => {
-    if (seen.has(pack.id)) return;
+    if (seen.has(pack.id) || pack.images.length === 0) return;
     seen.add(pack.id);
     out.push(pack);
   };

Added file: web/test/packs.test.ts+45 additions@@ -0,0 +1,45 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { clonePackDestinations, editableChoices, packSlug, shortcodeFor, stickersOf } from '../src/lib/packs.ts';
+
+const image = (shortcode: string, usage: ('Emoticon' | 'Sticker')[]) => ({
+  shortcode,
+  media_id: `mxc://x/${shortcode}`,
+  reaction_key: `mxc://x/${shortcode}`,
+  body: null,
+  mimetype: null,
+  width: null,
+  height: null,
+  usage
+});
+
+const roomPack = (state_key: string, editable: boolean) => ({
+  id: `room:!r:x:${state_key}`,
+  display_name: state_key,
+  avatar: null,
+  attribution: null,
+  source: { Room: { room_id: '!r:x', state_key } },
+  images: [image('a', ['Sticker']), image('b', ['Emoticon']), image('c', [])],
+  editable,
+  enabled_everywhere: false
+});
+
+test('shortcodes come from file names and never clash', () => {
+  const taken = new Set(['cat']);
+  assert.equal(shortcodeFor('Cat.PNG', taken), 'cat_2');
+  assert.equal(shortcodeFor('my cool sticker!.webp', taken), 'my_cool_sticker');
+  assert.equal(shortcodeFor('.png', taken), 'image');
+  assert.equal(packSlug('Cats & Dogs'), 'cats-dogs');
+});
+
+test('stickers include images with no usage of their own', () => {
+  assert.deepEqual(stickersOf(roomPack('s', true)).map((i) => i.shortcode), ['a', 'c']);
+});
+
+test('your pack is always a destination, then editable room packs only', () => {
+  const packs = { global: [], rooms: { '!r:x': [roomPack('mine', true), roomPack('theirs', false)] } };
+  const choices = editableChoices(packs, () => 'Room');
+  assert.deepEqual(choices.map((c) => c.target), [{ kind: 'user' }, { kind: 'room', room_id: '!r:x', state_key: 'mine' }]);
+  const dests = clonePackDestinations(roomPack('Fancy Pack', false), [{ room_id: '!d:x', name: 'Dest' }], () => 'Room');
+  assert.deepEqual(dests[1].target, { kind: 'room', room_id: '!d:x', state_key: 'fancy-pack' });
+});

malice

Commit d095131eec0e

Commit `d095131eec0e`