meta-sovereign 0.49.10 → 0.49.12

package/js/src/server/github-service.js

@@ -100,6 +100,16 @@ const errorEntry = (error) => ({
   ...(error.retryAfter ? { retryAfter: error.retryAfter } : {}),
 });
 
+// A write that may have been delivered: reported as unknown, never repeated.
+const unknownIfAmbiguous = (error) =>
+  error?.ambiguous === true && error.code !== 'send-unknown'
+    ? Object.assign(error, {
+        code: 'send-unknown',
+        outcome: 'unknown',
+        fallback: false,
+      })
+    : error;
+
 const putAll = async (store, links) => {
   for (const link of links) {
     await store.put(stampSourceLink(link, 'github'));
@@ -307,16 +317,26 @@ export const createGithubService = ({
   const notifications = () => storedNotifications(store);
 
   // Marking read changes GitHub: only on an explicit call (never by fetching).
+  // A failure that may have reached GitHub is `send-unknown` and is not
+  // repeated; the stored copy stays unread until the next fetch shows what
+  // GitHub says (R-Z4, R-Z20).
   const markRead = async ({ threadId = null, all = false } = {}) => {
     const { token, live } = await withLive();
+    try {
+      if (all) {
+        await live.markAllRead({ token });
+      } else {
+        await live.markThreadRead(threadId, { token });
+      }
+    } catch (error) {
+      throw unknownIfAmbiguous(error);
+    }
     if (all) {
-      await live.markAllRead({ token });
       for (const link of await notifications()) {
         await store.put({ ...link, unread: false });
       }
       return { ok: true, all: true };
     }
-    await live.markThreadRead(threadId, { token });
     const link = await store.get(`notification:github:${threadId}`);
     if (link) {
       await store.put({ ...link, unread: false });

package/js/src/server/index.js

@@ -98,7 +98,12 @@ import { handleMessageRoutes } from './routes-messages.js';
 import { handleEmailGets } from './routes-email.js';
 import { handleMediaGets } from './routes-media.js';
 import { createAttachmentStore } from './email-attachments.js';
-import { createEmailPoller } from './email-poller.js';
+import {
+  VK_CAPTCHA_HOSTS,
+  VK_IMAGE_HOSTS,
+  VK_MEDIA_HOSTS,
+  cspSources,
+} from '../sources/vk-hosts.js';
 import { setAttachmentSink } from '../sources/email.js';
 import { handleEventRoutes } from './routes-events.js';
 import { createPasscodeLock } from './passcode.js';
@@ -156,7 +161,9 @@ export const CSP =
   "style-src 'self'; " +
   "img-src 'self' data: blob: https://vk.com " +
   // VK's picture CDNs, for photos and stickers in VK chats (R-Z8).
-  'https://*.userapi.com https://*.vk-cdn.net https://*.vkuserphoto.ru; ' +
+  `${cspSources(VK_IMAGE_HOSTS)} ${cspSources(VK_CAPTCHA_HOSTS)}; ` +
+  // Direct VK audio and video files (R-Z20); a VK video page is a link.
+  `media-src 'self' ${cspSources(VK_MEDIA_HOSTS)}; ` +
   'frame-src https:; ' +
   "connect-src 'self' https: ws: wss: http://127.0.0.1:* http://localhost:*; " +
   "worker-src 'self'; " +
@@ -391,17 +398,12 @@ const mediaDirOf = (storeDir) =>
 
 // Mail (R-Z5): where attachments are kept next to the store, and the
 // periodic pull of a connected mailbox (`emailPoll: false` turns it off).
-const emailContext = (store, storeDir, poll, log, later) => {
+const emailContext = (storeDir) => {
   const emailFiles = storeDir
     ? createAttachmentStore(path.join(storeDir, 'media', 'email'))
     : null;
   setAttachmentSink(emailFiles ? (bytes) => emailFiles.save(bytes) : null);
-  const emailPoller =
-    poll === false
-      ? { start() {}, stop() {} }
-      : createEmailPoller({ store, log, ...poll });
-  later.push(() => emailPoller.start());
-  return { emailFiles, emailPoller };
+  return { emailFiles };
 };
 
 // Listen (with HTTPS beside HTTP when asked, ./local-tls.js) and track
@@ -839,7 +841,7 @@ export const startServer = async ({
     signaling: null,
     secretPassphrase,
     emailLiveFactory,
-    ...emailContext(store, storeDir, emailPoll, log, later),
+    ...emailContext(storeDir),
     ...uiContext(allowOrigins, uiUrl, localUi),
     ...cvContext(cv),
     replies: replyService(store, storeDir, replies),
@@ -866,7 +868,7 @@ export const startServer = async ({
       later
     ),
     chatIndex,
-    ...pullContext(store, log, pulls, later),
+    ...pullContext(store, log, pulls, later, emailPoll),
   };
   Object.assign(ctx, backgroundJobs({ ctx, store, log, later, backups }));
   const server = createHttpServer(store, ctx, log);
@@ -912,7 +914,6 @@ export const startServer = async ({
     close: () =>
       new Promise((resolve) => {
         bus?.close();
-        ctx.emailPoller.stop();
         ctx.replies.close().catch(() => {});
         ctx.closeAutomations().catch(() => {});
         ctx.stopJobs();

package/js/src/server/routes-pull.js

@@ -23,6 +23,8 @@ import { liveOptionsFrom, pullLiveInto } from '../sources/index.js';
 import { createUpworkLive } from '../sources/upwork.js';
 import { createPeoplePerHourLive } from '../sources/peopleperhour.js';
 import { createGithubService } from './github-service.js';
+import { handleVkRoutes } from './routes-vk.js';
+import { emailConfigured } from '../sources/email-store.js';
 import { fail, json, readBody } from './util.js';
 
 const MINUTE = 60_000;
@@ -34,9 +36,24 @@ const connected = (store, source) => async () =>
 // still comes from the store.
 const liveOf = (make, given) => (given ? make(given) : undefined);
 
+// Mail (R-Z5, on the shared runner since R-Z20): every ten minutes, the first
+// pull 30 s after the server listens, never faster than a minute, backed off
+// after a failure like every job. `emailPoll: false` keeps only the button.
+// `email.pull` (tests) replaces the real pull.
+const MIN_EMAIL_MS = MINUTE;
+const emailJob = (store, poll = {}) => ({
+  ready: async () => emailConfigured(await liveOptionsFrom(store, 'email')),
+  run: () =>
+    (poll.pull ?? ((s) => pullLiveInto(s, 'email', { limit: 20 })))(store),
+  intervalMs:
+    poll === false ? 0 : Math.max(MIN_EMAIL_MS, poll.intervalMs ?? 10 * MINUTE),
+  firstDelayMs: poll === false ? 0 : (poll.firstMs ?? 30_000),
+});
+
 /** The jobs: network -> { ready, run, intervalMs }. */
 export const pullJobs = (store, { vkInbox, github, options = {} }) => ({
   ...(github ? { github: github.pullJob() } : {}),
+  email: emailJob(store, options.email),
   vk: {
     ready: vkInbox.ready,
     run: vkInbox.fetch,
@@ -103,6 +120,8 @@ const statusOf = async (store, ctx) => {
       connected: await ctx.pullRunner.connected(source),
       lastOkAt: state.lastOkAt ?? null,
       lastError: state.lastError ?? null,
+      // A captcha, or anything else only the user can clear (R-Z20).
+      needsAttention: state.lastError?.needsAttention === true,
     };
   }
   return { ok: true, sources };
@@ -117,6 +136,9 @@ export const handlePullRoutes = async (store, req, res, p, ctx) => {
   if (!ctx.pullRunner) {
     return false;
   }
+  if (p.startsWith('/api/vk/')) {
+    return handleVkRoutes(req, res, p, ctx);
+  }
   if (p === '/api/pull/status' && req.method === 'GET') {
     return json(res, 200, await statusOf(store, ctx)) ?? true;
   }
@@ -139,7 +161,7 @@ export const handlePullRoutes = async (store, req, res, p, ctx) => {
 };
 
 /** What a server keeps for the pulls; they start with the other `later` services. */
-export const pullContext = (store, log, options, later) => {
+export const pullContext = (store, log, options, later, emailPoll) => {
   // GitHub's picker routes work even when the pulls are off; its schedule is
   // one more job of the shared runner (R-Z11).
   // Tests give `pulls.githubLiveFactory`, a fake createGithubLive.
@@ -153,11 +175,17 @@ export const pullContext = (store, log, options, later) => {
   if (options === false) {
     return { ...given, pullRunner: null };
   }
-  const services = createPullServices(store, log, options ?? {}, github);
+  const services = createPullServices(
+    store,
+    log,
+    { ...options, email: emailPoll },
+    github
+  );
   later.push(services.start);
   return {
     ...given,
     pullRunner: services.pullRunner,
+    vkInbox: services.vkInbox,
     stopPulls: services.stop,
   };
 };

package/js/src/server/routes-vk.js

@@ -0,0 +1,93 @@
+/**
+ * VK scroll-back (R-Z20), a user action from the page:
+ *
+ *   POST /api/vk/history {chat, before?, captchaSid?, captchaKey?}
+ *     -> { ok, imported, complete }
+ *        or { ok: false, error, code } with `code` one of bad-request |
+ *        not-connected | rate-limited (HTTP 429) | captcha (HTTP 409, plus
+ *        `captcha: { sid, img }` -- `img` only when it is on VK's own API
+ *        host) | the network's own code.
+ *
+ * `chat` is the VK peer id, `before` the VK id of the oldest message the
+ * page holds. A captcha is shown to the user by the page, which repeats
+ * this request once with `captchaSid` and `captchaKey`; the program never
+ * solves one, and pulls in the background never ask (they back off and mark
+ * the connection as needing attention: ../sources/pull-runner.js).
+ */
+
+import { fail, json, readBody } from './util.js';
+import { isTrustedMutation } from './routes-auto-import.js';
+import { safeMessage } from './redact.js';
+import { vkCaptchaImage } from '../sources/vk-hosts.js';
+
+const PEER = /^-?\d{1,15}$/;
+const MESSAGE = /^\d{1,12}$/;
+const SID = /^[\w.-]{1,64}$/;
+const KEY = /^\S{1,32}$/;
+const STATUS = { 'rate-limited': 429, captcha: 409, 'not-connected': 409 };
+
+const text = (value) => (value === undefined ? undefined : String(value));
+
+/** The checked request, or a message saying what is wrong. */
+export const historyRequest = (body) => {
+  const peerId = text(body.chat);
+  if (!PEER.test(peerId ?? '') || Number(peerId) === 0) {
+    return { error: 'a VK chat id is needed' };
+  }
+  const before = text(body.before);
+  if (before !== undefined && !MESSAGE.test(before)) {
+    return { error: '"before" must be a VK message id' };
+  }
+  const sid = text(body.captchaSid);
+  const key = text(body.captchaKey);
+  if ((sid === undefined) !== (key === undefined)) {
+    return { error: 'captchaSid and captchaKey go together' };
+  }
+  if (sid !== undefined && !(SID.test(sid) && KEY.test(key))) {
+    return { error: 'the captcha answer is not valid' };
+  }
+  return { peerId, before, captchaSid: sid, captchaKey: key };
+};
+
+const failure = (res, error) => {
+  const code = error.code ?? 'failed';
+  const captcha =
+    code === 'captcha'
+      ? {
+          captcha: {
+            sid: error.captchaSid ?? null,
+            img: error.captchaImg ? vkCaptchaImage(error.captchaImg) : null,
+          },
+        }
+      : {};
+  return (
+    json(res, STATUS[code] ?? 502, {
+      ok: false,
+      error: safeMessage(error),
+      code,
+      ...captcha,
+    }) ?? true
+  );
+};
+
+export const handleVkRoutes = async (req, res, p, ctx) => {
+  if (p !== '/api/vk/history' || req.method !== 'POST') {
+    return false;
+  }
+  if (!isTrustedMutation(req, ctx.allowOrigins)) {
+    return fail(res, 403, 'forbidden', 'use the meta-sovereign app') ?? true;
+  }
+  const request = historyRequest(await readBody(req));
+  if (request.error) {
+    return fail(res, 400, 'bad-request', request.error) ?? true;
+  }
+  if (!ctx.vkInbox) {
+    return fail(res, 404, 'unsupported', 'VK is not enabled') ?? true;
+  }
+  try {
+    const done = await ctx.vkInbox.older(request);
+    return json(res, 200, { ok: true, ...done }) ?? true;
+  } catch (error) {
+    return failure(res, error);
+  }
+};

package/js/src/sources/pull-runner.js

@@ -21,6 +21,10 @@
  * whose user turned the schedule off can still be fetched by hand) and its
  * `intervalMs` is then just how often `due()` is asked.
  *
+ * A pull that VK stops with a captcha (code `captcha`) is marked
+ * `needsAttention` in `lastError`: neither the schedule nor this runner
+ * shows or solves it (R-Z20; the page asks only for the user's own actions).
+ *
  * `pull-state:<source>` keeps `lastOkAt` and a job's own cursor.
  */
 
@@ -97,7 +101,13 @@ export const createPullRunner = ({
       const out = failure(error, { source });
       log?.({ level: 'warn', event: 'pull_failed', source, code: out.code });
       await savePullState(store, source, {
-        lastError: { code: out.code, at: new Date(now()).toISOString() },
+        lastError: {
+          code: out.code,
+          at: new Date(now()).toISOString(),
+          // A captcha only the user can solve, in the app: the schedule
+          // backs off and never asks (R-Z20).
+          ...(out.code === 'captcha' ? { needsAttention: true } : {}),
+        },
       }).catch(() => {});
       return out;
     } finally {
@@ -160,6 +170,10 @@ export const createPullRunner = ({
     fetchNow,
     /** Start the schedules (call after the server listens). */
     start() {
+      // A second start must not run a second schedule (R-Z20).
+      if (!stopped) {
+        return;
+      }
       stopped = false;
       for (const [source, job] of Object.entries(jobs)) {
         if (job.intervalMs > 0) {

package/js/src/sources/vk-hosts.js

@@ -0,0 +1,51 @@
+/**
+ * The exact VK hosts the page may load from (R-Z20): one list for the CSP
+ * (`img-src`, `media-src`, ../server/index.js) and for the adapter, so a URL
+ * is only offered to a player when the CSP would let the browser fetch it.
+ * Pictures, audio and video come from VK's CDNs; the captcha picture comes
+ * from the API host. Nothing is framed: a VK video page is a link, never an
+ * iframe.
+ */
+
+/** Hosts VK serves audio and video files from (`media-src`). */
+export const VK_MEDIA_HOSTS = [
+  '*.userapi.com',
+  '*.vk-cdn.net',
+  '*.vkuseraudio.net',
+  '*.vkuservideo.net',
+];
+
+/** Hosts of pictures (`img-src`): the media hosts and VK's photo CDN. */
+export const VK_IMAGE_HOSTS = [...VK_MEDIA_HOSTS, '*.vkuserphoto.ru'];
+
+/** Where VK's captcha picture is served from (`img-src`). */
+export const VK_CAPTCHA_HOSTS = ['api.vk.com', 'api.vk.ru'];
+
+/** A CSP source list for `hosts`: `https://a https://b`. */
+export const cspSources = (hosts) =>
+  hosts.map((host) => `https://${host}`).join(' ');
+
+const matches = (host, pattern) =>
+  pattern.startsWith('*.')
+    ? host.endsWith(pattern.slice(1)) && host.length > pattern.length - 1
+    : host === pattern;
+
+/** `url` when it is an https address on one of `hosts`, else null. */
+export const onHosts = (url, hosts) => {
+  try {
+    const parsed = new URL(String(url));
+    return parsed.protocol === 'https:' &&
+      !parsed.username &&
+      hosts.some((pattern) => matches(parsed.hostname, pattern))
+      ? parsed.href
+      : null;
+  } catch {
+    return null;
+  }
+};
+
+/** A direct audio/video file address, only on VK's CDNs. */
+export const vkMediaUrl = (url) => onHosts(url, VK_MEDIA_HOSTS);
+
+/** VK's captcha picture address, only on VK's API hosts. */
+export const vkCaptchaImage = (url) => onHosts(url, VK_CAPTCHA_HOSTS);

package/js/src/sources/vk-longpoll.js

@@ -181,7 +181,7 @@ const linksOfBatch = async (live, batch) => {
 };
 
 const failureDelay = (error, fails) =>
-  AUTH_CODES.has(Number(error?.vkCode))
+  AUTH_CODES.has(Number(error?.vkCode)) || error?.code === 'captcha'
     ? 5 * 60_000
     : Math.min(5 * 60_000, 5000 * 2 ** Math.min(fails - 1, 6));
 
@@ -307,6 +307,17 @@ export const createVkLongPoll = ({
           event: 'vk_longpoll_failed',
           code: error.code ?? error.vkCode ?? null,
         });
+        if (error.code === 'captcha') {
+          // Only the user can solve it, in the app; this loop just waits
+          // and says so (R-Z20).
+          await savePullState(store, SOURCE, {
+            lastError: {
+              code: 'captcha',
+              at: new Date(now()).toISOString(),
+              needsAttention: true,
+            },
+          }).catch(() => {});
+        }
         await sleep(failureDelay(error, fails));
       }
     }

package/js/src/sources/vk-older.js

@@ -0,0 +1,75 @@
+/**
+ * Scroll-back for a VK chat (R-Z20): when the reader reaches the top the page
+ * asks for the page before its oldest message (`start_message_id` + `offset`
+ * 1), through the same paced client as the pulls (./vk-limits.js). Messages
+ * already stored are not written again, and an empty page marks the chat
+ * finished (`history:vk:<peer>`, written after the page was stored), so
+ * nothing asks past the beginning. A captcha (error 14) is thrown to the
+ * page, which asks the user; the same request is then repeated once with
+ * `captcha_sid` and `captcha_key` -- never solved by the program. The same
+ * request made twice at once (two scroll events) is one request to VK.
+ */
+
+import { putAll } from '../storage/universal.js';
+import { stamp } from './vk-longpoll.js';
+
+const SOURCE = 'vk';
+export const OLDER_PAGE = 50;
+
+export const vkHistoryId = (peerId) => `history:vk:${peerId}`;
+
+const olderNow = async (
+  { store, context },
+  { peerId, before = null, captchaSid, captchaKey }
+) => {
+  const mark = vkHistoryId(peerId);
+  if ((await store.get(mark))?.complete) {
+    return { imported: 0, complete: true, cached: true };
+  }
+  const { live } = await context();
+  const page = await live.pullMessages({
+    peerId,
+    count: OLDER_PAGE,
+    ...(before ? { startMessageId: before, offset: 1 } : {}),
+    captchaSid,
+    captchaKey,
+  });
+  const fresh = [];
+  for (const link of stamp(page.links)) {
+    if (!(await store.get(link.id))) {
+      fresh.push(link);
+    }
+  }
+  await putAll(store, fresh);
+  const complete = page.rawCount === 0;
+  if (complete) {
+    await store.put({
+      id: mark,
+      source: SOURCE,
+      chat: String(peerId),
+      complete: true,
+      tokens: ['history', SOURCE, String(peerId)],
+      children: [],
+    });
+  }
+  return { imported: fresh.length, complete };
+};
+
+/** `older({ peerId, before?, captchaSid?, captchaKey? })` -> { imported, complete }. */
+export const createVkOlder = (env) => {
+  const asking = new Map();
+  return (request) => {
+    const key = JSON.stringify([
+      request.peerId,
+      request.before ?? null,
+      request.captchaSid ?? null,
+    ]);
+    if (!asking.has(key)) {
+      asking.set(
+        key,
+        olderNow(env, request).finally(() => asking.delete(key))
+      );
+    }
+    return asking.get(key);
+  };
+};

package/js/src/sources/vk-sync.js

@@ -9,6 +9,8 @@
  * When the Long Poll is not running, one poll with `wait=0` drains pending
  * events too. A user token is held to 3 requests a second, a community token
  * to 20 (./vk-limits.js); error 6 backs off.
+ *
+ * `older` (./vk-older.js) is scroll-back for a VK chat (R-Z20).
  */
 
 import { putAll } from '../storage/universal.js';
@@ -18,6 +20,7 @@ import { VK_COMMUNITY_RPS, VK_USER_RPS } from './vk-limits.js';
 import { loadPullState, savePullState } from './pull-runner.js';
 import { codedError } from './http.js';
 import { createVkLongPoll, detectMode, stamp } from './vk-longpoll.js';
+import { createVkOlder } from './vk-older.js';
 
 const SOURCE = 'vk';
 const BACKFILL_CHATS = 3;
@@ -114,6 +117,8 @@ export const createVkInbox = ({
     return imported;
   };
 
+  const older = createVkOlder({ store, context });
+
   /** "Fetch now" and the periodic pull: chats, more history, pending events. */
   const fetch = async () => {
     const { live } = await context();
@@ -128,6 +133,7 @@ export const createVkInbox = ({
   return {
     ready,
     fetch,
+    older,
     step: longpoll.step,
     start: longpoll.start,
     stop: longpoll.stop,

package/js/src/sources/vk.js

@@ -30,6 +30,7 @@ import {
   resolveOption,
 } from './http.js';
 import { contentSticker } from './sticker.js';
+import { vkMediaUrl } from './vk-hosts.js';
 import { isGreetingText } from '../greetings/detect.js';
 import { vkStickerPreview } from '../greetings/catalog.js';
 import {
@@ -141,6 +142,19 @@ const vkChatType = (peerId) => {
   return 'private';
 };
 
+// A video: a playable file only when the attachment carries a direct mp4 on a
+// VK CDN; the `player` address of video.get is an iframe page on vk.com, so
+// the page gets the video's own page to link out to, never a frame (R-Z20).
+const vkVideoLinks = (vid) => ({
+  src: vkMediaUrl(
+    vid.files?.mp4_720 ?? vid.files?.mp4_480 ?? vid.files?.mp4_360 ?? ''
+  ),
+  page:
+    vid.owner_id !== undefined && vid.id !== undefined
+      ? `https://vk.com/video${vid.owner_id}_${vid.id}`
+      : null,
+});
+
 // One handler per VK attachment type — kept small so vkAttachments stays
 // under complexity 10.
 const vkAttachmentHandlers = {
@@ -177,10 +191,14 @@ const vkAttachmentHandlers = {
   },
   audio(att) {
     const { artist, title } = att.audio ?? {};
+    // VK gives most apps no audio file address; when it does and it is a
+    // direct file on a VK CDN, the page plays it (R-Z20).
+    const src = att.audio?.url ? vkMediaUrl(att.audio.url) : null;
     return {
       kind: 'audio',
       title: [artist, title].filter(Boolean).join(' - ') || null,
       duration: att.audio?.duration ?? null,
+      ...(src && !/\.m3u8(\?|$)/.test(src) ? { src } : {}),
     };
   },
   wall(att) {
@@ -195,9 +213,12 @@ const vkAttachmentHandlers = {
   },
   audio_message(att) {
     const am = att.audio_message ?? {};
+    // mp3 first: Safari cannot play ogg (R-Z20).
+    const src = vkMediaUrl(am.link_mp3 ?? am.link_ogg ?? '');
     return {
       kind: 'voice',
       url: am.link_ogg ?? am.link_mp3 ?? null,
+      ...(src ? { src } : {}),
       duration: am.duration ?? null,
     };
   },
@@ -207,11 +228,14 @@ const vkAttachmentHandlers = {
       vid.image?.find((i) => i.width >= 320)?.url ??
       vid.image?.[0]?.url ??
       null;
+    const { src, page } = vkVideoLinks(vid);
     return {
       kind: 'video',
       title: vid.title ?? null,
       duration: vid.duration ?? null,
       thumb,
+      ...(page ? { url: page } : {}),
+      ...(src ? { src } : {}),
     };
   },
   sticker(att) {
@@ -656,6 +680,9 @@ const vkLivePulls = (call) => {
             offset: options.offset,
             start_message_id: options.startMessageId,
             extended: 1,
+            // The user solved VK's captcha: the same request again (R-Z20).
+            captcha_sid: options.captchaSid,
+            captcha_key: options.captchaKey,
           },
           options.token
         )

package/js/src/web/app.css

@@ -12567,3 +12567,43 @@ main[data-view='chat'] > .api-error-toast {
   color: var(--text-muted);
   border-style: dashed;
 }
+
+/* R-Z20: VK players, video link card, captcha picture, notification list */
+.remote-player {
+  display: block;
+  width: 100%;
+  max-width: 320px;
+  border-radius: 8px;
+}
+audio.remote-player {
+  height: 40px;
+}
+.remote-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.vk-captcha-img {
+  display: block;
+  max-width: 100%;
+  background: #fff;
+  border-radius: 8px;
+}
+.notification-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.notification-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+.note-title {
+  flex: 1 1 12rem;
+  overflow-wrap: anywhere;
+}