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,7 +160,13 @@ export function ModelPickerView({
   field,
 }: Pick<AutoFormInputComponentProps, "field">) {
   return (
-    <div className="flex gap-2 flex-col">
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger className="text-sm">
+          Models (ComfyUI Manager & Civitai)
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="flex gap-2 flex-col px-1">
             <ComfyUIManagerModelRegistry field={field} />
             <CivitaiModelRegistry field={field} />
             {/* <span>{field.value.length} selected</span> */}
@@ -170,6 +182,9 @@ export function ModelPickerView({
               </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,7 +33,10 @@ export function SnapshotPickerView({
   field,
 }: Pick<AutoFormInputComponentProps, "field">) {
   return (
-    <div className="flex gap-2 flex-col">
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger className="text-sm">Custom Nodes</AccordionTrigger>
+        <AccordionContent className="flex gap-2 flex-col px-1">
           <SnapshotPresetPicker field={field} />
           <CustomNodesSelector field={field} />
           {field.value && (
@@ -42,7 +51,9 @@ export function SnapshotPickerView({
             />
             // </ScrollArea>
           )}
-    </div>
+        </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>
+      {fieldConfigItem.inputProps?.showLabel && (
         <FormLabel>
           {label}
           {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>
+      {fieldConfigItem.inputProps?.showLabel && (
         <FormLabel>
           {label}
           {isRequired && <span className="text-destructive"> *</span>}
         </FormLabel>
+      )}
       <FormControl>
         <Suspense fallback={<LoadingIcon />}>
           <SnapshotPickerView field={field} />