Merge pull request 'ui/scene: mock create machine modal for testing' (#4404) from scene-progress into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4404

pkgs/clan-app/ui/src/components/Modal/Modal.tsx

@@ -3,6 +3,7 @@ import { Dialog as KDialog } from "@kobalte/core/dialog";
 import "./Modal.css";
 import { Typography } from "../Typography/Typography";
 import Icon from "../Icon/Icon";
+import cx from "classnames";
 
 export interface ModalContext {
   close(): void;
@@ -13,6 +14,8 @@ export interface ModalProps {
   title: string;
   onClose: () => void;
   children: (ctx: ModalContext) => JSX.Element;
+  mount?: Node;
+  class?: string;
 }
 
 export const Modal = (props: ModalProps) => {
@@ -20,18 +23,28 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <KDialog id={props.id} open={open()} modal={true}>
-      <KDialog.Portal>
+      <KDialog.Portal mount={props.mount}>
-        <KDialog.Content class="modal-content">
+        <KDialog.Content class={cx("modal-content", props.class)}>
           <div class="header">
             <Typography class="title" hierarchy="label" family="mono" size="xs">
               {props.title}
             </Typography>
-            <KDialog.CloseButton onClick={() => setOpen(false)}>
+            <KDialog.CloseButton
+              onClick={() => {
+                setOpen(false);
+                props.onClose();
+              }}
+            >
               <Icon icon="Close" size="0.75rem" />
             </KDialog.CloseButton>
           </div>
           <div class="body">
-            {props.children({ close: () => setOpen(false) })}
+            {props.children({
+              close: () => {
+                setOpen(false);
+                props.onClose();
+              },
+            })}
           </div>
         </KDialog.Content>
       </KDialog.Portal>

pkgs/clan-app/ui/src/routes/Clan/Clan.css

@@ -2,3 +2,12 @@
   opacity: 0;
   transition: opacity 0.5s ease;
 }
+
+.create-backdrop {
+  @apply absolute top-0 left-0 w-full h-svh flex justify-center items-center backdrop-blur-0 z-50;
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.create-modal {
+  @apply min-w-96;
+}

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -1,5 +1,5 @@
 import { RouteSectionProps } from "@solidjs/router";
-import { Component, JSX } from "solid-js";
+import { Component, JSX, Show, createSignal } from "solid-js";
 import { useClanURI } from "@/src/hooks/clan";
 import { CubeScene } from "@/src/scene/cubes";
 import { MachinesQueryResult, useMachinesQuery } from "@/src/queries/queries";
@@ -10,6 +10,9 @@ import { Button } from "@/src/components/Button/Button";
 import { Splash } from "@/src/scene/splash";
 import cx from "classnames";
 import "./Clan.css";
+import { Modal } from "@/src/components/Modal/Modal";
+import { TextInput } from "@/src/components/Form/TextInput";
+import { createForm, FieldValues, reset } from "@modular-forms/solid";
 
 export const Clan: Component<RouteSectionProps> = (props) => {
   return (
@@ -27,17 +30,88 @@ export const Clan: Component<RouteSectionProps> = (props) => {
   );
 };
 
+interface CreateFormValues extends FieldValues {
+  name: string;
+}
+interface MockProps {
+  onClose: () => void;
+  onSubmit: (formValues: CreateFormValues) => void;
+}
+const MockCreateMachine = (props: MockProps) => {
+  let container: Node;
+
+  const [form, { Form, Field, FieldArray }] = createForm<CreateFormValues>();
+
+  return (
+    <div ref={(el) => (container = el)} class="create-backdrop">
+      <Modal
+        mount={container!}
+        onClose={() => {
+          reset(form);
+          props.onClose();
+        }}
+        class="create-modal"
+        title="Create Machine"
+      >
+        {() => (
+          <Form class="flex flex-col" onSubmit={props.onSubmit}>
+            <Field name="name">
+              {(field, props) => (
+                <>
+                  <TextInput
+                    {...field}
+                    label="Name"
+                    size="s"
+                    required={true}
+                    input={{ ...props, placeholder: "name" }}
+                  />
+                </>
+              )}
+            </Field>
+
+            <div class="flex w-full items-center justify-end gap-4">
+              <Button size="s" hierarchy="secondary" onClick={props.onClose}>
+                Cancel
+              </Button>
+              <Button
+                size="s"
+                type="submit"
+                hierarchy="primary"
+                onClick={close}
+              >
+                Create
+              </Button>
+            </div>
+          </Form>
+        )}
+      </Modal>
+    </div>
+  );
+};
+
 const ClanSceneController = () => {
   const clanURI = useClanURI({ force: true });
 
-  const onCreate = async (id: string) => {
+  const [dialogHandlers, setDialogHandlers] = createSignal<{
+    resolve: ({ id }: { id: string }) => void;
+    reject: (err: unknown) => void;
+  } | null>(null);
+
+  const onCreate = async (): Promise<{ id: string }> => {
+    return new Promise((resolve, reject) => {
+      setShowModal(true);
+      setDialogHandlers({ resolve, reject });
+    });
+  };
+
+  const sendCreate = async (values: CreateFormValues) => {
     const api = callApi("create_machine", {
       opts: {
         clan_dir: {
           identifier: clanURI,
         },
         machine: {
-          name: id,
+          name: values.name,
         },
       },
     });
@@ -49,14 +123,34 @@ const ClanSceneController = () => {
       // Important: rejects the promise
       throw new Error(res.errors[0].message);
     }
-    return;
+    return { id: values.name };
   };
 
+  const [showModal, setShowModal] = createSignal(false);
+
   return (
     <SceneDataProvider clanURI={clanURI}>
       {({ query }) => {
         return (
           <>
+            <Show when={showModal()}>
+              <MockCreateMachine
+                onClose={() => {
+                  setShowModal(false);
+                  dialogHandlers()?.reject(new Error("User cancelled"));
+                }}
+                onSubmit={async (values) => {
+                  try {
+                    const result = await sendCreate(values);
+                    dialogHandlers()?.resolve(result);
+                    setShowModal(false);
+                  } catch (err) {
+                    dialogHandlers()?.reject(err);
+                    setShowModal(false);
+                  }
+                }}
+              />
+            </Show>
             <div
               class="flex flex-row"
               style={{ position: "absolute", top: "10px", left: "10px" }}
@@ -68,6 +162,7 @@ const ClanSceneController = () => {
                     produce((s) => {
                       for (const machineId in s.sceneData[clanURI]) {
                         // Reset the position of each machine to [0, 0]
+                        s.sceneData[clanURI] = {}; // Clear the entire object
                         // delete s.sceneData[clanURI][machineId];
                       }
                     }),
@@ -90,6 +185,7 @@ const ClanSceneController = () => {
             <div class={cx({ "fade-out": !query.isLoading })}>
               <Splash />
             </div>
+
             <CubeScene
               isLoading={query.isLoading}
               cubesQuery={query}

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -66,7 +66,7 @@ function keyFromPos(pos: [number, number]): string {
 
 export function CubeScene(props: {
   cubesQuery: MachinesQueryResult;
-  onCreate?: (id: string) => Promise<void>;
+  onCreate: () => Promise<{ id: string }>;
   sceneStore: Accessor<SceneData>;
   setMachinePos: (machineId: string, pos: [number, number]) => void;
   isLoading: boolean;
@@ -251,7 +251,10 @@ export function CubeScene(props: {
   // Reactive cubes memo - this recalculates whenever data changes
   const cubes = createMemo(() => {
     console.log("Calculating cubes...");
-    const currentIds = Object.keys(unwrap(props.sceneStore()));
+    const sceneData = props.sceneStore(); // keep it reactive
+    if (!sceneData) return [];
+
+    const currentIds = Object.keys(sceneData);
     console.log("Current IDs:", currentIds);
 
     let cameraTarget = [0, 0, 0] as [number, number, number];
@@ -302,6 +305,7 @@ export function CubeScene(props: {
 
       if (progress < 1) {
         requestAnimationFrame(animate);
+        requestRenderIfNotRequested();
       }
     }
 
@@ -599,6 +603,7 @@ export function CubeScene(props: {
       CREATE_BASE_COLOR,
       CREATE_BASE_EMISSIVE,
     );
+    initBase.visible = false;
 
     scene.add(initBase);
 
@@ -631,14 +636,25 @@ export function CubeScene(props: {
     // - Creates a new cube in "create" mode
     const onClick = (event: MouseEvent) => {
       if (worldMode() === "create") {
-        setWorldMode("view");
+        props
+          .onCreate()
+          .then(({ id }) => {
+            //Successfully created machine
+            const pos = cursorPosition();
+            if (!pos) {
+              console.warn("No position set for new cube");
+              return;
+            }
+            props.setMachinePos(id, pos);
+          })
+          .catch((error) => {
+            console.error("Error creating cube:", error);
+          })
+          .finally(() => {
+            if (initBase) initBase.visible = false;
 
-        // res.result.then(() => {
+            setWorldMode("view");
-        //   props.cubesQuery.refetch();
+          });
-
-        //   positionMap.set("sara", pos);
-        //   addCube("sara");
-        // });
       }
 
       const rect = renderer.domElement.getBoundingClientRect();
@@ -828,6 +844,8 @@ export function CubeScene(props: {
         }
       }
     });
+
+    requestRenderIfNotRequested();
   });
 
   createEffect(
@@ -856,8 +874,10 @@ export function CubeScene(props: {
     const pos = nextGridPos();
     if (!initBase) return;
 
-    initBase.position.set(pos[0], BASE_HEIGHT / 2, pos[1]);
+    if (initBase.visible === false && inside) {
-
+      initBase.position.set(pos[0], BASE_HEIGHT / 2, pos[1]);
+      initBase.visible = true;
+    }
     requestRenderIfNotRequested();
   };
 
@@ -869,6 +889,8 @@ export function CubeScene(props: {
     if (worldMode() !== "create") return;
     if (!initBase) return;
 
+    initBase.visible = true;
+
     const rect = renderer.domElement.getBoundingClientRect();
     const mouse = new THREE.Vector2(
       ((event.clientX - rect.left) / rect.width) * 2 - 1,
@@ -923,8 +945,10 @@ export function CubeScene(props: {
             onClick={() => {
               if (positionMode() === "grid") {
                 setPositionMode("circle");
+                grid.visible = false;
               } else {
                 setPositionMode("grid");
+                grid.visible = true;
               }
             }}
           />