malice

public

Star0

Fork 0

Watch0

104 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `db4e552594cb`

tarball

atagen <boss@atagen.co>2026-10-26 04:43 UTC

5 files changed+488-0

web: show system notifications and an app badge while malice is open

Notifications follow the room summaries' unread counts, which already reflect the homeserver's push rules, so malice doesn't evaluate push rules itself. Only the open room is suppressed while focused, and initial sync backfill stays quiet by ignoring events older than five minutes.

Added file: web/src/lib/NotificationSettings.svelte+38 additions@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { disableNotifications, enableNotifications, notificationPermission, notificationsEnabled } from './notifications';
+
+  let busy = false;
+
+  $: denied = $notificationPermission === 'denied';
+  $: unsupported = $notificationPermission === 'unsupported';
+  $: on = $notificationsEnabled && $notificationPermission === 'granted';
+
+  async function toggle(): Promise<void> {
+    if (busy) return;
+    busy = true;
+    try {
+      if (on) disableNotifications();
+      else await enableNotifications();
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<section aria-label="Notifications">
+  <div class="sec-head">
+    <h3 class="sec-h">Notifications</h3>
+    <span class="state" class:ok={on}>{unsupported ? 'Unavailable' : denied ? 'Blocked' : on ? 'On' : 'Off'}</span>
+  </div>
+  <button type="button" class="ghost-btn" disabled={busy || denied || unsupported} aria-pressed={on} on:click={() => void toggle()}>
+    {on ? 'Turn off' : 'Turn on'}
+  </button>
+</section>
+
+<style>
+  section { margin-top: 18px; }
+  .sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+  .sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }
+  .state { font-size: 12px; color: var(--muted); }
+  .state.ok { color: var(--accent); }
+</style>

Modified file: web/src/lib/SettingsPanel.svelte+3 additions@@ -14,6 +14,7 @@
   import ReactionPicker from './ReactionPicker.svelte';
   import ThemeSettings from './ThemeSettings.svelte';
   import KeywordSettings from './KeywordSettings.svelte';
+  import NotificationSettings from './NotificationSettings.svelte';
   import type { ImagePack, QuickReaction } from './types';
 
   export let quick: QuickReaction[];
@@ -80,6 +81,8 @@
     </div>
   </section>
 
+  <NotificationSettings />
+
   <KeywordSettings />
 
   <section aria-label="Quick reactions">

Added file: web/src/lib/notification-model.ts+133 additions@@ -0,0 +1,133 @@
+import type { MessageKind, RoomSummary, TimelineItem } from './types';
+
+const RECENT_MS = 5 * 60 * 1000;
+
+export interface NotificationSource {
+  senderId: string | null;
+  senderName: string | null;
+  senderAvatar: string | null;
+  kind: MessageKind | null;
+  body: string | null;
+  undecryptable: boolean;
+  highlight: boolean;
+}
+
+export interface NotificationPlan {
+  title: string;
+  body: string;
+  tag: string;
+  renotify: boolean;
+  roomId: string;
+  iconMxc: string | null;
+}
+
+export function notifyingCount(room: RoomSummary): number {
+  if (room.space || room.membership !== 'Joined' || room.notification_mode === 'Mute') return 0;
+  if (room.notification_mode === 'MentionsAndKeywordsOnly') return room.unread_mentions;
+  return room.unread_messages + room.unread_mentions;
+}
+
+export function badgeTotal(rooms: RoomSummary[]): number {
+  return rooms.reduce((sum, room) => sum + notifyingCount(room), 0);
+}
+
+export function roomTag(roomId: string): string {
+  return `room:${roomId}`;
+}
+
+export interface Arrival {
+  mention: boolean;
+}
+
+export function arrivalIn(previous: RoomSummary | undefined, next: RoomSummary, now: number): Arrival | null {
+  if (!previous || notifyingCount(next) <= notifyingCount(previous)) return null;
+  const at = next.latest_event_timestamp_ms;
+  if (at !== null && now - at > RECENT_MS) return null;
+  return { mention: next.unread_mentions > previous.unread_mentions };
+}
+
+export function isRoomWatched(roomId: string, openRoomId: string | null, visible: boolean, focused: boolean): boolean {
+  return visible && focused && roomId === openRoomId;
+}
+
+export function sourceFromTimeline(items: TimelineItem[] | undefined): NotificationSource | null {
+  if (!items) return null;
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i];
+    if (item.kind !== 'event') continue;
+    const { event } = item;
+    if (event.own) return null;
+    const content = event.content;
+    const common = {
+      senderId: event.sender.user_id,
+      senderName: event.sender.display_name,
+      senderAvatar: event.sender.avatar
+    };
+    if (content.kind === 'Message') {
+      return { ...common, kind: content.message.kind, body: content.message.body, undecryptable: false, highlight: event.highlight === true };
+    }
+    if (content.kind === 'Sticker') return { ...common, kind: null, body: content.body, undecryptable: false, highlight: event.highlight === true };
+    if (content.kind === 'UnableToDecrypt') return { ...common, kind: null, body: null, undecryptable: true, highlight: false };
+  }
+  return null;
+}
+
+export function sourceFromSummary(room: RoomSummary): NotificationSource | null {
+  const latest = room.latest_event;
+  if (!latest || latest.send_state.kind !== 'Sent') return null;
+  const hero = room.heroes.find((h) => h.user_id === latest.sender);
+  return {
+    senderId: latest.sender,
+    senderName: hero?.display_name ?? null,
+    senderAvatar: hero?.avatar ?? null,
+    kind: latest.kind,
+    body: latest.body,
+    undecryptable: false,
+    highlight: false
+  };
+}
+
+const MEDIA_LABEL: Partial<Record<string, string>> = {
+  Image: 'Sent an image',
+  Video: 'Sent a video',
+  Audio: 'Sent an audio message',
+  File: 'Sent a file',
+  Location: 'Shared a location'
+};
+
+function previewText(source: NotificationSource, sender: string): string | null {
+  if (source.undecryptable) return null;
+  const kind = typeof source.kind === 'string' ? source.kind : null;
+  const label = kind ? MEDIA_LABEL[kind] : undefined;
+  const text = source.body?.trim();
+  if (label) return label;
+  if (!text) return null;
+  return kind === 'Emote' ? `${sender} ${text}` : text;
+}
+
+function localPart(userId: string): string {
+  const name = userId.startsWith('@') ? userId.slice(1) : userId;
+  const colon = name.indexOf(':');
+  return colon > 0 ? name.slice(0, colon) : name;
+}
+
+export function planNotification(
+  room: RoomSummary,
+  source: NotificationSource | null,
+  arrival: Arrival
+): NotificationPlan {
+  const sender = source?.senderName ?? (source?.senderId ? localPart(source.senderId) : null);
+  const text = source && sender ? previewText(source, sender) : null;
+  const generic = room.direct ? 'New message' : 'New messages';
+  let body: string;
+  if (!text) body = sender && !room.direct ? `${sender}: ${generic}` : generic;
+  else body = room.direct || !sender || source?.kind === 'Emote' ? text : `${sender}: ${text}`;
+  return {
+    title: room.direct && sender ? sender : room.name,
+    body,
+    tag: roomTag(room.room_id),
+    renotify: arrival.mention || source?.highlight === true,
+    roomId: room.room_id,
+    iconMxc: (room.direct ? source?.senderAvatar : null) ?? room.avatar
+  };
+}

