Further improve detail display and work on inline latency display

core/templates/mixins/window-content/persona-form.html

@@ -0,0 +1,165 @@
+{% include 'mixins/partials/notify.html' %}
+{% if page_title is not None %}
+  <h1 class="title is-4">{{ page_title }}</h1>
+{% endif %}
+{% if page_subtitle is not None %}
+  <h1 class="subtitle">{{ page_subtitle }}</h1>
+{% endif %}
+{% load crispy_forms_tags %}
+
+<style>
+  .persona-tab-pane {
+    display: none;
+  }
+
+  .persona-tab-pane.is-active {
+    display: block;
+  }
+
+  .persona-tab-pane-body {
+    max-height: min(55vh, 34rem);
+    overflow-y: auto;
+    padding-right: 0.25rem;
+  }
+</style>
+
+<form
+  id="persona-form-tabs"
+  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+  hx-post="{{ submit_url }}"
+  hx-target="#modals-here"
+  hx-swap="innerHTML">
+  {% csrf_token %}
+  {% for hidden in form.hidden_fields %}
+    {{ hidden }}
+  {% endfor %}
+  {% if form.non_field_errors %}
+    <article class="message is-danger">
+      <div class="message-body">{{ form.non_field_errors }}</div>
+    </article>
+  {% endif %}
+
+  <div class="tabs is-small is-toggle is-toggle-rounded" style="margin-bottom: 0.75rem;">
+    <ul>
+      <li class="is-active">
+        <a href="#" data-persona-tab-target="identity">
+          <span class="icon is-small"><i class="fa-solid fa-id-card"></i></span>
+          <span>Identity</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" data-persona-tab-target="expression">
+          <span class="icon is-small"><i class="fa-solid fa-comments"></i></span>
+          <span>Expression</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" data-persona-tab-target="narrative">
+          <span class="icon is-small"><i class="fa-solid fa-book-open"></i></span>
+          <span>Narrative</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" data-persona-tab-target="strategy">
+          <span class="icon is-small"><i class="fa-solid fa-chess-knight"></i></span>
+          <span>Strategy</span>
+        </a>
+      </li>
+      <li>
+        <a href="#" data-persona-tab-target="tuning">
+          <span class="icon is-small"><i class="fa-solid fa-sliders"></i></span>
+          <span>Tuning</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="persona-tab-pane is-active" data-persona-tab-pane="identity">
+    <div class="persona-tab-pane-body">
+      {{ form.alias|as_crispy_field }}
+      {{ form.mbti|as_crispy_field }}
+      {{ form.mbti_identity|as_crispy_field }}
+    </div>
+  </div>
+
+  <div class="persona-tab-pane" data-persona-tab-pane="expression">
+    <div class="persona-tab-pane-body">
+      {{ form.communication_style|as_crispy_field }}
+      {{ form.tone|as_crispy_field }}
+      {{ form.humor_style|as_crispy_field }}
+      {{ form.flirting_style|as_crispy_field }}
+    </div>
+  </div>
+
+  <div class="persona-tab-pane" data-persona-tab-pane="narrative">
+    <div class="persona-tab-pane-body">
+      {{ form.inner_story|as_crispy_field }}
+      {{ form.core_values|as_crispy_field }}
+      {{ form.likes|as_crispy_field }}
+      {{ form.dislikes|as_crispy_field }}
+    </div>
+  </div>
+
+  <div class="persona-tab-pane" data-persona-tab-pane="strategy">
+    <div class="persona-tab-pane-body">
+      {{ form.response_tactics|as_crispy_field }}
+      {{ form.persuasion_tactics|as_crispy_field }}
+      {{ form.boundaries|as_crispy_field }}
+    </div>
+  </div>
+
+  <div class="persona-tab-pane" data-persona-tab-pane="tuning">
+    <div class="persona-tab-pane-body">
+      {{ form.trust|as_crispy_field }}
+      {{ form.adaptability|as_crispy_field }}
+    </div>
+  </div>
+
+  <div class="buttons" style="margin-top: 1rem; margin-bottom: 0;">
+    {% if hide_cancel is not True %}
+      <button
+        type="button"
+        class="button is-light modal-close-button">
+        Cancel
+      </button>
+    {% endif %}
+    <button type="submit" class="button modal-close-button">Submit</button>
+  </div>
+</form>
+
+<script>
+  (function () {
+    const root = document.getElementById("persona-form-tabs");
+    if (!root || root.dataset.tabsBound === "1") {
+      return;
+    }
+    root.dataset.tabsBound = "1";
+
+    const tabs = Array.from(root.querySelectorAll("[data-persona-tab-target]"));
+    const panes = Array.from(root.querySelectorAll("[data-persona-tab-pane]"));
+
+    function setActive(key) {
+      tabs.forEach((tab) => {
+        const li = tab.closest("li");
+        if (!li) {
+          return;
+        }
+        li.classList.toggle("is-active", tab.dataset.personaTabTarget === key);
+      });
+      panes.forEach((pane) => {
+        pane.classList.toggle("is-active", pane.dataset.personaTabPane === key);
+      });
+    }
+
+    tabs.forEach((tab) => {
+      tab.addEventListener("click", function (event) {
+        event.preventDefault();
+        setActive(tab.dataset.personaTabTarget);
+      });
+    });
+
+    if (tabs[0]) {
+      setActive(tabs[0].dataset.personaTabTarget);
+    }
+  })();
+</script>