most of UI

priv/static/main.css

@@ -0,0 +1 @@
+@import url(./picker.css);

priv/static/picker.css

@@ -0,0 +1,37 @@
+html {
+  width: 100vw;
+  background-color: #0f0202;
+  color: #dbcfcf;
+}
+
+#switch-list {
+  height: 1em;
+  span:first-of-type {
+    font-weight: bold;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.buttons {
+  display: flex;
+  gap: 1em;
+  flex-direction: column;
+
+  .member-button {
+    padding: 1.666em;
+    font-size: 1.666em;
+    color: inherit;
+    background-color: #3b1010;
+    border: black 3px solid;
+    cursor: &.first {
+      background-color: #a26666;
+    }
+
+    &.other {
+      background-color: #517451;
+    }
+  }
+}

priv/static/picker.mjs

@@ -0,0 +1,64 @@
+const switchListEl = document.querySelector("#switch-list");
+const submitEl = document.querySelector("#submit");
+
+let fronters = (window.fronters = []);
+
+const memberFromButton = (button) => ({
+  name: button.dataset.name,
+  uuid: button.dataset.uuid,
+});
+
+const updateForm = (member) => {
+  const elementPrefix = fronters.length == 1 ? "pf-fronter__" : "pf-backups__";
+  const inputEl = document.querySelector(`#${elementPrefix}${member.uuid}`);
+  inputEl.checked = true;
+
+  if (fronters.length > 0) {
+    submitEl.disabled = false;
+  }
+};
+
+const updateList = () => {
+  switchListEl.innerHTML = fronters
+    .map((member) => `<span>${member.name}</span>`)
+    .join(", ");
+};
+
+const handleButtonClick = (event) => {
+  const button = event.target;
+  const member = memberFromButton(button);
+
+  if (fronters.find((mem) => mem.uuid == member.uuid)) {
+    console.info("already picked, skipping");
+    return;
+  }
+
+  fronters = [...fronters, member];
+
+  // update form
+  updateForm(member);
+
+  // update list
+  updateList();
+
+  if (fronters.length == 1) {
+    button.classList.add("first");
+  } else {
+    button.classList.add("other");
+  }
+};
+
+const reset = () => {
+  submitEl.disabled = true;
+  document.querySelectorAll("input").forEach((el) => {
+    el.checked = false;
+  });
+};
+
+(() => {
+  document.querySelectorAll(".buttons").forEach((el) => {
+    el.addEventListener("click", handleButtonClick);
+  });
+
+  reset();
+})();