Added file: web/src/lib/notifications.ts+192 additions@@ -0,0 +1,192 @@
+import { get, writable } from 'svelte/store';
+import { mediaUrl } from './api';
+import {
+  arrivalIn,
+  type Arrival,
+  badgeTotal,
+  isRoomWatched,
+  notifyingCount,
+  planNotification,
+  roomTag,
+  sourceFromSummary,
+  sourceFromTimeline,
+  type NotificationPlan
+} from './notification-model';
+import { rooms, selectedRoomId, sessionUser, timelines } from './store';
+import type { RoomSummary } from './types';
+
+const SETTLE_MS = 300;
+
+export const OPEN_ROOM_MESSAGE = 'malice-open-room';
+
+export type NotificationPermissionState = NotificationPermission | 'unsupported';
+
+const supported = typeof Notification !== 'undefined';
+const preferenceKey = (account: string) => `malice.notifications.${account}`;
+
+export const notificationsEnabled = writable(false);
+export const notificationPermission = writable<NotificationPermissionState>(supported ? Notification.permission : 'unsupported');
+
+function readPreference(account: string | null | undefined): boolean {
+  if (!account) return false;
+  try {
+    return localStorage.getItem(preferenceKey(account)) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function writePreference(account: string, enabled: boolean): void {
+  try {
+    localStorage.setItem(preferenceKey(account), enabled ? '1' : '0');
+  } catch {}
+}
+
+/** Must run inside a user gesture, since browsers refuse the permission prompt otherwise. */
+export async function enableNotifications(): Promise<void> {
+  const account = get(sessionUser);
+  if (!supported || !account) return;
+  const result = Notification.permission === 'default' ? await Notification.requestPermission() : Notification.permission;
+  notificationPermission.set(result);
+  const on = result === 'granted';
+  writePreference(account, on);
+  notificationsEnabled.set(on);
+}
+
+export function disableNotifications(): void {
+  const account = get(sessionUser);
+  if (account) writePreference(account, false);
+  notificationsEnabled.set(false);
+}
+
+function active(): boolean {
+  return supported && get(notificationsEnabled) && Notification.permission === 'granted';
+}
+
+async function registration(): Promise<ServiceWorkerRegistration | null> {
+  if (!('serviceWorker' in navigator) || !navigator.serviceWorker.controller) return null;
+  try {
+    return await navigator.serviceWorker.ready;
+  } catch {
+    return null;
+  }
+}
+
+async function show(plan: NotificationPlan, openRoom: (roomId: string) => void): Promise<void> {
+  const icon = mediaUrl(plan.iconMxc, 128) ?? undefined;
+  const options: NotificationOptions & { renotify?: boolean } = {
+    body: plan.body,
+    tag: plan.tag,
+    icon,
+    renotify: plan.renotify,
+    data: { roomId: plan.roomId }
+  };
+  const reg = await registration();
+  if (reg) {
+    await reg.showNotification(plan.title, options);
+    return;
+  }
+  const note = new Notification(plan.title, options);
+  note.onclick = () => {
+    window.focus();
+    openRoom(plan.roomId);
+    note.close();
+  };
+}
+
+async function closeRoom(roomId: string): Promise<void> {
+  const reg = await registration();
+  if (!reg) return;
+  for (const note of await reg.getNotifications({ tag: roomTag(roomId) })) note.close();
+}
+
+function setBadge(total: number): void {
+  const nav = navigator as Navigator & { setAppBadge?: (n: number) => Promise<void>; clearAppBadge?: () => Promise<void> };
+  if (total > 0) void nav.setAppBadge?.(total).catch(() => undefined);
+  else void nav.clearAppBadge?.().catch(() => undefined);
+}
+
+/** Watches room summaries for notifying unread increases, shows and clears notifications, and keeps the app badge current. */
+export function startNotifications(openRoom: (roomId: string) => void): () => void {
+  let previous = new Map<string, RoomSummary>();
+  let notified = new Set<string>();
+  let badge = -1;
+
+  const unsubscribeSession = sessionUser.subscribe((account) => notificationsEnabled.set(readPreference(account)));
+
+  void registration().then(async (reg) => {
+    for (const note of (await reg?.getNotifications()) ?? []) {
+      const roomId = (note.data as { roomId?: unknown } | null)?.roomId;
+      if (typeof roomId === 'string') notified.add(roomId);
+    }
+  });
+
+  const watched = (roomId: string) =>
+    isRoomWatched(roomId, get(selectedRoomId), document.visibilityState === 'visible', document.hasFocus());
+
+  const clearRead = (list: RoomSummary[]) => {
+    for (const room of list) {
+      if (notified.has(room.room_id) && (notifyingCount(room) === 0 || watched(room.room_id))) {
+        notified.delete(room.room_id);
+        void closeRoom(room.room_id);
+      }
+    }
+  };
+
+  const waiting = new Map<string, Arrival & { timer: ReturnType<typeof setTimeout> }>();
+
+  const queue = (roomId: string, mention: boolean) => {
+    clearTimeout(waiting.get(roomId)?.timer);
+    const timer = setTimeout(() => {
+      waiting.delete(roomId);
+      const room = get(rooms).find((r) => r.room_id === roomId);
+      if (!room || !active() || watched(roomId) || notifyingCount(room) === 0) return;
+      const source = sourceFromTimeline(get(timelines)[roomId]) ?? sourceFromSummary(room);
+      notified.add(roomId);
+      void show(planNotification(room, source, { mention }), openRoom);
+    }, SETTLE_MS);
+    waiting.set(roomId, { mention, timer });
+  };
+
+  const onRooms = (list: RoomSummary[]) => {
+    const next = new Map(list.map((room) => [room.room_id, room]));
+    const prior = previous;
+    previous = next;
+    if (!active()) {
+      if (badge !== 0) setBadge((badge = 0));
+      return;
+    }
+    const total = badgeTotal(list);
+    if (total !== badge) setBadge((badge = total));
+    const now = Date.now();
+    for (const room of list) {
+      const arrival = arrivalIn(prior.get(room.room_id), room, now);
+      if (!arrival || watched(room.room_id)) continue;
+      queue(room.room_id, arrival.mention || (waiting.get(room.room_id)?.mention ?? false));
+    }
+    clearRead(list);
+  };
+
+  const unsubscribeRooms = rooms.subscribe(onRooms);
+  const unsubscribeEnabled = notificationsEnabled.subscribe(() => onRooms(get(rooms)));
+  const onAttention = () => clearRead(get(rooms));
+  const onMessage = (ev: MessageEvent) => {
+    const data = ev.data as { type?: unknown; roomId?: unknown } | null;
+    if (data?.type === OPEN_ROOM_MESSAGE && typeof data.roomId === 'string') openRoom(data.roomId);
+  };
+  window.addEventListener('focus', onAttention);
+  document.addEventListener('visibilitychange', onAttention);
+  const unsubscribeSelected = selectedRoomId.subscribe(onAttention);
+  if ('serviceWorker' in navigator) navigator.serviceWorker.addEventListener('message', onMessage);
+
+  return () => {
+    unsubscribeSession();
+    unsubscribeRooms();
+    unsubscribeEnabled();
+    unsubscribeSelected();
+    for (const { timer } of waiting.values()) clearTimeout(timer);
+    window.removeEventListener('focus', onAttention);
+    document.removeEventListener('visibilitychange', onAttention);
+    if ('serviceWorker' in navigator) navigator.serviceWorker.removeEventListener('message', onMessage);
+  };
+}

Added file: web/test/notification-model.test.ts+122 additions@@ -0,0 +1,122 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import {
+  arrivalIn,
+  badgeTotal,
+  isRoomWatched,
+  notifyingCount,
+  planNotification,
+  sourceFromTimeline,
+  type NotificationSource
+} from '../src/lib/notification-model.ts';
+import type { RoomSummary, TimelineItem } from '../src/lib/types.ts';
+
+const NOW = 1_000_000_000;
+
+function room(extra: Partial<RoomSummary> = {}): RoomSummary {
+  return {
+    room_id: '!r:x',
+    name: 'General',
+    membership: 'Joined',
+    unread_messages: 0,
+    unread_mentions: 0,
+    unread_notifications: 0,
+    space: false,
+    direct: false,
+    notification_mode: null,
+    latest_event_timestamp_ms: NOW - 1000,
+    avatar: 'mxc://x/room',
+    ...extra
+  } as RoomSummary;
+}
+
+function source(extra: Partial<NotificationSource> = {}): NotificationSource {
+  return { senderId: '@bob:x', senderName: 'Bob', senderAvatar: 'mxc://x/bob', kind: 'Text', body: 'hi', undecryptable: false, highlight: false, ...extra };
+}
+
+test('counts only notifying unread per mode', () => {
+  assert.equal(notifyingCount(room({ unread_notifications: 0, unread_messages: 9 })), 9);
+  assert.equal(notifyingCount(room({ direct: true, unread_messages: 2, unread_mentions: 1 })), 3);
+  assert.equal(notifyingCount(room({ notification_mode: 'Mute', unread_mentions: 4 })), 0);
+  assert.equal(notifyingCount(room({ notification_mode: 'MentionsAndKeywordsOnly', unread_notifications: 5, unread_mentions: 1 })), 1);
+  assert.equal(notifyingCount(room({ space: true, unread_mentions: 1 })), 0);
+  assert.equal(notifyingCount(room({ membership: 'Invited', unread_mentions: 1 })), 0);
+});
+
+test('badge sums notifying counts across rooms', () => {
+  const rooms = [room({ unread_messages: 2 }), room({ direct: true, unread_messages: 1 }), room({ notification_mode: 'Mute', unread_messages: 9 })];
+  assert.equal(badgeTotal(rooms), 3);
+  assert.equal(badgeTotal([]), 0);
+});
+
+test('arrival needs a known previous room and a count increase', () => {
+  const before = room({ unread_messages: 1 });
+  assert.equal(arrivalIn(undefined, before, NOW), null);
+  assert.equal(arrivalIn(before, before, NOW), null);
+  assert.equal(arrivalIn(before, room({ unread_messages: 0 }), NOW), null);
+  assert.deepEqual(arrivalIn(before, room({ unread_messages: 2 }), NOW), { mention: false });
+  assert.deepEqual(arrivalIn(before, room({ unread_messages: 2, unread_mentions: 1 }), NOW), { mention: true });
+});
+
+test('arrival ignores stale backfill', () => {
+  const next = room({ unread_messages: 1, latest_event_timestamp_ms: NOW - 10 * 60 * 1000 });
+  assert.equal(arrivalIn(room(), next, NOW), null);
+});
+
+test('only the focused open room is watched', () => {
+  assert.equal(isRoomWatched('!a', '!a', true, true), true);
+  assert.equal(isRoomWatched('!a', '!a', false, true), false);
+  assert.equal(isRoomWatched('!a', '!a', true, false), false);
+  assert.equal(isRoomWatched('!a', '!b', true, true), false);
+});
+
+test('group notification prefixes the sender and tags per room', () => {
+  const plan = planNotification(room(), source(), { mention: false });
+  assert.equal(plan.title, 'General');
+  assert.equal(plan.body, 'Bob: hi');
+  assert.equal(plan.tag, 'room:!r:x');
+  assert.equal(plan.renotify, false);
+  assert.equal(plan.iconMxc, 'mxc://x/room');
+});
+
+test('direct notification titles the sender and uses their avatar', () => {
+  const plan = planNotification(room({ direct: true, name: 'Bob' }), source(), { mention: false });
+  assert.equal(plan.title, 'Bob');
+  assert.equal(plan.body, 'hi');
+  assert.equal(plan.iconMxc, 'mxc://x/bob');
+});
+
+test('mentions and keyword highlights renotify', () => {
+  assert.equal(planNotification(room(), source(), { mention: true }).renotify, true);
+  assert.equal(planNotification(room(), source({ highlight: true }), { mention: false }).renotify, true);
+});
+
+test('undecryptable and missing content get a generic body', () => {
+  assert.equal(planNotification(room(), source({ undecryptable: true, body: null }), { mention: false }).body, 'Bob: New messages');
+  assert.equal(planNotification(room({ direct: true }), null, { mention: false }).body, 'New message');
+});
+
+test('media and emotes get readable previews', () => {
+  assert.equal(planNotification(room({ direct: true }), source({ kind: 'Image', body: 'cat.png' }), { mention: false }).body, 'Sent an image');
+  assert.equal(planNotification(room(), source({ kind: 'Emote', body: 'waves' }), { mention: false }).body, 'Bob waves');
+});
+
+test('falls back to the user id local part when no display name is known', () => {
+  assert.equal(planNotification(room(), source({ senderName: null }), { mention: false }).body, 'bob: hi');
+});
+
+test('timeline source skips own newest and non-message items', () => {
+  const message = (own: boolean, body: string): TimelineItem =>
+    ({
+      kind: 'event',
+      event: {
+        own,
+        sender: { user_id: '@bob:x', display_name: 'Bob', avatar: null, name_ambiguous: false },
+        content: { kind: 'Message', message: { kind: 'Text', body } }
+      }
+    }) as TimelineItem;
+  const membership = { kind: 'event', event: { own: false, sender: { user_id: '@c:x' }, content: { kind: 'RoomCreated' } } } as TimelineItem;
+  assert.equal(sourceFromTimeline([message(false, 'a'), membership])?.body, 'a');
+  assert.equal(sourceFromTimeline([message(false, 'a'), message(true, 'b')]), null);
+  assert.equal(sourceFromTimeline(undefined), null);
+});

malice

Commit db4e552594cb

Commit `db4e552594cb`