From 6cfd05ec04e17060377fca337e621ba8c0a86877 Mon Sep 17 00:00:00 2001
From: Pritesh <pritesh@dograh.com>
Date: Wed, 3 Jun 2026 04:24:25 +0530
Subject: [PATCH] feat(lead-gen): mount LeadFormsProvider in app layout

Wrap the sidebar branch of AppLayout with LeadFormsProvider so the shared
lead modals are available to the sidebar, billing card, and builder nudge.
Includes eslint import-order auto-fixes in TopUpModal and LeadFormsContext.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 ui/src/components/layout/AppLayout.tsx      | 63 +++++++++++----------
 ui/src/components/lead-forms/TopUpModal.tsx |  2 +-
 ui/src/context/LeadFormsContext.tsx         |  2 +-
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/ui/src/components/layout/AppLayout.tsx b/ui/src/components/layout/AppLayout.tsx
index ed3984e7..8b2b90c8 100644
--- a/ui/src/components/layout/AppLayout.tsx
+++ b/ui/src/components/layout/AppLayout.tsx
@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
 import { SidebarInset, SidebarProvider, useSidebar } from "@/components/ui/sidebar";
 import { PostHogEvent } from "@/constants/posthog-events";
 import { useAppConfig } from "@/context/AppConfigContext";
+import { LeadFormsProvider } from "@/context/LeadFormsContext";
 
 import { AppSidebar } from "./AppSidebar";
 import { GitHubStarBadge } from "./GitHubStarBadge";
@@ -111,39 +112,41 @@ const AppLayout: React.FC<AppLayoutProps> = ({
   return (
     <SidebarProvider defaultOpen>
       {shouldShowSidebar ? (
-        <div className="flex min-h-screen w-full">
-          <AppSidebar />
-          <SidebarInset className="flex-1">
-            <BackendStatusBanner />
-            {!isWorkflowEditor && <AppHeader />}
-            {/* Optional header area for specific pages */}
-            {headerActions && (
-              <header className="sticky top-0 z-50 w-full border-b bg-background">
-                <div className="container mx-auto px-4 py-4">
-                  <div className="flex items-center justify-center">
-                    {headerActions}
+        <LeadFormsProvider>
+          <div className="flex min-h-screen w-full">
+            <AppSidebar />
+            <SidebarInset className="flex-1">
+              <BackendStatusBanner />
+              {!isWorkflowEditor && <AppHeader />}
+              {/* Optional header area for specific pages */}
+              {headerActions && (
+                <header className="sticky top-0 z-50 w-full border-b bg-background">
+                  <div className="container mx-auto px-4 py-4">
+                    <div className="flex items-center justify-center">
+                      {headerActions}
+                    </div>
+                  </div>
+                </header>
+              )}
+
+              {/* Optional sticky tabs */}
+              {stickyTabs && (
+                <div className="sticky top-0 z-40 bg-[#2a2e39] border-b border-gray-700">
+                  <div className="container mx-auto px-4">
+                    <div className="flex items-center justify-center py-2">
+                      {stickyTabs}
+                    </div>
                   </div>
                 </div>
-              </header>
-            )}
+              )}
 
-            {/* Optional sticky tabs */}
-            {stickyTabs && (
-              <div className="sticky top-0 z-40 bg-[#2a2e39] border-b border-gray-700">
-                <div className="container mx-auto px-4">
-                  <div className="flex items-center justify-center py-2">
-                    {stickyTabs}
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* Main content area */}
-            <main className="flex-1">
-              {children}
-            </main>
-          </SidebarInset>
-        </div>
+              {/* Main content area */}
+              <main className="flex-1">
+                {children}
+              </main>
+            </SidebarInset>
+          </div>
+        </LeadFormsProvider>
       ) : (
         <div className="flex-1 w-full">
           <BackendStatusBanner />
diff --git a/ui/src/components/lead-forms/TopUpModal.tsx b/ui/src/components/lead-forms/TopUpModal.tsx
index b574ee45..be56fcd0 100644
--- a/ui/src/components/lead-forms/TopUpModal.tsx
+++ b/ui/src/components/lead-forms/TopUpModal.tsx
@@ -23,10 +23,10 @@ import {
 
 import { validateWorkEmail } from "./isPersonalEmail";
 import {
+  type LeadSource,
   TOPUP_COMPANY_SIZE_OPTIONS,
   TOPUP_VOLUME_OPTIONS,
   VOLUME_PRICING_GATE,
-  type LeadSource,
 } from "./leadFieldOptions";
 import { MathCaptcha } from "./MathCaptcha";
 import { submitLead } from "./submitLead";
diff --git a/ui/src/context/LeadFormsContext.tsx b/ui/src/context/LeadFormsContext.tsx
index d885ac5a..0d8da74b 100644
--- a/ui/src/context/LeadFormsContext.tsx
+++ b/ui/src/context/LeadFormsContext.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import posthog from "posthog-js";
-import { createContext, useCallback, useContext, useMemo, useRef, useState, type ReactNode } from "react";
+import { createContext, type ReactNode,useCallback, useContext, useMemo, useRef, useState } from "react";
 
 import { EnterpriseModal } from "@/components/lead-forms/EnterpriseModal";
 import { HireExpertModal } from "@/components/lead-forms/HireExpertModal";