Skip to content

[Feature]: Replace custom Behaviour/section card with native List (insetGrouped) on Fan screen #26

@tashda

Description

@tashda

What problem does this solve?

The grouped section cards on the Fan device screen (e.g. Behaviour, with rows like Dim Up Speed (Remote/Local), Ramp Off→On, etc.) are hand-rolled in FanControlCard.sectionView (Shellbee/Shared/FanControl/FanControlCard.swift:408-428):

  • VStack + secondarySystemGroupedBackground + rounded clip
  • Manually drawn Dividers with custom inset
  • Hand-styled uppercase tracked header text
  • Custom FanExtraRow rows containing label + value + slider

Visually it tries to imitate an inset-grouped list, but the result feels cramped and inconsistent with the rest of iOS — sliders sit awkwardly under labels, dividers don't quite line up with system list chrome, and we re-implement accessibility and dynamic-type behaviour we'd otherwise get for free.

What would you like Shellbee to do?

Replace the custom card with a native List + Section using .listStyle(.insetGrouped), keeping FanExtraRow as the row content.

Benefits:

  • Native section headers, dividers, insets, dark-mode and dynamic-type behaviour
  • Built-in accessibility for grouped rows
  • Less custom layout code to maintain
  • Visual consistency with the rest of iOS

Scope:

  • Fan device screen first (FanControlCard).
  • If the prototype lands cleanly, evaluate the same swap for other device types using the custom sectionView pattern.

Acceptance:

  • Behaviour / Indicator / Maintenance / etc. sections render via native List + Section.
  • Slider rows still functional (label, value, slider, debounce/commit behaviour preserved).
  • Visual parity or improvement vs. today; no regression in tap targets, dynamic type, or VoiceOver.

Does the Z2M web frontend already do this?

N/A — this is a native iOS UI concern. The web frontend uses its own component library; we should be using Apple's.

Alternatives considered

  • Form + Section — same look but imposes form semantics and tighter row padding tuned for label/control-on-right; sliders-with-value-on-top get awkward.
  • GroupBox — fine for one-off titled cards, not for stacked grouped sections.
  • Keep the custom card and just polish it — keeps the maintenance burden and accessibility gaps. Skip.

Out of scope

  • Changing which properties belong to which category (handled by FeatureCatalog / FeatureLayout).
  • Redesigning the slider row itself.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions