Standardise checkbox/toggle UX on a few forms

modules/game/src/main/ui/GameUi.scala

@@ -231,11 +231,12 @@ final class GameUi(helpers: Helpers):
               },
               form3.group(form("pgnFile"), trans.site.orUploadPgnFile(), klass = "upload"): f =>
                 form3.file.pgn(f.name),
-              form3.checkbox(
+              form3.nativeCheckboxField(
                 form("analyse"),
                 trans.site.requestAComputerAnalysis(),
-                help = Some(analyseHelp),
-                disabled = !ctx.isAuth
+                help = analyseHelp,
+                half = false,
+                klass = "analyse"
               ),
               form3.action(form3.submit(trans.site.importGame(), Icon.UploadCloud.some))
             )

modules/gameSearch/src/main/GameSearchUi.scala

@@ -335,7 +335,11 @@ final class SearchForm(helpers: Helpers)(form: Form[?])(using Translate):
           span(cls := "help", title := trs.onlyAnalysed.txt())("(?)")
         )
       ),
-      td(
-        form3.cmnToggle(form3.id(field), field.name, checked = field.value.has("1"), value = "1")
+      td(cls := "centered-checkbox")(
+        form3.nativeCheckbox(
+          form3.id(field),
+          field.name,
+          checked = form3.isChecked(field)
+        )
       )
     )

modules/gathering/src/main/ui/GatheringUi.scala

@@ -114,14 +114,14 @@ final class GatheringFormUi(helpers: Helpers):
     )
 
   def bots(field: Field, disabledAfterStart: Boolean) =
