Media-Server-Setup/live/src/Tray.jsx

import React from 'react'
import { layout } from './layout.js'
import { streamLabel } from './names.js'

export const STREAM_MIME = 'application/x-vanguard-stream'

// Zero-height when empty. New streams in a custom layout wait here: drag a chip into the dock (any edge, any window,
// or onto a tab bar to stack), or click it to add it as a new column on the right.
export default function Tray({ onPlace }) {
  const pending = layout.use(s => s.pending)
  if (!pending.length) return null
  return (
    <div className="tray" title="new streams — drag into the layout, or click to add on the right">
      {pending.map(s => (
        <div key={s.id} className="chip" draggable
             onDragStart={e => { e.dataTransfer.setData(STREAM_MIME, s.id); e.dataTransfer.setData('text/plain', s.id); e.dataTransfer.effectAllowed = 'move' }}
             onClick={() => onPlace(s.id, { direction: 'right' })}>
          <span className="blink">●</span> {streamLabel(s.id, s)}
        </div>
      ))}
    </div>
  )
}