malice

public

Star0

Fork 0

Watch0

30 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `05a48e9e7942`

tarball

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

30 files changed+1012-288

web: polish the layout and add pins, emote and command completion

The account bar now has a fixed slot under the rail and channels and folds to an avatar menu. Panes are resizable and the composer grows with its content. Radii, padding and contrast are tightened across every panel. Typing / or : opens command or emote completion, where :name: of an emoji becomes the emoji and custom pack emotes send as data-mx-emoticon images. A pinned strip under the header lists m.room.pinned_events. The mobile drawer had broken because .app > .sidebar { position: relative } outranked the media query's position: fixed.

Modified file: web/src/App.svelte+357 additions−80 deletions@@ -36,9 +36,14 @@
     uploadAttachment,
     uploadAvatar,
     uploadRoomAvatar,
-    editMessage
+    editMessage,
+    mediaUrl
   } from './lib/api';
-  import { isKnownCommand, parseCommand, splitTarget, unescapeCommand } from './lib/commands';
+  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 type { ParsedCommand } from './lib/commands';
   import {
     banners,
@@ -58,11 +63,13 @@
     sessionUser,
     softLogout,
     timelines,
+    pinnedTimelines,
     verification
   } from './lib/store';
   import { discardPending, pendingByRoom, queueSend, resetPending, retryPending } from './lib/pending';
   import type { PendingMessage } from './lib/pending';
   import { insideOpenFence } from './lib/markdown';
+  import { markMentions } from './lib/composer-marks';
   import { mentionQueryAt, mentionsFromHtml, rankPeople, resolveMentions } from './lib/mentions';
   import type { Mention, MentionQuery } from './lib/mentions';
   import { loadQuickReactions, quickReactions, saveQuickReactions } from './lib/quick-reactions';
@@ -75,7 +82,18 @@
   } from './lib/link-previews';
   import { notifyTyping, stopTyping } from './lib/typing';
   import { formatDay } from './lib/format';
-  import { lastSpaceRooms, lineHeight, markdownEnabled, messageSpacing, navFolded, railFolded } from './lib/appearance';
+  import {
+    MEMBERS_WIDTH,
+    SIDE_WIDTH,
+    lastSpaceRooms,
+    lineHeight,
+    markdownEnabled,
+    membersWidth,
+    messageSpacing,
+    navFolded,
+    railFolded,
+    sideWidth
+  } from './lib/appearance';
   import SettingsPanel from './lib/SettingsPanel.svelte';
   import { packsForRoom, parseEncryptionState, parseOwnProfile, parseVerificationState, contentPreview, senderLabel } from './lib/types';
   import type { ImagePack, MemberSummary, OwnProfile, PackImage, Person, QuickReaction, ReplyReference, RoomSummary, SendState, TimelineEvent, TimelineItem } from './lib/types';
@@ -102,6 +120,12 @@
   let stickToBottom = true;
   let timelineEl: HTMLElement | null = null;
   let composerEl: HTMLTextAreaElement | null = null;
+  let marksEl: HTMLDivElement | null = null;
+  $: composerMarks = markMentions(
+    composer,
+    ($selectedRoomId && pickedMentions[$selectedRoomId]) || [],
+    resolveEmotes(composer, roomEmotes).map((e) => `:${e.shortcode}:`)
+  );
   let fileInput: HTMLInputElement | null = null;
   let avatarInput: HTMLInputElement | null = null;
   let uploadBusy = false;
@@ -145,6 +169,7 @@
   }
   $: selectedRoom = $rooms.find((r) => r.room_id === $selectedRoomId) ?? null;
   $: roomPacks = packsForRoom($imagePacks, $selectedRoomId);
+  $: roomEmotes = customEmotes(roomPacks);
   $: previewsAllowed = selectedRoom !== null && (!selectedRoom.encrypted || $urlPreviewSettings.encrypted_rooms);
   $: loadPreview = previewsAllowed && $selectedRoomId ? previewLoader($selectedRoomId) : null;
   $: spaceRooms = $rooms.filter((r) => r.space);
@@ -645,7 +670,7 @@
         if (image?.previewUrl) URL.revokeObjectURL(image.previewUrl);
       });
     } else if (attachments.length === 0) {
-      queueSend(roomId, text, reply, mentions, $markdownEnabled);
+      queueSend(roomId, text, reply, mentions, $markdownEnabled, resolveEmotes(text, roomEmotes));
     } else {
       const { [roomId]: _sent, ...rest } = staged;
       staged = rest;
@@ -685,9 +710,11 @@
     try {
       switch (name) {
         case 'me':
-        case 'notice':
-          await sendMessage(roomId, required('something to say'), null, mentions, $markdownEnabled, name === 'me' ? 'emote' : 'notice');
+        case 'notice': {
+          const said = required('something to say');
+          await sendMessage(roomId, said, null, mentions, $markdownEnabled, name === 'me' ? 'emote' : 'notice', resolveEmotes(said, roomEmotes));
           break;
+        }
         case 'msg': {
           const { user_id, rest } = target();
           const res = (await runCommand({ op: 'direct', user_id })) as { room_id: string };
@@ -795,7 +822,7 @@
       for (const attachment of attachments) {
         uploadName = attachment.file.name || 'attachment';
         try {
-          if (first) await uploadAttachment(roomId, attachment.file, body || null, reply?.event_id ?? null, mentions, $markdownEnabled);
+          if (first) await uploadAttachment(roomId, attachment.file, body || null, reply?.event_id ?? null, mentions, $markdownEnabled, resolveEmotes(body, roomEmotes));
           else await uploadAttachment(roomId, attachment.file);
           first = false;
         } catch (e) {
@@ -868,7 +895,7 @@
     const body = composer.trim();
     cancelEdit();
     if (!body || body === original.trim()) return;
-    editMessage(roomId, eventId, body, resolveMentions(body, pickedMentions[roomId] ?? []), $markdownEnabled).catch((e) => pushBanner(e instanceof Error ? e.message : 'Edit failed'));
+    editMessage(roomId, eventId, body, resolveMentions(body, pickedMentions[roomId] ?? []), $markdownEnabled, resolveEmotes(body, roomEmotes)).catch((e) => pushBanner(e instanceof Error ? e.message : 'Edit failed'));
   }
 
   function editLastOwn(): boolean {
@@ -889,6 +916,40 @@
     composerEl?.focus();
   }
 
+  let pinnedOpenFor: string | null = null;
+  let pinsExpanded = false;
+  $: syncPinned(selectedRoom?.room_id ?? null, (selectedRoom?.pinned_events.length ?? 0) > 0);
+  function syncPinned(roomId: string | null, hasPins: boolean): void {
+    const want = hasPins ? roomId : null;
+    if (want === pinnedOpenFor) return;
+    if (pinnedOpenFor) runCommand({ op: 'close_pinned', room_id: pinnedOpenFor }).catch(() => undefined);
+    pinnedOpenFor = want;
+    pinsExpanded = false;
+    if (want) runCommand({ op: 'open_pinned', room_id: want }).catch(() => undefined);
+  }
+
+  $: pins = pinnedList(selectedRoom, $pinnedTimelines);
+  function pinnedList(room: RoomSummary | null, all: Record<string, TimelineItem[]>): TimelineEvent[] {
+    if (!room || !room.pinned_events.length) return [];
+    const order = new Map(room.pinned_events.map((id, i) => [id, i]));
+    return (all[room.room_id] ?? [])
+      .flatMap((item) => (item.kind === 'event' && item.event.event_id && order.has(item.event.event_id) ? [item.event] : []))
+      .sort((a, b) => (order.get(b.event_id!) ?? 0) - (order.get(a.event_id!) ?? 0));
+  }
+
+  function setPinned(eventId: string, pinned: boolean): void {
+    const roomId = $selectedRoomId;
+    if (!roomId) return;
+    runCommand({ op: 'set_pinned', room_id: roomId, event_id: eventId, pinned }).catch((e) =>
+      pushBanner(e instanceof Error ? e.message : 'Could not change the pin')
+    );
+  }
+
+  function jumpToPin(eventId: string): void {
+    pinsExpanded = false;
+    jumpTo(eventId);
+  }
+
   function jumpTo(eventId: string): void {
     const el = timelineEl?.querySelector<HTMLElement>(`[data-event="${CSS.escape(eventId)}"]`);
     if (!el) {
@@ -924,8 +985,69 @@
     if (stickToBottom) scrollToBottom();
   }
 
+  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;
@@ -950,6 +1072,43 @@
   }
 
   function onComposerKey(ev: KeyboardEvent): void {
+    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();
@@ -1152,7 +1311,7 @@
 
   let dragSpaceId: string | null = null;
   let dropTarget: { id: string; after: boolean } | null = null;
-  let menu: { items: MenuItem[]; x: number; y: number } | null = null;
+  let menu: { items: MenuItem[]; x: number; y: number; above?: boolean } | null = null;
   let userCard: { userId: string; x: number; y: number; confirm: 'kick' | 'ban' | null } | null = null;
   let levelsByRoom: Record<string, PowerLevels | null> = {};
   let peeking: string | null = null;
@@ -1195,6 +1354,7 @@
     if (!own) items.push({ label: 'Message', action: () => void userAction(userId, { kind: 'message' }) });
     items.push({ label: 'Mention', action: () => void userAction(userId, { kind: 'mention' }) });
     items.push({ label: 'Copy user ID', action: () => copyText(userId) });
+    const firstModeration = items.length;
     if (roomLevels && $sessionUser) {
       const can = allowed(roomLevels, $sessionUser, userId);
       const banned = member?.membership === 'Ban';
@@ -1207,9 +1367,10 @@
       if (can.ban && !banned) items.push({ label: 'Ban…', danger: true, action: () => (userCard = { userId, x, y, confirm: 'ban' }) });
       if (can.setLevel) items.push({ label: 'Power level…', action: () => (userCard = { userId, x, y, confirm: null }) });
     }
+    if (items[firstModeration]) items[firstModeration] = { ...items[firstModeration], divider: true };
     if (!own) {
       const kind = member?.ignored ? 'unignore' : 'ignore';
-      items.push({ label: member?.ignored ? 'Unignore' : 'Ignore', action: () => void userAction(userId, { kind }) });
+      items.push({ label: member?.ignored ? 'Unignore' : 'Ignore', divider: true, action: () => void userAction(userId, { kind }) });
     }
     return items;
   }
@@ -1281,7 +1442,7 @@
     items.push({ label: room.favourite ? 'Unpin' : room.space ? 'Pin to top' : 'Pin', action: () => void togglePin(room) });
     items.push({ label: 'Copy link', action: () => copyText(`https://matrix.to/#/${room.canonical_alias ?? room.room_id}`) });
     items.push({ label: 'Copy room ID', action: () => copyText(room.room_id) });
-    if (room.membership === 'Joined') items.push({ label: 'Leave', danger: true, action: () => void leave(room.room_id) });
+    if (room.membership === 'Joined') items.push({ label: 'Leave', danger: true, divider: true, action: () => void leave(room.room_id) });
     return items;
   }
 
@@ -1376,6 +1537,10 @@
       items.push({ label: 'Copy text', action: () => copyText(body) });
     }
     items.push({ label: 'Copy link', action: () => copyText(`https://matrix.to/#/${roomId}/${eventId}`) });
+    if (joined && selectedRoom?.can_pin && content.kind !== 'Redacted') {
+      const pinned = selectedRoom.pinned_events.includes(eventId);
+      items.push({ label: pinned ? 'Unpin' : 'Pin', action: () => setPinned(eventId, !pinned) });
+    }
     if (content.kind === 'Sticker') {
       const body = content.body;
       items.push({ label: 'Clone sticker…', action: () => openCloneStickerMenu(eventId, body, x, y) });
@@ -1396,10 +1561,61 @@
           })
       });
     }
