Add a "start" button similar to run/runall/restart/restartall

[kno10]

Context

• The current "activate" and "status" widgets are on a global level
• With "requestKernel": false, the run/runall/restart/restartall buttons do not function

Proposal

• add mountStartButton option similar to the other buttons, that requests a new kernel (and that disappears when the kernel is started?)
• add kernel availability indicator (reuse current spinner, style differently via css?)
• hide or disable run/runAll/restart/restartAll buttons when no kernel is available (makes most sense if a "start" button is available instead - little use in having start and restart at the same time)
• add autoRequestKernel option to start a kernel when a run button is clicked
• allow placing the busy indicator left of the buttons, to obtain a stable layout when right-aligned (as the indicator disappears and re-appears)

Tasks and updates

No response

[kno10]

In particular with requestKernel: false, a custom launch button currently appears to be necessary.

FWIW, I currently use the following workaround:

    // Add a status indicator to each input box
    document.querySelectorAll('.thebe-controls').forEach((e) => {
      let start_button = document.createElement("button");
      start_button.classList.add('thebe-button', 'thebe-start-button')
      start_button.innerText = "start";
      start_button.setAttribute("title", "Start a Pyodide kernel in the browser.");
      start_button.onclick = async() => {
        if (!window.thebe.session) {
          await window.thebe.server.ready;
          const session = await window.thebe.server.startNewSession(window.thebe.notebook.rendermime);
          if (session != null) {
            window.thebe.notebook.attachSession(session);
            window.thebe.session = session;
          }
        }
      };
      e.prepend(start_button);
      let kernel_status = document.createElement("div");
      kernel_status.setAttribute("class", "thebe-status");
      e.append(kernel_status);
    });
    window.thebe.on("status", function(evt, data) {
      // Update status indicator
      document.querySelectorAll('.thebe-status').forEach((e) => {
        e.innerText = data["status"];
        if (data["status"] == "server-ready") e.innerText = "No session started.";
      });
      if (data["status"] == "attached") {
        document.querySelectorAll('.thebe-start-button').forEach((e) => { e.style.display = "none"; });
      }
    });