malice

public

Star0

Fork 0

Watch0

80 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `dda384a360e0`

tarball

atagen <boss@atagen.co>2026-10-25 10:46 UTC

10 files changed+822-584

threads: share the room composer and let the thread sit beside members

The thread pane had its own bare textarea, so mentions, emotes, markdown marks, attachments, paste and edit-last were missing in threads. The composer is now one component used by the room and by threads, with thread uploads carried through Upload's thread_root. Stickers stay room-only until macltok's send_sticker takes a TimelineId. The thread gets its own grid column instead of borrowing the members slot. Both panes show side by side from 1300px, and below that the last one opened covers the other without closing it, so closing members brings the thread back.

Modified file: crates/malice-core/src/request.rs+5 additions@@ -102,6 +102,8 @@ pub enum Request {
         reply_to: Option<String>,
         #[serde(default)]
         mentions: Vec<String>,
+        #[serde(default)]
+        thread_root: Option<String>,
         #[serde(skip)]
         bytes: Vec<u8>,
     },
@@ -572,8 +574,10 @@ pub async fn dispatch(
             formatted_caption,
             reply_to,
             mentions,
+            thread_root,
             bytes,
         } => {
+            let timeline = timeline_for(&room_id, thread_root.as_deref())?;
             let room_id = parse_room_id(&room_id)?;
             if bytes.is_empty() || bytes.len() > 20 * 1024 * 1024 {
                 return Err(CoreError::bad_request(
@@ -587,6 +591,7 @@ pub async fn dispatch(
                 return Err(CoreError::bad_request("caption is too large"));
             }
             let mut upload = AttachmentUpload::new(room_id, filename, mimetype, bytes);
+            upload.timeline_id = timeline;
             upload.caption = caption.map(|text| match formatted_caption {
                 Some(html) => RichText::html(text, html),
                 None => RichText::plain(text),

Modified file: crates/malice-server/src/routes.rs+8 additions@@ -475,6 +475,7 @@ async fn rooms_upload(
     let mut caption = None;
     let mut formatted_caption = None;
     let mut reply_to = None;
+    let mut thread_root = None;
     let mut mentions = Vec::new();
     let mut file = None;
     loop {
@@ -508,6 +509,12 @@ async fn rooms_upload(
                     Err(_) => return ApiError::bad_request("invalid reply_to").into_response(),
                 };
             }
+            Some("thread_root") if thread_root.is_none() => {
+                thread_root = match field.text().await {
+                    Ok(value) => Some(value),
+                    Err(_) => return ApiError::bad_request("invalid thread_root").into_response(),
+                };
+            }
             Some("mentions") => match field.text().await {
                 Ok(value) => mentions.push(value),
                 Err(_) => return ApiError::bad_request("invalid mention").into_response(),
@@ -549,6 +556,7 @@ async fn rooms_upload(
                 formatted_caption,
                 reply_to,
                 mentions,
+                thread_root,
                 bytes: bytes.to_vec(),
             },
         )

Modified file: web/src/App.svelte+140 additions−499 deletions@@ -7,11 +7,12 @@
   import MxcAvatar from './lib/MxcAvatar.svelte';
   import PinButton from './lib/PinButton.svelte';
   import ThreadPane from './lib/ThreadPane.svelte';
+  import Composer from './lib/Composer.svelte';
+  import { releaseStaged, stageFiles as stageAttachments, type StagedAttachment, type StickerHandlers } from './lib/staging';
   import RoomThreads from './lib/RoomThreads.svelte';
   import { loadPinnedThreads, openThread, showThread, threadsByRoom } from './lib/threads';
   import { threadMatches } from './lib/thread-index';
   import ContextMenu, { type MenuItem } from './lib/ContextMenu.svelte';
-  import StickerPicker from './lib/StickerPicker.svelte';
   import PackManager from './lib/PackManager.svelte';
   import PackCloneDialog from './lib/PackCloneDialog.svelte';
   import type { CloneSource } from './lib/pack-clone';
@@ -48,14 +49,11 @@
     uploadAttachment,
     uploadAvatar,
     uploadRoomAvatar,
-    editMessage,
-    mediaUrl
+    editMessage
   } from './lib/api';
   import EmojiText from './lib/EmojiText.svelte';
-  import { loadEmoji, type EmojiEntry } from './lib/emoji';
-  import { completeShortcode, customEmotes, emoteQueryAt, rankEmotes, resolveEmotes, type EmoteCandidate, type EmoteQuery } from './lib/emotes';
-  import { COMMAND_USAGE, commandQueryAt, isKnownCommand, matchCommands, parseCommand, splitTarget, unescapeCommand } from './lib/commands';
-  import type { CommandName } from './lib/commands';
+  import { customEmotes, resolveEmotes } from './lib/emotes';
+  import { isKnownCommand, parseCommand, splitTarget, unescapeCommand } from './lib/commands';
   import type { ParsedCommand } from './lib/commands';
   import {
     banners,
@@ -84,12 +82,9 @@
   } from './lib/store';
   import { discardPending, pendingByRoom, queueSend, resetPending, retryPending } from './lib/pending';
   import type { PendingMessage } from './lib/pending';
-  import { insideOpenFence } from './lib/markdown';
   import { TimelineViewport } from './lib/timeline-viewport';
-  import ComposerText from './lib/ComposerText.svelte';
-  import { markMentions } from './lib/composer-marks';
-  import { mentionQueryAt, mentionsFromHtml, rankPeople, resolveMentions } from './lib/mentions';
-  import type { Mention, MentionQuery } from './lib/mentions';
+  import { mentionsFromHtml, resolveMentions } from './lib/mentions';
+  import type { Mention } from './lib/mentions';
   import { loadQuickReactions, quickReactions, saveQuickReactions } from './lib/quick-reactions';
   import { loadKeywords } from './lib/keywords';
   import {
@@ -126,7 +121,6 @@
   let membersOpen = false;
   let replyingTo: ReplyReference | null = null;
   let dialog: 'join' | 'create' | 'security' | 'settings' | 'packs' | null = null;
-  let stickersOpen = false;
   let cloneSource: CloneSource | null = null;
   let joinTarget = '';
   let joinBusy = false;
@@ -149,30 +143,14 @@
   let stickToBottom = true;
   let timelineEl: HTMLElement | null = null;
   let timelineViewport: TimelineViewport | null = null;
-  let composerEl: HTMLTextAreaElement | null = null;
-  let marksEl: HTMLDivElement | null = null;
-  let composerComposing = false;
-  $: composerMarks = markMentions(
-    composer,
-    ($selectedRoomId && pickedMentions[$selectedRoomId]) || [],
-    resolveEmotes(composer, roomEmotes).map((e) => `:${e.shortcode}:`)
-  );
-  let fileInput: HTMLInputElement | null = null;
+  let composerRef: Composer | null = null;
   let avatarInput: HTMLInputElement | null = null;
   let uploadBusy = false;
   let uploadName: string | null = null;
-  interface StagedAttachment {
-    id: number;
-    file: File;
-    previewUrl: string | null;
-  }
   let staged: Record<string, StagedAttachment[]> = {};
   let editing: { roomId: string; eventId: string; original: string; stash: string } | null = null;
   /** Everyone picked from the finder per room; only those whose name is still in the text get linked on send. */
   let pickedMentions: Record<string, Mention[]> = {};
-  let mentionQuery: MentionQuery | null = null;
-  let mentionIndex = 0;
-  let nextStagedId = 1;
   const WARM_ROOM_LIMIT = 8;
   /** Rooms left open after switching away so coming back is instant, least recently viewed first. */
   let warmRooms: string[] = [];
@@ -247,8 +225,6 @@
   $: members = $selectedRoomId ? ($membersByRoom[$selectedRoomId] ?? []) : [];
   $: memberGroups = groupMembers(members, roomLevels);
   $: people = peopleIn(items, members);
-  $: mentionCandidates = mentionQuery ? rankPeople(Object.values(people), mentionQuery.query, $sessionUser ?? null) : [];
-  $: if (mentionIndex >= mentionCandidates.length) mentionIndex = 0;
   $: hasStart = items.some((i) => i.kind === 'start');
   $: grouped = buildGroups(items);
   $: lastSentId = lastOwnSent(items);
@@ -521,7 +497,7 @@
     openFailed = {};
     warmRooms = [];
     pickedMentions = {};
-    mentionQuery = null;
+    composerRef?.closeFinders();
     clearAllStaged();
     avatarByUser = {};
     resetPending();
@@ -594,7 +570,7 @@
     selectedRoomId.set(null);
     replyingTo = null;
     editing = null;
-    mentionQuery = null;
+    composerRef?.closeFinders();
     peeking = null;
     membersOpen = false;
     sidebarOpen = false;
@@ -659,7 +635,7 @@
     composer = drafts[roomId] ?? '';
     replyingTo = null;
     editing = null;
-    mentionQuery = null;
+    composerRef?.closeFinders();
     stickToBottom = true;
     lastReadKey = '';
     sidebarOpen = false;
@@ -669,7 +645,7 @@
       await tick();
       scrollToBottom();
       queueReadReceipt();
-      composerEl?.focus();
+      composerRef?.focus();
       return;
     }
     if (openFailed[roomId]) {
@@ -691,7 +667,7 @@
     await tick();
     scrollToBottom();
     queueReadReceipt();
-    composerEl?.focus();
+    composerRef?.focus();
   }
 
   function touchWarmRoom(roomId: string): void {
@@ -720,22 +696,6 @@
     timelineViewport?.releaseScroll();
   }
 
-  function syncComposer(node: HTMLTextAreaElement) {
-    const sync = () => {
-      if (!marksEl) return;
-      marksEl.style.width = `${node.clientWidth}px`;
-      marksEl.scrollTop = node.scrollTop;
-      marksEl.scrollLeft = node.scrollLeft;
-    };
-    const observer = new ResizeObserver(sync);
-    observer.observe(node);
-    node.addEventListener('scroll', sync);
-    return { destroy: () => {
-      observer.disconnect();
-      node.removeEventListener('scroll', sync);
-    } };
-  }
-
   function onTimelineKey(e: KeyboardEvent): void {
     if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(e.key)) noteUserScroll();
   }
@@ -845,7 +805,7 @@
     const text = unescapeCommand(body);
     const mentions = resolveMentions(text, pickedMentions[roomId] ?? []);
     pickedMentions = { ...pickedMentions, [roomId]: [] };
-    mentionQuery = null;
+    composerRef?.closeFinders();
     if (command) {
       const image = attachments[0] ?? null;
       if (image) {
@@ -863,7 +823,7 @@
       void sendAttachments(roomId, text, reply, mentions, attachments);
     }
     if (peeking === roomId) stopPeeking();
-    composerEl?.focus();
+    composerRef?.focus();
   }
 
   function lastOwnEventId(): string | null {
@@ -1030,18 +990,10 @@
   function stageFiles(files: File[]): void {
     const roomId = $selectedRoomId;
     if (!roomId || !openReady[roomId]) return;
-    const accepted: StagedAttachment[] = [];
-    for (const file of files) {
-      if (file.size === 0 || file.size > 20 * 1024 * 1024) {
-        pushBanner(`${file.name || 'File'} must be between 1 byte and 20 MiB.`);
-        continue;
-      }
-      const previewUrl = file.type.startsWith('image/') ? URL.createObjectURL(file) : null;
-      accepted.push({ id: nextStagedId++, file, previewUrl });
-    }
+    const accepted = stageAttachments(files, pushBanner);
     if (accepted.length === 0) return;
     staged = { ...staged, [roomId]: [...(staged[roomId] ?? []), ...accepted] };
-    composerEl?.focus();
+    composerRef?.focus();
   }
 
   function unstage(roomId: string, id: number): void {
@@ -1052,9 +1004,7 @@
   }
 
   function clearAllStaged(): void {
-    for (const list of Object.values(staged)) {
-      for (const attachment of list) if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
-    }
+    for (const list of Object.values(staged)) releaseStaged(list);
     staged = {};
   }
 
@@ -1070,14 +1020,14 @@
     }
     composer = body;
     replyingTo = null;
-    composerEl?.focus();
+    composerRef?.focus();
   }
 
   function cancelEdit(): void {
     if (!editing) return;
     composer = editing.stash;
     editing = null;
-    composerEl?.focus();
+    composerRef?.focus();
   }
 
   function submitEdit(): void {
@@ -1104,7 +1054,7 @@
   function startReply(target: ReplyReference): void {
     if (editing) cancelEdit();
     replyingTo = target;
-    composerEl?.focus();
+    composerRef?.focus();
   }
 
   let pinnedOpenFor: string | null = null;
@@ -1203,184 +1153,6 @@
     else timelineViewport.restore();
   }
 
-  let commandQuery: string | null = null;
-  let commandIndex = 0;
-  $: commandCandidates = commandQuery === null ? [] : matchCommands(commandQuery);
-  $: if (commandIndex >= commandCandidates.length) commandIndex = 0;
-
-  async function pickCommand(name: CommandName): Promise<void> {
-    if (!composerEl) return;
-    const caret = composerEl.selectionStart ?? composer.length;
-    const rest = composer.slice(caret).replace(/^\S*/, '');
-    composer = `/${name}${rest.startsWith(' ') ? rest : ` ${rest}`}`;
-    commandQuery = null;
-    await tick();
-    const at = name.length + 2;
-    composerEl.focus();
-    composerEl.setSelectionRange(at, at);
-  }
-
-  let emoteQuery: EmoteQuery | null = null;
-  let emoteIndex = 0;
-  let emojiList: EmojiEntry[] = [];
-  $: emoteCandidates = emoteQuery ? rankEmotes(emoteQuery.query, roomEmotes, emojiList) : [];
-  $: if (emoteIndex >= emoteCandidates.length) emoteIndex = 0;
-
-  function ensureEmoji(): void {
-    if (emojiList.length) return;
-    loadEmoji()
-      .then((groups) => (emojiList = groups.flatMap((g) => g.emojis)))
-      .catch(() => undefined);
-  }
-
-  async function onComposerInput(): Promise<void> {
-    if (composerEl && composer.includes(':')) {
-      ensureEmoji();
-      const done = completeShortcode(composerEl.value, composerEl.selectionStart ?? composerEl.value.length, emojiList);
-      if (done) {
-        composer = done.text;
-        await tick();
-        composerEl.setSelectionRange(done.caret, done.caret);
-      }
-    }
-    updateMentionQuery();
-  }
-
-  async function pickEmote(candidate: EmoteCandidate): Promise<void> {
-    if (!emoteQuery || !composerEl) return;
-    const caret = composerEl.selectionStart ?? composer.length;
-    const inserted = candidate.kind === 'emoji' ? candidate.emoji : `:${candidate.shortcode}: `;
-    composer = composer.slice(0, emoteQuery.start) + inserted + composer.slice(caret);
-    const at = emoteQuery.start + inserted.length;
-    emoteQuery = null;
-    await tick();
-    composerEl.focus();
-    composerEl.setSelectionRange(at, at);
-  }
-
-  function updateMentionQuery(): void {
-    const roomId = $selectedRoomId;
-    const nextEmote = composerEl ? emoteQueryAt(composerEl.value, composerEl.selectionStart ?? composerEl.value.length) : null;
-    if (nextEmote?.start !== emoteQuery?.start) emoteIndex = 0;
-    emoteQuery = nextEmote;
-    const nextCommand = composerEl ? commandQueryAt(composerEl.value, composerEl.selectionStart ?? composerEl.value.length) : null;
-    if (nextCommand !== commandQuery) commandIndex = 0;
-    commandQuery = nextCommand;
-    const next = composerEl && roomId ? mentionQueryAt(composerEl.value, composerEl.selectionStart ?? composerEl.value.length) : null;
-    if (next && !mentionQuery && roomId && !$membersByRoom[roomId]) void loadMembers(roomId);
-    if (next?.start !== mentionQuery?.start) mentionIndex = 0;
-    mentionQuery = next;
-  }
-
-  async function pickMention(person: Person): Promise<void> {
-    const roomId = $selectedRoomId;
-    if (!mentionQuery || !roomId || !composerEl) return;
-    const caret = composerEl.selectionStart ?? composer.length;
-    const inserted = `${person.name} `;
-    composer = composer.slice(0, mentionQuery.start) + inserted + composer.slice(caret);
-    const at = mentionQuery.start + inserted.length;
-    pickedMentions = {
-      ...pickedMentions,
-      [roomId]: [...(pickedMentions[roomId] ?? []), { user_id: person.user_id, text: person.name }]
-    };
-    mentionQuery = null;
-    await tick();
-    composerEl.focus();
-    composerEl.setSelectionRange(at, at);
-  }
-
-  function onComposerKey(ev: KeyboardEvent): void {
-    if (ev.isComposing || composerComposing) return;
-    if (emoteQuery && emoteCandidates.length > 0) {
-      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-        ev.preventDefault();
-        const step = ev.key === 'ArrowDown' ? 1 : -1;
-        emoteIndex = (emoteIndex + step + emoteCandidates.length) % emoteCandidates.length;
-        return;
-      }
-      if ((ev.key === 'Enter' && !ev.shiftKey) || ev.key === 'Tab') {
-        ev.preventDefault();
-        void pickEmote(emoteCandidates[emoteIndex]);
-        return;
-      }
-      if (ev.key === 'Escape') {
-        ev.stopPropagation();
-        emoteQuery = null;
-        return;
-      }
-    }
-    if (commandQuery !== null && commandCandidates.length > 0) {
-      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-        ev.preventDefault();
-        const step = ev.key === 'ArrowDown' ? 1 : -1;
-        commandIndex = (commandIndex + step + commandCandidates.length) % commandCandidates.length;
-        return;
-      }
-      const exact = commandCandidates.length === 1 && commandCandidates[0] === commandQuery;
-      if (ev.key === 'Tab' || (ev.key === 'Enter' && !ev.shiftKey && !exact)) {
-        ev.preventDefault();
-        void pickCommand(commandCandidates[commandIndex]);
-        return;
-      }
-      if (ev.key === 'Escape') {
-        ev.stopPropagation();
-        commandQuery = null;
-        return;
-      }
-    }
-    if (mentionQuery && mentionCandidates.length > 0) {
-      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
-        ev.preventDefault();
-        const step = ev.key === 'ArrowDown' ? 1 : -1;
-        mentionIndex = (mentionIndex + step + mentionCandidates.length) % mentionCandidates.length;
-        return;
-      }
-      if ((ev.key === 'Enter' && !ev.shiftKey) || ev.key === 'Tab') {
-        ev.preventDefault();
-        void pickMention(mentionCandidates[mentionIndex]);
-        return;
-      }
-      if (ev.key === 'Escape') {
-        ev.stopPropagation();
-        mentionQuery = null;
-        return;
-      }
-    }
-    if (ev.key === 'Enter' && !ev.shiftKey && !insideOpenFence(composer, composerEl?.selectionStart ?? composer.length)) {
-      ev.preventDefault();
-      send();
-    } else if (ev.key === 'Escape' && editing) {
-      ev.stopPropagation();
-      cancelEdit();
-    } else if (ev.key === 'Escape' && replyingTo) {
-      ev.stopPropagation();
-      replyingTo = null;
-    } else if (ev.key === 'ArrowUp' && !composer && !editing && editLastOwn()) {
-      ev.preventDefault();
-    }
-  }
-
-  function pickFiles(): void {
-    const roomId = $selectedRoomId;
-    if (!roomId || !openReady[roomId]) return;
-    fileInput?.click();
-  }
-
-  function onFileChosen(): void {
-    stageFiles(Array.from(fileInput?.files ?? []));
-    if (fileInput) fileInput.value = '';
-  }
-
-  function onComposerPaste(ev: ClipboardEvent): void {
-    const data = ev.clipboardData;
-    // Office apps put a rendered image next to the copied text, so only take the image when there is no plain text.
-    if (!data || data.types.includes('text/plain')) return;
-    const images = Array.from(data.files).filter((f) => f.type.startsWith('image/'));
-    if (images.length === 0) return;
-    ev.preventDefault();
-    stageFiles(images);
-  }
-
   async function react(eventId: string, key: string, shortcode?: string): Promise<void> {
     const roomId = $selectedRoomId;
     if (!roomId || !eventId || reacting) return;
@@ -1495,10 +1267,16 @@
   $: threadView = $openThread && $openThread.room_id === $selectedRoomId ? $openThread : null;
   $: if ($openThread && $openThread.room_id !== $selectedRoomId) void showThread(null);
   let threadFolds: Record<string, boolean> = {};
+  const BOTH_PANES_MIN_WIDTH = 1300;
+  let viewportWidth = typeof window === 'undefined' ? BOTH_PANES_MIN_WIDTH : window.innerWidth;
+  let rightFront: 'thread' | 'members' = 'members';
+  $: bothPanesFit = viewportWidth >= BOTH_PANES_MIN_WIDTH;
+  $: threadShown = !!threadView && (bothPanesFit || !membersOpen || rightFront === 'thread');
+  $: membersShown = !!selectedRoom && membersOpen && (bothPanesFit || !threadView || rightFront === 'members');
 
   function openThreadHere(rootEventId: string): void {
     if (!$selectedRoomId) return;
-    membersOpen = false;
+    rightFront = 'thread';
     void showThread({ room_id: $selectedRoomId, root_event_id: rootEventId });
   }
 
@@ -1513,8 +1291,12 @@
   }
 
   function toggleMembers(): void {
-    membersOpen = !membersOpen;
-    if (membersOpen) void showThread(null);
+    if (membersShown) {
+      membersOpen = false;
+    } else {
+      membersOpen = true;
+      rightFront = 'members';
+    }
     if (membersOpen && $selectedRoomId) {
       void loadMembers($selectedRoomId);
       void loadLevels($selectedRoomId);
@@ -1656,9 +1438,7 @@
       ...pickedMentions,
       [roomId]: [...(pickedMentions[roomId] ?? []), { user_id: person.user_id, text: person.name }]
     };
-    await tick();
-    composerEl?.focus();
-    composerEl?.setSelectionRange(composer.length, composer.length);
+    await composerRef?.focusEnd();
   }
 
   async function userAction(userId: string, action: UserAction): Promise<void> {
@@ -1726,8 +1506,17 @@
     return $rooms.find((r) => r.room_id === roomId)?.name ?? roomId;
   }
 
+  function roomStickers(roomId: string): StickerHandlers {
+    return {
+      onSend: (pack, image) => void sendSticker(roomId, pack, image),
+      onClone: (pack, image, x, y) => openCloneImageMenu(pack, image, x, y),
+      onClonePack: (pack, x, y) => openClonePackMenu(pack, x, y),
+      onManage: () => (dialog = 'packs'),
+      roomName
+    };
+  }
+
   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 });
