malice

<script lang="ts">

  import { onMount, tick } from 'svelte';

  import { fade, fly } from 'svelte/transition';

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

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

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

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

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

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

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

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

  import type { ScopeOption } from './lib/search-model';

  import { releaseStaged, stageFiles as stageAttachments, type StagedAttachment, type StickerHandlers } from './lib/staging';

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

  import { loadOlderThreads, loadPinnedThreads, openThread, showThread, syncThreadLists, threadsByRoom } from './lib/threads';

  import { threadMatches } from './lib/thread-index';

  import ContextMenu, { type MenuItem } from './lib/ContextMenu.svelte';

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

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

  import type { CloneSource } from './lib/pack-clone';

  import { allPacks, findSticker, reactionShortcode } from './lib/packs';

  import { disabledPackImages, loadPackPreferences } from './lib/pack-preferences';

  import { enabledPacks, enabledQuickReactions } from './lib/pack-preferences-model';

  import type { CommandRequest } from './lib/transport';

  import UserCard, { type UserAction } from './lib/UserCard.svelte';

  import { allowed, canRedact, groupMembers, isMuted, parsePowerLevels, type PowerLevels } from './lib/permissions';

  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,

    fillHistoryGap,

    retryRecentHistory as requestRecentHistory,

    joinRoom,

    leaveRoom,

    logout,

    markRead,

    openRoom,

    paginateRoom,

    reactToMessage,

    runCommand,

    sendMessage,

    uploadAttachment,

    uploadAvatar,

    uploadRoomAvatar,

    editMessage

  } from './lib/api';

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

  import { customEmotes, resolveEmotes } from './lib/emotes';

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

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

  import {

    threadLists,

    banners,

    blocked,

    connectEvents,

    connection,

    disconnectEvents,

    dismissBanner,

    encryption,

    membersByRoom,

    membersLoading,

    mentionsSnapshot,

    pushBanner,

    imagePacks,

    markTimelineOpened,

    recentHistory,

    resetClientState,

    rooms,

    selectedRoomId,

    sessionUser,

    softLogout,

    threadTimelines,

    timelines,

    pinnedTimelines,

    pinnedTimelineVersions,

    verification

  } from './lib/store';

  import { discardPending, pendingByRoom, queueSend, resetPending, retryPending } from './lib/pending';

  import type { PendingMessage } from './lib/pending';

  import { TimelineViewport } from './lib/timeline-viewport';

  import { mentionsFromHtml, resolveMentions } from './lib/mentions';

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

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

  import { loadKeywords } from './lib/keywords';

  import {

    linkPreviews,

    loadUrlPreviewSettings,

    requestLinkPreview,

    saveUrlPreviewSettings,

    urlPreviewSettings

  } from './lib/link-previews';

  import { notifyTyping, stopTyping } from './lib/typing';

  import {

    MEMBERS_WIDTH,

    SIDE_WIDTH,

    THREAD_WIDTH,

    lastSpaceRooms,

    lineHeight,

    membersWidth,

    messageSpacing,

    navFolded,

    railFolded,

    sideWidth,

    threadWidth

  } 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, 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' | 'packs' | null = null;

  let cloneSource: CloneSource | null = null;

  let joinTarget = '';

  let joinBusy = false;

  let createName = '';

  let createTopic = '';

  let createBusy = false;

  let leaveBusy = false;

  let paginateBusy = false;

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

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

  let historyAccount: string | null | undefined;

  $: if ($sessionUser !== historyAccount) {

    historyAccount = $sessionUser;

    fillingGaps = {};

    recentRetrying = {};

  }

  let reacting = false;

  let composer = '';

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

  let stickToBottom = true;

  let timelineEl: HTMLElement | null = null;

  let timelineViewport: TimelineViewport | null = null;

  let composerRef: Composer | null = null;

  let avatarInput: HTMLInputElement | null = null;

  let uploadBusy = false;

  let uploadName: string | null = 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[]> = {};

  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 mentionsOpen = false;

  let searchOpen = false;

  let searchScopes: ScopeOption[] = [{ label: 'Everywhere', scope: { kind: 'all' } }];

  let spaceChildIds: string[] | null = null;

  let spaceChildrenLoading = false;

  let spaceChildrenError: string | null = null;

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

  let restoringRoute = false;

  function motionDuration(ms: number): number {

    return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : ms;

  }

  // 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 loadKeywords();

      void loadPinnedThreads();

      void loadPackPreferences();

      void loadUrlPreviewSettings();

    }

    wasOnline = online;

  }

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

  $: recentState = $selectedRoomId ? $recentHistory[$selectedRoomId] : undefined;

  $: roomPacks = enabledPacks(packsForRoom($imagePacks, $selectedRoomId, $rooms), $disabledPackImages);

  $: roomEmotes = customEmotes(roomPacks);

  $: usableQuickReactions = enabledQuickReactions($quickReactions, allPacks($imagePacks), $disabledPackImages);

  $: 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) ||

          ($threadsByRoom[r.room_id] ?? []).some((t) => threadMatches(t, 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] ?? []) : [];

  $: memberGroups = groupMembers(members, roomLevels);

  $: people = peopleIn(items, members);

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

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

  function roomUnread(r: RoomSummary): number {

    return r.unread_messages + r.unread_mentions;

  }

  function recordRoute(spaceId: string | null, roomId: string | null, view?: string): void {

    if (restoringRoute) return;

    const url = new URL(window.location.href);

    url.searchParams.delete('space');

    url.searchParams.delete('room');

    url.searchParams.delete('view');

    if (view) url.searchParams.set('view', view);

    if (spaceId) url.searchParams.set('space', spaceId);

    if (roomId) url.searchParams.set('room', roomId);

    const next = `${url.pathname}${url.search}${url.hash}`;

    const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;

    if (next !== current) window.history.pushState({ spaceId, roomId }, '', next);

  }

  async function restoreRoute(): Promise<void> {

    const url = new URL(window.location.href);

    const roomId = url.searchParams.get('room');

    const spaceId = url.searchParams.get('space');

    restoringRoute = true;

    try {

      if (url.searchParams.get('view') === 'mentions') {

        selectMentions();

      } else if (url.searchParams.get('view') === 'search') {

        selectSearch();

      } else if (roomId && $rooms.some((room) => room.room_id === roomId && !room.space)) {

        selectedSpaceId = spaceId && $rooms.some((room) => room.room_id === spaceId && room.space) ? spaceId : null;

        spaceChildrenError = null;

        spaceChildIds = selectedSpaceId ? (await getSpaceChildren(selectedSpaceId)).room_ids ?? [] : null;

        await selectRoom(roomId);

      } else if (spaceId && $rooms.some((room) => room.room_id === spaceId && room.space)) {

        await selectSpace(spaceId);

      } else {

        await selectHome();

      }

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Could not restore navigation');

    } finally {

      restoringRoute = false;

    }

  }

  function isEditable(target: EventTarget | null): boolean {

    if (!(target instanceof HTMLElement)) return false;

    return target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement || target.isContentEditable;

  }

  onMount(() => {

    const onPopState = () => void restoreRoute();

    const onAttention = () => queueReadReceipt();

    const hidePointer = (e: KeyboardEvent) => {

      if (e.ctrlKey || e.metaKey || e.altKey || !isEditable(e.target)) return;

      if (e.key.length === 1 || e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Enter') {

        document.documentElement.classList.add('pointer-hidden');

      }

    };

    const showPointer = () => document.documentElement.classList.remove('pointer-hidden');

    const movePointer = (e: PointerEvent) => {

      if (e.movementX !== 0 || e.movementY !== 0) showPointer();

    };

    window.addEventListener('popstate', onPopState);

    window.addEventListener('focus', onAttention);

    document.addEventListener('visibilitychange', onAttention);

    window.addEventListener('keydown', hidePointer, true);

    window.addEventListener('pointermove', movePointer);

    window.addEventListener('pointerdown', showPointer);

    void boot();

    return () => {

      window.removeEventListener('popstate', onPopState);

      window.removeEventListener('focus', onAttention);

      document.removeEventListener('visibilitychange', onAttention);

      window.removeEventListener('keydown', hidePointer, true);

      window.removeEventListener('pointermove', movePointer);

      window.removeEventListener('pointerdown', showPointer);

      showPointer();

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

        await restoreRoute();

        connectEvents();

        void loadProfile();

        void loadEncryption();

        void loadQuickReactions();

        void loadKeywords();

        void loadPinnedThreads();

        void loadPackPreferences();

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

    void loadPinnedThreads();

    void loadPackPreferences();

    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;

    cloneSource = null;

    membersOpen = false;

    sidebarOpen = false;

    profile = null;

    profileMxc = null;

    mentionsOpen = false;

    searchOpen = false;

    selectedSpaceId = null;

    spaceChildIds = null;

    spaceChildrenError = null;

    openReady = {};

    openFailed = {};

    warmRooms = [];

    pickedMentions = {};

    composerRef?.closeFinders();

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

    mentionsOpen = false;

    searchOpen = false;

    selectedSpaceId = null;

    spaceChildIds = null;

    spaceChildrenError = null;

    if (window.innerWidth > 640) navFolded.set(false);

    sidebarOpen = true;

    recordRoute(null, null);

  }

  function stashDraft(): void {

    const roomId = $selectedRoomId;

    if (!roomId) return;

    if (composer.trim()) drafts[roomId] = composer;

    else delete drafts[roomId];

  }

  function selectMentions(): void {

    stashDraft();

    stopTyping();

    selectedSpaceId = null;

    spaceChildIds = null;

    spaceChildrenError = null;

    spaceChildrenLoading = false;

    selectedRoomId.set(null);

    replyingTo = null;

    editing = null;

    composerRef?.closeFinders();

    peeking = null;

    membersOpen = false;

    sidebarOpen = false;

    searchOpen = false;

    mentionsOpen = true;

    recordRoute(null, null, 'mentions');

  }

  function selectSearch(): void {

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

    const options: ScopeOption[] = [];

    if (fromRoom) options.push({ label: fromRoom.name, scope: { kind: 'room', room_id: fromRoom.room_id } });

    if (selectedSpace && spaceChildIds) {

      const roomIds = spaceChildIds.filter((id) => $rooms.some((r) => r.room_id === id && !r.space));

      if (roomIds.length) options.push({ label: selectedSpace.name, scope: { kind: 'rooms', room_ids: roomIds } });

    }

    options.push({ label: 'Everywhere', scope: { kind: 'all' } });

    stashDraft();

    stopTyping();

    selectedRoomId.set(null);

    replyingTo = null;

    editing = null;

    composerRef?.closeFinders();

    peeking = null;

    membersOpen = false;

    sidebarOpen = false;

    mentionsOpen = false;

    searchScopes = options;

    searchOpen = true;

    recordRoute(selectedSpaceId, null, 'search');

  }

  function toggleChannelsPane(): void {

    if (window.innerWidth <= 640) sidebarOpen = !sidebarOpen;

    else navFolded.update((v) => !v);

  }

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

    mentionsOpen = false;

    searchOpen = false;

    stashDraft();

    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 {

      selectedRoomId.set(null);

    }

    try {

      const res = await getSpaceChildren(spaceId);

      if (selectedSpaceId === spaceId) {

        spaceChildIds = res.room_ids ?? [];

        const firstChannel = spaceChildIds

          .map((id) => $rooms.find((room) => room.room_id === id))

          .find((room) => room && !room.space);

        if ((!resume || !spaceChildIds.includes(resume)) && firstChannel) {

          await selectRoom(firstChannel.room_id);

        }

      }

    } 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, peek = false): Promise<void> {

    mentionsOpen = false;

    searchOpen = false;

    peeking = peek ? roomId : null;

    stashDraft();

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

      sidebarOpen = false;

      return;

    }

    stopTyping();

    const spaceId = selectedSpaceId;

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

    selectedRoomId.set(roomId);

    recordRoute(selectedSpaceId, roomId);

    composer = drafts[roomId] ?? '';

    replyingTo = null;

    editing = null;

    composerRef?.closeFinders();

    stickToBottom = true;

    lastReadKey = '';

    sidebarOpen = false;

    touchWarmRoom(roomId);

    if (openReady[roomId]) {

      if (membersOpen) void loadMembers(roomId);

      await tick();

      scrollToBottom();

      queueReadReceipt();

      composerRef?.focus();

      return;

    }

    if (openFailed[roomId]) {

      const nextFailed = { ...openFailed };

      delete nextFailed[roomId];

      openFailed = nextFailed;

    }

    try {

      markTimelineOpened(roomId);

      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 ($selectedRoomId !== roomId) return;

    if (membersOpen) void loadMembers(roomId);

    await tick();

    scrollToBottom();

    queueReadReceipt();

    composerRef?.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 (timelineViewport?.element === timelineEl) timelineViewport.scrollToBottom();

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

  }

  function noteUserScroll(): void {

    timelineViewport?.releaseScroll();

  }

  function onTimelineKey(e: KeyboardEvent): void {

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

  }

  function onTimelineScroll(): void {

    if (!timelineEl) return;

    if (timelineViewport?.consumeScroll()) return;

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

    const wasAtBottom = stickToBottom;

    stickToBottom = gap < 2;

    if (stickToBottom && !wasAtBottom) queueReadReceipt();

    timelineViewport?.capture();

    if (timelineEl.scrollTop < 80 && !hasStart && !paginateBusy) void paginate();

  }

  function pinTimeline(node: HTMLElement) {

    const viewport = new TimelineViewport(node.parentElement!, $selectedRoomId);

    timelineViewport = viewport;

    const observer = new ResizeObserver(() => {

      if (timelineViewport !== viewport || viewport.roomId !== $selectedRoomId) return;

      if (stickToBottom) viewport.scrollToBottom(true);

      else viewport.restore();

    });

    observer.observe(node);

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

    return { destroy: () => {

      observer.disconnect();

      viewport.releaseScroll();

      if (timelineViewport === viewport) timelineViewport = null;

    } };

  }

  $: 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 (roomId !== $selectedRoomId || timelineViewport?.roomId !== roomId) return;

    if (stickToBottom) timelineViewport.scrollToBottom(true);

    else timelineViewport.restore();

    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 || roomId === peeking) return;

    if (document.hidden || !document.hasFocus() || !stickToBottom) 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 = parseCommand(body);

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

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

      return;

    }

    if (command && attachments.length > 0) {

      if (command.name !== 'roomavatar' && command.name !== 'globalavatar') {

        pushBanner(`/${command.name} doesn't take attachments`);

        return;

      }

      if (command.args || attachments.length !== 1 || !attachments[0].file.type.startsWith('image/')) {

        pushBanner(`/${command.name} takes a single attached image`);

        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]: [] };

    composerRef?.closeFinders();

    if (command) {

      const image = attachments[0] ?? null;

      if (image) {

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

        staged = rest;

      }

      void execute(roomId, command, reply, mentions, image?.file ?? null).finally(() => {

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

      });

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

      queueSend(roomId, text, reply, mentions, resolveEmotes(text, roomEmotes));

    } else {

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

      staged = rest;

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

    }

    if (peeking === roomId) stopPeeking();

    composerRef?.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[],

    image: File | null

  ): 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': {

          const said = required('something to say');

          await sendMessage(roomId, said, null, mentions, name === 'me' ? 'emote' : 'notice', resolveEmotes(said, roomEmotes));

          break;

        }

        case 'sticker': {

          const { pack, sticker } = findSticker(enabledPacks(packsForRoom($imagePacks, roomId, $rooms), $disabledPackImages), required('a sticker name'));

          await runCommand({ op: 'send_sticker', room_id: roomId, pack_id: pack.id, shortcode: sticker.shortcode });

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

          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 (image) {

            await uploadRoomAvatar(roomId, image);

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

            throw new Error('/roomavatar takes an mxc:// link, an attached image, or nothing to drop the override');

          } else {

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

          }

          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 (image) {

            await uploadAvatar(image);

            await loadProfile();

          } else if (!args) {

            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 {

      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, resolveEmotes(body, roomEmotes));

          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 = stageAttachments(files, pushBanner);

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

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

    composerRef?.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)) releaseStaged(list);

    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;

    composerRef?.focus();

  }

  function cancelEdit(): void {

    if (!editing) return;

    composer = editing.stash;

    editing = null;

    composerRef?.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] ?? []), resolveEmotes(body, roomEmotes)).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;

    composerRef?.focus();

  }

  let pinnedOpenFor: string | null = null;

  let pinnedCloseVersion = 0;

  let pinsExpanded = false;

  let pinPreview: TimelineEvent | null = null;

  let pinJumpBusy = false;

  $: syncPinned(selectedRoom?.room_id ?? null, (selectedRoom?.pinned_events.length ?? 0) > 0, $selectedRoomId ? $pinnedTimelineVersions[$selectedRoomId] ?? 0 : 0);

  function syncPinned(roomId: string | null, hasPins: boolean, version: number): void {

    const want = hasPins ? roomId : null;

    if (want === pinnedOpenFor && version === pinnedCloseVersion) return;

    if (pinnedOpenFor) runCommand({ op: 'close_pinned', room_id: pinnedOpenFor }).catch(() => undefined);

    pinnedOpenFor = want;

    pinnedCloseVersion = version;

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

    );

  }

  async function jumpToPin(eventId: string): Promise<void> {

    const roomId = $selectedRoomId;

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

    pinsExpanded = false;

    const pinned = pins.find((event) => event.event_id === eventId) ?? null;

    if (pinned?.thread_root) {

      openThreadHere(pinned.thread_root, eventId);

      return;

    }

    pinPreview = pinned;

    pinJumpBusy = true;

    try {

      for (let attempt = 0; attempt < 24; attempt += 1) {

        if (($timelines[roomId] ?? []).some((item) => item.kind === 'event' && item.event.event_id === eventId)) {

          pinPreview = null;

          await tick();

          jumpTo(eventId);

          return;

        }

        await paginateRoom(roomId);

        await new Promise((resolve) => window.setTimeout(resolve, 180));

      }

      pushBanner('Could not load that pinned message');

    } catch (e) {

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

    } finally {

      pinJumpBusy = false;

    }

  }

  function jumpTo(eventId: string): void {

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

    const root = !el && $selectedRoomId ? threadHolding($selectedRoomId, eventId) : null;

    if (root) {

      openThreadHere(root, eventId);

      return;

    }

    if (!el) {

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

      return;

    }

    stickToBottom = false;

    timelineViewport?.releaseScroll();

    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 && roomId !== peeking) {

      notifyTyping(roomId);

    }

  }

  $: void trackPending($selectedRoomId, pendingItems);

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

    if (!roomId) return;

    if (roomId !== $selectedRoomId) return;

    await tick();

    if (roomId !== $selectedRoomId || timelineViewport?.roomId !== roomId) return;

    if (stickToBottom) timelineViewport.scrollToBottom(true);

    else timelineViewport.restore();

  }

  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, reactionShortcode(key, shortcode, allPacks($imagePacks)));

    } 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 || $recentHistory[roomId] === 'Loading') return;

    paginateBusy = true;

    try {

      await paginateRoom(roomId);

    } catch (e) {

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

    } finally {

      paginateBusy = false;

    }

  }

  async function fillGap(gapId: string): Promise<void> {

    const roomId = $selectedRoomId;

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

    fillingGaps = { ...fillingGaps, [roomId]: gapId };

    try {

      await fillHistoryGap(roomId, gapId);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Loading the missing history failed');

    } finally {

      if (fillingGaps[roomId] === gapId) {

        const { [roomId]: _done, ...rest } = fillingGaps;

        fillingGaps = rest;

      }

    }

  }

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

    if (recentRetrying[roomId]) return;

    recentRetrying = { ...recentRetrying, [roomId]: true };

    try {

      await requestRecentHistory(roomId);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Loading recent history failed');

    } finally {

      const { [roomId]: _done, ...rest } = recentRetrying;

      recentRetrying = rest;

    }

  }

  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;

  }

  $: threadView = $openThread && $openThread.room_id === $selectedRoomId ? $openThread : null;

  $: if ($openThread && $openThread.room_id !== $selectedRoomId) void showThread(null);

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

  const BOTH_PANES_MIN_WIDTH = 1300;

  let viewportWidth = typeof window === 'undefined' ? BOTH_PANES_MIN_WIDTH : window.innerWidth;

  let rightFront: 'thread' | 'members' = 'members';

  $: bothPanesFit = viewportWidth >= BOTH_PANES_MIN_WIDTH;

  $: threadShown = !!threadView && (bothPanesFit || !membersOpen || rightFront === 'thread');

  $: membersShown = !!selectedRoom && membersOpen && (bothPanesFit || !threadView || rightFront === 'members');

  function openThreadHere(rootEventId: string, focusEventId?: string): void {

    if (!$selectedRoomId) return;

    rightFront = 'thread';

    void showThread({ room_id: $selectedRoomId, root_event_id: rootEventId, focus_event_id: focusEventId });

  }

  async function openLive(roomId: string, eventId: string, threadRoot: string | null): Promise<void> {

    await selectRoom(roomId);

    if ($selectedRoomId !== roomId) return;

    if (threadRoot) {

      openThreadHere(threadRoot, eventId);

      return;

    }

    await tick();

    if (timelineEl?.querySelector(`[data-event="${CSS.escape(eventId)}"]`)) jumpTo(eventId);

  }

  function threadHolding(roomId: string, eventId: string): string | null {

    for (const [key, list] of Object.entries($threadTimelines)) {

      const [room, root] = key.split('\u0000');

      if (room === roomId && list.some((item) => item.kind === 'event' && item.event.event_id === eventId)) return root;

    }

    return null;

  }

  async function openThreadIn(roomId: string, rootEventId: string): Promise<void> {

    if ($selectedRoomId !== roomId) await selectRoom(roomId);

    if ($selectedRoomId === roomId) openThreadHere(rootEventId);

  }

  $: syncThreadLists([...new Set([...($selectedRoomId ? [$selectedRoomId] : []), ...Object.keys(threadFolds).filter((id) => threadFolds[id])])]);

  function threadFoldOpen(roomId: string, folds: Record<string, boolean>, q: string): boolean {

    if (q) return ($threadsByRoom[roomId] ?? []).some((t) => threadMatches(t, q));

    return !!folds[roomId];

  }

  function toggleMembers(): void {

    if (membersShown) {

      membersOpen = false;

    } else {

      membersOpen = true;

      rightFront = 'members';

    }

    if (membersOpen && $selectedRoomId) {

      void loadMembers($selectedRoomId);

      void loadLevels($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(roomId: string | null = $selectedRoomId): Promise<void> {

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

  $: roomLevels = $selectedRoomId ? (levelsByRoom[$selectedRoomId] ?? null) : null;

  function personFor(userId: string): Person {

    return people[userId] ?? { user_id: userId, name: userId, avatar: avatarByUser[userId] ?? null };

  }

  function memberFor(userId: string): MemberSummary | null {

    return members.find((m) => m.user_id === userId) ?? null;

  }

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

    try {

      const levels = parsePowerLevels(await runCommand({ op: 'power_levels', room_id: roomId }));

      levelsByRoom = { ...levelsByRoom, [roomId]: levels };

    } catch {

      levelsByRoom = { ...levelsByRoom, [roomId]: levelsByRoom[roomId] ?? null };

    }

  }

  async function openUser(userId: string, x: number, y: number, asMenu: boolean): Promise<void> {

    const roomId = $selectedRoomId;

    if (roomId && !(roomId in levelsByRoom)) await loadLevels(roomId);

    else if (roomId) void loadLevels(roomId);

    if (asMenu) menu = { items: userMenuItems(userId, x, y), x, y };

    else userCard = { userId, x, y, confirm: null };

  }

  function copyText(text: string): void {

    navigator.clipboard.writeText(text).catch(() => pushBanner('Could not copy to the clipboard'));

  }

  function userMenuItems(userId: string, x: number, y: number): MenuItem[] {

    const own = userId === $sessionUser;

    const member = memberFor(userId);

    const items: MenuItem[] = [];

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

      if (can.setLevel && !own) {

        const muted = isMuted(roomLevels, userId);

        items.push({ label: muted ? 'Unmute' : 'Mute', action: () => void userAction(userId, { kind: muted ? 'unmute' : 'mute' }) });

      }

      if (can.kick && !banned) items.push({ label: 'Kick…', danger: true, action: () => (userCard = { userId, x, y, confirm: 'kick' }) });

      if (can.ban && banned) items.push({ label: 'Unban', action: () => void userAction(userId, { kind: 'unban' }) });

      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', divider: true, action: () => void userAction(userId, { kind }) });

    }

    return items;

  }

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

    const roomId = $selectedRoomId;

    if (!roomId) return;

    const lead = composer && !/\s$/.test(composer) ? ' ' : '';

    composer = `${composer}${lead}${person.name} `;

    pickedMentions = {

      ...pickedMentions,

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

    };

    await composerRef?.focusEnd();

  }

  async function userAction(userId: string, action: UserAction): Promise<void> {

    const roomId = $selectedRoomId;

    try {

      switch (action.kind) {

        case 'message': {

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

          await refreshRooms();

          await selectRoom(res.room_id);

          return;

        }

        case 'mention':

          await insertMention(personFor(userId));

          return;

        case 'ignore':

        case 'unignore':

          await runCommand({ op: action.kind, user_id: userId });

          if (roomId) void loadMembers(roomId);

          return;

      }

      if (!roomId) return;

      switch (action.kind) {

        case 'kick':

        case 'ban':

          await runCommand({ op: action.kind, room_id: roomId, user_id: userId, reason: action.reason });

          break;

        case 'unban':

          await runCommand({ op: 'unban', room_id: roomId, user_id: userId, reason: null });

          break;

        case 'mute':

        case 'unmute':

          await runCommand({ op: 'mute', room_id: roomId, user_id: userId, muted: action.kind === 'mute' });

          break;

        case 'power':

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

          break;

      }

      void loadLevels(roomId);

      void loadMembers(roomId);

    } catch (e) {

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

    }

  }

  function roomMenuItems(room: RoomSummary): MenuItem[] {

    const items: MenuItem[] = room.space

      ? [{ label: 'Open', action: () => void selectSpace(room.room_id) }]

      : [

          { label: 'Open', action: () => void selectRoom(room.room_id) },

          { label: 'Peek', action: () => void selectRoom(room.room_id, true) }

        ];

    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, divider: true, action: () => void leave(room.room_id) });

    return items;

  }

  function openRoomMenu(ev: MouseEvent, room: RoomSummary): void {

    menu = { items: roomMenuItems(room), x: ev.clientX, y: ev.clientY };

  }

  function roomName(roomId: string): string {

    return $rooms.find((r) => r.room_id === roomId)?.name ?? roomId;

  }

  function roomStickers(roomId: string, threadRoot: string | null = null): StickerHandlers {

    return {

      onSend: (pack, image) => void sendSticker(roomId, pack, image, threadRoot),

      onClone: (pack, image, x, y) => openCloneImageMenu(pack, image, x, y),

      onClonePack: (pack, x, y) => openClonePackMenu(pack, x, y),

      onManage: () => (dialog = 'packs'),

      roomName

    };

  }

  async function sendSticker(roomId: string, pack: ImagePack, image: PackImage, threadRoot: string | null = null): Promise<void> {

    if (!threadRoot) stickToBottom = true;

    try {

      await runCommand({ op: 'send_sticker', room_id: roomId, thread_root: threadRoot, pack_id: pack.id, shortcode: image.shortcode });

      if (peeking === roomId) stopPeeking();

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : 'Could not send the sticker');

    }

  }

  async function runClone(request: CommandRequest, failure: string): Promise<void> {

    try {

      const res = (await runCommand(request)) as { skipped?: string[] } | undefined;

      if (res?.skipped?.length) pushBanner(`Couldn't copy ${res.skipped.map((s) => `:${s}:`).join(', ')}`);

    } catch (e) {

      pushBanner(e instanceof Error ? e.message : failure);

    }

  }

  function openCloneImageMenu(pack: ImagePack, image: PackImage, x: number, y: number): void {

    menu = null;

    cloneSource = { kind: 'image', pack, image };

  }

  function openClonePackMenu(pack: ImagePack, x: number, y: number): void {

    menu = null;

    cloneSource = { kind: 'pack', pack };

  }

  function openCloneStickerMenu(eventId: string, body: string, x: number, y: number): void {

    const roomId = $selectedRoomId;

    if (!roomId) return;

    menu = null;

    cloneSource = { kind: 'sticker', room_id: roomId, event_id: eventId, body };

  }

  async function openMessageMenu(event: TimelineEvent, x: number, y: number): Promise<void> {

    const roomId = $selectedRoomId;

    const eventId = event.event_id;

    if (!roomId || !eventId) return;

    if (!(roomId in levelsByRoom)) await loadLevels(roomId);

    const joined = selectedRoom?.membership === 'Joined';

    const content = event.content;

    const items: MenuItem[] = [];

    if (joined) {

      items.push({

        label: 'Reply',

        action: () =>

          startReply({

            event_id: eventId,

            details: { kind: 'Ready', sender: event.sender, content, timestamp_ms: event.timestamp_ms }

          })

      });

    }

    if (joined && event.own && event.editable && content.kind === 'Message' && content.message.kind === 'Text') {

      const body = content.message.body;

      items.push({ label: 'Edit', action: () => startEdit(eventId, body) });

    }

    if (content.kind === 'Message' && content.message.body) {

      const body = content.message.body;

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