-    if (!event.own) items.push(...userMenuItems(event.sender.user_id, x, y));
+    if (!event.own) {
+      const person = userMenuItems(event.sender.user_id, x, y);
+      if (person[0]) person[0] = { ...person[0], divider: true };
+      items.push(...person);
+    }
     menu = { items, x, y };
   }
 
+  function openAccountMenu(ev: MouseEvent): void {
+    const rect = (ev.currentTarget as HTMLElement).getBoundingClientRect();
+    menu = {
+      x: rect.left,
+      y: rect.top - 6,
+      above: true,
+      items: [
+        { label: 'Security', action: () => (dialog = 'security') },
+        { label: 'Settings', action: () => (dialog = 'settings') },
+        { label: 'Sticker and emoji packs', action: () => (dialog = 'packs') },
+        { label: 'Log out', danger: true, divider: true, action: () => void doLogout() }
+      ]
+    };
+  }
+
+  let resizing = false;
+
+  function startResize(ev: PointerEvent, pane: 'side' | 'members'): void {
+    if (ev.button !== 0) return;
+    ev.preventDefault();
+    const handle = ev.currentTarget as HTMLElement;
+    handle.setPointerCapture(ev.pointerId);
+    const store = pane === 'side' ? sideWidth : membersWidth;
+    const range = pane === 'side' ? SIDE_WIDTH : MEMBERS_WIDTH;
+    const startX = ev.clientX;
+    const startWidth = pane === 'side' ? $sideWidth : $membersWidth;
+    resizing = true;
+    const move = (e: PointerEvent) => {
+      const delta = pane === 'side' ? e.clientX - startX : startX - e.clientX;
+      store.set(Math.round(Math.min(range.max, Math.max(range.min, startWidth + delta))));
+    };
+    const end = () => {
+      resizing = false;
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', end);
+      handle.removeEventListener('pointercancel', end);
+    };
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', end);
+    handle.addEventListener('pointercancel', end);
+  }
+
+  function resetWidth(pane: 'side' | 'members'): void {
+    if (pane === 'side') sideWidth.set(SIDE_WIDTH.default);
+    else membersWidth.set(MEMBERS_WIDTH.default);
+  }
+
   function stopPeeking(): void {
     peeking = null;
     queueReadReceipt();
@@ -1494,6 +1710,9 @@
     class:nav-folded={$navFolded && selectedRoom}
     class:rail-folded={$railFolded && selectedRoom}
     class:members-open={selectedRoom && membersOpen}
+    class:resizing
+    style:--side-open={`${$sideWidth}px`}
+    style:--members-open={`${$membersWidth}px`}
     style:--msg-gap={`${$messageSpacing}px`}
     style:--msg-line-height={$lineHeight}
   >
@@ -1648,7 +1867,7 @@
         aria-pressed={selectedSpaceId === null}
         on:click={() => void selectHome()}
       >
-        <span aria-hidden="true">⌂</span>
+        <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><path d="M4 11l8-7 8 7v8a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>
       </button>
       {#each [pinnedRail, otherRail] as group}
         {#if group.length > 0}
@@ -1686,12 +1905,12 @@
           dialog = 'join';
         }}
       >
-        <span aria-hidden="true">＋</span>
+        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
       </button>
     </nav>
 
     {#if menu}
-      <ContextMenu items={menu.items} x={menu.x} y={menu.y} onClose={() => (menu = null)} />
+      <ContextMenu items={menu.items} x={menu.x} y={menu.y} above={menu.above ?? false} onClose={() => (menu = null)} />
     {/if}
     {#if userCard}
       {#key userCard}
@@ -1711,6 +1930,8 @@
     {/if}
 
     <aside class="sidebar" class:open={sidebarOpen} aria-label="Rooms">
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="pane-resize right" title="Drag to resize" on:pointerdown={(e) => startResize(e, 'side')} on:dblclick={() => resetWidth('side')}></div>
       <div class="side-search">
         <label class="visually-hidden" for="room-search">Search rooms</label>
         <input
@@ -1732,31 +1953,12 @@
         </button>
       </div>
       <div class="side-scroll">
-        {#if selectedSpace}
-          <div class="space-context">
-            <MxcAvatar mxc={selectedSpace.avatar} label={selectedSpace.name} size={28} shape="rounded" />
-            <div class="space-context-text">
-              <strong>{selectedSpace.name}</strong>
-            </div>
-            {#if spaceParents.has(selectedSpace.room_id)}
-              {@const parentId = spaceParents.get(selectedSpace.room_id) ?? ''}
-              <button
-                type="button"
-                class="icon-btn"
-                title="Up to the parent space"
-                aria-label="Up to the parent space"
-                on:click={() => void selectSpace(parentId)}
-              >
-                <span aria-hidden="true">↑</span>
-              </button>
-            {/if}
-          </div>
-        {:else}
-          <div class="space-context">
-            <div class="space-context-text">
-              <strong>Home</strong>
-            </div>
-          </div>
+        {#if selectedSpace && spaceParents.has(selectedSpace.room_id)}
+          {@const parentId = spaceParents.get(selectedSpace.room_id) ?? ''}
+          <button type="button" class="room-row up-row" on:click={() => void selectSpace(parentId)}>
+            <span aria-hidden="true">↑</span>
+            <span class="room-name">{$rooms.find((r) => r.room_id === parentId)?.name ?? 'Parent space'}</span>
+          </button>
         {/if}
         {#if roomsLoading && $rooms.length === 0}
           <p class="side-note">Loading rooms…</p>
@@ -1861,7 +2063,6 @@
                       on:contextmenu|preventDefault={(ev) => openRoomMenu(ev, room)}
                     >
                       <MxcAvatar mxc={room.avatar} label={room.name} size={26} shape="rounded" />
-                      <span class="room-hash" aria-hidden="true">#</span>
                       <span class="room-name">{room.name}</span>
                       {#if roomUnread(room) > 0}
                         <span
@@ -1893,7 +2094,6 @@
                       on:contextmenu|preventDefault={(ev) => openRoomMenu(ev, room)}
                     >
                       <MxcAvatar mxc={room.avatar} label={room.name} size={26} shape="rounded" />
-                      <span class="room-hash" aria-hidden="true">◇</span>
                       <span class="room-name">{room.name}</span>
                     </button>
                     <PinButton pinned={room.favourite} label={room.name} onToggle={() => void togglePin(room)} />
@@ -1909,38 +2109,31 @@
         {/if}
       </div>
 
-      <div class="side-footer">
-        <div class="me" title={$sessionUser}>
-          {#if profileMxc}
-            <MxcAvatar mxc={profileMxc} label={profile?.display_name ?? $sessionUser} size={30} />
-          {:else}
-            <span class="me-avatar" aria-hidden="true">{$sessionUser.slice(1, 2).toUpperCase()}</span>
-          {/if}
-          <span class="me-id">{profile?.display_name && profile.display_name !== $sessionUser ? `${profile.display_name} (${$sessionUser})` : $sessionUser}</span>
-        </div>
-        <button
-          type="button"
-          class="icon-btn"
-          title="Encryption and verification"
-          aria-label="Encryption and verification"
-          on:click={() => (dialog = 'security')}
-        >
-          <span aria-hidden="true">🛡</span>
+    </aside>
+    <div class="account">
+      <button type="button" class="me-btn" title={$sessionUser} aria-haspopup="menu" on:click={openAccountMenu}>
+        {#if profileMxc}
+          <MxcAvatar mxc={profileMxc} label={profile?.display_name ?? $sessionUser} size={32} />
+        {:else}
+          <span class="me-avatar" aria-hidden="true">{$sessionUser.slice(1, 2).toUpperCase()}</span>
+        {/if}
+        <span class="me-names">
+          <span class="me-name">{profile?.display_name || $sessionUser}</span>
+          {#if profile?.display_name && profile.display_name !== $sessionUser}<span class="me-id">{$sessionUser}</span>{/if}
+        </span>
+      </button>
+      <div class="account-actions">
+        <button type="button" class="icon-btn" title="Encryption and verification" aria-label="Encryption and verification" on:click={() => (dialog = 'security')}>
+          <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true"><path d="M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" /></svg>
         </button>
-        <button
-          type="button"
-          class="icon-btn"
-          title="Settings"
-          aria-label="Settings"
-          on:click={() => (dialog = 'settings')}
-        >
-          <span aria-hidden="true">⚙</span>
+        <button type="button" class="icon-btn" title="Settings" aria-label="Settings" on:click={() => (dialog = 'settings')}>
+          <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
         </button>
         <button type="button" class="icon-btn" title="Log out" aria-label="Log out" on:click={() => void doLogout()}>
-          <span aria-hidden="true">⏻</span>
+          <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true"><path d="M12 3v8M6.3 6.3a8 8 0 1 0 11.4 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
         </button>
       </div>
-    </aside>
+    </div>
     {#if sidebarOpen}
       <button type="button" class="scrim" aria-label="Close room list" on:click={() => (sidebarOpen = false)}></button>
     {/if}
@@ -1980,8 +2173,45 @@
           </p>
         </div>
       {:else}
-
-
+        {#if pins.length}
+          <div class="pinned-strip" class:open={pinsExpanded}>
+            <div class="pinned-head">
+              <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M9 3h6l-1 6 4 4v2h-5v6l-1 1-1-1v-6H6v-2l4-4z" fill="currentColor" /></svg>
+              <button type="button" class="pinned-latest" title="Jump to pinned message" on:click={() => jumpToPin(pins[0].event_id ?? '')}>
+                <strong>{senderLabel(pins[0].sender)}</strong>
+                <span>{contentPreview(pins[0].content)}</span>
+              </button>
+              {#if pins.length > 1}
+                <button type="button" class="pinned-count" aria-expanded={pinsExpanded} on:click={() => (pinsExpanded = !pinsExpanded)}>
+                  {pins.length} pinned
+                  <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true"><path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" /></svg>
+                </button>
+              {/if}
+              {#if pinsExpanded && selectedRoom.can_pin}
+                <button type="button" class="icon-btn" aria-label="Unpin" title="Unpin" on:click={() => setPinned(pins[0].event_id ?? '', false)}>
+                  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2" /></svg>
+                </button>
+              {/if}
+            </div>
+            {#if pinsExpanded}
+              <ul class="pinned-list">
+                {#each pins.slice(1) as pin (pin.event_id)}
+                  <li>
+                    <button type="button" on:click={() => jumpToPin(pin.event_id ?? '')}>
+                      <strong>{senderLabel(pin.sender)}</strong>
+                      <span>{contentPreview(pin.content)}</span>
+                    </button>
+                    {#if selectedRoom.can_pin}
+                      <button type="button" class="icon-btn" aria-label="Unpin" title="Unpin" on:click={() => setPinned(pin.event_id ?? '', false)}>
+                        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="2" /></svg>
+                      </button>
+                    {/if}
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+          </div>
+        {/if}
         {#if recoveryBanner}
           <div class="sec-banner warn" role="status">
             <span>Message history is locked</span>
@@ -2148,6 +2378,42 @@
           {/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>
+            {#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) ?? ''} 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)}
@@ -2183,13 +2449,17 @@
             />
             <button
               type="button"
-              class="ghost-btn"
-              title="Attach an image or file"
+              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}
             >
-              {uploadBusy ? `Uploading ${uploadName ?? 'file'}…` : '📎'}
+              <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"
@@ -2200,7 +2470,7 @@
               disabled={!($selectedRoomId && openReady[$selectedRoomId])}
               on:click={() => (stickersOpen = !stickersOpen)}
             >
-              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+              <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>
@@ -2219,6 +2489,8 @@
                 />
               </div>
             {/if}
+            <div class="composer-field">
+            <div class="composer-marks" aria-hidden="true" bind:this={marksEl}>{#each composerMarks as part}{#if part.mark}<mark>{part.text}</mark>{:else}{part.text}{/if}{/each}&#8203;</div>
             <textarea
               id="composer"
               bind:this={composerEl}
@@ -2227,22 +2499,25 @@
               placeholder={`Message ${selectedRoom.name}`}
               aria-label={`Message ${selectedRoom.name}. Enter to send, Shift Enter for a new line.`}
               on:keydown={onComposerKey}
-              on:input={updateMentionQuery}
+              on:input={() => void onComposerInput()}
               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)}
+              on:blur={() => ((mentionQuery = null), (commandQuery = null), (emoteQuery = null))}
               on:paste={onComposerPaste}
+              on:scroll={() => marksEl && composerEl && (marksEl.scrollTop = composerEl.scrollTop)}
               disabled={!($selectedRoomId && openReady[$selectedRoomId])}
             ></textarea>
+            </div>
             <button
               type="button"
-              class="icon-btn md-toggle"
+              class="icon-btn"
               aria-pressed={$markdownEnabled}
               aria-label={$markdownEnabled ? 'Turn markdown off' : 'Turn markdown on'}
               title={$markdownEnabled ? 'Markdown on' : 'Markdown off'}
               on:click={() => markdownEnabled.update((v) => !v)}
             >
-              <svg viewBox="0 0 24 16" width="22" height="15" aria-hidden="true">
+              <svg viewBox="0 0 24 16" width="21" height="14" aria-hidden="true">
                 <rect x="1" y="1" width="22" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.6" />
                 <path d="M4.5 11.5v-7l2.75 3 2.75-3v7M15.5 4.5v6.5M13 8.5l2.5 2.75L18 8.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" />
               </svg>
@@ -2271,6 +2546,8 @@
 
     {#if selectedRoom}
       <aside class="members" aria-hidden={!membersOpen} 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)}>
@@ -2299,7 +2576,7 @@
                   }}
                   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} size={30} />
+                  <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">{member.display_name || member.name}</span>
                     <span class="member-id">{member.user_id}</span>

Modified file: web/src/app.css+289 additions−120 deletions@@ -1,13 +1,21 @@
+:root {
+  --r-sm: 3px;
+  --r-md: 4px;
+  --r-lg: 6px;
+  --ctl-h: 34px;
+  --pop: 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
 :root,
 :root[data-theme='dark'] {
-  --bg: #14151c;
-  --bg-soft: #1b1d27;
-  --panel: #1e2029;
-  --panel-2: #232634;
-  --rail-bg: #101117;
-  --border: #2e3142;
-  --text: #e6e8f0;
-  --muted: #9aa0b4;
+  --bg: #111218;
+  --bg-soft: #191a22;
+  --panel: #16171e;
+  --panel-2: #22242f;
+  --rail-bg: #0c0d11;
+  --border: #2b2e3c;
+  --text: #ecedf3;
+  --muted: #a3a8ba;
   --accent: #5865f2;
   --accent-2: #7c5cff;
   --glow: #1c2440;
@@ -98,6 +106,19 @@ html, body, #app {
   min-height: 100dvh;
 }
 
+@keyframes pop-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+}
+@keyframes pop-up {
+  from { opacity: 0; transform: translateY(4px) scale(0.98); }
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root { --pop: 0s; }
+}
+
 body {
   background: var(--bg);
   color: var(--text);
@@ -105,6 +126,9 @@ body {
 }
 
 button { font: inherit; }
+
+* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
 input, textarea { font: inherit; }
 
 .visually-hidden {
@@ -126,40 +150,56 @@ input, textarea { font: inherit; }
 }
 .splash-mark {
   width: 52px; height: 52px;
-  border-radius: 16px;
+  border-radius: var(--r-lg);
   display: grid; place-items: center;
   font-size: 26px; font-weight: 800; color: #fff;
   background: linear-gradient(135deg, var(--accent), var(--accent-2));
 }
 
 .app {
-  --rail-w: 68px;
-  --side-w: 300px;
+  --rail-w: 60px;
+  --side-w: var(--side-open, 260px);
   --members-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-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
   height: 100dvh;
   overflow: hidden;
   transition: grid-template-columns var(--pane-ease);
 }
 .app.rail-folded { --rail-w: 0px; }
 .app.nav-folded { --side-w: 0px; }
-.app.members-open { --members-w: 260px; }
+.app.members-open { --members-w: var(--members-open, 240px); }
+.app.resizing { transition: none; cursor: col-resize; user-select: none; }
+.pane-resize {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 5;
+  width: 6px;
+  cursor: col-resize;
+  min-width: 0 !important;
+  transition: background var(--pop);
+}
+.pane-resize.right { right: 0; width: 5px; }
+.pane-resize.left { left: 0; width: 5px; }
+.pane-resize:hover, .app.resizing .pane-resize:active { background: color-mix(in srgb, var(--accent) 45%, transparent); }
 .app > .chat-head { grid-column: 1 / -1; grid-row: 1; }
 .app > .rail { grid-column: 1; grid-row: 2; }
 .app > .sidebar { grid-column: 2; grid-row: 2; }
-.app > .chat { grid-column: 3; grid-row: 2; }
-.app > .members { grid-column: 4; grid-row: 2; }
+.app > .account { grid-column: 1 / 3; 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 {
   min-width: 0;
   transition: visibility 0s linear 0s;
 }
 .app > .rail { overflow-x: hidden; }
 .app > .sidebar, .app > .members { overflow: hidden; }
-.app > .sidebar > * { min-width: 300px; }
-.app > .members > * { min-width: 260px; }
+.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 {
   visibility: hidden;
   transition: visibility 0s linear 0.22s;
@@ -171,58 +211,51 @@ input, textarea { font: inherit; }
 /* ——— Rail ——— */
 .rail {
   background: var(--rail-bg);
+  border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 12px 0;
+  gap: 6px;
+  padding: 10px 0;
   overflow-y: auto;
 }
-.rail-sep { width: 32px; height: 2px; border-radius: 2px; background: var(--border); }
+.rail-sep { flex: none; width: 24px; height: 1px; background: var(--border); }
 .rail-btn {
-  width: 46px; height: 46px;
-  border-radius: 50%;
+  flex: none;
+  width: 40px; height: 40px;
+  border-radius: var(--r-lg);
   border: none;
   background: var(--panel-2);
   color: var(--text);
   font-size: 19px;
   font-weight: 700;
   cursor: pointer;
-  transition: border-radius 0.15s, background 0.15s;
+  transition: background var(--pop), color var(--pop), box-shadow var(--pop);
   display: grid;
   place-items: center;
   overflow: hidden;
   padding: 0;
 }
-.rail-btn:hover { border-radius: 16px; background: var(--accent); color: #fff; }
-.rail-btn.active { border-radius: 16px; background: var(--accent); color: #fff; }
+.rail-btn:hover { background: var(--accent); color: #fff; }
+.rail-btn.active { background: var(--accent); color: #fff; }
 .rail-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
-.rail-space { border-radius: 14px; }
+.rail-space { border-radius: var(--r-lg); }
 .rail-space:hover, .rail-space.active { background: var(--panel-2); }
-.rail-space.active { box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 4px var(--accent); }
+.rail-space.active { box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 3px var(--accent); }
 .rail .rail-space .mxc-avatar, .rail .rail-space .mxc-fallback { width: 100% !important; height: 100% !important; border-radius: inherit; }
 .rail-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
 .rail-add { color: var(--muted); }
 .rail-add:hover { color: #fff; }
-.space-context {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 8px 4px;
-}
-.space-context-text { display: flex; flex-direction: column; min-width: 0; }
-.space-context-text strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.space-context-text span { font-size: 11.5px; color: var(--muted); }
 .sec-banner {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin: 10px 16px 0;
-  padding: 8px 12px;
+  margin: 8px 12px 0;
+  padding: 5px 6px 5px 12px;
   background: color-mix(in srgb, var(--accent) 14%, transparent);
   border: 1px solid var(--accent);
   color: var(--text);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   font-size: 12.5px;
 }
 .sec-banner.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
@@ -231,13 +264,13 @@ input, textarea { font: inherit; }
   flex: none;
   background: transparent;
   border: 1px solid currentColor;
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   color: inherit;
   cursor: pointer;
   padding: 3px 10px;
   font-size: 12.5px;
 }
-.head-room { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.head-room { display: flex; align-items: center; gap: 10px; min-width: 0; }
 .head-room-text { min-width: 0; flex: 1; }
 .conn-banner.error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
 /* ——— Sidebar ——— */
@@ -250,8 +283,8 @@ input, textarea { font: inherit; }
 }
 .side-search {
   display: flex;
-  gap: 6px;
-  padding: 12px;
+  gap: 4px;
+  padding: 8px;
   border-bottom: 1px solid var(--border);
 }
 .side-search input {
@@ -259,18 +292,20 @@ input, textarea { font: inherit; }
   min-width: 0;
   background: var(--bg-soft);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   color: var(--text);
-  padding: 7px 10px;
+  height: var(--ctl-h);
+  padding: 0 10px;
 }
-.side-search input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
-.side-scroll { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }
+.side-search input:focus { outline: none; border-color: var(--accent); }
+.side-scroll { flex: 1; overflow-y: auto; padding: 6px; min-height: 0; }
 .side-h {
-  font-size: 11px;
+  font-size: 10.5px;
+  font-weight: 650;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--muted);
-  margin: 12px 6px 6px;
+  margin: 12px 8px 4px;
 }
 .side-h:first-child { margin-top: 4px; }
 .room-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
@@ -281,21 +316,24 @@ input, textarea { font: inherit; }
   gap: 6px;
   background: transparent;
   border: none;
-  border-radius: 8px;
-  color: var(--text);
-  padding: 7px 9px;
+  border-radius: var(--r-md);
+  color: var(--muted);
+  padding: 4px 8px;
+  min-height: 32px;
   cursor: pointer;
   text-align: left;
   font-size: 13.5px;
+  transition: background var(--pop), color var(--pop);
 }
-.room-row:hover { background: var(--panel-2); }
+.room-row:hover { background: var(--panel-2); color: var(--text); }
 .room-item { display: flex; align-items: center; gap: 2px; }
 .room-item > .room-row { flex: 1; min-width: 0; }
 .rail-space.drop-before { box-shadow: 0 -6px 0 -3px var(--accent); }
 .rail-space.drop-after { box-shadow: 0 6px 0 -3px var(--accent); }
-.room-row.active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
+.room-row.active { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
+.room-row:has(.badge) { color: var(--text); font-weight: 600; }
 .room-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
-.room-hash { color: var(--muted); }
+.up-row { margin-bottom: 4px; }
 .room-name {
   flex: 1;
   min-width: 0;
@@ -305,10 +343,10 @@ input, textarea { font: inherit; }
 }
 .badge {
   flex: none;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: 999px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: var(--r-sm);
   background: var(--panel-2);
   border: 1px solid var(--border);
   color: var(--text);
@@ -322,7 +360,7 @@ input, textarea { font: inherit; }
   flex: none;
   background: var(--accent);
   color: #fff;
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   padding: 2px 10px;
   font-size: 12px;
   font-weight: 600;
@@ -335,20 +373,41 @@ input, textarea { font: inherit; }
   background: var(--panel-2);
   border: 1px solid var(--border);
   color: var(--text);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   padding: 8px;
   cursor: pointer;
 }
 .side-cta button:hover { border-color: var(--accent); }
-.side-footer {
+.account {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  padding: 8px 10px 8px max(9px, calc((var(--rail-w) - 32px) / 2));
   border-top: 1px solid var(--border);
-  background: var(--bg-soft);
+  border-right: 1px solid var(--border);
+  background: var(--rail-bg);
+  transition: padding var(--pane-ease);
 }
-.me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
+.me-btn {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+.me-names { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
+.me-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.account-actions { flex: none; display: flex; gap: 2px; }
+.app.nav-folded .account { padding-right: 0; }
+.app.nav-folded .account .me-names, .app.nav-folded .account-actions { display: none; }
 .me-avatar {
   flex: none;
   width: 30px; height: 30px;
@@ -361,6 +420,7 @@ input, textarea { font: inherit; }
   place-items: center;
 }
 .me-id {
+  display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -370,15 +430,22 @@ input, textarea { font: inherit; }
 }
 .icon-btn {
   flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: var(--ctl-h);
+  height: var(--ctl-h);
+  padding: 0;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: var(--r-md);
   color: var(--muted);
   font-size: 16px;
-  padding: 5px 9px;
+  line-height: 1;
   cursor: pointer;
+  transition: background var(--pop), color var(--pop);
 }
 .icon-btn:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
+.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 .icon-btn:disabled { opacity: 0.4; cursor: default; }
 .scrim { display: none; }
 
@@ -399,35 +466,38 @@ input, textarea { font: inherit; }
 .chat-head {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 16px;
+  gap: 6px;
+  padding: 0 10px 0 max(8px, calc((var(--rail-w) - var(--ctl-h)) / 2));
   border-bottom: 1px solid var(--border);
-  background: var(--panel);
-  min-height: 62px;
+  background: var(--rail-bg);
+  height: 50px;
 }
+.chat-head .head-title { margin-left: 8px; }
 .head-title { flex: 1; min-width: 0; }
 .head-title h1 {
   margin: 0;
-  font-size: 15.5px;
+  font-size: 14.5px;
+  font-weight: 650;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.head-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
+.head-meta { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
 .pill {
-  font-size: 11px;
+  font-size: 10.5px;
+  line-height: 16px;
   border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 0 8px;
+  border-radius: var(--r-sm);
+  padding: 0 5px;
   color: var(--muted);
 }
-.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
+.conn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; }
 .dot-online { background: var(--ok); }
 .dot-busy { background: var(--warn); }
 .dot-off { background: var(--danger); }
-.head-actions { display: flex; align-items: center; gap: 4px; }
-.head-actions .icon-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; }
+.head-actions { display: flex; align-items: center; gap: 2px; }
 .head-actions .icon-btn[aria-pressed='true'], .head-actions .icon-btn[aria-expanded='true'] { background: var(--panel-2); color: var(--text); }
 .room-menu-wrap { position: relative; }
 .room-menu {
@@ -441,13 +511,15 @@ input, textarea { font: inherit; }
   padding: 4px;
   background: var(--panel-2);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
+  transform-origin: top right;
+  animation: pop-in var(--pop);
 }
 .room-menu button {
   background: transparent;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   color: var(--text);
   font: inherit;
   font-size: 13.5px;
@@ -460,33 +532,45 @@ input, textarea { font: inherit; }
 .room-menu button.danger { color: var(--danger); }
 
 .primary-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--ctl-h);
   background: var(--accent);
   border: none;
   color: #fff;
   font-weight: 600;
-  border-radius: 8px;
-  padding: 8px 16px;
+  border-radius: var(--r-md);
+  padding: 0 14px;
   cursor: pointer;
-  font-size: 13.5px;
+  font-size: 13px;
+  transition: filter var(--pop), opacity var(--pop);
 }
-.primary-btn:hover:not(:disabled) { filter: brightness(1.1); }
+.primary-btn:hover:not(:disabled) { filter: brightness(1.12); }
 .primary-btn:disabled { opacity: 0.55; cursor: default; }
 .primary-btn.wide { width: 100%; margin-top: 12px; }
 .ghost-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: var(--ctl-h);
   background: var(--panel-2);
   border: 1px solid var(--border);
   color: var(--text);
-  border-radius: 8px;
-  padding: 7px 14px;
+  border-radius: var(--r-md);
+  padding: 0 12px;
   cursor: pointer;
   font-size: 13px;
+  transition: border-color var(--pop), background var(--pop);
 }
 .ghost-btn:hover:not(:disabled) { border-color: var(--accent); }
 .ghost-btn:disabled { opacity: 0.55; cursor: wait; }
 .ghost-btn.danger { color: var(--danger); }
 .ghost-btn.danger:hover:not(:disabled) { border-color: var(--danger); }
 
-.banners { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 0; }
+.banners { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 0; }
 .banner {
   display: flex;
   align-items: center;
@@ -494,9 +578,10 @@ input, textarea { font: inherit; }
   background: var(--danger-bg);
   border: 1px solid var(--danger-border);
   color: var(--danger-text);
-  border-radius: 8px;
-  padding: 8px 12px;
+  border-radius: var(--r-md);
+  padding: 6px 10px;
   font-size: 13px;
+  animation: pop-in var(--pop);
 }
 .banner span { flex: 1; }
 .banner button {
@@ -513,14 +598,14 @@ input, textarea { font: inherit; }
   background: var(--warn-bg);
   border: 1px solid var(--warn-border);
   color: var(--warn-text);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   font-size: 12.5px;
 }
 
 .timeline {
   flex: 1;
   overflow-y: auto;
-  padding: 12px 20px 16px;
+  padding: 8px 14px 10px;
   min-height: 0;
 }
 .timeline-top { display: flex; justify-content: center; padding: 4px 0 12px; }
@@ -561,12 +646,13 @@ input, textarea { font: inherit; }
 
 .composer {
   display: flex;
-  gap: 10px;
+  gap: 4px;
   align-items: flex-end;
-  padding: 12px 16px 16px;
+  padding: 8px 12px;
   border-top: 1px solid var(--border);
   background: var(--panel);
 }
+.composer > .icon-btn, .composer > .primary-btn { flex: none; }
 .reply-bar {
   display: flex;
   align-items: center;
@@ -583,9 +669,8 @@ 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); }
+.sticker-pop { position: absolute; bottom: calc(100% - 4px); left: 12px; z-index: 30; animation: pop-up var(--pop); transform-origin: bottom left; }
+.composer .icon-btn[aria-expanded='true'], .composer .icon-btn[aria-pressed='true'] { color: var(--accent); }
 .mention-finder {
   position: absolute;
   left: 16px;
@@ -597,20 +682,22 @@ input, textarea { font: inherit; }
   padding: 4px;
   list-style: none;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-md);
   background: var(--panel-2);
   box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
+  animation: pop-up var(--pop);
 }
 .mention-finder li {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 5px 8px;
-  border-radius: 6px;
+  border-radius: var(--r-sm);
   cursor: pointer;
   font-size: 13px;
 }
 .mention-finder li.active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
+.finder-emote { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; object-fit: contain; font-size: 15px; }
 .mention-name { font-weight: 600; white-space: nowrap; }
 .mention-id { min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .staged {
@@ -630,7 +717,7 @@ input, textarea { font: inherit; }
   width: 84px;
   height: 84px;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-md);
   background: var(--bg-soft);
   overflow: hidden;
 }
@@ -648,24 +735,55 @@ input, textarea { font: inherit; }
   background: var(--panel);
   font-size: 11px;
 }
-.composer textarea {
+.composer-field {
+  position: relative;
   flex: 1;
-  resize: none;
+  min-width: 0;
+  display: grid;
+  margin: 0 4px;
   background: var(--bg-soft);
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--r-md);
+  transition: border-color var(--pop);
+}
+.composer-field:focus-within { border-color: var(--accent); }
+.composer-field > textarea, .composer-field > .composer-marks {
+  grid-area: 1 / 1;
+  margin: 0;
+  border: none;
+  padding: 7px 10px;
+  font: inherit;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: normal;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  min-height: calc(var(--ctl-h) - 2px);
+  max-height: min(40vh, 280px);
+}
+.composer-field > textarea {
+  resize: none;
+  background: transparent;
   color: var(--text);
-  padding: 10px 12px;
-  min-height: 40px;
-  max-height: 160px;
-  line-height: 1.4;
+  outline: none;
+  overflow-y: auto;
+}
+.composer-marks {
+  pointer-events: none;
+  color: transparent;
+  overflow: hidden;
+}
+.composer-marks mark {
+  color: transparent;
+  background: color-mix(in srgb, var(--accent) 26%, transparent);
+  border-radius: var(--r-sm);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
 }
-.composer textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
 .join-bar {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 16px 16px;
+  padding: 8px 12px;
   border-top: 1px solid var(--border);
   background: var(--panel);
 }
@@ -688,7 +806,7 @@ input, textarea { font: inherit; }
 }
 .members-head h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }
 .member-list { list-style: none; margin: 0; padding: 0 8px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
-.member { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: none; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
+.member { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: none; border-radius: var(--r-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
 .member:hover { background: var(--panel-2); }
 .member-names { min-width: 0; display: flex; flex-direction: column; }
 .member-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -703,13 +821,18 @@ input, textarea { font: inherit; }
   place-items: center;
   padding: 20px;
   z-index: 50;
+  animation: fade-in var(--pop);
 }
 .modal {
   width: min(420px, 100%);
+  max-height: calc(100dvh - 40px);
+  overflow-y: auto;
   background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 18px;
+  border-radius: var(--r-lg);
+  padding: 16px;
+  box-shadow: 0 16px 48px rgb(0 0 0 / 0.45);
+  animation: pop-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .modal-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
 .modal-tabs button[role='tab'] {
@@ -728,7 +851,7 @@ input, textarea { font: inherit; }
 .modal .field input {
   background: var(--bg-soft);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: var(--r-md);
   color: var(--text);
   padding: 9px 11px;
   font-size: 14px;
@@ -745,6 +868,8 @@ input, textarea { font: inherit; }
     transition: none;
   }
   .app > .rail, .app > .sidebar { visibility: visible !important; }
+  .account .me-names, .account-actions { display: none; }
+  .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; }
@@ -752,7 +877,7 @@ input, textarea { font: inherit; }
     transform: translateX(100%);
     transition: transform var(--pane-ease), visibility 0s linear 0.22s;
   }
-  .sidebar {
+  .app > .sidebar {
     position: fixed;
     top: 0; bottom: 0; left: 60px;
     width: min(320px, 85vw);
@@ -760,7 +885,7 @@ input, textarea { font: inherit; }
     transform: translateX(calc(-100% - 60px));
     box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
   }
-  .sidebar.open { transform: none; }
+  .app > .sidebar.open { transform: none; }
   .scrim {
     display: block;
     position: fixed;
@@ -771,7 +896,7 @@ input, textarea { font: inherit; }
     z-index: 30;
     cursor: pointer;
   }
-  .members {
+  .app > .members {
     position: fixed;
     top: 0; bottom: 0; right: 0;
     width: min(300px, 85vw);
@@ -788,10 +913,54 @@ input, textarea { font: inherit; }
 
 @media (max-width: 640px) {
   .app { --rail-w: 52px !important; }
-  .sidebar { left: 52px; transform: translateX(calc(-100% - 52px)); }
+  .app > .sidebar { left: 52px; transform: translateX(calc(-100% - 52px)); }
   .scrim { left: 52px; }
   .rail-btn { width: 40px; height: 40px; font-size: 16px; }
   .empty-cta { flex-direction: column; }
 }
-.md-toggle { align-self: center; padding: 4px 6px; }
-.md-toggle[aria-pressed='true'] { color: var(--accent); }
+
+.pinned-strip {
+  flex: none;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-soft);
+  font-size: 13px;
+  animation: fade-in var(--pop);
+}
+.pinned-head { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px; min-height: 36px; color: var(--accent); }
+.pinned-latest, .pinned-list li > button:first-child {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  padding: 6px 0;
+  border: none;
+  background: none;
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.pinned-latest span, .pinned-list span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.pinned-latest:hover span, .pinned-list li > button:first-child:hover span { color: var(--text); }
+.pinned-count {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  background: var(--panel);
+  color: var(--muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.pinned-count:hover { color: var(--text); }
+.pinned-count svg { transition: transform var(--pop); }
+.pinned-strip.open .pinned-count svg { transform: rotate(180deg); }
+.pinned-list { list-style: none; margin: 0; padding: 0 8px 6px 36px; max-height: 40vh; overflow-y: auto; animation: pop-in var(--pop); }
+.pinned-list li { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); }
+.pinned-strip .icon-btn { width: 26px; height: 26px; }

Modified file: web/src/lib/ContextMenu.svelte+8 additions−3 deletions@@ -4,6 +4,7 @@
     action: () => void;
     danger?: boolean;
     disabled?: boolean;
+    divider?: boolean;
   }
 </script>
 
@@ -14,6 +15,7 @@
   export let x: number;
   export let y: number;
   export let onClose: () => void;
+  export let above = false;
 
   const MARGIN = 8;
 
@@ -25,7 +27,7 @@
     await tick();
     const rect = menu.getBoundingClientRect();
     left = Math.max(MARGIN, Math.min(x, window.innerWidth - rect.width - MARGIN));
-    top = Math.max(MARGIN, Math.min(y, window.innerHeight - rect.height - MARGIN));
+    top = Math.max(MARGIN, Math.min(above ? y - rect.height : y, window.innerHeight - rect.height - MARGIN));
     menu.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();
   });
 
@@ -50,6 +52,7 @@
 
 <div class="context-menu" role="menu" style={`left:${left}px;top:${top}px`} bind:this={menu}>
   {#each items as item}
+    {#if item.divider}<hr />{/if}
     <button type="button" role="menuitem" class:danger={item.danger} disabled={item.disabled} on:click={() => pick(item)}>
       {item.label}
     </button>
@@ -58,6 +61,7 @@
 
 <style>
   .context-menu {
+    animation: pop-in var(--pop);
     position: fixed;
     z-index: 90;
     min-width: 180px;
@@ -66,13 +70,13 @@
     padding: 4px;
     background: var(--panel-2);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
   }
   button {
     background: transparent;
     border: none;
-    border-radius: 6px;
+    border-radius: var(--r-sm);
     color: var(--text);
     font: inherit;
     font-size: 13.5px;
@@ -83,4 +87,5 @@
   button:hover:not(:disabled), button:focus-visible { background: var(--hover); outline: none; }
   button:disabled { opacity: 0.5; cursor: default; }
   .danger { color: var(--danger); }
+  hr { border: none; border-top: 1px solid var(--border); margin: 4px 2px; }
 </style>

Modified file: web/src/lib/ImageLightbox.svelte+2 additions−1 deletions@@ -66,6 +66,7 @@
 
 <style>
   .lightbox {
+    animation: fade-in var(--pop);
     position: fixed;
     inset: 0;
     z-index: 100;
@@ -95,7 +96,7 @@
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
-    border-radius: 6px;
+    border-radius: var(--r-sm);
     box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);
     cursor: zoom-out;
   }

Modified file: web/src/lib/LinkCard.svelte+2 additions−2 deletions@@ -46,7 +46,7 @@
 <style>
   .link-card {
     display: flex; gap: 10px;
-    border: 1px solid var(--border); border-radius: 8px;
+    border: 1px solid var(--border); border-radius: var(--r-md);
     background: var(--bg-soft); padding: 8px 10px;
     text-decoration: none; color: var(--text);
     overflow: hidden;
@@ -64,6 +64,6 @@
   }
   .link-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
   .link-url { font-size: 11.5px; color: var(--accent); overflow-wrap: anywhere; }
-  .link-image { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
+  .link-image { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
   .banner .link-image { width: 100%; height: auto; max-height: 220px; }
 </style>

Modified file: web/src/lib/LoginPanel.svelte+7 additions−7 deletions@@ -65,7 +65,7 @@
       </div>
     {/if}
     <label class="field">
-      <span>Homeserver (network address — not a space)</span>
+      <span>Homeserver</span>
       <input
         type="url"
         inputmode="url"
@@ -117,7 +117,7 @@
     width: min(400px, 100%);
     background: var(--panel);
     border: 1px solid var(--border);
-    border-radius: 16px;
+    border-radius: var(--r-lg);
     padding: 28px 26px;
     display: flex;
     flex-direction: column;
@@ -126,7 +126,7 @@
   .login-brand {
     width: 44px;
     height: 44px;
-    border-radius: 14px;
+    border-radius: var(--r-lg);
     display: grid;
     place-items: center;
     font-weight: 800;
@@ -139,7 +139,7 @@
     background: var(--danger-bg);
     border: 1px solid var(--danger-border);
     color: var(--danger-text);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     padding: 8px 10px;
     font-size: 13px;
     margin: 0;
@@ -147,7 +147,7 @@
   .login-notice {
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     padding: 10px 12px;
     font-size: 12.5px;
     color: var(--muted);
@@ -170,7 +170,7 @@
   .field input {
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     color: var(--text);
     padding: 9px 11px;
     font-size: 14px;
@@ -182,7 +182,7 @@
     border: none;
     color: #fff;
     font-weight: 600;
-    border-radius: 9px;
+    border-radius: var(--r-md);
     padding: 10px;
     font-size: 14.5px;
     cursor: pointer;

Modified file: web/src/lib/MediaAttachmentView.svelte+3 additions−3 deletions@@ -107,11 +107,11 @@
     display: block;
     max-width: 100%;
     max-height: 320px;
-    border-radius: 8px;
+    border-radius: var(--r-md);
     border: 1px solid var(--border);
     background: var(--bg-soft);
   }
-  .media-video { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; background: #000; }
+  .media-video { display: block; max-width: 100%; max-height: 320px; border-radius: var(--r-md); background: #000; }
   .media-audio { display: block; width: 100%; max-width: 420px; margin-top: 6px; }
   .media-block { margin: 6px 0 2px; max-width: 420px; }
   .media-caption { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
@@ -124,7 +124,7 @@
     margin: 6px 0 2px;
     padding: 6px 12px;
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     background: var(--bg-soft);
     max-width: 100%;
   }

Modified file: web/src/lib/MessageRow.svelte+21 additions−12 deletions@@ -45,6 +45,18 @@
   const PICKER_HEIGHT = 380;
   const PICKER_MARGIN = 8;
   const MAX_READERS = 3;
+  const STATE_LABELS: Record<string, string> = {
+    'm.room.pinned_events': 'changed the pinned messages',
+    'm.room.power_levels': 'changed the room permissions',
+    'm.room.join_rules': 'changed who can join',
+    'm.room.history_visibility': 'changed who can read history',
+    'm.room.guest_access': 'changed guest access',
+    'm.room.canonical_alias': 'changed the room address',
+    'm.room.server_acl': 'changed the server access list',
+    'm.space.child': 'changed the rooms in this space',
+    'm.space.parent': 'changed the parent space',
+    'im.ponies.room_emotes': 'updated a sticker pack'
+  };
 
   let row: HTMLDivElement;
   let pickerPop: HTMLDivElement | undefined;
@@ -220,7 +232,7 @@
       case 'RoomUpgraded':
         return `${displayName} upgraded the room to a new version`;
       case 'OtherState':
-        return `${displayName} sent a state event (${content.event_type})`;
+        return `${displayName} ${STATE_LABELS[content.event_type] ?? `sent a state event (${content.event_type})`}`;
       case 'Other':
         return `${displayName} sent an event (${content.event_type})`;
       default:
@@ -389,10 +401,7 @@
     {#if event.content.kind === 'Message'}
       {@const m = event.content.message}
       {#if stripped.text}
-        <div class="text" class:emote={m.kind === 'Emote'} class:notice={m.kind === 'Notice' || m.kind === 'ServerNotice'}>
-          {#if m.kind === 'Emote'}* {displayName} {/if}<MessageText text={stripped.text} html={m.formatted_body} jumbo={m.kind === 'Text'} {mentions} {self} nameOf={(id) => people[id]?.name ?? null} />
-          {#if m.edited && !showSender}<span class="edited" title="Edited">(edited)</span>{/if}
-        </div>
+        <div class="text" class:emote={m.kind === 'Emote'} class:notice={m.kind === 'Notice' || m.kind === 'ServerNotice'}>{#if m.kind === 'Emote'}* {displayName} {/if}<MessageText text={stripped.text} html={m.formatted_body} jumbo={m.kind === 'Text'} {mentions} {self} nameOf={(id) => people[id]?.name ?? null} />{#if m.edited && !showSender}<span class="edited" title="Edited">(edited)</span>{/if}</div>
       {/if}
       {#if m.media}
         <MediaAttachmentView attachment={m.media} />
@@ -496,7 +505,7 @@
     font-size: 12.5px;
     text-align: left;
     background: var(--bg-soft);
-    border-radius: 0 6px 6px 0;
+    border-radius: 0 var(--r-sm) var(--r-sm) 0;
     cursor: pointer;
   }
   .reply-quote:disabled { cursor: default; }
@@ -521,7 +530,7 @@
     display: inline-flex; align-items: center; gap: 4px;
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 999px;
+    border-radius: var(--r-sm);
     padding: 1px 8px;
     font-size: 13px;
     color: var(--text);
@@ -538,7 +547,7 @@
     max-width: 260px;
     padding: 6px 9px;
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     background: var(--panel-2);
     box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
     color: var(--text);
@@ -558,12 +567,12 @@
   .readby :global(.mxc-avatar), .readby :global(.mxc-fallback) { box-shadow: 0 0 0 1.5px var(--bg); }
   .readby .more { margin-left: 3px; font-size: 10.5px; color: var(--muted); }
   .actions {
-    position: absolute; top: -14px; right: 12px; z-index: 2;
+    position: absolute; top: -12px; right: 10px; z-index: 2;
     display: flex; gap: 2px;
     padding: 2px;
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
     opacity: 0;
     pointer-events: none;
@@ -573,7 +582,7 @@
   .actions button {
     background: transparent;
     border: 1px solid transparent;
-    border-radius: 6px;
+    border-radius: var(--r-sm);
     cursor: pointer;
     font-size: 14px;
     padding: 1px 5px;
@@ -581,5 +590,5 @@
   .actions button:hover:not(:disabled) { border-color: var(--border); background: var(--hover); }
   .actions button:disabled { opacity: 0.4; cursor: default; }
   .emote { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; }
-  .picker-pop { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px); }
+  .picker-pop { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px); animation: pop-in var(--pop); }
 </style>

Modified file: web/src/lib/MessageText.svelte+4 additions−4 deletions@@ -28,14 +28,14 @@
   }
   .inline, .rich :global(:not(pre) > code) {
     padding: 1px 5px;
-    border-radius: 4px;
+    border-radius: var(--r-sm);
     background: var(--bg-soft);
     border: 1px solid var(--border);
   }
   .block, .rich :global(pre) {
     margin: 4px 0;
     padding: 8px 10px;
-    border-radius: 6px;
+    border-radius: var(--r-sm);
     background: var(--bg-soft);
     border: 1px solid var(--border);
     overflow-x: auto;
@@ -44,7 +44,7 @@
   }
   .mention, .rich :global(.mention) {
     padding: 0 4px;
-    border-radius: 4px;
+    border-radius: var(--r-sm);
     font-weight: 600;
     color: var(--accent);
     background: color-mix(in srgb, var(--accent) 18%, transparent);
@@ -73,7 +73,7 @@
   .rich :global(table) { border-collapse: collapse; }
   .rich :global(:is(th, td)) { border: 1px solid var(--border); padding: 3px 8px; text-align: left; }
   .rich :global(.spoiler) {
-    border-radius: 4px;
+    border-radius: var(--r-sm);
     background: var(--text);
     color: transparent;
     cursor: pointer;

Modified file: web/src/lib/MxcAvatar.svelte+8 additions−6 deletions@@ -1,12 +1,13 @@
 <script lang="ts">
   import { mediaUrl } from './api';
-  import { initialsOf } from './format';
+  import { initialsOf, senderHue } from './format';
 
   export let mxc: string | null;
   export let label: string;
   export let size = 34;
   /** 'circle' for people, 'rounded' for rooms/spaces */
   export let shape: 'circle' | 'rounded' = 'circle';
+  export let seed: string | null = null;
 
   $: src = mediaUrl(mxc);
 
@@ -14,6 +15,7 @@
   $: if (mxc) failed = false;
   $: px = `${size}px`;
   $: fontPx = `${Math.max(10, Math.round(size * 0.36))}px`;
+  $: hue = senderHue(seed ?? label ?? '#');
 </script>
 
 {#if src && !failed}
@@ -30,7 +32,7 @@
     on:error={() => (failed = true)}
   />
 {:else}
-  <span class="mxc-fallback" class:circle={shape === 'circle'} aria-hidden="true" style={`width:${px};height:${px};font-size:${fontPx};`}>
+  <span class="mxc-fallback" class:circle={shape === 'circle'} aria-hidden="true" style={`width:${px};height:${px};font-size:${fontPx};background:hsl(${hue} 32% 30%);`}>
     {initialsOf(label || '#')}
   </span>
 {/if}
@@ -39,7 +41,7 @@
   .mxc-avatar {
     flex: none;
     object-fit: cover;
-    border-radius: 8px;
+    border-radius: var(--r-md);
     background: var(--bg-soft);
   }
   .mxc-avatar.circle { border-radius: 50%; }
@@ -47,10 +49,10 @@
     flex: none;
     display: inline-grid;
     place-items: center;
-    border-radius: 8px;
-    background: var(--panel-2);
-    color: var(--text);
+    border-radius: var(--r-md);
+    color: #fff;
     font-weight: 700;
+    letter-spacing: 0.02em;
   }
   .mxc-fallback.circle { border-radius: 50%; }
 </style>

Modified file: web/src/lib/PackManager.svelte+5 additions−5 deletions@@ -339,7 +339,7 @@
     gap: 8px;
     padding: 6px 8px;
     border: none;
-    border-radius: 8px;
+    border-radius: var(--r-md);
     background: transparent;
     color: var(--text);
     font: inherit;
@@ -354,7 +354,7 @@
   .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; }
+  .avatar-btn { padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--r-md); }
   .name { flex: 1; font-size: 15px; }
   .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
   .spacer { flex: 1; }
@@ -362,7 +362,7 @@
   input[type='text'], select {
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 6px;
+    border-radius: var(--r-sm);
     color: var(--text);
     padding: 6px 8px;
     font: inherit;
@@ -376,7 +376,7 @@
     gap: 4px;
     padding: 6px;
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     background: var(--bg-soft);
   }
   .image img { width: 100%; aspect-ratio: 1; object-fit: contain; }
@@ -387,7 +387,7 @@
     flex: 1;
     padding: 2px 0;
     border: 1px solid var(--border);
-    border-radius: 6px;
+    border-radius: var(--r-sm);
     background: transparent;
     color: var(--muted);
     cursor: pointer;

Modified file: web/src/lib/PinButton.svelte+1−1

@@ -33,7 +33,7 @@

3333 height: 24px;

3434 padding: 0;

3535 border: none;

36- border-radius: 6px;

36+ border-radius: var(--r-sm);

3737 background: transparent;

3838 color: var(--muted);

3939 cursor: pointer;

Modified file: web/src/lib/ReactionPicker.svelte+11 additions−14 deletions@@ -180,16 +180,13 @@
     {/if}
   </div>
 
-  <div class="foot">
-    {#if customising}
-      <span class="muted">{full ? 'Quick reactions are full. Remove one to add another.' : 'Select emoji to add or remove them.'}</span>
-    {/if}
-    {#if !embedded}
+  {#if !embedded}
+    <div class="foot">
       <button type="button" class="mode" aria-pressed={customising} on:click={() => (customising = !customising)}>
         {customising ? 'Done' : 'Customise quick reactions'}
       </button>
-    {/if}
-  </div>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -201,32 +198,32 @@
     padding: 8px;
     background: var(--panel);
     border: 1px solid var(--border);
-    border-radius: 10px;
+    border-radius: var(--r-md);
     box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
   }
   .search {
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     color: var(--text);
     padding: 6px 10px;
     font-size: 13px;
   }
   .search:focus-visible { outline: none; border-color: var(--accent); }
   .muted { color: var(--muted); font-size: 12px; }
-  .quick { border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--bg-soft); }
+  .quick { border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; background: var(--bg-soft); }
   .quick-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 650; margin-bottom: 4px; }
   .quick-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; align-items: center; }
   .quick-item {
     display: inline-flex; align-items: center; gap: 2px;
     padding: 1px 2px 1px 6px;
-    border: 1px solid var(--border); border-radius: 999px;
+    border: 1px solid var(--border); border-radius: var(--r-sm);
     font-size: 16px;
   }
   .quick-item img { width: 18px; height: 18px; object-fit: contain; }
   .remove {
     background: transparent; border: none; color: var(--muted);
-    cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 999px;
+    cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: var(--r-sm);
   }
   .remove:hover { color: var(--danger); }
   .scroll { flex: 1; min-height: 0; overflow-y: auto; }
@@ -238,7 +235,7 @@
   .cell {
     display: grid; place-items: center;
     height: 32px; padding: 0;
-    background: transparent; border: 1px solid transparent; border-radius: 6px;
+    background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
     font-size: 20px; cursor: pointer; color: var(--text);
   }
   .cell img { width: 24px; height: 24px; object-fit: contain; }
@@ -249,7 +246,7 @@
   .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
   .mode {
     margin-left: auto;
-    background: transparent; border: 1px solid var(--border); border-radius: 6px;
+    background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
     color: var(--text); font-size: 12px; padding: 3px 8px; cursor: pointer;
   }
   .mode:hover, .mode[aria-pressed='true'] { border-color: var(--accent); }

Modified file: web/src/lib/SecurityPanel.svelte+2 additions−2 deletions@@ -214,7 +214,7 @@
   .sec-note { margin: 8px 0 0; }
   .pill.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: var(--ok); color: var(--ok-text); }
   .pill.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); border-color: var(--warn); color: var(--warn); }
-  code { font-size: 12px; background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; }
+  code { font-size: 12px; background: var(--bg-soft); padding: 1px 6px; border-radius: var(--r-sm); }
   .check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
   .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
   .emoji-grid {
@@ -223,7 +223,7 @@
   }
   .emoji-grid li {
     display: flex; flex-direction: column; align-items: center; gap: 2px;
-    background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px;
+    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 4px;
   }
   .emoji { font-size: 24px; }
   .emoji-name { font-size: 11px; color: var(--muted); text-align: center; }

Modified file: web/src/lib/SettingsPanel.svelte+2 additions−2 deletions@@ -141,7 +141,7 @@
     padding: 6px 8px;
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     color: var(--text);
     font-size: 13px;
     cursor: pointer;
@@ -156,5 +156,5 @@
   [data-swatch='nord'] .swatch { background: #2e3440; }
   .accent-row { margin-top: 10px; font-size: 13px; }
   .accent-row label { flex: 1; }
-  .accent-row input[type='color'] { width: 36px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
+  .accent-row input[type='color'] { width: 36px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: none; cursor: pointer; }
 </style>

Modified file: web/src/lib/StickerPicker.svelte+17 additions−9 deletions@@ -49,7 +49,7 @@
   <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>
+      <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.8" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" /></svg>
     </button>
   </div>
   {#if withStickers.length > 1}
@@ -98,7 +98,14 @@
         </div>
       </section>
     {:else}
-      <p class="status">{withStickers.length === 0 ? 'No stickers yet' : `No stickers match "${query.trim()}"`}</p>
+      {#if withStickers.length === 0}
+        <div class="empty">
+          <p class="status">No stickers yet</p>
+          <button type="button" class="primary-btn" on:click={onManage}>Add a pack</button>
+        </div>
+      {:else}
+        <p class="status">No stickers match "{query.trim()}"</p>
+      {/if}
     {/each}
   </div>
 </div>
@@ -109,13 +116,13 @@
     flex-direction: column;
     gap: 6px;
     width: 360px;
-    height: 420px;
+    height: auto;
+    max-height: min(420px, calc(100vh - 120px));
     max-width: calc(100vw - 16px);
-    max-height: calc(100vh - 120px);
     padding: 8px;
     background: var(--panel);
     border: 1px solid var(--border);
-    border-radius: 10px;
+    border-radius: var(--r-md);
     box-shadow: 0 6px 24px rgb(0 0 0 / 0.5);
   }
   .top { display: flex; gap: 6px; }
@@ -123,7 +130,7 @@
     flex: 1;
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: var(--r-md);
     color: var(--text);
     padding: 6px 10px;
     font-size: 13px;
@@ -138,7 +145,7 @@
     height: 32px;
     padding: 2px 6px;
     border: 1px solid transparent;
-    border-radius: 8px;
+    border-radius: var(--r-md);
     background: transparent;
     color: var(--muted);
     font-size: 12px;
@@ -161,11 +168,12 @@
     aspect-ratio: 1;
     padding: 4px;
     border: 1px solid transparent;
-    border-radius: 8px;
+    border-radius: var(--r-md);
     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; }
+  .status { color: var(--muted); font-size: 13px; text-align: center; margin: 16px 0 10px; }
+  .empty { display: flex; flex-direction: column; align-items: center; padding-bottom: 12px; }
 </style>

Modified file: web/src/lib/UserCard.svelte+5 additions−4 deletions@@ -81,7 +81,7 @@
 
 <div class="user-card" role="dialog" aria-label={person.name} style={`left:${left}px;top:${top}px`} bind:this={card}>
   <div class="identity">
-    <MxcAvatar mxc={person.avatar} label={person.name} size={64} />
+    <MxcAvatar mxc={person.avatar} label={person.name} seed={person.user_id} size={56} />
     <div class="names">
       <strong class="name">{person.name}</strong>
       <button type="button" class="user-id" title="Copy user ID" on:click={() => void copyId()}>
@@ -153,6 +153,7 @@
 
 <style>
   .user-card {
+    animation: pop-in var(--pop);
     position: fixed;
     z-index: 90;
     width: 300px;
@@ -163,7 +164,7 @@
     padding: 14px;
     background: var(--panel-2);
     border: 1px solid var(--border);
-    border-radius: 12px;
+    border-radius: var(--r-md);
     box-shadow: 0 12px 32px rgb(0 0 0 / 0.4);
   }
   .identity { display: flex; gap: 12px; align-items: center; }
@@ -185,7 +186,7 @@
   .tag {
     font-size: 11px;
     padding: 1px 6px;
-    border-radius: 999px;
+    border-radius: var(--r-sm);
     border: 1px solid var(--border);
     color: var(--muted);
   }
@@ -198,7 +199,7 @@
   input {
     background: var(--bg-soft);
     border: 1px solid var(--border);
-    border-radius: 6px;
+    border-radius: var(--r-sm);
     color: var(--text);
     padding: 5px 8px;
     font: inherit;

Modified file: web/src/lib/api.ts+9 additions−6 deletions@@ -1,6 +1,7 @@
 // Backend-agnostic API surface. Every call forwards to whichever transport
 // this build was compiled for, hosted (fetch + SSE) or on-device (worker).
 import type { MemberSummary, RoomSummary } from './types';
+import type { Emote } from './emotes';
 import { formatBody } from './markdown';
 import { mentionedUserIds, type Mention } from './mentions';
 import { HttpTransport } from './transport-http';
@@ -41,8 +42,9 @@ export const sendMessage = (
   reply_to: string | null = null,
   mentions: Mention[] = [],
   markdown = false,
-  kind: SendKind = 'text'
-) => transport.sendMessage(room_id, body, formatBody(body, mentions, markdown), reply_to, mentionedUserIds(mentions), kind);
+  kind: SendKind = 'text',
+  emotes: Emote[] = []
+) => transport.sendMessage(room_id, body, formatBody(body, mentions, markdown, emotes), reply_to, mentionedUserIds(mentions), kind);
 export const runCommand = (request: CommandRequest) => transport.command(request);
 export const uploadAvatar = (file: File) => transport.uploadAvatar(file);
 export const uploadRoomAvatar = (room_id: string, file: File) => transport.uploadRoomAvatar(room_id, file);
@@ -65,8 +67,8 @@ export function createRoom(name: string, topic?: string): Promise<{ room_id: str
 export const leaveRoom = (room_id: string) => transport.leaveRoom(room_id);
 export const reactToMessage = (room_id: string, event_id: string, key: string, shortcode?: string) =>
   transport.reactToMessage(room_id, event_id, key, shortcode);
-export const editMessage = (room_id: string, event_id: string, body: string, mentions: Mention[] = [], markdown = false) =>
-  transport.editMessage(room_id, event_id, body, formatBody(body, mentions, markdown), mentionedUserIds(mentions));
+export const editMessage = (room_id: string, event_id: string, body: string, mentions: Mention[] = [], markdown = false, emotes: Emote[] = []) =>
+  transport.editMessage(room_id, event_id, body, formatBody(body, mentions, markdown, emotes), mentionedUserIds(mentions));
 export const markRead = (room_id: string, event_id: string) => transport.markRead(room_id, event_id);
 
 export function getMembers(room_id: string): Promise<{ members: MemberSummary[] }> {
@@ -113,11 +115,12 @@ export function uploadAttachment(
   caption: string | null = null,
   reply_to: string | null = null,
   mentions: Mention[] = [],
-  markdown = false
+  markdown = false,
+  emotes: Emote[] = []
 ): Promise<void> {
   return transport.uploadAttachment(room_id, file, {
     caption,
-    formatted_caption: caption ? formatBody(caption, mentions, markdown) : null,
+    formatted_caption: caption ? formatBody(caption, mentions, markdown, emotes) : null,
     reply_to,
     mentions: mentionedUserIds(mentions)
   });

Modified file: web/src/lib/appearance.ts+7 additions@@ -29,6 +29,13 @@ const isSpacing = (v: unknown): v is number =>
 export const navFolded = persisted('malice.navFolded', false, isBool);
 export const railFolded = persisted('malice.railFolded', false, isBool);
 export const markdownEnabled = persisted('malice.markdown', true, isBool);
+
+export const SIDE_WIDTH = { min: 200, max: 480, default: 260 };
+export const MEMBERS_WIDTH = { min: 200, max: 420, default: 240 };
+const widthIn = (range: { min: number; max: number }) => (v: unknown): v is number =>
+  typeof v === 'number' && Number.isFinite(v) && v >= range.min && v <= range.max;
+export const sideWidth = persisted('malice.sideWidth', SIDE_WIDTH.default, widthIn(SIDE_WIDTH));
+export const membersWidth = persisted('malice.membersWidth', MEMBERS_WIDTH.default, widthIn(MEMBERS_WIDTH));
 export const messageSpacing = persisted('malice.messageSpacing', MESSAGE_SPACING_DEFAULT, isSpacing);
 
 export const LINE_HEIGHT_MIN = 1.1;

Modified file: web/src/lib/commands.ts+33 additions@@ -72,3 +72,36 @@ export function splitTarget(args: string, people: Person[]): Target {
   if (ids.length > 1) return { error: `Several people are called ${best[0].name}, use their @id` };
   return { user_id: ids[0], rest: args.slice(bestLength).trim() };
 }
+
+export const COMMAND_USAGE: Record<CommandName, string> = {
+  me: '<action>',
+  notice: '<text>',
+  msg: '<user> [message]',
+  join: '<room>',
+  leave: '',
+  invite: '<user>',
+  disinvite: '<user> [reason]',
+  kick: '<user> [reason]',
+  ban: '<user> [reason]',
+  unban: '<user> [reason]',
+  powerlevel: '<user> <level>',
+  mute: '<user>',
+  unmute: '<user>',
+  ignore: '<user>',
+  unignore: '<user>',
+  delete: '[reason]',
+  roomnick: '[name]',
+  globalnick: '<name>',
+  roomavatar: '[mxc]',
+  globalavatar: '[mxc]'
+};
+
+/** The command name being typed when the caret sits in a leading `/word`. */
+export function commandQueryAt(text: string, caret: number): string | null {
+  const match = /^\/([a-z]*)$/i.exec(text.slice(0, caret));
+  return match ? match[1].toLowerCase() : null;
+}
+
+export function matchCommands(prefix: string): CommandName[] {
+  return COMMANDS.filter((name) => name.startsWith(prefix));
+}

Added file: web/src/lib/composer-marks.ts+33 additions@@ -0,0 +1,33 @@
+import type { Mention } from './mentions';
+
+export interface MarkPart {
+  text: string;
+  mark: boolean;
+}
+
+/** The composer text split so picked mention names and emote shortcodes can be highlighted behind the textarea. */
+export function markMentions(text: string, mentions: Mention[], extra: string[] = []): MarkPart[] {
+  const names = [...new Set([...mentions.map((m) => m.text), ...extra].filter(Boolean))].sort((a, b) => b.length - a.length);
+  if (!names.length || !text) return [{ text, mark: false }];
+  const parts: MarkPart[] = [];
+  let rest = text;
+  while (rest) {
+    let at = -1;
+    let hit = '';
+    for (const name of names) {
+      const i = rest.indexOf(name);
+      if (i >= 0 && (at < 0 || i < at)) {
+        at = i;
+        hit = name;
+      }
+    }
+    if (at < 0) {
+      parts.push({ text: rest, mark: false });
+      break;
+    }
+    if (at > 0) parts.push({ text: rest.slice(0, at), mark: false });
+    parts.push({ text: hit, mark: true });
+    rest = rest.slice(at + hit.length);
+  }
+  return parts;
+}

Added file: web/src/lib/emotes.ts+83 additions@@ -0,0 +1,83 @@
+import type { EmojiEntry } from './emoji';
+import type { ImagePack } from './types';
+
+export interface Emote {
+  shortcode: string;
+  mxc: string;
+}
+
+export type EmoteCandidate =
+  | { kind: 'emoji'; emoji: string; shortcode: string }
+  | { kind: 'custom'; shortcode: string; mxc: string };
+
+export interface EmoteQuery {
+  start: number;
+  query: string;
+}
+
+const SHORTCODE = /^[\w+-]+$/;
+
+export function emoteQueryAt(text: string, caret: number): EmoteQuery | null {
+  const before = text.slice(0, caret);
+  const colon = before.lastIndexOf(':');
+  if (colon < 0 || (colon > 0 && !/\s/.test(before[colon - 1]))) return null;
+  const query = before.slice(colon + 1);
+  if (query.length < 2 || query.length > 40 || !SHORTCODE.test(query)) return null;
+  return { start: colon, query };
+}
+
+export function customEmotes(packs: ImagePack[]): Emote[] {
+  const seen = new Map<string, Emote>();
+  for (const pack of packs) {
+    for (const image of pack.images) {
+      if (image.usage.length && !image.usage.includes('Emoticon')) continue;
+      if (!seen.has(image.shortcode)) seen.set(image.shortcode, { shortcode: image.shortcode, mxc: image.media_id });
+    }
+  }
+  return [...seen.values()];
+}
+
+function score(code: string, q: string): number {
+  const c = code.toLowerCase();
+  if (c === q) return 0;
+  if (c.startsWith(q)) return 1;
+  if (c.split(/[_-]/).some((part) => part.startsWith(q))) return 2;
+  return c.includes(q) ? 3 : -1;
+}
+
+export function rankEmotes(query: string, customs: Emote[], emoji: EmojiEntry[], limit = 8): EmoteCandidate[] {
+  const q = query.toLowerCase();
+  const scored: { candidate: EmoteCandidate; score: number; length: number }[] = [];
+  for (const emote of customs) {
+    const s = score(emote.shortcode, q);
+    if (s >= 0) scored.push({ candidate: { kind: 'custom', ...emote }, score: s, length: emote.shortcode.length });
+  }
+  for (const entry of emoji) {
+    let best: { code: string; s: number } | null = null;
+    for (const code of entry.shortcodes) {
+      const s = score(code, q);
+      if (s >= 0 && (!best || s < best.s || (s === best.s && code.length < best.code.length))) best = { code, s };
+    }
+    if (best) scored.push({ candidate: { kind: 'emoji', emoji: entry.emoji, shortcode: best.code }, score: best.s, length: best.code.length });
+  }
+  return scored
+    .sort((a, b) => a.score - b.score || a.length - b.length)
+    .slice(0, limit)
+    .map((s) => s.candidate);
+}
+
+/** When the caret sits just after a closing colon of a known emoji shortcode, swap the shortcode for the emoji. */
+export function completeShortcode(text: string, caret: number, emoji: EmojiEntry[]): { text: string; caret: number } | null {
+  const match = /(^|\s):([\w+-]+):$/.exec(text.slice(0, caret));
+  if (!match) return null;
+  const code = match[2].toLowerCase();
+  const entry = emoji.find((e) => e.shortcodes.includes(code));
+  if (!entry) return null;
+  const start = caret - code.length - 2;
+  return { text: text.slice(0, start) + entry.emoji + text.slice(caret), caret: start + entry.emoji.length };
+}
+
+export function resolveEmotes(body: string, customs: Emote[]): Emote[] {
+  const used = new Set([...body.matchAll(/:([\w+-]+):/g)].map((m) => m[1]));
+  return customs.filter((e) => used.has(e.shortcode));
+}

Modified file: web/src/lib/markdown.ts+15 additions−2 deletions@@ -1,4 +1,5 @@
 import { Marked, type Token, type Tokens } from 'marked';
+import type { Emote } from './emotes';
 import type { Mention } from './mentions';
 
 function escapeHtml(text: string): string {
@@ -18,6 +19,16 @@ function mentionLinker(mentions: Mention[]): (escaped: string) => string {
     escaped.replace(pattern, (name) => `<a href="https://matrix.to/#/${escapeHtml(byText.get(name)!)}">${name}</a>`);
 }
 
+function emoteLinker(emotes: Emote[]): (escaped: string) => string {
+  if (emotes.length === 0) return (escaped) => escaped;
+  const byCode = new Map(emotes.map((e) => [e.shortcode, e.mxc]));
+  return (escaped) =>
+    escaped.replace(/:([\w+-]+):/g, (whole, code: string) => {
+      const mxc = byCode.get(code);
+      return mxc ? `<img data-mx-emoticon src="${escapeHtml(mxc)}" alt="${whole}" title="${whole}" height="32">` : whole;
+    });
+}
+
 function textToHtml(text: string, link: (escaped: string) => string): string {
   return link(escapeHtml(text)).replace(/\n/g, '<br>');
 }
@@ -55,8 +66,10 @@ function markdownToHtml(body: string, link: (escaped: string) => string): string
 }
 
 /** Matrix `formatted_body` for a composed message, or null when plain text says it all. */
-export function formatBody(body: string, mentions: Mention[], markdown: boolean): string | null {
-  const link = mentionLinker(mentions);
+export function formatBody(body: string, mentions: Mention[], markdown: boolean, emotes: Emote[] = []): string | null {
+  const mention = mentionLinker(mentions);
+  const emote = emoteLinker(emotes);
+  const link = (escaped: string) => emote(mention(escaped));
   const html = markdown ? markdownToHtml(body, link) : null;
   if (html !== null) return html;
   const plain = textToHtml(body, link);

Modified file: web/src/lib/pending.ts+7 additions−3 deletions@@ -2,6 +2,7 @@ import { get, writable } from 'svelte/store';
 import { sendMessage } from './api';
 import { formatBody } from './markdown';
 import { timelines } from './store';
+import type { Emote } from './emotes';
 import type { Mention } from './mentions';
 import type { ReplyReference, TimelineItem } from './types';
 
@@ -21,6 +22,7 @@ interface PendingRecord extends PendingMessage {
   roomId: string;
   mentions: Mention[];
   markdown: boolean;
+  emotes: Emote[];
   knownIds: Set<string>;
 }
 
@@ -77,7 +79,7 @@ async function attemptSend(record: PendingRecord): Promise<void> {
   if (!records.has(record.id)) return;
   updateRecord(record.id, { status: 'sending', error: null });
   try {
-    await sendMessage(record.roomId, record.body, record.replyTo?.event_id ?? null, record.mentions, record.markdown);
+    await sendMessage(record.roomId, record.body, record.replyTo?.event_id ?? null, record.mentions, record.markdown, 'text', record.emotes);
   } catch (e) {
     updateRecord(record.id, { status: 'failed', error: e instanceof Error ? e.message : 'Message could not be sent' });
   }
@@ -94,16 +96,18 @@ export function queueSend(
   body: string,
   replyTo: ReplyReference | null = null,
   mentions: Mention[] = [],
-  markdown = false
+  markdown = false,
+  emotes: Emote[] = []
 ): void {
   const record: PendingRecord = {
     id: nextId(),
     roomId,
     body,
-    formatted: formatBody(body, mentions, markdown),
+    formatted: formatBody(body, mentions, markdown, emotes),
     replyTo,
     mentions,
     markdown,
+    emotes,
     status: 'sending',
     error: null,
     createdAt: Date.now(),

Modified file: web/src/lib/store.ts+26 additions@@ -27,6 +27,7 @@ export const softLogout = writable<SoftLogout | null>(null);
 export const blocked = writable<boolean>(false);
 export const rooms = writable<RoomSummary[]>([]);
 export const timelines = writable<Record<string, TimelineItem[]>>({});
+export const pinnedTimelines = writable<Record<string, TimelineItem[]>>({});
 export const connection = writable<string>('connecting');
 export const selectedRoomId = writable<string | null>(null);
 export const membersByRoom = writable<Record<string, MemberSummary[]>>({});
@@ -55,6 +56,7 @@ export function dismissBanner(id: number): void {
 export function resetClientState(): void {
   rooms.set([]);
   timelines.set({});
+  pinnedTimelines.set({});
   connection.set('connecting');
   selectedRoomId.set(null);
   membersByRoom.set({});
@@ -96,6 +98,12 @@ function handlePayload(text: string): void {
       }
       timelines.update((all) => ({ ...all, ...next }));
     }
+    const rawPinned = data['pinned'];
+    if (isRecord(rawPinned)) {
+      const next: Record<string, TimelineItem[]> = {};
+      for (const [roomId, list] of Object.entries(rawPinned)) next[roomId] = parseTimelineList(list);
+      pinnedTimelines.set(next);
+    }
     if (typeof data['connection'] === 'string') connection.set(data['connection']);
     const snapshotEncryption = parseEncryptionState(data['encryption']);
     if (snapshotEncryption) encryption.set(snapshotEncryption);
@@ -117,6 +125,24 @@ function handlePayload(text: string): void {
     if (typeof roomId === 'string') applyTimelinePayload(roomId, data);
     return;
   }
+  if (kind === 'pinned') {
+    const roomId = data['room_id'];
+    if (typeof roomId === 'string' && Array.isArray(data['items'])) {
+      const items = parseTimelineList(data['items']);
+      pinnedTimelines.update((all) => ({ ...all, [roomId]: items }));
+    }
+    return;
+  }
+  if (kind === 'pinned_closed') {
+    const roomId = data['room_id'];
+    if (typeof roomId === 'string') {
+      pinnedTimelines.update((all) => {
+        const { [roomId]: _closed, ...rest } = all;
+        return rest;
+      });
+    }
+    return;
+  }
   if (kind === 'connection') {
     if (typeof data['state'] === 'string') connection.set(data['state']);
     return;

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

@@ -36,6 +36,8 @@ export type CommandRequest =

3636 | { op: 'mute'; room_id: string; user_id: string; muted: boolean }

3737 | { op: 'ignore' | 'unignore'; user_id: string }

3838 | { op: 'power_levels'; room_id: string }

39+ | { op: 'open_pinned' | 'close_pinned'; room_id: string }

40+ | { op: 'set_pinned'; room_id: string; event_id: string; pinned: boolean }

3941 | { op: 'send_sticker'; room_id: string; pack_id: string; shortcode: string }

4042 | { op: 'create_room_pack'; room_id: string; state_key: string; display_name: string }

4143 | { op: 'delete_pack'; target: PackTarget }

Modified file: web/src/lib/types.ts+5 additions−1 deletions@@ -42,6 +42,8 @@ export interface RoomSummary {
   children: string[];
   space_order: string | null;
   can_edit_packs: boolean;
+  pinned_events: string[];
+  can_pin: boolean;
 }
 
 export interface MemberSummary {
@@ -366,7 +368,9 @@ export function parseRoomSummary(raw: unknown): RoomSummary | null {
     parent_spaces: stringList(raw['parent_spaces']),
     children: stringList(raw['children']),
     space_order: optionalString(raw, 'space_order'),
-    can_edit_packs: raw['can_edit_packs'] === true
+    can_edit_packs: raw['can_edit_packs'] === true,
+    pinned_events: stringList(raw['pinned_events']),
+    can_pin: raw['can_pin'] === true
   };
 }
 

Modified file: web/src/sw.ts+1−1

@@ -7,7 +7,7 @@ import { attachmentContentType } from './lib/media-sniff';

77 const sw = self as unknown as ServiceWorkerGlobalScope & { __MALICE_PRECACHE__: string[] };

99 const CACHE_NAME = 'malice-shell-v1';

10-const AVATAR_CACHE = 'malice-avatars-v1';

10+const AVATAR_CACHE = 'malice-avatars-v2';

1111

1212 sw.addEventListener('install', (event) => {

1313 event.waitUntil(

Modified file: web/test/commands.test.ts+9 additions@@ -27,3 +27,12 @@ test('finds targets by id or the longest display name', () => {
   assert.ok('error' in splitTarget('Zed', people));
   assert.ok('error' in splitTarget('', people));
 });
+
+test('a leading slash word opens the command list', async () => {
+  const { commandQueryAt, matchCommands } = await import('../src/lib/commands.ts');
+  assert.equal(commandQueryAt('/ki', 3), 'ki');
+  assert.equal(commandQueryAt('/', 1), '');
+  assert.equal(commandQueryAt('/kick bob', 9), null);
+  assert.equal(commandQueryAt('hi /ki', 6), null);
+  assert.deepEqual(matchCommands('un'), ['unban', 'unmute', 'unignore']);
+});

Added file: web/test/emotes.test.ts+38 additions@@ -0,0 +1,38 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { completeShortcode, emoteQueryAt, rankEmotes, resolveEmotes } from '../src/lib/emotes.ts';
+import { formatBody } from '../src/lib/markdown.ts';
+
+const sob = { emoji: '😭', label: 'loudly crying face', tags: [], shortcodes: ['sob'] };
+const smile = { emoji: '😄', label: 'grinning face with smiling eyes', tags: [], shortcodes: ['smile'] };
+const blob = { shortcode: 'blob_sob', mxc: 'mxc://example.org/blob' };
+
+test('opens the emote query after two shortcode characters at a word start', () => {
+  assert.deepEqual(emoteQueryAt('so :so', 6), { start: 3, query: 'so' });
+  assert.equal(emoteQueryAt('so :s', 5), null);
+  assert.equal(emoteQueryAt('re:so', 5), null);
+  assert.equal(emoteQueryAt('12:30', 5), null);
+  assert.equal(emoteQueryAt(':so b', 5), null);
+});
+
+test('ranks prefix matches ahead of word and substring matches', () => {
+  const names = rankEmotes('sob', [blob], [sob, smile]).map((c) => c.shortcode);
+  assert.deepEqual(names, ['sob', 'blob_sob']);
+});
+
+test('swaps a closed emoji shortcode for the emoji', () => {
+  assert.deepEqual(completeShortcode('ugh :sob:', 9, [sob]), { text: 'ugh 😭', caret: 6 });
+  assert.equal(completeShortcode('ugh :blob_sob:', 14, [sob]), null);
+  assert.equal(completeShortcode('a:sob:', 6, [sob]), null);
+});
+
+test('sends used custom emotes as emoticon images', () => {
+  const emotes = resolveEmotes('hi :blob_sob: and :nope:', [blob]);
+  assert.deepEqual(emotes, [blob]);
+  assert.equal(
+    formatBody('hi :blob_sob:', [], false, emotes),
+    'hi <img data-mx-emoticon src="mxc://example.org/blob" alt=":blob_sob:" title=":blob_sob:" height="32">'
+  );
+  assert.match(formatBody('**hi** :blob_sob:', [], true, emotes) ?? '', /<strong>hi<\/strong> <img data-mx-emoticon/);
+  assert.equal(formatBody('`:blob_sob:`', [], true, emotes), '<p><code>:blob_sob:</code></p>');
+});

malice

Commit 05a48e9e7942

Commit `05a48e9e7942`