@dcl-regenesislabs/web-editor 0.0.0-stage → 0.1.0

package/prefabs/admin-tools/scripts/tabs/SmartItemActions.tsx

@@ -0,0 +1,167 @@
+import ReactEcs, { Dropdown, Label, UiEntity } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+import { dispatchAction, getActions, SUPPORTED_ACTIONS } from '../actions'
+import type { ActionEntry } from '../components'
+import { TabId } from '../state'
+import type { TabComponent, TabProps, TabSpec } from '../types'
+import { Card, CardHeader, TextButton, TEXT_DIM } from '../ui'
+import {
+  selectedItem,
+  selectSmartItem,
+  setVisible,
+  smartItemList,
+  smartItemsUi,
+  uiStateFor,
+  type SmartItemEntry
+} from './smart-items/selection'
+
+const MUTED = Color4.create(187 / 255, 187 / 255, 187 / 255, 1)
+
+function FieldLabel(props: { value: string }): ReactEcs.JSX.Element {
+  return (
+    <Label
+      value={`<b>${props.value}</b>`}
+      fontSize={16}
+      color={Color4.White()}
+      textAlign="middle-left"
+      uiTransform={{ width: '100%', height: 24, margin: { bottom: 12 } }}
+    />
+  )
+}
+
+function play(props: TabProps, item: SmartItemEntry, action: ActionEntry): void {
+  const ran = dispatchAction(item.entity, action.name)
+  smartItemsUi.lastPlayed = action.name
+  smartItemsUi.lastPlayedFailed = !ran || !SUPPORTED_ACTIONS.includes(action.type)
+  uiStateFor(props.state, item).selectedAction = action.name
+}
+
+export const SmartItemActions: TabComponent = (props: TabProps) => {
+  const items = smartItemList(props.config, props.self)
+  const item = selectedItem(props.state, items)
+  const actions = item === undefined ? [] : getActions(item.entity)
+  const ui = item === undefined ? undefined : uiStateFor(props.state, item)
+  const actionIndex =
+    ui === undefined ? -1 : actions.findIndex((action) => action.name === ui.selectedAction)
+  const action = actionIndex >= 0 ? actions[actionIndex] : undefined
+  const unsupported = action !== undefined && !SUPPORTED_ACTIONS.includes(action.type)
+
+  return (
+    <Card>
+      <CardHeader icon={props.icons.headerSmartItems} title="SMART ITEM ACTIONS" />
+
+      {items.length === 0 ? (
+        <Label
+          value="No smart items linked yet. Add them from the Admin Tools inspector."
+          fontSize={14}
+          color={TEXT_DIM}
+          textAlign="middle-left"
+          uiTransform={{ width: '100%', height: 'auto' }}
+        />
+      ) : (
+        <UiEntity uiTransform={{ flexDirection: 'column', width: '100%' }}>
+          <UiEntity uiTransform={{ flexDirection: 'column', margin: { bottom: 24 } }}>
+            <FieldLabel value="Selected Smart Item" />
+            <Dropdown
+              key="smart-item-selector"
+              acceptEmpty
+              emptyLabel="Select Smart Item"
+              options={items.map((entry) => entry.customName)}
+              selectedIndex={props.state.smartItems.selectedIndex ?? -1}
+              onChange={(index) => selectSmartItem(props.state, items, index)}
+              textAlign="middle-left"
+              fontSize={14}
+              color={Color4.Black()}
+              uiBackground={{ color: Color4.White() }}
+              uiTransform={{ width: '100%', height: 40 }}
+            />
+          </UiEntity>
+
+          <UiEntity uiTransform={{ flexDirection: 'column', margin: { bottom: 16 } }}>
+            <FieldLabel value="Actions" />
+            {actions.length === 0 ? (
+              <Label
+                value={
+                  item === undefined
+                    ? 'Pick a smart item to see its actions.'
+                    : 'This smart item has no actions authored on it.'
+                }
+                fontSize={14}
+                color={TEXT_DIM}
+                textAlign="middle-left"
+                uiTransform={{ width: '100%', height: 22 }}
+              />
+            ) : (
+              <Dropdown
+                key={`smart-item-actions-${item === undefined ? 'none' : (item.entity as number)}`}
+                acceptEmpty
+                emptyLabel="Select Action"
+                options={actions.map((entry) => entry.name)}
+                selectedIndex={actionIndex}
+                disabled={item === undefined}
+                onChange={(index) => {
+                  if (item === undefined || index < 0 || index >= actions.length) return
+                  uiStateFor(props.state, item).selectedAction = actions[index].name
+                  smartItemsUi.lastPlayed = ''
+                  smartItemsUi.lastPlayedFailed = false
+                }}
+                textAlign="middle-left"
+                fontSize={14}
+                color={Color4.Black()}
+                uiBackground={{ color: item === undefined ? Color4.Gray() : Color4.White() }}
+                uiTransform={{ width: '100%', height: 40 }}
+              />
+            )}
+          </UiEntity>
+
+          <UiEntity uiTransform={{ flexDirection: 'row', height: 40 }}>
+            <TextButton
+              label="Play Action"
+              disabled={item === undefined || action === undefined}
+              onClick={() => {
+                if (item !== undefined && action !== undefined) play(props, item, action)
+              }}
+            />
+            <TextButton
+              label={ui !== undefined && ui.visible ? 'Hide Entity' : 'Show Entity'}
+              disabled={item === undefined}
+              onClick={() => {
+                if (item !== undefined && ui !== undefined) setVisible(props.state, item, !ui.visible)
+              }}
+            />
+          </UiEntity>
+
+          <UiEntity
+            uiTransform={{
+              width: '100%',
+              minHeight: 24,
+              margin: { top: 10 },
+              display: unsupported || smartItemsUi.lastPlayed !== '' ? 'flex' : 'none'
+            }}
+          >
+            <Label
+              value={
+                unsupported
+                  ? `"${action?.type ?? ''}" is not one of the action types this panel can run.`
+                  : smartItemsUi.lastPlayedFailed
+                    ? `Could not play "${smartItemsUi.lastPlayed}".`
+                    : `Played "${smartItemsUi.lastPlayed}".`
+              }
+              fontSize={13}
+              color={MUTED}
+              textAlign="middle-left"
+              uiTransform={{ width: '100%', height: 'auto' }}
+            />
+          </UiEntity>
+        </UiEntity>
+      )}
+    </Card>
+  )
+}
+
+export const smartItemActionsTab: TabSpec = {
+  id: TabId.SMART_ITEMS,
+  icon: 'tabSmartItems',
+  isEnabled: (config) => config.smartItemsControl.isEnabled,
+  Component: SmartItemActions
+}

