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,134 @@
+import 'dart:io';
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../theme/design_tokens.dart';
+
+/// Pinch-zoom/pan/double-tap-to-zoom image page for [FileViewerScreen]'s
+/// swipeable `PageView` - one instance per image, from either a server URL
+/// or an on-disk path (offline mode).
+class MediaImagePreview extends StatefulWidget {
+  final String? url;
+  final Map<String, String> headers;
+
+  /// When set, read the image from this on-disk path instead of [url] -
+  /// already-resolved by the caller (see
+  /// `FileViewerScreen.localPathResolver`'s doc comment).
+  final String? localPath;
+
+  const MediaImagePreview({
+    super.key,
+    required this.url,
+    required this.headers,
+    this.localPath,
+  });
+
+  @override
+  State<MediaImagePreview> createState() => _MediaImagePreviewState();
+}
+
+class _MediaImagePreviewState extends State<MediaImagePreview>
+    with SingleTickerProviderStateMixin {
+  static const _doubleTapScale = 3.0;
+
+  final TransformationController _transformController =
+      TransformationController();
+  late final AnimationController _animController;
+  Animation<Matrix4>? _animation;
+  Offset _doubleTapPosition = Offset.zero;
+
+  @override
+  void initState() {
+    super.initState();
+    _animController =
+        AnimationController(
+          vsync: this,
+          duration: const Duration(milliseconds: 220),
+        )..addListener(() {
+          if (_animation != null) {
+            _transformController.value = _animation!.value;
+          }
+        });
+  }
+
+  @override
+  void dispose() {
+    _animController.dispose();
+    _transformController.dispose();
+    super.dispose();
+  }
+
+  void _onDoubleTapDown(TapDownDetails details) {
+    _doubleTapPosition = details.localPosition;
+  }
+
+  void _onDoubleTap() {
+    final isZoomedIn = _transformController.value.getMaxScaleOnAxis() > 1.01;
+    final Matrix4 endMatrix;
+    if (isZoomedIn) {
+      endMatrix = Matrix4.identity();
+    } else {
+      final p = _doubleTapPosition;
+      endMatrix = Matrix4.identity()
+        ..translateByDouble(
+          -p.dx * (_doubleTapScale - 1),
+          -p.dy * (_doubleTapScale - 1),
+          0,
+          1,
+        )
+        ..scaleByDouble(_doubleTapScale, _doubleTapScale, _doubleTapScale, 1);
+    }
+    _animation = Matrix4Tween(
+      begin: _transformController.value,
+      end: endMatrix,
+    ).animate(CurveTween(curve: Curves.easeOut).animate(_animController));
+    _animController.forward(from: 0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return SizedBox.expand(
+      child: GestureDetector(
+        onDoubleTapDown: _onDoubleTapDown,
+        onDoubleTap: _onDoubleTap,
+        child: InteractiveViewer(
+          transformationController: _transformController,
+          minScale: 0.8,
+          maxScale: 5.0,
+          child: Center(
+            child: widget.localPath != null
+                ? Image.file(
+                    File(widget.localPath!),
+                    fit: BoxFit.contain,
+                    errorBuilder: (context, error, stack) => Center(
+                      child: Icon(
+                        LucideIcons.imageOff,
+                        color: colors.fg3,
+                        size: 64,
+                      ),
+                    ),
+                  )
+                : Image.network(
+                    widget.url!,
+                    headers: widget.headers,
+                    fit: BoxFit.contain,
+                    loadingBuilder: (context, child, progress) {
+                      if (progress == null) return child;
+                      return Center(
+                        child: CircularProgressIndicator(color: colors.accent),
+                      );
+                    },
+                    errorBuilder: (context, error, stack) => Center(
+                      child: Icon(
+                        LucideIcons.imageOff,
+                        color: colors.fg3,
+                        size: 64,
+                      ),
+                    ),
+                  ),
+          ),
+        ),
+      ),
+    );
+  }
+}