-    form3.checkbox(
+    form3.nativeCheckboxField(
       field,
       "Allow bot accounts",
       help = frag(
         "Let ",
         a(href := "/@/lichess/blog/welcome-lichess-bots/WvDNticA")("bots"),
         " join the tournament and play with their engines. This often repels human players."
       ).some,
-      half = true,
+      half = false,
       disabled = disabledAfterStart
     )

modules/pref/src/main/ui/AccountPages.scala

@@ -31,12 +31,22 @@ final class AccountPages(helpers: Helpers, ui: AccountUi, flagApi: lila.core.use
             div(cls := "form-group")(trs.closeAccountAreYouSure()),
             div(cls := "form-group")(trs.cantOpenSimilarAccount()),
             myUsernamePasswordFields(form),
-            form3.checkbox(
-              form("forever"),
-              raw("Forever close: make it impossible to reopen"),
-              help = raw(
-                "Prevent reopening the account later. If you check this box, even administrators will be unable to reopen your account at your request."
-              ).some
+            div(cls := "form-group")(
+              div(
+                span(cls := "form-check-input")(
+                  form3.nativeCheckbox(
+                    form3.id(form("forever")),
+                    form("forever").name,
+                    checked = form3.isChecked(form("forever"))
+                  )
+                ),
+                label(`for` := form3.id(form("forever")))(raw("Forever close: make it impossible to reopen"))
+              ),
+              div(cls := "form-help")(
+                raw(
+                  "Prevent reopening the account later. If you check this box, even administrators will be unable to reopen your account at your request."
+                )
+              )
             ),
             form3.actions(
               frag(

modules/relay/src/main/ui/RelayFormUi.scala

@@ -1,7 +1,7 @@
 package lila.relay
 package ui
 
-import play.api.data.Form
+import play.api.data.{ Field, Form }
 import lila.ui.*
 import lila.ui.ScalatagsTemplate.{ given, * }
 import lila.core.study.Visibility
@@ -320,7 +320,7 @@ final class RelayFormUi(helpers: Helpers, ui: RelayUi, pageMenu: RelayMenuUi):
               help = trb.startDateHelp().some,
               half = true
             )(form3.flatpickr(_, local = true, minDate = None)),
-            form3.checkbox(
+            form3.nativeCheckboxField(
               form("startsAfterPrevious"),
               "When the previous round completes",
               help = frag(
@@ -379,10 +379,11 @@ Hanna Marie ; Kozul, Zdenko"""),
               form3.group(form("rated"), raw("")): field =>
                 val withDefault =
                   if nav.newRound && field.value.isEmpty then field.copy(value = "true".some) else field
-                form3.checkbox(
+                form3.nativeCheckboxField(
                   withDefault,
-                  labelContent = frag("Rated round"),
-                  help = frag("Include this round when calculating players' rating changes").some
+                  "Rated round",
+                  help = frag("Include this round when calculating players' rating changes").some,
+                  half = true
                 )
             ),
             Color.all.map: color =>
@@ -587,19 +588,21 @@ Hanna Marie ; Kozul, Zdenko"""),
               .some
           )(
             form3.split(
-              form3.checkbox(
+              form3.nativeCheckboxField(
                 form("showScores"),
                 trb.showScores(),
+                help = None,
                 half = true
               ),
-              form3.checkbox(
+              form3.nativeCheckboxField(
                 form("showRatingDiffs"),
                 "Show player's rating diffs",
+                help = None,
                 half = true
               )
             ),
             form3.split(
-              form3.checkbox(
+              form3.nativeCheckboxField(
                 form("teamTable"),
                 trans.team.teamTournament(),
                 help = frag("Show a team leaderboard. Requires WhiteTeam and BlackTeam PGN tags.").some,

modules/swiss/src/main/ui/SwissFormUi.scala

@@ -205,7 +205,7 @@ final class SwissFormUi(helpers: Helpers)(
           )
         ),
         form3.split(
-          form3.checkbox(
+          form3.nativeCheckboxField(
             form("rated"),
             trans.site.rated(),
             help = trans.site.ratedFormHelp().some,
@@ -244,7 +244,7 @@ final class SwissFormUi(helpers: Helpers)(
     )(form3.textarea(_)(rows := 4))
 
     def playYourGames = frag(
-      form3.checkbox(
+      form3.nativeCheckboxField(
         form("conditions.playYourGames"),
         trans.swiss.mustHavePlayedTheirLastSwissGame(),
         help = trans.swiss.mustHavePlayedTheirLastSwissGameHelp().some,

modules/tournament/src/main/ui/TournamentForm.scala

@@ -162,33 +162,60 @@ final class TournamentForm(val helpers: Helpers, showUi: TournamentShow)(
       )
     )
 
+  private def nativeCheckboxField(
+      field: Field,
+      labelContent: Frag,
+      help: Option[Frag],
+      half: Boolean = false,
+      value: String = "true"
+  ) =
+    div(
+      cls := List(
+        "form-check form-group" -> true,
+        "form-half" -> half
+      )
+    )(
+      div(
+        span(cls := "form-check-input")(
+          form3.nativeCheckbox(
+            form3.id(field),
+            field.name,
+            checked = field.value.has("true"),
+            value = value
+          )
+        ),
+        label(`for` := form3.id(field))(labelContent)
+      ),
+      help.map(small(cls := "form-help")(_))
+    )
+
   def featuresFields(form: Form[?])(using ctx: Context)(using FormPrefix) =
     form3.fieldset("Features", toggle = false.some)(
       form3.split(
-        form3.checkbox(
-          form.prefix("berserkable"),
+        nativeCheckboxField(
+          form("berserkable"),
           trans.arena.allowBerserk(),
           help = trans.arena.allowBerserkHelp().some,
           half = true
         ),
         form3.hiddenFalse(form.prefix("berserkable")),
-        form3.checkbox(
-          form.prefix("streakable"),
+        nativeCheckboxField(
+          form("streakable"),
           trans.arena.arenaStreaks(),
           help = trans.arena.arenaStreaksHelp().some,
           half = true
         ),
         form3.hiddenFalse(form.prefix("streakable"))
       ),
       form3.split(
-        form3.checkbox(
-          form.prefix("rated"),
+        nativeCheckboxField(
+          form("rated"),
           trans.site.rated(),
           help = trans.site.ratedFormHelp().some
         ),
         form3.hiddenFalse(form.prefix("rated")),
-        form3.checkbox(
-          form.prefix("hasChat"),
+        nativeCheckboxField(
+          form("hasChat"),
           trans.site.chatRoom(),
           help = trans.arena.allowChatHelp().some,
           half = true

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

@@ -81,7 +81,7 @@ final class Form3(formHelper: FormHelper & I18nHelper & AssetHelper, flairApi: F
     )(
       div(
         span(cls := "form-check-input")(
-          cmnToggle(id(field), field.name, field.value.has("true"), disabled)
+          cmnToggle(id(field), field.name, isChecked(field), disabled)
         ),
         groupLabel(field)(labelContent)
       ),
@@ -119,16 +119,52 @@ final class Form3(formHelper: FormHelper & I18nHelper & AssetHelper, flairApi: F
       fieldId: String,
       fieldName: String,
       checked: Boolean,
-      value: Value = "true"
+      value: Value = "true",
+      disabled: Boolean = false
   ) =
     st.input(
       st.id := fieldId,
       name := fieldName,
       st.value := value.show,
       tpe := "checkbox",
-      checked.option(st.checked)
+      checked.option(st.checked),
+      disabled.option(st.disabled)
     )
 
+  def nativeCheckboxField(
+      field: Field,
+      labelContent: Frag,
+      help: Option[Frag],
+      half: Boolean,
+      value: String = "true",
+      disabled: Boolean = false,
+      klass: String = ""
+  ): Frag =
+    div(
+      cls := List(
+        "form-check form-group" -> true,
+        "form-half" -> half,
+        klass -> klass.nonEmpty
+      )
+    )(
+      div(
+        span(cls := "form-check-input")(
+          nativeCheckbox(
+            id(field),
+            field.name,
+            checked = isChecked(field),
+            value = value,
+            disabled = disabled
+          )
+        ),
+        groupLabel(field)(labelContent)
+      ),
+      help.map { helper(_) }
+    )
+
+  def isChecked(field: Field): Boolean =
+    field.value.exists(v => v == "true" || v == "1")
+
   def select(
       field: Field,
       options: Iterable[(Any, String)],