Custom React Pages

app.add_page(
    "Mailbox",
    icon="mail",
    component="pages/mailbox.tsx",
    packages=["lightweight-charts@4.2.0"],
    access="authenticated",
)

import { EmptyState, useCapsule, useData, useTheme } from "@capsule/page"

export default function Mailbox() {
  const theme = useTheme()
  const { user } = useCapsule()
  const threads = useData("threads", { params: { status: "needs-review" } })

  if (threads.data?.gmail_connected === false) {
    return (
      <EmptyState
        title="Gmail not connected"
        description="Connect Gmail before loading the mailbox."
      />
    )
  }

  return (
    <div style={{ color: theme.color.foreground }}>
      <p>Signed in as {user?.email}</p>
      <h2>Threads: {threads.data?.threads?.length ?? 0}</h2>
    </div>
  )
}

@app.data("threads", access="authenticated")
async def threads(ctx: cpsl.RequestContext, status: str = ""):
    gmail = ctx.integrations.get(cpsl.Integration.GMAIL)
    if not gmail:
        return {"gmail_connected": False, "threads": []}

    return {"gmail_connected": True, "threads": await load_threads(status)}