Fix avatar menu's missing border and put the tab title beside search

- The avatar menu card's border was going missing wherever an opaque
  row sat against it (every corner but the header's) - a Container
  combining `border` with its own `clipBehavior` paints the border as
  part of the outer decoration, then the clipped child on top right up
  to the same boundary, with no gap for the border's stroke to show
  through. Fixed with the standard pattern: no clipBehavior on the
  bordered Container, a 1px-inset ClipRRect around the filled, clipped
  content instead.
- NooTopBar.androidTitleTrailing (renamed from androidTitleReplacement)
  now sits beside the tab title instead of replacing it - the title
  keeps its natural width (Flexible, ellipsizing only if truly out of
  room) with the inline search bar taking the remaining space to its
  right, rather than the title disappearing whenever search moves into
  the top bar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

.claude/context/architecture.md

@@ -284,12 +284,34 @@ bare system prompt gives no context on its own.
   other tab has a create/upload flow), and the account avatar; Android
   gets a compact title row with `search`/avatar actions, relying on an
   extended `NooFab` ("Upload", Files/Photos only) instead of a top-bar
-  icon for upload. `BottomNavBar` (`widgets/bottom_nav_bar.dart`) adapts
-  the pinned `AppTab`s onto `NooBottomBar`. `AppDrawer`
+  icon for upload. Rather than one shared instance in `Scaffold.appBar`,
+  `MainShellView` builds a separate `AppTopBar` per tab (labelled for that
+  tab) and each tab plants its own as the first sliver in its own
+  `CustomScrollView` (`topBarSliver` in `widgets/tabs/tab_state_slivers.dart`,
+  wrapping it in the framework's `SliverFloatingHeader`) instead of passing
+  it to `Scaffold.appBar` - see that file's doc comment for why (Material's
+  native "floating" app bar behavior, tied to that tab's own
+  `ScrollController`: scrolls away as the list scrolls down and reappears
+  the moment the drag reverses, not only once scrolled back to the top).
+  `topBar` is null (no top bar rendered) on desktop and while picking,
+  matching `Scaffold.appBar`'s old `pickRequest == null` guard - see
+  `buildAppTabView`'s doc comment. It sits above each tab's own pinned
+  in-content header (the sort/filter controls row, or Files/Photos'
+  selection bar - see below); the two float/scroll independently - each
+  tab also wraps its whole `CustomScrollView` in `SafeArea(top: true,
+  bottom: false, ...)` so that pinned header stays clear of the status bar
+  once the floating top bar above it fully collapses (see
+  `topBarSliver`'s own doc comment for why that reservation can't live
+  inside the top bar itself). `BottomNavBar` (`widgets/bottom_nav_bar.dart`)
+  adapts the pinned `AppTab`s onto `NooBottomBar`. `AppDrawer`
   (`widgets/app_drawer.dart`) builds a `NooDrawer`: account block, storage
   meter, a "More" list of the hidden tabs, Settings, and an "Edit tabs"
   link (opens Settings - there's no in-page anchor to scroll to its Tabs
-  section yet).
+  section yet). `SettingsController.navMenuStyle` (Settings → Appearance →
+  "Navigation menu") offers an alternative to the hamburger/drawer pair:
+  the avatar button opens `showAvatarMenu` (`widgets/avatar_menu.dart`)
+  instead, a dropdown holding the same hidden-tabs + Settings content -
+  see `styling.md`'s Gotchas for the wiring.
 - **Desktop:** a `NooSidebar` (account card, pinned tabs, divider,
   remaining tabs, storage meter, Settings) sits beside a `NooToolbar`
   (tab title, search, an "Upload" action on Files/Photos) over the same

.claude/context/design-system/DESIGN_SYSTEM.md

@@ -109,10 +109,18 @@ Use **Lucide** (pinned to `lucide-static@0.460.0`) at a 1.8 stroke. Sizes are 14
 - An extended pill: 56px tall, accent fill, labelled "Upload".
 - Sits 16px from the right and bottom edges of the content area.
 - Stays mounted on every tab; it's only the extended label that's tied to
