@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/pages/SettingsPage/components/PublishingCategory/OmnichatSettingsPanel.tsx

@@ -0,0 +1,146 @@
+/* --- omnichat ------------------------------------------------------------------
+   The launchd agent that checks the Reels' comments every minute (`omnichat.mjs agent
+   install`). Turning the agent on answers nothing by itself: only the enabled rules, in each
+   video's Publish stage, on the Omnichat page or, with "Ao publicar", on their own when the Reel
+   goes up (the permanent approval: asks for confirmation). */
+
+import { useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useOmnichatState } from "../../../../hooks/useOmnichat";
+import { useSaveAction } from "../../../../hooks/useSaveAction";
+import { api } from "../../../../lib/api";
+import { formatDayTime } from "../../../../lib/format";
+import type { Settings } from "../../../../types/api";
+import { Power, X } from "../../../../components/icons";
+import { ResultMessage } from "../../../../components/ResultMessage";
+import { SettingRow } from "../../../../components/SettingRow";
+import { Badge } from "../../../../components/ui/badge";
+import { BadgeSkeleton } from "./badges";
+import { CheckField } from "./CheckField";
+import { SettingsCard } from "./SettingsCard";
+
+export function OmnichatSettingsPanel({ omnichat: o, onSave }: { omnichat: Settings["omnichat"]; onSave: () => void }) {
+  const { state, reload } = useOmnichatState(true);
+  const toggle = useSaveAction(reload);
+  const option = useSaveAction(onSave);
+  const [confirming, setConfirming] = useState(false);
+  const saveOption = (values: Partial<Settings["omnichat"]>) => {
+    setConfirming(false);
+    option.save(() => api.settings.omnichat.$post({ json: { values } }));
+  };
+  const agent = state?.agent;
+  const enabled = !!agent?.loaded;
+  const rules = state?.rules ?? [];
+  const enabledRules = rules.filter(r => r.enabled);
+  return (
+    <SettingsCard
+      id="omnichat"
+      title="Omnichat"
+      extra={!state ? <BadgeSkeleton /> : enabled ? <Badge variant="ok">Ligado</Badge> : <Badge>Desligado</Badge>}
+    >
+      <SettingRow label="Agente" help="Confere os comentários a cada minuto, com o studio aberto ou não">
+        <p className="hint">
+          Responde só nas regras ligadas. Não acorda o Mac: dormindo, os comentários esperam e são respondidos quando
+          ele voltar, dentro dos 7 dias que a Meta dá para a DM.
+        </p>
+        {agent?.installed && !agent.node_ok && (
+          <p className="hint warning">O node que o agente usa não existe mais: desligue e ligue de novo.</p>
+        )}
+        {state?.pause && (
+          <p className="hint warning">
+            Em pausa até {formatDayTime(state.pause.until)}: {state.pause.reason}
+          </p>
+        )}
+        <div className="setting-row">
+          <button
+            className={`button${enabled ? "" : " primary"}`}
+            disabled={toggle.saving || !agent}
+            onClick={() => toggle.save(() => api.omnichat.agent.$post({ json: { enable: !enabled } }))}
+          >
+            <Power className="ic" /> {toggle.saving ? "…" : enabled ? "Desligar" : "Ligar"}
+          </button>
+          {agent && <span className="subtle mono">{agent.log.replace(/^.*\/(\.omnichat\/)/, "$1")}</span>}
+        </div>
+        <ResultMessage result={toggle.result} />
+      </SettingRow>
+      <SettingRow label="Ao publicar" help="A permissão permanente para responder sem o clique de ligar">
+        <CheckField
+          value={o.enable_on_publish || confirming}
+          disabled={option.saving}
+          onChange={v =>
+            v
+              ? setConfirming(true)
+              : o.enable_on_publish
+                ? saveOption({ enable_on_publish: false })
+                : setConfirming(false)
+          }
+        >
+          quando o Reel sobe, a regra do vídeo liga sozinha
+        </CheckField>
+        {confirming && !o.enable_on_publish && (
+          <div className="setting-row">
+            <span className="warning">Responder em nome da conta em todo Reel que pedir comentário?</span>
+            <button
+              className="button approve"
+              disabled={option.saving}
+              onClick={() => saveOption({ enable_on_publish: true })}
+            >
+              <Power className="ic" /> {option.saving ? "Gravando…" : "Sim, ligar"}
+            </button>
+            <button className="button" disabled={option.saving} onClick={() => setConfirming(false)}>
+              <X className="ic" /> Cancelar
+            </button>
+          </div>
+        )}
+        <p className="hint">
+          Sem regra, ela nasce do pedido da narração (“comenta REA que eu te mando o link”), com o link achado no vídeo.
+          Não liga a regra que você desligou, nem a que não tem o link que a DM entrega.
+        </p>
+      </SettingRow>
+      <SettingRow label="Citar o Reel" help="Na DM das regras novas; cada regra troca no Omnichat">
+        <CheckField value={o.quote_post} disabled={option.saving} onChange={v => saveOption({ quote_post: v })}>
+          o link do Reel na primeira linha da DM, com a mensagem embaixo
+        </CheckField>
+        <ResultMessage result={option.result} />
+      </SettingRow>
+      <SettingRow label="Regras ligadas" help="De todos os vídeos, dos carrosséis e dos posts de fora do omnivideo">
+        {state && !enabledRules.length && (
+          <p className="hint">
+            Nenhuma regra ligada{rules.length ? ` (${rules.length} desligada${rules.length === 1 ? "" : "s"})` : ""}.
+          </p>
+        )}
+        {!!enabledRules.length && (
+          <ul className="schedule-list">
+            {enabledRules.map(r => (
+              <li key={`${r.type}:${r.id}`}>
+                {r.type === "video" ? (
+                  <Link to="/videos/$slug/$stage" params={{ slug: r.id, stage: "publish" }} className="link">
+                    {r.id}
+                  </Link>
+                ) : r.type === "carousel" ? (
+                  <Link to="/videos/$slug/$stage" params={{ slug: r.id, stage: "carousel-publish" }} className="link">
+                    {r.id} · carrossel
+                  </Link>
+                ) : (
+                  <span className="mono">{r.id}</span>
+                )}
+                <span>
+                  {r.keywords === null ? "qualquer comentário" : r.keywords.join(", ")}
+                  {r.totals ? ` · ${r.totals.dms} ${r.totals.dms === 1 ? "DM" : "DMs"}` : ""}
+                </span>
+                {!r.published && <Badge>Não publicado</Badge>}
+              </li>
+            ))}
+          </ul>
+        )}
+        <p className="hint">
+          Regras, log e posts de fora em{" "}
+          <Link to="/omnichat" search={{}} className="link">
+            Omnichat
+          </Link>
+          .
+        </p>
+      </SettingRow>
+    </SettingsCard>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/SaveBar.tsx

@@ -0,0 +1,33 @@
+import type { ActionResult } from "../../../../lib/api";
+import { ArrowCounterClockwise, FloppyDisk } from "../../../../components/icons";
+import { ResultMessage } from "../../../../components/ResultMessage";
+
+export function SaveBar({
+  changed,
+  saving,
+  onSave,
+  onDiscard,
+  result,
+}: {
+  changed: boolean;
+  saving: boolean;
+  onSave: () => void;
+  onDiscard: () => void;
+  result: ActionResult;
+}) {
+  return (
+    <div className="setting-bar">
+      <div className="setting-row">
+        <button className="button primary" disabled={saving || !changed} onClick={onSave}>
+          <FloppyDisk className="ic" /> {saving ? "Gravando…" : "Gravar"}
+        </button>
+        {changed && (
+          <button className="button" disabled={saving} onClick={onDiscard}>
+            <ArrowCounterClockwise className="ic" /> Descartar
+          </button>
+        )}
+      </div>
+      <ResultMessage result={result} />
+    </div>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/SchedulePanel.tsx

@@ -0,0 +1,132 @@
+/* --- schedule ------------------------------------------------------------------------
+   The launchd agent that publishes what was scheduled in the Publish stage, and its limits
+   (`publish.schedule`). Turning it on publishes nothing by itself: only what you scheduled. */
+
+import { Link } from "@tanstack/react-router";
+import { useSaveAction } from "../../../../hooks/useSaveAction";
+import { useSchedule } from "../../../../hooks/useSchedule";
+import { useSettingsSection } from "../../../../hooks/useSettingsSection";
+import { api } from "../../../../lib/api";
+import { formatDayTime } from "../../../../lib/format";
+import { formatPlatformList } from "../../../../lib/platforms";
+import { STATE_LABEL, decimalOf } from "../../../../lib/publish-settings";
+import { Power } from "../../../../components/icons";
+import { ResultMessage } from "../../../../components/ResultMessage";
+import { SettingRow } from "../../../../components/SettingRow";
+import { Badge } from "../../../../components/ui/badge";
+import { BadgeSkeleton } from "./badges";
+import { SaveBar } from "./SaveBar";
+import { SettingsCard } from "./SettingsCard";
+import type { PanelProps, Publish } from "./types";
+
+export function SchedulePanel({ publish: p, accounts, loading, onSave, reloadAccounts }: PanelProps) {
+  const s = useSettingsSection("schedule", p.schedule, onSave);
+  const { schedule, error: scheduleError, reload: reloadSchedule } = useSchedule();
+  const toggle = useSaveAction(() => {
+    reloadAccounts();
+    reloadSchedule();
+  });
+  const agent = schedule?.agent ?? accounts?.scheduler;
+  const enabled = !!agent?.loaded;
+  const number = (k: keyof Publish["schedule"], value: string) => s.set(k, decimalOf(value));
+  const error = scheduleError ?? schedule?.error;
+  return (
+    <SettingsCard
+      id="schedule"
+      title="Agenda"
+      extra={
+        !agent ? (
+          loading ? (
+            <BadgeSkeleton />
+          ) : null
+        ) : enabled ? (
+          <Badge variant="ok">Ligada</Badge>
+        ) : (
+          <Badge>Desligada</Badge>
+        )
+      }
+    >
+      <SettingRow label="Agente" help="Confere a cada minuto, com o studio aberto ou não">
+        <p className="hint">
+          Publica na hora o que você agendou na etapa Publicar. Não acorda o Mac: dormindo ou desligado, sobe quando ele
+          voltar, até o atraso máximo abaixo.
+        </p>
+        {agent?.installed && !agent.node_ok && (
+          <p className="hint warning">O node que o agente usa não existe mais: desligue e ligue de novo.</p>
+        )}
+        <div className="setting-row">
+          <button
+            className={`button${enabled ? "" : " primary"}`}
+            disabled={toggle.saving || !agent}
+            onClick={() => toggle.save(() => api.publish.schedule.agent.$post({ json: { enable: !enabled } }))}
+          >
+            <Power className="ic" /> {toggle.saving ? "…" : enabled ? "Desligar" : "Ligar"}
+          </button>
+          {agent && <span className="subtle mono">{agent.log.replace(/^.*\/(\.schedule\/)/, "$1")}</span>}
+        </div>
+        <ResultMessage result={toggle.result} />
+      </SettingRow>
+      <SettingRow label="Atraso máximo" help="Com o Mac fora do ar na hora, até quantas horas depois ainda publica">
+        <input
+          type="number"
+          min={0.25}
+          max={168}
+          step={0.25}
+          value={s.values.max_delay_h}
+          disabled={s.saving}
+          onChange={e => number("max_delay_h", e.target.value)}
+        />
+      </SettingRow>
+      <SettingRow
+        label="Novas tentativas"
+        help="Quantas vezes tenta quando uma plataforma falha, e a cada quantos minutos"
+      >
+        <div className="setting-row">
+          <input
+            type="number"
+            min={1}
+            max={10}
+            step={1}
+            value={s.values.attempts}
+            disabled={s.saving}
+            onChange={e => number("attempts", e.target.value)}
+            aria-label="tentativas"
+          />
+          <input
+            type="number"
+            min={1}
+            max={120}
+            step={1}
+            value={s.values.interval_min}
+            disabled={s.saving}
+            onChange={e => number("interval_min", e.target.value)}
+            aria-label="Minutos entre tentativas"
+          />
+          <span className="subtle">Vezes, a cada (min)</span>
+        </div>
+      </SettingRow>
+      <SaveBar changed={s.changed} saving={s.saving} onSave={() => s.save()} onDiscard={s.discard} result={s.result} />
+      <SettingRow label="Agendados" help="De todos os vídeos; agende e cancele na etapa Publicar de cada um">
+        {error && <p className="response error">{error}</p>}
+        {schedule && !schedule.items?.length && !error && <p className="hint">Nada agendado.</p>}
+        {!!schedule?.items?.length && (
+          <ul className="schedule-list">
+            {schedule.items.map(i => (
+              <li key={i.dir}>
+                <Link to="/videos/$slug/$stage" params={{ slug: i.slug, stage: "publish" }} className="link">
+                  {i.slug}
+                </Link>
+                <span>
+                  {formatDayTime(i.when)} {formatPlatformList(i.platforms)}
+                </span>
+                <Badge variant={i.state === "failed" || i.state === "missed" ? "warning" : undefined}>
+                  {STATE_LABEL[i.state] ?? i.state}
+                </Badge>
+              </li>
+            ))}
+          </ul>
+        )}
+      </SettingRow>
+    </SettingsCard>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/SettingsCard.tsx

@@ -0,0 +1,47 @@
+/* one collapsible card of a SettingsCardGroup */
+
+import { useContext, type ReactNode } from "react";
+import { ArrowDown } from "../../../../components/icons";
+import { Accordion } from "./SettingsCardGroup";
+
+export function SettingsCard({
+  id,
+  title,
+  icon,
+  extra,
+  children,
+}: {
+  id: string;
+  title: string;
+  icon?: ReactNode;
+  extra?: ReactNode;
+  children: ReactNode;
+}) {
+  const { open, toggle } = useContext(Accordion);
+  const active = open === id;
+  return (
+    <section className={`panel collapsible${active ? " open" : ""}`}>
+      <h2 className="panel-top">
+        <button
+          type="button"
+          className="panel-toggle"
+          aria-expanded={active}
+          aria-controls={`card-${id}`}
+          onClick={() => toggle(id)}
+        >
+          <span className="panel-name">
+            {icon}
+            {title}
+          </span>
+          <span className="right-panel">
+            {extra}
+            <ArrowDown className="ic chevron" weight="bold" />
+          </span>
+        </button>
+      </h2>
+      <div id={`card-${id}`} hidden={!active}>
+        {children}
+      </div>
+    </section>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/SettingsCardGroup.tsx

@@ -0,0 +1,19 @@
+/* --- collapsible cards -----------------------------------------------------------
+   All start collapsed and only one stays open at a time (opening one closes the other). The
+   content stays mounted, only hidden: what was typed and a login in progress are not lost. */
+
+import { createContext, useState, type ReactNode } from "react";
+
+export const Accordion = createContext<{ open: string | null; toggle: (id: string) => void }>({
+  open: null,
+  toggle: () => {},
+});
+
+export function SettingsCardGroup({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState<string | null>(null);
+  return (
+    <Accordion.Provider value={{ open, toggle: id => setOpen(x => (x === id ? null : id)) }}>
+      {children}
+    </Accordion.Provider>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/TextPanel.tsx

@@ -0,0 +1,55 @@
+/* --- fixed text ------------------------------------------------------------------ */
+
+import { useSettingsSection } from "../../../../hooks/useSettingsSection";
+import { hashtagsToList, hashtagsToText } from "../../../../lib/publish-settings";
+import { SettingRow } from "../../../../components/SettingRow";
+import { SaveBar } from "./SaveBar";
+import { SettingsCard } from "./SettingsCard";
+import type { Publish } from "./types";
+
+export function TextPanel({ publish: p, onSave }: { publish: Publish; onSave: () => void }) {
+  const t = p.text;
+  const s = useSettingsSection("text", { ...t, hashtags: hashtagsToText(t.hashtags) }, onSave, v => ({
+    ...v,
+    hashtags: hashtagsToList(v.hashtags),
+  }));
+  return (
+    <SettingsCard id="text" title="Texto fixo">
+      <p className="hint">Entra no fim de toda descrição e legenda, sem repetir o que o texto do vídeo já tem.</p>
+      <SettingRow label="Rodapé do YouTube" help="No fim da descrição">
+        <textarea
+          rows={3}
+          value={s.values.footer_youtube}
+          disabled={s.saving}
+          onChange={e => s.set("footer_youtube", e.target.value)}
+        />
+      </SettingRow>
+      <SettingRow label="Rodapé do Instagram" help="No fim da legenda">
+        <textarea
+          rows={3}
+          value={s.values.footer_instagram}
+          disabled={s.saving}
+          onChange={e => s.set("footer_instagram", e.target.value)}
+        />
+      </SettingRow>
+      <SettingRow label="Rodapé do TikTok" help="No fim da legenda">
+        <textarea
+          rows={3}
+          value={s.values.footer_tiktok}
+          disabled={s.saving}
+          onChange={e => s.set("footer_tiktok", e.target.value)}
+        />
+      </SettingRow>
+      <SettingRow label="Hashtags" help="Separadas por espaço; o Instagram aceita até 30 por legenda">
+        <input
+          value={s.values.hashtags}
+          disabled={s.saving}
+          placeholder="#omnivideo #motion"
+          spellCheck={false}
+          onChange={e => s.set("hashtags", e.target.value)}
+        />
+      </SettingRow>
+      <SaveBar changed={s.changed} saving={s.saving} onSave={() => s.save()} onDiscard={s.discard} result={s.result} />
+    </SettingsCard>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/TiktokPanel.tsx

@@ -0,0 +1,123 @@
+/* --- TikTok ---------------------------------------------------------------------- */
+
+import { useSettingsSection } from "../../../../hooks/useSettingsSection";
+import { TIKTOK_PRIVACY_OPTIONS, coverToNumber, coverToText } from "../../../../lib/publish-settings";
+import { ApiKeyField } from "../../../../components/ApiKeyField";
+import { PlatformIcon } from "../../../../components/PlatformIcon";
+import { SettingRow } from "../../../../components/SettingRow";
+import { Picker } from "../../../../components/ui/picker";
+import { AccountStatus } from "./AccountStatus";
+import { connectedBadge } from "./badges";
+import { BrowserConnect } from "./BrowserConnect";
+import { CheckField } from "./CheckField";
+import { SaveBar } from "./SaveBar";
+import { SettingsCard } from "./SettingsCard";
+import type { PanelProps } from "./types";
+
+export function TiktokPanel({ publish: p, accounts, loading, onSave, reloadAccounts }: PanelProps) {
+  const s = useSettingsSection("tiktok", { ...p.tiktok, cover_at_s: coverToText(p.tiktok.cover_at_s) }, onSave, v => ({
+    ...v,
+    cover_at_s: coverToNumber(v.cover_at_s),
+  }));
+  const tt = accounts?.tiktok;
+  const hasKeys = !!p.keys.tiktok_client_key.masked && !!p.keys.tiktok_client_secret.masked;
+  const afterKey = () => {
+    onSave();
+    reloadAccounts(true);
+  };
+  const direct = s.values.mode === "direct";
+  return (
+    <SettingsCard
+      id="tiktok"
+      title="TikTok"
+      icon={<PlatformIcon id="tiktok" />}
+      extra={connectedBadge(tt?.ready, loading)}
+    >
+      <SettingRow label="Conta" help="O perfil que recebe os vídeos">
+        <AccountStatus account={tt} loading={loading} />
+        {tt?.ready && tt.expires && (
+          <p className="hint">
+            O login vale até {new Date(tt.expires).toLocaleDateString("pt-BR")}; o acesso se renova sozinho a cada uso.
+          </p>
+        )}
+        <BrowserConnect platform="tiktok" ready={!!tt?.ready} hasKeys={hasKeys} onConnect={afterKey} />
+      </SettingRow>
+      <ApiKeyField
+        keyStatus={p.keys.tiktok_client_key}
+        label="Client key"
+        onSave={afterKey}
+        help={
+          <>
+            TikTok for Developers → seu app → Credentials (<code>reference/publish.md</code>)
+          </>
+        }
+      />
+      <ApiKeyField keyStatus={p.keys.tiktok_client_secret} label="Client secret" onSave={afterKey} />
+
+      <SettingRow label="Como publica" help="Direto no perfil, ou como rascunho para você terminar no app">
+        <Picker
+          aria-label="Como publica"
+          value={s.values.mode}
+          disabled={s.saving}
+          onChange={v => s.set("mode", v as "direct" | "draft")}
+          options={[
+            { value: "direct", label: "Direto no perfil" },
+            { value: "draft", label: "Rascunho na caixa de entrada do app" },
+          ]}
+        />
+      </SettingRow>
+      {direct && (
+        <>
+          <SettingRow label="Quem vê" help="A escolha inicial do botão Publicar">
+            <Picker
+              aria-label="Quem vê"
+              value={s.values.privacy}
+              disabled={s.saving}
+              onChange={v => s.set("privacy", v)}
+              options={TIKTOK_PRIVACY_OPTIONS.map(([k, name]) => ({ value: k, label: name }))}
+            />
+            {s.values.privacy !== "SELF_ONLY" && !s.values.audited && (
+              <p className="hint warning">
+                Sem a auditoria do TikTok, o app só publica como "Só eu", mesmo pedindo outra coisa.
+              </p>
+            )}
+          </SettingRow>
+          <SettingRow label="App auditado" help="Marque depois de o TikTok aprovar a auditoria da Content Posting API">
+            <CheckField value={s.values.audited} onChange={v => s.set("audited", v)} disabled={s.saving}>
+              O app foi auditado: o vídeo sai com a privacidade pedida
+            </CheckField>
+          </SettingRow>
+          <SettingRow label="Interações">
+            <CheckField value={s.values.comments} onChange={v => s.set("comments", v)} disabled={s.saving}>
+              Permitir comentários
+            </CheckField>
+            <CheckField value={s.values.duet} onChange={v => s.set("duet", v)} disabled={s.saving}>
+              Permitir dueto
+            </CheckField>
+            <CheckField value={s.values.stitch} onChange={v => s.set("stitch", v)} disabled={s.saving}>
+              Permitir costura (stitch)
+            </CheckField>
+          </SettingRow>
+          <SettingRow label="Declarações">
+            <CheckField value={s.values.ai_content} onChange={v => s.set("ai_content", v)} disabled={s.saving}>
+              Conteúdo gerado por IA (o TikTok mostra o selo)
+            </CheckField>
+          </SettingRow>
+          <SettingRow label="Capa" help="Vazio = a escolha do TikTok">
+            <div className="setting-row">
+              <input
+                className="short"
+                inputMode="decimal"
+                value={s.values.cover_at_s}
+                disabled={s.saving}
+                onChange={e => s.set("cover_at_s", e.target.value)}
+              />
+              <span className="subtle">Segundos do vídeo</span>
+            </div>
+          </SettingRow>
+        </>
+      )}
+      <SaveBar changed={s.changed} saving={s.saving} onSave={() => s.save()} onDiscard={s.discard} result={s.result} />
+    </SettingsCard>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/YoutubePanel.tsx

@@ -0,0 +1,100 @@
+/* --- YouTube ---------------------------------------------------------------------- */
+
+import { useSettingsSection } from "../../../../hooks/useSettingsSection";
+import { PRIVACY_OPTIONS, youtubeCategoryOptions } from "../../../../lib/publish-settings";
+import { ApiKeyField } from "../../../../components/ApiKeyField";
+import { PlatformIcon } from "../../../../components/PlatformIcon";
+import { SettingRow } from "../../../../components/SettingRow";
+import { Picker } from "../../../../components/ui/picker";
+import { AccountStatus } from "./AccountStatus";
+import { connectedBadge } from "./badges";
+import { BrowserConnect } from "./BrowserConnect";
+import { CheckField } from "./CheckField";
+import { SaveBar } from "./SaveBar";
+import { SettingsCard } from "./SettingsCard";
+import type { PanelProps } from "./types";
+
+export function YoutubePanel({ publish: p, accounts, loading, onSave, reloadAccounts }: PanelProps) {
+  const s = useSettingsSection("youtube", p.youtube, onSave);
+  const yt = accounts?.youtube;
+  const hasKeys = !!p.keys.youtube_client_id.masked && !!p.keys.youtube_client_secret.masked;
+  const afterKey = () => {
+    onSave();
+    reloadAccounts(true);
+  };
+  return (
+    <SettingsCard
+      id="youtube"
+      title="YouTube"
+      icon={<PlatformIcon id="youtube" />}
+      extra={connectedBadge(yt?.ready, loading)}
+    >
+      <SettingRow label="Conta" help="O canal que recebe os vídeos">
+        <AccountStatus account={yt} loading={loading} />
+        <BrowserConnect platform="youtube" ready={!!yt?.ready} hasKeys={hasKeys} onConnect={afterKey} />
+      </SettingRow>
+      <ApiKeyField
+        keyStatus={p.keys.youtube_client_id}
+        label="Client ID"
+        onSave={afterKey}
+        help={
+          <>
+            Google Cloud → Clientes → app para computador (<code>reference/publish.md</code>)
+          </>
+        }
+      />
+      <ApiKeyField keyStatus={p.keys.youtube_client_secret} label="Client secret" onSave={afterKey} />
+
+      <SettingRow label="Privacidade padrão" help="A escolha inicial do botão Publicar">
+        <Picker
+          aria-label="Privacidade padrão"
+          value={s.values.privacy}
+          disabled={s.saving}
+          onChange={v => s.set("privacy", v)}
+          options={PRIVACY_OPTIONS.map(([k, name]) => ({ value: k, label: name }))}
+        />
+        {s.values.privacy !== "private" && !s.values.audited && (
+          <p className="hint warning">
+            Sem a auditoria do Google, o YouTube trava o vídeo como privado, mesmo pedindo outra coisa.
+          </p>
+        )}
+      </SettingRow>
+      <SettingRow label="Projeto auditado" help="Marque depois de o Google aprovar o formulário de auditoria da API">
+        <CheckField value={s.values.audited} onChange={v => s.set("audited", v)} disabled={s.saving}>
+          O projeto foi auditado: vídeo público e não listado ficam como pedido
+        </CheckField>
+      </SettingRow>
+      <SettingRow label="Categoria">
+        <Picker
+          aria-label="Categoria"
+          value={s.values.category}
+          disabled={s.saving}
+          onChange={v => s.set("category", v)}
+          options={youtubeCategoryOptions(s.values.category)}
+        />
+      </SettingRow>
+      <SettingRow label="Idioma" help="Idioma do título e do áudio, como pt-BR">
+        <input
+          className="short"
+          value={s.values.language}
+          disabled={s.saving}
+          spellCheck={false}
+          onChange={e => s.set("language", e.target.value)}
+        />
+      </SettingRow>
+      <SettingRow label="Declarações">
+        <CheckField value={s.values.made_for_kids} onChange={v => s.set("made_for_kids", v)} disabled={s.saving}>
+          Feito para crianças
+        </CheckField>
+        <CheckField
+          value={s.values.synthetic_content}
+          onChange={v => s.set("synthetic_content", v)}
+          disabled={s.saving}
+        >
+          tem conteúdo sintético realista (o YouTube mostra o aviso)
+        </CheckField>
+      </SettingRow>
+      <SaveBar changed={s.changed} saving={s.saving} onSave={() => s.save()} onDiscard={s.discard} result={s.result} />
+    </SettingsCard>
+  );
+}