Workspace settings

Component-composed profile, security, notification, integration, and appearance settings.

Workspace settings

Component-composed profile, security, notification, integration, and appearance settings under real pressure.

Appearance loading

The appearance form stays visible, busy, and completely disabled while saving.

Appearance

Preferences follow your account across workspaces and browser sessions.

Applying appearance settings

Theme, density, and motion preferences are synchronizing across open sessions.

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/compositions/settings_page.rb

main(
  id: "gallery-settings-surface",
  aria: { busy: loading? ? "true" : nil },
  data: {
    gallery: "composition-surface",
    gallery_composition: "settings",
    gallery_composition_state: state,
    gallery_mobile: state == "mobile" ? "true" : nil
  }.compact
) do
  render NitroKit::Container.new(size: :xl, id: "gallery-settings-container") do
    render NitroKit::Flex.new(dir: :col, gap: 6, align: :stretch, id: "gallery-settings-stack") do
      render NitroKit::SettingsLayout.new(id: "gallery-settings-layout") do |layout|
        layout.navigation(label: "Settings sections") do
          settings_sections.each do |slug, label|
            layout.item(
              label,
              href: entry_path(entry, state: slug),
              current: setting_section == slug
            )
          end
        end
        layout.content { render_state }
      end
    end
  end
end