-  Files/Photos. Elsewhere it collapses to an icon-only 56px circle (still
-  tappable - it always targets the Files tab's current folder), animating
-  the width/label change rather than the button popping fully in/out as
-  the Scaffold's default FAB transition would on every tab switch.
+  Files/Photos. Elsewhere it collapses to an icon-only 56px circle or
+  rounded square (see below) - still tappable, it always targets the Files
+  tab's current folder - animating the width/label change rather than the
+  button popping fully in/out as the Scaffold's default FAB transition
+  would on every tab switch.
+- Corner radius follows the bottom bar style (Settings → Appearance):
+  fully round (`pill`, 999) when the bar is floating, matching that mode's
+  other already-rounder elements (the bar itself at 28px, its search
+  satellite a full circle); a rounded square (`card`, 20) when the bar is
+  attached, to suit that mode's flatter, edge-to-edge corners. Same radius
+  whether the FAB is collapsed to a circle/square or expanded to the full
+  pill shape.
 
 **Chip**
 - A pill, 32–34px tall, 12px horizontal padding, Label 13–14.
@@ -162,6 +170,7 @@ Use **Lucide** (pinned to `lucide-static@0.460.0`) at a 1.8 stroke. Sizes are 14
 **Swipe action**
 - The row slides and uncovers a 96px action block. Delete is white on danger-fill; Favorite is white on accent.
 - The block has a 20px icon above a 12/600 label.
+- Releasing past half the block snaps it open; dragging further still (past 1.8× the block's width, a haptic tick marks the crossing and the icon bumps up 15%) arms the action, and releasing while armed fires it immediately - one swipe-through gesture instead of open-then-tap. The block grows to fill however far it's dragged, so there's never a gap behind it.
 - Swipe actions are set in Settings → Swipe on a file.
 
 **Selection action bar** (Files, Photos, Favorites - anywhere with
@@ -271,11 +280,13 @@ Mobile always has **5 pinned tabs in the bottom bar**. The rest go in the drawer
 | Element | iOS | Android |
 |---|---|---|
 | Status bar | 54px, Dynamic Island | 40px |
-| Top bar | 44px row: `menu` on the left; `plus` and avatar on the right (all accent-text). Then a 34px large title, then the search field. | 64px: `menu`, 22px title, `search`, avatar |
+| Top bar | 44px row: `menu` on the left; `plus` and avatar on the right (all accent-text). Then a 34px large title, then the search field. | 64px: `menu`, 22px title, avatar - see "Search" below for what replaces `search` there, and "Navigation menu" for `menu` |
 | Bottom bar | Surface fill, 1px top line. Icon 24 above a 10px label. Active: accent-text. Idle: fg-3. 34px home indicator below. | Surface fill, 80px. Icon 24 above a 12px label (label space is always reserved, just invisible when idle, so nothing shifts on selection). The active icon sits inside a 56×32 accent-soft pill that slides between tabs as one shared indicator, rather than popping in/out per tab. 20px gesture bar below. |
-| Bottom bar - floating (Settings → Appearance → "Bottom bar", both platforms) | Same content, inset 16px from both side edges and clear of the bottom safe area instead of edge to edge, radius 28 (the sheet-top/drawer-edge radius) rather than square corners. No shadow (product UI stays flat - see 1.4); a 1px `line` border stands in for elevation instead. Row height drops slightly (64/72 vs 50/80) to suit. Android's idle tabs drop their reserved label space in this mode - the icon just centers in the button and renders a touch bigger (27 vs 24px) - rather than sitting high with a gap held open under it. `Scaffold.extendBody: true` while floating, so the body scrolls behind the bar's transparent margin instead of stopping short of it. |
+| Bottom bar - floating (Settings → Appearance → "Bottom bar", both platforms) | Same content, inset 16px from both side edges and clear of the bottom safe area instead of edge to edge, radius 28 (the sheet-top/drawer-edge radius) rather than square corners. Product UI otherwise stays flat (see 1.4), but this is the one other place - besides desktop dialogs - that gets the app's one shadow: a 1px `line` border plus the dialog shadow, since a bar that's genuinely floating above scrolling content needs to read as elevated. Row height drops (iOS 50, same as attached; Android 64 vs 80) to suit. Android's idle tabs drop their reserved label space in this mode - the icon just centers in the button and renders a touch bigger (25 vs 24px) - rather than sitting high with a gap held open under it. `Scaffold.extendBody: true` while floating, so the body scrolls behind the bar's transparent margin instead of stopping short of it - which means every tab's scrollable list has to pad its own bottom enough to clear the bar's footprint, since nothing does that for it automatically once the body draws behind the bar. The Android FAB stays fully round in this mode (see "Upload" below), consistent with the bar's own rounder shape. |
 | Bottom bar - "Search in bottom bar" (Settings → Appearance, either bar style) | Adds a Search entry that's never highlighted (tapping it pushes Search, same as the top bar's own search action, which this replaces so there's only one entry point on screen) - the row's last item when attached (same styling as a real tab, just permanently idle), or its own separate, always fully round satellite circle beside the bar when floating. Costs one regular tab: `SettingsController.maxVisibleTabs` drops from 5 to 4 while this is on. |
-| Upload | `plus` in the nav bar | Extended FAB |
+| Search (top bar, when not in the bottom bar) | A real inline search field (`NooSearchField`, non-editable launcher) below the large title | A search-field-styled launcher takes the title's own flexible slot instead of a bare `search` icon beside it - no second row to put it under the way iOS has |
+| Navigation menu (Settings → Appearance → "Navigation menu", both platforms) | `drawer` (default): the `menu` icon opens the left `Drawer` (hidden tabs + Settings), unchanged. `avatarMenu`: no `menu` icon at all - the avatar button opens a dropdown instead (`showAvatarMenu`), anchored under the top bar, full width minus the same 16px gutter every content row uses, with the same hidden-tabs + Settings content the drawer holds (not its storage bar - this is a quick menu, not the drawer's full account summary). The avatar sits in the exact same (right-end) position either way, and the dropdown's own header repeats it there too, so the open menu reads as having grown out of the button that opened it. Not a mandatory replacement: this halves the top-corner surface a thumb has to reach (from `menu` + avatar down to avatar alone) without costing any permanent screen width the way an earlier side-rail exploration would have. |
+| Upload | `plus` in the nav bar | Extended FAB - fully round (pill) when the bottom bar is floating, rounded square (`card` radius) when it's attached |
 | Overflow icon | `ellipsis` | `ellipsis-vertical` |
 | Settings | Pushed screen with a "‹ Files" back button and a large title. No bottom bar. | Pushed screen with a back arrow and a title. No bottom bar. |
 | Biometric label | "Lock with Face ID" | "Lock with fingerprint" |
@@ -358,15 +369,23 @@ Sidebar items are 38px tall with radius 12, an 18px icon and a 14/500 label. The
      slots, the rest sit behind "More". See §2 "Selection action bar".
   9. Swipe on a file
 
-  Mobile uses one column of grouped lists, each individually collapsible
-  (tap its label, expanded by default - `NooGroupedList`'s `collapsible`
-  param) so the full list can be collapsed down instead of needing a
-  separate way to navigate it; an earlier version had a trailing jump rail
-  (one small icon per section, pinned where the scrollbar would sit)
-  instead, dropped for adding a second, redundant navigation method without
-  shortening the page. Desktop uses a 2-column grid of cards with a 1px
-  line and radius 20, wide enough to see most sections without scrolling,
-  so it gets neither.
+  Mobile is a two-level menu, the way native iOS/Android Settings apps
+  work: the account card stays pinned at the top of a single top-level
+  list, and every other section (2-9 above) becomes one tappable
+  `NooSettingsRow` - icon, title, chevron - in a `NooGroupedList` below it.
+  Tapping a row pushes a new screen (`NooTopBar`/`NooTopBarBack`) holding
+  just that section's own content full-screen, so no page is ever more
+  than one category deep and no section needs to be individually
+  collapsible any more. Two earlier designs were tried and dropped: a
+  trailing jump rail (one small icon per section, pinned where the
+  scrollbar would sit), and - after that - one long column of every
+  section inline, each individually collapsible (`NooGroupedList`'s
+  `collapsible` param) so the page could at least be collapsed down. Both
+  scrolled the *same* page to or past an anchor; a genuinely separate
+  pushed screen per category removes the scroll-depth problem outright
+  instead of just working around it. Desktop is unchanged: a 2-column grid
+  of cards with a 1px line and radius 20, wide enough to see most sections
+  without scrolling, so it gets neither a menu nor collapsing.
 - **Share sheet / dialog:** sections in this order:
   1. Header: file tile, name, size · folder, and close.
   2. **Share with people:** an input ("Name, email or group"), then the people with access. The owner comes first; the others each have a permission pill ("Can edit ▾").

.claude/context/styling.md

@@ -90,10 +90,16 @@ Gotchas:
 - `NooGroupedList` draws dividers by showing `line` through 1px gaps, so each
   child must paint its own surface (`NooSettingsRow` and `NooTabOrderRow`
   do). Its `collapsible`/`initiallyExpanded` params (off by default) make
-  `label` a tap target that shows/hides the card - `SettingsSection` is the
-  only caller that opts in, for Settings' mobile sections.
-- `NooSwipeAction` only reveals its action. The user has to tap the block to
-  trigger it; a full swipe never deletes.
+  `label` a tap target that shows/hides the card - no current caller opts
+  in (Settings' mobile sections used to, when every section rendered
+  inline in one long column; now each section is its own pushed screen -
+  see `account_view.dart`'s doc comment - so there's nothing left to
+  collapse). The params stay on the component itself since it's otherwise
+  generic.
+- `NooSwipeAction` reveals its action on a normal swipe (tap the block to
+  trigger it) but also fires it directly if the drag goes far enough (past
+  1.8x the block's width) before release - a full swipe-through does delete
+  in one gesture, it's not tap-only anymore.
 - Window chrome (macOS traffic lights, the Windows 40px title bar) isn't
   built yet. `NooSidebar.windowControls` is the slot for it.
 - Always read colors through `context.nooColors`, never
@@ -137,6 +143,12 @@ blocks are noted where they matter:
   `lib/widgets/tabs/` (`tab_state_slivers.dart`, `tab_day_groups.dart`,
   `tab_location.dart`) — the loading/error/empty-state slivers and
   day/month grouping helpers shared by Recent/Activity/Trash/Shares.
+  `tab_state_slivers.dart` also has `topBarSliver`, which every regular
+  tab's view uses to plant its own `AppTopBar` instance as the first sliver
+  in its `CustomScrollView` (a thin wrapper around the framework's
+  `SliverFloatingHeader`) instead of the shell passing one shared instance
+  to `Scaffold.appBar` - see its doc comment and `architecture.md`'s
+  "Mobile" bullet for why.
   `lib/widgets/settings/` — Settings' 8 section widgets plus
   `settings_section.dart`'s `SettingsSection`/`showSettingsPicker` and
   `settings_dialogs.dart`'s `confirmRemoveAccount`.
@@ -193,16 +205,63 @@ blocks are noted where they matter:
   status is `NooFileRow`/`NooFileTableRow`'s built-in `NooStatusIcon` list
   instead of a corner badge. `NooBottomBar` later gained its own, unrelated
   `NooBottomBarStyle.floating` (Settings → Appearance → "Bottom bar") -
-  don't confuse the two: this one is still flat/non-blurred, just inset
-  with a `line` border instead of edge to edge (no opacity/blur knob
+  don't confuse the two: this one is still non-blurred, just inset with a
+  `line` border and `nooDialogShadow` (the app's one other shadow user - see
+  that constant's doc comment) instead of edge to edge (no opacity/blur knob
   either). The host `Scaffold` needs `extendBody: true` while it's active
-  (`main.dart` already wires this off `SettingsController.bottomBarStyle`).
+  (`main.dart` already wires this off `SettingsController.bottomBarStyle`),
+  which also means every tab's own scrollable list has to reserve enough
+  bottom padding to clear the bar - nothing does that automatically once the
+  body draws behind it. Use `bottomBarClearance(context)`
+  (`tab_state_slivers.dart`) for that rather than a flat `100`; it already
+  accounts for both bar styles.
   Settings' separate "Search in bottom bar" toggle
   (`SettingsController.searchInBottomBar`) adds a never-highlighted Search
   entry to either bar style (`NooBottomBar`'s `searchDestination`/
   `onSearchTap`) and lowers `SettingsController.maxVisibleTabs` by one -
   use that getter, not `defaultMaxVisibleTabs` from `models/app_tab.dart`,
   anywhere that needs the *current* cap on regular tabs.
+- `SettingsController.navMenuStyle` (`NooNavMenuStyle.drawer`/`avatarMenu`,
+  Settings → Appearance → "Navigation menu") picks what opens hidden tabs +
+  Settings on mobile: the original hamburger-opens-`AppDrawer` pattern, or
+  the avatar button opens [`showAvatarMenu`](../../lib/widgets/avatar_menu.dart)
+  instead. Wired through `AppTopBar`→`NooTopBar.onMenu` (null in `avatarMenu`
+  mode - no menu icon renders at all, see `NooTopBar`'s `lead` logic) and
+  `ShellAvatarButton`'s new `onTap`/`label` overrides (`shell_common.dart`) -
+  a caller passing a custom `onTap` *must* also pass a matching `label`, or
+  the tooltip/semantics still say "Accounts" for a button that no longer
+  opens the account switcher. `showAvatarMenu` is this app's first use of
+  `showGeneralDialog` directly (`barrierColor: Colors.transparent` +
+  `barrierDismissible: true` for a non-dimming click-outside-to-close menu,
+  not a modal flow) - there's no existing anchored-popup primitive here
+  (`PopupMenuButton`'s own width doesn't stretch to a full content column),
+  so don't reach for `showNooSheet`/`showNooDialog` for something shaped
+  like this. It's positioned just past the status bar (`SafeArea`'s own
+  inset, not the top bar's full height on top of that) so it covers the
+  top bar - including the tab title - rather than sitting below it, and
+  its card carries two stacked `boxShadow`s rather than just
+  `nooDialogShadow` alone: that one shadow's blur is wide and soft enough
+  to read as basically invisible on a small card over a dark theme's
+  near-black `bg` (a dark, diffuse shadow needs real density close to the
+  edge to be visible against an already-dark backdrop), so a second,
+  tighter, more opaque contact shadow underneath it gives real elevation
+  in both themes. The card's border can go missing wherever an opaque row
+  sits against it too (every corner but the header's, which has no
+  full-bleed fill of its own) if a `Container` combines `border` with its
+  own `clipBehavior` - that paints the border as part of the *outer*
+  decoration, then the clipped child on top right up to the same boundary,
+  with no gap for the border's own stroke to show through. Fixed the same
+  way any bordered-and-clipped `Container` should be: no `clipBehavior` on
+  the bordered `Container` itself, and a 1px-inset `ClipRRect` (radius
+  reduced by that same 1px) around the filled, clipped content instead, so
+  it never paints over the border. Also added
+  `NooTopBar.androidTitleTrailing`: Android has no large title to put a
+  second search row under the way iOS's `search:` slot does, so an inline
+  search bar (`AppTopBar` passes a plain `ShellSearchLauncher()` when
+  search isn't in the bottom bar) sits to the title's own right in that
+  flexible slot - `Flexible`, not `Expanded`, so the title still shrinks/
+  ellipsizes if there's truly no room but doesn't claim more than it needs
+  otherwise - instead of the title being replaced by it.
 - [`SyncedHeaderScaffold`](../../lib/widgets/synced_header_scaffold.dart) —
   the pull-to-sync `CustomScrollView` header with the persistent sync-status
   chip and pull-to-refresh gesture/spinner. Every screen (including

lib/main.dart

@@ -381,15 +381,52 @@ class _MainShellViewState extends State<MainShellView> {
     String? trashBadge(AppTab tab) =>
         tab == AppTab.trash && trashCount > 0 ? '$trashCount' : null;
 
+    final isDesktop = NooLayout.isDesktop(context);
+    final navStyle = NooLayout.navStyle(context);
+    // Picking/offline already override the tab set itself (see pinnedTabs
+    // above) - Search doesn't belong in either: there's nothing to search
+    // for a file-picking flow, and Search needs the network Offline mode
+    // doesn't have.
+    final showBottomBarSearch = !overrideActive && settings.searchInBottomBar;
+
     // Each tab renders its own sticky selection toolbar inline (right under
     // its sort/filter row) instead of the shell swapping in a shared one,
     // so the nav chrome stays put and usable regardless of selection state.
+    //
+    // Each tab also builds its own [AppTopBar] (labelled for that tab, not
+    // just whichever is currently selected) and plants it as that tab's own
+    // first sliver - see `buildAppTabView`'s doc comment and `topBarSliver`
+    // in `tabs/tab_state_slivers.dart` - instead of one shared instance
+    // living in `Scaffold.appBar`. That's what gives each tab's top bar
+    // Material's native floating-away-on-scroll-down/reappear-on-scroll-up
+    // behavior, tied to that tab's own `ScrollController`: a fixed
+    // `Scaffold.appBar` can't do that (no per-tab scroll signal reaches
+    // it), and a shared single instance can't show 7 different tab labels
+    // at once now that every tab keeps its own independent scroll state.
+    // Null on desktop (which shows `NooToolbar` instead - embedding it here
+    // too, since `tabStack` is shared by both layouts below, would double
+    // up the top chrome there) and while picking (no top bar at all, same
+    // as this screen's old `Scaffold.appBar: pickRequest == null ? ... :
+    // null`).
     final tabStack = Stack(
       children: [
         IndexedStack(
           index: selectedIndex,
           children: displayTabs
-              .map((tab) => buildAppTabView(tab, _scrollControllers[tab]!))
+              .map(
+                (tab) => buildAppTabView(
+                  tab,
+                  _scrollControllers[tab]!,
+                  topBar: isDesktop || pickRequest != null
+                      ? null
+                      : AppTopBar(
+                          style: navStyle,
+                          tab: tab,
+                          searchInBottomBar: showBottomBarSearch,
+                          navMenuStyle: settings.navMenuStyle,
+                        ),
+                ),
+              )
               .toList(),
         ),
         if (pick.isDownloadingForPick) const _PickingProgressOverlay(),
@@ -401,7 +438,7 @@ class _MainShellViewState extends State<MainShellView> {
         (selectedTab == AppTab.files || selectedTab == AppTab.photos);
 
     Widget scaffold;
-    if (NooLayout.isDesktop(context)) {
+    if (isDesktop) {
       scaffold = Scaffold(
         backgroundColor: colors.bg,
         body: Row(
@@ -471,23 +508,11 @@ class _MainShellViewState extends State<MainShellView> {
         ),
       );
     } else {
-      final navStyle = NooLayout.navStyle(context);
       final bottomBarStyle = settings.bottomBarStyle;
-      // Picking/offline already override the tab set itself (see
-      // pinnedTabs above) - Search doesn't belong in either: there's
-      // nothing to search for a file-picking flow, and Search needs the
-      // network Offline mode doesn't have.
-      final showBottomBarSearch = !overrideActive && settings.searchInBottomBar;
       scaffold = Scaffold(
         backgroundColor: colors.bg,
         drawerScrimColor: colors.scrim,
-        appBar: pickRequest == null
-            ? AppTopBar(
-                style: navStyle,
-                tab: selectedTab,
-                searchInBottomBar: showBottomBarSearch,
-              )
-            : null,
+        // The top bar itself no longer lives here - see `tabStack` above.
         drawer: pickRequest == null ? const AppDrawer() : null,
         // Floating needs the body to draw behind the bar's own transparent
         // margin (see NooBottomBarStyle's doc comment) instead of stopping
@@ -502,6 +527,7 @@ class _MainShellViewState extends State<MainShellView> {
             pickRequest == null && navStyle == NooNavStyle.android
             ? NooFab(
                 collapsed: !canUpload,
+                barStyle: bottomBarStyle,
                 onTap: () => showCreateMenu(context),
               )
             : null,

lib/providers/settings_controller.dart

@@ -32,6 +32,7 @@ class SettingsController extends ChangeNotifier {
   static const _prefSwipeLeftAction = 'ui_swipe_left_action';
   static const _prefSwipeRightAction = 'ui_swipe_right_action';
   static const _prefBottomBarStyle = 'ui_bottom_bar_style';
+  static const _prefNavMenuStyle = 'ui_nav_menu_style';
   static const _prefSearchInBottomBar = 'ui_search_in_bottom_bar';
   static const _prefAmoledDark = 'ui_amoled_dark';
   static const _prefMediaProgressBarStyle = 'ui_media_progress_bar_style';
@@ -43,6 +44,7 @@ class SettingsController extends ChangeNotifier {
   Color _seedColor = AppTheme.defaultAccent;
   ThemeMode _themeMode = ThemeMode.system;
   NooBottomBarStyle _bottomBarStyle = NooBottomBarStyle.attached;
+  NooNavMenuStyle _navMenuStyle = NooNavMenuStyle.drawer;
   bool _searchInBottomBar = false;
   bool _useDynamicColor = true;
   bool _amoledDark = false;
@@ -86,6 +88,7 @@ class SettingsController extends ChangeNotifier {
   Color get seedColor => _seedColor;
   ThemeMode get themeMode => _themeMode;
   NooBottomBarStyle get bottomBarStyle => _bottomBarStyle;
+  NooNavMenuStyle get navMenuStyle => _navMenuStyle;
   bool get searchInBottomBar => _searchInBottomBar;
   bool get useDynamicColor => _useDynamicColor;
   bool get amoledDark => _amoledDark;
@@ -137,6 +140,13 @@ class SettingsController extends ChangeNotifier {
           orElse: () => _bottomBarStyle,
         );
       }
+      final navMenuStyleName = prefs.getString(_prefNavMenuStyle);
+      if (navMenuStyleName != null) {
+        _navMenuStyle = NooNavMenuStyle.values.firstWhere(
+          (s) => s.name == navMenuStyleName,
+          orElse: () => _navMenuStyle,
+        );
+      }
       _searchInBottomBar =
           prefs.getBool(_prefSearchInBottomBar) ?? _searchInBottomBar;
       _useDynamicColor =
@@ -287,6 +297,13 @@ class SettingsController extends ChangeNotifier {
     _prefsFuture.then((p) => p.setString(_prefBottomBarStyle, style.name));
   }
 
+  void setNavMenuStyle(NooNavMenuStyle style) {
+    if (_navMenuStyle == style) return;
+    _navMenuStyle = style;
+    notifyListeners();
+    _prefsFuture.then((p) => p.setString(_prefNavMenuStyle, style.name));
+  }
+
   /// Turning this on lowers [maxVisibleTabs] by one, so re-enforces the cap
   /// immediately in case the user already has a full 5 regular tabs pinned
   /// - same cleanup [_enforceMaxVisibleTabs] already does for a fresh

lib/theme/design_tokens.dart

@@ -356,8 +356,9 @@ class NooMotion {
 }
 
 /// The one shadow the design system allows, from `tokens/spacing.css`'s
-/// `--shadow-dialog` - desktop dialogs only. Nothing else in the app should
-/// use a `BoxShadow`.
+/// `--shadow-dialog` - desktop dialogs, and [NooBottomBarStyle.floating]'s
+/// bar/search satellite (the only other thing in the app that's genuinely
+/// floating above other content). Nothing else should use a `BoxShadow`.
 const nooDialogShadow = BoxShadow(
   color: Color(0x241E002F), // rgba(30,0,47,.14)
   blurRadius: 48,

lib/views/account_view.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../theme/design_tokens.dart';
+import '../widgets/noo/lists/noo_grouped_list.dart';
+import '../widgets/noo/lists/noo_settings_row.dart';
 import '../widgets/noo/nav/noo_top_bar.dart';
 import '../widgets/noo/nav/noo_toolbar.dart';
 import '../widgets/noo/noo_layout.dart';
@@ -15,18 +18,32 @@ import '../widgets/settings/settings_tabs.dart';
 
 /// Settings, pushed on top of the shell (DESIGN_SYSTEM.md 4's 9-section
 /// order: account card, accounts, security, file sync, files cache,
-/// appearance, tabs, action bar, swipe on a file). One column of
-/// [SettingsSection]s (and [SettingsActionBarSection], which has no option
-/// rows of its own to put in one - just the reorder list) on mobile, each
-/// individually collapsible (expanded by default, tap its label to
-/// collapse - see `SettingsSection`/`NooGroupedList`'s `collapsible` param)
-/// so a long Settings screen can be collapsed down rather than needing a
-/// separate jump rail (an earlier version had one; it added a second,
-/// redundant way to navigate on top of plain scrolling and still didn't
-/// shorten the page). Desktop uses a 2-column grid of cards instead, wide
-/// enough to see most sections without scrolling, so it gets neither. See
-/// each `widgets/settings/*.dart` file for a section's own content and any
-/// setting that had to be slotted in or grouped under "Advanced appearance".
+/// appearance, tabs, action bar, swipe on a file).
+///
+/// Desktop is unchanged: a 2-column grid of cards ([_DesktopGrid]) wide
+/// enough to see every section at once, so it has no scroll-depth problem
+/// and needs no menu.
+///
+/// Mobile is a two-level menu, the way native iOS/Android Settings apps
+/// work: [SettingsAccountCard] (the account summary, not a settings picker)
+/// stays pinned at the top of a single top-level list ([_MobileMenu]), and
+/// every other section becomes one tappable [NooSettingsRow] - icon, title,
+/// chevron - in a [NooGroupedList] below it. Tapping a row pushes a new
+/// [_SettingsCategoryScreen] with its own [NooTopBar]/[NooTopBarBack],
+/// containing just that section's content full-screen. This replaces an
+/// earlier design where every section rendered inline in one long
+/// collapsible-sections column (`_MobileList`, since removed) - and before
+/// that, a trailing jump rail (an even earlier version) that scrolled that
+/// *same* page to an anchor. Both were rejected: the jump rail added a
+/// second, redundant way to navigate on top of plain scrolling without
+/// shortening the page, and the collapsible-sections column still left a
+/// long page to scroll past even collapsed. A genuinely separate pushed
+/// screen per category removes the scroll-depth problem outright, so
+/// neither a jump rail nor per-section collapsing is needed any more - see
+/// [SettingsSection]'s doc comment for how that reflects in its mobile
+/// layout. See each `widgets/settings/*.dart` file for a section's own
+/// content and any setting that had to be slotted in or grouped under
+/// "Advanced appearance".
 class AccountView extends StatelessWidget {
   const AccountView({super.key});
 
@@ -42,6 +59,49 @@ class AccountView extends StatelessWidget {
     SettingsSwipeSection(),
   ];
 
+  static final _categories = <_SettingsCategory>[
+    _SettingsCategory(
+      title: 'Accounts',
+      icon: LucideIcons.users,
+      builder: (_) => const SettingsAccountsSection(),
+    ),
+    _SettingsCategory(
+      title: 'Security',
+      icon: LucideIcons.lock,
+      builder: (_) => const SettingsSecuritySection(),
+    ),
+    _SettingsCategory(
+      title: 'File sync',
+      icon: LucideIcons.cloud,
+      builder: (_) => const SettingsFileSyncSection(),
+    ),
+    _SettingsCategory(
+      title: 'Files cache',
+      icon: LucideIcons.database,
+      builder: (_) => const SettingsFilesCacheSection(),
+    ),
+    _SettingsCategory(
+      title: 'Appearance',
+      icon: LucideIcons.sunMoon,
+      builder: (_) => const SettingsAppearanceSection(),
+    ),
+    _SettingsCategory(
+      title: 'Tabs',
+      icon: LucideIcons.layoutGrid,
+      builder: (_) => const SettingsTabsSection(),
+    ),
+    _SettingsCategory(
+      title: 'Action bar',
+      icon: LucideIcons.slidersHorizontal,
+      builder: (_) => const SettingsActionBarSection(),
+    ),
+    _SettingsCategory(
+      title: 'Swipe on a file',
+      icon: LucideIcons.chevronsLeftRight,
+      builder: (_) => const SettingsSwipeSection(),
+    ),
+  ];
+
   @override
   Widget build(BuildContext context) {
     final colors = context.nooColors;
@@ -60,18 +120,49 @@ class AccountView extends StatelessWidget {
         top: false,
         child: desktop
             ? _DesktopGrid(sections: _sections)
-            : _MobileList(sections: _sections),
+            : _MobileMenu(categories: _categories),
       ),
     );
   }
 }
 
-class _MobileList extends StatelessWidget {
-  final List<Widget> sections;
-  const _MobileList({required this.sections});
+/// One row of [AccountView]'s mobile top-level menu: a title, a leading
+/// icon (reused from that section's own first/most-representative row, so
+/// the menu icon and the content the user lands on agree), and a builder
+/// for the section content shown on [_SettingsCategoryScreen].
+class _SettingsCategory {
+  final String title;
+  final IconData icon;
+  final WidgetBuilder builder;
+
+  _SettingsCategory({
+    required this.title,
+    required this.icon,
+    required this.builder,
+  });
+}
+
+/// The mobile top-level Settings list: [SettingsAccountCard] pinned above a
+/// single [NooGroupedList] of category rows, one per [AccountView._categories]
+/// entry - the menu half of the menu-then-pushed-screen pattern described on
+/// [AccountView]'s own doc comment.
+class _MobileMenu extends StatelessWidget {
+  final List<_SettingsCategory> categories;
+  const _MobileMenu({required this.categories});
+
+  void _open(BuildContext context, _SettingsCategory category) {
+    Navigator.push(
+      context,
+      MaterialPageRoute(
+        builder: (_) => _SettingsCategoryScreen(category: category),
+      ),
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
+    final colors = context.nooColors;
+
     return ListView(
       padding: const EdgeInsets.fromLTRB(
         NooSpace.sm,
@@ -81,15 +172,66 @@ class _MobileList extends StatelessWidget {
       ),
       physics: const BouncingScrollPhysics(),
       children: [
-        for (final section in sections) ...[
-          section,
-          const SizedBox(height: NooSpace.xl),
-        ],
+        const SettingsAccountCard(),
+        const SizedBox(height: NooSpace.xl),
+        NooGroupedList(
+          children: [
+            for (final category in categories)
+              NooSettingsRow(
+                icon: category.icon,
+                label: Text(category.title),
+                trailing: Icon(
+                  LucideIcons.chevronRight,
+                  size: 18,
+                  color: colors.fg3,
+                ),
+                onTap: () => _open(context, category),
+              ),
+          ],
+        ),
       ],
     );
   }
 }
 
+/// A pushed, single-category Settings screen: [NooTopBar] titled with the
+/// category, a back button, and just that section's own content - the
+/// pushed half of [AccountView]'s mobile menu-then-screen pattern. Always
+/// built in a mobile-width context (desktop never opens this screen; it
+/// shows every section inline in its own grid instead), so the section
+/// widgets inside render their normal mobile layout unchanged.
+class _SettingsCategoryScreen extends StatelessWidget {
+  final _SettingsCategory category;
+  const _SettingsCategoryScreen({required this.category});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+
+    return Scaffold(
+      backgroundColor: colors.bg,
+      appBar: NooTopBar(
+        style: NooLayout.navStyle(context),
+        title: category.title,
+        leading: const NooTopBarBack(),
+      ),
+      body: SafeArea(
+        top: false,
+        child: ListView(
+          padding: const EdgeInsets.fromLTRB(
+            NooSpace.sm,
+            NooSpace.sm,
+            NooSpace.sm,
+            NooSpace.xxl,
+          ),
+          physics: const BouncingScrollPhysics(),
+          children: [category.builder(context)],
+        ),
+      ),
+    );
+  }
+}
+
 /// Splits the sections between two columns rather than a strict grid, since
 /// each card's content height varies a lot (the tab reorder list and the
 /// accounts list can both run much taller than, say, Security) - a fixed

lib/views/activity_view.dart

@@ -29,7 +29,11 @@ import '../widgets/tabs/tab_state_slivers.dart';
 class ActivityView extends StatelessWidget {
   final ScrollController scrollController;
 
-  const ActivityView({super.key, required this.scrollController});
+  /// This tab's own shell top bar, planted as its first sliver - see
+  /// `buildAppTabView`'s doc comment. Null on desktop and while picking.
+  final PreferredSizeWidget? topBar;
+
+  const ActivityView({super.key, required this.scrollController, this.topBar});
 
   @override
   Widget build(BuildContext context) {
@@ -90,17 +94,25 @@ class ActivityView extends StatelessWidget {
     }
 
     final List<Widget> contentSlivers = [
+      if (topBar != null) topBarSliver(topBar!),
       const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
       feed,
-      ...tabBottomInsetSlivers,
+      ...tabBottomInsetSlivers(context),
     ];
 
-    final scrollView = CustomScrollView(
-      controller: scrollController,
-      // See files_view.dart's identical fix - without this, pull-to-
-      // refresh can't be triggered on an empty or single-item feed.
-      physics: const AlwaysScrollableScrollPhysics(),
-      slivers: contentSlivers,
+    // See files_view.dart's identical fix - without this, the sticky
+    // controls row rides up under the status bar once the floating top bar
+    // above it fully collapses.
+    final scrollView = SafeArea(
+      top: true,
+      bottom: false,
+      child: CustomScrollView(
+        controller: scrollController,
+        // See files_view.dart's identical fix - without this, pull-to-
+        // refresh can't be triggered on an empty or single-item feed.
+        physics: const AlwaysScrollableScrollPhysics(),
+        slivers: contentSlivers,
+      ),
     );
 
     return ColoredBox(

lib/views/favorites_view.dart

@@ -29,6 +29,7 @@ import '../widgets/noo/overlays/noo_sheet.dart';
 import '../widgets/noo/core/noo_button.dart';
 import '../widgets/share_sheet.dart';
 import '../widgets/sticky_header_delegate.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 import '../widgets/synced_header_scaffold.dart' show formatBytes;
 import 'file_viewer_screen.dart';
 import 'move_copy_destination_picker.dart';
@@ -50,7 +51,11 @@ import 'move_copy_destination_picker.dart';
 class FavoritesView extends StatefulWidget {
   final ScrollController scrollController;
 
-  const FavoritesView({super.key, required this.scrollController});
+  /// This tab's own shell top bar, planted as its first sliver - see
+  /// `buildAppTabView`'s doc comment. Null on desktop and while picking.
+  final PreferredSizeWidget? topBar;
+
+  const FavoritesView({super.key, required this.scrollController, this.topBar});
 
   @override
   State<FavoritesView> createState() => _FavoritesViewState();
@@ -507,6 +512,7 @@ class _FavoritesViewState extends State<FavoritesView> {
     );
 
     final contentSlivers = <Widget>[
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       SliverPersistentHeader(
         pinned: !_isSelecting,
         delegate: StickyHeaderDelegate(
@@ -638,7 +644,7 @@ class _FavoritesViewState extends State<FavoritesView> {
             }, childCount: favorites.length),
           ),
         ),
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
+      SliverToBoxAdapter(child: SizedBox(height: bottomBarClearance(context))),
     ];
 
     return PopScope(
@@ -652,12 +658,19 @@ class _FavoritesViewState extends State<FavoritesView> {
           color: colors.accent,
           backgroundColor: colors.surface,
           onRefresh: favoritesController.fetchAll,
-          child: CustomScrollView(
-            controller: widget.scrollController,
-            // See files_view.dart's identical fix - without this, pull-to-
-            // refresh can't be triggered on an empty or single-item list.
-            physics: const AlwaysScrollableScrollPhysics(),
-            slivers: contentSlivers,
+          // See files_view.dart's identical fix - without this, the sticky
+          // controls row rides up under the status bar once the floating
+          // top bar above it fully collapses.
+          child: SafeArea(
+            top: true,
+            bottom: false,
+            child: CustomScrollView(
+              controller: widget.scrollController,
+              // See files_view.dart's identical fix - without this, pull-to-
+              // refresh can't be triggered on an empty or single-item list.
+              physics: const AlwaysScrollableScrollPhysics(),
+              slivers: contentSlivers,
+            ),
           ),
         ),
       ),

lib/views/files_view.dart

@@ -39,10 +39,12 @@ import '../widgets/noo/lists/noo_selection_bar.dart';
 import '../widgets/noo/lists/noo_settings_row.dart';
 import '../widgets/noo/lists/noo_summary_card.dart';
 import '../widgets/noo/media/noo_grid_card.dart';
+import '../widgets/noo/nav/noo_bottom_bar.dart';
 import '../widgets/noo/noo_layout.dart';
 import '../widgets/noo/overlays/noo_sheet.dart';
 import '../widgets/share_sheet.dart';
 import '../widgets/sticky_header_delegate.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 import '../widgets/synced_header_scaffold.dart' show formatBytes;
 import 'file_viewer_screen.dart';
 import 'move_copy_destination_picker.dart';
@@ -59,10 +61,15 @@ class FilesView extends StatefulWidget {
   final ScrollController scrollController;
   final bool offline;
 
+  /// This tab's own shell top bar, planted as its first sliver - see
+  /// `buildAppTabView`'s doc comment. Null on desktop and while picking.
+  final PreferredSizeWidget? topBar;
+
   const FilesView({
     super.key,
     required this.scrollController,
     this.offline = false,
+    this.topBar,
   });
 
   @override
@@ -653,6 +660,7 @@ class _FilesViewState extends State<FilesView> {
           );
 
     final List<Widget> contentSlivers = [
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       // Pinned in both states - while browsing this is the controls row
       // (+ breadcrumbs), while selecting it's the selection bar (see
       // `topRow` above): either way it's the one thing that always stays
@@ -815,6 +823,15 @@ class _FilesViewState extends State<FilesView> {
             }, childCount: browser.items.length),
           ),
         ),
+      // List/grid/table above only pad NooSpace.lg at the bottom - plenty
+      // once Scaffold shrinks the body above an attached bar, but floating
+      // draws the body behind the bar instead, so it needs the bar's own
+      // footprint added on top or the last row ends up under it.
+      if (context.watch<SettingsController>().bottomBarStyle ==
+          NooBottomBarStyle.floating)
+        SliverToBoxAdapter(
+          child: SizedBox(height: bottomBarClearance(context)),
+        ),
     ];
 
     return PopScope(
@@ -836,14 +853,30 @@ class _FilesViewState extends State<FilesView> {
             unawaited(sync.syncOnPull());
             return browser.reload();
           },
-          child: CustomScrollView(
-            controller: widget.scrollController,
-            // Pull-to-refresh needs a scroll physics that allows dragging
-            // past the edge even when content doesn't fill the viewport -
-            // an empty or single-item list otherwise can't be pulled at all
-            // under the platform default physics.
-            physics: const AlwaysScrollableScrollPhysics(),
-            slivers: contentSlivers,
+          // `topBarSliver`'s floating header can collapse all the way to
+          // zero height (fully scrolled away), at which point the sticky
+          // controls row right below it in `contentSlivers` would otherwise
+          // ride up underneath the status bar instead of stopping below it
+          // - the floating top bar used to be the only thing reserving that
+          // space (via its own internal `SafeArea`), and that reservation
+          // disappears along with it once it's fully hidden. Wrapping the
+          // whole scroll view keeps the inset outside the scrolling region
+          // entirely, so it's never implicated in the floating header's own
+          // collapse/reveal math - safe to apply unconditionally, since
+          // desktop's `MediaQuery.padding.top` is 0 anyway (no topBar / no
+          // status bar there).
+          child: SafeArea(
+            top: true,
+            bottom: false,
+            child: CustomScrollView(
+              controller: widget.scrollController,
+              // Pull-to-refresh needs a scroll physics that allows dragging
+              // past the edge even when content doesn't fill the viewport -
+              // an empty or single-item list otherwise can't be pulled at
+              // all under the platform default physics.
+              physics: const AlwaysScrollableScrollPhysics(),
+              slivers: contentSlivers,
+            ),
           ),
         ),
       ),

lib/views/photos_view.dart

@@ -30,6 +30,7 @@ import '../widgets/noo/overlays/noo_sheet.dart';
 import '../widgets/share_sheet.dart';
 import '../widgets/sort_menu_button.dart' show sortFieldLabel;
 import '../widgets/sticky_header_delegate.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 import 'file_viewer_screen.dart';
 import 'move_copy_destination_picker.dart';
 
@@ -53,7 +54,11 @@ class _MonthGroup {
 class PhotosView extends StatefulWidget {
   final ScrollController scrollController;
 
-  const PhotosView({super.key, required this.scrollController});
+  /// This tab's own shell top bar, planted as its first sliver - see
+  /// `buildAppTabView`'s doc comment. Null on desktop and while picking.
+  final PreferredSizeWidget? topBar;
+
+  const PhotosView({super.key, required this.scrollController, this.topBar});
 
   @override
   State<PhotosView> createState() => _PhotosViewState();
@@ -239,6 +244,7 @@ class _PhotosViewState extends State<PhotosView> {
     );
 
     final List<Widget> contentSlivers = [
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       // Sticky while browsing; once selecting, the selection bar takes over
       // the same slot instead.
       SliverPersistentHeader(
@@ -346,9 +352,10 @@ class _PhotosViewState extends State<PhotosView> {
           ),
         ],
 
-      // Fixed clearance so the last row isn't hidden behind the floating
-      // nav bar, regardless of grid length.
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
+      // Clearance so the last row isn't hidden behind the nav bar,
+      // regardless of grid length - see `bottomBarClearance`'s own doc
+      // comment for why this has to be dynamic rather than a flat 100.
+      SliverToBoxAdapter(child: SizedBox(height: bottomBarClearance(context))),
     ];
 
     return PopScope(
@@ -362,12 +369,19 @@ class _PhotosViewState extends State<PhotosView> {
           color: colors.accent,
           backgroundColor: colors.surface,
           onRefresh: photosController.fetchAllMedia,
-          child: CustomScrollView(
-            controller: widget.scrollController,
-            // See files_view.dart's identical fix - without this, pull-to-
-            // refresh can't be triggered on an empty or single-item list.
-            physics: const AlwaysScrollableScrollPhysics(),
-            slivers: contentSlivers,
+          // See files_view.dart's identical fix - without this, the sticky
+          // controls row rides up under the status bar once the floating
+          // top bar above it fully collapses.
+          child: SafeArea(
+            top: true,
+            bottom: false,
+            child: CustomScrollView(
+              controller: widget.scrollController,
+              // See files_view.dart's identical fix - without this, pull-to-
+              // refresh can't be triggered on an empty or single-item list.
+              physics: const AlwaysScrollableScrollPhysics(),
+              slivers: contentSlivers,
+            ),
           ),
         ),
       ),

lib/views/recent_view.dart

@@ -27,7 +27,11 @@ import 'file_viewer_screen.dart';
 class RecentView extends StatefulWidget {
   final ScrollController scrollController;
 
-  const RecentView({super.key, required this.scrollController});
+  /// This tab's own shell top bar, planted as its first sliver - see
+  /// `buildAppTabView`'s doc comment. Null on desktop and while picking.
+  final PreferredSizeWidget? topBar;
+
+  const RecentView({super.key, required this.scrollController, this.topBar});
 
   @override
   State<RecentView> createState() => _RecentViewState();
@@ -54,6 +58,7 @@ class _RecentViewState extends State<RecentView> {
     );
 
     final List<Widget> contentSlivers = [
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
       if (recent.isLoading && items.isEmpty)
         tabLoadingSliver
@@ -74,7 +79,7 @@ class _RecentViewState extends State<RecentView> {
         _buildDesktopTable(context, groups)
       else
         _buildMobileGroups(context, groups),
-      ...tabBottomInsetSlivers,
+      ...tabBottomInsetSlivers(context),
     ];
 
     return ColoredBox(
@@ -83,12 +88,19 @@ class _RecentViewState extends State<RecentView> {
         color: colors.accent,
         backgroundColor: colors.surface,
         onRefresh: recent.fetchAll,
-        child: CustomScrollView(
-          controller: widget.scrollController,
-          // See files_view.dart's identical fix - without this, pull-to-
-          // refresh can't be triggered on an empty or single-item list.
-          physics: const AlwaysScrollableScrollPhysics(),
-          slivers: contentSlivers,
+        // See files_view.dart's identical fix - without this, the sticky
+        // controls row rides up under the status bar once the floating top
+        // bar above it fully collapses.
+        child: SafeArea(
+          top: true,
+          bottom: false,
+          child: CustomScrollView(
+            controller: widget.scrollController,
+            // See files_view.dart's identical fix - without this, pull-to-
+            // refresh can't be triggered on an empty or single-item list.
+            physics: const AlwaysScrollableScrollPhysics(),
+            slivers: contentSlivers,
+          ),
         ),
       ),
     );

lib/views/shares_view.dart

@@ -53,7 +53,11 @@ String _permissionLabel(int permissions) {
 class SharesView extends StatefulWidget {
   final ScrollController scrollController;
 
-  const SharesView({super.key, required this.scrollController});
+  /// This tab's own shell top bar, planted as its first sliver - see
+  /// `buildAppTabView`'s doc comment. Null on desktop and while picking.
+  final PreferredSizeWidget? topBar;
+
+  const SharesView({super.key, required this.scrollController, this.topBar});
 
   @override
   State<SharesView> createState() => _SharesViewState();
@@ -81,6 +85,7 @@ class _SharesViewState extends State<SharesView> {
     final isDesktop = NooLayout.isDesktop(context);
 
     final List<Widget> contentSlivers = [
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       SliverPadding(
         padding: EdgeInsets.fromLTRB(
           NooLayout.gutter(context),
@@ -120,7 +125,7 @@ class _SharesViewState extends State<SharesView> {
         _buildDesktopTable(context, shares)
       else
         _buildMobileList(context, shares),
-      ...tabBottomInsetSlivers,
+      ...tabBottomInsetSlivers(context),
     ];
 
     return ColoredBox(
@@ -129,12 +134,19 @@ class _SharesViewState extends State<SharesView> {
         color: colors.accent,
         backgroundColor: colors.surface,
         onRefresh: sharesController.fetchAll,
-        child: CustomScrollView(
-          controller: widget.scrollController,
-          // See files_view.dart's identical fix - without this, pull-to-
-          // refresh can't be triggered on an empty or single-item list.
-          physics: const AlwaysScrollableScrollPhysics(),
-          slivers: contentSlivers,
+        // See files_view.dart's identical fix - without this, the sticky
+        // controls row rides up under the status bar once the floating top
+        // bar above it fully collapses.
+        child: SafeArea(
+          top: true,
+          bottom: false,
+          child: CustomScrollView(
+            controller: widget.scrollController,
+            // See files_view.dart's identical fix - without this, pull-to-
+            // refresh can't be triggered on an empty or single-item list.
+            physics: const AlwaysScrollableScrollPhysics(),
+            slivers: contentSlivers,
+          ),
         ),
       ),
     );

lib/views/trash_view.dart

@@ -25,7 +25,11 @@ import '../widgets/tabs/tab_state_slivers.dart';
 class TrashView extends StatefulWidget {
   final ScrollController scrollController;
 
-  const TrashView({super.key, required this.scrollController});
+  /// This tab's own shell top bar, planted as its first sliver - see
+  /// `buildAppTabView`'s doc comment. Null on desktop and while picking.
+  final PreferredSizeWidget? topBar;
+
+  const TrashView({super.key, required this.scrollController, this.topBar});
 
   @override
   State<TrashView> createState() => _TrashViewState();
@@ -50,6 +54,7 @@ class _TrashViewState extends State<TrashView> {
     final isDesktop = NooLayout.isDesktop(context);
 
     final List<Widget> contentSlivers = [
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       SliverPadding(
         padding: EdgeInsets.fromLTRB(
           NooLayout.gutter(context),
@@ -89,7 +94,7 @@ class _TrashViewState extends State<TrashView> {
         _buildDesktopTable(context, trash)
       else
         _buildMobileList(context, trash),
-      ...tabBottomInsetSlivers,
+      ...tabBottomInsetSlivers(context),
     ];
 
     return ColoredBox(
@@ -98,12 +103,19 @@ class _TrashViewState extends State<TrashView> {
         color: colors.accent,
         backgroundColor: colors.surface,
         onRefresh: trashController.fetchAll,
-        child: CustomScrollView(
-          controller: widget.scrollController,
-          // See files_view.dart's identical fix - without this, pull-to-
-          // refresh can't be triggered on an empty or single-item list.
-          physics: const AlwaysScrollableScrollPhysics(),
-          slivers: contentSlivers,
+        // See files_view.dart's identical fix - without this, the sticky
+        // controls row rides up under the status bar once the floating top
+        // bar above it fully collapses.
+        child: SafeArea(
+          top: true,
+          bottom: false,
+          child: CustomScrollView(
+            controller: widget.scrollController,
+            // See files_view.dart's identical fix - without this, pull-to-
+            // refresh can't be triggered on an empty or single-item list.
+            physics: const AlwaysScrollableScrollPhysics(),
+            slivers: contentSlivers,
+          ),
         ),
       ),
     );

lib/widgets/app_tab_view_builder.dart

@@ -11,7 +11,20 @@ import '../views/trash_view.dart';
 /// Builds the view widget for a given [AppTab]. Shared by the main shell
 /// (for visible tabs) and the "more tabs" dropdown (for launching a tab
 /// that's currently hidden from the bottom nav bar).
-Widget buildAppTabView(AppTab tab, ScrollController controller) {
+///
+/// [topBar], when given, is that tab's own [AppTopBar] instance (built by
+/// the caller, which owns `NooLayout.navStyle`/pick-mode/search-in-bottom-
+/// bar state) - each view plants it as its own first sliver (see
+/// `topBarSliver` in `tabs/tab_state_slivers.dart`) so it scrolls away and
+/// reappears independently, tied to that tab's own `ScrollController`
+/// rather than living in the shared `Scaffold.appBar`. Null on desktop
+/// (which shows `NooToolbar` instead) and while picking (no top bar at
+/// all), matching `Scaffold.appBar`'s old `pickRequest == null` guard.
+Widget buildAppTabView(
+  AppTab tab,
+  ScrollController controller, {
+  PreferredSizeWidget? topBar,
+}) {
   switch (tab) {
     case AppTab.files:
       // Keyed so the Files and Offline tabs (same widget type) never share
@@ -19,24 +32,26 @@ Widget buildAppTabView(AppTab tab, ScrollController controller) {
       return FilesView(
         key: const ValueKey('files'),
         scrollController: controller,
+        topBar: topBar,
       );
     case AppTab.photos:
-      return PhotosView(scrollController: controller);
+      return PhotosView(scrollController: controller, topBar: topBar);
     case AppTab.favorites:
-      return FavoritesView(scrollController: controller);
+      return FavoritesView(scrollController: controller, topBar: topBar);
     case AppTab.activity:
-      return ActivityView(scrollController: controller);
+      return ActivityView(scrollController: controller, topBar: topBar);
     case AppTab.trash:
-      return TrashView(scrollController: controller);
+      return TrashView(scrollController: controller, topBar: topBar);
     case AppTab.shares:
-      return SharesView(scrollController: controller);
+      return SharesView(scrollController: controller, topBar: topBar);
     case AppTab.recent:
-      return RecentView(scrollController: controller);
+      return RecentView(scrollController: controller, topBar: topBar);
     case AppTab.offline:
       return FilesView(
         key: const ValueKey('offline'),
         scrollController: controller,
         offline: true,
+        topBar: topBar,
       );
   }
 }

lib/widgets/app_top_bar.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../models/app_tab.dart';
+import 'avatar_menu.dart';
 import 'create_menu.dart';
 import 'noo/nav/noo_top_bar.dart';
 import 'shell/shell_common.dart';
@@ -13,8 +14,11 @@ import 'shell/shell_common.dart';
 /// - iOS: `menu` leading, `plus` (Files only - no tab besides Files has a
 ///   create/upload flow) and the account avatar trailing, then the large
 ///   title, then an inline search field that opens [SearchView].
-/// - Android: `menu`, title, `search` and avatar actions. Upload has no
-///   top-bar icon here - it's the [NooFab] `MainShellView` shows instead.
+/// - Android: `menu`, title, avatar actions. Upload has no top-bar icon
+///   here - it's the [NooFab] `MainShellView` shows instead. When search
+///   isn't in the bottom bar, an inline search-field-styled launcher
+///   (`androidTitleTrailing`) sits to the title's own right, rather than a
+///   bare search icon over in `actions`.
 ///
 /// [style] is resolved by the caller (`NooLayout.navStyle`) rather than
 /// read from context here, since [preferredSize] is a plain getter with no
@@ -22,17 +26,24 @@ import 'shell/shell_common.dart';
 /// [searchInBottomBar] is [SettingsController.searchInBottomBar], passed in
 /// for the same reason: it hides this bar's own search field/icon so
 /// there's only ever one search entry point on screen once the bottom bar
-/// has taken it over.
+/// has taken it over. [navMenuStyle] is
+/// [SettingsController.navMenuStyle]: [NooNavMenuStyle.drawer] wires the
+/// `menu` icon to `Scaffold.of(context).openDrawer()` as before;
+/// [NooNavMenuStyle.avatarMenu] drops that icon (`onMenu: null`) and makes
+/// the avatar button open `showAvatarMenu` instead of the account
+/// switcher.
 class AppTopBar extends StatelessWidget implements PreferredSizeWidget {
   final NooNavStyle style;
   final AppTab tab;
   final bool searchInBottomBar;
+  final NooNavMenuStyle navMenuStyle;
 
   const AppTopBar({
     super.key,
     required this.style,
     required this.tab,
     this.searchInBottomBar = false,
+    this.navMenuStyle = NooNavMenuStyle.drawer,
   });
 
   bool get _ios => style == NooNavStyle.ios;
@@ -53,21 +64,31 @@ class AppTopBar extends StatelessWidget implements PreferredSizeWidget {
     return NooTopBar(
       style: style,
       title: tab.label,
-      onMenu: () => Scaffold.of(context).openDrawer(),
+      onMenu: navMenuStyle == NooNavMenuStyle.drawer
+          ? () => Scaffold.of(context).openDrawer()
+          : null,
+      // Android has no large title to put a second search row under the
+      // way iOS does (`search:` below) - an inline bar sits beside the
+      // title instead, rather than a plain search icon over in `actions`.
+      androidTitleTrailing: !_ios && _showSearch
+          ? const ShellSearchLauncher()
+          : null,
       actions: [
-        if (!_ios && _showSearch)
-          NooTopBarButton(
-            icon: LucideIcons.search,
-            tooltip: 'Search',
-            onTap: () => openSearch(context),
-          ),
         if (_ios && tab == AppTab.files)
           NooTopBarButton(
             icon: LucideIcons.plus,
             tooltip: 'Create',
             onTap: () => showCreateMenu(context),
           ),
-        ShellAvatarButton(hitBox: _ios ? 44 : 48),
+        ShellAvatarButton(
+          hitBox: _ios ? 44 : 48,
+          onTap: navMenuStyle == NooNavMenuStyle.avatarMenu
+              ? () => showAvatarMenu(context)
+              : null,
+          label: navMenuStyle == NooNavMenuStyle.avatarMenu
+              ? 'Menu'
+              : 'Accounts',
+        ),
       ],
       search: _ios && _showSearch ? const ShellSearchLauncher(ios: true) : null,
     );

lib/widgets/avatar_menu.dart

@@ -0,0 +1,203 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:provider/provider.dart';
+import '../models/app_tab.dart';
+import '../providers/session_controller.dart';
+import '../providers/settings_controller.dart';
+import '../providers/trash_controller.dart';
+import '../theme/design_tokens.dart';
+import 'noo/core/noo_avatar.dart';
+import 'noo/core/noo_badge.dart';
+import 'noo/lists/noo_settings_row.dart';
+import 'shell/shell_common.dart';
+
+/// The dropdown [ShellAvatarButton] opens when
+/// [SettingsController.navMenuStyle] is [NooNavMenuStyle.avatarMenu] -
+/// everything [AppDrawer] holds beyond its storage bar (hidden tabs,
+/// Settings), reached from the avatar instead of a hamburger-triggered
+/// left `Drawer`. Built with `showGeneralDialog` rather than a `Drawer`/
+/// `showNooSheet`/`showNooDialog` - this needs a transparent (non-dimming)
+/// barrier and a card anchored under the top bar rather than a modal
+/// sheet/dialog, and there's no existing anchored-popup primitive in this
+/// app to reuse (`PopupMenuButton`'s own width doesn't stretch to the full
+/// content column the way this needs to).
+Future<void> showAvatarMenu(BuildContext context) {
+  return showGeneralDialog<void>(
+    context: context,
+    barrierColor: Colors.transparent,
+    barrierDismissible: true,
+    barrierLabel: 'Close menu',
+    transitionDuration: NooMotion.fast,
+    pageBuilder: (context, _, _) => const _AvatarMenuContent(),
+    transitionBuilder: (context, animation, _, child) => FadeTransition(
+      opacity: animation,
+      child: ScaleTransition(
+        alignment: Alignment.topRight,
+        scale: Tween<double>(
+          begin: 0.96,
+          end: 1,
+        ).animate(CurvedAnimation(parent: animation, curve: NooMotion.ease)),
+        child: child,
+      ),
+    ),
+  );
+}
+
+class _AvatarMenuContent extends StatelessWidget {
+  const _AvatarMenuContent();
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final session = context.watch<SessionController>();
+    final settings = context.watch<SettingsController>();
+    final trashCount = context.watch<TrashController>().items.length;
+    final hiddenTabs = settings.tabOrder
+        .where((t) => settings.hiddenTabs.contains(t))
+        .toList();
+
+    void closeAndOpenSettings() {
+      Navigator.pop(context);
+      openSettings(context);
+    }
+
+    return Align(
+      alignment: Alignment.topCenter,
+      // Just the status-bar inset, not the top bar's own height on top of
+      // it - the card covers the top bar (title included) rather than
+      // sitting below it, so opening it reads as the avatar growing into
+      // this instead of a separate element appearing underneath the row
+      // it came from.
+      child: SafeArea(
+        bottom: false,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: NooSpace.md),
+          child: SizedBox(
+            width: double.infinity,
+            child: Container(
+              // No `color`/`clipBehavior` here - a `Container` with both a
+              // `border` and `clipBehavior` set paints the border as part
+              // of its *outer* decoration, then paints its (clipped) child
+              // on top right up to that same boundary with no gap for the
+              // border's own stroke width to show through. An opaque child
+              // touching that edge - every row below has its own full-bleed
+              // `Material` fill - then paints straight over the inner half
+              // of the border, which read as the border going missing
+              // specifically wherever an opaque row sits (every corner but
+              // the two by the header, which has no opaque fill of its
+              // own). The 1px `Padding` + inset `ClipRRect` below keeps the
+              // clipped, filled content entirely inside the border's own
+              // stroke instead of racing it for the same pixels.
+              decoration: BoxDecoration(
+                border: Border.all(color: colors.line),
+                borderRadius: BorderRadius.circular(NooRadii.card),
+                // `nooDialogShadow` alone is a wide, soft, fairly faint
+                // shadow - built for a desktop dialog with plenty of room
+                // to fall off into. On a small card over a dark theme's
+                // near-black `bg`, that falloff is too gradual to read as
+                // elevation at all (a dark shadow needs real density close
+                // to the edge to be visible against an already-dark
+                // backdrop). A second, tighter, more opaque contact shadow
+                // underneath it gives an immediate value-step right at the
+                // card's edge in both themes, with the soft one still
+                // doing the wider ambient falloff on top.
+                boxShadow: const [
+                  BoxShadow(
+                    color: Color(0x40000000),
+                    blurRadius: 12,
+                    offset: Offset(0, 4),
+                  ),
+                  nooDialogShadow,
+                ],
+              ),
+              child: Padding(
+                padding: const EdgeInsets.all(1),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(NooRadii.card - 1),
+                  child: Material(
+                    color: colors.surface,
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        // Avatar on the right, name/host on the left - mirrors the
+                        // top bar's own right-aligned avatar exactly, so this
+                        // header reads as a continuation of the button that
+                        // opened it rather than a disconnected card.
+                        InkWell(
+                          onTap: closeAndOpenSettings,
+                          child: Padding(
+                            padding: const EdgeInsets.all(NooSpace.md),
+                            child: Row(
+                              children: [
+                                Expanded(
+                                  child: Column(
+                                    crossAxisAlignment:
+                                        CrossAxisAlignment.start,
+                                    children: [
+                                      Text(
+                                        session.username,
+                                        maxLines: 1,
+                                        overflow: TextOverflow.ellipsis,
+                                        style: NooText.bodyL.copyWith(
+                                          fontWeight: FontWeight.w600,
+                                          color: colors.fg1,
+                                        ),
+                                      ),
+                                      const SizedBox(height: 2),
+                                      Text(
+                                        serverHost(session.serverUrl),
+                                        maxLines: 1,
+                                        overflow: TextOverflow.ellipsis,
+                                        style: NooText.meta.copyWith(
+                                          color: colors.fg3,
+                                        ),
+                                      ),
+                                    ],
+                                  ),
+                                ),
+                                const SizedBox(width: 12),
+                                NooAvatar(
+                                  initials: accountInitial(session.username),
+                                  current: true,
+                                  size: 40,
+                                ),
+                              ],
+                            ),
+                          ),
+                        ),
+                        if (hiddenTabs.isNotEmpty) ...[
+                          Divider(height: 1, color: colors.line),
+                          for (final tab in hiddenTabs)
+                            NooSettingsRow(
+                              icon: tab.icon,
+                              label: Text(tab.label),
+                              trailing: tab == AppTab.trash && trashCount > 0
+                                  ? NooBadge(
+                                      tone: NooBadgeTone.accent,
+                                      child: Text('$trashCount'),
+                                    )
+                                  : null,
+                              onTap: () {
+                                Navigator.pop(context);
+                                settings.requestTab(tab);
+                              },
+                            ),
+                        ],
+                        Divider(height: 1, color: colors.line),
+                        NooSettingsRow(
+                          icon: LucideIcons.settings,
+                          label: const Text('Settings'),
+                          onTap: closeAndOpenSettings,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_fab.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../../../theme/design_tokens.dart';
+import '../nav/noo_nav_style.dart';
 
 /// Android-only extended Upload pill, bottom-right of Files and Photos (Noo
 /// Design System project, `components/core/FAB.jsx`). 56px tall, accent
@@ -10,11 +11,21 @@ import '../../../theme/design_tokens.dart';
 /// don't support upload, so the button stays in place and resizes as the
 /// user switches tabs instead of the Scaffold popping it fully in/out -
 /// the label's width animates away rather than the FAB disappearing.
+///
+/// [barStyle] shapes the corners to match the bottom bar it sits above
+/// (Settings > Appearance). With [NooBottomBarStyle.floating] the FAB stays
+/// fully round (`NooRadii.pill`) - consistent with that mode's other
+/// elements, which are already rounder (the bar itself at 28px, its search
+/// satellite a full circle). With [NooBottomBarStyle.attached] the FAB
+/// squares off to `NooRadii.card`, a rounded square that fits attached's
+/// flatter, edge-to-edge aesthetic; this applies whether [collapsed] or not,
+/// so the FAB keeps one consistent identity per bar style.
 class NooFab extends StatelessWidget {
   final String label;
   final IconData icon;
   final VoidCallback? onTap;
   final bool collapsed;
+  final NooBottomBarStyle barStyle;
 
   const NooFab({
     super.key,
@@ -22,17 +33,21 @@ class NooFab extends StatelessWidget {
     this.icon = LucideIcons.plus,
     this.onTap,
     this.collapsed = false,
+    required this.barStyle,
   });
 
   @override
   Widget build(BuildContext context) {
     final colors = context.nooColors;
+    final radius = BorderRadius.circular(
+      barStyle == NooBottomBarStyle.attached ? NooRadii.card : NooRadii.pill,
+    );
     return Material(
       color: colors.accent,
-      borderRadius: BorderRadius.circular(NooRadii.pill),
+      borderRadius: radius,
       child: InkWell(
         onTap: onTap,
-        borderRadius: BorderRadius.circular(NooRadii.pill),
+        borderRadius: radius,
         child: AnimatedContainer(
           duration: NooMotion.base,
           curve: NooMotion.ease,

lib/widgets/noo/files/noo_swipe_action.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../../../theme/design_tokens.dart';
 
@@ -34,6 +35,13 @@ class NooSwipeActionSpec {
 /// springs shut - both on [NooMotion.base] / [NooMotion.ease], no bounce.
 /// Tapping the block fires the action and closes it; tapping the row while
 /// open just closes it.
+///
+/// Dragging further still - past [_kTriggerExtent] of the block's own
+/// width, the block growing to fill the extra reveal so there's no gap -
+/// arms the action (a [HapticFeedback.mediumImpact] marks the crossing);
+/// releasing while armed fires it immediately instead of just leaving it
+/// open, so a single swipe-through gesture can do the whole thing without a
+/// second tap.
 class NooSwipeAction extends StatefulWidget {
   final Widget child;
 
@@ -59,12 +67,24 @@ class NooSwipeAction extends StatefulWidget {
 
 class _NooSwipeActionState extends State<NooSwipeAction>
     with SingleTickerProviderStateMixin {
+  /// How far past the fully-revealed block (1.0) a drag has to go before
+  /// releasing fires the action outright rather than just snapping open -
+  /// "swipe through" in one gesture instead of open-then-tap.
+  static const double _kTriggerExtent = 1.8;
+
+  /// Hard ceiling on the controller's value - past [_kTriggerExtent] there's
+  /// nothing more for further drag to *do*, but a little extra travel still
+  /// gives the gesture room to keep moving under the finger instead of
+  /// hitting a dead stop right at the trigger point.
+  static const double _kMaxDrag = 2.4;
+
   /// -1 = end action fully revealed, 0 = closed, 1 = start action revealed
-  /// (in visual left/right terms after [_dir] is applied).
+  /// (in visual left/right terms after [_dir] is applied) - and on past
+  /// either bound up to [_kMaxDrag] while armed for [_kTriggerExtent].
   late final AnimationController _ctrl = AnimationController(
     vsync: this,
-    lowerBound: -1,
-    upperBound: 1,
+    lowerBound: -_kMaxDrag,
+    upperBound: _kMaxDrag,
     value: 0,
   );
 
@@ -85,13 +105,21 @@ class _NooSwipeActionState extends State<NooSwipeAction>
   void _onDragUpdate(DragUpdateDetails d) {
     // Positive = revealing the start action.
     final delta = d.primaryDelta! * _dir / NooSwipeAction.actionWidth;
-    final min = widget.endAction != null ? -1.0 : 0.0;
-    final max = widget.startAction != null ? 1.0 : 0.0;
-    _ctrl.value = (_ctrl.value + delta).clamp(min, max);
+    final min = widget.endAction != null ? -_kMaxDrag : 0.0;
+    final max = widget.startAction != null ? _kMaxDrag : 0.0;
+    final next = (_ctrl.value + delta).clamp(min, max);
+    final wasArmed = _ctrl.value.abs() >= _kTriggerExtent;
+    final nowArmed = next.abs() >= _kTriggerExtent;
+    if (nowArmed && !wasArmed) HapticFeedback.mediumImpact();
+    _ctrl.value = next;
   }
 
   void _onDragEnd(DragEndDetails d) {
     final v = _ctrl.value;
+    if (v.abs() >= _kTriggerExtent) {
+      _trigger(v > 0 ? widget.startAction! : widget.endAction!);
+      return;
+    }
     final velocity = d.primaryVelocity! * _dir;
     double target;
     if (velocity.abs() > 700) {
@@ -141,6 +169,13 @@ class _NooSwipeActionState extends State<NooSwipeAction>
                       child: _ActionBlock(
                         spec: showing,
                         colors: colors,
+                        // Grows past its own min width to fill the extra
+                        // reveal once dragged further than a plain "open"
+                        // - otherwise the row's translated edge would pull
+                        // away from the block and expose bare space behind
+                        // it.
+                        width: v.abs() * NooSwipeAction.actionWidth,
+                        armed: v.abs() >= _kTriggerExtent,
                         onTap: () => _trigger(showing),
                       ),
                     ),
@@ -196,11 +231,24 @@ class _OpenAwareChild extends AnimatedWidget {
 class _ActionBlock extends StatelessWidget {
   final NooSwipeActionSpec spec;
   final NooColors colors;
+
+  /// The block's own width - grows past [NooSwipeAction.actionWidth] once
+  /// dragged further than a plain reveal, so it always fills exactly what's
+  /// exposed behind the row.
+  final double width;
+
+  /// True once the drag has gone far enough that releasing now fires the
+  /// action - bumps the icon up a touch as a "you're past the point of no
+  /// return" cue, on top of the haptic tick that fired at the same moment.
+  final bool armed;
+
   final VoidCallback onTap;
 
   const _ActionBlock({
     required this.spec,
     required this.colors,
+    required this.width,
+    required this.armed,
     required this.onTap,
   });
 
@@ -216,13 +264,18 @@ class _ActionBlock extends StatelessWidget {
       behavior: HitTestBehavior.opaque,
       onTap: onTap,
       child: Container(
-        width: NooSwipeAction.actionWidth,
+        width: width.clamp(NooSwipeAction.actionWidth, double.infinity),
         color: bg,
         alignment: Alignment.center,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Icon(icon, size: 20, color: Colors.white),
+            AnimatedScale(
+              scale: armed ? 1.15 : 1,
+              duration: NooMotion.fast,
+              curve: NooMotion.ease,
+              child: Icon(icon, size: 20, color: Colors.white),
+            ),
             const SizedBox(height: 6),
             Text(
               label,

lib/widgets/noo/nav/noo_bottom_bar.dart

@@ -6,10 +6,10 @@ export 'noo_nav_style.dart';
 
 /// Android indicator geometry, shared between the sliding pill and each
 /// item's own icon box so they line up exactly. Floating's own top offset
-/// is shorter than attached's - its row is 8px shorter overall (72 vs 80)
+/// is shorter than attached's - its row is 16px shorter overall (64 vs 80)
 /// and there's no edge-to-edge safe-area strip inside it eating into that.
 const double _kAttachedPillTop = 14;
-const double _kFloatingPillTop = 10;
+const double _kFloatingPillTop = 8;
 const double _kAndroidPillWidth = 56;
 const double _kAndroidPillHeight = 32;
 
@@ -29,15 +29,21 @@ const double _kAndroidPillHeight = 32;
 /// [barStyle] (user-configurable in Settings, Appearance) picks between
 /// that edge-to-edge [NooBottomBarStyle.attached] bar and
 /// [NooBottomBarStyle.floating] - inset 16px from both side edges, 28px
-/// corners, a 1px `line` border instead of a shadow (see that enum's own
-/// doc comment for why). Floating's Android row is 8px shorter (72 vs 80)
-/// and drops its idle tabs' reserved label space - with no label to leave
-/// room for, an idle icon just centers in the whole button and renders a
-/// touch bigger (27 vs 24px) instead of sitting high with a gap under it.
-/// The home indicator / gesture bar area below the row comes from the
-/// bottom safe-area inset rather than a fixed 34/20px spacer, so it's
-/// right on every device. Meant for `Scaffold.bottomNavigationBar` - the
-/// host `Scaffold` needs `extendBody: true` while floating.
+/// corners, a 1px `line` border plus [nooDialogShadow] (the one shadow the
+/// rest of the app allows itself, see that constant's own doc comment) so
+/// it actually reads as floating above the content scrolling behind it.
+/// Floating's Android row is both shorter (64 vs 80) and drops its idle
+/// tabs' reserved label space - with no label to leave room for, an idle
+/// icon just centers in the whole button, rather than sitting high with a
+/// gap under it. The home indicator / gesture bar area below the row comes
+/// from the bottom safe-area inset rather than a fixed 34/20px spacer, so
+/// it's right on every device. Meant for `Scaffold.bottomNavigationBar` -
+/// the host `Scaffold` needs `extendBody: true` while floating, and a
+/// scrollable body needs enough trailing padding to clear the bar's own
+/// footprint ([NooBottomBar.rowHeight] + [NooBottomBar.floatingBottomMargin]
+/// + the bottom safe area) since nothing does that automatically once the
+/// body draws behind it - see `tab_state_slivers.dart`'s
+/// `bottomBarClearance`.
 ///
 /// [searchDestination]/[onSearchTap] (set together, from Settings'
 /// "Search in bottom bar" - see `DESIGN_SYSTEM.md`'s floating bottom bar
@@ -65,6 +71,18 @@ class NooBottomBar extends StatelessWidget {
     this.onSearchTap,
   });
 
+  /// The row height [build] draws for [style]/[barStyle] - exposed so a
+  /// scrollable body sharing the same `Scaffold` can reserve exactly this
+  /// much clearance (see the class doc comment) instead of guessing.
+  static double rowHeight(NooNavStyle style, NooBottomBarStyle barStyle) {
+    if (style == NooNavStyle.ios) return 50;
+    return barStyle == NooBottomBarStyle.floating ? 64 : 80;
+  }
+
+  /// Gap between the floating bar's bottom edge and the safe area below it
+  /// (itself inside the [SafeArea] that consumes the actual device inset).
+  static const double floatingBottomMargin = 12;
+
   @override
   Widget build(BuildContext context) {
     final colors = context.nooColors;
@@ -83,7 +101,7 @@ class NooBottomBar extends StatelessWidget {
             floating: floating,
             trailingSearch: rowSearch,
           );
-    final barHeight = ios ? (floating ? 64.0 : 50.0) : (floating ? 72.0 : 80.0);
+    final barHeight = NooBottomBar.rowHeight(style, barStyle);
 
     if (floating) {
       final pill = Container(
@@ -93,13 +111,19 @@ class NooBottomBar extends StatelessWidget {
           color: colors.surface,
           border: Border.all(color: colors.line),
           borderRadius: BorderRadius.circular(28),
+          boxShadow: const [nooDialogShadow],
         ),
         child: row,
       );
       return SafeArea(
         top: false,
         child: Padding(
-          padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
+          padding: EdgeInsets.fromLTRB(
+            16,
+            0,
+            16,
+            NooBottomBar.floatingBottomMargin,
+          ),
           child: hasSearch
               // A fixed-height SizedBox, not just a Row with
               // crossAxisAlignment.stretch - the bottomNavigationBar slot
@@ -255,6 +279,7 @@ class _SearchSatellite extends StatelessWidget {
             color: colors.surface,
             border: Border.all(color: colors.line),
             shape: BoxShape.circle,
+            boxShadow: const [nooDialogShadow],
           ),
           child: Icon(destination.icon, size: 24, color: colors.fg1),
         ),
@@ -338,7 +363,7 @@ class _AndroidItem extends StatelessWidget {
     final Widget content;
     if (floating && !selected) {
       content = Center(
-        child: Icon(destination.icon, size: 27, color: iconColor),
+        child: Icon(destination.icon, size: 25, color: iconColor),
       );
     } else {
       content = Padding(

lib/widgets/noo/nav/noo_nav_style.dart

@@ -22,13 +22,30 @@ enum NooNavStyle {
 /// side/bottom margin. [floating] insets it 16px from both side edges and
 /// clear of the bottom safe area, rounded (28px - the same radius the
 /// sheet top/drawer edge use) rather than square, with a 1px `line` border
-/// standing in for elevation instead of a shadow (product UI stays flat -
-/// DESIGN_SYSTEM.md 1.4 - so this is the one place that border does that
-/// job). The host `Scaffold` needs `extendBody: true` while floating, so
-/// its body scrolls behind the bar's transparent margin instead of
-/// stopping short of it like [attached] does.
+/// plus `nooDialogShadow` - product UI otherwise stays flat (DESIGN_SYSTEM.md
+/// 1.4), but a bar that's genuinely floating above scrolling content reads
+/// as attached without some elevation, so it borrows the one shadow the
+/// rest of the app allows itself rather than inventing a second one. The
+/// host `Scaffold` needs `extendBody: true` while floating, so its body
+/// scrolls behind the bar's transparent margin instead of stopping short of
+/// it like [attached] does - which also means that body needs its own
+/// trailing padding to clear the bar (see `NooBottomBar.rowHeight`).
 enum NooBottomBarStyle { attached, floating }
 
+/// Which widget opens the shell's navigation menu (hidden tabs + Settings)
+/// on mobile - user-configurable in Settings (Appearance), same precedent
+/// as [NooBottomBarStyle]. [drawer] is the original pattern: a `menu`
+/// icon, top-left of the top bar, opens a left-edge `Drawer`. [avatarMenu]
+/// drops that icon entirely and repurposes the avatar button - already
+/// sitting top-right, already a tap target every user already knows - as
+/// the one entry point instead, opening a dropdown anchored below it (see
+/// `showAvatarMenu` in `widgets/avatar_menu.dart`) rather than a drawer
+/// sliding from the opposite edge. Applies on both platforms, since
+/// [NooTopBar]'s `onMenu`/avatar wiring is shared chrome, not
+/// Android-specific - only [AppDrawer]'s left-`Drawer` convention is being
+/// offered an alternative, not anything platform-only.
+enum NooNavMenuStyle { drawer, avatarMenu }
+
 /// One destination in a [NooBottomBar]. Data-agnostic on purpose - the app
 /// maps its own tab model (e.g. `AppTab`) onto these.
 @immutable

lib/widgets/noo/nav/noo_top_bar.dart

@@ -56,6 +56,16 @@ class NooTopBar extends StatelessWidget implements PreferredSizeWidget {
   /// iOS only: the search field shown below the large title.
   final Widget? search;
 
+  /// Android only: an extra widget (e.g. a search-field-styled launcher) in
+  /// the flexible middle slot, to the title's own right - [title] keeps
+  /// its natural (shrink-to-fit, ellipsized) width on the left, and this
+  /// takes whatever space is left rather than replacing it. iOS already has
+  /// a dedicated [search] slot below its large title for this; Android has
+  /// no large title to put a second row under, so a caller that wants an
+  /// inline search bar there puts it beside the title instead of adding a
+  /// row.
+  final Widget? androidTitleTrailing;
+
   /// Defaults to `bg` - the top bar sits on the screen background.
   final Color? backgroundColor;
 
@@ -67,6 +77,7 @@ class NooTopBar extends StatelessWidget implements PreferredSizeWidget {
     this.onMenu,
     this.actions = const [],
     this.search,
+    this.androidTitleTrailing,
     this.backgroundColor,
   });
 
@@ -178,14 +189,31 @@ class NooTopBar extends StatelessWidget implements PreferredSizeWidget {
           spacing: 4,
           children: [
             ?lead,
-            Expanded(
-              child: Text(
-                title,
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-                style: NooText.title.copyWith(height: 1, color: colors.fg1),
+            // [androidTitleTrailing]'s own doc comment explains why this
+            // isn't a straight replacement: the title keeps its natural
+            // width (`Flexible`, not `Expanded` - it still shrinks/
+            // ellipsizes if there's truly no room, but doesn't force the
+            // row that wide otherwise) and sits to the trailing content's
+            // left rather than being displaced by it.
+            if (androidTitleTrailing != null) ...[
+              Flexible(
+                child: Text(
+                  title,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: NooText.title.copyWith(height: 1, color: colors.fg1),
+                ),
+              ),
+              Expanded(child: androidTitleTrailing!),
+            ] else
+              Expanded(
+                child: Text(
+                  title,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: NooText.title.copyWith(height: 1, color: colors.fg1),
+                ),
               ),
-            ),
             ...actions,
           ],
         ),

lib/widgets/settings/settings_appearance.dart

@@ -51,6 +51,7 @@ class SettingsAppearanceSection extends StatelessWidget {
           children: [
             _ThemeRow(settings: settings),
             _BottomBarStyleRow(settings: settings),
+            _NavMenuStyleRow(settings: settings),
             NooSettingsRow(
               icon: LucideIcons.search,
               label: const Text('Search in bottom bar'),
@@ -230,6 +231,66 @@ class _BottomBarStyleRow extends StatelessWidget {
   }
 }
 
+/// "Navigation menu" (Settings → Appearance): which widget opens hidden
+/// tabs + Settings - the original `menu` icon that opens a left `Drawer`,
+/// or the avatar button instead (opens `showAvatarMenu`, a dropdown
+/// anchored under it) - see [NooNavMenuStyle]'s own doc comment for the
+/// full reachability rationale (dropping the hamburger removes one of the
+/// two top-corner targets the shell asks a thumb to reach, rather than
+/// adding a third kind of chrome like a side rail would).
+class _NavMenuStyleRow extends StatelessWidget {
+  final SettingsController settings;
+
+  const _NavMenuStyleRow({required this.settings});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Material(
+      color: colors.surface,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: NooSpace.md,
+          vertical: 12,
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Icon(LucideIcons.panelLeft, size: 20, color: colors.fg2),
+                const SizedBox(width: 14),
+                Text(
+                  'Navigation menu',
+                  style: NooText.bodyL.copyWith(color: colors.fg1),
+                ),
+              ],
+            ),
+            const SizedBox(height: 12),
+            NooSegmentedControl<NooNavMenuStyle>(
+              fill: true,
+              value: settings.navMenuStyle,
+              onChanged: settings.setNavMenuStyle,
+              options: const [
+                NooSegmentOption(
+                  value: NooNavMenuStyle.drawer,
+                  icon: LucideIcons.menu,
+                  label: 'Hamburger',
+                ),
+                NooSegmentOption(
+                  value: NooNavMenuStyle.avatarMenu,
+                  icon: LucideIcons.userRound,
+                  label: 'Avatar',
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 /// The current accent-color choice, shown as a small filled circle in the
 /// "Accent color" row - a wallpaper icon when following the OS's dynamic
 /// color instead of a fixed swatch.

lib/widgets/settings/settings_section.dart

@@ -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,
       );
     }

lib/widgets/shell/shell_common.dart

@@ -212,13 +212,31 @@ class _AccountSwitchRow extends StatelessWidget {
 }
 
 /// The current user's avatar in the mobile top bar. Tap opens the accounts
-/// sheet ([showAccountSwitcher]); swiping up/down on it cycles to the
-/// next/previous saved account immediately, with no confirmation - a
-/// shortcut alongside the full switcher.
+/// sheet ([showAccountSwitcher]) by default - or [onTap], when the caller
+/// overrides it (`AppTopBar` does this for
+/// `SettingsController.navMenuStyle`'s `avatarMenu` option, which
+/// repurposes this same button to open `showAvatarMenu` instead; avoids
+/// this file importing `widgets/avatar_menu.dart`, which itself imports
+/// this file for `openSettings`/`accountInitial`/`serverHost`). Swiping
+/// up/down on it cycles to the next/previous saved account immediately,
+/// with no confirmation, regardless of [onTap] - a shortcut that stays
+/// available either way.
 class ShellAvatarButton extends StatelessWidget {
   final double hitBox;
+  final VoidCallback? onTap;
 
-  const ShellAvatarButton({super.key, this.hitBox = 48});
+  /// Describes whatever [onTap] actually does - defaults to "Accounts"
+  /// (the account switcher), but a caller overriding [onTap] should
+  /// override this too so the tooltip/semantics describe the real action
+  /// instead of a stale default.
+  final String label;
+
+  const ShellAvatarButton({
+    super.key,
+    this.hitBox = 48,
+    this.onTap,
+    this.label = 'Accounts',
+  });
 
   Future<void> _handleVerticalSwipe(
     BuildContext context,
@@ -246,17 +264,17 @@ class ShellAvatarButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final session = context.watch<SessionController>();
     return Tooltip(
-      message: 'Accounts',
+      message: label,
       child: Semantics(
         button: true,
-        label: 'Accounts',
+        label: label,
         child: GestureDetector(
           onVerticalDragEnd: (details) =>
               _handleVerticalSwipe(context, details),
           child: SizedBox.square(
             dimension: hitBox,
             child: InkResponse(
-              onTap: () => showAccountSwitcher(context),
+              onTap: onTap ?? () => showAccountSwitcher(context),
               radius: hitBox / 2,
               child: Center(
                 child: NooAvatar(

lib/widgets/tabs/tab_state_slivers.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:provider/provider.dart';
+import '../../providers/settings_controller.dart';
 import '../../theme/design_tokens.dart';
 import '../noo/core/noo_button.dart';
+import '../noo/nav/noo_bottom_bar.dart';
+import '../noo/noo_layout.dart';
 
 /// Shared loading/error/empty slivers for Recent/Activity/Trash/Shares (and
 /// any future tab shaped like them: a `CustomScrollView` over one flat
@@ -88,9 +92,72 @@ Widget tabEmptySliver(
   );
 }
 
+/// How much bottom padding a tab's scrollable list needs to clear
+/// [NooBottomBar] and not just butt up against it. [NooBottomBarStyle.
+/// attached] bars aren't drawn behind (no `Scaffold.extendBody`), so
+/// Scaffold already shrinks the body above them - this is then pure
+/// breathing room, not overlap prevention. [NooBottomBarStyle.floating]
+/// bars draw over an extended body instead, so nothing reserves space for
+/// them automatically: the clearance has to cover the bar's own footprint
+/// (see [NooBottomBar.rowHeight]/[NooBottomBar.floatingBottomMargin]) plus
+/// the safe-area inset below it, or the last row ends up hidden under it.
+double bottomBarClearance(BuildContext context) {
+  final settings = context.watch<SettingsController>();
+  if (settings.bottomBarStyle == NooBottomBarStyle.attached) return 100;
+  final barHeight = NooBottomBar.rowHeight(
+    NooLayout.navStyle(context),
+    NooBottomBarStyle.floating,
+  );
+  final safeBottom = MediaQuery.paddingOf(context).bottom;
+  return barHeight + NooBottomBar.floatingBottomMargin + safeBottom + 24;
+}
+
 /// Bottom padding sliver so the last row/card clears the bottom nav/FAB -
 /// same trailing pair every rebuilt tab list ends on.
-const List<Widget> tabBottomInsetSlivers = [
-  SliverToBoxAdapter(child: SizedBox(height: 100)),
-  SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
+List<Widget> tabBottomInsetSlivers(BuildContext context) => [
+  SliverToBoxAdapter(child: SizedBox(height: bottomBarClearance(context))),
+  const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
 ];
+
+/// Wraps a tab's shell top bar ([AppTopBar], passed in as the generic
+/// [PreferredSizeWidget] it implements - this file can't import
+/// `app_top_bar.dart` without a cycle) as that tab's own first sliver,
+/// living inside its `CustomScrollView` instead of `Scaffold.appBar`. Gives
+/// it Material's native "floating app bar" behavior, via the framework's own
+/// [SliverFloatingHeader]: it scrolls away as the list scrolls down, and -
+/// unlike a plain `SliverToBoxAdapter`, which only reappears once scrolled
+/// all the way back to the top - reappears immediately on any upward
+/// scroll, following the finger while dragging and settling fully open or
+/// fully closed once the gesture ends.
+///
+/// [SliverFloatingHeader] sizes itself from [topBar]'s own natural layout
+/// (like `SliverToBoxAdapter`) rather than a fixed extent declared up
+/// front - so [topBar]'s own internal `SafeArea` (see `NooTopBar`'s doc
+/// comment) already accounts for the status-bar inset correctly while
+/// [topBar] itself is visible, with no extra height math needed here
+/// (unlike building this on the general-purpose `SliverPersistentHeader`
+/// would have required).
+///
+/// Sits above a tab's own pinned in-content header (built with
+/// [StickyHeaderDelegate] - the sort/filter controls row, or the selection
+/// bar that replaces it) - put this sliver first in `contentSlivers` so
+/// that header stays exactly where it already is, independent of whether
+/// [topBar] is currently shown or scrolled away.
+///
+/// That pinned header needs its OWN protection from the status bar too,
+/// though: [topBar]'s `SafeArea` only reserves space while [topBar] has
+/// some height to put it in - once it's fully collapsed (0 height, [topBar]
+/// scrolled all the way away), that reservation disappears with it, and
+/// the pinned header would ride up underneath the status bar instead of
+/// stopping below it (a real bug this shipped with once already - caught
+/// by `tab_state_slivers_test.dart`'s regression test for it). Every tab
+/// view wraps its whole `CustomScrollView` (this sliver, the pinned header,
+/// and everything else) in `SafeArea(top: true, bottom: false, ...)` to
+/// fix this - that reserves the inset outside the scrolling/collapsing
+/// region entirely, so it's never implicated in this sliver's own
+/// collapse math regardless of [topBar]'s current state. Flutter's
+/// `SafeArea` nesting means this doesn't double the inset: the outer one
+/// zeroes `MediaQuery.padding.top` for everything below it, so [topBar]'s
+/// own inner `SafeArea` sees nothing left to add.
+Widget topBarSliver(PreferredSizeWidget topBar) =>
+    SliverFloatingHeader(child: topBar);

test/views/account_view_test.dart

@@ -0,0 +1,198 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:provider/provider.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:noo/models/saved_account.dart';
+import 'package:noo/providers/connectivity_controller.dart';
+import 'package:noo/providers/files_controller.dart';
+import 'package:noo/providers/session_controller.dart';
+import 'package:noo/providers/settings_controller.dart';
+import 'package:noo/providers/sync_status_controller.dart';
+import 'package:noo/theme/app_theme.dart';
+import 'package:noo/views/account_view.dart';
+import 'package:noo/widgets/noo/nav/noo_top_bar.dart';
+
+/// Covers the mobile Settings navigation restructure: a top-level menu of
+/// category rows (`account_view.dart`'s `_MobileMenu`) that pushes a
+/// single-section screen per row, replacing the old design where every
+/// section rendered inline in one long scrolling column. This only covers
+/// the menu/push/back mechanics - each section's own content already has
+/// (or doesn't need) its own coverage elsewhere.
+void main() {
+  const secureStorageChannel = MethodChannel(
+    'plugins.it_nomads.com/flutter_secure_storage',
+  );
+  const connectivityChannel = MethodChannel(
+    'dev.fluttercommunity.plus/connectivity',
+  );
+  const connectivityStatusChannel = EventChannel(
+    'dev.fluttercommunity.plus/connectivity_status',
+  );
+
+  const accountId = 'server_example_com__alice';
+  const passwordKey = 'nc_app_password_$accountId';
+  const password = 'app-password';
+
+  setUpAll(() {
+    GoogleFonts.config.allowRuntimeFetching = false;
+    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
+        .setMockMethodCallHandler(secureStorageChannel, (call) async {
+          if (call.method == 'readAll') {
+            return <String, String>{passwordKey: password};
+          }
+          if (call.method == 'read') {
+            final key = (call.arguments as Map)['key'] as String?;
+            return key == passwordKey ? password : null;
+          }
+          return null;
+        });
+    // Offline, like `session_controller_test.dart`'s setup: keeps
+    // SessionController in a provisional login (no real HTTP calls) and
+    // stops FilesController/SyncStatusController from starting their
+    // network-fetch/periodic-refresh machinery, which would otherwise
+    // leave timers pending forever in a test.
+    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
+        .setMockMethodCallHandler(connectivityChannel, (call) async {
+          if (call.method == 'check') return <String>['none'];
+          return null;
+        });
+    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
+        .setMockStreamHandler(
+          connectivityStatusChannel,
+          MockStreamHandler.inline(onListen: (arguments, events) {}),
+        );
+  });
+
+  setUp(() {
+    SharedPreferences.setMockInitialValues({
+      'account_migration_v1_done': true,
+      'accounts_list': jsonEncode([
+        const SavedAccount(
+          id: accountId,
+          serverUrl: 'https://server.example.com',
+          username: 'alice',
+        ).toJson(),
+      ]),
+      'active_account_id': accountId,
+    });
+  });
+
+  Future<void> pumpSettings(WidgetTester tester) async {
+    await tester.binding.setSurfaceSize(const Size(400, 800));
+    addTearDown(() => tester.binding.setSurfaceSize(null));
+
+    await tester.pumpWidget(
+      MultiProvider(
+        providers: [
+          ChangeNotifierProvider(create: (_) => ConnectivityController()),
+          ChangeNotifierProvider(
+            create: (context) => SessionController(context.read()),
+          ),
+          ChangeNotifierProvider(create: (_) => SettingsController()),
+          ChangeNotifierProvider(
+            create: (context) => FilesController(context.read()),
+          ),
+          ChangeNotifierProvider(
+            create: (context) =>
+                SyncStatusController(context.read(), context.read()),
+          ),
+        ],
+        child: MaterialApp(
+          theme: AppTheme.light(AppTheme.defaultAccent, useDynamicColor: false),
+          home: const AccountView(),
+        ),
+      ),
+    );
+
+    // Not `pumpAndSettle`: once the saved account is ready,
+    // FilesController/SyncStatusController start their own periodic
+    // refresh timers, which `pumpAndSettle` would spin on forever. A
+    // bounded number of small pumps is enough to flush the async gaps in
+    // SessionController's prefs restore and the dependent controllers'
+    // one-shot account-ready reactions (mirrors
+    // `session_controller_test.dart`'s `pumpUntil` loop).
+    for (var i = 0; i < 30; i++) {
+      await tester.pump(const Duration(milliseconds: 10));
+    }
+  }
+
+  /// Advances exactly far enough to finish a push/pop transition
+  /// (`MaterialPageRoute`'s default is 300ms) without risking
+  /// `pumpAndSettle` picking up a pending periodic timer.
+  Future<void> settleNav(WidgetTester tester) async {
+    await tester.pump();
+    for (var i = 0; i < 10; i++) {
+      await tester.pump(const Duration(milliseconds: 50));
+    }
+  }
+
+  const categoryTitles = [
+    'Accounts',
+    'Security',
+    'File sync',
+    'Files cache',
+    'Appearance',
+    'Tabs',
+    'Action bar',
+    'Swipe on a file',
+  ];
+
+  testWidgets(
+    'shows a top-level menu of category rows, not every section inline',
+    (tester) async {
+      await pumpSettings(tester);
+
+      // The account card (pinned, not a category row of its own) ...
+      expect(find.text('alice'), findsOneWidget);
+      // ... plus exactly one row per section.
+      for (final title in categoryTitles) {
+        expect(find.text(title), findsOneWidget);
+      }
+      // A section's own content isn't rendered until its row is tapped -
+      // this is a menu, not the old all-sections-inline column.
+      expect(
+        find.text("Require this device's PIN or biometric to open Noo"),
+        findsNothing,
+      );
+    },
+  );
+
+  testWidgets(
+    'tapping a category row pushes just that section, with a way back',
+    (tester) async {
+      await pumpSettings(tester);
+
+      await tester.tap(find.text('Security'));
+      await settleNav(tester);
+
+      // Landed on a separate, pushed Security screen: its own content -
+      // not shown anywhere on the top-level menu - is now visible. (The
+      // menu screen below it may stay mounted per `PageRoute.maintainState`,
+      // so this checks for the pushed screen's content rather than the
+      // menu's absence.)
+      expect(
+        find.text("Require this device's PIN or biometric to open Noo"),
+        findsOneWidget,
+      );
+      // At least one `NooTopBarBack` now leads back - the pushed screen's
+      // own, on top of `AccountView`'s own (for returning to the shell).
+      expect(find.byType(NooTopBarBack), findsAtLeastNWidgets(1));
+
+      // Tapping the topmost back button pops the pushed screen back off,
+      // taking its content with it - unlike the underlying menu, a popped
+      // route is actually removed, so this absence check is meaningful.
+      await tester.tap(find.byType(NooTopBarBack).last);
+      await settleNav(tester);
+
+      expect(
+        find.text("Require this device's PIN or biometric to open Noo"),
+        findsNothing,
+      );
+      expect(find.text('Security'), findsOneWidget);
+      expect(find.text('alice'), findsOneWidget);
+    },
+  );
+}

test/widgets/avatar_menu_test.dart

@@ -0,0 +1,177 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:provider/provider.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:noo/models/app_tab.dart';
+import 'package:noo/models/saved_account.dart';
+import 'package:noo/providers/connectivity_controller.dart';
+import 'package:noo/providers/files_controller.dart';
+import 'package:noo/providers/session_controller.dart';
+import 'package:noo/providers/settings_controller.dart';
+import 'package:noo/providers/sync_status_controller.dart';
+import 'package:noo/providers/trash_controller.dart';
+import 'package:noo/theme/app_theme.dart';
+import 'package:noo/widgets/app_top_bar.dart';
+import 'package:noo/widgets/noo/nav/noo_top_bar.dart';
+
+/// Covers `SettingsController.navMenuStyle`'s two options as wired through
+/// `AppTopBar`/`ShellAvatarButton`: [NooNavMenuStyle.drawer] (today's
+/// hamburger-opens-a-left-Drawer pattern, unchanged) vs
+/// [NooNavMenuStyle.avatarMenu] (no hamburger at all - the avatar opens
+/// `showAvatarMenu`'s dropdown instead of the account switcher).
+void main() {
+  const secureStorageChannel = MethodChannel(
+    'plugins.it_nomads.com/flutter_secure_storage',
+  );
+  const connectivityChannel = MethodChannel(
+    'dev.fluttercommunity.plus/connectivity',
+  );
+  const connectivityStatusChannel = EventChannel(
+    'dev.fluttercommunity.plus/connectivity_status',
+  );
+
+  const accountId = 'server_example_com__alice';
+  const passwordKey = 'nc_app_password_$accountId';
+  const password = 'app-password';
+
+  setUpAll(() {
+    GoogleFonts.config.allowRuntimeFetching = false;
+    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
+        .setMockMethodCallHandler(secureStorageChannel, (call) async {
+          if (call.method == 'readAll') {
+            return <String, String>{passwordKey: password};
+          }
+          if (call.method == 'read') {
+            final key = (call.arguments as Map)['key'] as String?;
+            return key == passwordKey ? password : null;
+          }
+          return null;
+        });
+    // Offline, same as `account_view_test.dart`'s setup: keeps
+    // SessionController in a provisional login and stops
+    // FilesController/SyncStatusController/TrashController's network/timer
+    // machinery from hanging the test.
+    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
+        .setMockMethodCallHandler(connectivityChannel, (call) async {
+          if (call.method == 'check') return <String>['none'];
+          return null;
+        });
+    TestDefaultBinaryMessengerBinding.instance.defaultBinaryMessenger
+        .setMockStreamHandler(
+          connectivityStatusChannel,
+          MockStreamHandler.inline(onListen: (arguments, events) {}),
+        );
+  });
+
+  setUp(() {
+    SharedPreferences.setMockInitialValues({
+      'account_migration_v1_done': true,
+      'accounts_list': jsonEncode([
+        const SavedAccount(
+          id: accountId,
+          serverUrl: 'https://server.example.com',
+          username: 'alice',
+        ).toJson(),
+      ]),
+      'active_account_id': accountId,
+    });
+  });
+
+  Future<void> pumpTopBar(
+    WidgetTester tester, {
+    required NooNavMenuStyle navMenuStyle,
+  }) async {
+    await tester.binding.setSurfaceSize(const Size(400, 800));
+    addTearDown(() => tester.binding.setSurfaceSize(null));
+
+    await tester.pumpWidget(
+      MultiProvider(
+        providers: [
+          ChangeNotifierProvider(create: (_) => ConnectivityController()),
+          ChangeNotifierProvider(
+            create: (context) => SessionController(context.read()),
+          ),
+          ChangeNotifierProvider(create: (_) => SettingsController()),
+          ChangeNotifierProvider(
+            create: (context) => FilesController(context.read()),
+          ),
+          ChangeNotifierProvider(
+            create: (context) =>
+                SyncStatusController(context.read(), context.read()),
+          ),
+          ChangeNotifierProvider(
+            create: (context) => TrashController(context.read()),
+          ),
+        ],
+        child: MaterialApp(
+          theme: AppTheme.light(AppTheme.defaultAccent, useDynamicColor: false),
+          home: Scaffold(
+            drawer: const Drawer(child: Text('drawer open')),
+            appBar: AppTopBar(
+              style: NooNavStyle.android,
+              tab: AppTab.files,
+              navMenuStyle: navMenuStyle,
+            ),
+            body: const SizedBox(),
+          ),
+        ),
+      ),
+    );
+
+    // Not `pumpAndSettle` - the same reasoning as `account_view_test.dart`:
+    // the active account's dependent controllers start periodic
+    // timers/futures that would spin it forever.
+    for (var i = 0; i < 30; i++) {
+      await tester.pump(const Duration(milliseconds: 10));
+    }
+  }
+
+  testWidgets('avatarMenu style: no hamburger, avatar opens the dropdown', (
+    tester,
+  ) async {
+    await pumpTopBar(tester, navMenuStyle: NooNavMenuStyle.avatarMenu);
+
+    expect(find.byTooltip('Menu'), findsOneWidget);
+    expect(find.byIcon(LucideIcons.menu), findsNothing);
+
+    await tester.tap(find.byTooltip('Menu'));
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 200));
+
+    // The dropdown's own header + Settings row - not the account
+    // switcher's "Add account"/"Manage accounts" rows.
+    expect(find.text('alice'), findsOneWidget);
+    expect(find.text('Settings'), findsOneWidget);
+    expect(find.text('Add account'), findsNothing);
+  });
+
+  testWidgets('drawer style (default): hamburger opens the real drawer', (
+    tester,
+  ) async {
+    await pumpTopBar(tester, navMenuStyle: NooNavMenuStyle.drawer);
+
+    expect(find.byTooltip('Menu'), findsOneWidget);
+    await tester.tap(find.byTooltip('Menu'));
+    await tester.pumpAndSettle();
+
+    expect(find.text('drawer open'), findsOneWidget);
+  });
+
+  testWidgets(
+    'drawer style (default): avatar still opens the account switcher',
+    (tester) async {
+      await pumpTopBar(tester, navMenuStyle: NooNavMenuStyle.drawer);
+
+      expect(find.byTooltip('Accounts'), findsOneWidget);
+      await tester.tap(find.byTooltip('Accounts'));
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 200));
+
+      expect(find.text('Add account'), findsOneWidget);
+    },
+  );
+}

test/widgets/noo/core_test.dart

@@ -12,6 +12,7 @@ import 'package:noo/widgets/noo/core/noo_progress_bar.dart';
 import 'package:noo/widgets/noo/core/noo_search_field.dart';
 import 'package:noo/widgets/noo/core/noo_segmented_control.dart';
 import 'package:noo/widgets/noo/core/noo_toggle.dart';
+import 'package:noo/widgets/noo/nav/noo_nav_style.dart';
 
 import 'noo_test_utils.dart';
 
@@ -247,7 +248,11 @@ void main() {
   group('NooFab', () {
     testNooWidgets('shows label and fires onTap', (tester, theme, c) async {
       var taps = 0;
-      await pumpNoo(tester, NooFab(onTap: () => taps++), theme: theme);
+      await pumpNoo(
+        tester,
+        NooFab(barStyle: NooBottomBarStyle.floating, onTap: () => taps++),
+        theme: theme,
+      );
       expect(find.text('Upload'), findsOneWidget);
       expect(tester.getSize(find.byType(NooFab)).height, 56);
       expect(tester.getSize(find.byType(NooFab)).width, lessThan(200));
@@ -263,7 +268,11 @@ void main() {
       var taps = 0;
       await pumpNoo(
         tester,
-        NooFab(collapsed: true, onTap: () => taps++),
+        NooFab(
+          collapsed: true,
+          barStyle: NooBottomBarStyle.floating,
+          onTap: () => taps++,
+        ),
         theme: theme,
       );
       await tester.pumpAndSettle();
@@ -274,6 +283,44 @@ void main() {
       await tester.tap(find.byType(NooFab));
       expect(taps, 1);
     });
+
+    testNooWidgets('floating bar style stays fully round', (
+      tester,
+      theme,
+      c,
+    ) async {
+      await pumpNoo(
+        tester,
+        const NooFab(barStyle: NooBottomBarStyle.floating),
+        theme: theme,
+      );
+      final material = tester.widget<Material>(
+        find.descendant(
+          of: find.byType(NooFab),
+          matching: find.byType(Material),
+        ),
+      );
+      expect((material.borderRadius as BorderRadius).topLeft.x, NooRadii.pill);
+    });
+
+    testNooWidgets('attached bar style squares off to a rounded square', (
+      tester,
+      theme,
+      c,
+    ) async {
+      await pumpNoo(
+        tester,
+        const NooFab(barStyle: NooBottomBarStyle.attached),
+        theme: theme,
+      );
+      final material = tester.widget<Material>(
+        find.descendant(
+          of: find.byType(NooFab),
+          matching: find.byType(Material),
+        ),
+      );
+      expect((material.borderRadius as BorderRadius).topLeft.x, NooRadii.card);
+    });
   });
 
   group('NooProgressBar', () {

test/widgets/noo/files_swipe_test.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:noo/widgets/noo/files/noo_swipe_action.dart';
+
+import 'noo_test_utils.dart';
+
+void main() {
+  setUpNooTests();
+
+  group('NooSwipeAction', () {
+    testNooWidgets('a moderate swipe opens the action without triggering it', (
+      tester,
+      theme,
+      c,
+    ) async {
+      var triggered = 0;
+      await pumpNoo(
+        tester,
+        SizedBox(
+          width: 360,
+          height: 64,
+          child: NooSwipeAction(
+            endAction: NooSwipeActionSpec(
+              kind: NooSwipeActionKind.delete,
+              onTriggered: () => triggered++,
+            ),
+            child: const ColoredBox(
+              color: Colors.white,
+              child: SizedBox(width: 360, height: 64),
+            ),
+          ),
+        ),
+        theme: theme,
+      );
+      // Half the block's own width (96) is well past the "snap open"
+      // threshold but nowhere near the 1.8x trigger extent.
+      await tester.drag(find.byType(NooSwipeAction), const Offset(-60, 0));
+      await tester.pumpAndSettle();
+      expect(triggered, 0);
+      expect(find.text('Delete'), findsOneWidget);
+    });
+
+    testNooWidgets(
+      'swiping past the trigger extent fires the action on release - no '
+      'second tap needed',
+      (tester, theme, c) async {
+        var triggered = 0;
+        await pumpNoo(
+          tester,
+          SizedBox(
+            width: 360,
+            height: 64,
+            child: NooSwipeAction(
+              endAction: NooSwipeActionSpec(
+                kind: NooSwipeActionKind.delete,
+                onTriggered: () => triggered++,
+              ),
+              child: const ColoredBox(
+                color: Colors.white,
+                child: SizedBox(width: 360, height: 64),
+              ),
+            ),
+          ),
+          theme: theme,
+        );
+        // 300px of drag on a 96px-wide block clears the 1.8x (~173px)
+        // trigger extent well past the clamp ceiling.
+        await tester.drag(find.byType(NooSwipeAction), const Offset(-300, 0));
+        await tester.pump();
+        expect(triggered, 1);
+      },
+    );
+
+    testNooWidgets('tapping the revealed block still triggers the action too', (
+      tester,
+      theme,
+      c,
+    ) async {
+      var triggered = 0;
+      await pumpNoo(
+        tester,
+        SizedBox(
+          width: 360,
+          height: 64,
+          child: NooSwipeAction(
+            startAction: NooSwipeActionSpec(
+              kind: NooSwipeActionKind.favorite,
+              onTriggered: () => triggered++,
+            ),
+            child: const ColoredBox(
+              color: Colors.white,
+              child: SizedBox(width: 360, height: 64),
+            ),
+          ),
+        ),
+        theme: theme,
+      );
+      await tester.drag(find.byType(NooSwipeAction), const Offset(60, 0));
+      await tester.pumpAndSettle();
+      expect(triggered, 0);
+      await tester.tap(find.text('Favorite'));
+      await tester.pump();
+      expect(triggered, 1);
+    });
+  });
+}

test/widgets/tabs/tab_state_slivers_test.dart

@@ -0,0 +1,253 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:noo/widgets/tabs/tab_state_slivers.dart';
+
+import '../noo/noo_test_utils.dart';
+
+/// A minimal stand-in for `AppTopBar` - just needs to be a fixed-height
+/// [PreferredSizeWidget], same contract `topBarSliver` wraps in real tabs.
+class _FakeTopBar extends StatelessWidget implements PreferredSizeWidget {
+  const _FakeTopBar();
+
+  static const double height = 56;
+
+  @override
+  Size get preferredSize => const Size.fromHeight(height);
+
+  @override
+  Widget build(BuildContext context) => const SizedBox(
+    height: height,
+    child: ColoredBox(color: Colors.blue),
+  );
+}
+
+/// Matches the one sliver `topBarSliver` inserts, even once it's fully
+/// scrolled away - `find.byType`'s default `skipOffstage: true` treats a
+/// sliver with `geometry.visible == false` (paintExtent 0, exactly the
+/// "fully hidden" state part of this test exercises) as offstage and
+/// excludes it, which would otherwise make `tester.renderObject` throw
+/// instead of reporting the 0 this test expects. A function, not a
+/// top-level constant, so each call re-evaluates against whichever widget
+/// tree is currently pumped.
+Finder _header() => find.byType(SliverFloatingHeader, skipOffstage: false);
+
+/// A minimal stand-in for each tab's own pinned sort/filter row
+/// (`StickyHeaderDelegate`) - just needs to be a `SliverPersistentHeader`
+/// with `pinned: true` below `topBarSliver`, same contract every real tab
+/// view uses.
+class _FakeStickyHeader extends StatelessWidget {
+  const _FakeStickyHeader();
+
+  static const double height = 48;
+
+  @override
+  Widget build(BuildContext context) => const SizedBox(
+    height: height,
+    child: ColoredBox(color: Colors.red),
+  );
+}
+
+class _FakeStickyHeaderDelegate extends SliverPersistentHeaderDelegate {
+  @override
+  double get minExtent => _FakeStickyHeader.height;
+  @override
+  double get maxExtent => _FakeStickyHeader.height;
+  @override
+  Widget build(
+    BuildContext context,
+    double shrinkOffset,
+    bool overlapsContent,
+  ) => const _FakeStickyHeader();
+  @override
+  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
+      false;
+}
+
+Future<void> _pumpHost(WidgetTester tester, ScrollController controller) {
+  return tester.pumpWidget(
+    MaterialApp(
+      theme: nooTheme(Brightness.light),
+      home: Scaffold(
+        body: CustomScrollView(
+          controller: controller,
+          slivers: [
+            topBarSliver(const _FakeTopBar()),
+            SliverList(
+              delegate: SliverChildBuilderDelegate(
+                (context, index) =>
+                    SizedBox(height: 60, child: Text('Item $index')),
+                childCount: 40,
+              ),
+            ),
+          ],
+        ),
+      ),
+    ),
+  );
+}
+
+void main() {
+  setUpNooTests();
+
+  testWidgets(
+    'topBarSliver floats away scrolling down and reappears the moment the '
+    'drag reverses, not only once back at the top (Material floating app '
+    'bar behavior)',
+    (tester) async {
+      final controller = ScrollController();
+      addTearDown(controller.dispose);
+      await _pumpHost(tester, controller);
+
+      // The render object's own `geometry.paintExtent` is the ground truth
+      // for how much of the bar is actually visible - more reliable than
+      // inferring visibility from hit-testing/finding the child, which a
+      // floating header sliver keeps built regardless of paint extent.
+      double paintExtent() =>
+          tester.renderObject<RenderSliver>(_header()).geometry!.paintExtent;
+
+      // Fully visible before any scroll.
+      expect(paintExtent(), _FakeTopBar.height);
+      expect(controller.offset, 0);
+
+      // Drive one continuous drag by hand (rather than `tester.drag`, which
+      // only pumps once the whole gesture - including the final pointer-up
+      // - has already finished): the floating header's reveal-while-
+      // dragging behavior keys off the *live* scroll direction as reported
+      // mid-gesture, so this needs an intermediate pump while the pointer
+      // is still down to actually observe it.
+      final gesture = await tester.startGesture(const Offset(200, 300));
+
+      // Drag up (content scrolls down) well past the bar's own height, so
+      // it scrolls fully away, same as a plain `SliverToBoxAdapter` would.
+      await gesture.moveBy(const Offset(0, -200));
+      await tester.pump();
+
+      expect(paintExtent(), 0);
+      final scrolledOffset = controller.offset;
+      expect(
+        scrolledOffset,
+        greaterThan(_FakeTopBar.height),
+        reason: "the drag should have moved past the bar's own height",
+      );
+
+      // Reverse direction by a small amount, still mid-gesture and nowhere
+      // near the top of the list. A plain `SliverToBoxAdapter`, or a header
+      // that only reappears once back at the top, would stay fully hidden
+      // here. The floating bar should start reappearing immediately
+      // instead, following the drag.
+      await gesture.moveBy(const Offset(0, 40));
+      await tester.pump();
+
+      expect(controller.offset, lessThan(scrolledOffset));
+      expect(
+        controller.offset,
+        greaterThan(_FakeTopBar.height / 2),
+        reason: 'still far from the top of the list',
+      );
+      expect(
+        paintExtent(),
+        greaterThan(0),
+        reason:
+            'the bar should already be reappearing on the first upward '
+            'movement, without needing to reach the top',
+      );
+
+      await gesture.up();
+      await tester.pumpAndSettle();
+    },
+  );
+
+  testWidgets(
+    "topBarSliver sizes itself from the wrapped bar's own layout (e.g. its "
+    'SafeArea-padded height), not a value declared up front',
+    (tester) async {
+      final controller = ScrollController();
+      addTearDown(controller.dispose);
+      await _pumpHost(tester, controller);
+
+      expect(
+        tester.getSize(find.byType(_FakeTopBar)).height,
+        _FakeTopBar.height,
+      );
+    },
+  );
+
+  testWidgets(
+    'a pinned header below topBarSliver stays clear of the status bar once '
+    'the floating bar fully collapses (regression: it used to ride up '
+    'underneath the status bar once the only thing reserving that space '
+    "disappeared along with the bar's own height)",
+    (tester) async {
+      final controller = ScrollController();
+      addTearDown(controller.dispose);
+      const statusBarHeight = 40.0;
+
+      await tester.pumpWidget(
+        MediaQuery(
+          data: const MediaQueryData(
+            padding: EdgeInsets.only(top: statusBarHeight),
+          ),
+          child: MaterialApp(
+            theme: nooTheme(Brightness.light),
+            home: Scaffold(
+              // The fix under test: wrapping the scroll view (not just the
+              // top bar) in `SafeArea(top: true)` reserves the status-bar
+              // inset outside the scrolling/collapsing region entirely, so
+              // it's never implicated in `topBarSliver`'s own collapse math.
+              body: SafeArea(
+                top: true,
+                bottom: false,
+                child: CustomScrollView(
+                  controller: controller,
+                  slivers: [
+                    topBarSliver(const _FakeTopBar()),
+                    SliverPersistentHeader(
+                      pinned: true,
+                      delegate: _FakeStickyHeaderDelegate(),
+                    ),
+                    SliverList(
+                      delegate: SliverChildBuilderDelegate(
+                        (context, index) =>
+                            SizedBox(height: 60, child: Text('Item $index')),
+                        childCount: 40,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      );
+
+      // Fully visible before any scroll - right below the reserved inset.
+      expect(
+        tester.getTopLeft(find.byType(_FakeStickyHeader)).dy,
+        _FakeTopBar.height + statusBarHeight,
+      );
+
+      // Scroll well past the top bar's own height so it collapses fully.
+      final gesture = await tester.startGesture(const Offset(200, 300));
+      await gesture.moveBy(const Offset(0, -300));
+      await tester.pump();
+      await gesture.up();
+      await tester.pump();
+
+      expect(
+        tester.renderObject<RenderSliver>(_header()).geometry!.paintExtent,
+        0,
+        reason:
+            'the top bar should be fully collapsed for this check to '
+            'mean anything',
+      );
+      // The regression: without the fix, this would be 0 (or negative,
+      // scrolled up under the status bar) instead of sitting right at the
+      // reserved inset.
+      expect(
+        tester.getTopLeft(find.byType(_FakeStickyHeader)).dy,
+        statusBarHeight,
+      );
+    },
+  );
+}