@@ -1747,13 +1536,11 @@
   }
 
   function openCloneImageMenu(pack: ImagePack, image: PackImage, x: number, y: number): void {
-    stickersOpen = false;
     menu = null;
     cloneSource = { kind: 'image', pack, image };
   }
 
   function openClonePackMenu(pack: ImagePack, x: number, y: number): void {
-    stickersOpen = false;
     menu = null;
     cloneSource = { kind: 'pack', pack };
   }
@@ -1936,13 +1723,15 @@
     if (ev.key === 'Escape') {
       if (roomMenuOpen) roomMenuOpen = false;
       else if (dialog) dialog = null;
-      else if (membersOpen && window.innerWidth < 1100) membersOpen = false;
+      else if (membersShown && window.innerWidth < 1100) membersOpen = false;
+      else if (threadShown && window.innerWidth < 1100) void showThread(null);
       else if (sidebarOpen) sidebarOpen = false;
     }
   }
 </script>
 
 <svelte:window
+  bind:innerWidth={viewportWidth}
   on:keydown={onKeydown}
   on:pointerdown={closeRoomMenuOutside}
 />
@@ -1965,10 +1754,12 @@
     in:fade={{ duration: motionDuration(220) }}
     class:nav-folded={$navFolded}
     class:rail-folded={$railFolded && selectedRoom}
