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>
2026-09-26 01:51:58 -04:00
parent 51682a901d
commit 56784ef212
125 changed files with 15263 additions and 6804 deletions
@@ -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,
+                    ),
+                  ),
+                ),
+              ),
+          ],
+        ],
+      ),
+    );
+  }
+}