malice

<script lang="ts">

  import MediaAttachmentView from './MediaAttachmentView.svelte';

  import MxcAvatar from './MxcAvatar.svelte';

  import Emoji from './Emoji.svelte';

  import EmojiText from './EmojiText.svelte';

  import ReactionPicker from './ReactionPicker.svelte';

  import { mediaUrl } from './api';

  import type { ImagePack, QuickReaction, SendState, TimelineContent, TimelineEvent } from './types';

  import { senderLabel } from './types';

  import { formatClock, formatDay, initialsOf, senderHue } from './format';

  import { findUrls } from './urls';

  export let itemId: string;

  export let event: TimelineEvent;

  export let showSender: boolean;

  export let reacting: boolean;

  export let onReact: (eventId: string, key: string) => void;

  export let senderAvatar: string | null = null;

  export let quickReactions: QuickReaction[] = [];

  export let packs: ImagePack[] = [];

  export let onQuickChange: (list: QuickReaction[]) => void = () => {};

  const PICKER_WIDTH = 320;

  const PICKER_HEIGHT = 380;

  const PICKER_MARGIN = 8;

  let row: HTMLDivElement;

  let pickerPop: HTMLDivElement | undefined;

  let selected = false;

  let pickerOpen = false;

  let pickerStyle = '';

  const MEMBERSHIP_LABELS: Record<string, string> = {

    Joined: 'joined the room',

    Left: 'left the room',

    Banned: 'was banned',

    Unbanned: 'was unbanned',

    Kicked: 'was kicked',

    KickedAndBanned: 'was kicked and banned',

    Invited: 'was invited',

    InvitationAccepted: 'accepted the invite',

    InvitationRejected: 'rejected the invite',

    InvitationRevoked: 'had the invite revoked',

    Knocked: 'requested to join',

    KnockAccepted: 'was let in',

    KnockRetracted: 'withdrew the request to join',

    KnockDenied: 'had the request to join denied'

  };

  $: name = senderLabel(event.sender);

  $: displayName = event.sender.name_ambiguous ? `${name} (${event.sender.user_id})` : name;

  $: interactive = event.content.kind === 'Message' || event.content.kind === 'Sticker' || event.content.kind === 'Poll';

  $: previews = event.content.kind === 'Message' ? findUrls(event.content.message.body) : [];

  function sendLabel(state: SendState): string {

    if (state.kind === 'Failed') return state.will_retry ? 'failed — will retry' : 'failed — not delivered';

    if (state.kind === 'Sending') return 'sending…';

    if (event.own && state.kind === 'Sent' && event.event_id) return '✓ sent';

    return '';

  }

  function toggleSelected(e: MouseEvent) {

    if (!interactive || (e.target as Element).closest('a, button, input, video, audio, .picker-pop')) return;

    selected = !selected;

  }

  function deselectOutside(e: PointerEvent) {

    if (selected && !pickerOpen && !row.contains(e.target as Node)) selected = false;

  }

  function openPicker(e: MouseEvent) {

    if (pickerOpen) {

      pickerOpen = false;

      return;

    }

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

    const height = Math.min(PICKER_HEIGHT, window.innerHeight - 2 * PICKER_MARGIN);

    const below = window.innerHeight - rect.bottom - PICKER_MARGIN >= height;

    const top = below ? rect.bottom + 4 : Math.max(PICKER_MARGIN, rect.top - height - 4);

    const maxLeft = window.innerWidth - PICKER_WIDTH - PICKER_MARGIN;

    const left = Math.max(PICKER_MARGIN, Math.min(rect.right - PICKER_WIDTH, maxLeft));

    pickerStyle = `top:${top}px;left:${left}px;height:${height}px`;

    selected = true;

    pickerOpen = true;

  }

  function closePicker() {

    pickerOpen = false;

  }

  function pick(key: string) {

    pickerOpen = false;

    onReact(event.event_id ?? '', key);

  }

  function closeOnScroll(e: Event) {

    if (pickerOpen && !pickerPop?.contains(e.target as Node)) pickerOpen = false;

  }

  function actorLabel(userId: string, name: string | null): string {

    return name ?? userId;

  }

  function replyPreview(content: TimelineContent): string {

    if (content.kind === 'Message') return content.message.body;

    if (content.kind === 'Sticker') return content.body || 'Sticker';

    if (content.kind === 'Poll') return `Poll: ${content.question}`;

    if (content.kind === 'Redacted') return 'Message deleted';

    if (content.kind === 'UnableToDecrypt') return 'Unable to decrypt';

    return systemLine(content);

  }

  function systemLine(content: TimelineContent): string {

    switch (content.kind) {

      case 'Redacted':

        return 'Message deleted';

      case 'UnableToDecrypt':

        return `Message from ${displayName} could not be decrypted`;

      case 'Membership': {

        const who = actorLabel(content.user_id, content.display_name);

        return `${who} ${MEMBERSHIP_LABELS[content.change] ?? 'updated their membership'}`;

      }

      case 'Profile': {

        const who = actorLabel(content.user_id, null);

        const parts: string[] = [];

        if (content.display_name) {

          parts.push(

            content.display_name.new

              ? `changed their display name to "${content.display_name.new}"`

              : 'removed their display name'

          );

        }

        if (content.avatar) parts.push('changed their avatar');

        return `${who} ${parts.length > 0 ? parts.join(' and ') : 'updated their profile'}`;

      }

      case 'RoomName':

        return content.name

          ? `${displayName} changed the room name to "${content.name}"`

          : `${displayName} removed the room name`;

      case 'RoomTopic':

        return content.topic

          ? `${displayName} changed the topic to "${content.topic}"`

          : `${displayName} removed the topic`;

      case 'RoomAvatar':

        return content.avatar ? `${displayName} changed the room avatar` : `${displayName} removed the room avatar`;

      case 'EncryptionEnabled':

        return `${displayName} enabled encryption in this room`;

      case 'RoomCreated':

        return `${displayName} created the room`;

      case 'RoomUpgraded':

        return `${displayName} upgraded the room to a new version`;

      case 'OtherState':

        return `${displayName} sent a state event (${content.event_type})`;

      case 'Other':

        return `${displayName} sent an event (${content.event_type})`;

      default:

        return displayName;

    }

  }

