impr(settings): use dropdown for custom layoutfluid (@fehmer) (monkeytypegame#6445)

Author: fehmer

frontend/src/html/pages/settings.html

@@ -347,17 +347,7 @@
         Select which layouts you want the layoutfluid funbox to cycle through.
       </div>
       <div class="inputs">
-        <div class="inputAndButton">
-          <input
-            type="text"
-            placeholder="layouts (separated by space)"
-            class="input"
-            tabindex="0"
-          />
-          <button class="save no-auto-handle">
-            <i class="fas fa-save fa-fw"></i>
-          </button>
-        </div>
+        <select multiple></select>
       </div>
     </div>
     <div class="sectionSpacer"></div>

frontend/src/ts/pages/settings.ts

@@ -23,7 +23,6 @@ import * as CustomBackgroundFilter from "../elements/custom-background-filter";
 import {
   ConfigValue,
   CustomBackgroundSchema,
-  CustomLayoutFluid,
 } from "@monkeytype/contracts/schemas/configs";
 import {
   getAllFunboxes,
@@ -433,10 +432,6 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setCustomBackgroundSize,
     "button"
   ) as SettingsGroup<ConfigValue>;
-  // groups.customLayoutfluid = new SettingsGroup(
-  //   "customLayoutfluid",
-  //   UpdateConfig.setCustomLayoutfluid
-  // );
 }
 
 function reset(): void {
@@ -693,6 +688,31 @@ async function fillSettingsPage(): Promise<void> {
     Config.customLayoutfluid.replace(/#/g, " ")
   );
 
+  const customLayoutfluidActive = Config.customLayoutfluid.split("#");
+  const customLayoutfluidElement = document.querySelector(
+    ".pageSettings .section[data-config-name='customLayoutfluid'] select"
+  ) as Element;
+
+  new SlimSelect({
+    select: customLayoutfluidElement,
+    data: [
+      ...customLayoutfluidActive,
+      ...LayoutsList.filter((it) => !customLayoutfluidActive.includes(it)),
+    ].map((layout) => ({
+      text: layout.replace(/_/g, " "),
+      value: layout,
+      selected: customLayoutfluidActive.includes(layout),
+    })),
+    settings: { keepOrder: true },
+    events: {
+      afterChange: (newVal): void => {
+        void UpdateConfig.setCustomLayoutfluid(
+          newVal.map((it) => it.value).join("#")
+        );
+      },
+    },
+  });
+
   $(".pageSettings .section[data-config-name='tapeMargin'] input").val(
     Config.tapeMargin
   );
@@ -1324,29 +1344,6 @@ $(
   }
 });
 
-const handleLayoutfluid = (): void => {
-  if (
-    UpdateConfig.setCustomLayoutfluid(
-      $(
-        ".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton input"
-      ).val() as CustomLayoutFluid
-    )
-  ) {
-    Notifications.add("Custom layoutfluid saved", 1);
-  }
-};
-$(
-  ".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton button.save"
-).on("click", handleLayoutfluid);
-
-$(
-  ".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton .input"
-).on("keypress", (e) => {
-  if (e.key === "Enter") {
-    handleLayoutfluid();
-  }
-});
-
 $(".pageSettings .quickNav .links a").on("click", (e) => {
   const settingsGroup = e.target.innerText;
   const isClosed = $(`.pageSettings .settingsGroup.${settingsGroup}`).hasClass(