feat(teams): the web surface — a notifications screen that did not exist

This is phase 6's first finding, and it changed the phase's shape.

TEAMS.md §6.3 says the per-Team mute list is surfaced "under the existing
notification settings screen". There was no such screen. `/auth/me/notifications/*`
was built for the Android app in M7 and had ZERO web consumers — a browser could
not see the stream catalog or its own subscriptions at all. That is tolerable
while push is the only sink, because push needs the app anyway. It is not
tolerable for email, whose entire argument is the web-only user who runs neither
the app nor Discord, so the sink and the screen to configure it had to ship
together.

`/account/notifications` carries all three: what to be told about, which Teams,
and whether any of it reaches a mailbox — in the order a user actually reasons
about them.

The mute toggle goes in a THIRD module-declared slot, above the roster, because
muting is an action ON the guild page while the feed and forum are content IN it.
It renders nothing for a viewer with no preference available, which is a privacy
property rather than a tidiness one: whether a preference EXISTS for a Team
answers "is this person in it", and the guild page is public.

`/unsubscribe/:token` is public and POSTs on mount — the link the user clicked was
a GET, and a GET that mutated would be triggered by every mail-client link scanner.

Co-Authored-By: Claude <noreply@anthropic.com>

client/src/modules/TeamNotifyToggle.jsx

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { api } from '../api/client.js'
+import { useAuth } from '../contexts/AuthContext.jsx'
+
+// Core's per-Team notification control, rendered into a THIRD slot a module
+// declares (TEAMS.md §6.3, phase 6).
+//
+// **Why this is a slot at all, and why it is the third one.** Teams have no core
+// page — the module that owns the vocabulary owns the page — so a control that
+// acts on one Team has nowhere of core's to live. The feed and the forum go below
+// the module's roster; this goes above it, because muting a guild is an action ON
+// the page rather than more content in it, and that is exactly the placement
+// decision a module cannot make if core stacks everything into one fill.
+//
+// **It renders nothing for a viewer who is not in the Team**, including anonymous
+// ones, and that is a privacy property rather than a tidiness one: whether a
+// notification preference EXISTS for a Team answers "is this person in it", and
+// the guild page is public. The server decides — the preference list only contains
+// Teams the caller may be notified about — and this file never infers membership
+// from anything it can see on the page.
+//
+// **Muting is per-Team and covers all four streams.** The per-stream on/off lives
+// on the account screen, where the catalog does; the thing that could not be
+// expressed before phase 6 is "I am in five Teams and want notifications from
+// one", and that is the only question this control asks.
+
+export default function TeamNotifyToggle({ externalId, moduleId }) {
+  const { user } = useAuth()
+  const [state, setState] = useState({ loading: true, team: null, pref: null })
+  const [busy, setBusy] = useState(false)
+
+  const load = useCallback(async () => {
+    // Anonymous viewers never fetch. The endpoint would 401 harmlessly, but a
+    // guild page rendering a public roster should not put an authenticated
+    // request on the wire for every visitor.
+    if (!user) return setState({ loading: false, team: null, pref: null })
+    try {
+      const team = await api.teamByExternalId(moduleId, externalId)
+      const { teams } = await api.teamNotificationPrefs()
+      const pref = (teams || []).find((t) => t.teamId === team.id) || null
+      setState({ loading: false, team, pref })
+    } catch {
+      // Same rule as the feed and the forum: this is core's content on a page
+      // core does not own, so a failure renders nothing rather than putting an
+      // error box on somebody else's surface.
+      setState({ loading: false, team: null, pref: null })
+    }
+  }, [externalId, moduleId, user])
+
+  useEffect(() => { load() }, [load])
+
+  const { loading, pref } = state
+  if (loading || !pref) return null
+
+  async function toggle() {
+    setBusy(true)
+    // Optimistic, and reconciled from the server's echo rather than assumed: a
+    // PUT that silently dropped the entry (a Team left in another tab) must not
+    // leave the control claiming a state the server does not hold.
+    const next = { ...pref, muted: !pref.muted }
+    setState((s) => ({ ...s, pref: next }))
+    try {
+      const { teams } = await api.setTeamNotificationPrefs([
+        { teamId: pref.teamId, muted: next.muted, emailMode: pref.emailMode },
+      ])
+      const echoed = (teams || []).find((t) => t.teamId === pref.teamId)
+      if (echoed) setState((s) => ({ ...s, pref: echoed }))
+    } catch {
+      setState((s) => ({ ...s, pref }))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div
+      className="sans"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 10,
+        flexWrap: 'wrap',
+        margin: '10px 0 0',
+        fontSize: '0.84rem',
+      }}
+    >
+      <button type="button" onClick={toggle} disabled={busy} className="btn btn-sq">
+        {pref.muted ? 'Unmute notifications' : 'Mute notifications'}
+      </button>
+      <span className="dim">
+        {pref.muted
+          ? 'You get no notifications about this team.'
+          : 'You get notifications about this team.'}
+      </span>
+      {/* The one link off this control, because "mute" is a blunt answer to a
+          question the account screen asks properly — which streams, and whether
+          email is on at all. */}
+      <Link to="/account/notifications" className="dim">All notification settings</Link>
+    </div>
+  )
+}