Replace window.prompt with custom dialogs and add String object mode with automatic conversion

src/App.css

@@ -28,7 +28,7 @@ input {
   border-style: solid;
   border-radius: 8px;
   border-color: grey;
-  width: 140px;
+  width: 80px;
   padding: 4px;
 }
 

src/ArrayCreationDialog.tsx

@@ -0,0 +1,196 @@
+import { DataType } from "./memory";
+
+interface ArrayCreationDialogProps {
+  onConfirm: (name: string, length: number, elementType: DataType) => void;
+  onCancel: () => void;
+  availableTypes: DataType[];
+}
+
+export const ArrayCreationDialog = ({
+  onConfirm,
+  onCancel,
+  availableTypes,
+}: ArrayCreationDialogProps) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const name = formData.get("name") as string;
+    const length = parseInt(formData.get("length") as string, 10);
+    const elementType = formData.get("elementType") as DataType;
+
+    if (name && !isNaN(length) && length > 0 && elementType) {
+      onConfirm(name, length, elementType);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1000,
+      }}
+      onClick={onCancel}
+    >
+      <div
+        style={{
+          backgroundColor: "white",
+          padding: "24px",
+          borderRadius: "8px",
+          minWidth: "400px",
+          maxWidth: "90vw",
+          border: "1px solid #e5e7eb",
+          margin: "20px",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3
+          style={{
+            margin: "0 0 16px 0",
+            fontSize: "18px",
+            fontWeight: "600",
+            color: "#111827",
+          }}
+        >
+          Create New Array
+        </h3>
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                marginBottom: "6px",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#374151",
+              }}
+            >
+              Array Name
+            </label>
+            <input
+              type="text"
+              name="name"
+              required
+              autoFocus
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                borderRadius: "6px",
+                border: "1px solid #d1d5db",
+                fontSize: "14px",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: "16px" }}>
+            <label
+              style={{
+                display: "block",
+                marginBottom: "6px",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#374151",
+              }}
+            >
+              Length
+            </label>
+            <input
+              type="number"
+              name="length"
+              required
+              min="1"
+              defaultValue="5"
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                borderRadius: "6px",
+                border: "1px solid #d1d5db",
+                fontSize: "14px",
+                boxSizing: "border-box",
+              }}
+            />
+          </div>
+          <div style={{ marginBottom: "20px" }}>
+            <label
+              style={{
+                display: "block",
+                marginBottom: "6px",
+                fontSize: "14px",
+                fontWeight: "500",
+                color: "#374151",
+              }}
+            >
+              Element Type
+            </label>
+            <select
+              name="elementType"
+              defaultValue="int"
+              style={{
+                width: "100%",
+                padding: "8px 12px",
+                borderRadius: "6px",
+                border: "1px solid #d1d5db",
+                fontSize: "14px",
+                backgroundColor: "white",
+                cursor: "pointer",
+                boxSizing: "border-box",
+              }}
+            >
+              {availableTypes.map((type) => (
+                <option key={type} value={type}>
+                  {type}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              gap: "8px",
+              justifyContent: "flex-end",
+            }}
+          >
+            <button
+              type="button"
+              onClick={onCancel}
+              style={{
+                backgroundColor: "white",
+                color: "#374151",
+                padding: "8px 16px",
+                fontSize: "14px",
+                fontWeight: "500",
+                border: "1px solid #d1d5db",
+                borderRadius: "6px",
+                cursor: "pointer",
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              style={{
+                backgroundColor: "#111827",
+                color: "white",
+                padding: "8px 16px",
+                fontSize: "14px",
+                fontWeight: "500",
+                border: "none",
+                borderRadius: "6px",
+                cursor: "pointer",
+              }}
+            >
+              Create
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

src/ConfigView.tsx

@@ -2,6 +2,7 @@ import { shallow } from "zustand/shallow";
 import useStore, { RFState } from "./store";
 import { useCallback, useState, useEffect } from "react";
 import { DataType, primitveDataTypes } from "./memory";
+import { SimpleInputDialog } from "./SimpleInputDialog";
 
 const selector = (state: RFState) => ({
   updateMemory: state.updateMemory,
@@ -24,6 +25,7 @@ export const ConfigView = () => {
   const [newAttrType, setNewAttrType] = useState<DataType>("String");
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [showSaveSuccess, setShowSaveSuccess] = useState(false);
+  const [showAddClassDialog, setShowAddClassDialog] = useState(false);
 
   // Get available data types: primitives + Array + defined classes
   const availableDataTypes = [
@@ -108,15 +110,17 @@ export const ConfigView = () => {
   );
 
   const handleAddKlass = useCallback(() => {
-    const name = window.prompt("Enter class name:");
-    if (name && name.trim()) {
-      setKlasses((prev) => ({
-        ...prev,
-        [name.trim()]: {
-          attributes: {},
-        },
-      }));
-    }
+    setShowAddClassDialog(true);
+  }, []);
+
+  const handleAddKlassConfirm = useCallback((name: string) => {
+    setKlasses((prev) => ({
+      ...prev,
+      [name]: {
+        attributes: {},
+      },
+    }));
+    setShowAddClassDialog(false);
   }, []);
 
   const handleRemoveKlass = useCallback((name: string) => {
@@ -888,6 +892,17 @@ export const ConfigView = () => {
           </div>
         </div>
       )}
+
+      {/* Add Class Dialog */}
+      {showAddClassDialog && (
+        <SimpleInputDialog
+          title="Add Class"
+          label="Class Name"
+          placeholder="Enter class name"
+          onConfirm={handleAddKlassConfirm}
+          onCancel={() => setShowAddClassDialog(false)}
+        />
+      )}
     </div>
   );
 };