Module-Rust/client/src/routes/admin/UserRustSections.jsx

// ── This module's fill for `admin.users.detail` ───────────────────────────
//
// R13's first slot, and the phase criterion as an operator meets it: the Steam
// id inside core's own user page, under core's own security panel.
//
// **The slot hands over `userId` and nothing else** — not a client. So this file
// builds its own bindings for the routes the server half registered
// (`api.adminUserLinks`), which is §3.5's rule applied to a slot: the two ends of
// a call belong to the same module even when the URL between them is core's.
//
// **Most users have no Rust account, so most of the time this renders nothing.**
// A panel that announced "no linked Steam accounts" on every user page in a
// community that also runs a UO shard would be noise on the overwhelming
// majority of them. Silence is the honest answer to "what does the Rust module
// know about this person" when it is nothing.

import { useCallback, useState } from 'react'
import { ago, count, duration } from '../../lib/format.js'
import { useAsync } from '../../core.js'
import api from '../../api.js'

/** Six lines of furniture the §3.4 kit does not carry, so it is vendored. */
function SectionTitle({ children }) {
  return (
    <div className="field-label" style={{ marginBottom: 12, marginTop: 4 }}>
      {children}
    </div>
  )
}

/** One server's all-time totals for this player. */
function ServerRow({ server }) {
  return (
    <li
      className="sans"
      style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: '0.86rem', color: 'var(--ink)' }}
    >
      <span style={{ minWidth: 0, color: 'var(--head)' }}>{server.serverName}</span>
      <span className="dim" style={{ flex: 'none', fontSize: '0.8rem' }}>
        {count(server.kills)} kills · {count(server.deaths)} deaths · {duration(server.playtimeSec)}
        {server.wipes > 1 ? ` · ${server.wipes} wipes` : ''}
      </span>
    </li>
  )
}

/** One linked Steam account: who it is, when it was linked, and the way out. */
function LinkPanel({ userId, link, onRemoved }) {
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState('')

  async function unlink() {
    setBusy(true)
    setError('')
    try {
      await api.adminUserLinks.remove(userId, link.steamId)
      await onRemoved()
    } catch (err) {
      setError(err.message || 'Could not unlink that account.')
      setBusy(false)
    }
  }

  return (
    <div className="panel" style={{ padding: '14px 16px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="display" style={{ fontSize: '1rem', color: 'var(--head)' }}>
            {link.name || link.steamId}
          </div>
          <div className="sans dim" style={{ fontSize: '0.76rem', marginTop: 2 }}>
            {link.steamId} · linked {ago(link.linkedAt)}
            {link.serverId ? ` on ${link.serverId}` : ''}
            {link.lastSeen ? ` · last played ${ago(link.lastSeen)}` : ' · never played'}
          </div>
          {/* Worth showing only when they differ: the name on the link is what
              they were called when they linked, the other is what the game last
              saw. A rename is the ordinary reason, and an operator reading a
              support ticket wants both names. */}
          {link.linkedName && link.name && link.linkedName !== link.name && (
            <div className="sans dim" style={{ fontSize: '0.72rem', marginTop: 2 }}>
              Linked as “{link.linkedName}”.
            </div>
          )}
        </div>
        <button type="button" className="btn ghost" onClick={unlink} disabled={busy} style={{ flex: 'none' }}>
          {busy ? 'Unlinking…' : 'Unlink'}
        </button>
      </div>

      {error && (
        <p className="sans" style={{ color: '#e05a5a', fontSize: '0.8rem', margin: '8px 0 0' }}>{error}</p>
      )}

      {link.servers.length > 0 && (
        <ul
          style={{
            listStyle: 'none',
            margin: '12px 0 0',
            padding: '12px 0 0',
            borderTop: '1px solid var(--line-soft)',
            display: 'flex',
            flexDirection: 'column',
            gap: 6,
          }}
        >
          {link.servers.map((server) => (
            <ServerRow key={server.serverId} server={server} />
          ))}
        </ul>
      )}
    </div>
  )
}

export default function UserRustSections({ userId }) {
  // Core's `useAsync` has no refresh, so a counter in the deps is how this
  // re-reads after its own write (the same shape the player page uses).
  const [reloads, setReloads] = useState(0)
  const { data } = useAsync(() => api.adminUserLinks.list(userId), [userId, reloads])
  const reload = useCallback(() => setReloads((n) => n + 1), [])

  // No `Loading` and no `ErrorState`, deliberately. This is a section inside
  // somebody else's page: a spinner on every user page for a module most users
  // have nothing to do with is worse than a section that appears when it has
  // something, and a failure here must not replace core's own user detail with an
  // error card.
  if (!data || data.links.length === 0) return null

  return (
    <section style={{ borderTop: '1px solid var(--line-soft)', marginTop: 30, paddingTop: 22 }}>
      <SectionTitle>Rust</SectionTitle>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {data.links.map((link) => (
          <LinkPanel key={link.steamId} userId={userId} link={link} onRemoved={reload} />
        ))}
      </div>

      <p className="sans dim" style={{ fontSize: '0.74rem', margin: '12px 0 0' }}>
        A link is fleet-wide and totals are all-time, summed across every wipe. Unlinking here is
        recorded in the activity log — it is the way back for a player who linked the wrong account
        and cannot reach it in game.
      </p>
    </section>
  )
}