</script>

<svelte:window

  on:pointerdown={deselectOutside}

  on:keydown={(e) => e.key === 'Escape' && (selected = false)}

  on:scroll|capture={closeOnScroll}

  on:resize={closePicker}

/>

<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->

<div

  class="msg"

  class:own={event.own}

  class:system={!interactive}

  class:selected

  data-item={itemId}

  bind:this={row}

  on:click={toggleSelected}

>

  {#if interactive && event.event_id}

    <div class="actions" role="toolbar" aria-label={`Actions for message from ${displayName}`}>

      {#each quickReactions as r (r.key)}

        {@const label = r.shortcode ? `:${r.shortcode}:` : r.key}

        <button

          type="button"

          title={`React ${label}`}

          aria-label={`React ${label} to message from ${displayName}`}

          disabled={reacting}

          on:click={() => onReact(event.event_id ?? '', r.key)}

        >

          {#if r.key.startsWith('mxc://')}

            <img class="emote" src={mediaUrl(r.key) ?? ''} alt="" />

          {:else}

            <Emoji emoji={r.key} size={18} />

          {/if}

        </button>

      {/each}

      <button

        type="button"

        title="Add reaction"

        aria-label={`Add reaction to message from ${displayName}`}

        aria-haspopup="dialog"

        aria-expanded={pickerOpen}

        on:pointerdown|stopPropagation

        on:click={openPicker}

      >

        ☺+

      </button>

    </div>

    {#if pickerOpen}

      <div class="picker-pop" style={pickerStyle} bind:this={pickerPop}>

        <ReactionPicker {packs} quick={quickReactions} onPick={(key) => pick(key)} {onQuickChange} onClose={closePicker} />

      </div>

    {/if}

  {/if}

  {#if showSender}

    {#if senderAvatar}

      <MxcAvatar mxc={senderAvatar} label={name} size={34} />

    {:else}

      <div

        class="avatar"

        aria-hidden="true"

        style={`background:hsl(${senderHue(event.sender.user_id)} 35% 32%)`}

      >

        {initialsOf(name)}

      </div>

    {/if}

  {:else}

    <div class="avatar-spacer" aria-hidden="true">

      <span class="hover-time">{formatClock(event.timestamp_ms)}</span>

    </div>

  {/if}

  <div class="msg-body">

    {#if showSender}

      <div class="msg-head">

        <span class="sender" style={`color:hsl(${senderHue(event.sender.user_id)} 70% 72%)`}>

          {displayName}

        </span>

        <time class="time" datetime={new Date(event.timestamp_ms).toISOString()}>

          {formatDay(event.timestamp_ms)} {formatClock(event.timestamp_ms)}

        </time>

        {#if event.content.kind === 'Message' && event.content.message.edited}

          <span class="edited" title="Edited">(edited)</span>

        {/if}

      </div>

    {/if}

    {#if event.reply_to}

      <div class="reply-quote">

        {#if event.reply_to.details.kind === 'Ready'}

          Replying to {senderLabel(event.reply_to.details.sender)}: <EmojiText text={replyPreview(event.reply_to.details.content)} />

        {:else if event.reply_to.details.kind === 'Pending'}

          Loading reply…

        {:else}

          Reply unavailable

        {/if}

      </div>

    {/if}

    {#if event.content.kind === 'Message'}

      {@const m = event.content.message}

      <p class="text" class:emote={m.kind === 'Emote'} class:notice={m.kind === 'Notice' || m.kind === 'ServerNotice'}>

        {#if m.kind === 'Emote'}* {displayName} {/if}<EmojiText text={m.body} jumbo={m.kind === 'Text'} />

      </p>

      {#if m.media}

        <MediaAttachmentView attachment={m.media} />

      {/if}

      {#if previews.length > 0}

        <div class="link-previews">

          {#each previews as preview (preview.href)}

            <a class="link-card" href={preview.href} target="_blank" rel="noopener noreferrer">

              <span class="link-host">{preview.hostname}</span>

              {#if preview.path}<span class="link-path">{preview.path}</span>{/if}

              <span class="link-url">{preview.display}</span>

            </a>

          {/each}

        </div>

      {/if}

    {:else if event.content.kind === 'Sticker'}

      {#if event.content.body}<p class="text"><EmojiText text={event.content.body} /></p>{/if}

      {#if event.content.media}

        <MediaAttachmentView attachment={event.content.media} />

      {/if}

    {:else if event.content.kind === 'Poll'}

      <p class="text">📊 {event.content.question}</p>

    {:else}

      <p class="system-line">{systemLine(event.content)}</p>

    {/if}

    {#if interactive && event.reactions.length > 0}

      <div class="reactions" aria-label="Reactions">

        {#each event.reactions as r (r.key)}

          <button

            type="button"

            class="reaction"

            class:mine={r.own}

            title={r.own ? 'You reacted — activate to remove' : `${r.count} reaction${r.count === 1 ? '' : 's'}`}

            disabled={!event.event_id || reacting}

            on:click={() => event.event_id && onReact(event.event_id, r.key)}

          >

            {#if r.key.startsWith('mxc://')}

              <img class="emote" src={mediaUrl(r.key) ?? ''} alt="" />

            {:else}

              <Emoji emoji={r.key} size={16} />

            {/if}

            <span class="count">{r.count}</span>

          </button>

        {/each}

      </div>

    {/if}

    {#if interactive && (sendLabel(event.send_state) || event.read_by.length > 0)}

      <div class="msg-foot">

        {#if sendLabel(event.send_state)}

          <span class="sendstate" class:failed={event.send_state.kind === 'Failed'}>{sendLabel(event.send_state)}</span>

        {/if}

        {#if event.read_by.length > 0}

          <span class="readby" title={event.read_by.join(', ')}>✓✓ {event.read_by.length}</span>

        {/if}

      </div>

    {/if}

  </div>

</div>

<style>

  .msg { position: relative; display: flex; gap: 10px; padding: 3px 0; }

  .msg:hover, .msg.selected { background: rgba(255, 255, 255, 0.018); }

  .msg:hover .hover-time, .msg.selected .hover-time { opacity: 1; }

  .msg-foot { display: flex; align-items: center; gap: 8px; }

  .sendstate { font-size: 11px; color: var(--muted); }

  .sendstate.failed { color: var(--danger); }

  .link-previews { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 420px; }

  .link-card {

    display: flex; flex-direction: column; gap: 1px;

    border: 1px solid var(--border); border-radius: 8px;

    background: var(--bg-soft); padding: 8px 10px;

    text-decoration: none; color: var(--text);

  }

  .link-card:hover { border-color: var(--accent); }

  .link-host { font-size: 12.5px; font-weight: 650; }

  .link-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

  .link-url { font-size: 11.5px; color: var(--accent); overflow-wrap: anywhere; }

  .avatar {

    flex: none;

    width: 34px; height: 34px;

    border-radius: 50%;

    display: grid; place-items: center;

    font-size: 12px; font-weight: 700; color: #fff;

  }

  .avatar-spacer { flex: none; width: 34px; padding-top: 2px; text-align: center; }

  .hover-time { opacity: 0; font-size: 10.5px; color: var(--muted); }

  .msg-body { min-width: 0; flex: 1; }

  .msg-head { display: flex; align-items: baseline; gap: 8px; }

  .sender { font-weight: 650; font-size: 13.5px; }

  .time, .edited { color: var(--muted); font-size: 11.5px; }

  .reply-quote {

    border-left: 2px solid var(--accent);

    padding: 2px 8px;

    margin: 2px 0 4px;

    color: var(--muted);

    font-size: 12.5px;

    background: var(--bg-soft);

    border-radius: 0 6px 6px 0;

  }

  .text {

    margin: 1px 0 2px;

    font-size: 14px;

    line-height: 1.5;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

  }

  .text.emote { font-style: italic; color: var(--muted); }

  .text.notice { color: var(--muted); }

  .system-line { color: var(--muted); font-size: 12.5px; font-style: italic; margin: 1px 0; }

  .msg.system { opacity: 0.85; }

  .reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

  .reaction {

    display: inline-flex; align-items: center; gap: 4px;

    background: var(--bg-soft);

    border: 1px solid var(--border);

    border-radius: 999px;

    padding: 1px 8px;

    font-size: 13px;

    color: var(--text);

    cursor: pointer;

  }

  .reaction.mine { border-color: var(--accent); background: rgba(88, 101, 242, 0.16); }

  .reaction:disabled { cursor: default; opacity: 0.85; }

  .readby { font-size: 11px; color: var(--muted); }

  .actions {

    position: absolute; top: -14px; right: 12px; z-index: 2;

    display: flex; gap: 2px;

    padding: 2px;

    background: var(--bg-soft);

    border: 1px solid var(--border);

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

    opacity: 0;

    pointer-events: none;

  }

  .msg:hover .actions, .msg:focus-within .actions, .msg.selected .actions { opacity: 1; pointer-events: auto; }

  .actions button {

    background: transparent;

    border: 1px solid transparent;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

    padding: 1px 5px;

  }

  .actions button:hover:not(:disabled) { border-color: var(--border); background: rgba(255, 255, 255, 0.06); }

  .actions button:disabled { opacity: 0.4; cursor: default; }

  .emote { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; }

  .picker-pop { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px); }

</style>