package/prefabs/admin-tools/scripts/tabs/TextAnnouncements.tsx

@@ -0,0 +1,195 @@
+import ReactEcs, { Input, Label, UiEntity } from '@dcl/sdk/react-ecs'
+import { Color4 } from '@dcl/sdk/math'
+import { TextAnnouncements as TextAnnouncementsComponent } from '../components'
+import { TabId } from '../state'
+import type { TabComponent, TabProps, TabSpec } from '../types'
+import { Card, CardHeader, TextButton, TEXT_DIM } from '../ui'
+import { AnnouncementOverlay } from './announcements/Overlay'
+import { announcementIcons } from './announcements/icons'
+import { PrimaryButton } from './announcements/ui'
+import {
+  ANNOUNCEMENT_MAX_LENGTH,
+  announcementId,
+  announcementUi,
+  cooldownRemaining,
+  feedbackText,
+  recordAnnouncement,
+  recordSend
+} from './announcements/state'
+
+const PLACEHOLDER_COLOR = Color4.create(160 / 255, 155 / 255, 168 / 255, 1)
+const MUTED = Color4.create(187 / 255, 187 / 255, 187 / 255, 1)
+
+function resetInput(props: TabProps): void {
+  props.state.textAnnouncements.draft = ''
+  announcementUi.inputResetSeq += 1
+}
+
+function send(props: TabProps): void {
+  if (props.bus === null) return
+  const text = props.state.textAnnouncements.draft.trim()
+  if (text === '') {
+    announcementUi.feedback = 'empty'
+    return
+  }
+
+  const author = props.player?.name ?? ''
+  const now = Date.now()
+  const throttledFor = cooldownRemaining(author, now)
+  if (throttledFor > 0) {
+    announcementUi.feedback = 'throttled'
+    announcementUi.throttledFor = throttledFor
+    return
+  }
+
+  const showAuthor = props.config.textAnnouncementControl.showAuthorOnEachAnnouncement
+  props.bus.setAnnouncement(
+    text.slice(0, ANNOUNCEMENT_MAX_LENGTH),
+    showAuthor ? author : '',
+    announcementId(now, author)
+  )
+  recordSend(author, now)
+  resetInput(props)
+  announcementUi.feedback = 'sent'
+}
+
+function clear(props: TabProps): void {
+  if (props.bus === null) return
+  props.bus.clearAnnouncement()
+  props.state.textAnnouncements.announcements = []
+  announcementUi.dismissed.clear()
+  resetInput(props)
+  announcementUi.feedback = 'cleared'
+}
+
+function History(props: TabProps): ReactEcs.JSX.Element | null {
+  const entries = props.state.textAnnouncements.announcements
+  if (entries.length === 0) return null
+  return (
+    <UiEntity uiTransform={{ flexDirection: 'column', width: '100%', margin: { top: 8 } }}>
+      <Label
+        value="<b>Recent</b>"
+        fontSize={14}
+        color={TEXT_DIM}
+        textAlign="middle-left"
+        uiTransform={{ width: '100%', height: 22 }}
+      />
+      {entries.map((entry) => (
+        <Label
+          key={entry.id}
+          value={entry.author === '' ? entry.text : `${entry.text}  <b>- ${entry.author}</b>`}
+          fontSize={13}
+          color={MUTED}
+          textAlign="middle-left"
+          uiTransform={{ width: '100%', height: 20 }}
+        />
+      ))}
+    </UiEntity>
+  )
+}
+
+export const TextAnnouncements: TabComponent = (props: TabProps) => {
+  const live = TextAnnouncementsComponent.getOrNull(props.self)
+  if (live !== null && live.text !== '') {
+    recordAnnouncement(props.state, {
+      id: live.id,
+      text: live.text,
+      author: live.author ?? '',
+      timestamp: Date.now()
+    })
+  }
+
+  const icons = announcementIcons(props.assetBase)
+  const ready = props.bus !== null
+  const draft = props.state.textAnnouncements.draft
+  const feedback = announcementUi.feedback
+
+  return (
+    <Card>
+      <CardHeader icon={props.icons.headerTextAnnouncements} title="TEXT ANNOUNCEMENTS" />
+      <UiEntity uiTransform={{ flexDirection: 'column', width: '100%' }}>
+        <Label
+          value="<b>Message window</b>"
+          fontSize={16}
+          color={Color4.White()}
+          textAlign="middle-left"
+          uiTransform={{ width: '100%', height: 24, margin: { bottom: 12 } }}
+        />
+        <Input
+          key={`announcement-input-${announcementUi.inputResetSeq}`}
+          placeholder="Write your announcement here"
+          placeholderColor={PLACEHOLDER_COLOR}
+          color={Color4.Black()}
+          fontSize={16}
+          disabled={!ready}
+          textAlign="top-left"
+          uiBackground={{ color: Color4.White() }}
+          uiTransform={{ width: '100%', height: 80, margin: { bottom: 16 } }}
+          onChange={(value) => {
+            props.state.textAnnouncements.draft = value
+            announcementUi.feedback = undefined
+          }}
+          onSubmit={(value) => {
+            props.state.textAnnouncements.draft = value
+            send(props)
+          }}
+        />
+        <UiEntity
+          uiTransform={{
+            width: '100%',
+            height: 40,
+            flexDirection: 'row',
+            alignItems: 'center',
+            margin: { bottom: 10 }
+          }}
+        >
+          <Label
+            value={`${draft.length} / ${ANNOUNCEMENT_MAX_LENGTH}`}
+            fontSize={14}
+            color={draft.length > ANNOUNCEMENT_MAX_LENGTH ? Color4.Red() : MUTED}
+            textAlign="middle-left"
+            uiTransform={{ flexGrow: 1 }}
+          />
+          <TextButton
+            label="Clear Announcements"
+            disabled={!ready}
+            onClick={() => clear(props)}
+          />
+          <PrimaryButton label="Share" disabled={!ready} onClick={() => send(props)} />
+        </UiEntity>
+        <UiEntity
+          uiTransform={{
+            width: '100%',
+            minHeight: 30,
+            flexDirection: 'row',
+            alignItems: 'center',
+            display: feedback === undefined ? 'none' : 'flex'
+          }}
+        >
+          <UiEntity
+            uiTransform={{ width: 24, height: 24, margin: { right: 8 } }}
+            uiBackground={{ textureMode: 'stretch', texture: { src: icons.check } }}
+          />
+          <Label
+            value={feedback === undefined ? '' : feedbackText(feedback, announcementUi.throttledFor)}
+            fontSize={14}
+            color={MUTED}
+            textAlign="middle-left"
+            uiTransform={{ flexGrow: 1 }}
+          />
+        </UiEntity>
+        <History {...props} />
+      </UiEntity>
+    </Card>
+  )
+}
+
+export const textAnnouncementsTab: TabSpec = {
+  id: TabId.TEXT_ANNOUNCEMENTS,
+  icon: 'tabTextAnnouncements',
+  isEnabled: (config) => config.textAnnouncementControl.isEnabled,
+  Component: TextAnnouncements
+}
+
+export { AnnouncementOverlay }
+export type { AnnouncementOverlayProps } from './announcements/Overlay'

