Restructure mobile Settings into a two-level category menu
On mobile, AccountView used to render all 9 Settings sections inline in one long, individually-collapsible column (_MobileList). Replace that with a native-style menu: the account card stays pinned at the top, and every other section becomes a NooSettingsRow in a NooGroupedList that pushes a dedicated screen (NooTopBar + NooTopBarBack) holding just that section's content. This removes the scroll-depth problem outright instead of working around it with per-section collapsing, so SettingsSection no longer needs NooGroupedList's collapsible mode on mobile. Desktop's 2-column grid is unchanged - it already shows every section at once. Audited every lib/widgets/settings/*.dart file for the reported "description and controls are flipped" row-layout bug: every row goes through NooSettingsRow directly, or - for the few hand-rolled rows (_SavedAccountRow, _ThemeRow/_BottomBarStyleRow, _CacheIntervalRow) - preserves its icon/description-then-control order (the stacked control-below-label shape used by _ThemeRow and _CacheIntervalRow is an intentional, spec'd variant, not a flip). Found no instance of the bug; no fix was needed. Updates DESIGN_SYSTEM.md's Settings recipe and styling.md's NooGroupedList notes to describe the new menu-then-pushed-screen pattern, and adds a widget test covering the category menu and the push/pop navigation. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -5,7 +5,7 @@ import '../noo/noo_layout.dart';
|
||||
import '../noo/overlays/noo_dialog.dart';
|
||||
import '../noo/overlays/noo_sheet.dart';
|
||||
|
||||
/// One block of Settings (DESIGN_SYSTEM.md 4's 8-part order): a
|
||||
/// One block of Settings (DESIGN_SYSTEM.md 4's 9-part order): a
|
||||
/// [NooGroupedList] on mobile (label above a radius-20 card), or a titled,
|
||||
/// bordered radius-20 card holding a flat row group on desktop
|
||||
/// ("Mobile uses one column of grouped lists. Desktop uses a 2-column grid
|
||||
@@ -31,11 +31,13 @@ class SettingsSection extends StatelessWidget {
|
||||
return NooGroupedList(
|
||||
label: title,
|
||||
footer: subtitle != null ? Text(subtitle!) : null,
|
||||
// Every mobile Settings section is individually collapsible,
|
||||
// expanded by default - replaces the old trailing jump rail (see
|
||||
// `account_view.dart`'s doc comment) as the way to navigate a long
|
||||
// Settings screen quickly.
|
||||
collapsible: true,
|
||||
// Not collapsible: each mobile Settings section now renders on its
|
||||
// own pushed screen (see `account_view.dart`'s doc comment for the
|
||||
// menu-then-pushed-screen pattern), so there's no long single-scroll
|
||||
// page left to collapse sections *within* - an earlier design had
|
||||
// every section inline in one column and made them individually
|
||||
// collapsible for exactly that reason; that's gone now that each
|
||||
// one is already isolated on its own screen.
|
||||
children: children,
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user