From e46d5870ff27dabc288c7c2bbafa85165aeff5c0 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 19 Aug 2025 21:46:26 +0200
Subject: [PATCH] ui/select: display no options placeholder

---
 .../ui/src/components/Select/Select.tsx       | 35 ++++++++++++++-----
 .../src/workflows/Install/Install.stories.tsx |  6 ++--
 .../Install/steps/createInstaller.tsx         | 35 +++++++++----------
 3 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Select/Select.tsx b/pkgs/clan-app/ui/src/components/Select/Select.tsx
index f2b624348..e680591c0 100644
--- a/pkgs/clan-app/ui/src/components/Select/Select.tsx
+++ b/pkgs/clan-app/ui/src/components/Select/Select.tsx
@@ -18,6 +18,7 @@ export type SelectProps = {
   // Kobalte Select props, for modular forms
   name: string;
   placeholder?: string | undefined;
+  noOptionsText?: string | undefined;
   value: string | undefined;
   error: string;
   required?: boolean | undefined;
@@ -135,15 +136,33 @@ export const Select = (props: SelectProps) => {
             </Typography>
           }
         >
-          <Typography
-            hierarchy="label"
-            size="s"
-            weight="bold"
-            family="condensed"
-            class="flex w-full items-center"
+          <Show
+            when={options().length > 0}
+            fallback={
+              <Typography
+                hierarchy="label"
+                size="s"
+                weight="normal"
+                family="condensed"
+                class="flex w-full items-center"
+                color="secondary"
+              >
+                {props.noOptionsText || "No options available"}
+              </Typography>
+            }
           >
-            {props.placeholder}
-          </Typography>
+            <Show when={props.placeholder}>
+              <Typography
+                hierarchy="label"
+                size="s"
+                weight="bold"
+                family="condensed"
+                class="flex w-full items-center"
+              >
+                {props.placeholder}
+              </Typography>
+            </Show>
+          </Show>
         </Show>
       }
     >
diff --git a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx b/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
index 4d8f429e0..5a8c9150a 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
@@ -30,12 +30,14 @@ const mockFetcher: Fetcher = <K extends OperationNames>(
         {
           name: "sda_bla_bla",
           path: "/dev/sda",
-          id_link: "sda_bla_bla",
+          id_link: "usb-bla-bla",
+          size: "12gb",
         },
         {
           name: "sdb_foo_foo",
           path: "/dev/sdb",
-          id_link: "sdb_foo_foo",
+          id_link: "usb-boo-foo",
+          size: "16gb",
         },
       ] as SuccessQuery<"list_system_storage_devices">["data"]["blockdevices"],
     },
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
index 5752d89b4..9f0e829df 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
@@ -230,8 +230,6 @@ const ChooseDisk = () => {
     stepSignal.next();
   };
 
-  const stripId = (s: string) => s.split("-")[1] ?? s;
-
   const getOptions = async () => {
     if (!systemStorageQuery.data) {
       await systemStorageQuery.refetch();
@@ -239,24 +237,24 @@ const ChooseDisk = () => {
 
     const blockDevices = systemStorageQuery.data?.blockdevices ?? [];
 
-    return (
-      blockDevices
-        // we only want writeable block devices which are USB or MMC (SD cards)
-        .filter(({ id_link, ro }) => !ro && installMediaRegex.test(id_link))
-        // transform each entry into an option
-        .map(({ id_link, size, path }) => {
-          const match = id_link.match(installMediaRegex)!;
-          const name = match.groups?.name || "";
+    const options = blockDevices
+      // we only want writeable block devices which are USB or MMC (SD cards)
+      .filter(({ id_link, ro }) => !ro && installMediaRegex.test(id_link))
+      // transform each entry into an option
+      .map(({ id_link, size, path }) => {
+        const match = id_link.match(installMediaRegex)!;
+        const name = match.groups?.name || "";
 
-          const truncatedName =
-            name.length > 32 ? name.slice(0, 32) + "..." : name;
+        const truncatedName =
+          name.length > 32 ? name.slice(0, 32) + "..." : name;
 
-          return {
-            value: path,
-            label: `${truncatedName.replaceAll("_", " ")} (${size})`,
-          };
-        })
-    );
+        return {
+          value: path,
+          label: `${truncatedName.replaceAll("_", " ")} (${size})`,
+        };
+      });
+
+    return options;
   };
 
   return (
@@ -280,6 +278,7 @@ const ChooseDisk = () => {
                     }}
                     getOptions={getOptions}
                     placeholder="Choose Device"
+                    noOptionsText="No devices found"
                     name={field.name}
                   />
                 )}