malice

public

Star0

Fork 0

Watch0

107 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `0e50e0d137af`

tarball

atagen <boss@atagen.co>2026-10-26 05:50 UTC

11 files changed+559-3

web: support touch screens

iOS never fires contextmenu on long-press, so room, space, user and sticker menus were unreachable on iPhone. A shared long-press action now opens them, the back gesture closes the topmost layer instead of leaving the app, and the layout follows the iOS keyboard through visualViewport.

Modified file: web/src/lib/Composer.svelte+6 additions−1 deletions@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
+  import { backStack, instanceLayerId } from './back-stack';
   import ComposerText from './ComposerText.svelte';
   import EmojiText from './EmojiText.svelte';
   import MxcAvatar from './MxcAvatar.svelte';
@@ -47,6 +48,10 @@
   let fileInput: HTMLInputElement | null = null;
   let composing = false;
   let stickersOpen = false;
+  const stickersLayer = instanceLayerId('sticker-picker');
+  const dismissStickers = () => (stickersOpen = false);
+  $: backStack.sync(stickersLayer, stickersOpen, dismissStickers);
+  onDestroy(() => backStack.sync(stickersLayer, false, dismissStickers));
 
   let mentionQuery: MentionQuery | null = null;
   let mentionIndex = 0;

Modified file: web/src/lib/PackManager.svelte+1−1

@@ -382,7 +382,7 @@

382382 {/if}

383383

384384 <style>

385

-  .packs { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 64px); display: flex; flex-direction: column; }

385

+  .packs { width: min(820px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); display: flex; flex-direction: column; }

386386 .layout { display: flex; gap: 14px; min-height: 0; flex: 1; }

