Page utilities

def tab_title() -> None:
    unread = sum(1 for _sender, _subject, is_unread in MESSAGES if is_unread)
    ui.title(f"({unread}) {PAGE_TITLE}")
    with ui.card(padding="md", classes="w-full max-w-md"), ui.vstack(gap="sm"):
        with ui.hstack(gap="sm"):
            ui.icon("inbox", color="primary")
            ui.text("Inbox", weight="medium")
            ui.badge(f"{unread} unread", color="error", variant="soft", size="sm")
        for sender, subject, is_unread in MESSAGES:
            with ui.hstack(gap="sm", classes="min-w-0"):
                ui.text(sender, size="sm", weight="semibold" if is_unread else "normal",
                        classes="w-32 shrink-0")
                ui.text(subject, size="sm", truncate=True, classes="min-w-0",
                        color=None if is_unread else "muted")

def share_preview() -> None:
    ui.meta_tag(property="og:title", content=PAGE_TITLE)
    ui.meta_tag(property="og:image",
                content="https://picsum.photos/seed/bretzel/1200/630")
    ui.meta_tag(name="twitter:card", content="summary_large_image")
    with ui.card(padding="none", classes="w-full max-w-md overflow-hidden"):
        ui.image("https://picsum.photos/seed/bretzel/1200/630",
                 alt="Share image for this page", ratio="wide")
        with ui.vstack(gap="none", classes="p-4"):
            ui.text("showcase.bretzel-py.dev", size="xs", color="muted")
            ui.text(PAGE_TITLE, weight="semibold")
            ui.text("How the link looks when pasted in Slack or on LinkedIn.",
                    size="sm", color="muted")

def shell() -> None:
    ui.meta_tag(name="robots", content="index,follow,max-image-preview:large")
    ui.meta_tag(property="og:type", content="website")
    ui.meta_tag(property="og:site_name", content="Bretzel UI")
    ui.meta_tag(property="og:description",
                content="Every Bretzel component in real uses, with its Python "
                        "code, under a theme you can switch and tune live.")
    ui.meta_tag(property="og:image", content=SHARE_IMAGE)
    ui.meta_tag(name="twitter:card", content="summary")
    ui.meta_tag(name="twitter:image", content=SHARE_IMAGE)
    Studio()
    mobile = Screen().is_mobile
    with ui.viewport(attrs={"bz-effect": repaint_effect()}):
        # Desktop: a rail. Phone: an overlay that slides in over the page —
        # a rail would eat a fifth of a 390 px screen for good.
        sidebar = ui.sidebar(collapsible="overlay" if mobile else "rail",
                             open=not mobile)
        with sidebar:
            ui.sidebar_title("Bretzel UI", icon=ui.icon("shapes", color="primary", size="lg"),
                             href="/")
            with ui.sidebar_section():
                ui.sidebar_item("Overview", icon="house", href="/")
                ui.sidebar_item("Theme studio", icon="palette", href="/studio")
            for group, entries in CATALOG:
                with ui.sidebar_section(label=group):
                    for slug, label, icon in entries:
                        ui.sidebar_item(label, icon=icon, href=f"/{slug}")
            with ui.sidebar_footer(name="Bretzel", subtitle="v0.1.0a2 · Early alpha"):
                for value, label, icon in SCHEMES:
                    ui.sidebar_footer_item(label=label, icon_left=icon,
                                           on_click=ColorScheme.set(value))
                ui.divider(classes="my-1")
                for label, icon, href in SITES:
                    ui.sidebar_footer_item(label=label, icon_left=icon, href=href)
        with ui.pane(gap="lg", padding="lg", classes="max-md:p-4"):
            theme_bar(sidebar if mobile else None)
            # The outlet is the page's own column: its sections are its
            # children, so the rhythm between them is set here, once.
            ui.outlet(classes="flex flex-col gap-14 w-full max-w-5xl mx-auto pb-16")


def layout_sketch() -> None:
    with (ui.card(padding="sm", classes="w-full max-w-2xl"),
          ui.hstack(gap="sm", align="stretch", classes="h-56")):
        with ui.vstack(gap="sm", classes="w-40 shrink-0"):
            ui.text("ui.sidebar", size="xs", color="muted", classes="font-mono")
            for width in ("80%", "60%", "70%", "50%"):
                ui.skeleton(variant="text", width=width, animated=False)
        with (ui.card(padding="md", classes="flex-1"),
              ui.vstack(gap="sm")):
            ui.text("ui.outlet()", weight="semibold", color="primary",
                    classes="font-mono")
            ui.text("Every page renders here.", size="sm", color="muted")
            ui.skeleton(variant="rectangle", height="5rem", animated=False)

def plan_cell(value, row):
    with ui.fragment() as cell:
        ui.text(value, weight="medium")
        if row["trial"]:
            ui.badge("Trial", color="info", variant="soft", size="xs",
                     classes="ml-2")
    return cell


def fragment_demo() -> None:
    ui.table(columns=[ui.column("customer", label="Customer"),
                      ui.column("plan", label="Plan", render=plan_cell)],
             rows=PLANS, classes="w-full max-w-lg")

async def publish_changes() -> None:
    await asyncio.sleep(1.5)


def pending_demo() -> None:
    with ui.card(padding="md", classes="w-full max-w-md"), ui.vstack(gap="md"):
        with ui.vstack(gap="none"):
            ui.text("Pricing page", weight="semibold")
            ui.text("3 unpublished changes", size="sm", color="muted")
        with ui.hstack(gap="sm", justify="between"):
            ui.text("Publishing to 3 regions…", size="sm", color="primary",
                    visible=ui.pending(publish_changes))
            ui.button("Publish", icon_left="upload-cloud", on_click=publish_changes,
                      loading=ui.pending(), classes="ml-auto")