impr: update custom generator based on feedback

- Move presets to top and change to dropdown
- Change character input to textarea
- Remove special characters from bigrams/trigrams
- Remove custom button styles

frontend/src/html/popups.html

@@ -785,15 +785,26 @@
       </div>
     </div>
     <div class="main">
+      <div class="group">
+        <div class="title">presets</div>
+        <select class="presetInput">
+          <option value="">None</option>
+          <option value="alphas">a-z</option>
+          <option value="numbers">0-9</option>
+          <option value="special">symbols</option>
+          <option value="bigrams">bigrams</option>
+          <option value="trigrams">trigrams</option>
+        </select>
+      </div>
       <div class="group">
         <div class="title">character set</div>
-        <input
+        <textarea
           class="characterInput"
           id="characterInput"
           autocomplete="off"
           placeholder="a b c d 1 2 3 [ ] ;"
           title="characters"
-        />
+        ></textarea>
       </div>
       <div class="group lengthgrid">
         <div class="title">min length</div>
@@ -827,16 +838,6 @@
           title="word count"
         />
       </div>
-      <div class="group">
-        <div class="title">presets</div>
-        <div class="presetButtons">
-          <button class="presetButton" data-preset="alphas">a-z</button>
-          <button class="presetButton" data-preset="numbers">0-9</button>
-          <button class="presetButton" data-preset="special">symbols</button>
-          <button class="presetButton" data-preset="bigrams">bigrams</button>
-          <button class="presetButton" data-preset="trigrams">trigrams</button>
-        </div>
-      </div>
     </div>
 
     <div class="bottom">

frontend/src/styles/popups.scss

@@ -481,33 +481,13 @@ body.darkMode {
       column-gap: 1rem;
     }
 
-    .presetButtons {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-
-      button {
-        padding: 0.5rem 1rem;
-        background: var(--sub-alt-color);
-        color: var(--sub-color);
-        border: none;
-        border-radius: var(--roundness);
-        cursor: pointer;
-        transition: all 0.125s;
-
-        &:hover {
-          background: var(--sub-color);
-          color: var(--bg-color);
-        }
-      }
-    }
-
     .tip {
       color: var(--sub-color);
       font-size: 0.8rem;
     }
 
-    input {
+    input,
+    textarea {
       width: 100%;
       padding: 0.5rem;
       background: var(--sub-alt-color);
@@ -520,19 +500,9 @@ body.darkMode {
       }
     }
 
-    button.setButton,
-    button.addButton {
-      padding: 0.5rem 1rem;
-      background: var(--main-color);
-      color: var(--bg-color);
-      border: none;
-      border-radius: var(--roundness);
-      cursor: pointer;
-      transition: all 0.125s;
-
-      &:hover {
-        filter: brightness(1.2);
-      }
+    textarea {
+      min-height: 100px;
+      resize: vertical;
     }
   }
 }

frontend/src/ts/modals/custom-generator.ts

@@ -1,5 +1,6 @@
 import * as CustomText from "../test/custom-text";
 import * as Notifications from "../elements/notifications";
+import SlimSelect from "slim-select";
 import AnimatedModal, {
   HideOptions,
   ShowOptions,
@@ -46,36 +47,6 @@ const presets: Record<string, Preset> = {
       "it",
       "al",
       "as",
-      "=>",
-      "::",
-      "//",
-      "/*",
-      "*/",
-      "{}",
-      "[]",
-      "()",
-      "<>",
-      "!=",
-      "==",
-      ">=",
-      "<=",
-      "&&",
-      "||",
-      "++",
-      "--",
-      "+=",
-      "-=",
-      "*=",
-      "/=",
-      "->",
-      ":=",
-      "??",
-      "?.",
-      "!.",
-      "..",
-      ";;",
-      ",,",
-      "|>",
     ],
   },
   trigrams: {
@@ -99,33 +70,38 @@ const presets: Record<string, Preset> = {
       "are",
       "rea",
       "int",
-      "var",
-      "let",
-      "def",
-      "fun",
-      "str",
-      "obj",
-      "arr",
-      "new",
-      "try",
-      "ret",
-      "if(",
-      "(){",
-      "});",
-      "===",
-      "!==",
-      "...",
-      "/**",
-      "**/",
-      "```",
-      "---",
     ],
   },
 };
 
+let _presetSelect: SlimSelect | undefined = undefined;
+
 export async function show(showOptions?: ShowOptions): Promise<void> {
   void modal.show({
     ...showOptions,
+    beforeAnimation: async (modalEl) => {
+      _presetSelect = new SlimSelect({
+        select: "#customGeneratorModal .presetInput",
+        settings: {
+          contentLocation: modalEl,
+        },
+        events: {
+          afterChange: (newVal) => {
+            const presetName = newVal[0]?.value;
+            if (
+              presetName !== undefined &&
+              presetName !== "" &&
+              presets[presetName]
+            ) {
+              const preset = presets[presetName];
+              $("#customGeneratorModal .characterInput").val(
+                preset.characters.join(" ")
+              );
+            }
+          },
+        },
+      });
+    },
   });
 }
 
@@ -191,22 +167,6 @@ async function apply(set: boolean): Promise<void> {
 }
 
 async function setup(modalEl: HTMLElement): Promise<void> {
-  for (const button of modalEl.querySelectorAll(".presetButton")) {
-    button.addEventListener("click", (e) => {
-      const presetName = (e.target as HTMLButtonElement).dataset["preset"];
-      if (
-        presetName !== undefined &&
-        presetName !== "" &&
-        presets[presetName]
-      ) {
-        const preset = presets[presetName];
-        $("#customGeneratorModal .characterInput").val(
-          preset.characters.join(" ")
-        );
-      }
-    });
-  }
-
   modalEl.querySelector(".setButton")?.addEventListener("click", () => {
     void apply(true);
   });