feat: allow host apps to register custom sections in team settings

[anilcancakir]

feat: allow host apps to register custom sections in team settings

Summary

Allow host applications to inject custom form sections (cards) into the team settings view. Currently team settings only shows name, members, and invitations. Apps need a way to add project-specific settings (billing, integrations, preferences, etc.) without overriding the entire view.

Current Behavior

• Team settings view (MagicStarterTeamSettingsView) renders three fixed sections: General (name), Members, Invitations
• The only extensibility option is full view override via MagicStarter.view.register('teams.settings', ...), which forces the app to reimplement all existing sections

Proposed Behavior

Add a section registration API that lets host apps append custom SectionCard widgets to the team settings page:

MagicStarter.teamSettings.registerSection(
  key: 'billing',
  order: 10,
  builder: (context, team) => SectionCard(
    title: 'Billing',
    children: [
      // Custom billing form fields
    ],
  ),
);

• Sections are rendered after the built-in sections, ordered by order value
• Each section receives the current team context
• Sections can be removed by key: MagicStarter.teamSettings.removeSection('billing')
• Registration happens in the app's service provider boot(), before navigation renders

Acceptance Criteria

• MagicStarter.teamSettings.registerSection(key:, order:, builder:) API exists
• Custom sections render in team settings view after built-in sections
• Sections are sorted by order (lower = higher on page)
• removeSection(key) removes a registered section
• Duplicate key registration replaces the previous section (no duplicates)
• Works with existing feature gate (hasTeamFeatures())

---

Task: feat: allow host apps to register custom sections in team settings

[Copilot]

Pull request overview

Adds an extension point to Magic Starter’s Teams module so host applications can inject additional section cards into the Team Settings page without overriding the entire view.

Changes:

• Introduces MagicStarterTeamSettingsRegistry for registering/removing custom team settings sections and building them in sorted order.
• Wires the registry into MagicStarterManager + MagicStarter facade and clears it on MagicStarterManager.reset().
• Renders registered custom sections in MagicStarterTeamSettingsView, and adds unit tests for the registry + facade/reset integration.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
lib/src/ui/magic_starter_team_settings_registry.dart	New registry that stores section builders, supports register/remove, and builds sorted widgets.
lib/src/magic_starter_manager.dart	Adds registry instance, exposes it via getter, clears it during reset.
lib/src/facades/magic_starter.dart	Adds MagicStarter.teamSettings accessor to reach the registry from host apps.
lib/src/ui/views/teams/magic_starter_team_settings_view.dart	Injects registry-built sections into the team settings page render pipeline.
lib/magic_starter.dart	Exports the new registry as part of the public barrel API.
test/ui/magic_starter_team_settings_registry_test.dart	Adds unit tests for registry behavior and manager/facade integration.

[Copilot]

The MagicFormData initialization is not formatted in the same style as other views (and likely will fail CI’s dart format --set-exit-if-changed). Please run dart format and keep the constructor call in the standard multi-line format with trailing commas for readability and consistency.

[Copilot]

Same formatting issue here: this MagicFormData call is written in a non-standard style compared to the rest of the codebase and may be rewritten by dart format (causing CI failure). Please reformat to the usual multi-line call style with trailing commas.

[Copilot]

List.sort in Dart is not guaranteed to be stable, so sections with the same order may render in an unpredictable order between builds. Consider adding a deterministic tie-breaker (e.g., order then key) to avoid UI flicker when multiple sections share an order value.

Suggested change

	..sort((a, b) => a.order.compareTo(b.order));
	..sort((a, b) {
	final orderComparison = a.order.compareTo(b.order);
	if (orderComparison != 0) return orderComparison;
	return a.key.compareTo(b.key);
	});

[Copilot]

The new custom-section injection point isn’t covered by a widget test. Since there are existing widget tests for MagicStarterTeamSettingsView, please add coverage asserting that registered sections render on the page (and in the expected sorted order) when MagicStarter.teamSettings.registerSection(...) is used.