25 Commits
Author SHA1 Message Date
ksmithandClaude Sonnet 5.5 b52db0ebe0 Bump to v2026.10.13
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-13 19:21:39 -06:00
ksmithandClaude Sonnet 5.5 dda85a2b78 Expire presence so users can't get stuck online (#77)
Presence was a per-user refcount in Redis, decremented only when a
connection's cleanup ran. Anything that ended a connection without
cleanup (a crash, an unclean restart, a laptop asleep with the page
frozen) leaked its count forever, so those users never showed offline.
Production had 19 counts for 2 live connections.

Presence is now one expiring entry per connection (90s TTL) for global,
per-room and focus presence, in new presence:v2:* keys. Clients renew
theirs by sending any frame, which the existing 30s ping/pong already
does. The server closes a human connection that sends nothing for 90s
(code 4408), which catches a frozen page whose browser still answers
transport pings. Bot connections can't be expected to answer pings, so
the server renews theirs itself while the handler is alive.

An expiry has no disconnect event to announce it, so a sweeper on each
worker (one per 15s overall, via a Redis lock) prunes expired entries
and broadcasts the offline transition. The old presence:* hashes are
deleted at startup.

Tests cover the expiry store, the sweeper, and the websocket cases.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-13 19:21:39 -06:00
ksmithandClaude Sonnet 5.5 7ff7f2ec0e Bump to v2026.10.9
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-09 15:25:31 -06:00
ksmithandClaude Sonnet 5.5 62b5eec2fb Show the date on message timestamps that aren't from today
A bare "4:04 PM" gave no way to tell today's message from one sent last
week. Today stays time-only; older messages gain just enough date to
place them: "Yesterday 4:04 PM", a weekday for the past week ("Mon
4:04 PM"), then "Oct 2, 4:04 PM" (with the year if it isn't this one).
Hovering a time shows the full date. All in the viewer's local time.

A new calendar day now always starts a new message group. Previously a
same-sender run that crossed midnight within the 5-minute window (11:58
PM then 12:01 AM) stayed under one header, which would have put the
later message under the wrong day's timestamp. The grouping rule moves
out of MessageList into messageGrouping.ts so it's unit-tested.

useLocalDay refreshes "today" at local midnight and when a hidden tab
becomes visible again, so a tab left open overnight doesn't keep showing
yesterday's messages as a bare time. .message-time no longer wraps, and
.message-author can shrink, so a long display name can't push the longer
label out of the row on a phone.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-09 15:25:22 -06:00
ksmithandClaude Sonnet 5.5 eb30dc1753 Bump to v2026.10.2
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-02 16:07:07 -06:00
ksmithandClaude Sonnet 5.5 6975ed4dc0 Add a collapsible markdown formatting toolbar to the composer (#75)
Markdown support was already complete and documented, but nothing in the
composer pointed at it -- unlike @, # and : (which advertise themselves
when typed), formatting syntax was only discoverable via Help, buried in
the account menu.

The composer stays a plain markdown textarea; a new "Aa" button opens a
toolbar that inserts the syntax for you: bold, italic, strikethrough,
inline code, code block, link, quote, bulleted/numbered lists, H1-H3,
sub/superscript. Collapsed by default, remembered across reloads and
room switches. Clicking a button again removes the formatting (native
undo doesn't track programmatic edits), and bold/italic/sub/strike
toggles are run-length aware so "***x***" is handled correctly. The
selection math is pure functions in lib/markdownFormat.ts, unit-tested.

The "?" opens /help#formatting in a new tab so the draft isn't lost;
HelpPage now scrolls to the hash once the guide has loaded, since the
browser's own hash scroll fired before the async-fetched headings
existed.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-02 16:06:56 -06:00
ksmithandClaude Sonnet 5 c54c1bf97d Bump to v2026.9.28
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-28 17:22:21 -06:00
ksmithandClaude Sonnet 5 3349cadea2 Fix desktop tray unread indicator: clear only on genuine room entry
The tray indicator must stay visible while a message is unread and
clear only when the user actually opens the room containing it --
never merely because the window was shown, focused, restored, or
opened from the tray.

Adds window.dsDesktop.roomOpened() (called exactly once per genuine
transition to a real room id, via useDesktopRoomBridge) and wires up
window.dsDesktop.setUnreadCount() (declared but never actually called
before this) to fire whenever the unread-room count changes. Both are
no-ops in browser builds, matching this bridge's existing optional-
chaining convention.

Frontend unread state stays authoritative -- clearRoomIndicators is
pulled out of ChatShellPage as a pure function (same behavior, now
directly testable) so opening one room only clears that room's
unread/mention flags, leaving every other room's state untouched.

Also adds a frontend test runner (vitest + React Testing Library) --
none existed in this project before. 10 new tests cover: roomOpened
firing once on entry, not refiring on an unrelated rerender with the
same room id, refiring on a genuine room-to-room transition, never
firing with no room id, setUnreadCount firing independently of
roomOpened, clearing one room preserving every other room's unread
state, and the desktop bridge remaining fully optional.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-28 17:21:45 -06:00
ksmithandClaude Sonnet 5 047f47d524 Bump to v2026.9.26
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-26 15:20:20 -06:00
ksmithandClaude Sonnet 5 850d9ec0fa Supervise the broadcast listener so it recovers from a dropped Redis connection (#76)
The previous fix hardened listen() against a single bad message, but a
connection-level failure (Redis restarting, a network blip) raises from
the async-for iteration itself, outside that guard, and killed the
task permanently and silently -- HTTP/REST and login kept working fine
since neither touches it, but live message delivery was gone for every
room and every user on the affected process until a manual restart.

Confirmed live in production after an OS update restarted Redis:
PUBSUB NUMPAT showed zero pattern subscriptions across all 4 gunicorn
workers, meaning every one of them had lost its listener with nothing
to bring it back.

Broadcaster.run_forever() now supervises listen(), restarting it with
exponential backoff (capped at 30s, reset after a stable 60s+ run) on
any failure, while still letting a genuine shutdown (task
cancellation) propagate immediately instead of being treated as just
another retry.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-26 15:19:59 -06:00
ksmithandClaude Sonnet 5 86584660fb Bump to v2026.9.23
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-23 12:59:15 -06:00
ksmithandClaude Sonnet 5 6f67f36578 Add WS heartbeat and harden broadcast against dead sockets (#76)
Messages could silently stop arriving until a room switch happened to
paper over it with a REST refetch. Root cause: a connection that dies
without a clean close (laptop sleep, an idle connection recycled by a
proxy/NAT) looks identical to a healthy-but-quiet one -- readyState
stays OPEN, onclose never fires, so the already-correct reconnect and
rejoin logic never runs.

The backend now pings every 30s and the frontend force-closes the
socket if nothing (any frame, not just a pong) arrives within 65s,
routing straight through the existing reconnect/rejoin path instead of
needing separate recovery logic.

Also found and fixed a more severe adjacent bug while tracing this:
ConnectionManager.broadcast()/send_to_user() had no per-socket error
handling, so one dead or racing socket could raise inside the app's
single, never-restarted Redis pubsub listener task and silently kill
live delivery for every room and every user on that process until
restart. Now caught and logged per-socket instead of propagating.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-23 12:37:58 -06:00
ksmithandClaude Sonnet 5 b1c9a85ab3 Bump to v2026.9.4
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-04 21:38:02 -06:00
ksmithandClaude Sonnet 5 62a25c6278 Point public deploy docs at the real GitHub repo
DEPLOYMENT.md's clone instructions and frontend/.env.example's
VITE_SOURCE_URL default now name github.com/ds-ksmith/DS-Chat directly
now that the project actually has a public home there, instead of
generic placeholders -- with a note for anyone deploying from their
own fork. The user's own production deploy is unaffected: it still
pulls from their private Gitea instance, which mirrors to GitHub.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-04 21:37:35 -06:00
ksmithandClaude Sonnet 5 7a84d2f09f Deploy and upgrade only from tagged releases, not branch tip
deploy/upgrade.sh now fetches tags and checks out whichever sorts
newest (detached HEAD) instead of git pull --ff-only on a branch, now
that the project has a real release process (dated tags, e.g.
v2026.9.3) and a public mirror. Keeps production from ever landing on
an untagged commit. DEPLOYMENT.md's initial-clone steps and Upgrades
section updated to match.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-04 21:31:08 -06:00
ksmithandClaude Sonnet 5 d74527a29c Stop tracking .claude/ -- local tool config, not project source
launch.json is just the Browser preview tool's dev-server launch
config (command, port); nothing sensitive in it, but it never should
have been committed in the first place.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-04 21:31:00 -06:00
ksmithandClaude Sonnet 5 f0e4c76ffd Prepare for public release: de-identify docs, add contributor terms
Removes personal infra baked into copy-paste instructions and the
app's own UI ahead of an eventual public release:

- AboutModal's "Source code" link is now a build-time env var
  (VITE_SOURCE_URL) instead of a hardcoded personal Gitea URL, and
  hides itself when unset rather than pointing somewhere wrong
- DEPLOYMENT.md's clone steps are genericized to any git host
- LICENSE gets its previously-blank copyright/description lines filled in
- CONTRIBUTING.md adds a lightweight contributor-terms note to keep a
  future dual-licensed offering possible once outside PRs start arriving

Deliberately out of scope for now: git commit history (still under the
real author identity) and the actual publish destination -- both still
undecided.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-04 21:01:33 -06:00
ksmithandClaude Sonnet 5 3be8d9d731 Bump to v2026.9.3
Switches to a date-based version scheme (YYYY.M.D, with .2/.3/etc.
appended for additional same-day releases) instead of semver.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-03 21:00:56 -06:00
ksmithandClaude Sonnet 5 30e63ffa83 Add an auto-provisioned system account for automated messages (#74)
The #72 welcome message was attributed to whichever admin added the
member, since there was no system/bot sender concept -- every Message
row requires a real user_id. Adds a lazily-created "system" bot
account (reusing the existing is_bot infrastructure) and switches the
welcome message to post as it instead. Excluded from the People
directory and @mention autocomplete for free: the directory already
filters is_bot users, and mention suggestions are sourced from room
membership, which the system account is never added to.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-03 20:56:10 -06:00
ksmithandClaude Sonnet 5 019e10ac5c Post a welcome message when an admin adds someone to a room (#72)
Attributed to the admin doing the adding rather than a new system/bot
sender concept, since every message today requires a real user_id and
the admin is already a real, in-scope user for the request. Broadcasts
room_added before the welcome message itself, so the new member's
client learns the room exists before it sees an unread update for it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-03 20:35:09 -06:00
ksmithandClaude Sonnet 5 6e889b8ea4 Break message grouping on a long gap, not just sender change (#73)
Consecutive messages from the same sender only repeated the
avatar/name/timestamp header on the first one in the run, so a
message sent minutes later with nobody else posting in between still
hid under a stale timestamp. Adds a 5-minute gap threshold (Slack's
own cutoff) that starts a new group even for the same sender.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-03 20:02:01 -06:00
ksmithandClaude Sonnet 5 b4a104f8c6 Move custom emoji management out of the emoji picker
The picker's delete "x" overlaps the glyph in a tightly packed grid,
which is too easy to hit by accident on a touch screen. Adding and
deleting custom emoji now live in their own modal under the account
menu, with delete gated behind the same confirm() every other
destructive action in the app uses.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-30 19:02:21 -06:00
ksmithandClaude Sonnet 5 03cc16f236 Remove auto-large emoji-only messages, keep manual emoji size (#71)
The manual emoji-size preference already covers this well enough on
its own; the automatic 2.5x bump for emoji-only messages was extra
behavior on top of it that wasn't needed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-30 18:33:50 -06:00
ksmithandClaude Sonnet 5 520b971247 Add adjustable text size and emoji size preferences (#71)
Text was too small on high-DPI screens with no in-app fix beyond
browser zoom. Adds a text-size setting (scales the whole app via a
root font-size percentage), auto-large rendering for emoji-only
messages, and an independent emoji-size preference that also scales
reaction pills without affecting the emoji picker's fixed-size grid.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-30 18:30:49 -06:00
ksmithandClaude Sonnet 5 cd6296d079 Shorten link preview cache TTL from 7 days to 5 minutes (#70)
Re-posting a URL whose title/content had genuinely changed kept
showing the stale first-fetch preview for up to a week. 5 minutes is
effectively "always fresh" for any realistic re-share cadence, while
still collapsing a burst of near-simultaneous fetches of the same URL
into one and not re-hammering a URL that just failed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-30 17:50:16 -06:00
78 changed files with 4154 additions and 331 deletions

No files matched your search

-17
View File
@@ -1,17 +0,0 @@
{
"version": "0.0.1",
"configurations": [
{
"name": "frontend",
"runtimeExecutable": "npm",
"runtimeArgs": ["--prefix", "frontend", "run", "dev"],
"port": 5173
},
{
"name": "frontend-preview",
"runtimeExecutable": "npm",
"runtimeArgs": ["--prefix", "frontend", "run", "preview"],
"port": 4173
}
]
}
+1
View File
@@ -17,6 +17,7 @@ dist-ssr/
## Editors / OS ## Editors / OS
.vscode/ .vscode/
.idea/ .idea/
.claude/
.DS_Store .DS_Store
## Test / coverage ## Test / coverage
+51
View File
@@ -0,0 +1,51 @@
# Contributing to DS Chat
Thanks for considering a contribution.
## Reporting bugs and requesting features
Open an issue on this project's issue tracker. Include steps to reproduce
for a bug, or the problem you're trying to solve for a feature request —
that's usually more useful than a proposed solution.
## Development setup
See the root [README.md](README.md)'s Quickstart, plus
[backend/README.md](backend/README.md) and
[frontend/README.md](frontend/README.md) for the full local dev setup
(Postgres, Redis, Python venv, migrations, the Vite dev server).
[ARCHITECTURE.md](ARCHITECTURE.md) covers the overall system design if
you're orienting yourself before a larger change.
## Before opening a pull request
- **Tests**: run `pytest` in `backend/` for any backend change, and add
tests for new behavior rather than just the happy path — see
`backend/README.md`'s "Run tests" section. For frontend changes, run
`npx tsc -b` in `frontend/` and confirm `npm run build` succeeds.
- **Style**: match the conventions already in the file you're editing
rather than introducing a new pattern — this codebase doesn't have a
separate style guide beyond "look at what's already there."
- **Scope**: smaller, focused PRs are easier to review than large ones
that mix unrelated changes.
## Contributor terms
By submitting a contribution (a pull request, patch, or similar), you
agree that:
1. Your contribution is licensed under the project's own license,
AGPL-3.0-or-later ([LICENSE](LICENSE)), and
2. You grant the project's maintainer(s) a perpetual, worldwide,
non-exclusive right to also relicense your contribution under different
terms — for example, as part of a separately-licensed commercial
offering built on this project.
This keeps the option of a future dual-licensed (open-source +
commercial) version of the project available, without requiring a
separate signed agreement for every contribution.
*This is a lightweight starting point, not a substitute for legal advice —
if you're contributing something substantial, or maintaining a fork with
your own commercial plans, it's worth having this reviewed by a lawyer
rather than relying on the paragraph above alone.*
+37 -15
View File
@@ -132,35 +132,45 @@ sudo -u ds-chat ssh-keygen -t ed25519 -f /srv/ds-chat/.ssh/id_ed25519 -N ""
sudo cat /srv/ds-chat/.ssh/id_ed25519.pub sudo cat /srv/ds-chat/.ssh/id_ed25519.pub
``` ```
Add that public key as a **read-only deploy key** on the Gitea repo This project is hosted at
(Settings → Deploy Keys), then: **[github.com/ds-ksmith/DS-Chat](https://github.com/ds-ksmith/DS-Chat)**.
Add that public key there as a **read-only deploy key** (Settings → Deploy
Keys on the repo), then:
```bash ```bash
sudo -u ds-chat ssh-keyscan git.darksingularity.org >> /srv/ds-chat/.ssh/known_hosts sudo -u ds-chat ssh-keyscan github.com >> /srv/ds-chat/.ssh/known_hosts
sudo -u ds-chat git clone git@git.darksingularity.org:DarkSingularity/ds-chat.git /srv/ds-chat sudo -u ds-chat git clone git@github.com:ds-ksmith/DS-Chat.git /srv/ds-chat
``` ```
(If your Gitea's SSH is on a non-default port, adjust the clone URL and (Deploying from your own fork instead? Substitute its clone URL — the same
`ssh-keyscan -p <port>` accordingly.) deploy-key/access-token steps work the same way on GitHub, GitLab, Gitea,
and most other git hosts.)
**Alternative: a personal/deployment-user access token instead of a deploy **Alternative: a personal/deployment-user access token instead of a deploy
key** — skip the `.ssh`/`ssh-keygen`/`ssh-keyscan` commands above entirely key** — skip the `.ssh`/`ssh-keygen`/`ssh-keyscan` commands above entirely
and clone over HTTPS with the token embedded in the URL: and clone over HTTPS with the token embedded in the URL:
```bash ```bash
sudo -u ds-chat git clone https://<TOKEN>@git.darksingularity.org/DarkSingularity/ds-chat.git /srv/ds-chat sudo -u ds-chat git clone https://<TOKEN>@github.com/ds-ksmith/DS-Chat.git /srv/ds-chat
``` ```
The token then lives in plaintext in `/srv/ds-chat/.git/config` (`git The token then lives in plaintext in `/srv/ds-chat/.git/config` (`git
remote -v` shows it) — readable by root and the `ds-chat` user, not by remote -v` shows it) — readable by root and the `ds-chat` user, not by
anyone else under normal file permissions. `deploy/upgrade.sh`'s later anyone else under normal file permissions. `deploy/upgrade.sh`'s later
`git pull`s reuse this same authenticated URL automatically, no extra `git fetch`es reuse this same authenticated URL automatically, no extra
setup needed. Fine as long as the token is scoped to read-only access on setup needed. Fine as long as the token is scoped to read-only access on
just this repo. just this repo.
Either way, now that the repo is cloned: Either way, now that the repo is cloned, check out the latest release tag
rather than deploying whatever the default branch's tip happens to be —
`deploy/upgrade.sh` follows the same rule on every later upgrade (see §6),
so this keeps the very first deploy consistent with all the ones after it:
```bash ```bash
cd /srv/ds-chat
sudo -u ds-chat git fetch --tags
LATEST_TAG="$(sudo -u ds-chat git tag --sort=-creatordate | head -n1)"
sudo -u ds-chat git checkout --detach "$LATEST_TAG"
sudo -u ds-chat mkdir -p /srv/ds-chat/uploads sudo -u ds-chat mkdir -p /srv/ds-chat/uploads
``` ```
@@ -232,7 +242,16 @@ admin sets it up.
`/ws`) whenever that directory exists — that's what lets Nginx Proxy `/ws`) whenever that directory exists — that's what lets Nginx Proxy
Manager forward the whole domain to one port with no custom path routing. Manager forward the whole domain to one port with no custom path routing.
Before building, copy `frontend/.env.example` to `frontend/.env.production`
and set `VITE_SOURCE_URL` to wherever *your* copy of the repo lives — see
that file's own comment for why this matters (AGPL-3.0 source-availability
compliance). Vite bakes this in at build time, so it needs to be in place
before `npm run build` runs, and needs re-running after any future change
to it.
```bash ```bash
sudo -u ds-chat cp /srv/ds-chat/frontend/.env.example /srv/ds-chat/frontend/.env.production
sudo -u ds-chat nano /srv/ds-chat/frontend/.env.production # set VITE_SOURCE_URL
sudo -u ds-chat bash -c 'cd /srv/ds-chat/frontend && npm ci && npm run build' sudo -u ds-chat bash -c 'cd /srv/ds-chat/frontend && npm ci && npm run build'
``` ```
@@ -320,12 +339,15 @@ This is config in NPM's own UI/database, not a file this repo ships:
sudo -u ds-chat /srv/ds-chat/deploy/upgrade.sh sudo -u ds-chat /srv/ds-chat/deploy/upgrade.sh
``` ```
Pulls latest `main`, reinstalls backend deps, runs `alembic upgrade head`, Fetches tags and checks out whichever one sorts newest (`git tag
rebuilds the frontend, restarts `ds-chat`, and curls `/api/health` to --sort=-creatordate`) — deliberately not the default branch's tip, so
confirm it came back up. Fails loudly (`set -euo pipefail`) and stops running this between releases is a safe no-op rather than pulling in
before restarting anything if an earlier step — most importantly a failed whatever's mid-flight on `main`. Then reinstalls backend deps, runs
migration — errors out, so a bad deploy doesn't take down the previously `alembic upgrade head`, rebuilds the frontend, restarts `ds-chat`, and
working one. curls `/api/health` to confirm it came back up. Fails loudly
(`set -euo pipefail`) and stops before restarting anything if an earlier
step — most importantly a failed migration — errors out, so a bad deploy
doesn't take down the previously working one.
Active users get disconnected for a few seconds during the restart and Active users get disconnected for a few seconds during the restart and
reconnect automatically (same reconnect logic as §4's NPM-timeout note) — reconnect automatically (same reconnect logic as §4's NPM-timeout note) —
+2 -2
View File
@@ -629,8 +629,8 @@ to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found. the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.> DS Chat, a self-hosted, real-time team chat service.
Copyright (C) <year> <name of author> Copyright (C) 2026 Keith Smith
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by it under the terms of the GNU Affero General Public License as published by
+12 -1
View File
@@ -68,9 +68,20 @@ new message, or if you message them again yourself.
Type in the message box at the bottom of a room and press **Enter** to Type in the message box at the bottom of a room and press **Enter** to
send. Use **Shift+Enter** to add a line break without sending. send. Use **Shift+Enter** to add a line break without sending.
Each message shows when it was sent, in your local time. Messages from today
show just the time; older ones add the day — "Yesterday 4:04 PM", a weekday
like "Mon 4:04 PM" for the past week, then the date ("Oct 2, 4:04 PM", with
the year if it's not this one). Hover a time to see the full date.
## Formatting ## Formatting
Messages support Markdown: Messages support Markdown. Prefer buttons to typing the syntax? Click the
**Aa** button next to the emoji button in the composer to open a formatting
toolbar — it inserts the markdown below into your message for you (select some
text first to wrap it, or click a button again to take the formatting back
off). It stays collapsed until you open it, and remembers your choice.
Or type it yourself:
- `**bold**`, `*italic*`, `~~strikethrough~~` - `**bold**`, `*italic*`, `~~strikethrough~~`
- `` `inline code` `` and fenced code blocks (three backticks) - `` `inline code` `` and fenced code blocks (three backticks)
+26 -14
View File
@@ -289,17 +289,26 @@ instance and running many behave identically:
to `room:*`; each message it receives is handed to its own local to `room:*`; each message it receives is handed to its own local
`ConnectionManager.broadcast()`. One instance just talks to itself `ConnectionManager.broadcast()`. One instance just talks to itself
through Redis, so there's no separate single-instance code path. through Redis, so there's no separate single-instance code path.
- `app/ws/presence.py` (`Presence`) — a Redis hash per room - `app/ws/presence.py` (`Presence`) — a Redis sorted set per room
(`presence:{room_id}`, field = user ID, value = connection refcount) is (`presence:v2:room:{id}`, one member per *connection*, `<user_id>:<conn_id>`,
the cross-instance answer to "is this member connected *anywhere* right score = expiry time) is the cross-instance answer to "is this member
now," which is what the Phase 4 offline-push check uses instead of the connected *anywhere* right now," which is what the Phase 4 offline-push
local `ConnectionManager`. Refcounted so a user connected from two tabs check uses instead of the local `ConnectionManager`. A user is connected
(or two instances) isn't marked offline until every connection closes. while any of their entries is unexpired, so two tabs (or two instances)
don't mark them offline until every connection is gone. `GlobalPresence`
(`presence:v2:global`) and `FocusPresence` (`presence:v2:unfocused`) use the
same store, `app/ws/expiring_presence.py` (`ExpiringPresenceSet`).
Known limitation: `Presence` has no heartbeat/TTL, so a hard process crash Presence entries expire (#77) so nothing can be stuck online. A connection
(not a clean disconnect) leaks that connection's increment forever — same renews its entries (90s TTL) whenever the client sends a frame — the frontend
category of simplification as the "no server-side session revocation" note answers the server's 30s `ping` with a `pong`, which is exactly that — and
below. the server closes a human client's socket (code 4408) after 90s of silence.
Bot (API-token) connections don't speak the heartbeat, so the server renews
their entries itself while their handler is alive. An expiry has no
disconnect event to announce it, so `app/ws/presence_sweeper.py` runs on every
worker (a Redis lock makes it one sweep per 15s overall), prunes expired
entries, and broadcasts the offline transition. The pre-#77 `presence:*`
refcount hashes are deleted at startup.
## Push notifications (Phase 4) ## Push notifications (Phase 4)
@@ -822,10 +831,13 @@ preview card fetched from that page's Open Graph tags (`og:title`,
`Content-Type` is `text/html`. `Content-Type` is `text/html`.
- **Cached by URL, not by message** (`link_previews` table, unique on - **Cached by URL, not by message** (`link_previews` table, unique on
`url`) — a URL posted by five different people in five different rooms `url`) — a URL posted by five different people in five different rooms
fetches once. A row also gets written on a *failed* fetch within the same short window fetches once. A row also gets written on a
(`fetch_failed=True`) so a URL that genuinely doesn't unfurl (SSRF *failed* fetch (`fetch_failed=True`) so a URL that genuinely doesn't
rejection, timeout, no usable title) isn't re-attempted on every message unfurl (SSRF rejection, timeout, no usable title) isn't re-attempted on
that references it; both kinds expire after 7 days (`_CACHE_TTL`). every message that references it; both kinds expire after 5 minutes
(`_CACHE_TTL` — #70: was 7 days, confirmed live as far too long, a
re-posted URL whose title/content had genuinely changed kept showing
the stale first-fetch preview for up to a week).
- Parsed with stdlib `html.parser.HTMLParser`, not a new dependency — only - Parsed with stdlib `html.parser.HTMLParser`, not a new dependency — only
meta-tag scraping is needed, not general HTML parsing. meta-tag scraping is needed, not general HTML parsing.
- Editing a message re-extracts the URL; if it changed or was removed, the - Editing a message re-extracts the URL; if it changed or was removed, the
@@ -0,0 +1,32 @@
"""add user text_scale preference
Revision ID: 339b78011a4f
Revises: a318850726ee
Create Date: 2026-08-30 18:03:16.159924
"""
from typing import Sequence, Union
from alembic import op
import sqlalchemy as sa
# revision identifiers, used by Alembic.
revision: str = '339b78011a4f'
down_revision: Union[str, Sequence[str], None] = 'a318850726ee'
branch_labels: Union[str, Sequence[str], None] = None
depends_on: Union[str, Sequence[str], None] = None
def upgrade() -> None:
"""Upgrade schema."""
# ### commands auto generated by Alembic - please adjust! ###
op.add_column('users', sa.Column('text_scale', sa.String(length=20), nullable=True))
# ### end Alembic commands ###
def downgrade() -> None:
"""Downgrade schema."""
# ### commands auto generated by Alembic - please adjust! ###
op.drop_column('users', 'text_scale')
# ### end Alembic commands ###
@@ -0,0 +1,32 @@
"""add user emoji_scale preference
Revision ID: e81c9bcc82b9
Revises: 339b78011a4f
Create Date: 2026-08-30 18:14:26.045186
"""
from typing import Sequence, Union
from alembic import op
import sqlalchemy as sa
# revision identifiers, used by Alembic.
revision: str = 'e81c9bcc82b9'
down_revision: Union[str, Sequence[str], None] = '339b78011a4f'
branch_labels: Union[str, Sequence[str], None] = None
depends_on: Union[str, Sequence[str], None] = None
def upgrade() -> None:
"""Upgrade schema."""
# ### commands auto generated by Alembic - please adjust! ###
op.add_column('users', sa.Column('emoji_scale', sa.String(length=20), nullable=True))
# ### end Alembic commands ###
def downgrade() -> None:
"""Downgrade schema."""
# ### commands auto generated by Alembic - please adjust! ###
op.drop_column('users', 'emoji_scale')
# ### end Alembic commands ###
+27 -5
View File
@@ -1,5 +1,6 @@
import asyncio import asyncio
import contextlib import contextlib
import logging
import pathlib import pathlib
from collections.abc import AsyncIterator from collections.abc import AsyncIterator
from contextlib import asynccontextmanager from contextlib import asynccontextmanager
@@ -11,6 +12,7 @@ from redis.asyncio import Redis
from starlette.middleware.sessions import SessionMiddleware from starlette.middleware.sessions import SessionMiddleware
from app.config import settings from app.config import settings
from app.database import async_session_factory
from app.routers import ( from app.routers import (
admin, admin,
auth, auth,
@@ -31,6 +33,9 @@ from app.ws.connection_manager import ConnectionManager
from app.ws.focus_presence import FocusPresence from app.ws.focus_presence import FocusPresence
from app.ws.global_presence import GlobalPresence from app.ws.global_presence import GlobalPresence
from app.ws.presence import Presence from app.ws.presence import Presence
from app.ws.presence_sweeper import purge_legacy_presence, run_presence_sweeper
logger = logging.getLogger(__name__)
# backend/app/main.py -> backend/ -> repo root -- matches both the local # backend/app/main.py -> backend/ -> repo root -- matches both the local
# monorepo layout and the production layout (/srv/ds-chat/backend, # monorepo layout and the production layout (/srv/ds-chat/backend,
@@ -58,14 +63,30 @@ async def lifespan(app: FastAPI) -> AsyncIterator[None]:
# ASGITransport, used by the plain REST test fixtures -- only # ASGITransport, used by the plain REST test fixtures -- only
# TestClient's websocket_connect-based tests actually run lifespan). # TestClient's websocket_connect-based tests actually run lifespan).
# The background listener task genuinely needs a running event loop # The background listener task genuinely needs a running event loop
# though, so that part stays here. # though, so that part stays here. run_forever() (not listen() directly)
listener_task = asyncio.create_task(app.state.broadcaster.listen()) # -- #76: a bare listen() here died permanently and silently the moment
# its Redis connection ever dropped (e.g. Redis itself restarting),
# with nothing to notice or reconnect; run_forever() supervises it and
# restarts on failure instead.
listener_task = asyncio.create_task(app.state.broadcaster.run_forever())
# #77: presence entries now expire, and an expiry has no disconnect event
# to announce it -- this loop is what notices. The purge clears the old
# refcount hashes (and the counts that had leaked into them); it's
# best-effort, since Redis being down at startup shouldn't stop the app.
try:
await purge_legacy_presence(app.state.redis)
except Exception:
logger.warning("Could not purge legacy presence keys", exc_info=True)
sweeper_task = asyncio.create_task(run_presence_sweeper(app))
yield yield
listener_task.cancel() for task in (sweeper_task, listener_task):
with contextlib.suppress(asyncio.CancelledError): task.cancel()
await listener_task for task in (sweeper_task, listener_task):
with contextlib.suppress(asyncio.CancelledError):
await task
await app.state.redis.aclose() await app.state.redis.aclose()
@@ -81,6 +102,7 @@ def create_app() -> FastAPI:
) )
app.state.connection_manager = ConnectionManager() app.state.connection_manager = ConnectionManager()
app.state.session_factory = async_session_factory
app.state.redis = Redis.from_url(settings.redis_url, decode_responses=True) app.state.redis = Redis.from_url(settings.redis_url, decode_responses=True)
app.state.presence = Presence(app.state.redis) app.state.presence = Presence(app.state.redis)
app.state.global_presence = GlobalPresence(app.state.redis) app.state.global_presence = GlobalPresence(app.state.redis)
+11
View File
@@ -19,6 +19,17 @@ class User(Base):
is_active: Mapped[bool] = mapped_column(Boolean, default=True, nullable=False) is_active: Mapped[bool] = mapped_column(Boolean, default=True, nullable=False)
display_name: Mapped[str | None] = mapped_column(String(50)) display_name: Mapped[str | None] = mapped_column(String(50))
theme: Mapped[str | None] = mapped_column(String(20)) theme: Mapped[str | None] = mapped_column(String(20))
# #71: null means "normal" (the pre-existing default before this
# setting existed) -- a preset name, not a raw scale factor, so it's
# validated/enumerable the same way `theme` already is rather than
# accepting an arbitrary float.
text_scale: Mapped[str | None] = mapped_column(String(20))
# #71: independent of text_scale above -- scales emoji rendered in
# message text specifically, not the whole UI (see
# frontend/src/components/MessageContent.tsx's --emoji-scale, scoped
# to message content only so it can't also inflate the emoji picker's
# grid or reaction pills).
emoji_scale: Mapped[str | None] = mapped_column(String(20))
# Only meaningful when theme == "custom" -- which of this user's saved # Only meaningful when theme == "custom" -- which of this user's saved
# CustomTheme rows (app/models/custom_theme.py) is currently active. # CustomTheme rows (app/models/custom_theme.py) is currently active.
# Cleared explicitly (not via a DB-level ON DELETE) whenever that theme # Cleared explicitly (not via a DB-level ON DELETE) whenever that theme
+4
View File
@@ -100,6 +100,10 @@ async def update_profile(
current_user.display_name = display_name or None current_user.display_name = display_name or None
if "theme" in updates: if "theme" in updates:
current_user.theme = updates["theme"] current_user.theme = updates["theme"]
if "text_scale" in updates:
current_user.text_scale = updates["text_scale"]
if "emoji_scale" in updates:
current_user.emoji_scale = updates["emoji_scale"]
if "appear_offline" in updates: if "appear_offline" in updates:
current_user.appear_offline = updates["appear_offline"] current_user.appear_offline = updates["appear_offline"]
await db.commit() await db.commit()
+33 -1
View File
@@ -39,12 +39,14 @@ from app.schemas.webhook import (
WebhookIncomingRead, WebhookIncomingRead,
) )
from app.services.link_preview_service import get_link_previews_for_urls from app.services.link_preview_service import get_link_previews_for_urls
from app.services.message_events import broadcast_room_added from app.services.message_events import broadcast_new_message, broadcast_room_added
from app.services.message_service import ( from app.services.message_service import (
create_message,
get_reactions_for_messages, get_reactions_for_messages,
list_recent_messages, list_recent_messages,
list_room_attachments, list_room_attachments,
) )
from app.services.system_user_service import get_or_create_system_user
from app.services.upload_settings_service import format_mb, get_upload_settings from app.services.upload_settings_service import format_mb, get_upload_settings
from app.services.room_service import ( from app.services.room_service import (
AlreadyMemberError, AlreadyMemberError,
@@ -655,7 +657,37 @@ async def add_member_endpoint(
raise HTTPException(status_code=404, detail="No user with that ID") raise HTTPException(status_code=404, detail="No user with that ID")
except AlreadyMemberError: except AlreadyMemberError:
raise HTTPException(status_code=409, detail="That user is already a member") raise HTTPException(status_code=409, detail="That user is already a member")
# room_added first -- the new member's client needs to know this room
# exists before it can make sense of an unread_update for it, which the
# welcome message below would otherwise trigger out of order.
await broadcast_room_added(request.app.state.broadcaster, data.user_id, room) await broadcast_room_added(request.app.state.broadcaster, data.user_id, room)
# #74: posted as the auto-provisioned System account, not the admin who
# did the adding -- "Welcome, bob!" reads as coming from the room/app
# itself, not as something the admin personally typed.
system_user = await get_or_create_system_user(db)
welcome_name = membership.user.display_name or membership.user.username
welcome_message = await create_message(
db, room.id, system_user.id, f"Welcome to #{room.name}, {welcome_name}!"
)
# Same "sending implies having seen the room" reasoning as ws/chat.py's
# own live-message path -- the admin is the one who caused this message,
# and is presumably already looking at this room's member management, so
# without this their own client would show it as unread regardless.
await mark_room_read(db, room.id, current_user.id)
await broadcast_new_message(
db,
request.app.state.broadcaster,
request.app.state.presence,
request.app.state.focus_presence,
request.app.state.global_presence,
str(request.base_url),
room.id,
welcome_message,
system_user,
)
online_ids = await request.app.state.global_presence.online_user_ids([membership.user_id]) online_ids = await request.app.state.global_presence.online_user_ids([membership.user_id])
return RoomMemberRead( return RoomMemberRead(
user_id=membership.user_id, user_id=membership.user_id,
+6
View File
@@ -23,6 +23,8 @@ class UserRead(BaseModel):
is_site_admin: bool is_site_admin: bool
display_name: str | None display_name: str | None
theme: str | None theme: str | None
text_scale: str | None
emoji_scale: str | None
# Resolved, not just an id -- the frontend needs the actual palette to # Resolved, not just an id -- the frontend needs the actual palette to
# paint on load without a second round trip (see lib/theme.ts). # paint on load without a second round trip (see lib/theme.ts).
active_custom_theme: CustomThemeRead | None active_custom_theme: CustomThemeRead | None
@@ -57,6 +59,10 @@ class ProfileUpdate(BaseModel):
# ownership check; that's POST /api/custom-themes/{id}/activate, not a # ownership check; that's POST /api/custom-themes/{id}/activate, not a
# bare theme name with nothing to point it at. # bare theme name with nothing to point it at.
theme: Literal["dark", "light", "midnight", "sunset"] | None = Field(default=None) theme: Literal["dark", "light", "midnight", "sunset"] | None = Field(default=None)
# #71: kept in sync with frontend/src/lib/theme.ts's TEXT_SCALE_PERCENT map.
text_scale: Literal["small", "normal", "large", "xlarge"] | None = Field(default=None)
# #71: kept in sync with MessageContent.tsx's EMOJI_SCALE_MULTIPLIER map.
emoji_scale: Literal["small", "normal", "large", "xlarge"] | None = Field(default=None)
appear_offline: bool | None = Field(default=None) appear_offline: bool | None = Field(default=None)
+11 -1
View File
@@ -27,8 +27,18 @@ _TRAILING_PUNCTUATION = ".,;:!?)'\">"
_FETCH_TIMEOUT_SECONDS = 5.0 _FETCH_TIMEOUT_SECONDS = 5.0
_MAX_BYTES = 512 * 1024 _MAX_BYTES = 512 * 1024
_MAX_REDIRECTS = 3 _MAX_REDIRECTS = 3
# #70: was 7 days -- confirmed live as too long for how this app actually
# gets used: re-posting a URL whose title/content had genuinely changed
# kept showing the stale first-fetch preview for up to a week. Short
# enough that it's effectively "always fresh" for any realistic human
# posting cadence, while still doing the one thing a cache here is
# actually for -- collapsing a burst of near-simultaneous fetches of the
# same URL (several people pasting the same link within moments of each
# other, or the same person's message history being loaded repeatedly)
# into one, and not hammering a URL that just failed on every message
# that references it.
_USER_AGENT = "ds-chat-link-preview/1.0" _USER_AGENT = "ds-chat-link-preview/1.0"
_CACHE_TTL = timedelta(days=7) _CACHE_TTL = timedelta(minutes=5)
def extract_first_url(content: str | None) -> str | None: def extract_first_url(content: str | None) -> str | None:
@@ -0,0 +1,45 @@
from sqlalchemy import select
from sqlalchemy.exc import IntegrityError
from sqlalchemy.ext.asyncio import AsyncSession
from app.models import User
from app.security import generate_token, hash_password
# #74: one well-known, auto-provisioned bot account the app itself posts as
# for automated first-party messages (the #72 welcome message, and whatever
# comes next) -- distinct from bot_service.py's admin-created integration
# bots, which each need a human actor and audit-log entry for creating them.
# There's no actor here: this account is provisioned lazily, the first time
# something needs to post as it.
SYSTEM_USERNAME = "system"
async def get_or_create_system_user(db: AsyncSession) -> User:
result = await db.execute(select(User).where(User.username == SYSTEM_USERNAME))
user = result.scalar_one_or_none()
if user is not None:
return user
# Same placeholder-email/discarded-password shape as bot_service.create_bot
# -- this account never logs in, email just satisfies the NOT NULL/unique
# column.
user = User(
username=SYSTEM_USERNAME,
email=f"{SYSTEM_USERNAME}@bots.example.com",
password_hash=hash_password(generate_token()),
is_bot=True,
)
db.add(user)
try:
await db.flush()
except IntegrityError:
# Two concurrent requests both found no existing row and raced to
# create one -- the loser just reads back the winner's row instead
# of erroring.
await db.rollback()
result = await db.execute(select(User).where(User.username == SYSTEM_USERNAME))
return result.scalar_one()
await db.commit()
await db.refresh(user)
return user
+83 -10
View File
@@ -1,13 +1,26 @@
import asyncio
import contextlib
import json import json
import logging
import uuid import uuid
from redis.asyncio import Redis from redis.asyncio import Redis
from app.ws.connection_manager import ConnectionManager from app.ws.connection_manager import ConnectionManager
logger = logging.getLogger(__name__)
ROOM_CHANNEL_PREFIX = "room:" ROOM_CHANNEL_PREFIX = "room:"
USER_CHANNEL_PREFIX = "user:" USER_CHANNEL_PREFIX = "user:"
# #76: a run shorter than this before dying doesn't count as "stable" for
# resetting the backoff in run_forever() below -- long enough that a real,
# working connection has clearly settled in, short enough not to leave a
# just-recovered listener exposed to a full backoff climb if Redis blips
# again shortly after reconnecting.
STABLE_RUN_SECONDS = 60
MAX_BACKOFF_SECONDS = 30
class Broadcaster: class Broadcaster:
"""Cross-instance message fan-out (ARCHITECTURE.md phase 5). """Cross-instance message fan-out (ARCHITECTURE.md phase 5).
@@ -36,6 +49,43 @@ class Broadcaster:
async def publish_to_user(self, user_id: uuid.UUID, payload: dict) -> None: async def publish_to_user(self, user_id: uuid.UUID, payload: dict) -> None:
await self._redis.publish(f"{USER_CHANNEL_PREFIX}{user_id}", json.dumps(payload)) await self._redis.publish(f"{USER_CHANNEL_PREFIX}{user_id}", json.dumps(payload))
async def run_forever(self) -> None:
"""Supervises listen(), restarting it if it ever dies.
#76's real root cause, found after the per-message try/except below
turned out not to be enough: this is the *one* pubsub listener for
the whole process (see main.py's lifespan), created once at startup
with nothing watching over it afterward. A connection-level failure
-- Redis restarting, a network blip between the app and Redis --
raises from the `async for` iteration in listen() itself, outside
that per-message guard, and previously killed this task permanently
and silently: HTTP/REST and login kept working fine (neither
touches this), but live message delivery was gone for every room
and every user on this instance until the whole process was
restarted. Confirmed live in production: Redis got restarted by an
OS update, and `PUBSUB NUMPAT` against it afterward showed zero
pattern subscriptions across all 4 gunicorn workers -- every one of
them had silently lost its listener with nothing to bring it back.
"""
backoff_seconds = 1.0
while True:
started_at = asyncio.get_event_loop().time()
try:
await self.listen()
logger.warning("Broadcaster.listen() exited without error -- restarting")
except asyncio.CancelledError:
raise
except Exception:
logger.error("Broadcaster.listen() failed -- restarting", exc_info=True)
ran_for = asyncio.get_event_loop().time() - started_at
# Sleep at the *current* backoff first, then grow it for next
# time -- computing the next value before sleeping would skip
# straight past the first (shortest) retry delay.
await asyncio.sleep(backoff_seconds)
backoff_seconds = (
1.0 if ran_for > STABLE_RUN_SECONDS else min(backoff_seconds * 2, MAX_BACKOFF_SECONDS)
)
async def listen(self) -> None: async def listen(self) -> None:
pubsub = self._redis.pubsub() pubsub = self._redis.pubsub()
await pubsub.psubscribe(f"{ROOM_CHANNEL_PREFIX}*", f"{USER_CHANNEL_PREFIX}*") await pubsub.psubscribe(f"{ROOM_CHANNEL_PREFIX}*", f"{USER_CHANNEL_PREFIX}*")
@@ -43,14 +93,37 @@ class Broadcaster:
async for message in pubsub.listen(): async for message in pubsub.listen():
if message["type"] != "pmessage": if message["type"] != "pmessage":
continue continue
channel = message["channel"] # #76: this is the one pubsub listener for the whole process
payload = json.loads(message["data"]) # (see main.py's lifespan) -- ConnectionManager.broadcast/
if channel.startswith(ROOM_CHANNEL_PREFIX): # send_to_user already guard against one dead socket taking
room_id = uuid.UUID(channel.removeprefix(ROOM_CHANNEL_PREFIX)) # the rest of a single fan-out down, but this belt-and-
await self._manager.broadcast(room_id, payload) # suspenders catch is for anything else unexpected (a
elif channel.startswith(USER_CHANNEL_PREFIX): # malformed payload, e.g.) doing the same. An uncaught
user_id = uuid.UUID(channel.removeprefix(USER_CHANNEL_PREFIX)) # exception here previously meant *this whole async for*
await self._manager.send_to_user(user_id, payload) # loop died silently -- no more live delivery to any room on
# this instance, for anyone, until the process restarted.
try:
channel = message["channel"]
payload = json.loads(message["data"])
if channel.startswith(ROOM_CHANNEL_PREFIX):
room_id = uuid.UUID(channel.removeprefix(ROOM_CHANNEL_PREFIX))
await self._manager.broadcast(room_id, payload)
elif channel.startswith(USER_CHANNEL_PREFIX):
user_id = uuid.UUID(channel.removeprefix(USER_CHANNEL_PREFIX))
await self._manager.send_to_user(user_id, payload)
except Exception:
logger.error("Error handling pubsub message on channel %s", message.get("channel"), exc_info=True)
finally: finally:
await pubsub.punsubscribe(f"{ROOM_CHANNEL_PREFIX}*", f"{USER_CHANNEL_PREFIX}*") # #76: reached via a connection that's already dead just as
await pubsub.aclose() # often as a clean shutdown (that's the whole failure mode
# run_forever() now recovers from) -- punsubscribe/aclose over
# a broken connection would themselves raise, masking whatever
# actually killed the loop above and, since run_forever() only
# starts backing off *after* listen() returns/raises, delaying
# the reconnect for no benefit (a fresh pubsub object is about
# to be created on retry regardless of whether this cleanup
# succeeded).
with contextlib.suppress(Exception):
await pubsub.punsubscribe(f"{ROOM_CHANNEL_PREFIX}*", f"{USER_CHANNEL_PREFIX}*")
with contextlib.suppress(Exception):
await pubsub.aclose()
+120 -11
View File
@@ -1,3 +1,7 @@
import asyncio
import contextlib
import logging
import time
import uuid import uuid
from fastapi import APIRouter, Depends, WebSocket, WebSocketDisconnect from fastapi import APIRouter, Depends, WebSocket, WebSocketDisconnect
@@ -27,10 +31,40 @@ from app.services.message_service import (
from app.services.room_service import mark_room_read from app.services.room_service import mark_room_read
from app.services.session_service import resolve_session from app.services.session_service import resolve_session
logger = logging.getLogger(__name__)
router = APIRouter(tags=["ws"]) router = APIRouter(tags=["ws"])
WS_UNAUTHENTICATED = 4401 WS_UNAUTHENTICATED = 4401
# #76: comfortably under the ~60s idle-connection timeout common to reverse
# proxies/load balancers sitting in front of this endpoint, and short enough
# that the frontend's own zombie-detection watchdog (useChatSocket.ts) can
# notice a dead connection and reconnect well within a session -- a socket
# can go silently dead (no close frame at all, e.g. a laptop sleeping or a
# NAT dropping an idle mapping) without this, and no live message reaches it
# again until *something* else finally triggers a close, which used to be
# "switch rooms and back" purely by accident (that remounts the message
# list, which refetches history over plain REST -- unrelated to the socket
# itself actually recovering).
WS_PING_INTERVAL_SECONDS = 30
# #77: a human client that has sent nothing -- not even the "pong" to the ping
# above -- for this long is treated as gone and disconnected, so its presence
# stops being renewed and cleanup runs. Needed on top of the transport's own
# keepalive: a browser answers *protocol-level* pings from its network layer
# even while the page's JavaScript is frozen (a suspended or discarded tab,
# a sleeping laptop that keeps its network up), so the connection looks
# healthy forever while nobody is actually there. Only the page itself can
# send the app-level "pong". The frontend reconnects on any non-4401 close.
WS_DEAD_AFTER_SECONDS = 90
WS_HEARTBEAT_TIMEOUT = 4408
# Presence entries (see ExpiringPresenceSet) are renewed on incoming frames,
# at most this often -- a chatty client shouldn't turn every message into
# several extra Redis writes.
PRESENCE_REFRESH_MIN_INTERVAL_SECONDS = 10
class ClientEnvelope(BaseModel): class ClientEnvelope(BaseModel):
type: str type: str
@@ -61,6 +95,21 @@ def _missing_scope(api_token: ApiToken | None, scope: str) -> bool:
return api_token is not None and scope not in api_token.scopes return api_token is not None and scope not in api_token.scopes
async def _broadcast_offline(db: AsyncSession, broadcaster, user_id: uuid.UUID) -> None:
await broadcast_member_updated(db, broadcaster, user_id)
await broadcast_dm_presence_update(db, broadcaster, user_id, online=False)
async def _best_effort(label: str, awaitable):
# Disconnect cleanup is several independent Redis/DB steps; one failing
# must not skip the ones after it.
try:
return await awaitable
except Exception:
logger.warning("Presence cleanup step failed: %s", label, exc_info=True)
return None
@router.websocket("/ws/chat") @router.websocket("/ws/chat")
async def chat_endpoint(websocket: WebSocket, db: AsyncSession = Depends(get_db)) -> None: async def chat_endpoint(websocket: WebSocket, db: AsyncSession = Depends(get_db)) -> None:
api_token: ApiToken | None = None api_token: ApiToken | None = None
@@ -101,13 +150,19 @@ async def chat_endpoint(websocket: WebSocket, db: AsyncSession = Depends(get_db)
# refcount if the socket closes while still blurred -- mirroring how # refcount if the socket closes while still blurred -- mirroring how
# joined_rooms tracks per-connection room membership for its own cleanup. # joined_rooms tracks per-connection room membership for its own cleanup.
is_blurred = False is_blurred = False
# Identifies this connection's own presence entries (#77) -- see
# ExpiringPresenceSet -- so one connection ending can't affect another
# belonging to the same user, and a dead one can simply stop renewing.
conn_id = uuid.uuid4().hex
last_frame_at = time.monotonic()
last_presence_refresh = last_frame_at
manager.register_user(user.id, websocket) manager.register_user(user.id, websocket)
# Only broadcast on a genuine offline->online transition (this user's # Only broadcast on a genuine offline->online transition (this user's
# first open connection), not for every extra tab -- broadcast_member_ # first open connection), not for every extra tab -- broadcast_member_
# updated tells every room this user's in to refresh, which would be # updated tells every room this user's in to refresh, which would be
# wasted churn on a transition that didn't actually change anything # wasted churn on a transition that didn't actually change anything
# visible. # visible.
if await global_presence.connect(user.id): if await global_presence.connect(user.id, conn_id):
await broadcast_member_updated(db, broadcaster, user.id) await broadcast_member_updated(db, broadcaster, user.id)
await broadcast_dm_presence_update(db, broadcaster, user.id, online=True) await broadcast_dm_presence_update(db, broadcaster, user.id, online=True)
# This session is shared for the connection's entire lifetime (which can # This session is shared for the connection's entire lifetime (which can
@@ -122,10 +177,54 @@ async def chat_endpoint(websocket: WebSocket, db: AsyncSession = Depends(get_db)
# waiting for the next one. # waiting for the next one.
await db.commit() await db.commit()
async def refresh_presence() -> None:
# Renews every presence entry this connection holds. If the global
# one had already lapsed (a long stall) this is also the moment the
# user comes back online, and has to be announced like a fresh connect.
if await global_presence.refresh(user.id, conn_id):
await broadcast_member_updated(db, broadcaster, user.id)
await broadcast_dm_presence_update(db, broadcaster, user.id, online=True)
for room_id in joined_rooms:
await presence.refresh(room_id, user.id, conn_id)
if is_blurred:
await focus_presence.refresh(user.id, conn_id)
try: try:
while True: while True:
raw = await websocket.receive_json()
try: try:
raw = await asyncio.wait_for(
websocket.receive_json(), timeout=WS_PING_INTERVAL_SECONDS
)
except asyncio.TimeoutError:
# Nothing received in a while -- ping rather than assume the
# connection's still good. A genuinely dead socket fails this
# send (raising, caught below same as any other disconnect);
# a merely quiet one just gets proded and the loop continues
# waiting.
if api_token is None and time.monotonic() - last_frame_at >= WS_DEAD_AFTER_SECONDS:
# Gone (see WS_DEAD_AFTER_SECONDS). The socket may be too
# dead to even take a close frame; either way, leaving the
# loop runs the normal cleanup below.
with contextlib.suppress(Exception):
await websocket.close(code=WS_HEARTBEAT_TIMEOUT)
break
if api_token is not None:
# A bot isn't expected to speak our app-level heartbeat
# (it may just ignore the ping), so it can't be dropped
# for not answering and its presence can't depend on
# answers. While the handler is alive the transport's own
# keepalive is what vouches for it -- a dead bot socket
# ends this handler, and cleanup does the rest.
await refresh_presence()
last_presence_refresh = time.monotonic()
await db.commit()
await websocket.send_json({"type": "ping"})
continue
last_frame_at = time.monotonic()
try:
if last_frame_at - last_presence_refresh >= PRESENCE_REFRESH_MIN_INTERVAL_SECONDS:
await refresh_presence()
last_presence_refresh = last_frame_at
try: try:
envelope = ClientEnvelope.model_validate(raw) envelope = ClientEnvelope.model_validate(raw)
except ValidationError: except ValidationError:
@@ -142,16 +241,24 @@ async def chat_endpoint(websocket: WebSocket, db: AsyncSession = Depends(get_db)
) )
continue continue
manager.join(envelope.room_id, websocket) manager.join(envelope.room_id, websocket)
await presence.join(envelope.room_id, user.id) await presence.join(envelope.room_id, user.id, conn_id)
joined_rooms.add(envelope.room_id) joined_rooms.add(envelope.room_id)
await websocket.send_json({"type": "joined", "room_id": str(envelope.room_id)}) await websocket.send_json({"type": "joined", "room_id": str(envelope.room_id)})
elif envelope.type == "pong":
# #76: the client's reply to our "ping" above -- nothing
# to do with it. Its only purpose is resetting the
# frontend's own liveness watchdog; the timeout on the
# receive_json() above already gets reset by receiving
# any frame at all, this one included.
pass
elif envelope.type == "leave": elif envelope.type == "leave":
if envelope.room_id is None: if envelope.room_id is None:
await websocket.send_json({"type": "error", "detail": "room_id required"}) await websocket.send_json({"type": "error", "detail": "room_id required"})
continue continue
manager.leave(envelope.room_id, websocket) manager.leave(envelope.room_id, websocket)
await presence.leave(envelope.room_id, user.id) await presence.leave(envelope.room_id, user.id, conn_id)
joined_rooms.discard(envelope.room_id) joined_rooms.discard(envelope.room_id)
elif envelope.type == "focus": elif envelope.type == "focus":
@@ -166,11 +273,11 @@ async def chat_endpoint(websocket: WebSocket, db: AsyncSession = Depends(get_db)
continue continue
if envelope.focused: if envelope.focused:
if is_blurred: if is_blurred:
await focus_presence.mark_focused(user.id) await focus_presence.mark_focused(user.id, conn_id)
is_blurred = False is_blurred = False
else: else:
if not is_blurred: if not is_blurred:
await focus_presence.mark_blurred(user.id) await focus_presence.mark_blurred(user.id, conn_id)
is_blurred = True is_blurred = True
elif envelope.type == "message": elif envelope.type == "message":
@@ -364,9 +471,11 @@ async def chat_endpoint(websocket: WebSocket, db: AsyncSession = Depends(get_db)
manager.leave_all(websocket) manager.leave_all(websocket)
manager.unregister_user(user.id, websocket) manager.unregister_user(user.id, websocket)
for room_id in joined_rooms: for room_id in joined_rooms:
await presence.leave(room_id, user.id) await _best_effort("room presence", presence.leave(room_id, user.id, conn_id))
if is_blurred: if is_blurred:
await focus_presence.mark_focused(user.id) await _best_effort("focus presence", focus_presence.mark_focused(user.id, conn_id))
if await global_presence.disconnect(user.id): if await _best_effort("global presence", global_presence.disconnect(user.id, conn_id)):
await broadcast_member_updated(db, broadcaster, user.id) await _best_effort(
await broadcast_dm_presence_update(db, broadcaster, user.id, online=False) "offline broadcast",
_broadcast_offline(db, broadcaster, user.id),
)
+19 -2
View File
@@ -1,8 +1,11 @@
import logging
import uuid import uuid
from collections import defaultdict from collections import defaultdict
from fastapi import WebSocket from fastapi import WebSocket
logger = logging.getLogger(__name__)
class ConnectionManager: class ConnectionManager:
"""Local, single-process WebSocket socket registry. """Local, single-process WebSocket socket registry.
@@ -43,8 +46,22 @@ class ConnectionManager:
async def broadcast(self, room_id: uuid.UUID, payload: dict) -> None: async def broadcast(self, room_id: uuid.UUID, payload: dict) -> None:
for websocket in list(self._rooms.get(room_id, ())): for websocket in list(self._rooms.get(room_id, ())):
await websocket.send_json(payload) # #76: one dead/racing socket (e.g. its own disconnect cleanup
# hasn't finished removing it from _rooms yet) must not take the
# rest of this broadcast down with it -- this runs inside
# Broadcaster.listen()'s single, never-restarted per-process
# pubsub loop, so an unhandled exception here previously meant
# one bad socket silently killed *live delivery for every room
# on this instance*, not just the one socket, until the process
# was restarted.
try:
await websocket.send_json(payload)
except Exception:
logger.warning("Dropping dead socket during broadcast to room %s", room_id, exc_info=True)
async def send_to_user(self, user_id: uuid.UUID, payload: dict) -> None: async def send_to_user(self, user_id: uuid.UUID, payload: dict) -> None:
for websocket in list(self._users.get(user_id, ())): for websocket in list(self._users.get(user_id, ())):
await websocket.send_json(payload) try:
await websocket.send_json(payload)
except Exception:
logger.warning("Dropping dead socket sending to user %s", user_id, exc_info=True)
+103
View File
@@ -0,0 +1,103 @@
import time
import uuid
from collections.abc import Callable
from redis.asyncio import Redis
# #77: an entry that isn't renewed for this long stops counting. Chosen as 3x
# the app-level ping interval (chat.py's WS_PING_INTERVAL_SECONDS): a healthy
# connection renews roughly every ping, so two missed beats are tolerated
# before someone flips offline.
PRESENCE_TTL_SECONDS = 90
def _text(value: str | bytes) -> str:
return value.decode() if isinstance(value, bytes) else value
def _user_part(member: str) -> str:
return member.split(":", 1)[0]
class ExpiringPresenceSet:
""""Which users have at least one live connection" for one Redis key,
where every connection is its own entry with its own expiry.
This replaced per-user refcounts (#77): a refcount only goes down when a
connection's cleanup code actually runs, so any connection that ended
without it -- a server crash or reboot, a process killed mid-restart, a
client that vanished without the server ever noticing -- left a +1 that
nothing could ever subtract, showing that person online forever (and in
the per-room case, suppressing their push notifications). Here a dead
connection simply stops being renewed and ages out on its own, so there
is no state that can leak.
One sorted set per key: member `<user_id>:<connection_id>`, score = the
moment it expires. "Live" means score > now. Scans are O(connections) --
fine for a self-hosted team chat; only the global key grows with the
whole server rather than one room.
"""
def __init__(
self,
redis: Redis,
ttl_seconds: float = PRESENCE_TTL_SECONDS,
clock: Callable[[], float] = time.time,
) -> None:
self._redis = redis
self._ttl = ttl_seconds
self._clock = clock
@staticmethod
def _member(user_id: uuid.UUID, conn_id: str) -> str:
return f"{user_id}:{conn_id}"
async def _live_members(self, key: str) -> list[str]:
members = await self._redis.zrangebyscore(key, f"({self._clock()}", "+inf")
return [_text(m) for m in members]
async def add(self, key: str, user_id: uuid.UUID, conn_id: str) -> bool:
"""Creates or renews this connection's entry. Returns True iff the
user had no live entry beforehand -- a genuine offline->online
transition worth telling anyone about. Renewing an entry that's still
live (the common case, every heartbeat) is a single cheap write."""
member = self._member(user_id, conn_id)
now = self._clock()
score = await self._redis.zscore(key, member)
came_online = False
if score is None or score <= now:
came_online = not await self.is_live(key, user_id)
await self._redis.zadd(key, {member: now + self._ttl})
# Lets a key nobody renews any more (an idle room) disappear on its
# own instead of sitting there holding only expired entries.
await self._redis.expire(key, int(self._ttl * 2))
return came_online
async def remove(self, key: str, user_id: uuid.UUID, conn_id: str) -> bool:
"""Drops this connection's entry. Returns True iff that left the user
with no live entry -- a genuine online->offline transition. False if
the entry was already gone: whoever removed it (see prune) already
reported the transition, and reporting it twice would be noise."""
removed = await self._redis.zrem(key, self._member(user_id, conn_id))
if not removed:
return False
return not await self.is_live(key, user_id)
async def is_live(self, key: str, user_id: uuid.UUID) -> bool:
prefix = f"{user_id}:"
return any(m.startswith(prefix) for m in await self._live_members(key))
async def live_user_ids(self, key: str) -> set[uuid.UUID]:
return {uuid.UUID(_user_part(m)) for m in await self._live_members(key)}
async def prune(self, key: str) -> set[uuid.UUID]:
"""Deletes expired entries. Returns the users whose last live entry
was among them -- the offline transitions nobody was told about,
since an expiry has no disconnect event to hang a broadcast on."""
now = self._clock()
expired = [_text(m) for m in await self._redis.zrangebyscore(key, "-inf", now)]
if not expired:
return set()
await self._redis.zremrangebyscore(key, "-inf", now)
gone = {_user_part(m) for m in expired} - {_user_part(m) for m in await self._live_members(key)}
return {uuid.UUID(u) for u in gone}
+24 -23
View File
@@ -2,44 +2,45 @@ import uuid
from redis.asyncio import Redis from redis.asyncio import Redis
from app.ws.expiring_presence import ExpiringPresenceSet
class FocusPresence: class FocusPresence:
"""Cross-instance "is this desktop-mode user's window currently """Cross-instance "is this desktop-mode user's window currently
unfocused," used only to widen desktop_notification/push eligibility unfocused," used only to widen desktop_notification/push eligibility
beyond plain room-connection state (#59). A Redis hash (field = beyond plain room-connection state (#59). One expiring entry per
user_id, value = refcount of that user's currently-blurred desktop currently-blurred desktop connection (see ExpiringPresenceSet),
connections), parallel to Presence/GlobalPresence. parallel to Presence/GlobalPresence.
Absence from this hash is the default and means "focused." That default Absence from the set is the default and means "focused." That default
is also exactly right for every browser-tab connection: only the is also exactly right for every browser-tab connection: only the
desktop client ever sends focus/blur frames at all (see chat.py's desktop client ever sends focus/blur frames at all (see chat.py's
"focus" envelope handling), so a browser user never appears here -- "focus" envelope handling), so a browser user never appears here --
their attention is already fully captured by Presence's room-connection their attention is already fully captured by Presence's room-connection
state, which stays visibility-gated with no separate focus signal. state, which stays visibility-gated with no separate focus signal.
Refcounted for the same multi-connection reason as Presence/ Same known simplification as before: two desktop windows for one user,
GlobalPresence, with the same known simplification: two desktop windows one focused and one blurred, count as "unfocused" (any live blurred
for one user, one focused and one blurred, count as "unfocused" here entry) even though the user does have attention somewhere. That errs
(refcount > 0) even though the user does have attention somewhere. That toward notifying rather than silently missing one, which is the safer
errs toward notifying rather than silently missing one, which is the failure mode for a notification. Entries expire (#77) -- a desktop
safer failure mode for a notification. window that died while blurred used to leave its user "unfocused"
forever.
""" """
def __init__(self, redis: Redis) -> None: KEY = "presence:v2:unfocused"
self._redis = redis
def _key(self) -> str: def __init__(self, redis: Redis, store: ExpiringPresenceSet | None = None) -> None:
return "presence:unfocused" self._store = store or ExpiringPresenceSet(redis)
async def mark_blurred(self, user_id: uuid.UUID) -> None: async def mark_blurred(self, user_id: uuid.UUID, conn_id: str) -> None:
await self._redis.hincrby(self._key(), str(user_id), 1) await self._store.add(self.KEY, user_id, conn_id)
async def mark_focused(self, user_id: uuid.UUID) -> None: async def mark_focused(self, user_id: uuid.UUID, conn_id: str) -> None:
key = self._key() await self._store.remove(self.KEY, user_id, conn_id)
field = str(user_id)
remaining = await self._redis.hincrby(key, field, -1) async def refresh(self, user_id: uuid.UUID, conn_id: str) -> None:
if remaining <= 0: await self._store.add(self.KEY, user_id, conn_id)
await self._redis.hdel(key, field)
async def is_unfocused(self, user_id: uuid.UUID) -> bool: async def is_unfocused(self, user_id: uuid.UUID) -> bool:
return await self._redis.hexists(self._key(), str(user_id)) return await self._store.is_live(self.KEY, user_id)
+32 -27
View File
@@ -2,50 +2,55 @@ import uuid
from redis.asyncio import Redis from redis.asyncio import Redis
from app.ws.expiring_presence import ExpiringPresenceSet
class GlobalPresence: class GlobalPresence:
"""Cross-instance "does this user have the app open at all right now," """Cross-instance "does this user have the app open at all right now,"
independent of which (if any) room they currently have open -- backing independent of which (if any) room they currently have open -- backing
the online/offline presence dot shown wherever a user's avatar renders. the online/offline presence dot shown wherever a user's avatar renders.
A single Redis hash (field = user_id, value = connection refcount),
parallel to but separate from Presence's per-room hashes.
Refcounted for the same reason as Presence: multiple tabs/instances for Each connection has its own expiring entry (see ExpiringPresenceSet), so
one user shouldn't flip them offline until the last connection closes. a user with several tabs/devices stays online until the last one goes,
and a connection that dies without cleaning up ages out instead of
leaving them online forever (#77). The key is versioned (`v2`) because
the old refcount hash lives at `presence:global` and its leaked counts
must not be read as live entries.
""" """
def __init__(self, redis: Redis) -> None: KEY = "presence:v2:global"
self._redis = redis
def _key(self) -> str: def __init__(self, redis: Redis, store: ExpiringPresenceSet | None = None) -> None:
return "presence:global" self._store = store or ExpiringPresenceSet(redis)
async def connect(self, user_id: uuid.UUID) -> bool: async def connect(self, user_id: uuid.UUID, conn_id: str) -> bool:
"""Returns True iff this was the user's first open connection -- """Returns True iff this made the user newly online -- a genuine
a genuine offline->online transition worth telling anyone about.""" offline->online transition worth telling anyone about."""
count = await self._redis.hincrby(self._key(), str(user_id), 1) return await self._store.add(self.KEY, user_id, conn_id)
return count == 1
async def disconnect(self, user_id: uuid.UUID) -> bool: async def refresh(self, user_id: uuid.UUID, conn_id: str) -> bool:
"""Returns True iff this was the user's last open connection -- a """Heartbeat. Same as connect() on purpose: a connection whose entry
had already expired (a long stall) comes back online here, and the
caller needs to announce that exactly like a fresh connect."""
return await self._store.add(self.KEY, user_id, conn_id)
async def disconnect(self, user_id: uuid.UUID, conn_id: str) -> bool:
"""Returns True iff that was the user's last live connection -- a
genuine online->offline transition.""" genuine online->offline transition."""
key = self._key() return await self._store.remove(self.KEY, user_id, conn_id)
field = str(user_id)
remaining = await self._redis.hincrby(key, field, -1) async def sweep(self) -> set[uuid.UUID]:
if remaining <= 0: """Drops expired entries and returns the users that went offline as a
await self._redis.hdel(key, field) result -- the transitions no disconnect ever reported."""
return True return await self._store.prune(self.KEY)
return False
async def is_online(self, user_id: uuid.UUID) -> bool: async def is_online(self, user_id: uuid.UUID) -> bool:
return await self._redis.hexists(self._key(), str(user_id)) return await self._store.is_live(self.KEY, user_id)
async def online_user_ids(self, user_ids: list[uuid.UUID]) -> set[uuid.UUID]: async def online_user_ids(self, user_ids: list[uuid.UUID]) -> set[uuid.UUID]:
if not user_ids: if not user_ids:
return set() return set()
values = await self._redis.hmget(self._key(), [str(u) for u in user_ids]) return set(user_ids) & await self._store.live_user_ids(self.KEY)
return {uid for uid, v in zip(user_ids, values) if v is not None}
async def all_online_user_ids(self) -> set[uuid.UUID]: async def all_online_user_ids(self) -> set[uuid.UUID]:
fields = await self._redis.hkeys(self._key()) return await self._store.live_user_ids(self.KEY)
return {uuid.UUID(f) for f in fields}
+26 -24
View File
@@ -2,38 +2,40 @@ import uuid
from redis.asyncio import Redis from redis.asyncio import Redis
from app.ws.expiring_presence import ExpiringPresenceSet
class Presence: class Presence:
"""Cross-instance "who's connected to this room," backed by a Redis hash """Cross-instance "who's connected to this room," one expiring set per
per room (field = user_id, value = connection refcount). room (see ExpiringPresenceSet).
Refcounted rather than a plain set so a user with two connections to the This is what the offline-push check reads, so a leaked entry used to mean
same room -- two tabs, or one per app instance -- doesn't get marked a user who'd gone away was still treated as "watching the room" and never
offline when only one of those connections closes. got a push notification (#77). Entries now expire unless the connection
keeps renewing them, so that can't outlive a dead connection by more than
Known limitation: a hard crash (not a clean disconnect) leaks that the TTL. Keys are versioned (`v2`) so the old refcount hashes
connection's increment forever, since there's no heartbeat/TTL here to (`presence:{room_id}`), with whatever they leaked, are never read.
reclaim it -- out of scope for this phase, same category of
simplification as the "no server-side session revocation" note in the
README.
""" """
def __init__(self, redis: Redis) -> None: def __init__(self, redis: Redis, store: ExpiringPresenceSet | None = None) -> None:
self._redis = redis self._store = store or ExpiringPresenceSet(redis)
def _key(self, room_id: uuid.UUID) -> str: def _key(self, room_id: uuid.UUID) -> str:
return f"presence:{room_id}" return f"presence:v2:room:{room_id}"
async def join(self, room_id: uuid.UUID, user_id: uuid.UUID) -> None: async def join(self, room_id: uuid.UUID, user_id: uuid.UUID, conn_id: str) -> None:
await self._redis.hincrby(self._key(room_id), str(user_id), 1)
async def leave(self, room_id: uuid.UUID, user_id: uuid.UUID) -> None:
key = self._key(room_id) key = self._key(room_id)
field = str(user_id) # Per-room offline transitions aren't broadcast anywhere, so unlike
remaining = await self._redis.hincrby(key, field, -1) # the global key there's nothing to lose by pruning here -- it just
if remaining <= 0: # keeps a busy room's set from accumulating expired entries.
await self._redis.hdel(key, field) await self._store.prune(key)
await self._store.add(key, user_id, conn_id)
async def refresh(self, room_id: uuid.UUID, user_id: uuid.UUID, conn_id: str) -> None:
await self._store.add(self._key(room_id), user_id, conn_id)
async def leave(self, room_id: uuid.UUID, user_id: uuid.UUID, conn_id: str) -> None:
await self._store.remove(self._key(room_id), user_id, conn_id)
async def connected_user_ids(self, room_id: uuid.UUID) -> set[uuid.UUID]: async def connected_user_ids(self, room_id: uuid.UUID) -> set[uuid.UUID]:
fields = await self._redis.hkeys(self._key(room_id)) return await self._store.live_user_ids(self._key(room_id))
return {uuid.UUID(f) for f in fields}
+83
View File
@@ -0,0 +1,83 @@
import asyncio
import logging
import uuid
from collections.abc import Callable
from redis.asyncio import Redis
from sqlalchemy.ext.asyncio import AsyncSession
from app.services.message_events import broadcast_dm_presence_update, broadcast_member_updated
from app.ws.broadcaster import Broadcaster
from app.ws.global_presence import GlobalPresence
logger = logging.getLogger(__name__)
PRESENCE_SWEEP_INTERVAL_SECONDS = 15
SWEEP_LOCK_KEY = "presence:v2:sweeper-lock"
async def sweep_once(
redis: Redis,
global_presence: GlobalPresence,
broadcaster: Broadcaster,
session_factory: Callable[[], AsyncSession],
lock_seconds: int | None = max(1, PRESENCE_SWEEP_INTERVAL_SECONDS - 1),
) -> set[uuid.UUID]:
"""Expires dead connections' presence entries and tells everyone about
the users that went offline as a result.
A clean disconnect broadcasts its own offline transition (chat.py), but a
connection that just stops being renewed has no such event -- this is the
only thing that notices. Every app worker runs this loop; the Redis lock
makes it one sweep per interval across the whole deployment rather than
N workers each doing (and broadcasting) the same thing. `lock_seconds=None`
skips the lock (tests).
"""
if lock_seconds is not None and not await redis.set(SWEEP_LOCK_KEY, "1", nx=True, ex=lock_seconds):
return set()
went_offline = await global_presence.sweep()
for user_id in went_offline:
# One user's failed broadcast must not cost everyone after them
# theirs -- their entry is already gone, so this is the only chance.
try:
async with session_factory() as db:
await broadcast_member_updated(db, broadcaster, user_id)
await broadcast_dm_presence_update(db, broadcaster, user_id, online=False)
except Exception:
logger.error("Failed to broadcast offline for %s", user_id, exc_info=True)
return went_offline
async def run_presence_sweeper(app, interval: float = PRESENCE_SWEEP_INTERVAL_SECONDS) -> None:
# Same lesson as Broadcaster.run_forever (#76): a background task that
# dies on its first error does so silently, and here that would quietly
# bring the stuck-online bug back.
while True:
await asyncio.sleep(interval)
try:
await sweep_once(
app.state.redis,
app.state.global_presence,
app.state.broadcaster,
app.state.session_factory,
lock_seconds=max(1, int(interval) - 1),
)
except asyncio.CancelledError:
raise
except Exception:
logger.error("Presence sweep failed", exc_info=True)
async def purge_legacy_presence(redis: Redis) -> int:
"""Deletes the old refcount hashes (`presence:global`, `presence:unfocused`,
`presence:{room_id}`). Nothing reads them any more -- the live data is
under `presence:v2:` -- and they hold whatever counts leaked before #77,
so there's nothing worth keeping. Safe to run on every startup."""
deleted = 0
async for key in redis.scan_iter("presence:*"):
name = key.decode() if isinstance(key, bytes) else key
if name.startswith("presence:v2:"):
continue
await redis.delete(name)
deleted += 1
return deleted
+1 -1
View File
@@ -1,6 +1,6 @@
[project] [project]
name = "ds-chat" name = "ds-chat"
version = "1.1.0" version = "2026.10.13"
description = "DS Chat backend service" description = "DS Chat backend service"
license = { text = "AGPL-3.0-or-later" } license = { text = "AGPL-3.0-or-later" }
requires-python = ">=3.11" requires-python = ">=3.11"
@@ -0,0 +1,61 @@
import asyncio
import pytest
from app.ws.broadcaster import Broadcaster
async def test_run_forever_restarts_after_listen_raises(monkeypatch):
# #76: listen() dying (a dropped Redis connection, most commonly -- e.g.
# Redis itself restarting) must not permanently kill live delivery for
# the whole process. run_forever() has to notice and restart it, not
# just let the background task disappear silently while everything else
# (login, REST endpoints) keeps working fine.
broadcaster = Broadcaster(redis=None, manager=None)
calls = 0
async def fake_listen():
nonlocal calls
calls += 1
if calls < 3:
raise ConnectionError("redis went away")
# Stop the loop once the retry behavior below is proven, rather
# than looping forever in a test.
raise asyncio.CancelledError()
monkeypatch.setattr(broadcaster, "listen", fake_listen)
sleep_calls = []
async def fake_sleep(seconds):
sleep_calls.append(seconds)
monkeypatch.setattr(asyncio, "sleep", fake_sleep)
with pytest.raises(asyncio.CancelledError):
await broadcaster.run_forever()
assert calls == 3
# Slept once after each of the first two failures (exponential:
# 1s, then 2s) -- not after the third, which is the CancelledError
# that stops the loop before reaching the sleep.
assert sleep_calls == [1.0, 2.0]
async def test_run_forever_does_not_swallow_cancellation(monkeypatch):
# A genuine shutdown (the app's own lifespan cancels this task) must
# propagate immediately, not get treated as just another failure to
# retry after a backoff.
broadcaster = Broadcaster(redis=None, manager=None)
async def fake_listen():
raise asyncio.CancelledError()
monkeypatch.setattr(broadcaster, "listen", fake_listen)
async def fail_if_called(seconds):
raise AssertionError("should not sleep/retry on cancellation")
monkeypatch.setattr(asyncio, "sleep", fail_if_called)
with pytest.raises(asyncio.CancelledError):
await broadcaster.run_forever()
+155
View File
@@ -0,0 +1,155 @@
import os
import time
import uuid
import pytest_asyncio
from redis.asyncio import Redis
from app.ws.expiring_presence import ExpiringPresenceSet
class Clock:
def __init__(self) -> None:
self.now = time.time()
def __call__(self) -> float:
return self.now
def advance(self, seconds: float) -> None:
self.now += seconds
@pytest_asyncio.fixture
async def redis_client():
client = Redis.from_url(os.environ["REDIS_URL"], decode_responses=True)
yield client
await client.aclose()
@pytest_asyncio.fixture
async def setup(redis_client):
clock = Clock()
store = ExpiringPresenceSet(redis_client, ttl_seconds=90, clock=clock)
key = f"presence:v2:test:{uuid.uuid4()}"
yield store, clock, key
await redis_client.delete(key)
async def test_first_connection_is_a_transition_and_a_second_is_not(setup):
store, _, key = setup
user = uuid.uuid4()
assert await store.add(key, user, "tab1") is True
assert await store.add(key, user, "tab2") is False
assert await store.live_user_ids(key) == {user}
async def test_renewing_a_live_entry_is_not_a_transition(setup):
store, clock, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
clock.advance(30)
assert await store.add(key, user, "tab1") is False
async def test_entry_stops_counting_after_the_ttl(setup):
store, clock, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
clock.advance(89)
assert await store.is_live(key, user) is True
clock.advance(2)
assert await store.is_live(key, user) is False
assert await store.live_user_ids(key) == set()
async def test_renewal_keeps_a_connection_alive_past_the_original_expiry(setup):
store, clock, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
for _ in range(5):
clock.advance(60)
await store.add(key, user, "tab1")
assert await store.is_live(key, user) is True
async def test_coming_back_after_expiry_is_a_transition_again(setup):
store, clock, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
clock.advance(200)
assert await store.add(key, user, "tab1") is True
async def test_one_live_connection_keeps_the_user_online_when_another_expires(setup):
store, clock, key = setup
user = uuid.uuid4()
await store.add(key, user, "old-tab")
clock.advance(60)
await store.add(key, user, "new-tab")
clock.advance(60) # old-tab is now 120s stale, new-tab 60s
assert await store.is_live(key, user) is True
async def test_remove_reports_only_the_last_connection_leaving(setup):
store, _, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
await store.add(key, user, "tab2")
assert await store.remove(key, user, "tab1") is False
assert await store.remove(key, user, "tab2") is True
async def test_remove_of_an_entry_that_is_already_gone_reports_nothing(setup):
# Whoever removed it first (e.g. prune) already reported the transition.
store, _, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
await store.remove(key, user, "tab1")
assert await store.remove(key, user, "tab1") is False
async def test_remove_of_an_expired_but_unpruned_entry_still_reports_offline(setup):
# Nobody has been told this user went offline yet (no prune has run), so
# their eventual clean close is the one place left to report it.
store, clock, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
clock.advance(200)
assert await store.remove(key, user, "tab1") is True
async def test_users_are_independent(setup):
store, _, key = setup
alice, bob = uuid.uuid4(), uuid.uuid4()
await store.add(key, alice, "a")
await store.add(key, bob, "b")
await store.remove(key, alice, "a")
assert await store.live_user_ids(key) == {bob}
async def test_prune_reports_users_who_lost_their_last_live_entry(setup):
store, clock, key = setup
gone, still_here = uuid.uuid4(), uuid.uuid4()
await store.add(key, gone, "tab1")
await store.add(key, still_here, "old")
clock.advance(60)
await store.add(key, still_here, "new")
clock.advance(40) # gone/tab1 and still_here/old are expired; still_here/new is not
assert await store.prune(key) == {gone}
async def test_prune_is_idempotent_and_removes_what_it_reports(setup):
store, clock, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
clock.advance(200)
assert await store.prune(key) == {user}
assert await store.prune(key) == set()
async def test_prune_with_nothing_expired_does_nothing(setup):
store, _, key = setup
user = uuid.uuid4()
await store.add(key, user, "tab1")
assert await store.prune(key) == set()
assert await store.is_live(key, user) is True
+67
View File
@@ -1,9 +1,13 @@
import asyncio import asyncio
import uuid import uuid
from datetime import datetime, timedelta, timezone
import pytest_asyncio import pytest_asyncio
from sqlalchemy import select
from app.database import async_session_factory
from app.database import engine as _link_preview_engine from app.database import engine as _link_preview_engine
from app.models import LinkPreview
from app.schemas.user import UserCreate from app.schemas.user import UserCreate
from app.services.auth_service import register_user from app.services.auth_service import register_user
from app.services.link_preview_service import extract_first_url from app.services.link_preview_service import extract_first_url
@@ -294,3 +298,66 @@ async def test_link_preview_reused_across_messages_with_same_url(client, db_sess
history = (await client.get(f"/api/rooms/{room['id']}/messages")).json() history = (await client.get(f"/api/rooms/{room['id']}/messages")).json()
assert len(history) == 2 assert len(history) == 2
assert all(m["link_preview"]["title"] == "Example Article" for m in history) assert all(m["link_preview"]["title"] == "Example Article" for m in history)
async def test_link_preview_refetches_after_cache_expires(client, db_session, monkeypatch):
# #70: a real report -- re-posting a URL whose title had genuinely
# changed kept showing the stale first-fetch preview, because the
# cache TTL used to be 7 days. Simulates that expiry directly (rather
# than actually sleeping 5+ minutes) by backdating the cached row's
# fetched_at past the TTL, then confirms a second post of the same URL
# picks up new content instead of the stale cached title.
captured_tasks: list[asyncio.Task] = []
real_create_task = asyncio.create_task
def fake_create_task(coro):
task = real_create_task(coro)
captured_tasks.append(task)
return task
monkeypatch.setattr("app.services.message_events.asyncio.create_task", fake_create_task)
calls: list[str] = []
monkeypatch.setattr(
"app.services.link_preview_service.httpx.AsyncClient",
_fake_client_factory(call_log=calls),
)
url = _unique_url()
await register_and_login(client, db_session, username="alice")
room = (await client.post("/api/rooms", json={"name": "general"})).json()
webhook = (await client.post(f"/api/rooms/{room['id']}/webhooks/incoming", json={})).json()
resp1 = await client.post(
f"/api/webhooks/incoming/{webhook['token']}", json={"content": f"see {url}"}
)
assert resp1.status_code == 204
await asyncio.gather(*captured_tasks)
captured_tasks.clear()
async with async_session_factory() as session:
row = (
await session.execute(select(LinkPreview).where(LinkPreview.url == url))
).scalar_one()
row.fetched_at = datetime.now(timezone.utc) - timedelta(minutes=10)
await session.commit()
updated_html = _OG_HTML.replace(b"Example Article", b"Updated Article")
monkeypatch.setattr(
"app.services.link_preview_service.httpx.AsyncClient",
_fake_client_factory(html=updated_html, call_log=calls),
)
resp2 = await client.post(
f"/api/webhooks/incoming/{webhook['token']}", json={"content": f"again: {url}"}
)
assert resp2.status_code == 204
await asyncio.gather(*captured_tasks)
assert len(calls) == 2 # the expired cache forced a second real fetch
# Cached by URL, not by message (see link_preview_service.py) -- the
# row was refreshed in place, so *both* messages referencing this URL
# now show the new title on a history reload, not one each.
history = (await client.get(f"/api/rooms/{room['id']}/messages")).json()
assert len(history) == 2
assert all(m["link_preview"]["title"] == "Updated Article" for m in history)
+105
View File
@@ -130,3 +130,108 @@ def test_online_users_endpoint_respects_appear_offline(ws_client):
online = ws_client.get("/api/users/online").json() online = ws_client.get("/api/users/online").json()
assert alice["id"] not in online assert alice["id"] not in online
# --- #77: liveness -----------------------------------------------------------
# A connection that stops answering the app-level heartbeat is dropped by the
# server, and a connection that does answer keeps its presence entry renewed.
# Timings are shrunk so nothing here waits on the real 30s/90s values.
def _fast_heartbeat(monkeypatch):
monkeypatch.setattr("app.ws.chat.WS_PING_INTERVAL_SECONDS", 0.05)
monkeypatch.setattr("app.ws.chat.WS_DEAD_AFTER_SECONDS", 0.2)
monkeypatch.setattr("app.ws.chat.PRESENCE_REFRESH_MIN_INTERVAL_SECONDS", 0)
def test_unresponsive_client_is_disconnected_by_the_server(ws_client, monkeypatch):
# The frozen-page / sleeping-laptop case: the transport stays open (the
# browser answers protocol pings itself) but the page never replies to
# the app-level ping.
from starlette.websockets import WebSocketDisconnect
_fast_heartbeat(monkeypatch)
_register_ws(ws_client, _unique("alice"))
with ws_client.websocket_connect("/ws/chat") as ws:
pings = 0
try:
while True:
assert ws.receive_json() == {"type": "ping"}
pings += 1
assert pings < 100, "server never gave up on a silent client"
except WebSocketDisconnect as exc:
assert exc.code == 4408
assert pings >= 2
def test_client_that_answers_pings_is_not_disconnected(ws_client, monkeypatch):
_fast_heartbeat(monkeypatch)
_register_ws(ws_client, _unique("alice"))
room = ws_client.post("/api/rooms", json={"name": _unique("general")}).json()
with ws_client.websocket_connect("/ws/chat") as ws:
# Far longer than WS_DEAD_AFTER_SECONDS in total.
for _ in range(12):
assert ws.receive_json() == {"type": "ping"}
ws.send_json({"type": "pong"})
ws.send_json({"type": "join", "room_id": room["id"]})
while (msg := ws.receive_json())["type"] == "ping":
pass
assert msg == {"type": "joined", "room_id": room["id"]}
def test_bot_connection_is_not_dropped_for_ignoring_pings(ws_client_factory, monkeypatch):
# API-token clients aren't expected to speak the app heartbeat.
_fast_heartbeat(monkeypatch)
ws_client = ws_client_factory()
admin = _register_ws(ws_client, _unique("admin"))
async def _promote():
from app.models import User
async with ws_client.session_factory() as session:
user = await session.get(User, uuid.UUID(admin["id"]))
user.is_site_admin = True
await session.commit()
ws_client.portal.call(_promote)
room = ws_client.post("/api/rooms", json={"name": _unique("general")}).json()
bot = ws_client.post("/api/admin/bots", json={"username": _unique("bot")}).json()
token = ws_client.post(
f"/api/admin/bots/{bot['id']}/tokens", json={"scopes": ["read:messages", "write:messages"]}
).json()["token"]
ws_client.post(f"/api/rooms/{room['id']}/join", headers={"Authorization": f"Bearer {token}"})
with ws_client.websocket_connect("/ws/chat", headers={"Authorization": f"Bearer {token}"}) as ws:
for _ in range(8): # ~0.4s of silence, twice WS_DEAD_AFTER_SECONDS
assert ws.receive_json() == {"type": "ping"}
ws.send_json({"type": "join", "room_id": room["id"]})
while (msg := ws.receive_json())["type"] == "ping":
pass
assert msg["type"] == "joined"
def test_presence_entry_is_renewed_while_the_client_answers(ws_client, monkeypatch):
import time
_fast_heartbeat(monkeypatch)
alice = _register_ws(ws_client, _unique("alice"))
async def _scores():
redis = ws_client.app.state.redis
return await redis.zrange("presence:v2:global", 0, -1, withscores=True)
with ws_client.websocket_connect("/ws/chat") as ws:
# Wait for the first ping so the connect-time entry exists.
assert ws.receive_json() == {"type": "ping"}
first = [s for m, s in ws_client.portal.call(_scores) if m.startswith(alice["id"])]
assert len(first) == 1
time.sleep(0.1)
ws.send_json({"type": "pong"})
# Any later frame arriving back proves the pong was processed.
while ws.receive_json()["type"] != "ping":
pass
second = [s for m, s in ws_client.portal.call(_scores) if m.startswith(alice["id"])]
assert second and second[0] > first[0]
+188
View File
@@ -0,0 +1,188 @@
import os
import time
import uuid
import pytest_asyncio
from redis.asyncio import Redis
from app.schemas.room import RoomCreate
from app.schemas.user import UserCreate
from app.services.auth_service import register_user
from app.services.room_service import create_room, find_or_create_dm
from app.ws.expiring_presence import ExpiringPresenceSet
from app.ws.global_presence import GlobalPresence
from app.ws.presence_sweeper import SWEEP_LOCK_KEY, purge_legacy_presence, sweep_once
class Clock:
def __init__(self) -> None:
self.now = time.time()
def __call__(self) -> float:
return self.now
def advance(self, seconds: float) -> None:
self.now += seconds
class FakeBroadcaster:
def __init__(self) -> None:
self.room_events: list[tuple[uuid.UUID, dict]] = []
self.user_events: list[tuple[uuid.UUID, dict]] = []
async def publish(self, room_id, payload):
self.room_events.append((room_id, payload))
async def publish_to_user(self, user_id, payload):
self.user_events.append((user_id, payload))
@pytest_asyncio.fixture
async def redis_client():
client = Redis.from_url(os.environ["REDIS_URL"], decode_responses=True)
await client.delete(GlobalPresence.KEY, SWEEP_LOCK_KEY)
yield client
await client.delete(GlobalPresence.KEY, SWEEP_LOCK_KEY)
await client.aclose()
@pytest_asyncio.fixture
async def world(redis_client, db_session):
clock = Clock()
presence = GlobalPresence(redis_client, ExpiringPresenceSet(redis_client, ttl_seconds=90, clock=clock))
broadcaster = FakeBroadcaster()
class _Factory:
def __call__(self):
return self
async def __aenter__(self):
return db_session
async def __aexit__(self, *exc):
return False
async def make_user(prefix: str):
name = f"{prefix}-{uuid.uuid4().hex[:8]}"
return await register_user(
db_session, UserCreate(username=name, email=f"{name}@example.com", password="password123")
)
async def sweep(**kwargs):
return await sweep_once(redis_client, presence, broadcaster, _Factory(), **kwargs)
return clock, presence, broadcaster, make_user, sweep
async def test_sweep_announces_a_user_whose_connection_expired(world, db_session):
clock, presence, broadcaster, make_user, sweep = world
alice, bob = await make_user("alice"), await make_user("bob")
room = await create_room(db_session, alice.id, RoomCreate(name=f"r-{uuid.uuid4().hex[:8]}"))
dm = await find_or_create_dm(db_session, alice.id, bob.id)
await presence.connect(alice.id, "tab1")
clock.advance(200)
assert await sweep(lock_seconds=None) == {alice.id}
room_ids = {rid for rid, p in broadcaster.room_events if p["type"] == "member_updated"}
assert {room.id, dm.id} <= room_ids
assert (bob.id, {"type": "dm_presence_update", "user_id": str(alice.id), "status": "offline"}) in (
broadcaster.user_events
)
assert await presence.is_online(alice.id) is False
async def test_sweep_announces_each_expiry_only_once(world, db_session):
clock, presence, broadcaster, make_user, sweep = world
alice = await make_user("alice")
await create_room(db_session, alice.id, RoomCreate(name=f"r-{uuid.uuid4().hex[:8]}"))
await presence.connect(alice.id, "tab1")
clock.advance(200)
await sweep(lock_seconds=None)
sent = len(broadcaster.room_events)
assert sent > 0
assert await sweep(lock_seconds=None) == set()
assert len(broadcaster.room_events) == sent
async def test_sweep_stays_quiet_while_the_user_has_another_live_connection(world, db_session):
clock, presence, broadcaster, make_user, sweep = world
alice = await make_user("alice")
await create_room(db_session, alice.id, RoomCreate(name=f"r-{uuid.uuid4().hex[:8]}"))
await presence.connect(alice.id, "old-tab")
clock.advance(60)
await presence.connect(alice.id, "new-tab")
clock.advance(60)
assert await sweep(lock_seconds=None) == set()
assert broadcaster.room_events == []
assert await presence.is_online(alice.id) is True
async def test_sweep_leaves_healthy_connections_alone(world, db_session):
clock, presence, broadcaster, make_user, sweep = world
alice = await make_user("alice")
await presence.connect(alice.id, "tab1")
clock.advance(30)
assert await sweep(lock_seconds=None) == set()
assert broadcaster.room_events == []
async def test_only_one_sweeper_runs_per_interval(world, db_session, redis_client):
clock, presence, broadcaster, make_user, sweep = world
alice = await make_user("alice")
await presence.connect(alice.id, "tab1")
clock.advance(200)
# Another worker holds the lock: this one must not sweep (or broadcast).
await redis_client.set(SWEEP_LOCK_KEY, "1", ex=14)
assert await sweep(lock_seconds=14) == set()
assert await redis_client.zcard(GlobalPresence.KEY) == 1
await redis_client.delete(SWEEP_LOCK_KEY)
assert await sweep(lock_seconds=14) == {alice.id}
# And the lock is now held, so an immediate second attempt does nothing.
assert await sweep(lock_seconds=14) == set()
async def test_one_failed_broadcast_does_not_stop_the_rest(world, db_session):
clock, presence, broadcaster, make_user, sweep = world
alice, bob = await make_user("alice"), await make_user("bob")
room = await create_room(db_session, alice.id, RoomCreate(name=f"r-{uuid.uuid4().hex[:8]}"))
other = await create_room(db_session, bob.id, RoomCreate(name=f"r-{uuid.uuid4().hex[:8]}"))
await presence.connect(alice.id, "a")
await presence.connect(bob.id, "b")
clock.advance(200)
real_publish = broadcaster.publish
failed = []
async def flaky_publish(room_id, payload):
if room_id == room.id:
failed.append(room_id)
raise RuntimeError("redis hiccup")
await real_publish(room_id, payload)
broadcaster.publish = flaky_publish
assert await sweep(lock_seconds=None) == {alice.id, bob.id}
assert failed == [room.id]
assert other.id in {rid for rid, _ in broadcaster.room_events}
async def test_purge_removes_legacy_keys_but_keeps_v2(redis_client):
legacy = ["presence:global", "presence:unfocused", f"presence:{uuid.uuid4()}"]
current = f"presence:v2:test:{uuid.uuid4()}"
for key in legacy:
await redis_client.hset(key, "someone", 3)
await redis_client.zadd(current, {"x:y": time.time() + 90})
try:
assert await purge_legacy_presence(redis_client) >= len(legacy)
for key in legacy:
assert await redis_client.exists(key) == 0
assert await redis_client.exists(current) == 1
finally:
await redis_client.delete(current, *legacy)
+56
View File
@@ -102,6 +102,62 @@ async def test_theme_custom_rejected_on_generic_profile_update(client, db_sessio
assert resp.status_code == 422 assert resp.status_code == 422
async def test_update_text_scale_persists(client, db_session):
await register_and_login(client, db_session, username=_unique("alice"))
resp = await client.patch("/api/auth/me", json={"text_scale": "large"})
assert resp.status_code == 200, resp.text
assert resp.json()["text_scale"] == "large"
me = await client.get("/api/auth/me")
assert me.json()["text_scale"] == "large"
async def test_invalid_text_scale_rejected(client, db_session):
await register_and_login(client, db_session, username=_unique("alice"))
resp = await client.patch("/api/auth/me", json={"text_scale": "huge"})
assert resp.status_code == 422
async def test_updating_text_scale_does_not_clobber_theme(client, db_session):
await register_and_login(client, db_session, username=_unique("alice"))
await client.patch("/api/auth/me", json={"theme": "sunset"})
resp = await client.patch("/api/auth/me", json={"text_scale": "xlarge"})
assert resp.status_code == 200
assert resp.json()["theme"] == "sunset"
assert resp.json()["text_scale"] == "xlarge"
async def test_update_emoji_scale_persists(client, db_session):
await register_and_login(client, db_session, username=_unique("alice"))
resp = await client.patch("/api/auth/me", json={"emoji_scale": "xlarge"})
assert resp.status_code == 200, resp.text
assert resp.json()["emoji_scale"] == "xlarge"
me = await client.get("/api/auth/me")
assert me.json()["emoji_scale"] == "xlarge"
async def test_invalid_emoji_scale_rejected(client, db_session):
await register_and_login(client, db_session, username=_unique("alice"))
resp = await client.patch("/api/auth/me", json={"emoji_scale": "huge"})
assert resp.status_code == 422
async def test_updating_emoji_scale_does_not_clobber_text_scale(client, db_session):
await register_and_login(client, db_session, username=_unique("alice"))
await client.patch("/api/auth/me", json={"text_scale": "large"})
resp = await client.patch("/api/auth/me", json={"emoji_scale": "small"})
assert resp.status_code == 200
assert resp.json()["text_scale"] == "large"
assert resp.json()["emoji_scale"] == "small"
async def test_avatar_upload_succeeds_and_persists(client, db_session): async def test_avatar_upload_succeeds_and_persists(client, db_session):
await register_and_login(client, db_session, username=_unique("alice")) await register_and_login(client, db_session, username=_unique("alice"))
+21
View File
@@ -484,6 +484,27 @@ async def test_add_member_directly(client, db_session, monkeypatch):
assert "added" in calls[0]["subject"].lower() assert "added" in calls[0]["subject"].lower()
async def test_add_member_posts_welcome_message(client, db_session, monkeypatch):
# #74: posted as the auto-provisioned "system" account, not the admin
# who added them -- mirrors test_add_member_directly's setup.
_fake_send_email(monkeypatch)
await register_and_login(client, db_session, username="alice")
room_id = (await client.post("/api/rooms", json={"name": "general"})).json()["id"]
await client.post("/api/auth/logout")
bob = await register_and_login(client, db_session, username="bob")
await client.post("/api/auth/logout")
await login_as(client, "alice")
resp = await client.post(f"/api/rooms/{room_id}/members", json={"user_id": bob["id"]})
assert resp.status_code == 201, resp.text
history = (await client.get(f"/api/rooms/{room_id}/messages")).json()
welcome_messages = [m for m in history if m["username"] == "system"]
assert len(welcome_messages) == 1
assert welcome_messages[0]["content"] == "Welcome to #general, bob!"
async def test_add_member_requires_admin_role(client, db_session, monkeypatch): async def test_add_member_requires_admin_role(client, db_session, monkeypatch):
_fake_send_email(monkeypatch) _fake_send_email(monkeypatch)
await register_and_login(client, db_session, username="alice") await register_and_login(client, db_session, username="alice")
+13
View File
@@ -0,0 +1,13 @@
from app.services.system_user_service import SYSTEM_USERNAME, get_or_create_system_user
async def test_get_or_create_system_user_creates_bot_account(db_session):
user = await get_or_create_system_user(db_session)
assert user.username == SYSTEM_USERNAME
assert user.is_bot is True
async def test_get_or_create_system_user_is_idempotent(db_session):
first = await get_or_create_system_user(db_session)
second = await get_or_create_system_user(db_session)
assert first.id == second.id
+18
View File
@@ -109,6 +109,24 @@ def test_history_tiebreaks_identical_timestamps_by_id(ws_client):
assert [m["content"] for m in history] == [m["content"] for m in expected_order] assert [m["content"] for m in history] == [m["content"] for m in expected_order]
def test_ws_sends_heartbeat_ping(ws_client, monkeypatch):
# #76: with nothing else sent on the connection, a "ping" must arrive
# proactively once the idle timeout elapses -- shrunk here so the test
# doesn't actually wait the real 30s. Replying "pong" (the frontend's
# own behavior) must be accepted silently and leave the connection
# fully usable afterward, not treated as an unknown message type.
monkeypatch.setattr("app.ws.chat.WS_PING_INTERVAL_SECONDS", 0.05)
username = _unique("alice")
_register(ws_client, username=username)
room = ws_client.post("/api/rooms", json={"name": _unique("general")}).json()
with ws_client.websocket_connect("/ws/chat") as ws:
assert ws.receive_json() == {"type": "ping"}
ws.send_json({"type": "pong"})
ws.send_json({"type": "join", "room_id": room["id"]})
assert ws.receive_json() == {"type": "joined", "room_id": room["id"]}
def test_ws_message_without_join_errors(ws_client): def test_ws_message_without_join_errors(ws_client):
_register(ws_client, username=_unique("alice")) _register(ws_client, username=_unique("alice"))
room = ws_client.post("/api/rooms", json={"name": _unique("general")}).json() room = ws_client.post("/api/rooms", json={"name": _unique("general")}).json()
+11 -2
View File
@@ -16,9 +16,18 @@ BACKEND_DIR="${REPO_DIR}/backend"
FRONTEND_DIR="${REPO_DIR}/frontend" FRONTEND_DIR="${REPO_DIR}/frontend"
ENV_FILE="/etc/ds-chat/env" ENV_FILE="/etc/ds-chat/env"
echo "==> Pulling latest code" echo "==> Fetching latest release"
cd "$REPO_DIR" cd "$REPO_DIR"
git pull --ff-only git fetch --tags --force
LATEST_TAG="$(git tag --sort=-creatordate | head -n1)"
if [[ -z "$LATEST_TAG" ]]; then
echo "No tags found -- nothing to deploy" >&2
exit 1
fi
echo "Deploying $LATEST_TAG"
# Detached HEAD, not a branch checkout -- this directory only ever runs a
# tagged release, never whatever the default branch's tip happens to be.
git checkout --quiet --detach "$LATEST_TAG"
echo "==> Installing backend dependencies" echo "==> Installing backend dependencies"
cd "$BACKEND_DIR" cd "$BACKEND_DIR"
+7
View File
@@ -0,0 +1,7 @@
# Shown as the "Source code" link in the app's About screen -- required
# for AGPL-3.0 section 13 compliance once you deploy this (a link so users
# interacting with the app over the network can get the actual source,
# including any modifications you've made). The default below points at
# the upstream project -- fine if you're running it unmodified, but if
# you've forked or patched the code, point this at *your* copy instead.
VITE_SOURCE_URL=https://github.com/ds-ksmith/DS-Chat
+1 -1
View File
@@ -112,7 +112,7 @@ src/
LoginPage.tsx, SignupPage.tsx, ForgotPasswordPage.tsx, ResetPasswordPage.tsx LoginPage.tsx, SignupPage.tsx, ForgotPasswordPage.tsx, ResetPasswordPage.tsx
ChatShellPage.tsx, AdminPage.tsx, HelpPage.tsx ChatShellPage.tsx, AdminPage.tsx, HelpPage.tsx
styles/tokens.css design tokens (DarkSingularity theme: colors, spacing, etc.) styles/tokens.css design tokens (default theme: colors, spacing, etc.)
sw.ts custom service worker (injectManifest): app-shell sw.ts custom service worker (injectManifest): app-shell
precache + NetworkFirst runtime caching, push/notificationclick precache + NetworkFirst runtime caching, push/notificationclick
handlers, SKIP_WAITING messaging for the update-prompt flow handlers, SKIP_WAITING messaging for the update-prompt flow
+953 -11
View File
File diff suppressed because it is too large. Load diff
+6 -2
View File
@@ -1,14 +1,15 @@
{ {
"name": "frontend", "name": "frontend",
"private": true, "private": true,
"version": "1.1.0", "version": "2026.10.13",
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc -b && vite build", "build": "tsc -b && vite build",
"lint": "oxlint", "lint": "oxlint",
"preview": "vite preview" "preview": "vite preview",
"test": "vitest run"
}, },
"dependencies": { "dependencies": {
"markdown-to-jsx": "^9.10.2", "markdown-to-jsx": "^9.10.2",
@@ -18,13 +19,16 @@
"vite-plugin-pwa": "^1.3.0" "vite-plugin-pwa": "^1.3.0"
}, },
"devDependencies": { "devDependencies": {
"@testing-library/react": "^16.3.3",
"@types/node": "^24.13.3", "@types/node": "^24.13.3",
"@types/react": "^19.2.17", "@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.4", "@vitejs/plugin-react": "^6.0.4",
"jsdom": "^30.1.1",
"oxlint": "^1.75.0", "oxlint": "^1.75.0",
"typescript": "~6.0.2", "typescript": "~6.0.2",
"vite": "^8.2.0", "vite": "^8.2.0",
"vitest": "^5.0.2",
"workbox-cacheable-response": "^7.4.1", "workbox-cacheable-response": "^7.4.1",
"workbox-expiration": "^7.4.1", "workbox-expiration": "^7.4.1",
"workbox-precaching": "^7.4.1", "workbox-precaching": "^7.4.1",
+18 -1
View File
@@ -1,5 +1,5 @@
import { apiFetch, ApiError, NetworkError } from './client' import { apiFetch, ApiError, NetworkError } from './client'
import type { User, UserSession } from '../types' import type { EmojiScale, TextScale, User, UserSession } from '../types'
// No register() here: this is an invite-only site. Accounts are created by // No register() here: this is an invite-only site. Accounts are created by
// an operator via the backend CLI (`python -m app.cli create-user`), not // an operator via the backend CLI (`python -m app.cli create-user`), not
@@ -50,6 +50,23 @@ export function updateTheme(theme: 'dark' | 'light' | 'midnight' | 'sunset'): Pr
}) })
} }
// #71: its own call, same reasoning as updateTheme above -- the backend
// only applies fields actually present in the request body, so this can't
// clobber theme (or vice versa).
export function updateTextScale(textScale: TextScale): Promise<User> {
return apiFetch<User>('/api/auth/me', {
method: 'PATCH',
body: JSON.stringify({ text_scale: textScale }),
})
}
export function updateEmojiScale(emojiScale: EmojiScale): Promise<User> {
return apiFetch<User>('/api/auth/me', {
method: 'PATCH',
body: JSON.stringify({ emoji_scale: emojiScale }),
})
}
export function removeAvatar(): Promise<User> { export function removeAvatar(): Promise<User> {
return apiFetch<User>('/api/auth/me/avatar', { method: 'DELETE' }) return apiFetch<User>('/api/auth/me/avatar', { method: 'DELETE' })
} }
+11 -7
View File
@@ -10,8 +10,10 @@ interface AboutModalProps {
// users remotely through a computer network, you should also make sure // users remotely through a computer network, you should also make sure
// that it provides a way for users to get its source... its interface // that it provides a way for users to get its source... its interface
// could display a 'Source' link" -- this modal is that link, not just a // could display a 'Source' link" -- this modal is that link, not just a
// courtesy credits screen. // courtesy credits screen. Deliberately not a hardcoded URL: whoever
const SOURCE_URL = 'https://git.darksingularity.org/DarkSingularity/ds-chat' // deploys this needs to point it at *their* copy of the repo (including
// any modifications), not the upstream project -- see frontend/.env.example.
const SOURCE_URL = import.meta.env.VITE_SOURCE_URL as string | undefined
export function AboutModal({ onClose }: AboutModalProps) { export function AboutModal({ onClose }: AboutModalProps) {
return ( return (
@@ -39,11 +41,13 @@ export function AboutModal({ onClose }: AboutModalProps) {
</a> </a>
. .
</p> </p>
<p className="about-modal-line"> {SOURCE_URL && (
<a href={SOURCE_URL} target="_blank" rel="noopener noreferrer"> <p className="about-modal-line">
Source code <a href={SOURCE_URL} target="_blank" rel="noopener noreferrer">
</a> Source code
</p> </a>
</p>
)}
<div className="modal-actions" style={{ marginTop: '1rem' }}> <div className="modal-actions" style={{ marginTop: '1rem' }}>
<button type="button" className="btn-secondary" onClick={onClose}> <button type="button" className="btn-secondary" onClick={onClose}>
+28
View File
@@ -105,6 +105,34 @@
cursor: not-allowed; cursor: not-allowed;
} }
.composer-format-toggle {
width: 36px;
height: 36px;
flex: none;
border-radius: var(--radius);
background: transparent;
color: var(--ds-muted);
border: 1px solid var(--ds-border);
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.composer-format-toggle:hover:not(:disabled),
.composer-format-toggle-open {
color: var(--ds-text);
border-color: var(--ds-accent);
}
.composer-format-toggle:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.composer-attach-wrap { .composer-attach-wrap {
position: relative; position: relative;
flex: none; flex: none;
+42
View File
@@ -15,10 +15,13 @@ import { getUploadLimit } from '../api/uploads'
import { useCustomEmoji } from '../context/CustomEmojiContext' import { useCustomEmoji } from '../context/CustomEmojiContext'
import { EMOJI_SHORTCODES, SHORTCODE_BY_GLYPH } from '../lib/emojiShortcodes' import { EMOJI_SHORTCODES, SHORTCODE_BY_GLYPH } from '../lib/emojiShortcodes'
import { formatFileSize } from '../lib/fileSize' import { formatFileSize } from '../lib/fileSize'
import { getFormattingToolbarOpen, setFormattingToolbarOpen } from '../lib/formattingToolbarPref'
import { applyFormat, type FormatAction } from '../lib/markdownFormat'
import { getRecentEmoji, recordEmojiUsed } from '../lib/recentEmoji' import { getRecentEmoji, recordEmojiUsed } from '../lib/recentEmoji'
import type { MyRoomItem, RoomMember } from '../types' import type { MyRoomItem, RoomMember } from '../types'
import { EmojiPicker } from './EmojiPicker' import { EmojiPicker } from './EmojiPicker'
import { EmojiShortcodeAutocomplete, type EmojiShortcodeMatch } from './EmojiShortcodeAutocomplete' import { EmojiShortcodeAutocomplete, type EmojiShortcodeMatch } from './EmojiShortcodeAutocomplete'
import { FormattingToolbar } from './FormattingToolbar'
import { MentionAutocomplete } from './MentionAutocomplete' import { MentionAutocomplete } from './MentionAutocomplete'
import { RoomReferenceAutocomplete } from './RoomReferenceAutocomplete' import { RoomReferenceAutocomplete } from './RoomReferenceAutocomplete'
import './Composer.css' import './Composer.css'
@@ -136,6 +139,7 @@ export function Composer({ roomId, roomName, isDm, members, rooms, disabled, arc
const [emojiActiveIndex, setEmojiActiveIndex] = useState(0) const [emojiActiveIndex, setEmojiActiveIndex] = useState(0)
const [dragActive, setDragActive] = useState(false) const [dragActive, setDragActive] = useState(false)
const [attachMenuOpen, setAttachMenuOpen] = useState(false) const [attachMenuOpen, setAttachMenuOpen] = useState(false)
const [toolbarOpen, setToolbarOpen] = useState(getFormattingToolbarOpen)
const { byShortcode: customEmojiByShortcode } = useCustomEmoji() const { byShortcode: customEmojiByShortcode } = useCustomEmoji()
const textareaRef = useRef<HTMLTextAreaElement>(null) const textareaRef = useRef<HTMLTextAreaElement>(null)
const fileInputRef = useRef<HTMLInputElement>(null) const fileInputRef = useRef<HTMLInputElement>(null)
@@ -449,6 +453,29 @@ export function Composer({ roomId, roomName, isDm, members, rooms, disabled, arc
}) })
} }
function toggleToolbar() {
const next = !toolbarOpen
setToolbarOpen(next)
setFormattingToolbarOpen(next)
}
// #75: the toolbar only ever edits the textarea's plain markdown text --
// nothing about what gets sent changes.
function applyFormatAction(action: FormatAction) {
const el = textareaRef.current
if (!el) return
const result = applyFormat(
{ value, start: el.selectionStart ?? value.length, end: el.selectionEnd ?? value.length },
action,
)
setValue(result.value)
requestAnimationFrame(() => {
el.focus()
el.setSelectionRange(result.start, result.end)
autoGrow()
})
}
function insertEmoji(emoji: string) { function insertEmoji(emoji: string) {
const el = textareaRef.current const el = textareaRef.current
setEmojiPickerOpen(false) setEmojiPickerOpen(false)
@@ -517,6 +544,9 @@ export function Composer({ roomId, roomName, isDm, members, rooms, disabled, arc
</div> </div>
)} )}
{uploadError && <div className="composer-status composer-error">{uploadError}</div>} {uploadError && <div className="composer-status composer-error">{uploadError}</div>}
{toolbarOpen && (
<FormattingToolbar id="composer-formatting-toolbar" disabled={isDisabled} onAction={applyFormatAction} />
)}
<div className="composer-box"> <div className="composer-box">
<input <input
ref={photoInputRef} ref={photoInputRef}
@@ -589,6 +619,18 @@ export function Composer({ roomId, roomName, isDm, members, rooms, disabled, arc
/> />
)} )}
</div> </div>
<button
type="button"
className={`composer-format-toggle${toolbarOpen ? ' composer-format-toggle-open' : ''}`}
onClick={toggleToolbar}
disabled={isDisabled}
aria-label="Formatting options"
aria-expanded={toolbarOpen}
aria-controls="composer-formatting-toolbar"
title="Formatting options"
>
Aa
</button>
<div className="composer-textarea-wrap"> <div className="composer-textarea-wrap">
<textarea <textarea
ref={textareaRef} ref={textareaRef}
@@ -0,0 +1,99 @@
import { useState } from 'react'
import { deleteCustomEmoji } from '../api/customEmoji'
import { useAuth } from '../context/AuthContext'
import { useCustomEmoji } from '../context/CustomEmojiContext'
import type { CustomEmoji } from '../types'
import { CustomEmojiUploadModal } from './CustomEmojiUploadModal'
import { EmojiGlyph } from './MessageContent'
import './Modal.css'
interface CustomEmojiManageModalProps {
onClose: () => void
}
// Moved out of the reaction/composer emoji picker -- that grid packs items
// 9-to-a-row with a delete "x" overlapping the glyph itself, which on a
// touch screen is far too easy to hit by accident while just trying to
// react. A dedicated list with a normal-sized "Delete" button (plus the
// same confirm() every other destructive action in this app uses) needs a
// deliberate tap to actually delete something.
export function CustomEmojiManageModal({ onClose }: CustomEmojiManageModalProps) {
const { user } = useAuth()
const { list, refresh } = useCustomEmoji()
const [uploadOpen, setUploadOpen] = useState(false)
const [deletingId, setDeletingId] = useState<string | null>(null)
async function handleDelete(emoji: CustomEmoji) {
if (!confirm(`Delete :${emoji.shortcode}:? This can't be undone.`)) return
setDeletingId(emoji.id)
try {
await deleteCustomEmoji(emoji.id)
await refresh()
} finally {
setDeletingId(null)
}
}
return (
<div className="modal-scrim" onClick={onClose}>
<div className="modal" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2>Custom emoji</h2>
<button type="button" className="modal-close" onClick={onClose} aria-label="Close">
&times;
</button>
</div>
<div className="modal-field-label">Site emoji</div>
{list.length === 0 ? (
<p className="modal-empty">No custom emoji yet.</p>
) : (
list.map((emoji) => {
const canDelete = user?.id === emoji.uploaded_by || user?.is_site_admin
return (
<div key={emoji.id} className="modal-list-row">
<div className="modal-list-row-body">
<div className="modal-list-row-title">
<EmojiGlyph value={`:${emoji.shortcode}:`} /> :{emoji.shortcode}:
</div>
<div className="modal-list-row-sub">
Added {new Date(emoji.created_at).toLocaleDateString()}
</div>
</div>
{canDelete && (
<button
type="button"
className="modal-list-row-action"
disabled={deletingId === emoji.id}
onClick={() => handleDelete(emoji)}
>
{deletingId === emoji.id ? 'Deleting…' : 'Delete'}
</button>
)}
</div>
)
})
)}
<div className="modal-actions">
<button type="button" className="btn-secondary" onClick={onClose}>
Close
</button>
<button type="button" className="btn-primary" onClick={() => setUploadOpen(true)}>
Add emoji
</button>
</div>
</div>
{uploadOpen && (
<CustomEmojiUploadModal
onClose={() => setUploadOpen(false)}
onUploaded={() => {
refresh()
setUploadOpen(false)
}}
/>
)}
</div>
)
}
-46
View File
@@ -69,26 +69,6 @@
padding: 4px 4px 2px; padding: 4px 4px 2px;
} }
.emoji-picker-category-label-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.emoji-picker-add-custom {
background: transparent;
border: none;
color: var(--ds-accent);
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
padding: 2px 4px;
}
.emoji-picker-add-custom:hover {
text-decoration: underline;
}
.emoji-picker-grid { .emoji-picker-grid {
display: grid; display: grid;
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr);
@@ -109,32 +89,6 @@
background: var(--ds-surface-2); background: var(--ds-surface-2);
} }
.emoji-picker-item-custom {
position: relative;
}
.emoji-picker-item-remove {
position: absolute;
top: -2px;
right: -2px;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--ds-danger);
color: white;
font-size: 0.65rem;
line-height: 1;
opacity: 0;
cursor: pointer;
}
.emoji-picker-item-custom:hover .emoji-picker-item-remove {
opacity: 1;
}
/* The picker is positioned absolutely relative to its trigger button, which /* The picker is positioned absolutely relative to its trigger button, which
can sit close enough to a narrow viewport's edge that the full 320px can sit close enough to a narrow viewport's edge that the full 320px
width runs off-screen (e.g. the composer's emoji trigger, near the left width runs off-screen (e.g. the composer's emoji trigger, near the left
+18 -68
View File
@@ -1,12 +1,9 @@
import { useMemo, useState, type MouseEvent } from 'react' import { useMemo, useState } from 'react'
import { deleteCustomEmoji } from '../api/customEmoji'
import { useAuth } from '../context/AuthContext'
import { useCustomEmoji } from '../context/CustomEmojiContext' import { useCustomEmoji } from '../context/CustomEmojiContext'
import { useEscapeKey } from '../hooks/useEscapeKey' import { useEscapeKey } from '../hooks/useEscapeKey'
import { ALL_EMOJI, EMOJI_CATEGORIES } from '../lib/emoji' import { ALL_EMOJI, EMOJI_CATEGORIES } from '../lib/emoji'
import { EMOJI_NAMES } from '../lib/emojiNames' import { EMOJI_NAMES } from '../lib/emojiNames'
import { getRecentEmoji, recordEmojiUsed } from '../lib/recentEmoji' import { getRecentEmoji, recordEmojiUsed } from '../lib/recentEmoji'
import { CustomEmojiUploadModal } from './CustomEmojiUploadModal'
import { EmojiGlyph } from './MessageContent' import { EmojiGlyph } from './MessageContent'
import './EmojiPicker.css' import './EmojiPicker.css'
@@ -55,11 +52,8 @@ function searchEmoji(query: string, customShortcodes: string[]): string[] {
export function EmojiPicker({ onPick, onClose, placement = 'below', align = 'left' }: EmojiPickerProps) { export function EmojiPicker({ onPick, onClose, placement = 'below', align = 'left' }: EmojiPickerProps) {
useEscapeKey(onClose) useEscapeKey(onClose)
const { user } = useAuth() const { list: customEmoji } = useCustomEmoji()
const { list: customEmoji, refresh: refreshCustomEmoji } = useCustomEmoji()
const [query, setQuery] = useState('') const [query, setQuery] = useState('')
const [uploadOpen, setUploadOpen] = useState(false)
const [deletingId, setDeletingId] = useState<string | null>(null)
const customShortcodes = useMemo(() => customEmoji.map((e) => e.shortcode), [customEmoji]) const customShortcodes = useMemo(() => customEmoji.map((e) => e.shortcode), [customEmoji])
const searchResults = useMemo(() => searchEmoji(query, customShortcodes), [query, customShortcodes]) const searchResults = useMemo(() => searchEmoji(query, customShortcodes), [query, customShortcodes])
const searching = query.trim().length > 0 const searching = query.trim().length > 0
@@ -74,18 +68,6 @@ export function EmojiPicker({ onPick, onClose, placement = 'below', align = 'lef
onPick(emoji) onPick(emoji)
} }
async function handleDeleteCustomEmoji(e: MouseEvent, emojiId: string) {
// Delete, not pick -- must never bubble to the button's own onClick.
e.stopPropagation()
setDeletingId(emojiId)
try {
await deleteCustomEmoji(emojiId)
await refreshCustomEmoji()
} finally {
setDeletingId(null)
}
}
return ( return (
<> <>
<div className="emoji-picker-scrim" onClick={onClose} /> <div className="emoji-picker-scrim" onClick={onClose} />
@@ -122,48 +104,25 @@ export function EmojiPicker({ onPick, onClose, placement = 'below', align = 'lef
) )
) : ( ) : (
<> <>
<div className="emoji-picker-category"> {customEmoji.length > 0 && (
<div className="emoji-picker-category-label-row"> <div className="emoji-picker-category">
<div className="emoji-picker-category-label">Custom</div> <div className="emoji-picker-category-label">Custom</div>
<button
type="button"
className="emoji-picker-add-custom"
onClick={() => setUploadOpen(true)}
>
+ Add
</button>
</div>
{customEmoji.length > 0 && (
<div className="emoji-picker-grid"> <div className="emoji-picker-grid">
{customEmoji.map((e) => { {customEmoji.map((e) => (
const canDelete = user?.id === e.uploaded_by || user?.is_site_admin <button
return ( key={e.id}
<button type="button"
key={e.id} role="menuitem"
type="button" className="emoji-picker-item"
role="menuitem" title={`:${e.shortcode}:`}
className="emoji-picker-item emoji-picker-item-custom" onClick={() => pick(`:${e.shortcode}:`)}
title={`:${e.shortcode}:`} >
onClick={() => pick(`:${e.shortcode}:`)} <EmojiGlyph value={`:${e.shortcode}:`} />
> </button>
<EmojiGlyph value={`:${e.shortcode}:`} /> ))}
{canDelete && (
<span
role="button"
aria-label={`Remove :${e.shortcode}:`}
className="emoji-picker-item-remove"
onClick={(ev) => handleDeleteCustomEmoji(ev, e.id)}
style={deletingId === e.id ? { opacity: 0.5, pointerEvents: 'none' } : undefined}
>
×
</span>
)}
</button>
)
})}
</div> </div>
)} </div>
</div> )}
{recent.length > 0 && ( {recent.length > 0 && (
<div className="emoji-picker-category"> <div className="emoji-picker-category">
<div className="emoji-picker-category-label">Recently used</div> <div className="emoji-picker-category-label">Recently used</div>
@@ -205,15 +164,6 @@ export function EmojiPicker({ onPick, onClose, placement = 'below', align = 'lef
</> </>
)} )}
</div> </div>
{uploadOpen && (
<CustomEmojiUploadModal
onClose={() => setUploadOpen(false)}
onUploaded={() => {
refreshCustomEmoji()
setUploadOpen(false)
}}
/>
)}
</> </>
) )
} }
@@ -0,0 +1,41 @@
.formatting-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
/* Spacing, not divider lines, between groups -- a border on every group
after the first leaves a dangling line at the start of the second row
whenever the toolbar wraps on a narrow screen. */
gap: 2px 14px;
}
.formatting-toolbar-group {
display: flex;
gap: 2px;
}
.formatting-toolbar-btn {
min-width: 30px;
height: 30px;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 6px;
color: var(--ds-muted);
font-size: 0.82rem;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.formatting-toolbar-btn:hover:not(:disabled) {
background: var(--ds-surface-2);
color: var(--ds-text);
}
.formatting-toolbar-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@@ -0,0 +1,55 @@
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import type { FormatAction } from '../lib/markdownFormat'
import { FormattingToolbar } from './FormattingToolbar'
afterEach(cleanup)
const EXPECTED: [string, FormatAction][] = [
['Bold', { kind: 'inline', marker: '**' }],
['Italic', { kind: 'inline', marker: '*' }],
['Strikethrough', { kind: 'inline', marker: '~~' }],
['Inline code', { kind: 'inline', marker: '`' }],
['Code block', { kind: 'codeBlock' }],
['Link', { kind: 'link' }],
['Quote', { kind: 'prefix', prefix: 'quote' }],
['Bulleted list', { kind: 'prefix', prefix: 'bullet' }],
['Numbered list', { kind: 'prefix', prefix: 'ordered' }],
['Heading 1', { kind: 'heading', level: 1 }],
['Heading 2', { kind: 'heading', level: 2 }],
['Heading 3', { kind: 'heading', level: 3 }],
['Subscript', { kind: 'inline', marker: '~' }],
['Superscript', { kind: 'inline', marker: '^' }],
]
describe('FormattingToolbar', () => {
it.each(EXPECTED)('%s button calls onAction with its action', (label, action) => {
const onAction = vi.fn()
render(<FormattingToolbar id="t" onAction={onAction} />)
fireEvent.click(screen.getByRole('button', { name: label }))
expect(onAction).toHaveBeenCalledTimes(1)
expect(onAction).toHaveBeenCalledWith(action)
})
it('disables every button when disabled, but leaves the help link usable', () => {
render(<FormattingToolbar id="t" disabled onAction={vi.fn()} />)
const buttons = screen.getAllByRole('button') as HTMLButtonElement[]
expect(buttons).toHaveLength(EXPECTED.length)
expect(buttons.every((b) => b.disabled)).toBe(true)
expect(screen.getByRole('link', { name: 'Formatting help' })).toBeTruthy()
})
it('opens help in a new tab so the draft in the composer is not lost', () => {
render(<FormattingToolbar id="t" onAction={vi.fn()} />)
const help = screen.getByRole('link', { name: 'Formatting help' })
expect(help.getAttribute('href')).toBe('/help#formatting')
expect(help.getAttribute('target')).toBe('_blank')
expect(help.getAttribute('rel')).toContain('noopener')
})
it('keeps focus in the textarea by cancelling mousedown on buttons', () => {
render(<FormattingToolbar id="t" onAction={vi.fn()} />)
// fireEvent returns false when the event's default was prevented.
expect(fireEvent.mouseDown(screen.getByRole('button', { name: 'Bold' }))).toBe(false)
})
})
@@ -0,0 +1,104 @@
import type { ReactNode } from 'react'
import type { FormatAction, InlineMarker } from '../lib/markdownFormat'
import './FormattingToolbar.css'
interface FormattingToolbarProps {
id: string
disabled?: boolean
onAction: (action: FormatAction) => void
}
interface ToolbarButton {
label: string
// Shows the syntax the button inserts -- the toolbar doubles as the
// "quick guide" for people who'd rather learn to type it themselves.
title: string
content: ReactNode
action: FormatAction
}
const inline = (marker: InlineMarker): FormatAction => ({ kind: 'inline', marker })
const GROUPS: ToolbarButton[][] = [
[
{ label: 'Bold', title: 'Bold: **text**', content: <b>B</b>, action: inline('**') },
{ label: 'Italic', title: 'Italic: *text*', content: <i>I</i>, action: inline('*') },
{ label: 'Strikethrough', title: 'Strikethrough: ~~text~~', content: <s>S</s>, action: inline('~~') },
],
[
{ label: 'Inline code', title: 'Inline code: `code`', content: '</>', action: inline('`') },
{ label: 'Code block', title: 'Code block: ``` on its own lines', content: '{ }', action: { kind: 'codeBlock' } },
],
[
{
label: 'Link',
title: 'Link: [text](url)',
content: (
<svg width="15" height="15" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path
d="M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-.9.9M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l.9-.9"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
action: { kind: 'link' },
},
{ label: 'Quote', title: 'Quote: > text', content: '“', action: { kind: 'prefix', prefix: 'quote' } },
],
[
{ label: 'Bulleted list', title: 'Bulleted list: - item', content: '•', action: { kind: 'prefix', prefix: 'bullet' } },
{ label: 'Numbered list', title: 'Numbered list: 1. item', content: '1.', action: { kind: 'prefix', prefix: 'ordered' } },
],
[
{ label: 'Heading 1', title: 'Heading 1: # text', content: 'H1', action: { kind: 'heading', level: 1 } },
{ label: 'Heading 2', title: 'Heading 2: ## text', content: 'H2', action: { kind: 'heading', level: 2 } },
{ label: 'Heading 3', title: 'Heading 3: ### text', content: 'H3', action: { kind: 'heading', level: 3 } },
],
[
{ label: 'Subscript', title: 'Subscript: ~text~ (no spaces)', content: 'x₂', action: inline('~') },
{ label: 'Superscript', title: 'Superscript: ^text^ (no spaces)', content: 'x²', action: inline('^') },
],
]
export function FormattingToolbar({ id, disabled, onAction }: FormattingToolbarProps) {
return (
<div id={id} className="formatting-toolbar" role="toolbar" aria-label="Formatting">
{GROUPS.map((group) => (
<div key={group[0].label} className="formatting-toolbar-group">
{group.map((button) => (
<button
key={button.label}
type="button"
className="formatting-toolbar-btn"
title={button.title}
aria-label={button.label}
disabled={disabled}
// Keeps focus (and the selection) in the textarea -- a click
// on a button would otherwise blur it, and on mobile dismiss
// the keyboard.
onMouseDown={(e) => e.preventDefault()}
onClick={() => onAction(button.action)}
>
{button.content}
</button>
))}
</div>
))}
{/* A new tab on purpose: the draft lives in Composer's own state, so
navigating this one away would lose it. */}
<a
className="formatting-toolbar-btn formatting-toolbar-help"
href="/help#formatting"
target="_blank"
rel="noopener noreferrer"
title="Formatting help (opens in a new tab)"
aria-label="Formatting help"
>
?
</a>
</div>
)
}
+18 -3
View File
@@ -4,10 +4,25 @@
own font-size and this just tracks it. Kept in this file (imported own font-size and this just tracks it. Kept in this file (imported
directly by MessageContent.tsx) rather than MessageList.css so it's directly by MessageContent.tsx) rather than MessageList.css so it's
loaded wherever MessageContent renders -- FilePreviewModal and HelpPage loaded wherever MessageContent renders -- FilePreviewModal and HelpPage
included, not just the message list. */ included, not just the message list.
#71: also multiplied by --emoji-scale, the manual "make emoji bigger"
preference -- but that variable is only ever set on MessageContent's own
wrapper div (inline style, scoped to that element and its descendants),
never at :root, so var(..., 1) correctly falls back to a no-op multiplier
everywhere else this class is reused (the picker's grid, reaction pills)
instead of also inflating those and breaking their fixed-size layout. */
.message-custom-emoji { .message-custom-emoji {
height: 1.2em; height: calc(1.2em * var(--emoji-scale, 1));
width: 1.2em; width: calc(1.2em * var(--emoji-scale, 1));
object-fit: contain; object-fit: contain;
vertical-align: -0.25em; vertical-align: -0.25em;
} }
/* #71: a raw unicode emoji wrapped by wrapEmojiGlyphs -- same --emoji-scale
multiplier as the custom-emoji image above, so "make emoji bigger"
applies uniformly regardless of which kind of emoji it is. */
.inline-emoji {
display: inline-block;
font-size: calc(1em * var(--emoji-scale, 1));
}
+73 -7
View File
@@ -1,7 +1,8 @@
import Markdown from 'markdown-to-jsx' import Markdown from 'markdown-to-jsx'
import type { ReactNode } from 'react' import type { CSSProperties, ReactNode } from 'react'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { getCustomEmojiUrl } from '../api/customEmoji' import { getCustomEmojiUrl } from '../api/customEmoji'
import { useAuth } from '../context/AuthContext'
import { useCustomEmoji } from '../context/CustomEmojiContext' import { useCustomEmoji } from '../context/CustomEmojiContext'
import { EMOJI_SHORTCODES } from '../lib/emojiShortcodes' import { EMOJI_SHORTCODES } from '../lib/emojiShortcodes'
import './MessageContent.css' import './MessageContent.css'
@@ -85,6 +86,14 @@ function MarkdownLink({ href, children }: MarkdownLinkProps) {
/> />
) )
} }
// #71: a raw unicode emoji has no element of its own to size independently
// of the surrounding text -- it's just characters in a string. Wrapping
// each one individually (see wrapEmojiGlyphs below) gives it one, purely
// so the emoji-size preference can scale it via CSS the same way it
// already scales a custom emoji's <img>.
if (href === 'glyph:') {
return <span className="inline-emoji">{children}</span>
}
return ( return (
<a href={href} target="_blank" rel="noopener noreferrer"> <a href={href} target="_blank" rel="noopener noreferrer">
{children} {children}
@@ -247,7 +256,12 @@ export function EmojiGlyph({ value }: EmojiGlyphProps) {
/> />
) )
} }
return <>{value}</> // Wrapped the same way wrapEmojiGlyphs wraps a raw emoji in message text
// (see .inline-emoji), so a --emoji-scale set on an ancestor (the
// reaction pill's own span in MessageList.tsx) scales this the same way
// it scales the .message-custom-emoji img above -- and falls back to a
// no-op 1x everywhere else (the picker) with no --emoji-scale set at all.
return <span className="inline-emoji">{value}</span>
} }
const MENTION_PATTERN = /@([a-zA-Z0-9_.-]+)/g const MENTION_PATTERN = /@([a-zA-Z0-9_.-]+)/g
@@ -370,14 +384,66 @@ export function preprocessMarkdown(text: string): { text: string; headingIds: Ma
return extractHeadingIds(convertSubSuperscript(text)) return extractHeadingIds(convertSubSuperscript(text))
} }
// #71: gives every individual unicode emoji its own element (see
// MarkdownLink's `glyph:` branch) purely so the emoji-size preference can
// scale it independently of the surrounding text -- a raw emoji is just
// characters in a string otherwise, with nothing CSS can address on its
// own. Runs after convertShortcodes so a built-in `:name:` that just
// became a glyph is wrapped too ("all emoji", not just ones typed as
// literal unicode); same fence/code-span skip convention as every other
// converter here.
const EMOJI_GLYPH_PATTERN = /\p{Extended_Pictographic}(?:\p{Emoji_Modifier}|\u200D\p{Extended_Pictographic}|\uFE0F)*/gu
function wrapEmojiGlyphs(text: string): string {
const lines = text.split('\n')
let inFence = false
return lines
.map((line) => {
if (/^\s*```/.test(line)) {
inFence = !inFence
return line
}
if (inFence) return line
return line
.split(/(`+[^`]*`+)/g)
.map((part, i) => (i % 2 === 0 ? part.replace(EMOJI_GLYPH_PATTERN, (match) => `[${match}](glyph:)`) : part))
.join('')
})
.join('\n')
}
// Exported so MessageList's reaction pills can apply the same viewer
// preference to their own EmojiGlyph -- reactions render outside the
// markdown pipeline entirely (see EmojiGlyph's own comment above), so they
// need this looked up independently rather than inheriting --emoji-scale
// from this component's wrapper div.
export const EMOJI_SCALE_MULTIPLIER: Record<string, number> = {
small: 0.8,
normal: 1,
large: 1.5,
xlarge: 2,
}
export function MessageContent({ content, memberUsernames, myRooms }: MessageContentProps) { export function MessageContent({ content, memberUsernames, myRooms }: MessageContentProps) {
const { user } = useAuth()
const { byShortcode } = useCustomEmoji() const { byShortcode } = useCustomEmoji()
const customShortcodes = new Set(byShortcode.keys())
const withMentions = memberUsernames ? highlightMentions(content, memberUsernames) : content const withMentions = memberUsernames ? highlightMentions(content, memberUsernames) : content
const withRoomRefs = myRooms ? highlightRoomReferences(withMentions, myRooms) : withMentions const withRoomRefs = myRooms ? highlightRoomReferences(withMentions, myRooms) : withMentions
const withCustomEmoji = convertCustomEmojiShortcodes( const withCustomEmoji = convertCustomEmojiShortcodes(convertShortcodes(withRoomRefs), customShortcodes)
convertShortcodes(withRoomRefs), const withEmojiGlyphs = wrapEmojiGlyphs(withCustomEmoji)
new Set(byShortcode.keys()), const { text, headingIds } = preprocessMarkdown(withEmojiGlyphs)
// #71: scoped to this element (not a :root-level variable) so it only
// ever affects emoji rendered in message text -- not the same
// .message-custom-emoji/EmojiGlyph markup reused by the emoji picker's
// grid, where a bigger image would just break its fixed-size layout
// instead of doing anything useful. Reaction pills DO scale too, but via
// their own inline --emoji-scale in MessageList.tsx, not by inheriting
// this one -- a pill isn't a descendant of this wrapper div.
const emojiScale = EMOJI_SCALE_MULTIPLIER[user?.emoji_scale ?? 'normal']
return (
<div style={{ '--emoji-scale': emojiScale } as CSSProperties}>
<Markdown options={createMarkdownOptions(headingIds)}>{preserveLineBreaks(text)}</Markdown>
</div>
) )
const { text, headingIds } = preprocessMarkdown(withCustomEmoji)
return <Markdown options={createMarkdownOptions(headingIds)}>{preserveLineBreaks(text)}</Markdown>
} }
+15 -5
View File
@@ -40,12 +40,17 @@
} }
.message-author { .message-author {
/* Lets a very long display name shrink/wrap instead of pushing the
(now longer, e.g. "Yesterday 4:04 PM") timestamp out of the row. */
min-width: 0;
font-size: 0.86rem; font-size: 0.86rem;
font-weight: 700; font-weight: 700;
color: var(--ds-text); color: var(--ds-text);
} }
.message-time { .message-time {
flex: none;
white-space: nowrap;
font-size: 0.68rem; font-size: 0.68rem;
color: var(--ds-muted); color: var(--ds-muted);
font-family: var(--mono); font-family: var(--mono);
@@ -53,8 +58,13 @@
.message-image { .message-image {
display: block; display: block;
max-width: min(320px, 100%); /* #71: rem, not px -- scales with the text-size setting (see
max-height: 240px; lib/theme.ts's applyTextScale), same as every other size in this app.
min(...) still caps against the viewport in absolute px, since a
percentage-of-viewport constraint isn't something a root font-size
change should affect. */
max-width: min(20rem, 100%);
max-height: 15rem;
object-fit: contain; object-fit: contain;
border-radius: var(--radius); border-radius: var(--radius);
border: 1px solid var(--ds-border); border: 1px solid var(--ds-border);
@@ -65,14 +75,14 @@
.message-video-wrap { .message-video-wrap {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: min(320px, 100%); max-width: min(20rem, 100%);
margin-bottom: 4px; margin-bottom: 4px;
} }
.message-video { .message-video {
display: block; display: block;
width: 100%; width: 100%;
max-height: 240px; max-height: 15rem;
border-radius: var(--radius); border-radius: var(--radius);
border: 1px solid var(--ds-border); border: 1px solid var(--ds-border);
background: var(--ds-void); background: var(--ds-void);
@@ -111,7 +121,7 @@
margin-bottom: 4px; margin-bottom: 4px;
color: var(--ds-text); color: var(--ds-text);
text-decoration: none; text-decoration: none;
max-width: min(320px, 100%); max-width: min(20rem, 100%);
} }
.message-file-attachment:hover { .message-file-attachment:hover {
+22 -10
View File
@@ -1,14 +1,17 @@
import type { CSSProperties } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react' import { useEffect, useMemo, useRef, useState } from 'react'
import { getRoomFileUrl, getRoomImageUrl } from '../api/rooms' import { getRoomFileUrl, getRoomImageUrl } from '../api/rooms'
import { useAuth } from '../context/AuthContext' import { useAuth } from '../context/AuthContext'
import { useLocalDay } from '../hooks/useLocalDay'
import { formatFileSize } from '../lib/fileSize' import { formatFileSize } from '../lib/fileSize'
import { avatarUrlFor, displayNameFor, senderColorIndex, statusFor } from '../lib/messageGrouping' import { formatMessageTime, formatMessageTimeTitle } from '../lib/formatMessageTime'
import { avatarUrlFor, displayNameFor, isGroupStart, senderColorIndex, statusFor } from '../lib/messageGrouping'
import type { ChatMessageEnvelope, Message, MessageFileInfo, RoomMember } from '../types' import type { ChatMessageEnvelope, Message, MessageFileInfo, RoomMember } from '../types'
import { EMOJI_PICKER_MAX_HEIGHT, EmojiPicker } from './EmojiPicker' import { EMOJI_PICKER_MAX_HEIGHT, EmojiPicker } from './EmojiPicker'
import { FilePreviewModal, getPreviewKind } from './FilePreviewModal' import { FilePreviewModal, getPreviewKind } from './FilePreviewModal'
import { ImageLightbox } from './ImageLightbox' import { ImageLightbox } from './ImageLightbox'
import { LinkPreviewCard } from './LinkPreviewCard' import { LinkPreviewCard } from './LinkPreviewCard'
import { EmojiGlyph, MessageContent } from './MessageContent' import { EMOJI_SCALE_MULTIPLIER, EmojiGlyph, MessageContent } from './MessageContent'
import { UserAvatar } from './UserAvatar' import { UserAvatar } from './UserAvatar'
import { VideoLightbox } from './VideoLightbox' import { VideoLightbox } from './VideoLightbox'
import './MessageList.css' import './MessageList.css'
@@ -126,6 +129,11 @@ export function MessageList({
onDelete, onDelete,
}: MessageListProps) { }: MessageListProps) {
const { user } = useAuth() const { user } = useAuth()
const now = useLocalDay()
// #71: same viewer preference MessageContent applies to in-text emoji,
// looked up separately here since a reaction pill isn't a descendant of
// that component's wrapper div (see EmojiGlyph's own comment).
const emojiScale = EMOJI_SCALE_MULTIPLIER[user?.emoji_scale ?? 'normal']
const containerRef = useRef<HTMLDivElement>(null) const containerRef = useRef<HTMLDivElement>(null)
const bottomRef = useRef<HTMLDivElement>(null) const bottomRef = useRef<HTMLDivElement>(null)
// Whether the view should be pinned to the latest message -- true right // Whether the view should be pinned to the latest message -- true right
@@ -205,15 +213,16 @@ export function MessageList({
// Mattermost-style grouping: every message shows who sent it, but // Mattermost-style grouping: every message shows who sent it, but
// consecutive messages from the same sender only repeat the // consecutive messages from the same sender only repeat the
// avatar/name/timestamp header on the first one in the run -- // avatar/name/timestamp header on the first one in the run --
// applies uniformly, including to your own messages. // applies uniformly, including to your own messages. Also breaks on
const isGroupStart = !prev || prev.user_id !== msg.user_id // a long gap or a new calendar day -- see isGroupStart.
const groupStart = isGroupStart(prev, msg)
const editing = editingId === msg.id const editing = editingId === msg.id
const deleted = !!msg.deleted_at const deleted = !!msg.deleted_at
return ( return (
<div key={msg.id} className={`message-row${isGroupStart ? ' message-row-start' : ''}`}> <div key={msg.id} className={`message-row${groupStart ? ' message-row-start' : ''}`}>
<div className="message-avatar-slot"> <div className="message-avatar-slot">
{isGroupStart && ( {groupStart && (
<UserAvatar <UserAvatar
username={msg.username} username={msg.username}
colorIndex={senderColorIndex(msg.username, members)} colorIndex={senderColorIndex(msg.username, members)}
@@ -223,11 +232,11 @@ export function MessageList({
)} )}
</div> </div>
<div className="message-content"> <div className="message-content">
{isGroupStart && ( {groupStart && (
<div className="message-header"> <div className="message-header">
<span className="message-author">{displayNameFor(msg.username, members)}</span> <span className="message-author">{displayNameFor(msg.username, members)}</span>
<span className="message-time"> <span className="message-time" title={formatMessageTimeTitle(msg.created_at)}>
{new Date(msg.created_at).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })} {formatMessageTime(msg.created_at, now)}
</span> </span>
</div> </div>
)} )}
@@ -302,7 +311,10 @@ export function MessageList({
title={r.user_ids.map(displayNameForUserId).join(', ')} title={r.user_ids.map(displayNameForUserId).join(', ')}
onClick={() => onReact(msg.id, r.emoji)} onClick={() => onReact(msg.id, r.emoji)}
> >
<span> {/* No .inline-emoji here -- EmojiGlyph's own fallback branch
already applies it, and stacking it here too would double
the font-size multiplication for a custom-emoji img. */}
<span style={{ '--emoji-scale': emojiScale } as CSSProperties}>
<EmojiGlyph value={r.emoji} /> <EmojiGlyph value={r.emoji} />
</span> </span>
<span>{r.count}</span> <span>{r.count}</span>
+39
View File
@@ -230,6 +230,45 @@
color: var(--ds-muted); color: var(--ds-muted);
} }
.text-scale-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-2);
margin-bottom: var(--sp-4);
}
.text-scale-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
border-radius: var(--radius);
padding: 10px 4px;
cursor: pointer;
}
.text-scale-option:hover {
border-color: var(--ds-accent);
}
.text-scale-option-selected {
border-color: var(--ds-accent);
box-shadow: 0 0 0 1px var(--ds-accent);
}
.text-scale-option-preview {
font-weight: 700;
color: var(--ds-text);
line-height: 1;
}
.text-scale-option-label {
font-size: 0.7rem;
color: var(--ds-muted);
}
.theme-swatch-preview-new { .theme-swatch-preview-new {
background: transparent; background: transparent;
border-style: dashed; border-style: dashed;
+94 -2
View File
@@ -5,7 +5,9 @@ import {
me, me,
removeAvatar, removeAvatar,
revokeSession, revokeSession,
updateEmojiScale,
updateProfile, updateProfile,
updateTextScale,
updateTheme, updateTheme,
uploadAvatar, uploadAvatar,
} from '../api/auth' } from '../api/auth'
@@ -20,8 +22,8 @@ import {
import { getUserAvatarUrl } from '../api/users' import { getUserAvatarUrl } from '../api/users'
import { useAuth } from '../context/AuthContext' import { useAuth } from '../context/AuthContext'
import { hashIndex } from '../lib/avatar' import { hashIndex } from '../lib/avatar'
import { applyTheme, DEFAULT_CUSTOM_COLORS } from '../lib/theme' import { applyTextScale, applyTheme, DEFAULT_CUSTOM_COLORS } from '../lib/theme'
import type { CustomTheme, CustomThemeColors, UserSession } from '../types' import type { CustomTheme, CustomThemeColors, EmojiScale, TextScale, UserSession } from '../types'
import { ThemeBuilderModal } from './ThemeBuilderModal' import { ThemeBuilderModal } from './ThemeBuilderModal'
import { UserAvatar } from './UserAvatar' import { UserAvatar } from './UserAvatar'
import './Modal.css' import './Modal.css'
@@ -33,6 +35,26 @@ const THEME_OPTIONS: { name: 'dark' | 'light' | 'midnight' | 'sunset'; label: st
{ name: 'sunset', label: 'Sunset' }, { name: 'sunset', label: 'Sunset' },
] ]
// #71: the "Aa" preview scales with each option's own size, the standard
// way a text-size picker shows what it does without a separate demo area.
const TEXT_SCALE_OPTIONS: { name: TextScale; label: string; previewSize: string }[] = [
{ name: 'small', label: 'Small', previewSize: '0.8rem' },
{ name: 'normal', label: 'Normal', previewSize: '1rem' },
{ name: 'large', label: 'Large', previewSize: '1.25rem' },
{ name: 'xlarge', label: 'Extra large', previewSize: '1.5rem' },
]
// #71: independent of text size -- only scales emoji rendered in message
// text (see MessageContent.tsx's --emoji-scale). The preview uses an
// actual emoji so it demonstrates itself the same way the text-size
// options do with "Aa".
const EMOJI_SCALE_OPTIONS: { name: EmojiScale; label: string; previewSize: string }[] = [
{ name: 'small', label: 'Small', previewSize: '1rem' },
{ name: 'normal', label: 'Normal', previewSize: '1.25rem' },
{ name: 'large', label: 'Large', previewSize: '1.6rem' },
{ name: 'xlarge', label: 'Extra large', previewSize: '2rem' },
]
const CUSTOM_COLOR_FIELDS: { key: keyof Omit<CustomThemeColors, 'color_scheme'>; label: string }[] = [ const CUSTOM_COLOR_FIELDS: { key: keyof Omit<CustomThemeColors, 'color_scheme'>; label: string }[] = [
{ key: 'void', label: 'Background' }, { key: 'void', label: 'Background' },
{ key: 'void_2', label: 'Sidebar background' }, { key: 'void_2', label: 'Sidebar background' },
@@ -60,6 +82,8 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
const [uploadingAvatar, setUploadingAvatar] = useState(false) const [uploadingAvatar, setUploadingAvatar] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null) const fileInputRef = useRef<HTMLInputElement>(null)
const [themeError, setThemeError] = useState<string | null>(null) const [themeError, setThemeError] = useState<string | null>(null)
const [textScaleError, setTextScaleError] = useState<string | null>(null)
const [emojiScaleError, setEmojiScaleError] = useState<string | null>(null)
const [customThemes, setCustomThemes] = useState<CustomTheme[]>([]) const [customThemes, setCustomThemes] = useState<CustomTheme[]>([])
const [editingThemeId, setEditingThemeId] = useState<string | null>(null) const [editingThemeId, setEditingThemeId] = useState<string | null>(null)
@@ -150,6 +174,32 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
} }
} }
async function handleSelectTextScale(scale: TextScale) {
// Same instant-apply-then-persist pattern as handleSelectPreset above.
applyTextScale(scale)
setTextScaleError(null)
try {
const updated = await updateTextScale(scale)
updateUser(updated)
} catch (err) {
applyTextScale(user?.text_scale ?? null)
setTextScaleError(err instanceof ApiError ? err.message : String(err))
}
}
async function handleSelectEmojiScale(scale: EmojiScale) {
// No instant-apply DOM mutation here (unlike theme/text scale) -- it's
// just a value MessageContent reads from `user` on its next render, so
// persisting and updating that is the whole job.
setEmojiScaleError(null)
try {
const updated = await updateEmojiScale(scale)
updateUser(updated)
} catch (err) {
setEmojiScaleError(err instanceof ApiError ? err.message : String(err))
}
}
async function handleActivateCustomTheme(theme: CustomTheme) { async function handleActivateCustomTheme(theme: CustomTheme) {
applyTheme('custom', theme.colors) applyTheme('custom', theme.colors)
setThemeError(null) setThemeError(null)
@@ -360,6 +410,48 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
</div> </div>
{themeError && <p className="modal-error">{themeError}</p>} {themeError && <p className="modal-error">{themeError}</p>}
<div className="modal-field-label">Text size</div>
<div className="text-scale-options">
{TEXT_SCALE_OPTIONS.map((option) => (
<button
key={option.name}
type="button"
className={`text-scale-option${
(user.text_scale ?? 'normal') === option.name ? ' text-scale-option-selected' : ''
}`}
onClick={() => handleSelectTextScale(option.name)}
aria-pressed={(user.text_scale ?? 'normal') === option.name}
>
<span className="text-scale-option-preview" style={{ fontSize: option.previewSize }}>
Aa
</span>
<span className="text-scale-option-label">{option.label}</span>
</button>
))}
</div>
{textScaleError && <p className="modal-error">{textScaleError}</p>}
<div className="modal-field-label">Emoji size</div>
<div className="text-scale-options">
{EMOJI_SCALE_OPTIONS.map((option) => (
<button
key={option.name}
type="button"
className={`text-scale-option${
(user.emoji_scale ?? 'normal') === option.name ? ' text-scale-option-selected' : ''
}`}
onClick={() => handleSelectEmojiScale(option.name)}
aria-pressed={(user.emoji_scale ?? 'normal') === option.name}
>
<span className="text-scale-option-preview" style={{ fontSize: option.previewSize }}>
🎉
</span>
<span className="text-scale-option-label">{option.label}</span>
</button>
))}
</div>
{emojiScaleError && <p className="modal-error">{emojiScaleError}</p>}
<div className="modal-field-label">My custom themes</div> <div className="modal-field-label">My custom themes</div>
<div className="theme-swatch-grid"> <div className="theme-swatch-grid">
{customThemes.map((theme) => { {customThemes.map((theme) => {
+13
View File
@@ -13,6 +13,7 @@ import {
} from '../lib/desktopBridge' } from '../lib/desktopBridge'
import { getPushSubscriptionStatus, isPushSupported, subscribeToPush, unsubscribeFromPush } from '../lib/push' import { getPushSubscriptionStatus, isPushSupported, subscribeToPush, unsubscribeFromPush } from '../lib/push'
import { AboutModal } from './AboutModal' import { AboutModal } from './AboutModal'
import { CustomEmojiManageModal } from './CustomEmojiManageModal'
import { ProfileModal } from './ProfileModal' import { ProfileModal } from './ProfileModal'
import { UserAvatar } from './UserAvatar' import { UserAvatar } from './UserAvatar'
import './TopBar.css' import './TopBar.css'
@@ -28,6 +29,7 @@ export function TopBar() {
const navigate = useNavigate() const navigate = useNavigate()
const [menuOpen, setMenuOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false)
const [profileModalOpen, setProfileModalOpen] = useState(false) const [profileModalOpen, setProfileModalOpen] = useState(false)
const [customEmojiModalOpen, setCustomEmojiModalOpen] = useState(false)
const [aboutModalOpen, setAboutModalOpen] = useState(false) const [aboutModalOpen, setAboutModalOpen] = useState(false)
const [pushSubscribed, setPushSubscribed] = useState(false) const [pushSubscribed, setPushSubscribed] = useState(false)
const [pushBusy, setPushBusy] = useState(false) const [pushBusy, setPushBusy] = useState(false)
@@ -124,6 +126,16 @@ export function TopBar() {
> >
Profile settings Profile settings
</button> </button>
<button
type="button"
role="menuitem"
onClick={() => {
setMenuOpen(false)
setCustomEmojiModalOpen(true)
}}
>
Custom emoji
</button>
<button <button
type="button" type="button"
role="menuitem" role="menuitem"
@@ -190,6 +202,7 @@ export function TopBar() {
)} )}
</div> </div>
{profileModalOpen && <ProfileModal onClose={() => setProfileModalOpen(false)} />} {profileModalOpen && <ProfileModal onClose={() => setProfileModalOpen(false)} />}
{customEmojiModalOpen && <CustomEmojiManageModal onClose={() => setCustomEmojiModalOpen(false)} />}
{aboutModalOpen && <AboutModal onClose={() => setAboutModalOpen(false)} />} {aboutModalOpen && <AboutModal onClose={() => setAboutModalOpen(false)} />}
</header> </header>
) )
+5 -1
View File
@@ -3,7 +3,7 @@ import * as authApi from '../api/auth'
import { ApiError, NetworkError } from '../api/client' import { ApiError, NetworkError } from '../api/client'
import { clearLastUser, loadLastUser, saveLastUser } from '../lib/lastUser' import { clearLastUser, loadLastUser, saveLastUser } from '../lib/lastUser'
import { unsubscribeFromPush } from '../lib/push' import { unsubscribeFromPush } from '../lib/push'
import { applyTheme } from '../lib/theme' import { applyTextScale, applyTheme } from '../lib/theme'
import type { User } from '../types' import type { User } from '../types'
interface AuthContextValue { interface AuthContextValue {
@@ -26,6 +26,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
applyTheme(user?.theme ?? null, user?.active_custom_theme?.colors ?? null) applyTheme(user?.theme ?? null, user?.active_custom_theme?.colors ?? null)
}, [user?.theme, user?.active_custom_theme]) }, [user?.theme, user?.active_custom_theme])
useEffect(() => {
applyTextScale(user?.text_scale ?? null)
}, [user?.text_scale])
useEffect(() => { useEffect(() => {
authApi authApi
.me() .me()
@@ -0,0 +1,68 @@
import { renderHook } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import * as desktopBridge from '../lib/desktopBridge'
import { useDesktopRoomBridge } from './useDesktopRoomBridge'
describe('useDesktopRoomBridge', () => {
beforeEach(() => {
vi.spyOn(desktopBridge, 'notifyRoomOpened')
vi.spyOn(desktopBridge, 'notifyUnreadCount')
})
afterEach(() => {
vi.restoreAllMocks()
})
it('calls roomOpened once when entering a room', () => {
renderHook(({ roomId, count }) => useDesktopRoomBridge(roomId, count), {
initialProps: { roomId: 'room-1', count: 0 },
})
expect(desktopBridge.notifyRoomOpened).toHaveBeenCalledTimes(1)
})
it('does not call roomOpened again on a rerender with the same roomId', () => {
const { rerender } = renderHook(({ roomId, count }) => useDesktopRoomBridge(roomId, count), {
initialProps: { roomId: 'room-1', count: 0 },
})
expect(desktopBridge.notifyRoomOpened).toHaveBeenCalledTimes(1)
// Unrelated rerender -- unreadRoomCount changed, roomId did not.
rerender({ roomId: 'room-1', count: 3 })
rerender({ roomId: 'room-1', count: 3 })
expect(desktopBridge.notifyRoomOpened).toHaveBeenCalledTimes(1)
})
it('calls roomOpened again on a genuine transition to a different room', () => {
const { rerender } = renderHook(({ roomId, count }) => useDesktopRoomBridge(roomId, count), {
initialProps: { roomId: 'room-1', count: 0 },
})
rerender({ roomId: 'room-2', count: 0 })
expect(desktopBridge.notifyRoomOpened).toHaveBeenCalledTimes(2)
})
it('does not call roomOpened when there is no room id', () => {
renderHook(({ roomId, count }) => useDesktopRoomBridge(roomId, count), {
initialProps: { roomId: undefined as string | undefined, count: 0 },
})
expect(desktopBridge.notifyRoomOpened).not.toHaveBeenCalled()
})
it('sends the unread count whenever it changes, independent of roomOpened', () => {
const { rerender } = renderHook(({ roomId, count }) => useDesktopRoomBridge(roomId, count), {
initialProps: { roomId: undefined as string | undefined, count: 0 },
})
expect(desktopBridge.notifyUnreadCount).toHaveBeenCalledWith(0)
rerender({ roomId: undefined, count: 2 })
expect(desktopBridge.notifyUnreadCount).toHaveBeenCalledWith(2)
expect(desktopBridge.notifyRoomOpened).not.toHaveBeenCalled()
})
})
describe('desktop bridge functions with no window.dsDesktop', () => {
it('remain optional -- calling them does not throw when the bridge is absent', () => {
expect(window.dsDesktop).toBeUndefined()
expect(() => desktopBridge.notifyRoomOpened()).not.toThrow()
expect(() => desktopBridge.notifyUnreadCount(5)).not.toThrow()
})
})
@@ -0,0 +1,26 @@
import { useEffect } from 'react'
import { notifyRoomOpened, notifyUnreadCount } from '../lib/desktopBridge'
// Tells the Electron desktop wrapper (a) when the user has genuinely
// entered a room, so it can clear that room's tray indicator, and (b) the
// current unread-room count, so the tray badge stays accurate. Both are
// no-ops in every browser build (see desktopBridge.ts).
//
// roomOpened must fire only on a genuine transition to a real room id --
// never merely because the window was shown, focused, restored, or opened
// from the tray, and never when no room is open at all. Depending on just
// the id (a primitive, not the room object) is what makes this safe to
// call from a component that rerenders often: an unrelated rerender that
// leaves activeRoomId unchanged doesn't rerun the effect, so there's no
// separate de-duplication to get wrong here -- it falls out of React's own
// effect-dependency comparison.
export function useDesktopRoomBridge(activeRoomId: string | undefined, unreadRoomCount: number): void {
useEffect(() => {
if (!activeRoomId) return
notifyRoomOpened()
}, [activeRoomId])
useEffect(() => {
notifyUnreadCount(unreadRoomCount)
}, [unreadRoomCount])
}
+67
View File
@@ -0,0 +1,67 @@
import { act, renderHook } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { useLocalDay } from './useLocalDay'
function setVisibility(state: 'visible' | 'hidden') {
Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => state })
}
describe('useLocalDay', () => {
beforeEach(() => {
vi.useFakeTimers()
setVisibility('visible')
})
afterEach(() => {
vi.useRealTimers()
// Remove the own-property override so jsdom's real getter shows through again.
delete (document as unknown as Record<string, unknown>).visibilityState
})
it('rolls over to the next day when local midnight passes', () => {
vi.setSystemTime(new Date(2026, 9, 9, 23, 59, 30))
const { result } = renderHook(() => useLocalDay())
expect(result.current.getDate()).toBe(9)
act(() => {
vi.advanceTimersByTime(60_000)
})
expect(result.current.getDate()).toBe(10)
})
it('refreshes when the tab becomes visible after the clock moved a day (e.g. a sleeping laptop)', () => {
vi.setSystemTime(new Date(2026, 9, 9, 12, 0))
const { result } = renderHook(() => useLocalDay())
// The clock jumps without any timer firing in between.
vi.setSystemTime(new Date(2026, 9, 10, 12, 0))
act(() => {
document.dispatchEvent(new Event('visibilitychange'))
})
expect(result.current.getDate()).toBe(10)
})
it('keeps the same value (no rerender) when visibility changes on the same day', () => {
vi.setSystemTime(new Date(2026, 9, 9, 12, 0))
const { result } = renderHook(() => useLocalDay())
const first = result.current
vi.setSystemTime(new Date(2026, 9, 9, 18, 0))
act(() => {
document.dispatchEvent(new Event('visibilitychange'))
})
expect(result.current).toBe(first)
})
it('ignores visibility changes while the tab is hidden', () => {
vi.setSystemTime(new Date(2026, 9, 9, 12, 0))
const { result } = renderHook(() => useLocalDay())
setVisibility('hidden')
vi.setSystemTime(new Date(2026, 9, 10, 12, 0))
act(() => {
document.dispatchEvent(new Event('visibilitychange'))
})
expect(result.current.getDate()).toBe(9)
})
})
+46
View File
@@ -0,0 +1,46 @@
import { useEffect, useState } from 'react'
import { isSameLocalDay } from '../lib/formatMessageTime'
function msUntilNextLocalMidnight(now: Date): number {
// One second past, so the timer never lands a hair before midnight.
const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1)
return next.getTime() - now.getTime()
}
// A `now` that only changes when the local calendar day does -- at midnight,
// and when a tab becomes visible again (a laptop that slept through
// midnight). Without it, a tab left open overnight keeps showing yesterday's
// messages as a bare "4:04 PM" until something unrelated rerenders the list.
export function useLocalDay(): Date {
const [now, setNow] = useState(() => new Date())
useEffect(() => {
let timer: ReturnType<typeof setTimeout>
function refresh() {
const current = new Date()
// Same state object when the day hasn't changed, so no rerender.
setNow((prev) => (isSameLocalDay(prev, current) ? prev : current))
}
function schedule() {
timer = setTimeout(() => {
refresh()
schedule()
}, msUntilNextLocalMidnight(new Date()))
}
function handleVisibilityChange() {
if (document.visibilityState === 'visible') refresh()
}
schedule()
document.addEventListener('visibilitychange', handleVisibilityChange)
return () => {
clearTimeout(timer)
document.removeEventListener('visibilitychange', handleVisibilityChange)
}
}, [])
return now
}
+16
View File
@@ -15,6 +15,12 @@ declare global {
interface Window { interface Window {
dsDesktop?: { dsDesktop?: {
setUnreadCount?(unreadRoomCount: number): void setUnreadCount?(unreadRoomCount: number): void
// Tells the tray/dock icon the user has genuinely entered a room --
// the desktop wrapper's own signal to clear that room's tray
// indicator. Deliberately not fired just because the window was
// shown/focused/restored, or opened from the tray: none of those mean
// the user actually looked at the room the unread message is in.
roomOpened?(): void
showNotification?(notification: DesktopNotificationRequest): void showNotification?(notification: DesktopNotificationRequest): void
onNotificationClick?(callback: (roomId: string) => void): () => void onNotificationClick?(callback: (roomId: string) => void): () => void
} }
@@ -38,6 +44,16 @@ export function isDesktopClickListenerSupported(): boolean {
return typeof window.dsDesktop?.onNotificationClick === 'function' return typeof window.dsDesktop?.onNotificationClick === 'function'
} }
// Both no-op silently if the bridge or this specific method isn't present,
// same as showDesktopNotification below -- callers never need to guard.
export function notifyRoomOpened(): void {
window.dsDesktop?.roomOpened?.()
}
export function notifyUnreadCount(unreadRoomCount: number): void {
window.dsDesktop?.setUnreadCount?.(unreadRoomCount)
}
// No-ops silently if the bridge or this specific method isn't present -- // No-ops silently if the bridge or this specific method isn't present --
// callers don't need to guard, matching the rest of this module's // callers don't need to guard, matching the rest of this module's
// capability-detect-per-method philosophy (see #49's "feature-test each // capability-detect-per-method philosophy (see #49's "feature-test each
@@ -0,0 +1,82 @@
import { describe, expect, it } from 'vitest'
import { formatMessageTime, formatMessageTimeTitle, isSameLocalDay } from './formatMessageTime'
// Local-time constructors throughout, and expected text built with the same
// locale calls the code uses -- so these hold in any timezone and any ICU
// locale instead of hardcoding "3:00 PM".
const NOW = new Date(2026, 9, 9, 15, 0) // Fri Oct 9 2026, 3:00 PM local
const iso = (d: Date) => d.toISOString()
const timeText = (d: Date) => d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
const weekday = (d: Date) => d.toLocaleDateString([], { weekday: 'short' })
describe('formatMessageTime', () => {
it('shows just the time for a message sent today', () => {
const morning = new Date(2026, 9, 9, 8, 5)
expect(formatMessageTime(iso(morning), NOW)).toBe(timeText(morning))
})
it('prefixes "Yesterday" for yesterday', () => {
const d = new Date(2026, 9, 8, 23, 59)
expect(formatMessageTime(iso(d), NOW)).toBe(`Yesterday ${timeText(d)}`)
})
it('treats 11:59 PM vs 12:03 AM as different days despite being minutes apart', () => {
const justBeforeMidnight = new Date(2026, 9, 8, 23, 59)
const justAfterMidnight = new Date(2026, 9, 9, 0, 3)
expect(formatMessageTime(iso(justBeforeMidnight), justAfterMidnight)).toBe(
`Yesterday ${timeText(justBeforeMidnight)}`,
)
expect(formatMessageTime(iso(justAfterMidnight), justAfterMidnight)).toBe(timeText(justAfterMidnight))
})
it('uses the short weekday for 2 to 6 days ago', () => {
const twoDays = new Date(2026, 9, 7, 12, 0)
const sixDays = new Date(2026, 9, 3, 12, 0)
expect(formatMessageTime(iso(twoDays), NOW)).toBe(`${weekday(twoDays)} ${timeText(twoDays)}`)
expect(formatMessageTime(iso(sixDays), NOW)).toBe(`${weekday(sixDays)} ${timeText(sixDays)}`)
})
it('switches to a month and day at 7 days, without the year when it is this year', () => {
const d = new Date(2026, 9, 2, 12, 0)
const label = formatMessageTime(iso(d), NOW)
expect(label).toBe(`${d.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${timeText(d)}`)
expect(label).not.toContain('2026')
})
it('adds the year for a message from a different year', () => {
const d = new Date(2025, 11, 25, 9, 30)
const label = formatMessageTime(iso(d), NOW)
expect(label).toBe(
`${d.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' })}, ${timeText(d)}`,
)
expect(label).toContain('2025')
})
it('counts Dec 31 -> Jan 1 as yesterday', () => {
const d = new Date(2026, 11, 31, 22, 0)
expect(formatMessageTime(iso(d), new Date(2027, 0, 1, 10, 0))).toBe(`Yesterday ${timeText(d)}`)
})
it('treats a slightly-future timestamp (clock skew) as today', () => {
const tomorrow = new Date(2026, 9, 10, 9, 0)
expect(formatMessageTime(iso(tomorrow), NOW)).toBe(timeText(tomorrow))
})
})
describe('formatMessageTimeTitle', () => {
it('includes the full date, with the year', () => {
expect(formatMessageTimeTitle(iso(new Date(2026, 9, 2, 16, 4)))).toContain('2026')
})
})
describe('isSameLocalDay', () => {
it('is false across midnight and true within a day', () => {
expect(isSameLocalDay(new Date(2026, 9, 8, 23, 59), new Date(2026, 9, 9, 0, 1))).toBe(false)
expect(isSameLocalDay(new Date(2026, 9, 9, 0, 1), new Date(2026, 9, 9, 23, 59))).toBe(true)
})
it('accepts ISO strings as well as Dates', () => {
expect(isSameLocalDay(iso(new Date(2026, 9, 9, 8, 0)), new Date(2026, 9, 9, 20, 0))).toBe(true)
})
})
+44
View File
@@ -0,0 +1,44 @@
// "Today" is the viewer's local calendar day, so everything here goes through
// local-time getters, never UTC.
type DateLike = Date | string
function toDate(d: DateLike): Date {
return d instanceof Date ? d : new Date(d)
}
// A calendar-day number, not elapsed milliseconds: built from the local
// y/m/d via Date.UTC so a 23- or 25-hour DST day still counts as one day,
// and 11:58 PM vs 12:01 AM (3 minutes apart) correctly counts as 1 day apart.
function dayNumber(d: Date): number {
return Math.floor(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) / 86_400_000)
}
export function isSameLocalDay(a: DateLike, b: DateLike): boolean {
return dayNumber(toDate(a)) === dayNumber(toDate(b))
}
// A bare "4:04 PM" gives no way to tell today's message from one sent last
// week. Today stays time-only; anything older gains just enough date to
// place it.
export function formatMessageTime(iso: string, now: Date = new Date()): string {
const sent = new Date(iso)
const time = sent.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
// <= 0 also covers a timestamp slightly in the future (clock skew between
// server and this device) -- better shown as today than as a negative age.
const daysAgo = dayNumber(now) - dayNumber(sent)
if (daysAgo <= 0) return time
if (daysAgo === 1) return `Yesterday ${time}`
// Under 7 so the weekday is never the same as today's (7 days ago would be).
if (daysAgo < 7) return `${sent.toLocaleDateString([], { weekday: 'short' })} ${time}`
const date = sent.toLocaleDateString([], {
month: 'short',
day: 'numeric',
year: sent.getFullYear() === now.getFullYear() ? undefined : 'numeric',
})
return `${date}, ${time}`
}
// Hover text: the one place the full, unambiguous date is always available.
export function formatMessageTimeTitle(iso: string): string {
return new Date(iso).toLocaleString([], { dateStyle: 'full', timeStyle: 'short' })
}
@@ -0,0 +1,31 @@
import { afterEach, describe, expect, it, vi } from 'vitest'
import { getFormattingToolbarOpen, setFormattingToolbarOpen } from './formattingToolbarPref'
afterEach(() => {
localStorage.clear()
vi.restoreAllMocks()
})
describe('formatting toolbar preference', () => {
it('is collapsed by default', () => {
expect(getFormattingToolbarOpen()).toBe(false)
})
it('remembers being opened and closed', () => {
setFormattingToolbarOpen(true)
expect(getFormattingToolbarOpen()).toBe(true)
setFormattingToolbarOpen(false)
expect(getFormattingToolbarOpen()).toBe(false)
})
it('falls back to collapsed when storage is unavailable', () => {
vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
throw new Error('blocked')
})
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
throw new Error('blocked')
})
expect(getFormattingToolbarOpen()).toBe(false)
expect(() => setFormattingToolbarOpen(true)).not.toThrow()
})
})
+21
View File
@@ -0,0 +1,21 @@
const KEY = 'ds-chat-formatting-toolbar-open'
// Collapsed unless the user has opened it before -- and remembered, because
// Composer remounts on every room switch and would otherwise snap shut each
// time.
export function getFormattingToolbarOpen(): boolean {
try {
return localStorage.getItem(KEY) === 'true'
} catch {
return false
}
}
export function setFormattingToolbarOpen(open: boolean): void {
try {
localStorage.setItem(KEY, String(open))
} catch {
// storage unavailable (private browsing, quota) -- the toolbar just
// won't remember its state, not fatal.
}
}
+139
View File
@@ -0,0 +1,139 @@
import { describe, expect, it } from 'vitest'
import { applyFormat, type FormatAction, type InlineMarker, type TextState } from './markdownFormat'
// ⟦ and ⟧ mark the selection, so cases read as plain strings -- an empty
// pair (⟦⟧) is a bare cursor.
const L = '⟦'
const R = '⟧'
function parse(s: string): TextState {
const start = s.indexOf(L)
const end = s.indexOf(R) - 1
return { value: s.replace(L, '').replace(R, ''), start, end }
}
function render({ value, start, end }: TextState): string {
return value.slice(0, start) + L + value.slice(start, end) + R + value.slice(end)
}
function fmt(s: string, action: FormatAction): string {
return render(applyFormat(parse(s), action))
}
const inline = (marker: InlineMarker): FormatAction => ({ kind: 'inline', marker })
describe('inline wrap', () => {
it('wraps the selection and keeps the inner text selected', () => {
expect(fmt('say ⟦hi⟧ now', inline('**'))).toBe('say **⟦hi⟧** now')
})
it('inserts an empty pair with the cursor between when nothing is selected', () => {
expect(fmt('say ⟦⟧now', inline('**'))).toBe('say **⟦⟧**now')
})
it('unwraps when the markers sit just outside the selection', () => {
expect(fmt('say **⟦hi⟧** now', inline('**'))).toBe('say ⟦hi⟧ now')
})
it('unwraps when the selection includes the markers', () => {
expect(fmt('say ⟦**hi**⟧ now', inline('**'))).toBe('say ⟦hi⟧ now')
})
it('keeps markers outside leading/trailing whitespace in the selection', () => {
expect(fmt('a⟦ hi ⟧b', inline('**'))).toBe('a **⟦hi⟧** b')
})
it('italic on a bold selection adds italic rather than stripping bold', () => {
expect(fmt('x **⟦hi⟧** y', inline('*'))).toBe('x ***⟦hi⟧*** y')
})
it('removes just bold from bold+italic', () => {
expect(fmt('x ***⟦hi⟧*** y', inline('**'))).toBe('x *⟦hi⟧* y')
})
it('removes just italic from bold+italic', () => {
expect(fmt('x ***⟦hi⟧*** y', inline('*'))).toBe('x **⟦hi⟧** y')
})
it('strikethrough toggles off without being confused by subscript', () => {
expect(fmt('x ~~⟦hi⟧~~ y', inline('~~'))).toBe('x ⟦hi⟧ y')
expect(fmt('a ⟦hi⟧ b', inline('~'))).toBe('a ~⟦hi⟧~ b')
})
it('handles inline code and superscript', () => {
expect(fmt('run ⟦ls⟧', inline('`'))).toBe('run `⟦ls⟧`')
expect(fmt('x⟦2⟧', inline('^'))).toBe('x^⟦2⟧^')
})
it.each(['**', '*', '~~', '~', '`', '^'] as InlineMarker[])('%s: applying twice restores the original', (marker) => {
const original = parse('a ⟦b⟧ c')
const once = applyFormat(original, inline(marker))
expect(once.value).not.toBe(original.value)
expect(applyFormat(once, inline(marker))).toEqual(original)
})
})
describe('line prefixes', () => {
it('prefixes the current line and moves the cursor with it', () => {
expect(fmt('hello⟦⟧', { kind: 'prefix', prefix: 'quote' })).toBe('> hello⟦⟧')
expect(fmt('one\ntw⟦⟧o', { kind: 'prefix', prefix: 'quote' })).toBe('one\n> tw⟦⟧o')
})
it('starts a list on a blank line', () => {
expect(fmt('⟦⟧', { kind: 'prefix', prefix: 'bullet' })).toBe('- ⟦⟧')
})
it('prefixes every selected line, then toggles them back off', () => {
const bullet: FormatAction = { kind: 'prefix', prefix: 'bullet' }
expect(fmt('⟦a\nb⟧', bullet)).toBe('⟦- a\n- b⟧')
expect(fmt('⟦- a\n- b⟧', bullet)).toBe('⟦a\nb⟧')
})
it('numbers lines sequentially, skipping blank lines, and renumbers existing numbers', () => {
const ordered: FormatAction = { kind: 'prefix', prefix: 'ordered' }
expect(fmt('⟦a\n\nb⟧', ordered)).toBe('⟦1. a\n\n2. b⟧')
expect(fmt('⟦1. a\nb⟧', ordered)).toBe('⟦1. a\n2. b⟧')
expect(fmt('⟦1. a\n2. b⟧', ordered)).toBe('⟦a\nb⟧')
})
it('does not include a line the selection only touches at its very start', () => {
expect(fmt('a\n⟦b\n⟧c', { kind: 'prefix', prefix: 'bullet' })).toBe('a\n⟦- b⟧\nc')
})
})
describe('headings', () => {
it('adds, replaces, and toggles off the heading level', () => {
expect(fmt('title⟦⟧', { kind: 'heading', level: 2 })).toBe('## title⟦⟧')
expect(fmt('⟦# hi⟧', { kind: 'heading', level: 2 })).toBe('⟦## hi⟧')
expect(fmt('⟦## hi⟧', { kind: 'heading', level: 1 })).toBe('⟦# hi⟧')
expect(fmt('⟦## hi⟧', { kind: 'heading', level: 2 })).toBe('⟦hi⟧')
})
})
describe('code block', () => {
it('inserts an empty fenced block with the cursor on the blank line', () => {
expect(fmt('⟦⟧', { kind: 'codeBlock' })).toBe('```\n⟦⟧\n```')
})
it('puts the fences on their own lines when the selection is mid-line', () => {
expect(fmt('see ⟦x = 1⟧ here', { kind: 'codeBlock' })).toBe('see \n```\n⟦x = 1⟧\n```\n here')
})
it('does not double the newline when the selection already ends with one', () => {
expect(fmt('⟦a\n⟧b', { kind: 'codeBlock' })).toBe('```\n⟦a⟧\n```\nb')
})
})
describe('link', () => {
it('wraps the selection and selects the placeholder url', () => {
expect(fmt('see ⟦docs⟧', { kind: 'link' })).toBe('see [docs](⟦url⟧)')
})
it('treats a selected url as the target and leaves the cursor in the text brackets', () => {
expect(fmt('⟦https://example.com⟧', { kind: 'link' })).toBe('[⟦⟧](https://example.com)')
})
it('inserts a placeholder link with its text selected when nothing is selected', () => {
expect(fmt('a ⟦⟧', { kind: 'link' })).toBe('a [⟦link text⟧](url)')
})
})
+204
View File
@@ -0,0 +1,204 @@
// #75: pure text transforms behind the composer's formatting toolbar. Each
// takes the textarea's value plus its selection and returns the same shape,
// so Composer just applies the result -- keeping this free of React/DOM is
// what makes the fiddly selection math directly unit-testable.
export interface TextState {
value: string
start: number
end: number
}
export type InlineMarker = '**' | '*' | '~~' | '`' | '~' | '^'
export type FormatAction =
| { kind: 'inline'; marker: InlineMarker }
| { kind: 'prefix'; prefix: 'quote' | 'bullet' | 'ordered' }
| { kind: 'heading'; level: 1 | 2 | 3 }
| { kind: 'codeBlock' }
| { kind: 'link' }
// Markers whose doubled form is a *different* format (`**` bold vs `*`
// italic, `~~` strikethrough vs `~` subscript), so "is this already
// wrapped?" has to look at how long the run of marker characters is rather
// than just whether one is present.
const DOUBLED_IS_DIFFERENT = new Set(['*', '~'])
// A run of 3 `*` is bold+italic: bold (2) and italic (1) are both "present".
function hasMarker(marker: string, run: number): boolean {
if (marker.length === 2) return run >= 2
return DOUBLED_IS_DIFFERENT.has(marker[0]) ? run % 2 === 1 : run >= 1
}
function applyInline(state: TextState, marker: InlineMarker): TextState {
const { value, start, end } = state
const ch = marker[0]
const m = marker.length
const sel = value.slice(start, end)
// Selection includes the markers themselves (e.g. the user selected the
// whole `**word**`) -- unwrap inside the selection.
if (sel.length > 0) {
let lead = 0
while (lead < sel.length && sel[lead] === ch) lead++
let trail = 0
while (trail < sel.length - lead && sel[sel.length - 1 - trail] === ch) trail++
const run = Math.min(lead, trail)
if (run > 0 && hasMarker(marker, run) && sel.length > 2 * m) {
const inner = sel.slice(m, sel.length - m)
return { value: value.slice(0, start) + inner + value.slice(end), start, end: start + inner.length }
}
}
// Markers sit just outside the selection. Skipped when the selection has
// edge whitespace: markers adjacent to it belong to neighbouring spans
// (`*a* and *b*` with " and " selected), not to this selection.
const edgeWhitespace = sel.length > 0 && (/^\s/.test(sel) || /\s$/.test(sel))
if (!edgeWhitespace) {
let before = 0
while (start - before - 1 >= 0 && value[start - before - 1] === ch) before++
let after = 0
while (end + after < value.length && value[end + after] === ch) after++
const run = Math.min(before, after)
if (run > 0 && hasMarker(marker, run)) {
return {
value: value.slice(0, start - m) + sel + value.slice(end + m),
start: start - m,
end: end - m,
}
}
}
// Nothing selected (or only whitespace): drop in an empty pair, cursor between.
if (sel.trim() === '') {
return {
value: value.slice(0, start) + marker + marker + value.slice(start),
start: start + m,
end: start + m,
}
}
// Markdown doesn't treat `** word**` as bold -- keep the markers hugging
// the text, outside any whitespace the selection happens to include.
const innerStart = start + (sel.length - sel.trimStart().length)
const innerEnd = end - (sel.length - sel.trimEnd().length)
return {
value:
value.slice(0, innerStart) + marker + value.slice(innerStart, innerEnd) + marker + value.slice(innerEnd),
start: innerStart + m,
end: innerEnd + m,
}
}
// The whole lines a selection touches. A selection that ends right after a
// newline (i.e. at the very start of the next line) doesn't count that line.
function lineBounds(value: string, start: number, end: number) {
const lineStart = start === 0 ? 0 : value.lastIndexOf('\n', start - 1) + 1
const effectiveEnd = end > start && value[end - 1] === '\n' ? end - 1 : end
const nextNewline = value.indexOf('\n', effectiveEnd)
return { lineStart, lineEnd: nextNewline === -1 ? value.length : nextNewline }
}
function transformLines(state: TextState, transform: (lines: string[]) => string[]): TextState {
const { value, start, end } = state
const { lineStart, lineEnd } = lineBounds(value, start, end)
const oldBlock = value.slice(lineStart, lineEnd)
const newBlock = transform(oldBlock.split('\n')).join('\n')
const next = value.slice(0, lineStart) + newBlock + value.slice(lineEnd)
if (start === end) {
const cursor = Math.max(lineStart, start + (newBlock.length - oldBlock.length))
return { value: next, start: cursor, end: cursor }
}
// Keep the affected lines selected so the same button toggles it back off.
return { value: next, start: lineStart, end: lineStart + newBlock.length }
}
const ORDERED_RE = /^\d+\. /
function applyPrefix(state: TextState, kind: 'quote' | 'bullet' | 'ordered'): TextState {
const marker = kind === 'quote' ? '> ' : '- '
const has = (line: string) => (kind === 'ordered' ? ORDERED_RE.test(line) : line.startsWith(marker))
const strip = (line: string) => (kind === 'ordered' ? line.replace(ORDERED_RE, '') : line.slice(marker.length))
return transformLines(state, (lines) => {
// Blank lines inside a multi-line selection are paragraph breaks, not
// list items -- only a lone blank line (cursor on an empty line) gets one.
const multi = lines.length > 1
const skip = (line: string) => multi && line === ''
const targets = lines.filter((line) => !skip(line))
if (targets.length > 0 && targets.every(has)) {
return lines.map((line) => (has(line) ? strip(line) : line))
}
let n = 0
return lines.map((line) => {
if (skip(line)) return line
n++
if (kind === 'ordered') return `${n}. ${strip(line)}`
return has(line) ? line : marker + line
})
})
}
const HEADING_RE = /^#{1,6} /
function applyHeading(state: TextState, level: 1 | 2 | 3): TextState {
const prefix = '#'.repeat(level) + ' '
return transformLines(state, (lines) => {
const multi = lines.length > 1
const skip = (line: string) => multi && line === ''
const targets = lines.filter((line) => !skip(line))
if (targets.length > 0 && targets.every((line) => line.startsWith(prefix))) {
return lines.map((line) => (line.startsWith(prefix) ? line.slice(prefix.length) : line))
}
return lines.map((line) => (skip(line) ? line : prefix + line.replace(HEADING_RE, '')))
})
}
// A fence only counts at the start of a line, so mid-line cursors get a
// newline inserted first.
function applyCodeBlock(state: TextState): TextState {
const { value, start, end } = state
const before = value.slice(0, start)
const after = value.slice(end)
const sel = value.slice(start, end).replace(/\n$/, '')
const lead = before.length > 0 && !before.endsWith('\n') ? '\n' : ''
const trail = after.length > 0 && !after.startsWith('\n') ? '\n' : ''
const next = `${before}${lead}\`\`\`\n${sel}\n\`\`\`${trail}${after}`
const innerStart = before.length + lead.length + 4
return { value: next, start: innerStart, end: innerStart + sel.length }
}
function applyLink(state: TextState): TextState {
const { value, start, end } = state
const sel = value.slice(start, end)
let text: string
let selStart: number
let selEnd: number
if (/^https?:\/\/\S+$/.test(sel)) {
text = `[](${sel})`
selStart = selEnd = start + 1
} else if (sel) {
text = `[${sel}](url)`
selStart = start + sel.length + 3
selEnd = selStart + 3
} else {
text = '[link text](url)'
selStart = start + 1
selEnd = selStart + 9
}
return { value: value.slice(0, start) + text + value.slice(end), start: selStart, end: selEnd }
}
export function applyFormat(state: TextState, action: FormatAction): TextState {
switch (action.kind) {
case 'inline':
return applyInline(state, action.marker)
case 'prefix':
return applyPrefix(state, action.prefix)
case 'heading':
return applyHeading(state, action.level)
case 'codeBlock':
return applyCodeBlock(state)
case 'link':
return applyLink(state)
}
}
+39
View File
@@ -0,0 +1,39 @@
import { describe, expect, it } from 'vitest'
import { GROUP_BREAK_MS, isGroupStart } from './messageGrouping'
const msg = (user: string, d: Date) => ({ user_id: user, created_at: d.toISOString() })
describe('isGroupStart', () => {
const t = new Date(2026, 9, 9, 10, 0, 0)
const later = (ms: number) => new Date(t.getTime() + ms)
it('starts a group for the first message', () => {
expect(isGroupStart(undefined, msg('a', t))).toBe(true)
})
it('starts a group when the sender changes', () => {
expect(isGroupStart(msg('a', t), msg('b', later(1000)))).toBe(true)
})
it('keeps the same sender grouped within the break window', () => {
expect(isGroupStart(msg('a', t), msg('a', later(60_000)))).toBe(false)
})
it('groups at exactly the break threshold and splits just past it', () => {
expect(isGroupStart(msg('a', t), msg('a', later(GROUP_BREAK_MS)))).toBe(false)
expect(isGroupStart(msg('a', t), msg('a', later(GROUP_BREAK_MS + 1000)))).toBe(true)
})
it('measures the gap from the previous message, not the first in the run', () => {
const fourMin = 4 * 60_000
expect(isGroupStart(msg('a', later(fourMin)), msg('a', later(2 * fourMin)))).toBe(false)
expect(isGroupStart(msg('a', later(2 * fourMin)), msg('a', later(3 * fourMin)))).toBe(false)
})
it('starts a new group when the same sender crosses midnight, even a few minutes apart', () => {
const before = new Date(2026, 9, 8, 23, 58)
const after = new Date(2026, 9, 9, 0, 1)
expect(after.getTime() - before.getTime()).toBeLessThan(GROUP_BREAK_MS)
expect(isGroupStart(msg('a', before), msg('a', after))).toBe(true)
})
})
+24
View File
@@ -1,7 +1,31 @@
import { getUserAvatarUrl } from '../api/users' import { getUserAvatarUrl } from '../api/users'
import { hashIndex } from './avatar' import { hashIndex } from './avatar'
import { isSameLocalDay } from './formatMessageTime'
import type { RoomMember } from '../types' import type { RoomMember } from '../types'
// #73: Slack's own threshold for the same "still grouped, but it's been a
// while" call -- past this gap a same-sender message starts a new group
// (its own avatar/name/timestamp) even with nobody else posting in
// between, so a message sent minutes later doesn't hide under a stale
// timestamp from the start of the run.
export const GROUP_BREAK_MS = 5 * 60 * 1000
interface Groupable {
user_id: string
created_at: string
}
// Whether `msg` gets its own avatar/name/timestamp header, vs. continuing
// `prev`'s group. A new calendar day always breaks the group: now that
// timestamps can carry a date, a same-sender run that crosses midnight
// (11:58 PM, then 12:01 AM) would otherwise leave the later message under a
// header showing the wrong day.
export function isGroupStart(prev: Groupable | undefined, msg: Groupable): boolean {
if (!prev || prev.user_id !== msg.user_id) return true
if (new Date(msg.created_at).getTime() - new Date(prev.created_at).getTime() > GROUP_BREAK_MS) return true
return !isSameLocalDay(prev.created_at, msg.created_at)
}
export function senderColorIndex(username: string, members: RoomMember[]): number { export function senderColorIndex(username: string, members: RoomMember[]): number {
const idx = members.findIndex((m) => m.username === username) const idx = members.findIndex((m) => m.username === username)
if (idx >= 0) return idx if (idx >= 0) return idx
+56
View File
@@ -0,0 +1,56 @@
import { describe, expect, it } from 'vitest'
import type { MyRoomItem } from '../types'
import { clearRoomIndicators } from './roomIndicators'
function makeRoom(overrides: Partial<MyRoomItem> & { id: string }): MyRoomItem {
return {
name: overrides.id,
description: null,
is_private: false,
is_dm: false,
is_archived: false,
owner_id: 'owner',
created_at: '2026-01-01T00:00:00Z',
role: 'member',
has_unread: false,
has_mention: false,
dm_partner: null,
email_notifications: false,
...overrides,
}
}
describe('clearRoomIndicators', () => {
it('clears has_unread and has_mention on the matching room', () => {
const rooms = [makeRoom({ id: 'room-1', has_unread: true, has_mention: true })]
const result = clearRoomIndicators(rooms, 'room-1')
expect(result[0].has_unread).toBe(false)
expect(result[0].has_mention).toBe(false)
})
it('preserves unread state on every other room', () => {
const rooms = [
makeRoom({ id: 'room-1', has_unread: true, has_mention: true }),
makeRoom({ id: 'room-2', has_unread: true, has_mention: false }),
makeRoom({ id: 'room-3', has_unread: false, has_mention: false }),
]
const result = clearRoomIndicators(rooms, 'room-1')
const room2 = result.find((r) => r.id === 'room-2')
const room3 = result.find((r) => r.id === 'room-3')
expect(room2?.has_unread).toBe(true)
expect(room3?.has_unread).toBe(false)
})
it('leaves untouched rooms as the same object reference', () => {
const room2 = makeRoom({ id: 'room-2', has_unread: true })
const rooms = [makeRoom({ id: 'room-1', has_unread: true }), room2]
const result = clearRoomIndicators(rooms, 'room-1')
expect(result[1]).toBe(room2)
})
it('is a no-op if the room id is not found', () => {
const rooms = [makeRoom({ id: 'room-1', has_unread: true })]
const result = clearRoomIndicators(rooms, 'does-not-exist')
expect(result[0].has_unread).toBe(true)
})
})
+9
View File
@@ -0,0 +1,9 @@
import type { MyRoomItem } from '../types'
// Pulled out of ChatShellPage as a pure function purely so it's directly
// unit-testable without rendering the whole page -- behavior is unchanged.
// Only touches the matching room; every other room's object reference (and
// therefore its unread state) is left untouched.
export function clearRoomIndicators(rooms: MyRoomItem[], roomId: string): MyRoomItem[] {
return rooms.map((r) => (r.id === roomId ? { ...r, has_unread: false, has_mention: false } : r))
}
+19 -1
View File
@@ -1,4 +1,4 @@
import type { CustomThemeColors, ThemeName } from '../types' import type { CustomThemeColors, TextScale, ThemeName } from '../types'
// The inline custom properties a custom theme sets on :root -- must be // The inline custom properties a custom theme sets on :root -- must be
// removed explicitly when switching to a preset, since an inline style // removed explicitly when switching to a preset, since an inline style
@@ -76,3 +76,21 @@ export function applyTheme(theme: ThemeName | null, customColors: CustomThemeCol
for (const varName of CUSTOM_THEME_VARS) root.style.removeProperty(varName) for (const varName of CUSTOM_THEME_VARS) root.style.removeProperty(varName)
root.style.removeProperty('color-scheme') root.style.removeProperty('color-scheme')
} }
// #71: percentages, not fixed px -- stacks on top of the browser/OS's own
// zoom or accessibility text-size setting instead of overriding it. Every
// component in this app already sizes itself in rem (see tokens.css),
// which is relative to this root value, so setting it here is the one
// change that scales text *and* the message-image/video max-size caps
// (also converted to rem -- see MessageList.css) uniformly, with no
// per-component work.
const TEXT_SCALE_PERCENT: Record<TextScale, string> = {
small: '87.5%',
normal: '100%',
large: '112.5%',
xlarge: '125%',
}
export function applyTextScale(scale: TextScale | null): void {
document.documentElement.style.fontSize = TEXT_SCALE_PERCENT[scale ?? 'normal']
}
+9 -4
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react' import { useCallback, useEffect, useMemo, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom' import { useNavigate, useParams } from 'react-router-dom'
import { NetworkError } from '../api/client' import { NetworkError } from '../api/client'
import { listMyRooms, listRoomMembers } from '../api/rooms' import { listMyRooms, listRoomMembers } from '../api/rooms'
@@ -12,7 +12,9 @@ import { Sidebar } from '../components/Sidebar'
import { TopBar } from '../components/TopBar' import { TopBar } from '../components/TopBar'
import { useAuth } from '../context/AuthContext' import { useAuth } from '../context/AuthContext'
import { useChatSocketContext } from '../context/ChatSocketContext' import { useChatSocketContext } from '../context/ChatSocketContext'
import { useDesktopRoomBridge } from '../hooks/useDesktopRoomBridge'
import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth' import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
import { clearRoomIndicators } from '../lib/roomIndicators'
import type { MyRoomItem, RoomMember } from '../types' import type { MyRoomItem, RoomMember } from '../types'
import './ChatShellPage.css' import './ChatShellPage.css'
@@ -60,10 +62,13 @@ export function ChatShellPage() {
const socket = useChatSocketContext() const socket = useChatSocketContext()
const clearRoomIndicators = useCallback((id: string) => { const handleRoomRead = useCallback((id: string) => {
setRooms((prev) => prev.map((r) => (r.id === id ? { ...r, has_unread: false, has_mention: false } : r))) setRooms((prev) => clearRoomIndicators(prev, id))
}, []) }, [])
const unreadRoomCount = useMemo(() => rooms.filter((r) => r.has_unread).length, [rooms])
useDesktopRoomBridge(activeRoom?.id, unreadRoomCount)
useEffect( useEffect(
() => () =>
socket.subscribe((envelope) => { socket.subscribe((envelope) => {
@@ -134,7 +139,7 @@ export function ChatShellPage() {
onToggleInfo={() => setInfoOpen((v) => !v)} onToggleInfo={() => setInfoOpen((v) => !v)}
infoOpen={infoOpen} infoOpen={infoOpen}
socket={socket} socket={socket}
onRoomRead={clearRoomIndicators} onRoomRead={handleRoomRead}
/> />
) : ( ) : (
!isMobile && ( !isMobile && (
+10 -1
View File
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import Markdown from 'markdown-to-jsx' import Markdown from 'markdown-to-jsx'
import { Link } from 'react-router-dom' import { Link, useLocation } from 'react-router-dom'
import { createMarkdownOptions, preprocessMarkdown } from '../components/MessageContent' import { createMarkdownOptions, preprocessMarkdown } from '../components/MessageContent'
import { TopBar } from '../components/TopBar' import { TopBar } from '../components/TopBar'
import './HelpPage.css' import './HelpPage.css'
@@ -20,6 +20,15 @@ export function HelpPage() {
[content], [content],
) )
// #75: the composer's "?" links straight to /help#formatting, but the guide
// is fetched after the page loads -- the browser's own scroll-to-hash has
// already run (and found nothing) by the time the headings exist.
const { hash } = useLocation()
useEffect(() => {
if (!markdownPreview || !hash) return
document.getElementById(hash.slice(1))?.scrollIntoView()
}, [markdownPreview, hash])
useEffect(() => { useEffect(() => {
let cancelled = false let cancelled = false
fetch(GUIDE_URL) fetch(GUIDE_URL)
+9
View File
@@ -1,5 +1,12 @@
export type ThemeName = 'dark' | 'light' | 'midnight' | 'sunset' | 'custom' export type ThemeName = 'dark' | 'light' | 'midnight' | 'sunset' | 'custom'
// #71: null means "normal" -- see lib/theme.ts's TEXT_SCALE_PERCENT map.
export type TextScale = 'small' | 'normal' | 'large' | 'xlarge'
// #71: independent of TextScale -- see MessageContent.tsx's
// EMOJI_SCALE_MULTIPLIER map. Same preset shape for UI consistency.
export type EmojiScale = 'small' | 'normal' | 'large' | 'xlarge'
// Matches exactly the CSS custom properties frontend/src/styles/themes.css // Matches exactly the CSS custom properties frontend/src/styles/themes.css
// overrides per built-in preset -- kept in sync with // overrides per built-in preset -- kept in sync with
// backend/app/schemas/custom_theme.py's CustomThemeColors. // backend/app/schemas/custom_theme.py's CustomThemeColors.
@@ -45,6 +52,8 @@ export interface User {
// Only non-null when theme === 'custom' -- see UserRead's model_validator // Only non-null when theme === 'custom' -- see UserRead's model_validator
// in backend/app/schemas/user.py. // in backend/app/schemas/user.py.
active_custom_theme: CustomTheme | null active_custom_theme: CustomTheme | null
text_scale: TextScale | null
emoji_scale: EmojiScale | null
avatar_filename: string | null avatar_filename: string | null
appear_offline: boolean appear_offline: boolean
created_at: string created_at: string
+44 -5
View File
@@ -10,6 +10,13 @@ interface UseChatSocketOptions {
const RECONNECT_BASE_DELAY_MS = 1000 const RECONNECT_BASE_DELAY_MS = 1000
const RECONNECT_MAX_DELAY_MS = 30000 const RECONNECT_MAX_DELAY_MS = 30000
// #76: the backend pings every 30s (WS_PING_INTERVAL_SECONDS in chat.py) --
// this needs to comfortably tolerate one missed ping plus ordinary network
// jitter before declaring the connection dead, not fire on the very first
// late beat.
const ZOMBIE_TIMEOUT_MS = 65000
const ZOMBIE_CHECK_INTERVAL_MS = 10000
const desktopMode = isDesktopNotificationsSupported() const desktopMode = isDesktopNotificationsSupported()
// Room join/leave (live message delivery) depends only on visibility -- // Room join/leave (live message delivery) depends only on visibility --
@@ -51,6 +58,16 @@ export function useChatSocket({ onUnauthenticated }: UseChatSocketOptions) {
// live WebSocket delivery the user can't actually see will do the job. // live WebSocket delivery the user can't actually see will do the job.
const desiredRoomsRef = useRef(new Set<string>()) const desiredRoomsRef = useRef(new Set<string>())
const isVisibleRef = useRef(isVisible()) const isVisibleRef = useRef(isVisible())
// #76: last time *anything* arrived on the socket (a real message, a
// "ping", doesn't matter which) -- the only signal that a connection
// sitting at readyState OPEN is actually still alive rather than a
// zombie. Without this, a connection that dies without ever sending a
// close frame (laptop sleep, a NAT silently dropping an idle mapping)
// looks identical to a healthy-but-quiet one: onclose never fires, so the
// already-correct reconnect+rejoin logic below never runs, and new
// messages just stop arriving until something unrelated (e.g. switching
// rooms, which refetches history over plain REST) papers over it.
const lastActivityRef = useRef(Date.now())
const sendRoomFrame = useCallback((type: 'join' | 'leave', roomId: string) => { const sendRoomFrame = useCallback((type: 'join' | 'leave', roomId: string) => {
const ws = socketRef.current const ws = socketRef.current
@@ -99,6 +116,7 @@ export function useChatSocket({ onUnauthenticated }: UseChatSocketOptions) {
if (hasConnectedBefore) checkForUpdate() if (hasConnectedBefore) checkForUpdate()
hasConnectedBefore = true hasConnectedBefore = true
reconnectDelay = RECONNECT_BASE_DELAY_MS reconnectDelay = RECONNECT_BASE_DELAY_MS
lastActivityRef.current = Date.now()
setConnected(true) setConnected(true)
// Re-join whatever rooms were joined before a reconnect -- the // Re-join whatever rooms were joined before a reconnect -- the
// server has no memory of a dropped connection's prior state. Only // server has no memory of a dropped connection's prior state. Only
@@ -122,7 +140,17 @@ export function useChatSocket({ onUnauthenticated }: UseChatSocketOptions) {
ws.onmessage = (event) => { ws.onmessage = (event) => {
if (socketRef.current !== ws) return if (socketRef.current !== ws) return
const envelope = JSON.parse(event.data) as ServerEnvelope lastActivityRef.current = Date.now()
const parsed = JSON.parse(event.data)
// #76: the server's heartbeat -- purely transport-level, not a
// domain event, so it's answered and swallowed right here instead
// of being forwarded to subscribers (ServerEnvelope's own type
// doesn't include it for exactly that reason).
if (parsed.type === 'ping') {
ws.send(JSON.stringify({ type: 'pong' }))
return
}
const envelope = parsed as ServerEnvelope
for (const handler of subscribersRef.current) handler(envelope) for (const handler of subscribersRef.current) handler(envelope)
} }
@@ -143,10 +171,9 @@ export function useChatSocket({ onUnauthenticated }: UseChatSocketOptions) {
if (stopped) return if (stopped) return
// Unexpected close -- a deploy restarting the app server, a brief // Unexpected close -- a deploy restarting the app server, a brief
// network blip, or (absent any app-level ping/pong) an idle // network blip, or an idle connection getting recycled by a reverse
// connection getting recycled by a reverse proxy in front of it. // proxy in front of it. Retry with exponential backoff instead of
// Retry with exponential backoff instead of leaving the chat // leaving the chat silently dead until the user manually reloads.
// silently dead until the user manually reloads.
reconnectTimer = setTimeout(connect, reconnectDelay) reconnectTimer = setTimeout(connect, reconnectDelay)
reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX_DELAY_MS) reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX_DELAY_MS)
} }
@@ -154,9 +181,21 @@ export function useChatSocket({ onUnauthenticated }: UseChatSocketOptions) {
connect() connect()
// #76: catches the case onclose can't -- a connection that dies without
// ever sending a close frame at all (readyState stays OPEN forever) is
// otherwise invisible to this hook. Forcing a close here just routes it
// through the exact same onclose/reconnect/rejoin path as a normal
// disconnect, rather than needing separate recovery logic of its own.
const zombieCheckTimer = setInterval(() => {
if (Date.now() - lastActivityRef.current > ZOMBIE_TIMEOUT_MS) {
socketRef.current?.close()
}
}, ZOMBIE_CHECK_INTERVAL_MS)
return () => { return () => {
stopped = true stopped = true
if (reconnectTimer) clearTimeout(reconnectTimer) if (reconnectTimer) clearTimeout(reconnectTimer)
clearInterval(zombieCheckTimer)
socketRef.current?.close() socketRef.current?.close()
socketRef.current = null socketRef.current = null
} }
+13
View File
@@ -0,0 +1,13 @@
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
// Deliberately separate from vite.config.ts, not an extension of it -- that
// file's VitePWA plugin does real build-time work (service worker
// injection, manifest generation) that has nothing to do with running unit
// tests and would just slow every test run down for no benefit.
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
},
})