Workspace flow

Workspace dashboard

A block-composed dashboard with semantic chart pressure across new, active, degraded, loading, dense, and mobile states.

Workspace dashboard

Block-composed workspace overview with chart pressure across empty, healthy, degraded, loading, dense, and mobile states.

Mobile

Long workspace, chart, and activity content stress the same atoms on a narrow surface.

ViewportFull width
Rubytest/dummy/app/components/gallery/flows/dashboard_page.rb
main(
  id: "gallery-dashboard-surface",
  aria: { busy: state == "loading" ? "true" : nil },
  data: {
    gallery: "flow-surface",
    gallery_flow: "dashboard",
    gallery_flow_state: state,
    gallery_mobile: state == "mobile" ? "true" : nil
  }.compact
) do
  render NitroKit::Container.new(size: :xl, id: "gallery-dashboard-container") do
    render NitroKit::Flex.new(dir: :col, gap: 6, align: :stretch,
    id: "gallery-dashboard-stack") do
      render_workspace_header(disabled: state == "loading")
      render_state
    end
  end
end