MainLayout

MainLayout is the root layout component that wraps every page in the main window. It handles the topbar, tab navigation, connection state, and loading/error states automatically so you don't have to think about any of that in your page components.

import { MainLayout } from "@/components/layouts/main-layout";

export function MyPage() {
  const { data, set, isLoading, error } = useConfigKey<MyConfig>("myconfig");

  return (
    <MainLayout loading={isLoading} error={error}>
      {/* your page content */}
    </MainLayout>
  );
}

Props

Connection State

MainLayout listens to the global connection context automatically. If the C++ backend is not running or the connection is lost, it replaces the page content with a lost connection screen — you don't need to handle this yourself in your pages.

Notes

• Only use MainLayout for pages in the main window. Secondary windows should use Topbar directly instead since they don't need tab navigation.
• Pass isLoading and error directly from useConfigKey — the layout handles both states for you.