Clan-app: move expert field into advanced form

pkgs/webview-ui/app/src/components/FileInput.tsx

@@ -15,6 +15,7 @@ interface FileInputProps {
   class?: string;
   label?: string;
   error?: string;
+  helperText?: string;
 }
 
 /**
@@ -53,7 +54,9 @@ export function FileInput(props: FileInputProps) {
           {props.label}
         </span>
       </div>
-
+      <Show when={props.helperText}>
+        <span class="label-text-alt m-1">{props.helperText}</span>
+      </Show>
       <div
         class={cx(
           "relative flex min-h-[96px] w-full items-center justify-center rounded-2xl border-[3px] border-dashed p-8 text-center focus-within:ring-4 md:min-h-[112px] md:text-lg lg:min-h-[128px] lg:p-10 lg:text-xl",

pkgs/webview-ui/app/src/components/SelectInput.tsx

@@ -1,4 +1,5 @@
 import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
+import { Show } from "solid-js";
 import { type JSX } from "solid-js";
 
 interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
@@ -9,6 +10,7 @@ interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
   label: JSX.Element;
   error?: string;
   required?: boolean;
+  topRightLabel?: JSX.Element;
 }
 
 export function SelectInput<T extends FieldValues, R extends ResponseData>(
@@ -29,8 +31,10 @@ export function SelectInput<T extends FieldValues, R extends ResponseData>(
         >
           {props.label}
         </span>
+        <Show when={props.topRightLabel}>
+          <span class="label-text-alt">{props.topRightLabel}</span>
+        </Show>
       </div>
-
       <select
         {...props.selectProps}
         required={props.required}

pkgs/webview-ui/app/src/components/TextInput.tsx

@@ -1,5 +1,6 @@
 import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
-import { type JSX } from "solid-js";
+import { Show, type JSX } from "solid-js";
+import cx from "classnames";
 
 interface TextInputProps<T extends FieldValues, R extends ResponseData> {
   formStore: FormStore<T, R>;
@@ -10,6 +11,11 @@ interface TextInputProps<T extends FieldValues, R extends ResponseData> {
   required?: boolean;
   type?: string;
   inlineLabel?: JSX.Element;
+  class?: string;
+  adornment?: {
+    position: "start" | "end";
+    content: JSX.Element;
+  };
 }
 
 export function TextInput<T extends FieldValues, R extends ResponseData>(
@@ -17,7 +23,7 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
 ) {
   return (
     <label
-      class="form-control w-full"
+      class={cx("form-control w-full", props.class)}
       aria-disabled={props.formStore.submitting}
     >
       <div class="label">
@@ -33,6 +39,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
       </div>
 
       <div class="input input-bordered flex items-center gap-2">
+        <Show when={props.adornment && props.adornment.position === "start"}>
+          {props.adornment?.content}
+        </Show>
         {props.inlineLabel}
         <input
           {...props.inputProps}
@@ -46,6 +55,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
           required
           disabled={props.formStore.submitting}
         />
+        <Show when={props.adornment && props.adornment.position === "end"}>
+          {props.adornment?.content}
+        </Show>
       </div>
       {props.error && (
         <span class="label-text-alt font-bold text-error">{props.error}</span>