@odori/cli 0.0.7 → 0.0.9

package/studio/src/components/Settings.tsx

@@ -2,15 +2,24 @@ import {useEffect, useRef, useState} from "react";
 import {Button, Icon} from "./ui";
 import {useStartSound} from "../settings";
 import {useTheme, type Theme} from "../theme";
+import {INTEGRATIONS_CHANGED, loadProviders, type ProviderStatus} from "../integrations";
 
 /**
  * The workspace preferences, behind one control in the header.
  *
- * This replaced a three-button theme switcher. Theme was the only preference
- * Studio had, so spending a permanent row of chrome on it was fine right up
- * until there was a second one; three more buttons for sound would have made
- * the header a settings panel that never closes. A gear says "there are
- * choices here" in the space one of the old buttons used.
+ * A dialog with pages rather than a popover: the menu was right when the
+ * choices were two radio groups, and wrong the moment a page's worth of
+ * audio configuration — the start-sound default and the provider keys —
+ * had to fold into a strip beside the gear. A dialog gives each area a page
+ * and room to grow one setting at a time, the way every tool this one sits
+ * beside does it.
+ *
+ * Provider keys live here because a key is configuration of the machine,
+ * not material of the project. The form is one-way about secrets: a key can
+ * be typed and sent to the local server, but it never comes back — status
+ * is a source ("environment", "stored") and nothing else. A key from the
+ * environment wins over a stored one and cannot be edited here, because
+ * the place to change an environment is the environment.
  */
 const THEMES: Array<{id: Theme; label: string; hint: string}> = [
   {id: "system", label: "System", hint: "Follow the operating system"},
@@ -23,87 +32,294 @@ const SOUNDS = [
   {id: "off" as const, label: "Off", hint: "Open every video muted"},
 ];
 
+const PAGES = [
+  {id: "appearance" as const, label: "Appearance"},
+  {id: "audio" as const, label: "Audio"},
+];
+
+type Page = (typeof PAGES)[number]["id"];
+
 export const Settings = () => {
   const [open, setOpen] = useState(false);
-  const {theme, setTheme} = useTheme();
-  const [sound, setSound] = useStartSound();
-  const wrapper = useRef<HTMLDivElement>(null);
   const trigger = useRef<HTMLButtonElement>(null);
 
-  useEffect(() => {
-    if (!open) return undefined;
-    const onPointerDown = (event: PointerEvent) => {
-      if (!wrapper.current?.contains(event.target as Node)) setOpen(false);
-    };
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      setOpen(false);
-      // Closing with the keyboard has to put the focus somewhere, and the
-      // control that opened the menu is the only place that is not a surprise.
-      trigger.current?.focus();
-    };
-    // Capture, so a click that also does something else still closes the menu.
-    document.addEventListener("pointerdown", onPointerDown, true);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown, true);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-
   return (
-    <div className="settings" ref={wrapper}>
+    <div className="settings">
       <Button
         ref={trigger}
         icon
         active={open}
         aria-label="Settings"
         aria-expanded={open}
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
         title="Settings"
-        onClick={() => setOpen((value) => !value)}
+        onClick={() => setOpen(true)}
       >
         <Icon name="settings" />
       </Button>
 
       {open ? (
-        <div className="menu settings-menu" role="menu" aria-label="Settings">
-          <p className="menu-heading">Theme</p>
-          {THEMES.map((option) => (
+        <SettingsDialog
+          onClose={() => {
+            setOpen(false);
+            // Closing has to put the focus somewhere, and the control that
+            // opened the dialog is the only place that is not a surprise.
+            trigger.current?.focus();
+          }}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+const SettingsDialog = ({onClose}: {onClose: () => void}) => {
+  const [page, setPage] = useState<Page>("appearance");
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+
+  return (
+    <div className="overlay" onPointerDown={onClose}>
+      <div
+        className="settings-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Settings"
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <nav className="settings-nav" aria-label="Settings pages">
+          <p className="settings-nav-title">Settings</p>
+          {PAGES.map((item) => (
             <button
-              key={option.id}
+              key={item.id}
               type="button"
-              role="menuitemradio"
-              aria-checked={theme === option.id}
-              className="menu-item"
-              data-selected={theme === option.id ? "true" : undefined}
-              onClick={() => setTheme(option.id)}
+              className="settings-nav-item"
+              data-selected={page === item.id ? "true" : undefined}
+              aria-current={page === item.id ? "page" : undefined}
+              onClick={() => setPage(item.id)}
             >
-              <span>{option.label}</span>
-              <span className="menu-hint">{option.hint}</span>
+              {item.label}
             </button>
           ))}
+        </nav>
 
-          <p className="menu-heading">Sound</p>
+        <div className="settings-body">
+          <div className="settings-body-head">
+            <h2 className="settings-body-title">{PAGES.find((item) => item.id === page)?.label}</h2>
+            <Button icon aria-label="Close settings" title="Close" onClick={onClose}>
+              <Icon name="close" />
+            </Button>
+          </div>
+          {page === "appearance" ? <AppearancePage /> : null}
+          {page === "audio" ? <AudioPage /> : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const AppearancePage = () => {
+  const {theme, setTheme} = useTheme();
+
+  return (
+    <section className="settings-group" aria-label="Theme">
+      <p className="settings-group-title">Theme</p>
+      <div className="settings-options" role="radiogroup" aria-label="Theme">
+        {THEMES.map((option) => (
+          <button
+            key={option.id}
+            type="button"
+            role="radio"
+            aria-checked={theme === option.id}
+            className="settings-option"
+            data-selected={theme === option.id ? "true" : undefined}
+            onClick={() => setTheme(option.id)}
+          >
+            <span>{option.label}</span>
+            <span className="settings-option-hint">{option.hint}</span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const AudioPage = () => {
+  const [sound, setSound] = useStartSound();
+  const [providers, setProviders] = useState<ProviderStatus[] | null>(null);
+
+  /* Fetched when the page shows rather than with Studio: the status can
+     change underneath a long session (a key exported in another shell), and
+     opening settings is the moment it has to be right. */
+  useEffect(() => {
+    loadProviders()
+      .then(setProviders)
+      .catch(() => setProviders(null));
+  }, []);
+
+  return (
+    <>
+      <section className="settings-group" aria-label="Sound">
+        <p className="settings-group-title">Sound</p>
+        <div className="settings-options" role="radiogroup" aria-label="Sound">
           {SOUNDS.map((option) => (
             <button
               key={option.id}
               type="button"
-              role="menuitemradio"
+              role="radio"
               aria-checked={sound === option.id}
-              className="menu-item"
+              className="settings-option"
               data-selected={sound === option.id ? "true" : undefined}
               onClick={() => setSound(option.id)}
             >
               <span>{option.label}</span>
-              <span className="menu-hint">{option.hint}</span>
+              <span className="settings-option-hint">{option.hint}</span>
             </button>
           ))}
-          {/* Changing it now would mute or unmute the video being watched,
-              which is not what a default is. */}
-          <p className="menu-note">Applies to the next video you open.</p>
         </div>
+        {/* Changing it now would mute or unmute the video being watched,
+            which is not what a default is. */}
+        <p className="settings-note">Applies to the next video you open.</p>
+      </section>
+
+      <section className="settings-group" aria-label="Integrations">
+        <p className="settings-group-title">Integrations</p>
+        {(providers ?? []).map((provider) => (
+          <ProviderKeyRow
+            key={provider.name}
+            provider={provider}
+            onChanged={async () => {
+              setProviders(await loadProviders());
+              window.dispatchEvent(new Event(INTEGRATIONS_CHANGED));
+            }}
+          />
+        ))}
+      </section>
+    </>
+  );
+};
+
+const ProviderKeyRow = ({provider, onChanged}: {provider: ProviderStatus; onChanged: () => Promise<void>}) => {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const submit = async (key: string) => {
+    setBusy(true);
+    setMessage(null);
+    try {
+      const response = await fetch("/__odori/integrations", {
+        method: "POST",
+        headers: {"content-type": "application/json"},
+        body: JSON.stringify({provider: provider.name, key}),
+      });
+      const body = (await response.json()) as {error?: string; verified?: boolean | null};
+      if (!response.ok) {
+        setMessage(body.error ?? "The key was not accepted.");
+        return;
+      }
+      setDraft("");
+      setEditing(false);
+      setMessage(
+        key === ""
+          ? "Key removed."
+          : body.verified
+            ? "Checked against the provider and stored on this machine."
+            : "Stored. The provider could not be reached to check it, so the first generation will tell.",
+      );
+      await onChanged();
+    } catch {
+      setMessage("Studio could not reach its own server.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const connected = provider.source !== null;
+  const fromEnvironment = provider.source === "environment";
+  const status = fromEnvironment
+    ? `Connected from ${provider.keyVariable}`
+    : connected
+      ? "Connected"
+      : "Not connected";
+
+  return (
+    <div className="settings-provider">
+      <div className="settings-provider-head">
+        <div className="settings-provider-id">
+          <span className="settings-provider-name">{provider.title}</span>
+          <span className="settings-provider-sub" data-tone={connected ? "ok" : undefined}>
+            <span className="settings-provider-dot" aria-hidden="true" />
+            {status}
+            {" · "}
+            <a href={provider.docsUrl} target="_blank" rel="noreferrer">
+              docs
+            </a>
+          </span>
+        </div>
+        {/* One action at a time. The environment case has none: the place to
+            change an environment is the environment. */}
+        {fromEnvironment ? null : connected ? (
+          <Button disabled={busy} onClick={() => void submit("")}>
+            Disconnect
+          </Button>
+        ) : editing ? null : (
+          <Button
+            onClick={() => {
+              setEditing(true);
+              setMessage(null);
+            }}
+          >
+            Connect
+          </Button>
+        )}
+      </div>
+      {editing && !connected ? (
+        <>
+          <form
+            className="settings-provider-form"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (draft.trim()) void submit(draft.trim());
+            }}
+          >
+            <input
+              className="settings-integration-input"
+              type="password"
+              autoFocus
+              autoComplete="off"
+              placeholder={provider.keyVariable}
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              disabled={busy}
+              aria-label={`${provider.title} API key`}
+            />
+            <Button variant="primary" disabled={busy || !draft.trim()} onClick={() => void submit(draft.trim())}>
+              {busy ? "Checking…" : "Save"}
+            </Button>
+            <Button
+              disabled={busy}
+              onClick={() => {
+                setEditing(false);
+                setDraft("");
+              }}
+            >
+              Cancel
+            </Button>
+          </form>
+          <p className="settings-note">
+            Checked against the provider, then stored in <code>~/.config/odori</code> on this machine — never shown
+            again. A key in the environment wins over a stored one.
+          </p>
+        </>
       ) : null}
+      {message ? <p className="settings-note">{message}</p> : null}
     </div>
   );
 };

package/studio/src/components/ui.tsx

@@ -72,7 +72,8 @@ export const Icon = ({
     | "external"
     | "sidebar"
     | "settings"
-    | "search";
+    | "search"
+    | "close";
 }) => {
   const paths: Record<string, ReactNode> = {
     play: <path d="M4.5 2.8v8.4l7-4.2z" fill="currentColor" />,
@@ -92,6 +93,15 @@ export const Icon = ({
         <circle cx="12" cy="12" r="3" />
       </g>
     ),
+    close: (
+      <path
+        d="M3.6 3.6l6.8 6.8M10.4 3.6l-6.8 6.8"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.2"
+      />
+    ),
     sun: (
       <>
         <circle cx="7" cy="7" r="2.5" fill="none" stroke="currentColor" strokeWidth="1.2" />

package/studio/src/integrations.ts

@@ -0,0 +1,29 @@
+/**
+ * Provider status, shared by the two places that show it.
+ *
+ * The settings menu owns configuration and the Integrations view owns
+ * generation, so both need to know what is connected. Status is a source and
+ * nothing else — a key can be sent to the local server, but it never comes
+ * back.
+ */
+export type ProviderStatus = {
+  name: string;
+  title: string;
+  kind: string;
+  keyVariable: string;
+  docsUrl: string;
+  source: "environment" | "stored" | null;
+};
+
+export const loadProviders = async (): Promise<ProviderStatus[]> => {
+  const response = await fetch("/__odori/integrations");
+  if (!response.ok) throw new Error(`${response.status}`);
+  const body = (await response.json()) as {providers: ProviderStatus[]};
+  return body.providers;
+};
+
+/**
+ * Fired on `window` after a key is stored or removed, so a view that gates on
+ * connection state catches up without waiting for a reload.
+ */
+export const INTEGRATIONS_CHANGED = "odori:integrations-changed";