diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx index b24077f..5d76a5f 100644 --- a/packages/web/src/App.tsx +++ b/packages/web/src/App.tsx @@ -251,6 +251,7 @@ export function App() { {openAgent && ( setSettingsFor(null)} onCommand={runCommand} notify={notify} diff --git a/packages/web/src/components/AgentSettings.tsx b/packages/web/src/components/AgentSettings.tsx index 81c1af6..cd991e9 100644 --- a/packages/web/src/components/AgentSettings.tsx +++ b/packages/web/src/components/AgentSettings.tsx @@ -3,18 +3,29 @@ import type { AgentAction, AgentView, BrowserSettings, + StreamState, WatchSettings, + WatchTarget, } from '@stream-control/shared'; import { api } from '../api'; interface Props { agent: AgentView; + /** Streamers déjà suivis : ils alimentent la sélection ci-dessous. */ + targets: WatchTarget[]; onClose: () => void; onCommand: (id: string, action: AgentAction, params?: Record) => Promise; notify: (message: string, tone?: 'info' | 'error') => void; } -export function AgentSettings({ agent, onClose, onCommand, notify }: Props) { +const STATE_HINTS: Record = { + public: 'en direct', + private: 'show privé', + offline: 'hors-ligne', + unknown: '', +}; + +export function AgentSettings({ agent, targets, onClose, onCommand, notify }: Props) { const [name, setName] = useState(agent.name); const [host, setHost] = useState(agent.obs.host); const [port, setPort] = useState(String(agent.obs.port)); @@ -27,6 +38,12 @@ export function AgentSettings({ agent, onClose, onCommand, notify }: Props) { const [watch, setWatch] = useState(agent.watch); const [browser, setBrowser] = useState(agent.browser); + // Saisie libre : soit l'opérateur la demande, soit le pseudo déjà configuré + // ne fait pas partie des streamers suivis. + const [manualUsername, setManualUsername] = useState( + () => Boolean(agent.watch.username) && !targets.some((t) => t.username === agent.watch.username), + ); + function patchBrowser(patch: Partial) { setBrowser((current) => ({ ...current, ...patch })); } @@ -241,12 +258,56 @@ export function AgentSettings({ agent, onClose, onCommand, notify }: Props) { diff --git a/packages/web/src/styles.css b/packages/web/src/styles.css index 149d1c6..35caf6a 100644 --- a/packages/web/src/styles.css +++ b/packages/web/src/styles.css @@ -380,6 +380,19 @@ fieldset.group { border: 1px solid var(--border); border-radius: 8px; } +.link-button { + align-self: flex-start; + padding: 2px 0; + background: transparent; + border: none; + color: var(--accent); + font-size: 12px; + cursor: pointer; +} +.link-button:hover { + text-decoration: underline; +} + fieldset.group > legend { padding: 0 6px; font-size: 12px;