Navigation, state management, create rule button integration

app/create/layout.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { CreateFlowProvider } from "./context/CreateFlowContext";
+import { useRouter } from "next/navigation";
+import {
+  CreateFlowProvider,
+  useCreateFlow,
+  saveCreateFlowDraft,
+} from "./context/CreateFlowContext";
+import { useCreateFlowNavigation } from "./hooks/useCreateFlowNavigation";
 import CreateFlowTopNav from "../components/utility/CreateFlowTopNav";
 import CreateFlowFooter from "../components/utility/CreateFlowFooter";
 import Button from "../components/buttons/Button";
-import type { CreateFlowStep } from "./types";
 
 /**
  * Layout for the Create Rule Flow
@@ -16,77 +20,38 @@ import type { CreateFlowStep } from "./types";
  * Includes the create flow-specific TopNav and Footer components.
  */
 function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
-  const pathname = usePathname();
   const router = useRouter();
+  const {
+    currentStep,
+    nextStep,
+    previousStep,
+    goToNextStep,
+    goToPreviousStep,
+  } = useCreateFlowNavigation();
+  const { state, clearState } = useCreateFlow();
 
-  // Extract current step from pathname
-  const currentStep = pathname?.split("/").pop() as CreateFlowStep | undefined;
-
-  // Define step order
-  const stepOrder: CreateFlowStep[] = [
-    "informational",
-    "text",
-    "select",
-    "upload",
-    "review",
-    "cards",
-    "right-rail",
-    "final-review",
-    "completed",
-  ];
-
-  // Get next step
-  const getNextStep = (): CreateFlowStep | null => {
-    if (!currentStep) return null;
-    const currentIndex = stepOrder.indexOf(currentStep);
-    if (currentIndex === -1 || currentIndex === stepOrder.length - 1) {
-      return null;
+  const handleExit = (options?: { saveDraft?: boolean }) => {
+    const saveDraft = options?.saveDraft ?? false;
+    if (!saveDraft && typeof window !== "undefined") {
+      const confirmed = window.confirm(
+        "Leave create flow? Your progress will be lost.",
+      );
+      if (!confirmed) return;
     }
-    return stepOrder[currentIndex + 1];
-  };
-
-  // Get previous step
-  const getPreviousStep = (): CreateFlowStep | null => {
-    if (!currentStep) return null;
-    const currentIndex = stepOrder.indexOf(currentStep);
-    if (currentIndex === -1 || currentIndex === 0) {
-      return null;
-    }
-    return stepOrder[currentIndex - 1];
-  };
-
-  const nextStep = getNextStep();
-  const previousStep = getPreviousStep();
-
-  const handleNext = () => {
-    if (
-      typeof document !== "undefined" &&
-      document.activeElement instanceof HTMLElement
-    ) {
-      document.activeElement.blur();
-    }
-    if (nextStep) {
-      router.push(`/create/${nextStep}`);
-    }
-  };
-
-  const handleBack = () => {
-    if (
-      typeof document !== "undefined" &&
-      document.activeElement instanceof HTMLElement
-    ) {
-      document.activeElement.blur();
-    }
-    if (previousStep) {
-      router.push(`/create/${previousStep}`);
+    if (saveDraft) {
+      saveCreateFlowDraft(state);
     }
+    clearState();
+    router.push("/");
   };
 
   const isCompletedStep = currentStep === "completed";
+  const isRightRailStep = currentStep === "right-rail";
+  const useFullHeightMain = isCompletedStep || isRightRailStep;
 
   return (
     <div
-      className={`bg-black flex flex-col ${isCompletedStep ? "h-screen overflow-hidden" : "min-h-screen"}`}
+      className={`bg-black flex flex-col ${useFullHeightMain ? "h-screen overflow-hidden" : "min-h-screen"}`}
     >
       <CreateFlowTopNav
         hasShare={isCompletedStep}
@@ -98,13 +63,14 @@ function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
             ? () => router.push("/create/final-review")
             : undefined
         }
+        onExit={handleExit}
         buttonPalette={isCompletedStep ? "inverse" : undefined}
         className={
           isCompletedStep ? "!bg-[var(--color-teal-teal50,#c9fef9)]" : undefined
         }
       />
       <main
-        className={`flex-1 flex min-h-0 justify-center ${isCompletedStep ? "items-stretch overflow-hidden" : "items-center overflow-auto"}`}
+        className={`flex-1 flex min-h-0 justify-center ${useFullHeightMain ? "items-stretch overflow-hidden" : "items-center overflow-auto"}`}
       >
         {children}
       </main>
@@ -117,7 +83,7 @@ function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
                 palette="default"
                 size="xsmall"
                 className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
-                onClick={handleNext}
+                onClick={goToNextStep}
               >
                 {currentStep === "final-review"
                   ? "Finalize CommunityRule"
@@ -125,7 +91,7 @@ function CreateFlowLayoutContent({ children }: { children: ReactNode }) {
               </Button>
             ) : null
           }
-          onBackClick={previousStep ? handleBack : undefined}
+          onBackClick={previousStep ? goToPreviousStep : undefined}
         />
       )}
     </div>