overlay system (#166)

* overlay system

* fixes

* fixes

* fixes

* fixes

* fixes

* delete dead code

Author: ctate

app/layout.tsx

@@ -9,6 +9,7 @@ import { AuthProvider } from "@/components/auth/provider";
 import { GitHubStarsLoader } from "@/components/github-stars-loader";
 import { GitHubStarsProvider } from "@/components/github-stars-provider";
 import { GlobalModals } from "@/components/global-modals";
+import { OverlayProvider } from "@/components/overlays/overlay-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { PersistentCanvas } from "@/components/workflow/persistent-canvas";
@@ -54,19 +55,21 @@ const RootLayout = ({ children }: RootLayoutProps) => (
       >
         <Provider>
           <AuthProvider>
-            <Suspense
-              fallback={
-                <GitHubStarsProvider stars={null}>
+            <OverlayProvider>
+              <Suspense
+                fallback={
+                  <GitHubStarsProvider stars={null}>
+                    <LayoutContent>{children}</LayoutContent>
+                  </GitHubStarsProvider>
+                }
+              >
+                <GitHubStarsLoader>
                   <LayoutContent>{children}</LayoutContent>
-                </GitHubStarsProvider>
-              }
-            >
-              <GitHubStarsLoader>
-                <LayoutContent>{children}</LayoutContent>
-              </GitHubStarsLoader>
-            </Suspense>
-            <Toaster />
-            <GlobalModals />
+                </GitHubStarsLoader>
+              </Suspense>
+              <Toaster />
+              <GlobalModals />
+            </OverlayProvider>
           </AuthProvider>
         </Provider>
       </ThemeProvider>

app/workflows/[workflowId]/page.tsx

@@ -739,6 +739,9 @@ const WorkflowEditor = ({ params }: WorkflowPageProps) => {
           <NodeConfigPanel />
         </div>
       )}
+
+      {/* Mobile: NodeConfigPanel renders the overlay trigger button */}
+      {isMobile && <NodeConfigPanel />}
     </div>
   );
 };

components/ai-gateway-consent-modal.tsx

@@ -1,10 +1,16 @@
 "use client";
 
-import { AiGatewayConsentModal } from "@/components/ai-gateway-consent-modal";
+import { OverlayContainer } from "@/components/overlays/overlay-container";
+import { OverlaySync } from "@/components/overlays/overlay-sync";
 
 /**
- * Global modals that need to be rendered once at app level
+ * Global modals and overlays that need to be rendered once at app level
  */
 export function GlobalModals() {
-  return <AiGatewayConsentModal />;
+  return (
+    <>
+      <OverlayContainer />
+      <OverlaySync />
+    </>
+  );
 }