"use client";
import { Menu } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import posthog from "posthog-js";
import React, { ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { SidebarInset, SidebarProvider, useSidebar } from "@/components/ui/sidebar";
import { PostHogEvent } from "@/constants/posthog-events";
import { AppSidebar } from "./AppSidebar";
import { GitHubStarBadge } from "./GitHubStarBadge";
function AppHeader() {
const { toggleSidebar } = useSidebar();
return (
);
}
interface AppLayoutProps {
children: ReactNode;
headerActions?: ReactNode;
stickyTabs?: ReactNode;
}
const AppLayout: React.FC = ({
children,
headerActions,
stickyTabs,
}) => {
const pathname = usePathname();
// Check if current route should have sidebar
// Hide sidebar for root (/), /handler routes (Stack Auth routes), and /auth routes
const shouldShowSidebar = pathname !== "/" && !pathname.startsWith("/handler") && !pathname.startsWith("/auth");
// Only match the exact editor page /workflow/, not sub-routes like /workflow//runs
const isWorkflowEditor = /^\/workflow\/\d+$/.test(pathname);
// Always render SidebarProvider to keep the component tree shape consistent
// across route changes (avoids React hooks ordering violations during navigation).
return (
{shouldShowSidebar ? (
{!isWorkflowEditor && }
{/* Optional header area for specific pages */}
{headerActions && (
)}
{/* Optional sticky tabs */}
{stickyTabs && (
)}
{/* Main content area */}
{children}
) : (
{children}
)}
);
};
export default AppLayout;