feat: work on creating a workflow document in Firestore

src/pages/WorkflowsPage.tsx

@@ -1,14 +1,40 @@
-import { Fab, Tooltip, Zoom } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
+import { Fab, Tooltip, Zoom } from "@mui/material";
+import { projectScope } from "@src/atoms/projectScope";
+import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase";
+import { addDoc, collection } from "firebase/firestore";
+import { useAtom } from "jotai";
+import { useCallback, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
 
 export default function WorkflowsPage() {
+  const [firebaseDb] = useAtom(firebaseDbAtom, projectScope);
+
+  const workflowsRef = useMemo(
+    () => collection(firebaseDb, "_rowy_", "settings", "workflows"),
+    [firebaseDb]
+  );
+
+  const navigate = useNavigate();
+
+  const handleAddWorkflow = useCallback(async () => {
+    const workflow = await addDoc(workflowsRef, {
+      name: "New workflow",
+      description: "",
+      steps: [],
+    });
+
+    navigate(`/workflows/${workflow.id}`);
+  }, [workflowsRef, navigate]);
+
   return (
     <>
       <Tooltip title="Create workflow">
         <Zoom in>
           <Fab
             color="secondary"
             aria-label="Create workflow"
+            onClick={handleAddWorkflow}
             sx={{
               zIndex: "speedDial",
               position: "fixed",