init frontend

excalidraw/excalidraw-app/components/SaveAsDialog.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useCallback } from "react";
+import { Dialog } from "../../packages/excalidraw/components/Dialog";
+import { TextField } from "../../packages/excalidraw/components/TextField";
+import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
+import { useSetAtom } from "jotai";
+import { saveAsDialogAtom } from "../app-jotai";
+import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
+
+interface SaveAsDialogProps {
+  onCanvasSaveAs: (name: string) => void;
+}
+
+export const SaveAsDialog: React.FC<SaveAsDialogProps> = ({
+  onCanvasSaveAs,
+}) => {
+  const appState = useUIAppState();
+  const [name, setName] = useState(appState.name || "Untitled Canvas");
+  const setSaveAsDialog = useSetAtom(saveAsDialogAtom);
+
+  const handleSaveAs = useCallback(() => {
+    if (name.trim()) {
+      onCanvasSaveAs(name.trim());
+      setSaveAsDialog({ isOpen: false });
+    }
+  }, [name, onCanvasSaveAs, setSaveAsDialog]);
+
+  const handleClose = useCallback(() => {
+    setSaveAsDialog({ isOpen: false });
+  }, [setSaveAsDialog]);
+
+  return (
+    <Dialog onCloseRequest={handleClose} title={"Save as New Canvas"}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+        <TextField
+          label="Canvas Name"
+          value={name}
+          placeholder="Enter a name for the new canvas"
+          onChange={setName}
+          onKeyDown={(e) => e.key === "Enter" && handleSaveAs()}
+        />
+        <div
+          style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}
+        >
+          <FilledButton
+            color="primary"
+            label={"Save As"}
+            onClick={handleSaveAs}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};