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

  import {

    closeRoom,

    createRoom,

    getEncryption,

    getMembers,

    getProfile,

    getRooms,

    getSession,

    getSpaceChildren,

    joinRoom,

    leaveRoom,

    logout,

    markRead,

    openRoom,

    paginateRoom,

    reactToMessage,

    uploadAttachment

  } from './lib/api';

  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 { 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 { lineHeight, messageSpacing, navFolded } 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 uploadBusy = false;

  let uploadName: string | null = null;

  let openedRoom: string | null = null;

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

  $: 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 = visibleRooms.filter((r) => r.direct && !r.space && r.membership !== 'Invited');

  $: groupRooms = visibleRooms.filter(

    (r) => !r.direct && !r.space && r.membership !== 'Invited'

  );

  $: spaceList = 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] ?? []) : [];

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

  $: people = peopleIn(items, members);

  $: 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: null, edited: false, media: null }

      },

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

    composer = '';

    drafts = {};

    dialog = null;

    membersOpen = false;

    sidebarOpen = false;

    profile = null;

    profileMxc = null;

    selectedSpaceId = null;

    spaceChildIds = null;

    spaceChildrenError = null;

    openReady = {};

    openFailed = {};

    avatarByUser = {};

    resetPending();

  }

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

    const prev = openedRoom;

    if (prev) {

      openedRoom = null;

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

    }

    selectedSpaceId = spaceId;

    spaceChildIds = null;

    spaceChildrenError = null;

    spaceChildrenLoading = true;

    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 ?? [];

    } 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 prev = openedRoom;

    openedRoom = roomId;

    selectedRoomId.set(roomId);

    composer = drafts[roomId] ?? '';

    replyingTo = null;

    stickToBottom = true;

    lastReadKey = '';

    sidebarOpen = false;

    openReady = { ...openReady, [roomId]: false };

    if (openFailed[roomId]) {

      const nextFailed = { ...openFailed };

      delete nextFailed[roomId];

      openFailed = nextFailed;

    }

    try {

      await openRoom(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 scrollToBottom(): void {

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

  }

  function onTimelineScroll(): void {

    if (!timelineEl) return;

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

    stickToBottom = gap < 80;

  }

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

    const roomId = $selectedRoomId;

    const body = composer.trim();

    if (!roomId || !body) return;

    if (!openReady[roomId]) {

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

      return;

    }

    composer = '';

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

    stickToBottom = true;

    queueSend(roomId, body, replyingTo);

    replyingTo = null;

    composerEl?.focus();

  }

  function startReply(target: ReplyReference): void {

    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 onComposerKey(ev: KeyboardEvent): void {

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

      ev.preventDefault();

      send();

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

      ev.stopPropagation();

      replyingTo = null;

    }

  }

  async function upload(): Promise<void> {

    const roomId = $selectedRoomId;

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

    fileInput?.click();

  }

  async function onFileChosen(): Promise<void> {

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

    if (file) await uploadFile(file);

    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 image = Array.from(data.files).find((f) => f.type.startsWith('image/'));

    if (!image) return;

    ev.preventDefault();

    void uploadFile(image);

  }

  async function uploadFile(file: File): Promise<void> {

    const roomId = $selectedRoomId;

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

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

      pushBanner('File must be between 1 byte and 20 MiB.');

      return;

    }

    uploadBusy = true;

    uploadName = file.name || 'attachment';

    try {

      await uploadAttachment(roomId, file);

      stickToBottom = true;

    } catch (e) {

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

    } finally {

      uploadBusy = false;

      uploadName = null;

    }

  }

  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 {