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.
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 clipDividers with custom insetFanExtraRowrows containing label + value + sliderVisually 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+Sectionusing.listStyle(.insetGrouped), keepingFanExtraRowas the row content.Benefits:
Scope:
FanControlCard).sectionViewpattern.Acceptance:
List+Section.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.Out of scope
FeatureCatalog/FeatureLayout).