Module-Rust/client/src/components/Feed.jsx

// ── The feed: what happened on one server ─────────────────────────────────
//
// Rows come from `/public/rust/servers/:id/events`, which serves a default-deny
// ALLOWLIST (`server/catalogue.js`). Everything carrying an IP address, a
// player's report about another player, or the grid square somebody's base is in
// is stored and never answered here — so this component cannot leak one by
// forgetting to filter, which is the point of the boundary living on the server.
//
// It polls (org lead, phase 4): every twenty seconds while the tab is visible,
// paused when it is not. `usePolled` keeps the rows on screen across a refresh —
// see the comment at the top of that file for why core's `useAsync` cannot do
// this job.

import { EmptyState, ErrorState, Loading } from '../core.js'
import { describe, FILTERS, kindsFor } from '../lib/feed.js'
import { ago, clock } from '../lib/format.js'
import usePolled from '../hooks/usePolled.js'
import api from '../api.js'

const TONE = {
  kill: 'var(--accent-bright)',
  death: 'var(--muted)',
  join: 'var(--mode-live, #5fb98a)',
  leave: 'var(--dim)',
  chat: 'var(--text)',
  server: 'var(--mode-maint, #e6c26a)',
  other: 'var(--muted)',
}

export default function Feed({ serverId, wipeId, filter, onFilter }) {
  const kinds = kindsFor(filter)

  const { data, error, loading, at } = usePolled(
    () => api.servers.events(serverId, { kinds, wipe: wipeId, limit: 100 }),
    // The key is the QUESTION. Changing server, wipe or filter blanks the rows,
    // because what is on screen is an answer to a different one; a poll tick
    // does not, because it is the same question asked again.
    { key: `${serverId}|${wipeId || ''}|${filter}`, intervalMs: 20_000 },
  )

  const events = data ? data.events : []

  return (
    <div>
      <div
        className="sans"
        style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center', marginBottom: 16 }}
      >
        <label style={{ color: 'var(--dim)', fontSize: '0.78rem' }}>
          Showing{' '}
          <select
            value={filter}
            onChange={(e) => onFilter(e.target.value)}
            style={selectStyle}
          >
            {FILTERS.map((f) => (
              <option key={f.id} value={f.id}>{f.label}</option>
            ))}
          </select>
        </label>

        {/* What a refresh is FOR: saying when the page last managed one. Without
            it a feed that stopped updating looks exactly like a quiet server. */}
        {at && (
          <span style={{ color: 'var(--dim)', fontSize: '0.74rem' }}>updated {ago(at)}</span>
        )}
        {error && (
          <span style={{ color: 'var(--mode-maint, #e6c26a)', fontSize: '0.74rem' }}>
            the last refresh failed — showing what we had
          </span>
        )}
      </div>

      {loading && <Loading />}

      {/* An error with nothing to fall back on is the only case that takes over
          the panel. A failed REFRESH keeps the rows and says so in the line
          above, because a site whose premise is "it renders while the game is
          off" must not blank itself the first time a request does. */}
      {error && !data && <ErrorState error={error} />}

      {data && events.length === 0 && (
        <EmptyState
          title="Nothing here yet"
          message="Nothing this server has reported matches. A server that has just been added has no history until it says something."
        />
      )}

      {events.length > 0 && (
        <ol style={{ listStyle: 'none', margin: 0, padding: 0 }}>
          {events.map((event) => {
            const line = describe(event)
            return (
              <li
                key={event.id}
                style={{
                  display: 'flex',
                  gap: 12,
                  alignItems: 'baseline',
                  padding: '7px 0',
                  borderBottom: '1px solid var(--line-soft, var(--line))',
                }}
              >
                <time
                  className="sans"
                  dateTime={new Date(event.t).toISOString()}
                  title={new Date(event.t).toLocaleString()}
                  style={{ flex: 'none', color: 'var(--dim)', fontSize: '0.74rem', minWidth: '5.6rem' }}
                >
                  {clock(event.t)}
                </time>
                <span style={{ color: TONE[line.tone] || 'var(--muted)', fontSize: '0.92rem' }}>
                  {line.actor && <strong style={{ color: 'var(--ink)' }}>{line.actor}</strong>}
                  {line.actor && (line.join || ' ')}
                  {line.verb}
                  {line.subject && ' '}
                  {line.subject && <strong style={{ color: 'var(--ink)' }}>{line.subject}</strong>}
                  {line.detail && (
                    <span className="sans" style={{ color: 'var(--dim)', fontSize: '0.76rem' }}>
                      {' · '}
                      {line.detail}
                    </span>
                  )}
                </span>
              </li>
            )
          })}
        </ol>
      )}
    </div>
  )
}

const selectStyle = {
  background: 'var(--panel-flat, transparent)',
  color: 'var(--text)',
  border: '1px solid var(--line)',
  borderRadius: 'var(--radius-input, 6px)',
  padding: '3px 8px',
  fontSize: '0.78rem',
}