From aaaa310c7fa2d818a572f5b81da89a5d9e23c063 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Wed, 3 Sep 2025 10:03:12 +0100
Subject: [PATCH 1/3] feat(ui): refine input to allow start and end components

---
 .../InstallMachine/steps/installSteps.tsx     | 52 +++++++++----------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx b/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx
index de6c0312e..8fadd0bb4 100644
--- a/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx
+++ b/pkgs/clan-app/ui/src/workflows/InstallMachine/steps/installSteps.tsx
@@ -18,7 +18,7 @@ import {
 } from "../InstallMachine";
 import { TextInput } from "@/src/components/Form/TextInput";
 import { Alert, AlertProps } from "@/src/components/Alert/Alert";
-import { createSignal, For, Match, Show, Switch, JSX } from "solid-js";
+import { createSignal, For, Match, Show, Switch } from "solid-js";
 import { Divider } from "@/src/components/Divider/Divider";
 import { Orienter } from "@/src/components/Form/Orienter";
 import { Button } from "@/src/components/Button/Button";
@@ -576,32 +576,6 @@ const PromptsFields = (props: PromptsFieldsProps) => {
                           const [inputType, setInputType] =
                             createSignal(defaultInputType);
 
-                          let endComponent:
-                            | ((props: { inverted?: boolean }) => JSX.Element)
-                            | undefined = undefined;
-
-                          if (defaultInputType === "password") {
-                            endComponent = (props) => (
-                              <KButton
-                                onClick={() => {
-                                  setInputType((type) =>
-                                    type === "password" ? "text" : "password",
-                                  );
-                                }}
-                              >
-                                <Icon
-                                  icon={
-                                    inputType() == "password"
-                                      ? "EyeClose"
-                                      : "EyeOpen"
-                                  }
-                                  color="quaternary"
-                                  inverted={props.inverted}
-                                />
-                              </KButton>
-                            );
-                          }
-
                           return (
                             <TextInput
                               {...f}
@@ -609,7 +583,29 @@ const PromptsFields = (props: PromptsFieldsProps) => {
                                 fieldInfo.prompt.display?.label ||
                                 fieldInfo.prompt.name
                               }
-                              endComponent={endComponent}
+                              endComponent={(local) => (
+                                <Show when={defaultInputType === "password"}>
+                                  <KButton
+                                    onClick={() => {
+                                      setInputType((type) =>
+                                        type === "password"
+                                          ? "text"
+                                          : "password",
+                                      );
+                                    }}
+                                  >
+                                    <Icon
+                                      icon={
+                                        inputType() == "password"
+                                          ? "EyeClose"
+                                          : "EyeOpen"
+                                      }
+                                      color="quaternary"
+                                      inverted={local.inverted}
+                                    />
+                                  </KButton>
+                                </Show>
+                              )}
                               description={fieldInfo.prompt.description}
                               value={f.value || fieldInfo.value || ""}
                               required={fieldInfo.prompt.display?.required}

From fd9dd6f872ea912cdf76dcfeef9cdc2a005ffc3a Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Wed, 3 Sep 2025 21:00:54 +0200
Subject: [PATCH 2/3] ui/fieldset: use normal div, due to webkit layout bug for
 fieldsets

---
 pkgs/clan-app/ui/src/components/Form/Fieldset.css | 2 +-
 pkgs/clan-app/ui/src/components/Form/Fieldset.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Form/Fieldset.css b/pkgs/clan-app/ui/src/components/Form/Fieldset.css
index f0a3cd5a7..382f4182a 100644
--- a/pkgs/clan-app/ui/src/components/Form/Fieldset.css
+++ b/pkgs/clan-app/ui/src/components/Form/Fieldset.css
@@ -1,4 +1,4 @@
-fieldset {
+.fieldset {
   @apply flex flex-col w-full;
 
   legend {
diff --git a/pkgs/clan-app/ui/src/components/Form/Fieldset.tsx b/pkgs/clan-app/ui/src/components/Form/Fieldset.tsx
index cb09953c5..0c4b2bd32 100644
--- a/pkgs/clan-app/ui/src/components/Form/Fieldset.tsx
+++ b/pkgs/clan-app/ui/src/components/Form/Fieldset.tsx
@@ -35,10 +35,10 @@ export const Fieldset = (props: FieldsetProps) => {
       : props.children;
 
   return (
-    <fieldset
+    <div
       role="group"
-      class={cx({ inverted: props.inverted })}
-      disabled={props.disabled || false}
+      class={cx("fieldset", { inverted: props.inverted })}
+      aria-disabled={props.disabled || undefined}
     >
       {props.legend && (
         <legend>
@@ -69,6 +69,6 @@ export const Fieldset = (props: FieldsetProps) => {
           </Typography>
         </div>
       )}
-    </fieldset>
+    </div>
   );
 };

From 88343ce52368b8430b3ca2a7a18345f5f894f65b Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Wed, 3 Sep 2025 21:01:37 +0200
Subject: [PATCH 3/3] ui/sidebar: remove spurious console.log

---
 pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx
index 11c52a6ca..54b86021b 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx
@@ -186,7 +186,6 @@ const Services = () => {
         const moduleName = instance.module.name;
 
         const label = moduleName == id ? moduleName : `${moduleName} (${id})`;
-        console.log("Service instance", id, instance, label);
         return {
           id,
           label,