feat: refresh create new machine ui

web/src/components/MachineList.tsx

@@ -357,9 +357,15 @@ export function MachineList({
               },
               snapshot: {
                 fieldType: "snapshot",
+                inputProps: {
+                  showLabel: false,
+                },
               },
               models: {
                 fieldType: "models",
+                inputProps: {
+                  showLabel: false,
+                },
               },
               gpu: {
                 fieldType: !userMetadata.betaFeaturesAccess

web/src/components/custom-form/ModelPickerView.tsx

@@ -2,6 +2,12 @@
 
 import type { AutoFormInputComponentProps } from "../ui/auto-form/types";
 import { LoadingIcon } from "@/components/LoadingIcon";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -154,22 +160,31 @@ export function ModelPickerView({
   field,
 }: Pick<AutoFormInputComponentProps, "field">) {
   return (
-    <div className="flex gap-2 flex-col">
+    <Accordion type="single" collapsible>
-      <ComfyUIManagerModelRegistry field={field} />
+      <AccordionItem value="item-1">
-      <CivitaiModelRegistry field={field} />
+        <AccordionTrigger className="text-sm">
-      {/* <span>{field.value.length} selected</span> */}
+          Models (ComfyUI Manager & Civitai)
-      {field.value && (
+        </AccordionTrigger>
-        <ScrollArea className="w-full bg-gray-100 mx-auto rounded-lg mt-2">
+        <AccordionContent>
-          <Textarea
+          <div className="flex gap-2 flex-col px-1">
-            className="min-h-[150px] max-h-[300px] p-2 rounded-lg text-xs w-full"
+            <ComfyUIManagerModelRegistry field={field} />
-            value={JSON.stringify(field.value, null, 2)}
+            <CivitaiModelRegistry field={field} />
-            onChange={(e) => {
+            {/* <span>{field.value.length} selected</span> */}
-              field.onChange(JSON.parse(e.target.value));
+            {field.value && (
-            }}
+              <ScrollArea className="w-full bg-gray-100 mx-auto rounded-lg mt-2">
-          />
+                <Textarea
-        </ScrollArea>
+                  className="min-h-[150px] max-h-[300px] p-2 rounded-lg text-xs w-full"
-      )}
+                  value={JSON.stringify(field.value, null, 2)}
-    </div>
+                  onChange={(e) => {
+                    field.onChange(JSON.parse(e.target.value));
+                  }}
+                />
+              </ScrollArea>
+            )}
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   );
 }
 
@@ -307,7 +322,13 @@ export function ComfyUIManagerModelRegistry({
     };
   }, []);
 
-  return <ModelSelector field={field} modelList={modelList} label="common" />;
+  return (
+    <ModelSelector
+      field={field}
+      modelList={modelList}
+      label="ComfyUI Manager"
+    />
+  );
 }
 
 export function ModelSelector({
@@ -358,7 +379,7 @@ export function ModelSelector({
             aria-expanded={open}
             className="w-full justify-between flex"
           >
-            Select {label}
+            Add from {label}
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
@@ -371,7 +392,7 @@ export function ModelSelector({
             >
               {isLoading && <LoadingIcon />}
             </CommandInput>
-            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandEmpty>No models found.</CommandEmpty>
             <CommandList className="pointer-events-auto">
               <CommandGroup>
                 {modelList?.models.map((model) => (

web/src/components/custom-form/SnapshotPickerView.tsx

@@ -2,6 +2,12 @@
 
 import type { AutoFormInputComponentProps } from "../ui/auto-form/types";
 import fetcher from "@/components/fetcher";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -27,22 +33,27 @@ export function SnapshotPickerView({
   field,
 }: Pick<AutoFormInputComponentProps, "field">) {
   return (
-    <div className="flex gap-2 flex-col">
+    <Accordion type="single" collapsible>
-      <SnapshotPresetPicker field={field} />
+      <AccordionItem value="item-1">
-      <CustomNodesSelector field={field} />
+        <AccordionTrigger className="text-sm">Custom Nodes</AccordionTrigger>
-      {field.value && (
+        <AccordionContent className="flex gap-2 flex-col px-1">
-        // <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
+          <SnapshotPresetPicker field={field} />
-        <Textarea
+          <CustomNodesSelector field={field} />
-          className="min-h-[150px] max-h-[300px] p-2 rounded-md text-xs w-full"
+          {field.value && (
-          value={JSON.stringify(field.value, null, 2)}
+            // <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
-          onChange={(e) => {
+            <Textarea
-            // Update field.onChange to pass the array of selected models
+              className="min-h-[150px] max-h-[300px] p-2 rounded-md text-xs w-full"
-            field.onChange(JSON.parse(e.target.value));
+              value={JSON.stringify(field.value, null, 2)}
-          }}
+              onChange={(e) => {
-        />
+                // Update field.onChange to pass the array of selected models
-        // </ScrollArea>
+                field.onChange(JSON.parse(e.target.value));
-      )}
+              }}
-    </div>
+            />
+            // </ScrollArea>
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
   );
 }
 
@@ -97,14 +108,16 @@ function SnapshotPresetPicker({
           aria-expanded={open}
           className="w-full justify-between flex"
         >
-          {selected ? findItem(selected)?.label : "Select snapshot..."}
+          {selected
+            ? findItem(selected)?.label
+            : "Select snapshot (From deployments)"}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[375px] p-0">
         <Command>
-          <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandInput placeholder="Search snapshot..." className="h-9" />
-          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandEmpty>No snapshot found.</CommandEmpty>
           <CommandGroup>
             {frameworks?.map((framework) => (
               <CommandItem
@@ -188,7 +201,7 @@ function CustomNodesSelector({
           aria-expanded={open}
           className="w-full justify-between flex"
         >
-          Select custom nodes... {keys.length} selected
+          Add custom nodes - {keys.length} selected
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>

web/src/components/custom-form/model-picker.tsx

@@ -21,10 +21,12 @@ export default function AutoFormModelsPicker({
 }: AutoFormInputComponentProps) {
   return (
     <FormItem>
-      <FormLabel>
+      {fieldConfigItem.inputProps?.showLabel && (
-        {label}
+        <FormLabel>
-        {isRequired && <span className="text-destructive"> *</span>}
+          {label}
-      </FormLabel>
+          {isRequired && <span className="text-destructive"> *</span>}
+        </FormLabel>
+      )}
       <FormControl>
         <Suspense fallback={<LoadingIcon />}>
           <ModelPickerView field={field} />

web/src/components/custom-form/snapshot-picker.tsx

@@ -21,10 +21,12 @@ export default function AutoFormSnapshotPicker({
 }: AutoFormInputComponentProps) {
   return (
     <FormItem>
-      <FormLabel>
+      {fieldConfigItem.inputProps?.showLabel && (
-        {label}
+        <FormLabel>
-        {isRequired && <span className="text-destructive"> *</span>}
+          {label}
-      </FormLabel>
+          {isRequired && <span className="text-destructive"> *</span>}
+        </FormLabel>
+      )}
       <FormControl>
         <Suspense fallback={<LoadingIcon />}>
           <SnapshotPickerView field={field} />