387387 .pack-list { flex: none; width: 210px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

388388 h4 { margin: 10px 6px 4px; font-size: 12px; color: var(--muted); font-weight: 650; }

Modified file: web/src/lib/PinButton.svelte+7 additions@@ -42,4 +42,11 @@
   .pin-btn.pinned { opacity: 1; color: var(--accent); }
   .pin-btn:hover { background: var(--hover); color: var(--text); }
   :global(.room-item:hover) .pin-btn, :global(.room-item:focus-within) .pin-btn, .pin-btn:focus-visible { opacity: 1; }
+  @media (hover: none) {
+    :global(.room-item:has(.room-row.active)) .pin-btn { opacity: 1; }
+  }
+  @media (pointer: coarse) {
+    .pin-btn { position: relative; }
+    .pin-btn::after { content: ''; position: absolute; inset: -8px -4px; }
+  }
 </style>

Modified file: web/src/lib/RoomThreads.svelte+2

@@ -64,6 +64,8 @@

6464 .thread-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

6565 .thread-meta { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

6666 .thread-item:hover :global(.pin-btn), .thread-item :global(.pin-btn.pinned) { opacity: 1; }

67+ @media (hover: none) { .thread-item:has(.active) :global(.pin-btn) { opacity: 1; } }

68+ @media (pointer: coarse) { .thread-row { padding: 9px 6px; } }

6769

   .thread-unread { flex: none; min-width: 16px; padding: 0 4px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--text); font-size: 10.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

6870 .thread-unread.mention { background: var(--accent); color: var(--on-accent); }

6971 .thread-more:disabled { color: var(--muted); cursor: default; }

Modified file: web/src/lib/StickerPicker.svelte+3 additions−1 deletions@@ -5,6 +5,7 @@
   import EmojiText from './EmojiText.svelte';
   import { packLabel, stickersOf } from './packs';
   import type { ImagePack, PackImage } from './types';
+  import { longpress } from './longpress';
 
   export let packs: ImagePack[];
   export let roomName: (roomId: string) => string;
@@ -90,6 +91,7 @@
               aria-label={image.body ?? image.shortcode}
               on:click={() => onSend(g.pack, image)}
               on:contextmenu|preventDefault={(ev) => onClone(g.pack, image, ev.clientX, ev.clientY)}
+              use:longpress={(ev) => onClone(g.pack, image, ev.clientX, ev.clientY)}
             >
               <img src={messageMediaUrl(image.media_id, 'Thumbnail')} alt="" loading="lazy" />
             </button>
@@ -116,7 +118,7 @@
     gap: 6px;
     width: 360px;
     height: auto;
-    max-height: min(420px, calc(100vh - 120px));
+    max-height: min(420px, calc(100dvh - 120px));
     max-width: calc(100vw - 16px);
     padding: 8px;
     background: var(--panel);

Added file: web/src/lib/back-stack.ts+129 additions@@ -0,0 +1,129 @@
+const KEY = 'backLayer';
+const SETTLE_MS = 400;
+
+export interface HistoryLike {
+  state: unknown;
+  pushState(state: unknown, unused: string, url?: string): void;
+  replaceState(state: unknown, unused: string, url?: string): void;
+  back(): void;
+}
+
+interface Layer {
+  id: string;
+  close: (id: string) => void;
+}
+
+function layerOf(state: unknown): string | undefined {
+  if (state && typeof state === 'object' && KEY in state) return String((state as Record<string, unknown>)[KEY]);
+  return undefined;
+}
+
+function plain(state: unknown): Record<string, unknown> {
+  const { [KEY]: _drop, ...rest } = (state && typeof state === 'object' ? state : {}) as Record<string, unknown>;
+  return rest;
+}
+
+export class BackStack {
+  private stack: Layer[] = [];
+  private queue: Array<() => void> = [];
+  private waiting = false;
+  private timer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(private readonly history: HistoryLike) {}
+
+  /** A reload can land on a layer entry whose layer no longer exists. */
+  init(): void {
+    if (layerOf(this.history.state) !== undefined) this.history.replaceState(plain(this.history.state), '');
+  }
+
+  get depth(): number {
+    return this.stack.length;
+  }
+
+  sync(id: string, open: boolean, close: (id: string) => void): void {
+    const index = this.stack.findIndex((l) => l.id === id);
+    if (open && index < 0) {
+      this.stack.push({ id, close });
+      this.run(() => this.history.pushState({ ...plain(this.history.state), [KEY]: id }, ''));
+    } else if (open) {
+      this.stack[index].close = close;
+    } else if (index >= 0) {
+      const top = index === this.stack.length - 1;
+      this.stack.splice(index, 1);
+      if (top) this.run(() => this.rewind());
+    }
+  }
+
+  /** Records a route, replacing the layer entry on top when layers are being dismissed by the navigation. */
+  route(state: unknown, url: string): void {
+    this.run(() => {
+      if (this.stack.length > 0 && layerOf(this.history.state) !== undefined) {
+        this.stack = [];
+        this.history.replaceState(state, '', url);
+      } else {
+        this.history.pushState(state, '', url);
+      }
+    });
+  }
+
+  /** Returns true when the popstate belonged to the layer stack, false when it is a plain route change. */
+  pop(state: unknown): boolean {
+    if (this.waiting) {
+      this.settle();
+      return true;
+    }
+    const id = layerOf(state);
+    if (id === undefined) {
+      if (this.stack.length === 0) return false;
+      this.closeAbove(-1);
+      return true;
+    }
+    const index = this.stack.findIndex((l) => l.id === id);
+    if (index < 0) {
+      this.history.back();
+      return true;
+    }
+    this.closeAbove(index);
+    return true;
+  }
+
+  private closeAbove(index: number): void {
+    const closing = this.stack.splice(index + 1);
+    for (const layer of closing.reverse()) layer.close(layer.id);
+  }
+
+  private rewind(): void {
+    if (layerOf(this.history.state) === undefined) return;
+    this.waiting = true;
+    this.timer = setTimeout(() => this.settle(), SETTLE_MS);
+    this.history.back();
+  }
+
+  private settle(): void {
+    this.waiting = false;
+    if (this.timer !== null) clearTimeout(this.timer);
+    this.timer = null;
+    const next = this.queue.shift();
+    if (next) this.run(next);
+  }
+
+  private run(op: () => void): void {
+    if (this.waiting) {
+      this.queue.push(op);
+      return;
+    }
+    op();
+    if (!this.waiting) {
+      const next = this.queue.shift();
+      if (next) this.run(next);
+    }
+  }
+}
+
+export const backStack = new BackStack(typeof window === 'undefined' ? ({} as HistoryLike) : window.history);
+
+let instances = 0;
+
+export function instanceLayerId(prefix: string): string {
+  return `${prefix}-${++instances}`;
+}

Added file: web/src/lib/longpress.ts+162 additions@@ -0,0 +1,162 @@
+import { readable, type Readable } from 'svelte/store';
+
+export const LONG_PRESS_MS = 450;
+export const LONG_PRESS_SLOP = 8;
+
+export interface PressEvent {
+  clientX: number;
+  clientY: number;
+  currentTarget: EventTarget | null;
+}
+
+export interface Timers {
+  set(fn: () => void, ms: number): unknown;
+  clear(handle: unknown): void;
+}
+
+const realTimers: Timers = {
+  set: (fn, ms) => setTimeout(fn, ms),
+  clear: (handle) => clearTimeout(handle as ReturnType<typeof setTimeout>)
+};
+
+export class PressTracker {
+  fired = false;
+  private handle: unknown = null;
+  private x = 0;
+  private y = 0;
+
+  constructor(
+    private readonly onFire: (x: number, y: number) => void,
+    private readonly timers: Timers = realTimers,
+    private readonly delay = LONG_PRESS_MS,
+    private readonly slop = LONG_PRESS_SLOP
+  ) {}
+
+  get pending(): boolean {
+    return this.handle !== null;
+  }
+
+  start(x: number, y: number): void {
+    this.cancel();
+    this.fired = false;
+    this.x = x;
+    this.y = y;
+    this.handle = this.timers.set(() => {
+      this.handle = null;
+      this.fired = true;
+      this.onFire(this.x, this.y);
+    }, this.delay);
+  }
+
+  move(x: number, y: number): void {
+    if (this.handle === null) return;
+    if (Math.hypot(x - this.x, y - this.y) > this.slop) this.cancel();
+  }
+
+  flush(): void {
+    if (this.handle === null) return;
+    this.cancel();
+    this.fired = true;
+    this.onFire(this.x, this.y);
+  }
+
+  cancel(): void {
+    if (this.handle === null) return;
+    this.timers.clear(this.handle);
+    this.handle = null;
+  }
+}
+
+type Handler = ((ev: PressEvent) => void) | null | undefined;
+
+interface Options {
+  on: Handler;
+  allowSelection?: boolean;
+  ignore?: string;
+}
+
+type Param = Handler | Options;
+
+function split(param: Param): Options {
+  return typeof param === 'function' || !param ? { on: param } : param;
+}
+
+export function longpress(node: HTMLElement, param: Param) {
+  let opts = split(param);
+  let current = opts.on;
+  let pointerId = -1;
+
+  const tracker = new PressTracker((x, y) => {
+    navigator.vibrate?.(10);
+    current?.({ clientX: x, clientY: y, currentTarget: node });
+  });
+
+  const apply = () => {
+    node.style.setProperty('-webkit-touch-callout', 'none');
+    if (!opts.allowSelection) node.style.setProperty('user-select', 'none');
+  };
+  apply();
+
+  function down(e: PointerEvent) {
+    if (!current || e.pointerType === 'mouse' || !e.isPrimary) return;
+    if (opts.ignore && (e.target as Element).closest(opts.ignore)) return;
+    pointerId = e.pointerId;
+    tracker.start(e.clientX, e.clientY);
+  }
+  function move(e: PointerEvent) {
+    if (e.pointerId === pointerId) tracker.move(e.clientX, e.clientY);
+  }
+  function end(e: PointerEvent) {
+    if (e.pointerId !== pointerId) return;
+    tracker.cancel();
+    if (tracker.fired) setTimeout(() => (tracker.fired = false), 400);
+  }
+  function click(e: MouseEvent) {
+    if (!tracker.fired) return;
+    tracker.fired = false;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+  function contextmenu(e: Event) {
+    if (!tracker.fired && !tracker.pending) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    tracker.flush();
+  }
+  const cancel = () => tracker.cancel();
+
+  node.addEventListener('pointerdown', down);
+  node.addEventListener('pointermove', move);
+  node.addEventListener('pointerup', end);
+  node.addEventListener('pointercancel', end);
+  node.addEventListener('click', click, true);
+  node.addEventListener('contextmenu', contextmenu, true);
+  window.addEventListener('scroll', cancel, true);
+
+  return {
+    update(next: Param) {
+      opts = split(next);
+      current = opts.on;
+      apply();
+    },
+    destroy() {
+      tracker.cancel();
+      node.removeEventListener('pointerdown', down);
+      node.removeEventListener('pointermove', move);
+      node.removeEventListener('pointerup', end);
+      node.removeEventListener('pointercancel', end);
+      node.removeEventListener('click', click, true);
+      node.removeEventListener('contextmenu', contextmenu, true);
+      window.removeEventListener('scroll', cancel, true);
+    }
+  };
+}
+
+export const finePointer: Readable<boolean> = readable(true, (set) => {
+  if (typeof window === 'undefined') return;
+  const query = window.matchMedia('(pointer: fine)');
+  set(query.matches);
+  const update = () => set(query.matches);
+  query.addEventListener('change', update);
+  return () => query.removeEventListener('change', update);
+});

Added file: web/src/lib/viewport.ts+25 additions@@ -0,0 +1,25 @@
+export function trackKeyboardInset(): () => void {
+  const visual = window.visualViewport;
+  if (!visual) return () => {};
+  const root = document.documentElement;
+  const update = () => {
+    const inset = Math.max(0, Math.round(window.innerHeight - visual.height - visual.offsetTop));
+    if (inset > 0) {
+      root.style.setProperty('--kb-inset', `${inset}px`);
+      root.classList.add('kb-open');
+      if (window.scrollY !== 0) window.scrollTo(0, 0);
+    } else {
+      root.style.removeProperty('--kb-inset');
+      root.classList.remove('kb-open');
+    }
+  };
+  visual.addEventListener('resize', update);
+  visual.addEventListener('scroll', update);
+  update();
+  return () => {
+    visual.removeEventListener('resize', update);
+    visual.removeEventListener('scroll', update);
+    root.style.removeProperty('--kb-inset');
+    root.classList.remove('kb-open');
+  };
+}

Modified file: web/src/main.ts+2 additions@@ -2,10 +2,12 @@ import './app.css';
 import { mount } from 'svelte';
 import App from './App.svelte';
 import { registerServiceWorker } from './lib/sw-register';
+import { trackKeyboardInset } from './lib/viewport';
 
 const target = document.getElementById('app');
 if (!target) throw new Error('#app element missing');
 registerServiceWorker();
+trackKeyboardInset();
 const app = mount(App, { target });
 
 export default app;

Added file: web/test/back-stack.test.ts+133 additions@@ -0,0 +1,133 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { BackStack, type HistoryLike } from '../src/lib/back-stack.ts';
+
+class FakeHistory implements HistoryLike {
+  entries: unknown[] = [{ roomId: 'a' }];
+  index = 0;
+  onPop: (state: unknown) => void = () => undefined;
+  get state(): unknown {
+    return this.entries[this.index];
+  }
+  pushState(state: unknown): void {
+    this.entries.splice(this.index + 1, Infinity, state);
+    this.index++;
+  }
+  replaceState(state: unknown): void {
+    this.entries[this.index] = state;
+  }
+  back(): void {
+    if (this.index === 0) return;
+    this.index--;
+    queueMicrotask(() => this.onPop(this.state));
+  }
+}
+
+function setup() {
+  const history = new FakeHistory();
+  const stack = new BackStack(history);
+  const routed: unknown[] = [];
+  history.onPop = (state) => {
+    if (!stack.pop(state)) routed.push(state);
+  };
+  return { history, stack, routed };
+}
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+test('opening a layer adds one entry and back closes it', async () => {
+  const { history, stack, routed } = setup();
+  let open = true;
+  stack.sync('card', true, () => (open = false));
+  assert.equal(history.entries.length, 2);
+  history.back();
+  await tick();
+  assert.equal(open, false);
+  assert.equal(history.index, 0);
+  assert.deepEqual(routed, []);
+});
+
+test('closing through the UI pops its entry and swallows the popstate', async () => {
+  const { history, stack, routed } = setup();
+  stack.sync('card', true, () => undefined);
+  stack.sync('card', false, () => undefined);
+  await tick();
+  assert.equal(history.index, 0);
+  assert.deepEqual(routed, []);
+  assert.equal(stack.depth, 0);
+});
+
+test('back closes only the topmost of several layers', async () => {
+  const { history, stack } = setup();
+  const closed: string[] = [];
+  stack.sync('drawer', true, () => closed.push('drawer'));
+  stack.sync('card', true, () => closed.push('card'));
+  history.back();
+  await tick();
+  assert.deepEqual(closed, ['card']);
+  assert.equal(stack.depth, 1);
+});
+
+test('a route recorded under an open layer replaces its entry', async () => {
+  const { history, stack, routed } = setup();
+  stack.sync('drawer', true, () => undefined);
+  stack.route({ roomId: 'b' }, '/?room=b');
+  stack.sync('drawer', false, () => undefined);
+  await tick();
+  assert.deepEqual(history.entries, [{ roomId: 'a' }, { roomId: 'b' }]);
+  history.back();
+  await tick();
+  assert.deepEqual(routed, [{ roomId: 'a' }]);
+});
+
+test('closing a layer then pressing back does not skip a room', async () => {
+  const { history, stack, routed } = setup();
+  stack.route({ roomId: 'b' }, '/?room=b');
+  stack.sync('card', true, () => undefined);
+  stack.sync('card', false, () => undefined);
+  await tick();
+  assert.deepEqual(history.state, { roomId: 'b' });
+  history.back();
+  await tick();
+  assert.deepEqual(routed, [{ roomId: 'a' }]);
+});
+
+test('a route recorded right after a UI close waits for the pop', async () => {
+  const { history, stack } = setup();
+  stack.sync('menu', true, () => undefined);
+  stack.sync('menu', false, () => undefined);
+  stack.route({ roomId: 'b' }, '/?room=b');
+  await tick();
+  assert.deepEqual(history.entries, [{ roomId: 'a' }, { roomId: 'b' }]);
+});
+
+test('a layer closed under another leaves a stale entry that back skips', async () => {
+  const { history, stack, routed } = setup();
+  let dialog = true;
+  stack.sync('menu', true, () => undefined);
+  stack.sync('dialog', true, () => (dialog = false));
+  stack.sync('menu', false, () => undefined);
+  history.back();
+  await tick();
+  assert.equal(dialog, false);
+  assert.equal(history.index, 0);
+  assert.equal(routed.length, 0);
+});
+
+test('init strips a layer marker left behind by a reload', () => {
+  const { history, stack } = setup();
+  history.entries = [{ roomId: 'a' }, { roomId: 'a', backLayer: 'card' }];
+  history.index = 1;
+  stack.init();
+  assert.deepEqual(history.state, { roomId: 'a' });
+});
+
+test('a settle timeout releases a pop whose popstate never arrives', async () => {
+  const { history, stack } = setup();
+  stack.sync('x', true, () => undefined);
+  history.back = () => undefined;
+  stack.sync('x', false, () => undefined);
+  stack.route({ roomId: 'b' }, '/?room=b');
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  assert.deepEqual(history.state, { roomId: 'b' });
+});

Added file: web/test/longpress.test.ts+89 additions@@ -0,0 +1,89 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { PressTracker, type Timers } from '../src/lib/longpress.ts';
+
+function clock() {
+  let now = 0;
+  let next = 1;
+  const queue = new Map<number, { at: number; fn: () => void }>();
+  const timers: Timers = {
+    set(fn, ms) {
+      const id = next++;
+      queue.set(id, { at: now + ms, fn });
+      return id;
+    },
+    clear(handle) {
+      queue.delete(handle as number);
+    }
+  };
+  const advance = (ms: number) => {
+    now += ms;
+    for (const [id, t] of [...queue]) {
+      if (t.at <= now) {
+        queue.delete(id);
+        t.fn();
+      }
+    }
+  };
+  return { timers, advance };
+}
+
+function setup() {
+  const c = clock();
+  const fires: Array<[number, number]> = [];
+  const tracker = new PressTracker((x, y) => fires.push([x, y]), c.timers);
+  return { ...c, tracker, fires };
+}
+
+test('fires with the press origin after the delay', () => {
+  const { tracker, advance, fires } = setup();
+  tracker.start(10, 20);
+  advance(449);
+  assert.deepEqual(fires, []);
+  advance(1);
+  assert.deepEqual(fires, [[10, 20]]);
+  assert.equal(tracker.fired, true);
+});
+
+test('release before the delay cancels', () => {
+  const { tracker, advance, fires } = setup();
+  tracker.start(0, 0);
+  advance(200);
+  tracker.cancel();
+  advance(1000);
+  assert.deepEqual(fires, []);
+  assert.equal(tracker.fired, false);
+});
+
+test('small jitter is tolerated, a drag cancels', () => {
+  const a = setup();
+  a.tracker.start(0, 0);
+  a.tracker.move(4, 4);
+  a.advance(450);
+  assert.equal(a.fires.length, 1);
+  const b = setup();
+  b.tracker.start(0, 0);
+  b.tracker.move(9, 0);
+  b.advance(450);
+  assert.equal(b.fires.length, 0);
+});
+
+test('a new press clears the fired flag', () => {
+  const { tracker, advance } = setup();
+  tracker.start(0, 0);
+  advance(450);
+  tracker.start(5, 5);
+  assert.equal(tracker.fired, false);
+  assert.equal(tracker.pending, true);
+});
+
+test('flush fires a pending press once and ignores an idle tracker', () => {
+  const { tracker, advance, fires } = setup();
+  tracker.flush();
+  assert.equal(fires.length, 0);
+  tracker.start(3, 4);
+  tracker.flush();
+  advance(1000);
+  assert.deepEqual(fires, [[3, 4]]);
+  assert.equal(tracker.fired, true);
+});

malice

Commit 0e50e0d137af

Commit `0e50e0d137af`