better form-fieldset that also serves as <details>

we can't use <details> because it has its own rendering rules
which don't play well with flex
so we implement our own <details> 🤷

modules/ui/src/main/helper/Form3.scala

@@ -192,8 +192,14 @@ final class Form3(formHelper: FormHelper & I18nHelper, flairApi: FlairApi):
  form.globalError.map: err =>
  div(cls := "form-group is-invalid")(error(err))
 
- def fieldset(legend: Frag): Tag =
- st.fieldset(cls := "form-fieldset")(st.legend(legend))
+ def fieldset(legend: Frag, toggle: Option[Boolean] = none): Tag =
+ st.fieldset(
+ cls := List(
+ "form-fieldset" -> true,
+ "form-fieldset--toggle" -> toggle.isDefined,
+ "form-fieldset--toggle-off" -> toggle.has(false)
+ )
+ )(st.legend(legend))
 
  private val dataEnableTime = attr("data-enable-time")
  private val dataTime24h = attr("data-time_24h")

ui/common/css/form/_form3.scss

@@ -144,3 +144,27 @@ textarea.form-control {
  font-size: 1.2em;
  }
 }
+.form-fieldset--toggle {
+ legend {
+ cursor: pointer;
+ &::after {
+ content: '▲';
+ margin-left: 1ch;
+ }
+ }
+}
+.form-fieldset--toggle-off {
+ border-width: 1px 0 0 0;
+ legend {
+ &:hover {
+ color: $c-brag;
+ }
+ &::after {
+ color: $c-brag;
+ content: '▼';
+ }
+ }
+ > *:not(legend) {
+ display: none;
+ }
+}

ui/site/src/boot.ts

@@ -115,6 +115,10 @@ export function boot() {
  el.setAttribute('content', el.getAttribute('content') + ',maximum-scale=1.0');
  }
 
+ $('.form-fieldset--toggle legend').on('click', function (this: HTMLElement) {
+ $(this).closest('.form-fieldset--toggle').toggleClass('form-fieldset--toggle-off');
+ });
+
  if (setBlind && !site.blindMode) setTimeout(() => $('#blind-mode button').trigger('click'), 1500);
 
  if (showDebug) site.asset.loadEsm('bits.diagnosticDialog');