package/prefabs/admin-tools/scripts/tabs/VideoControl.tsx

@@ -0,0 +1,156 @@
+import ReactEcs, { Dropdown, UiEntity } from '@dcl/sdk/react-ecs'
+import { VideoPlayer } from '@dcl/sdk/ecs'
+import { TabId } from '../state'
+import type { TabComponent, TabProps, TabSpec } from '../types'
+import { Card, CardHeader } from '../ui'
+import { DclCast } from './video/DclCast'
+import { LiveStream } from './video/LiveStream'
+import { VideoUrl } from './video/VideoUrl'
+import { videoIcons } from './video/icons'
+import { videoTab, type MediaSource } from './video/state'
+import {
+  createControls,
+  enforceMute,
+  isCastSource,
+  isVideoUrl,
+  LIVEKIT_STREAM_SRC,
+  managedScreens
+} from './video/controls'
+import { Button, COLORS, Column, Hint, Row, SectionLabel } from './video/ui'
+
+function sourceOf(src: string): MediaSource {
+  if (isVideoUrl(src)) return 'video-url'
+  if (src === '' || src === LIVEKIT_STREAM_SRC) return 'live'
+  return 'dcl-cast'
+}
+
+export const VideoControl: TabComponent = (props: TabProps) => {
+  const icons = videoIcons(props.assetBase)
+  const screens = managedScreens(props.config)
+  const soundDisabled = props.config.videoControl.disableVideoPlayersSound
+  const selected = Math.min(Math.max(props.state.video.selectedIndex ?? 0, 0), screens.length - 1)
+  const screen = screens[selected]
+  const entity = screen?.entity
+  const src = entity === undefined ? '' : (VideoPlayer.getOrNull(entity)?.src ?? '')
+
+  ReactEcs.useEffect(() => {
+    if (soundDisabled) enforceMute(screens)
+  }, [screens.length, soundDisabled])
+
+  ReactEcs.useEffect(() => {
+    const stillCasting =
+      videoTab.source === 'dcl-cast' && (isCastSource(src) || src === videoTab.activeTrackSid)
+    videoTab.source = stillCasting ? 'dcl-cast' : sourceOf(src)
+  }, [entity])
+
+  if (entity === undefined) {
+    return (
+      <Card>
+        <CardHeader icon={props.icons.headerVideo} title="VIDEO SCREENS" />
+        <Hint text="No video screens linked yet. Add them from the Admin Tools inspector, or turn on 'Link all video players'." />
+      </Card>
+    )
+  }
+
+  const source = videoTab.source ?? sourceOf(src)
+  const urlActive = isVideoUrl(src)
+  const liveActive = src === LIVEKIT_STREAM_SRC && source !== 'dcl-cast'
+  const castActive =
+    src !== '' &&
+    (isCastSource(src) ? source === 'dcl-cast' : src === videoTab.activeTrackSid)
+  const controls = createControls(props.bus, entity, soundDisabled)
+
+  const pick = (value: MediaSource): void => {
+    videoTab.source = value
+  }
+
+  const sourceButton = (
+    value: MediaSource,
+    label: string,
+    icon: string,
+    active: boolean
+  ): ReactEcs.JSX.Element => (
+    <Column uiTransform={{ width: '31%' }}>
+      <Button
+        label={label}
+        icon={icon}
+        fontSize={14}
+        variant={source === value ? 'primary' : 'secondary'}
+        uiTransform={{ width: '100%', height: 36, borderRadius: 6 }}
+        onClick={() => pick(value)}
+      />
+      <UiEntity
+        uiTransform={{ width: '100%', height: 4, margin: { top: 6 }, borderRadius: 2 }}
+        uiBackground={{ color: active ? COLORS.success : COLORS.transparent }}
+      />
+    </Column>
+  )
+
+  return (
+    <Column>
+      <Card>
+        <CardHeader icon={props.icons.headerVideo} title="VIDEO SCREENS" />
+        {screens.length > 1 ? (
+          <Column>
+            <SectionLabel text="Current Screen" uiTransform={{ margin: { bottom: 6 } }} />
+            <Dropdown
+              options={screens.map((item) => item.customName)}
+              selectedIndex={selected}
+              onChange={(index) => {
+                props.state.video.selectedIndex = index
+              }}
+              textAlign="middle-left"
+              fontSize={15}
+              color={COLORS.black}
+              uiBackground={{ color: COLORS.offWhite }}
+              uiTransform={{ width: '100%', height: 36 }}
+            />
+          </Column>
+        ) : null}
+        <SectionLabel text="Media Source" />
+        <Row uiTransform={{ justifyContent: 'space-between', margin: { top: 4 } }}>
+          {sourceButton('video-url', 'VIDEO URL', icons.sourceVideo, urlActive)}
+          {sourceButton('dcl-cast', 'DCL CAST', icons.sourceCast, castActive)}
+          {sourceButton('live', 'STREAM', icons.sourceLive, liveActive)}
+        </Row>
+      </Card>
+      <Card>
+        {source === 'video-url' ? (
+          <VideoUrl
+            entity={entity}
+            icons={icons}
+            controls={controls}
+            soundDisabled={soundDisabled}
+          />
+        ) : null}
+        {source === 'live' ? (
+          <LiveStream
+            self={props.self}
+            entity={entity}
+            icons={icons}
+            controls={controls}
+            soundDisabled={soundDisabled}
+          />
+        ) : null}
+        {source === 'dcl-cast' ? (
+          <DclCast
+            self={props.self}
+            entity={entity}
+            icons={icons}
+            controls={controls}
+            soundDisabled={soundDisabled}
+            playerAddress={props.player?.userId}
+            active={castActive}
+          />
+        ) : null}
+      </Card>
+    </Column>
+  )
+}
+
+export const videoControlTab: TabSpec = {
+  id: TabId.VIDEO,
+  icon: 'tabVideo',
+  isEnabled: (config) => config.videoControl.isEnabled,
+  Component: VideoControl
+}

