Rebuild UI on the Noo design system

Replaces the Material 3 screens with the Noo design system: warm
neutrals, one violet accent, pill controls, Schibsted Grotesk/
Instrument Sans, Lucide icons, no gradients/shadows.

- New lib/widgets/noo/ component kit (core, lists, files, media, nav,
  overlays) plus lib/theme/design_tokens.dart for the color/type/space/
  radius/motion tokens.
- Rebuilt the app shell (top/bottom bars, drawer, desktop sidebar and
  toolbar), every tab (Files/Offline, Photos, Favorites, Recent,
  Activity, Trash, Shares), Settings, the lock and login screens, the
  media viewer, search, the details/share sheets, and the share-upload
  and move/copy destination pickers.
- Added a design canvas (linked from DESIGN_SYSTEM.md) covering the
  screens the spec didn't already describe, with matching Android and
  iOS chrome; wrote up the approved recipes into DESIGN_SYSTEM.md §4.
- Removed now-dead legacy widgets (media_grid_tile, swipeable_item,
  sync_status_badge, selectable_thumbnail) and updated
  architecture.md/styling.md/standards.md to describe the new
  structure and component/testing conventions.
- Added widget tests for the noo/ component kit.

This is a UI-only rework: no provider/model/service behavior changed.

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

lib/widgets/sort_menu_button.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import '../providers/files_controller.dart';
+import '../theme/design_tokens.dart';
 
 String sortFieldLabel(FileSortField field) {
   switch (field) {
@@ -20,21 +21,28 @@ class SortMenuButton extends StatelessWidget {
   final FileSortField field;
   final ValueChanged<FileSortField> onChanged;
 
+  /// An extra control (e.g. an ascending/descending toggle) shown inside
+  /// the same pill, between the label and the menu's own dropdown chevron -
+  /// visually one "Name ↑" chip (DESIGN_SYSTEM.md's sort chip) even though
+  /// the two behaviors (pick a field / flip direction) stay separate taps.
+  final Widget? trailing;
+
   const SortMenuButton({
     super.key,
     required this.field,
     required this.onChanged,
+    this.trailing,
   });
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+    final colors = context.nooColors;
 
     return PopupMenuButton<FileSortField>(
       initialValue: field,
       onSelected: onChanged,
       offset: const Offset(0, 36),
+      color: colors.surface,
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
       itemBuilder: (context) => FileSortField.values.map((f) {
         return PopupMenuItem(
@@ -44,44 +52,45 @@ class SortMenuButton extends StatelessWidget {
               SizedBox(
                 width: 20,
                 child: f == field
-                    ? Icon(
-                        Icons.check_rounded,
-                        size: 18,
-                        color: colorScheme.primary,
-                      )
+                    ? Icon(Icons.check_rounded, size: 18, color: colors.accentText)
                     : null,
               ),
               const SizedBox(width: 8),
-              Text(sortFieldLabel(f)),
+              Text(sortFieldLabel(f), style: NooText.body.copyWith(color: colors.fg1)),
             ],
           ),
         );
       }).toList(),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 4),
+      child: Container(
+        height: 34,
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        decoration: BoxDecoration(
+          color: colors.surface,
+          borderRadius: BorderRadius.circular(NooRadii.pill),
+        ),
         child: Row(
-          // A plain Text child in a Row always takes its full intrinsic
-          // width no matter what maxLines/overflow say - Flexible is what
-          // actually lets it shrink to whatever space this row has left
-          // (it's squeezed by favorite/hidden/storage/list-grid toggles
-          // alongside it) so the ellipsis can kick in instead of
-          // overflowing.
+          mainAxisSize: MainAxisSize.min,
           children: [
+            Icon(Icons.swap_vert_rounded, size: 16, color: colors.fg1),
+            const SizedBox(width: 6),
+            // A plain Text child in a Row always takes its full intrinsic
+            // width no matter what maxLines/overflow say - Flexible is what
+            // actually lets it shrink to whatever space this row has left
+            // (it's squeezed by hidden/storage/list-grid toggles alongside
+            // it) so the ellipsis can kick in instead of overflowing.
             Flexible(
               child: Text(
                 sortFieldLabel(field),
-                style: theme.textTheme.bodyMedium?.copyWith(
-                  fontWeight: FontWeight.w600,
-                  color: colorScheme.onSurfaceVariant,
+                style: NooText.body.copyWith(
+                  fontWeight: FontWeight.w500,
+                  color: colors.fg1,
                 ),
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
               ),
             ),
-            Icon(
-              Icons.arrow_drop_down_rounded,
-              color: colorScheme.onSurfaceVariant,
-            ),
+            ?trailing,
+            Icon(Icons.arrow_drop_down_rounded, color: colors.fg1),
           ],
         ),
       ),