Layouts

components.layouts

Core page layout and structural scaffolding components.

AuthScaffoldLayout

Bases: Component

Scaffold for auth pages (login, signup) - uses base + card without topbar.

Source code in components/layouts.py

class AuthScaffoldLayout(Component):
    """Scaffold for auth pages (login, signup) - uses base + card without topbar."""

    def __init__(self, children: List[Component], **kwargs):
        layout = BaseLayout(
            children=[
                CardLayout(
                    children=children,
                ),
            ],
        )
        super().__init__(**kwargs, children=[layout])
        self.main_content = children or []

    def render_html(self, **kwargs) -> str:
        return "\n".join(child.render(**kwargs) for child in self.children)

BaseLayout

Bases: Component

The root HTML document layout with necessary boilerplate, styles, and scripts.

Source code in components/layouts.py

class BaseLayout(Component):
    """The root HTML document layout with necessary boilerplate, styles, and scripts."""
    def __init__(self, **kwargs):
        super().__init__(**{**kwargs, "uid": "base"})

    def render_html(self, **kwargs) -> str:
        return base_template.replace(
            "--SlotContent--",
            "\n".join([child.render(**kwargs) for child in self.children]),
        ).replace("--SlotTitle--", settings.PWA_APP_NAME)

CardLayout

Bases: Component

A centered card layout generally used for authentication pages.

Source code in components/layouts.py

class CardLayout(Component):
    """A centered card layout generally used for authentication pages."""
    def __init__(self, **kwargs):
        super().__init__(
            **{**kwargs, "uid": "card"},
        )

    def render_html(self, **kwargs) -> str:
        return card_template.replace(
            "--SlotContent--",
            "\n".join([child.render(**kwargs) for child in self.children]),
        )

ScaffoldLayout

Bases: Component

The standard application scaffolding combining Base, Topbar, and Sidebar layouts.

Source code in components/layouts.py

class ScaffoldLayout(Component):
    """The standard application scaffolding combining Base, Topbar, and Sidebar layouts."""
    def __init__(
        self,
        sidebar_children: List[Component] | None = None,
        **kwargs,
    ):
        layout = BaseLayout(
            children=[
                TopbarLayout(
                    children=[
                        SidebarLayout(
                            children=kwargs["children"],
                            sidebar=sidebar_children,
                        ),
                    ],
                )
            ],
        )
        super().__init__(**{**kwargs, "children": [layout]})
        self.main_content = kwargs["children"] or []
        self.sidebar_children = sidebar_children or []

    def render_html(self, **kwargs) -> str:
        return "\n".join(child.render(**kwargs) for child in self.children)

SidebarLayout

Bases: Component

A responsive layout with a collapsible sidebar and main content area.

Source code in components/layouts.py

class SidebarLayout(Component):
    """A responsive layout with a collapsible sidebar and main content area."""
    def __init__(self, sidebar: List[Component], **kwargs):
        super().__init__(**{**kwargs, "uid": "app-layout"})
        self.main_content = self.children or []
        self.sidebar = sidebar or []

    def render_html(self, **kwargs) -> str:
        return (
            sidebar_template.replace(
                "--UID--",
                self.uid,
            )
            .replace(
                "--SlotSidebar--",
                "\n".join([child.render(**kwargs) for child in self.sidebar]),
            )
            .replace(
                "--SlotContent--",
                "\n".join([child.render(**kwargs) for child in self.main_content]),
            )
            .replace(
                "--SlotEnvironment--",
                Environment(uid=f"{self.uid}_environment").render(**kwargs),
            )
        )

SimpleLayout

Bases: Component

Layout without sidebar, just content area.

Source code in components/layouts.py

class SimpleLayout(Component):
    """Layout without sidebar, just content area."""

    def __init__(self, **kwargs):
        super().__init__(**{**kwargs, "uid": "app-layout"})

    def render_html(self, **kwargs) -> str:
        content = "\n".join([child.render(**kwargs) for child in self.children])
        return simple_layout_template.replace("--SlotContent--", content)

SimpleScaffoldLayout

Bases: Component

Scaffold without sidebar - uses base + topbar + simple layout.

Source code in components/layouts.py

class SimpleScaffoldLayout(Component):
    """Scaffold without sidebar - uses base + topbar + simple layout."""

    def __init__(self, children: List[Component], **kwargs):
        layout = BaseLayout(
            children=[
                TopbarLayout(
                    children=[
                        SimpleLayout(
                            children=children,
                        ),
                    ],
                )
            ],
        )
        super().__init__(**kwargs, children=[layout])
        self.main_content = children or []

    def render_html(self, **kwargs) -> str:
        return "\n".join(child.render(**kwargs) for child in self.children)

TopbarButtons

Bases: Row

Top navigation bar actions including theme toggle, app launcher, and logout.

Source code in components/layouts.py

@UIRegistry.register("topbar_buttons")
class TopbarButtons(Row):
    """Top navigation bar actions including theme toggle, app launcher, and logout."""
    def __init__(self):
        super().__init__(
            uid="topbar-buttons",
            classes="flex items-center",
            children=[
                Button(
                    uid="topbar-theme-btn",
                    icon="sun",
                    icon_alt="moon",
                    icon_condition="theme === 'light'",
                    onclick="toggleTheme()",
                    classes="btn-sm btn-square btn-outline",
                ),
                Button(
                    uid="topbar-apps-btn",
                    url="{% url 'apps' %}",
                    target="#app-layout",
                    icon="squares-2x2",
                    classes="btn-sm btn-square btn-neutral",
                ),
                Button(
                    uid="topbar-logout-btn",
                    url="{% url 'users:logout' %}",
                    method="post",
                    icon="arrow-right-start-on-rectangle",
                    classes="btn-sm btn-square btn-error",
                ),
            ],
        )

TopbarLayout

Bases: Component

A structural layout providing a persistent top header bar.

Source code in components/layouts.py

class TopbarLayout(Component):
    """A structural layout providing a persistent top header bar."""
    def __init__(self, **kwargs):
        super().__init__(**{**kwargs, "uid": "topbar"})

    def render_html(self, **kwargs) -> str:
        buttons_html = UIRegistry.get("topbar_buttons")().build().render(**kwargs)
        children_html = "\n".join([child.render(**kwargs) for child in self.children])

        return f"""
<div
    x-data="{{
        theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
        toggleTheme() {{
            this.theme = this.theme === 'light' ? 'dark' : 'light';
            document.documentElement.setAttribute('data-theme', this.theme);
            localStorage.setItem('theme', this.theme);
        }},
        init() {{
            document.documentElement.setAttribute('data-theme', this.theme);
        }}
    }}"
    class="grid h-[100dvh] grid-rows-[auto_1fr] bg-base-100 font-sans"
>
  <header class="flex items-center justify-end gap-1 bg-base-300 px-4 py-2 border-b border-base-300 z-20">
            {buttons_html}
            <progress class="progress w-full fixed top-0 left-0 h-1 z-50" id="global-loading-indicator"></progress>
  </header>

  <div class="grid relative">
        {children_html}
  </div>
</div>
"""