package/prefabs/admin-tools/scripts/tabs/announcements/Overlay.tsx

@@ -0,0 +1,94 @@
+import ReactEcs, { Label, UiEntity } from '@dcl/sdk/react-ecs'
+import type { Entity } from '@dcl/sdk/ecs'
+import { TextAnnouncements as TextAnnouncementsComponent } from '../../components'
+import type { AdminToolsValue } from '../../components'
+import type { AdminState } from '../../state'
+import { announcementIcons } from './icons'
+import { announcementUi, recordAnnouncement } from './state'
+
+export interface AnnouncementOverlayProps {
+  self: Entity
+  config: AdminToolsValue
+  assetBase: string
+  state: AdminState
+}
+
+export function AnnouncementOverlay(props: AnnouncementOverlayProps): ReactEcs.JSX.Element | null {
+  const announcement = TextAnnouncementsComponent.getOrNull(props.self)
+  if (announcement === null || announcement.text === '') return null
+
+  recordAnnouncement(props.state, {
+    id: announcement.id,
+    text: announcement.text,
+    author: announcement.author ?? '',
+    timestamp: Date.now()
+  })
+
+  if (announcementUi.dismissed.has(announcement.id)) return null
+
+  const icons = announcementIcons(props.assetBase)
+  const author = announcement.author ?? ''
+  const showAuthor =
+    props.config.textAnnouncementControl.showAuthorOnEachAnnouncement && author !== ''
+
+  return (
+    <UiEntity
+      uiTransform={{
+        positionType: 'absolute',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        width: '100%',
+        height: '100%'
+      }}
+    >
+      <UiEntity
+        key={announcement.id}
+        uiTransform={{
+          flexDirection: 'column',
+          width: 400,
+          height: 150,
+          margin: { bottom: 10 },
+          padding: { top: 10, right: 10, bottom: 10, left: 10 },
+          pointerFilter: 'block'
+        }}
+        uiBackground={{ color: { r: 0.15, g: 0.15, b: 0.15, a: 0.95 } }}
+      >
+        <UiEntity
+          uiTransform={{ alignSelf: 'center', justifyContent: 'center', width: 50, height: 50 }}
+          uiBackground={{
+            textureMode: 'stretch',
+            texture: { src: icons.chatMessage },
+            color: { r: 1, g: 1, b: 1, a: 1 }
+          }}
+        />
+        <Label
+          value={announcement.text}
+          fontSize={18}
+          uiTransform={{ width: '100%', flexGrow: 1 }}
+        />
+        {showAuthor ? (
+          <Label
+            value={`- ${author}`}
+            fontSize={14}
+            color={{ r: 0.7, g: 0.7, b: 0.7, a: 1 }}
+            textAlign="bottom-right"
+            uiTransform={{ width: '100%' }}
+          />
+        ) : null}
+        <UiEntity
+          uiTransform={{
+            width: 24,
+            height: 24,
+            positionType: 'absolute',
+            position: { top: 5, right: 5 }
+          }}
+          uiBackground={{ textureMode: 'stretch', texture: { src: icons.close } }}
+          onMouseDown={() => {
+            announcementUi.dismissed.add(announcement.id)
+          }}
+        />
+      </UiEntity>
+    </UiEntity>
+  )
+}