-    class:members-open={selectedRoom && (membersOpen || threadView)}
+    class:members-open={membersShown}
+    class:thread-open={threadShown}
     class:resizing
     style:--side-open={`${$sideWidth}px`}
-    style:--members-open={`${threadView ? $threadWidth : $membersWidth}px`}
+    style:--members-open={`${$membersWidth}px`}
+    style:--thread-open={`${$threadWidth}px`}
     style:--msg-gap={`${$messageSpacing}px`}
     style:--msg-line-height={$lineHeight}
   >
@@ -2070,8 +1861,8 @@
         <button
           type="button"
           class="icon-btn"
-          aria-pressed={membersOpen}
-          aria-label={membersOpen ? 'Hide members' : 'Show members'}
+          aria-pressed={membersShown}
+          aria-label={membersShown ? 'Hide members' : 'Show members'}
           title="Members"
           on:click={toggleMembers}
         >
@@ -2691,196 +2482,42 @@
         </div>
 
         {#if selectedRoom.membership === 'Joined'}
-          {#if editing}
-            <div class="reply-bar" role="status">
-              <span class="reply-bar-label">
-                Editing message
-                <span class="reply-bar-text"><EmojiText text={editing.original} /></span>
-              </span>
-              <button type="button" class="icon-btn" aria-label="Cancel edit" title="Cancel edit (Esc)" on:click={cancelEdit}>
-                <span aria-hidden="true">✕</span>
-              </button>
-            </div>
-          {:else if replyingTo && replyingTo.details.kind === 'Ready'}
-            <div class="reply-bar" role="status">
-              <span class="reply-bar-label">
-                Replying to <strong><EmojiText text={people[replyingTo.details.sender.user_id]?.name ?? senderLabel(replyingTo.details.sender)} /></strong>
-                <span class="reply-bar-text"><EmojiText text={contentPreview(replyingTo.details.content)} /></span>
-              </span>
-              <button type="button" class="icon-btn" aria-label="Cancel reply" title="Cancel reply (Esc)" on:click={() => (replyingTo = null)}>
-                <span aria-hidden="true">✕</span>
-              </button>
-            </div>
-          {/if}
-          {#if $selectedRoomId && currentStaged.length > 0}
-            {@const stagedRoom = $selectedRoomId}
-            <ul class="staged" aria-label="Attachments to send">
-              {#each currentStaged as attachment (attachment.id)}
-                <li class="staged-item">
-                  {#if attachment.previewUrl}
-                    <img src={attachment.previewUrl} alt={attachment.file.name || 'Pasted image'} />
-                  {:else}
-                    <span class="staged-name"><EmojiText text={attachment.file.name || 'attachment'} /></span>
-                  {/if}
-                  <button
-                    type="button"
-                    class="icon-btn staged-remove"
-                    aria-label={`Remove ${attachment.file.name || 'attachment'}`}
-                    title="Remove"
-                    on:click={() => unstage(stagedRoom, attachment.id)}
-                  >
-                    <span aria-hidden="true">✕</span>
-                  </button>
-                </li>
-              {/each}
-            </ul>
-          {/if}
-          <form class="composer" class:replying={replyingTo || editing} class:staging={currentStaged.length > 0} on:submit|preventDefault={() => send()}>
-            <label class="visually-hidden" for="composer">Message {selectedRoom.name}</label>
-            <input
-              type="file"
-              multiple
-              bind:this={fileInput}
-              class="visually-hidden"
-              aria-label="Attach a file"
-              on:change={() => void onFileChosen()}
-            />
-            <input
-              type="file"
-              accept="image/*"
-              bind:this={avatarInput}
-              class="visually-hidden"
-              aria-label="Choose a new avatar"
-              on:change={() => void onAvatarChosen()}
-            />
-            <button
-              type="button"
-              class="icon-btn"
-              class:busy={uploadBusy}
-              title={uploadBusy ? `Uploading ${uploadName ?? 'file'}…` : 'Attach an image or file'}
-              aria-label="Attach an image or file"
-              aria-busy={uploadBusy}
-              disabled={!($selectedRoomId && openReady[$selectedRoomId])}
-              on:click={pickFiles}
-            >
-              <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true">
-                <path d="M20 11.5l-8.2 8.2a5 5 0 0 1-7-7L13 4.4a3.3 3.3 0 0 1 4.7 4.7l-8.2 8.2a1.7 1.7 0 0 1-2.4-2.4l7.5-7.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
-            </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="19" height="19" 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}
-            <div class="composer-field" class:composing={composerComposing}>
-              {#if commandQuery !== null && commandCandidates.length > 0}
-                <ul class="mention-finder" role="listbox" aria-label="Commands">
-                  {#each commandCandidates as name, i (name)}
-                    <li
-                      role="option"
-                      aria-selected={i === commandIndex}
-                      class:active={i === commandIndex}
-                      on:pointerdown|preventDefault={() => void pickCommand(name)}
-                      on:pointerenter={() => (commandIndex = i)}
-                    >
-                      <span class="mention-name">/{name}</span>
-                      <span class="mention-id">{COMMAND_USAGE[name]}</span>
-                    </li>
-                  {/each}
-                </ul>
-              {/if}
-              {#if emoteQuery && emoteCandidates.length > 0}
-                <ul class="mention-finder" role="listbox" aria-label="Emotes">
-                  {#each emoteCandidates as candidate, i (candidate.kind + candidate.shortcode)}
-                    <li
-                      role="option"
-                      aria-selected={i === emoteIndex}
-                      class:active={i === emoteIndex}
-                      on:pointerdown|preventDefault={() => void pickEmote(candidate)}
-                      on:pointerenter={() => (emoteIndex = i)}
-                    >
-                      {#if candidate.kind === 'custom'}
-                        <img class="finder-emote" src={mediaUrl(candidate.mxc, 64) ?? ''} alt="" />
-                      {:else}
-                        <span class="finder-emote"><EmojiText text={candidate.emoji} /></span>
-                      {/if}
-                      <span class="mention-name">:{candidate.shortcode}:</span>
-                    </li>
-                  {/each}
-                </ul>
-              {/if}
-              {#if mentionQuery && mentionCandidates.length > 0}
-                <ul class="mention-finder" role="listbox" aria-label="Mention someone">
-                  {#each mentionCandidates as person, i (person.user_id)}
-                    <li
-                      role="option"
-                      aria-selected={i === mentionIndex}
-                      class:active={i === mentionIndex}
-                      on:pointerdown|preventDefault={() => void pickMention(person)}
-                      on:pointerenter={() => (mentionIndex = i)}
-                    >
-                      <MxcAvatar mxc={person.avatar} label={person.name} size={22} />
-                      <span class="mention-name"><EmojiText text={person.name} /></span>
-                      <span class="mention-id">{person.user_id}</span>
-                    </li>
-                  {/each}
-                </ul>
-              {/if}
-            <div class="composer-marks" aria-hidden="true" bind:this={marksEl}>{#each composerMarks as part}{#if part.mark}<mark><ComposerText text={part.text} /></mark>{:else}<ComposerText text={part.text} />{/if}{/each}&#8203;</div>
-            <textarea
-              id="composer"
-              bind:this={composerEl}
-              bind:value={composer}
-              use:syncComposer
-              rows="1"
-              placeholder={`Message ${selectedRoom.name}`}
-              aria-label={`Message ${selectedRoom.name}. Enter to send, Shift Enter for a new line.`}
-              on:keydown={onComposerKey}
-              on:input={() => void onComposerInput()}
-              on:compositionstart={() => (composerComposing = true)}
-              on:compositionend={() => (composerComposing = false)}
-              on:click={updateMentionQuery}
-              on:focus={ensureEmoji}
-              on:keyup={(e) => (e.key.startsWith('Arrow') && e.key !== 'ArrowUp' && e.key !== 'ArrowDown') || e.key === 'Home' || e.key === 'End' ? updateMentionQuery() : undefined}
-              on:blur={() => ((mentionQuery = null), (commandQuery = null), (emoteQuery = null), (composerComposing = false))}
-              on:paste={onComposerPaste}
-              disabled={!($selectedRoomId && openReady[$selectedRoomId])}
-            ></textarea>
-            </div>
-            <button
-              type="submit"
-              class="primary-btn"
-              disabled={(!composer.trim() && currentStaged.length === 0) ||
-                !($selectedRoomId && openReady[$selectedRoomId]) ||
-                (currentStaged.length > 0 && uploadBusy)}
-              title={!($selectedRoomId && openReady[$selectedRoomId]) ? 'Waiting for the room to open' : 'Send message'}
-            >
-              Send
-            </button>
-          </form>
+          <input
+            type="file"
+            accept="image/*"
+            bind:this={avatarInput}
+            class="visually-hidden"
+            aria-label="Choose a new avatar"
+            on:change={() => void onAvatarChosen()}
+          />
+          <Composer
+            bind:this={composerRef}
+            bind:value={composer}
+            inputId="composer"
+            label={`Message ${selectedRoom.name}`}
+            placeholder={`Message ${selectedRoom.name}`}
+            ready={!!($selectedRoomId && openReady[$selectedRoomId])}
+            picked={($selectedRoomId && pickedMentions[$selectedRoomId]) || []}
+            onPick={(mention) => $selectedRoomId && (pickedMentions = { ...pickedMentions, [$selectedRoomId]: [...(pickedMentions[$selectedRoomId] ?? []), mention] })}
+            staged={currentStaged}
+            onStage={stageFiles}
+            onUnstage={(id) => $selectedRoomId && unstage($selectedRoomId, id)}
+            {uploadBusy}
+            {uploadName}
+            editing={editing ? { original: editing.original } : null}
+            onCancelEdit={cancelEdit}
+            {replyingTo}
+            onCancelReply={() => (replyingTo = null)}
+            {people}
+            self={$sessionUser ?? null}
+            emotes={roomEmotes}
+            packs={roomPacks}
+            stickers={$selectedRoomId ? roomStickers($selectedRoomId) : null}
+            commands
+            onSubmit={send}
+            onEditLast={editLastOwn}
+            onMentionStart={() => $selectedRoomId && !$membersByRoom[$selectedRoomId] && void loadMembers($selectedRoomId)}
+          />
         {:else}
           <div class="join-bar">
             <p>You are not a member of this room.</p>
@@ -2895,9 +2532,9 @@
     </main>
 
     {#if selectedRoom}
-      <aside class="members" aria-hidden={!membersOpen && !threadView} aria-label={threadView ? `Thread in ${selectedRoom.name}` : `Members of ${selectedRoom.name}`}>
+      <aside class="thread" aria-hidden={!threadShown} aria-label={`Thread in ${selectedRoom.name}`}>
         <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div class="pane-resize left" title="Drag to resize" on:pointerdown={(e) => startResize(e, threadView ? 'thread' : 'members')} on:dblclick={() => resetWidth(threadView ? 'thread' : 'members')}></div>
+        <div class="pane-resize left" title="Drag to resize" on:pointerdown={(e) => startResize(e, 'thread')} on:dblclick={() => resetWidth('thread')}></div>
         {#if threadView}
           <ThreadPane
             roomId={threadView.room_id}
@@ -2914,54 +2551,58 @@
             onQuickChange={(list) => void changeQuickReactions(list)}
             onUser={(userId, x, y, asMenu) => void openUser(userId, x, y, asMenu)}
             onMore={(ev, x, y) => void openMessageMenu(ev, x, y)}
+            onMentionStart={() => !$membersByRoom[threadView.room_id] && void loadMembers(threadView.room_id)}
             onClose={() => void showThread(null)}
           />
-        {:else}
-          <div class="members-head">
-            <h2>Members</h2>
-            <button type="button" class="icon-btn" aria-label="Close members" on:click={() => (membersOpen = false)}>
-              <span aria-hidden="true">✕</span>
+        {/if}
+      </aside>
+      <aside class="members" aria-hidden={!membersShown} aria-label={`Members of ${selectedRoom.name}`}>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="pane-resize left" title="Drag to resize" on:pointerdown={(e) => startResize(e, 'members')} on:dblclick={() => resetWidth('members')}></div>
+        <div class="members-head">
+          <h2>Members</h2>
+          <button type="button" class="icon-btn" aria-label="Close members" on:click={() => (membersOpen = false)}>
+            <span aria-hidden="true">✕</span>
+          </button>
+        </div>
+        {#if $membersLoading && members.length === 0}
+          <p class="side-note">Loading members…</p>
+        {:else if members.length === 0}
+          <p class="side-note">No members loaded.</p>
+          {#if $selectedRoomId}
+            <button type="button" class="ghost-btn" on:click={() => $selectedRoomId && void loadMembers($selectedRoomId)}>
+              Retry
             </button>
-          </div>
-          {#if $membersLoading && members.length === 0}
-            <p class="side-note">Loading members…</p>
-          {:else if members.length === 0}
-            <p class="side-note">No members loaded.</p>
-            {#if $selectedRoomId}
-              <button type="button" class="ghost-btn" on:click={() => $selectedRoomId && void loadMembers($selectedRoomId)}>
-                Retry
-              </button>
-            {/if}
-          {:else}
-            <ul class="member-list">
-              {#each memberGroups as group (group.label)}
-                <li class="member-group">
-                  <h3 class="member-group-label">{group.label}<span>{group.members.length}</span></h3>
-                  <ul class="member-group-list">
-                    {#each group.members as member (member.user_id)}
-                      <li>
-                        <button
-                          type="button"
-                          class="member"
-                          on:click={(ev) => {
-                            const rect = ev.currentTarget.getBoundingClientRect();
-                            void openUser(member.user_id, rect.left - 308, rect.top, false);
-                          }}
-                          on:contextmenu|preventDefault={(ev) => void openUser(member.user_id, ev.clientX, ev.clientY, true)}
-                        >
-                          <MxcAvatar mxc={member.avatar} label={member.display_name || member.name || member.user_id} seed={member.user_id} size={28} />
-                          <span class="member-names">
-                            <span class="member-name"><EmojiText text={member.display_name || member.name} /></span>
-                            <span class="member-id">{member.user_id}</span>
-                          </span>
-                        </button>
-                      </li>
-                    {/each}
-                  </ul>
-                </li>
-              {/each}
-            </ul>
           {/if}
+        {:else}
+          <ul class="member-list">
+            {#each memberGroups as group (group.label)}
+              <li class="member-group">
+                <h3 class="member-group-label">{group.label}<span>{group.members.length}</span></h3>
+                <ul class="member-group-list">
+                  {#each group.members as member (member.user_id)}
+                    <li>
+                      <button
+                        type="button"
+                        class="member"
+                        on:click={(ev) => {
+                          const rect = ev.currentTarget.getBoundingClientRect();
+                          void openUser(member.user_id, rect.left - 308, rect.top, false);
+                        }}
+                        on:contextmenu|preventDefault={(ev) => void openUser(member.user_id, ev.clientX, ev.clientY, true)}
+                      >
+                        <MxcAvatar mxc={member.avatar} label={member.display_name || member.name || member.user_id} seed={member.user_id} size={28} />
+                        <span class="member-names">
+                          <span class="member-name"><EmojiText text={member.display_name || member.name} /></span>
+                          <span class="member-id">{member.user_id}</span>
+                        </span>
+                      </button>
+                    </li>
+                  {/each}
+                </ul>
+              </li>
+            {/each}
+          </ul>
         {/if}
       </aside>
     {/if}

Modified file: web/src/app.css+26 additions−12 deletions@@ -197,9 +197,10 @@ input, textarea { font: inherit; }
   --rail-w: 60px;
   --side-w: var(--side-open, 260px);
   --members-w: 0px;
+  --thread-w: 0px;
   --pane-ease: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
   display: grid;
-  grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr) var(--members-w);
+  grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr) var(--thread-w) var(--members-w);
   grid-template-rows: auto minmax(0, 1fr) auto;
   height: 100dvh;
   overflow: hidden;
@@ -208,6 +209,7 @@ input, textarea { font: inherit; }
 .app.rail-folded { --rail-w: 0px; }
 .app.nav-folded { --side-w: 0px; }
 .app.members-open { --members-w: var(--members-open, 240px); }
+.app.thread-open { --thread-w: var(--thread-open, 400px); }
 .app.resizing { transition: none; cursor: col-resize; user-select: none; }
 .pane-resize {
   position: absolute;
@@ -227,17 +229,19 @@ input, textarea { font: inherit; }
 .app > .sidebar { grid-column: 2; grid-row: 2; }
 .app > .account { grid-column: 1; grid-row: 3; }
 .app > .chat { grid-column: 3; grid-row: 2 / 4; }
-.app > .members { grid-column: 4; grid-row: 2 / 4; }
-.app > .rail, .app > .sidebar, .app > .members {
+.app > .thread { grid-column: 4; grid-row: 2 / 4; }
+.app > .members { grid-column: 5; grid-row: 2 / 4; }
+.app > .rail, .app > .sidebar, .app > .members, .app > .thread {
   min-width: 0;
   transition: visibility 0s linear 0s;
 }
 .app > .rail { overflow-x: hidden; }
-.app > .sidebar, .app > .members { overflow: hidden; }
+.app > .sidebar, .app > .members, .app > .thread { overflow: hidden; }
 .app > .sidebar > * { min-width: var(--side-open, 260px); }
 .app > .members > * { min-width: var(--members-open, 240px); }
-.app > .sidebar, .app > .members { position: relative; }
-.app.rail-folded > .rail, .app.nav-folded > .sidebar, .app:not(.members-open) > .members {
+.app > .thread > * { min-width: var(--thread-open, 400px); }
+.app > .sidebar, .app > .members, .app > .thread { position: relative; }
+.app.rail-folded > .rail, .app.nav-folded > .sidebar, .app:not(.members-open) > .members, .app:not(.thread-open) > .thread {
   visibility: hidden;
   transition: visibility 0s linear 0.22s;
 }
@@ -865,6 +869,14 @@ input, textarea { font: inherit; }
 .join-bar p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }
 
 /* ——— Members ——— */
+.thread {
+  background: var(--panel);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
 .members {
   background: var(--panel);
   border-left: 1px solid var(--border);
@@ -953,9 +965,9 @@ input, textarea { font: inherit; }
   .account { padding-top: 10px; padding-bottom: 12px; }
   .pane-resize { display: none; }
   .app > .sidebar { transition: transform var(--pane-ease); }
-  .app > .sidebar > *, .app > .members > * { min-width: 0; }
-  .app > .members { transition: transform var(--pane-ease), visibility 0s linear 0s; }
-  .app:not(.members-open) > .members {
+  .app > .sidebar > *, .app > .members > *, .app > .thread > * { min-width: 0; }
+  .app > .members, .app > .thread { transition: transform var(--pane-ease), visibility 0s linear 0s; }
+  .app:not(.members-open) > .members, .app:not(.thread-open) > .thread {
     transform: translateX(100%);
     transition: transform var(--pane-ease), visibility 0s linear 0.22s;
   }
@@ -978,13 +990,14 @@ input, textarea { font: inherit; }
     z-index: 30;
     cursor: pointer;
   }
-  .app > .members {
+  .app > .members, .app > .thread {
     position: fixed;
     top: 0; bottom: 0; right: 0;
     width: min(300px, 85vw);
     z-index: 40;
     box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
   }
+  .app > .thread { width: min(440px, 92vw); }
   .only-mobile { display: inline-block; }
   .only-desktop { display: none; }
   .head-actions .ghost-btn { display: none; }
@@ -1025,7 +1038,7 @@ input, textarea { font: inherit; }
   .app.nav-folded > .sidebar { visibility: hidden !important; transition: visibility 0s linear 0.22s; }
   .app.nav-folded > .rail { grid-row: 2 / 4; }
   .scrim { display: none; }
-  .app > .members {
+  .app > .members, .app > .thread {
     position: relative;
     top: auto;
     bottom: auto;
@@ -1037,7 +1050,8 @@ input, textarea { font: inherit; }
     transition: visibility 0s linear 0.22s;
   }
   .app > .members > * { min-width: var(--members-open, 240px); }
-  .app:not(.members-open) > .members {
+  .app > .thread > * { min-width: var(--thread-open, 400px); }
+  .app:not(.members-open) > .members, .app:not(.thread-open) > .thread {
     visibility: hidden;
     transition: visibility 0s linear 0.22s;
   }

Added file: web/src/lib/Composer.svelte+439 additions@@ -0,0 +1,439 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import ComposerText from './ComposerText.svelte';
+  import EmojiText from './EmojiText.svelte';
+  import MxcAvatar from './MxcAvatar.svelte';
+  import StickerPicker from './StickerPicker.svelte';
+  import { mediaUrl } from './api';
+  import { COMMAND_USAGE, commandQueryAt, matchCommands, type CommandName } from './commands';
+  import { markMentions } from './composer-marks';
+  import { loadEmoji, type EmojiEntry } from './emoji';
+  import { completeShortcode, emoteQueryAt, rankEmotes, resolveEmotes, type Emote, type EmoteCandidate, type EmoteQuery } from './emotes';
+  import { insideOpenFence } from './markdown';
+  import { mentionQueryAt, rankPeople, type Mention, type MentionQuery } from './mentions';
+  import type { StagedAttachment, StickerHandlers } from './staging';
+  import { contentPreview, senderLabel } from './types';
+  import type { ImagePack, PackImage, Person, ReplyReference } from './types';
+
+  export let value: string;
+  export let inputId: string;
+  export let label: string;
+  export let placeholder: string;
+  export let ready = true;
+  export let readyTitle = 'Send message';
+  export let picked: Mention[] = [];
+  export let onPick: (mention: Mention) => void;
+  export let staged: StagedAttachment[] = [];
+  export let onStage: (files: File[]) => void;
+  export let onUnstage: (id: number) => void;
+  export let uploadBusy = false;
+  export let uploadName: string | null = null;
+  export let editing: { original: string } | null = null;
+  export let onCancelEdit: () => void = () => {};
+  export let replyingTo: ReplyReference | null = null;
+  export let onCancelReply: () => void = () => {};
+  export let people: Record<string, Person> = {};
+  export let self: string | null = null;
+  export let emotes: Emote[] = [];
+  export let packs: ImagePack[] = [];
+  export let stickers: StickerHandlers | null = null;
+  export let commands = false;
+  export let onSubmit: () => void;
+  export let onEditLast: () => boolean = () => false;
+  export let onMentionStart: () => void = () => {};
+
+  let field: HTMLTextAreaElement | null = null;
+  let marksEl: HTMLDivElement | null = null;
+  let fileInput: HTMLInputElement | null = null;
+  let composing = false;
+  let stickersOpen = false;
+
+  let mentionQuery: MentionQuery | null = null;
+  let mentionIndex = 0;
+  $: mentionCandidates = mentionQuery ? rankPeople(Object.values(people), mentionQuery.query, self) : [];
+  $: if (mentionIndex >= mentionCandidates.length) mentionIndex = 0;
+
+  let commandQuery: string | null = null;
+  let commandIndex = 0;
+  $: commandCandidates = commands && commandQuery !== null ? matchCommands(commandQuery) : [];
+  $: if (commandIndex >= commandCandidates.length) commandIndex = 0;
+
+  let emoteQuery: EmoteQuery | null = null;
+  let emoteIndex = 0;
+  let emojiList: EmojiEntry[] = [];
+  $: emoteCandidates = emoteQuery ? rankEmotes(emoteQuery.query, emotes, emojiList) : [];
+  $: if (emoteIndex >= emoteCandidates.length) emoteIndex = 0;
+
+  $: marks = markMentions(value, picked, resolveEmotes(value, emotes).map((e) => `:${e.shortcode}:`));
+
+  export function focus(): void {
+    field?.focus();
+  }
+
+  export async function focusEnd(): Promise<void> {
+    await tick();
+    field?.focus();
+    field?.setSelectionRange(value.length, value.length);
+  }
+
+  export function closeFinders(): void {
+    mentionQuery = null;
+    commandQuery = null;
+    emoteQuery = null;
+    stickersOpen = false;
+  }
+
+  function syncMarks(node: HTMLTextAreaElement) {
+    const sync = () => {
+      if (!marksEl) return;
+      marksEl.style.width = `${node.clientWidth}px`;
+      marksEl.scrollTop = node.scrollTop;
+      marksEl.scrollLeft = node.scrollLeft;
+    };
+    const observer = new ResizeObserver(sync);
+    observer.observe(node);
+    node.addEventListener('scroll', sync);
+    return {
+      destroy: () => {
+        observer.disconnect();
+        node.removeEventListener('scroll', sync);
+      }
+    };
+  }
+
+  function ensureEmoji(): void {
+    if (emojiList.length) return;
+    loadEmoji()
+      .then((groups) => (emojiList = groups.flatMap((g) => g.emojis)))
+      .catch(() => undefined);
+  }
+
+  function caret(): number {
+    return field?.selectionStart ?? value.length;
+  }
+
+  async function placeCaret(at: number): Promise<void> {
+    await tick();
+    field?.focus();
+    field?.setSelectionRange(at, at);
+  }
+
+  function updateQueries(): void {
+    if (!field) return;
+    const at = caret();
+    const nextEmote = emoteQueryAt(field.value, at);
+    if (nextEmote?.start !== emoteQuery?.start) emoteIndex = 0;
+    emoteQuery = nextEmote;
+    const nextCommand = commands ? commandQueryAt(field.value, at) : null;
+    if (nextCommand !== commandQuery) commandIndex = 0;
+    commandQuery = nextCommand;
+    const nextMention = mentionQueryAt(field.value, at);
+    if (nextMention && !mentionQuery) onMentionStart();
+    if (nextMention?.start !== mentionQuery?.start) mentionIndex = 0;
+    mentionQuery = nextMention;
+  }
+
+  async function onInput(): Promise<void> {
+    if (field && value.includes(':')) {
+      ensureEmoji();
+      const done = completeShortcode(field.value, caret(), emojiList);
+      if (done) {
+        value = done.text;
+        await placeCaret(done.caret);
+      }
+    }
+    updateQueries();
+  }
+
+  async function pickCommand(name: CommandName): Promise<void> {
+    const rest = value.slice(caret()).replace(/^\S*/, '');
+    value = `/${name}${rest.startsWith(' ') ? rest : ` ${rest}`}`;
+    commandQuery = null;
+    await placeCaret(name.length + 2);
+  }
+
+  async function pickEmote(candidate: EmoteCandidate): Promise<void> {
+    if (!emoteQuery) return;
+    const inserted = candidate.kind === 'emoji' ? candidate.emoji : `:${candidate.shortcode}: `;
+    const start = emoteQuery.start;
+    value = value.slice(0, start) + inserted + value.slice(caret());
+    emoteQuery = null;
+    await placeCaret(start + inserted.length);
+  }
+
+  async function pickMention(person: Person): Promise<void> {
+    if (!mentionQuery) return;
+    const inserted = `${person.name} `;
+    const start = mentionQuery.start;
+    value = value.slice(0, start) + inserted + value.slice(caret());
+    onPick({ user_id: person.user_id, text: person.name });
+    mentionQuery = null;
+    await placeCaret(start + inserted.length);
+  }
+
+  function step<T>(list: T[], index: number, key: string): number {
+    return (index + (key === 'ArrowDown' ? 1 : -1) + list.length) % list.length;
+  }
+
+  function onKey(ev: KeyboardEvent): void {
+    if (ev.isComposing || composing) return;
+    if (emoteQuery && emoteCandidates.length > 0) {
+      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        emoteIndex = step(emoteCandidates, emoteIndex, ev.key);
+        return;
+      }
+      if ((ev.key === 'Enter' && !ev.shiftKey) || ev.key === 'Tab') {
+        ev.preventDefault();
+        void pickEmote(emoteCandidates[emoteIndex]);
+        return;
+      }
+      if (ev.key === 'Escape') {
+        ev.stopPropagation();
+        emoteQuery = null;
+        return;
+      }
+    }
+    if (commandQuery !== null && commandCandidates.length > 0) {
+      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        commandIndex = step(commandCandidates, commandIndex, ev.key);
+        return;
+      }
+      const exact = commandCandidates.length === 1 && commandCandidates[0] === commandQuery;
+      if (ev.key === 'Tab' || (ev.key === 'Enter' && !ev.shiftKey && !exact)) {
+        ev.preventDefault();
+        void pickCommand(commandCandidates[commandIndex]);
+        return;
+      }
+      if (ev.key === 'Escape') {
+        ev.stopPropagation();
+        commandQuery = null;
+        return;
+      }
+    }
+    if (mentionQuery && mentionCandidates.length > 0) {
+      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        mentionIndex = step(mentionCandidates, mentionIndex, ev.key);
+        return;
+      }
+      if ((ev.key === 'Enter' && !ev.shiftKey) || ev.key === 'Tab') {
+        ev.preventDefault();
+        void pickMention(mentionCandidates[mentionIndex]);
+        return;
+      }
+      if (ev.key === 'Escape') {
+        ev.stopPropagation();
+        mentionQuery = null;
+        return;
+      }
+    }
+    if (ev.key === 'Enter' && !ev.shiftKey && !insideOpenFence(value, caret())) {
+      ev.preventDefault();
+      onSubmit();
+    } else if (ev.key === 'Escape' && editing) {
+      ev.stopPropagation();
+      onCancelEdit();
+    } else if (ev.key === 'Escape' && replyingTo) {
+      ev.stopPropagation();
+      onCancelReply();
+    } else if (ev.key === 'ArrowUp' && !value && !editing && onEditLast()) {
+      ev.preventDefault();
+    }
+  }
+
+  function onPaste(ev: ClipboardEvent): void {
+    const data = ev.clipboardData;
+    // Office apps put a rendered image next to the copied text, so only take the image when there is no plain text.
+    if (!data || data.types.includes('text/plain')) return;
+    const images = Array.from(data.files).filter((f) => f.type.startsWith('image/'));
+    if (images.length === 0) return;
+    ev.preventDefault();
+    onStage(images);
+  }
+
+  function onFileChosen(): void {
+    onStage(Array.from(fileInput?.files ?? []));
+    if (fileInput) fileInput.value = '';
+  }
+
+  function onCaretKey(e: KeyboardEvent): void {
+    if ((e.key.startsWith('Arrow') && e.key !== 'ArrowUp' && e.key !== 'ArrowDown') || e.key === 'Home' || e.key === 'End') updateQueries();
+  }
+</script>
+
+{#if editing}
+  <div class="reply-bar" role="status">
+    <span class="reply-bar-label">
+      Editing message
+      <span class="reply-bar-text"><EmojiText text={editing.original} /></span>
+    </span>
+    <button type="button" class="icon-btn" aria-label="Cancel edit" title="Cancel edit (Esc)" on:click={onCancelEdit}>
+      <span aria-hidden="true">✕</span>
+    </button>
+  </div>
+{:else if replyingTo && replyingTo.details.kind === 'Ready'}
+  <div class="reply-bar" role="status">
+    <span class="reply-bar-label">
+      Replying to <strong><EmojiText text={people[replyingTo.details.sender.user_id]?.name ?? senderLabel(replyingTo.details.sender)} /></strong>
+      <span class="reply-bar-text"><EmojiText text={contentPreview(replyingTo.details.content)} /></span>
+    </span>
+    <button type="button" class="icon-btn" aria-label="Cancel reply" title="Cancel reply (Esc)" on:click={onCancelReply}>
+      <span aria-hidden="true">✕</span>
+    </button>
+  </div>
+{/if}
+{#if staged.length > 0}
+  <ul class="staged" aria-label="Attachments to send">
+    {#each staged as attachment (attachment.id)}
+      <li class="staged-item">
+        {#if attachment.previewUrl}
+          <img src={attachment.previewUrl} alt={attachment.file.name || 'Pasted image'} />
+        {:else}
+          <span class="staged-name"><EmojiText text={attachment.file.name || 'attachment'} /></span>
+        {/if}
+        <button
+          type="button"
+          class="icon-btn staged-remove"
+          aria-label={`Remove ${attachment.file.name || 'attachment'}`}
+          title="Remove"
+          on:click={() => onUnstage(attachment.id)}
+        >
+          <span aria-hidden="true">✕</span>
+        </button>
+      </li>
+    {/each}
+  </ul>
+{/if}
+<form class="composer" class:replying={replyingTo || editing} class:staging={staged.length > 0} on:submit|preventDefault={onSubmit}>
+  <label class="visually-hidden" for={inputId}>{label}</label>
+  <input type="file" multiple bind:this={fileInput} class="visually-hidden" aria-label="Attach a file" on:change={onFileChosen} />
+  <button
+    type="button"
+    class="icon-btn"
+    class:busy={uploadBusy}
+    title={uploadBusy ? `Uploading ${uploadName ?? 'file'}…` : 'Attach an image or file'}
+    aria-label="Attach an image or file"
+    aria-busy={uploadBusy}
+    disabled={!ready}
+    on:click={() => fileInput?.click()}
+  >
+    <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true">
+      <path d="M20 11.5l-8.2 8.2a5 5 0 0 1-7-7L13 4.4a3.3 3.3 0 0 1 4.7 4.7l-8.2 8.2a1.7 1.7 0 0 1-2.4-2.4l7.5-7.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  </button>
+  {#if stickers}
+    {@const handlers = stickers}
+    <button
+      type="button"
+      class="icon-btn sticker-btn"
+      title="Stickers"
+      aria-label="Stickers"
+      aria-expanded={stickersOpen}
+      disabled={!ready}
+      on:click={() => (stickersOpen = !stickersOpen)}
+    >
+      <svg viewBox="0 0 24 24" width="19" height="19" 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}
+      <div class="sticker-pop">
+        <StickerPicker
+          {packs}
+          roomName={handlers.roomName}
+          onSend={(pack, image) => ((stickersOpen = false), handlers.onSend(pack, image))}
+          onClone={(pack, image, x, y) => ((stickersOpen = false), handlers.onClone(pack, image, x, y))}
+          onClonePack={(pack, x, y) => ((stickersOpen = false), handlers.onClonePack(pack, x, y))}
+          onManage={() => ((stickersOpen = false), handlers.onManage())}
+          onClose={() => (stickersOpen = false)}
+        />
+      </div>
+    {/if}
+  {/if}
+  <div class="composer-field" class:composing>
+    {#if commandQuery !== null && commandCandidates.length > 0}
+      <ul class="mention-finder" role="listbox" aria-label="Commands">
+        {#each commandCandidates as name, i (name)}
+          <li
+            role="option"
+            aria-selected={i === commandIndex}
+            class:active={i === commandIndex}
+            on:pointerdown|preventDefault={() => void pickCommand(name)}
+            on:pointerenter={() => (commandIndex = i)}
+          >
+            <span class="mention-name">/{name}</span>
+            <span class="mention-id">{COMMAND_USAGE[name]}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if emoteQuery && emoteCandidates.length > 0}
+      <ul class="mention-finder" role="listbox" aria-label="Emotes">
+        {#each emoteCandidates as candidate, i (candidate.kind + candidate.shortcode)}
+          <li
+            role="option"
+            aria-selected={i === emoteIndex}
+            class:active={i === emoteIndex}
+            on:pointerdown|preventDefault={() => void pickEmote(candidate)}
+            on:pointerenter={() => (emoteIndex = i)}
+          >
+            {#if candidate.kind === 'custom'}
+              <img class="finder-emote" src={mediaUrl(candidate.mxc, 64) ?? ''} alt="" />
+            {:else}
+              <span class="finder-emote"><EmojiText text={candidate.emoji} /></span>
+            {/if}
+            <span class="mention-name">:{candidate.shortcode}:</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if mentionQuery && mentionCandidates.length > 0}
+      <ul class="mention-finder" role="listbox" aria-label="Mention someone">
+        {#each mentionCandidates as person, i (person.user_id)}
+          <li
+            role="option"
+            aria-selected={i === mentionIndex}
+            class:active={i === mentionIndex}
+            on:pointerdown|preventDefault={() => void pickMention(person)}
+            on:pointerenter={() => (mentionIndex = i)}
+          >
+            <MxcAvatar mxc={person.avatar} label={person.name} size={22} />
+            <span class="mention-name"><EmojiText text={person.name} /></span>
+            <span class="mention-id">{person.user_id}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <div class="composer-marks" aria-hidden="true" bind:this={marksEl}>{#each marks as part}{#if part.mark}<mark><ComposerText text={part.text} /></mark>{:else}<ComposerText text={part.text} />{/if}{/each}&#8203;</div>
+    <textarea
+      id={inputId}
+      bind:this={field}
+      bind:value
+      use:syncMarks
+      rows="1"
+      {placeholder}
+      aria-label={`${label}. Enter to send, Shift Enter for a new line.`}
+      on:keydown={onKey}
+      on:input={() => void onInput()}
+      on:compositionstart={() => (composing = true)}
+      on:compositionend={() => (composing = false)}
+      on:click={updateQueries}
+      on:focus={ensureEmoji}
+      on:keyup={onCaretKey}
+      on:blur={() => ((mentionQuery = null), (commandQuery = null), (emoteQuery = null), (composing = false))}
+      on:paste={onPaste}
+      disabled={!ready}
+    ></textarea>
+  </div>
+  <button
+    type="submit"
+    class="primary-btn"
+    disabled={(!value.trim() && staged.length === 0) || !ready || (staged.length > 0 && uploadBusy)}
+    title={ready ? readyTitle : 'Waiting for the room to open'}
+  >
+    {editing ? 'Save' : 'Send'}
+  </button>
+</form>

Modified file: web/src/lib/ThreadPane.svelte+162 additions−71 deletions@@ -1,8 +1,35 @@
+<script lang="ts" context="module">
+  import { sessionUser } from './store';
+  import { releaseStaged as release } from './staging';
+  import type { Mention } from './mentions';
+  import type { StagedAttachment } from './staging';
+
+  interface ThreadDraft {
+    text: string;
+    picked: Mention[];
+    staged: StagedAttachment[];
+  }
+
+  const drafts = new Map<string, ThreadDraft>();
+  let draftAccount: string | null | undefined;
+  sessionUser.subscribe((user) => {
+    if (user === draftAccount) return;
+    draftAccount = user;
+    for (const saved of drafts.values()) release(saved.staged);
+    drafts.clear();
+  });
+</script>
+
 <script lang="ts">
   import { tick } from 'svelte';
   import MessageRow from './MessageRow.svelte';
   import EmojiText from './EmojiText.svelte';
-  import { editMessage, markRead, paginateRoom, reactToMessage, sendMessage } from './api';
+  import Composer from './Composer.svelte';
+  import { editMessage, markRead, paginateRoom, reactToMessage, sendMessage, uploadAttachment } from './api';
+  import { parseCommand, unescapeCommand } from './commands';
+  import { customEmotes, resolveEmotes } from './emotes';
+  import { mentionsFromHtml, resolveMentions } from './mentions';
+  import { releaseStaged, stageFiles } from './staging';
   import { pushBanner, threadKey, threadTimelines, timelines } from './store';
   import { pinnedThreads, togglePinnedThread } from './threads';
   import type { ImagePack, LinkPreview, Person, QuickReaction, ReplyReference, TimelineEvent, TimelineItem } from './types';
@@ -21,16 +48,21 @@
   export let onQuickChange: (list: QuickReaction[]) => void = () => {};
   export let onUser: ((userId: string, x: number, y: number, menu: boolean) => void) | null = null;
   export let onMore: ((event: TimelineEvent, x: number, y: number) => void) | null = null;
+  export let onMentionStart: () => void = () => {};
   export let onClose: () => void;
 
   const GROUP_GAP_MS = 5 * 60 * 1000;
 
   let list: HTMLDivElement | null = null;
-  let composerEl: HTMLTextAreaElement | null = null;
+  let composerRef: Composer | null = null;
   let draft = '';
+  let picked: Mention[] = [];
+  let staged: StagedAttachment[] = [];
   let replyingTo: ReplyReference | null = null;
-  let editing: { eventId: string } | null = null;
+  let editing: { eventId: string; original: string; stash: string } | null = null;
   let sending = false;
+  let uploadName: string | null = null;
+  let loadedKey = '';
   let paginating = false;
   let reacting = false;
   let stickToBottom = true;
@@ -40,9 +72,10 @@
   $: items = $threadTimelines[key] ?? [];
   $: roomRoot = ($timelines[roomId] ?? []).find((item) => item.kind === 'event' && item.event.event_id === rootEventId) ?? null;
   $: events = threadEvents(items, roomRoot);
-  $: hasStart = items.some((item) => item.kind === 'start');
+  $: hasStart = items.some((item) => item.kind === 'start' || (item.kind === 'event' && item.event.event_id === rootEventId));
   $: pinned = ($pinnedThreads[roomId] ?? []).includes(rootEventId);
-  $: if (key) reset();
+  $: emotes = customEmotes(packs);
+  $: switchTo(key);
   $: void follow(events);
 
   function threadEvents(list: TimelineItem[], root: TimelineItem | null): TimelineEvent[] {
@@ -58,8 +91,14 @@
     return prev.sender.user_id !== cur.sender.user_id || Math.abs(cur.timestamp_ms - prev.timestamp_ms) > GROUP_GAP_MS;
   }
 
-  function reset(): void {
-    draft = '';
+  function switchTo(next: string): void {
+    if (next === loadedKey) return;
+    if (loadedKey) drafts.set(loadedKey, { text: editing ? editing.stash : draft, picked, staged });
+    loadedKey = next;
+    const saved = drafts.get(next);
+    draft = saved?.text ?? '';
+    picked = saved?.picked ?? [];
+    staged = saved?.staged ?? [];
     replyingTo = null;
     editing = null;
     stickToBottom = true;
@@ -113,64 +152,115 @@
   }
 
   function startReply(target: ReplyReference): void {
-    editing = null;
+    if (editing) cancelEdit();
     replyingTo = target;
-    composerEl?.focus();
+    composerRef?.focus();
   }
 
   function startEdit(eventId: string, body: string): void {
+    const stash = editing ? editing.stash : draft;
     replyingTo = null;
-    editing = { eventId };
+    editing = { eventId, original: body, stash };
+    const target = events.find((event) => event.event_id === eventId);
+    if (target?.content.kind === 'Message') picked = [...picked, ...mentionsFromHtml(target.content.message.formatted_body)];
     draft = body;
-    void tick().then(() => composerEl?.focus());
+    void composerRef?.focusEnd();
+  }
+
+  function cancelEdit(): void {
+    if (!editing) return;
+    draft = editing.stash;
+    editing = null;
+    composerRef?.focus();
+  }
+
+  function editLastOwn(): boolean {
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+      const event = events[i];
+      if (!event.own) continue;
+      if (!event.editable || !event.event_id || event.content.kind !== 'Message' || event.content.message.kind !== 'Text') return false;
+      startEdit(event.event_id, event.content.message.body);
+      return true;
+    }
+    return false;
+  }
+
+  function stage(files: File[]): void {
+    const accepted = stageFiles(files, pushBanner);
+    if (accepted.length) staged = [...staged, ...accepted];
+    composerRef?.focus();
+  }
+
+  function unstage(id: number): void {
+    releaseStaged(staged.filter((a) => a.id === id));
+    staged = staged.filter((a) => a.id !== id);
   }
 
   async function submit(): Promise<void> {
+    if (sending) return;
     const body = draft.trim();
-    if (!body || sending) return;
-    sending = true;
+    if (editing) {
+      const { eventId, original } = editing;
+      cancelEdit();
+      draft = '';
+      if (!body || body === original.trim()) return;
+      editMessage(roomId, eventId, body, resolveMentions(body, picked), resolveEmotes(body, emotes), rootEventId).catch((e) =>
+        pushBanner(e instanceof Error ? e.message : 'Edit failed')
+      );
+      picked = [];
+      return;
+    }
+    const files = staged;
+    if (!body && files.length === 0) return;
+    const command = parseCommand(body);
+    if (command && command.name !== 'me' && command.name !== 'notice') {
+      pushBanner(`/${command.name} only works in the room composer`);
+      return;
+    }
+    const text = command ? command.args : unescapeCommand(body);
+    if (command && (!text || files.length)) {
+      pushBanner(`/${command.name} needs something to say and no attachments`);
+      return;
+    }
     const reply = replyingTo;
-    const edit = editing;
+    const mentions = resolveMentions(text, picked);
+    const used = resolveEmotes(text, emotes);
+    draft = '';
+    picked = [];
+    staged = [];
+    replyingTo = null;
+    stickToBottom = true;
+    sending = true;
     try {
-      if (edit) await editMessage(roomId, edit.eventId, body, [], [], rootEventId);
-      else await sendMessage(roomId, body, reply?.event_id ?? null, [], 'text', [], rootEventId);
-      draft = '';
-      replyingTo = null;
-      editing = null;
-      stickToBottom = true;
+      if (files.length === 0) {
+        await sendMessage(roomId, text, reply?.event_id ?? null, mentions, command ? (command.name === 'me' ? 'emote' : 'notice') : 'text', used, rootEventId);
+      } else {
+        let first = true;
+        for (const attachment of files) {
+          uploadName = attachment.file.name || 'attachment';
+          try {
+            if (first) await uploadAttachment(roomId, attachment.file, text || null, reply?.event_id ?? null, mentions, used, rootEventId);
+            else await uploadAttachment(roomId, attachment.file, null, null, [], [], rootEventId);
+            first = false;
+          } catch (e) {
+            pushBanner(e instanceof Error ? e.message : 'Upload failed');
+          }
+        }
+      }
     } catch (e) {
       pushBanner(e instanceof Error ? e.message : 'Sending to the thread failed');
     } finally {
+      releaseStaged(files);
+      uploadName = null;
       sending = false;
     }
   }
-
-  function onKey(e: KeyboardEvent): void {
-    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
-      e.preventDefault();
-      void submit();
-    } else if (e.key === 'Escape' && (editing || replyingTo)) {
-      e.preventDefault();
-      if (editing) draft = '';
-      editing = null;
-      replyingTo = null;
-    }
-  }
-
-  function grow(node: HTMLTextAreaElement, _value: string) {
-    const fit = () => {
-      node.style.height = 'auto';
-      node.style.height = `${Math.min(node.scrollHeight, 200)}px`;
-    };
-    fit();
-    return { update: fit };
-  }
 </script>
 
 <svelte:window on:focus={sendReceipt} />
 <svelte:document on:visibilitychange={sendReceipt} />
 
-<aside class="thread-pane" aria-label={`Thread in ${roomName}`}>
+<div class="thread-pane">
   <header class="thread-head">
     <h2>Thread</h2>
     <span class="thread-room"><EmojiText text={roomName} /></span>
@@ -226,33 +316,38 @@
     {/each}
   </div>
   {#if joined}
-    <form class="thread-composer" on:submit|preventDefault={() => void submit()}>
-      {#if replyingTo || editing}
-        <div class="thread-context">
-          <span>{editing ? 'Editing' : 'Replying'}</span>
-          <button type="button" class="icon-btn" aria-label="Cancel" on:click={() => { if (editing) draft = ''; editing = null; replyingTo = null; }}>
-            <span aria-hidden="true">✕</span>
-          </button>
-        </div>
-      {/if}
-      <div class="thread-input">
-        <textarea
-          bind:this={composerEl}
-          bind:value={draft}
-          use:grow={draft}
-          rows="1"
-          placeholder="Reply in thread"
-          aria-label="Reply in thread"
-          on:keydown={onKey}
-        ></textarea>
-        <button type="submit" class="primary-btn" disabled={sending || !draft.trim()}>{editing ? 'Save' : 'Send'}</button>
-      </div>
-    </form>
+    <div class="thread-composer">
+      <Composer
+        bind:this={composerRef}
+        bind:value={draft}
+        inputId={`thread-composer-${rootEventId}`}
+        label="Reply in thread"
+        placeholder="Reply in thread"
+        {picked}
+        onPick={(mention) => (picked = [...picked, mention])}
+        {staged}
+        onStage={stage}
+        onUnstage={unstage}
+        uploadBusy={uploadName !== null}
+        {uploadName}
+        editing={editing ? { original: editing.original } : null}
+        onCancelEdit={cancelEdit}
+        {replyingTo}
+        onCancelReply={() => (replyingTo = null)}
+        {people}
+        {self}
+        {emotes}
+        {packs}
+        onSubmit={() => void submit()}
+        onEditLast={editLastOwn}
+        {onMentionStart}
+      />
+    </div>
   {/if}
-</aside>
+</div>
 
 <style>
-  .thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--bg-elev, var(--bg)); border-left: 1px solid var(--border); animation: pop-in var(--pop); }
+  .thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; animation: pop-in var(--pop); }
   .thread-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
   .thread-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
   .thread-room { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -261,9 +356,5 @@
   .thread-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; }
   .older { display: block; margin: 0 auto 8px; }
   .root { padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
-  .thread-composer { border-top: 1px solid var(--border); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
-  .thread-context { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
-  .thread-input { display: flex; align-items: flex-end; gap: 8px; }
-  .thread-input textarea { flex: 1; min-width: 0; resize: none; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); padding: 7px 9px; line-height: 1.4; }
-  .thread-input textarea:focus { outline: none; border-color: var(--accent); }
+  .thread-composer { flex: none; }
 </style>

Modified file: web/src/lib/api.ts+4 additions−2 deletions@@ -133,13 +133,15 @@ export function uploadAttachment(
   caption: string | null = null,
   reply_to: string | null = null,
   mentions: Mention[] = [],
-  emotes: Emote[] = []
+  emotes: Emote[] = [],
+  thread_root: string | null = null
 ): Promise<void> {
   return transport.uploadAttachment(room_id, file, {
     caption,
     formatted_caption: caption ? formatBody(caption, mentions, true, emotes) : null,
     reply_to,
-    mentions: mentionedUserIds(mentions)
+    mentions: mentionedUserIds(mentions),
+    thread_root
   });
 }
 

Added file: web/src/lib/staging.ts+36 additions@@ -0,0 +1,36 @@
+import type { ImagePack, PackImage } from './types';
+
+export const MAX_ATTACHMENT_BYTES = 20 * 1024 * 1024;
+
+export interface StagedAttachment {
+  id: number;
+  file: File;
+  previewUrl: string | null;
+}
+
+export interface StickerHandlers {
+  onSend: (pack: ImagePack, image: PackImage) => void;
+  onClone: (pack: ImagePack, image: PackImage, x: number, y: number) => void;
+  onClonePack: (pack: ImagePack, x: number, y: number) => void;
+  onManage: () => void;
+  roomName: (roomId: string) => string;
+}
+
+let nextId = 1;
+
+/** Files outside the homeserver-friendly size range are reported through `reject` and skipped. */
+export function stageFiles(files: File[], reject: (message: string) => void): StagedAttachment[] {
+  const accepted: StagedAttachment[] = [];
+  for (const file of files) {
+    if (file.size === 0 || file.size > MAX_ATTACHMENT_BYTES) {
+      reject(`${file.name || 'File'} must be between 1 byte and 20 MiB.`);
+      continue;
+    }
+    accepted.push({ id: nextId++, file, previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : null });
+  }
+  return accepted;
+}
+
+export function releaseStaged(list: StagedAttachment[]): void {
+  for (const attachment of list) if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
+}

Modified file: web/src/lib/transport-http.ts+1

@@ -325,6 +325,7 @@ export class HttpTransport implements Transport {

325325 if (extras.caption) form.append('caption', extras.caption);

326326 if (extras.formatted_caption) form.append('formatted_caption', extras.formatted_caption);

327327 if (extras.reply_to) form.append('reply_to', extras.reply_to);

328+ if (extras.thread_root) form.append('thread_root', extras.thread_root);

328329 for (const id of extras.mentions) form.append('mentions', id);

329330 form.append('file', file, file.name || 'attachment');

330331 const res = await fetch('/api/rooms/upload', {

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

@@ -90,6 +90,7 @@ export interface UploadExtras {

9090 formatted_caption: string | null;

9191 reply_to: string | null;

9292 mentions: string[];

93+ thread_root?: string | null;

9394 }

9495

9596 export type VerifyAction = 'Accept' | 'Confirm' | 'Reject' | 'Cancel';

malice

Commit dda384a360e0

Commit `dda384a360e0`