malice

<script lang="ts">

  import { onMount, tick } from 'svelte';

  import LoginPanel from './lib/LoginPanel.svelte';

  import MessageRow from './lib/MessageRow.svelte';

  import MxcAvatar from './lib/MxcAvatar.svelte';

  import PinButton from './lib/PinButton.svelte';

  import { moveBefore, pinnedFirst, sortSpaces } from './lib/rail-order';

  import ImageLightbox from './lib/ImageLightbox.svelte';

  import { lightbox } from './lib/lightbox';

  import SecurityPanel from './lib/SecurityPanel.svelte';

  import {

    closeRoom,

    createRoom,

    getEncryption,

    getMembers,

    getProfile,

    getRooms,

    getSession,

    getSpaceChildren,

    joinRoom,

    leaveRoom,

    logout,

    markRead,

    openRoom,

    paginateRoom,

    reactToMessage,

    runCommand,

    sendMessage,

    uploadAttachment,

    uploadAvatar,

    uploadRoomAvatar,

    editMessage

  } from './lib/api';

  import { isKnownCommand, parseCommand, splitTarget, unescapeCommand } from './lib/commands';

  import type { ParsedCommand } from './lib/commands';

  import {

    banners,

    blocked,

    connectEvents,

    connection,

    disconnectEvents,

    dismissBanner,

    encryption,

    membersByRoom,

    membersLoading,

    pushBanner,

    imagePacks,

    resetClientState,

    rooms,

    selectedRoomId,

    sessionUser,

    softLogout,

    timelines,

    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 { mentionQueryAt, mentionsFromHtml, rankPeople, resolveMentions } from './lib/mentions';

  import type { Mention, MentionQuery } from './lib/mentions';

  import { loadQuickReactions, quickReactions, saveQuickReactions } from './lib/quick-reactions';

  import {

    linkPreviews,

    loadUrlPreviewSettings,

    requestLinkPreview,

    saveUrlPreviewSettings,

    urlPreviewSettings

  } 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 SettingsPanel from './lib/SettingsPanel.svelte';

  import { packsForRoom, parseEncryptionState, parseOwnProfile, parseVerificationState, contentPreview, senderLabel } from './lib/types';

  import type { MemberSummary, OwnProfile, Person, QuickReaction, ReplyReference, RoomSummary, SendState, TimelineEvent, TimelineItem } from './lib/types';

  let roomsLoading = false;

  let booted = false;

  let wasOnline = false;

  let search = '';

  let sidebarOpen = false;

  let membersOpen = false;

  let replyingTo: ReplyReference | null = null;

  let dialog: 'join' | 'create' | 'security' | 'settings' | null = null;

  let joinTarget = '';

  let joinBusy = false;

  let createName = '';

  let createTopic = '';

  let createBusy = false;

  let leaveBusy = false;

  let paginateBusy = false;

  let reacting = false;

  let composer = '';

  let drafts: Record<string, string> = {};

  let stickToBottom = true;

  let timelineEl: HTMLElement | null = null;

  let composerEl: HTMLTextAreaElement | null = null;

  let fileInput: HTMLInputElement | null = null;

  let avatarInput: HTMLInputElement | null = null;

  let avatarRoom: string | null = null;

  let uploadBusy = false;

  let uploadName: string | null = null;

  interface StagedAttachment {

    id: number;

    file: File;

    previewUrl: string | null;

  }

  let staged: Record<string, StagedAttachment[]> = {};

  let editing: { roomId: string; eventId: string; original: string; stash: string } | null = null;

  /** Everyone picked from the finder per room; only those whose name is still in the text get linked on send. */

  let pickedMentions: Record<string, Mention[]> = {};

  let mentionQuery: MentionQuery | null = null;

  let mentionIndex = 0;

  let nextStagedId = 1;

  const WARM_ROOM_LIMIT = 8;

  /** Rooms left open after switching away so coming back is instant, least recently viewed first. */

  let warmRooms: string[] = [];

  let openReady: Record<string, boolean> = {};

  let openFailed: Record<string, string> = {};

  let membersFor: string | null = null;

  let lastReadKey = '';

  let readTimer: number | null = null;

  let profile: OwnProfile | null = null;

  let profileMxc: string | null = null;

  let selectedSpaceId: string | null = null;

  let spaceChildIds: string[] | null = null;

  let spaceChildrenLoading = false;

  let spaceChildrenError: string | null = null;

  let avatarByUser: Record<string, string | null> = {};

  // account data is read from the local cache, which is empty on a fresh device until the first sync lands

  $: {

    const online = $connection === 'online';

    if (online && !wasOnline) {

      void loadQuickReactions();

      void loadUrlPreviewSettings();

    }

    wasOnline = online;

  }

  $: selectedRoom = $rooms.find((r) => r.room_id === $selectedRoomId) ?? null;

  $: roomPacks = packsForRoom($imagePacks, $selectedRoomId);

  $: previewsAllowed = selectedRoom !== null && (!selectedRoom.encrypted || $urlPreviewSettings.encrypted_rooms);

  $: loadPreview = previewsAllowed && $selectedRoomId ? previewLoader($selectedRoomId) : null;

  $: spaceRooms = $rooms.filter((r) => r.space);

  $: spaceParents = parentSpaceMap(spaceRooms);

  $: railSpaces = spaceRooms.filter((s) => !spaceParents.has(s.room_id));

  let railOverride: string[] | null = null;

  $: if (railOverride && sortSpaces(railSpaces, null).map((s) => s.room_id).join() === railOverride.join()) railOverride = null;

  $: orderedRail = sortSpaces(railSpaces, railOverride);

  $: pinnedRail = orderedRail.filter((s) => s.favourite);

  $: otherRail = orderedRail.filter((s) => !s.favourite);

  $: railSelected = selectedSpaceId ? topSpaceOf(selectedSpaceId, spaceParents) : null;

  $: invites = $rooms.filter((r) => r.membership === 'Invited');

  $: query = search.trim().toLowerCase();

  $: selectedSpace = selectedSpaceId ? ($rooms.find((r) => r.room_id === selectedSpaceId) ?? null) : null;

  // While a space's children load (or fail), show no channels rather than the

  // full list — listing everything would falsely imply it belongs to the space.

  $: baseRooms = selectedSpaceId ? (spaceChildIds ? $rooms.filter((r) => spaceChildIds?.includes(r.room_id)) : []) : $rooms;

  $: visibleRooms = query

    ? baseRooms.filter(

        (r) =>

          r.name.toLowerCase().includes(query) || r.room_id.toLowerCase().includes(query)

      )

    : baseRooms;

  $: directRooms = pinnedFirst(visibleRooms.filter((r) => r.direct && !r.space && r.membership !== 'Invited'));

  $: groupRooms = pinnedFirst(visibleRooms.filter((r) => !r.direct && !r.space && r.membership !== 'Invited'));

  $: spaceList = pinnedFirst(visibleRooms.filter((r) => r.space && r.membership !== 'Invited'));

  $: channelRooms = baseRooms.filter((r) => !r.space && r.membership !== 'Invited');

  $: recoveryBanner = $encryption && ($encryption.recovery === 'Disabled' || $encryption.recovery === 'Incomplete') ? $encryption : null;

  $: verificationBanner = $verification && $verification.kind !== 'Done' ? $verification : null;

  $: items = $selectedRoomId ? ($timelines[$selectedRoomId] ?? []) : [];

  $: currentStaged = $selectedRoomId ? (staged[$selectedRoomId] ?? []) : [];

  $: members = $selectedRoomId ? ($membersByRoom[$selectedRoomId] ?? []) : [];

  $: people = peopleIn(items, members);

  $: mentionCandidates = mentionQuery ? rankPeople(Object.values(people), mentionQuery.query, $sessionUser ?? null) : [];

  $: if (mentionIndex >= mentionCandidates.length) mentionIndex = 0;

  $: hasStart = items.some((i) => i.kind === 'start');

  $: grouped = buildGroups(items);

  $: lastSentId = lastOwnSent(items);

  $: pendingItems = $selectedRoomId ? ($pendingByRoom[$selectedRoomId] ?? []) : [];

  $: lastRealOwn = lastSenderIsOwn(items);

  function lastSenderIsOwn(list: TimelineItem[]): boolean {

    for (let i = list.length - 1; i >= 0; i -= 1) {

      const it = list[i];

      if (it.kind === 'event') return it.event.sender.user_id === $sessionUser;

    }

    return false;

  }

  function pendingShowSender(index: number): boolean {

    return index === 0 ? !lastRealOwn : false;

  }

  function pendingToEvent(p: PendingMessage): TimelineEvent {

    const state: SendState = p.status === 'failed' ? { kind: 'Failed', will_retry: false } : { kind: 'Sending' };

    return {

      item_id: `pending-${p.id}`,

      event_id: null,

      transaction_id: p.id,

      sender: {

        user_id: $sessionUser ?? '',

        display_name: profile?.display_name ?? null,

        avatar: null,

        name_ambiguous: false

      },

      timestamp_ms: p.createdAt,

      own: true,

      send_state: state,

      content: {

        kind: 'Message',

        message: { kind: 'Text', body: p.body, geo_uri: null, formatted_body: p.formatted, edited: false, media: null, link_previews: [] }

      },

      reply_to: p.replyTo,

      thread_root: null,

      thread_summary: null,

      reactions: [],

      read_by: [],

      editable: false

    };

  }

  interface Group {

    key: string;

    item: TimelineItem;

    showSender: boolean;

  }

  function lastOwnSent(list: TimelineItem[]): string | null {

    for (let i = list.length - 1; i >= 0; i--) {

      const item = list[i];

      if (item.kind === 'event' && item.event.own && item.event.send_state.kind === 'Sent') return item.event.item_id;

    }

    return null;

  }

  function buildGroups(list: TimelineItem[]): Group[] {

    const out: Group[] = [];

    let prevSender: string | null = null;

    let prevTs = 0;

    list.forEach((item, index) => {

      let showSender = true;

      if (item.kind === 'event') {

        const e = item.event;

        showSender =

          prevSender !== e.sender.user_id || Math.abs(e.timestamp_ms - prevTs) > 5 * 60 * 1000;

        prevSender = e.sender.user_id;

        prevTs = e.timestamp_ms;

        out.push({ key: e.item_id || e.event_id || `m-${index}`, item, showSender });

      } else {

        prevSender = null;

        out.push({ key: `${item.kind}-${index}`, item, showSender });

      }

    });

    return out;

  }

  function roomUnread(r: RoomSummary): number {

    return r.unread_messages + r.unread_mentions;

  }

  onMount(() => {

    void boot();

    return () => {

      disconnectEvents();

      stopTyping();

      if (readTimer !== null) window.clearTimeout(readTimer);

    };

  });

  async function boot(): Promise<void> {

    try {

      const session = await getSession();

      blocked.set(session.blocked ?? false);

      sessionUser.set(session.user_id);

      if (session.user_id) {

        softLogout.set(null);

        await refreshRooms();

        connectEvents();

        void loadProfile();

        void loadEncryption();

        void loadQuickReactions();

        void loadUrlPreviewSettings();

      } else {

        softLogout.set(session.soft_logout ?? null);

      }

    } catch (e) {

      pushBanner(e instanceof Error ? `Session check failed: ${e.message}` : 'Session check failed');

      sessionUser.set(null);

    } finally {

      booted = true;

    }

  }

  async function refreshRooms(): Promise<void> {

    roomsLoading = true;

    try {

      const res = await getRooms();

      rooms.set(res.rooms);

      pruneSpaceFilter();

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Could not load rooms');

    } finally {

      roomsLoading = false;

    }

  }

  async function loadProfile(): Promise<void> {

    try {

      const raw = await getProfile();

      profile = parseOwnProfile(raw);

      profileMxc = profile.avatar_url;

    } catch {

      profile = null;

    }

  }

  async function loadEncryption(): Promise<void> {

    try {

      const res = await getEncryption();

      const state = parseEncryptionState(res.state);

      if (state) encryption.set(state);

      const verificationState = parseVerificationState(res.verification);

      if (verificationState) verification.set(verificationState);

    } catch {

      // Encryption status also arrives over SSE; a failed first fetch is not fatal.

    }

  }

  function afterLogin(userId: string): void {

    sessionUser.set(userId);

    softLogout.set(null);

    blocked.set(false);

    void refreshRooms();

    connectEvents();

    void loadProfile();

    void loadEncryption();

    void loadQuickReactions();

    void loadUrlPreviewSettings();

  }

  async function doLogout(): Promise<void> {

    stopTyping();

    try {

      await logout();

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Logout failed');

      return;

    }

    disconnectEvents();

    resetClientState();

    softLogout.set(null);

    blocked.set(false);

    sessionUser.set(null);

    lightbox.set(null);

    composer = '';

    drafts = {};

    dialog = null;

    membersOpen = false;

    sidebarOpen = false;

    profile = null;

    profileMxc = null;

    selectedSpaceId = null;

    spaceChildIds = null;

    spaceChildrenError = null;

    openReady = {};

    openFailed = {};

    warmRooms = [];

    pickedMentions = {};

    mentionQuery = null;

    clearAllStaged();

    avatarByUser = {};

    resetPending();

  }

  /** Joined spaces that sit inside another joined space, keyed to one such parent. Either side of the link counts. */

  function parentSpaceMap(spaces: RoomSummary[]): Map<string, string> {

    const ids = new Set(spaces.map((s) => s.room_id));

    const parents = new Map<string, string>();

    for (const space of spaces) {

      for (const child of space.children) {

        if (child !== space.room_id && ids.has(child) && !parents.has(child)) parents.set(child, space.room_id);

      }

    }

    for (const space of spaces) {

      const parent = space.parent_spaces.find((id) => id !== space.room_id && ids.has(id));

      if (parent && !parents.has(space.room_id)) parents.set(space.room_id, parent);

    }

    for (const id of [...parents.keys()]) {

      const seen = new Set<string>([id]);

      let at = parents.get(id);

      while (at && !seen.has(at)) {

        seen.add(at);

        at = parents.get(at);

      }

      if (at) parents.delete(id);

    }

    return parents;

  }

  function topSpaceOf(id: string, parents: Map<string, string>): string {

    let at = id;

    while (parents.has(at)) at = parents.get(at)!;

    return at;

  }

  function pruneSpaceFilter(): void {

    if (!selectedSpaceId) return;

    if (!$rooms.some((r) => r.room_id === selectedSpaceId)) {

      selectedSpaceId = null;

      spaceChildIds = null;

      spaceChildrenError = null;

    }

  }

  async function selectHome(): Promise<void> {

    selectedSpaceId = null;

    spaceChildIds = null;

    spaceChildrenError = null;

    sidebarOpen = true;

  }

  async function selectSpace(spaceId: string): Promise<void> {

    if ($selectedRoomId && composer.trim()) drafts[$selectedRoomId] = composer;

    stopTyping();

    selectedSpaceId = spaceId;

    spaceChildIds = null;

    spaceChildrenError = null;

    spaceChildrenLoading = true;

    const last = $lastSpaceRooms[spaceId];

    const resume = last && $rooms.some((r) => r.room_id === last && !r.space) ? last : null;

    if (resume) {

      void selectRoom(resume);

    } else {

      sidebarOpen = true;

      // A space is navigation, not a message timeline.

      selectedRoomId.set(null);

    }

    try {

      const res = await getSpaceChildren(spaceId);

      if (selectedSpaceId === spaceId) {

        spaceChildIds = res.room_ids ?? [];

        if (resume && !spaceChildIds.includes(resume) && $selectedRoomId === resume) {

          sidebarOpen = true;

          selectedRoomId.set(null);

        }

      }

    } catch (e) {

      if (selectedSpaceId === spaceId) {

        spaceChildrenError = e instanceof Error ? e.message : 'Could not load rooms in this space';

        spaceChildIds = [];

      }

    } finally {

      if (selectedSpaceId === spaceId) spaceChildrenLoading = false;

    }

  }

  async function selectRoom(roomId: string): Promise<void> {

    if ($selectedRoomId && composer.trim()) drafts[$selectedRoomId] = composer;

    if (roomId === $selectedRoomId && openReady[roomId]) {

      sidebarOpen = false;

      return;

    }

    stopTyping();

    const spaceId = selectedSpaceId;

    if (spaceId) lastSpaceRooms.update((all) => ({ ...all, [spaceId]: roomId }));

    selectedRoomId.set(roomId);

    composer = drafts[roomId] ?? '';

    replyingTo = null;

    editing = null;

    mentionQuery = null;

    stickToBottom = true;

    lastReadKey = '';

    sidebarOpen = false;

    touchWarmRoom(roomId);

    if (openReady[roomId]) {

      if (membersOpen) void loadMembers(roomId);

      await tick();

      scrollToBottom();

      queueReadReceipt();

      composerEl?.focus();

      return;

    }

    if (openFailed[roomId]) {

      const nextFailed = { ...openFailed };

      delete nextFailed[roomId];

      openFailed = nextFailed;

    }

    try {

      await openRoom(roomId);

      if (warmRooms.includes(roomId)) openReady = { ...openReady, [roomId]: true };

    } catch (e) {

      const message = e instanceof Error ? e.message : `Could not open room ${roomId}`;

      openFailed = { ...openFailed, [roomId]: message };

      pushBanner(message);

    }

    if (membersOpen) void loadMembers(roomId);

    await tick();

    scrollToBottom();

    queueReadReceipt();

    composerEl?.focus();

  }

  function touchWarmRoom(roomId: string): void {

    warmRooms = [...warmRooms.filter((id) => id !== roomId), roomId];

    while (warmRooms.length > WARM_ROOM_LIMIT) {

      const evicted = warmRooms[0];

      warmRooms = warmRooms.slice(1);

      forgetOpenRoom(evicted);

      closeRoom(evicted).catch(() => undefined);

    }

  }

  function forgetOpenRoom(roomId: string): void {

    warmRooms = warmRooms.filter((id) => id !== roomId);

    const nextReady = { ...openReady };

    delete nextReady[roomId];

    openReady = nextReady;

  }

  function scrollToBottom(): void {

    if (timelineEl) timelineEl.scrollTop = timelineEl.scrollHeight;

  }

  let userScrollUntil = 0;

  let draggingScrollbar = false;

  function noteUserScroll(): void {

    userScrollUntil = performance.now() + 300;

  }

  function onTimelineKey(e: KeyboardEvent): void {

    if (['ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End', ' '].includes(e.key)) noteUserScroll();

  }

  function onTimelinePointer(e: PointerEvent): void {

    if (e.target === timelineEl) draggingScrollbar = true;

  }

  function onTimelineScroll(): void {

    if (!timelineEl) return;

    const gap = timelineEl.scrollHeight - timelineEl.scrollTop - timelineEl.clientHeight;

    if (gap < 80) stickToBottom = true;

    else if (draggingScrollbar || performance.now() < userScrollUntil) stickToBottom = false;

  }

  function pinTimeline(node: HTMLElement) {

    const observer = new ResizeObserver(() => {

      if (stickToBottom) scrollToBottom();

    });

    observer.observe(node);

    if (node.parentElement) observer.observe(node.parentElement);

    return { destroy: () => observer.disconnect() };

  }

  $: void trackTimeline($selectedRoomId, items);

  async function trackTimeline(roomId: string | null, list: TimelineItem[]): Promise<void> {

    if (!roomId || list.length === 0) return;

    if (roomId !== $selectedRoomId) return;

    await tick();

    if (stickToBottom) scrollToBottom();

    queueReadReceipt();

  }

  function queueReadReceipt(): void {

    if (readTimer !== null) window.clearTimeout(readTimer);

    readTimer = window.setTimeout(() => {

      readTimer = null;

      void sendReadReceipt();

    }, 800);

  }

  async function sendReadReceipt(): Promise<void> {

    const roomId = $selectedRoomId;

    if (!roomId) return;

    const list = $timelines[roomId] ?? [];

    for (let i = list.length - 1; i >= 0; i -= 1) {

      const entry = list[i];

      if (entry.kind === 'event' && entry.event.event_id) {

        const key = `${roomId}:${entry.event.event_id}`;

        if (key === lastReadKey) return;

        lastReadKey = key;

        try {

          await markRead(roomId, entry.event.event_id);

        } catch {

          return;

        }

        return;

      }

    }

  }

  function send(): void {

    if (editing) {

      submitEdit();

      return;

    }

    const roomId = $selectedRoomId;

    const body = composer.trim();

    const attachments = roomId ? (staged[roomId] ?? []) : [];

    if (!roomId || (!body && attachments.length === 0)) return;

    if (!openReady[roomId]) {

      pushBanner('Still opening this room — sending is disabled until the room is ready.');

      return;

    }

    if (attachments.length > 0 && uploadBusy) return;

    const command = attachments.length === 0 ? parseCommand(body) : null;

    if (command && !isKnownCommand(command.name)) {

      pushBanner(`Unknown command /${command.name}`);

      return;

    }

    composer = '';

    if (roomId in drafts) delete drafts[roomId];

    stickToBottom = true;

    const reply = replyingTo;

    replyingTo = null;

    const text = unescapeCommand(body);

    const mentions = resolveMentions(text, pickedMentions[roomId] ?? []);

    pickedMentions = { ...pickedMentions, [roomId]: [] };

    mentionQuery = null;

    if (command) {

      void execute(roomId, command, reply, mentions);

    } else if (attachments.length === 0) {

      queueSend(roomId, text, reply, mentions, $markdownEnabled);

    } else {

      const { [roomId]: _sent, ...rest } = staged;

      staged = rest;

      void sendAttachments(roomId, text, reply, mentions, attachments);

    }

    composerEl?.focus();

  }

  function lastOwnEventId(): string | null {

    for (let i = items.length - 1; i >= 0; i -= 1) {

      const entry = items[i];

      if (entry.kind === 'event' && entry.event.own && entry.event.event_id && entry.event.content.kind !== 'Redacted') {

        return entry.event.event_id;

      }

    }

    return null;

  }

  async function execute(roomId: string, command: ParsedCommand, reply: ReplyReference | null, mentions: Mention[]): Promise<void> {

    const { name, args } = command;

    const target = () => {

      const found = splitTarget(args, Object.values(people));

      if ('error' in found) throw new Error(found.error);

      return found;

    };

    const required = (what: string) => {

      if (!args) throw new Error(`/${name} needs ${what}`);

      return args;

    };

    try {

      switch (name) {

        case 'me':

        case 'notice':

          await sendMessage(roomId, required('something to say'), null, mentions, $markdownEnabled, name === 'me' ? 'emote' : 'notice');

          break;

        case 'msg': {

          const { user_id, rest } = target();

          const res = (await runCommand({ op: 'direct', user_id })) as { room_id: string };

          await refreshRooms();

          await selectRoom(res.room_id);

          if (rest) queueSend(res.room_id, rest, null, [], $markdownEnabled);

          break;

        }

        case 'join':

          await join(required('a room id or alias'));

          break;

        case 'leave':

          await leave();

          break;

        case 'invite':

          await runCommand({ op: 'invite', room_id: roomId, user_id: target().user_id });

          break;

        case 'disinvite':

        case 'kick':

        case 'ban':

        case 'unban': {

          const { user_id, rest } = target();

          const op = name === 'disinvite' ? 'kick' : name;

          await runCommand({ op, room_id: roomId, user_id, reason: rest || null });

          break;

        }

        case 'powerlevel': {

          const { user_id, rest } = target();

          const level = Number(rest);

          if (!rest || !Number.isInteger(level)) throw new Error('/powerlevel needs a whole number after the name');

          await runCommand({ op: 'set_power_level', room_id: roomId, user_id, level });

          break;

        }

        case 'mute':

        case 'unmute':

          await runCommand({ op: 'mute', room_id: roomId, user_id: target().user_id, muted: name === 'mute' });

          break;

        case 'ignore':

        case 'unignore':

          await runCommand({ op: name, user_id: target().user_id });

          break;

        case 'roomnick':

          await runCommand({ op: 'set_room_display_name', room_id: roomId, name: args || null });

          break;

        case 'roomavatar':

          if (!args) {

            avatarRoom = roomId;

            avatarInput?.click();

          } else if (args.startsWith('mxc://')) {

            await runCommand({ op: 'set_room_avatar', room_id: roomId, mxc: args });

          } else {

            throw new Error('/roomavatar takes an mxc:// link, or nothing to pick a file');

          }

          break;

        case 'delete': {

          const eventId = reply?.event_id ?? lastOwnEventId();

          if (!eventId) throw new Error('Nothing of yours to delete here');

          await runCommand({ op: 'redact', room_id: roomId, event_id: eventId, reason: args || null });

          break;

        }

        case 'globalnick':

          await runCommand({ op: 'set_display_name', name: required('a name') });

          await loadProfile();

          break;

        case 'globalavatar':

          if (!args) {

            avatarRoom = null;

            avatarInput?.click();

          } else if (args.startsWith('mxc://')) {

            await runCommand({ op: 'set_avatar', mxc: args });

            await loadProfile();

          } else {

            throw new Error('/globalavatar takes an mxc:// link, or nothing to pick a file');

          }

          break;

      }

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : `/${name} failed`);

    }

  }

  async function onAvatarChosen(): Promise<void> {

    const file = avatarInput?.files?.[0];

    if (avatarInput) avatarInput.value = '';

    if (!file) return;

    try {

      if (avatarRoom) {

        await uploadRoomAvatar(avatarRoom, file);

      } else {

        await uploadAvatar(file);

        await loadProfile();

      }

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Avatar upload failed');

    }

  }

  async function sendAttachments(

    roomId: string,

    body: string,

    reply: ReplyReference | null,

    mentions: Mention[],

    attachments: StagedAttachment[]

  ): Promise<void> {

    let first = true;

    uploadBusy = true;

    try {

      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);

          else await uploadAttachment(roomId, attachment.file);

          first = false;

        } catch (e) {

          pushBanner(e instanceof Error ? e.message : 'Upload failed');

        }

        if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);

      }

    } finally {

      uploadBusy = false;

      uploadName = null;

    }

  }

  function stageFiles(files: File[]): void {

    const roomId = $selectedRoomId;

    if (!roomId || !openReady[roomId]) return;

    const accepted: StagedAttachment[] = [];

    for (const file of files) {

      if (file.size === 0 || file.size > 20 * 1024 * 1024) {

        pushBanner(`${file.name || 'File'} must be between 1 byte and 20 MiB.`);

        continue;

      }

      const previewUrl = file.type.startsWith('image/') ? URL.createObjectURL(file) : null;

      accepted.push({ id: nextStagedId++, file, previewUrl });

    }

    if (accepted.length === 0) return;

    staged = { ...staged, [roomId]: [...(staged[roomId] ?? []), ...accepted] };

    composerEl?.focus();

  }

  function unstage(roomId: string, id: number): void {

    const list = staged[roomId] ?? [];

    const removed = list.find((a) => a.id === id);

    if (removed?.previewUrl) URL.revokeObjectURL(removed.previewUrl);

    staged = { ...staged, [roomId]: list.filter((a) => a.id !== id) };

  }

  function clearAllStaged(): void {

    for (const list of Object.values(staged)) {

      for (const attachment of list) if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);

    }

    staged = {};

  }

  function startEdit(eventId: string, body: string): void {

    const roomId = $selectedRoomId;

    if (!roomId) return;

    const stash = editing ? editing.stash : composer;

    editing = { roomId, eventId, original: body, stash };

    const entry = items.find((i) => i.kind === 'event' && i.event.event_id === eventId);

    if (entry?.kind === 'event' && entry.event.content.kind === 'Message') {

      const existing = mentionsFromHtml(entry.event.content.message.formatted_body);

      pickedMentions = { ...pickedMentions, [roomId]: [...(pickedMentions[roomId] ?? []), ...existing] };

    }

    composer = body;

    replyingTo = null;

    composerEl?.focus();

  }

  function cancelEdit(): void {

    if (!editing) return;

    composer = editing.stash;

    editing = null;

    composerEl?.focus();

  }

  function submitEdit(): void {

    if (!editing) return;

    const { roomId, eventId, original } = editing;

    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'));

  }

  function editLastOwn(): boolean {

    for (let i = items.length - 1; i >= 0; i -= 1) {

      const entry = items[i];

      if (entry.kind !== 'event' || !entry.event.own) continue;

      const ev = entry.event;

      if (!ev.editable || !ev.event_id || ev.content.kind !== 'Message' || ev.content.message.kind !== 'Text') return false;

      startEdit(ev.event_id, ev.content.message.body);

      return true;

    }

    return false;

  }

  function startReply(target: ReplyReference): void {

    if (editing) cancelEdit();

    replyingTo = target;

    composerEl?.focus();

  }

  function jumpTo(eventId: string): void {

    const el = timelineEl?.querySelector<HTMLElement>(`[data-event="${CSS.escape(eventId)}"]`);

    if (!el) {

      pushBanner('The original message is not loaded. Scroll up to load older messages.');

      return;

    }

    stickToBottom = false;

    el.scrollIntoView({ block: 'center', behavior: 'smooth' });

    el.classList.remove('flash');

    void el.offsetWidth;

    el.classList.add('flash');

  }

  let typedText = '';

  let typedRoom: string | null = null;

  $: trackTypingInput(composer, $selectedRoomId, openReady);

  function trackTypingInput(text: string, roomId: string | null, ready: Record<string, boolean>): void {

    const edited = roomId === typedRoom && text !== typedText;

    typedText = text;

    typedRoom = roomId;

    if (!roomId || !ready[roomId] || !text.trim()) {

      stopTyping();

    } else if (edited) {

      notifyTyping(roomId);

    }

  }

  $: void trackPending($selectedRoomId, pendingItems);

  async function trackPending(roomId: string | null, list: PendingMessage[]): Promise<void> {

    if (!roomId || list.length === 0) return;

    if (roomId !== $selectedRoomId) return;

    await tick();

    if (stickToBottom) scrollToBottom();

  }

  function updateMentionQuery(): void {

    const roomId = $selectedRoomId;

    const next = composerEl && roomId ? mentionQueryAt(composerEl.value, composerEl.selectionStart ?? composerEl.value.length) : null;

    if (next && !mentionQuery && roomId && !$membersByRoom[roomId]) void loadMembers(roomId);

    if (next?.start !== mentionQuery?.start) mentionIndex = 0;

    mentionQuery = next;

  }

  async function pickMention(person: Person): Promise<void> {

    const roomId = $selectedRoomId;

    if (!mentionQuery || !roomId || !composerEl) return;

    const caret = composerEl.selectionStart ?? composer.length;

    const inserted = `${person.name} `;

    composer = composer.slice(0, mentionQuery.start) + inserted + composer.slice(caret);

    const at = mentionQuery.start + inserted.length;

    pickedMentions = {

      ...pickedMentions,

      [roomId]: [...(pickedMentions[roomId] ?? []), { user_id: person.user_id, text: person.name }]

    };

    mentionQuery = null;

    await tick();

    composerEl.focus();

    composerEl.setSelectionRange(at, at);

  }

  function onComposerKey(ev: KeyboardEvent): void {

    if (mentionQuery && mentionCandidates.length > 0) {

      if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {

        ev.preventDefault();

        const step = ev.key === 'ArrowDown' ? 1 : -1;

        mentionIndex = (mentionIndex + step + mentionCandidates.length) % mentionCandidates.length;

        return;

      }

      if ((ev.key === 'Enter' && !ev.shiftKey) || ev.key === 'Tab') {

        ev.preventDefault();

        void pickMention(mentionCandidates[mentionIndex]);

        return;

      }

      if (ev.key === 'Escape') {

        ev.stopPropagation();

        mentionQuery = null;

        return;

      }

    }

    if (ev.key === 'Enter' && !ev.shiftKey && !insideOpenFence(composer, composerEl?.selectionStart ?? composer.length)) {

      ev.preventDefault();

      send();

    } else if (ev.key === 'Escape' && editing) {

      ev.stopPropagation();

      cancelEdit();

    } else if (ev.key === 'Escape' && replyingTo) {

      ev.stopPropagation();

      replyingTo = null;

    } else if (ev.key === 'ArrowUp' && !composer && !editing && editLastOwn()) {

      ev.preventDefault();

    }

  }

  function pickFiles(): void {

    const roomId = $selectedRoomId;

    if (!roomId || !openReady[roomId]) return;

    fileInput?.click();

  }

  function onFileChosen(): void {

    stageFiles(Array.from(fileInput?.files ?? []));

    if (fileInput) fileInput.value = '';

  }

  function onComposerPaste(ev: ClipboardEvent): void {

    const data = ev.clipboardData;

    // Office apps put a rendered image next to the copied text, so only take the image when there is no plain text.

    if (!data || data.types.includes('text/plain')) return;

    const images = Array.from(data.files).filter((f) => f.type.startsWith('image/'));

    if (images.length === 0) return;

    ev.preventDefault();

    stageFiles(images);

  }

  async function react(eventId: string, key: string, shortcode?: string): Promise<void> {

    const roomId = $selectedRoomId;

    if (!roomId || !eventId || reacting) return;

    reacting = true;

    try {

      await reactToMessage(roomId, eventId, key, shortcode);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Reaction failed');

    } finally {

      reacting = false;

    }

  }

  function previewLoader(roomId: string): (url: string) => void {

    return (url) => requestLinkPreview(roomId, url);

  }

  async function changeEncryptedPreviews(enabled: boolean): Promise<void> {

    try {

      await saveUrlPreviewSettings({ encrypted_rooms: enabled });

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Could not save link preview setting');

    }

  }

  async function changeQuickReactions(list: QuickReaction[]): Promise<void> {

    try {

      await saveQuickReactions(list);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Could not save quick reactions');

    }

  }

  async function paginate(): Promise<void> {

    const roomId = $selectedRoomId;

    if (!roomId || paginateBusy) return;

    paginateBusy = true;

    try {

      await paginateRoom(roomId);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Loading older messages failed');

    } finally {

      paginateBusy = false;

    }

  }

  async function loadMembers(roomId: string): Promise<void> {

    if (membersFor === roomId && $membersLoading) return;

    membersFor = roomId;

    membersLoading.set(true);

    try {

      const res = await getMembers(roomId);

      membersByRoom.update((all) => ({ ...all, [roomId]: res.members }));

      avatarByUser = { ...avatarByUser, ...avatarMap(res.members) };

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Could not load members');

    } finally {

      if (membersFor === roomId) membersLoading.set(false);

    }

  }

  function avatarMap(list: MemberSummary[]): Record<string, string | null> {

    const next: Record<string, string | null> = {};

    for (const member of list) next[member.user_id] = member.avatar;

    return next;

  }

  function peopleIn(list: TimelineItem[], roster: MemberSummary[]): Record<string, Person> {

    const out: Record<string, Person> = {};

    for (const item of list) {

      if (item.kind !== 'event') continue;

      const s = item.event.sender;

      out[s.user_id] = { user_id: s.user_id, name: senderLabel(s), avatar: s.avatar };

    }

    for (const m of roster) out[m.user_id] = { user_id: m.user_id, name: m.name, avatar: m.avatar };

    return out;

  }

  function senderAvatarFor(userId: string): string | null {

    return avatarByUser[userId] ?? null;

  }

  function toggleMembers(): void {

    membersOpen = !membersOpen;

    if (membersOpen && $selectedRoomId) void loadMembers($selectedRoomId);

  }

  async function join(target: string): Promise<void> {

    const room = target.trim();

    if (!room || joinBusy) return;

    joinBusy = true;

    try {

      const res = await joinRoom(room);

      joinTarget = '';

      dialog = null;

      await refreshRooms();

      await selectRoom(res.room_id);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Join failed');

    } finally {

      joinBusy = false;

    }

  }

  async function create(): Promise<void> {

    const name = createName.trim();

    if (!name || createBusy) return;

    createBusy = true;

    try {

      const res = await createRoom(name, createTopic.trim() || undefined);

      createName = '';

      createTopic = '';

      dialog = null;

      await refreshRooms();

      await selectRoom(res.room_id);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Create room failed');

    } finally {

      createBusy = false;

    }

  }

  async function leave(): Promise<void> {

    const roomId = $selectedRoomId;

    if (!roomId || leaveBusy) return;

    leaveBusy = true;

    stopTyping();

    try {

      await leaveRoom(roomId);

      if ($selectedRoomId === roomId) selectedRoomId.set(null);

      if (warmRooms.includes(roomId)) {

        forgetOpenRoom(roomId);

        closeRoom(roomId).catch(() => undefined);

      }

      await refreshRooms();

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Leave failed');

    } finally {

      leaveBusy = false;

    }

  }

  function connectionClass(state: string): string {

    if (state === 'online') return 'dot-online';

    if (state === 'connecting' || state === 'reconnecting') return 'dot-busy';

    return 'dot-off';

  }

  let dragSpaceId: string | null = null;

  let dropTarget: { id: string; after: boolean } | null = null;

  let railMenu: { room: RoomSummary; x: number; y: number } | null = null;

  let railMenuEl: HTMLDivElement | null = null;

  async function togglePin(room: RoomSummary): Promise<void> {

    railMenu = null;

    try {

      await runCommand({ op: 'set_favourite', room_id: room.room_id, favourite: !room.favourite });

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Could not change the pin');

    }

  }

  function startRailDrag(ev: DragEvent, id: string): void {

    dragSpaceId = id;

    if (ev.dataTransfer) {

      ev.dataTransfer.effectAllowed = 'move';

      ev.dataTransfer.setData('text/plain', id);

    }

  }

  function overRailSpace(ev: DragEvent, space: RoomSummary): void {

    const dragged = orderedRail.find((s) => s.room_id === dragSpaceId);

    if (!dragged || dragged.room_id === space.room_id || dragged.favourite !== space.favourite) return;

    ev.preventDefault();

    const rect = (ev.currentTarget as HTMLElement).getBoundingClientRect();

    dropTarget = { id: space.room_id, after: ev.clientY > rect.top + rect.height / 2 };

  }

  async function dropRailSpace(): Promise<void> {

    const moved = dragSpaceId;

    const target = dropTarget;

    dragSpaceId = null;

    dropTarget = null;

    if (!moved || !target) return;

    const ids = orderedRail.map((s) => s.room_id);

    const before = target.after ? (ids[ids.indexOf(target.id) + 1] ?? null) : target.id;

    const order = moveBefore(ids, moved, before === moved ? null : before);

    if (order.join() === ids.join()) return;

    railOverride = order;

    try {

      await runCommand({ op: 'reorder_spaces', order });

    } catch (e) {

      railOverride = null;

      pushBanner(e instanceof Error ? e.message : 'Could not reorder spaces');

    }

  }

  let roomMenuOpen = false;

  let roomMenuEl: HTMLDivElement | null = null;

  function roomMenuAction(action: () => void): void {

    roomMenuOpen = false;

    action();

  }

  function closeRoomMenuOutside(ev: PointerEvent): void {

    if (roomMenuOpen && !roomMenuEl?.contains(ev.target as Node)) roomMenuOpen = false;

    if (railMenu && !railMenuEl?.contains(ev.target as Node)) railMenu = null;

  }

  function onKeydown(ev: KeyboardEvent): void {

    if (ev.key === 'Escape') {

      if (roomMenuOpen) roomMenuOpen = false;

      else if (railMenu) railMenu = null;

      else if (dialog) dialog = null;

      else if (membersOpen && window.innerWidth < 1100) membersOpen = false;

      else if (sidebarOpen) sidebarOpen = false;

    }

  }

