refactor: solid settings (@miodec)

frontend/src/ts/anim.ts

@@ -1,6 +1,7 @@
 import { engine } from "animejs";
 import { LocalStorageWithSchema } from "./utils/local-storage-with-schema";
 import { z } from "zod";
+import { createSignal } from "solid-js";
 
 export const fpsLimitSchema = z.number().int().min(15).max(1000);
 
@@ -10,14 +11,19 @@ const fpsLimit = new LocalStorageWithSchema({
   fallback: 1000,
 });
 
+const [fpsLimitSignal, setFpsLimitSignal] = createSignal(fpsLimit.get());
+
 export function setfpsLimit(fps: number): boolean {
   const result = fpsLimit.set(fps);
+  if (result) {
+    setFpsLimitSignal(fps);
+  }
   applyEngineSettings();
   return result;
 }
 
 export function getfpsLimit(): number {
-  return fpsLimit.get();
+  return fpsLimitSignal();
 }
 
 export function applyEngineSettings(): void {

frontend/src/ts/commandline/util.ts

@@ -11,22 +11,8 @@ import {
 } from "./commandline-metadata";
 import { Command } from "./types";
 import * as ConfigSchemas from "@monkeytype/schemas/configs";
-import { z, ZodSchema, ZodFirstPartySchemaTypes } from "zod";
-
-function getOptions<T extends ZodSchema>(schema: T): undefined | z.infer<T>[] {
-  if (schema instanceof z.ZodLiteral) {
-    return [schema.value] as z.infer<T>[];
-  } else if (schema instanceof z.ZodEnum) {
-    return schema.options as z.infer<T>[];
-  } else if (schema instanceof z.ZodBoolean) {
-    return [true, false] as z.infer<T>[];
-  } else if (schema instanceof z.ZodUnion) {
-    return (schema.options as ZodSchema[])
-      .flatMap(getOptions)
-      .filter((it) => it !== undefined) as z.infer<T>[];
-  }
-  return undefined;
-}
+import { ZodSchema, ZodFirstPartySchemaTypes } from "zod";
+import { getOptions } from "../utils/zod";
 
 export function buildCommandForConfigKey<
   K extends keyof CommandlineConfigMetadataObject,

frontend/src/ts/components/common/AnimatedModal.tsx

@@ -45,9 +45,14 @@ type AnimatedModalProps = ParentProps<{
   onBackdropClick?: (e: MouseEvent) => void;
   onScroll?: (e: Event) => void;
 
+  closeOnWrapperClick?: boolean;
+  closeOnEscape?: boolean;
+
   title?: string;
   modalClass?: string;
+  dialogClass?: string;
   wrapperClass?: string;
+  //todo check if wrapper and dialog can be merged into one
 }>;
 
 const DEFAULT_ANIMATION_DURATION = 125;
@@ -279,6 +284,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
 
   const handleKeyDown = (e: KeyboardEvent): void => {
     if (e.key === "Escape" && visibility()) {
+      if (props.closeOnEscape === false) return;
       e.preventDefault();
       e.stopPropagation();
       if (props.onEscape) {
@@ -290,6 +296,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
   };
 
   const handleBackdropClick = (e: MouseEvent): void => {
+    if (props.closeOnWrapperClick === false) return;
     if (e.target === dialogEl()?.native) {
       if (props.onBackdropClick) {
         props.onBackdropClick(e);
@@ -311,12 +318,17 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
       ref={dialogRef}
       class={cn(
         "fixed top-0 left-0 z-1000 m-0 hidden h-screen max-h-screen w-screen max-w-screen border-none bg-[rgba(0,0,0,0.5)] p-8 backdrop:bg-transparent",
-        props.wrapperClass,
+        props.dialogClass,
       )}
       onKeyDown={handleKeyDown}
       onMouseDown={handleBackdropClick}
     >
-      <div class="pointer-events-none flex h-full w-full items-center justify-center">
+      <div
+        class={cn(
+          "pointer-events-none flex h-full w-full items-center justify-center",
+          props.wrapperClass,
+        )}
+      >
         <div
           class={cn(
             "modal pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto rounded-double bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",

frontend/src/ts/components/common/Button.tsx

@@ -26,6 +26,7 @@ export type ButtonProps = BaseProps & {
   href?: never;
   sameTarget?: true;
   disabled?: boolean;
+  danger?: boolean;
 };
 
 type AnchorProps = BaseProps & {
@@ -70,6 +71,9 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
       variant() === "text" &&
         isActive() &&
         "[--themable-button-hover-text:var(--themable-button-hover-text)] [--themable-button-text:var(--themable-button-active)]",
+      !isAnchor() &&
+        (props as ButtonProps).danger &&
+        "[--themable-button-bg:var(--error-color)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--bg-color)]",
       {
         "pointer-events-none opacity-[0.33]": props.disabled,
       },

frontend/src/ts/components/common/Slider.tsx

@@ -0,0 +1,46 @@
+import { createEffect, createSignal, JSXElement } from "solid-js";
+
+type Props = {
+  ref?: (el: HTMLInputElement) => void;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  onChange?: (value: number) => void;
+  onEveryChange?: (value: number) => void;
+  text?: (value: number) => string | JSXElement;
+};
+
+export function Slider(props: Props): JSXElement {
+  // oxlint-disable-next-line solid/reactivity props.value only used as the initial value, not tracked.
+  const [value, setValue] = createSignal(props.value);
+
+  createEffect(() => setValue(props.value));
+
+  const textToDisplay = () => {
+    if (props.text) {
+      return props.text(value());
+    }
+    return value();
+  };
+
+  return (
+    <div class="grid grid-cols-[3ch_1fr] items-center gap-4">
+      <div>{textToDisplay()}</div>
+      <input
+        ref={props.ref}
+        type="range"
+        min={props.min}
+        max={props.max}
+        value={value()}
+        step={props.step}
+        onInput={(e) => {
+          const newValue = Number(e.target.value);
+          setValue(newValue);
+          props.onEveryChange?.(newValue);
+        }}
+        onChange={(e) => props.onChange?.(Number(e.target.value))}
+      />
+    </div>
+  );
+}

frontend/src/ts/components/common/anime/AnimeShow.tsx

@@ -59,18 +59,40 @@ export function AnimeShow(
     >
       <AnimePresence exitBeforeEnter>
         <Show when={props.when}>
-          <Anime
-            initial={{ height: 0 } as Partial<AnimationParams>}
-            animate={
-              { height: "auto", duration: duration() } as AnimationParams
-            }
-            exit={{ height: 0, duration: duration() } as AnimationParams}
-            style={{ overflow: "hidden" }}
-            {...props.animeProps}
-            class={props.class}
-          >
-            {props.children}
-          </Anime>
+          {(() => {
+            let ref: HTMLElement | undefined;
+            return (
+              <Anime
+                ref={(el) => (ref = el)}
+                initial={{ height: 0 } as Partial<AnimationParams>}
+                animate={
+                  {
+                    height: "auto",
+                    duration: duration(),
+                    onBegin: () => {
+                      if (ref) ref.style.overflow = "hidden";
+                    },
+                    onComplete: () => {
+                      if (ref) ref.style.overflow = "";
+                    },
+                  } as AnimationParams
+                }
+                exit={
+                  {
+                    height: 0,
+                    duration: duration(),
+                    onBegin: () => {
+                      if (ref) ref.style.overflow = "hidden";
+                    },
+                  } as AnimationParams
+                }
+                {...props.animeProps}
+                class={props.class}
+              >
+                {props.children}
+              </Anime>
+            );
+          })()}
         </Show>
       </AnimePresence>
     </Show>