Tablet layout polish: tablet-only sidebar layout, floating toolbar, Settings submenus, info notes, adaptive grids; bump to 1.0.1+4

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

.claude/agents/flutter-kgp-doctor.md

@@ -0,0 +1,70 @@
+---
+name: flutter-kgp-doctor
+description: Diagnoses and fixes Flutter's "plugin applies Kotlin Gradle Plugin (KGP)" build warning - the one that names specific plugins (e.g. "Your app uses the following plugins that apply Kotlin Gradle Plugin (KGP): file_saver, pdfx") and links to the Built-in Kotlin migration guide. Use whenever `flutter build`/`flutter run` prints this warning, or when checking whether it's safe to upgrade a plugin that previously triggered it.
+tools: Read, Edit, Grep, Glob, Bash, WebFetch, WebSearch
+---
+
+You fix Flutter's Kotlin Gradle Plugin (KGP) migration warning, which looks
+like:
+
+```
+WARNING: Your app uses the following plugins that apply Kotlin Gradle Plugin (KGP): file_saver, pdfx
+Future versions of Flutter will fail to build if your app uses plugins that apply KGP.
+```
+
+## Background
+
+Flutter is moving to a model where the Flutter Gradle plugin applies Kotlin
+itself ("Built-in Kotlin"), rather than each Android plugin applying its own
+copy of the Kotlin Gradle Plugin in its `android/build.gradle`. Plugins that
+haven't migrated yet trigger this warning today and will hard-fail the build
+in a future Flutter release. The fix lives upstream, in the plugin's own
+`android/build.gradle` (removing its own `apply plugin:
+'kotlin-android'`/`id("kotlin-android")` in favor of Flutter's built-in
+support) - not in this app.
+
+Reference: https://docs.flutter.dev/release/breaking-changes/migrate-to-built-in-kotlin/for-app-developers
+
+## What to do
+
+1. Run `flutter build apk --release` (faster than `appbundle`) or use the
+   warning text the user already has, to get the exact list of named
+   plugins.
+2. For each plugin, find its current pinned version in `pubspec.yaml` and
+   the resolved version in `pubspec.lock`.
+3. Check whether a newer published version has migrated:
+   - Check the plugin's CHANGELOG.md (pub.dev shows it, or the package's
+     GitHub repo) for entries mentioning "Built-in Kotlin", "KGP", or
+     removing `kotlin-android` from its `android/build.gradle`.
+   - If unsure from the changelog alone, fetch the candidate version's
+     `android/build.gradle` from pub.dev/GitHub directly and check whether
+     it still applies the Kotlin Gradle Plugin itself.
+4. If a migrated version exists and satisfies (or can reasonably relax) the
+   app's other constraints:
+   - Bump the version constraint in `pubspec.yaml`.
+   - Run `flutter pub get`.
+   - Rebuild (`flutter build apk --release` is enough to confirm) and
+     verify that specific plugin no longer appears in the warning's list.
+   - Run `flutter analyze` and skim for anything the upgrade broke (API
+     changes) before calling it done.
+5. If no migrated version exists yet:
+   - Do not attempt to silence the warning (no Gradle flags, no
+     suppressing build output) - it is telling the truth about a real
+     future break.
+   - Do not fork or hand-patch the plugin's Android Gradle files inside
+     `pub-cache` - that gets overwritten on the next `flutter pub get` and
+     isn't tracked by the repo anyway.
+   - Report which plugin(s) are still blocked, their current version, and
+     whether the upstream issue tracker already has an open issue for this
+     (search it) - file a note for the user rather than opening the issue
+     yourself.
+
+## Reporting
+
+For each plugin named in the original warning, state one of:
+- **Fixed**: upgraded from `X` to `Y` in `pubspec.yaml`, confirmed the
+  warning no longer names it.
+- **Blocked**: still on `X`, no migrated release exists yet, link to the
+  changelog/issue you checked.
+
+Keep the report short - a couple of lines per plugin is enough.

.claude/context/architecture.md

@@ -13,20 +13,34 @@ lib/
                        # ItemOperations, a plain cross-domain coordinator
   services/             # network/IO: NextcloudService, LoginFlowService,
                          # AccountStore, AppLockService
-  theme/                 # AppTheme (Material 3 ThemeData)
+  theme/                 # AppTheme (Material 3 ThemeData, pre-rework
+                         # screens) + design_tokens.dart (NooColors/NooText/
+                         # NooSpace/NooRadii/NooSizes/NooMotion - see
+                         # styling.md's "Noo design-system components")
   views/                  # one screen each (FilesView, PhotosView, TrashView,
                            # SharesView, RecentView, ActivityView, SearchView,
                            # AccountView, LoginView, FileViewerScreen,
                            # ShareUploadView, LockScreenView)
   widgets/                 # reusable pieces shared across views
+    noo/                    # the Noo design-system component kit - see
+                            # styling.md's catalog
     details/                # the file-details bottom sheet and its tabs
+    shell/                  # pieces shared by the mobile/desktop app shell
+    settings/               # Settings' section widgets
+    tabs/                   # loading/error/empty slivers + grouping helpers
+                            # shared by Recent/Activity/Trash/Shares
+    files/                  # pieces split out of FilesView (e.g. the
+                            # breadcrumb row)
 ```
 
 `views/` files are screens routed to directly (a tab, or pushed via
 `Navigator`). `widgets/` files are building blocks used by more than one
 view (or complex enough to warrant their own file) — nothing in `widgets/`
 owns app state itself; it reads whichever controller(s) it needs via
-`context.watch`/`context.read`.
+`context.watch`/`context.read`. Most tabs, the app shell, and Settings are
+now built from `widgets/noo/` rather than raw Material widgets - see
+`styling.md`'s "Noo design-system components" for the token/component
+catalog and the current rebuild status.
 
 ## State management
 
@@ -100,8 +114,9 @@ new provider instance):
   mirror, not a second view. `offline` only swaps the data source, reads
   images from the local file (`localFileFor`) instead of a server preview,
   and turns off what needs the server: selection and bulk actions, swipe
-  actions, sync badges, "+" (replaced by "Manage synced folders"), pick
-  mode. The two `FilesView`s are keyed in `buildAppTabView` so the
+  actions, per-item sync status icons, "+" (replaced by "Manage synced
+  folders"), pick mode. The two `FilesView`s are keyed in `buildAppTabView`
+  so the
   `IndexedStack` never hands one's State to the other.
 - [`OfflineController`](../../lib/providers/offline_controller.dart) — the
   Files tab's folder listing read from local storage instead of the
@@ -138,6 +153,42 @@ new provider instance):
   (shares/activity/versions/restore) — stateless, so they don't need a
   controller of their own.
 
+**Guardrail - the "empty list on first load" failure class.** This bug has
+recurred more than once, always the same shape: a tab's list is empty after
+login even though the account is fine, because the controller behind it
+never ran its initial fetch. The cause is a race, not a network bug:
+`addAccountActivatedListener`/`addAccountReadyListener` fire *once*, at the
+moment login is verified/ready, to whichever listeners are registered at
+that exact instant - and most per-domain controllers (`FilesController`,
+`PhotosController`, `FavoritesController`, `TrashController`,
+`SharesController`, `RecentController`) are lazy `ChangeNotifierProvider`s,
+only constructed (and so only registering their listener) whenever
+something first reads them. If that first read happens to land *after*
+the one-shot event already fired - e.g. `ConnectivityController`
+misreporting offline for its first couple of seconds after a cold Android
+start (see its own doc comment) collapses `main.dart`'s bottom nav to just
+the Offline tab, delaying construction of every other tab's controller
+until connectivity corrects itself and login has already finished
+verifying - that controller's listener registers too late and its initial
+fetch simply never happens. `SessionController.addAccountActivatedListener`/
+`addAccountReadyListener` now close this at the root: registering either
+one calls back **immediately** if the account is already in the state
+being subscribed to, not just on the next fresh event, so a late-registering
+controller always gets its initial fetch regardless of when its lazy
+`Provider` happens to be built. Some views (`FilesView`/`PhotosView`, not
+`FavoritesView` - see `FavoritesController`'s own doc comment) additionally
+carry a build-time fallback (`_requestedInitialLoad` et al.: reload if
+items are empty and not loading, once, after first build) predating this
+fix; they're now redundant but harmless, and not worth touching for
+cleanup alone. **Guardrail for new code:** any new network-fetching
+controller that needs a one-time fetch on login must register through
+`addAccountActivatedListener`/`addAccountReadyListener` in its constructor
+and rely on their catch-up behavior - don't reach for a per-view
+build-time "fetch if empty" fallback as the primary mechanism, since that
+pattern is exactly what let this bug keep recurring silently (three
+near-duplicate, slightly-diverging implementations, none of them fixing
+the actual race).
+
 `sessionGeneration` (on `SessionController`, read by every other
 controller) is incremented on every account switch so an in-flight fetch
 from the account just left can recognize it's stale and discard its result
@@ -175,15 +226,18 @@ directly, which call `NextcloudService`/`LoginFlowService`/`AccountStore`/
 - else `session.needsUnlock` → `LockScreenView` (login lock — see above)
 - else `MainShellView`
 
-`MainShellView` is a bottom-nav `IndexedStack` over up to 8 tabs — Files,
-Photos, Favorites, Activity, Trash, Shares, Recent, Offline — user-configurable
+`MainShellView` is an `IndexedStack` over up to 8 tabs — Files, Photos,
+Favorites, Activity, Trash, Shares, Recent, Offline — user-configurable
 (order, visibility up to `maxVisibleTabs`, default tab) via
 `AppTab`/`SettingsController` and rendered through `buildAppTabView`
 (`widgets/app_tab_view_builder.dart`). `maxVisibleTabs` (5) is less than the
 total tab count, and `SettingsController._enforceMaxVisibleTabs` already
 auto-hides overflow on load (fresh install, or - as when Favorites was
 added - an existing saved tab order from before a new tab existed), so
-adding a tab to the `AppTab` enum needs no extra migration.
+adding a tab to the `AppTab` enum needs no extra migration. Only the (up
+to) 5 pinned tabs (`settings.visibleTabs`) become bottom-nav/sidebar
+destinations; the rest sit in the "More" section of the drawer (mobile) or
+sidebar (desktop) - see below.
 Each tab keeps its own `ScrollController` (survives tab switches via
 `IndexedStack`'s built-but-hidden trees) and tapping the already-active tab
 scrolls it back to top (`tapTabToScrollTop` setting). `MainShellView` also
@@ -206,40 +260,109 @@ only two that make sense as external "choose a file" sources. The same
 override mechanism restricts the visible tabs to just Offline while
 `ConnectivityController.isOffline` - see `server.md`'s "Working offline"
 section for the full story, including why session restore itself has to
-avoid making a network request in that case. `MoreTabsButton` hides
-entirely in both cases (picking, offline) for the same reason - there's
-nothing it could usefully open.
+avoid making a network request in that case. The drawer/sidebar's "More"
+section is empty in both cases (picking, offline) for the same reason -
+there's nothing useful in it to switch to - and the mobile drawer doesn't
+open at all while picking (`Scaffold.drawer` is null).
 `MainShellView` also fires a one-time notification-permission prompt on
 its first mount (`_maybeRequestNotificationPermission`, gated by a plain
 `shared_preferences` flag so it only ever asks once, not on every
-launch): a plain-language `AlertDialog` explaining why Noo wants it
-(upload/download progress notifications - see `ShareUploadService.kt`/
-`DownloadService.kt`) before the OS's own `permission_handler`-driven
-`Permission.notification.request()`, since the bare system prompt gives
-no context on its own.
+launch): a plain-language dialog (`showNooDialog`, two `NooButton`s)
+explaining why Noo wants it (upload/download progress notifications - see
+`ShareUploadService.kt`/`DownloadService.kt`) before the OS's own
+`permission_handler`-driven `Permission.notification.request()`, since the
+bare system prompt gives no context on its own.
 
-`FloatingBottomNavBar` (`widgets/floating_bottom_bar.dart`) wraps its
-pill's item row in a horizontal `SingleChildScrollView` rather than a
-plain `Row`, so a wide selected-item label plus several icon-only tabs
-scrolls instead of overflowing on narrower screens.
+`MainShellView` builds its chrome from the Noo nav kit
+(`widgets/noo/nav/`) and switches between two layouts on
+`NooLayout.isDesktop` (width >= 900dp *and* shortest side >= 600dp, so a
+phone in landscape keeps the mobile layout and only tablet-class windows get
+the sidebar):
 
-All eight tabs, plus `ShareUploadView` (the share-to-upload destination
-picker, pushed rather than a tab - see below), share
-[`SyncedHeaderScaffold`](../../lib/widgets/synced_header_scaffold.dart) — a
+- **Mobile:** `AppTopBar` (`widgets/app_top_bar.dart`) wraps `NooTopBar`
+  for *every* tab (previously only Files had shell-level top chrome, with
+  the rest building their own via `SyncedHeaderScaffold`) - iOS gets a
+  large title, an inline search field, a `plus` action on Files only (no
+  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. 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). `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
+  `IndexedStack`, both built inline in `main.dart` rather than as separate
+  widgets.
+
+Both layouts share one detail: tapping a hidden ("More") tab calls
+`SettingsController.requestTab` - the same one-shot request
+`SearchView`/`FavoritesView`/`ShareUploadView` already use to jump the
+shell to a tab from outside it - instead of pushing that tab as its own
+screen. `MainShellView` then shows it as the active tab (still just an
+entry in the `IndexedStack`) with no bottom-bar/sidebar destination
+highlighted, since it isn't one of the pinned five, until the user taps a
+pinned or another "More" tab. `widgets/shell/shell_common.dart` holds the
+pieces both layouts share: account/storage formatting, `openSettings`/
+`openSearch`, `showAccountSwitcher` (the saved-accounts list behind the
+drawer's chevron and the sidebar's account card - a sheet on mobile, a
+dialog on desktop), `ShellAvatarButton` and `ShellSearchLauncher`.
+
+All eight tabs used to share
+[`SyncedHeaderScaffold`](../../lib/widgets/synced_header_scaffold.dart) - a
 `CustomScrollView` with a pull-down "sync status" header (Google
 Photos-style) and a classic Material refresh spinner shown during a
-pull-triggered sync. `ShareUploadView` mirrors the Files tab's own
-controls-row/breadcrumbs sticky header almost exactly, so arriving via
-another app's "Share to..." sheet still lands on the same top chrome
-instead of a plain `AppBar` - its `actions` are `[ProfileAvatarButton()]`
-only (no `MoreTabsButton`: there's nowhere useful for it to go mid-upload,
-since jumping to another tab would abandon the destination picker);
-backing out is the system back gesture/button, not a bespoke close icon in
-the app bar. Its bottom action - "Upload to
-{folder}" - and the uploading-file-name summary above it (single line,
-auto-scrolling via `MarqueeTitle` if it doesn't fit) live together in one
-rounded-top, elevated `Material` bar as `bottomNavigationBar`, reading as a
-sheet peeking up from the bottom edge rather than a plain flat bar.
+pull-triggered sync. Now that every tab is rebuilt on Noo, each renders its
+own content directly in a plain `RefreshIndicator` + `CustomScrollView`
+instead (`ColoredBox(colors.bg)` background, no shared header widget);
+device-sync status shows per-row (`NooFileRow`/`NooFileTableRow`'s
+`NooStatusIcon`s) or in the Offline tab's `NooSummaryCard`, not a shared
+pinned chip. `SyncedHeaderScaffold` is now unused - the last two screens on
+it, `ShareUploadView` (the share-to-upload destination picker, pushed
+rather than a tab - see below) and `MoveCopyDestinationPicker`, are
+rebuilt too: both are a `Scaffold` with a `NooTopBar`+`NooTopBarBack`
+(mobile) / `NooToolbar` (desktop) top bar, a noo-styled
+[`Breadcrumbs`](../../lib/widgets/breadcrumbs.dart) row + folder list
+(`NooFileRow` mobile, `NooFileTableRow` desktop - both pickers only ever
+browse *folders*, so the old dimmed-but-visible file rows are gone; a
+`RefreshIndicator`+`CustomScrollView`) for a body, and a `colors.surface`
+bottom bar with a top `line` (no more rounded-top elevated `Material`
+sheet) holding the primary CTA. `ShareUploadView` is pushed from outside
+`MainShellView` (a cold share-intent launch, or Files' "+" → "Upload
+file"), so it builds its own top bar rather than relying on the shell's -
+its `actions` are `[ShellAvatarButton()]` only (no `MoreTabsButton`:
+there's nowhere useful for it to go mid-upload, since jumping to another
+tab would abandon the destination picker); `ShellAvatarButton` is the same
+tap-to-Settings/swipe-to-cycle-accounts widget the shell itself uses, and a
+straight replacement for the old `ProfileAvatarButton` (now unused
+anywhere, since this was its last call site). Its bottom bar holds the
+uploading-file-name summary (single line, auto-scrolling via
+`MarqueeTitle` if it doesn't fit) above the "Upload to {folder}" CTA.
 [`MarqueeTitle`](../../lib/widgets/marquee_title.dart) (`package:marquee`) is
 shared with `FileViewerScreen`'s title - falls back to a plain ellipsized
 `Text` when the content already fits, so short text never marquees.
@@ -259,16 +382,32 @@ no prior browsing session to preserve. The Move/Copy picker is pushed
 *while the user is actively browsing a specific Files-tab folder*, so
 reusing the shared state would strand that folder's `pathStack` under it;
 its local state means popping back always lands the user exactly where
-they were, untouched.
-`SearchView`, `AccountView` (Settings), the file-details sheet, and the
-share sheet are pushed on top via
-`Navigator`/`showModalBottomSheet`/`showGradualBottomSheet` rather than
-being tabs. `ProfileAvatarButton` (top-right on every tab) opens Settings on
-tap and cycles between saved accounts on a vertical swipe.
+they were, untouched. Unlike `ShareUploadView`, it keeps `MoreTabsButton`
+in its top bar: that button pushes a hidden tab as its own stacked screen
+rather than jumping the shell there, so it doesn't abandon this picker the
+way jumping tabs would. Its bottom bar shows a "Moving/Copying N item(s)"
+summary line (replaced by a danger-colored warning when the current folder
+is an invalid destination) above a "Move here"/"Copy here" CTA - the
+per-item conflict follow-up, if any, is
+[`MoveCopyConflictSheet`](../../lib/widgets/move_copy_conflict_sheet.dart).
+`SearchView`, `AccountView` (Settings), the file-details sheet
+(`DetailsSheet`), and the share sheet (`ShareSheet`) are pushed on top via
+`Navigator`/`showNooSheet`/`showNooDialog` rather than being tabs (the two
+per-item sheets pick between the mobile sheet and the desktop dialog via
+`NooLayout.isDesktop`, same as every other overlay in the app;
+`showGradualBottomSheet`, the custom drag-to-resize sheet they used before,
+has no remaining callers). On mobile, `ShellAvatarButton`
+(`widgets/shell/shell_common.dart`,
+shown in `AppTopBar`'s trailing actions on every tab, and reused directly by
+`ShareUploadView`) opens Settings on tap and cycles between saved accounts
+on a vertical swipe. Desktop has no avatar in the
+toolbar; `NooSidebarAccount`'s account card opens the full switcher instead
+(`showAccountSwitcher`, the same one behind the mobile drawer's chevron).
 
-Files and Photos (the two tabs with multi-select) pass their selection
-toolbar into `SyncedHeaderScaffold`'s `selectionBar` param rather than
-rendering it as a second sliver app bar inside their own content: while
-non-null, it fully takes over the pinned top bar in place of the
-sync-status chip/`actions`/pull-to-reveal quota panel, so selecting reads
-as replacing the whole top chrome rather than adding a strip beneath it.
+Files and Photos (the two tabs with multi-select) render their selection
+bar as a `pinned: true` sliver at the top of their own `CustomScrollView`,
+swapped in for the controls row/type-chips row while `_isSelecting` -
+selecting reads as replacing that row in place, not adding a strip
+beneath it. (An earlier version of this routed the selection bar through
+`SyncedHeaderScaffold`'s `selectionBar` param; that's gone along with the
+scaffold itself in these two tabs.)

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

@@ -0,0 +1,454 @@
+# Noo Design System
+
+Noo is a Nextcloud client for iOS, Android, macOS and Windows. ("Noo" is a placeholder name.)
+Its visual language is warm neutrals with one violet accent, flat surfaces, pill-shaped controls, and no gradients.
+
+**Platform rule:** keep one visual language everywhere. Adapt only the navigation chrome (status bar, top bar, bottom bar, window controls) to each platform. Content components look the same on every platform.
+
+Reference files in this project:
+- `Noo Screens.dc.html` has every screen on every platform, in light and dark.
+- `Noo Design System.dc.html` is the visual component sheet.
+- `noo-kit.js` holds the tokens (`TH`), the icon set (`SVG`/`ic`), file-type mapping (`KIND`) and mock data.
+- `Mobile Screen.dc.html` and `Desktop Screen.dc.html` are the reference builds for each screen.
+- [Noo — Missing Screens](https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4) is a live design canvas (Claude Design, not a static file in this repo) covering pieces this doc originally had no recipe for: Media viewer, Search, the Upload/Move/Copy destination picker, the Details sheet's tab switch, and the Selection action bar (mobile + desktop). It has both an iOS row (built first, ready for later) and an Android row (built to match right now) - same content, chrome adapted per the platform rule above. §4 below is the written-up version of what's approved there; go back to the canvas for pixel-level layout, not just the summary.
+
+---
+
+## 1. Tokens
+
+### 1.1 Color (semantic). Use these names in code.
+
+| Token | Role | Light | Dark |
+|---|---|---|---|
+| `bg` | App background, desktop sidebar | `#F3EFE6` warm off-white | `#0E0D0B` |
+| `surface` (`sf`) | Cards, rows, bars, sheets, desktop main pane | `#FFFFFF` | `#25241F` |
+| `surface-2` (`sf2`) | Inputs, inset panels, secondary buttons | `#F6F5F2` | `#3D3C38` |
+| `surface-3` (`sf3`) | Progress tracks, toggle off, grabbers | `#EAE8E2` | `#5A5852` |
+| `line` (`ln`) | Dividers, 1px borders | `#EAE8E2` | `#3D3C38` |
+| `fg-1` | Primary text | `#0E0D0B` | `#F3EFE6` |
+| `fg-2` | Secondary text, idle icons | `#5A5852` | `#BDBAB1` |
+| `fg-3` | Meta text, placeholders, trailing icons | `#7C7A72` | `#9E9B92` |
+| `accent` (`ac`) | Primary fills (buttons, FAB, toggle on, progress) | `#8D0DE3` | `#8D0DE3` |
+| `accent-text` (`act`) | Accent text and icons, active nav | `#8D0DE3` | `#CBA5FD` |
+| `accent-soft` (`acs`) | Selected and active backgrounds, tonal buttons | `#ECDFFF` | `#2F0454` |
+| `danger` / `danger-soft` | Destructive text / bg | `#A8202A` / `#FDE7E7` | `#F49E9E` / `#560F18` |
+| `danger-fill` | Swipe-delete background (white text) | `#A8202A` | `#A8202A` |
+| `success` / `success-soft` | Synced, connected | `#3E7A23` / `#EAF5DF` | `#B7DD9F` / `#1E3F10` |
+| `warning` / `warning-soft` | Video file type | `#8C5A0E` / `#FBEFD0` | `#F0C26C` / `#4A3208` |
+| `info` / `info-soft` | Docs, images | `#2940A8` / `#E6ECFE` | `#B6C3FB` / `#1C2B73` |
+| `scrim` | Behind sheets, drawers, dialogs | `rgba(14,13,11,.45)` | `rgba(0,0,0,.6)` |
+
+Rules:
+- Text on `accent` is always `#FFFFFF`. Accent-colored text uses `accent-text`, never `accent` in dark mode.
+- On-color text always uses the matching pair: `accent-text` on `accent-soft`, `danger` on `danger-soft`, and so on.
+- Don't use gradients. Don't add new colors. Avatar and photo placeholder fills use the secondary palette: `#8DCDE2 #96B0FD #E5D8BD #EEEDB3 #DA9AC7 #A7D296 #E9A6A7 #85D1BD #CBA5FD`, always with `#0E0D0B` text.
+
+### 1.2 File-type tiles (`KIND`)
+| Kind | Background | Icon color | Lucide icon |
+|---|---|---|---|
+| folder | accent-soft | accent-text | `folder` |
+| pdf | danger-soft | danger | `file-text` |
+| doc / text | info-soft | info | `file-text` |
+| sheet | success-soft | success | `sheet` |
+| video | warning-soft | warning | `film` |
+| image | info-soft | info | `image` |
+| archive | surface-3 | fg-2 | `file-archive` |
+
+Tile sizes: 40px/r12 for mobile rows, 30px/r9 for desktop rows, 44px/r12 for the share header, 32px/r10 for activity. The icon is half the tile size (20, 16, 24, 16).
+
+### 1.3 Typography
+Fonts (Google Fonts): **Schibsted Grotesk** for headings (weights 500/600) and **Instrument Sans** for UI (weights 400/500/600). Load them with `https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap`. Don't use italics, all-caps or wide tracking.
+
+| Style | Font | Size / line-height | Tracking | Use |
+|---|---|---|---|---|
+| Large title | Schibsted 600 | 34 / 0.9 | −3% | iOS large title |
+| Stat | Schibsted 600 | 32 (mobile) · 28 (desktop) / 0.9 | −3% | Offline GB, counters |
+| Title | Schibsted 500 | 22 / 1 | −2% | Android top bar, desktop toolbar |
+| Card title | Schibsted 500 | 17–20 / 1 | −2% | Settings cards, sheet sections, account name |
+| Group heading | Schibsted 500 | 18 / 1 | −2% | Photos month |
+| Body L | Instrument 400/500 | 16 / 1.2 | 0 | Mobile row title, settings label |
+| Body | Instrument 400/500 | 14–15 / 1.3 | 0 | Desktop rows, activity text, banners |
+| Label | Instrument 600 | 13 / 1 | 0 | Section labels (fg-2), chips, table headers (12, fg-3) |
+| Meta | Instrument 400 | 13 (mobile) · 12–13 (desktop) / 1.2 | 0 | Size · date, subtitles (fg-3) |
+| Nav label | Instrument 500 / 600 (active) | 12 Android · 10 iOS | 0 | Bottom bars |
+| Button | Instrument 600 | 14–16 / 1 | 0 | All buttons |
+| Mono | ui-monospace 400 | 13–14 | 0 | Share URLs, local paths |
+
+### 1.4 Space, radius, elevation, motion
+- **Spacing** uses a 4px base: 4, 8, 12, 14, 16, 20, 24, 32. Mobile screen gutter is **12px** (cards) and 16px (bars). Desktop content gutter is **24px**.
+- **Radius:**
+  - pills (`999px`) for every button, chip, segmented control, toggle, search field and badge
+  - 20px for cards and grouped lists
+  - 18px for grid cards and stat cards
+  - 14px for inputs and inset panels
+  - 12px for desktop sidebar items and selected table rows
+  - 28px for the sheet top and drawer edge
+  - 24px for desktop dialogs
+  - screen corners are 48 on iOS and 36 on Android
+- **Elevation:** product UI is flat, with no shadows on buttons or cards. The only shadow is `0 24px 48px rgba(30,0,47,.14)`, and only on floating desktop dialogs. Separate things by surface color, not by shadow.
+- **Motion:** use `cubic-bezier(.7,0,.15,1)` with durations of 180, 280 and 480ms. Nothing bounces. Pressing a button scales it to 0.98.
+
+### 1.5 Icons
+Use **Lucide** (pinned to `lucide-static@0.460.0`) at a 1.8 stroke. Sizes are 14, 16, 18, 20, 24 and 32. Icons render in the current text color. Tab icons: Files `folder`, Photos `images`, Favorites `star`, Offline `hard-drive-download`, Shares `share-2`, Recent `clock`, Activity `activity`, Trash `trash-2`, Settings `settings`.
+
+---
+
+## 2. Components
+
+**Button**
+- Always a pill. Heights: 52 (sheet CTA), 44 (mobile card), 40 (inline in a field), 36 (desktop toolbar), 28–32 (compact).
+- Variants:
+  - *Primary*: accent fill, white text.
+  - *Tonal*: accent-soft fill, accent-text.
+  - *Secondary*: surface-2 fill, fg-1.
+  - *Danger*: danger-soft fill, danger text.
+  - *Outline*: 1.5px surface-3 border.
+- An icon goes on the left, with a 6–10px gap.
+
+**FAB** (Android only)
+- 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 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.
+- Idle: surface fill on mobile, or a 1px line border on desktop.
+- Selected: accent-soft fill with accent-text.
+- A trailing `chevron-down` means it opens a menu. A trailing `x` means it's an active filter.
+
+**Segmented control**
+- A pill track (surface or surface-2) with 3px padding.
+- The active segment gets an accent-soft fill with accent-text at weight 600. Idle segments use fg-2 at weight 500.
+- Use it for the List/Grid toggle (icons only, 36×28), Shares scope, Theme, and default view.
+
+**Toggle**
+- 48×28 on mobile, 44×26 on desktop, with a white knob 3px inset.
+- On: accent track. Off: surface-3 track. It looks the same on every platform.
+
+**Search field**
+- A pill (radius 12 on the iOS inline field), 36–38px tall.
+- Surface fill on bg, or surface-2 fill on surface. Leading search icon and placeholder in fg-3.
+- Placement:
+  - iOS: below the large title.
+  - Android: an icon in the top bar that expands.
+  - Desktop: 260px wide in the toolbar.
+
+**Grouped list (card)**
+- A surface card with radius 20 and 1px gaps showing `line`, which draws the dividers.
+- An optional group label above it: 13/600 in fg-2, inset 8px.
+- Each group is 18px from the next.
+
+**File row**
+- Mobile: 64px tall.
+  - Left to right: tile 40, then a column with the name (16/500, one line, ellipsis) above a meta line (13, fg-3), then optional trailing icons, then the overflow menu (`ellipsis` on iOS, `ellipsis-vertical` on Android).
+  - The meta line is `[status icon][shared icon] size · modified`.
+  - A favorite shows an accent-text star before the overflow menu.
+  - Trailing icon by screen: star in Favorites, `rotate-ccw` in Trash.
+- Desktop: a table row 52px tall.
+  - Columns are `minmax(0,1fr) 180px 160px 120px`: Name, two data columns, then status icons and the overflow menu.
+  - The header row is 36px, 12/600 in fg-3, with a sort arrow on the active column.
+  - A selected row gets an accent-soft fill with radius 12.
+
+**Status icons (14px)**
+- Synced: `circle-check` in success.
+- Syncing: `refresh-cw` in accent-text.
+- Error: `circle-alert` in danger, and the meta text says what to do ("Couldn't sync · Tap to retry").
+- Shared: `users` in fg-3.
+
+**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
+multi-select)
+- Replaces that screen's own sort/filter row in place while selecting -
+  never a second bar stacked underneath it, and never the shell's own top
+  bar/toolbar, which don't change for selection.
+- A `surface` card, radius 20, in the screen's usual gutter (12 mobile, 24
+  desktop) - selection reads as a distinct mode, not a bare row of buttons
+  on `bg`.
+- Left to right: a 36px `surface-2` close circle (`x`), then "N selected"
+  (17/500), then the bulk actions, trailing-anchored. Fixed width, never
+  scrolls: only the first few actions show inline (3 on mobile, 4 on
+  desktop - there can be up to 9: favorite, share, download, delete, copy,
+  move, rename, sync, details); the rest sit behind a trailing "More"
+  button that opens the same grouped-list sheet a file row's own overflow
+  menu (`ellipsis`/`ellipsis-vertical`) already uses. Which actions land in
+  the inline slots vs. "More" is the user's own priority order (Settings
+  → Action bar, §4's 9-part list), not a fixed per-kind assignment.
+- Mobile: inline actions are plain 20px accent-text icons, no fill; "More"
+  is the same 40px `NooOverflowButton` treatment (`ellipsis`/
+  `ellipsis-vertical`, fg-3) file rows use for their own overflow menu.
+- Desktop: inline actions are labelled tonal pills (accent-soft/
+  accent-text), danger-soft/danger for the one labelled "Delete" - desktop
+  has the room for labels, and the app's other toolbar actions are already
+  labelled buttons rather than bare icons. "More" is a secondary pill
+  (surface-2/fg-1) with a trailing `chevron-down`, so it reads as "opens a
+  menu" rather than another bulk action.
+
+**Grid card**
+- Surface fill, radius 18. Mobile uses 2 columns with a 10px gap; desktop uses 5 columns with a 16px gap.
+- The thumbnail area is 104–118px tall, filled with the file-type soft color and a 32px icon. Real thumbnails replace it when they exist.
+- Below it: the name (14/500) with an overflow menu, then the meta (12).
+
+**Photo grid**
+- Square tiles with a 2px gap on mobile (3 columns, edge to edge) and a 4px gap on desktop (8 columns).
+- Tiles are grouped by month, with the group heading on the left and the count on the right.
+- Videos get a badge in the bottom-right: a `play` icon and the duration on `rgba(14,13,11,.7)`.
+
+**Activity item**
+- Avatar 36 (initials on a secondary-palette color), then a sentence: **Actor** verb **object** tail.
+- Time in meta style. The file tile (32) goes on the right.
+
+**Banner / summary card**
+- A surface card with radius 20 (surface-2 on desktop) and padding of 14–18.
+- The action sits on its own row below the description text, not squeezed
+  onto the same line - a long retention message/caption and the action
+  used to fight for the same row's width.
+- Trash: an info icon, the retention text, then "Empty trash" as a
+  right-aligned danger text button on the row below.
+- Offline: the stat and caption, then a "Sync now" tonal button on the row
+  below, then the 6px progress bar and the last-sync meta.
+
+**Progress bar**
+- 6px tall pill. Surface-3 track with an accent fill.
+- Used for storage quota, cache use and the offline limit.
+
+**Avatar**
+- A circle with initials, weight 600, at 0.36× the avatar size.
+- Sizes: 30–32 in bars, 36 in lists, 48 in the drawer, 52–56 on the account card.
+- The current user gets an accent-soft fill with accent-text.
+
+**Settings row**
+- 52px tall, or 60px with a subtitle.
+- Left to right: an optional 20px icon in fg-2, then the label (16) with an optional subtitle (13, fg-3), then a trailing control.
+- Trailing control is one of: a toggle, a value in fg-3 with a chevron (desktop uses a 32px dropdown with radius 10), a segmented control, a pill button, or a status badge.
+- A destructive row uses danger text.
+- Exception: a segmented control with 3+ labelled segments (Theme's
+  System/Light/Dark) gets its own row below the label instead of a
+  trailing slot - three icon+label segments crammed in next to the label
+  left each one too cramped to read. Label row, then the full-width
+  segmented control on the row below, both on one continuous surface (no
+  divider between them) - same shape the sort sheet's Ascending/Descending
+  control and Photos' filter-sheet type control already use.
+
+**Tab order row**
+- A grip icon (`grip-vertical`, fg-3), the tab icon, the label, then a pin button: a 36px circle (30 on desktop) that is accent-soft with `pin` when pinned, or surface-2 with `pin-off` when not.
+- Allow at most 5 pinned tabs.
+
+**Sheet** (mobile)
+- Surface fill, radius 28 at the top. A 36×5 grabber in surface-3. Padding 20, with 22px between sections.
+- It sits on a scrim.
+
+**Dialog** (desktop)
+- 540px wide, radius 24, padding 24, sitting on a scrim.
+- Header: file tile, title "Share "<name>"", and a close button (32px circle, surface-2).
+
+**Drawer** (mobile)
+- 316px wide, surface fill, radius 28 on the trailing edge, on a scrim.
+- Top to bottom:
+  - account block with a chevron to switch accounts
+  - storage bar
+  - "More" label, then the unpinned tabs as 52px pill items (icon 24, label 16/500, trailing count)
+  - Settings
+  - an "Edit tabs" link at the bottom, in accent-text
+
+---
+
+## 3. Navigation & platform mapping
+
+**Tabs** (the user sets the order): Files, Photos, Favorites, Offline, Shares, Recent, Activity, Trash. Settings is always separate.
+
+### Mobile
+
+Mobile always has **5 pinned tabs in the bottom bar**. The rest go in the drawer, which opens from the top-left menu icon.
+
+| 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, 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. 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. |
+| 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" |
+
+### Desktop
+
+Desktop has a 256px sidebar in `bg` and a main pane in `surface`, separated by a 1px line.
+
+**Sidebar**, top to bottom:
+- account switcher card
+- the 5 pinned tabs
+- a divider
+- the remaining tabs
+- a spacer
+- the storage meter
+- Settings
+
+Sidebar items are 38px tall with radius 12, an 18px icon and a 14/500 label. The active item gets an accent-soft fill with accent-text at weight 600. Counts sit on the right: Trash 12, Offline errors, new shares.
+
+**Toolbar** is 64px tall:
+- the title (22px Schibsted Grotesk), with a breadcrumb in Files
+- a spacer
+- the search field
+- context actions: List/Grid toggle and Upload in Files, Upload in Photos, Empty trash in Trash, Sync now in Offline
+
+| Element | macOS | Windows |
+|---|---|---|
+| Window | Radius 12 | Radius 8 |
+| Controls | Traffic lights at the top of the sidebar | 40px title bar with the app mark and name; minimize, maximize and close buttons 46px wide |
+| Navigation | Back and forward chevrons at the start of the toolbar | Not shown in the toolbar |
+| Biometric | "Touch ID" | "Windows Hello" |
+| Local path | `~/Noo/…` | `C:\Users\…\Noo` |
+| Swipe setting | "Trackpad swipe on a file" | "Touch swipe on a file" |
+
+---
+
+## 4. Screen recipes
+
+- **Files:**
+  - Toolbar: sort chip (`Name ↑`), type filter chip, List/Grid segmented toggle.
+  - Desktop adds Modified and Shared filter chips, an active-filter chip, and an item count.
+  - Content: a list, or a grid when the toggle is set.
+- **Photos:** a sort chip and a filter chip (mirroring Files' own controls
+  row - no List/Grid toggle, the grid is the only view). The type filter
+  (All, Photos, Videos - Camera isn't backed by real data, see the view's
+  doc comment) lives inside the filter sheet as a full-width segmented
+  control, the same "label, then the control on its own row below" shape
+  Settings' Theme row uses, not its own row of chips. Every icon (All,
+  Photos, Videos in the filter sheet; All, Files, Folders in Files' own
+  filter sheet, same treatment) always shows; only the *selected* segment
+  also shows its label (`NooSegmentedControl`'s `labelOnlySelected`) - the
+  same List/Grid-toggle-style pill both screens' filter sheets use, not
+  Files' old checkmark list or Photos' own always-labelled track. Then the
+  photo grid grouped by month.
+- **Favorites:** a file list with a star as the trailing icon.
+- **Offline:** a summary card (or 4 stat cards on desktop), then a list whose rows show sync status icons and status meta.
+- **Shares:** a segmented control (With you, By you, Links), then a list. The
+  meta reads "Owner · Permission". No per-row overflow menu on any of the
+  three scopes - tapping a row (file or folder) opens the full Share sheet
+  for that item (fetched fresh via `FilesController.fetchItemAtPath`, since
+  a share only carries enough metadata for its own row), the same sheet
+  Files/Photos open from their own Share action - that's already where
+  copying a link or removing access lives, so a second, row-local menu here
+  was redundant.
+- **Recent:** a list grouped into Today, Yesterday and This week. The meta is the action plus the location.
+- **Activity:** the feed grouped by day. Desktop limits it to 760px wide.
+- **Trash:** a retention banner, then a list. Mobile rows get a restore icon; desktop rows get a tonal "Restore" pill.
+- **Settings:** sections in this order:
+  1. Account card
+  2. Accounts (list, then "Add account")
+  3. Security
+  4. File sync
+  5. Files cache
+  6. Appearance
+  7. Tabs
+  8. Action bar - a reorder-only list (no pin/hide, unlike Tabs): the
+     priority order for the Selection action bar's bulk actions (favorite,
+     share, download, delete, copy, move, rename, sync, details) - the
+     first few (3 mobile / 4 desktop) land in the bar's fixed inline
+     slots, the rest sit behind "More". See §2 "Selection action bar".
+  9. Swipe on a file
+
+  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 ▾").
+  3. **Share link:** a toggle, then the URL field in mono with a primary "Copy link" button, then option chips (permission, expiry, password, allow download).
+  4. **Send file directly:** an outline button, with a caption saying that link settings don't apply.
+- **Details sheet:** header (file tile, name, size · folder, close) as in the
+  Share sheet above, then a segmented control switching Info/Versions/Activity
+  in place below it - there's no separate tab-strip component, so the
+  segmented control (already used for List/Grid and the Shares scope) is the
+  one that does this job too. Info is a flat label/value list (Size, Type,
+  Location, Modified, Created, ...). Versions and Activity reuse their own
+  row/feed treatment. Same on every platform - this sheet has no iOS/Android
+  split.
+- **Media viewer** (the full-screen photo/video viewer): the stage is `bg`,
+  following the app's own theme rather than a fixed black - a black stage
+  in light mode read as jarringly out of place. A translucent, blurred top
+  bar (back, filename, meta) and bottom bar float over the media in a
+  `surface`-tinted panel (also theme-following, at a higher opacity than a
+  typical blur so it stays legible over arbitrary photo/video brightness
+  underneath - icons/text are `fg1`, matching); this is the one deliberate
+  exception to "no blur" in product UI, since it's chrome over photo/video
+  content, not over the app's own surfaces. A short edge gradient outside
+  each panel (toward `surface`, not a fixed black) extends that same
+  contrast a little past the panel's hard edge. Both bars' background
+  extends edge-to-edge behind the status bar/gesture area, with only their
+  content padded clear of it. Back is a plain arrow (`arrow-left`), not the iOS
+  chevron+label pushed-screen pattern - platform split still to do. The
+  bottom bar holds every action in one row (share, favorite, open
+  externally, download, delete, details) on every platform; don't add a
+  top-bar overflow menu for the same actions. Video adds a transport row
+  above the action row: time · seek bar · time, then play/pause and mute
+  centered below it. A photo can be pinch-zoomed; while zoomed in, the
+  gallery's own left/right swipe between items is disabled so panning
+  around the zoomed photo doesn't also swipe to the next one - it comes
+  back the moment the photo returns to its un-zoomed scale. A PDF preview
+  stays at its fit-width scale as its floor rather than letting the user
+  zoom out past it, since going below 1.0 scale removes any limit on how
+  far the page can be panned, including off-screen entirely.
+- **Search:** pushed from the shell's search entry point (`menu`/`search`
+  icon in the top bar, or the inline field below an iOS large title -
+  DESIGN_SYSTEM §2 "Search field" placement). The destination screen is one
+  shared recipe for both platforms: back arrow + the pill `NooSearchField`
+  (not the inset-panel text-field shape - a search field is always the pill,
+  except the one named iOS-inline exception) taking over the top row,
+  autofocus, a clear button once there's a query. Below it: a file list
+  (mobile rows / desktop table, same as Files), or a centered icon + short
+  sentence-case message for the empty ("Search your files") and no-results
+  states.
+- **Upload / Move / Copy destination picker:** a pushed screen (outside the
+  tab shell, so it carries its own complete top bar) titled "Upload to" /
+  "Move to" / "Copy to". Back arrow (Android) or "Cancel" text (iOS) leading,
+  no trailing action. The same `FilesControlsRow` (sort chip, filter chip,
+  List/Grid toggle right-anchored) Files itself uses, then a breadcrumb row,
+  then a folder-only list/grid (no files: this screen only browses folders)
+  using the standard file row/tile/grid-card at the folder kind. Bottom bar:
+  a centered meta line ("Moving 3 items") above a full-width 52px primary
+  CTA ("Upload here" / "Move here" / "Copy here") - a count, never a
+  filename, even for a single item.
+
+---
+
+## 5. Copy
+- Use plain, active and short sentences, under 15 words. Say "you".
+- Name the problem and the fix: "Couldn't sync · Tap to retry", not "An error occurred".
+- Use sentence case everywhere and no all-caps. Use a middle dot ( · ) to separate meta values.
+- Don't use emoji in the product UI.

.claude/context/design-system/Desktop Screen.dc.html

@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<script src="noo-kit.js"></script>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
+<style>
+body{margin:0}
+a{color:#8D0DE3;text-decoration:none}
+a:hover{color:#6E08B3}
+</style>
+</helmet>
+<sc-if value="{{ ready }}" hint-placeholder-val="{{ false }}">
+<div style="{{ root }}">
+
+<sc-if value="{{ win }}">
+<div style="height:40px;flex:none;display:flex;align-items:center;background:var(--bg);color:var(--fg2)">
+<div style="display:flex;align-items:center;gap:10px;padding:0 16px;flex:1;font:400 12px/1 var(--ft)"><div style="width:16px;height:16px;border-radius:4px;background:var(--ac)"></div>Noo</div>
+<div style="width:46px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ i16.minus }}"></span></div>
+<div style="width:46px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ i14.square }}"></span></div>
+<div style="width:46px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ i16.x }}"></span></div>
+</div>
+</sc-if>
+
+<div style="flex:1;min-height:0;display:flex">
+<div style="width:256px;flex:none;background:var(--bg);display:flex;flex-direction:column;padding:12px 12px 16px;box-sizing:border-box;gap:2px">
+<sc-if value="{{ mac }}">
+<div style="height:32px;display:flex;align-items:center;gap:8px;padding:0 8px 8px"><div style="width:12px;height:12px;border-radius:999px;background:#FF5F57"></div><div style="width:12px;height:12px;border-radius:999px;background:#FEBC2E"></div><div style="width:12px;height:12px;border-radius:999px;background:#28C840"></div></div>
+</sc-if>
+<div style="display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--sf);margin-bottom:14px">
+<div style="width:32px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft);flex:none">MR</div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px"><div style="font:600 14px/1 var(--ft)">Marina Rocha</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div>
+<span style="{{ chevG }}"></span>
+</div>
+<sc-for list="{{ navA }}" as="n" hint-placeholder-count="5">
+<sc-if value="{{ n.on }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft)"><span style="{{ n.ico }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft)">{{ n.count }}</div></div></sc-if>
+<sc-if value="{{ n.off }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;color:var(--fg1);font:500 14px/1 var(--ft)"><span style="{{ n.icoG }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft);color:var(--fg3)">{{ n.count }}</div></div></sc-if>
+</sc-for>
+<div style="height:1px;background:var(--ln);margin:8px 12px"></div>
+<sc-for list="{{ navB }}" as="n" hint-placeholder-count="3">
+<sc-if value="{{ n.on }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft)"><span style="{{ n.ico }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft)">{{ n.count }}</div></div></sc-if>
+<sc-if value="{{ n.off }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;color:var(--fg1);font:500 14px/1 var(--ft)"><span style="{{ n.icoG }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft);color:var(--fg3)">{{ n.count }}</div></div></sc-if>
+</sc-for>
+<div style="flex:1"></div>
+<div style="display:flex;flex-direction:column;gap:8px;padding:12px 12px 14px">
+<div style="display:flex;justify-content:space-between;font:400 12px/1 var(--ft);color:var(--fg2)"><span style="font-weight:500;color:var(--fg1)">Storage</span><span>38.2 of 100 GB</span></div>
+<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div>
+</div>
+<sc-if value="{{ setOn }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft)"><span style="{{ i18.settings }}"></span>Settings</div></sc-if>
+<sc-if value="{{ setOff }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;color:var(--fg1);font:500 14px/1 var(--ft)"><span style="{{ setIcoG }}"></span>Settings</div></sc-if>
+</div>
+
+<div style="flex:1;min-width:0;background:var(--sf);display:flex;flex-direction:column;position:relative;border-left:1px solid var(--ln)">
+<div style="height:64px;flex:none;display:flex;align-items:center;gap:12px;padding:0 20px 0 24px;border-bottom:1px solid var(--ln)">
+<sc-if value="{{ mac }}"><div style="display:flex;gap:4px;color:var(--fg3);margin-right:4px"><span style="{{ i20.chevL }}"></span><span style="{{ i20.chevR }}"></span></div></sc-if>
+<div style="display:flex;align-items:center;gap:8px;font:500 22px/1 var(--fd);letter-spacing:-0.02em">{{ title }}<sc-if value="{{ s.files }}"><span style="{{ chevG }}"></span><span style="font:400 15px/1 var(--ft);letter-spacing:0;color:var(--fg2);white-space:nowrap">All files</span></sc-if></div>
+<div style="flex:1"></div>
+<sc-if value="{{ notSettings }}"><div style="width:260px;height:36px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--fg3);font:400 14px/1 var(--ft)"><span style="{{ i16.search }}"></span>Search in {{ title }}</div></sc-if>
+<sc-if value="{{ s.files }}">
+<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="{{ segL }}"><span style="{{ i16.list }}"></span></div><div style="{{ segG }}"><span style="{{ i16.grid }}"></span></div></div>
+<div style="height:36px;padding:0 16px 0 12px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i18.plus }}"></span>Upload</div>
+</sc-if>
+<sc-if value="{{ s.photos }}"><div style="height:36px;padding:0 16px 0 12px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i18.upload }}"></span>Upload</div></sc-if>
+<sc-if value="{{ s.trash }}"><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.trash }}"></span>Empty trash</div></sc-if>
+<sc-if value="{{ s.offline }}"><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sync }}"></span>Sync now</div></sc-if>
+</div>
+
+<div style="flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0 24px">
+
+<sc-if value="{{ s.files }}">
+<div style="flex:none;display:flex;align-items:center;gap:8px;padding:14px 0 10px">
+<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.filter }}"></span>All types<span style="{{ i14.chevD }}"></span></div>
+<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap">Modified<span style="{{ i14.chevD }}"></span></div>
+<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap">Shared<span style="{{ i14.chevD }}"></span></div>
+<div style="height:32px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.offline }}"></span>Available offline<span style="{{ i14.x }}"></span></div>
+<div style="flex:1"></div>
+<div style="font:400 13px/1 var(--ft);color:var(--fg3)">10 items · 440 MB</div>
+</div>
+</sc-if>
+<sc-if value="{{ s.trash }}">
+<div style="flex:none;margin:16px 0 4px;padding:12px 16px;border-radius:14px;background:var(--sf2);display:flex;gap:10px;align-items:center;color:var(--fg2);font:400 14px/1.2 var(--ft)"><span style="{{ i18.info }}"></span>Items here are deleted for good after 30 days.</div>
+</sc-if>
+<sc-if value="{{ s.offline }}">
+<div style="flex:none;display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:12px;padding:18px 0 8px">
+<div style="padding:16px 18px;border-radius:18px;background:var(--sf2);display:flex;flex-direction:column;gap:10px"><div style="display:flex;justify-content:space-between;align-items:baseline"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em">2.4 GB</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">of 5 GB limit</div></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:48%;height:100%;background:var(--ac)"></div></div></div>
+<div style="padding:16px 18px;border-radius:18px;background:var(--sf2);display:flex;flex-direction:column;gap:8px"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em">142</div><div style="font:400 13px/1 var(--ft);color:var(--fg2)">Files up to date</div></div>
+<div style="padding:16px 18px;border-radius:18px;background:var(--sf2);display:flex;flex-direction:column;gap:8px"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--act)">6</div><div style="font:400 13px/1 var(--ft);color:var(--fg2)">Syncing now</div></div>
+<div style="padding:16px 18px;border-radius:18px;background:var(--dgs);display:flex;flex-direction:column;gap:8px"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--dg)">1</div><div style="font:400 13px/1 var(--ft);color:var(--dg)">Needs attention</div></div>
+</div>
+</sc-if>
+<sc-if value="{{ s.shares }}">
+<div style="flex:none;display:flex;padding:14px 0 8px"><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px">
+<div style="height:32px;padding:0 16px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">With you</div>
+<div style="height:32px;padding:0 16px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">By you</div>
+<div style="height:32px;padding:0 16px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Links</div>
+</div></div>
+</sc-if>
+
+<sc-if value="{{ showTable }}">
+<sc-for list="{{ groups }}" as="g" hint-placeholder-count="1">
+<sc-if value="{{ g.hasLabel }}"><div style="padding:18px 12px 6px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div></sc-if>
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 180px 160px 120px;align-items:center;height:36px;padding:0 12px;border-bottom:1px solid var(--ln);font:600 12px/1 var(--ft);color:var(--fg3)">
+<div style="display:flex;align-items:center;gap:4px">{{ c0 }}<sc-if value="{{ sortable }}"><span style="{{ i14.up }}"></span></sc-if></div><div>{{ c1 }}</div><div>{{ c2 }}</div><div></div>
+</div>
+<sc-for list="{{ g.rows }}" as="f" hint-placeholder-count="8">
+<div style="{{ f.rs }}">
+<div style="display:flex;align-items:center;gap:12px;min-width:0"><div style="{{ f.tile }}"><span style="{{ f.ico }}"></span></div><div style="font:500 14px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div></div>
+<div style="font:400 13px/1.2 var(--ft);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.a }}</div>
+<div style="display:flex;align-items:center;gap:6px;font:400 13px/1.2 var(--ft);color:var(--fg2);white-space:nowrap;overflow:hidden"><sc-if value="{{ f.bInline }}"><span style="{{ f.badge }}"></span></sc-if>{{ f.b }}</div>
+<div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--fg3)">
+<sc-if value="{{ f.bIcon }}"><span style="{{ f.badge }}"></span></sc-if>
+<sc-if value="{{ f.shared }}"><span style="{{ i16.users }}"></span></sc-if>
+<sc-if value="{{ f.fav }}"><span style="{{ starSm }}"></span></sc-if>
+<sc-if value="{{ restore }}"><div style="height:28px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.restore }}"></span>Restore</div></sc-if>
+<span style="{{ i18.moreH }}"></span>
+</div>
+</div>
+</sc-for>
+</sc-for>
+</sc-if>
+
+<sc-if value="{{ showGrid }}">
+<div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:6px">
+<sc-for list="{{ gridRows }}" as="f" hint-placeholder-count="10">
+<div style="border:1px solid var(--ln);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;background:var(--sf)">
+<div style="{{ f.thumb }}"><span style="{{ f.icoL }}"></span></div>
+<div style="padding:10px 10px 12px 14px;display:flex;flex-direction:column;gap:5px">
+<div style="display:flex;align-items:center;gap:4px"><div style="flex:1;min-width:0;font:500 14px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div><span style="{{ moreSm }}"></span></div>
+<div style="display:flex;align-items:center;gap:5px;font:400 12px/1.2 var(--ft);color:var(--fg3)"><sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if>{{ f.meta }}</div>
+</div>
+</div>
+</sc-for>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.photos }}">
+<div style="flex:none;display:flex;gap:8px;padding:14px 0 4px">
+<div style="height:32px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">All</div>
+<div style="height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;font:500 13px/1 var(--ft);white-space:nowrap">Photos</div>
+<div style="height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;font:500 13px/1 var(--ft);white-space:nowrap">Videos</div>
+<div style="height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.camera }}"></span>Camera uploads</div>
+</div>
+<sc-for list="{{ photoGroups }}" as="g" hint-placeholder-count="2">
+<div style="display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 10px"><div style="font:500 18px/1 var(--fd);letter-spacing:-0.02em">{{ g.label }}</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">{{ g.count }}</div></div>
+<div style="display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px">
+<sc-for list="{{ g.tiles }}" as="t" hint-placeholder-count="16">
+<div style="{{ t.s }}"><sc-if value="{{ t.vid }}"><div style="position:absolute;right:6px;bottom:6px;height:20px;padding:0 7px 0 5px;border-radius:999px;background:rgba(14,13,11,0.7);color:#FFFFFF;display:flex;align-items:center;gap:3px;font:600 11px/1 var(--ft)"><span style="{{ i14.play }}"></span>{{ t.dur }}</div></sc-if></div>
+</sc-for>
+</div>
+</sc-for>
+</sc-if>
+
+<sc-if value="{{ s.activity }}">
+<div style="max-width:760px;width:100%;display:flex;flex-direction:column">
+<sc-for list="{{ act }}" as="g" hint-placeholder-count="2">
+<div style="padding:20px 0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div>
+<sc-for list="{{ g.items }}" as="a" hint-placeholder-count="3">
+<div style="display:flex;gap:14px;padding:14px 0;align-items:center;border-bottom:1px solid var(--ln)">
+<div style="{{ a.av }}">{{ a.who }}</div>
+<div style="flex:1;min-width:0;font:400 14px/1.3 var(--ft)"><span style="font-weight:600">{{ a.name }}</span> {{ a.verb }} <span style="font-weight:600">{{ a.obj }}</span> {{ a.tail }}</div>
+<div style="{{ a.tile }}"><span style="{{ a.ico }}"></span></div>
+<div style="width:48px;text-align:right;font:400 13px/1 var(--ft);color:var(--fg3)">{{ a.time }}</div>
+</div>
+</sc-for>
+</sc-for>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.settings }}">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:20px 0;align-items:start">
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="padding:20px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column;gap:16px">
+<div style="display:flex;gap:14px;align-items:center"><div style="width:52px;height:52px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 18px/1 var(--ft);flex:none">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:5px"><div style="font:500 20px/1 var(--fd);letter-spacing:-0.02em">Marina Rocha</div><div style="font:400 14px/1 var(--ft);color:var(--fg2)">marina@rocha.family</div></div><div style="height:24px;padding:0 10px;border-radius:999px;background:var(--oks);color:var(--ok);display:flex;align-items:center;font:600 12px/1 var(--ft);white-space:nowrap">Connected</div></div>
+<div style="display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;font:400 14px/1.2 var(--ft)"><span style="color:var(--fg3)">Server</span><span>cloud.rocha.family</span><span style="color:var(--fg3)">Version</span><span>Nextcloud 30.0.2</span><span style="color:var(--fg3)">Storage</span><div style="display:flex;align-items:center;gap:10px"><div style="flex:1;height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div><span style="color:var(--fg2)">38.2 of 100 GB</span></div></div>
+<div style="display:flex;gap:8px"><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i14.external }}"></span>Manage on web</div><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i14.logout }}"></span>Log out</div></div>
+</div>
+<div style="padding:8px 20px 12px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Accounts</div>
+<div style="display:flex;align-items:center;gap:12px;height:56px;border-bottom:1px solid var(--ln)"><div style="width:32px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Marina Rocha</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div><span style="{{ checkA }}"></span></div>
+<div style="display:flex;align-items:center;gap:12px;height:56px;border-bottom:1px solid var(--ln)"><div style="width:32px;height:32px;border-radius:999px;background:#85D1BD;color:#0E0D0B;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Marina · Work</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">files.acme-studio.com</div></div><div style="font:600 13px/1 var(--ft);color:var(--act)">Switch</div></div>
+<div style="display:flex;align-items:center;gap:12px;height:48px;color:var(--act);font:600 14px/1 var(--ft)"><div style="width:32px;display:flex;justify-content:center"><span style="{{ i18.plus }}"></span></div>Add account</div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Security</div>
+<div style="display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid var(--ln)"><span style="{{ bioIco }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 14px/1.1 var(--ft)">{{ bioLabel }}</div><div style="font:400 12px/1.2 var(--ft);color:var(--fg3)">Needed every time you open Noo</div></div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.timer }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Lock after</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft)">5 minutes idle<span style="{{ i14.chevD }}"></span></div></div>
+</div>
+<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">File sync</div>
+<div style="display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid var(--ln)"><span style="{{ i18.folder }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 14px/1.1 var(--ft)">Local sync folder</div><div style="font:400 12px/1.2 var(--ft);color:var(--fg3);font-family:ui-monospace,Menlo,monospace">{{ syncPath }}</div></div><div style="height:32px;padding:0 12px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">Change</div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.sync }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Sync automatically</div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.download }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Download files on demand</div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.wifi }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Pause on metered networks</div><div style="width:44px;height:26px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
+</div>
+</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.settings2 }}">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:20px 0;align-items:start">
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Files cache</div>
+<div style="display:flex;flex-direction:column;gap:10px;padding:10px 0 14px;border-bottom:1px solid var(--ln)"><div style="display:flex;justify-content:space-between;font:400 14px/1 var(--ft)"><span>Cache in use</span><span style="color:var(--fg2)">1.2 of 2 GB</span></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:60%;height:100%;background:var(--ac)"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.database }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Cache limit</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft)">2 GB<span style="{{ i14.chevD }}"></span></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.trash }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Clear cached files</div><div style="height:32px;padding:0 14px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">Clear cache</div></div>
+</div>
+<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Appearance</div>
+<div style="display:flex;align-items:center;gap:14px;height:56px;border-bottom:1px solid var(--ln)"><span style="{{ i18.palette }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Theme</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:28px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">System</div><div style="height:28px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Light</div><div style="height:28px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Dark</div></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:56px;border-bottom:1px solid var(--ln)"><span style="{{ i18.grid }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Default file view</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:28px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.list }}"></span>List</div><div style="height:28px;padding:0 12px;display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--fg2)"><span style="{{ i14.grid }}"></span>Grid</div></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.hidden }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Show hidden files</div><div style="width:44px;height:26px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="padding:8px 20px 12px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="padding:12px 0 4px;display:flex;justify-content:space-between;align-items:baseline"><div style="font:500 17px/1 var(--fd);letter-spacing:-0.02em">Sidebar tabs</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">Drag to reorder</div></div>
+<div style="padding:4px 0 8px;font:400 12px/1.3 var(--ft);color:var(--fg3)">Pinned tabs show at the top of the sidebar, and in the bottom bar on mobile.</div>
+<sc-for list="{{ tabRows }}" as="t" hint-placeholder-count="8">
+<div style="display:flex;align-items:center;gap:12px;height:44px;border-bottom:1px solid var(--ln)"><span style="{{ gripS }}"></span><span style="{{ t.ico }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">{{ t.label }}</div><div style="{{ t.pinS }}"><span style="{{ t.pinI }}"></span></div></div>
+</sc-for>
+</div>
+<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">{{ swipeTitle }}</div>
+<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.swipe }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Swipe left</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--dg)"><span style="{{ i14.trash }}"></span>Delete<span style="{{ i14.chevD }}"></span></div></div>
+<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.swipe }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Swipe right</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--act)"><span style="{{ i14.star }}"></span>Favorite<span style="{{ i14.chevD }}"></span></div></div>
+</div>
+</div>
+</div>
+</sc-if>
+
+</div>
+
+<sc-if value="{{ share }}">
+<div style="position:absolute;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center">
+<div style="width:540px;background:var(--sf);border-radius:24px;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;box-shadow:0 24px 48px rgba(30,0,47,0.14)">
+<div style="display:flex;gap:12px;align-items:center">
+<div style="{{ shareTile }}"><span style="{{ i20.doc }}"></span></div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px"><div style="font:500 19px/1 var(--fd);letter-spacing:-0.02em">Share “Q3 Planning.pdf”</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">2.4 MB · Documents</div></div>
+<div style="width:32px;height:32px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center"><span style="{{ i16.x }}"></span></div>
+</div>
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:500 16px/1 var(--fd);letter-spacing:-0.02em">Share with people</div>
+<div style="display:flex;gap:8px"><div style="flex:1;height:42px;border-radius:12px;background:var(--sf2);display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--fg3);font:400 14px/1 var(--ft)"><span style="{{ i18.userPlus }}"></span>Name, email or group</div><div style="height:42px;padding:0 10px 0 14px;border-radius:12px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft)">Can edit<span style="{{ i14.chevD }}"></span></div></div>
+<div style="display:flex;align-items:center;gap:12px;height:44px"><div style="{{ avYou }}">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">You</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">marina@rocha.family</div></div><div style="font:500 13px/1 var(--ft);color:var(--fg3)">Owner</div></div>
+<div style="display:flex;align-items:center;gap:12px;height:44px"><div style="{{ avAna }}">AS</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Ana Souza</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">ana@rocha.family</div></div><div style="height:28px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 12px/1 var(--ft);white-space:nowrap">Can edit<span style="{{ i14.chevD }}"></span></div></div>
+<div style="display:flex;align-items:center;gap:12px;height:44px"><div style="width:32px;height:32px;border-radius:999px;background:var(--sf2);color:var(--fg2);display:flex;align-items:center;justify-content:center;flex:none"><span style="{{ i16.users }}"></span></div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Design team</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">Group · 6 people</div></div><div style="height:28px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 12px/1 var(--ft);white-space:nowrap">Can view<span style="{{ i14.chevD }}"></span></div></div>
+</div>
+<div style="height:1px;background:var(--ln)"></div>
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="display:flex;justify-content:space-between;align-items:center"><div style="display:flex;flex-direction:column;gap:5px"><div style="font:500 16px/1 var(--fd);letter-spacing:-0.02em">Share link</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">Anyone with the link can view</div></div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="border-radius:14px;background:var(--sf2);padding:5px 5px 5px 14px;display:flex;gap:10px;align-items:center;color:var(--fg2)"><span style="{{ i16.link }}"></span><div style="flex:1;min-width:0;font:400 13px/1 ui-monospace,Menlo,monospace;color:var(--fg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">https://cloud.rocha.family/s/k7Pq2xW</div><div style="height:34px;padding:0 14px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.copy }}"></span>Copy link</div></div>
+<div style="display:flex;gap:8px;flex-wrap:wrap">
+<div style="height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.eye }}"></span>Can view<span style="{{ i14.chevD }}"></span></div>
+<div style="height:30px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.calendar }}"></span>Expires Oct 24</div>
+<div style="height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.lock }}"></span>Add password</div>
+<div style="height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.download }}"></span>Allow download</div>
+</div>
+</div>
+<div style="height:1px;background:var(--ln)"></div>
+<div style="display:flex;align-items:center;gap:12px">
+<div style="flex:1;font:400 12px/1.3 var(--ft);color:var(--fg3)">Sends a copy through another app. Link settings don’t apply.</div>
+<div style="height:38px;padding:0 16px;border-radius:999px;border:1.5px solid var(--sf3);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.send }}"></span>Send file directly</div>
+</div>
+</div>
+</div>
+</sc-if>
+</div>
+</div>
+</div>
+</sc-if>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1280,&quot;height&quot;:800},&quot;os&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;mac&quot;,&quot;windows&quot;],&quot;default&quot;:&quot;mac&quot;,&quot;tsType&quot;:&quot;'mac'|'windows'&quot;},&quot;screen&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;files&quot;,&quot;filesGrid&quot;,&quot;photos&quot;,&quot;favorites&quot;,&quot;offline&quot;,&quot;shares&quot;,&quot;recent&quot;,&quot;activity&quot;,&quot;trash&quot;,&quot;share&quot;,&quot;settings&quot;,&quot;settings2&quot;],&quot;default&quot;:&quot;files&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light'|'dark'&quot;}}">
+class Component extends DCLogic {
+  componentDidMount() {
+    if (!window.NK) this._t = setInterval(() => { if (window.NK) { clearInterval(this._t); this.forceUpdate(); } }, 40);
+  }
+  componentWillUnmount() { clearInterval(this._t); }
+  renderVals() {
+    const K = window.NK;
+    if (!K) return { ready: false };
+    const { I, ic, D, row, TH, tile, tiles, avatar } = K;
+    const mac = this.props.os !== 'windows', win = !mac;
+    const sc = this.props.screen || 'files';
+    const theme = this.props.theme === 'dark' ? 'dark' : 'light';
+    const share = sc === 'share', grid = sc === 'filesGrid';
+    const base = (share || grid) ? 'files' : sc;
+    const settings = base.startsWith('settings');
+    const s = {}; ['files','photos','activity','trash','favorites','offline','shares','recent','settings','settings2'].forEach(k => s[k] = base === k);
+    const RS = sel => ({ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 180px 160px 120px', alignItems: 'center', height: 52, padding: '0 12px', borderBottom: '1px solid var(--ln)', background: sel ? 'var(--acs)' : 'transparent', borderRadius: sel ? 12 : 0 });
+    const mk = (list, fn, o = {}) => list.map((f, i) => { const r = row(f, { tile: 30, r: 9, ico: 16, ...o }); Object.assign(r, fn(f)); r.rs = RS(o.sel === i); return r; });
+    let groups = [], cols = ['Name', 'Size', 'Modified'];
+    const split = f => { const p = (f.meta || '').split(' · '); return { a: p[0], b: p[1] || '' }; };
+    if (base === 'files') groups = [{ rows: mk(D.files, f => ({ a: f.size, b: f.mod, bIcon: !!f.off }), { noSwipe: 1, sel: 3 }) }];
+    if (base === 'favorites') groups = [{ rows: mk(D.favorites, f => ({ a: f.size, b: f.mod, bIcon: !!f.off, fav: true })) }];
+    if (base === 'offline') { cols = ['Name', 'Size', 'Status']; groups = [{ rows: mk(D.offline, f => ({ a: f.size, b: split(f).a, bInline: true })) }]; }
+    if (base === 'shares') { cols = ['Name', 'Shared by', 'Permission']; groups = [{ rows: mk(D.shares, f => ({ a: f.by, b: f.perm })) }]; }
+    if (base === 'recent') { cols = ['Name', 'Activity', 'Location']; groups = D.recent.map(g => ({ label: g.label, rows: mk(g.rows, f => ({ ...split(f), bIcon: !!f.off })) })); }
+    if (base === 'trash') { cols = ['Name', 'Original location', 'Deleted']; groups = [{ rows: mk(D.trash, f => ({ a: f.from, b: f.del })) }]; }
+    groups = groups.map(g => ({ ...g, hasLabel: !!g.label }));
+    const title = settings ? 'Settings' : D.titles[base];
+    const seg = on => ({ width: 34, height: 30, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: on ? 'var(--acs)' : 'transparent', color: on ? 'var(--act)' : 'var(--fg3)' });
+    const counts = { trash: '12', offline: '1', shares: '3' };
+    const navItem = ([label, ico, key]) => ({ label, ico: I[18][ico], icoG: ic(ico, 18, 'var(--fg2)'), on: key === base, off: key !== base, count: counts[key] || '' });
+    return {
+      ready: true, mac, win, s, title, groups, c0: cols[0], c1: cols[1], c2: cols[2], share, notSettings: !settings,
+      sortable: base === 'files' || base === 'favorites',
+      restore: base === 'trash',
+      root: { ...TH[theme], width: 1280, height: 800, borderRadius: mac ? 12 : 8, overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column', background: 'var(--bg)', color: 'var(--fg1)', fontFamily: 'var(--ft)', border: '1px solid var(--ln)', boxSizing: 'border-box' },
+      i14: I[14], i16: I[16], i18: I[18], i20: I[20], i24: I[24],
+      showTable: groups.length > 0 && !grid, showGrid: grid,
+      gridRows: D.files.map(f => row(f, { noSwipe: 1, thumbH: 118 })).map(r => ({ ...r, meta: `${r.size} · ${r.mod}` })),
+      segL: seg(!grid), segG: seg(grid),
+      navA: D.pinned.map(navItem), navB: D.menu.map(navItem),
+      setOn: settings, setOff: !settings, setIcoG: ic('settings', 18, 'var(--fg2)'),
+      starSm: ic('star', 16, 'var(--act)'), moreSm: ic('moreH', 16, 'var(--fg3)'),
+      checkA: ic('check', 18, 'var(--act)'), chevG: ic('chevR', 16, 'var(--fg3)'), gripS: ic('grip', 16, 'var(--fg3)'),
+      photoGroups: [{ label: 'September 2026', count: '38 items', tiles: tiles(24, 0, [2, 9, 13, 20]) }, { label: 'August 2026', count: '112 items', tiles: tiles(16, 3, [4, 11]) }],
+      act: D.activity.map(g => ({ label: g.label, items: g.items.map(a => ({ ...a, av: avatar(a.col, 36), tile: tile(a.kind, 30, 9), ico: I[16][K.KIND[a.kind][2]] })) })),
+      tabRows: [...D.pinned.map(([label, ico]) => ({ label, ico: I[18][ico], p: 1 })), ...D.menu.map(([label, ico]) => ({ label, ico: I[18][ico], p: 0 }))].map(t => ({ ...t,
+        pinS: { width: 30, height: 30, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: t.p ? 'var(--acs)' : 'var(--sf2)', color: t.p ? 'var(--act)' : 'var(--fg3)' },
+        pinI: I[14][t.p ? 'pin' : 'pinOff'] })),
+      bioLabel: mac ? 'Lock with Touch ID' : 'Lock with Windows Hello', bioIco: I[18][mac ? 'fingerprint' : 'face'],
+      syncPath: mac ? '~/Noo/rocha.family' : 'C:\\Users\\Marina\\Noo',
+      swipeTitle: mac ? 'Trackpad swipe on a file' : 'Touch swipe on a file',
+      shareTile: tile('pdf', 40, 12), avYou: avatar('#CBA5FD', 32), avAna: avatar('#DA9AC7', 32)
+    };
+  }
+}
+</script>
+</body>
+</html>

.claude/context/design-system/Mobile Screen.dc.html

@@ -0,0 +1,433 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<script src="noo-kit.js"></script>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
+<style>
+body{margin:0}
+a{color:#8D0DE3;text-decoration:none}
+a:hover{color:#6E08B3}
+</style>
+</helmet>
+<sc-if value="{{ ready }}" hint-placeholder-val="{{ false }}">
+<div style="{{ root }}">
+
+<sc-if value="{{ ios }}">
+<div style="height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 30px 0 46px;position:relative;font:600 17px/1 var(--ft);color:var(--fg1)">
+<span>9:41</span>
+<div style="position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000000"></div>
+<div style="display:flex;gap:6px;align-items:center"><span style="{{ i16.signal }}"></span><span style="{{ i16.wifi }}"></span><span style="{{ i24.battery }}"></span></div>
+</div>
+</sc-if>
+<sc-if value="{{ android }}">
+<div style="height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font:500 14px/1 var(--ft);color:var(--fg1)">
+<span>9:41</span>
+<div style="display:flex;gap:6px;align-items:center"><span style="{{ i16.wifi }}"></span><span style="{{ i16.signal }}"></span><span style="{{ i16.battery }}"></span></div>
+</div>
+</sc-if>
+
+<sc-if value="{{ aBar }}">
+<div style="height:64px;flex:none;display:flex;align-items:center;gap:4px;padding:0 8px 0 4px;color:var(--fg1)">
+<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><span style="{{ i24.menu }}"></span></div>
+<div style="flex:1;font:500 22px/1 var(--fd);letter-spacing:-0.02em">{{ title }}</div>
+<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><span style="{{ i24.search }}"></span></div>
+<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><div style="width:32px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div></div>
+</div>
+</sc-if>
+<sc-if value="{{ aSet }}">
+<div style="height:64px;flex:none;display:flex;align-items:center;gap:4px;padding:0 8px 0 4px;color:var(--fg1)">
+<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><span style="{{ i24.back }}"></span></div>
+<div style="flex:1;font:500 22px/1 var(--fd);letter-spacing:-0.02em">Settings</div>
+</div>
+</sc-if>
+<sc-if value="{{ iBar }}">
+<div style="height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--act)">
+<span style="{{ i24.menu }}"></span>
+<div style="display:flex;gap:18px;align-items:center"><span style="{{ i24.plus }}"></span><div style="width:30px;height:30px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft)">MR</div></div>
+</div>
+<div style="flex:none;padding:2px 16px 12px;font:600 34px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--fg1)">{{ title }}</div>
+<div style="flex:none;margin:0 16px 12px;height:38px;border-radius:12px;background:var(--sf);display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--fg3);font:400 16px/1 var(--ft)"><span style="{{ i18.search }}"></span>Search</div>
+</sc-if>
+<sc-if value="{{ iSet }}">
+<div style="height:44px;flex:none;display:flex;align-items:center;gap:2px;padding:0 10px;color:var(--act);font:400 17px/1 var(--ft)"><span style="{{ i24.chevL }}"></span>Files</div>
+<div style="flex:none;padding:2px 16px 14px;font:600 34px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--fg1)">Settings</div>
+</sc-if>
+
+<div style="flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column">
+
+<sc-if value="{{ s.files }}">
+<div style="flex:none;display:flex;align-items:center;gap:8px;padding:4px 12px 12px 12px">
+<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);color:var(--fg1);white-space:nowrap"><span style="{{ i16.sort }}"></span>Name<span style="{{ i14.up }}"></span></div>
+<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);color:var(--fg1);white-space:nowrap"><span style="{{ i16.filter }}"></span><span style="white-space:nowrap">All types</span><span style="{{ i14.chevD }}"></span></div>
+<div style="flex:1"></div>
+<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px">
+<div style="{{ segL }}"><span style="{{ i18.list }}"></span></div>
+<div style="{{ segG }}"><span style="{{ i18.grid }}"></span></div>
+</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.trash }}">
+<div style="flex:none;margin:0 12px 16px;padding:14px 16px;border-radius:20px;background:var(--sf);display:flex;gap:12px;align-items:center;color:var(--fg2)">
+<span style="{{ i20.info }}"></span>
+<div style="flex:1;font:400 14px/1.3 var(--ft);text-wrap:pretty">Items here are deleted for good after 30 days.</div>
+<div style="font:600 14px/1 var(--ft);color:var(--dg);white-space:nowrap">Empty trash</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.offline }}">
+<div style="flex:none;margin:0 12px 16px;padding:18px;border-radius:20px;background:var(--sf);display:flex;flex-direction:column;gap:14px">
+<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:12px">
+<div style="display:flex;flex-direction:column;gap:6px"><div style="font:600 32px/0.9 var(--fd);letter-spacing:-0.03em">2.4 GB</div><div style="font:400 14px/1.2 var(--ft);color:var(--fg2)">of your 5 GB offline limit</div></div>
+<div style="height:36px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sync }}"></span>Sync now</div>
+</div>
+<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:48%;height:100%;background:var(--ac)"></div></div>
+<div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">Last synced 2 minutes ago · 1 file needs attention</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.shares }}">
+<div style="flex:none;margin:0 12px 16px;display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px">
+<div style="flex:1;height:34px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--ft)">With you</div>
+<div style="flex:1;height:34px;border-radius:999px;color:var(--fg2);display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--ft)">By you</div>
+<div style="flex:1;height:34px;border-radius:999px;color:var(--fg2);display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--ft)">Links</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ showList }}">
+<div style="display:flex;flex-direction:column;gap:18px;padding:0 12px 16px">
+<sc-for list="{{ groups }}" as="g" hint-placeholder-count="1">
+<div style="display:flex;flex-direction:column;gap:8px">
+<sc-if value="{{ g.hasLabel }}"><div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div></sc-if>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<sc-for list="{{ g.rows }}" as="f" hint-placeholder-count="6">
+<div style="position:relative;background:var(--dgf)">
+<sc-if value="{{ f.swiped }}"><div style="position:absolute;right:0;top:0;bottom:0;width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#FFFFFF;font:600 12px/1 var(--ft)"><span style="{{ i20.trash }}"></span>Delete</div></sc-if>
+<div style="{{ f.rs }}">
+<div style="{{ f.tile }}"><span style="{{ f.ico }}"></span></div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px">
+<div style="font:500 16px/1.2 var(--ft);color:var(--fg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div>
+<div style="display:flex;align-items:center;gap:5px;font:400 13px/1.2 var(--ft);color:var(--fg3);white-space:nowrap;overflow:hidden">
+<sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if>
+<sc-if value="{{ f.shared }}"><span style="{{ i14.users }}"></span></sc-if>
+<span style="flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis">{{ f.meta }}</span>
+</div>
+</div>
+<sc-if value="{{ f.fav }}"><span style="{{ starSm }}"></span></sc-if>
+<div style="width:32px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ trail }}"></span></div>
+</div>
+</div>
+</sc-for>
+</div>
+</div>
+</sc-for>
+</div>
+</sc-if>
+
+<sc-if value="{{ showGrid }}">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:0 12px 16px">
+<sc-for list="{{ gridRows }}" as="f" hint-placeholder-count="6">
+<div style="background:var(--sf);border-radius:18px;overflow:hidden;display:flex;flex-direction:column">
+<div style="{{ f.thumb }}"><span style="{{ f.icoL }}"></span></div>
+<div style="padding:10px 8px 12px 12px;display:flex;flex-direction:column;gap:5px">
+<div style="display:flex;align-items:center;gap:4px"><div style="flex:1;min-width:0;font:500 14px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div><span style="{{ moreSm }}"></span></div>
+<div style="display:flex;align-items:center;gap:4px;font:400 12px/1.2 var(--ft);color:var(--fg3);white-space:nowrap"><sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if><sc-if value="{{ f.fav }}"><span style="{{ starXs }}"></span></sc-if>{{ f.size }}</div>
+</div>
+</div>
+</sc-for>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.photos }}">
+<div style="flex:none;display:flex;gap:8px;padding:4px 12px 4px">
+<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 14px/1 var(--ft);white-space:nowrap">All</div>
+<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--sf);display:flex;align-items:center;font:500 14px/1 var(--ft);white-space:nowrap">Photos</div>
+<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--sf);display:flex;align-items:center;font:500 14px/1 var(--ft);white-space:nowrap">Videos</div>
+<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.camera }}"></span>Camera</div>
+</div>
+<sc-for list="{{ photoGroups }}" as="g" hint-placeholder-count="2">
+<div style="display:flex;justify-content:space-between;align-items:baseline;padding:16px 16px 10px"><div style="font:500 18px/1 var(--fd);letter-spacing:-0.02em">{{ g.label }}</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">{{ g.count }}</div></div>
+<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px">
+<sc-for list="{{ g.tiles }}" as="t" hint-placeholder-count="9">
+<div style="{{ t.s }}"><sc-if value="{{ t.vid }}"><div style="position:absolute;right:6px;bottom:6px;height:20px;padding:0 7px 0 5px;border-radius:999px;background:rgba(14,13,11,0.7);color:#FFFFFF;display:flex;align-items:center;gap:3px;font:600 11px/1 var(--ft)"><span style="{{ i14.play }}"></span>{{ t.dur }}</div></sc-if></div>
+</sc-for>
+</div>
+</sc-for>
+</sc-if>
+
+<sc-if value="{{ s.activity }}">
+<div style="display:flex;flex-direction:column;gap:18px;padding:0 12px 16px">
+<sc-for list="{{ act }}" as="g" hint-placeholder-count="2">
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<sc-for list="{{ g.items }}" as="a" hint-placeholder-count="3">
+<div style="display:flex;gap:12px;padding:14px;background:var(--sf);align-items:flex-start">
+<div style="{{ a.av }}">{{ a.who }}</div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px">
+<div style="font:400 15px/1.3 var(--ft);color:var(--fg1);text-wrap:pretty"><span style="font-weight:600">{{ a.name }}</span> {{ a.verb }} <span style="font-weight:600">{{ a.obj }}</span> {{ a.tail }}</div>
+<div style="font:400 13px/1 var(--ft);color:var(--fg3)">{{ a.time }}</div>
+</div>
+<div style="{{ a.tile }}"><span style="{{ a.ico }}"></span></div>
+</div>
+</sc-for>
+</div>
+</div>
+</sc-for>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.settings }}">
+<div style="display:flex;flex-direction:column;gap:20px;padding:0 12px 16px">
+<div style="padding:18px;border-radius:20px;background:var(--sf);display:flex;flex-direction:column;gap:16px">
+<div style="display:flex;gap:14px;align-items:center">
+<div style="width:56px;height:56px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 20px/1 var(--ft);flex:none">MR</div>
+<div style="display:flex;flex-direction:column;gap:5px;flex:1;min-width:0"><div style="font:500 20px/1 var(--fd);letter-spacing:-0.02em">Marina Rocha</div><div style="font:400 14px/1 var(--ft);color:var(--fg2)">marina@rocha.family</div></div>
+</div>
+<div style="display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--sf2)">
+<span style="{{ i18.server }}"></span>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1.1 var(--ft)">cloud.rocha.family</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">Nextcloud 30.0.2</div></div>
+<div style="height:24px;padding:0 10px;border-radius:999px;background:var(--oks);color:var(--ok);display:flex;align-items:center;font:600 12px/1 var(--ft);white-space:nowrap">Connected</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="display:flex;justify-content:space-between;font:400 14px/1 var(--ft)"><span style="font-weight:500">Storage</span><span style="color:var(--fg2)">38.2 of 100 GB</span></div>
+<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div>
+</div>
+<div style="display:flex;gap:8px">
+<div style="flex:1;height:44px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--ft)"><span style="{{ i16.external }}"></span>Manage on web</div>
+<div style="flex:1;height:44px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--ft)"><span style="{{ i16.logout }}"></span>Log out</div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Accounts</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:60px;background:var(--sf)"><div style="width:36px;height:36px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 16px/1 var(--ft)">Marina Rocha</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div><span style="{{ checkA }}"></span></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:60px;background:var(--sf)"><div style="width:36px;height:36px;border-radius:999px;background:#85D1BD;color:#0E0D0B;display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 16px/1 var(--ft)">Marina · Work</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">files.acme-studio.com</div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf);color:var(--act);font:600 15px/1 var(--ft)"><div style="width:36px;display:flex;justify-content:center"><span style="{{ i20.plus }}"></span></div>Add account</div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Security</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;box-sizing:border-box;background:var(--sf)"><span style="{{ bioIco }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 16px/1.1 var(--ft)">{{ bioLabel }}</div><div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">Needed every time you open the app</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.timer }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Lock after</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">1 minute<span style="{{ i18.chevR }}"></span></div></div>
+</div>
+</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.settings2 }}">
+<div style="display:flex;flex-direction:column;gap:20px;padding:0 12px 16px">
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">File sync</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;box-sizing:border-box;background:var(--sf)"><span style="{{ i20.camera }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 16px/1.1 var(--ft)">Auto-upload photos</div><div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">To /Photos/Camera</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.wifi }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Wi-Fi only</div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.charging }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Only while charging</div><div style="width:48px;height:28px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.sync }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Refresh offline files</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">Every 15 min<span style="{{ i18.chevR }}"></span></div></div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Files cache</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<div style="display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--sf)"><div style="display:flex;justify-content:space-between;font:400 16px/1 var(--ft)"><span>Cache in use</span><span style="color:var(--fg3);font-size:15px">1.2 of 2 GB</span></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:60%;height:100%;background:var(--ac)"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.database }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Cache limit</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">2 GB<span style="{{ i18.chevR }}"></span></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf);color:var(--dg)"><span style="{{ i20.trash }}"></span><div style="flex:1;font:500 16px/1 var(--ft)">Clear cache</div></div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Appearance</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<div style="display:flex;align-items:center;gap:12px;padding:0 12px 0 16px;height:56px;background:var(--sf)"><div style="flex:1;font:400 16px/1 var(--ft)">Theme</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:30px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">System</div><div style="height:30px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Light</div><div style="height:30px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Dark</div></div></div>
+<div style="display:flex;align-items:center;gap:12px;padding:0 12px 0 16px;height:56px;background:var(--sf)"><div style="flex:1;font:400 16px/1 var(--ft)">Default view</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:30px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.list }}"></span>List</div><div style="height:30px;padding:0 12px;display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--fg2)"><span style="{{ i14.grid }}"></span>Grid</div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><div style="flex:1;font:400 16px/1 var(--ft)">Show hidden files</div><div style="width:48px;height:28px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
+</div>
+</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ s.settings3 }}">
+<div style="display:flex;flex-direction:column;gap:20px;padding:0 12px 16px">
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;display:flex;justify-content:space-between;font:600 13px/1 var(--ft);color:var(--fg2)"><span>Tabs</span><span style="font-weight:500;color:var(--fg3)">5 of 5 pinned</span></div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<sc-for list="{{ tabRows }}" as="t" hint-placeholder-count="8">
+<div style="display:flex;align-items:center;gap:12px;padding:0 10px 0 10px;height:52px;background:var(--sf)">
+<span style="{{ gripS }}"></span>
+<span style="{{ t.ico }}"></span>
+<div style="flex:1;font:400 16px/1 var(--ft)">{{ t.label }}</div>
+<div style="{{ t.pinS }}"><span style="{{ t.pinI }}"></span></div>
+</div>
+</sc-for>
+</div>
+<div style="padding:0 8px;font:400 13px/1.3 var(--ft);color:var(--fg3);text-wrap:pretty">Pinned tabs sit in the bottom bar. The rest live in the menu. Drag to reorder.</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:8px">
+<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Swipe on a file</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.swipe }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Swipe left</div><div style="height:28px;padding:0 10px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:5px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.trash }}"></span>Delete</div><span style="{{ chevG }}"></span></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.swipe }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Swipe right</div><div style="height:28px;padding:0 10px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:5px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.star }}"></span>Favorite</div><span style="{{ chevG }}"></span></div>
+</div>
+</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ fab }}">
+<div style="position:absolute;right:16px;bottom:16px;height:56px;padding:0 20px 0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:10px;font:600 16px/1 var(--ft)"><span style="{{ i24.plus }}"></span>Upload</div>
+</sc-if>
+</div>
+
+<sc-if value="{{ aNav }}">
+<div style="flex:none;background:var(--sf);display:flex;flex-direction:column">
+<div style="display:flex;height:80px;align-items:center">
+<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
+<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px">
+<sc-if value="{{ n.on }}"><div style="width:56px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:600 12px/1 var(--ft);color:var(--fg1)">{{ n.label }}</div></sc-if>
+<sc-if value="{{ n.off }}"><div style="width:56px;height:32px;color:var(--fg2);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:500 12px/1 var(--ft);color:var(--fg2)">{{ n.label }}</div></sc-if>
+</div>
+</sc-for>
+</div>
+<div style="height:20px;display:flex;align-items:center;justify-content:center"><div style="width:108px;height:4px;border-radius:999px;background:var(--fg3)"></div></div>
+</div>
+</sc-if>
+<sc-if value="{{ iNav }}">
+<div style="flex:none;background:var(--sf);border-top:1px solid var(--ln);display:flex;flex-direction:column">
+<div style="display:flex;padding-top:8px;height:50px;box-sizing:border-box">
+<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
+<sc-if value="{{ n.on }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--act);font:600 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
+<sc-if value="{{ n.off }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg3);font:500 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
+</sc-for>
+</div>
+<div style="height:34px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;box-sizing:border-box"><div style="width:134px;height:5px;border-radius:999px;background:var(--fg1)"></div></div>
+</div>
+</sc-if>
+<sc-if value="{{ aGesture }}"><div style="height:24px;flex:none;display:flex;align-items:center;justify-content:center"><div style="width:108px;height:4px;border-radius:999px;background:var(--fg3)"></div></div></sc-if>
+<sc-if value="{{ iGesture }}"><div style="height:34px;flex:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;box-sizing:border-box"><div style="width:134px;height:5px;border-radius:999px;background:var(--fg1)"></div></div></sc-if>
+
+<sc-if value="{{ drawer }}">
+<div style="position:absolute;inset:0;background:var(--scrim)"></div>
+<div style="position:absolute;left:0;top:0;bottom:0;width:316px;background:var(--sf);border-radius:0 28px 28px 0;display:flex;flex-direction:column;padding:64px 12px 28px;box-sizing:border-box;gap:4px">
+<div style="display:flex;gap:12px;align-items:center;padding:0 12px 14px">
+<div style="width:48px;height:48px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 17px/1 var(--ft);flex:none">MR</div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px"><div style="font:500 18px/1 var(--fd);letter-spacing:-0.02em">Marina Rocha</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div>
+<div style="width:36px;height:36px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center"><span style="{{ i18.chevD }}"></span></div>
+</div>
+<div style="display:flex;flex-direction:column;gap:8px;padding:0 12px 16px">
+<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div>
+<div style="font:400 13px/1 var(--ft);color:var(--fg3)">38.2 GB of 100 GB used</div>
+</div>
+<div style="height:1px;background:var(--ln);margin:0 12px 8px"></div>
+<div style="padding:8px 16px;font:600 13px/1 var(--ft);color:var(--fg2)">More</div>
+<sc-for list="{{ menuRows }}" as="m" hint-placeholder-count="3">
+<div style="height:52px;border-radius:999px;padding:0 16px;display:flex;align-items:center;gap:14px;font:500 16px/1 var(--ft)"><span style="{{ m.ico }}"></span><div style="flex:1">{{ m.label }}</div><div style="font:500 14px/1 var(--ft);color:var(--fg3)">{{ m.count }}</div></div>
+</sc-for>
+<div style="height:1px;background:var(--ln);margin:8px 12px"></div>
+<div style="height:52px;border-radius:999px;padding:0 16px;display:flex;align-items:center;gap:14px;font:500 16px/1 var(--ft)"><span style="{{ i24.settings }}"></span>Settings</div>
+<div style="flex:1"></div>
+<div style="padding:0 16px;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);color:var(--act)"><span style="{{ i16.pencil }}"></span>Edit tabs</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ share }}">
+<div style="position:absolute;inset:0;background:var(--scrim)"></div>
+<div style="position:absolute;left:0;right:0;bottom:0;background:var(--sf);border-radius:28px 28px 0 0;padding:10px 20px 40px;display:flex;flex-direction:column;gap:22px">
+<div style="align-self:center;width:36px;height:5px;border-radius:999px;background:var(--sf3)"></div>
+<div style="display:flex;gap:12px;align-items:center">
+<div style="{{ shareTile }}"><span style="{{ i24.doc }}"></span></div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px"><div style="font:500 19px/1 var(--fd);letter-spacing:-0.02em">Q3 Planning.pdf</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">2.4 MB · Documents</div></div>
+<div style="width:36px;height:36px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center"><span style="{{ i18.x }}"></span></div>
+</div>
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:500 17px/1 var(--fd);letter-spacing:-0.02em">Share with people</div>
+<div style="height:48px;border-radius:14px;background:var(--sf2);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--fg3);font:400 15px/1 var(--ft)"><span style="{{ i20.userPlus }}"></span>Name, email or group</div>
+<div style="display:flex;flex-direction:column;gap:14px;padding-top:4px">
+<div style="display:flex;align-items:center;gap:12px"><div style="{{ avYou }}">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1 var(--ft)">You</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">marina@rocha.family</div></div><div style="font:500 13px/1 var(--ft);color:var(--fg3);padding-right:4px">Owner</div></div>
+<div style="display:flex;align-items:center;gap:12px"><div style="{{ avAna }}">AS</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1 var(--ft)">Ana Souza</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">ana@rocha.family</div></div><div style="height:30px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 13px/1 var(--ft);white-space:nowrap">Can edit<span style="{{ i14.chevD }}"></span></div></div>
+<div style="display:flex;align-items:center;gap:12px"><div style="width:36px;height:36px;border-radius:999px;background:var(--sf2);color:var(--fg2);display:flex;align-items:center;justify-content:center;flex:none"><span style="{{ i18.users }}"></span></div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1 var(--ft)">Design team</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">Group · 6 people</div></div><div style="height:30px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 13px/1 var(--ft);white-space:nowrap">Can view<span style="{{ i14.chevD }}"></span></div></div>
+</div>
+</div>
+<div style="height:1px;background:var(--ln)"></div>
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="display:flex;justify-content:space-between;align-items:center"><div style="display:flex;flex-direction:column;gap:5px"><div style="font:500 17px/1 var(--fd);letter-spacing:-0.02em">Share link</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">Anyone with the link can view</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="border-radius:16px;background:var(--sf2);padding:6px 6px 6px 14px;display:flex;gap:10px;align-items:center;color:var(--fg2)"><span style="{{ i18.link }}"></span><div style="flex:1;min-width:0;font:400 14px/1 ui-monospace,Menlo,monospace;color:var(--fg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">cloud.rocha.family/s/k7Pq2xW</div><div style="height:40px;padding:0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:6px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.copy }}"></span>Copy link</div></div>
+<div style="display:flex;gap:8px;flex-wrap:wrap">
+<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.eye }}"></span>Can view<span style="{{ i14.chevD }}"></span></div>
+<div style="height:32px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.calendar }}"></span>Expires Oct 24</div>
+<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.lock }}"></span>Add password</div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:10px">
+<div style="height:52px;border-radius:999px;border:1.5px solid var(--sf3);display:flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--ft)"><span style="{{ i20.send }}"></span>Send file directly</div>
+<div style="font:400 13px/1.3 var(--ft);color:var(--fg3);text-align:center">Sends a copy through another app. Link settings don’t apply.</div>
+</div>
+</div>
+</sc-if>
+
+</div>
+</sc-if>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:390,&quot;height&quot;:844},&quot;platform&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;ios&quot;,&quot;android&quot;],&quot;default&quot;:&quot;ios&quot;,&quot;tsType&quot;:&quot;'ios'|'android'&quot;},&quot;screen&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;files&quot;,&quot;filesGrid&quot;,&quot;photos&quot;,&quot;favorites&quot;,&quot;offline&quot;,&quot;shares&quot;,&quot;recent&quot;,&quot;activity&quot;,&quot;trash&quot;,&quot;drawer&quot;,&quot;share&quot;,&quot;settings&quot;,&quot;settings2&quot;,&quot;settings3&quot;],&quot;default&quot;:&quot;files&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'light'|'dark'&quot;}}">
+class Component extends DCLogic {
+  componentDidMount() {
+    if (!window.NK) this._t = setInterval(() => { if (window.NK) { clearInterval(this._t); this.forceUpdate(); } }, 40);
+  }
+  componentWillUnmount() { clearInterval(this._t); }
+  renderVals() {
+    const K = window.NK;
+    if (!K) return { ready: false };
+    const { I, ic, D, row, TH, tile, tiles, avatar } = K;
+    const ios = this.props.platform !== 'android', android = !ios;
+    const sc = this.props.screen || 'files';
+    const theme = this.props.theme === 'dark' ? 'dark' : 'light';
+    const drawer = sc === 'drawer', share = sc === 'share';
+    const grid = sc === 'filesGrid';
+    const base = (drawer || share || grid) ? 'files' : sc;
+    const settings = base.startsWith('settings');
+    const s = {}; ['files','photos','activity','trash','favorites','offline','shares','recent','settings','settings2','settings3'].forEach(k => s[k] = base === k);
+    const ROW = { display: 'flex', alignItems: 'center', gap: 14, padding: '0 6px 0 14px', height: 64, background: 'var(--sf)', position: 'relative' };
+    const mk = (list, o = {}) => list.map(f => { const r = row(f, o); r.rs = { ...ROW, transform: r.swiped ? 'translateX(-96px)' : 'none' }; return r; });
+    const noSwipe = drawer || share;
+    let groups = [], trail = ic(ios ? 'moreH' : 'moreV', 20, 'var(--fg3)');
+    if (base === 'files') groups = [{ rows: mk(D.files, { noSwipe }) }];
+    if (base === 'favorites') { groups = [{ rows: mk(D.favorites, { noFav: 1 }) }]; trail = ic('star', 20, 'var(--act)'); }
+    if (base === 'offline') groups = [{ rows: mk(D.offline) }];
+    if (base === 'shares') groups = [{ rows: mk(D.shares) }];
+    if (base === 'recent') groups = D.recent.map(g => ({ label: g.label, rows: mk(g.rows) }));
+    if (base === 'trash') { groups = [{ rows: mk(D.trash) }]; trail = ic('restore', 20, 'var(--act)'); }
+    groups = groups.map(g => ({ ...g, hasLabel: !!g.label }));
+    const title = settings ? 'Settings' : D.titles[base];
+    const seg = on => ({ width: 36, height: 28, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: on ? 'var(--acs)' : 'transparent', color: on ? 'var(--act)' : 'var(--fg3)' });
+    return {
+      ready: true, ios, android, s, title, groups, trail, drawer, share,
+      root: { ...TH[theme], width: 390, height: 844, borderRadius: ios ? 48 : 36, overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column', background: 'var(--bg)', color: 'var(--fg1)', fontFamily: 'var(--ft)' },
+      i14: I[14], i16: I[16], i18: I[18], i20: I[20], i24: I[24],
+      aBar: android && !settings, aSet: android && settings, iBar: ios && !settings, iSet: ios && settings,
+      aNav: android && !settings, iNav: ios && !settings, aGesture: android && settings, iGesture: ios && settings,
+      showList: groups.length > 0 && !grid, showGrid: grid,
+      gridRows: D.files.slice(0, 8).map(f => row(f, { noSwipe: 1 })),
+      segL: seg(!grid), segG: seg(grid),
+      fab: android && (base === 'files' || base === 'photos'),
+      starSm: ic('star', 16, 'var(--act)'), starXs: ic('star', 12, 'var(--act)'), moreSm: ic(ios ? 'moreH' : 'moreV', 16, 'var(--fg3)'),
+      checkA: ic('check', 20, 'var(--act)'), chevG: ic('chevR', 18, 'var(--fg3)'), gripS: ic('grip', 18, 'var(--fg3)'),
+      photoGroups: [{ label: 'September 2026', count: '38 items', tiles: tiles(18, 0, [2, 9, 13]) }, { label: 'August 2026', count: '112 items', tiles: tiles(9, 3, [4]) }],
+      act: D.activity.map(g => ({ label: g.label, items: g.items.map(a => ({ ...a, av: avatar(a.col, 36), tile: tile(a.kind, 32, 10), ico: I[16][K.KIND[a.kind][2]] })) })),
+      nav: D.pinned.map(([label, ico, key]) => ({ label, ico: I[24][ico], on: key === base, off: key !== base })),
+      menuRows: D.menu.map(([label, ico, key, count]) => ({ label, ico: I[24][ico], count })),
+      tabRows: [...D.pinned.map(([label, ico]) => ({ label, ico: I[20][ico], p: 1 })), ...D.menu.map(([label, ico]) => ({ label, ico: I[20][ico], p: 0 }))].map(t => ({ ...t,
+        pinS: { width: 36, height: 36, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: t.p ? 'var(--acs)' : 'var(--sf2)', color: t.p ? 'var(--act)' : 'var(--fg3)' },
+        pinI: I[16][t.p ? 'pin' : 'pinOff'] })),
+      bioLabel: ios ? 'Lock with Face ID' : 'Lock with fingerprint', bioIco: I[20][ios ? 'face' : 'fingerprint'],
+      shareTile: tile('pdf', 44, 12), avYou: { ...avatar('#CBA5FD', 36) }, avAna: avatar('#DA9AC7', 36)
+    };
+  }
+}
+</script>
+</body>
+</html>

.claude/context/design-system/Noo Design System.dc.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<script src="noo-kit.js"></script>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
+<style>
+body{margin:0;background:#F3EFE6}
+a{color:#8D0DE3;text-decoration:none}
+a:hover{color:#6E08B3}
+</style>
+</helmet>
+<div style="max-width:1440px;margin:0 auto;padding:64px 40px 96px;display:flex;flex-direction:column;gap:48px;font-family:'Instrument Sans',system-ui,sans-serif;color:#0E0D0B">
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="font:600 64px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">Noo design system</div>
+<div style="font:400 18px/1.35 'Instrument Sans',system-ui,sans-serif;color:#5A5852;max-width:760px;text-wrap:pretty">Every component is shown in light and dark. The full rules for code are in <a href="DESIGN_SYSTEM.md">DESIGN_SYSTEM.md</a>. You can see every screen in <a href="Noo Screens.dc.html">Noo Screens</a>.</div>
+</div>
+
+<sc-if value="{{ ready }}" hint-placeholder-val="{{ false }}">
+<div style="display:flex;flex-direction:column;gap:14px">
+<div style="font:500 28px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.02em">Type</div>
+<div style="background:#FFFFFF;border-radius:20px;padding:8px 24px">
+<sc-for list="{{ type }}" as="t" hint-placeholder-count="9">
+<div style="display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid #EAE8E2">
+<div style="font:400 13px/1.3 ui-monospace,Menlo,monospace;color:#7C7A72">{{ t.spec }}</div>
+<div style="{{ t.s }}">{{ t.sample }}</div>
+</div>
+</sc-for>
+</div>
+</div>
+
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,600px),1fr));gap:24px">
+<sc-for list="{{ themes }}" as="th" hint-placeholder-count="2">
+<div style="{{ th.vars }}">
+<div style="display:flex;flex-direction:column;gap:28px;padding:28px;border-radius:28px;background:var(--bg);color:var(--fg1);font-family:var(--ft)">
+<div style="font:600 32px/0.9 var(--fd);letter-spacing:-0.03em">{{ th.label }}</div>
+
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Color</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px">
+<sc-for list="{{ th.swatches }}" as="c" hint-placeholder-count="16">
+<div style="display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:14px;background:var(--sf)">
+<div style="{{ c.s }}"></div>
+<div style="padding:0 4px 4px;display:flex;flex-direction:column;gap:3px"><div style="font:600 12px/1 var(--ft)">{{ c.name }}</div><div style="font:400 11px/1 ui-monospace,Menlo,monospace;color:var(--fg3)">{{ c.hex }}</div></div>
+</div>
+</sc-for>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:600 13px/1 var(--ft);color:var(--fg2)">File-type tiles</div>
+<div style="display:flex;gap:14px;flex-wrap:wrap">
+<sc-for list="{{ kinds }}" as="k" hint-placeholder-count="7">
+<div style="display:flex;flex-direction:column;align-items:center;gap:6px"><div style="{{ k.tile }}"><span style="{{ k.ico }}"></span></div><div style="font:500 12px/1 var(--ft);color:var(--fg2)">{{ k.name }}</div></div>
+</sc-for>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Buttons</div>
+<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
+<div style="height:44px;padding:0 20px 0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i18.plus }}"></span>Primary</div>
+<div style="height:44px;padding:0 20px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sync }}"></span>Tonal</div>
+<div style="height:44px;padding:0 20px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;font:600 15px/1 var(--ft);white-space:nowrap">Secondary</div>
+<div style="height:44px;padding:0 20px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i16.logout }}"></span>Danger</div>
+<div style="height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--sf3);display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i16.send }}"></span>Outline</div>
+<div style="height:56px;padding:0 20px 0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:10px;font:600 16px/1 var(--ft);white-space:nowrap"><span style="{{ i24.plus }}"></span>FAB · Android</div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Chips, segmented, toggles, search</div>
+<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
+<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sort }}"></span>Name<span style="{{ i14.up }}"></span></div>
+<div style="height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);white-space:nowrap">Modified<span style="{{ i14.chevD }}"></span></div>
+<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 14px/1 var(--ft);white-space:nowrap">Available offline<span style="{{ i14.x }}"></span></div>
+<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px"><div style="width:36px;height:28px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center"><span style="{{ i18.list }}"></span></div><div style="width:36px;height:28px;color:var(--fg3);display:flex;align-items:center;justify-content:center"><span style="{{ i18.grid }}"></span></div></div>
+<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px"><div style="height:30px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft)">With you</div><div style="height:30px;padding:0 14px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">By you</div><div style="height:30px;padding:0 14px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Links</div></div>
+<div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div>
+<div style="width:48px;height:28px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div>
+</div>
+<div style="height:38px;border-radius:12px;background:var(--sf);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--fg3);font:400 16px/1 var(--ft)"><span style="{{ i18.search }}"></span>Search</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Grouped list · file rows · swipe</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<sc-for list="{{ rows }}" as="f" hint-placeholder-count="4">
+<div style="position:relative;background:var(--dgf)">
+<sc-if value="{{ f.swiped }}"><div style="position:absolute;right:0;top:0;bottom:0;width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#FFFFFF;font:600 12px/1 var(--ft)"><span style="{{ i20.trash }}"></span>Delete</div></sc-if>
+<div style="{{ f.rs }}">
+<div style="{{ f.tile }}"><span style="{{ f.ico }}"></span></div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px">
+<div style="font:500 16px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div>
+<div style="display:flex;align-items:center;gap:5px;font:400 13px/1.2 var(--ft);color:var(--fg3);white-space:nowrap"><sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if><sc-if value="{{ f.shared }}"><span style="{{ i14.users }}"></span></sc-if>{{ f.meta }}</div>
+</div>
+<sc-if value="{{ f.fav }}"><span style="{{ starSm }}"></span></sc-if>
+<div style="width:32px;display:flex;justify-content:center"><span style="{{ moreT }}"></span></div>
+</div>
+</div>
+</sc-for>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Settings rows · progress · badges · avatars</div>
+<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
+<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;box-sizing:border-box;background:var(--sf)"><span style="{{ i20.fingerprint }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 16px/1.1 var(--ft)">Toggle row</div><div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">With a subtitle</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.timer }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Value row</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">1 minute<span style="{{ i18.chevR }}"></span></div></div>
+<div style="display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--sf)"><div style="display:flex;justify-content:space-between;font:400 16px/1 var(--ft)"><span>Progress row</span><span style="color:var(--fg3);font-size:15px">1.2 of 2 GB</span></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:60%;height:100%;background:var(--ac)"></div></div></div>
+<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf);color:var(--dg)"><span style="{{ i20.trash }}"></span><div style="flex:1;font:500 16px/1 var(--ft)">Destructive row</div></div>
+</div>
+<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
+<div style="height:24px;padding:0 10px;border-radius:999px;background:var(--oks);color:var(--ok);display:flex;align-items:center;font:600 12px/1 var(--ft)">Connected</div>
+<div style="height:24px;padding:0 10px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;font:600 12px/1 var(--ft)">Couldn’t sync</div>
+<div style="display:flex;align-items:center;gap:5px;font:400 13px/1 var(--ft);color:var(--fg3)"><span style="{{ bOk }}"></span>Synced</div>
+<div style="display:flex;align-items:center;gap:5px;font:400 13px/1 var(--ft);color:var(--fg3)"><span style="{{ bSync }}"></span>Syncing</div>
+<div style="display:flex;align-items:center;gap:5px;font:400 13px/1 var(--ft);color:var(--fg3)"><span style="{{ bErr }}"></span>Error</div>
+<div style="flex:1"></div>
+<div style="width:36px;height:36px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div>
+<div style="{{ avA }}">AS</div>
+<div style="{{ avB }}">LP</div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Navigation · iOS tab bar / Android navigation bar / desktop sidebar</div>
+<div style="display:flex;background:var(--sf);border-radius:20px;padding:10px 0">
+<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
+<sc-if value="{{ n.on }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--act);font:600 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
+<sc-if value="{{ n.off }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg3);font:500 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
+</sc-for>
+</div>
+<div style="display:flex;background:var(--sf);border-radius:20px;padding:14px 0">
+<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
+<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px">
+<sc-if value="{{ n.on }}"><div style="width:56px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:600 12px/1 var(--ft)">{{ n.label }}</div></sc-if>
+<sc-if value="{{ n.off }}"><div style="width:56px;height:32px;color:var(--fg2);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:500 12px/1 var(--ft);color:var(--fg2)">{{ n.label }}</div></sc-if>
+</div>
+</sc-for>
+</div>
+<div style="display:flex;gap:4px;flex-wrap:wrap">
+<div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft);width:220px;box-sizing:border-box"><span style="{{ i18.folder }}"></span>Files</div>
+<div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;font:500 14px/1 var(--ft);width:220px;box-sizing:border-box"><span style="{{ i18.trash }}"></span><div style="flex:1">Trash</div><div style="font:500 12px/1 var(--ft);color:var(--fg3)">12</div></div>
+</div>
+</div>
+
+</div>
+</div>
+</sc-for>
+</div>
+</sc-if>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+  componentDidMount() {
+    if (!window.NK) this._t = setInterval(() => { if (window.NK) { clearInterval(this._t); this.forceUpdate(); } }, 40);
+  }
+  componentWillUnmount() { clearInterval(this._t); }
+  renderVals() {
+    const K = window.NK;
+    if (!K) return { ready: false };
+    const { I, ic, D, row, TH, tile, avatar } = K;
+    const FD = "'Schibsted Grotesk',system-ui,sans-serif", FT = "'Instrument Sans',system-ui,sans-serif";
+    const t = (spec, sample, s) => ({ spec, sample, s: { ...s, color: '#0E0D0B' } });
+    const names = [['bg','--bg'],['surface','--sf'],['surface-2','--sf2'],['surface-3','--sf3'],['line','--ln'],['fg-1','--fg1'],['fg-2','--fg2'],['fg-3','--fg3'],['accent','--ac'],['accent-text','--act'],['accent-soft','--acs'],['danger','--dg'],['danger-soft','--dgs'],['success','--ok'],['success-soft','--oks'],['warning','--wn'],['warning-soft','--wns'],['info','--in'],['info-soft','--ins']];
+    const ROW = { display: 'flex', alignItems: 'center', gap: 14, padding: '0 6px 0 14px', height: 64, background: 'var(--sf)', position: 'relative' };
+    const demo = [D.files[2], D.files[3], D.offline[2], D.offline[4], { ...D.files[4] }].map(f => { const r = row(f); r.rs = { ...ROW, transform: r.swiped ? 'translateX(-96px)' : 'none' }; return r; });
+    return {
+      ready: true,
+      i14: I[14], i16: I[16], i18: I[18], i20: I[20], i24: I[24],
+      type: [
+        t('Display 600 · 34/0.9 · −3%', 'Large title', { font: `600 34px/0.9 ${FD}`, letterSpacing: '-0.03em' }),
+        t('Display 600 · 32/0.9 · −3%', '2.4 GB', { font: `600 32px/0.9 ${FD}`, letterSpacing: '-0.03em' }),
+        t('Display 500 · 22/1 · −2%', 'Top bar title', { font: `500 22px/1 ${FD}`, letterSpacing: '-0.02em' }),
+        t('Display 500 · 18/1 · −2%', 'Card title · September 2026', { font: `500 18px/1 ${FD}`, letterSpacing: '-0.02em' }),
+        t('Text 500 · 16/1.2', 'Q3 Planning.pdf', { font: `500 16px/1.2 ${FT}` }),
+        t('Text 400 · 15/1.3', 'Ana Souza shared Q3 Planning.pdf with you', { font: `400 15px/1.3 ${FT}` }),
+        t('Text 600 · 13/1', 'Section label', { font: `600 13px/1 ${FT}` }),
+        t('Text 400 · 13/1.2 · fg-3', '2.4 MB · Yesterday', { font: `400 13px/1.2 ${FT}`, opacity: 0.62 }),
+        t('Mono 400 · 14', 'cloud.rocha.family/s/k7Pq2xW', { font: '400 14px/1 ui-monospace,Menlo,monospace' })
+      ],
+      themes: ['light', 'dark'].map(id => ({ label: id === 'light' ? 'Light' : 'Dark', vars: TH[id],
+        swatches: names.map(([name, v]) => ({ name, hex: TH[id][v], s: { height: 44, borderRadius: 10, background: `var(${v})`, boxShadow: 'inset 0 0 0 1px var(--ln)' } })) })),
+      kinds: Object.keys(K.KIND).map(k => ({ name: k, tile: tile(k, 40, 12), ico: I[20][K.KIND[k][2]] })),
+      rows: demo, starSm: ic('star', 16, 'var(--act)'), moreT: ic('moreH', 20, 'var(--fg3)'),
+      bOk: ic('ok', 14, 'var(--ok)'), bSync: ic('sync', 14, 'var(--act)'), bErr: ic('alert', 14, 'var(--dg)'),
+      avA: avatar('#DA9AC7', 36), avB: avatar('#8DCDE2', 36),
+      nav: D.pinned.map(([label, ico], i) => ({ label, ico: I[24][ico], on: i === 0, off: i !== 0 }))
+    };
+  }
+}
+</script>
+</body>
+</html>

.claude/context/design-system/Noo Screens.dc.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<meta name="design_doc_mode" content="canvas">
+<script src="noo-kit.js"></script>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
+<style>
+body{margin:0;background:#EAE8E2}
+a{color:#8D0DE3;text-decoration:none}
+a:hover{color:#6E08B3}
+</style>
+</helmet>
+<div style="padding:96px;display:flex;flex-direction:column;gap:120px;font-family:'Instrument Sans',system-ui,sans-serif;color:#0E0D0B;width:max-content">
+<div style="display:flex;flex-direction:column;gap:20px;max-width:1100px">
+<div style="font:600 96px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">Noo</div>
+<div style="font:400 28px/1.3 'Instrument Sans',system-ui,sans-serif;color:#5A5852;text-wrap:pretty">A Nextcloud client for iOS, Android, macOS and Windows. One brand language, navigation adapted per platform. Light and dark shown for every screen.</div>
+<div style="display:flex;gap:12px;font:600 20px/1 'Instrument Sans',system-ui,sans-serif"><a href="Noo Design System.dc.html" style="height:52px;padding:0 24px;border-radius:999px;background:#8D0DE3;color:#FFFFFF;display:flex;align-items:center;white-space:nowrap">Open the design system</a><a href="DESIGN_SYSTEM.md" style="height:52px;padding:0 24px;border-radius:999px;background:#FFFFFF;display:flex;align-items:center;white-space:nowrap">DESIGN_SYSTEM.md</a></div>
+</div>
+
+<sc-for list="{{ mobile }}" as="p" hint-placeholder-count="2">
+<section style="display:flex;flex-direction:column;gap:40px">
+<div style="display:flex;align-items:baseline;gap:24px;border-bottom:2px solid #0E0D0B;padding-bottom:20px"><div style="font:600 72px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">{{ p.name }}</div><div style="font:400 24px/1.2 'Instrument Sans',system-ui,sans-serif;color:#5A5852;white-space:nowrap">{{ p.note }}</div></div>
+<div style="display:flex;gap:120px">
+<sc-for list="{{ p.themes }}" as="t" hint-placeholder-count="2">
+<div style="display:flex;flex-direction:column;gap:32px">
+<div style="font:500 36px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.02em">{{ t.label }}</div>
+<div style="display:grid;grid-template-columns:repeat(7,390px);gap:72px 48px">
+<sc-for list="{{ screensM }}" as="sc" hint-placeholder-count="14">
+<div style="display:flex;flex-direction:column;gap:14px">
+<div style="display:flex;gap:10px;align-items:baseline;font:500 18px/1 'Instrument Sans',system-ui,sans-serif"><span style="color:#7C7A72">{{ sc.n }}</span><span style="white-space:nowrap">{{ sc.label }}</span></div>
+<div style="width:390px;height:844px;border-radius:48px;box-shadow:0 0 0 1px rgba(14,13,11,0.08),0 24px 48px rgba(30,0,47,0.10)">
+<dc-import name="Mobile Screen" platform="{{ p.id }}" screen="{{ sc.id }}" theme="{{ t.id }}" hint-size="390px,844px"></dc-import>
+</div>
+</div>
+</sc-for>
+</div>
+</div>
+</sc-for>
+</div>
+</section>
+</sc-for>
+
+<sc-for list="{{ desktop }}" as="p" hint-placeholder-count="2">
+<section style="display:flex;flex-direction:column;gap:40px">
+<div style="display:flex;align-items:baseline;gap:24px;border-bottom:2px solid #0E0D0B;padding-bottom:20px"><div style="font:600 72px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">{{ p.name }}</div><div style="font:400 24px/1.2 'Instrument Sans',system-ui,sans-serif;color:#5A5852;white-space:nowrap">{{ p.note }}</div></div>
+<div style="display:flex;gap:160px">
+<sc-for list="{{ p.themes }}" as="t" hint-placeholder-count="2">
+<div style="display:flex;flex-direction:column;gap:32px">
+<div style="font:500 36px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.02em">{{ t.label }}</div>
+<div style="display:grid;grid-template-columns:repeat(3,1280px);gap:72px 64px">
+<sc-for list="{{ screensD }}" as="sc" hint-placeholder-count="12">
+<div style="display:flex;flex-direction:column;gap:14px">
+<div style="display:flex;gap:10px;align-items:baseline;font:500 20px/1 'Instrument Sans',system-ui,sans-serif"><span style="color:#7C7A72">{{ sc.n }}</span><span style="white-space:nowrap">{{ sc.label }}</span></div>
+<div style="width:1280px;height:800px;border-radius:12px;box-shadow:0 24px 48px rgba(30,0,47,0.12)">
+<dc-import name="Desktop Screen" os="{{ p.id }}" screen="{{ sc.id }}" theme="{{ t.id }}" hint-size="1280px,800px"></dc-import>
+</div>
+</div>
+</sc-for>
+</div>
+</div>
+</sc-for>
+</div>
+</section>
+</sc-for>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;platforms&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;all&quot;,&quot;ios&quot;,&quot;android&quot;,&quot;mac&quot;,&quot;windows&quot;],&quot;default&quot;:&quot;all&quot;,&quot;tsType&quot;:&quot;string&quot;},&quot;themes&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;both&quot;,&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;both&quot;,&quot;tsType&quot;:&quot;string&quot;}}">
+class Component extends DCLogic {
+  renderVals() {
+    const pf = this.props.platforms || 'all';
+    const th = this.props.themes || 'both';
+    const themes = [{ id: 'light', label: 'Light' }, { id: 'dark', label: 'Dark' }].filter(t => th === 'both' || th === t.id);
+    const M = [['files','Files · list'],['filesGrid','Files · grid'],['photos','Photos'],['favorites','Favorites'],['offline','Offline'],['shares','Shares'],['recent','Recent'],['activity','Activity'],['trash','Trash'],['drawer','Menu (unpinned tabs)'],['share','Share sheet'],['settings','Settings · account & security'],['settings2','Settings · sync, cache, appearance'],['settings3','Settings · tabs & swipe']];
+    const Dk = [['files','Files · list'],['filesGrid','Files · grid'],['photos','Photos'],['favorites','Favorites'],['offline','Offline'],['shares','Shares'],['recent','Recent'],['activity','Activity'],['trash','Trash'],['share','Share dialog'],['settings','Settings · account, security, sync'],['settings2','Settings · cache, appearance, tabs, swipe']];
+    const num = a => a.map(([id, label], i) => ({ id, label, n: String(i + 1).padStart(2, '0') }));
+    const keep = id => pf === 'all' || pf === id;
+    return {
+      screensM: num(M), screensD: num(Dk),
+      mobile: [{ id: 'ios', name: 'iOS', note: 'Large titles, tab bar, “+” upload in the nav bar.', themes }, { id: 'android', name: 'Android', note: 'Top app bar, navigation bar with pill indicator, Upload FAB.', themes }].filter(p => keep(p.id)),
+      desktop: [{ id: 'mac', name: 'macOS', note: 'Traffic lights in the sidebar, back/forward in the toolbar.', themes }, { id: 'windows', name: 'Windows', note: 'Title bar with caption buttons, same sidebar and toolbar.', themes }].filter(p => keep(p.id))
+    };
+  }
+}
+</script>
+</body>
+</html>

.claude/context/server.md

@@ -73,6 +73,15 @@ rather than needing a rewrite for multi-account support.
   there is no WebDAV client dependency. `_parseDavDate`/`_davPath` in this
   file exist because WebDAV responses use RFC 1123 dates and either bare
   paths or full URLs for `href`; reuse them rather than re-deriving.
+  `creationdate` specifically needs `_parseDavCreationDate`, not
+  `_parseDavDate` directly - Nextcloud has no real per-file creation-time
+  tracking for most setups, so that property routinely comes back as a
+  placeholder Unix-epoch date rather than being omitted, which
+  `_parseDavDate` alone parses "successfully" into a real (if bogus)
+  January 1970 `DateTime`. `_parseDavCreationDate` treats that placeholder
+  as absent instead, so `NextcloudItem.dateCreated` falls back to
+  `lastModified` (its constructor's default) the same as it would for a
+  missing/unparseable value.
 - **Everything else** (shares, activity, trash, favorites, quota, user info,
   file versions) goes through Nextcloud's OCS APIs (`/ocs/v2.php/...`), JSON
   in, with the `OCS-APIRequest: true` header required on every OCS call.
@@ -197,13 +206,26 @@ rather than needing a rewrite for multi-account support.
   Dio from a separate process lifecycle - `UploadService.startUpload` passes
   everything the Kotlin side needs (the pre-built `Authorization` header
   from `NextcloudService.authHeaders`, not the raw password) as Intent
-  extras, a one-way handoff with no channel back to Dart afterward. Keep
-  the two upload implementations in sync manually if upload semantics
-  change. Progress/cancellation is entirely notification-driven (one
-  ongoing, updatable notification for the whole batch; its Cancel action
-  re-delivers an Intent to the same running service instance, which an
-  `AtomicBoolean` the copy/upload loops poll) - there's no plumbing back to
-  the Dart UI, by design, since the app may not even be running.
+  extras, a one-way handoff for the start of the upload - the Kotlin side
+  never asks Dart anything mid-upload, since the app may not even be
+  running by then. Keep the two upload implementations in sync manually if
+  upload semantics change. Progress/cancellation is entirely notification-
+  driven (one ongoing, updatable notification for the whole batch; its
+  Cancel action re-delivers an Intent to the same running service instance,
+  which an `AtomicBoolean` the copy/upload loops poll) - the notification is
+  the only UI a closed app gets.
+  There is one thing that *does* come back, when the app is still running:
+  once a batch finishes with at least one success, `ShareUploadService.kt`
+  publishes into `UploadEventBus` (an in-process pub/sub, same shape as
+  `SyncStatusBus` below), which `MainActivity.kt` forwards to Dart over the
+  `dev.ayushya.noo/upload_service/status` `EventChannel` -
+  `UploadService.completions`. `FilesController` subscribes in its own
+  constructor and calls `refreshData()` when the event's folder matches
+  `currentFolderPath`, so a file uploaded into the folder currently on
+  screen shows up without a manual pull-to-refresh. Follows
+  `SyncService.statusStream`'s "one shared `static final` stream" rule (see
+  its own doc comment) - a second `receiveBroadcastStream()` subscriber
+  would silently steal the single native-side listener from the first.
 
 ## Being picked by other apps (photo/file picker)
 
@@ -779,3 +801,5 @@ Flutter's own default to already be high enough.
 `isRestoringSession` still gates the splash screen until the above resolves
 — see `standards.md` for why widget tests must mock both storage channels
 rather than relying on this async path throwing naturally.
+
+- `putBytes(path, bytes)` does a WebDAV `PUT` to overwrite a file; used by the text/markdown editor (`MediaTextPreview`).

.claude/context/standards.md

@@ -75,6 +75,19 @@ class/method already makes obvious.
   never completes) and the app stays on `_SplashView`'s indeterminate
   spinner, which makes `pumpAndSettle()` hang until its own timeout instead
   of failing fast. See `test/widget_test.dart` for the reference setup.
+- Design-system components (`lib/widgets/noo/`) are tested in
+  `test/widgets/noo/`, one file per component folder. Use the helpers in
+  `noo_test_utils.dart`:
+  - `setUpNooTests()` turns off font fetching.
+  - `testNooWidgets(...)` runs a body once per theme, light and dark, built
+    through the real `AppTheme`, and hands it the `NooColors`.
+  - `pumpNoo(...)` mounts the widget.
+
+  Build themes inside the test body, not at file level, because `AppTheme`
+  touches Google Fonts before the test binding exists. `pumpNoo` centers
+  the child, which loosens its constraints. To catch a widget stretching to
+  fill its parent, put it in a bounded box (for example, `SizedBox` +
+  `Align`).
 - Run with `flutter test`.
 
 ## Local install/deploy
@@ -99,15 +112,18 @@ on the device. `android/app/build.gradle.kts` picks a release signing key
 in this order: a local `android/key.properties` (gitignored — points at a
 gitignored keystore file, e.g. `android/app/release-keystore.jks`), then
 CI env vars (`RELEASE_KEYSTORE_PATH`/`_PASSWORD`, `RELEASE_KEY_ALIAS`/
-`_PASSWORD`, set by `.gitea/workflows/build.yml` from repo secrets), then
-falls back to the debug key if neither is configured. As long as the same
-dedicated release keystore backs both `key.properties` locally and the
-Gitea secrets, local release builds and CI-built release APKs share one
-signature, so `adb install -r` works cleanly either way. A local checkout
-with no `key.properties` set up falls back to the (per-machine, ungitted)
-debug key, which won't match a CI-signed APK — installing one over the
-other still forces a full uninstall, since there's no way around Android's
-signature check from the tooling side.
+`_PASSWORD`, set from the same repo secrets by both `.gitea/workflows/
+build.yml`, triggered by `RC*` tags and producing a sideloadable APK, and
+`.gitea/workflows/release.yml`, triggered by `Release-*` tags and producing
+the `.aab` Play Console wants), then falls back to the debug key if neither
+is configured. As long as the same dedicated release keystore backs both
+`key.properties` locally and the Gitea secrets, local release builds and
+CI-built release APKs share one signature, so `adb install -r` works
+cleanly either way. A local checkout with no `key.properties` set up falls
+back to the (per-machine, ungitted) debug key, which won't match a
+CI-signed APK — installing one over the other still forces a full
+uninstall, since there's no way around Android's signature check from the
+tooling side.
 
 ## Dependencies
 
@@ -115,3 +131,16 @@ Networking is deliberately split: `package:http` for simple JSON/XML
 request-response calls, `package:dio` only where streaming/progress is
 needed (downloads). Don't introduce a third HTTP client — extend the
 existing split instead.
+
+## Play Store upload (CI)
+
+`.gitea/workflows/release.yml` (on `Release-*` tags) first checks the tag
+equals `Release-<pubspec version>`, builds the signed `.aab`, attaches it to a
+Gitea release, then uploads it with `r0adkll/upload-google-play` to the
+`internal` track as a **draft** (promote in Play Console, or edit
+`track`/`status` in the workflow). Requires the `PLAY_SERVICE_ACCOUNT_JSON`
+repo secret (service account with release permissions; the app's first
+release must be uploaded manually). Play rejects a repeated `versionCode`, so
+bump the `+N` in `pubspec.yaml` for every tag - re-tagging the same version
+will fail the upload. Release notes come from
+`distribution/whatsnew/whatsnew-en-US` (max 500 chars) - update per release.

.claude/context/styling.md

@@ -1,5 +1,21 @@
 # Styling
 
+**Migration in progress:** the target look is
+[`design-system/DESIGN_SYSTEM.md`](design-system/DESIGN_SYSTEM.md) — warm
+neutrals, one violet accent, pill controls, Schibsted Grotesk/Instrument
+Sans, no gradients/shadows — built from the `widgets/noo/` component kit
+(see "Noo design-system components" below). Rebuilt so far: the app shell
+(top/bottom bars, drawer, sidebar, toolbar), Files/Offline, Photos,
+Favorites, Recent, Activity, Trash, Shares, Settings, the lock screen,
+login, `ShareUploadView`, `MoveCopyDestinationPicker`,
+`MoveCopyConflictSheet`, the shared `Breadcrumbs` widget, and the file
+details/share bottom sheets/dialogs (`DetailsSheet`/`ShareSheet`). **Still on
+the pre-rework Material 3 theme** documented in "Theme" and "Reusable
+chrome" below: `FileViewerScreen` (the media viewer), `SearchView`, and
+`LoginWebviewView`. Update this file to describe each area as it gets
+reworked, rather than leaving stale Material 3 guidance next to a design
+system that's already superseded it.
+
 ## Theme
 
 All theming goes through [`AppTheme`](../../lib/theme/app_theme.dart)
@@ -14,10 +30,12 @@ widgets. Key points:
   OS-provided `ColorScheme` wins over the seed color — always thread both
   `dynamicScheme` and `useDynamicColor` through when adding a theme knob.
 - **Font**: Inter via `google_fonts`, applied through
-  `GoogleFonts.interTextTheme(...)`. In tests, set
-  `GoogleFonts.config.allowRuntimeFetching = false` in `setUpAll` — without
-  it, the font-fetch call to Google's CDN can stall `pumpAndSettle`
-  indefinitely (see `standards.md`).
+  `GoogleFonts.interTextTheme(...)`. Font files ship in
+  `assets/google_fonts/` (Instrument Sans, Schibsted Grotesk) and
+  `main()` sets `GoogleFonts.config.allowRuntimeFetching = false`, so the
+  app never contacts Google (the privacy policy on the website relies on
+  this — keep it true; add new weights as bundled files). Tests set the
+  same flag in `setUpAll` (see `standards.md`).
 - **Cards**: flat (`elevation: 0`), 20px rounded corners,
   `surfaceContainerLow`.
 - **App bars**: flat, not centered, `surface` background.
@@ -34,62 +52,238 @@ widgets. Key points:
   and no `scrollbarTheme` override (tried once, explicitly reverted). Don't
   reintroduce one without being asked.
 
+## Noo design-system components
+
+The rebuilt UI is assembled from `lib/widgets/noo/`, which implements
+`DESIGN_SYSTEM.md` §2–3. Build new screens from these rather than from raw
+Material widgets or the pre-rework chrome below.
+
+- **Tokens** live in [`design_tokens.dart`](../../lib/theme/design_tokens.dart):
+  colors via `context.nooColors` (a `NooColors` `ThemeExtension`), plus
+  `NooText`, `NooSpace`, `NooRadii`, `NooSizes`, `NooMotion` and
+  `nooDialogShadow`. `NooText` styles set no color; callers add it with
+  `copyWith(color: ...)`. Flutter's `TextStyle.height` is a multiple of font
+  size, so the spec's CSS line-height maps to it directly (for example,
+  0.9 → `height: 0.9`).
+- **Icons are Lucide** (`lucide_icons_flutter`, `LucideIcons.*`) inside
+  `noo/`, never Material `Icons.*`.
+- **Components are data-agnostic.** They take strings, icons, colors and
+  callbacks, not `NextcloudItem`/`AppTab`, so the screen layer maps models
+  onto them.
+- **Platform differences** are chosen with a flag rather than by reading the
+  platform inside the widget: `NooNavStyle` (`ios`/`android`, with
+  `NooNavStyle.fromPlatform`) for nav chrome, and `iosStyle` on rows and
+  cards for the ellipsis vs. vertical-ellipsis overflow icon.
+
+Catalog:
+
+| Folder | Components |
+|---|---|
+| `core/` | `NooButton`, `NooFab`, `NooChip`, `NooSegmentedControl`, `NooToggle`, `NooSearchField`, `NooAvatar`, `NooBadge`, `NooProgressBar` |
+| `lists/` | `NooGroupedList`, `NooSettingsRow`, `NooTabOrderRow`, `NooBanner`, `NooInfoNote` (tinted info callout; `SettingsSection(notice:)`), `NooSummaryCard`, `NooSelectionBar` |
+| `files/` | `NooFileKind` (spec §1.2 tiles; `NooFileKind.from(name:, mimeType:, isDirectory:)`), `NooFileTile`, `NooStatusIcon`/`NooSyncStatus`, `NooFileRow` (mobile 64px), `NooFileTableHeader`/`NooFileTableRow` (desktop), `NooSwipeAction` |
+| `media/` | `NooGridCard`, `NooPhotoTile` (video badge, selection), `NooPhotoGroupHeader`/`NooPhotoGrid` (sliver, or `.box`), `NooActivityItem`, `NooStatCard` |
+| `nav/` | `NooBottomBar`, `NooTopBar` (a `PreferredSizeWidget`) with `NooTopBarButton`/`NooTopBarBack`, `NooDrawer` with its `Account`/`Storage`/`Item`/`Link` parts, `NooSidebar` with `NooSidebarItem`/`Divider`/`Account`/`Storage`, `NooToolbar` (floating rounded card with margin; `NooToolbar.outerHeight` for `appBar` sizing) |
+| `overlays/` | `showNooSheet`, `showNooDialog`/`NooDialog`, `NooOverlayHeader`, `NooTextField`, and the share parts `NooShareSection`, `NooPersonAccessRow`, `NooPermissionPill` |
+
+Gotchas:
+- `NooDrawer` can't set its own scrim. The host `Scaffold` needs
+  `drawerScrimColor: context.nooColors.scrim`.
+- `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 - 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
+  `Theme.of(context).colorScheme` - the latter is Flutter's own Material 3
+  scheme, reseeded by the user's accent color choice (`AppTheme.light`/
+  `.dark`), so anything painted from it carries a faint hue of whatever
+  accent is picked instead of the app's neutral palette. `sticky_header_delegate.dart`
+  shipped with this bug once already (a pinned controls-row header tinted
+  by the accent instead of matching its screen's plain `colors.bg`).
+- `NooSegmentedControl` defaults to `onSurface: false` (`colors.surface`
+  fill) - right when it's sitting directly on `colors.bg` (List/Grid
+  toggle, Shares' scope switcher), but pass `onSurface: true` for one
+  placed inside a sheet or dialog (already `colors.surface`), or its pill
+  track blends invisibly into the sheet instead of reading as a grouped
+  control (Files'/Photos' sort and type-filter sheets do this).
+- Any `RefreshIndicator` needs `physics: const AlwaysScrollableScrollPhysics()`
+  on its scrollable child, or pull-to-refresh silently can't be triggered
+  once the list is short enough to fit the viewport (empty, or one item) -
+  every tab's `CustomScrollView` sets this explicitly for exactly that
+  reason.
+
 ## Reusable chrome
 
-- `MediaGridTile` (`lib/widgets/media_grid_tile.dart`): the full-bleed image/video
-  grid card with name/size scrim, shared by Files (server preview) and Offline
-  (local `FileImage`, images only - no video frame-extraction plugin, so offline
-  videos use the plain icon card). `ItemThumbnail` takes an optional `localFile`
-  for the same offline-image case in list tiles.
-- `FilesControlsRow` (`lib/widgets/files_controls_row.dart`): the
-  sort/hidden/scope/type-filter/view-mode row, shared by the Files and
-  Offline tabs (`showStorageScope: false` for Offline).
+**Rebuilt on the Noo design system** (Files/Offline, Photos, Favorites,
+Recent, Activity, Trash, Shares, Settings, the app shell, lock screen,
+login, `ShareUploadView`, `MoveCopyDestinationPicker`, `DetailsSheet` and
+`ShareSheet`): these no longer use the pieces below. Their own building
+blocks are noted where they matter:
 
+- `FilesControlsRow` (`lib/widgets/files_controls_row.dart`) — now built from
+  `NooChip`/`NooSegmentedControl`; still the sort/hidden/scope/type-filter/
+  view-mode row shared by Files and Offline (`showStorageScope: false` for
+  Offline), and reused as-is by Favorites.
+- `lib/widgets/files/file_breadcrumb_row.dart` — the noo-styled breadcrumb
+  trail Files uses in place of the shared
+  [`Breadcrumbs`](../../lib/widgets/breadcrumbs.dart) widget. `Breadcrumbs`
+  is now also noo-styled (same tokens, private-widget-turned-shared) — it's
+  used only by `ShareUploadView`/`MoveCopyDestinationPicker`, which is why
+  it was safe to restyle directly instead of forking another
+  `FileBreadcrumbRow`-style copy; don't move Files back onto it.
+  `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`.
+  `lib/widgets/shell/shell_common.dart` — account/storage formatting,
+  `openSettings`/`openSearch`, `showAccountSwitcher`, `ShellAvatarButton`,
+  `ShellSearchLauncher`, shared by the mobile and desktop shell chrome.
 - [`getItemIcon`/`getIconColor`/`ItemThumbnail`](../../lib/widgets/item_icon.dart)
-  — the icon/color/thumbnail treatment for a file or folder, shared by any
-  screen that lists `NextcloudItem`s the way the Files tab does (currently
-  `files_view.dart` and `share_upload_view.dart`'s destination picker).
-  Extend this rather than re-deriving per-type icons/colors at a new call
-  site.
-- [`DetailsHeader`](../../lib/widgets/details/details_sheet.dart) — the
-  icon-box/name/meta row every per-item bottom sheet opens on
-  (`DetailsSheet`, the media viewer's collapsed peek state, and
-  `ShareSheet`). Takes a `padding` override for callers whose own scroll
-  view already applies horizontal insets (`ShareSheet`'s `ListView`), so it
-  doesn't get doubled up. Reuse this instead of a bare title `Text` for any
-  new per-item sheet - a plain title reads as under-designed next to the
-  other sheets (a real instance: `ShareSheet` used to be just that).
+  — `getItemIcon`/`getIconColor` are superseded by `NooFileKind` in
+  rebuilt screens; `ItemThumbnail` is still reused as-is, fed into
+  `NooFileTile`/`NooFileRow`/`NooFileTableRow`/`NooGridCard`'s `thumbnail`
+  slot. `ShareUploadView`/`MoveCopyDestinationPicker` don't use any of the
+  three any more - both destination pickers now list folders only (see
+  below), and a folder never gets a real thumbnail (only image/video do),
+  so a plain `NooFileTile(kind: NooFileKind.folder)` covers every row.
+- `DetailsSheet`/`ShareSheet` (`lib/widgets/details/details_sheet.dart`,
+  `lib/widgets/share_sheet.dart`) are rebuilt: `showNooSheet`/`showNooDialog`
+  per `NooLayout.isDesktop`, with the header built from `detailsFileTile`
+  (a `NooFileTile` keyed by `NooFileKind.from`) and `detailsMetaLine` -
+  shared top-level helpers in `details_sheet.dart` so both sheets open on
+  the same header, replacing the old `DetailsHeader` widget. Neither sheet
+  uses `showGradualBottomSheet`'s drag-to-resize any more: `DetailsSheet`
+  swaps Info/Versions/Activity with a `NooSegmentedControl` (there's no
+  tab-strip component in the noo kit) instead of a `TabBar`/`TabBarView`,
+  and both sheets' content sits in one `Column` so `showNooSheet`'s/
+  `showNooDialog`'s own `SingleChildScrollView` handles overflow - a fixed
+  page per tab no longer needs a resizable sheet to see the rest.
+  `showGradualBottomSheet` (`lib/widgets/gradual_bottom_sheet.dart`) has no
+  remaining callers as a result.
+  `ShareSheet`'s "Share with people"/"Share link"/"Send file directly"
+  sections follow `DESIGN_SYSTEM.md` §4 via `NooShareSection`/
+  `NooPersonAccessRow`/`NooPermissionPill`; the permission pill and the
+  link's permission/expiry chips are read-only display (no
+  `ItemOperations` call updates a share's permission/expiry/password/
+  hide-download yet) - promote those to real controls once that exists.
+  Removing a person/group/email share is reachable by tapping their
+  permission pill, which opens a small "Remove access" menu.
+  [`MoveCopyConflictSheet`](../../lib/widgets/move_copy_conflict_sheet.dart)
+  is rebuilt: `showNooDialog`/`showNooSheet` (per `NooLayout.isDesktop`), a
+  `NooGroupedList` of file-tile rows with an inline
+  `NooSegmentedControl<ConflictChoice>` once "Decide per item" is picked,
+  and `NooButton`s for overwrite-all/keep-both/decide-per-item/confirm. Its
+  `show(BuildContext, List<MoveCopyConflict>)` API is unchanged.
 - [`FrostedGlassContainer`](../../lib/widgets/frosted_glass_container.dart) —
-  the blurred/translucent pill background shared by all floating chrome
-  (bottom nav bar, media-viewer top/bottom bars and video transport
-  controls). Reuse this for any new floating overlay instead of building a
-  new blur/shadow combo.
-- [`FloatingBottomNavBar`](../../lib/widgets/floating_bottom_bar.dart) — the
-  main tab bar; opacity/blur are user-adjustable settings
-  (`SettingsController.bottomBarOpacity`/`bottomBarBlur`), not constants —
-  pull new adjustable visual knobs from `SettingsController` the same way
-  rather than hardcoding them.
+  the blurred/translucent pill background for the media viewer's top/bottom
+  bars and video transport controls (its other former user, the floating
+  bottom nav bar, is gone - see below). Reuse this for any new floating
+  overlay instead of building a new blur/shadow combo.
+- `SettingsController.bottomBarOpacity`/`bottomBarBlur` and
+  `lib/widgets/floating_bottom_bar.dart`/`media_grid_tile.dart`/
+  `swipeable_item.dart`/`sync_status_badge.dart`/`selectable_thumbnail.dart`
+  are gone: the bottom bar is now the flat, non-blurred `NooBottomBar` (no
+  opacity/blur knob - flat surfaces per the design system), grid tiles are
+  `NooGridCard`, swipe actions are `NooSwipeAction`, and per-item sync
+  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 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`),
+  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 shared by all 8 tabs (see
-  `architecture.md`); also where the pull-to-refresh gesture thresholds and
-  the classic Material refresh spinner live. Its persistent compact chip
-  (icon + "Sync off"/"Syncing…"/"Synced"/"Sync issue") reflects device-sync
-  status (`SyncStatusController.syncHeaderStatus`), not the WebDAV-refresh
-  loading state the pull gesture itself triggers - that has its own,
-  separate floating spinner bubble, so nothing was lost by handing the
-  persistent text/icon over. The expanded panel's headline is a separate,
-  more detailed string (`_syncSummary` in `synced_header_scaffold.dart`) -
-  counts of what's actually configured to sync ("2 folders & 1 file
-  synced") rather than just repeating the chip's generic label.
-  Deliberately doesn't add up the individual files inside a synced folder
-  ("1 folder synced", not "1 folder & 4 items synced") - once a folder's
-  synced, its file count is an implementation detail, not something the
-  user picked.
-- [`SyncStatusBadge`](../../lib/widgets/sync_status_badge.dart) — the small
-  corner badge over a thumbnail showing per-item device-sync status
-  (`cloud_done`/`sync`, nothing for not-synced/conflict); used in Files'
-  list and grid tiles today. Reuse this rather than a new ad hoc badge if
-  another view starts showing sync status per item.
+  the pull-to-sync `CustomScrollView` header with the persistent sync-status
+  chip and pull-to-refresh gesture/spinner. Every screen (including
+  `ShareUploadView`/`MoveCopyDestinationPicker`, its last two users) has
+  dropped it for a plain `RefreshIndicator` + `CustomScrollView`
+  (device-sync status now shows per-row via `NooStatusIcon`/the Offline
+  `NooSummaryCard`, not a shared header chip), so the `SyncedHeaderScaffold`
+  class itself is now dead code - kept only because the same file's
+  top-level `formatBytes` helper is still widely used
+  (`files_view.dart`/`favorites_view.dart`/`shell_common.dart`/
+  `widgets/details/*`).
+- [`SegmentedIconGroup`/`ToggleIconButton`](../../lib/widgets/segmented_icon_toggle.dart)
+  and [`SortMenuButton`](../../lib/widgets/sort_menu_button.dart) — the
+  Material sort/filter-chip pieces `ShareUploadView`/
+  `MoveCopyDestinationPicker` used to mirror Files' old controls row with.
+  Both destination pickers dropped that whole row (they only ever browse
+  folders, so sort/hidden/scope/type-filter/grid controls don't apply), so
+  these two files are now dead code too - `Breadcrumbs` is the only shared
+  widget promoted to noo styling instead of removed, since Files' own
+  `FileBreadcrumbRow` proved the same trail is still wanted elsewhere.
 - [`SeekBarPainter`/`SeekBarPreview`](../../lib/widgets/seek_bar_painter.dart)
   — the four `MediaProgressBarStyle` presets (Default/Wavy/Slim/Squiggly)
   for the video player's seek bar, plus a perpetually-animated
@@ -127,4 +321,32 @@ widgets. Key points:
   ColorFilter.mode(colorScheme.onSurface, BlendMode.srcIn), ...)` so it
   reads correctly in both light and dark mode. Never the full-color
   `app_icon.png`/adaptive-icon assets for in-app UI — those are for the
-  launcher icon only (`flutter_launcher_icons` in `pubspec.yaml`).
+  launcher icon only. The launcher icon is maintained by hand from an
+  IconKitchen export (`mipmap-*` in `android/app/src/main/res`); there is no
+  generator step. `assets/icon/app_icon_monochrome.png` is deliberately a
+  tightly-cropped glyph (unlike the launcher's safe-zone-padded monochrome
+  layer), so it renders at a sensible size at 72-80px.
+
+## Text/markdown viewer
+
+`MediaTextPreview` is an editable monospace `TextField` padded clear of the status bar, top bar and action bar; a Save button appears when dirty (read-only for offline copies). `NooPersonAccessRow.trailing` replaces the owner label/permission pill (used by share-search results). Sheets whose close button lives in `showNooSheet` children must pop via a `Builder` context, not the caller's.
+
+`showNooSheet` insets its body by the keyboard (`viewInsets.bottom`) so focused fields stay visible; the body's widget structure must not change when the keyboard opens, or the sheet content is rebuilt and loses focus.
+
+Markdown files (`.md`/`.markdown`) in `MediaTextPreview` open rendered via `flutter_markdown_plus` (`Markdown`, styled from Noo tokens in `_markdownStyle`), with a top-right Edit/Preview toggle (hidden for read-only offline copies). Other text files go straight to the editor.
+
+`ShareSheet`: focusing the people search field does not scroll; once the user types, `_revealPeopleSection` animates the "Share with people" section (keyed by `_peopleKey` on the `NooShareSection`, not the inner column) to just below the sheet's top edge with a small gap.
+
+## Desktop/tablet layout notes
+
+- The desktop branch in `main.dart` is wrapped in `SafeArea` so tablets keep
+  system bars clear of the sidebar; the sidebar has no divider between pinned
+  and hidden tabs.
+- Desktop Settings is the same two-level menu as mobile (centered 640px column, back button in the floating toolbar); the
+  pushed category screens render the desktop card layout.
+- Settings that don't apply in wide-tablet (Appearance nav options,
+  Swipe on a file) show a `NooInfoNote` via `SettingsSection.notice`.
+- Mobile-layout grids (Files, Favorites, move/copy picker, share upload,
+  Photos) take their column count from `NooLayout.gridColumns` (min tile
+  width, never below the phone count), so a tablet in portrait gets more
+  columns rather than a few huge tiles.

.gitea/workflows/release.yml

@@ -0,0 +1,105 @@
+name: Build App Bundle
+
+# Deliberately not "on every push" - only when a real release tag (Release-1.0.0,
+# Release-1.2.3, ...) is pushed. Tag the commit you want built:
+#   git tag Release-1.0.0 && git push origin Release-1.0.0
+# Unlike the RC* flow (build.yml), this builds the .aab Play Console wants,
+# not a sideloadable .apk.
+on:
+  push:
+    tags:
+      - "Release-*"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up JDK 17
+        uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: "17"
+
+      - name: Set up Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          channel: stable
+
+      - name: Set up Android SDK
+        uses: android-actions/setup-android@v3
+        with:
+          # Google removed the legacy standalone "tools" package from the
+          # SDK repository (~Sep 2026); the action's own default packages
+          # list ("tools platform-tools") now makes its internal sdkmanager
+          # call fail for everyone. platform-tools is all this step needs
+          # to install itself - flutter build fetches whatever
+          # platform/build-tools versions it actually needs on its own.
+          packages: "platform-tools"
+
+      - name: Check tag matches pubspec version
+        # Play rejects a repeated versionCode and a mismatched tag would
+        # publish the wrong version name, so fail fast before building.
+        run: |
+          VERSION=$(grep '^version:' pubspec.yaml | sed 's/version: //' | cut -d'+' -f1)
+          if [ "${GITHUB_REF_NAME}" != "Release-${VERSION}" ]; then
+            echo "Tag ${GITHUB_REF_NAME} does not match pubspec version ${VERSION}" >&2
+            exit 1
+          fi
+
+      - name: Install dependencies
+        run: flutter pub get
+
+      - name: Analyze
+        run: flutter analyze
+
+      - name: Decode release keystore
+        # Same key as the RC* APK builds, so a Play Store upload's signature
+        # matches anything sideloaded from a release build. See
+        # android/app/build.gradle.kts.
+        run: echo "$RELEASE_KEYSTORE_BASE64" | base64 -d > "${{ runner.temp }}/release-keystore.jks"
+        env:
+          RELEASE_KEYSTORE_BASE64: ${{ secrets.RELEASE_KEYSTORE_BASE64 }}
+
+      - name: Build release App Bundle
+        run: flutter build appbundle --release
+        env:
+          RELEASE_KEYSTORE_PATH: ${{ runner.temp }}/release-keystore.jks
+          RELEASE_KEYSTORE_PASSWORD: ${{ secrets.RELEASE_KEYSTORE_PASSWORD }}
+          RELEASE_KEY_ALIAS: ${{ secrets.RELEASE_KEY_ALIAS }}
+          RELEASE_KEY_PASSWORD: ${{ secrets.RELEASE_KEY_PASSWORD }}
+
+      - name: Rename bundle to Noo-<version>.aab
+        run: |
+          VERSION=$(grep '^version:' pubspec.yaml | sed 's/version: //' | cut -d'+' -f1)
+          mkdir -p release
+          cp build/app/outputs/bundle/release/app-release.aab "release/Noo-${VERSION}.aab"
+          echo "AAB_PATH=release/Noo-${VERSION}.aab" >> "$GITHUB_ENV"
+          echo "VERSION=${VERSION}" >> "$GITHUB_ENV"
+
+      - name: Publish Gitea release with App Bundle attached
+        # Gitea-native release action (not GitHub's) - authenticates and
+        # talks to this same Gitea instance automatically via the
+        # `github.token`/`github.server_url` context Gitea Actions
+        # provides for compatibility. Release is named/tagged after
+        # whatever tag triggered this run (e.g. "Release-1.0.0").
+        uses: akkuman/gitea-release-action@v1
+        with:
+          files: ${{ env.AAB_PATH }}
+
+      - name: Upload to Google Play (internal track, draft)
+        # Stages the build only; promote it in Play Console, or change
+        # `status` to "completed" (and/or `track`) to roll out automatically.
+        # Needs the PLAY_SERVICE_ACCOUNT_JSON repo secret, and the app's
+        # first release must already have been uploaded by hand.
+        uses: r0adkll/upload-google-play@v1
+        with:
+          serviceAccountJsonPlainText: ${{ secrets.PLAY_SERVICE_ACCOUNT_JSON }}
+          packageName: dev.ayushya.noo
+          releaseFiles: ${{ env.AAB_PATH }}
+          releaseName: ${{ env.VERSION }}
+          track: internal
+          status: draft
+          whatsNewDirectory: distribution/whatsnew

.gitignore

@@ -44,3 +44,4 @@ app.*.map.json
 /android/app/debug
 /android/app/profile
 /android/app/release
+

CLAUDE.md

@@ -15,6 +15,11 @@ relevant file(s) before working in that area rather than loading all of them:
   conventions, fonts, reusable chrome widgets
 - [`standards.md`](.claude/context/standards.md) — code style, comment
   conventions, linting, testing
+- [`design-system/DESIGN_SYSTEM.md`](.claude/context/design-system/DESIGN_SYSTEM.md)
+  — the target visual/component spec (tokens, components, platform
+  mapping, screen recipes) for the in-progress UI rework; the sibling
+  `.dc.html`/`noo-kit.js` files it references are the visual/token
+  reference builds, not something to read directly
 
 ## Common commands
 

android/app/src/main/kotlin/dev/ayushya/noo/MainActivity.kt

@@ -56,6 +56,7 @@ class MainActivity : FlutterFragmentActivity() {
     private val newPickChannelName = "dev.ayushya.noo/pick_intent/new"
     private val syncServiceChannelName = "dev.ayushya.noo/sync_service"
     private val syncStatusChannelName = "dev.ayushya.noo/sync_service/status"
+    private val uploadStatusChannelName = "dev.ayushya.noo/upload_service/status"
     private val notificationPermissionRequestCode = 4202
     // Lazy, not a field initializer - `packageName` reads through the
     // Activity's base Context, which isn't attached yet while this class's
@@ -66,6 +67,7 @@ class MainActivity : FlutterFragmentActivity() {
     private var newShareSink: EventChannel.EventSink? = null
     private var newPickSink: EventChannel.EventSink? = null
     private var syncStatusListener: ((SyncStatusBus.Status) -> Unit)? = null
+    private var uploadCompletedListener: ((UploadEventBus.Completed) -> Unit)? = null
 
     override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
         super.configureFlutterEngine(flutterEngine)
@@ -157,6 +159,29 @@ class MainActivity : FlutterFragmentActivity() {
                     syncStatusListener = null
                 }
             })
+
+        EventChannel(flutterEngine.dartExecutor.binaryMessenger, uploadStatusChannelName)
+            .setStreamHandler(object : EventChannel.StreamHandler {
+                override fun onListen(arguments: Any?, events: EventChannel.EventSink) {
+                    val listener: (UploadEventBus.Completed) -> Unit = { completed ->
+                        mainHandler.post {
+                            events.success(
+                                mapOf(
+                                    "remoteFolder" to completed.remoteFolder,
+                                    "succeeded" to completed.succeeded,
+                                    "failed" to completed.failed,
+                                ),
+                            )
+                        }
+                    }
+                    uploadCompletedListener = listener
+                    UploadEventBus.subscribe(listener)
+                }
+                override fun onCancel(arguments: Any?) {
+                    uploadCompletedListener?.let { UploadEventBus.unsubscribe(it) }
+                    uploadCompletedListener = null
+                }
+            })
     }
 
     /// [accountIdOverride] is the account Dart is asking about - needed

android/app/src/main/kotlin/dev/ayushya/noo/ShareUploadService.kt

@@ -185,6 +185,13 @@ class ShareUploadService : Service() {
             else -> "Uploaded $succeeded of ${batch.files.size} files - $failed failed"
         }
         manager().notify(NOTIFICATION_ID, buildFinalNotification(finalText))
+        // batch.remoteFolder, not the locally-normalized cleanFolder - Dart's
+        // FilesController.currentFolderPath never carries the trailing
+        // slash cleanFolder adds, so publishing the original value lets the
+        // Dart side compare them directly with no reformatting of its own.
+        if (succeeded > 0) {
+            UploadEventBus.publishCompleted(batch.remoteFolder, succeeded, failed)
+        }
 
         if (queue.pendingCount == 0) {
             stopForeground(STOP_FOREGROUND_DETACH)

android/app/src/main/kotlin/dev/ayushya/noo/UploadEventBus.kt

@@ -0,0 +1,39 @@
+package dev.ayushya.noo
+
+/**
+ * In-memory, in-process pub/sub for "an upload batch just finished" -
+ * [ShareUploadService] publishes into this, `MainActivity`'s
+ * `dev.ayushya.noo/upload_service/status` EventChannel forwards it to Dart
+ * so `FilesController` can refresh the destination folder if it's the one
+ * currently on screen, without a manual pull-to-refresh. See
+ * [SyncStatusBus]'s identical shape/rationale - the service and the
+ * Activity always run in the same process, so plain in-memory pub/sub is
+ * enough. Unlike that bus, this only ever carries discrete "just finished"
+ * events, not ongoing state, so there's nothing to replay to a listener
+ * that subscribes late.
+ */
+object UploadEventBus {
+    data class Completed(
+        val remoteFolder: String,
+        val succeeded: Int,
+        val failed: Int,
+    )
+
+    private val listeners = mutableListOf<(Completed) -> Unit>()
+
+    @Synchronized
+    fun subscribe(listener: (Completed) -> Unit) {
+        listeners.add(listener)
+    }
+
+    @Synchronized
+    fun unsubscribe(listener: (Completed) -> Unit) {
+        listeners.remove(listener)
+    }
+
+    @Synchronized
+    fun publishCompleted(remoteFolder: String, succeeded: Int, failed: Int) {
+        val event = Completed(remoteFolder, succeeded, failed)
+        listeners.toList().forEach { it(event) }
+    }
+}

distribution/whatsnew/whatsnew-en-US

@@ -0,0 +1 @@
+Improved tablet layout: sidebar navigation, floating title bars, and adaptive grids. Long-press selection and Settings submenus now work on tablets.

lib/main.dart

@@ -1,6 +1,8 @@
 import 'dart:async';
 import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -22,15 +24,29 @@ import 'providers/trash_controller.dart';
 import 'services/pick_intent_service.dart';
 import 'services/share_intent_service.dart';
 import 'theme/app_theme.dart';
+import 'theme/design_tokens.dart';
 import 'views/lock_screen_view.dart';
 import 'views/login_view.dart';
-import 'views/search_view.dart';
 import 'views/share_upload_view.dart';
+import 'widgets/app_drawer.dart';
 import 'widgets/app_tab_view_builder.dart';
-import 'widgets/floating_bottom_bar.dart';
+import 'widgets/app_top_bar.dart';
+import 'widgets/bottom_nav_bar.dart';
+import 'widgets/create_menu.dart';
+import 'widgets/noo/core/noo_avatar.dart';
+import 'widgets/noo/core/noo_button.dart';
+import 'widgets/noo/core/noo_fab.dart';
+import 'widgets/noo/nav/noo_nav_style.dart';
+import 'widgets/noo/nav/noo_sidebar.dart';
+import 'widgets/noo/nav/noo_toolbar.dart';
+import 'widgets/noo/noo_layout.dart';
+import 'widgets/noo/overlays/noo_dialog.dart';
+import 'widgets/shell/shell_common.dart';
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
+  // Fonts ship in assets/google_fonts; never fetch them from Google at runtime.
+  GoogleFonts.config.allowRuntimeFetching = false;
   runApp(
     MultiProvider(
       // Split out of the former single `ServerProvider` god object - see
@@ -61,8 +77,7 @@ void main() {
               SyncStatusController(context.read(), context.read()),
         ),
         ChangeNotifierProvider(
-          create: (context) =>
-              PhotosController(context.read(), context.read()),
+          create: (context) => PhotosController(context.read(), context.read()),
         ),
         ChangeNotifierProvider(
           create: (context) =>
@@ -143,21 +158,19 @@ class _SplashView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
+    final colors = context.nooColors;
     return Scaffold(
+      backgroundColor: colors.bg,
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             // The monochrome adaptive-icon layer is a plain white silhouette
             // on transparent, meant to be tinted rather than shown as-is -
-            // srcIn recolors it to the theme's foreground so it reads
-            // correctly in both light and dark mode.
+            // srcIn recolors it to fg-1 so it reads correctly in both light
+            // and dark mode.
             ColorFiltered(
-              colorFilter: ColorFilter.mode(
-                colorScheme.onSurface,
-                BlendMode.srcIn,
-              ),
+              colorFilter: ColorFilter.mode(colors.fg1, BlendMode.srcIn),
               child: Image.asset(
                 'assets/icon/app_icon_monochrome.png',
                 width: 72,
@@ -170,7 +183,7 @@ class _SplashView extends StatelessWidget {
               height: 22,
               child: CircularProgressIndicator(
                 strokeWidth: 2.5,
-                color: colorScheme.primary,
+                color: colors.accent,
               ),
             ),
           ],
@@ -246,26 +259,34 @@ class _MainShellViewState extends State<MainShellView> {
     if (status.isGranted || status.isPermanentlyDenied) return;
     if (!mounted) return;
 
-    final shouldRequest = await showDialog<bool>(
-      context: context,
+    final colors = context.nooColors;
+    final shouldRequest = await showNooDialog<bool>(
+      context,
+      title: 'Allow notifications?',
       barrierDismissible: false,
-      builder: (context) => AlertDialog(
-        title: const Text('Allow notifications?'),
-        content: const Text(
+      children: [
+        Text(
           'Noo shows upload and download progress as a notification, so '
           'you can track transfers that keep running in the background.',
+          style: NooText.body.copyWith(color: colors.fg2),
         ),
-        actions: [
-          TextButton(
-            onPressed: () => Navigator.of(context).pop(false),
-            child: const Text('Not now'),
-          ),
-          FilledButton(
-            onPressed: () => Navigator.of(context).pop(true),
-            child: const Text('Allow'),
-          ),
-        ],
-      ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          spacing: 10,
+          children: [
+            NooButton(
+              variant: NooButtonVariant.secondary,
+              onTap: () => Navigator.of(context).pop(false),
+              child: const Text('Not now'),
+            ),
+            NooButton(
+              variant: NooButtonVariant.primary,
+              onTap: () => Navigator.of(context).pop(true),
+              child: const Text('Allow'),
+            ),
+          ],
+        ),
+      ],
     );
     if (shouldRequest == true) {
       await Permission.notification.request();
@@ -294,9 +315,15 @@ class _MainShellViewState extends State<MainShellView> {
 
   @override
   Widget build(BuildContext context) {
+    final colors = context.nooColors;
     final settings = context.watch<SettingsController>();
     final pick = context.watch<PickController>();
     final connectivity = context.watch<ConnectivityController>();
+    final session = context.watch<SessionController>();
+    final quota = context.watch<FilesController>().quota;
+    // Cheap and already loaded once the Trash tab has been visited this
+    // session - not worth adding a fetch just to populate a nav badge.
+    final trashCount = context.watch<TrashController>().items.length;
 
     // A one-shot request (e.g. tapping a search result) to switch tabs -
     // consumed here so it only fires once, then cleared after this frame
@@ -317,24 +344,236 @@ class _MainShellViewState extends State<MainShellView> {
     // user's own hidden/reordered tab settings rather than respecting
     // them, since picking is a separate mode from normal browsing. With
     // no network at all, every other tab would just show its own loading
-    // spinner forever/an error state, so the bottom nav collapses to just
-    // Offline - the one tab that works without a connection (see
+    // spinner forever/an error state, so the nav collapses to just Offline
+    // - the one tab that works without a connection (see
     // `FilesView(offline: true)`/`ConnectivityController`).
-    final visible = pickRequest != null
+    final overrideActive = pickRequest != null || connectivity.isOffline;
+    final pinnedTabs = pickRequest != null
         ? [AppTab.files, AppTab.photos]
         : connectivity.isOffline
         ? [AppTab.offline]
         : settings.visibleTabs;
-    final selectedTab = visible.contains(_currentTab)
-        ? _currentTab
-        : (visible.isNotEmpty ? visible.first : AppTab.files);
-    final selectedIndex = visible
-        .indexOf(selectedTab)
-        .clamp(0, visible.isEmpty ? 0 : visible.length - 1);
+    // The drawer/sidebar's "More" section - hidden while an override above
+    // is active, same as the drawer itself being unavailable during pick.
+    final hiddenTabs = overrideActive
+        ? const <AppTab>[]
+        : settings.tabOrder
+              .where((t) => settings.hiddenTabs.contains(t))
+              .toList();
 
-    final navItems = visible
-        .map((tab) => FloatingNavItem(label: tab.label, icon: tab.icon))
-        .toList();
+    // A tab opened from "More" isn't one of the pinned destinations, but
+    // should stay shown and selected (with no destination highlighted in
+    // the bottom bar/sidebar) until the user taps a pinned or another
+    // "More" tab.
+    final displayTabs = !overrideActive && !pinnedTabs.contains(_currentTab)
+        ? [...pinnedTabs, _currentTab]
+        : pinnedTabs;
+    final selectedTab = displayTabs.contains(_currentTab)
+        ? _currentTab
+        : (displayTabs.isNotEmpty ? displayTabs.first : AppTab.files);
+    final selectedIndex = displayTabs
+        .indexOf(selectedTab)
+        .clamp(0, displayTabs.isEmpty ? 0 : displayTabs.length - 1);
+    final pinnedIndex = pinnedTabs.indexOf(selectedTab);
+
+    void selectTab(AppTab tab) {
+      if (tab == _currentTab) return;
+      setState(() => _currentTab = tab);
+    }
+
+    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]!,
+                  topBar: isDesktop || pickRequest != null
+                      ? null
+                      : AppTopBar(
+                          style: navStyle,
+                          tab: tab,
+                          searchInBottomBar: showBottomBarSearch,
+                          navMenuStyle: settings.navMenuStyle,
+                        ),
+                ),
+              )
+              .toList(),
+        ),
+        if (pick.isDownloadingForPick) const _PickingProgressOverlay(),
+      ],
+    );
+
+    final canUpload =
+        pickRequest == null &&
+        (selectedTab == AppTab.files || selectedTab == AppTab.photos);
+
+    Widget scaffold;
+    if (isDesktop) {
+      scaffold = Scaffold(
+        backgroundColor: colors.bg,
+        // Tablets keep the system bars, so inset for them (desktop's
+        // insets are zero).
+        body: SafeArea(
+          child: Row(
+            children: [
+              NooSidebar(
+                account: NooSidebarAccount(
+                  avatar: NooAvatar(
+                    initials: accountInitial(session.username),
+                    current: true,
+                    size: 32,
+                  ),
+                  name: session.username,
+                  subtitle: serverHost(session.serverUrl),
+                  onTap: () => showAccountSwitcher(context),
+                ),
+                items: [
+                  for (final tab in pinnedTabs)
+                    NooSidebarItem(
+                      icon: tab.icon,
+                      label: tab.label,
+                      count: trashBadge(tab),
+                      selected: tab == selectedTab,
+                      onTap: () => selectTab(tab),
+                    ),
+                  for (final tab in hiddenTabs)
+                    NooSidebarItem(
+                      icon: tab.icon,
+                      label: tab.label,
+                      count: trashBadge(tab),
+                      selected: tab == selectedTab,
+                      onTap: () => selectTab(tab),
+                    ),
+                ],
+                storage: NooSidebarStorage(
+                  value: quotaFraction(quota),
+                  detail: quotaDetail(quota),
+                ),
+                settings: NooSidebarItem(
+                  icon: LucideIcons.settings,
+                  label: 'Settings',
+                  onTap: () => openSettings(context),
+                ),
+              ),
+              Expanded(
+                child: Column(
+                  children: [
+                    NooToolbar(
+                      title: selectedTab.label,
+                      search: const ShellSearchLauncher(onSurface: true),
+                      actions: [
+                        if (canUpload)
+                          NooButton(
+                            icon: LucideIcons.upload,
+                            onTap: () => showCreateMenu(context),
+                            child: const Text('Upload'),
+                          ),
+                      ],
+                    ),
+                    Expanded(
+                      child: ColoredBox(color: colors.surface, child: tabStack),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+    } else {
+      final bottomBarStyle = settings.bottomBarStyle;
+      scaffold = Scaffold(
+        backgroundColor: colors.bg,
+        drawerScrimColor: colors.scrim,
+        // 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
+        // short of it like attached does.
+        extendBody: bottomBarStyle == NooBottomBarStyle.floating,
+        // Android-only extended Upload FAB - iOS uses the top bar's `plus`
+        // instead (see AppTopBar). Stays mounted across every tab (picking
+        // aside) and collapses to an icon-only circle off Files/Photos,
+        // rather than the Scaffold popping it fully in/out on every tab
+        // switch - see NooFab's [collapsed].
+        floatingActionButton:
+            pickRequest == null && navStyle == NooNavStyle.android
+            ? NooFab(
+                collapsed: !canUpload,
+                barStyle: bottomBarStyle,
+                onTap: () => showCreateMenu(context),
+              )
+            : null,
+        body: tabStack,
+        bottomNavigationBar: BottomNavBar(
+          style: navStyle,
+          barStyle: bottomBarStyle,
+          tabs: pinnedTabs,
+          selectedIndex: pinnedIndex,
+          onSearchTap: showBottomBarSearch ? () => openSearch(context) : null,
+          onDestinationSelected: (index) {
+            final tappedTab = pinnedTabs[index];
+            if (tappedTab == _currentTab) {
+              if (settings.tapTabToScrollTop) {
+                final controller = _scrollControllers[tappedTab];
+                // `hasClients` only means a position is attached - not that
+                // it's finished its first layout. Calling animateTo before
+                // that throws deep inside Flutter's ballistic-scroll code
+                // (min/maxScrollExtent are still null), and since this
+                // fires synchronously from the nav bar's tap handler, the
+                // exception corrupts that tab's scroll view instead of
+                // just being logged - a real crash seen in the wild
+                // (Files rendering empty after re-tapping its own tab).
+                if (controller != null &&
+                    controller.hasClients &&
+                    controller.position.hasContentDimensions) {
+                  controller.animateTo(
+                    0,
+                    duration: const Duration(milliseconds: 300),
+                    curve: Curves.easeOutCubic,
+                  );
+                }
+              }
+              return;
+            }
+            selectTab(tappedTab);
+          },
+        ),
+      );
+    }
 
     return PopScope(
       // While picking, system back cancels the pick (and tells the caller
@@ -344,53 +583,7 @@ class _MainShellViewState extends State<MainShellView> {
       onPopInvokedWithResult: (didPop, result) {
         if (!didPop && pickRequest != null) pick.cancelPick();
       },
-      child: Scaffold(
-        body: Stack(
-          children: [
-            IndexedStack(
-              index: selectedIndex,
-              children: visible
-                  .map((tab) => buildAppTabView(tab, _scrollControllers[tab]!))
-                  .toList(),
-            ),
-            if (pick.isDownloadingForPick) const _PickingProgressOverlay(),
-            // Each tab now renders its own sticky selection toolbar inline
-            // (right under its sort/filter row) instead of this shell
-            // swapping in a shared floating bar - the bottom nav stays put
-            // and usable regardless of selection state.
-            FloatingBottomNavBar(
-              selectedIndex: selectedIndex,
-              items: navItems,
-              opacity: settings.bottomBarOpacity,
-              blurSigma: settings.bottomBarBlur,
-              onDestinationSelected: (index) {
-                final tappedTab = visible[index];
-                if (tappedTab == _currentTab) {
-                  if (settings.tapTabToScrollTop) {
-                    final controller = _scrollControllers[tappedTab];
-                    if (controller != null && controller.hasClients) {
-                      controller.animateTo(
-                        0,
-                        duration: const Duration(milliseconds: 300),
-                        curve: Curves.easeOutCubic,
-                      );
-                    }
-                  }
-                  return;
-                }
-                setState(() {
-                  _currentTab = tappedTab;
-                });
-              },
-              onSearchTap: () {
-                Navigator.of(
-                  context,
-                ).push(MaterialPageRoute(builder: (_) => const SearchView()));
-              },
-            ),
-          ],
-        ),
-      ),
+      child: scaffold,
     );
   }
 }
@@ -403,21 +596,27 @@ class _PickingProgressOverlay extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final colors = context.nooColors;
     return Positioned.fill(
       child: ColoredBox(
-        color: Colors.black.withValues(alpha: 0.35),
-        child: const Center(
-          child: Card(
-            child: Padding(
-              padding: EdgeInsets.all(24),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  CircularProgressIndicator(),
-                  SizedBox(height: 16),
-                  Text('Preparing file...'),
-                ],
-              ),
+        color: colors.scrim,
+        child: Center(
+          child: Container(
+            padding: const EdgeInsets.all(24),
+            decoration: BoxDecoration(
+              color: colors.surface,
+              borderRadius: BorderRadius.circular(NooRadii.dialog),
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                CircularProgressIndicator(color: colors.accent),
+                const SizedBox(height: 16),
+                Text(
+                  'Preparing file…',
+                  style: NooText.body.copyWith(color: colors.fg1),
+                ),
+              ],
             ),
           ),
         ),

lib/models/app_tab.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:material_symbols_icons/symbols.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 
 /// Every destination the bottom nav bar can show. Order here is only the
 /// fallback default — actual order/visibility/default-tab are user
@@ -16,8 +16,13 @@ enum AppTab {
 }
 
 /// At most this many tabs may be visible in the bottom nav bar at once —
-/// the rest are reachable through the "more" dropdown instead.
-const int maxVisibleTabs = 5;
+/// the rest are reachable through the "more" dropdown instead. The
+/// effective cap a screen should actually use is
+/// [SettingsController.maxVisibleTabs], not this directly - it's one
+/// lower than this while `searchInBottomBar` is on, since Search then
+/// takes the freed-up slot itself rather than competing with the user's
+/// own reorderable tabs for one of these.
+const int defaultMaxVisibleTabs = 5;
 
 extension AppTabInfo on AppTab {
   String get label {
@@ -41,24 +46,26 @@ extension AppTabInfo on AppTab {
     }
   }
 
+  // Lucide icon mapping per DESIGN_SYSTEM.md 1.5 - the Lucide icon slug is
+  // named in a comment where it doesn't match the Dart identifier.
   IconData get icon {
     switch (this) {
       case AppTab.files:
-        return Icons.folder_rounded;
+        return LucideIcons.folder;
       case AppTab.photos:
-        return Icons.photo_library_rounded;
+        return LucideIcons.images;
       case AppTab.favorites:
-        return Icons.favorite_rounded;
+        return LucideIcons.star;
       case AppTab.activity:
-        return Icons.electric_bolt_rounded;
+        return LucideIcons.activity;
       case AppTab.trash:
-        return Icons.delete_outline_rounded;
+        return LucideIcons.trash2; // trash-2
       case AppTab.shares:
-        return Icons.groups_rounded;
+        return LucideIcons.share2; // share-2
       case AppTab.recent:
-        return Symbols.search_activity_rounded;
+        return LucideIcons.clock;
       case AppTab.offline:
-        return Icons.offline_pin_rounded;
+        return LucideIcons.hardDriveDownload; // hard-drive-download
     }
   }
 }

lib/models/selection_action.dart

@@ -1,16 +1,91 @@
 import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+/// A bulk action's identity, stable across the dynamic icon/label a
+/// [SelectionAction] actually renders (e.g. `favorite` covers both
+/// "Favorite" and "Remove from favorites"). This is what the user's
+/// configured [order] - Settings' "Action bar" reorder list - and
+/// [NooSelectionBar]'s inline/overflow split key off, since the live
+/// [SelectionAction] list is rebuilt fresh on every selection change and
+/// can't be compared by icon/label alone.
+///
+/// Not every screen offers every kind (e.g. Favorites has no `rename` or
+/// `sync`) - [orderSelectionActions] just skips whatever kind a screen
+/// didn't build.
+enum SelectionActionKind {
+  favorite,
+  share,
+  download,
+  delete,
+  copy,
+  move,
+  rename,
+  sync,
+  details;
+
+  /// Generic label for the Settings reorder row - the live bar uses each
+  /// screen's own contextual label (e.g. "Remove from favorites") instead.
+  String get label => switch (this) {
+    SelectionActionKind.favorite => 'Favorite',
+    SelectionActionKind.share => 'Share',
+    SelectionActionKind.download => 'Download',
+    SelectionActionKind.delete => 'Delete',
+    SelectionActionKind.copy => 'Copy',
+    SelectionActionKind.move => 'Move',
+    SelectionActionKind.rename => 'Rename',
+    SelectionActionKind.sync => 'Sync to device',
+    SelectionActionKind.details => 'Details',
+  };
+
+  IconData get icon => switch (this) {
+    SelectionActionKind.favorite => LucideIcons.star,
+    SelectionActionKind.share => LucideIcons.share2,
+    SelectionActionKind.download => LucideIcons.download,
+    SelectionActionKind.delete => LucideIcons.trash2,
+    SelectionActionKind.copy => LucideIcons.copy,
+    SelectionActionKind.move => LucideIcons.folderInput,
+    SelectionActionKind.rename => LucideIcons.filePen,
+    SelectionActionKind.sync => LucideIcons.hardDriveDownload,
+    SelectionActionKind.details => LucideIcons.info,
+  };
+}
 
 /// One bulk action available for the current multi-selection (e.g. favorite,
 /// download, delete), shown as an icon button in the sticky selection
 /// toolbar each tab (Files, Photos, ...) renders inline in its own content.
 class SelectionAction {
+  final SelectionActionKind kind;
   final IconData icon;
   final String label;
   final VoidCallback onTap;
 
   const SelectionAction({
+    required this.kind,
     required this.icon,
     required this.label,
     required this.onTap,
   });
 }
+
+/// Reorders [actions] to match the user's configured [order] (Settings'
+/// "Action bar" section, [SelectionActionKind] values) - this is what makes
+/// that setting take effect, since it's [order] that decides which actions
+/// land in `NooSelectionBar`'s inline slots vs. behind "More". A kind in
+/// [order] the caller didn't build (e.g. `rename` on a multi-item
+/// selection) is just skipped; a kind [actions] has that [order] doesn't
+/// mention (e.g. a kind added in a later app update, before the saved
+/// order is migrated - see [SettingsController.selectionActionOrder]) is
+/// appended at the end in its original position.
+List<SelectionAction> orderSelectionActions(
+  List<SelectionAction> actions,
+  List<SelectionActionKind> order,
+) {
+  final byKind = {for (final a in actions) a.kind: a};
+  final ordered = <SelectionAction>[];
+  for (final kind in order) {
+    final action = byKind.remove(kind);
+    if (action != null) ordered.add(action);
+  }
+  ordered.addAll(byKind.values);
+  return ordered;
+}

lib/providers/files_controller.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import '../models/nextcloud_item.dart';
+import '../services/upload_service.dart';
 import 'folder_browser.dart';
 import 'session_controller.dart';
 
@@ -107,6 +108,22 @@ class FilesController extends ChangeNotifier
     session.addAccountClearedListener(_onAccountCleared);
     session.addAccountActivatedListener(_onAccountActivated);
     session.addAccountReadyListener(_restoreDisplayPrefs);
+    // Refreshes automatically once an upload finishes, so a file shared/
+    // uploaded into the folder currently on screen shows up without a
+    // manual pull-to-refresh - uploads run in an Android foreground
+    // service (see UploadService's doc comment) with no other way back to
+    // this controller.
+    _uploadSub = UploadService.completions.listen(_onUploadCompleted);
+  }
+
+  StreamSubscription<UploadCompletion>? _uploadSub;
+
+  void _onUploadCompleted(UploadCompletion completion) {
+    // refreshData() always hits the network regardless of cache freshness
+    // (see its own doc comment), so there's nothing to invalidate first -
+    // it overwrites this folder's cache entry once the fetch lands.
+    if (completion.remoteFolder != _currentFolderPath) return;
+    refreshData();
   }
 
   // Getters
@@ -266,7 +283,8 @@ class FilesController extends ChangeNotifier
   /// sort, cache policy) - hooked to `addAccountReadyListener` as well as
   /// activation so the Offline tab, which reads these same prefs, respects
   /// them even on a provisional/offline login where activation never fires.
-  Future<void> _restoreDisplayPrefs() => _prefsRestore ??= _doRestoreDisplayPrefs();
+  Future<void> _restoreDisplayPrefs() =>
+      _prefsRestore ??= _doRestoreDisplayPrefs();
 
   /// Completes once this account's cache policy/display prefs have been
   /// loaded from storage - lets `SyncStatusController` schedule background
@@ -334,7 +352,9 @@ class FilesController extends ChangeNotifier
             defaultCacheIntervalMinutes;
         notifyListeners();
       } catch (e) {
-        debugPrint('[FilesController] Account-activation prefs restore failed: $e');
+        debugPrint(
+          '[FilesController] Account-activation prefs restore failed: $e',
+        );
       }
     }
   }
@@ -401,7 +421,9 @@ class FilesController extends ChangeNotifier
       notifyListeners();
     }
 
-    debugPrint('[FilesController] Refreshing data for path: $_currentFolderPath');
+    debugPrint(
+      '[FilesController] Refreshing data for path: $_currentFolderPath',
+    );
 
     try {
       final items = await service.fetchDirectory(_currentFolderPath);
@@ -549,6 +571,20 @@ class FilesController extends ChangeNotifier
     return session.service?.fetchDirectory(path) ?? Future.value([]);
   }
 
+  /// Finds the single item at [path] by listing its parent folder and
+  /// matching on the exact path - there's no WebDAV call here for stat'ing
+  /// one path directly outside a directory PROPFIND. Used by the Shares tab
+  /// to open the full Share sheet for a [NextcloudShare], which only carries
+  /// enough metadata for its own row, not the size/dates `ShareSheet`'s
+  /// header needs.
+  Future<NextcloudItem?> fetchItemAtPath(String path) async {
+    final normalized = path.startsWith('/') ? path : '/$path';
+    final lastSlash = normalized.lastIndexOf('/');
+    final parent = lastSlash <= 0 ? '/' : normalized.substring(0, lastSlash);
+    final items = await fetchFolderListing(parent);
+    return items.where((i) => i.path == normalized).firstOrNull;
+  }
+
   void invalidateCache() => _directoryCache.clear();
 
   /// Persists a per-account browsing pref under its `acct_<id>_`-namespaced
@@ -692,6 +728,7 @@ class FilesController extends ChangeNotifier
   void dispose() {
     WidgetsBinding.instance.removeObserver(this);
     _cacheRefreshTimer?.cancel();
+    _uploadSub?.cancel();
     super.dispose();
   }
 }

lib/providers/session_controller.dart

@@ -27,8 +27,7 @@ enum LoginFlowStatus { idle, initiating, awaitingBrowser, error }
 /// full rationale.
 class SessionController extends ChangeNotifier with WidgetsBindingObserver {
   final ConnectivityController connectivity;
-  final Future<SharedPreferences> prefsFuture =
-      SharedPreferences.getInstance();
+  final Future<SharedPreferences> prefsFuture = SharedPreferences.getInstance();
   final AccountStore accountStore = AccountStore();
 
   // True from the moment a saved session is restored (or a network
@@ -96,10 +95,32 @@ class SessionController extends ChangeNotifier with WidgetsBindingObserver {
   final List<VoidCallback> _accountReadyListeners = [];
   void addAccountClearedListener(VoidCallback cb) =>
       _accountClearedListeners.add(cb);
-  void addAccountActivatedListener(VoidCallback cb) =>
-      _accountActivatedListeners.add(cb);
-  void addAccountReadyListener(VoidCallback cb) =>
-      _accountReadyListeners.add(cb);
+
+  // Both `activated` and `ready` are one-shot, fire-and-forget calls, not a
+  // replayable stream - so a controller isn't guaranteed to be *listening*
+  // yet when the real event fires. Most controllers are registered with
+  // `lazy: false` in main.dart specifically so they exist before that can
+  // happen, but one that isn't (built lazily, on first read, like
+  // FilesController) can lose the race if nothing reads it until after
+  // login already finished verifying - e.g. `ConnectivityController`
+  // misreporting offline right at cold start collapses the bottom nav to
+  // just the Offline tab (see `main.dart`), so Files' tab, and the
+  // `FilesController` it lazily creates, never gets built during that
+  // window. Calling back immediately here if the account is *already* in
+  // the state being subscribed to closes that race for every current and
+  // future subscriber, without each one needing its own view-level
+  // fallback reload - see `.claude/context/architecture.md`'s "State
+  // management" section for the guardrail this exists to enforce.
+  void addAccountActivatedListener(VoidCallback cb) {
+    _accountActivatedListeners.add(cb);
+    if (_isLoggedIn && !_isProvisionalLogin) cb();
+  }
+
+  void addAccountReadyListener(VoidCallback cb) {
+    _accountReadyListeners.add(cb);
+    if (_isLoggedIn) cb();
+  }
+
   void _notifyAccountCleared() {
     for (final cb in _accountClearedListeners) {
       cb();
@@ -141,9 +162,7 @@ class SessionController extends ChangeNotifier with WidgetsBindingObserver {
     // one-time unlock at cold start would give the feature no real
     // security value, since the realistic threat is someone else picking
     // up an already-running, unlocked phone.
-    if (state == AppLifecycleState.paused &&
-        _loginLockEnabled &&
-        _isUnlocked) {
+    if (state == AppLifecycleState.paused && _loginLockEnabled && _isUnlocked) {
       _isUnlocked = false;
       notifyListeners();
     }

lib/providers/settings_controller.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import '../models/app_tab.dart';
+import '../models/selection_action.dart';
 import '../theme/app_theme.dart';
+import '../widgets/noo/nav/noo_nav_style.dart';
 
 /// What swiping a Files list-view item left/right does, user-configurable
 /// in Settings.
@@ -23,13 +25,15 @@ class SettingsController extends ChangeNotifier {
   static const _prefThemeMode = 'ui_theme_mode';
   static const _prefUseDynamicColor = 'ui_use_dynamic_color';
   static const _prefSeedColor = 'ui_seed_color';
-  static const _prefBottomBarOpacity = 'ui_bottom_bar_opacity';
-  static const _prefBottomBarBlur = 'ui_bottom_bar_blur';
   static const _prefTabOrder = 'ui_tab_order';
+  static const _prefSelectionActionOrder = 'ui_selection_action_order';
   static const _prefHiddenTabs = 'ui_hidden_tabs';
   static const _prefDefaultTab = 'ui_default_tab';
   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';
   static const _prefTapTabToScrollTop = 'ui_tap_tab_to_scroll_top';
@@ -37,20 +41,24 @@ class SettingsController extends ChangeNotifier {
   final Future<SharedPreferences> _prefsFuture =
       SharedPreferences.getInstance();
 
-  Color _seedColor = AppTheme.defaultNextcloudBlue;
+  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;
   MediaProgressBarStyle _mediaProgressBarStyle = MediaProgressBarStyle.wavy;
 
-  double _bottomBarOpacity = 0.55;
-  double _bottomBarBlur = 28;
   bool _tapTabToScrollTop = true;
 
   List<AppTab> _tabOrder = AppTab.values.toList();
   Set<AppTab> _hiddenTabs = {};
   AppTab _defaultTab = AppTab.files;
 
+  List<SelectionActionKind> _selectionActionOrder = SelectionActionKind.values
+      .toList();
+
   SwipeAction _swipeLeftAction = SwipeAction.delete;
   SwipeAction _swipeRightAction = SwipeAction.favorite;
 
@@ -79,19 +87,34 @@ 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;
   MediaProgressBarStyle get mediaProgressBarStyle => _mediaProgressBarStyle;
-  double get bottomBarOpacity => _bottomBarOpacity;
-  double get bottomBarBlur => _bottomBarBlur;
   bool get tapTabToScrollTop => _tapTabToScrollTop;
 
+  /// The cap a screen should actually enforce for the *regular*, user-
+  /// reorderable tabs - one below [defaultMaxVisibleTabs] while
+  /// [searchInBottomBar] is on, since Search then takes that freed-up slot
+  /// itself (the row's last tab when attached, its own satellite circle
+  /// when floating - see `NooBottomBar`) rather than counting against it.
+  int get maxVisibleTabs =>
+      defaultMaxVisibleTabs - (_searchInBottomBar ? 1 : 0);
+
   /// Every tab in the user's configured order, including hidden ones — used
   /// by the reorder/visibility settings UI.
   List<AppTab> get tabOrder => _tabOrder;
   Set<AppTab> get hiddenTabs => _hiddenTabs;
   AppTab get defaultTab => _defaultTab;
 
+  /// The priority order bulk actions (favorite, share, download, ...) show
+  /// in on the multi-select action bar - see [orderSelectionActions]. Every
+  /// [SelectionActionKind] is always present here (nothing is hidden, only
+  /// reordered), so [NooSelectionBar]'s fixed inline slots are always full.
+  List<SelectionActionKind> get selectionActionOrder => _selectionActionOrder;
+
   /// The tabs the bottom nav bar should actually show, in order.
   List<AppTab> get visibleTabs =>
       _tabOrder.where((t) => !_hiddenTabs.contains(t)).toList();
@@ -110,6 +133,22 @@ class SettingsController extends ChangeNotifier {
           orElse: () => ThemeMode.system,
         );
       }
+      final bottomBarStyleName = prefs.getString(_prefBottomBarStyle);
+      if (bottomBarStyleName != null) {
+        _bottomBarStyle = NooBottomBarStyle.values.firstWhere(
+          (s) => s.name == bottomBarStyleName,
+          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 =
           prefs.getBool(_prefUseDynamicColor) ?? _useDynamicColor;
       _amoledDark = prefs.getBool(_prefAmoledDark) ?? _amoledDark;
@@ -122,9 +161,6 @@ class SettingsController extends ChangeNotifier {
       }
       final seedColorValue = prefs.getInt(_prefSeedColor);
       if (seedColorValue != null) _seedColor = Color(seedColorValue);
-      _bottomBarOpacity =
-          prefs.getDouble(_prefBottomBarOpacity) ?? _bottomBarOpacity;
-      _bottomBarBlur = prefs.getDouble(_prefBottomBarBlur) ?? _bottomBarBlur;
       _tapTabToScrollTop =
           prefs.getBool(_prefTapTabToScrollTop) ?? _tapTabToScrollTop;
 
@@ -143,6 +179,25 @@ class SettingsController extends ChangeNotifier {
         _tabOrder = order;
       }
 
+      final savedActionOrderNames = prefs.getStringList(
+        _prefSelectionActionOrder,
+      );
+      if (savedActionOrderNames != null) {
+        final order = <SelectionActionKind>[];
+        for (final name in savedActionOrderNames) {
+          final match = SelectionActionKind.values
+              .where((k) => k.name == name)
+              .firstOrNull;
+          if (match != null) order.add(match);
+        }
+        // Forward-compat: a kind added in a later app update won't be in an
+        // older saved order yet, so append anything missing.
+        for (final kind in SelectionActionKind.values) {
+          if (!order.contains(kind)) order.add(kind);
+        }
+        _selectionActionOrder = order;
+      }
+
       final savedHiddenNames = prefs.getStringList(_prefHiddenTabs);
       if (savedHiddenNames != null) {
         _hiddenTabs = savedHiddenNames
@@ -223,18 +278,6 @@ class SettingsController extends ChangeNotifier {
     );
   }
 
-  void setBottomBarOpacity(double value) {
-    _bottomBarOpacity = value;
-    notifyListeners();
-    _prefsFuture.then((p) => p.setDouble(_prefBottomBarOpacity, value));
-  }
-
-  void setBottomBarBlur(double value) {
-    _bottomBarBlur = value;
-    notifyListeners();
-    _prefsFuture.then((p) => p.setDouble(_prefBottomBarBlur, value));
-  }
-
   void setTapTabToScrollTop(bool value) {
     _tapTabToScrollTop = value;
     notifyListeners();
@@ -247,6 +290,32 @@ class SettingsController extends ChangeNotifier {
     _prefsFuture.then((p) => p.setString(_prefThemeMode, mode.name));
   }
 
+  void setBottomBarStyle(NooBottomBarStyle style) {
+    if (_bottomBarStyle == style) return;
+    _bottomBarStyle = style;
+    notifyListeners();
+    _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
+  /// install/an app update adding a new tab.
+  void setSearchInBottomBar(bool value) {
+    if (_searchInBottomBar == value) return;
+    _searchInBottomBar = value;
+    if (value) _enforceMaxVisibleTabs();
+    notifyListeners();
+    _prefsFuture.then((p) => p.setBool(_prefSearchInBottomBar, value));
+  }
+
   void setTabOrder(List<AppTab> order) {
     _tabOrder = order;
     notifyListeners();
@@ -255,6 +324,17 @@ class SettingsController extends ChangeNotifier {
     );
   }
 
+  void setSelectionActionOrder(List<SelectionActionKind> order) {
+    _selectionActionOrder = order;
+    notifyListeners();
+    _prefsFuture.then(
+      (p) => p.setStringList(
+        _prefSelectionActionOrder,
+        order.map((k) => k.name).toList(),
+      ),
+    );
+  }
+
   /// Shows or hides a tab in the bottom nav bar. Refuses to hide the last
   /// remaining visible tab. If the tab being hidden is the current default,
   /// the default falls back to the next visible tab.

lib/providers/shares_controller.dart

@@ -8,7 +8,16 @@ import 'session_controller.dart';
 class SharesController extends ChangeNotifier {
   final SessionController session;
 
-  List<NextcloudShare> _shares = [];
+  /// Each scope's own cache - switching `sharedWithMe` no longer refetches
+  /// on every switch, only the first time a scope is visited (or on a
+  /// pull-to-refresh/retry), since `By you`/`Links` (see shares_view.dart's
+  /// client-side split of this same list) and `With you` used to hit the
+  /// network again on every single toggle, even switching straight back to
+  /// a scope just fetched seconds ago.
+  List<NextcloudShare> _withMeShares = [];
+  List<NextcloudShare> _byMeShares = [];
+  bool _withMeLoaded = false;
+  bool _byMeLoaded = false;
   bool _isLoading = false;
   String? _errorMessage;
   bool _sharedWithMe = false;
@@ -18,13 +27,17 @@ class SharesController extends ChangeNotifier {
     session.addAccountActivatedListener(_onAccountActivated);
   }
 
-  List<NextcloudShare> get shares => _shares;
+  List<NextcloudShare> get shares =>
+      _sharedWithMe ? _withMeShares : _byMeShares;
   bool get isLoading => _isLoading;
   String? get errorMessage => _errorMessage;
   bool get sharedWithMe => _sharedWithMe;
 
   void _onAccountCleared() {
-    _shares = [];
+    _withMeShares = [];
+    _byMeShares = [];
+    _withMeLoaded = false;
+    _byMeLoaded = false;
     _isLoading = false;
     _errorMessage = null;
     _sharedWithMe = false;
@@ -35,19 +48,29 @@ class SharesController extends ChangeNotifier {
     unawaited(fetchAll());
   }
 
+  /// Fetches the *current* scope fresh, ignoring its cache - the initial
+  /// load, pull-to-refresh, and the error-retry button all want a real
+  /// round-trip regardless of whether this scope was already loaded.
   Future<void> fetchAll() async {
     final service = session.service;
     if (!session.isLoggedIn || service == null) return;
     final gen = session.sessionGeneration;
+    final wantsWithMe = _sharedWithMe;
 
     _isLoading = true;
     _errorMessage = null;
     notifyListeners();
 
     try {
-      final shares = await service.fetchShares(sharedWithMe: _sharedWithMe);
+      final shares = await service.fetchShares(sharedWithMe: wantsWithMe);
       if (gen != session.sessionGeneration) return;
-      _shares = shares;
+      if (wantsWithMe) {
+        _withMeShares = shares;
+        _withMeLoaded = true;
+      } else {
+        _byMeShares = shares;
+        _byMeLoaded = true;
+      }
     } catch (e) {
       if (gen != session.sessionGeneration) return;
       debugPrint('[SharesController] Error fetching shares: $e');
@@ -60,12 +83,14 @@ class SharesController extends ChangeNotifier {
     }
   }
 
-  /// Switches between "shared by me" and "shared with me" and refetches.
+  /// Switches between "shared by me" and "shared with me". Only fetches
+  /// when the target scope hasn't been loaded yet - switching back to one
+  /// already cached just swaps which list [shares] reads from.
   void setSharedWithMe(bool value) {
     if (_sharedWithMe == value) return;
     _sharedWithMe = value;
     notifyListeners();
-    fetchAll();
+    if (!(value ? _withMeLoaded : _byMeLoaded)) fetchAll();
   }
 
   Future<bool> deleteShare(NextcloudShare share) async {
@@ -73,7 +98,11 @@ class SharesController extends ChangeNotifier {
     if (service == null) return false;
     final success = await service.deleteShare(share.id);
     if (success) {
-      _shares = _shares.where((s) => s.id != share.id).toList();
+      if (_sharedWithMe) {
+        _withMeShares = _withMeShares.where((s) => s.id != share.id).toList();
+      } else {
+        _byMeShares = _byMeShares.where((s) => s.id != share.id).toList();
+      }
       notifyListeners();
     }
     return success;

lib/services/nextcloud_service.dart

@@ -44,6 +44,19 @@ DateTime? _parseDavDate(String? raw) {
   }
 }
 
+/// Nextcloud's WebDAV server has no real per-file creation-time tracking
+/// for most setups, so its `creationdate` property routinely comes back as
+/// a placeholder Unix-epoch date ("Thu, 01 Jan 1970 00:00:00 GMT") instead
+/// of being omitted - [_parseDavDate] parses that "successfully" into a
+/// real (if bogus) `DateTime`, so every item's created date read January
+/// 1970. Treat it as absent instead, the same as a missing/unparseable
+/// value: `NextcloudItem`'s constructor then falls back to `lastModified`.
+DateTime? _parseDavCreationDate(String? raw) {
+  final parsed = _parseDavDate(raw);
+  if (parsed != null && parsed.millisecondsSinceEpoch <= 0) return null;
+  return parsed;
+}
+
 /// The OCS Activity API reports each event's time as an ISO 8601 string in
 /// a `datetime` field (e.g. "2025-09-15T12:34:56+00:00") - there is no
 /// numeric `timestamp` field despite that being a very easy name to guess.
@@ -134,6 +147,19 @@ class NextcloudService {
     return response.bodyBytes;
   }
 
+  /// Overwrites the file at [itemPath] with [bytes] (WebDAV PUT) - used by
+  /// the in-app text editor. Returns whether the server accepted it.
+  Future<bool> putBytes(String itemPath, List<int> bytes) async {
+    final response = await http.put(
+      Uri.parse(fileUrl(itemPath)),
+      headers: _headers,
+      body: bytes,
+    );
+    return response.statusCode == 200 ||
+        response.statusCode == 201 ||
+        response.statusCode == 204;
+  }
+
   Future<bool> testConnection() async {
     try {
       final davPath = '$_cleanServerUrl/remote.php/dav/files/$username/';
@@ -356,7 +382,7 @@ class NextcloudService {
 
       final size = int.tryParse(sizeStr ?? '0') ?? 0;
       final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
-      final created = _parseDavDate(createdStr);
+      final created = _parseDavCreationDate(createdStr);
       final itemType = NextcloudItem.deduceType(name, isCollection, mimeType);
       final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
 
@@ -671,7 +697,7 @@ class NextcloudService {
 
       final size = int.tryParse(sizeStr ?? '0') ?? 0;
       final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
-      final created = _parseDavDate(createdStr);
+      final created = _parseDavCreationDate(createdStr);
       final itemType = NextcloudItem.deduceType(name, false, mimeType);
       final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
 
@@ -835,7 +861,7 @@ class NextcloudService {
 
       final size = int.tryParse(sizeStr ?? '0') ?? 0;
       final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
-      final created = _parseDavDate(createdStr);
+      final created = _parseDavCreationDate(createdStr);
       final itemType = NextcloudItem.deduceType(name, isCollection, mimeType);
       final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
 
@@ -1000,7 +1026,7 @@ class NextcloudService {
 
       final size = int.tryParse(sizeStr ?? '0') ?? 0;
       final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
-      final created = _parseDavDate(createdStr);
+      final created = _parseDavCreationDate(createdStr);
       final itemType = NextcloudItem.deduceType(name, false, mimeType);
       final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
 
@@ -1458,28 +1484,17 @@ class NextcloudService {
     final rawList = data['ocs']?['data'];
     if (rawList is! List) return [];
 
-    return rawList.map<NextcloudShare>((raw) {
-      final path = (raw['path'] ?? '/').toString();
-      final segments = path.split('/').where((s) => s.isNotEmpty).toList();
-      final name = segments.isNotEmpty ? segments.last : path;
-      final isFolder = (raw['item_type'] ?? '').toString() == 'folder';
-      final mimeType = raw['mimetype'] as String?;
-
-      return NextcloudShare(
-        id: (raw['id'] ?? '').toString(),
-        path: path,
-        name: name,
-        itemType: NextcloudItem.deduceType(name, isFolder, mimeType),
-        shareType: _mapShareType((raw['share_type'] as num?)?.toInt() ?? -1),
-        ownerDisplayName: (raw['displayname_owner'] ?? raw['uid_owner'] ?? '')
-            .toString(),
-        sharedWithDisplayName: raw['share_with_displayname'] as String?,
-        sharedAt: DateTime.fromMillisecondsSinceEpoch(
-          ((raw['stime'] as num?)?.toInt() ?? 0) * 1000,
-        ),
-        sharedWithMe: sharedWithMe,
-      );
-    }).toList();
+    // Shares out to `_shareFromJson` (the same parser `fetchSharesForPath`/
+    // `fetchInheritedShares` use) rather than its own duplicated, thinner
+    // inline parsing - that copy never set `url`/`token`/`permissions`/
+    // `expireDate` at all, so a public-link share always came back with
+    // `url: null` here and the Shares tab's own "Copy link" action could
+    // never show up for it.
+    return rawList
+        .map<NextcloudShare>(
+          (raw) => _shareFromJson(raw, sharedWithMe: sharedWithMe),
+        )
+        .toList();
   }
 
   /// Creates a public link share for [path] and returns its share URL.

lib/services/upload_service.dart

@@ -5,6 +5,27 @@ import '../providers/session_controller.dart';
 import 'native_channel.dart';
 import 'share_intent_service.dart';
 
+/// One upload batch finishing - see [UploadService.completions].
+class UploadCompletion {
+  final String remoteFolder;
+  final int succeeded;
+  final int failed;
+
+  const UploadCompletion({
+    required this.remoteFolder,
+    required this.succeeded,
+    required this.failed,
+  });
+
+  factory UploadCompletion.fromMap(Map<dynamic, dynamic> map) {
+    return UploadCompletion(
+      remoteFolder: map['remoteFolder'] as String? ?? '/',
+      succeeded: (map['succeeded'] as num?)?.toInt() ?? 0,
+      failed: (map['failed'] as num?)?.toInt() ?? 0,
+    );
+  }
+}
+
 /// Hands a "Share to Noo" upload off to `ShareUploadService.kt`'s Android
 /// foreground service, which does the actual prepare+upload entirely on its
 /// own from there - including surviving the app being closed - with a
@@ -14,11 +35,15 @@ import 'share_intent_service.dart';
 /// real Android Service does.
 class UploadService {
   static const _channel = MethodChannel('dev.ayushya.noo/upload_service');
+  static const _statusChannel = EventChannel(
+    'dev.ayushya.noo/upload_service/status',
+  );
 
   /// Starts uploading [files] into the active account's current folder.
   /// Fire-and-forget from Dart's perspective - once this returns, the
   /// service owns the rest and reports progress/completion/cancellation
-  /// through its own notification, not back to the app.
+  /// through its own notification, not back to the app. [completions] is
+  /// the one thing it does report back, for `FilesController` to act on.
   static Future<void> startUpload(
     SessionController session,
     FilesController files,
@@ -37,4 +62,15 @@ class UploadService {
       'remoteFolder': files.currentFolderPath,
     });
   }
+
+  /// Fires once per finished batch (at least one file uploaded) from
+  /// `UploadEventBus` (Kotlin) - lets `FilesController` refresh the
+  /// destination folder if it's the one currently on screen, instead of the
+  /// list only updating on a manual pull-to-refresh. One shared stream,
+  /// deliberately: see `SyncService.statusStream`'s identical doc comment -
+  /// `EventChannel.receiveBroadcastStream()` opens its own native
+  /// subscription per call, and the native side only keeps the latest one.
+  static final Stream<UploadCompletion> completions = _statusChannel
+      .receiveBroadcastStream()
+      .map((event) => UploadCompletion.fromMap(event as Map<dynamic, dynamic>));
 }

lib/theme/app_theme.dart

@@ -1,9 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'design_tokens.dart';
 
 class AppTheme {
   static const Color defaultNextcloudBlue = Color(0xFF0082C9);
 
+  /// The design system's own fixed violet - [NooColors.light]/`.dark`'s
+  /// `accent`, and the accent picker's "Default" swatch. Also
+  /// [SettingsController]'s initial [SettingsController.seedColor], so a
+  /// fresh install (or any device without Material You dynamic color) keeps
+  /// today's violet look rather than picking up the leftover
+  /// [defaultNextcloudBlue] default from before seed colors actually did
+  /// anything to the Noo-styled UI (see [NooColors.fromSeed]).
+  static const Color defaultAccent = Color(0xFF8D0DE3);
+
   // Flutter's Material 3 default (ZoomPageTransitionsBuilder) doesn't
   // implement Android's predictive-back gesture at all. Opting into
   // PredictiveBackPageTransitionsBuilder here (Android only) is required —
@@ -23,6 +33,7 @@ class AppTheme {
   static const _sliderTheme = SliderThemeData(year2023: false);
 
   static const List<Color> seedColors = [
+    defaultAccent, // Default (Noo Violet)
     Color(0xFF0082C9), // Nextcloud Blue
     Color(0xFF009688), // Ocean Teal
     Color(0xFF6750A4), // Deep Purple
@@ -30,6 +41,49 @@ class AppTheme {
     Color(0xFF2E7D32), // Emerald Green
   ];
 
+  // Design-system typefaces (DESIGN_SYSTEM.md 1.3): Schibsted Grotesk for
+  // headings, Instrument Sans for UI/body text. Applied over Flutter's
+  // default TextTheme slots app-wide - screens not yet reworked to the
+  // design system's own named type scale (`NooText`) still benefit from
+  // the new typefaces immediately instead of staying on Inter until their
+  // turn comes.
+  static TextTheme _textTheme(Brightness brightness) {
+    final base = brightness == Brightness.light
+        ? ThemeData.light().textTheme
+        : ThemeData.dark().textTheme;
+    return GoogleFonts.instrumentSansTextTheme(base).copyWith(
+      displayLarge: GoogleFonts.schibstedGrotesk(
+        textStyle: base.displayLarge,
+        fontWeight: FontWeight.w600,
+      ),
+      displayMedium: GoogleFonts.schibstedGrotesk(
+        textStyle: base.displayMedium,
+        fontWeight: FontWeight.w600,
+      ),
+      displaySmall: GoogleFonts.schibstedGrotesk(
+        textStyle: base.displaySmall,
+        fontWeight: FontWeight.w600,
+      ),
+      headlineLarge: GoogleFonts.schibstedGrotesk(
+        textStyle: base.headlineLarge,
+        fontWeight: FontWeight.w600,
+      ),
+      headlineMedium: GoogleFonts.schibstedGrotesk(
+        fontWeight: FontWeight.w600,
+        letterSpacing: -0.5,
+      ),
+      headlineSmall: GoogleFonts.schibstedGrotesk(
+        textStyle: base.headlineSmall,
+        fontWeight: FontWeight.w600,
+      ),
+      titleLarge: GoogleFonts.schibstedGrotesk(
+        fontWeight: FontWeight.w600,
+        letterSpacing: -0.2,
+      ),
+      titleMedium: GoogleFonts.schibstedGrotesk(fontWeight: FontWeight.w500),
+    );
+  }
+
   static ThemeData light(
     Color seedColor, {
     ColorScheme? dynamicScheme,
@@ -41,26 +95,19 @@ class AppTheme {
             seedColor: seedColor,
             brightness: Brightness.light,
           );
+    final nooColors = (useDynamicColor && dynamicScheme != null)
+        ? NooColors.fromDynamicScheme(dynamicScheme)
+        : NooColors.fromSeed(seedColor, Brightness.light);
 
     return ThemeData(
       useMaterial3: true,
       brightness: Brightness.light,
       colorScheme: colorScheme,
+      extensions: [nooColors],
       scaffoldBackgroundColor: colorScheme.surface,
       pageTransitionsTheme: _pageTransitionsTheme,
       sliderTheme: _sliderTheme,
-      textTheme: GoogleFonts.interTextTheme(ThemeData.light().textTheme)
-          .copyWith(
-            headlineMedium: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.5,
-            ),
-            titleLarge: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.2,
-            ),
-            titleMedium: GoogleFonts.inter(fontWeight: FontWeight.w500),
-          ),
+      textTheme: _textTheme(Brightness.light),
       cardTheme: CardThemeData(
         elevation: 0,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
@@ -71,7 +118,7 @@ class AppTheme {
         elevation: 0,
         scrolledUnderElevation: 0,
         centerTitle: false,
-        titleTextStyle: GoogleFonts.inter(
+        titleTextStyle: GoogleFonts.schibstedGrotesk(
           fontSize: 22,
           fontWeight: FontWeight.w600,
           color: colorScheme.onSurface,
@@ -92,6 +139,9 @@ class AppTheme {
             seedColor: seedColor,
             brightness: Brightness.dark,
           );
+    var nooColors = (useDynamicColor && dynamicScheme != null)
+        ? NooColors.fromDynamicScheme(dynamicScheme)
+        : NooColors.fromSeed(seedColor, Brightness.dark);
 
     if (amoled) {
       // True OLED black across every surface tone Material 3 hands out -
@@ -106,27 +156,18 @@ class AppTheme {
         surfaceContainerHighest: Colors.black,
         surfaceDim: Colors.black,
       );
+      nooColors = nooColors.withAmoled();
     }
 
     return ThemeData(
       useMaterial3: true,
       brightness: Brightness.dark,
       colorScheme: colorScheme,
+      extensions: [nooColors],
       scaffoldBackgroundColor: colorScheme.surface,
       pageTransitionsTheme: _pageTransitionsTheme,
       sliderTheme: _sliderTheme,
-      textTheme: GoogleFonts.interTextTheme(ThemeData.dark().textTheme)
-          .copyWith(
-            headlineMedium: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.5,
-            ),
-            titleLarge: GoogleFonts.inter(
-              fontWeight: FontWeight.w600,
-              letterSpacing: -0.2,
-            ),
-            titleMedium: GoogleFonts.inter(fontWeight: FontWeight.w500),
-          ),
+      textTheme: _textTheme(Brightness.dark),
       cardTheme: CardThemeData(
         elevation: 0,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
@@ -137,7 +178,7 @@ class AppTheme {
         elevation: 0,
         scrolledUnderElevation: 0,
         centerTitle: false,
-        titleTextStyle: GoogleFonts.inter(
+        titleTextStyle: GoogleFonts.schibstedGrotesk(
           fontSize: 22,
           fontWeight: FontWeight.w600,
           color: colorScheme.onSurface,

lib/theme/design_tokens.dart

@@ -0,0 +1,460 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+/// Semantic color tokens from `.claude/context/design-system/DESIGN_SYSTEM.md`
+/// section 1.1 - read that file before changing any value here. Registered
+/// on [ThemeData.extensions], so call sites reach these via
+/// `Theme.of(context).extension<NooColors>()!` (or a `context.nooColors`
+/// getter, once one exists) instead of the Material [ColorScheme] roles.
+///
+/// Three sources feed this, matching the app's color settings: the fixed
+/// [light]/[dark] palettes below (the design system's own default look,
+/// also what the accent picker's "Default" violet swatch selects),
+/// [NooColors.fromDynamicScheme] when the user has Material You dynamic
+/// color turned on, or [NooColors.fromSeed] for a custom accent-picker
+/// swatch. [withAmoled] layers on top of any of the three when the user's
+/// AMOLED toggle is on.
+@immutable
+class NooColors extends ThemeExtension<NooColors> {
+  final Color bg;
+  final Color surface;
+  final Color surface2;
+  final Color surface3;
+  final Color line;
+  final Color fg1;
+  final Color fg2;
+  final Color fg3;
+  final Color accent;
+  final Color accentText;
+  final Color accentSoft;
+  final Color danger;
+  final Color dangerSoft;
+  final Color dangerFill;
+  final Color success;
+  final Color successSoft;
+  final Color warning;
+  final Color warningSoft;
+  final Color info;
+  final Color infoSoft;
+  final Color scrim;
+
+  const NooColors({
+    required this.bg,
+    required this.surface,
+    required this.surface2,
+    required this.surface3,
+    required this.line,
+    required this.fg1,
+    required this.fg2,
+    required this.fg3,
+    required this.accent,
+    required this.accentText,
+    required this.accentSoft,
+    required this.danger,
+    required this.dangerSoft,
+    required this.dangerFill,
+    required this.success,
+    required this.successSoft,
+    required this.warning,
+    required this.warningSoft,
+    required this.info,
+    required this.infoSoft,
+    required this.scrim,
+  });
+
+  static const light = NooColors(
+    bg: Color(0xFFF3EFE6),
+    surface: Color(0xFFFFFFFF),
+    surface2: Color(0xFFF6F5F2),
+    surface3: Color(0xFFEAE8E2),
+    line: Color(0xFFEAE8E2),
+    fg1: Color(0xFF0E0D0B),
+    fg2: Color(0xFF5A5852),
+    fg3: Color(0xFF7C7A72),
+    accent: Color(0xFF8D0DE3),
+    accentText: Color(0xFF8D0DE3),
+    accentSoft: Color(0xFFECDFFF),
+    danger: Color(0xFFA8202A),
+    dangerSoft: Color(0xFFFDE7E7),
+    dangerFill: Color(0xFFA8202A),
+    success: Color(0xFF3E7A23),
+    successSoft: Color(0xFFEAF5DF),
+    warning: Color(0xFF8C5A0E),
+    warningSoft: Color(0xFFFBEFD0),
+    info: Color(0xFF2940A8),
+    infoSoft: Color(0xFFE6ECFE),
+    scrim: Color(0x730E0D0B),
+  );
+
+  static const dark = NooColors(
+    bg: Color(0xFF0E0D0B),
+    surface: Color(0xFF25241F),
+    surface2: Color(0xFF3D3C38),
+    surface3: Color(0xFF5A5852),
+    line: Color(0xFF3D3C38),
+    fg1: Color(0xFFF3EFE6),
+    fg2: Color(0xFFBDBAB1),
+    fg3: Color(0xFF9E9B92),
+    accent: Color(0xFF8D0DE3),
+    accentText: Color(0xFFCBA5FD),
+    accentSoft: Color(0xFF2F0454),
+    danger: Color(0xFFF49E9E),
+    dangerSoft: Color(0xFF560F18),
+    dangerFill: Color(0xFFA8202A),
+    success: Color(0xFFB7DD9F),
+    successSoft: Color(0xFF1E3F10),
+    warning: Color(0xFFF0C26C),
+    warningSoft: Color(0xFF4A3208),
+    info: Color(0xFFB6C3FB),
+    infoSoft: Color(0xFF1C2B73),
+    scrim: Color(0x99000000),
+  );
+
+  /// Avatar/photo-placeholder fills (`DESIGN_SYSTEM.md` 1.1) - a fixed
+  /// secondary palette, same in light and dark, always paired with
+  /// [avatarTextColor]. Content-identity colors, not theme, so they don't
+  /// change with brightness or dynamic color (same reasoning as file-type
+  /// tinting in `styling.md`).
+  static const avatarPalette = [
+    Color(0xFF8DCDE2),
+    Color(0xFF96B0FD),
+    Color(0xFFE5D8BD),
+    Color(0xFFEEEDB3),
+    Color(0xFFDA9AC7),
+    Color(0xFFA7D296),
+    Color(0xFFE9A6A7),
+    Color(0xFF85D1BD),
+    Color(0xFFCBA5FD),
+  ];
+  static const avatarTextColor = Color(0xFF0E0D0B);
+
+  /// Maps a Material You dynamic [ColorScheme] onto these roles for users
+  /// who've turned dynamic color on, instead of the fixed [light]/[dark]
+  /// palettes. `success`/`successSoft`/`warning`/`warningSoft`/`info`/
+  /// `infoSoft` have no Material dynamic equivalent and are content-identity
+  /// colors regardless (file-type tiles) rather than brand colors, so they
+  /// always come from the fixed palette matching [cs]'s brightness. Same
+  /// for `scrim`: Material 3's `ColorScheme.scrim` role is fully *opaque*
+  /// black (`0xFF000000`), meant to be used at reduced opacity by whoever
+  /// paints it, not painted directly - using it as-is for a sheet/dialog's
+  /// `barrierColor` hid the screen behind completely instead of dimming it,
+  /// so this uses the fixed palette's already-translucent scrim instead.
+  factory NooColors.fromDynamicScheme(ColorScheme cs) {
+    final fixed = cs.brightness == Brightness.dark ? dark : light;
+    return NooColors(
+      bg: cs.surface,
+      surface: cs.surfaceContainerLow,
+      surface2: cs.surfaceContainerHigh,
+      surface3: cs.surfaceContainerHighest,
+      line: cs.outlineVariant,
+      fg1: cs.onSurface,
+      fg2: cs.onSurfaceVariant,
+      fg3: cs.onSurfaceVariant,
+      accent: cs.primary,
+      accentText: cs.primary,
+      accentSoft: cs.primaryContainer,
+      danger: cs.error,
+      dangerSoft: cs.errorContainer,
+      dangerFill: cs.error,
+      success: fixed.success,
+      successSoft: fixed.successSoft,
+      warning: fixed.warning,
+      warningSoft: fixed.warningSoft,
+      info: fixed.info,
+      infoSoft: fixed.infoSoft,
+      scrim: fixed.scrim,
+    );
+  }
+
+  /// Derives an accent-only variant of the fixed [light]/[dark] palette for
+  /// a user-chosen custom seed color (Settings' accent-color picker) -
+  /// unlike [fromDynamicScheme], only the accent roles change; bg/surface/
+  /// fg etc. stay the Noo warm-neutral palette, since picking a named
+  /// accent ("Ocean Teal") is meant to retint the brand color, not reshape
+  /// the whole surface to match a wallpaper the way dynamic color does.
+  /// [seedColor] equal to the fixed palette's own accent (the picker's
+  /// "Default" violet swatch) returns the untouched fixed palette, so the
+  /// out-of-box look stays pixel-identical rather than going through
+  /// [ColorScheme.fromSeed]'s tonal-palette math for no reason.
+  factory NooColors.fromSeed(Color seedColor, Brightness brightness) {
+    final fixed = brightness == Brightness.dark ? dark : light;
+    if (seedColor == light.accent) return fixed;
+    final cs = ColorScheme.fromSeed(
+      seedColor: seedColor,
+      brightness: brightness,
+    );
+    return fixed.copyWith(
+      accent: seedColor,
+      // Light accentText matches accent exactly, same as the fixed
+      // palette - dark needs a lighter, desaturated tint for contrast
+      // against a dark surface, which is exactly what Material's tonal
+      // primary (tone ~80 in dark mode) is designed to give.
+      accentText: brightness == Brightness.dark ? cs.primary : seedColor,
+      accentSoft: cs.primaryContainer,
+    );
+  }
+
+  /// True OLED black across every surface tone - not just [bg] - so cards,
+  /// bars and sheets all go black too instead of the dark palette's warm
+  /// dark-grey tones. Mirrors the AMOLED handling this replaces in
+  /// `AppTheme.dark` (see git history), just against these tokens instead
+  /// of Material [ColorScheme] roles.
+  NooColors withAmoled() => copyWith(
+    bg: Colors.black,
+    surface: Colors.black,
+    surface2: Colors.black,
+    surface3: Colors.black,
+  );
+
+  @override
+  NooColors copyWith({
+    Color? bg,
+    Color? surface,
+    Color? surface2,
+    Color? surface3,
+    Color? line,
+    Color? fg1,
+    Color? fg2,
+    Color? fg3,
+    Color? accent,
+    Color? accentText,
+    Color? accentSoft,
+    Color? danger,
+    Color? dangerSoft,
+    Color? dangerFill,
+    Color? success,
+    Color? successSoft,
+    Color? warning,
+    Color? warningSoft,
+    Color? info,
+    Color? infoSoft,
+    Color? scrim,
+  }) {
+    return NooColors(
+      bg: bg ?? this.bg,
+      surface: surface ?? this.surface,
+      surface2: surface2 ?? this.surface2,
+      surface3: surface3 ?? this.surface3,
+      line: line ?? this.line,
+      fg1: fg1 ?? this.fg1,
+      fg2: fg2 ?? this.fg2,
+      fg3: fg3 ?? this.fg3,
+      accent: accent ?? this.accent,
+      accentText: accentText ?? this.accentText,
+      accentSoft: accentSoft ?? this.accentSoft,
+      danger: danger ?? this.danger,
+      dangerSoft: dangerSoft ?? this.dangerSoft,
+      dangerFill: dangerFill ?? this.dangerFill,
+      success: success ?? this.success,
+      successSoft: successSoft ?? this.successSoft,
+      warning: warning ?? this.warning,
+      warningSoft: warningSoft ?? this.warningSoft,
+      info: info ?? this.info,
+      infoSoft: infoSoft ?? this.infoSoft,
+      scrim: scrim ?? this.scrim,
+    );
+  }
+
+  @override
+  NooColors lerp(ThemeExtension<NooColors>? other, double t) {
+    if (other is! NooColors) return this;
+    return NooColors(
+      bg: Color.lerp(bg, other.bg, t)!,
+      surface: Color.lerp(surface, other.surface, t)!,
+      surface2: Color.lerp(surface2, other.surface2, t)!,
+      surface3: Color.lerp(surface3, other.surface3, t)!,
+      line: Color.lerp(line, other.line, t)!,
+      fg1: Color.lerp(fg1, other.fg1, t)!,
+      fg2: Color.lerp(fg2, other.fg2, t)!,
+      fg3: Color.lerp(fg3, other.fg3, t)!,
+      accent: Color.lerp(accent, other.accent, t)!,
+      accentText: Color.lerp(accentText, other.accentText, t)!,
+      accentSoft: Color.lerp(accentSoft, other.accentSoft, t)!,
+      danger: Color.lerp(danger, other.danger, t)!,
+      dangerSoft: Color.lerp(dangerSoft, other.dangerSoft, t)!,
+      dangerFill: Color.lerp(dangerFill, other.dangerFill, t)!,
+      success: Color.lerp(success, other.success, t)!,
+      successSoft: Color.lerp(successSoft, other.successSoft, t)!,
+      warning: Color.lerp(warning, other.warning, t)!,
+      warningSoft: Color.lerp(warningSoft, other.warningSoft, t)!,
+      info: Color.lerp(info, other.info, t)!,
+      infoSoft: Color.lerp(infoSoft, other.infoSoft, t)!,
+      scrim: Color.lerp(scrim, other.scrim, t)!,
+    );
+  }
+}
+
+/// Reads the app's [NooColors] - registered on every [ThemeData] built by
+/// `AppTheme`, so this is never actually null in a running app.
+extension NooColorsContext on BuildContext {
+  NooColors get nooColors => Theme.of(this).extension<NooColors>()!;
+}
+
+/// The 4px spacing scale from the Noo Design System project's
+/// `tokens/spacing.css` (claude.ai/design, project id
+/// bb69c00d-f400-445c-9683-355668c0bfe1 - the authoritative source now;
+/// `.claude/context/design-system/` is the earlier, less precise mockup
+/// export).
+class NooSpace {
+  const NooSpace._();
+  static const double xxs = 4;
+  static const double xs = 8;
+  static const double sm = 12;
+  static const double smd = 14;
+  static const double md = 16;
+  static const double lg = 20;
+  static const double xl = 24;
+  static const double xxl = 32;
+}
+
+/// Corner radii from `tokens/spacing.css`. `pill` covers every button,
+/// chip, segmented control, toggle, search field and badge.
+class NooRadii {
+  const NooRadii._();
+  static const double pill = 999;
+  static const double card = 20;
+  static const double gridCard = 18;
+  static const double input = 14;
+  static const double sidebarItem = 12;
+  static const double sheetTop = 28;
+  static const double dialog = 24;
+  static const double dropdown = 10;
+  static const double screenCornerAndroid = 36;
+  static const double screenCornerIOS = 48;
+  static const double windowMac = 12;
+  static const double windowWin = 8;
+}
+
+/// Fixed heights/widths from `tokens/spacing.css` - button sizes, row
+/// heights, the desktop sidebar width. Named to match the component that
+/// uses each one (`NooButton`'s `size` picks from the `button*` set).
+class NooSizes {
+  const NooSizes._();
+  static const double buttonCta = 52;
+  static const double buttonCard = 44;
+  static const double buttonField = 40;
+  static const double buttonToolbar = 36;
+  static const double buttonCompact = 32;
+  static const double buttonXs = 28;
+  static const double rowMobile = 64;
+  static const double rowDesktop = 52;
+  static const double settingsRow = 52;
+  static const double sidebarItem = 38;
+  static const double toolbar = 64;
+  static const double sidebarWidth = 256;
+}
+
+/// Motion constants from `tokens/spacing.css`'s `--ease`/`--dur-*`/
+/// `--press-scale`.
+class NooMotion {
+  const NooMotion._();
+  static const Curve ease = Cubic(0.7, 0, 0.15, 1);
+  static const Duration fast = Duration(milliseconds: 180);
+  static const Duration base = Duration(milliseconds: 280);
+  static const Duration slow = Duration(milliseconds: 480);
+  static const double pressScale = 0.98;
+}
+
+/// The one shadow the design system allows, from `tokens/spacing.css`'s
+/// `--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,
+  offset: Offset(0, 24),
+);
+
+/// The named type scale from `DESIGN_SYSTEM.md` 1.3 - mobile sizes only for
+/// now (desktop rework hasn't started). Schibsted Grotesk for headings,
+/// Instrument Sans for UI text, per the spec. Color is deliberately not set
+/// here - callers pull it from [NooColors] since the same style (e.g.
+/// `meta`) is reused across surfaces with different foreground colors.
+class NooText {
+  const NooText._();
+
+  static TextStyle get largeTitle => GoogleFonts.schibstedGrotesk(
+    fontSize: 34,
+    height: 0.9,
+    fontWeight: FontWeight.w600,
+    letterSpacing: -34 * 0.03,
+  );
+
+  static TextStyle get stat => GoogleFonts.schibstedGrotesk(
+    fontSize: 32,
+    height: 0.9,
+    fontWeight: FontWeight.w600,
+    letterSpacing: -32 * 0.03,
+  );
+
+  static TextStyle get title => GoogleFonts.schibstedGrotesk(
+    fontSize: 22,
+    fontWeight: FontWeight.w500,
+    letterSpacing: -22 * 0.02,
+  );
+
+  static TextStyle get cardTitle => GoogleFonts.schibstedGrotesk(
+    fontSize: 20,
+    fontWeight: FontWeight.w500,
+    letterSpacing: -20 * 0.02,
+  );
+
+  /// Desktop `GroupedList` title / share dialog headings - 17px, between
+  /// [cardTitle] and [groupHeading].
+  static TextStyle get sectionTitle => GoogleFonts.schibstedGrotesk(
+    fontSize: 17,
+    fontWeight: FontWeight.w500,
+    letterSpacing: -17 * 0.02,
+  );
+
+  static TextStyle get groupHeading => GoogleFonts.schibstedGrotesk(
+    fontSize: 18,
+    fontWeight: FontWeight.w500,
+    letterSpacing: -18 * 0.02,
+  );
+
+  static TextStyle get bodyL => GoogleFonts.instrumentSans(
+    fontSize: 16,
+    height: 1.2,
+    fontWeight: FontWeight.w400,
+  );
+
+  static TextStyle get body => GoogleFonts.instrumentSans(
+    fontSize: 15,
+    height: 1.3,
+    fontWeight: FontWeight.w400,
+  );
+
+  static TextStyle get label =>
+      GoogleFonts.instrumentSans(fontSize: 13, fontWeight: FontWeight.w600);
+
+  static TextStyle get meta => GoogleFonts.instrumentSans(
+    fontSize: 13,
+    height: 1.2,
+    fontWeight: FontWeight.w400,
+  );
+
+  /// Bottom-nav label, idle state (Android: 12/500 fg-2 - see
+  /// `Mobile Screen.dc.html`'s `aNav` block). Use [navLabelActive] for the
+  /// selected destination.
+  static TextStyle get navLabel =>
+      GoogleFonts.instrumentSans(fontSize: 12, fontWeight: FontWeight.w500);
+
+  /// Bottom-nav label, active state (Android: 12/600 fg-1, not accent-text -
+  /// only the icon's pill uses accent-soft/accent-text).
+  static TextStyle get navLabelActive =>
+      GoogleFonts.instrumentSans(fontSize: 12, fontWeight: FontWeight.w600);
+
+  static TextStyle get button =>
+      GoogleFonts.instrumentSans(fontSize: 15, fontWeight: FontWeight.w600);
+
+  static TextStyle get buttonSm =>
+      GoogleFonts.instrumentSans(fontSize: 14, fontWeight: FontWeight.w600);
+
+  static const mono = TextStyle(
+    fontFamily: 'monospace',
+    fontFamilyFallback: ['ui-monospace', 'Menlo'],
+    fontSize: 14,
+    height: 1,
+  );
+}

lib/views/activity_view.dart

@@ -1,141 +1,138 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../models/nextcloud_item.dart';
 import '../providers/files_controller.dart';
-import '../widgets/more_tabs_button.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/synced_header_scaffold.dart';
+import '../providers/session_controller.dart';
+import '../theme/design_tokens.dart';
+import '../widgets/noo/lists/noo_grouped_list.dart';
+import '../widgets/noo/media/noo_activity_item.dart';
+import '../widgets/noo/media/noo_photo_tile.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/tabs/tab_day_groups.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 
+/// The whole-account activity feed - lives on [FilesController] (fetched
+/// alongside the current Files folder) rather than its own controller, see
+/// `FilesController.refreshData`. Grouped by calendar day per
+/// `DESIGN_SYSTEM.md` §4; desktop centers the feed at 760px.
+///
+/// [NextcloudActivity] only carries a rendered `title`/`subject` string
+/// pair plus an `author` username - the server response has no structured
+/// actor/verb/object breakdown or file reference, so the bold "actor"
+/// segment is the author and the rest of the sentence (already fully
+/// formed server-side) rides as one plain run rather than being split
+/// further, and there's no reliable file to show in the trailing file
+/// tile slot - see this screen's rebuild report for what a richer feed
+/// would need from the service layer.
 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) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
     final files = context.watch<FilesController>();
+    final session = context.watch<SessionController>();
     final activities = files.activities;
+    final isDesktop = NooLayout.isDesktop(context);
+    final groups = groupByCalendarDay<NextcloudActivity>(
+      activities,
+      (a) => a.timestamp,
+    );
+
+    Widget feed;
+    if (files.isLoading && activities.isEmpty) {
+      feed = tabLoadingSliver;
+    } else if (activities.isEmpty) {
+      feed = tabEmptySliver(
+        context,
+        icon: LucideIcons.activity,
+        message: 'No recent activity',
+      );
+    } else {
+      feed = SliverPadding(
+        padding: EdgeInsets.symmetric(horizontal: NooLayout.gutter(context)),
+        sliver: SliverList(
+          delegate: SliverChildBuilderDelegate((context, index) {
+            final group = groups[index];
+            return Padding(
+              padding: const EdgeInsets.only(bottom: 18),
+              child: NooGroupedList(
+                label: group.label,
+                children: [
+                  for (final act in group.items)
+                    Material(
+                      color: colors.surface,
+                      child: NooActivityItem(
+                        actor: act.author,
+                        verb: act.title,
+                        tail: act.subject.isNotEmpty && act.subject != act.title
+                            ? act.subject
+                            : null,
+                        time: DateFormat.jm().format(act.timestamp),
+                        avatarColor: NooPhotoTile.paletteColor(
+                          act.author.hashCode,
+                        ),
+                        currentUser:
+                            act.author.toLowerCase() ==
+                            session.username.toLowerCase(),
+                      ),
+                    ),
+                ],
+              ),
+            );
+          }, childCount: groups.length),
+        ),
+      );
+    }
 
     final List<Widget> contentSlivers = [
-      const SliverToBoxAdapter(child: SizedBox(height: 16)),
-
-      if (files.isLoading && activities.isEmpty)
-        const SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(child: CircularProgressIndicator()),
-        )
-      else if (activities.isEmpty)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Text(
-              'No recent activity',
-              style: theme.textTheme.titleMedium?.copyWith(
-                color: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ),
-        )
-      else
-        SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20),
-          sliver: SliverList(
-            delegate: SliverChildBuilderDelegate((context, index) {
-              final act = activities[index];
-
-              return Padding(
-                padding: const EdgeInsets.only(bottom: 12),
-                child: Container(
-                  padding: const EdgeInsets.all(16),
-                  decoration: BoxDecoration(
-                    color: colorScheme.surfaceContainerLow,
-                    borderRadius: BorderRadius.circular(20),
-                    border: Border.all(
-                      color: colorScheme.outlineVariant.withValues(alpha: 0.2),
-                    ),
-                  ),
-                  child: Row(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Container(
-                        padding: const EdgeInsets.all(10),
-                        decoration: BoxDecoration(
-                          color: colorScheme.primaryContainer,
-                          shape: BoxShape.circle,
-                        ),
-                        child: Icon(
-                          act.icon,
-                          color: colorScheme.onPrimaryContainer,
-                          size: 20,
-                        ),
-                      ),
-                      const SizedBox(width: 14),
-                      Expanded(
-                        child: Column(
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            Row(
-                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                Expanded(
-                                  child: Text(
-                                    act.title,
-                                    style: theme.textTheme.titleMedium
-                                        ?.copyWith(
-                                          fontWeight: FontWeight.w600,
-                                          fontSize: 14,
-                                        ),
-                                  ),
-                                ),
-                                const SizedBox(width: 8),
-                                Text(
-                                  DateFormat.jm().format(act.timestamp),
-                                  style: theme.textTheme.bodySmall?.copyWith(
-                                    color: colorScheme.onSurfaceVariant,
-                                    fontSize: 11,
-                                  ),
-                                ),
-                              ],
-                            ),
-                            const SizedBox(height: 4),
-                            Text(
-                              act.subject,
-                              style: theme.textTheme.bodyMedium?.copyWith(
-                                color: colorScheme.onSurfaceVariant,
-                                fontSize: 13,
-                              ),
-                            ),
-                            const SizedBox(height: 6),
-                            Text(
-                              'By ${act.author} • ${DateFormat.MMMd().format(act.timestamp)}',
-                              style: theme.textTheme.bodySmall?.copyWith(
-                                color: colorScheme.primary,
-                                fontWeight: FontWeight.w500,
-                                fontSize: 11,
-                              ),
-                            ),
-                          ],
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              );
-            }, childCount: activities.length),
-          ),
-        ),
-
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
-      const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
+      if (topBar != null) topBarSliver(topBar!),
+      const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
+      feed,
+      ...tabBottomInsetSlivers(context),
     ];
 
-    return SyncedHeaderScaffold(
-      scrollController: scrollController,
-      actions: const [MoreTabsButton(), ProfileAvatarButton()],
-      contentSlivers: 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(
+      color: colors.bg,
+      child: RefreshIndicator(
+        color: colors.accent,
+        backgroundColor: colors.surface,
+        onRefresh: () => context.read<FilesController>().refreshData(),
+        // "Desktop limits it to 760px wide" (DESIGN_SYSTEM.md §4) - centered
+        // rather than left-aligned, so a wide window doesn't stretch the
+        // feed's short sentences edge to edge.
+        child: isDesktop
+            ? Center(
+                child: ConstrainedBox(
+                  constraints: const BoxConstraints(maxWidth: 760),
+                  child: scrollView,
+                ),
+              )
+            : scrollView,
+      ),
     );
   }
 }

lib/views/favorites_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:intl/intl.dart';
-import 'package:material_symbols_icons/symbols.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import 'package:share_plus/share_plus.dart';
 import '../models/app_tab.dart';
@@ -13,16 +13,24 @@ import '../providers/item_operations.dart';
 import '../providers/session_controller.dart';
 import '../providers/settings_controller.dart';
 import '../services/download_service.dart';
+import '../theme/design_tokens.dart';
 import '../widgets/details/details_sheet.dart';
-import '../widgets/item_icon.dart';
-import '../widgets/more_tabs_button.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/segmented_icon_toggle.dart';
-import '../widgets/selectable_thumbnail.dart';
+import '../widgets/files_controls_row.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/files/noo_file_row.dart';
+import '../widgets/noo/files/noo_file_table.dart';
+import '../widgets/noo/files/noo_file_tile.dart';
+import '../widgets/noo/lists/noo_grouped_list.dart';
+import '../widgets/noo/lists/noo_selection_bar.dart';
+import '../widgets/noo/lists/noo_settings_row.dart';
+import '../widgets/noo/media/noo_grid_card.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/noo/overlays/noo_sheet.dart';
+import '../widgets/noo/core/noo_button.dart';
 import '../widgets/share_sheet.dart';
-import '../widgets/sort_menu_button.dart';
 import '../widgets/sticky_header_delegate.dart';
-import '../widgets/synced_header_scaffold.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';
 
@@ -35,97 +43,41 @@ import 'move_copy_destination_picker.dart';
 /// wide list also means the breadcrumb-vs-content mismatch a filter
 /// toggle had - the trail showing wherever Files was last browsing while
 /// the content showed something else entirely - simply can't happen).
-/// Shares Files' own sort/hidden/storage-scope/grid-list display prefs
-/// (via `FilesController.applyFilesDisplayPrefs`) rather than a separate
-/// parallel settings dimension.
+/// Shares Files' own sort/hidden/type-filter/storage-scope/grid-list
+/// display prefs (via `FilesController.applyFilesDisplayPrefs`, and
+/// `FilesControlsRow` for the controls themselves) rather than a separate
+/// parallel settings dimension. Renders content only - the shell owns the
+/// top bar, bottom bar, drawer and FAB.
 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();
 }
 
-class _FavoritesViewState extends State<FavoritesView>
-    with SingleTickerProviderStateMixin {
+class _FavoritesViewState extends State<FavoritesView> {
   bool _requested = false;
   final Set<String> _selectedIds = {};
-  final ScrollController _selectionActionsScrollController = ScrollController();
-  final List<AnimationController> _scrollHintControllers = [];
 
   bool get _isSelecting => _selectedIds.isNotEmpty;
 
   void _toggleSelection(NextcloudItem item) {
     HapticFeedback.selectionClick();
-    final enteringSelection = _selectedIds.isEmpty;
     setState(() {
       if (!_selectedIds.remove(item.id)) _selectedIds.add(item.id);
     });
-    if (enteringSelection && _isSelecting) {
-      WidgetsBinding.instance.addPostFrameCallback(
-        (_) => _playScrollHint(_selectionActionsScrollController),
-      );
-    }
   }
 
   void _clearSelection() {
     setState(_selectedIds.clear);
   }
 
-  /// Mirrors `FilesView`/`PhotosView`'s identical scroll-hint - see their
-  /// doc comment: nudges the selection actions row right and back, once,
-  /// the first time a selection starts. No-ops if there's nothing to
-  /// scroll (row already fits).
-  Future<void> _playScrollHint(ScrollController scrollController) async {
-    await Future.delayed(const Duration(milliseconds: 500));
-    if (!mounted || !scrollController.hasClients) return;
-    final maxExtent = scrollController.position.maxScrollExtent;
-    if (maxExtent <= 0) return;
-    final double peak = maxExtent < 36 ? maxExtent : 36;
-    final controller = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 900),
-    );
-    _scrollHintControllers.add(controller);
-    final hint = TweenSequence<double>([
-      TweenSequenceItem(
-        tween: Tween(
-          begin: 0.0,
-          end: peak,
-        ).chain(CurveTween(curve: Curves.easeInOutSine)),
-        weight: 50,
-      ),
-      TweenSequenceItem(
-        tween: Tween(
-          begin: peak,
-          end: 0.0,
-        ).chain(CurveTween(curve: Curves.easeInOutSine)),
-        weight: 50,
-      ),
-    ]).animate(controller);
-    void onTick() {
-      if (scrollController.hasClients) {
-        scrollController.jumpTo(hint.value);
-      }
-    }
-
-    hint.addListener(onTick);
-    await controller.forward();
-    hint.removeListener(onTick);
-    _scrollHintControllers.remove(controller);
-    controller.dispose();
-  }
-
-  @override
-  void dispose() {
-    for (final controller in _scrollHintControllers) {
-      controller.dispose();
-    }
-    _selectionActionsScrollController.dispose();
-    super.dispose();
-  }
-
   /// A favorited folder switches to the Files tab, navigated there; a
   /// favorited file just opens directly from here, like Files/Photos do -
   /// no need to reposition Files first since dismissing the viewer lands
@@ -149,46 +101,57 @@ class _FavoritesViewState extends State<FavoritesView>
   /// The bulk actions shown in the sticky selection toolbar for the
   /// currently-selected items - same set Files/Photos offer.
   List<SelectionAction> _buildSelectionActions(List<NextcloudItem> selected) {
-    return [
+    final actions = [
       SelectionAction(
-        icon: Icons.favorite_border_rounded,
+        kind: SelectionActionKind.favorite,
+        icon: LucideIcons.starOff,
         label: 'Remove from favorites',
         onTap: () => _unfavoriteSelected(selected),
       ),
       SelectionAction(
-        icon: Icons.share_rounded,
+        kind: SelectionActionKind.share,
+        icon: LucideIcons.share2,
         label: 'Share',
         onTap: () => selected.length == 1
             ? ShareSheet.show(context, selected.single)
             : _shareSelected(context, selected),
       ),
       SelectionAction(
-        icon: Icons.download_rounded,
+        kind: SelectionActionKind.download,
+        icon: LucideIcons.download,
         label: 'Download',
         onTap: () => _downloadSelected(context, selected),
       ),
       SelectionAction(
-        icon: Icons.delete_outline_rounded,
+        kind: SelectionActionKind.delete,
+        icon: LucideIcons.trash2,
         label: 'Delete',
         onTap: () => _confirmDeleteSelected(context, selected),
       ),
       SelectionAction(
-        icon: Icons.copy_rounded,
+        kind: SelectionActionKind.copy,
+        icon: LucideIcons.copy,
         label: 'Copy',
         onTap: () => _moveOrCopySelected(selected, copy: true),
       ),
       SelectionAction(
-        icon: Icons.drive_file_move_rounded,
+        kind: SelectionActionKind.move,
+        icon: LucideIcons.folderInput,
         label: 'Move',
         onTap: () => _moveOrCopySelected(selected, copy: false),
       ),
       if (selected.length == 1)
         SelectionAction(
-          icon: Icons.info_outline_rounded,
+          kind: SelectionActionKind.details,
+          icon: LucideIcons.info,
           label: 'Details',
           onTap: () => DetailsSheet.show(context, selected.single),
         ),
     ];
+    return orderSelectionActions(
+      actions,
+      context.read<SettingsController>().selectionActionOrder,
+    );
   }
 
   Future<void> _unfavoriteSelected(List<NextcloudItem> items) async {
@@ -348,174 +311,87 @@ class _FavoritesViewState extends State<FavoritesView>
     );
   }
 
-  Widget _buildControlsRow(FilesController files) {
-    return SizedBox(
-      height: 44,
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: Row(
+  /// A single item's actions (the same list the multi-select bar offers,
+  /// just for one item) - mirrors `FilesView._showItemActionsSheet`.
+  void _showItemActionsSheet(BuildContext context, NextcloudItem item) {
+    final actions = _buildSelectionActions([item]);
+    showNooSheet(
+      context,
+      children: [
+        NooGroupedList(
           children: [
-            IconButton(
-              icon: Icon(
-                files.filesSortAscending
-                    ? Icons.arrow_upward_rounded
-                    : Icons.arrow_downward_rounded,
-                size: 20,
+            for (final action in actions)
+              NooSettingsRow(
+                icon: action.icon,
+                label: Text(action.label),
+                onTap: () {
+                  Navigator.pop(context);
+                  action.onTap();
+                },
               ),
-              visualDensity: VisualDensity.compact,
-              tooltip: files.filesSortAscending ? 'Ascending' : 'Descending',
-              onPressed: files.toggleFilesSortOrder,
-            ),
-            SizedBox(
-              width: 130,
-              child: SortMenuButton(
-                field: files.filesSortField,
-                onChanged: files.setFilesSortField,
-              ),
-            ),
-            ToggleIconButton(
-              icon: files.showHiddenFiles
-                  ? Icons.visibility_rounded
-                  : Icons.visibility_off_rounded,
-              isSelected: files.showHiddenFiles,
-              onTap: () => files.toggleShowHiddenFiles(),
-              tooltip: 'Show hidden files',
-            ),
-            const SizedBox(width: 4),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Symbols.circles_rounded,
-                  isSelected: files.storageScope == StorageScope.cloud,
-                  onTap: () => files.setStorageScope(StorageScope.cloud),
-                  tooltip: 'Cloud storage',
-                ),
-                ToggleIconButton(
-                  icon: Symbols.hard_drive_rounded,
-                  isSelected: files.storageScope == StorageScope.external,
-                  onTap: () => files.setStorageScope(StorageScope.external),
-                  tooltip: 'External storage',
-                ),
-              ],
-            ),
-            const SizedBox(width: 8),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Icons.view_list_rounded,
-                  isSelected: !files.isGridView,
-                  onTap: () => files.setGridView(false),
-                  tooltip: 'List view',
-                ),
-                ToggleIconButton(
-                  icon: Icons.grid_view_rounded,
-                  isSelected: files.isGridView,
-                  onTap: () => files.setGridView(true),
-                  tooltip: 'Grid view',
-                ),
-              ],
-            ),
           ],
         ),
-      ),
+      ],
     );
   }
 
-  Widget _buildListTile(
+  /// A real image/video thumbnail for [item]'s file tile/card, sized so
+  /// `NooFileTile`'s `FittedBox` (which needs a concretely-sized child to
+  /// scale) always has one to work with; null when there's nothing to show
+  /// (falls back to the kind's soft-color tile).
+  Widget? _thumbnailFor(
     BuildContext context,
-    NextcloudItem item,
-    List<NextcloudItem> siblings,
-  ) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-    final session = context.watch<SessionController>();
-    final isSelected = _selectedIds.contains(item.id);
-
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(16),
-        child: Material(
-          color: isSelected
-              ? colorScheme.primaryContainer.withValues(alpha: 0.5)
-              : colorScheme.surfaceContainerLow,
-          child: InkWell(
-            onTap: () {
-              if (_isSelecting) {
-                _toggleSelection(item);
-              } else {
-                _openFavorite(context, item, siblings);
-              }
-            },
-            onLongPress: () => _toggleSelection(item),
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-              child: Row(
-                children: [
-                  SelectableThumbnail(
-                    isSelected: isSelected,
-                    size: 44,
-                    checkmarkSize: 24,
-                    child: ItemThumbnail(
-                      item: item,
-                      service: session.service,
-                      size: 44,
-                      borderRadius: 12,
-                      iconSize: 22,
-                    ),
-                  ),
-                  const SizedBox(width: 14),
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(
-                          item.name,
-                          style: theme.textTheme.titleMedium?.copyWith(
-                            fontWeight: FontWeight.w600,
-                            fontSize: 14,
-                          ),
-                        ),
-                        const SizedBox(height: 2),
-                        Text(
-                          item.isFolder
-                              ? 'Folder'
-                              : '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
-                          style: theme.textTheme.bodySmall?.copyWith(
-                            color: colorScheme.onSurfaceVariant,
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _buildGridCard(
-    BuildContext context,
-    NextcloudItem item,
-    List<NextcloudItem> siblings,
-  ) {
-    final theme = Theme.of(context);
-    final session = context.watch<SessionController>();
-    final isSelected = _selectedIds.contains(item.id);
+    NextcloudItem item, {
+    required double extent,
+  }) {
     final isMedia =
         (item.type == NextcloudItemType.image ||
             item.type == NextcloudItemType.video) &&
         item.previewUrl != null;
-    final iconColor = getIconColor(context, item.type);
+    if (!isMedia) return null;
+    final session = context.watch<SessionController>();
+    return Image.network(
+      item.previewUrl!,
+      width: extent,
+      height: extent,
+      headers: session.service?.authHeaders,
+      fit: BoxFit.cover,
+      filterQuality: FilterQuality.low,
+      gaplessPlayback: true,
+      errorBuilder: (ctx, err, stack) => const SizedBox.shrink(),
+    );
+  }
 
-    return ClipRRect(
-      borderRadius: BorderRadius.circular(20),
-      child: Material(
-        color: theme.colorScheme.surfaceContainerLow,
-        child: InkWell(
+  String _metaFor(NextcloudItem item) {
+    return item.isFolder
+        ? 'Folder'
+        : '${formatBytes(item.size)} · ${DateFormat.yMMMd().format(item.lastModified)}';
+  }
+
+  Widget _buildRow(
+    BuildContext context,
+    NextcloudItem item,
+    List<NextcloudItem> siblings,
+  ) {
+    final isSelected = _selectedIds.contains(item.id);
+    final kind = NooFileKind.from(
+      name: item.name,
+      mimeType: item.mimeType,
+      isDirectory: item.isFolder,
+    );
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 8),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(NooRadii.card),
+        child: NooFileRow(
+          kind: kind,
+          name: item.name,
+          meta: _metaFor(item),
+          favorite: item.isFavorite,
+          iosStyle: NooLayout.iosStyle(context),
+          selected: isSelected,
+          thumbnail: _thumbnailFor(context, item, extent: NooSizes.rowMobile),
           onTap: () {
             if (_isSelecting) {
               _toggleSelection(item);
@@ -524,66 +400,91 @@ class _FavoritesViewState extends State<FavoritesView>
             }
           },
           onLongPress: () => _toggleSelection(item),
-          child: SelectableThumbnail(
-            isSelected: isSelected,
-            checkmarkSize: 32,
-            child: isMedia
-                ? Image.network(
-                    item.previewUrl!,
-                    headers: session.service?.authHeaders,
-                    fit: BoxFit.cover,
-                    filterQuality: FilterQuality.low,
-                    gaplessPlayback: true,
-                    errorBuilder: (ctx, err, stack) => Container(
-                      color: theme.colorScheme.secondaryContainer,
-                      child: Icon(
-                        getItemIcon(item.type),
-                        color: theme.colorScheme.onSecondaryContainer,
-                        size: 32,
-                      ),
-                    ),
-                  )
-                : Padding(
-                    padding: const EdgeInsets.all(14),
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        Container(
-                          width: 40,
-                          height: 40,
-                          decoration: BoxDecoration(
-                            color: iconColor.withValues(alpha: 0.12),
-                            borderRadius: BorderRadius.circular(12),
-                          ),
-                          child: Icon(
-                            getItemIcon(item.type),
-                            color: iconColor,
-                            size: 24,
-                          ),
-                        ),
-                        Text(
-                          item.name,
-                          maxLines: 2,
-                          overflow: TextOverflow.ellipsis,
-                          style: theme.textTheme.titleMedium?.copyWith(
-                            fontWeight: FontWeight.w600,
-                            fontSize: 13,
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-          ),
+          onMore: () => _showItemActionsSheet(context, item),
         ),
       ),
     );
   }
 
+  Widget _buildTableRow(
+    BuildContext context,
+    NextcloudItem item,
+    List<NextcloudItem> siblings,
+  ) {
+    final isSelected = _selectedIds.contains(item.id);
+    final kind = NooFileKind.from(
+      name: item.name,
+      mimeType: item.mimeType,
+      isDirectory: item.isFolder,
+    );
+
+    return NooFileTableRow(
+      kind: kind,
+      name: item.name,
+      col2: item.isFolder ? null : DateFormat.yMMMd().format(item.lastModified),
+      col3: item.isFolder ? null : formatBytes(item.size),
+      favorite: item.isFavorite,
+      selected: isSelected,
+      thumbnail: _thumbnailFor(
+        context,
+        item,
+        extent: NooFileTileSize.desktop.extent,
+      ),
+      onTap: () {
+        if (_isSelecting) {
+          _toggleSelection(item);
+        } else {
+          _openFavorite(context, item, siblings);
+        }
+      },
+      // Desktop has no long-press gesture; right-click is this row's
+      // equivalent entry point into multi-select.
+      onSecondaryTap: () => _toggleSelection(item),
+      onMore: () => _showItemActionsSheet(context, item),
+    );
+  }
+
+  Widget _buildGridCard(
+    BuildContext context,
+    NextcloudItem item,
+    List<NextcloudItem> siblings,
+    bool isDesktop,
+  ) {
+    final colors = context.nooColors;
+    final isSelected = _selectedIds.contains(item.id);
+    final kind = NooFileKind.from(
+      name: item.name,
+      mimeType: item.mimeType,
+      isDirectory: item.isFolder,
+    );
+    final thumbnailHeight = isDesktop ? 118.0 : 104.0;
+
+    return NooGridCard(
+      name: item.name,
+      meta: item.isFolder ? 'Folder' : formatBytes(item.size),
+      placeholderColor: kind.background(colors),
+      icon: kind.icon,
+      iconColor: kind.foreground(colors),
+      thumbnailHeight: thumbnailHeight,
+      thumbnail: _thumbnailFor(context, item, extent: thumbnailHeight),
+      selected: isSelected,
+      verticalOverflowIcon: !NooLayout.iosStyle(context),
+      onTap: () {
+        if (_isSelecting) {
+          _toggleSelection(item);
+        } else {
+          _openFavorite(context, item, siblings);
+        }
+      },
+      onLongPress: () => _toggleSelection(item),
+      onMore: () => _showItemActionsSheet(context, item),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
+    final isDesktop = NooLayout.isDesktop(context);
     final favoritesController = context.watch<FavoritesController>();
     final filesController = context.watch<FilesController>();
 
@@ -600,18 +501,27 @@ class _FavoritesViewState extends State<FavoritesView>
         .where((i) => _selectedIds.contains(i.id))
         .toList();
 
+    final controlsRow = Padding(
+      padding: const EdgeInsets.fromLTRB(
+        NooSpace.sm,
+        NooSpace.sm,
+        NooSpace.sm,
+        NooSpace.xs,
+      ),
+      child: FilesControlsRow(folderPath: filesController.currentFolderPath),
+    );
+
     final contentSlivers = <Widget>[
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       SliverPersistentHeader(
         pinned: !_isSelecting,
         delegate: StickyHeaderDelegate(
-          height: 60,
-          child: Padding(
-            padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
-            child: _buildControlsRow(filesController),
-          ),
+          height: _isSelecting ? 56 : 64,
+          child: _isSelecting
+              ? _buildSelectionBar(context, selectedItems)
+              : controlsRow,
         ),
       ),
-      const SliverToBoxAdapter(child: SizedBox(height: 8)),
       if (favoritesController.isLoading && favorites.isEmpty)
         const SliverFillRemaining(
           hasScrollBody: false,
@@ -626,32 +536,25 @@ class _FavoritesViewState extends State<FavoritesView>
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  Icon(
-                    Icons.error_outline_rounded,
-                    size: 64,
-                    color: colorScheme.error,
-                  ),
+                  Icon(LucideIcons.circleAlert, size: 56, color: colors.danger),
                   const SizedBox(height: 16),
                   Text(
                     'Could not load favorites',
-                    style: theme.textTheme.titleLarge?.copyWith(
-                      color: colorScheme.error,
-                      fontWeight: FontWeight.bold,
-                    ),
+                    style: NooText.cardTitle.copyWith(color: colors.danger),
                   ),
                   const SizedBox(height: 8),
                   Text(
                     favoritesController.errorMessage!,
                     textAlign: TextAlign.center,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
+                    style: NooText.body.copyWith(color: colors.fg3),
                   ),
                   const SizedBox(height: 20),
-                  FilledButton.icon(
-                    onPressed: favoritesController.fetchAll,
-                    icon: const Icon(Icons.refresh_rounded),
-                    label: const Text('Retry'),
+                  NooButton(
+                    variant: NooButtonVariant.secondary,
+                    size: NooButtonSize.field,
+                    icon: LucideIcons.refreshCw,
+                    onTap: favoritesController.fetchAll,
+                    child: const Text('Retry'),
                   ),
                 ],
               ),
@@ -665,17 +568,11 @@ class _FavoritesViewState extends State<FavoritesView>
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                Icon(
-                  Icons.favorite_border_rounded,
-                  size: 64,
-                  color: colorScheme.outlineVariant,
-                ),
+                Icon(LucideIcons.star, size: 56, color: colors.fg3),
                 const SizedBox(height: 12),
                 Text(
                   'No favorites yet',
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    color: colorScheme.onSurfaceVariant,
-                  ),
+                  style: NooText.cardTitle.copyWith(color: colors.fg2),
                 ),
               ],
             ),
@@ -683,30 +580,73 @@ class _FavoritesViewState extends State<FavoritesView>
         )
       else if (filesController.isGridView)
         SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+          padding: EdgeInsets.symmetric(
+            horizontal: NooLayout.gutter(context),
+            vertical: NooSpace.xs,
+          ),
           sliver: SliverGrid(
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 2,
-              childAspectRatio: 1.1,
-              crossAxisSpacing: 12,
-              mainAxisSpacing: 12,
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: isDesktop
+                  ? 5
+                  : NooLayout.gridColumns(context, phone: 2, minTile: 180),
+              crossAxisSpacing: isDesktop ? 16 : 10,
+              mainAxisSpacing: isDesktop ? 16 : 10,
+              childAspectRatio: isDesktop ? 0.92 : 0.85,
             ),
             delegate: SliverChildBuilderDelegate((context, index) {
-              return _buildGridCard(context, favorites[index], siblings);
+              return _buildGridCard(
+                context,
+                favorites[index],
+                siblings,
+                isDesktop,
+              );
             }, childCount: favorites.length),
           ),
         )
+      else if (isDesktop)
+        SliverPadding(
+          padding: EdgeInsets.symmetric(horizontal: NooLayout.gutter(context)),
+          sliver: SliverList(
+            delegate: SliverChildBuilderDelegate((context, index) {
+              if (index == 0) {
+                return NooFileTableHeader(
+                  col2Label: 'Modified',
+                  col3Label: 'Size',
+                  sortColumn: switch (filesController.filesSortField) {
+                    FileSortField.name => 0,
+                    FileSortField.dateModified => 1,
+                    FileSortField.size => 2,
+                    FileSortField.dateCreated => null,
+                  },
+                  sortAscending: filesController.filesSortAscending,
+                  onSort: (column) {
+                    final field = [
+                      FileSortField.name,
+                      FileSortField.dateModified,
+                      FileSortField.size,
+                    ][column];
+                    if (field == filesController.filesSortField) {
+                      filesController.toggleFilesSortOrder();
+                    } else {
+                      filesController.setFilesSortField(field);
+                    }
+                  },
+                );
+              }
+              return _buildTableRow(context, favorites[index - 1], siblings);
+            }, childCount: favorites.length + 1),
+          ),
+        )
       else
         SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+          padding: EdgeInsets.symmetric(horizontal: NooLayout.gutter(context)),
           sliver: SliverList(
             delegate: SliverChildBuilderDelegate((context, index) {
-              return _buildListTile(context, favorites[index], siblings);
+              return _buildRow(context, favorites[index], siblings);
             }, childCount: favorites.length),
           ),
         ),
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
-      const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
+      SliverToBoxAdapter(child: SizedBox(height: bottomBarClearance(context))),
     ];
 
     return PopScope(
@@ -714,74 +654,43 @@ class _FavoritesViewState extends State<FavoritesView>
       onPopInvokedWithResult: (didPop, result) {
         if (!didPop && _isSelecting) _clearSelection();
       },
-      child: SyncedHeaderScaffold(
-        scrollController: widget.scrollController,
-        actions: const [MoreTabsButton(), ProfileAvatarButton()],
-        onRefresh: favoritesController.fetchAll,
-        selectionBar: _isSelecting
-            ? _buildSelectionBar(context, theme, selectedItems)
-            : null,
-        contentSlivers: contentSlivers,
+      child: ColoredBox(
+        color: colors.bg,
+        child: RefreshIndicator(
+          color: colors.accent,
+          backgroundColor: colors.surface,
+          onRefresh: favoritesController.fetchAll,
+          // 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,
+            ),
+          ),
+        ),
       ),
     );
   }
 
-  /// Replaces the top bar entirely while selecting (see
-  /// `SyncedHeaderScaffold.selectionBar`) - mirrors Files/Photos' identical
-  /// selection bar.
+  /// Replaces the controls row's own sticky slot while selecting - mirrors
+  /// Files/Photos' identical selection bar.
   Widget _buildSelectionBar(
     BuildContext context,
-    ThemeData theme,
     List<NextcloudItem> selectedItems,
   ) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16),
-      child: Row(
-        children: [
-          SizedBox(
-            width: MediaQuery.of(context).size.width * 0.5,
-            child: Align(
-              alignment: Alignment.centerLeft,
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  IconButton(
-                    icon: const Icon(Icons.close_rounded, size: 20),
-                    tooltip: 'Cancel selection',
-                    onPressed: _clearSelection,
-                    visualDensity: VisualDensity.compact,
-                  ),
-                  const SizedBox(width: 8),
-                  Text(
-                    '${selectedItems.length} selected',
-                    style: theme.textTheme.titleSmall?.copyWith(
-                      fontWeight: FontWeight.w700,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ),
-          Expanded(
-            child: SingleChildScrollView(
-              controller: _selectionActionsScrollController,
-              scrollDirection: Axis.horizontal,
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  for (final action in _buildSelectionActions(selectedItems))
-                    IconButton(
-                      icon: Icon(action.icon, size: 20),
-                      tooltip: action.label,
-                      onPressed: action.onTap,
-                      visualDensity: VisualDensity.compact,
-                    ),
-                ],
-              ),
-            ),
-          ),
-        ],
-      ),
+    return NooSelectionBar(
+      count: selectedItems.length,
+      actions: _buildSelectionActions(selectedItems),
+      onClose: _clearSelection,
+      isDesktop: NooLayout.isDesktop(context),
+      iosStyle: NooLayout.iosStyle(context),
     );
   }
 }

lib/views/lock_screen_view.dart

@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../providers/session_controller.dart';
+import '../theme/design_tokens.dart';
+import '../widgets/noo/core/noo_button.dart';
 
 /// Shown in place of the main shell whenever [SessionController.needsUnlock] is
 /// true - a fresh app launch with login lock configured, or returning to the
@@ -48,10 +51,10 @@ class _LockScreenViewState extends State<LockScreenView>
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
 
     return Scaffold(
+      backgroundColor: colors.bg,
       body: Center(
         child: Padding(
           padding: const EdgeInsets.all(32),
@@ -63,10 +66,7 @@ class _LockScreenViewState extends State<LockScreenView>
               // silhouette on transparent, meant to be recolored rather
               // than shown as-is.
               ColorFiltered(
-                colorFilter: ColorFilter.mode(
-                  colorScheme.onSurface,
-                  BlendMode.srcIn,
-                ),
+                colorFilter: ColorFilter.mode(colors.fg1, BlendMode.srcIn),
                 child: Image.asset(
                   'assets/icon/app_icon_monochrome.png',
                   width: 80,
@@ -77,35 +77,22 @@ class _LockScreenViewState extends State<LockScreenView>
               Text(
                 'Noo is locked',
                 textAlign: TextAlign.center,
-                style: theme.textTheme.headlineSmall?.copyWith(
-                  fontWeight: FontWeight.w700,
-                ),
+                style: NooText.title.copyWith(color: colors.fg1),
               ),
               const SizedBox(height: 8),
               Text(
                 'Unlock with your PIN or biometrics to continue',
                 textAlign: TextAlign.center,
-                style: theme.textTheme.bodyMedium?.copyWith(
-                  color: colorScheme.onSurfaceVariant,
-                ),
+                style: NooText.body.copyWith(color: colors.fg3),
               ),
               const SizedBox(height: 32),
-              SizedBox(
-                height: 54,
-                child: FilledButton.icon(
-                  onPressed: _authenticating ? null : _attemptUnlock,
-                  icon: _authenticating
-                      ? SizedBox(
-                          width: 20,
-                          height: 20,
-                          child: CircularProgressIndicator(
-                            strokeWidth: 2.5,
-                            color: colorScheme.onPrimary,
-                          ),
-                        )
-                      : const Icon(Icons.lock_open_rounded),
-                  label: Text(_authenticating ? 'Unlocking…' : 'Unlock'),
-                ),
+              NooButton(
+                variant: NooButtonVariant.primary,
+                size: NooButtonSize.cta,
+                icon: LucideIcons.lockOpen,
+                disabled: _authenticating,
+                onTap: _attemptUnlock,
+                child: Text(_authenticating ? 'Unlocking…' : 'Unlock'),
               ),
             ],
           ),

lib/views/login_view.dart

@@ -1,13 +1,22 @@
 import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import '../models/saved_account.dart';
 import '../providers/session_controller.dart';
+import '../theme/design_tokens.dart';
+import '../widgets/noo/core/noo_avatar.dart';
+import '../widgets/noo/core/noo_button.dart';
+import '../widgets/noo/nav/noo_top_bar.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/noo/overlays/noo_text_field.dart';
+import '../widgets/settings/settings_dialogs.dart';
+import '../widgets/shell/shell_common.dart';
 import 'login_webview_view.dart';
 
 class LoginView extends StatefulWidget {
   /// True when this is pushed from Settings ("Add account") on top of an
   /// already-logged-in session, rather than shown as the app's root screen
-  /// with no account yet. Adds an AppBar/back affordance and auto-pops once
+  /// with no account yet. Adds a top bar/back affordance and auto-pops once
   /// the new account becomes active.
   final bool isAddingAccount;
 
@@ -18,9 +27,9 @@ class LoginView extends StatefulWidget {
 }
 
 class _LoginViewState extends State<LoginView> {
-  final _formKey = GlobalKey<FormState>();
   final _urlController = TextEditingController();
   String? _originalActiveAccountId;
+  String? _localError;
   bool _popped = false;
   bool _webViewPushed = false;
 
@@ -39,12 +48,14 @@ class _LoginViewState extends State<LoginView> {
   }
 
   void _handleContinue() {
-    if (!_formKey.currentState!.validate()) return;
+    final url = _urlController.text.trim();
+    if (url.isEmpty) {
+      setState(() => _localError = 'Please enter your Nextcloud server address');
+      return;
+    }
+    setState(() => _localError = null);
     FocusScope.of(context).unfocus();
-    context.read<SessionController>().startLoginFlow(
-      _urlController.text.trim(),
-      addAccount: widget.isAddingAccount,
-    );
+    context.read<SessionController>().startLoginFlow(url, addAccount: widget.isAddingAccount);
   }
 
   /// Resumes a saved account with one tap (see [SessionController.switchAccount]).
@@ -68,47 +79,25 @@ class _LoginViewState extends State<LoginView> {
       );
   }
 
-  /// Mirrors AccountView's `_AccountsCard._confirmRemove` - same
-  /// destructive-action gate, just reached from the login screen instead of
-  /// Settings.
+  /// Mirrors Settings' own account removal - same confirm/remove gate, just
+  /// reached from the login screen instead of the saved-accounts list.
   Future<void> _confirmRemoveAccount(SavedAccount account) async {
-    final host = Uri.tryParse(account.serverUrl)?.host ?? account.serverUrl;
-    final confirmed = await showDialog<bool>(
-      context: context,
-      builder: (dialogContext) {
-        return AlertDialog(
-          title: const Text('Remove Account'),
-          content: Text(
-            'Remove ${account.username} ($host)? You can add it again later.',
-          ),
-          actions: [
-            TextButton(
-              onPressed: () => Navigator.pop(dialogContext, false),
-              child: const Text('Cancel'),
-            ),
-            FilledButton(
-              style: FilledButton.styleFrom(
-                backgroundColor: Theme.of(dialogContext).colorScheme.error,
-              ),
-              onPressed: () => Navigator.pop(dialogContext, true),
-              child: const Text('Remove'),
-            ),
-          ],
-        );
-      },
+    await confirmRemoveAccount(
+      context,
+      context.read<SessionController>(),
+      accountId: account.id,
+      username: account.username,
+      host: serverHost(account.serverUrl),
+      isActive: false,
     );
-    if (confirmed != true || !mounted) return;
-    await context.read<SessionController>().removeAccount(account.id);
   }
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
     final session = context.watch<SessionController>();
 
-    final isAwaitingBrowser =
-        session.loginFlowStatus == LoginFlowStatus.awaitingBrowser;
+    final isAwaitingBrowser = session.loginFlowStatus == LoginFlowStatus.awaitingBrowser;
     final isInitiating = session.loginFlowStatus == LoginFlowStatus.initiating;
 
     // A new/refreshed account has just become active - pop back to
@@ -128,9 +117,7 @@ class _LoginViewState extends State<LoginView> {
     // SessionController.startLoginFlow's doc comment for why. Push it the
     // moment there's a URL to show; _webViewPushed resets once that route
     // pops (cancelled or done) so a retry after cancelling pushes it again.
-    if (!_webViewPushed &&
-        isAwaitingBrowser &&
-        session.pendingLoginUrl != null) {
+    if (!_webViewPushed && isAwaitingBrowser && session.pendingLoginUrl != null) {
       _webViewPushed = true;
       final url = session.pendingLoginUrl!;
       WidgetsBinding.instance.addPostFrameCallback((_) async {
@@ -154,9 +141,17 @@ class _LoginViewState extends State<LoginView> {
       });
     }
 
+    final errorMessage =
+        _localError ?? (session.loginFlowStatus == LoginFlowStatus.error ? session.errorMessage : null);
+
     final body = Scaffold(
+      backgroundColor: colors.bg,
       appBar: widget.isAddingAccount
-          ? AppBar(title: const Text('Add Account'))
+          ? NooTopBar(
+              style: NooLayout.navStyle(context),
+              title: 'Add account',
+              leading: const NooTopBarBack(),
+            )
           : null,
       body: SafeArea(
         child: Center(
@@ -172,8 +167,7 @@ class _LoginViewState extends State<LoginView> {
                   // deleting it, specifically so it can be resumed
                   // from here with one tap - no need to repeat
                   // Login Flow v2.
-                  if (!widget.isAddingAccount &&
-                      session.accounts.isNotEmpty) ...[
+                  if (!widget.isAddingAccount && session.accounts.isNotEmpty) ...[
                     _SavedAccountsSection(
                       accounts: session.accounts,
                       onSelect: (account) => _continueAsAccount(account),
@@ -182,33 +176,21 @@ class _LoginViewState extends State<LoginView> {
                     const SizedBox(height: 28),
                     Row(
                       children: [
-                        const Expanded(child: Divider()),
+                        Expanded(child: Divider(color: colors.line)),
                         Padding(
                           padding: const EdgeInsets.symmetric(horizontal: 12),
-                          child: Text(
-                            'or',
-                            style: theme.textTheme.bodySmall?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                            ),
-                          ),
+                          child: Text('or', style: NooText.meta.copyWith(color: colors.fg3)),
                         ),
-                        const Expanded(child: Divider()),
+                        Expanded(child: Divider(color: colors.line)),
                       ],
                     ),
                     const SizedBox(height: 28),
                   ],
                   _ServerForm(
-                    formKey: _formKey,
                     urlController: _urlController,
-                    isLoading:
-                        isInitiating || session.isLoading || isAwaitingBrowser,
-                    errorMessage:
-                        session.loginFlowStatus == LoginFlowStatus.error
-                        ? session.errorMessage
-                        : null,
+                    isLoading: isInitiating || session.isLoading || isAwaitingBrowser,
+                    errorMessage: errorMessage,
                     onContinue: _handleContinue,
-                    theme: theme,
-                    colorScheme: colorScheme,
                   ),
                 ],
               ),
@@ -236,157 +218,94 @@ class _LoginViewState extends State<LoginView> {
 }
 
 class _ServerForm extends StatelessWidget {
-  final GlobalKey<FormState> formKey;
   final TextEditingController urlController;
   final bool isLoading;
   final String? errorMessage;
   final VoidCallback onContinue;
-  final ThemeData theme;
-  final ColorScheme colorScheme;
 
   const _ServerForm({
-    required this.formKey,
     required this.urlController,
     required this.isLoading,
     required this.errorMessage,
     required this.onContinue,
-    required this.theme,
-    required this.colorScheme,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Form(
-      key: formKey,
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          Center(
-            // Same monochrome-tinted treatment as the splash/lock screens
-            // (see main.dart's _SplashView) - the asset is a plain white
-            // silhouette on transparent, meant to be recolored rather than
-            // shown as-is. Used everywhere the app shows its own icon
-            // in-app, rather than the full-color launcher icon.
-            child: ColorFiltered(
-              colorFilter: ColorFilter.mode(
-                Theme.of(context).colorScheme.onSurface,
-                BlendMode.srcIn,
-              ),
-              child: Image.asset(
-                'assets/icon/app_icon_monochrome.png',
-                width: 80,
-                height: 80,
-              ),
-            ),
+    final colors = context.nooColors;
+
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Center(
+          // Same monochrome-tinted treatment as the splash/lock screens
+          // (see main.dart's _SplashView) - the asset is a plain white
+          // silhouette on transparent, meant to be recolored rather than
+          // shown as-is. Used everywhere the app shows its own icon
+          // in-app, rather than the full-color launcher icon.
+          child: ColorFiltered(
+            colorFilter: ColorFilter.mode(colors.fg1, BlendMode.srcIn),
+            child: Image.asset('assets/icon/app_icon_monochrome.png', width: 80, height: 80),
           ),
-          const SizedBox(height: 24),
-          Text(
-            'Noo',
-            textAlign: TextAlign.center,
-            style: theme.textTheme.headlineMedium?.copyWith(
-              fontWeight: FontWeight.w800,
-              letterSpacing: -0.5,
+        ),
+        const SizedBox(height: 24),
+        Text('Noo', textAlign: TextAlign.center, style: NooText.largeTitle.copyWith(color: colors.fg1)),
+        const SizedBox(height: 6),
+        Text(
+          'Connect to your self-hosted server',
+          textAlign: TextAlign.center,
+          style: NooText.body.copyWith(color: colors.fg3),
+        ),
+        const SizedBox(height: 36),
+        if (errorMessage != null)
+          Container(
+            margin: const EdgeInsets.only(bottom: 20),
+            padding: const EdgeInsets.all(14),
+            decoration: BoxDecoration(
+              color: colors.dangerSoft,
+              borderRadius: BorderRadius.circular(NooRadii.input),
             ),
-          ),
-          const SizedBox(height: 6),
-          Text(
-            'Connect to your self-hosted server',
-            textAlign: TextAlign.center,
-            style: theme.textTheme.bodyMedium?.copyWith(
-              color: colorScheme.onSurfaceVariant,
-            ),
-          ),
-          const SizedBox(height: 36),
-          if (errorMessage != null)
-            Container(
-              margin: const EdgeInsets.only(bottom: 20),
-              padding: const EdgeInsets.all(14),
-              decoration: BoxDecoration(
-                color: colorScheme.errorContainer,
-                borderRadius: BorderRadius.circular(16),
-              ),
-              child: Row(
-                children: [
-                  Icon(
-                    Icons.error_outline_rounded,
-                    color: colorScheme.onErrorContainer,
-                    size: 20,
-                  ),
-                  const SizedBox(width: 12),
-                  Expanded(
-                    child: Text(
-                      errorMessage!,
-                      style: theme.textTheme.bodySmall?.copyWith(
-                        color: colorScheme.onErrorContainer,
-                        fontWeight: FontWeight.w500,
-                      ),
+            child: Row(
+              children: [
+                Icon(LucideIcons.circleAlert, color: colors.danger, size: 20),
+                const SizedBox(width: 12),
+                Expanded(
+                  child: Text(
+                    errorMessage!,
+                    style: NooText.body.copyWith(
+                      fontSize: 13,
+                      fontWeight: FontWeight.w500,
+                      color: colors.danger,
                     ),
                   ),
-                ],
-              ),
-            ),
-          TextFormField(
-            controller: urlController,
-            keyboardType: TextInputType.url,
-            autofillHints: const [AutofillHints.url],
-            decoration: InputDecoration(
-              labelText: 'Server Address',
-              hintText: 'cloud.example.com',
-              prefixIcon: const Icon(Icons.dns_outlined),
-              border: OutlineInputBorder(
-                borderRadius: BorderRadius.circular(16),
-              ),
-              filled: true,
-              fillColor: colorScheme.surfaceContainerLow,
-            ),
-            validator: (val) {
-              if (val == null || val.trim().isEmpty) {
-                return 'Please enter your Nextcloud server address';
-              }
-              return null;
-            },
-            onFieldSubmitted: (_) => onContinue(),
-          ),
-          const SizedBox(height: 28),
-          SizedBox(
-            height: 54,
-            child: FilledButton(
-              onPressed: isLoading ? null : onContinue,
-              style: FilledButton.styleFrom(
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(27),
                 ),
-              ),
-              child: isLoading
-                  ? SizedBox(
-                      width: 24,
-                      height: 24,
-                      child: CircularProgressIndicator(
-                        strokeWidth: 2.5,
-                        color: colorScheme.onPrimary,
-                      ),
-                    )
-                  : const Text(
-                      'Continue',
-                      style: TextStyle(
-                        fontSize: 16,
-                        fontWeight: FontWeight.bold,
-                      ),
-                    ),
+              ],
             ),
           ),
-          const SizedBox(height: 24),
-          Text(
-            "You'll finish signing in on the page that opens. This app never sees your password.",
-            textAlign: TextAlign.center,
-            style: theme.textTheme.bodySmall?.copyWith(
-              color: colorScheme.onSurfaceVariant,
-              fontSize: 11,
-            ),
-          ),
-        ],
-      ),
+        NooTextField(
+          controller: urlController,
+          placeholder: 'cloud.example.com',
+          leadingIcon: LucideIcons.server,
+          keyboardType: TextInputType.url,
+          onSubmitted: (_) => onContinue(),
+        ),
+        const SizedBox(height: 28),
+        NooButton(
+          variant: NooButtonVariant.primary,
+          size: NooButtonSize.cta,
+          fullWidth: true,
+          disabled: isLoading,
+          onTap: onContinue,
+          child: Text(isLoading ? 'Connecting…' : 'Continue'),
+        ),
+        const SizedBox(height: 24),
+        Text(
+          "You'll finish signing in on the page that opens. This app never sees your password.",
+          textAlign: TextAlign.center,
+          style: NooText.meta.copyWith(color: colors.fg3, fontSize: 11),
+        ),
+      ],
     );
   }
 }
@@ -398,44 +317,35 @@ class _SavedAccountsSection extends StatelessWidget {
   final ValueChanged<SavedAccount> onSelect;
   final ValueChanged<SavedAccount> onRemove;
 
-  const _SavedAccountsSection({
-    required this.accounts,
-    required this.onSelect,
-    required this.onRemove,
-  });
+  const _SavedAccountsSection({required this.accounts, required this.onSelect, required this.onRemove});
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
 
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
         Padding(
           padding: const EdgeInsets.only(left: 4, bottom: 8),
-          child: Text(
-            'Continue as',
-            style: theme.textTheme.labelLarge?.copyWith(
-              color: colorScheme.onSurfaceVariant,
-              fontWeight: FontWeight.w600,
-            ),
-          ),
+          child: Text('Continue as', style: NooText.label.copyWith(color: colors.fg2)),
         ),
-        Card(
-          margin: EdgeInsets.zero,
-          child: Column(
-            children: [
-              for (final account in accounts) ...[
-                _SavedAccountRow(
-                  account: account,
-                  onTap: () => onSelect(account),
-                  onRemove: () => onRemove(account),
-                ),
-                if (account != accounts.last)
-                  const Divider(height: 1, indent: 16, endIndent: 16),
+        ClipRRect(
+          borderRadius: BorderRadius.circular(NooRadii.card),
+          child: DecoratedBox(
+            decoration: BoxDecoration(color: colors.line),
+            child: Column(
+              children: [
+                for (var i = 0; i < accounts.length; i++) ...[
+                  if (i > 0) const SizedBox(height: 1),
+                  _SavedAccountRow(
+                    account: accounts[i],
+                    onTap: () => onSelect(accounts[i]),
+                    onRemove: () => onRemove(accounts[i]),
+                  ),
+                ],
               ],
-            ],
+            ),
           ),
         ),
       ],
@@ -448,40 +358,60 @@ class _SavedAccountRow extends StatelessWidget {
   final VoidCallback onTap;
   final VoidCallback onRemove;
 
-  const _SavedAccountRow({
-    required this.account,
-    required this.onTap,
-    required this.onRemove,
-  });
+  const _SavedAccountRow({required this.account, required this.onTap, required this.onRemove});
 
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-    final host = Uri.tryParse(account.serverUrl)?.host ?? account.serverUrl;
-    final initial = account.username.isNotEmpty
-        ? account.username[0].toUpperCase()
-        : '?';
+    final colors = context.nooColors;
 
-    return ListTile(
-      leading: CircleAvatar(
-        backgroundColor: colorScheme.primary,
-        child: Text(
-          initial,
-          style: TextStyle(
-            color: colorScheme.onPrimary,
-            fontWeight: FontWeight.bold,
+    return Material(
+      color: colors.surface,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: NooSpace.md, vertical: 10),
+          child: Row(
+            spacing: 12,
+            children: [
+              NooAvatar(initials: accountInitial(account.username), size: 36),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  spacing: 2,
+                  children: [
+                    Text(
+                      account.username,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: NooText.bodyL.copyWith(
+                        height: 1.1,
+                        fontWeight: FontWeight.w500,
+                        color: colors.fg1,
+                      ),
+                    ),
+                    Text(
+                      serverHost(account.serverUrl),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: NooText.meta.copyWith(color: colors.fg3),
+                    ),
+                  ],
+                ),
+              ),
+              GestureDetector(
+                onTap: onRemove,
+                child: Container(
+                  width: 36,
+                  height: 36,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(color: colors.surface2, shape: BoxShape.circle),
+                  child: Icon(LucideIcons.x, size: 16, color: colors.fg2),
+                ),
+              ),
+            ],
           ),
         ),
       ),
-      title: Text(account.username),
-      subtitle: Text(host),
-      trailing: IconButton(
-        icon: const Icon(Icons.close_rounded),
-        tooltip: 'Remove account',
-        visualDensity: VisualDensity.compact,
-        onPressed: onRemove,
-      ),
-      onTap: onTap,
     );
   }
 }

lib/views/login_webview_view.dart

@@ -1,7 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 import '../providers/session_controller.dart';
+import '../theme/design_tokens.dart';
+import '../widgets/noo/nav/noo_top_bar.dart';
+import '../widgets/noo/noo_layout.dart';
 
 /// Every Login Flow v2 page - first login or an additional account -
 /// rendered in Flutter's own WebView rather than a Chrome Custom Tab or
@@ -63,6 +67,7 @@ class _LoginWebViewViewState extends State<LoginWebViewView> {
   @override
   Widget build(BuildContext context) {
     final session = context.watch<SessionController>();
+    final colors = context.nooColors;
 
     // The login flow finished (success or error) or was cancelled
     // elsewhere - close this screen automatically rather than leaving it
@@ -81,18 +86,24 @@ class _LoginWebViewViewState extends State<LoginWebViewView> {
         if (!didPop) _cancel();
       },
       child: Scaffold(
-        appBar: AppBar(
-          title: const Text('Sign in'),
-          leading: IconButton(
-            icon: const Icon(Icons.close_rounded),
+        backgroundColor: colors.bg,
+        appBar: NooTopBar(
+          style: NooLayout.navStyle(context),
+          title: 'Log in',
+          leading: NooTopBarButton(
+            icon: LucideIcons.x,
             tooltip: 'Cancel',
-            onPressed: _cancel,
+            onTap: _cancel,
           ),
         ),
         body: Stack(
           children: [
             WebViewWidget(controller: _controller),
-            if (_pageLoading) const LinearProgressIndicator(),
+            if (_pageLoading)
+              LinearProgressIndicator(
+                color: colors.accent,
+                backgroundColor: colors.surface3,
+              ),
           ],
         ),
       ),

lib/views/move_copy_destination_picker.dart

@@ -1,21 +1,24 @@
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
-import 'package:material_symbols_icons/symbols.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import '../models/move_copy_result.dart';
 import '../models/nextcloud_item.dart';
 import '../providers/files_controller.dart';
 import '../providers/item_operations.dart';
-import '../providers/session_controller.dart';
+import '../theme/design_tokens.dart';
 import '../widgets/breadcrumbs.dart';
-import '../widgets/item_icon.dart';
+import '../widgets/files_controls_row.dart';
 import '../widgets/more_tabs_button.dart';
 import '../widgets/move_copy_conflict_sheet.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/segmented_icon_toggle.dart';
-import '../widgets/sort_menu_button.dart';
-import '../widgets/sticky_header_delegate.dart';
-import '../widgets/synced_header_scaffold.dart';
+import '../widgets/noo/core/noo_button.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/files/noo_file_row.dart';
+import '../widgets/noo/files/noo_file_table.dart';
+import '../widgets/noo/media/noo_grid_card.dart';
+import '../widgets/noo/nav/noo_top_bar.dart';
+import '../widgets/noo/nav/noo_toolbar.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 
 /// Destination-folder browser for moving/copying [items] (a multi-select
 /// batch from Files or Photos). Visually mirrors `ShareUploadView`'s
@@ -85,9 +88,7 @@ class _MoveCopyDestinationPickerState extends State<MoveCopyDestinationPicker> {
 
   Future<void> _fetch(String path) async {
     setState(() => _isLoading = true);
-    final raw = await context.read<FilesController>().fetchFolderListing(
-      path,
-    );
+    final raw = await context.read<FilesController>().fetchFolderListing(path);
     if (!mounted) return;
     setState(() {
       _rawItems = raw;
@@ -175,352 +176,251 @@ class _MoveCopyDestinationPickerState extends State<MoveCopyDestinationPicker> {
     ).pop(MoveCopyResult(succeeded: succeeded, failed: failed));
   }
 
-  Widget _buildControlsRow(FilesController files) {
-    return SizedBox(
-      height: 44,
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: Row(
-          children: [
-            IconButton(
-              icon: Icon(
-                files.filesSortAscending
-                    ? Icons.arrow_upward_rounded
-                    : Icons.arrow_downward_rounded,
-                size: 20,
-              ),
-              visualDensity: VisualDensity.compact,
-              tooltip: files.filesSortAscending ? 'Ascending' : 'Descending',
-              onPressed: files.toggleFilesSortOrder,
-            ),
-            SizedBox(
-              width: 130,
-              child: SortMenuButton(
-                field: files.filesSortField,
-                onChanged: files.setFilesSortField,
-              ),
-            ),
-            ToggleIconButton(
-              icon: files.showHiddenFiles
-                  ? Icons.visibility_rounded
-                  : Icons.visibility_off_rounded,
-              isSelected: files.showHiddenFiles,
-              onTap: () => files.toggleShowHiddenFiles(),
-              tooltip: 'Show hidden files',
-            ),
-            const SizedBox(width: 4),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Symbols.circles_rounded,
-                  isSelected: files.storageScope == StorageScope.cloud,
-                  onTap: () => files.setStorageScope(StorageScope.cloud),
-                  tooltip: 'Cloud storage',
-                ),
-                ToggleIconButton(
-                  icon: Symbols.hard_drive_rounded,
-                  isSelected: files.storageScope == StorageScope.external,
-                  onTap: () => files.setStorageScope(StorageScope.external),
-                  tooltip: 'External storage',
-                ),
-              ],
-            ),
-            const SizedBox(width: 8),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Icons.view_list_rounded,
-                  isSelected: !files.isGridView,
-                  onTap: () => files.setGridView(false),
-                  tooltip: 'List view',
-                ),
-                ToggleIconButton(
-                  icon: Icons.grid_view_rounded,
-                  isSelected: files.isGridView,
-                  onTap: () => files.setGridView(true),
-                  tooltip: 'Grid view',
-                ),
-              ],
-            ),
-          ],
+  // Only folders are valid Move/Copy destinations, so the listing - unlike
+  // Files' own - never shows plain files at all.
+  Widget _buildRow(NextcloudItem item, int index, int count) {
+    final colors = context.nooColors;
+    final row = NooFileRow(
+      kind: NooFileKind.folder,
+      name: item.name,
+      meta: 'Folder',
+      iosStyle: NooLayout.iosStyle(context),
+      onTap: () => _navigateToFolder(item.path),
+    );
+
+    final isFirst = index == 0;
+    final isLast = index == count - 1;
+    return Column(
+      children: [
+        ClipRRect(
+          borderRadius: BorderRadius.vertical(
+            top: isFirst ? const Radius.circular(NooRadii.card) : Radius.zero,
+            bottom: isLast ? const Radius.circular(NooRadii.card) : Radius.zero,
+          ),
+          child: row,
         ),
-      ),
+        if (!isLast) Container(height: 1, color: colors.line),
+      ],
     );
   }
 
-  // Only folders are valid Move/Copy destinations - files still show (so
-  // the listing matches what the Files tab itself would show for this
-  // folder) but are visually dimmed and inert, same treatment as
-  // ShareUploadView's own destination browser.
-  Widget _buildListTile(NextcloudItem item) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-    final session = context.watch<SessionController>();
-    final isFolder = item.isFolder;
-
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(16),
-        child: Opacity(
-          opacity: isFolder ? 1 : 0.5,
-          child: Material(
-            color: colorScheme.surfaceContainerLow,
-            child: InkWell(
-              onTap: isFolder ? () => _navigateToFolder(item.path) : null,
-              child: Padding(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 16,
-                  vertical: 12,
-                ),
-                child: Row(
-                  children: [
-                    ItemThumbnail(
-                      item: item,
-                      service: session.service,
-                      size: 44,
-                      borderRadius: 12,
-                      iconSize: 22,
-                    ),
-                    const SizedBox(width: 14),
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            item.name,
-                            style: theme.textTheme.titleMedium?.copyWith(
-                              fontWeight: FontWeight.w600,
-                              fontSize: 14,
-                            ),
-                          ),
-                          const SizedBox(height: 2),
-                          Text(
-                            isFolder
-                                ? 'Folder'
-                                : '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
-                            style: theme.textTheme.bodySmall?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                    if (isFolder) const Icon(Icons.chevron_right_rounded),
-                  ],
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
+  Widget _buildDesktopRow(NextcloudItem item) {
+    return NooFileTableRow(
+      kind: NooFileKind.folder,
+      name: item.name,
+      onTap: () => _navigateToFolder(item.path),
     );
   }
 
   Widget _buildGridCard(NextcloudItem item) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-    final isFolder = item.isFolder;
-    final iconColor = getIconColor(context, item.type);
-
-    return Opacity(
-      opacity: isFolder ? 1 : 0.5,
-      child: Material(
-        color: colorScheme.surfaceContainerLow,
-        borderRadius: BorderRadius.circular(20),
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: isFolder ? () => _navigateToFolder(item.path) : null,
-          child: Padding(
-            padding: const EdgeInsets.all(14),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Container(
-                  width: 40,
-                  height: 40,
-                  decoration: BoxDecoration(
-                    color: iconColor.withValues(alpha: 0.12),
-                    borderRadius: BorderRadius.circular(12),
-                  ),
-                  child: Icon(
-                    getItemIcon(item.type),
-                    color: iconColor,
-                    size: 24,
-                  ),
-                ),
-                Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      item.name,
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w600,
-                        fontSize: 13,
-                      ),
-                    ),
-                    const SizedBox(height: 2),
-                    Text(
-                      isFolder ? 'Folder' : formatBytes(item.size),
-                      style: theme.textTheme.bodySmall?.copyWith(
-                        color: colorScheme.onSurfaceVariant,
-                        fontSize: 11,
-                      ),
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
+    final colors = context.nooColors;
+    return NooGridCard(
+      name: item.name,
+      meta: 'Folder',
+      placeholderColor: colors.accentSoft,
+      icon: LucideIcons.folder,
+      iconColor: colors.accentText,
+      thumbnailHeight: NooLayout.isDesktop(context) ? 118 : 104,
+      onTap: () => _navigateToFolder(item.path),
     );
   }
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
+    final desktop = NooLayout.isDesktop(context);
     final files = context.watch<FilesController>();
     final ops = context.read<ItemOperations>();
     final hasBreadcrumbs = _pathStack.length > 1;
-    final currentLabel = _currentPath == '/'
-        ? 'Home'
-        : _currentPath.split('/').where((s) => s.isNotEmpty).last;
-    final items = files.applyFilesDisplayPrefs(_rawItems);
+    final folders = files
+        .applyFilesDisplayPrefs(_rawItems)
+        .where((item) => item.isFolder)
+        .toList();
     final invalidDestination = _destinationIsInvalid();
+    final gutter = NooLayout.gutter(context);
+    final verb = widget.copy ? 'Copying' : 'Moving';
+    final itemCount = widget.items.length;
 
-    final controlsColumn = Padding(
-      padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          _buildControlsRow(files),
-          if (hasBreadcrumbs) ...[
-            const SizedBox(height: 10),
-            SizedBox(
-              height: 32,
-              child: Breadcrumbs(
-                pathStack: _pathStack,
-                onTap: _navigateToPathIndex,
+    final slivers = <Widget>[
+      SliverToBoxAdapter(
+        child: Padding(
+          padding: EdgeInsets.fromLTRB(
+            gutter,
+            NooSpace.md,
+            gutter,
+            NooSpace.sm,
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                height: 44,
+                child: FilesControlsRow(folderPath: _currentPath),
               ),
-            ),
-          ],
-        ],
-      ),
-    );
-
-    final contentSlivers = <Widget>[
-      SliverPersistentHeader(
-        pinned: true,
-        delegate: StickyHeaderDelegate(
-          height: hasBreadcrumbs ? 114 : 72,
-          child: controlsColumn,
+              if (hasBreadcrumbs) ...[
+                const SizedBox(height: 10),
+                SizedBox(
+                  height: 32,
+                  child: Breadcrumbs(
+                    pathStack: _pathStack,
+                    onTap: _navigateToPathIndex,
+                  ),
+                ),
+              ],
+            ],
+          ),
         ),
       ),
       if (_isLoading)
-        const SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(child: CircularProgressIndicator()),
-        )
-      else if (items.isEmpty)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Text(
-              'Folder is empty',
-              style: TextStyle(color: colorScheme.onSurfaceVariant),
-            ),
-          ),
+        tabLoadingSliver
+      else if (folders.isEmpty)
+        tabEmptySliver(
+          context,
+          icon: LucideIcons.folder,
+          message: 'No folders here',
         )
       else if (files.isGridView)
         SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+          padding: EdgeInsets.symmetric(horizontal: gutter),
           sliver: SliverGrid(
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 2,
-              childAspectRatio: 1.1,
-              crossAxisSpacing: 12,
-              mainAxisSpacing: 12,
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: desktop
+                  ? 5
+                  : NooLayout.gridColumns(context, phone: 2, minTile: 180),
+              childAspectRatio: desktop ? 1.05 : 0.92,
+              crossAxisSpacing: desktop ? 16 : 10,
+              mainAxisSpacing: desktop ? 16 : 10,
+            ),
+            delegate: SliverChildBuilderDelegate(
+              (context, index) => _buildGridCard(folders[index]),
+              childCount: folders.length,
+            ),
+          ),
+        )
+      else if (desktop)
+        SliverPadding(
+          padding: EdgeInsets.symmetric(horizontal: gutter),
+          sliver: SliverList(
+            delegate: SliverChildBuilderDelegate(
+              (context, index) => _buildDesktopRow(folders[index]),
+              childCount: folders.length,
             ),
-            delegate: SliverChildBuilderDelegate((context, index) {
-              return _buildGridCard(items[index]);
-            }, childCount: items.length),
           ),
         )
       else
         SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+          padding: EdgeInsets.symmetric(horizontal: gutter),
           sliver: SliverList(
-            delegate: SliverChildBuilderDelegate((context, index) {
-              return _buildListTile(items[index]);
-            }, childCount: items.length),
+            delegate: SliverChildBuilderDelegate(
+              (context, index) =>
+                  _buildRow(folders[index], index, folders.length),
+              childCount: folders.length,
+            ),
           ),
         ),
-      const SliverToBoxAdapter(child: SizedBox(height: 24)),
+      const SliverToBoxAdapter(child: SizedBox(height: NooSpace.xl)),
     ];
 
+    final title = widget.copy ? 'Copy to...' : 'Move to...';
+
     return PopScope(
       canPop: _pathStack.length <= 1,
       onPopInvokedWithResult: (didPop, result) {
         if (!didPop) _navigateUp();
       },
       child: Scaffold(
-        body: SyncedHeaderScaffold(
-          scrollController: _scrollController,
-          actions: const [MoreTabsButton(), ProfileAvatarButton()],
-          contentSlivers: contentSlivers,
+        backgroundColor: colors.bg,
+        appBar: desktop
+            ? NooToolbar(
+                title: title,
+                actions: [
+                  const MoreTabsButton(),
+                  const SizedBox(width: NooSpace.xs),
+                  NooButton(
+                    variant: NooButtonVariant.secondary,
+                    size: NooButtonSize.toolbar,
+                    onTap: () => Navigator.maybePop(context),
+                    child: const Text('Cancel'),
+                  ),
+                ],
+              )
+            : NooTopBar(
+                style: NooLayout.navStyle(context),
+                title: title,
+                leading: const NooTopBarBack(label: 'Cancel'),
+                // Stacks a hidden tab's own screen on top rather than
+                // jumping the shell there, so it doesn't abandon this
+                // picker - safe to keep, unlike ShareUploadView's chrome.
+                actions: const [MoreTabsButton()],
+              ),
+        body: SafeArea(
+          top: false,
+          child: RefreshIndicator(
+            color: colors.accent,
+            backgroundColor: colors.surface,
+            onRefresh: () => _fetch(_currentPath),
+            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-folder
+              // listing.
+              physics: const AlwaysScrollableScrollPhysics(),
+              slivers: slivers,
+            ),
+          ),
         ),
-        bottomNavigationBar: Material(
-          color: colorScheme.surfaceContainerHigh,
-          elevation: 8,
-          shape: const RoundedRectangleBorder(
-            borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
+        bottomNavigationBar: DecoratedBox(
+          decoration: BoxDecoration(
+            color: colors.surface,
+            border: Border(top: BorderSide(color: colors.line)),
           ),
-          clipBehavior: Clip.antiAlias,
           child: SafeArea(
             top: false,
             child: Padding(
-              padding: const EdgeInsets.fromLTRB(20, 16, 20, 16),
+              padding: const EdgeInsets.fromLTRB(
+                NooSpace.lg,
+                NooSpace.md,
+                NooSpace.lg,
+                NooSpace.md,
+              ),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
-                crossAxisAlignment: CrossAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
-                  if (invalidDestination) ...[
-                    Text(
-                      "Can't ${widget.copy ? 'copy' : 'move'} a folder into "
-                      "itself or one of its own subfolders",
-                      style: theme.textTheme.bodySmall?.copyWith(
-                        color: colorScheme.error,
-                      ),
+                  Text(
+                    invalidDestination
+                        ? "Can't ${widget.copy ? 'copy' : 'move'} a folder into "
+                              "itself or one of its own subfolders"
+                        : '$verb $itemCount item${itemCount == 1 ? '' : 's'}',
+                    textAlign: TextAlign.center,
+                    style: NooText.meta.copyWith(
+                      color: invalidDestination ? colors.danger : colors.fg3,
                     ),
-                    const SizedBox(height: 8),
-                  ],
-                  SizedBox(
-                    width: double.infinity,
-                    child: FilledButton.icon(
-                      onPressed: invalidDestination || _isSubmitting
-                          ? null
-                          : () => _confirm(ops),
-                      icon: _isSubmitting
-                          ? const SizedBox(
-                              width: 18,
-                              height: 18,
-                              child: CircularProgressIndicator(strokeWidth: 2),
-                            )
-                          : Icon(
-                              widget.copy
-                                  ? Icons.copy_rounded
-                                  : Icons.drive_file_move_rounded,
+                  ),
+                  const SizedBox(height: NooSpace.sm),
+                  NooButton(
+                    variant: NooButtonVariant.primary,
+                    size: NooButtonSize.cta,
+                    fullWidth: true,
+                    disabled: invalidDestination || _isSubmitting,
+                    icon: _isSubmitting
+                        ? null
+                        : (widget.copy
+                              ? LucideIcons.copy
+                              : LucideIcons.folderInput),
+                    onTap: invalidDestination || _isSubmitting
+                        ? null
+                        : () => _confirm(ops),
+                    child: _isSubmitting
+                        ? const SizedBox(
+                            width: 18,
+                            height: 18,
+                            child: CircularProgressIndicator(
+                              strokeWidth: 2,
+                              color: Colors.white,
                             ),
-                      label: Text(
-                        '${widget.copy ? 'Copy' : 'Move'} ${widget.items.length} '
-                        'item(s) to $currentLabel',
-                      ),
-                    ),
+                          )
+                        : Text(widget.copy ? 'Copy here' : 'Move here'),
                   ),
                 ],
               ),

lib/views/photos_view.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:material_symbols_icons/symbols.dart';
+import 'package:intl/intl.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import 'package:share_plus/share_plus.dart';
 import '../models/nextcloud_item.dart';
@@ -10,107 +11,82 @@ import '../providers/item_operations.dart';
 import '../providers/photos_controller.dart';
 import '../providers/pick_controller.dart';
 import '../providers/session_controller.dart';
+import '../providers/settings_controller.dart';
 import '../services/download_service.dart';
+import '../theme/design_tokens.dart';
 import '../widgets/details/details_sheet.dart';
-import '../widgets/more_tabs_button.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/segmented_icon_toggle.dart';
-import '../widgets/selectable_thumbnail.dart';
+import '../widgets/noo/core/noo_button.dart';
+import '../widgets/noo/core/noo_chip.dart';
+import '../widgets/noo/core/noo_segmented_control.dart';
+import '../widgets/noo/core/noo_toggle.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/lists/noo_grouped_list.dart';
+import '../widgets/noo/lists/noo_selection_bar.dart';
+import '../widgets/noo/lists/noo_settings_row.dart';
+import '../widgets/noo/media/noo_photo_group.dart';
+import '../widgets/noo/media/noo_photo_tile.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/noo/overlays/noo_sheet.dart';
 import '../widgets/share_sheet.dart';
-import '../widgets/sort_menu_button.dart';
+import '../widgets/sort_menu_button.dart' show sortFieldLabel;
 import '../widgets/sticky_header_delegate.dart';
-import '../widgets/synced_header_scaffold.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 import 'file_viewer_screen.dart';
 import 'move_copy_destination_picker.dart';
 
+/// The type chips PhotosController actually has data for (DESIGN_SYSTEM.md
+/// section 4 also lists "Camera", but there's no camera-upload/EXIF source
+/// to distinguish that from any other photo - see the view's doc comment).
+enum _PhotoTypeFilter { all, image, video }
+
+/// A contiguous run of [PhotosController.items] that shares a calendar
+/// month, in whatever order the controller already sorted them - see
+/// [_PhotosViewState._groupByMonth].
+class _MonthGroup {
+  final DateTime month;
+  final List<NextcloudItem> items;
+  _MonthGroup(this.month, this.items);
+}
+
+/// The Photos tab: every image/video across the account, grouped by month
+/// (DESIGN_SYSTEM.md section 4). Renders content only - the shell
+/// (`MainShellView`) owns the top bar, bottom bar, drawer and FAB.
 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();
 }
 
-class _PhotosViewState extends State<PhotosView>
-    with SingleTickerProviderStateMixin {
+class _PhotosViewState extends State<PhotosView> {
   bool _requested = false;
   final Set<String> _selectedIds = {};
-  final ScrollController _selectionActionsScrollController = ScrollController();
-  final List<AnimationController> _scrollHintControllers = [];
+
+  // Session-local only (not one of PhotosController's persisted display
+  // prefs) - a pure narrowing of the already-fetched/filtered/sorted list,
+  // same way the type chips narrow Files' listing without touching the
+  // controller.
+  _PhotoTypeFilter _typeFilter = _PhotoTypeFilter.all;
 
   bool get _isSelecting => _selectedIds.isNotEmpty;
 
   void _toggleSelection(NextcloudItem item) {
     HapticFeedback.selectionClick();
-    final enteringSelection = _selectedIds.isEmpty;
     setState(() {
       if (!_selectedIds.remove(item.id)) _selectedIds.add(item.id);
     });
-    if (enteringSelection && _isSelecting) {
-      WidgetsBinding.instance.addPostFrameCallback(
-        (_) => _playScrollHint(_selectionActionsScrollController),
-      );
-    }
   }
 
   void _clearSelection() {
     setState(_selectedIds.clear);
   }
 
-  /// A one-shot hint that the selection actions row actually scrolls -
-  /// mirrors `FilesView`'s identical controls-row hint (see its doc
-  /// comment): nudges it right and back, once, the first time a selection
-  /// starts. No-ops if there's nothing to scroll (row already fits).
-  Future<void> _playScrollHint(ScrollController scrollController) async {
-    await Future.delayed(const Duration(milliseconds: 500));
-    if (!mounted || !scrollController.hasClients) return;
-    final maxExtent = scrollController.position.maxScrollExtent;
-    if (maxExtent <= 0) return;
-    final double peak = maxExtent < 36 ? maxExtent : 36;
-    final controller = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 900),
-    );
-    _scrollHintControllers.add(controller);
-    final hint = TweenSequence<double>([
-      TweenSequenceItem(
-        tween: Tween(
-          begin: 0.0,
-          end: peak,
-        ).chain(CurveTween(curve: Curves.easeInOutSine)),
-        weight: 50,
-      ),
-      TweenSequenceItem(
-        tween: Tween(
-          begin: peak,
-          end: 0.0,
-        ).chain(CurveTween(curve: Curves.easeInOutSine)),
-        weight: 50,
-      ),
-    ]).animate(controller);
-    void onTick() {
-      if (scrollController.hasClients) {
-        scrollController.jumpTo(hint.value);
-      }
-    }
-
-    hint.addListener(onTick);
-    await controller.forward();
-    hint.removeListener(onTick);
-    _scrollHintControllers.remove(controller);
-    controller.dispose();
-  }
-
-  @override
-  void dispose() {
-    for (final controller in _scrollHintControllers) {
-      controller.dispose();
-    }
-    _selectionActionsScrollController.dispose();
-    super.dispose();
-  }
-
   /// Mirrors `FilesView._handlePickTap` - Photos has no folders, so this is
   /// just the matching/toggle/immediate-confirm branch.
   void _handlePickTap(
@@ -143,62 +119,103 @@ class _PhotosViewState extends State<PhotosView>
     if (pick.isPicking) {
       return [
         SelectionAction(
-          icon: Icons.check_rounded,
+          kind: SelectionActionKind.favorite,
+          icon: LucideIcons.check,
           label: 'Use ${selected.length} item(s)',
           onTap: () => pick.confirmPick(selected),
         ),
       ];
     }
-    return [
+    // Matches the star/star-off convention Files' own selection toolbar
+    // uses for favorite/unfavorite (see `files_view.dart`) rather than a
+    // filled heart.
+    final allFavorited = selected.every((i) => i.isFavorite);
+    final actions = [
       SelectionAction(
-        icon: selected.every((i) => i.isFavorite)
-            ? Icons.favorite_rounded
-            : Icons.favorite_border_rounded,
-        label: selected.every((i) => i.isFavorite)
-            ? 'Remove from favorites'
-            : 'Favorite',
+        kind: SelectionActionKind.favorite,
+        icon: allFavorited ? LucideIcons.starOff : LucideIcons.star,
+        label: allFavorited ? 'Remove from favorites' : 'Favorite',
         onTap: () => _favoriteSelected(selected),
       ),
       SelectionAction(
-        icon: Icons.share_rounded,
+        kind: SelectionActionKind.share,
+        icon: LucideIcons.share2,
         label: 'Share',
         onTap: () => selected.length == 1
             ? ShareSheet.show(context, selected.single)
             : _shareSelected(context, selected),
       ),
       SelectionAction(
-        icon: Icons.download_rounded,
+        kind: SelectionActionKind.download,
+        icon: LucideIcons.download,
         label: 'Download',
         onTap: () => _downloadSelected(context, selected),
       ),
       SelectionAction(
-        icon: Icons.delete_outline_rounded,
+        kind: SelectionActionKind.delete,
+        icon: LucideIcons.trash2,
         label: 'Delete',
         onTap: () => _confirmDeleteSelected(context, selected),
       ),
       SelectionAction(
-        icon: Icons.copy_rounded,
+        kind: SelectionActionKind.copy,
+        icon: LucideIcons.copy,
         label: 'Copy',
         onTap: () => _moveOrCopySelected(selected, copy: true),
       ),
       SelectionAction(
-        icon: Icons.drive_file_move_rounded,
+        kind: SelectionActionKind.move,
+        icon: LucideIcons.folderInput,
         label: 'Move',
         onTap: () => _moveOrCopySelected(selected, copy: false),
       ),
       if (selected.length == 1)
         SelectionAction(
-          icon: Icons.info_outline_rounded,
+          kind: SelectionActionKind.details,
+          icon: LucideIcons.info,
           label: 'Details',
           onTap: () => DetailsSheet.show(context, selected.single),
         ),
     ];
+    return orderSelectionActions(
+      actions,
+      context.read<SettingsController>().selectionActionOrder,
+    );
+  }
+
+  /// Splits an already-filtered/sorted list into contiguous month runs
+  /// (`dateCreated`) in list order - deliberately not a global re-sort by
+  /// date, so a "Name"/"Size" sort chip still governs the order shown
+  /// (see the group header row it feeds).
+  List<_MonthGroup> _groupByMonth(List<NextcloudItem> items) {
+    final groups = <_MonthGroup>[];
+    for (final item in items) {
+      final d = item.dateCreated;
+      final month = DateTime(d.year, d.month);
+      if (groups.isNotEmpty && groups.last.month == month) {
+        groups.last.items.add(item);
+      } else {
+        groups.add(_MonthGroup(month, [item]));
+      }
+    }
+    return groups;
+  }
+
+  bool _matchesTypeFilter(NextcloudItem item) {
+    switch (_typeFilter) {
+      case _PhotoTypeFilter.all:
+        return true;
+      case _PhotoTypeFilter.image:
+        return item.type == NextcloudItemType.image;
+      case _PhotoTypeFilter.video:
+        return item.type == NextcloudItemType.video;
+    }
   }
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
+    final isDesktop = NooLayout.isDesktop(context);
     final photosController = context.watch<PhotosController>();
     final filesController = context.watch<FilesController>();
     final pick = context.watch<PickController>();
@@ -210,89 +227,45 @@ class _PhotosViewState extends State<PhotosView>
       );
     }
 
-    final photos = photosController.items;
-    final selectedItems = photos
+    final allPhotos = photosController.items;
+    final visiblePhotos = allPhotos.where(_matchesTypeFilter).toList();
+    // Selection tracks the full (favorites/hidden-filtered) list, not just
+    // the type-filtered view, so switching the type chip mid-selection
+    // never silently drops a selected item from the bulk actions.
+    final selectedItems = allPhotos
         .where((i) => _selectedIds.contains(i.id))
         .toList();
+    final groups = _groupByMonth(visiblePhotos);
 
-    final controlsRow = Padding(
-      padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
-      child: SizedBox(
-        height: 44,
-        child: Row(
-          children: [
-            IconButton(
-              icon: Icon(
-                photosController.sortAscending
-                    ? Icons.arrow_upward_rounded
-                    : Icons.arrow_downward_rounded,
-                size: 20,
-              ),
-              visualDensity: VisualDensity.compact,
-              tooltip: photosController.sortAscending
-                  ? 'Ascending'
-                  : 'Descending',
-              onPressed: photosController.toggleSortOrder,
-            ),
-            Expanded(
-              child: SortMenuButton(
-                field: photosController.sortField,
-                onChanged: photosController.setSortField,
-              ),
-            ),
-            ToggleIconButton(
-              icon: photosController.showFavoritesOnly
-                  ? Icons.favorite_rounded
-                  : Icons.favorite_border_rounded,
-              isSelected: photosController.showFavoritesOnly,
-              onTap: photosController.toggleFavoritesFilter,
-              tooltip: 'Favorites only',
-            ),
-            const SizedBox(width: 4),
-            ToggleIconButton(
-              icon: photosController.showHidden
-                  ? Icons.visibility_rounded
-                  : Icons.visibility_off_rounded,
-              isSelected: photosController.showHidden,
-              onTap: () => photosController.toggleShowHidden(),
-              tooltip: 'Show hidden files',
-            ),
-            const SizedBox(width: 4),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Symbols.circles_rounded,
-                  isSelected: filesController.storageScope == StorageScope.cloud,
-                  onTap: () =>
-                      filesController.setStorageScope(StorageScope.cloud),
-                  tooltip: 'Cloud storage',
-                ),
-                ToggleIconButton(
-                  icon: Symbols.hard_drive_rounded,
-                  isSelected:
-                      filesController.storageScope == StorageScope.external,
-                  onTap: () =>
-                      filesController.setStorageScope(StorageScope.external),
-                  tooltip: 'External storage',
-                ),
-              ],
-            ),
-          ],
-        ),
-      ),
+    final controlsRow = _buildControlsRow(
+      context,
+      photosController,
+      filesController,
     );
 
     final List<Widget> contentSlivers = [
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
       // Sticky while browsing; once selecting, the selection bar takes over
-      // the very top of the screen instead (see `selectionBar` below), so
-      // this is free to scroll away rather than staying pinned under it.
+      // the same slot instead.
       SliverPersistentHeader(
         pinned: !_isSelecting,
-        delegate: StickyHeaderDelegate(height: 60, child: controlsRow),
+        delegate: StickyHeaderDelegate(
+          height: _isSelecting ? 56 : 64,
+          child: _isSelecting
+              ? _buildSelectionBar(context, pick, selectedItems)
+              : Padding(
+                  padding: const EdgeInsets.fromLTRB(
+                    NooSpace.sm,
+                    NooSpace.sm,
+                    NooSpace.sm,
+                    NooSpace.xs,
+                  ),
+                  child: controlsRow,
+                ),
+        ),
       ),
-      const SliverToBoxAdapter(child: SizedBox(height: 8)),
 
-      if (photosController.isLoading && photos.isEmpty)
+      if (photosController.isLoading && allPhotos.isEmpty)
         const SliverFillRemaining(
           hasScrollBody: false,
           child: Center(child: CircularProgressIndicator()),
@@ -306,85 +279,87 @@ class _PhotosViewState extends State<PhotosView>
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  Icon(
-                    Icons.error_outline_rounded,
-                    size: 64,
-                    color: colorScheme.error,
-                  ),
+                  Icon(LucideIcons.circleAlert, size: 56, color: colors.danger),
                   const SizedBox(height: 16),
                   Text(
                     'Could not load photos',
-                    style: theme.textTheme.titleLarge?.copyWith(
-                      color: colorScheme.error,
-                      fontWeight: FontWeight.bold,
-                    ),
+                    style: NooText.cardTitle.copyWith(color: colors.danger),
                   ),
                   const SizedBox(height: 8),
                   Text(
                     photosController.errorMessage!,
                     textAlign: TextAlign.center,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
+                    style: NooText.body.copyWith(color: colors.fg3),
                   ),
                   const SizedBox(height: 20),
-                  FilledButton.icon(
-                    onPressed: photosController.fetchAllMedia,
-                    icon: const Icon(Icons.refresh_rounded),
-                    label: const Text('Retry'),
+                  NooButton(
+                    variant: NooButtonVariant.secondary,
+                    size: NooButtonSize.field,
+                    icon: LucideIcons.refreshCw,
+                    onTap: photosController.fetchAllMedia,
+                    child: const Text('Retry'),
                   ),
                 ],
               ),
             ),
           ),
         )
-      else if (photos.isEmpty)
+      else if (visiblePhotos.isEmpty)
         SliverFillRemaining(
           hasScrollBody: false,
           child: Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                Icon(
-                  Icons.photo_library_outlined,
-                  size: 64,
-                  color: colorScheme.outlineVariant,
-                ),
+                Icon(LucideIcons.image, size: 56, color: colors.fg3),
                 const SizedBox(height: 12),
                 Text(
-                  'No photos found in Nextcloud library',
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    color: colorScheme.onSurfaceVariant,
-                  ),
+                  allPhotos.isEmpty
+                      ? 'No photos found in Nextcloud library'
+                      : 'No photos match this filter',
+                  style: NooText.cardTitle.copyWith(color: colors.fg2),
                 ),
               ],
             ),
           ),
         )
       else
-        SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 16),
-          sliver: SliverGrid(
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 3,
-              crossAxisSpacing: 8,
-              mainAxisSpacing: 8,
-              childAspectRatio: 1.0,
+        for (final group in groups) ...[
+          SliverToBoxAdapter(
+            child: NooPhotoGroupHeader(
+              title: DateFormat('MMMM yyyy').format(group.month),
+              count:
+                  '${group.items.length} ${group.items.length == 1 ? 'item' : 'items'}',
+              padding: EdgeInsets.fromLTRB(
+                NooLayout.gutter(context),
+                NooSpace.lg,
+                NooLayout.gutter(context),
+                NooSpace.sm,
+              ),
             ),
-            delegate: SliverChildBuilderDelegate((context, index) {
-              final photo = photos[index];
-              return _buildPhotoTile(context, photo);
-            }, childCount: photos.length),
           ),
-        ),
+          NooPhotoGrid(
+            itemCount: group.items.length,
+            columns: isDesktop
+                ? NooPhotoGrid.desktopColumns
+                : NooLayout.gridColumns(
+                    context,
+                    phone: NooPhotoGrid.mobileColumns,
+                    minTile: 130,
+                  ),
+            gap: isDesktop ? NooPhotoGrid.desktopGap : NooPhotoGrid.mobileGap,
+            padding: EdgeInsets.symmetric(
+              horizontal: isDesktop ? NooLayout.gutter(context) : 0,
+            ),
+            itemBuilder: (context, index) =>
+                _buildPhotoTile(context, group.items[index], visiblePhotos),
+          ),
+        ],
 
-      // Fixed clearance so the last row isn't hidden behind the floating
-      // nav bar, regardless of grid length.
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
-      // For a short grid this stretches the white card's background down to
-      // the screen edge (matching the empty state above); for a long grid
-      // that already fills the viewport it contributes nothing extra.
-      const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
+      // 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(
@@ -392,196 +367,319 @@ class _PhotosViewState extends State<PhotosView>
       onPopInvokedWithResult: (didPop, result) {
         if (!didPop && _isSelecting) _clearSelection();
       },
-      child: SyncedHeaderScaffold(
-        scrollController: widget.scrollController,
-        actions: const [MoreTabsButton(), ProfileAvatarButton()],
-        onRefresh: photosController.fetchAllMedia,
-        selectionBar: _isSelecting
-            ? _buildSelectionBar(context, theme, pick, selectedItems)
-            : null,
-        contentSlivers: contentSlivers,
+      child: ColoredBox(
+        color: colors.bg,
+        child: RefreshIndicator(
+          color: colors.accent,
+          backgroundColor: colors.surface,
+          onRefresh: photosController.fetchAllMedia,
+          // 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,
+            ),
+          ),
+        ),
       ),
     );
   }
 
-  /// Replaces the top bar entirely while selecting (see
-  /// `SyncedHeaderScaffold.selectionBar`) - a close button, the "N
-  /// selected" count, and the horizontally-scrollable bulk actions.
-  Widget _buildSelectionBar(
+  /// Type chips (All/Photos/Videos - "Camera" from the spec has no data
+  /// source, see the view's doc comment), a sort chip and a filter chip for
+  /// favorites-only/hidden/external-storage, mirroring `FilesControlsRow`'s
+  /// layout/pattern.
+  Widget _buildControlsRow(
     BuildContext context,
-    ThemeData theme,
-    PickController pick,
-    List<NextcloudItem> selectedItems,
+    PhotosController photos,
+    FilesController files,
   ) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16),
+    final filtersActive =
+        _typeFilter != _PhotoTypeFilter.all ||
+        photos.showFavoritesOnly ||
+        photos.showHidden ||
+        files.storageScope != StorageScope.cloud;
+
+    // A plain Row, not a horizontally-scrolling one - see
+    // `FilesControlsRow`'s identical fix/doc comment: a `SingleChildScrollView`
+    // gives its child unbounded width for no benefit here (two chips never
+    // need to scroll), and it's actively harmful for a row with a trailing
+    // `Spacer`/flex child.
+    return SizedBox(
+      height: 44,
       child: Row(
         children: [
-          SizedBox(
-            width: MediaQuery.of(context).size.width * 0.5,
-            child: Align(
-              alignment: Alignment.centerLeft,
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  IconButton(
-                    icon: const Icon(Icons.close_rounded, size: 20),
-                    tooltip: 'Cancel selection',
-                    onPressed: _clearSelection,
-                    visualDensity: VisualDensity.compact,
-                  ),
-                  const SizedBox(width: 8),
-                  Text(
-                    '${selectedItems.length} selected',
-                    style: theme.textTheme.titleSmall?.copyWith(
-                      fontWeight: FontWeight.w700,
-                    ),
-                  ),
-                ],
-              ),
-            ),
+          NooChip(
+            icon: photos.sortAscending
+                ? LucideIcons.arrowUp
+                : LucideIcons.arrowDown,
+            onTap: () => _showSortSheet(context, photos),
+            child: Text(sortFieldLabel(photos.sortField)),
           ),
-          Expanded(
-            child: SingleChildScrollView(
-              controller: _selectionActionsScrollController,
-              scrollDirection: Axis.horizontal,
-              // Left-aligned (not anchored to the trailing edge) so the
-              // first action's left edge sits at a fixed spot - lining up
-              // with the controls row's own first icon directly below it -
-              // regardless of how many actions there are.
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  for (final action in _buildSelectionActions(
-                    pick,
-                    selectedItems,
-                  ))
-                    IconButton(
-                      icon: Icon(action.icon, size: 20),
-                      tooltip: action.label,
-                      onPressed: action.onTap,
-                      visualDensity: VisualDensity.compact,
-                    ),
-                ],
-              ),
-            ),
+          const SizedBox(width: 8),
+          NooChip(
+            icon: LucideIcons.filter,
+            trailing: NooChipTrailing.menu,
+            selected: filtersActive,
+            onTap: () => _showFilterSheet(context, photos, files),
+            child: const Text('Filters'),
           ),
         ],
       ),
     );
   }
 
-  Widget _buildPhotoTile(BuildContext context, NextcloudItem photo) {
-    final colorScheme = Theme.of(context).colorScheme;
+  void _showSortSheet(BuildContext context, PhotosController photos) {
+    showNooSheet(
+      context,
+      children: [
+        // `showNooSheet`'s `children` are built once, up front - a bare
+        // checkmark here would freeze at whatever it was when the sheet
+        // opened, since tapping a row calls `photos.set...`/notifies the
+        // controller, not this already-built widget tree. `ListenableBuilder`
+        // re-runs its `builder` on every notification instead, so the
+        // selection updates live.
+        ListenableBuilder(
+          listenable: photos,
+          builder: (context, _) => Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              NooSegmentedControl<bool>(
+                fill: true,
+                onSurface: true,
+                value: photos.sortAscending,
+                onChanged: (asc) {
+                  if (asc != photos.sortAscending) photos.toggleSortOrder();
+                },
+                options: const [
+                  NooSegmentOption(
+                    value: true,
+                    icon: LucideIcons.arrowUp,
+                    label: 'Ascending',
+                  ),
+                  NooSegmentOption(
+                    value: false,
+                    icon: LucideIcons.arrowDown,
+                    label: 'Descending',
+                  ),
+                ],
+              ),
+              const SizedBox(height: 22),
+              NooGroupedList(
+                children: [
+                  for (final field in FileSortField.values)
+                    NooSettingsRow(
+                      label: Text(sortFieldLabel(field)),
+                      trailing: field == photos.sortField
+                          ? Icon(
+                              LucideIcons.check,
+                              size: 18,
+                              color: context.nooColors.accentText,
+                            )
+                          : null,
+                      onTap: () {
+                        photos.setSortField(field);
+                        Navigator.pop(context);
+                      },
+                    ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _showFilterSheet(
+    BuildContext context,
+    PhotosController photos,
+    FilesController files,
+  ) {
+    showNooSheet(
+      context,
+      children: [
+        // `_typeFilter` lives on this State, not a ChangeNotifier, so
+        // `Listenable.merge([photos, files])` alone doesn't rebuild this
+        // sheet when it changes - it used to only visibly move once the
+        // sheet was closed and reopened. `StatefulBuilder` gives it a
+        // rebuild trigger of its own; see `_showSortSheet`'s comment for
+        // why the two controllers still need `ListenableBuilder`.
+        StatefulBuilder(
+          builder: (context, setSheetState) => ListenableBuilder(
+            listenable: Listenable.merge([photos, files]),
+            builder: (context, _) => Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                // Same "icon always, label only when selected" pill as
+                // Files' own type filter - not a fully-labelled track, so
+                // the two screens' filter sheets look and behave the same.
+                NooSegmentedControl<_PhotoTypeFilter>(
+                  fill: true,
+                  onSurface: true,
+                  labelOnlySelected: true,
+                  value: _typeFilter,
+                  onChanged: (filter) => setState(() {
+                    _typeFilter = filter;
+                    setSheetState(() {});
+                  }),
+                  options: const [
+                    NooSegmentOption(
+                      value: _PhotoTypeFilter.all,
+                      icon: LucideIcons.layoutGrid,
+                      label: 'All',
+                    ),
+                    NooSegmentOption(
+                      value: _PhotoTypeFilter.image,
+                      icon: LucideIcons.image,
+                      label: 'Photos',
+                    ),
+                    NooSegmentOption(
+                      value: _PhotoTypeFilter.video,
+                      icon: LucideIcons.film,
+                      label: 'Videos',
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 22),
+                NooGroupedList(
+                  children: [
+                    NooSettingsRow(
+                      icon: LucideIcons.heart,
+                      label: const Text('Favorites only'),
+                      trailing: NooToggle(
+                        checked: photos.showFavoritesOnly,
+                        onChanged: (_) => photos.toggleFavoritesFilter(),
+                      ),
+                    ),
+                    NooSettingsRow(
+                      icon: LucideIcons.eye,
+                      label: const Text('Show hidden files'),
+                      trailing: NooToggle(
+                        checked: photos.showHidden,
+                        onChanged: (_) => photos.toggleShowHidden(),
+                      ),
+                    ),
+                    NooSettingsRow(
+                      icon: LucideIcons.hardDrive,
+                      label: const Text('External storage'),
+                      trailing: NooToggle(
+                        checked: files.storageScope == StorageScope.external,
+                        onChanged: (external) => files.setStorageScope(
+                          external ? StorageScope.external : StorageScope.cloud,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Replaces the controls row's own sticky slot while selecting - a close
+  /// button, the "N selected" count, and the bulk actions. Mirrors
+  /// `FilesView`'s identical selection bar.
+  Widget _buildSelectionBar(
+    BuildContext context,
+    PickController pick,
+    List<NextcloudItem> selectedItems,
+  ) {
+    return NooSelectionBar(
+      count: selectedItems.length,
+      actions: _buildSelectionActions(pick, selectedItems),
+      onClose: _clearSelection,
+      isDesktop: NooLayout.isDesktop(context),
+      iosStyle: NooLayout.iosStyle(context),
+    );
+  }
+
+  Widget _buildPhotoTile(
+    BuildContext context,
+    NextcloudItem photo,
+    List<NextcloudItem> siblings,
+  ) {
     final pick = context.watch<PickController>();
     final session = context.watch<SessionController>();
     final isSelected = _selectedIds.contains(photo.id);
+    final isVideo = photo.type == NextcloudItemType.video;
 
-    // No border radius on the tile itself — the outer ClipRRect below is
-    // the only place that rounds it, so a swipe doesn't reveal a stray
-    // floating rounded corner mid-drag (see the same fix in files_view).
-    final tile = GestureDetector(
+    return NooPhotoTile(
+      selected: isSelected,
+      selectionMode: _isSelecting,
+      // No real duration source (no video-metadata extraction anywhere in
+      // the app) - an empty string still marks it as a video and shows the
+      // icon-only badge (DESIGN_SYSTEM.md: "else icon-only").
+      videoDuration: isVideo ? '' : null,
+      placeholderColor: NooPhotoTile.paletteColor(photo.id.hashCode),
       onTap: () {
         if (pick.isPicking) {
           _handlePickTap(context, pick, photo);
         } else if (_isSelecting) {
           _toggleSelection(photo);
         } else {
-          _openLightbox(context, photo);
+          _openLightbox(context, photo, siblings);
         }
       },
       onLongPress: pick.isPicking && !pick.pickRequest!.allowMultiple
           ? null
           : () => _toggleSelection(photo),
-      child: ColoredBox(
-        color: colorScheme.surfaceContainerHigh,
-        child: SelectableThumbnail(
-          isSelected: isSelected,
-          checkmarkSize: 32,
-          child: Stack(
-            fit: StackFit.expand,
-            children: [
-              photo.previewUrl != null
-                  ? LayoutBuilder(
-                      builder: (context, constraints) {
-                        // Decode at the tile's actual rendered size rather
-                        // than the full 500x500 preview the server returns —
-                        // cheaper to decode/cache while scrolling a grid.
-                        final cachePixels =
-                            (constraints.maxWidth *
-                                    MediaQuery.of(context).devicePixelRatio)
-                                .round();
-                        return Image.network(
-                          photo.previewUrl!,
-                          headers: session.service?.authHeaders,
-                          fit: BoxFit.cover,
-                          cacheWidth: cachePixels,
-                          cacheHeight: cachePixels,
-                          filterQuality: FilterQuality.low,
-                          gaplessPlayback: true,
-                          errorBuilder: (ctx, err, stack) =>
-                              _buildFallbackTile(context, photo),
-                        );
-                      },
-                    )
-                  : _buildFallbackTile(context, photo),
-              if (photo.type == NextcloudItemType.video)
-                Positioned(
-                  bottom: 8,
-                  right: 8,
-                  child: Container(
-                    padding: const EdgeInsets.all(4),
-                    decoration: BoxDecoration(
-                      color: Colors.black.withValues(alpha: 0.6),
-                      shape: BoxShape.circle,
-                    ),
-                    child: const Icon(
-                      Icons.play_arrow_rounded,
-                      color: Colors.white,
-                      size: 16,
-                    ),
-                  ),
-                ),
-              if (photo.isFavorite)
-                const Positioned(
-                  top: 8,
-                  right: 8,
-                  child: Icon(
-                    Icons.favorite_rounded,
-                    color: Colors.red,
-                    size: 18,
-                  ),
-                ),
-            ],
-          ),
-        ),
-      ),
+      child: photo.previewUrl != null
+          ? LayoutBuilder(
+              builder: (context, constraints) {
+                // Decode at the tile's actual rendered size rather than the
+                // full 500x500 preview the server returns - cheaper to
+                // decode/cache while scrolling a grid.
+                final cachePixels =
+                    (constraints.maxWidth *
+                            MediaQuery.of(context).devicePixelRatio)
+                        .round();
+                return Image.network(
+                  photo.previewUrl!,
+                  headers: session.service?.authHeaders,
+                  fit: BoxFit.cover,
+                  cacheWidth: cachePixels,
+                  cacheHeight: cachePixels,
+                  filterQuality: FilterQuality.low,
+                  gaplessPlayback: true,
+                  errorBuilder: (ctx, err, stack) =>
+                      _buildFallbackTile(context, photo),
+                );
+              },
+            )
+          : _buildFallbackTile(context, photo),
     );
-
-    return ClipRRect(borderRadius: BorderRadius.circular(16), child: tile);
   }
 
   Widget _buildFallbackTile(BuildContext context, NextcloudItem photo) {
-    final colorScheme = Theme.of(context).colorScheme;
-    return Container(
-      color: colorScheme.secondaryContainer,
+    final colors = context.nooColors;
+    final kind = NooFileKind.from(name: photo.name, mimeType: photo.mimeType);
+    return ColoredBox(
+      color: kind.background(colors),
       child: Center(
-        child: Icon(
-          photo.type == NextcloudItemType.video
-              ? Icons.movie_rounded
-              : Icons.image_rounded,
-          color: colorScheme.onSecondaryContainer,
-          size: 32,
-        ),
+        child: Icon(kind.icon, color: kind.foreground(colors), size: 32),
       ),
     );
   }
 
-  void _openLightbox(BuildContext context, NextcloudItem photo) {
-    final photos = context.read<PhotosController>().items;
+  void _openLightbox(
+    BuildContext context,
+    NextcloudItem photo,
+    List<NextcloudItem> siblings,
+  ) {
     Navigator.push(
       context,
-      FileViewerScreen.route(item: photo, siblings: photos),
+      FileViewerScreen.route(item: photo, siblings: siblings),
     );
   }
 

lib/views/recent_view.dart

@@ -1,58 +1,37 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../models/nextcloud_item.dart';
 import '../providers/recent_controller.dart';
-import '../widgets/more_tabs_button.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/synced_header_scaffold.dart';
+import '../theme/design_tokens.dart';
+import '../widgets/details/details_sheet.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/files/noo_file_row.dart';
+import '../widgets/noo/files/noo_file_table.dart';
+import '../widgets/noo/lists/noo_grouped_list.dart';
+import '../widgets/noo/lists/noo_settings_row.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/noo/overlays/noo_sheet.dart';
+import '../widgets/share_sheet.dart';
+import '../widgets/tabs/tab_day_groups.dart';
+import '../widgets/tabs/tab_location.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 import 'file_viewer_screen.dart';
 
-IconData _recentItemIcon(NextcloudItemType type) {
-  switch (type) {
-    case NextcloudItemType.folder:
-      return Icons.folder_rounded;
-    case NextcloudItemType.image:
-      return Icons.image_rounded;
-    case NextcloudItemType.video:
-      return Icons.movie_rounded;
-    case NextcloudItemType.audio:
-      return Icons.audiotrack_rounded;
-    case NextcloudItemType.document:
-      return Icons.description_rounded;
-    case NextcloudItemType.archive:
-      return Icons.folder_zip_rounded;
-    case NextcloudItemType.file:
-      return Icons.insert_drive_file_rounded;
-  }
-}
-
-Color _recentItemIconColor(BuildContext context, NextcloudItemType type) {
-  final colorScheme = Theme.of(context).colorScheme;
-  switch (type) {
-    case NextcloudItemType.folder:
-      return colorScheme.primary;
-    case NextcloudItemType.image:
-      return Colors.amber.shade700;
-    case NextcloudItemType.video:
-      return Colors.deepOrange.shade600;
-    case NextcloudItemType.audio:
-      return Colors.purple.shade600;
-    case NextcloudItemType.document:
-      return Colors.blue.shade700;
-    case NextcloudItemType.archive:
-      return Colors.teal.shade700;
-    case NextcloudItemType.file:
-      return colorScheme.outline;
-  }
-}
-
 /// Recently modified files across the whole account (not folders), newest
-/// first — see [RecentController.fetchAll].
+/// first - see [RecentController.fetchAll]. Grouped into Today/Yesterday/
+/// This week/Earlier per `DESIGN_SYSTEM.md` §4; meta is "Modified {time} ·
+/// {location}" since the server only ever reports a modification, not a
+/// distinct action per entry.
 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();
@@ -63,8 +42,7 @@ class _RecentViewState extends State<RecentView> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
     final recent = context.watch<RecentController>();
 
     if (!_requested) {
@@ -73,174 +51,180 @@ class _RecentViewState extends State<RecentView> {
     }
 
     final items = recent.items;
+    final isDesktop = NooLayout.isDesktop(context);
+    final groups = groupByRecentBucket<NextcloudItem>(
+      items,
+      (item) => item.lastModified,
+    );
 
     final List<Widget> contentSlivers = [
-      const SliverToBoxAdapter(child: SizedBox(height: 16)),
-
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
+      const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
       if (recent.isLoading && items.isEmpty)
-        const SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(child: CircularProgressIndicator()),
-        )
+        tabLoadingSliver
       else if (recent.errorMessage != null)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Padding(
-              padding: const EdgeInsets.all(24),
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(
-                    Icons.error_outline_rounded,
-                    size: 64,
-                    color: colorScheme.error,
-                  ),
-                  const SizedBox(height: 16),
-                  Text(
-                    'Could not load recent files',
-                    style: theme.textTheme.titleLarge?.copyWith(
-                      color: colorScheme.error,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                  const SizedBox(height: 8),
-                  Text(
-                    recent.errorMessage!,
-                    textAlign: TextAlign.center,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                  ),
-                  const SizedBox(height: 20),
-                  FilledButton.icon(
-                    onPressed: recent.fetchAll,
-                    icon: const Icon(Icons.refresh_rounded),
-                    label: const Text('Retry'),
-                  ),
-                ],
-              ),
-            ),
-          ),
+        tabErrorSliver(
+          context,
+          title: 'Could not load recent files',
+          message: recent.errorMessage!,
+          onRetry: recent.fetchAll,
         )
       else if (items.isEmpty)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(
-                  Icons.history_rounded,
-                  size: 64,
-                  color: colorScheme.outlineVariant,
-                ),
-                const SizedBox(height: 12),
-                Text(
-                  'No recent files',
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    color: colorScheme.onSurfaceVariant,
-                  ),
-                ),
-              ],
-            ),
-          ),
+        tabEmptySliver(
+          context,
+          icon: LucideIcons.clock,
+          message: 'No recent files',
         )
+      else if (isDesktop)
+        _buildDesktopTable(context, groups)
       else
-        SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20),
-          sliver: SliverList(
-            delegate: SliverChildBuilderDelegate((context, index) {
-              final item = items[index];
-              return _buildTile(context, item);
-            }, childCount: items.length),
-          ),
-        ),
-
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
-      const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
+        _buildMobileGroups(context, groups),
+      ...tabBottomInsetSlivers(context),
     ];
 
-    return SyncedHeaderScaffold(
-      scrollController: widget.scrollController,
-      actions: const [MoreTabsButton(), ProfileAvatarButton()],
-      onRefresh: recent.fetchAll,
-      contentSlivers: contentSlivers,
-    );
-  }
-
-  Widget _buildTile(BuildContext context, NextcloudItem item) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-    final iconColor = _recentItemIconColor(context, item.type);
-    final folderPath = item.path.substring(
-      0,
-      item.path.length - item.name.length,
-    );
-
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8),
-      child: Material(
-        color: colorScheme.surfaceContainerLow,
-        borderRadius: BorderRadius.circular(16),
-        child: InkWell(
-          borderRadius: BorderRadius.circular(16),
-          onTap: () => _openFile(context, item),
-          child: Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-            child: Row(
-              children: [
-                Container(
-                  width: 44,
-                  height: 44,
-                  decoration: BoxDecoration(
-                    color: iconColor.withValues(alpha: 0.12),
-                    borderRadius: BorderRadius.circular(12),
-                  ),
-                  child: Icon(
-                    _recentItemIcon(item.type),
-                    color: iconColor,
-                    size: 22,
-                  ),
-                ),
-                const SizedBox(width: 14),
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text(
-                        item.name,
-                        style: theme.textTheme.titleMedium?.copyWith(
-                          fontWeight: FontWeight.w600,
-                          fontSize: 14,
-                        ),
-                      ),
-                      const SizedBox(height: 2),
-                      Text(
-                        folderPath.isEmpty ? '/' : folderPath,
-                        style: theme.textTheme.bodySmall?.copyWith(
-                          color: colorScheme.onSurfaceVariant,
-                        ),
-                      ),
-                      const SizedBox(height: 2),
-                      Text(
-                        DateFormat.yMMMd().add_jm().format(item.lastModified),
-                        style: theme.textTheme.bodySmall?.copyWith(
-                          color: colorScheme.primary,
-                          fontWeight: FontWeight.w500,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              ],
-            ),
+    return ColoredBox(
+      color: colors.bg,
+      child: RefreshIndicator(
+        color: colors.accent,
+        backgroundColor: colors.surface,
+        onRefresh: recent.fetchAll,
+        // 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,
           ),
         ),
       ),
     );
   }
 
+  Widget _buildMobileGroups(
+    BuildContext context,
+    List<TabDayGroup<NextcloudItem>> groups,
+  ) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate((context, index) {
+          final group = groups[index];
+          return Padding(
+            padding: EdgeInsets.only(
+              bottom: index == groups.length - 1 ? 0 : 18,
+            ),
+            child: NooGroupedList(
+              label: group.label,
+              children: [
+                for (final item in group.items) _buildRow(context, item),
+              ],
+            ),
+          );
+        }, childCount: groups.length),
+      ),
+    );
+  }
+
+  Widget _buildDesktopTable(
+    BuildContext context,
+    List<TabDayGroup<NextcloudItem>> groups,
+  ) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: NooSpace.xl,
+        vertical: NooSpace.xs,
+      ),
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate((context, index) {
+          final group = groups[index];
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 18),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                TabGroupLabel(group.label),
+                const NooFileTableHeader(
+                  col2Label: 'Modified',
+                  col3Label: 'Location',
+                ),
+                for (final item in group.items) _buildDesktopRow(context, item),
+              ],
+            ),
+          );
+        }, childCount: groups.length),
+      ),
+    );
+  }
+
+  Widget _buildRow(BuildContext context, NextcloudItem item) {
+    return NooFileRow(
+      kind: NooFileKind.from(
+        name: item.name,
+        mimeType: item.mimeType,
+        isDirectory: item.isFolder,
+      ),
+      name: item.name,
+      meta: 'Modified ${_metaTime(item.lastModified)} · ${_location(item)}',
+      favorite: item.isFavorite,
+      iosStyle: NooLayout.iosStyle(context),
+      onTap: () => _openFile(context, item),
+      onMore: () => _showItemSheet(context, item),
+    );
+  }
+
+  Widget _buildDesktopRow(BuildContext context, NextcloudItem item) {
+    return NooFileTableRow(
+      kind: NooFileKind.from(
+        name: item.name,
+        mimeType: item.mimeType,
+        isDirectory: item.isFolder,
+      ),
+      name: item.name,
+      col2: _metaTime(item.lastModified),
+      col3: _location(item),
+      favorite: item.isFavorite,
+      onTap: () => _openFile(context, item),
+      onMore: () => _showItemSheet(context, item),
+    );
+  }
+
+  void _showItemSheet(BuildContext context, NextcloudItem item) {
+    showNooSheet(
+      context,
+      children: [
+        NooGroupedList(
+          children: [
+            NooSettingsRow(
+              icon: LucideIcons.info,
+              label: const Text('Details'),
+              onTap: () {
+                Navigator.pop(context);
+                DetailsSheet.show(context, item);
+              },
+            ),
+            NooSettingsRow(
+              icon: LucideIcons.share2,
+              label: const Text('Share'),
+              onTap: () {
+                Navigator.pop(context);
+                ShareSheet.show(context, item);
+              },
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  /// Preserves the original screen's exact tap behavior: always opens the
+  /// media viewer (the server's recent-files search only ever returns
+  /// files, never folders, so there's no folder-navigation case to handle).
   void _openFile(BuildContext context, NextcloudItem item) {
     final recent = context.read<RecentController>();
     final siblings = recent.items.where((i) => i.isMedia).toList();
@@ -250,3 +234,14 @@ class _RecentViewState extends State<RecentView> {
     );
   }
 }
+
+String _metaTime(DateTime dt) {
+  final now = DateTime.now();
+  if (dt.year == now.year && dt.month == now.month && dt.day == now.day) {
+    return DateFormat.jm().format(dt);
+  }
+  if (dt.year == now.year) return DateFormat.MMMd().format(dt);
+  return DateFormat.yMMMd().format(dt);
+}
+
+String _location(NextcloudItem item) => tabLocationLabel(item.path, item.name);

lib/views/search_view.dart

@@ -1,14 +1,29 @@
 import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:path/path.dart' as p;
 import 'package:provider/provider.dart';
+
 import '../models/app_tab.dart';
 import '../models/nextcloud_item.dart';
 import '../providers/files_controller.dart';
 import '../providers/settings_controller.dart';
+import '../theme/design_tokens.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/files/noo_file_row.dart';
+import '../widgets/noo/files/noo_file_table.dart';
+import '../widgets/noo/core/noo_search_field.dart';
+import '../widgets/noo/nav/noo_top_bar.dart';
+import '../widgets/noo/nav/noo_toolbar.dart';
+import '../widgets/noo/noo_layout.dart';
 import 'file_viewer_screen.dart';
 
+/// Full-text file search, pushed from the shell's search entry point
+/// (`openSearch` in `widgets/shell/shell_common.dart`). Debounces input,
+/// then lists matches as file rows - tapping one jumps to the result on the
+/// Files tab (see [_openResult]). Per DESIGN_SYSTEM.md §4 "Search".
 class SearchView extends StatefulWidget {
   const SearchView({super.key});
 
@@ -74,25 +89,6 @@ class _SearchViewState extends State<SearchView> {
     }
   }
 
-  IconData _iconFor(NextcloudItemType type) {
-    switch (type) {
-      case NextcloudItemType.folder:
-        return Icons.folder_rounded;
-      case NextcloudItemType.image:
-        return Icons.image_rounded;
-      case NextcloudItemType.video:
-        return Icons.movie_rounded;
-      case NextcloudItemType.audio:
-        return Icons.audiotrack_rounded;
-      case NextcloudItemType.document:
-        return Icons.description_rounded;
-      case NextcloudItemType.archive:
-        return Icons.folder_zip_rounded;
-      case NextcloudItemType.file:
-        return Icons.insert_drive_file_rounded;
-    }
-  }
-
   /// Navigates the Files tab to [item] (its own folder if it's a folder,
   /// its parent folder otherwise - rebuilding the whole breadcrumb trail
   /// from root rather than assuming it's under wherever the user was
@@ -113,98 +109,249 @@ class _SearchViewState extends State<SearchView> {
     }
   }
 
+  void _clear() {
+    _controller.clear();
+    _focusNode.requestFocus();
+    _onChanged('');
+  }
+
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
+    final desktop = NooLayout.isDesktop(context);
 
     return Scaffold(
-      body: SafeArea(
-        child: Column(
-          children: [
-            Padding(
-              padding: const EdgeInsets.fromLTRB(12, 8, 12, 4),
-              child: SearchBar(
-                controller: _controller,
-                focusNode: _focusNode,
-                autoFocus: true,
-                hintText: 'Search your files...',
-                elevation: const WidgetStatePropertyAll(0),
-                onChanged: _onChanged,
-                leading: IconButton(
-                  icon: const Icon(Icons.arrow_back_rounded),
-                  onPressed: () => Navigator.pop(context),
+      backgroundColor: colors.bg,
+      appBar: desktop
+          ? NooToolbar(
+              titleWidget: _buildField(onSurface: true),
+              actions: [
+                IconTheme.merge(
+                  data: IconThemeData(color: colors.fg1, size: 24),
+                  child: NooTopBarButton(
+                    icon: LucideIcons.x,
+                    tooltip: 'Close',
+                    onTap: () => Navigator.pop(context),
+                  ),
                 ),
-                trailing: [
-                  if (_controller.text.isNotEmpty)
-                    IconButton(
-                      icon: const Icon(Icons.close_rounded),
-                      onPressed: () {
-                        _controller.clear();
-                        _onChanged('');
-                      },
+              ],
+            )
+          : null,
+      body: SafeArea(
+        top: !desktop,
+        child: desktop
+            ? _buildBody(context, desktop)
+            : Column(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.fromLTRB(
+                      NooSpace.xs,
+                      NooSpace.xs,
+                      NooSpace.md,
+                      NooSpace.xs,
                     ),
+                    child: Row(
+                      children: [
+                        IconTheme.merge(
+                          data: IconThemeData(color: colors.fg1, size: 24),
+                          child: NooTopBarButton(
+                            icon: LucideIcons.arrowLeft,
+                            tooltip: 'Back',
+                            onTap: () => Navigator.pop(context),
+                          ),
+                        ),
+                        Expanded(child: _buildField(onSurface: false)),
+                      ],
+                    ),
+                  ),
+                  Expanded(child: _buildBody(context, desktop)),
                 ],
               ),
+      ),
+    );
+  }
+
+  Widget _buildField({required bool onSurface}) {
+    // The pill `NooSearchField`, not the inset-panel `NooTextField` - this
+    // is a search field (DESIGN_SYSTEM.md's "Search field" component,
+    // radius 999 outside the one iOS-inline exception), not a form input.
+    // `ios: false` matches the Android shape we're building against now;
+    // revisit once the iOS large-title/inline-field entry point is built.
+    return NooSearchField(
+      controller: _controller,
+      focusNode: _focusNode,
+      autofocus: true,
+      placeholder: 'Search files',
+      onChanged: _onChanged,
+      onSurface: onSurface,
+      ios: false,
+      trailing: _controller.text.isEmpty
+          ? null
+          : _ClearFieldButton(onTap: _clear),
+    );
+  }
+
+  Widget _buildBody(BuildContext context, bool desktop) {
+    final colors = context.nooColors;
+
+    if (_isSearching) {
+      return Center(child: CircularProgressIndicator(color: colors.accent));
+    }
+    if (_error != null) {
+      return _buildMessage(
+        context,
+        icon: LucideIcons.circleAlert,
+        iconColor: colors.danger,
+        title: 'Couldn\'t search',
+        message: _error,
+      );
+    }
+    if (!_hasSearched) {
+      return _buildMessage(
+        context,
+        icon: LucideIcons.search,
+        iconColor: colors.fg3,
+        title: 'Search your files',
+        message: 'Find files and folders by name.',
+      );
+    }
+    if (_results.isEmpty) {
+      return _buildMessage(
+        context,
+        icon: LucideIcons.searchX,
+        iconColor: colors.fg3,
+        title: 'No results found',
+      );
+    }
+    return desktop ? _buildDesktopResults(context) : _buildMobileResults(context);
+  }
+
+  Widget _buildMessage(
+    BuildContext context, {
+    required IconData icon,
+    required Color iconColor,
+    required String title,
+    String? message,
+  }) {
+    final colors = context.nooColors;
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(NooSpace.xl),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(icon, size: 56, color: iconColor),
+            const SizedBox(height: NooSpace.sm),
+            Text(
+              title,
+              textAlign: TextAlign.center,
+              style: NooText.cardTitle.copyWith(color: colors.fg2),
             ),
-            Expanded(child: _buildBody(context, colorScheme, theme)),
+            if (message != null) ...[
+              const SizedBox(height: NooSpace.xxs),
+              Text(
+                message,
+                textAlign: TextAlign.center,
+                style: NooText.body.copyWith(color: colors.fg3),
+              ),
+            ],
           ],
         ),
       ),
     );
   }
 
-  Widget _buildBody(
-    BuildContext context,
-    ColorScheme colorScheme,
-    ThemeData theme,
-  ) {
-    if (_isSearching) {
-      return const Center(child: CircularProgressIndicator());
-    }
-    if (_error != null) {
-      return Center(
-        child: Padding(
-          padding: const EdgeInsets.all(24),
-          child: Text(
-            _error!,
-            textAlign: TextAlign.center,
-            style: TextStyle(color: colorScheme.error),
-          ),
-        ),
-      );
-    }
-    if (!_hasSearched) {
-      return const SizedBox.shrink();
-    }
-    if (_results.isEmpty) {
-      return Center(
-        child: Text(
-          'No results found',
-          style: theme.textTheme.bodyMedium?.copyWith(
-            color: colorScheme.onSurfaceVariant,
-          ),
-        ),
-      );
-    }
+  Widget _buildMobileResults(BuildContext context) {
     return ListView.builder(
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      padding: const EdgeInsets.fromLTRB(
+        NooSpace.sm,
+        NooSpace.xs,
+        NooSpace.sm,
+        NooSpace.xl,
+      ),
+      physics: const BouncingScrollPhysics(),
       itemCount: _results.length,
       itemBuilder: (context, index) {
         final item = _results[index];
-        return ListTile(
-          leading: Icon(_iconFor(item.type), color: colorScheme.primary),
-          title: Text(item.name, maxLines: 1, overflow: TextOverflow.ellipsis),
-          subtitle: Text(
-            item.isFolder
-                ? item.path
-                : DateFormat.yMMMd().format(item.lastModified),
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
+        return Padding(
+          padding: const EdgeInsets.only(bottom: 8),
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(NooRadii.card),
+            child: NooFileRow(
+              kind: NooFileKind.from(
+                name: item.name,
+                mimeType: item.mimeType,
+                isDirectory: item.isFolder,
+              ),
+              name: item.name,
+              meta: _mobileMeta(item),
+              favorite: item.isFavorite,
+              iosStyle: NooLayout.iosStyle(context),
+              onTap: () => _openResult(item),
+            ),
           ),
-          onTap: () => _openResult(item),
         );
       },
     );
   }
+
+  Widget _buildDesktopResults(BuildContext context) {
+    return SingleChildScrollView(
+      padding: const EdgeInsets.symmetric(
+        horizontal: NooSpace.xl,
+        vertical: NooSpace.sm,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const NooFileTableHeader(col2Label: 'Modified', col3Label: 'Location'),
+          for (final item in _results)
+            NooFileTableRow(
+              kind: NooFileKind.from(
+                name: item.name,
+                mimeType: item.mimeType,
+                isDirectory: item.isFolder,
+              ),
+              name: item.name,
+              col2: DateFormat.yMMMd().format(item.lastModified),
+              col3: item.isFolder ? item.path : p.dirname(item.path),
+              favorite: item.isFavorite,
+              onTap: () => _openResult(item),
+            ),
+        ],
+      ),
+    );
+  }
+
+  /// Mirrors the pre-rework screen's exact copy: a folder result shows its
+  /// own full path (there's no separate "location" field to fall back to),
+  /// a file result shows when it was last modified.
+  String _mobileMeta(NextcloudItem item) =>
+      item.isFolder ? item.path : DateFormat.yMMMd().format(item.lastModified);
+}
+
+/// Small round "clear" button for [NooTextField.trailing] - clears the
+/// query and puts focus back in the field, same as the old `SearchBar`'s
+/// trailing close icon.
+class _ClearFieldButton extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _ClearFieldButton({required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return SizedBox.square(
+      dimension: 32,
+      child: Material(
+        type: MaterialType.transparency,
+        shape: const CircleBorder(),
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: onTap,
+          child: Icon(LucideIcons.x, size: 16, color: colors.fg3),
+        ),
+      ),
+    );
+  }
 }

lib/views/share_upload_view.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
-import 'package:material_symbols_icons/symbols.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import '../models/app_tab.dart';
 import '../models/nextcloud_item.dart';
@@ -9,24 +8,32 @@ import '../providers/session_controller.dart';
 import '../providers/settings_controller.dart';
 import '../services/share_intent_service.dart';
 import '../services/upload_service.dart';
+import '../theme/design_tokens.dart';
 import '../widgets/breadcrumbs.dart';
-import '../widgets/item_icon.dart';
-import '../widgets/marquee_title.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/segmented_icon_toggle.dart';
-import '../widgets/sort_menu_button.dart';
-import '../widgets/sticky_header_delegate.dart';
-import '../widgets/synced_header_scaffold.dart';
+import '../widgets/files_controls_row.dart';
+import '../widgets/noo/core/noo_button.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/files/noo_file_row.dart';
+import '../widgets/noo/files/noo_file_table.dart';
+import '../widgets/noo/media/noo_grid_card.dart';
+import '../widgets/noo/nav/noo_top_bar.dart';
+import '../widgets/noo/nav/noo_toolbar.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/shell/shell_common.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 
 /// Shown when another app shares one or more files to Noo (Android's
 /// "Share to..." sheet). Lets the user browse to a destination folder,
-/// mirroring the Files tab's own controls/filters/listing so this feels
-/// like the same browser rather than a stripped-down picker, then hands the
-/// actual prepare+upload off to [UploadService] - a real Android foreground
+/// reusing `FilesController`'s shared folder-browsing state so this feels
+/// like the same browser Files itself uses, then hands the actual
+/// prepare+upload off to [UploadService] - a real Android foreground
 /// service (see `ShareUploadService.kt`'s doc comment), not something this
 /// screen or even the app needs to stay open for. [files] only ever carry
 /// cheap Uri metadata (see [ShareIntentService]'s doc comment); that
-/// service is the only thing that ever reads their actual bytes.
+/// service is the only thing that ever reads their actual bytes. Pushed
+/// via `Navigator` from outside `MainShellView` (a cold share-intent
+/// launch, or Files' own "+" -> "Upload file"), so - unlike a tab - it
+/// builds its own complete top chrome rather than relying on the shell's.
 class ShareUploadView extends StatefulWidget {
   final List<SharedFileRef> files;
 
@@ -45,7 +52,9 @@ class _ShareUploadViewState extends State<ShareUploadView> {
     // Shared files have no relationship to wherever the user was last
     // browsing, so start the destination picker fresh at the root.
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (mounted) context.read<FilesController>().navigateToAbsoluteFolder('/');
+      if (mounted) {
+        context.read<FilesController>().navigateToAbsoluteFolder('/');
+      }
     });
   }
 
@@ -86,243 +95,67 @@ class _ShareUploadViewState extends State<ShareUploadView> {
     );
   }
 
-  Widget _buildControlsRow(FilesController files) {
-    return SizedBox(
-      height: 44,
-      child: SingleChildScrollView(
-        scrollDirection: Axis.horizontal,
-        child: Row(
-          children: [
-            IconButton(
-              icon: Icon(
-                files.filesSortAscending
-                    ? Icons.arrow_upward_rounded
-                    : Icons.arrow_downward_rounded,
-                size: 20,
-              ),
-              visualDensity: VisualDensity.compact,
-              tooltip: files.filesSortAscending ? 'Ascending' : 'Descending',
-              onPressed: files.toggleFilesSortOrder,
-            ),
-            SizedBox(
-              width: 130,
-              child: SortMenuButton(
-                field: files.filesSortField,
-                onChanged: files.setFilesSortField,
-              ),
-            ),
-            ToggleIconButton(
-              icon: files.showHiddenFiles
-                  ? Icons.visibility_rounded
-                  : Icons.visibility_off_rounded,
-              isSelected: files.showHiddenFiles,
-              onTap: () => files.toggleShowHiddenFiles(),
-              tooltip: 'Show hidden files',
-            ),
-            const SizedBox(width: 4),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Symbols.circles_rounded,
-                  isSelected: files.storageScope == StorageScope.cloud,
-                  onTap: () => files.setStorageScope(StorageScope.cloud),
-                  tooltip: 'Cloud storage',
-                ),
-                ToggleIconButton(
-                  icon: Symbols.hard_drive_rounded,
-                  isSelected: files.storageScope == StorageScope.external,
-                  onTap: () => files.setStorageScope(StorageScope.external),
-                  tooltip: 'External storage',
-                ),
-              ],
-            ),
-            const SizedBox(width: 8),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Icons.select_all_rounded,
-                  isSelected: files.filesTypeFilter == FilesTypeFilter.all,
-                  onTap: () => files.setFilesTypeFilter(FilesTypeFilter.all),
-                  tooltip: 'Files & folders',
-                ),
-                ToggleIconButton(
-                  icon: Icons.insert_drive_file_outlined,
-                  isSelected:
-                      files.filesTypeFilter == FilesTypeFilter.filesOnly,
-                  onTap: () =>
-                      files.setFilesTypeFilter(FilesTypeFilter.filesOnly),
-                  tooltip: 'Files only',
-                ),
-                ToggleIconButton(
-                  icon: Icons.folder_outlined,
-                  isSelected:
-                      files.filesTypeFilter == FilesTypeFilter.foldersOnly,
-                  onTap: () =>
-                      files.setFilesTypeFilter(FilesTypeFilter.foldersOnly),
-                  tooltip: 'Folders only',
-                ),
-              ],
-            ),
-            const SizedBox(width: 8),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Icons.view_list_rounded,
-                  isSelected: !files.isGridView,
-                  onTap: () => files.setGridView(false),
-                  tooltip: 'List view',
-                ),
-                ToggleIconButton(
-                  icon: Icons.grid_view_rounded,
-                  isSelected: files.isGridView,
-                  onTap: () => files.setGridView(true),
-                  tooltip: 'Grid view',
-                ),
-              ],
-            ),
-          ],
+  // Only folders are valid upload destinations, so the listing - unlike
+  // Files' own - never shows plain files at all.
+  Widget _buildRow(
+    BuildContext context,
+    NextcloudItem item,
+    int index,
+    int count,
+  ) {
+    final colors = context.nooColors;
+    final files = context.read<FilesController>();
+    final row = NooFileRow(
+      kind: NooFileKind.folder,
+      name: item.name,
+      meta: 'Folder',
+      iosStyle: NooLayout.iosStyle(context),
+      onTap: () => files.navigateToFolder(item.path),
+    );
+
+    final isFirst = index == 0;
+    final isLast = index == count - 1;
+    return Column(
+      children: [
+        ClipRRect(
+          borderRadius: BorderRadius.vertical(
+            top: isFirst ? const Radius.circular(NooRadii.card) : Radius.zero,
+            bottom: isLast ? const Radius.circular(NooRadii.card) : Radius.zero,
+          ),
+          child: row,
         ),
-      ),
+        if (!isLast) Container(height: 1, color: colors.line),
+      ],
     );
   }
 
-  // Only folders are valid upload destinations - files still show (so the
-  // listing matches what the Files tab itself would show for this folder)
-  // but are visually dimmed and inert rather than hidden outright.
-  Widget _buildListTile(BuildContext context, NextcloudItem item) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+  Widget _buildDesktopRow(BuildContext context, NextcloudItem item) {
     final files = context.read<FilesController>();
-    final session = context.watch<SessionController>();
-    final isFolder = item.isFolder;
-
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(16),
-        child: Opacity(
-          opacity: isFolder ? 1 : 0.5,
-          child: Material(
-            color: colorScheme.surfaceContainerLow,
-            child: InkWell(
-              onTap: isFolder ? () => files.navigateToFolder(item.path) : null,
-              child: Padding(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 16,
-                  vertical: 12,
-                ),
-                child: Row(
-                  children: [
-                    ItemThumbnail(
-                      item: item,
-                      service: session.service,
-                      size: 44,
-                      borderRadius: 12,
-                      iconSize: 22,
-                    ),
-                    const SizedBox(width: 14),
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            item.name,
-                            style: theme.textTheme.titleMedium?.copyWith(
-                              fontWeight: FontWeight.w600,
-                              fontSize: 14,
-                            ),
-                          ),
-                          const SizedBox(height: 2),
-                          Text(
-                            isFolder
-                                ? 'Folder'
-                                : '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
-                            style: theme.textTheme.bodySmall?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                    if (isFolder) const Icon(Icons.chevron_right_rounded),
-                  ],
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
+    return NooFileTableRow(
+      kind: NooFileKind.folder,
+      name: item.name,
+      onTap: () => files.navigateToFolder(item.path),
     );
   }
 
   Widget _buildGridCard(BuildContext context, NextcloudItem item) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
     final files = context.read<FilesController>();
-    final isFolder = item.isFolder;
-    final iconColor = getIconColor(context, item.type);
-
-    return Opacity(
-      opacity: isFolder ? 1 : 0.5,
-      child: Material(
-        color: colorScheme.surfaceContainerLow,
-        borderRadius: BorderRadius.circular(20),
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: isFolder ? () => files.navigateToFolder(item.path) : null,
-          child: Padding(
-            padding: const EdgeInsets.all(14),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Container(
-                  width: 40,
-                  height: 40,
-                  decoration: BoxDecoration(
-                    color: iconColor.withValues(alpha: 0.12),
-                    borderRadius: BorderRadius.circular(12),
-                  ),
-                  child: Icon(
-                    getItemIcon(item.type),
-                    color: iconColor,
-                    size: 24,
-                  ),
-                ),
-                Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      item.name,
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w600,
-                        fontSize: 13,
-                      ),
-                    ),
-                    const SizedBox(height: 2),
-                    Text(
-                      isFolder ? 'Folder' : formatBytes(item.size),
-                      style: theme.textTheme.bodySmall?.copyWith(
-                        color: colorScheme.onSurfaceVariant,
-                        fontSize: 11,
-                      ),
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
+    return NooGridCard(
+      name: item.name,
+      meta: 'Folder',
+      placeholderColor: colors.accentSoft,
+      icon: LucideIcons.folder,
+      iconColor: colors.accentText,
+      thumbnailHeight: NooLayout.isDesktop(context) ? 118 : 104,
+      onTap: () => files.navigateToFolder(item.path),
     );
   }
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
+    final desktop = NooLayout.isDesktop(context);
     final files = context.watch<FilesController>();
     final session = context.watch<SessionController>();
     final hasBreadcrumbs = files.pathStack.length > 1;
@@ -330,171 +163,170 @@ class _ShareUploadViewState extends State<ShareUploadView> {
     final currentLabel = currentPath == '/'
         ? 'Home'
         : currentPath.split('/').where((s) => s.isNotEmpty).last;
-    final items = files.items;
+    final folders = files.items.where((item) => item.isFolder).toList();
+    final gutter = NooLayout.gutter(context);
 
-    // Mirrors FilesView's own controls-row + breadcrumbs sticky header
-    // exactly (padding, heights) so this reads as the same browser, just
-    // reached from a share intent instead of the Files tab.
-    final controlsColumn = Padding(
-      padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          _buildControlsRow(files),
-          if (hasBreadcrumbs) ...[
-            const SizedBox(height: 10),
-            SizedBox(
-              height: 32,
-              child: Breadcrumbs(
-                pathStack: files.pathStack,
-                onTap: (index) => files.navigateToPathIndex(index),
+    final slivers = <Widget>[
+      SliverToBoxAdapter(
+        child: Padding(
+          padding: EdgeInsets.fromLTRB(
+            gutter,
+            NooSpace.md,
+            gutter,
+            NooSpace.sm,
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                height: 44,
+                child: FilesControlsRow(folderPath: currentPath),
               ),
-            ),
-          ],
-        ],
-      ),
-    );
-
-    final contentSlivers = <Widget>[
-      SliverPersistentHeader(
-        pinned: true,
-        delegate: StickyHeaderDelegate(
-          height: hasBreadcrumbs ? 114 : 72,
-          child: controlsColumn,
+              if (hasBreadcrumbs) ...[
+                const SizedBox(height: 10),
+                SizedBox(
+                  height: 32,
+                  child: Breadcrumbs(
+                    pathStack: files.pathStack,
+                    onTap: (index) => files.navigateToPathIndex(index),
+                  ),
+                ),
+              ],
+            ],
+          ),
         ),
       ),
       if (files.isLoading)
-        const SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(child: CircularProgressIndicator()),
-        )
-      else if (items.isEmpty)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Text(
-              'Folder is empty',
-              style: TextStyle(color: colorScheme.onSurfaceVariant),
-            ),
-          ),
+        tabLoadingSliver
+      else if (folders.isEmpty)
+        tabEmptySliver(
+          context,
+          icon: LucideIcons.folder,
+          message: 'No folders here',
         )
       else if (files.isGridView)
         SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+          padding: EdgeInsets.symmetric(horizontal: gutter),
           sliver: SliverGrid(
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-              crossAxisCount: 2,
-              childAspectRatio: 1.1,
-              crossAxisSpacing: 12,
-              mainAxisSpacing: 12,
+            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: desktop
+                  ? 5
+                  : NooLayout.gridColumns(context, phone: 2, minTile: 180),
+              childAspectRatio: desktop ? 1.05 : 0.92,
+              crossAxisSpacing: desktop ? 16 : 10,
+              mainAxisSpacing: desktop ? 16 : 10,
+            ),
+            delegate: SliverChildBuilderDelegate(
+              (context, index) => _buildGridCard(context, folders[index]),
+              childCount: folders.length,
+            ),
+          ),
+        )
+      else if (desktop)
+        SliverPadding(
+          padding: EdgeInsets.symmetric(horizontal: gutter),
+          sliver: SliverList(
+            delegate: SliverChildBuilderDelegate(
+              (context, index) => _buildDesktopRow(context, folders[index]),
+              childCount: folders.length,
             ),
-            delegate: SliverChildBuilderDelegate((context, index) {
-              return _buildGridCard(context, items[index]);
-            }, childCount: items.length),
           ),
         )
       else
         SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
+          padding: EdgeInsets.symmetric(horizontal: gutter),
           sliver: SliverList(
-            delegate: SliverChildBuilderDelegate((context, index) {
-              return _buildListTile(context, items[index]);
-            }, childCount: items.length),
+            delegate: SliverChildBuilderDelegate(
+              (context, index) =>
+                  _buildRow(context, folders[index], index, folders.length),
+              childCount: folders.length,
+            ),
           ),
         ),
-      // So the last row isn't hidden behind the bottom "Upload to..." bar.
-      const SliverToBoxAdapter(child: SizedBox(height: 24)),
+      const SliverToBoxAdapter(child: SizedBox(height: NooSpace.xl)),
     ];
 
+    final title = 'Upload to...';
+
     return Scaffold(
-      body: SyncedHeaderScaffold(
-        scrollController: _scrollController,
-        // Same trailing actions as every other tab except "More tabs" -
-        // there's nowhere useful for it to go while mid-upload (jumping to
-        // Trash/Shares/etc. would abandon this destination picker), so the
-        // top chrome is identical to every other tab minus that one entry.
-        // Backing out is still the system back gesture/button, same as any
-        // other pushed screen.
-        actions: const [ProfileAvatarButton()],
-        contentSlivers: contentSlivers,
+      backgroundColor: colors.bg,
+      appBar: desktop
+          ? NooToolbar(
+              title: title,
+              actions: [
+                NooButton(
+                  variant: NooButtonVariant.secondary,
+                  size: NooButtonSize.toolbar,
+                  onTap: () => Navigator.of(context).maybePop(),
+                  child: const Text('Cancel'),
+                ),
+              ],
+            )
+          : NooTopBar(
+              style: NooLayout.navStyle(context),
+              title: title,
+              leading: const NooTopBarBack(label: 'Cancel'),
+              // Same top-bar access as every tab (avatar -> Settings, swipe
+              // to switch accounts) - nothing else belongs here: jumping to
+              // another tab mid-upload would abandon this destination
+              // picker, so there's no "more tabs" entry.
+              actions: const [ShellAvatarButton()],
+            ),
+      body: SafeArea(
+        top: false,
+        child: RefreshIndicator(
+          color: colors.accent,
+          backgroundColor: colors.surface,
+          onRefresh: files.refreshData,
+          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-folder
+            // listing.
+            physics: const AlwaysScrollableScrollPhysics(),
+            slivers: slivers,
+          ),
+        ),
       ),
-      // A rounded-top, elevated bar "peeking" up from the bottom edge - the
-      // uploading-file summary (marqueed if it doesn't fit on one line)
-      // sits directly above the destination button, both inside the one
-      // sheet, rather than the summary living up in the scrolling content
-      // far away from the action it describes.
-      bottomNavigationBar: Material(
-        color: colorScheme.surfaceContainerHigh,
-        elevation: 8,
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
+      // A flat surface bar with a top line, peeking up from the bottom edge -
+      // a centered item-count meta line sits directly above the destination
+      // button (DESIGN_SYSTEM.md's "Upload / Move / Copy destination
+      // picker" recipe: "a meta line ... above a full-width ... primary
+      // CTA" - matches MoveCopyDestinationPicker's identical bar). A count,
+      // not a filename: this is the one-file case just as much as the
+      // many-files case, and a long filename has no good fixed-width
+      // treatment the way a short count always does.
+      bottomNavigationBar: DecoratedBox(
+        decoration: BoxDecoration(
+          color: colors.surface,
+          border: Border(top: BorderSide(color: colors.line)),
         ),
-        clipBehavior: Clip.antiAlias,
         child: SafeArea(
           top: false,
           child: Padding(
-            padding: const EdgeInsets.fromLTRB(20, 16, 20, 16),
+            padding: const EdgeInsets.fromLTRB(
+              NooSpace.lg,
+              NooSpace.md,
+              NooSpace.lg,
+              NooSpace.md,
+            ),
             child: Column(
               mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-                // Same pill/chip look and exact same duller background
-                // color as the filter toggles' shared background
-                // (SegmentedIconGroup's `surfaceContainerHigh`), so it reads
-                // as part of the same visual language rather than a new
-                // accent color. Sized to the text itself (like a real chip)
-                // up to the row's available width - MarqueeTitle needs a
-                // concrete (not just loose) width to know whether/how far
-                // to scroll, so this measures the text once up front rather
-                // than leaving the chip unconstrained.
-                LayoutBuilder(
-                  builder: (context, constraints) {
-                    final uploadingText = widget.files.length == 1
-                        ? 'Uploading ${widget.files.first.name}'
-                        : 'Uploading ${widget.files.length} files';
-                    final chipTextStyle = theme.textTheme.titleSmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                      fontWeight: FontWeight.w700,
-                    );
-                    const horizontalPadding = 28.0;
-                    final painter = TextPainter(
-                      text: TextSpan(text: uploadingText, style: chipTextStyle),
-                      maxLines: 1,
-                      textDirection: Directionality.of(context),
-                    )..layout(maxWidth: double.infinity);
-                    final chipWidth = (painter.width + horizontalPadding).clamp(
-                      0.0,
-                      constraints.maxWidth,
-                    );
-
-                    return Container(
-                      width: chipWidth,
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 14,
-                        vertical: 8,
-                      ),
-                      decoration: BoxDecoration(
-                        color: colorScheme.surfaceContainerHigh,
-                        borderRadius: BorderRadius.circular(20),
-                      ),
-                      child: SizedBox(
-                        height: 20,
-                        child: MarqueeTitle(
-                          text: uploadingText,
-                          style: chipTextStyle,
-                        ),
-                      ),
-                    );
-                  },
+                Text(
+                  'Uploading ${widget.files.length} item${widget.files.length == 1 ? '' : 's'}',
+                  textAlign: TextAlign.center,
+                  style: NooText.meta.copyWith(color: colors.fg3),
                 ),
-                const SizedBox(height: 12),
-                SizedBox(
-                  width: double.infinity,
-                  child: FilledButton.icon(
-                    onPressed: () => _uploadHere(session),
-                    icon: const Icon(Icons.upload_rounded),
-                    label: Text('Upload to $currentLabel'),
-                  ),
+                const SizedBox(height: NooSpace.sm),
+                NooButton(
+                  variant: NooButtonVariant.primary,
+                  size: NooButtonSize.cta,
+                  fullWidth: true,
+                  icon: LucideIcons.upload,
+                  onTap: () => _uploadHere(session),
+                  child: Text('Upload to $currentLabel'),
                 ),
               ],
             ),

lib/views/shares_view.dart

@@ -1,53 +1,63 @@
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
-import '../models/nextcloud_item.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../models/nextcloud_share.dart';
+import '../providers/files_controller.dart';
 import '../providers/shares_controller.dart';
-import '../widgets/more_tabs_button.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/synced_header_scaffold.dart';
+import '../theme/design_tokens.dart';
+import '../widgets/noo/core/noo_segmented_control.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/files/noo_file_row.dart';
+import '../widgets/noo/files/noo_file_table.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/share_sheet.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 
-IconData _shareItemIcon(NextcloudItemType type) {
-  switch (type) {
-    case NextcloudItemType.folder:
-      return Icons.folder_rounded;
-    case NextcloudItemType.image:
-      return Icons.image_rounded;
-    case NextcloudItemType.video:
-      return Icons.movie_rounded;
-    case NextcloudItemType.audio:
-      return Icons.audiotrack_rounded;
-    case NextcloudItemType.document:
-      return Icons.description_rounded;
-    case NextcloudItemType.archive:
-      return Icons.folder_zip_rounded;
-    case NextcloudItemType.file:
-      return Icons.insert_drive_file_rounded;
-  }
-}
+/// Which slice of [SharesController.shares] is on screen - `With you` maps
+/// straight onto the controller's own `sharedWithMe: true` fetch, but the
+/// controller only ever exposes one boolean scope, so `By you` and `Links`
+/// both use its `sharedWithMe: false` fetch and are told apart client-side
+/// by [NextcloudShare.shareType] (see `_visibleShares`). `SharesController`
+/// caches each of its two scopes after its first fetch, so switching
+/// between any of the three - including back to `With you` after leaving
+/// it - only re-fetches a scope that's never been loaded yet, not on every
+/// single switch.
+enum _ShareScope { withYou, byYou, links }
 
 IconData _shareTypeIcon(ShareType type) {
   switch (type) {
     case ShareType.user:
-      return Icons.person_rounded;
+      return LucideIcons.user;
     case ShareType.group:
-      return Icons.groups_rounded;
+      return LucideIcons.users;
     case ShareType.publicLink:
-      return Icons.link_rounded;
+      return LucideIcons.link;
     case ShareType.email:
-      return Icons.email_rounded;
+      return LucideIcons.mail;
     case ShareType.federated:
-      return Icons.public_rounded;
+      return LucideIcons.globe;
     case ShareType.other:
-      return Icons.share_rounded;
+      return LucideIcons.share2;
   }
 }
 
+/// "Can edit" when any write bit (update/create/delete) is set on the OCS
+/// share permissions bitmask, "Can view" otherwise - kept to the two
+/// broad buckets the row's one-line meta has room for.
+String _permissionLabel(int permissions) {
+  const update = 2, create = 4, delete = 8;
+  final canWrite = permissions & (update | create | delete) != 0;
+  return canWrite ? 'Can edit' : 'Can view';
+}
+
 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();
@@ -55,11 +65,13 @@ class SharesView extends StatefulWidget {
 
 class _SharesViewState extends State<SharesView> {
   bool _requested = false;
+  // Mirrors `SharesController.sharedWithMe`'s own default (false, "shared
+  // by me") so the first fetch this triggers matches what's shown.
+  _ShareScope _scope = _ShareScope.byYou;
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
     final sharesController = context.watch<SharesController>();
 
     if (!_requested) {
@@ -69,247 +81,216 @@ class _SharesViewState extends State<SharesView> {
       );
     }
 
-    final shares = sharesController.shares;
+    final shares = _visibleShares(sharesController);
+    final isDesktop = NooLayout.isDesktop(context);
 
     final List<Widget> contentSlivers = [
-      SliverToBoxAdapter(
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(20, 16, 20, 8),
-          child: SegmentedButton<bool>(
-            segments: const [
-              ButtonSegment(value: false, label: Text('Shared by me')),
-              ButtonSegment(value: true, label: Text('Shared with me')),
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
+      SliverPadding(
+        padding: EdgeInsets.fromLTRB(
+          NooLayout.gutter(context),
+          NooSpace.md,
+          NooLayout.gutter(context),
+          0,
+        ),
+        sliver: SliverToBoxAdapter(
+          child: NooSegmentedControl<_ShareScope>(
+            value: _scope,
+            options: const [
+              NooSegmentOption(value: _ShareScope.withYou, label: 'With you'),
+              NooSegmentOption(value: _ShareScope.byYou, label: 'By you'),
+              NooSegmentOption(value: _ShareScope.links, label: 'Links'),
             ],
-            selected: {sharesController.sharedWithMe},
-            onSelectionChanged: (set) =>
-                sharesController.setSharedWithMe(set.first),
+            onChanged: (scope) => _selectScope(sharesController, scope),
           ),
         ),
       ),
-      const SliverToBoxAdapter(child: SizedBox(height: 8)),
-
+      const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
       if (sharesController.isLoading && shares.isEmpty)
-        const SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(child: CircularProgressIndicator()),
-        )
+        tabLoadingSliver
       else if (sharesController.errorMessage != null)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Padding(
-              padding: const EdgeInsets.all(24),
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(
-                    Icons.error_outline_rounded,
-                    size: 64,
-                    color: colorScheme.error,
-                  ),
-                  const SizedBox(height: 16),
-                  Text(
-                    'Could not load shares',
-                    style: theme.textTheme.titleLarge?.copyWith(
-                      color: colorScheme.error,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                  const SizedBox(height: 8),
-                  Text(
-                    sharesController.errorMessage!,
-                    textAlign: TextAlign.center,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                  ),
-                  const SizedBox(height: 20),
-                  FilledButton.icon(
-                    onPressed: sharesController.fetchAll,
-                    icon: const Icon(Icons.refresh_rounded),
-                    label: const Text('Retry'),
-                  ),
-                ],
-              ),
-            ),
-          ),
+        tabErrorSliver(
+          context,
+          title: 'Could not load shares',
+          message: sharesController.errorMessage!,
+          onRetry: sharesController.fetchAll,
         )
       else if (shares.isEmpty)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(
-                  Icons.groups_rounded,
-                  size: 64,
-                  color: colorScheme.outlineVariant,
-                ),
-                const SizedBox(height: 12),
-                Text(
-                  sharesController.sharedWithMe
-                      ? 'Nothing has been shared with you'
-                      : 'You haven\'t shared anything yet',
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    color: colorScheme.onSurfaceVariant,
-                  ),
-                ),
-              ],
-            ),
-          ),
+        tabEmptySliver(
+          context,
+          icon: LucideIcons.share2,
+          message: _emptyMessage(),
         )
+      else if (isDesktop)
+        _buildDesktopTable(context, shares)
       else
-        SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20),
-          sliver: SliverList(
-            delegate: SliverChildBuilderDelegate((context, index) {
-              final share = shares[index];
-              return _buildShareTile(context, share);
-            }, childCount: shares.length),
-          ),
-        ),
-
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
-      const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
+        _buildMobileList(context, shares),
+      ...tabBottomInsetSlivers(context),
     ];
 
-    return SyncedHeaderScaffold(
-      scrollController: widget.scrollController,
-      actions: const [MoreTabsButton(), ProfileAvatarButton()],
-      onRefresh: sharesController.fetchAll,
-      contentSlivers: contentSlivers,
-    );
-  }
-
-  Widget _buildShareTile(BuildContext context, NextcloudShare share) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-    final iconColor = colorScheme.primary;
-
-    final withWhom = share.sharedWithMe
-        ? 'From ${share.ownerDisplayName}'
-        : (share.sharedWithDisplayName != null
-              ? 'With ${share.sharedWithDisplayName}'
-              : 'Shared link');
-
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8),
-      child: Material(
-        color: colorScheme.surfaceContainerLow,
-        borderRadius: BorderRadius.circular(16),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-          child: Row(
-            children: [
-              Container(
-                width: 44,
-                height: 44,
-                decoration: BoxDecoration(
-                  color: iconColor.withValues(alpha: 0.12),
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                child: Icon(
-                  _shareItemIcon(share.itemType),
-                  color: iconColor,
-                  size: 22,
-                ),
-              ),
-              const SizedBox(width: 14),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      share.name,
-                      style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w600,
-                        fontSize: 14,
-                      ),
-                    ),
-                    const SizedBox(height: 2),
-                    Row(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Padding(
-                          padding: const EdgeInsets.only(top: 2),
-                          child: Icon(
-                            _shareTypeIcon(share.shareType),
-                            size: 13,
-                            color: colorScheme.onSurfaceVariant,
-                          ),
-                        ),
-                        const SizedBox(width: 4),
-                        Expanded(
-                          child: Text(
-                            '$withWhom • ${DateFormat.yMMMd().format(share.sharedAt)}',
-                            style: theme.textTheme.bodySmall?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                            ),
-                          ),
-                        ),
-                      ],
-                    ),
-                  ],
-                ),
-              ),
-              IconButton(
-                icon: Icon(Icons.link_off_rounded, color: colorScheme.error),
-                tooltip: share.sharedWithMe ? 'Remove' : 'Unshare',
-                onPressed: () => _confirmUnshare(context, share),
-              ),
-            ],
+    return ColoredBox(
+      color: colors.bg,
+      child: RefreshIndicator(
+        color: colors.accent,
+        backgroundColor: colors.surface,
+        onRefresh: sharesController.fetchAll,
+        // 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,
           ),
         ),
       ),
     );
   }
 
-  Future<void> _confirmUnshare(
+  List<NextcloudShare> _visibleShares(SharesController c) {
+    switch (_scope) {
+      case _ShareScope.withYou:
+        return c.shares;
+      case _ShareScope.byYou:
+        return c.shares
+            .where((s) => s.shareType != ShareType.publicLink)
+            .toList();
+      case _ShareScope.links:
+        return c.shares
+            .where((s) => s.shareType == ShareType.publicLink)
+            .toList();
+    }
+  }
+
+  String _emptyMessage() {
+    switch (_scope) {
+      case _ShareScope.withYou:
+        return 'Nothing has been shared with you';
+      case _ShareScope.byYou:
+        return "You haven't shared anything yet";
+      case _ShareScope.links:
+        return 'No share links yet';
+    }
+  }
+
+  void _selectScope(SharesController c, _ShareScope scope) {
+    setState(() => _scope = scope);
+    // No-ops (see `SharesController.setSharedWithMe`) when moving between
+    // `byYou`/`links`, which share the same `sharedWithMe: false` fetch.
+    c.setSharedWithMe(scope == _ShareScope.withYou);
+  }
+
+  // A lazily-built `SliverList`, not `NooGroupedList` (its own `Column`
+  // isn't lazy - see files_view.dart's `_buildMobileRow` doc comment, and
+  // trash_view.dart's `_buildMobileList`, which had the same bug: a heavy
+  // account's full share list built eagerly up front). Each row still
+  // reads as one continuous radius-20 card via per-row corner rounding +
+  // a 1px `line` divider.
+  Widget _buildMobileList(BuildContext context, List<NextcloudShare> shares) {
+    final colors = context.nooColors;
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate((context, index) {
+          final share = shares[index];
+          final row = NooFileRow(
+            kind: NooFileKind.from(
+              name: share.name,
+              isDirectory: share.isFolder,
+            ),
+            name: share.name,
+            meta:
+                '${share.ownerDisplayName} · ${_permissionLabel(share.permissions)}',
+            iosStyle: NooLayout.iosStyle(context),
+            onTap: () => _openShareSheet(context, share),
+            trailing: Icon(_shareTypeIcon(share.shareType), size: 16),
+          );
+          final isFirst = index == 0;
+          final isLast = index == shares.length - 1;
+          return Column(
+            children: [
+              ClipRRect(
+                borderRadius: BorderRadius.vertical(
+                  top: isFirst
+                      ? const Radius.circular(NooRadii.card)
+                      : Radius.zero,
+                  bottom: isLast
+                      ? const Radius.circular(NooRadii.card)
+                      : Radius.zero,
+                ),
+                child: row,
+              ),
+              if (!isLast) Container(height: 1, color: colors.line),
+            ],
+          );
+        }, childCount: shares.length),
+      ),
+    );
+  }
+
+  Widget _buildDesktopTable(BuildContext context, List<NextcloudShare> shares) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: NooSpace.xl,
+        vertical: NooSpace.xs,
+      ),
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate((context, index) {
+          if (index == 0) {
+            return const NooFileTableHeader(
+              col2Label: 'Owner',
+              col3Label: 'Permission',
+            );
+          }
+          final share = shares[index - 1];
+          return NooFileTableRow(
+            kind: NooFileKind.from(
+              name: share.name,
+              isDirectory: share.isFolder,
+            ),
+            name: share.name,
+            col2: share.ownerDisplayName,
+            col3: _permissionLabel(share.permissions),
+            onTap: () => _openShareSheet(context, share),
+          );
+        }, childCount: shares.length + 1),
+      ),
+    );
+  }
+
+  /// Every row's whole-row tap - a share only carries enough metadata for
+  /// its own row, not the size/dates the Share sheet's header needs, so
+  /// this fetches the real item first (see `FilesController.fetchItemAtPath`)
+  /// rather than opening the sheet straight from [share]. Reused by every
+  /// scope (With you/By you/Links) - the Share sheet is the one place that
+  /// already knows how to copy a link or remove access, so there's no
+  /// separate overflow menu here any more.
+  Future<void> _openShareSheet(
     BuildContext context,
     NextcloudShare share,
   ) async {
-    final confirmed = await showDialog<bool>(
-      context: context,
-      builder: (dialogContext) {
-        return AlertDialog(
-          title: Text(share.sharedWithMe ? 'Remove Share' : 'Unshare'),
-          content: Text(
-            share.sharedWithMe
-                ? 'Remove "${share.name}" shared with you by ${share.ownerDisplayName}?'
-                : 'Stop sharing "${share.name}"?',
-          ),
-          actions: [
-            TextButton(
-              onPressed: () => Navigator.pop(dialogContext, false),
-              child: const Text('Cancel'),
-            ),
-            FilledButton(
-              style: FilledButton.styleFrom(
-                backgroundColor: Theme.of(dialogContext).colorScheme.error,
-              ),
-              onPressed: () => Navigator.pop(dialogContext, true),
-              child: const Text('Remove'),
-            ),
-          ],
-        );
-      },
-    );
-    if (confirmed != true || !context.mounted) return;
-
+    final files = context.read<FilesController>();
     final messenger = ScaffoldMessenger.of(context);
-    final success = await context.read<SharesController>().deleteShare(
-      share,
-    );
-    messenger.showSnackBar(
-      SnackBar(
-        content: Text(
-          success
-              ? 'Removed share for ${share.name}'
-              : 'Failed to remove share for ${share.name}',
+    final item = await files.fetchItemAtPath(share.path);
+    if (!context.mounted) return;
+    if (item == null) {
+      messenger.showSnackBar(
+        const SnackBar(
+          content: Text('Could not find this item - it may have moved'),
+          behavior: SnackBarBehavior.floating,
         ),
-        behavior: SnackBarBehavior.floating,
-      ),
-    );
+      );
+      return;
+    }
+    await ShareSheet.show(context, item);
+    // The sheet manages shares through `ItemOperations`, not this tab's own
+    // `SharesController` (see its `deleteShare`'s doc comment) - refetch so
+    // a share added/removed from inside it doesn't leave this list stale.
+    if (context.mounted) context.read<SharesController>().fetchAll();
   }
 }

lib/views/trash_view.dart

@@ -1,35 +1,35 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../models/nextcloud_item.dart';
 import '../providers/trash_controller.dart';
-import '../widgets/more_tabs_button.dart';
-import '../widgets/profile_avatar_button.dart';
-import '../widgets/synced_header_scaffold.dart';
-
-IconData _trashItemIcon(NextcloudItemType type) {
-  switch (type) {
-    case NextcloudItemType.folder:
-      return Icons.folder_rounded;
-    case NextcloudItemType.image:
-      return Icons.image_rounded;
-    case NextcloudItemType.video:
-      return Icons.movie_rounded;
-    case NextcloudItemType.audio:
-      return Icons.audiotrack_rounded;
-    case NextcloudItemType.document:
-      return Icons.description_rounded;
-    case NextcloudItemType.archive:
-      return Icons.folder_zip_rounded;
-    case NextcloudItemType.file:
-      return Icons.insert_drive_file_rounded;
-  }
-}
+import '../theme/design_tokens.dart';
+import '../widgets/noo/core/noo_button.dart';
+import '../widgets/noo/files/noo_file_kind.dart';
+import '../widgets/noo/files/noo_file_row.dart';
+import '../widgets/noo/files/noo_file_table.dart';
+import '../widgets/noo/files/noo_file_tile.dart';
+import '../widgets/noo/lists/noo_banner.dart';
+import '../widgets/noo/noo_layout.dart';
+import '../widgets/tabs/tab_location.dart';
+import '../widgets/tabs/tab_state_slivers.dart';
 
+/// The Trash tab: a retention banner (`NooBanner`, with "Empty trash" as
+/// its danger action) then the trashed-items list, per `DESIGN_SYSTEM.md`
+/// §4. There's no dedicated "empty trash" endpoint anywhere in
+/// [TrashController]/`NextcloudService` - [_emptyTrash] composes it from
+/// the existing per-item [TrashController.deleteForever], the same way
+/// `FavoritesView._confirmDeleteSelected` builds its bulk delete from a
+/// per-item call.
 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();
@@ -40,8 +40,7 @@ class _TrashViewState extends State<TrashView> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
     final trashController = context.watch<TrashController>();
 
     if (!_requested) {
@@ -52,176 +51,189 @@ class _TrashViewState extends State<TrashView> {
     }
 
     final trash = trashController.items;
+    final isDesktop = NooLayout.isDesktop(context);
 
     final List<Widget> contentSlivers = [
-      const SliverToBoxAdapter(child: SizedBox(height: 16)),
-
-      if (trashController.isLoading && trash.isEmpty)
-        const SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(child: CircularProgressIndicator()),
-        )
-      else if (trashController.errorMessage != null)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Padding(
-              padding: const EdgeInsets.all(24),
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(
-                    Icons.error_outline_rounded,
-                    size: 64,
-                    color: colorScheme.error,
-                  ),
-                  const SizedBox(height: 16),
-                  Text(
-                    'Could not load trash',
-                    style: theme.textTheme.titleLarge?.copyWith(
-                      color: colorScheme.error,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                  const SizedBox(height: 8),
-                  Text(
-                    trashController.errorMessage!,
-                    textAlign: TextAlign.center,
-                    style: theme.textTheme.bodyMedium?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                  ),
-                  const SizedBox(height: 20),
-                  FilledButton.icon(
-                    onPressed: trashController.fetchAll,
-                    icon: const Icon(Icons.refresh_rounded),
-                    label: const Text('Retry'),
-                  ),
-                ],
-              ),
+      if (widget.topBar != null) topBarSliver(widget.topBar!),
+      SliverPadding(
+        padding: EdgeInsets.fromLTRB(
+          NooLayout.gutter(context),
+          NooSpace.md,
+          NooLayout.gutter(context),
+          0,
+        ),
+        sliver: SliverToBoxAdapter(
+          child: NooBanner(
+            actionLabel: trash.isEmpty ? null : 'Empty trash',
+            onAction: trash.isEmpty
+                ? null
+                : () => _confirmEmptyTrash(context, trash),
+            child: const Text(
+              'Deleted items are kept for 30 days, then removed automatically.',
             ),
           ),
-        )
-      else if (trash.isEmpty)
-        SliverFillRemaining(
-          hasScrollBody: false,
-          child: Center(
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Icon(
-                  Icons.delete_outline_rounded,
-                  size: 64,
-                  color: colorScheme.outlineVariant,
-                ),
-                const SizedBox(height: 12),
-                Text(
-                  'Trash is empty',
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    color: colorScheme.onSurfaceVariant,
-                  ),
-                ),
-              ],
-            ),
-          ),
-        )
-      else
-        SliverPadding(
-          padding: const EdgeInsets.symmetric(horizontal: 20),
-          sliver: SliverList(
-            delegate: SliverChildBuilderDelegate((context, index) {
-              final item = trash[index];
-              return _buildTrashTile(context, item);
-            }, childCount: trash.length),
-          ),
         ),
-
-      const SliverToBoxAdapter(child: SizedBox(height: 100)),
-      const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
+      ),
+      const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
+      if (trashController.isLoading && trash.isEmpty)
+        tabLoadingSliver
+      else if (trashController.errorMessage != null)
+        tabErrorSliver(
+          context,
+          title: 'Could not load trash',
+          message: trashController.errorMessage!,
+          onRetry: trashController.fetchAll,
+        )
+      else if (trash.isEmpty)
+        tabEmptySliver(
+          context,
+          icon: LucideIcons.trash2,
+          message: 'Trash is empty',
+        )
+      else if (isDesktop)
+        _buildDesktopTable(context, trash)
+      else
+        _buildMobileList(context, trash),
+      ...tabBottomInsetSlivers(context),
     ];
 
-    return SyncedHeaderScaffold(
-      scrollController: widget.scrollController,
-      actions: const [MoreTabsButton(), ProfileAvatarButton()],
-      onRefresh: trashController.fetchAll,
-      contentSlivers: contentSlivers,
-    );
-  }
-
-  Widget _buildTrashTile(BuildContext context, NextcloudItem item) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-    final iconColor = colorScheme.outline;
-
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 8),
-      child: Material(
-        color: colorScheme.surfaceContainerLow,
-        borderRadius: BorderRadius.circular(16),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-          child: Row(
-            children: [
-              Container(
-                width: 44,
-                height: 44,
-                decoration: BoxDecoration(
-                  color: iconColor.withValues(alpha: 0.12),
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                child: Icon(
-                  _trashItemIcon(item.type),
-                  color: iconColor,
-                  size: 22,
-                ),
-              ),
-              const SizedBox(width: 14),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      item.name,
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
-                      style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w600,
-                        fontSize: 14,
-                      ),
-                    ),
-                    const SizedBox(height: 2),
-                    Text(
-                      item.deletedAt != null
-                          ? 'Deleted ${DateFormat.yMMMd().format(item.deletedAt!)}'
-                          : 'Deleted',
-                      style: theme.textTheme.bodySmall?.copyWith(
-                        color: colorScheme.onSurfaceVariant,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              IconButton(
-                icon: const Icon(Icons.restore_rounded),
-                tooltip: 'Restore',
-                color: colorScheme.primary,
-                onPressed: () => _restore(context, item),
-              ),
-              IconButton(
-                icon: Icon(
-                  Icons.delete_forever_rounded,
-                  color: colorScheme.error,
-                ),
-                tooltip: 'Delete forever',
-                onPressed: () => _confirmDeleteForever(context, item),
-              ),
-            ],
+    return ColoredBox(
+      color: colors.bg,
+      child: RefreshIndicator(
+        color: colors.accent,
+        backgroundColor: colors.surface,
+        onRefresh: trashController.fetchAll,
+        // 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,
           ),
         ),
       ),
     );
   }
 
+  // A lazily-built `SliverList`, not `NooGroupedList` (its own `Column`
+  // isn't lazy - see files_view.dart's `_buildMobileRow` doc comment for
+  // the same reasoning): Trash can hold hundreds of items, and building
+  // every row eagerly up front is what made this tab laggy. Each row still
+  // reads as one continuous radius-20 card via per-row corner rounding +
+  // a 1px `line` divider, matching `NooGroupedList`'s look.
+  Widget _buildMobileList(BuildContext context, List<NextcloudItem> trash) {
+    final colors = context.nooColors;
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate((context, index) {
+          final item = trash[index];
+          // The overflow menu's only action here is "Delete forever" - a
+          // bare ellipsis obscures that behind an extra tap to discover it,
+          // so this row shows the delete icon directly instead of going
+          // through `NooFileRow.onMore`.
+          final row = NooFileRow(
+            kind: NooFileKind.from(
+              name: item.name,
+              mimeType: item.mimeType,
+              isDirectory: item.isFolder,
+            ),
+            name: item.name,
+            meta: _meta(item),
+            iosStyle: NooLayout.iosStyle(context),
+            trailing: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Semantics(
+                  button: true,
+                  label: 'Restore',
+                  child: InkResponse(
+                    onTap: () => _restore(context, item),
+                    radius: 20,
+                    child: const Icon(LucideIcons.rotateCcw),
+                  ),
+                ),
+                const SizedBox(width: NooSpace.xs),
+                Semantics(
+                  button: true,
+                  label: 'Delete forever',
+                  child: InkResponse(
+                    onTap: () => _confirmDeleteForever(context, item),
+                    radius: 20,
+                    child: Icon(LucideIcons.trash2, color: colors.danger),
+                  ),
+                ),
+              ],
+            ),
+          );
+          final isFirst = index == 0;
+          final isLast = index == trash.length - 1;
+          return Column(
+            children: [
+              ClipRRect(
+                borderRadius: BorderRadius.vertical(
+                  top: isFirst
+                      ? const Radius.circular(NooRadii.card)
+                      : Radius.zero,
+                  bottom: isLast
+                      ? const Radius.circular(NooRadii.card)
+                      : Radius.zero,
+                ),
+                child: row,
+              ),
+              if (!isLast) Container(height: 1, color: colors.line),
+            ],
+          );
+        }, childCount: trash.length),
+      ),
+    );
+  }
+
+  Widget _buildDesktopTable(BuildContext context, List<NextcloudItem> trash) {
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: NooSpace.xl,
+        vertical: NooSpace.xs,
+      ),
+      sliver: SliverList(
+        delegate: SliverChildBuilderDelegate((context, index) {
+          if (index == 0) {
+            return const NooFileTableHeader(
+              col2Label: 'Deleted',
+              col3Label: 'Original location',
+            );
+          }
+          final item = trash[index - 1];
+          return _TrashDesktopRow(
+            kind: NooFileKind.from(
+              name: item.name,
+              mimeType: item.mimeType,
+              isDirectory: item.isFolder,
+            ),
+            name: item.name,
+            col2: _deletedLabel(item),
+            col3: item.originalLocation ?? 'Unknown location',
+            onRestore: () => _restore(context, item),
+            onDelete: () => _confirmDeleteForever(context, item),
+          );
+        }, childCount: trash.length + 1),
+      ),
+    );
+  }
+
+  String _meta(NextcloudItem item) =>
+      'Deleted ${_deletedLabel(item)} · ${tabLocationLabel(item.originalLocation ?? item.path, item.name)}';
+
+  String _deletedLabel(NextcloudItem item) => item.deletedAt != null
+      ? DateFormat.yMMMd().format(item.deletedAt!)
+      : 'recently';
+
   Future<void> _restore(BuildContext context, NextcloudItem item) async {
     final messenger = ScaffoldMessenger.of(context);
     final success = await context.read<TrashController>().restore(item);
@@ -243,7 +255,7 @@ class _TrashViewState extends State<TrashView> {
       context: context,
       builder: (dialogContext) {
         return AlertDialog(
-          title: const Text('Delete Forever'),
+          title: const Text('Delete forever'),
           content: Text(
             'Permanently delete "${item.name}"? This cannot be undone.',
           ),
@@ -257,7 +269,7 @@ class _TrashViewState extends State<TrashView> {
                 backgroundColor: Theme.of(dialogContext).colorScheme.error,
               ),
               onPressed: () => Navigator.pop(dialogContext, true),
-              child: const Text('Delete Forever'),
+              child: const Text('Delete forever'),
             ),
           ],
         );
@@ -276,4 +288,159 @@ class _TrashViewState extends State<TrashView> {
       ),
     );
   }
+
+  Future<void> _confirmEmptyTrash(
+    BuildContext context,
+    List<NextcloudItem> trash,
+  ) async {
+    final confirmed = await showDialog<bool>(
+      context: context,
+      builder: (dialogContext) {
+        return AlertDialog(
+          title: const Text('Empty trash'),
+          content: Text(
+            'Permanently delete all ${trash.length} item(s) in trash? This cannot be undone.',
+          ),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.pop(dialogContext, false),
+              child: const Text('Cancel'),
+            ),
+            FilledButton(
+              style: FilledButton.styleFrom(
+                backgroundColor: Theme.of(dialogContext).colorScheme.error,
+              ),
+              onPressed: () => Navigator.pop(dialogContext, true),
+              child: const Text('Empty trash'),
+            ),
+          ],
+        );
+      },
+    );
+    if (confirmed != true || !context.mounted) return;
+
+    final controller = context.read<TrashController>();
+    final messenger = ScaffoldMessenger.of(context);
+    var succeeded = 0;
+    for (final item in trash) {
+      if (await controller.deleteForever(item)) succeeded++;
+    }
+    if (!context.mounted) return;
+    messenger.showSnackBar(
+      SnackBar(
+        content: Text('Deleted $succeeded of ${trash.length} item(s)'),
+        behavior: SnackBarBehavior.floating,
+      ),
+    );
+  }
+}
+
+/// Desktop trash row: like `NooFileTableRow`, but its 120px last column
+/// holds a tonal "Restore" button plus a danger-tonal "Delete" button
+/// (permanent delete) instead of status icons - `NooFileTableRow` has no
+/// slot for screen-specific actions there. A labelled pill, not a bare
+/// overflow icon: it's the row's only destructive action, not a menu of
+/// several, and desktop already prefers labelled buttons to bare icons
+/// (see `NooSelectionBar`'s own desktop actions). Column widths
+/// (180/160/120) are matched by hand to `NooFileTableHeader`'s (private in
+/// `noo_file_table.dart`) so this still lines up under it; promoting an
+/// optional `actions` slot onto `NooFileTableRow` would let this fold back
+/// into the shared component.
+class _TrashDesktopRow extends StatelessWidget {
+  final NooFileKind kind;
+  final String name;
+  final String col2;
+  final String col3;
+  final VoidCallback onRestore;
+  final VoidCallback onDelete;
+
+  const _TrashDesktopRow({
+    required this.kind,
+    required this.name,
+    required this.col2,
+    required this.col3,
+    required this.onRestore,
+    required this.onDelete,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final metaStyle = NooText.meta.copyWith(color: colors.fg3);
+
+    return SizedBox(
+      height: NooSizes.rowDesktop,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
+        child: Row(
+          children: [
+            Expanded(
+              child: Row(
+                children: [
+                  NooFileTile(kind: kind, size: NooFileTileSize.desktop),
+                  const SizedBox(width: NooSpace.sm),
+                  Expanded(
+                    child: Text(
+                      name,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: NooText.body.copyWith(
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: colors.fg1,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(width: NooSpace.md),
+                ],
+              ),
+            ),
+            SizedBox(
+              width: 180,
+              child: Text(
+                col2,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: metaStyle,
+              ),
+            ),
+            SizedBox(
+              width: 160,
+              child: Text(
+                col3,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: metaStyle,
+              ),
+            ),
+            SizedBox(
+              width: 120,
+              child: FittedBox(
+                fit: BoxFit.scaleDown,
+                alignment: Alignment.centerRight,
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    NooButton(
+                      variant: NooButtonVariant.tonal,
+                      size: NooButtonSize.xs,
+                      onTap: onRestore,
+                      child: const Text('Restore'),
+                    ),
+                    const SizedBox(width: 4),
+                    NooButton(
+                      variant: NooButtonVariant.danger,
+                      size: NooButtonSize.xs,
+                      onTap: onDelete,
+                      child: const Text('Delete'),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
 }

lib/widgets/app_drawer.dart

@@ -0,0 +1,83 @@
+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/files_controller.dart';
+import '../providers/session_controller.dart';
+import '../providers/settings_controller.dart';
+import '../providers/trash_controller.dart';
+import 'noo/core/noo_avatar.dart';
+import 'noo/nav/noo_drawer.dart';
+import 'shell/shell_common.dart';
+
+/// The mobile drawer (DESIGN_SYSTEM.md 2 "Drawer" / 3; `drawer` in
+/// `Mobile Screen.dc.html`): account block, storage bar, the tabs not
+/// pinned to the bottom nav bar ("More"), Settings, and an "Edit tabs"
+/// link. Opened the same way as before (menu icon in [AppTopBar]), but
+/// built on [NooDrawer] instead of the old Material [Drawer] + ad hoc rows.
+///
+/// Tapping a "More" tab switches the shell straight to it (rather than
+/// pushing it as a standalone screen, like the pre-rework `MoreTabsButton`
+/// did) via `SettingsController.requestTab` - the same one-shot mechanism
+/// `SearchView`/`FavoritesView`/`ShareUploadView` already use to jump the
+/// shell to a tab from outside it, so `MainShellView` needs no extra
+/// plumbing to support it.
+class AppDrawer extends StatelessWidget {
+  const AppDrawer({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final session = context.watch<SessionController>();
+    final settings = context.watch<SettingsController>();
+    final quota = context.watch<FilesController>().quota;
+    // Cheap and already loaded when the Trash tab has been visited this
+    // session - not worth a fetch just to populate a drawer badge.
+    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 NooDrawer(
+      account: NooDrawerAccount(
+        avatar: NooAvatar(
+          initials: accountInitial(session.username),
+          current: true,
+          size: 48,
+        ),
+        name: session.username,
+        subtitle: serverHost(session.serverUrl),
+        onTap: closeAndOpenSettings,
+        onSwitchAccount: () => showAccountSwitcher(context),
+      ),
+      storage: NooDrawerStorage(
+        value: quotaFraction(quota),
+        label: quotaUsedLabel(quota),
+      ),
+      moreItems: [
+        for (final tab in hiddenTabs)
+          NooDrawerItem(
+            icon: tab.icon,
+            label: tab.label,
+            count: tab == AppTab.trash && trashCount > 0
+                ? '$trashCount'
+                : null,
+            onTap: () {
+              Navigator.pop(context);
+              settings.requestTab(tab);
+            },
+          ),
+      ],
+      settings: NooDrawerItem(
+        icon: LucideIcons.settings,
+        label: 'Settings',
+        onTap: closeAndOpenSettings,
+      ),
+      footer: NooDrawerLink(onTap: closeAndOpenSettings),
+    );
+  }
+}

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

@@ -0,0 +1,96 @@
+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';
+
+/// The shell's mobile top bar (DESIGN_SYSTEM.md 3, "Mobile"): every regular
+/// tab now gets the same chrome (this used to only wrap Files - the other
+/// tabs built their own via `SyncedHeaderScaffold`, which the rework drops).
+/// Built on [NooTopBar]:
+///
+/// - 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, 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
+/// BuildContext - the same reason [NooTopBar] itself takes it as a field.
+/// [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. [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;
+  bool get _showSearch => !searchInBottomBar;
+
+  @override
+  Size get preferredSize => NooTopBar(
+    style: style,
+    title: tab.label,
+    // A throwaway placeholder purely to make preferredSize's "is there a
+    // search slot" check match what build() actually shows - never
+    // inserted into the tree, so its content doesn't matter.
+    search: _ios && _showSearch ? const SizedBox.shrink() : null,
+  ).preferredSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return NooTopBar(
+      style: style,
+      title: tab.label,
+      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 && tab == AppTab.files)
+          NooTopBarButton(
+            icon: LucideIcons.plus,
+            tooltip: 'Create',
+            onTap: () => showCreateMenu(context),
+          ),
+        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/bottom_nav_bar.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../models/app_tab.dart';
+import 'noo/nav/noo_bottom_bar.dart';
+
+/// Adapts the app's [AppTab] model onto [NooBottomBar]'s generic
+/// [NooNavDestination] list, so `MainShellView` only deals in tabs and
+/// doesn't need to import `noo/nav` itself. [selectedIndex] may be -1 (no
+/// destination highlighted) when the shell is showing a tab opened from the
+/// drawer's "More" list that isn't one of the pinned [tabs].
+///
+/// [onSearchTap] (from Settings' "Search in bottom bar") adds the Search
+/// entry [NooBottomBar] itself knows how to place (row's last item when
+/// attached, its own satellite when floating) - null leaves the bar
+/// exactly as before.
+class BottomNavBar extends StatelessWidget {
+  final NooNavStyle style;
+  final NooBottomBarStyle barStyle;
+  final List<AppTab> tabs;
+  final int selectedIndex;
+  final ValueChanged<int> onDestinationSelected;
+  final VoidCallback? onSearchTap;
+
+  const BottomNavBar({
+    super.key,
+    required this.style,
+    this.barStyle = NooBottomBarStyle.attached,
+    required this.tabs,
+    required this.selectedIndex,
+    required this.onDestinationSelected,
+    this.onSearchTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return NooBottomBar(
+      style: style,
+      barStyle: barStyle,
+      destinations: [
+        for (final tab in tabs)
+          NooNavDestination(icon: tab.icon, label: tab.label),
+      ],
+      selectedIndex: selectedIndex,
+      onSelected: onDestinationSelected,
+      searchDestination: onSearchTap == null
+          ? null
+          : const NooNavDestination(icon: LucideIcons.search, label: 'Search'),
+      onSearchTap: onSearchTap,
+    );
+  }
+}

lib/widgets/breadcrumbs.dart

@@ -1,7 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../theme/design_tokens.dart';
 
 /// Tappable "Home / Folder / Sub-folder" trail shown whenever the user has
-/// navigated below the root, in both the Files and Photos tabs.
+/// navigated below the root - now only used by `ShareUploadView` and
+/// `MoveCopyDestinationPicker` (Files/Photos moved to their own noo-styled
+/// `FileBreadcrumbRow`), so this is free to carry noo tokens directly rather
+/// than staying on the old Material look. Same behaviour: every crumb but
+/// the last is tappable, jumping back to that depth.
 class Breadcrumbs extends StatelessWidget {
   final List<String> pathStack;
   final ValueChanged<int> onTap;
@@ -19,8 +25,7 @@ class Breadcrumbs extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
     final lastIndex = pathStack.length - 1;
 
     return SingleChildScrollView(
@@ -32,37 +37,42 @@ class Breadcrumbs extends StatelessWidget {
               Padding(
                 padding: const EdgeInsets.symmetric(horizontal: 2),
                 child: Icon(
-                  Icons.chevron_right_rounded,
-                  size: 16,
-                  color: colorScheme.outlineVariant,
+                  LucideIcons.chevronRight,
+                  size: 14,
+                  color: colors.fg3,
                 ),
               ),
             if (i == lastIndex)
               Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 8),
+                padding: const EdgeInsets.symmetric(horizontal: 6),
                 child: Text(
                   _labelFor(i),
-                  style: theme.textTheme.bodySmall?.copyWith(
-                    fontWeight: FontWeight.w700,
-                    color: colorScheme.onSurface,
+                  style: NooText.body.copyWith(
+                    fontSize: 13,
+                    fontWeight: FontWeight.w600,
+                    color: colors.fg1,
                   ),
                 ),
               )
             else
-              // A chip's whole pill is the tap target (not just the text),
-              // so the previous plain-text crumbs were fiddly to hit.
-              ActionChip(
-                label: Text(_labelFor(i)),
-                labelStyle: theme.textTheme.bodySmall?.copyWith(
-                  fontWeight: FontWeight.w600,
-                  color: colorScheme.primary,
+              // The whole pill is the tap target, not just the text.
+              InkWell(
+                onTap: () => onTap(i),
+                borderRadius: BorderRadius.circular(NooRadii.pill),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 8,
+                    vertical: 4,
+                  ),
+                  child: Text(
+                    _labelFor(i),
+                    style: NooText.body.copyWith(
+                      fontSize: 13,
+                      fontWeight: FontWeight.w600,
+                      color: colors.accentText,
+                    ),
+                  ),
                 ),
-                onPressed: () => onTap(i),
-                backgroundColor: colorScheme.surfaceContainerHigh,
-                side: BorderSide.none,
-                visualDensity: VisualDensity.compact,
-                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-                padding: const EdgeInsets.symmetric(horizontal: 4),
               ),
           ],
         ],

lib/widgets/create_menu.dart

@@ -0,0 +1,119 @@
+import 'package:file_picker/file_picker.dart';
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:provider/provider.dart';
+import '../providers/files_controller.dart';
+import '../services/share_intent_service.dart';
+import '../views/share_upload_view.dart';
+import 'noo/core/noo_button.dart';
+import 'noo/lists/noo_grouped_list.dart';
+import 'noo/lists/noo_settings_row.dart';
+import 'noo/overlays/noo_dialog.dart';
+import 'noo/overlays/noo_sheet.dart';
+import 'noo/overlays/noo_text_field.dart';
+
+/// The Files tab's "+"/FAB action: upload a file or create a folder into
+/// the current folder. Shared by `FilesView`'s own create button and
+/// `MainShellView`'s FAB (the Noo Design System project's FAB component),
+/// since both need to trigger the exact same flow.
+void showCreateMenu(BuildContext context) {
+  showNooSheet(
+    context,
+    children: [
+      NooGroupedList(
+        children: [
+          NooSettingsRow(
+            icon: LucideIcons.upload,
+            label: const Text('Upload file'),
+            onTap: () {
+              Navigator.pop(context);
+              _pickAndUploadFile(context);
+            },
+          ),
+          NooSettingsRow(
+            icon: LucideIcons.folder,
+            label: const Text('New folder'),
+            onTap: () {
+              Navigator.pop(context);
+              _showCreateFolderDialog(context);
+            },
+          ),
+        ],
+      ),
+    ],
+  );
+}
+
+void _showCreateFolderDialog(BuildContext context) {
+  final files = context.read<FilesController>();
+  final controller = TextEditingController();
+
+  Future<void> submit(BuildContext ctx) async {
+    final name = controller.text.trim();
+    if (name.isEmpty) return;
+    Navigator.pop(ctx);
+    final success = await files.createFolder(name);
+    if (ctx.mounted) {
+      ScaffoldMessenger.of(ctx).showSnackBar(
+        SnackBar(
+          content: Text(success ? 'Created folder $name' : 'Failed to create folder'),
+          behavior: SnackBarBehavior.floating,
+        ),
+      );
+    }
+  }
+
+  showNooDialog<void>(
+    context,
+    title: 'New folder',
+    children: [
+      NooTextField(
+        controller: controller,
+        placeholder: 'e.g. Finance',
+        autofocus: true,
+        onSurface: false,
+        onSubmitted: (_) => submit(context),
+      ),
+      Row(
+        mainAxisAlignment: MainAxisAlignment.end,
+        spacing: 10,
+        children: [
+          NooButton(
+            variant: NooButtonVariant.secondary,
+            onTap: () => Navigator.pop(context),
+            child: const Text('Cancel'),
+          ),
+          NooButton(
+            variant: NooButtonVariant.primary,
+            onTap: () => submit(context),
+            child: const Text('Create'),
+          ),
+        ],
+      ),
+    ],
+  );
+}
+
+// Mirrors `main.dart`'s `_handleSharedFiles` exactly, so picking a file via
+// "+"/the FAB lands on the same destination-picker screen and background
+// foreground-service upload as receiving one via Android's "Share to..."
+// sheet does, rather than a separate in-app-only upload path.
+Future<void> _pickAndUploadFile(BuildContext context) async {
+  final picked = await FilePicker.pickFiles();
+  if (picked.isEmpty) return;
+  final files = picked
+      .where((f) => f.path != null)
+      .map(
+        (f) => SharedFileRef(
+          uri: Uri.file(f.path!).toString(),
+          name: f.name,
+          size: f.lengthSync(),
+        ),
+      )
+      .toList();
+  if (files.isEmpty || !context.mounted) return;
+
+  Navigator.of(
+    context,
+  ).push(MaterialPageRoute(builder: (_) => ShareUploadView(files: files)));
+}

lib/widgets/details/details_activity_tab.dart

@@ -1,11 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import '../../models/nextcloud_item.dart';
 import '../../providers/item_operations.dart';
+import '../../providers/session_controller.dart';
+import '../../theme/design_tokens.dart';
+import '../noo/lists/noo_grouped_list.dart';
+import '../noo/media/noo_activity_item.dart';
+import '../noo/media/noo_photo_tile.dart';
 
-/// Per-file activity feed — same list-item look as the account-wide
-/// Activity tab (activity_view.dart), scoped to a single item.
+/// Per-file activity feed - the same actor/verb/tail mapping and
+/// avatar-palette convention as the account-wide Activity tab
+/// (`activity_view.dart`), scoped to a single item.
 class DetailsActivityTab extends StatefulWidget {
   final NextcloudItem item;
 
@@ -36,107 +43,52 @@ class _DetailsActivityTabState extends State<DetailsActivityTab> {
       _requested = true;
       WidgetsBinding.instance.addPostFrameCallback((_) => _load());
     }
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
+    final session = context.watch<SessionController>();
 
     if (_isLoading) {
-      return const Center(child: CircularProgressIndicator());
+      return const Padding(
+        padding: EdgeInsets.symmetric(vertical: 32),
+        child: Center(child: CircularProgressIndicator()),
+      );
     }
     if (_activities.isEmpty) {
-      return Center(
-        child: Text(
-          'No recent activity',
-          style: theme.textTheme.titleMedium?.copyWith(
-            color: colorScheme.onSurfaceVariant,
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 32),
+        child: Center(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(LucideIcons.activity, size: 40, color: colors.fg3),
+              const SizedBox(height: NooSpace.sm),
+              Text(
+                'No recent activity',
+                style: NooText.cardTitle.copyWith(fontSize: 16, color: colors.fg2),
+              ),
+            ],
           ),
         ),
       );
     }
 
-    return ListView.builder(
-      padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
-      itemCount: _activities.length,
-      itemBuilder: (context, index) {
-        final act = _activities[index];
-        return Padding(
-          padding: const EdgeInsets.only(bottom: 12),
-          child: Container(
-            padding: const EdgeInsets.all(16),
-            decoration: BoxDecoration(
-              color: colorScheme.surfaceContainerLow,
-              borderRadius: BorderRadius.circular(20),
-              border: Border.all(
-                color: colorScheme.outlineVariant.withValues(alpha: 0.2),
-              ),
-            ),
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Container(
-                  padding: const EdgeInsets.all(10),
-                  decoration: BoxDecoration(
-                    color: colorScheme.primaryContainer,
-                    shape: BoxShape.circle,
-                  ),
-                  child: Icon(
-                    act.icon,
-                    color: colorScheme.onPrimaryContainer,
-                    size: 20,
-                  ),
-                ),
-                const SizedBox(width: 14),
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Expanded(
-                            child: Text(
-                              act.title,
-                              style: theme.textTheme.titleMedium?.copyWith(
-                                fontWeight: FontWeight.w600,
-                                fontSize: 14,
-                              ),
-                            ),
-                          ),
-                          const SizedBox(width: 8),
-                          Text(
-                            DateFormat.jm().format(act.timestamp),
-                            style: theme.textTheme.bodySmall?.copyWith(
-                              color: colorScheme.onSurfaceVariant,
-                              fontSize: 11,
-                            ),
-                          ),
-                        ],
-                      ),
-                      const SizedBox(height: 4),
-                      Text(
-                        act.subject,
-                        style: theme.textTheme.bodyMedium?.copyWith(
-                          color: colorScheme.onSurfaceVariant,
-                          fontSize: 13,
-                        ),
-                      ),
-                      const SizedBox(height: 6),
-                      Text(
-                        'By ${act.author} • ${DateFormat.MMMd().format(act.timestamp)}',
-                        style: theme.textTheme.bodySmall?.copyWith(
-                          color: colorScheme.primary,
-                          fontWeight: FontWeight.w500,
-                          fontSize: 11,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-              ],
+    return NooGroupedList(
+      children: [
+        for (final act in _activities)
+          ColoredBox(
+            color: colors.surface,
+            child: NooActivityItem(
+              actor: act.author,
+              verb: act.title,
+              tail: act.subject.isNotEmpty && act.subject != act.title
+                  ? act.subject
+                  : null,
+              time: DateFormat.yMMMd().add_jm().format(act.timestamp),
+              avatarColor: NooPhotoTile.paletteColor(act.author.hashCode),
+              currentUser:
+                  act.author.toLowerCase() == session.username.toLowerCase(),
             ),
           ),
-        );
-      },
+      ],
     );
   }
 }

lib/widgets/details/details_info_tab.dart

@@ -1,21 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import '../../models/nextcloud_item.dart';
+import '../../theme/design_tokens.dart';
+import '../noo/lists/noo_grouped_list.dart';
 import '../synced_header_scaffold.dart' show formatBytes;
 
-/// Plain metadata tab of the Details sheet — name, type, size, location,
-/// and dates. No network calls, so no loading state needed.
+/// Plain metadata list of the Details sheet/dialog - name, type, size,
+/// location, and dates. No network calls, so no loading state needed.
 class DetailsInfoTab extends StatelessWidget {
   final NextcloudItem item;
-  final ScrollController? scrollController;
 
-  const DetailsInfoTab({super.key, required this.item, this.scrollController});
+  const DetailsInfoTab({super.key, required this.item});
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-
     final rows = <(String, String)>[
       ('Name', item.name),
       ('Type', item.isFolder ? 'Folder' : (item.mimeType ?? 'File')),
@@ -26,39 +24,51 @@ class DetailsInfoTab extends StatelessWidget {
       ('Favorite', item.isFavorite ? 'Yes' : 'No'),
     ];
 
-    return ListView.separated(
-      controller: scrollController,
-      padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
-      itemCount: rows.length,
-      separatorBuilder: (context, index) => const Divider(height: 1),
-      itemBuilder: (context, index) {
-        final (label, value) = rows[index];
-        return Padding(
-          padding: const EdgeInsets.symmetric(vertical: 12),
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              SizedBox(
-                width: 96,
-                child: Text(
-                  label,
-                  style: theme.textTheme.bodyMedium?.copyWith(
-                    color: colorScheme.onSurfaceVariant,
-                  ),
-                ),
+    return NooGroupedList(
+      children: [for (final row in rows) _InfoRow(label: row.$1, value: row.$2)],
+    );
+  }
+}
+
+class _InfoRow extends StatelessWidget {
+  final String label;
+  final String value;
+
+  const _InfoRow({required this.label, required this.value});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return ColoredBox(
+      color: colors.surface,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: NooSpace.md,
+          vertical: NooSpace.sm,
+        ),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(
+              width: 96,
+              child: Text(
+                label,
+                style: NooText.body.copyWith(fontSize: 14, color: colors.fg3),
               ),
-              Expanded(
-                child: Text(
-                  value,
-                  style: theme.textTheme.bodyMedium?.copyWith(
-                    fontWeight: FontWeight.w500,
-                  ),
+            ),
+            Expanded(
+              child: Text(
+                value,
+                style: NooText.body.copyWith(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w500,
+                  color: colors.fg1,
                 ),
               ),
-            ],
-          ),
-        );
-      },
+            ),
+          ],
+        ),
+      ),
     );
   }
 }

lib/widgets/details/details_sheet.dart

@@ -1,160 +1,157 @@
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:path/path.dart' as p;
 import '../../models/nextcloud_item.dart';
-import '../gradual_bottom_sheet.dart';
+import '../../theme/design_tokens.dart';
+import '../noo/core/noo_segmented_control.dart';
+import '../noo/files/noo_file_kind.dart';
+import '../noo/files/noo_file_tile.dart';
+import '../noo/noo_layout.dart';
+import '../noo/overlays/noo_dialog.dart';
+import '../noo/overlays/noo_overlay_header.dart';
+import '../noo/overlays/noo_sheet.dart';
 import '../synced_header_scaffold.dart' show formatBytes;
 import 'details_activity_tab.dart';
 import 'details_info_tab.dart';
 import 'details_versions_tab.dart';
 
-IconData _detailsItemIcon(NextcloudItemType type) {
-  switch (type) {
-    case NextcloudItemType.folder:
-      return Icons.folder_rounded;
-    case NextcloudItemType.image:
-      return Icons.image_rounded;
-    case NextcloudItemType.video:
-      return Icons.movie_rounded;
-    case NextcloudItemType.audio:
-      return Icons.audiotrack_rounded;
-    case NextcloudItemType.document:
-      return Icons.description_rounded;
-    case NextcloudItemType.archive:
-      return Icons.folder_zip_rounded;
-    case NextcloudItemType.file:
-      return Icons.insert_drive_file_rounded;
-  }
+/// The file-type tile every per-item sheet/dialog opens on
+/// (`DESIGN_SYSTEM.md` §1.2/§4) - shared by [DetailsSheet] and [ShareSheet]
+/// so both overlays for the same item use the same header tile.
+Widget detailsFileTile(
+  NextcloudItem item, {
+  NooFileTileSize size = NooFileTileSize.header,
+}) {
+  return NooFileTile(
+    kind: NooFileKind.from(
+      name: item.name,
+      mimeType: item.mimeType,
+      isDirectory: item.isFolder,
+    ),
+    size: size,
+  );
 }
 
-/// Reusable "Details" bottom sheet for a single file/folder — Info,
-/// Versions, and Activity tabs. Sharing lives in its own sheet
-/// ([ShareSheet]), triggered separately from wherever a "Share" action
-/// appears. Triggered from long-press selection (exactly one item), the
-/// media viewer's action bar, and the "open externally" flow for
-/// unsupported file types.
+/// The header's meta subtitle - "12.3 KB · Documents" for a file, "Folder"
+/// for a folder (`DESIGN_SYSTEM.md` §4: "size · folder").
+String detailsMetaLine(NextcloudItem item) {
+  if (item.isFolder) return 'Folder';
+  final parent = p.basename(p.dirname(item.path));
+  final location = parent.isEmpty || parent == '.' || parent == '/'
+      ? 'Home'
+      : parent;
+  return '${formatBytes(item.size)} · $location';
+}
+
+enum _DetailsTab { info, versions, activity }
+
+/// Reusable "Details" bottom sheet/dialog for a single file/folder - Info,
+/// Versions and Activity switched by a segmented control (there's no
+/// tab-strip component in the noo kit, so this is the closest fit - see the
+/// rebuild report). Sharing lives in its own sheet ([ShareSheet]), triggered
+/// separately from wherever a "Share" action appears. Triggered from
+/// long-press selection (exactly one item), the media viewer's action bar,
+/// and the "open externally" flow for unsupported file types.
+///
+/// Only used directly on mobile (bundles its own [NooOverlayHeader]); the
+/// desktop path in [show] passes [_DetailsBody] straight to [showNooDialog],
+/// which renders the header itself via `leading`/`title`/`subtitle`.
 class DetailsSheet extends StatelessWidget {
   final NextcloudItem item;
 
   const DetailsSheet({super.key, required this.item});
 
   static Future<void> show(BuildContext context, NextcloudItem item) {
-    return showGradualBottomSheet(
-      context,
-      builder: (context, scrollController) => DetailsSheet(item: item),
-    );
+    if (NooLayout.isDesktop(context)) {
+      return showNooDialog(
+        context,
+        leading: detailsFileTile(item),
+        title: item.name,
+        subtitle: detailsMetaLine(item),
+        children: [_DetailsBody(item: item)],
+      );
+    }
+    return showNooSheet(context, children: [DetailsSheet(item: item)]);
   }
 
   @override
   Widget build(BuildContext context) {
-    return DefaultTabController(
-      length: 3,
-      child: Column(
-        children: [
-          DetailsHeader(item: item),
-          // Icon size matches the bottom nav bar's own tab icons
-          // (FloatingBottomNavBar) rather than TabBar's oversized default,
-          // so a "tabs" affordance reads the same size everywhere in the
-          // app.
-          const TabBar(
-            tabs: [
-              Tab(
-                icon: Icon(Icons.info_outline_rounded, size: 22),
-                text: 'Info',
-              ),
-              Tab(
-                icon: Icon(Icons.history_rounded, size: 22),
-                text: 'Versions',
-              ),
-              Tab(
-                icon: Icon(Icons.electric_bolt_rounded, size: 22),
-                text: 'Activity',
-              ),
-            ],
-          ),
-          Expanded(
-            child: TabBarView(
-              children: [
-                DetailsInfoTab(item: item),
-                DetailsVersionsTab(item: item),
-                DetailsActivityTab(item: item),
-              ],
-            ),
-          ),
-        ],
-      ),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        NooOverlayHeader(
+          leading: detailsFileTile(item),
+          title: item.name,
+          subtitle: detailsMetaLine(item),
+          onClose: () => Navigator.pop(context),
+        ),
+        const SizedBox(height: NooSpace.lg),
+        _DetailsBody(item: item),
+      ],
     );
   }
 }
 
-/// Icon/name/size/date row shared by [DetailsSheet], the media viewer's
-/// collapsed "peek" state (which shows just this, before the user drags the
-/// sheet open far enough to reveal the tabs), and [ShareSheet]'s own title
-/// (so every per-item bottom sheet opens on the same header instead of
-/// [ShareSheet] alone using a bare title `Text`).
-class DetailsHeader extends StatelessWidget {
+/// The segmented control plus whichever tab's content it selects. A private
+/// [StatefulWidget] rather than three fields on [DetailsSheet] so the
+/// selection survives independently of how the header/container around it
+/// is built (mobile embeds this once, desktop hands it to [showNooDialog]
+/// directly). All three tabs are built once and kept mounted in an
+/// [IndexedStack] rather than swapped in/out of the tree - Versions and
+/// Activity each fetch on their own first build (see their `_requested`
+/// guard), so switching tabs via a bare `switch` on the selected type would
+/// tear down and rebuild whichever tab isn't showing, discarding its
+/// fetched data and re-requesting it every time the user switched back.
+class _DetailsBody extends StatefulWidget {
   final NextcloudItem item;
 
-  /// Defaults to this widget's own standalone inset ([DetailsSheet]); a
-  /// caller whose surrounding scroll view already applies horizontal
-  /// padding (e.g. [ShareSheet]'s `ListView`) should pass a padding with
-  /// zero left/right to avoid doubling it up.
-  final EdgeInsetsGeometry padding;
+  const _DetailsBody({required this.item});
 
-  const DetailsHeader({
-    super.key,
-    required this.item,
-    this.padding = const EdgeInsets.fromLTRB(20, 12, 20, 8),
-  });
+  @override
+  State<_DetailsBody> createState() => _DetailsBodyState();
+}
+
+class _DetailsBodyState extends State<_DetailsBody> {
+  _DetailsTab _tab = _DetailsTab.info;
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
-
-    return Padding(
-      padding: padding,
-      child: Row(
-        children: [
-          Container(
-            width: 44,
-            height: 44,
-            decoration: BoxDecoration(
-              color: colorScheme.primaryContainer,
-              borderRadius: BorderRadius.circular(12),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        NooSegmentedControl<_DetailsTab>(
+          onSurface: true,
+          fill: true,
+          value: _tab,
+          onChanged: (tab) => setState(() => _tab = tab),
+          options: const [
+            NooSegmentOption(
+              value: _DetailsTab.info,
+              icon: LucideIcons.info,
+              label: 'Info',
             ),
-            child: Icon(
-              _detailsItemIcon(item.type),
-              color: colorScheme.onPrimaryContainer,
-              size: 22,
+            NooSegmentOption(
+              value: _DetailsTab.versions,
+              icon: LucideIcons.history,
+              label: 'Versions',
             ),
-          ),
-          const SizedBox(width: 14),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  item.name,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                const SizedBox(height: 2),
-                Text(
-                  item.isFolder
-                      ? DateFormat.yMMMd().format(item.lastModified)
-                      : '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
-                  style: theme.textTheme.bodySmall?.copyWith(
-                    color: colorScheme.onSurfaceVariant,
-                  ),
-                ),
-              ],
+            NooSegmentOption(
+              value: _DetailsTab.activity,
+              icon: LucideIcons.activity,
+              label: 'Activity',
             ),
-          ),
-        ],
-      ),
+          ],
+        ),
+        const SizedBox(height: NooSpace.lg),
+        IndexedStack(
+          index: _tab.index,
+          children: [
+            DetailsInfoTab(item: widget.item),
+            DetailsVersionsTab(item: widget.item),
+            DetailsActivityTab(item: widget.item),
+          ],
+        ),
+      ],
     );
   }
 }

lib/widgets/details/details_versions_tab.dart

@@ -1,15 +1,20 @@
 import 'package:file_saver/file_saver.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:path/path.dart' as p;
 import 'package:path_provider/path_provider.dart';
 import 'package:provider/provider.dart';
 import '../../models/nextcloud_file_version.dart';
 import '../../models/nextcloud_item.dart';
 import '../../providers/item_operations.dart';
+import '../../theme/design_tokens.dart';
+import '../noo/files/noo_file_kind.dart';
+import '../noo/files/noo_file_tile.dart';
+import '../noo/lists/noo_grouped_list.dart';
 import '../synced_header_scaffold.dart' show formatBytes;
 
-/// File version history — a synthetic "Current version" row (from the
+/// File version history - a synthetic "Current version" row (from the
 /// item's own metadata) followed by whatever the DAV versions endpoint
 /// returns, each with Restore/Download actions.
 class DetailsVersionsTab extends StatefulWidget {
@@ -75,7 +80,7 @@ class _DetailsVersionsTabState extends State<DetailsVersionsTab> {
       await FileSaver.instance.saveFile(
         name: baseName,
         filePath: tempPath,
-        ext: ext,
+        fileExtension: ext,
       );
       if (!mounted) return;
       messenger.showSnackBar(
@@ -101,11 +106,12 @@ class _DetailsVersionsTabState extends State<DetailsVersionsTab> {
       _requested = true;
       WidgetsBinding.instance.addPostFrameCallback((_) => _load());
     }
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
 
     if (_isLoading) {
-      return const Center(child: CircularProgressIndicator());
+      return const Padding(
+        padding: EdgeInsets.symmetric(vertical: 32),
+        child: Center(child: CircularProgressIndicator()),
+      );
     }
 
     final items = [
@@ -117,44 +123,126 @@ class _DetailsVersionsTabState extends State<DetailsVersionsTab> {
       ),
       ..._versions,
     ];
+    final kind = NooFileKind.from(
+      name: widget.item.name,
+      mimeType: widget.item.mimeType,
+      isDirectory: false,
+    );
 
-    return ListView.separated(
-      padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
-      itemCount: items.length,
-      separatorBuilder: (context, index) => const SizedBox(height: 4),
-      itemBuilder: (context, index) {
-        final version = items[index];
-        return ListTile(
-          contentPadding: EdgeInsets.zero,
-          leading: CircleAvatar(
-            backgroundColor: colorScheme.primaryContainer,
-            child: Icon(
-              Icons.history_rounded,
-              color: colorScheme.onPrimaryContainer,
-              size: 20,
-            ),
+    return NooGroupedList(
+      children: [
+        for (final version in items)
+          _VersionRow(
+            kind: kind,
+            version: version,
+            onRestore: () => _restore(version),
+            onDownload: () => _download(version),
           ),
-          title: Text(
-            version.isCurrent
-                ? 'Current version'
-                : DateFormat.yMMMd().add_jm().format(version.timestamp),
-          ),
-          subtitle: Text(
-            '${DateFormat.yMMMd().format(version.timestamp)} • ${formatBytes(version.size)}',
-          ),
-          trailing: version.isCurrent
-              ? null
-              : PopupMenuButton<String>(
-                  onSelected: (value) => value == 'restore'
-                      ? _restore(version)
-                      : _download(version),
-                  itemBuilder: (context) => const [
-                    PopupMenuItem(value: 'restore', child: Text('Restore')),
-                    PopupMenuItem(value: 'download', child: Text('Download')),
-                  ],
-                ),
-        );
-      },
+      ],
+    );
+  }
+}
+
+class _VersionRow extends StatelessWidget {
+  final NooFileKind kind;
+  final NextcloudFileVersion version;
+  final VoidCallback onRestore;
+  final VoidCallback onDownload;
+
+  const _VersionRow({
+    required this.kind,
+    required this.version,
+    required this.onRestore,
+    required this.onDownload,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return ColoredBox(
+      color: colors.surface,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: NooSpace.md,
+          vertical: NooSpace.sm,
+        ),
+        child: Row(
+          children: [
+            NooFileTile(kind: kind, size: NooFileTileSize.activity),
+            const SizedBox(width: NooSpace.sm),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    version.isCurrent
+                        ? 'Current version'
+                        : DateFormat.yMMMd().add_jm().format(version.timestamp),
+                    style: NooText.bodyL.copyWith(
+                      fontWeight: FontWeight.w500,
+                      color: colors.fg1,
+                    ),
+                  ),
+                  const SizedBox(height: 2),
+                  Text(
+                    '${formatBytes(version.size)} · ${DateFormat.yMMMd().format(version.timestamp)}',
+                    style: NooText.meta.copyWith(color: colors.fg3),
+                  ),
+                ],
+              ),
+            ),
+            if (!version.isCurrent) ...[
+              const SizedBox(width: NooSpace.xs),
+              _RowIconButton(
+                icon: LucideIcons.rotateCcw,
+                tooltip: 'Restore',
+                onTap: onRestore,
+              ),
+              const SizedBox(width: NooSpace.xxs),
+              _RowIconButton(
+                icon: LucideIcons.download,
+                tooltip: 'Download',
+                onTap: onDownload,
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// A small round icon button matching [NooCloseButton]'s visual language
+/// (surface-2 circle) but for an arbitrary action - promote this to `noo/`
+/// if another row-level icon action needs the same treatment.
+class _RowIconButton extends StatelessWidget {
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback onTap;
+
+  const _RowIconButton({
+    required this.icon,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Tooltip(
+      message: tooltip,
+      child: GestureDetector(
+        behavior: HitTestBehavior.opaque,
+        onTap: onTap,
+        child: Container(
+          width: 32,
+          height: 32,
+          alignment: Alignment.center,
+          decoration: BoxDecoration(color: colors.surface2, shape: BoxShape.circle),
+          child: Icon(icon, size: 16, color: colors.fg2),
+        ),
+      ),
     );
   }
 }

lib/widgets/files/file_breadcrumb_row.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../theme/design_tokens.dart';
+
+/// A noo-styled "Home / Folder / Sub-folder" trail for the Files/Offline
+/// tabs - a private restyle of the shared `Breadcrumbs` widget (which other
+/// screens still use in its old Material look), so this screen's crumbs use
+/// noo tokens without touching that shared file. Same behaviour: every
+/// crumb but the last is tappable, jumping back to that depth.
+class FileBreadcrumbRow extends StatelessWidget {
+  final List<String> pathStack;
+  final ValueChanged<int> onTap;
+
+  const FileBreadcrumbRow({
+    super.key,
+    required this.pathStack,
+    required this.onTap,
+  });
+
+  String _labelFor(int index) {
+    if (index == 0) return 'Home';
+    final segments = pathStack[index]
+        .split('/')
+        .where((s) => s.isNotEmpty)
+        .toList();
+    return segments.isEmpty ? 'Home' : segments.last;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final lastIndex = pathStack.length - 1;
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: [
+          for (var i = 0; i < pathStack.length; i++) ...[
+            if (i > 0)
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 2),
+                child: Icon(
+                  LucideIcons.chevronRight,
+                  size: 14,
+                  color: colors.fg3,
+                ),
+              ),
+            if (i == lastIndex)
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 6),
+                child: Text(
+                  _labelFor(i),
+                  style: NooText.body.copyWith(
+                    fontSize: 13,
+                    fontWeight: FontWeight.w600,
+                    color: colors.fg1,
+                  ),
+                ),
+              )
+            else
+              // The whole pill is the tap target, not just the text.
+              InkWell(
+                onTap: () => onTap(i),
+                borderRadius: BorderRadius.circular(NooRadii.pill),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 8,
+                    vertical: 4,
+                  ),
+                  child: Text(
+                    _labelFor(i),
+                    style: NooText.body.copyWith(
+                      fontSize: 13,
+                      fontWeight: FontWeight.w600,
+                      color: colors.accentText,
+                    ),
+                  ),
+                ),
+              ),
+          ],
+        ],
+      ),
+    );
+  }
+}

lib/widgets/files_controls_row.dart

@@ -1,136 +1,228 @@
 import 'package:flutter/material.dart';
-import 'package:material_symbols_icons/symbols.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import '../providers/files_controller.dart';
-import 'segmented_icon_toggle.dart';
-import 'sort_menu_button.dart';
+import '../theme/design_tokens.dart';
+import 'noo/core/noo_chip.dart';
+import 'noo/core/noo_segmented_control.dart';
+import 'noo/core/noo_toggle.dart';
+import 'noo/lists/noo_grouped_list.dart';
+import 'noo/lists/noo_settings_row.dart';
+import 'noo/overlays/noo_sheet.dart';
+import 'sort_menu_button.dart' show sortFieldLabel;
 
-/// The Files tab's sort/hidden/scope/type-filter/view-mode controls row,
-/// shared with the Offline tab so both read and write the exact same
-/// [FilesController] prefs. [folderPath] picks which folder's sort applies
-/// (the Files tab's current folder, or the folder being browsed offline).
-/// [showStorageScope] is off for Offline - a local mirror has no
-/// cloud/external distinction.
+String _typeFilterLabel(FilesTypeFilter filter) {
+  switch (filter) {
+    case FilesTypeFilter.all:
+      return 'Filters';
+    case FilesTypeFilter.filesOnly:
+      return 'Files only';
+    case FilesTypeFilter.foldersOnly:
+      return 'Folders only';
+  }
+}
+
+/// The Files tab's sort/filter/view-mode row (Noo Design System project's
+/// Files screen: a sort chip, a filter chip, a spacer, then the list/grid
+/// segmented toggle) - shared with the Offline tab, which reads and writes
+/// the exact same [FilesController] prefs. [folderPath] picks which
+/// folder's sort applies. [showStorageScope] is off for Offline - a local
+/// mirror has no cloud/external distinction.
+///
+/// Hidden-files and storage-scope, which have no home in the mockup's
+/// simple two-chip row, live inside the filter chip's sheet instead of as
+/// their own row controls.
+///
+/// A plain `Row`, not a horizontally-scrolling one - it used to wrap in a
+/// `SingleChildScrollView`, which gives its child unbounded width, silently
+/// breaking the trailing `Spacer` (a flex child needs a bounded width to
+/// size against) and leaving the List/Grid toggle sitting right after the
+/// filter chip instead of pinned to the row's right edge. The two chips
+/// plus an icon-only toggle never come close to needing to scroll anyway.
 class FilesControlsRow extends StatelessWidget {
   final String folderPath;
   final bool showStorageScope;
-  final ScrollController? scrollController;
 
   const FilesControlsRow({
     super.key,
     required this.folderPath,
     this.showStorageScope = true,
-    this.scrollController,
   });
 
   @override
   Widget build(BuildContext context) {
     final files = context.watch<FilesController>();
+    final filtersActive =
+        files.filesTypeFilter != FilesTypeFilter.all ||
+        files.showHiddenFiles ||
+        (showStorageScope && files.storageScope != StorageScope.cloud);
 
     return SizedBox(
       height: 44,
-      child: SingleChildScrollView(
-        controller: scrollController,
-        scrollDirection: Axis.horizontal,
-        child: Row(
-          children: [
-            IconButton(
-              icon: Icon(
-                files.sortAscendingFor(folderPath)
-                    ? Icons.arrow_upward_rounded
-                    : Icons.arrow_downward_rounded,
-                size: 20,
-              ),
-              visualDensity: VisualDensity.compact,
-              tooltip: files.sortAscendingFor(folderPath)
-                  ? 'Ascending'
-                  : 'Descending',
-              onPressed: () => files.toggleSortOrderFor(folderPath),
-            ),
-            // A plain width, not Expanded - this row scrolls horizontally,
-            // which gives every control unbounded width to lay out in, so a
-            // flex child would throw.
-            SizedBox(
-              width: 130,
-              child: SortMenuButton(
-                field: files.sortFieldFor(folderPath),
-                onChanged: (field) => files.setSortFieldFor(folderPath, field),
-              ),
-            ),
-            ToggleIconButton(
-              icon: files.showHiddenFiles
-                  ? Icons.visibility_rounded
-                  : Icons.visibility_off_rounded,
-              isSelected: files.showHiddenFiles,
-              onTap: () => files.toggleShowHiddenFiles(),
-              tooltip: 'Show hidden files',
-            ),
-            const SizedBox(width: 4),
-            if (showStorageScope) ...[
-              SegmentedIconGroup(
-                children: [
-                  ToggleIconButton(
-                    icon: Symbols.circles_rounded,
-                    isSelected: files.storageScope == StorageScope.cloud,
-                    onTap: () => files.setStorageScope(StorageScope.cloud),
-                    tooltip: 'Cloud storage',
-                  ),
-                  ToggleIconButton(
-                    icon: Symbols.hard_drive_rounded,
-                    isSelected: files.storageScope == StorageScope.external,
-                    onTap: () => files.setStorageScope(StorageScope.external),
-                    tooltip: 'External storage',
-                  ),
-                ],
-              ),
-              const SizedBox(width: 8),
+      child: Row(
+        children: [
+          NooChip(
+            icon: files.sortAscendingFor(folderPath)
+                ? LucideIcons.arrowUp
+                : LucideIcons.arrowDown,
+            onTap: () => _showSortSheet(context, files),
+            child: Text(sortFieldLabel(files.sortFieldFor(folderPath))),
+          ),
+          const SizedBox(width: 8),
+          NooChip(
+            icon: LucideIcons.filter,
+            trailing: NooChipTrailing.menu,
+            selected: filtersActive,
+            onTap: () => _showFilterSheet(context, files),
+            child: Text(_typeFilterLabel(files.filesTypeFilter)),
+          ),
+          const Spacer(),
+          NooSegmentedControl<bool>(
+            iconOnly: true,
+            value: files.isGridView,
+            onChanged: files.setGridView,
+            options: const [
+              NooSegmentOption(value: false, icon: LucideIcons.list),
+              NooSegmentOption(value: true, icon: LucideIcons.grid),
             ],
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Icons.select_all_rounded,
-                  isSelected: files.filesTypeFilter == FilesTypeFilter.all,
-                  onTap: () => files.setFilesTypeFilter(FilesTypeFilter.all),
-                  tooltip: 'Files & folders',
-                ),
-                ToggleIconButton(
-                  icon: Icons.insert_drive_file_outlined,
-                  isSelected:
-                      files.filesTypeFilter == FilesTypeFilter.filesOnly,
-                  onTap: () =>
-                      files.setFilesTypeFilter(FilesTypeFilter.filesOnly),
-                  tooltip: 'Files only',
-                ),
-                ToggleIconButton(
-                  icon: Icons.folder_outlined,
-                  isSelected:
-                      files.filesTypeFilter == FilesTypeFilter.foldersOnly,
-                  onTap: () =>
-                      files.setFilesTypeFilter(FilesTypeFilter.foldersOnly),
-                  tooltip: 'Folders only',
-                ),
-              ],
-            ),
-            const SizedBox(width: 8),
-            SegmentedIconGroup(
-              children: [
-                ToggleIconButton(
-                  icon: Icons.view_list_rounded,
-                  isSelected: !files.isGridView,
-                  onTap: () => files.setGridView(false),
-                  tooltip: 'List view',
-                ),
-                ToggleIconButton(
-                  icon: Icons.grid_view_rounded,
-                  isSelected: files.isGridView,
-                  onTap: () => files.setGridView(true),
-                  tooltip: 'Grid view',
-                ),
-              ],
-            ),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }
+
+  void _showSortSheet(BuildContext context, FilesController files) {
+    showNooSheet(
+      context,
+      children: [
+        // `showNooSheet`'s `children` are built once, up front - a bare
+        // checkmark/value here would freeze at whatever it was when the
+        // sheet opened, since tapping a row calls `files.set...` and
+        // notifies the controller, not this already-built widget tree.
+        // `ListenableBuilder` re-runs its `builder` on every
+        // `FilesController.notifyListeners()` instead, so the selection
+        // updates live - see the identical fix in `_showFilterSheet`.
+        ListenableBuilder(
+          listenable: files,
+          builder: (context, _) => Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              NooSegmentedControl<bool>(
+                fill: true,
+                onSurface: true,
+                value: files.sortAscendingFor(folderPath),
+                onChanged: (asc) {
+                  if (asc != files.sortAscendingFor(folderPath)) {
+                    files.toggleSortOrderFor(folderPath);
+                  }
+                },
+                options: const [
+                  NooSegmentOption(
+                    value: true,
+                    icon: LucideIcons.arrowUp,
+                    label: 'Ascending',
+                  ),
+                  NooSegmentOption(
+                    value: false,
+                    icon: LucideIcons.arrowDown,
+                    label: 'Descending',
+                  ),
+                ],
+              ),
+              const SizedBox(height: 22),
+              NooGroupedList(
+                children: [
+                  for (final field in FileSortField.values)
+                    NooSettingsRow(
+                      label: Text(sortFieldLabel(field)),
+                      trailing: field == files.sortFieldFor(folderPath)
+                          ? Icon(
+                              LucideIcons.check,
+                              size: 18,
+                              color: context.nooColors.accentText,
+                            )
+                          : null,
+                      onTap: () {
+                        files.setSortFieldFor(folderPath, field);
+                        Navigator.pop(context);
+                      },
+                    ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _showFilterSheet(BuildContext context, FilesController files) {
+    showNooSheet(
+      context,
+      children: [
+        // See `_showSortSheet`'s comment: without this, neither the type
+        // filter's selected segment nor the toggles below would move until
+        // the sheet is closed and reopened.
+        ListenableBuilder(
+          listenable: files,
+          builder: (context, _) => Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              // Same "icon always, label only when selected" pill as
+              // Photos' own type filter below - not a checkmark list, so
+              // the two screens' filter sheets look and behave the same.
+              NooSegmentedControl<FilesTypeFilter>(
+                fill: true,
+                onSurface: true,
+                labelOnlySelected: true,
+                value: files.filesTypeFilter,
+                onChanged: files.setFilesTypeFilter,
+                options: const [
+                  NooSegmentOption(
+                    value: FilesTypeFilter.all,
+                    icon: LucideIcons.layoutGrid,
+                    label: 'All',
+                  ),
+                  NooSegmentOption(
+                    value: FilesTypeFilter.filesOnly,
+                    icon: LucideIcons.file,
+                    label: 'Files',
+                  ),
+                  NooSegmentOption(
+                    value: FilesTypeFilter.foldersOnly,
+                    icon: LucideIcons.folder,
+                    label: 'Folders',
+                  ),
+                ],
+              ),
+              const SizedBox(height: 22),
+              NooGroupedList(
+                children: [
+                  NooSettingsRow(
+                    icon: LucideIcons.eye,
+                    label: const Text('Show hidden files'),
+                    trailing: NooToggle(
+                      checked: files.showHiddenFiles,
+                      onChanged: (_) => files.toggleShowHiddenFiles(),
+                    ),
+                  ),
+                  if (showStorageScope)
+                    NooSettingsRow(
+                      icon: LucideIcons.hardDrive,
+                      label: const Text('External storage'),
+                      trailing: NooToggle(
+                        checked: files.storageScope == StorageScope.external,
+                        onChanged: (external) => files.setStorageScope(
+                          external ? StorageScope.external : StorageScope.cloud,
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
 }

lib/widgets/floating_bottom_bar.dart

@@ -1,151 +0,0 @@
-import 'package:flutter/material.dart';
-import 'frosted_glass_container.dart';
-
-class FloatingNavItem {
-  final String label;
-  final IconData icon;
-
-  const FloatingNavItem({required this.label, required this.icon});
-}
-
-/// A floating pill-shaped bottom navigation bar in the style of Google
-/// Photos' 2026 redesign: unselected destinations collapse to just their
-/// icon, the selected destination expands into an icon+label capsule, and
-/// a detached circular action (search) sits just outside the pill.
-class FloatingBottomNavBar extends StatelessWidget {
-  final int selectedIndex;
-  final ValueChanged<int> onDestinationSelected;
-  final List<FloatingNavItem> items;
-  final VoidCallback? onSearchTap;
-  final double opacity;
-  final double blurSigma;
-
-  const FloatingBottomNavBar({
-    super.key,
-    required this.selectedIndex,
-    required this.onDestinationSelected,
-    required this.items,
-    this.onSearchTap,
-    this.opacity = 0.55,
-    this.blurSigma = 28,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return SafeArea(
-      child: Align(
-        alignment: Alignment.bottomCenter,
-        child: Padding(
-          padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
-          child: ConstrainedBox(
-            constraints: const BoxConstraints(maxWidth: 480),
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                _buildPill(context, colorScheme),
-                const SizedBox(width: 10),
-                _buildSearchButton(context, colorScheme),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _buildPill(BuildContext context, ColorScheme colorScheme) {
-    return FrostedGlassContainer(
-      opacity: opacity,
-      blurSigma: blurSigma,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6),
-        // The selected item's label expands the pill, and with enough
-        // tabs visible that can outgrow the available width (the
-        // ConstrainedBox above caps it at 480, but the screen itself may
-        // be narrower) - wrapped in a scroll view rather than a plain Row
-        // so it degrades to a swipe instead of overflowing/clipping.
-        child: SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          physics: const BouncingScrollPhysics(),
-          child: Row(
-            mainAxisSize: MainAxisSize.min,
-            children: List.generate(items.length, (index) {
-              final item = items[index];
-              final isSelected = selectedIndex == index;
-
-              return InkWell(
-                onTap: () => onDestinationSelected(index),
-                borderRadius: BorderRadius.circular(26),
-                splashColor: colorScheme.primary.withValues(alpha: 0.12),
-                highlightColor: Colors.transparent,
-                child: AnimatedContainer(
-                  duration: const Duration(milliseconds: 250),
-                  curve: Curves.easeInOutCubic,
-                  padding: EdgeInsets.symmetric(
-                    horizontal: isSelected ? 16 : 12,
-                    vertical: 12,
-                  ),
-                  decoration: BoxDecoration(
-                    color: isSelected
-                        ? colorScheme.primary
-                        : Colors.transparent,
-                    borderRadius: BorderRadius.circular(26),
-                  ),
-                  child: Row(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Icon(
-                        item.icon,
-                        size: 22,
-                        color: isSelected
-                            ? colorScheme.onPrimary
-                            : colorScheme.onSurfaceVariant,
-                      ),
-                      if (isSelected) ...[
-                        const SizedBox(width: 8),
-                        Text(
-                          item.label,
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                          style: TextStyle(
-                            fontSize: 13,
-                            fontWeight: FontWeight.w700,
-                            color: colorScheme.onPrimary,
-                            letterSpacing: 0.1,
-                          ),
-                        ),
-                      ],
-                    ],
-                  ),
-                ),
-              );
-            }),
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _buildSearchButton(BuildContext context, ColorScheme colorScheme) {
-    return FrostedGlassContainer(
-      opacity: opacity,
-      blurSigma: blurSigma,
-      child: SizedBox(
-        width: 52,
-        height: 52,
-        child: InkWell(
-          onTap: onSearchTap,
-          borderRadius: BorderRadius.circular(32),
-          splashColor: colorScheme.primary.withValues(alpha: 0.12),
-          child: Icon(
-            Icons.search_rounded,
-            color: colorScheme.onSurfaceVariant,
-            size: 24,
-          ),
-        ),
-      ),
-    );
-  }
-}

lib/widgets/frosted_glass_container.dart

@@ -1,9 +1,18 @@
 import 'dart:ui';
 import 'package:flutter/material.dart';
+import '../theme/design_tokens.dart';
 
-/// The frosted-glass pill background shared by all floating chrome in the
-/// app (bottom nav bar, media viewer action bar): blurred backdrop, a
-/// translucent tonal fill, a faint outline, and a soft drop shadow.
+/// The blurred/translucent chrome for the media viewer's overlay bars
+/// (`file_viewer_screen.dart`'s top bar, `MediaActionBar`, the video
+/// transport row) - the one deliberate exception to the design system's
+/// flat, no-shadow product UI (DESIGN_SYSTEM.md 1.4), since this chrome
+/// floats over photo/video content rather than over the app's own
+/// surfaces. No shadow, no outline: [color] defaults to the app's own
+/// `surface` token (so this panel reads as light or dark to match the
+/// active theme, like the rest of the media viewer, instead of a fixed
+/// dark tone regardless of theme) at a higher-than-usual [opacity], since
+/// a light tint needs denser coverage than a near-black one did to stay
+/// legible over arbitrary photo/video brightness underneath.
 class FrostedGlassContainer extends StatelessWidget {
   final Widget child;
   final double borderRadius;
@@ -17,39 +26,31 @@ class FrostedGlassContainer extends StatelessWidget {
   /// adjustable.
   final double opacity;
 
+  /// The tint under the blur. Defaults to [NooColors.surface] (resolved at
+  /// build time, so it always matches the active theme) - pass an explicit
+  /// color only to override that, e.g. for a fixed-color panel elsewhere.
+  final Color? color;
+
   const FrostedGlassContainer({
     super.key,
     required this.child,
-    this.borderRadius = 32,
-    this.blurSigma = 28,
-    this.opacity = 0.55,
+    this.borderRadius = 0,
+    this.blurSigma = 20,
+    this.opacity = 0.8,
+    this.color,
   });
 
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-
+    final tint = color ?? context.nooColors.surface;
     return ClipRRect(
       borderRadius: BorderRadius.circular(borderRadius),
       child: BackdropFilter(
         filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
         child: Container(
           decoration: BoxDecoration(
-            color: colorScheme.surfaceContainerHighest.withValues(
-              alpha: opacity,
-            ),
+            color: tint.withValues(alpha: opacity),
             borderRadius: BorderRadius.circular(borderRadius),
-            border: Border.all(
-              color: colorScheme.outlineVariant.withValues(alpha: 0.35),
-              width: 1,
-            ),
-            boxShadow: [
-              BoxShadow(
-                color: Colors.black.withValues(alpha: 0.14),
-                blurRadius: 24,
-                offset: const Offset(0, 8),
-              ),
-            ],
           ),
           child: child,
         ),

lib/widgets/item_icon.dart

@@ -1,48 +1,73 @@
 import 'dart:io';
 import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import '../models/nextcloud_item.dart';
 import '../services/nextcloud_service.dart';
+import '../theme/design_tokens.dart';
 
 /// The icon/color/thumbnail treatment for a file or folder, shared by any
 /// screen that lists [NextcloudItem]s the same way the Files tab does (see
 /// `files_view.dart`, and `share_upload_view.dart`'s destination picker).
+/// Matches DESIGN_SYSTEM.md 1.2's file-type tile table (`KIND`) - a pdf is
+/// its own kind there (distinct from a generic document), which is why
+/// these take the whole [NextcloudItem] rather than just its
+/// [NextcloudItemType]: the type alone can't tell a pdf from any other
+/// document.
+bool _isPdf(NextcloudItem item) => item.name.toLowerCase().endsWith('.pdf');
 
-IconData getItemIcon(NextcloudItemType type) {
-  switch (type) {
+IconData getItemIcon(NextcloudItem item) {
+  switch (item.type) {
     case NextcloudItemType.folder:
-      return Icons.folder_rounded;
+      return LucideIcons.folder;
     case NextcloudItemType.image:
-      return Icons.image_rounded;
+      return LucideIcons.image;
     case NextcloudItemType.video:
-      return Icons.movie_rounded;
-    case NextcloudItemType.audio:
-      return Icons.audiotrack_rounded;
+      return LucideIcons.film;
     case NextcloudItemType.document:
-      return Icons.description_rounded;
+      return LucideIcons.fileText;
     case NextcloudItemType.archive:
-      return Icons.folder_zip_rounded;
+      return LucideIcons.fileArchive;
+    case NextcloudItemType.audio:
     case NextcloudItemType.file:
-      return Icons.insert_drive_file_rounded;
+      return LucideIcons.file;
   }
 }
 
-Color getIconColor(BuildContext context, NextcloudItemType type) {
-  final colorScheme = Theme.of(context).colorScheme;
-  switch (type) {
+Color getIconColor(BuildContext context, NextcloudItem item) {
+  final colors = context.nooColors;
+  switch (item.type) {
     case NextcloudItemType.folder:
-      return colorScheme.primary;
-    case NextcloudItemType.image:
-      return Colors.amber.shade700;
-    case NextcloudItemType.video:
-      return Colors.deepOrange.shade600;
-    case NextcloudItemType.audio:
-      return Colors.purple.shade600;
+      return colors.accentText;
     case NextcloudItemType.document:
-      return Colors.blue.shade700;
+      return _isPdf(item) ? colors.danger : colors.info;
+    case NextcloudItemType.image:
+      return colors.info;
+    case NextcloudItemType.video:
+      return colors.warning;
     case NextcloudItemType.archive:
-      return Colors.teal.shade700;
+    case NextcloudItemType.audio:
     case NextcloudItemType.file:
-      return colorScheme.outline;
+      return colors.fg2;
+  }
+}
+
+/// The tile's background (the soft-tinted square/circle behind the icon) -
+/// the other half of the [getIconColor] pair every call site pairs it with.
+Color getIconBackground(BuildContext context, NextcloudItem item) {
+  final colors = context.nooColors;
+  switch (item.type) {
+    case NextcloudItemType.folder:
+      return colors.accentSoft;
+    case NextcloudItemType.document:
+      return _isPdf(item) ? colors.dangerSoft : colors.infoSoft;
+    case NextcloudItemType.image:
+      return colors.infoSoft;
+    case NextcloudItemType.video:
+      return colors.warningSoft;
+    case NextcloudItemType.archive:
+    case NextcloudItemType.audio:
+    case NextcloudItemType.file:
+      return colors.surface3;
   }
 }
 
@@ -74,7 +99,7 @@ class ItemThumbnail extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final iconColor = getIconColor(context, item.type);
+    final iconColor = getIconColor(context, item);
     final isMedia =
         item.type == NextcloudItemType.image ||
         item.type == NextcloudItemType.video;
@@ -91,7 +116,7 @@ class ItemThumbnail extends StatelessWidget {
       height: size,
       clipBehavior: Clip.antiAlias,
       decoration: BoxDecoration(
-        color: iconColor.withValues(alpha: 0.12),
+        color: getIconBackground(context, item),
         borderRadius: BorderRadius.circular(borderRadius),
       ),
       child: useLocal || (isMedia && item.previewUrl != null)
@@ -116,7 +141,7 @@ class ItemThumbnail extends StatelessWidget {
                     if (progress == null) return child;
                     return Center(
                       child: Icon(
-                        getItemIcon(item.type),
+                        getItemIcon(item),
                         color: iconColor,
                         size: iconSize,
                       ),
@@ -124,7 +149,7 @@ class ItemThumbnail extends StatelessWidget {
                   },
                   errorBuilder: (context, error, stack) => Center(
                     child: Icon(
-                      getItemIcon(item.type),
+                      getItemIcon(item),
                       color: iconColor,
                       size: iconSize,
                     ),
@@ -142,7 +167,7 @@ class ItemThumbnail extends StatelessWidget {
             )
           : Center(
               child: Icon(
-                getItemIcon(item.type),
+                getItemIcon(item),
                 color: iconColor,
                 size: iconSize,
               ),

lib/widgets/manage_synced_folders_sheet.dart

@@ -1,6 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:provider/provider.dart';
 import '../providers/sync_status_controller.dart';
+import '../theme/design_tokens.dart';
+import 'noo/lists/noo_grouped_list.dart';
+import 'noo/lists/noo_settings_row.dart';
+import 'noo/overlays/noo_sheet.dart';
 
 /// The configured sync targets (folders/files) with a "stop syncing"
 /// action per target - what used to be Settings' Device Sync card's own
@@ -14,16 +19,7 @@ class ManageSyncedFoldersSheet extends StatelessWidget {
 
   static void show(BuildContext context) {
     final sync = context.read<SyncStatusController>();
-    showModalBottomSheet(
-      context: context,
-      isScrollControlled: true,
-      backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh,
-      showDragHandle: true,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
-      ),
-      builder: (sheetContext) => ManageSyncedFoldersSheet(sync: sync),
-    );
+    showNooSheet(context, children: [ManageSyncedFoldersSheet(sync: sync)]);
   }
 
   void _remove(BuildContext context, String path) {
@@ -38,69 +34,52 @@ class ManageSyncedFoldersSheet extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    // AnimatedBuilder, not a one-shot read: removing a target should update
+    // this list in place without closing the sheet, and showNooSheet's
+    // `children` is built once by the caller - this widget owns its own
+    // rebuild instead.
     return AnimatedBuilder(
       animation: sync,
       builder: (context, _) {
-        final theme = Theme.of(context);
-        final colorScheme = theme.colorScheme;
         final everything = sync.syncEverything;
         final targets = sync.syncedPaths;
 
-        return SafeArea(
-          child: Padding(
-            padding: const EdgeInsets.fromLTRB(20, 4, 20, 20),
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  'Synced to this device',
-                  style: theme.textTheme.titleMedium?.copyWith(
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                const SizedBox(height: 12),
-                if (everything)
-                  Text(
-                    'Every folder in this account is being synced to this '
-                    'device.',
-                    style: theme.textTheme.bodySmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                  )
-                else if (targets.isEmpty)
-                  Text(
-                    'Nothing synced yet - select a folder or file in Files '
-                    'and use "Sync to device" to mirror it here for offline '
-                    'access.',
-                    style: theme.textTheme.bodySmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                  )
-                else
-                  Flexible(
-                    child: ListView.separated(
-                      shrinkWrap: true,
-                      itemCount: targets.length,
-                      separatorBuilder: (_, _) => const Divider(height: 1),
-                      itemBuilder: (context, index) {
-                        final target = targets[index];
-                        return ListTile(
-                          contentPadding: EdgeInsets.zero,
-                          leading: const Icon(Icons.sync_rounded),
-                          title: Text(target),
-                          trailing: IconButton(
-                            icon: const Icon(Icons.close_rounded),
-                            tooltip: 'Stop syncing',
-                            onPressed: () => _remove(context, target),
-                          ),
-                        );
-                      },
-                    ),
-                  ),
-              ],
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Synced to this device',
+              style: NooText.cardTitle.copyWith(color: colors.fg1),
             ),
-          ),
+            const SizedBox(height: NooSpace.sm),
+            if (everything)
+              Text(
+                'Every folder in this account is being synced to this device.',
+                style: NooText.body.copyWith(color: colors.fg3),
+              )
+            else if (targets.isEmpty)
+              Text(
+                'Nothing synced yet. Select a folder or file in Files and '
+                'use "Sync to device" to mirror it here for offline access.',
+                style: NooText.body.copyWith(color: colors.fg3),
+              )
+            else
+              NooGroupedList(
+                children: [
+                  for (final target in targets)
+                    NooSettingsRow(
+                      icon: LucideIcons.folderSync,
+                      label: Text(target),
+                      trailing: IconButton(
+                        icon: Icon(LucideIcons.x, size: 18, color: colors.fg3),
+                        tooltip: 'Stop syncing',
+                        onPressed: () => _remove(context, target),
+                      ),
+                    ),
+                ],
+              ),
+          ],
         );
       },
     );

lib/widgets/media_grid_tile.dart

@@ -1,98 +0,0 @@
-import 'package:flutter/material.dart';
-import '../models/nextcloud_item.dart';
-import 'synced_header_scaffold.dart' show formatBytes;
-
-/// Grid content for an image/video: the actual preview fills the whole card
-/// as a background, with the name/size legible over a bottom scrim -
-/// matching a Google Photos-style grid instead of a small icon badge.
-/// Shared by the Files and Offline tabs; they differ only in where the
-/// pixels come from ([imageBuilder] - a server preview vs. the local
-/// mirror file) and what to show if that fails ([fallbackBuilder]).
-class MediaGridTile extends StatelessWidget {
-  final NextcloudItem item;
-
-  /// Given the pixel width to decode at, returns the image to paint.
-  /// Decoding straight to the painted size (rather than the full 500x500
-  /// server preview / full-resolution local file) avoids a real source of
-  /// scrolling jank.
-  final ImageProvider Function(int cachePixels) imageBuilder;
-  final WidgetBuilder fallbackBuilder;
-
-  const MediaGridTile({
-    super.key,
-    required this.item,
-    required this.imageBuilder,
-    required this.fallbackBuilder,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        final cachePixels =
-            (constraints.maxWidth * MediaQuery.of(context).devicePixelRatio)
-                .round();
-        return Stack(
-          fit: StackFit.expand,
-          children: [
-            Image(
-              image: imageBuilder(cachePixels),
-              fit: BoxFit.cover,
-              filterQuality: FilterQuality.low,
-              gaplessPlayback: true,
-              errorBuilder: (ctx, err, stack) => fallbackBuilder(ctx),
-            ),
-            if (item.type == NextcloudItemType.video)
-              const Center(
-                child: Icon(
-                  Icons.play_circle_fill_rounded,
-                  color: Colors.white,
-                  size: 36,
-                ),
-              ),
-            Positioned(
-              left: 0,
-              right: 0,
-              bottom: 0,
-              child: Container(
-                padding: const EdgeInsets.fromLTRB(10, 20, 10, 8),
-                decoration: const BoxDecoration(
-                  gradient: LinearGradient(
-                    begin: Alignment.topCenter,
-                    end: Alignment.bottomCenter,
-                    colors: [Colors.transparent, Colors.black87],
-                  ),
-                ),
-                child: Column(
-                  mainAxisSize: MainAxisSize.min,
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      item.name,
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
-                      style: theme.textTheme.titleSmall?.copyWith(
-                        color: Colors.white,
-                        fontWeight: FontWeight.w600,
-                        fontSize: 12,
-                      ),
-                    ),
-                    Text(
-                      formatBytes(item.size),
-                      style: theme.textTheme.bodySmall?.copyWith(
-                        color: Colors.white70,
-                        fontSize: 10,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          ],
-        );
-      },
-    );
-  }
-}

lib/widgets/move_copy_conflict_sheet.dart

@@ -1,6 +1,15 @@
 import 'package:flutter/material.dart';
 import '../models/move_copy_result.dart';
-import 'gradual_bottom_sheet.dart';
+import '../theme/design_tokens.dart';
+import 'noo/core/noo_button.dart';
+import 'noo/core/noo_segmented_control.dart';
+import 'noo/files/noo_file_kind.dart';
+import 'noo/files/noo_file_tile.dart';
+import 'noo/lists/noo_grouped_list.dart';
+import 'noo/noo_layout.dart';
+import 'noo/overlays/noo_dialog.dart';
+import 'noo/overlays/noo_overlay_header.dart';
+import 'noo/overlays/noo_sheet.dart';
 
 /// Shown after a Move/Copy batch comes back with `MoveCopyResult.conflicts`
 /// non-empty (an item with the same name already exists at the
@@ -8,27 +17,36 @@ import 'gradual_bottom_sheet.dart';
 /// per item as they're hit, and lets the user resolve them all the same
 /// way (overwrite/keep both) or open a per-item breakdown. Returns the
 /// `ConflictChoice` map `ItemOperations.resolveConflicts` expects, or null
-/// if dismissed without choosing.
+/// if dismissed without choosing. A `showNooDialog` (desktop) / `showNooSheet`
+/// (mobile) instead of the old `showGradualBottomSheet` - the content never
+/// grows past a couple of screens, so the drag-to-resize sheet that needed
+/// isn't worth it here.
 class MoveCopyConflictSheet extends StatefulWidget {
   final List<MoveCopyConflict> conflicts;
-  final ScrollController? scrollController;
 
-  const MoveCopyConflictSheet({
-    super.key,
-    required this.conflicts,
-    this.scrollController,
-  });
+  const MoveCopyConflictSheet({super.key, required this.conflicts});
 
   static Future<Map<String, ConflictChoice>?> show(
     BuildContext context,
     List<MoveCopyConflict> conflicts,
   ) {
-    return showGradualBottomSheet<Map<String, ConflictChoice>>(
+    final content = MoveCopyConflictSheet(conflicts: conflicts);
+    final count = conflicts.length;
+    final title = count == 1
+        ? '1 item already exists'
+        : '$count items already exist';
+
+    if (NooLayout.isDesktop(context)) {
+      return showNooDialog<Map<String, ConflictChoice>>(
+        context,
+        title: title,
+        subtitle: 'Choose how to handle the conflicts',
+        children: [content],
+      );
+    }
+    return showNooSheet<Map<String, ConflictChoice>>(
       context,
-      builder: (context, scrollController) => MoveCopyConflictSheet(
-        conflicts: conflicts,
-        scrollController: scrollController,
-      ),
+      children: [content],
     );
   }
 
@@ -55,118 +73,151 @@ class _MoveCopyConflictSheetState extends State<MoveCopyConflictSheet> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final isDesktop = NooLayout.isDesktop(context);
     final count = widget.conflicts.length;
 
-    return ListView(
-      controller: widget.scrollController,
-      padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        Text(
-          count == 1
-              ? '1 item already exists at the destination'
-              : '$count items already exist at the destination',
-          style: theme.textTheme.titleMedium?.copyWith(
-            fontWeight: FontWeight.w700,
+        // The dialog already renders this title/subtitle in its own header
+        // (see `show` above); the sheet has no header of its own, so it
+        // needs one here.
+        if (!isDesktop) ...[
+          NooOverlayHeader(
+            title: count == 1
+                ? '1 item already exists'
+                : '$count items already exist',
+            subtitle: 'Choose how to handle the conflicts',
+            onClose: () => Navigator.pop(context),
           ),
-        ),
-        const SizedBox(height: 4),
-        Text(
-          'Choose how to handle the conflicts.',
-          style: theme.textTheme.bodySmall?.copyWith(
-            color: colorScheme.onSurfaceVariant,
-          ),
-        ),
-        const SizedBox(height: 16),
+          const SizedBox(height: NooSpace.lg),
+        ],
         if (!_decidingPerItem) ...[
-          FilledButton(
-            onPressed: () => _resolveAll(ConflictChoice.overwrite),
+          NooButton(
+            variant: NooButtonVariant.primary,
+            size: NooButtonSize.card,
+            fullWidth: true,
+            onTap: () => _resolveAll(ConflictChoice.overwrite),
             child: const Text('Overwrite all'),
           ),
-          const SizedBox(height: 8),
-          FilledButton.tonal(
-            onPressed: () => _resolveAll(ConflictChoice.keepBoth),
+          const SizedBox(height: NooSpace.xs),
+          NooButton(
+            variant: NooButtonVariant.tonal,
+            size: NooButtonSize.card,
+            fullWidth: true,
+            onTap: () => _resolveAll(ConflictChoice.keepBoth),
             child: const Text('Keep both (rename)'),
           ),
-          const SizedBox(height: 8),
-          OutlinedButton(
-            onPressed: () => setState(() => _decidingPerItem = true),
+          const SizedBox(height: NooSpace.xs),
+          NooButton(
+            variant: NooButtonVariant.outline,
+            size: NooButtonSize.card,
+            fullWidth: true,
+            onTap: () => setState(() => _decidingPerItem = true),
             child: const Text('Decide per item'),
           ),
-          const SizedBox(height: 16),
-          const Divider(),
-          const SizedBox(height: 8),
+          const SizedBox(height: NooSpace.lg),
         ],
-        for (final conflict in widget.conflicts)
-          Padding(
-            padding: const EdgeInsets.symmetric(vertical: 8),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Row(
-                  children: [
-                    Icon(
-                      conflict.item.isFolder
-                          ? Icons.folder_rounded
-                          : Icons.insert_drive_file_rounded,
-                      color: colorScheme.onSurfaceVariant,
-                      size: 20,
-                    ),
-                    const SizedBox(width: 10),
-                    Expanded(
-                      child: Text(
-                        conflict.item.name,
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                        style: theme.textTheme.bodyMedium?.copyWith(
-                          fontWeight: FontWeight.w600,
-                        ),
-                      ),
-                    ),
-                  ],
-                ),
-                if (_decidingPerItem) ...[
-                  const SizedBox(height: 6),
-                  SizedBox(
-                    width: double.infinity,
-                    child: SegmentedButton<ConflictChoice>(
-                      segments: const [
-                        ButtonSegment(
-                          value: ConflictChoice.overwrite,
-                          label: Text('Overwrite'),
-                        ),
-                        ButtonSegment(
-                          value: ConflictChoice.keepBoth,
-                          label: Text('Keep both'),
-                        ),
-                        ButtonSegment(
-                          value: ConflictChoice.skip,
-                          label: Text('Skip'),
-                        ),
-                      ],
-                      selected: {_perItemChoices[conflict.item.id]!},
-                      showSelectedIcon: false,
-                      onSelectionChanged: (selection) => setState(() {
-                        _perItemChoices[conflict.item.id] = selection.first;
-                      }),
-                    ),
-                  ),
-                ],
-              ],
-            ),
-          ),
+        NooGroupedList(
+          label: _decidingPerItem ? 'Items' : null,
+          children: [
+            for (final conflict in widget.conflicts)
+              _ConflictRow(
+                conflict: conflict,
+                decidingPerItem: _decidingPerItem,
+                choice: _perItemChoices[conflict.item.id]!,
+                onChoiceChanged: (choice) => setState(() {
+                  _perItemChoices[conflict.item.id] = choice;
+                }),
+              ),
+          ],
+        ),
         if (_decidingPerItem) ...[
-          const SizedBox(height: 8),
-          SizedBox(
-            width: double.infinity,
-            child: FilledButton(
-              onPressed: _confirmPerItem,
-              child: const Text('Confirm'),
-            ),
+          const SizedBox(height: NooSpace.lg),
+          NooButton(
+            variant: NooButtonVariant.primary,
+            size: NooButtonSize.card,
+            fullWidth: true,
+            onTap: _confirmPerItem,
+            child: const Text('Confirm'),
           ),
         ],
       ],
     );
   }
 }
+
+/// One conflicting item: its file-type tile and name, plus (once "Decide
+/// per item" is active) a segmented overwrite/keep both/skip choice.
+class _ConflictRow extends StatelessWidget {
+  final MoveCopyConflict conflict;
+  final bool decidingPerItem;
+  final ConflictChoice choice;
+  final ValueChanged<ConflictChoice> onChoiceChanged;
+
+  const _ConflictRow({
+    required this.conflict,
+    required this.decidingPerItem,
+    required this.choice,
+    required this.onChoiceChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final item = conflict.item;
+    final kind = NooFileKind.from(name: item.name, isDirectory: item.isFolder);
+
+    return Material(
+      color: colors.surface,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: NooSpace.md,
+          vertical: NooSpace.sm,
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                NooFileTile(kind: kind),
+                const SizedBox(width: NooSpace.sm),
+                Expanded(
+                  child: Text(
+                    item.name,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: NooText.bodyL.copyWith(
+                      fontWeight: FontWeight.w500,
+                      color: colors.fg1,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            if (decidingPerItem) ...[
+              const SizedBox(height: NooSpace.xs),
+              NooSegmentedControl<ConflictChoice>(
+                fill: true,
+                onSurface: true,
+                value: choice,
+                onChanged: onChoiceChanged,
+                options: const [
+                  NooSegmentOption(
+                    value: ConflictChoice.overwrite,
+                    label: 'Overwrite',
+                  ),
+                  NooSegmentOption(
+                    value: ConflictChoice.keepBoth,
+                    label: 'Keep both',
+                  ),
+                  NooSegmentOption(value: ConflictChoice.skip, label: 'Skip'),
+                ],
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_avatar.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Initials circle on a secondary-palette colour; the current user uses
+/// accent-soft (Noo Design System project, `components/core/Avatar.jsx`).
+/// Sizes: 30-32 in bars, 36 in lists, 48 in the drawer, 52-56 on the
+/// account card.
+class NooAvatar extends StatelessWidget {
+  final String? initials;
+  final double size;
+  /// One of [NooColors.avatarPalette]; ignored when [current] or [icon] is set.
+  final Color? color;
+  final bool current;
+  /// Show an icon instead of initials (e.g. a group share).
+  final IconData? icon;
+
+  const NooAvatar({
+    super.key,
+    this.initials,
+    this.size = 36,
+    this.color,
+    this.current = false,
+    this.icon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final Color bg;
+    final Color fg;
+    if (current) {
+      bg = colors.accentSoft;
+      fg = colors.accentText;
+    } else if (icon != null) {
+      bg = colors.surface2;
+      fg = colors.fg2;
+    } else {
+      bg = color ?? NooColors.avatarPalette.first;
+      fg = NooColors.avatarTextColor;
+    }
+
+    return Container(
+      width: size,
+      height: size,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(color: bg, shape: BoxShape.circle),
+      child: icon != null
+          ? Icon(icon, size: (size * 0.5).round().toDouble(), color: fg)
+          : Text(
+              initials ?? '',
+              style: GoogleFonts.instrumentSans(
+                fontWeight: FontWeight.w600,
+                fontSize: (size * 0.36).round().toDouble(),
+                height: 1,
+                color: fg,
+              ),
+            ),
+    );
+  }
+}

lib/widgets/noo/core/noo_badge.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+
+enum NooBadgeTone { success, danger, accent, warning, info }
+
+/// Small status pill, e.g. "Connected" in settings (Noo Design System
+/// project, `components/core/Badge.jsx`).
+class NooBadge extends StatelessWidget {
+  final NooBadgeTone tone;
+  final Widget child;
+
+  const NooBadge({super.key, this.tone = NooBadgeTone.success, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final (bg, fg) = switch (tone) {
+      NooBadgeTone.success => (colors.successSoft, colors.success),
+      NooBadgeTone.danger => (colors.dangerSoft, colors.danger),
+      NooBadgeTone.accent => (colors.accentSoft, colors.accentText),
+      NooBadgeTone.warning => (colors.warningSoft, colors.warning),
+      NooBadgeTone.info => (colors.infoSoft, colors.info),
+    };
+    return Container(
+      height: 24,
+      // Centering the text vertically within the fixed 24px height needs
+      // *some* alignment mechanism, but Container's own `alignment:` (with
+      // a height but no width) would expand to fill all available
+      // *bounded* width instead of shrink-wrapping (see NooFab's doc
+      // comment) - a Row with mainAxisSize.min sidesteps that entirely:
+      // it shrink-wraps horizontally regardless of incoming constraints,
+      // while its default crossAxisAlignment.center still centers the
+      // text within the Container's tight 24px height.
+      padding: const EdgeInsets.symmetric(horizontal: 10),
+      decoration: BoxDecoration(color: bg, borderRadius: BorderRadius.circular(NooRadii.pill)),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          DefaultTextStyle(
+            style: NooText.label.copyWith(fontSize: 12, height: 1, color: fg),
+            child: child,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_button.dart

@@ -0,0 +1,143 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+
+enum NooButtonVariant { primary, tonal, secondary, danger, outline, text, textDanger }
+
+enum NooButtonSize { cta, card, field, toolbar, compact, xs }
+
+class _SizeSpec {
+  final double height;
+  final double px;
+  final double font;
+  final double icon;
+  final double gap;
+  const _SizeSpec(this.height, this.px, this.font, this.icon, this.gap);
+}
+
+const _sizes = {
+  NooButtonSize.cta: _SizeSpec(52, 20, 16, 20, 10),
+  NooButtonSize.card: _SizeSpec(44, 18, 15, 16, 8),
+  NooButtonSize.field: _SizeSpec(40, 16, 14, 16, 6),
+  NooButtonSize.toolbar: _SizeSpec(36, 16, 14, 16, 8),
+  NooButtonSize.compact: _SizeSpec(32, 14, 13, 14, 6),
+  NooButtonSize.xs: _SizeSpec(28, 12, 12, 14, 6),
+};
+
+/// The pill button for every action in the design system
+/// (Noo Design System project, `components/core/Button.jsx`). Pick
+/// [NooButtonVariant] by emphasis and [NooButtonSize] by context - never
+/// build a bespoke `ElevatedButton`/`FilledButton` for app chrome; extend
+/// this instead.
+class NooButton extends StatefulWidget {
+  final NooButtonVariant variant;
+  final NooButtonSize size;
+  final IconData? icon;
+  final Widget? child;
+  final bool fullWidth;
+  final bool disabled;
+  final VoidCallback? onTap;
+
+  const NooButton({
+    super.key,
+    this.variant = NooButtonVariant.primary,
+    this.size = NooButtonSize.toolbar,
+    this.icon,
+    this.child,
+    this.fullWidth = false,
+    this.disabled = false,
+    this.onTap,
+  });
+
+  @override
+  State<NooButton> createState() => _NooButtonState();
+}
+
+class _NooButtonState extends State<NooButton> {
+  bool _down = false;
+
+  (Color, Color, BoxBorder?) _colors(NooColors colors) {
+    switch (widget.variant) {
+      case NooButtonVariant.primary:
+        return (colors.accent, Colors.white, null);
+      case NooButtonVariant.tonal:
+        return (colors.accentSoft, colors.accentText, null);
+      case NooButtonVariant.secondary:
+        return (colors.surface2, colors.fg1, null);
+      case NooButtonVariant.danger:
+        return (colors.dangerSoft, colors.danger, null);
+      case NooButtonVariant.outline:
+        return (
+          Colors.transparent,
+          colors.fg1,
+          Border.all(color: colors.surface3, width: 1.5),
+        );
+      case NooButtonVariant.text:
+        return (Colors.transparent, colors.accentText, null);
+      case NooButtonVariant.textDanger:
+        return (Colors.transparent, colors.danger, null);
+    }
+  }
+
+  bool get _isTextVariant =>
+      widget.variant == NooButtonVariant.text ||
+      widget.variant == NooButtonVariant.textDanger;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final s = _sizes[widget.size]!;
+    final (bg, fg, border) = _colors(colors);
+    final hasLeadingIcon = widget.icon != null && widget.child != null && !_isTextVariant;
+
+    final content = Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (widget.icon != null) Icon(widget.icon, size: s.icon, color: fg),
+        if (widget.icon != null && widget.child != null) SizedBox(width: s.gap),
+        if (widget.child != null)
+          DefaultTextStyle(
+            style: NooText.buttonSm.copyWith(fontSize: s.font, color: fg),
+            child: widget.child!,
+          ),
+      ],
+    );
+
+    return Opacity(
+      opacity: widget.disabled ? 0.45 : 1,
+      child: GestureDetector(
+        onTapDown: widget.disabled ? null : (_) => setState(() => _down = true),
+        onTapUp: widget.disabled ? null : (_) => setState(() => _down = false),
+        onTapCancel: widget.disabled ? null : () => setState(() => _down = false),
+        onTap: widget.disabled ? null : widget.onTap,
+        child: AnimatedScale(
+          scale: _down && !widget.disabled ? NooMotion.pressScale : 1,
+          duration: NooMotion.fast,
+          curve: NooMotion.ease,
+          child: Container(
+            height: s.height,
+            width: widget.fullWidth ? double.infinity : null,
+            padding: _isTextVariant
+                ? EdgeInsets.zero
+                : EdgeInsets.only(
+                    left: hasLeadingIcon ? s.px - 4 : s.px,
+                    right: s.px,
+                  ),
+            // Only align when fullWidth actually expands this Container -
+            // otherwise (no width, alignment set) Container wraps the child
+            // in an Align that fills all available *bounded* space instead
+            // of shrink-wrapping to it, which is what stretched this button
+            // edge-to-edge instead of sizing to its content (see NooFab's
+            // doc comment for the same bug).
+            alignment: widget.fullWidth ? Alignment.center : null,
+            decoration: BoxDecoration(
+              color: bg,
+              borderRadius: BorderRadius.circular(NooRadii.pill),
+              border: border,
+            ),
+            child: content,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_chip.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+enum NooChipTrailing { none, menu, remove }
+
+/// A pill filter/sort chip; selected = accent-soft (Noo Design System
+/// project, `components/core/Chip.jsx`).
+class NooChip extends StatelessWidget {
+  final Widget child;
+  final IconData? icon;
+  final bool selected;
+  final NooChipTrailing trailing;
+  /// filled = mobile (surface fill, 34px); outline = desktop (1px line, 32px)
+  final bool outline;
+  final VoidCallback? onTap;
+
+  const NooChip({
+    super.key,
+    required this.child,
+    this.icon,
+    this.selected = false,
+    this.trailing = NooChipTrailing.none,
+    this.outline = false,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final height = outline ? 32.0 : 34.0;
+    final hasSideContent = icon != null || trailing != NooChipTrailing.none;
+
+    Color bg;
+    Color fg;
+    FontWeight weight;
+    Border? border;
+    if (selected) {
+      bg = colors.accentSoft;
+      fg = colors.accentText;
+      weight = FontWeight.w600;
+    } else if (outline) {
+      bg = Colors.transparent;
+      fg = colors.fg1;
+      weight = FontWeight.w500;
+      border = Border.all(color: colors.line, width: 1);
+    } else {
+      bg = colors.surface;
+      fg = colors.fg1;
+      weight = FontWeight.w500;
+    }
+
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        height: height,
+        padding: EdgeInsets.symmetric(horizontal: hasSideContent ? 12 : 14),
+        decoration: BoxDecoration(
+          color: bg,
+          border: border,
+          borderRadius: BorderRadius.circular(NooRadii.pill),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (icon != null) ...[
+              Icon(icon, size: outline ? 14 : 16, color: fg),
+              const SizedBox(width: 6),
+            ],
+            DefaultTextStyle(
+              style: NooText.body.copyWith(
+                fontSize: outline ? 13 : 14,
+                height: 1,
+                fontWeight: weight,
+                color: fg,
+              ),
+              child: child,
+            ),
+            if (trailing == NooChipTrailing.menu) ...[
+              const SizedBox(width: 6),
+              Icon(LucideIcons.chevronDown, size: 14, color: fg),
+            ],
+            if (trailing == NooChipTrailing.remove) ...[
+              const SizedBox(width: 6),
+              Icon(LucideIcons.x, size: 14, color: fg),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_fab.dart

@@ -0,0 +1,100 @@
+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
+/// fill - iOS uses a `plus` in the nav bar instead (not yet built).
+///
+/// [collapsed] shrinks it to an icon-only circle (no label) on tabs that
+/// 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,
+    this.label = 'Upload',
+    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: radius,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: radius,
+        child: AnimatedContainer(
+          duration: NooMotion.base,
+          curve: NooMotion.ease,
+          height: 56,
+          padding: EdgeInsetsDirectional.fromSTEB(
+            16,
+            0,
+            collapsed ? 16 : 20,
+            0,
+          ),
+          // No `alignment:` here - Container without an explicit width
+          // wraps its child in an Align when alignment is set, and Align
+          // EXPANDS to fill all available bounded space (not just the
+          // child's size) unless the incoming constraints are unbounded.
+          // The Scaffold floating-action-button slot gives bounded
+          // constraints, so this shipped as a full-width bar instead of a
+          // compact pill. Row+mainAxisSize.min already sizes correctly on
+          // its own; the fix is just not adding alignment back here.
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(icon, size: 24, color: Colors.white),
+              ClipRect(
+                child: AnimatedSize(
+                  duration: NooMotion.base,
+                  curve: NooMotion.ease,
+                  alignment: AlignmentDirectional.centerStart,
+                  child: collapsed
+                      ? const SizedBox(height: 24)
+                      : Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            const SizedBox(width: 10),
+                            Text(
+                              label,
+                              style: NooText.button.copyWith(
+                                color: Colors.white,
+                              ),
+                            ),
+                          ],
+                        ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_progress_bar.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+
+/// 6px pill meter for storage, cache and offline limits (Noo Design System
+/// project, `components/core/ProgressBar.jsx`).
+class NooProgressBar extends StatelessWidget {
+  /// 0-1
+  final double value;
+
+  const NooProgressBar({super.key, required this.value});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(NooRadii.pill),
+      child: SizedBox(
+        height: 6,
+        child: LinearProgressIndicator(
+          value: value.clamp(0.0, 1.0),
+          backgroundColor: colors.surface3,
+          valueColor: AlwaysStoppedAnimation(colors.accent),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_search_field.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Pill search input with a leading icon (Noo Design System project,
+/// `components/core/SearchField.jsx`).
+class NooSearchField extends StatelessWidget {
+  final String placeholder;
+  final TextEditingController? controller;
+  final FocusNode? focusNode;
+  final ValueChanged<String>? onChanged;
+  final ValueChanged<String>? onSubmitted;
+  final bool autofocus;
+  /// true = iOS inline field (radius 12, 38px, 16px text, below the large
+  /// title); false = the generic 36px pill used everywhere else (also the
+  /// Android "expands from a top-bar icon" search field once expanded).
+  final bool ios;
+  /// True when placed directly on a `surface` background (uses surface-2
+  /// fill instead of surface, so it doesn't disappear against it).
+  final bool onSurface;
+  final double? width;
+  /// A trailing widget (e.g. a clear button), shown after the input.
+  final Widget? trailing;
+
+  const NooSearchField({
+    super.key,
+    this.placeholder = 'Search',
+    this.controller,
+    this.focusNode,
+    this.onChanged,
+    this.onSubmitted,
+    this.autofocus = false,
+    this.ios = false,
+    this.onSurface = false,
+    this.width,
+    this.trailing,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Container(
+      width: width,
+      height: ios ? 38 : 36,
+      padding: EdgeInsets.symmetric(horizontal: ios ? 10 : 14),
+      decoration: BoxDecoration(
+        color: onSurface ? colors.surface2 : colors.surface,
+        borderRadius: BorderRadius.circular(ios ? 12 : NooRadii.pill),
+      ),
+      child: Row(
+        children: [
+          Icon(LucideIcons.search, size: ios ? 18 : 16, color: colors.fg3),
+          const SizedBox(width: 8),
+          Expanded(
+            child: TextField(
+              controller: controller,
+              focusNode: focusNode,
+              onChanged: onChanged,
+              onSubmitted: onSubmitted,
+              autofocus: autofocus,
+              style: NooText.body.copyWith(
+                fontSize: ios ? 16 : 14,
+                height: 1,
+                color: colors.fg1,
+              ),
+              decoration: InputDecoration(
+                isDense: true,
+                border: InputBorder.none,
+                contentPadding: EdgeInsets.zero,
+                hintText: placeholder,
+                hintStyle: NooText.body.copyWith(
+                  fontSize: ios ? 16 : 14,
+                  height: 1,
+                  color: colors.fg3,
+                ),
+              ),
+            ),
+          ),
+          ?trailing,
+        ],
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_segmented_control.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+
+class NooSegmentOption<T> {
+  final T value;
+  final String? label;
+  final IconData? icon;
+
+  const NooSegmentOption({required this.value, this.label, this.icon});
+}
+
+enum NooSegmentedSize { md, sm, xs }
+
+const _heights = {
+  NooSegmentedSize.md: 34.0,
+  NooSegmentedSize.sm: 30.0,
+  NooSegmentedSize.xs: 28.0,
+};
+
+/// Pill track with an accent-soft active segment - List/Grid, Shares scope,
+/// Theme (Noo Design System project, `components/core/SegmentedControl.jsx`).
+/// Replaces the older `SegmentedIconGroup`/`ToggleIconButton` pair; migrate
+/// call sites to this as they're touched rather than adding new ones there.
+class NooSegmentedControl<T> extends StatelessWidget {
+  final List<NooSegmentOption<T>> options;
+  final T value;
+  final ValueChanged<T>? onChanged;
+
+  /// Use surface on bg, surface-2 on surface.
+  final bool onSurface;
+  final NooSegmentedSize size;
+  final bool fill;
+  final bool iconOnly;
+
+  /// Every segment always shows its icon, but only the *selected* one also
+  /// shows its label - a middle ground between `iconOnly` (no segment is
+  /// ever distinguishable without a label) and the default (every segment's
+  /// label always visible, crowding a 3+-option control). Used for Files'/
+  /// Photos' type filter (All/Files/Folders, All/Photos/Videos) so both use
+  /// the same List/Grid-toggle-style pill instead of Files' old checkmark
+  /// list and Photos' own always-labelled control.
+  final bool labelOnlySelected;
+
+  const NooSegmentedControl({
+    super.key,
+    required this.options,
+    required this.value,
+    this.onChanged,
+    this.onSurface = false,
+    this.size = NooSegmentedSize.md,
+    this.fill = false,
+    this.iconOnly = false,
+    this.labelOnlySelected = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final h = iconOnly ? 28.0 : (_heights[size] ?? 34.0);
+    final segments = options.map((o) {
+      final on = o.value == value;
+      final showLabel = labelOnlySelected ? on : !iconOnly;
+      final child = Container(
+        height: h,
+        width: iconOnly ? 36 : null,
+        padding: iconOnly || fill
+            ? EdgeInsets.zero
+            : const EdgeInsets.symmetric(horizontal: 12),
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          color: on ? colors.accentSoft : Colors.transparent,
+          borderRadius: BorderRadius.circular(NooRadii.pill),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (o.icon != null)
+              Icon(
+                o.icon,
+                size: iconOnly ? (size == NooSegmentedSize.md ? 18 : 16) : 14,
+                color: on ? colors.accentText : colors.fg2,
+              ),
+            if (o.icon != null && showLabel && o.label != null)
+              const SizedBox(width: 6),
+            if (showLabel && o.label != null)
+              Text(
+                o.label!,
+                style: NooText.body.copyWith(
+                  fontSize: size == NooSegmentedSize.md ? 14 : 13,
+                  height: 1,
+                  fontWeight: on ? FontWeight.w600 : FontWeight.w500,
+                  color: on ? colors.accentText : colors.fg2,
+                ),
+              ),
+          ],
+        ),
+      );
+      final tappable = GestureDetector(
+        onTap: onChanged == null ? null : () => onChanged!(o.value),
+        child: child,
+      );
+      return fill ? Expanded(child: tappable) : tappable;
+    }).toList();
+
+    return Container(
+      padding: const EdgeInsets.all(3),
+      decoration: BoxDecoration(
+        color: onSurface ? colors.surface2 : colors.surface,
+        borderRadius: BorderRadius.circular(NooRadii.pill),
+      ),
+      child: Row(
+        mainAxisSize: fill ? MainAxisSize.max : MainAxisSize.min,
+        children: segments,
+      ),
+    );
+  }
+}

lib/widgets/noo/core/noo_toggle.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+
+/// On/off switch; accent track on, surface-3 track off, white knob -
+/// identical on every platform, never a native iOS/Android switch (Noo
+/// Design System project, `components/core/Toggle.jsx`).
+class NooToggle extends StatelessWidget {
+  final bool checked;
+  final ValueChanged<bool>? onChanged;
+  final bool desktop;
+
+  const NooToggle({
+    super.key,
+    required this.checked,
+    this.onChanged,
+    this.desktop = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final w = desktop ? 44.0 : 48.0;
+    final h = desktop ? 26.0 : 28.0;
+    final knob = h - 6;
+
+    return GestureDetector(
+      onTap: onChanged == null ? null : () => onChanged!(!checked),
+      child: AnimatedContainer(
+        duration: NooMotion.fast,
+        curve: NooMotion.ease,
+        width: w,
+        height: h,
+        padding: const EdgeInsets.all(3),
+        decoration: BoxDecoration(
+          color: checked ? colors.accent : colors.surface3,
+          borderRadius: BorderRadius.circular(NooRadii.pill),
+        ),
+        child: AnimatedAlign(
+          duration: NooMotion.fast,
+          curve: NooMotion.ease,
+          alignment: checked ? Alignment.centerRight : Alignment.centerLeft,
+          child: Container(
+            width: knob,
+            height: knob,
+            decoration: const BoxDecoration(
+              color: Colors.white,
+              shape: BoxShape.circle,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/files/noo_file_kind.dart

@@ -0,0 +1,188 @@
+import 'package:flutter/widgets.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// File-type buckets from `DESIGN_SYSTEM.md` 1.2 (`KIND` in `noo-kit.js`).
+/// Drives the tile tint + icon in `NooFileTile`, `NooFileRow` and
+/// `NooFileTableRow`. [other] isn't in the spec table - it's the neutral
+/// fallback (archive colors, plain `file` icon) for anything the table
+/// doesn't cover (audio, binaries, unknown extensions) so those don't
+/// masquerade as an archive or a document.
+enum NooFileKind {
+  folder,
+  pdf,
+  doc,
+  sheet,
+  video,
+  image,
+  archive,
+  other;
+
+  /// Lucide icon for this kind.
+  IconData get icon {
+    switch (this) {
+      case NooFileKind.folder:
+        return LucideIcons.folder;
+      case NooFileKind.pdf:
+      case NooFileKind.doc:
+        return LucideIcons.fileText;
+      case NooFileKind.sheet:
+        return LucideIcons.sheet;
+      case NooFileKind.video:
+        return LucideIcons.film;
+      case NooFileKind.image:
+        return LucideIcons.image;
+      case NooFileKind.archive:
+        return LucideIcons.fileArchive;
+      case NooFileKind.other:
+        return LucideIcons.file;
+    }
+  }
+
+  /// Tile background - the soft half of the pair.
+  Color background(NooColors colors) {
+    switch (this) {
+      case NooFileKind.folder:
+        return colors.accentSoft;
+      case NooFileKind.pdf:
+        return colors.dangerSoft;
+      case NooFileKind.doc:
+      case NooFileKind.image:
+        return colors.infoSoft;
+      case NooFileKind.sheet:
+        return colors.successSoft;
+      case NooFileKind.video:
+        return colors.warningSoft;
+      case NooFileKind.archive:
+      case NooFileKind.other:
+        return colors.surface3;
+    }
+  }
+
+  /// Icon color - always the strong half of [background]'s pair.
+  Color foreground(NooColors colors) {
+    switch (this) {
+      case NooFileKind.folder:
+        return colors.accentText;
+      case NooFileKind.pdf:
+        return colors.danger;
+      case NooFileKind.doc:
+      case NooFileKind.image:
+        return colors.info;
+      case NooFileKind.sheet:
+        return colors.success;
+      case NooFileKind.video:
+        return colors.warning;
+      case NooFileKind.archive:
+      case NooFileKind.other:
+        return colors.fg2;
+    }
+  }
+
+  /// Derives a kind from whatever the caller has: [isDirectory] wins, then
+  /// [mimeType] (e.g. WebDAV `getcontenttype`), then [name]'s extension.
+  static NooFileKind from({
+    String? name,
+    String? mimeType,
+    bool isDirectory = false,
+  }) {
+    final mime = mimeType?.toLowerCase().trim();
+    if (isDirectory || mime == 'httpd/unix-directory') {
+      return NooFileKind.folder;
+    }
+    if (mime != null && mime.isNotEmpty) {
+      final byMime = _fromMime(mime);
+      if (byMime != null) return byMime;
+    }
+    if (name != null) {
+      final dot = name.lastIndexOf('.');
+      if (dot >= 0 && dot < name.length - 1) {
+        final byExt = _extensions[name.substring(dot + 1).toLowerCase()];
+        if (byExt != null) return byExt;
+      }
+    }
+    return NooFileKind.other;
+  }
+
+  static NooFileKind? _fromMime(String mime) {
+    if (mime == 'application/pdf') return NooFileKind.pdf;
+    if (mime.startsWith('image/')) return NooFileKind.image;
+    if (mime.startsWith('video/')) return NooFileKind.video;
+    if (mime.contains('spreadsheet') ||
+        mime.contains('ms-excel') ||
+        mime == 'text/csv') {
+      return NooFileKind.sheet;
+    }
+    if (mime.contains('zip') ||
+        mime.contains('compressed') ||
+        mime.contains('x-tar') ||
+        mime.contains('x-7z') ||
+        mime.contains('x-rar') ||
+        mime.contains('gzip')) {
+      return NooFileKind.archive;
+    }
+    if (mime.startsWith('text/') ||
+        mime.contains('wordprocessing') ||
+        mime.contains('msword') ||
+        mime.contains('opendocument.text') ||
+        mime.contains('presentation') ||
+        mime.contains('powerpoint') ||
+        mime == 'application/rtf') {
+      return NooFileKind.doc;
+    }
+    // Generic types (application/octet-stream etc.) fall through to the
+    // extension check.
+    return null;
+  }
+
+  static const _extensions = <String, NooFileKind>{
+    'pdf': NooFileKind.pdf,
+    // doc / text
+    'doc': NooFileKind.doc,
+    'docx': NooFileKind.doc,
+    'odt': NooFileKind.doc,
+    'rtf': NooFileKind.doc,
+    'txt': NooFileKind.doc,
+    'md': NooFileKind.doc,
+    'ppt': NooFileKind.doc,
+    'pptx': NooFileKind.doc,
+    'odp': NooFileKind.doc,
+    'pages': NooFileKind.doc,
+    // sheet
+    'xls': NooFileKind.sheet,
+    'xlsx': NooFileKind.sheet,
+    'ods': NooFileKind.sheet,
+    'csv': NooFileKind.sheet,
+    'numbers': NooFileKind.sheet,
+    // video
+    'mp4': NooFileKind.video,
+    'mov': NooFileKind.video,
+    'mkv': NooFileKind.video,
+    'webm': NooFileKind.video,
+    'avi': NooFileKind.video,
+    'm4v': NooFileKind.video,
+    '3gp': NooFileKind.video,
+    // image
+    'jpg': NooFileKind.image,
+    'jpeg': NooFileKind.image,
+    'png': NooFileKind.image,
+    'gif': NooFileKind.image,
+    'webp': NooFileKind.image,
+    'heic': NooFileKind.image,
+    'heif': NooFileKind.image,
+    'bmp': NooFileKind.image,
+    'svg': NooFileKind.image,
+    'tif': NooFileKind.image,
+    'tiff': NooFileKind.image,
+    'dng': NooFileKind.image,
+    // archive
+    'zip': NooFileKind.archive,
+    'tar': NooFileKind.archive,
+    'gz': NooFileKind.archive,
+    'tgz': NooFileKind.archive,
+    'bz2': NooFileKind.archive,
+    'xz': NooFileKind.archive,
+    '7z': NooFileKind.archive,
+    'rar': NooFileKind.archive,
+  };
+}

lib/widgets/noo/files/noo_file_row.dart

@@ -0,0 +1,193 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+import 'noo_file_kind.dart';
+import 'noo_file_tile.dart';
+import 'noo_status_icon.dart';
+
+/// Mobile 64px file row (`DESIGN_SYSTEM.md` 2, "File row"): 40px tile, name
+/// (16/500, one line) over a meta line (`[status][shared] size · modified`,
+/// 13 fg-3), an optional favorite star / [trailing] widget, then the
+/// overflow button. Paints its own `surface` background (accent-soft when
+/// [selected]), so it can sit directly in a list or inside a
+/// `NooSwipeAction`.
+class NooFileRow extends StatelessWidget {
+  final NooFileKind kind;
+  final String name;
+
+  /// Formatted size, e.g. "2.4 MB". Joined to [modified] with " · ".
+  final String? size;
+
+  /// Formatted modified time, e.g. "Yesterday".
+  final String? modified;
+
+  /// Replaces the "size · modified" text entirely - use it for the error
+  /// hint ("Couldn't sync · Tap to retry") or screen-specific meta (Trash's
+  /// "Deleted 3 days ago").
+  final String? meta;
+
+  /// Leading meta-line icons, drawn in order (spec order is sync status,
+  /// then shared). When this contains [NooSyncStatus.error] the meta text
+  /// turns `danger`.
+  final List<NooSyncStatus> statuses;
+
+  /// Shows the accent-text star before the overflow button.
+  final bool favorite;
+
+  /// Screen-specific trailing icon (e.g. `rotate-ccw` in Trash), placed
+  /// after the favorite star and before the overflow button.
+  final Widget? trailing;
+
+  /// `ellipsis` on iOS, `ellipsis-vertical` everywhere else.
+  final bool iosStyle;
+  final bool selected;
+
+  /// Real image/video thumbnail for the tile; see [NooFileTile.thumbnail].
+  final Widget? thumbnail;
+  final VoidCallback? onTap;
+  final VoidCallback? onLongPress;
+
+  /// Overflow menu tap. The button is hidden when null.
+  final VoidCallback? onMore;
+
+  const NooFileRow({
+    super.key,
+    required this.kind,
+    required this.name,
+    this.size,
+    this.modified,
+    this.meta,
+    this.statuses = const [],
+    this.favorite = false,
+    this.trailing,
+    this.iosStyle = false,
+    this.selected = false,
+    this.thumbnail,
+    this.onTap,
+    this.onLongPress,
+    this.onMore,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final metaText =
+        meta ??
+        [
+          size,
+          modified,
+        ].whereType<String>().where((s) => s.isNotEmpty).join(' · ');
+    final hasError = statuses.contains(NooSyncStatus.error);
+
+    return Material(
+      color: selected ? colors.accentSoft : colors.surface,
+      child: InkWell(
+        onTap: onTap,
+        onLongPress: onLongPress,
+        child: SizedBox(
+          height: NooSizes.rowMobile,
+          child: Padding(
+            padding: EdgeInsets.only(
+              left: NooSpace.md,
+              right: onMore != null ? NooSpace.xxs : NooSpace.md,
+            ),
+            child: Row(
+              children: [
+                NooFileTile(kind: kind, thumbnail: thumbnail),
+                const SizedBox(width: NooSpace.sm),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        name,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: NooText.bodyL.copyWith(
+                          fontWeight: FontWeight.w500,
+                          color: colors.fg1,
+                        ),
+                      ),
+                      if (statuses.isNotEmpty || metaText.isNotEmpty) ...[
+                        const SizedBox(height: NooSpace.xxs),
+                        Row(
+                          children: [
+                            for (final s in statuses) ...[
+                              NooStatusIcon(s),
+                              const SizedBox(width: NooSpace.xxs),
+                            ],
+                            Expanded(
+                              child: Text(
+                                metaText,
+                                maxLines: 1,
+                                overflow: TextOverflow.ellipsis,
+                                style: NooText.meta.copyWith(
+                                  color: hasError ? colors.danger : colors.fg3,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+                if (favorite) ...[
+                  const SizedBox(width: NooSpace.xs),
+                  Icon(LucideIcons.star, size: 18, color: colors.accentText),
+                ],
+                if (trailing != null) ...[
+                  const SizedBox(width: NooSpace.xs),
+                  IconTheme.merge(
+                    data: IconThemeData(size: 18, color: colors.fg3),
+                    child: trailing!,
+                  ),
+                ],
+                if (onMore != null)
+                  NooOverflowButton(iosStyle: iosStyle, onTap: onMore),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// The 40px round overflow ("more") hit target used at the end of file
+/// rows - `ellipsis` when [iosStyle], `ellipsis-vertical` otherwise, 20px
+/// in fg-3.
+class NooOverflowButton extends StatelessWidget {
+  final bool iosStyle;
+  final double size;
+  final VoidCallback? onTap;
+
+  const NooOverflowButton({
+    super.key,
+    this.iosStyle = false,
+    this.size = 40,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return SizedBox.square(
+      dimension: size,
+      child: Material(
+        type: MaterialType.transparency,
+        shape: const CircleBorder(),
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: onTap,
+          child: Icon(
+            iosStyle ? LucideIcons.ellipsis : LucideIcons.ellipsisVertical,
+            size: size >= 40 ? 20 : 18,
+            color: colors.fg3,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/files/noo_file_table.dart

@@ -0,0 +1,246 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+import 'noo_file_kind.dart';
+import 'noo_file_row.dart';
+import 'noo_file_tile.dart';
+import 'noo_status_icon.dart';
+
+/// Fixed widths of the desktop file table's grid
+/// (`minmax(0,1fr) 180px 160px 120px`, `DESIGN_SYSTEM.md` 2 "File row").
+/// The first column takes the remaining width.
+const double _col2Width = 180;
+const double _col3Width = 160;
+const double _col4Width = 120;
+
+/// Inset shared by header and rows so their columns line up; also the
+/// padding inside a selected row's r12 fill.
+const double _tableInset = NooSpace.sm;
+
+/// Lays out the four table columns. Shared by [NooFileTableHeader] and
+/// [NooFileTableRow] so the grid can't drift between them.
+class _TableColumns extends StatelessWidget {
+  final Widget name;
+  final Widget col2;
+  final Widget col3;
+  final Widget col4;
+
+  const _TableColumns({
+    required this.name,
+    required this.col2,
+    required this.col3,
+    required this.col4,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: _tableInset),
+      child: Row(
+        children: [
+          Expanded(child: name),
+          SizedBox(width: _col2Width, child: col2),
+          SizedBox(width: _col3Width, child: col3),
+          SizedBox(width: _col4Width, child: col4),
+        ],
+      ),
+    );
+  }
+}
+
+/// Desktop file table header: 36px, 12/600 fg-3 labels, and a sort arrow
+/// on the active column. The fourth (status/overflow) column is unlabelled.
+class NooFileTableHeader extends StatelessWidget {
+  /// Label for the flexible Name column.
+  final String nameLabel;
+
+  /// Labels for the 180px and 160px data columns, e.g. "Modified", "Size".
+  final String col2Label;
+  final String col3Label;
+
+  /// Active sort column - 0 = name, 1 = col2, 2 = col3 - or null for none.
+  final int? sortColumn;
+  final bool sortAscending;
+
+  /// Called with the tapped column's index; header cells aren't tappable
+  /// when null.
+  final ValueChanged<int>? onSort;
+
+  const NooFileTableHeader({
+    super.key,
+    this.nameLabel = 'Name',
+    required this.col2Label,
+    required this.col3Label,
+    this.sortColumn,
+    this.sortAscending = true,
+    this.onSort,
+  });
+
+  Widget _cell(BuildContext context, int index) {
+    final colors = context.nooColors;
+    final style = NooText.label.copyWith(
+      fontSize: 12,
+      height: 1,
+      color: colors.fg3,
+    );
+    final active = sortColumn == index;
+    final content = Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Flexible(
+          child: Text(
+            [nameLabel, col2Label, col3Label][index],
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: style,
+          ),
+        ),
+        if (active) ...[
+          const SizedBox(width: NooSpace.xxs),
+          Icon(
+            sortAscending ? LucideIcons.arrowUp : LucideIcons.arrowDown,
+            size: 12,
+            color: colors.fg3,
+          ),
+        ],
+      ],
+    );
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: onSort == null
+          ? content
+          : GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () => onSort!(index),
+              child: MouseRegion(
+                cursor: SystemMouseCursors.click,
+                child: content,
+              ),
+            ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 36,
+      child: _TableColumns(
+        name: _cell(context, 0),
+        col2: _cell(context, 1),
+        col3: _cell(context, 2),
+        col4: const SizedBox.shrink(),
+      ),
+    );
+  }
+}
+
+/// Desktop file table row: 52px, 30px tile + name (14/500) in the flexible
+/// column, two meta-style data columns, then status icons and the overflow
+/// button right-aligned in the 120px column. Selected rows get an
+/// accent-soft r12 fill; otherwise the row is transparent over the pane.
+class NooFileTableRow extends StatelessWidget {
+  final NooFileKind kind;
+  final String name;
+
+  /// Second and third column contents, e.g. modified time and size.
+  final String? col2;
+  final String? col3;
+
+  /// Status icons in the last column, drawn before the favorite star.
+  final List<NooSyncStatus> statuses;
+  final bool favorite;
+  final bool selected;
+  final Widget? thumbnail;
+  final VoidCallback? onTap;
+  final VoidCallback? onDoubleTap;
+  final VoidCallback? onSecondaryTap;
+  final VoidCallback? onLongPress;
+
+  /// Overflow menu tap. The button is hidden when null.
+  final VoidCallback? onMore;
+
+  const NooFileTableRow({
+    super.key,
+    required this.kind,
+    required this.name,
+    this.col2,
+    this.col3,
+    this.statuses = const [],
+    this.favorite = false,
+    this.selected = false,
+    this.thumbnail,
+    this.onTap,
+    this.onDoubleTap,
+    this.onSecondaryTap,
+    this.onLongPress,
+    this.onMore,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final metaStyle = NooText.meta.copyWith(color: colors.fg3);
+    Widget dataCell(String? text) => Text(
+      text ?? '',
+      maxLines: 1,
+      overflow: TextOverflow.ellipsis,
+      style: metaStyle,
+    );
+
+    return Material(
+      color: selected ? colors.accentSoft : Colors.transparent,
+      borderRadius: BorderRadius.circular(NooRadii.sidebarItem),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        onDoubleTap: onDoubleTap,
+        onSecondaryTap: onSecondaryTap,
+        onLongPress: onLongPress,
+        child: SizedBox(
+          height: NooSizes.rowDesktop,
+          child: _TableColumns(
+            name: Row(
+              children: [
+                NooFileTile(
+                  kind: kind,
+                  size: NooFileTileSize.desktop,
+                  thumbnail: thumbnail,
+                ),
+                const SizedBox(width: NooSpace.sm),
+                Expanded(
+                  child: Text(
+                    name,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: NooText.body.copyWith(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                      color: colors.fg1,
+                    ),
+                  ),
+                ),
+                const SizedBox(width: NooSpace.md),
+              ],
+            ),
+            col2: dataCell(col2),
+            col3: dataCell(col3),
+            col4: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                for (final s in statuses) ...[
+                  NooStatusIcon(s),
+                  const SizedBox(width: 6),
+                ],
+                if (favorite) ...[
+                  Icon(LucideIcons.star, size: 14, color: colors.accentText),
+                  const SizedBox(width: 6),
+                ],
+                if (onMore != null) NooOverflowButton(size: 32, onTap: onMore),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/files/noo_file_tile.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+import 'noo_file_kind.dart';
+
+/// The four tile sizes from `DESIGN_SYSTEM.md` 1.2 - pick by context; the
+/// icon is always half the tile.
+enum NooFileTileSize {
+  /// 40px / r12 - mobile file rows.
+  row(40, 12),
+
+  /// 30px / r9 - desktop table rows.
+  desktop(30, 9),
+
+  /// 44px / r12 - share sheet/dialog header.
+  header(44, 12),
+
+  /// 32px / r10 - activity items.
+  activity(32, 10);
+
+  final double extent;
+  final double radius;
+  const NooFileTileSize(this.extent, this.radius);
+
+  double get iconSize => extent / 2;
+}
+
+/// Rounded-square file-type tile: the kind's soft tint with its Lucide icon
+/// in the strong tint (`DESIGN_SYSTEM.md` 1.2). Pass [thumbnail] (e.g. an
+/// `Image`) to show real content instead - it's clipped to the same shape
+/// and cover-fit over the kind's tint, which shows while it loads.
+class NooFileTile extends StatelessWidget {
+  final NooFileKind kind;
+  final NooFileTileSize size;
+  final Widget? thumbnail;
+
+  const NooFileTile({
+    super.key,
+    required this.kind,
+    this.size = NooFileTileSize.row,
+    this.thumbnail,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final radius = BorderRadius.circular(size.radius);
+    return SizedBox.square(
+      dimension: size.extent,
+      child: thumbnail != null
+          ? ClipRRect(
+              borderRadius: radius,
+              child: ColoredBox(
+                color: kind.background(colors),
+                child: SizedBox.expand(
+                  child: FittedBox(fit: BoxFit.cover, child: thumbnail),
+                ),
+              ),
+            )
+          : DecoratedBox(
+              decoration: BoxDecoration(
+                color: kind.background(colors),
+                borderRadius: radius,
+              ),
+              child: Center(
+                child: Icon(
+                  kind.icon,
+                  size: size.iconSize,
+                  color: kind.foreground(colors),
+                ),
+              ),
+            ),
+    );
+  }
+}

lib/widgets/noo/files/noo_status_icon.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Per-file status markers for a file row's meta line or a table row's
+/// status column (`DESIGN_SYSTEM.md` 2, "Status icons").
+enum NooSyncStatus {
+  synced,
+  syncing,
+  error,
+  shared;
+
+  IconData get icon {
+    switch (this) {
+      case NooSyncStatus.synced:
+        return LucideIcons.circleCheck;
+      case NooSyncStatus.syncing:
+        return LucideIcons.refreshCw;
+      case NooSyncStatus.error:
+        return LucideIcons.circleAlert;
+      case NooSyncStatus.shared:
+        return LucideIcons.users;
+    }
+  }
+
+  Color color(NooColors colors) {
+    switch (this) {
+      case NooSyncStatus.synced:
+        return colors.success;
+      case NooSyncStatus.syncing:
+        return colors.accentText;
+      case NooSyncStatus.error:
+        return colors.danger;
+      case NooSyncStatus.shared:
+        return colors.fg3;
+    }
+  }
+}
+
+/// A single 14px status icon. For [NooSyncStatus.error] the row's meta
+/// text should say what to do ("Couldn't sync · Tap to retry") - this only
+/// draws the icon.
+class NooStatusIcon extends StatelessWidget {
+  final NooSyncStatus status;
+  final double size;
+
+  const NooStatusIcon(this.status, {super.key, this.size = 14});
+
+  @override
+  Widget build(BuildContext context) {
+    return Icon(
+      status.icon,
+      size: size,
+      color: status.color(context.nooColors),
+    );
+  }
+}

lib/widgets/noo/files/noo_swipe_action.dart

@@ -0,0 +1,295 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// The two swipe actions the design system defines (`DESIGN_SYSTEM.md` 2,
+/// "Swipe action"); which one sits on which side is a user setting
+/// (Settings -> Swipe on a file).
+enum NooSwipeActionKind { delete, favorite }
+
+/// One side's action for [NooSwipeAction].
+class NooSwipeActionSpec {
+  final NooSwipeActionKind kind;
+  final VoidCallback onTriggered;
+
+  /// Overrides the default label ("Delete" / "Favorite"), e.g.
+  /// "Unfavorite" for an already-starred file.
+  final String? label;
+
+  /// Overrides the default icon (`trash-2` / `star`).
+  final IconData? icon;
+
+  const NooSwipeActionSpec({
+    required this.kind,
+    required this.onTriggered,
+    this.label,
+    this.icon,
+  });
+}
+
+/// Wraps a row (normally a `NooFileRow`) so dragging it horizontally slides
+/// it aside to uncover a 96px action block: delete is white on
+/// `danger-fill`, favorite is white on `accent`, each a 20px icon over a
+/// 12/600 label. Releasing past half the block snaps it open, otherwise it
+/// 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;
+
+  /// Revealed on the leading edge (swipe toward the trailing edge).
+  final NooSwipeActionSpec? startAction;
+
+  /// Revealed on the trailing edge (swipe toward the leading edge).
+  final NooSwipeActionSpec? endAction;
+
+  const NooSwipeAction({
+    super.key,
+    required this.child,
+    this.startAction,
+    this.endAction,
+  });
+
+  /// Width of the uncovered action block.
+  static const double actionWidth = 96;
+
+  @override
+  State<NooSwipeAction> createState() => _NooSwipeActionState();
+}
+
+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) - and on past
+  /// either bound up to [_kMaxDrag] while armed for [_kTriggerExtent].
+  late final AnimationController _ctrl = AnimationController(
+    vsync: this,
+    lowerBound: -_kMaxDrag,
+    upperBound: _kMaxDrag,
+    value: 0,
+  );
+
+  double get _dir => Directionality.of(context) == TextDirection.rtl ? -1 : 1;
+
+  @override
+  void dispose() {
+    _ctrl.dispose();
+    super.dispose();
+  }
+
+  void _animateTo(double target) {
+    _ctrl.animateTo(target, duration: NooMotion.base, curve: NooMotion.ease);
+  }
+
+  void _close() => _animateTo(0);
+
+  void _onDragUpdate(DragUpdateDetails d) {
+    // Positive = revealing the start action.
+    final delta = d.primaryDelta! * _dir / NooSwipeAction.actionWidth;
+    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) {
+      final opening = velocity.sign == v.sign || v == 0;
+      target = opening ? velocity.sign : 0;
+    } else {
+      target = v.abs() >= 0.5 ? v.sign : 0;
+    }
+    if (target > 0 && widget.startAction == null) target = 0;
+    if (target < 0 && widget.endAction == null) target = 0;
+    _animateTo(target);
+  }
+
+  void _trigger(NooSwipeActionSpec spec) {
+    _close();
+    spec.onTriggered();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    if (widget.startAction == null && widget.endAction == null) {
+      return widget.child;
+    }
+
+    return GestureDetector(
+      onHorizontalDragUpdate: _onDragUpdate,
+      onHorizontalDragEnd: _onDragEnd,
+      child: ClipRect(
+        child: AnimatedBuilder(
+          animation: _ctrl,
+          builder: (context, child) {
+            final v = _ctrl.value;
+            // Only the side being uncovered is painted, so the opposite
+            // block never peeks out from behind a translucent row.
+            final showing = v > 0
+                ? widget.startAction
+                : (v < 0 ? widget.endAction : null);
+            return Stack(
+              children: [
+                if (showing != null)
+                  Positioned.fill(
+                    child: Align(
+                      alignment: v > 0
+                          ? AlignmentDirectional.centerStart
+                          : AlignmentDirectional.centerEnd,
+                      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),
+                      ),
+                    ),
+                  ),
+                Transform.translate(
+                  offset: Offset(v * NooSwipeAction.actionWidth * _dir, 0),
+                  child: child,
+                ),
+              ],
+            );
+          },
+          child: _OpenAwareChild(
+            controller: _ctrl,
+            onCloseTap: _close,
+            child: widget.child,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Swallows taps on the row while it's swiped open (closing it instead),
+/// so an open row doesn't also navigate.
+class _OpenAwareChild extends AnimatedWidget {
+  final Widget child;
+  final VoidCallback onCloseTap;
+
+  const _OpenAwareChild({
+    required AnimationController controller,
+    required this.onCloseTap,
+    required this.child,
+  }) : super(listenable: controller);
+
+  @override
+  Widget build(BuildContext context) {
+    final open = (listenable as AnimationController).value != 0;
+    return Stack(
+      children: [
+        child,
+        if (open)
+          Positioned.fill(
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: onCloseTap,
+            ),
+          ),
+      ],
+    );
+  }
+}
+
+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,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isDelete = spec.kind == NooSwipeActionKind.delete;
+    final bg = isDelete ? colors.dangerFill : colors.accent;
+    final icon =
+        spec.icon ?? (isDelete ? LucideIcons.trash2 : LucideIcons.star);
+    final label = spec.label ?? (isDelete ? 'Delete' : 'Favorite');
+
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: onTap,
+      child: Container(
+        width: width.clamp(NooSwipeAction.actionWidth, double.infinity),
+        color: bg,
+        alignment: Alignment.center,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            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,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: NooText.label.copyWith(
+                fontSize: 12,
+                height: 1,
+                color: Colors.white,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/lists/noo_banner.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Inline info card with an optional text action, e.g. Trash's retention
+/// notice + "Empty trash" (Noo Design System project,
+/// `components/lists/Banner.jsx`, mobile variant).
+class NooBanner extends StatelessWidget {
+  final IconData icon;
+  final Widget child;
+  final String? actionLabel;
+  final VoidCallback? onAction;
+  final bool actionIsDanger;
+
+  const NooBanner({
+    super.key,
+    this.icon = LucideIcons.info,
+    required this.child,
+    this.actionLabel,
+    this.onAction,
+    this.actionIsDanger = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+      decoration: BoxDecoration(
+        color: colors.surface,
+        borderRadius: BorderRadius.circular(NooRadii.card),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Icon(icon, size: 20, color: colors.fg2),
+              const SizedBox(width: 12),
+              Expanded(
+                child: DefaultTextStyle(
+                  style: NooText.body.copyWith(color: colors.fg2),
+                  child: child,
+                ),
+              ),
+            ],
+          ),
+          // Its own row below the description text, not squeezed onto the
+          // same line - a long retention message and "Empty trash" used to
+          // fight for the same row's width.
+          if (actionLabel != null) ...[
+            const SizedBox(height: 10),
+            Align(
+              alignment: Alignment.centerRight,
+              child: GestureDetector(
+                onTap: onAction,
+                child: Text(
+                  actionLabel!,
+                  style: NooText.buttonSm.copyWith(
+                    fontSize: 14,
+                    color: actionIsDanger ? colors.danger : colors.accentText,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ],
+      ),
+    );
+  }
+}

lib/widgets/noo/lists/noo_grouped_list.dart

@@ -0,0 +1,145 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Radius-20 surface card of rows with 1px line dividers and an optional
+/// label above it (Noo Design System project,
+/// `components/lists/GroupedList.jsx`, mobile variant - desktop's bordered/
+/// titled card isn't built yet). Each child (`SettingsRow`, `FileRow`, ...)
+/// paints its own `surface` background; this only supplies the 1px `line`
+/// gaps between them and the rounded clip. Stack groups 18-20px apart.
+///
+/// [collapsible] makes [label] (required alongside it) a tap target that
+/// shows/hides the card and [footer] below it, with a trailing chevron -
+/// used by `SettingsSection` for Settings' mobile sections so a long
+/// Settings screen can be collapsed section by section instead of needing a
+/// separate jump rail. Every other call site leaves this false and renders
+/// exactly as before, always expanded and non-interactive.
+class NooGroupedList extends StatefulWidget {
+  final String? label;
+
+  /// Right-aligned secondary text next to [label].
+  final String? aside;
+  final List<Widget> children;
+  final Widget? footer;
+  final bool collapsible;
+  final bool initiallyExpanded;
+
+  const NooGroupedList({
+    super.key,
+    this.label,
+    this.aside,
+    required this.children,
+    this.footer,
+    this.collapsible = false,
+    this.initiallyExpanded = true,
+  });
+
+  @override
+  State<NooGroupedList> createState() => _NooGroupedListState();
+}
+
+class _NooGroupedListState extends State<NooGroupedList> {
+  late bool _expanded = widget.initiallyExpanded;
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final expanded = !widget.collapsible || _expanded;
+    final label = widget.label;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (label != null) ...[
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            child: _buildLabelRow(label, colors, expanded),
+          ),
+          const SizedBox(height: 8),
+        ],
+        AnimatedCrossFade(
+          duration: NooMotion.fast,
+          sizeCurve: NooMotion.ease,
+          crossFadeState: expanded
+              ? CrossFadeState.showFirst
+              : CrossFadeState.showSecond,
+          firstChild: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ClipRRect(
+                borderRadius: BorderRadius.circular(NooRadii.card),
+                child: DecoratedBox(
+                  decoration: BoxDecoration(color: colors.line),
+                  child: Column(
+                    children: [
+                      for (var i = 0; i < widget.children.length; i++) ...[
+                        if (i > 0) const SizedBox(height: 1),
+                        widget.children[i],
+                      ],
+                    ],
+                  ),
+                ),
+              ),
+              if (widget.footer != null) ...[
+                const SizedBox(height: 8),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 8),
+                  child: DefaultTextStyle(
+                    style: NooText.meta.copyWith(color: colors.fg3),
+                    child: widget.footer!,
+                  ),
+                ),
+              ],
+            ],
+          ),
+          secondChild: const SizedBox(width: double.infinity),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildLabelRow(String label, NooColors colors, bool expanded) {
+    final row = Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(label, style: NooText.label.copyWith(color: colors.fg2)),
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (widget.aside != null)
+              Padding(
+                padding: EdgeInsets.only(right: widget.collapsible ? 8 : 0),
+                child: Text(
+                  widget.aside!,
+                  style: NooText.body.copyWith(
+                    fontSize: 13,
+                    height: 1,
+                    fontWeight: FontWeight.w500,
+                    color: colors.fg3,
+                  ),
+                ),
+              ),
+            if (widget.collapsible)
+              AnimatedRotation(
+                turns: expanded ? 0.5 : 0,
+                duration: NooMotion.fast,
+                curve: NooMotion.ease,
+                child: Icon(
+                  LucideIcons.chevronDown,
+                  size: 16,
+                  color: colors.fg3,
+                ),
+              ),
+          ],
+        ),
+      ],
+    );
+    if (!widget.collapsible) return row;
+    return GestureDetector(
+      behavior: HitTestBehavior.opaque,
+      onTap: () => setState(() => _expanded = !_expanded),
+      child: row,
+    );
+  }
+}

lib/widgets/noo/lists/noo_info_note.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Tinted info callout (info-soft fill, info icon) for a short notice that
+/// must be noticed immediately, unlike a muted footer/subtitle line.
+class NooInfoNote extends StatelessWidget {
+  final String message;
+
+  const NooInfoNote({super.key, required this.message});
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+      decoration: BoxDecoration(
+        color: colors.infoSoft,
+        borderRadius: BorderRadius.circular(NooRadii.input),
+        border: Border.all(color: colors.info.withValues(alpha: 0.35)),
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(top: 1),
+            child: Icon(LucideIcons.info, size: 18, color: colors.info),
+          ),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Text(
+              message,
+              style: NooText.body.copyWith(color: colors.fg1, height: 1.35),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/noo/lists/noo_selection_bar.dart

@@ -0,0 +1,308 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../models/selection_action.dart';
+import '../../../theme/design_tokens.dart';
+import '../files/noo_file_row.dart' show NooOverflowButton;
+import '../overlays/noo_sheet.dart';
+import 'noo_grouped_list.dart';
+import 'noo_settings_row.dart';
+
+/// Bulk actions shown inline before the rest collapse behind "More" - a
+/// fixed, non-scrolling width on every platform (design canvas
+/// https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4, "Selection action
+/// bar"). Mobile is tighter (icons share the bar with the close circle and
+/// count on a ~360dp phone); desktop's labelled pills have a wider toolbar
+/// to work with.
+const int _kMobileInlineActions = 3;
+const int _kDesktopInlineActions = 4;
+
+/// The multi-select action bar Files/Photos/Favorites swap in for their own
+/// sort/filter row while selecting - design canvas
+/// https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4 ("Selection action
+/// bar"), since DESIGN_SYSTEM.md has no §4 recipe of its own for this.
+/// Replaces the bare row of Material `IconButton`s each screen used to
+/// build ad hoc.
+///
+/// A `surface` card (radius 20) - selection reads as a distinct mode, not
+/// just a row of buttons floating on `bg` - with a close circle, the
+/// count, and the bulk actions. This sits in the *content* pane's own
+/// pinned header slot on every platform (the shell's desktop toolbar,
+/// built separately in `main.dart`, never changes for selection), so
+/// mobile and desktop share the same fixed 56px height; only the gutter
+/// ([isDesktop] ? 24 : 12, matching `NooLayout.gutter`) and the actions'
+/// presentation differ:
+/// - Mobile: the first [_kMobileInlineActions] actions as plain 20px
+///   accent-text icons, no fill.
+/// - Desktop: the first [_kDesktopInlineActions] as labelled tonal pills -
+///   danger-soft/danger for the one labelled "Delete", accent-soft/
+///   accent-text otherwise - since desktop has the room for labels.
+///
+/// Any actions beyond that inline count sit behind a trailing "More"
+/// button that opens the same grouped-list sheet a file row's own overflow
+/// menu already uses (see `FilesView._showItemActions`) - never a second
+/// scrolling row, which is what this replaced: with up to 9 bulk actions
+/// (favorite, share, download, delete, copy, move, rename, sync,
+/// details), a horizontally-scrolling row hid actions behind a swipe
+/// gesture with no visible cue that there was more to find.
+class NooSelectionBar extends StatelessWidget {
+  final int count;
+  final List<SelectionAction> actions;
+  final VoidCallback onClose;
+  final bool isDesktop;
+  final bool iosStyle;
+
+  const NooSelectionBar({
+    super.key,
+    required this.count,
+    required this.actions,
+    required this.onClose,
+    required this.isDesktop,
+    this.iosStyle = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final gutter = isDesktop ? NooSpace.xl : NooSpace.sm;
+    final inlineCount = isDesktop
+        ? _kDesktopInlineActions
+        : _kMobileInlineActions;
+    final inlineActions = actions.length > inlineCount
+        ? actions.sublist(0, inlineCount)
+        : actions;
+    final overflowActions = actions.length > inlineCount
+        ? actions.sublist(inlineCount)
+        : const <SelectionAction>[];
+
+    // Every screen pins this into a fixed 56px sliver-header slot (the same
+    // one the sort/filter row otherwise occupies) - the 4px top/bottom
+    // margin plus the card's own 48px must add up to exactly that, or the
+    // header overflows (see files_view.dart's `topRow` height comment for
+    // the same warning about this exact number).
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: gutter, vertical: NooSpace.xxs),
+      child: Container(
+        height: 48,
+        padding: const EdgeInsets.symmetric(horizontal: 6),
+        decoration: BoxDecoration(
+          color: colors.surface,
+          borderRadius: BorderRadius.circular(NooRadii.card),
+        ),
+        child: Row(
+          children: [
+            Semantics(
+              button: true,
+              label: 'Cancel selection',
+              child: GestureDetector(
+                onTap: onClose,
+                child: Container(
+                  width: 36,
+                  height: 36,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                    color: colors.surface2,
+                    shape: BoxShape.circle,
+                  ),
+                  child: Icon(LucideIcons.x, size: 18, color: colors.fg1),
+                ),
+              ),
+            ),
+            const SizedBox(width: NooSpace.xs),
+            Text(
+              '$count selected',
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: NooText.cardTitle.copyWith(
+                fontSize: 17,
+                color: colors.fg1,
+              ),
+            ),
+            const SizedBox(width: NooSpace.xs),
+            Expanded(
+              child: Align(
+                alignment: Alignment.centerRight,
+                child: isDesktop
+                    ? _desktopActions(
+                        context,
+                        colors,
+                        inlineActions,
+                        overflowActions,
+                      )
+                    : _mobileActions(
+                        context,
+                        colors,
+                        inlineActions,
+                        overflowActions,
+                      ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _mobileActions(
+    BuildContext context,
+    NooColors colors,
+    List<SelectionAction> inline,
+    List<SelectionAction> overflow,
+  ) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        for (final action in inline)
+          Semantics(
+            button: true,
+            label: action.label,
+            child: InkResponse(
+              onTap: action.onTap,
+              radius: 20,
+              child: Padding(
+                padding: const EdgeInsets.all(10),
+                child: Icon(action.icon, size: 20, color: colors.accentText),
+              ),
+            ),
+          ),
+        if (overflow.isNotEmpty)
+          NooOverflowButton(
+            iosStyle: iosStyle,
+            onTap: () => _showOverflowSheet(context, overflow),
+          ),
+      ],
+    );
+  }
+
+  Widget _desktopActions(
+    BuildContext context,
+    NooColors colors,
+    List<SelectionAction> inline,
+    List<SelectionAction> overflow,
+  ) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        for (final action in inline) ...[
+          _DesktopActionPill(action: action, colors: colors),
+          const SizedBox(width: 6),
+        ],
+        if (overflow.isNotEmpty)
+          _DesktopMorePill(
+            colors: colors,
+            onTap: () => _showOverflowSheet(context, overflow),
+          ),
+      ],
+    );
+  }
+
+  void _showOverflowSheet(
+    BuildContext context,
+    List<SelectionAction> overflow,
+  ) {
+    showNooSheet(
+      context,
+      children: [
+        NooGroupedList(
+          children: [
+            for (final action in overflow)
+              NooSettingsRow(
+                icon: action.icon,
+                label: Text(action.label),
+                onTap: () {
+                  Navigator.pop(context);
+                  action.onTap();
+                },
+              ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+class _DesktopActionPill extends StatelessWidget {
+  final SelectionAction action;
+  final NooColors colors;
+
+  const _DesktopActionPill({required this.action, required this.colors});
+
+  @override
+  Widget build(BuildContext context) {
+    final danger = action.label == 'Delete';
+    final bg = danger ? colors.dangerSoft : colors.accentSoft;
+    final fg = danger ? colors.danger : colors.accentText;
+    return Material(
+      color: bg,
+      borderRadius: BorderRadius.circular(NooRadii.pill),
+      child: InkWell(
+        onTap: action.onTap,
+        borderRadius: BorderRadius.circular(NooRadii.pill),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 12),
+          child: SizedBox(
+            height: 32,
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(action.icon, size: 15, color: fg),
+                const SizedBox(width: 6),
+                Text(
+                  action.label,
+                  style: NooText.buttonSm.copyWith(color: fg, fontSize: 13),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// The desktop overflow trigger - a secondary pill (matching the Button
+/// component's "Secondary" variant) rather than a tonal one, so it reads
+/// as "opens a menu" and not as another bulk action next to it. The
+/// trailing `chevron-down` mirrors the same "opens a menu" cue `NooChip`
+/// uses.
+class _DesktopMorePill extends StatelessWidget {
+  final NooColors colors;
+  final VoidCallback onTap;
+
+  const _DesktopMorePill({required this.colors, required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return Semantics(
+      button: true,
+      label: 'More actions',
+      child: Material(
+        color: colors.surface2,
+        borderRadius: BorderRadius.circular(NooRadii.pill),
+        child: InkWell(
+          onTap: onTap,
+          borderRadius: BorderRadius.circular(NooRadii.pill),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 12),
+            child: SizedBox(
+              height: 32,
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text(
+                    'More',
+                    style: NooText.buttonSm.copyWith(
+                      color: colors.fg1,
+                      fontSize: 13,
+                    ),
+                  ),
+                  const SizedBox(width: 4),
+                  Icon(LucideIcons.chevronDown, size: 14, color: colors.fg1),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/lists/noo_settings_row.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// 52/60px settings row: icon, label, subtitle, trailing control (Noo
+/// Design System project, `components/lists/SettingsRow.jsx`, mobile
+/// variant). Goes inside a [NooGroupedList] - it paints its own `surface`
+/// background, the list only supplies the line gaps.
+class NooSettingsRow extends StatelessWidget {
+  final IconData? icon;
+  final Widget label;
+  final Widget? subtitle;
+  /// Renders as `value` text + a trailing chevron - mutually exclusive with
+  /// [trailing] (a `NooToggle`, button, badge, etc.).
+  final String? value;
+  final Widget? trailing;
+  final bool danger;
+  /// Accent-text action row, e.g. "Add account".
+  final bool accent;
+  final VoidCallback? onTap;
+
+  const NooSettingsRow({
+    super.key,
+    this.icon,
+    required this.label,
+    this.subtitle,
+    this.value,
+    this.trailing,
+    this.danger = false,
+    this.accent = false,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final color = danger ? colors.danger : (accent ? colors.accentText : colors.fg1);
+    final minHeight = subtitle != null ? 60.0 : 52.0;
+
+    Widget? trail = trailing;
+    if (trail == null && value != null) {
+      trail = Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            value!,
+            style: NooText.body.copyWith(fontSize: 15, height: 1, color: colors.fg3),
+          ),
+          const SizedBox(width: 4),
+          Icon(LucideIcons.chevronRight, size: 18, color: colors.fg3),
+        ],
+      );
+    }
+
+    return Material(
+      color: colors.surface,
+      child: InkWell(
+        onTap: onTap,
+        child: ConstrainedBox(
+          constraints: BoxConstraints(minHeight: minHeight),
+          child: Padding(
+            padding: EdgeInsets.symmetric(
+              horizontal: NooSpace.md,
+              vertical: subtitle != null ? 11 : 0,
+            ),
+            child: Row(
+              children: [
+                if (icon != null) ...[
+                  Icon(icon, size: 20, color: danger || accent ? color : colors.fg2),
+                  const SizedBox(width: 14),
+                ],
+                Expanded(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      DefaultTextStyle(
+                        style: NooText.bodyL.copyWith(
+                          height: 1.1,
+                          fontWeight: danger || accent
+                              ? (accent ? FontWeight.w600 : FontWeight.w500)
+                              : FontWeight.w400,
+                          color: color,
+                        ),
+                        child: label,
+                      ),
+                      if (subtitle != null) ...[
+                        const SizedBox(height: 4),
+                        DefaultTextStyle(
+                          style: NooText.meta.copyWith(color: colors.fg3),
+                          child: subtitle!,
+                        ),
+                      ],
+                    ],
+                  ),
+                ),
+                ?trail,
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/lists/noo_summary_card.dart

@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+import '../core/noo_progress_bar.dart';
+
+enum NooSummaryCardTone { normal, danger, accent }
+
+/// Stat card with optional progress, meta and action (Offline summary,
+/// desktop stats) - Noo Design System project,
+/// `components/lists/SummaryCard.jsx`, mobile variant.
+class NooSummaryCard extends StatelessWidget {
+  final String stat;
+  final String? caption;
+
+  /// 0-1; renders a [NooProgressBar].
+  final double? progress;
+  final String? meta;
+  final Widget? action;
+  final NooSummaryCardTone tone;
+
+  const NooSummaryCard({
+    super.key,
+    required this.stat,
+    this.caption,
+    this.progress,
+    this.meta,
+    this.action,
+    this.tone = NooSummaryCardTone.normal,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final bg = tone == NooSummaryCardTone.danger
+        ? colors.dangerSoft
+        : colors.surface;
+    final statColor = switch (tone) {
+      NooSummaryCardTone.danger => colors.danger,
+      NooSummaryCardTone.accent => colors.accentText,
+      NooSummaryCardTone.normal => colors.fg1,
+    };
+    final capColor = tone == NooSummaryCardTone.danger
+        ? colors.danger
+        : colors.fg2;
+
+    return Container(
+      padding: const EdgeInsets.all(18),
+      decoration: BoxDecoration(
+        color: bg,
+        borderRadius: BorderRadius.circular(NooRadii.card),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(stat, style: NooText.stat.copyWith(color: statColor)),
+          if (caption != null) ...[
+            const SizedBox(height: 6),
+            Text(
+              caption!,
+              style: NooText.body.copyWith(
+                fontSize: 14,
+                height: 1.2,
+                color: capColor,
+              ),
+            ),
+          ],
+          // Its own row below the description, not squeezed beside the
+          // stat/caption - there wasn't room to grow the action (e.g. a
+          // labelled "Sync now" button) without it colliding with a long
+          // caption.
+          if (action != null) ...[const SizedBox(height: 14), action!],
+          if (progress != null) ...[
+            const SizedBox(height: 14),
+            NooProgressBar(value: progress!),
+          ],
+          if (meta != null) ...[
+            const SizedBox(height: 14),
+            Text(meta!, style: NooText.meta.copyWith(color: colors.fg3)),
+          ],
+        ],
+      ),
+    );
+  }
+}

lib/widgets/noo/lists/noo_tab_order_row.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Reorderable tab row with a grip and pin toggle - max 5 pinned (Noo
+/// Design System project, `components/lists/TabOrderRow.jsx`, mobile
+/// variant).
+class NooTabOrderRow extends StatelessWidget {
+  final IconData icon;
+  final String label;
+  final bool pinned;
+  final VoidCallback? onTogglePin;
+
+  /// False hides the trailing pin toggle entirely - for reorder-only lists
+  /// (Settings' Action bar section) that have no "pinned" concept, just an
+  /// order.
+  final bool showPin;
+
+  /// This row's index inside its `ReorderableListView` - when set, only the
+  /// grip icon starts a drag (`ReorderableDragStartListener` wraps just the
+  /// icon, not the whole row), so a vertical drag/scroll starting anywhere
+  /// else on the row reaches the surrounding settings page's own scroll
+  /// view instead of being grabbed as a reorder. Null renders a plain,
+  /// non-interactive grip icon (e.g. a standalone preview/test).
+  final int? dragIndex;
+
+  const NooTabOrderRow({
+    super.key,
+    required this.icon,
+    required this.label,
+    this.pinned = false,
+    this.onTogglePin,
+    this.showPin = true,
+    this.dragIndex,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final grip = Icon(LucideIcons.gripVertical, size: 18, color: colors.fg3);
+    return Container(
+      height: 52,
+      padding: const EdgeInsets.symmetric(horizontal: 10),
+      color: colors.surface,
+      child: Row(
+        children: [
+          dragIndex == null
+              ? grip
+              : ReorderableDragStartListener(index: dragIndex!, child: grip),
+          const SizedBox(width: 12),
+          Icon(icon, size: 20, color: colors.fg2),
+          const SizedBox(width: 12),
+          Expanded(
+            child: Text(
+              label,
+              style: NooText.bodyL.copyWith(height: 1, color: colors.fg1),
+            ),
+          ),
+          if (showPin)
+            GestureDetector(
+              onTap: onTogglePin,
+              child: Container(
+                width: 36,
+                height: 36,
+                alignment: Alignment.center,
+                decoration: BoxDecoration(
+                  color: pinned ? colors.accentSoft : colors.surface2,
+                  shape: BoxShape.circle,
+                ),
+                child: Icon(
+                  pinned ? LucideIcons.pin : LucideIcons.pinOff,
+                  size: 16,
+                  color: pinned ? colors.accentText : colors.fg3,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/noo/media/noo_activity_item.dart

@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+import '../core/noo_avatar.dart';
+
+/// Activity feed entry (`DESIGN_SYSTEM.md` section 2, "Activity item"):
+/// a 36px [NooAvatar], then the sentence **actor** verb **object** tail
+/// with the time below in meta style, and an optional [trailing] slot on
+/// the right for the 32px/r10 file tile (built by the caller, so this
+/// doesn't depend on the file-kind mapping).
+class NooActivityItem extends StatelessWidget {
+  final String actor;
+
+  /// Plain text between actor and object, e.g. `"shared"`.
+  final String verb;
+
+  /// Bold subject of the action, e.g. a file name.
+  final String? object;
+
+  /// Plain text after the object, e.g. `"with you"`.
+  final String? tail;
+
+  final String? time;
+
+  /// Avatar initials; defaults to the first letter of [actor].
+  final String? initials;
+
+  /// One of [NooColors.avatarPalette].
+  final Color? avatarColor;
+
+  /// Uses the accent-soft current-user avatar.
+  final bool currentUser;
+
+  /// Right-aligned slot, typically a 32px file tile.
+  final Widget? trailing;
+
+  final VoidCallback? onTap;
+
+  const NooActivityItem({
+    super.key,
+    required this.actor,
+    required this.verb,
+    this.object,
+    this.tail,
+    this.time,
+    this.initials,
+    this.avatarColor,
+    this.currentUser = false,
+    this.trailing,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final base = NooText.body.copyWith(color: colors.fg1);
+    const bold = TextStyle(fontWeight: FontWeight.w600);
+
+    final fallbackInitials = actor.trim().isEmpty
+        ? ''
+        : actor.trim().characters.first.toUpperCase();
+
+    return Material(
+      type: MaterialType.transparency,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: NooSpace.md,
+            vertical: NooSpace.sm,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              NooAvatar(
+                initials: initials ?? fallbackInitials,
+                size: 36,
+                color: avatarColor,
+                current: currentUser,
+              ),
+              const SizedBox(width: NooSpace.sm),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text.rich(
+                      TextSpan(
+                        style: base,
+                        children: [
+                          TextSpan(text: actor, style: bold),
+                          TextSpan(text: ' $verb'),
+                          if (object != null) ...[
+                            const TextSpan(text: ' '),
+                            TextSpan(text: object, style: bold),
+                          ],
+                          if (tail != null) TextSpan(text: ' $tail'),
+                        ],
+                      ),
+                    ),
+                    if (time != null) ...[
+                      const SizedBox(height: NooSpace.xxs),
+                      Text(time!, style: NooText.meta.copyWith(color: colors.fg3)),
+                    ],
+                  ],
+                ),
+              ),
+              if (trailing != null) ...[
+                const SizedBox(width: NooSpace.sm),
+                trailing!,
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/media/noo_grid_card.dart

@@ -0,0 +1,179 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Grid-view file card: a thumbnail area (file-type soft colour + 32px
+/// icon, or a real [thumbnail]) above the name, an overflow button and a
+/// meta line (`DESIGN_SYSTEM.md` section 2, "Grid card"). Mobile lays these
+/// out 2-up with a 10px gap, desktop 5-up with a 16px gap - the parent grid
+/// owns that, this card just fills its cell.
+///
+/// The placeholder colours/icon are plain parameters rather than a file
+/// kind so this stays independent of the file-kind mapping; callers pass
+/// e.g. `accentSoft`/`accentText`/`LucideIcons.folder` for a folder.
+class NooGridCard extends StatelessWidget {
+  final String name;
+  final String? meta;
+
+  /// Soft fill behind [icon] when there's no [thumbnail] (e.g. `infoSoft`).
+  final Color? placeholderColor;
+  final IconData? icon;
+
+  /// Icon colour on the placeholder (e.g. `info`).
+  final Color? iconColor;
+
+  /// Real thumbnail (typically an `Image` with `BoxFit.cover`); replaces
+  /// the placeholder and is clipped to the card's top corners.
+  final Widget? thumbnail;
+
+  /// 104 (mobile) - 118 (desktop).
+  final double thumbnailHeight;
+
+  final bool selected;
+  final VoidCallback? onTap;
+  final VoidCallback? onLongPress;
+
+  /// Shows the overflow button when non-null.
+  final VoidCallback? onMore;
+
+  /// `ellipsis` on iOS/desktop, `ellipsis-vertical` on Android.
+  final bool verticalOverflowIcon;
+
+  const NooGridCard({
+    super.key,
+    required this.name,
+    this.meta,
+    this.placeholderColor,
+    this.icon,
+    this.iconColor,
+    this.thumbnail,
+    this.thumbnailHeight = 104,
+    this.selected = false,
+    this.onTap,
+    this.onLongPress,
+    this.onMore,
+    this.verticalOverflowIcon = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final radius = BorderRadius.circular(NooRadii.gridCard);
+
+    final thumb = SizedBox(
+      height: thumbnailHeight,
+      width: double.infinity,
+      child:
+          thumbnail ??
+          ColoredBox(
+            color: placeholderColor ?? colors.surface2,
+            child: Center(
+              child: Icon(
+                icon ?? LucideIcons.file,
+                size: 32,
+                color: iconColor ?? colors.fg2,
+              ),
+            ),
+          ),
+    );
+
+    return Material(
+      color: selected ? colors.accentSoft : colors.surface,
+      borderRadius: radius,
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        onLongPress: onLongPress,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            thumb,
+            Padding(
+              padding: EdgeInsets.fromLTRB(
+                NooSpace.sm,
+                10,
+                onMore != null ? NooSpace.xxs : NooSpace.sm,
+                NooSpace.sm,
+              ),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          name,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                          style: NooText.body.copyWith(
+                            fontSize: 14,
+                            height: 1.2,
+                            fontWeight: FontWeight.w500,
+                            color: selected ? colors.accentText : colors.fg1,
+                          ),
+                        ),
+                        if (meta != null) ...[
+                          const SizedBox(height: NooSpace.xxs),
+                          Text(
+                            meta!,
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                            style: NooText.meta.copyWith(
+                              fontSize: 12,
+                              color: colors.fg3,
+                            ),
+                          ),
+                        ],
+                      ],
+                    ),
+                  ),
+                  if (onMore != null)
+                    _OverflowButton(
+                      icon: verticalOverflowIcon
+                          ? LucideIcons.ellipsisVertical
+                          : LucideIcons.ellipsis,
+                      color: colors.fg3,
+                      onTap: onMore!,
+                    ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Compact 28px circular hit target so the overflow button doesn't push
+/// the name/meta column taller than the text itself.
+class _OverflowButton extends StatelessWidget {
+  final IconData icon;
+  final Color color;
+  final VoidCallback onTap;
+
+  const _OverflowButton({
+    required this.icon,
+    required this.color,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 28,
+      height: 28,
+      child: Material(
+        type: MaterialType.transparency,
+        shape: const CircleBorder(),
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: onTap,
+          child: Icon(icon, size: 16, color: color),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/noo/media/noo_photo_group.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import '../../../theme/design_tokens.dart';
+
+/// Month group heading for the Photos grid (`DESIGN_SYSTEM.md` section 2,
+/// "Photo grid"): group heading (Schibsted 18/500, fg-1) on the left and
+/// the item count in meta style (fg-3) on the right.
+class NooPhotoGroupHeader extends StatelessWidget {
+  final String title;
+
+  /// e.g. `"128 photos"`; hidden when null.
+  final String? count;
+
+  /// Horizontal inset - 16 on mobile (the grid itself is edge to edge),
+  /// 24 on desktop.
+  final EdgeInsetsGeometry padding;
+
+  const NooPhotoGroupHeader({
+    super.key,
+    required this.title,
+    this.count,
+    this.padding = const EdgeInsets.fromLTRB(
+      NooSpace.md,
+      NooSpace.lg,
+      NooSpace.md,
+      NooSpace.sm,
+    ),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Padding(
+      padding: padding,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.baseline,
+        textBaseline: TextBaseline.alphabetic,
+        children: [
+          Expanded(
+            child: Text(
+              title,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: NooText.groupHeading.copyWith(height: 1, color: colors.fg1),
+            ),
+          ),
+          if (count != null) ...[
+            const SizedBox(width: NooSpace.sm),
+            Text(count!, style: NooText.meta.copyWith(color: colors.fg3)),
+          ],
+        ],
+      ),
+    );
+  }
+}
+
+/// Square-tile photo grid (`DESIGN_SYSTEM.md` section 2, "Photo grid"):
+/// mobile is 3 columns with a 2px gap edge to edge ([NooPhotoGrid.mobile]
+/// defaults), desktop 8 columns with 4px ([NooPhotoGrid.desktop]).
+///
+/// Builds lazily from [itemBuilder] (typically returning a `NooPhotoTile`).
+/// Use the default constructor inside a `CustomScrollView` as a sliver
+/// (one per month group, after a `SliverToBoxAdapter(NooPhotoGroupHeader)`),
+/// or [NooPhotoGrid.box] for a non-scrolling box that sizes to its content
+/// (e.g. inside a `Column`/`ListView` item).
+class NooPhotoGrid extends StatelessWidget {
+  final int itemCount;
+  final IndexedWidgetBuilder itemBuilder;
+  final int columns;
+  final double gap;
+  final EdgeInsetsGeometry padding;
+  final bool _sliver;
+
+  /// Sliver form. Defaults are the mobile layout.
+  const NooPhotoGrid({
+    super.key,
+    required this.itemCount,
+    required this.itemBuilder,
+    this.columns = 3,
+    this.gap = 2,
+    this.padding = EdgeInsets.zero,
+  }) : _sliver = true;
+
+  /// Box form: a shrink-wrapped, non-scrolling grid.
+  const NooPhotoGrid.box({
+    super.key,
+    required this.itemCount,
+    required this.itemBuilder,
+    this.columns = 3,
+    this.gap = 2,
+    this.padding = EdgeInsets.zero,
+  }) : _sliver = false;
+
+  /// Mobile/desktop column + gap presets from the spec.
+  static const mobileColumns = 3;
+  static const mobileGap = 2.0;
+  static const desktopColumns = 8;
+  static const desktopGap = 4.0;
+
+  SliverGridDelegate get _delegate =>
+      SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: columns,
+        mainAxisSpacing: gap,
+        crossAxisSpacing: gap,
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    if (_sliver) {
+      return SliverPadding(
+        padding: padding,
+        sliver: SliverGrid(
+          gridDelegate: _delegate,
+          delegate: SliverChildBuilderDelegate(
+            itemBuilder,
+            childCount: itemCount,
+          ),
+        ),
+      );
+    }
+    return GridView.builder(
+      shrinkWrap: true,
+      primary: false,
+      physics: const NeverScrollableScrollPhysics(),
+      padding: padding,
+      gridDelegate: _delegate,
+      itemCount: itemCount,
+      itemBuilder: itemBuilder,
+    );
+  }
+}