chore: update dashboard ui

web/src/components/InsertModal.tsx

@@ -11,8 +11,12 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import * as React from "react";
 import { useState } from "react";
 import type { UnknownKeysParam, ZodObject, ZodRawShape, z } from "zod";
@@ -22,6 +26,8 @@ export function InsertModal<
   Y extends UnknownKeysParam,
   Z extends ZodObject<K, Y>
 >(props: {
+  tooltip?: string;
+  disabled?: boolean;
   title: string;
   description: string;
   serverAction: (data: z.infer<Z>) => Promise<unknown>;
@@ -33,11 +39,37 @@ export function InsertModal<
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="default" className="">
+      {/* <DialogTrigger disabled={props.disabled}> */}
+      {props.tooltip ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="default"
+              className={props.disabled ? "opacity-50" : ""}
+              onClick={() => {
+                if (props.disabled) return;
+                setOpen(true);
+              }}
+            >
+              {props.title}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{props.tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        <Button
+          variant="default"
+          disabled={props.disabled}
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
           {props.title}
         </Button>
-      </DialogTrigger>
+      )}
+      {/* </DialogTrigger> */}
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>{props.title}</DialogTitle>

web/src/components/MachineList.tsx

@@ -304,13 +304,15 @@ export function MachineList({ data }: { data: Machine[] }) {
         />
         <div className="ml-auto flex gap-2">
           <InsertModal
-            title="Add Machine"
-            description="Add Comfyui machines to your account."
-            serverAction={addMachine}
-            formSchema={addMachineSchema}
-          />
-          <InsertModal
-            title="Custom Machine"
+            disabled={data.some(
+              (machine) => machine.type === "comfy-deploy-serverless"
+            )}
+            tooltip={
+              data.some((machine) => machine.type === "comfy-deploy-serverless")
+                ? "Only one hosted machine at preview stage"
+                : undefined
+            }
+            title="New Machine"
             description="Add custom Comfyui machines to your account."
             serverAction={addCustomMachine}
             formSchema={addCustomMachineSchema}
@@ -331,6 +333,12 @@ export function MachineList({ data }: { data: Machine[] }) {
               },
             }}
           />
+          <InsertModal
+            title="Custom Machine"
+            description="Add custom comfyui machines to your account."
+            serverAction={addMachine}
+            formSchema={addMachineSchema}
+          />
         </div>
       </div>
       <div className="rounded-md border overflow-x-auto w-full">

web/src/components/PaginationControl.tsx

@@ -29,7 +29,7 @@ export function PaginationControl(props: {
   );
 
   return (
-    <Pagination>
+    <Pagination className="mt-2">
       <PaginationContent>
         <PaginationPrevious
           href={

web/src/components/ui/button.tsx

@@ -36,11 +36,15 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  as?: React.ElementType;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+  (
+    { className, variant, size, asChild = false, as = "button", ...props },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : as;
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}