malice

<script lang="ts" context="module">

  export type UserAction =

    | { kind: 'message' | 'mention' | 'unban' | 'mute' | 'unmute' | 'ignore' | 'unignore' }

    | { kind: 'kick' | 'ban'; reason: string | null }

    | { kind: 'power'; level: number };

</script>

<script lang="ts">

  import { onMount, tick } from 'svelte';

  import MxcAvatar from './MxcAvatar.svelte';

  import { allowed, isMuted, levelOf, roleName, type PowerLevels } from './permissions';

  import type { MemberSummary, Person } from './types';

  export let person: Person;

  export let member: MemberSummary | null = null;

  export let levels: PowerLevels | null = null;

  export let self: string | null = null;

  export let x: number;

  export let y: number;

  export let confirm: 'kick' | 'ban' | null = null;

  export let onAction: (action: UserAction) => void;

  export let onClose: () => void;

  const MARGIN = 8;

  let card: HTMLDivElement;

  let left = x;

  let top = y;

  let reason = '';

  let copied = false;

  $: own = person.user_id === self;

  $: level = levels ? levelOf(levels, person.user_id) : null;

  $: role = level !== null ? roleName(level) : null;

  $: muted = levels ? isMuted(levels, person.user_id) : false;

  $: can = levels && self ? allowed(levels, self, person.user_id) : null;

  $: banned = member?.membership === 'Ban';

  $: powerInput = level !== null && Number.isFinite(level) ? String(level) : '';

  onMount(async () => {

    await tick();

    const rect = card.getBoundingClientRect();

    left = Math.max(MARGIN, Math.min(x, window.innerWidth - rect.width - MARGIN));

    top = Math.max(MARGIN, Math.min(y, window.innerHeight - rect.height - MARGIN));

  });

  function act(action: UserAction): void {

    onClose();

    onAction(action);

  }

  function setPower(): void {

    const value = Number(powerInput);

    if (!Number.isInteger(value) || value === level) return;

    act({ kind: 'power', level: value });

  }

  async function copyId(): Promise<void> {

    try {

      await navigator.clipboard.writeText(person.user_id);

      copied = true;

      window.setTimeout(() => (copied = false), 1500);

    } catch {

      copied = false;

    }

  }

  function outside(ev: PointerEvent): void {

    if (!card.contains(ev.target as Node)) onClose();

  }

  function key(ev: KeyboardEvent): void {

    if (ev.key !== 'Escape') return;

    ev.stopPropagation();

    if (confirm) confirm = null;

    else onClose();

  }

</script>

<svelte:window on:pointerdown|capture={outside} on:keydown|capture={key} on:resize={onClose} />

<div class="user-card" role="dialog" aria-label={person.name} style={`left:${left}px;top:${top}px`} bind:this={card}>

  <div class="identity">

    <MxcAvatar mxc={person.avatar} label={person.name} seed={person.user_id} size={56} />

    <div class="names">

      <strong class="name">{person.name}</strong>

      <button type="button" class="user-id" title="Copy user ID" on:click={() => void copyId()}>

        {copied ? 'Copied' : person.user_id}

      </button>

      <div class="tags">

        {#if role}<span class="tag">{role}</span>{/if}

        {#if level !== null && Number.isFinite(level) && level !== 0}<span class="tag">Power {level}</span>{/if}

        {#if muted}<span class="tag warn">Muted</span>{/if}

        {#if banned}<span class="tag danger">Banned</span>{/if}

        {#if member?.ignored}<span class="tag">Ignored</span>{/if}

      </div>

    </div>

  </div>

  {#if confirm}

    <form class="confirm" on:submit|preventDefault={() => confirm && act({ kind: confirm, reason: reason.trim() || null })}>

      <!-- svelte-ignore a11y_autofocus -->

      <input type="text" placeholder="Reason" bind:value={reason} autofocus />

      <div class="row">

        <button type="button" class="ghost-btn" on:click={() => (confirm = null)}>Cancel</button>

        <button type="submit" class="ghost-btn danger">{confirm === 'kick' ? 'Kick' : 'Ban'} {person.name}</button>

      </div>

    </form>

  {:else}

    <div class="row">

      {#if !own}

        <button type="button" class="ghost-btn" on:click={() => act({ kind: 'message' })}>Message</button>

      {/if}

      <button type="button" class="ghost-btn" on:click={() => act({ kind: 'mention' })}>Mention</button>

    </div>

    {#if can && (can.kick || can.ban || can.setLevel)}

      <div class="row">

        {#if can.setLevel && !own}

          <button type="button" class="ghost-btn" on:click={() => act({ kind: muted ? 'unmute' : 'mute' })}>

            {muted ? 'Unmute' : 'Mute'}

          </button>

        {/if}

        {#if can.kick && !banned && member && member.membership !== 'Leave'}

          <button type="button" class="ghost-btn danger" on:click={() => (confirm = 'kick')}>Kick</button>

        {/if}

        {#if can.ban}

          {#if banned}

            <button type="button" class="ghost-btn" on:click={() => act({ kind: 'unban' })}>Unban</button>

          {:else}

            <button type="button" class="ghost-btn danger" on:click={() => (confirm = 'ban')}>Ban</button>

          {/if}

        {/if}

      </div>

      {#if can.setLevel}

        <form class="row power" on:submit|preventDefault={setPower}>

          <label for="power-level">Power level</label>

          <input id="power-level" type="number" step="1" max={Number.isFinite(can.maxLevel) ? can.maxLevel : undefined} bind:value={powerInput} />

          <button type="submit" class="ghost-btn" disabled={powerInput === '' || Number(powerInput) === level}>Set</button>

        </form>

      {/if}

    {/if}

    {#if !own}

      <div class="row">

        <button type="button" class="ghost-btn subtle" on:click={() => act({ kind: member?.ignored ? 'unignore' : 'ignore' })}>

          {member?.ignored ? 'Unignore' : 'Ignore'}

        </button>

      </div>

    {/if}

  {/if}

</div>

<style>

  .user-card {

    animation: pop-in var(--pop);

    position: fixed;

    z-index: 90;

    width: 300px;

    max-width: calc(100vw - 16px);

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 14px;

    background: var(--panel-2);

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

    border-radius: var(--r-md);

    box-shadow: 0 12px 32px rgb(0 0 0 / 0.4);

  }

  .identity { display: flex; gap: 12px; align-items: center; }

  .names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

  .name { font-size: 16px; overflow-wrap: anywhere; }

  .user-id {

    padding: 0;

    border: none;

    background: none;

    color: var(--muted);

    font: inherit;

    font-size: 12.5px;

    text-align: left;

    cursor: copy;

    overflow-wrap: anywhere;

  }

  .user-id:hover { color: var(--text); }

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

  .tag {

    font-size: 11px;

    padding: 1px 6px;

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

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

    color: var(--muted);

  }

  .tag.warn { color: var(--warn-text); border-color: var(--warn-border); }

  .tag.danger { color: var(--danger); border-color: var(--danger-border); }

  .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

  .row > :global(.ghost-btn) { flex: 1; }

  .power label { font-size: 12.5px; color: var(--muted); }

  .power input { width: 80px; flex: 1; }

  input {

    background: var(--bg-soft);

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

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

    color: var(--text);

    padding: 5px 8px;

    font: inherit;

    font-size: 13px;

  }

  .confirm { display: flex; flex-direction: column; gap: 8px; }

  .subtle { color: var(--muted); }

</style>