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,142 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../theme/design_tokens.dart';
+
+/// The desktop main-pane toolbar (DESIGN_SYSTEM.md 3, "Desktop"; the 64px
+/// header in `Desktop Screen.dc.html`): 24px leading / 20px trailing
+/// padding, 12px gaps, a 1px `line` along the bottom. Left to right:
+///
+/// - optional back/forward chevrons ([showHistoryNav] - macOS only; Windows
+///   doesn't show them), 20px, fg-3
+/// - the [title] (22 Schibsted) - or [titleWidget] instead, e.g. a
+///   breadcrumb in Files; it inherits the title [DefaultTextStyle]
+/// - flexible space
+/// - the [search] slot, 260px wide (pass a `NooSearchField(onSurface: true)`)
+/// - [actions] - `NooSegmentedControl`, `NooButton(size: toolbar)`, etc.
+///
+/// A [PreferredSizeWidget], so it can be the main pane's `Scaffold.appBar`.
+/// No [SafeArea]: it never sits under a status bar.
+class NooToolbar extends StatelessWidget implements PreferredSizeWidget {
+  final String? title;
+  final Widget? titleWidget;
+  final Widget? search;
+  final List<Widget> actions;
+
+  final bool showHistoryNav;
+
+  /// Back/forward handlers for [showHistoryNav]; a null one draws that
+  /// chevron disabled.
+  final VoidCallback? onBack;
+  final VoidCallback? onForward;
+
+  /// Defaults to `surface` - the toolbar belongs to the main pane.
+  final Color? backgroundColor;
+
+  const NooToolbar({
+    super.key,
+    this.title,
+    this.titleWidget,
+    this.search,
+    this.actions = const [],
+    this.showHistoryNav = false,
+    this.onBack,
+    this.onForward,
+    this.backgroundColor,
+  }) : assert(
+         title == null || titleWidget == null,
+         'Pass either title or titleWidget, not both.',
+       );
+
+  @override
+  Size get preferredSize => const Size.fromHeight(NooSizes.toolbar);
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    final titleStyle = NooText.title.copyWith(height: 1, color: colors.fg1);
+
+    return Material(
+      color: backgroundColor ?? colors.surface,
+      child: Container(
+        height: NooSizes.toolbar,
+        padding: const EdgeInsetsDirectional.only(start: 24, end: 20),
+        decoration: BoxDecoration(
+          border: Border(bottom: BorderSide(color: colors.line)),
+        ),
+        child: Row(
+          spacing: 12,
+          children: [
+            if (showHistoryNav)
+              Padding(
+                padding: const EdgeInsetsDirectional.only(end: 4),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  spacing: 4,
+                  children: [
+                    _HistoryButton(
+                      icon: LucideIcons.chevronLeft,
+                      tooltip: 'Back',
+                      onTap: onBack,
+                    ),
+                    _HistoryButton(
+                      icon: LucideIcons.chevronRight,
+                      tooltip: 'Forward',
+                      onTap: onForward,
+                    ),
+                  ],
+                ),
+              ),
+            Expanded(
+              child: Align(
+                alignment: AlignmentDirectional.centerStart,
+                child: DefaultTextStyle(
+                  style: titleStyle,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  child: titleWidget ?? Text(title ?? ''),
+                ),
+              ),
+            ),
+            if (search != null) SizedBox(width: 260, child: search),
+            ...actions,
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// A 20px fg-3 chevron with a 28px hover/press target. Dimmed when
+/// [onTap] is null (nothing to go back/forward to).
+class _HistoryButton extends StatelessWidget {
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback? onTap;
+
+  const _HistoryButton({
+    required this.icon,
+    required this.tooltip,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Tooltip(
+      message: tooltip,
+      child: Opacity(
+        opacity: onTap == null ? 0.45 : 1,
+        child: InkResponse(
+          onTap: onTap,
+          radius: 16,
+          splashFactory: NoSplash.splashFactory,
+          hoverColor: colors.surface2,
+          child: SizedBox.square(
+            dimension: 28,
+            child: Icon(icon, size: 20, color: colors.fg3),
+          ),
+        ),
+      ),
+    );
+  }
+}