</script>

<svelte:window

  on:keydown={onKeydown}

  on:pointerdown={closeRoomMenuOutside}

  on:pointerup={() => (draggingScrollbar = false)}

/>

{#if !booted}

  <div class="splash" role="status" aria-label="Loading Malice">

    <div class="splash-mark" aria-hidden="true">M</div>

    <p>Loading Malice…</p>

  </div>

{:else if $blocked}

  <div class="splash" role="status" aria-label="Malice is open in another tab">

    <div class="splash-mark" aria-hidden="true">M</div>

    <p>Malice is open in another tab. Close this tab or use that one instead.</p>

  </div>

{:else if $sessionUser == null}

  <LoginPanel softLogout={$softLogout} on:done={(ev) => afterLogin(ev.detail)} />

{:else}

  <div

    class="app"

    class:nav-folded={$navFolded && selectedRoom}

    class:rail-folded={$railFolded && selectedRoom}

    class:members-open={selectedRoom && membersOpen}

    style:--msg-gap={`${$messageSpacing}px`}

    style:--msg-line-height={$lineHeight}

  >

    <nav class="rail" aria-label="Servers and spaces">

      <button

        type="button"

        class="rail-btn"

        class:active={selectedSpaceId === null}

        title="Home — all channels"

        aria-label="Home — all channels"

        aria-pressed={selectedSpaceId === null}

        on:click={() => void selectHome()}

      >

        <span aria-hidden="true">⌂</span>

      </button>

      {#each [pinnedRail, otherRail] as group}

        {#if group.length > 0}

          <div class="rail-sep" aria-hidden="true"></div>

        {/if}

        {#each group as space (space.room_id)}

          <button

            type="button"

            class="rail-btn rail-space"

            class:active={railSelected === space.room_id}

            class:drop-before={dropTarget?.id === space.room_id && !dropTarget.after}

            class:drop-after={dropTarget?.id === space.room_id && dropTarget.after}

            class:pinned={space.favourite}

            title={space.name}

            aria-label={`Show channels in space ${space.name}`}

            aria-pressed={selectedSpaceId === space.room_id}

            draggable="true"

            on:click={() => void selectSpace(space.room_id)}

            on:contextmenu|preventDefault={(ev) => (railMenu = { room: space, x: ev.clientX, y: ev.clientY })}

            on:dragstart={(ev) => startRailDrag(ev, space.room_id)}

            on:dragover={(ev) => overRailSpace(ev, space)}

            on:dragleave={() => dropTarget?.id === space.room_id && (dropTarget = null)}

            on:drop|preventDefault={() => void dropRailSpace()}

            on:dragend={() => ((dragSpaceId = null), (dropTarget = null))}

          >

            <MxcAvatar mxc={space.avatar} label={space.name} size={44} shape="rounded" />

          </button>

        {/each}

      {/each}

      <button

        type="button"

        class="rail-btn rail-add"

        aria-label="Join or create a room"

        on:click={() => {

          dialog = 'join';

        }}

      >

        <span aria-hidden="true">＋</span>

      </button>

    </nav>

    {#if railMenu}

      {@const menuRoom = railMenu.room}

      <div class="room-menu rail-menu" role="menu" style={`left:${railMenu.x}px;top:${railMenu.y}px`} bind:this={railMenuEl}>

        <button type="button" role="menuitem" on:click={() => void togglePin(menuRoom)}>

          {menuRoom.favourite ? 'Unpin' : 'Pin to top'}

        </button>

      </div>

    {/if}

    <aside class="sidebar" class:open={sidebarOpen} aria-label="Rooms">

      <div class="side-search">

        <label class="visually-hidden" for="room-search">Search rooms</label>

        <input

          id="room-search"

          type="search"

          placeholder="Search rooms"

          bind:value={search}

          autocomplete="off"

        />

        <button

          type="button"

          class="icon-btn"

          title="Refresh rooms"

          aria-label="Refresh rooms"

          disabled={roomsLoading}

          on:click={() => void refreshRooms()}

        >

          <span aria-hidden="true">⟳</span>

        </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}

        {#if roomsLoading && $rooms.length === 0}

          <p class="side-note">Loading rooms…</p>

        {:else if $rooms.length === 0}

          <p class="side-note">No rooms yet</p>

          <div class="side-cta">

            <button type="button" on:click={() => (dialog = 'join')}>Join a room</button>

            <button type="button" on:click={() => (dialog = 'create')}>Create one</button>

          </div>

        {:else}

          {#if selectedSpaceId && spaceChildrenLoading}

            <p class="side-note">Loading channels…</p>

          {:else if selectedSpaceId && spaceChildrenError}

            <p class="side-note" role="alert">{spaceChildrenError}</p>

            <div class="side-cta">

              <button type="button" on:click={() => selectedSpaceId && void selectSpace(selectedSpaceId)}>Retry</button>

              <button type="button" on:click={() => void selectHome()}>Back to Home</button>

            </div>

          {:else if selectedSpaceId && spaceChildIds && channelRooms.length === 0}

            <p class="side-note">No channels</p>

            <div class="side-cta">

              <button type="button" on:click={() => void selectHome()}>Back to Home</button>

            </div>

          {:else}

            {#if invites.length > 0 && !selectedSpaceId}

              <h2 class="side-h">Invites</h2>

              <ul class="room-list">

                {#each invites as room (room.room_id)}

                  <li>

                    <button

                      type="button"

                      class="room-row"

                      class:active={$selectedRoomId === room.room_id}

                      on:click={() => void selectRoom(room.room_id)}

                    >

                      <MxcAvatar mxc={room.avatar} label={room.name} size={26} shape="rounded" />

                      <span class="room-name">{room.name}</span>

                      <span

                        class="invite-join"

                        role="button"

                        tabindex="0"

                        aria-label={`Join ${room.name}`}

                        on:click|stopPropagation={() => void join(room.room_id)}

                        on:keydown|stopPropagation={(ev) => {

                          if (ev.key === 'Enter' || ev.key === ' ') {

                            ev.preventDefault();

                            void join(room.room_id);

                          }

                        }}

                      >

                        Join

                      </span>

                    </button>

                  </li>

                {/each}

              </ul>

            {/if}

            {#if directRooms.length > 0}

              <h2 class="side-h">Direct messages</h2>

              <ul class="room-list">

                {#each directRooms as room (room.room_id)}

                  <li class="room-item">

                    <button

                      type="button"

                      class="room-row"

                      class:active={$selectedRoomId === room.room_id}

                      aria-current={$selectedRoomId === room.room_id ? 'true' : undefined}

                      on:click={() => void selectRoom(room.room_id)}

                    >

                      <MxcAvatar mxc={room.avatar} label={room.name} size={26} />

                      <span class="room-name">{room.name}</span>

                      {#if roomUnread(room) > 0}

                        <span

                          class="badge"

                          class:mention={room.unread_mentions > 0}

                          aria-label={`${roomUnread(room)} unread`}

                        >

                          {roomUnread(room) > 99 ? '99+' : roomUnread(room)}

                        </span>

                      {/if}

                    </button>

                    <PinButton pinned={room.favourite} label={room.name} onToggle={() => void togglePin(room)} />

                  </li>

                {/each}

              </ul>

            {/if}

            {#if groupRooms.length > 0}

              <h2 class="side-h">{selectedSpace ? 'Channels' : 'Rooms'}</h2>

              <ul class="room-list">

                {#each groupRooms as room (room.room_id)}

                  <li class="room-item">

                    <button

                      type="button"

                      class="room-row"

                      class:active={$selectedRoomId === room.room_id}

                      aria-current={$selectedRoomId === room.room_id ? 'true' : undefined}

                      on:click={() => void selectRoom(room.room_id)}

                    >

                      <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

                          class="badge"

                          class:mention={room.unread_mentions > 0}

                          aria-label={`${roomUnread(room)} unread`}

                        >

                          {roomUnread(room) > 99 ? '99+' : roomUnread(room)}

                        </span>

                      {/if}

                    </button>

                    <PinButton pinned={room.favourite} label={room.name} onToggle={() => void togglePin(room)} />

                  </li>

                {/each}

              </ul>

            {/if}

            {#if spaceList.length > 0}

              <h2 class="side-h">{selectedSpace ? 'Subspaces' : 'Spaces'}</h2>

              <ul class="room-list">

                {#each spaceList as room (room.room_id)}

                  <li class="room-item">

                    <button

                      type="button"

                      class="room-row"

                      class:active={selectedSpaceId === room.room_id}

                      aria-label={`Show channels in space ${room.name}`}

                      on:click={() => void selectSpace(room.room_id)}

                    >

                      <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)} />

                  </li>

                {/each}

              </ul>

            {/if}

            {#if query && visibleRooms.length === 0}

              <p class="side-note">No rooms match “{search.trim()}”.</p>

            {/if}

          {/if}

        {/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>

        </button>

        <button

          type="button"

          class="icon-btn"

          title="Settings"

          aria-label="Settings"

          on:click={() => (dialog = 'settings')}

        >

          <span aria-hidden="true">⚙</span>

        </button>

        <button type="button" class="icon-btn" title="Log out" aria-label="Log out" on:click={() => void doLogout()}>

          <span aria-hidden="true">⏻</span>

        </button>

      </div>

    </aside>

    {#if sidebarOpen}

      <button type="button" class="scrim" aria-label="Close room list" on:click={() => (sidebarOpen = false)}></button>

    {/if}

    <main class="chat">

        {#if $banners.length > 0}

          <div class="banners" aria-live="polite">

            {#each $banners as banner (banner.id)}

              <div class="banner" role="alert">

                <span>{banner.message}</span>

                <button

                  type="button"

                  aria-label="Dismiss error"

                  on:click={() => dismissBanner(banner.id)}

                >

                  ✕

                </button>

              </div>

            {/each}

          </div>

        {/if}

      {#if !selectedRoom}

        <div class="empty">

          <div class="empty-mark" aria-hidden="true">◈</div>

          {#if selectedSpace}

            <h1>{selectedSpace.name}</h1>

          {:else}

            <h1>Welcome to Malice</h1>

          {/if}

          <div class="empty-cta">

            <button type="button" class="primary-btn" on:click={() => (dialog = 'join')}>Join a room</button>

            <button type="button" class="ghost-btn" on:click={() => (dialog = 'create')}>Create a room</button>

          </div>

          <p class="conn-line">

            <span class="dot {connectionClass($connection)}" aria-hidden="true"></span>

            {$connection}

          </p>

        </div>

      {:else}

        <header class="chat-head">

          <button

            type="button"

            class="icon-btn only-mobile"

            aria-label="Open room list"

            on:click={() => (sidebarOpen = true)}

          >

            <span aria-hidden="true">☰</span>

          </button>

          <button

            type="button"

            class="icon-btn only-desktop pane-toggle"

            aria-pressed={!$railFolded}

            aria-label={$railFolded ? 'Show spaces' : 'Hide spaces'}

            title={$railFolded ? 'Show spaces' : 'Hide spaces'}

            on:click={() => railFolded.update((v) => !v)}

          >

            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">

              <rect x="3" y="4" width="18" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2" />

              <circle cx="7" cy="9" r="1.4" fill="currentColor" />