Function AppLayout

frontend/src/components/layout/AppLayout.tsx:66–738

({ children }: AppLayoutProps)

}

export function AppLayout({ children }: AppLayoutProps) {
  const isMobile = useIsMobile();
  const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
  const [, setIsHovered] = useState(false);
  const [wasExplicitlyOpened, setWasExplicitlyOpened] = useState(!isMobile);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const location = useLocation();
  const navigate = useNavigate();
  const roles = useAuthStore((state) => state.roles);
  const canManageWorkflows = hasAdminRole(roles);
  const { isAuthenticated } = useAuth();
  const authProvider = useAuthProvider();
  const showUserButton = isAuthenticated || authProvider.name === 'clerk';
  const { theme, startTransition } = useThemeStore();
  const openCommandPalette = useCommandPaletteStore((state) => state.open);

  // Get git SHA for version display (monorepo - same for frontend and backend)
  const gitSha = env.VITE_GIT_SHA;
  // If it's a tag (starts with v), show full tag. Otherwise show first 7 chars of SHA
  const displayVersion =
    gitSha && gitSha !== '' && gitSha !== 'unknown'
      ? gitSha.startsWith('v')
        ? gitSha
        : gitSha.slice(0, 7)
      : 'dev';

  // Auto-collapse sidebar when opening workflow builder, expand for other routes
  // On mobile, always start collapsed
  useEffect(() => {
    if (isMobile) {
      setSidebarOpen(false);
      setWasExplicitlyOpened(false);
    } else {
      const isWorkflowRoute =
        (location.pathname.startsWith('/workflows') ||
          location.pathname.startsWith('/webhooks/')) &&
        location.pathname !== '/';
      setSidebarOpen(!isWorkflowRoute);
      setWasExplicitlyOpened(!isWorkflowRoute);
    }
  }, [location.pathname, isMobile]);

  // Close sidebar on mobile when navigating
  useEffect(() => {
    if (isMobile) {
      setSidebarOpen(false);
    }
  }, [location.pathname, isMobile]);

  // Set up sidebar close callback for mobile component placement
  useEffect(() => {
    if (isMobile) {
      setMobilePlacementSidebarClose(() => {
        setSidebarOpen(false);
        setWasExplicitlyOpened(false);
      });
    }
    return () => {