package/prefabs/admin-tools/scripts/tabs/announcements/icons.ts

@@ -0,0 +1,15 @@
+import { iconPath } from '../../icons'
+
+export interface AnnouncementIcons {
+  check: string
+  close: string
+  chatMessage: string
+}
+
+export function announcementIcons(base: string): AnnouncementIcons {
+  return {
+    check: iconPath(base, 'announcements/text-announcement-check.png'),
+    close: iconPath(base, 'announcements/text-announcement-close-button.png'),
+    chatMessage: iconPath(base, 'announcements/text-announcement-chat-message.png')
+  }
+}

package/prefabs/admin-tools/scripts/tabs/announcements/state.ts

@@ -0,0 +1,71 @@
+// Announcement state the shared AdminState does not carry: the per-author rate
+// tracker (the Creator Hub declares `messageRateTracker` but never reads it — it
+// is enforced here), the composer's transient feedback line, and the set of
+// announcement ids the local player dismissed on the overlay.
+import type { AdminState } from '../../state'
+
+export const ANNOUNCEMENT_MAX_LENGTH = 90
+export const ANNOUNCEMENT_COOLDOWN_MS = 3000
+
+export type AnnouncementFeedback = 'sent' | 'cleared' | 'empty' | 'throttled'
+
+export interface AnnouncementUiState {
+  feedback: AnnouncementFeedback | undefined
+  throttledFor: number
+  inputResetSeq: number
+  rateTracker: Map<string, number>
+  dismissed: Set<string>
+}
+
+export const announcementUi: AnnouncementUiState = {
+  feedback: undefined,
+  throttledFor: 0,
+  inputResetSeq: 0,
+  rateTracker: new Map(),
+  dismissed: new Set()
+}
+
+export function cooldownRemaining(author: string, now: number): number {
+  const last = announcementUi.rateTracker.get(author)
+  if (last === undefined) return 0
+  return Math.max(0, ANNOUNCEMENT_COOLDOWN_MS - (now - last))
+}
+
+export function recordSend(author: string, now: number): void {
+  announcementUi.rateTracker.set(author, now)
+}
+
+export function announcementId(timestamp: number, author: string): string {
+  return `${timestamp}-${author}`
+}
+
+export interface AnnouncementRecord {
+  id: string
+  text: string
+  author: string
+  timestamp: number
+}
+
+// The panel history has to pick up announcements made by *other* admins too, so
+// it is fed from the synced component rather than from the send handler.
+export function recordAnnouncement(state: AdminState, entry: AnnouncementRecord): void {
+  if (entry.id === '' || entry.text === '') return
+  const list = state.textAnnouncements.announcements
+  if (list.some((known) => known.id === entry.id)) return
+  list.unshift(entry)
+  const max = Math.max(1, state.textAnnouncements.maxAnnouncements)
+  if (list.length > max) list.length = max
+}
+
+export function feedbackText(feedback: AnnouncementFeedback, throttledFor: number): string {
+  switch (feedback) {
+    case 'sent':
+      return 'Message sent!'
+    case 'cleared':
+      return 'Message cleared!'
+    case 'empty':
+      return 'Write an announcement first.'
+    default:
+      return `Too fast — try again in ${Math.ceil(throttledFor / 1000)}s.`
+  }
+}