From f6967e8cbbe2cb9a408c13c9509564098caa2825 Mon Sep 17 00:00:00 2001 From: vjrj Date: Sun, 12 Jul 2026 23:39:56 +0200 Subject: [PATCH] feat(profile): Material default avatar + square photo crop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Drop the DiceBear generated avatar (and dicebear_core/dicebear_styles/ flutter_svg): the default is again a Material coloured-initial disc from the pubkey. Picking a photo now goes through a square crop step (crop_your_image — pure Flutter, all platforms incl. desktop, Apache-2.0, only pulls the image package we already had) before the 24 KB thumbnail. --- apps/app_seeds/lib/ui/avatar_edit.dart | 18 ++-- apps/app_seeds/lib/ui/peer_avatar.dart | 88 ++++++----------- apps/app_seeds/lib/ui/photo_crop.dart | 87 +++++++++++++++++ apps/app_seeds/pubspec.yaml | 4 +- .../test/ui/chat_message_list_test.dart | 10 +- apps/app_seeds/test/ui/peer_avatar_test.dart | 24 +++-- apps/app_seeds/test/ui/photo_crop_test.dart | 48 ++++++++++ pubspec.lock | 96 ++----------------- 8 files changed, 200 insertions(+), 175 deletions(-) create mode 100644 apps/app_seeds/lib/ui/photo_crop.dart create mode 100644 apps/app_seeds/test/ui/photo_crop_test.dart diff --git a/apps/app_seeds/lib/ui/avatar_edit.dart b/apps/app_seeds/lib/ui/avatar_edit.dart index 294dd34..4ed15c3 100644 --- a/apps/app_seeds/lib/ui/avatar_edit.dart +++ b/apps/app_seeds/lib/ui/avatar_edit.dart @@ -2,14 +2,16 @@ import 'package:flutter/material.dart'; import '../i18n/strings.g.dart'; import '../services/offer_thumbnail.dart' show offerThumbnailDataUri; +import 'photo_crop.dart'; import 'photo_pick.dart'; import 'theme.dart'; -/// Lets the user choose a profile avatar: take/pick a photo (shrunk to a tiny -/// inline thumbnail) or remove it. With no photo, a generated avatar is used. +/// Lets the user choose a profile avatar: take/pick a photo, square-crop it, and +/// keep it as a tiny inline thumbnail — or remove it. With no photo, the +/// coloured-initial disc is used. /// /// Returns the new avatar value (a `data:` photo thumbnail), an empty string to -/// clear it (falls back to the generated avatar), or null when cancelled. +/// clear it (falls back to the coloured-initial disc), or null when cancelled. Future showAvatarPicker( BuildContext context, { required String current, @@ -37,11 +39,11 @@ Future showAvatarPicker( title: Text(t.avatar.fromPhoto), onTap: () async { final bytes = await pickPhoto(sheetContext); - if (bytes == null) return; - final uri = offerThumbnailDataUri(bytes, maxBytes: 24000); - if (sheetContext.mounted) { - Navigator.of(sheetContext).pop(uri ?? ''); - } + if (bytes == null || !sheetContext.mounted) return; + final cropped = await cropToSquare(sheetContext, bytes); + if (cropped == null || !sheetContext.mounted) return; + final uri = offerThumbnailDataUri(cropped, maxBytes: 24000); + Navigator.of(sheetContext).pop(uri ?? ''); }, ), if (current.isNotEmpty) ...[ diff --git a/apps/app_seeds/lib/ui/peer_avatar.dart b/apps/app_seeds/lib/ui/peer_avatar.dart index 2dd45c0..d501b9d 100644 --- a/apps/app_seeds/lib/ui/peer_avatar.dart +++ b/apps/app_seeds/lib/ui/peer_avatar.dart @@ -1,7 +1,4 @@ -import 'package:dicebear_core/dicebear_core.dart' show Avatar, Style; -import 'package:dicebear_styles/thumbs.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import '../services/offer_thumbnail.dart' show decodeDataUri; import '../services/profile_cache.dart'; @@ -9,10 +6,11 @@ import 'avatar.dart'; import 'seed_glyph.dart'; /// A small round avatar for a person. When they've set an avatar ([picture] — a -/// `data:` photo thumbnail or a `tane:seed:` illustration) it's shown; -/// otherwise it falls back to a [GeneratedAvatar] drawn deterministically from -/// their [pubkey]. Same pubkey → same picture on every device, so a person -/// stays visually recognizable without sharing anything. +/// `data:` photo thumbnail, or a legacy `tane:seed:` illustration) it's +/// shown; otherwise it falls back to a standard disc coloured deterministically +/// from their [pubkey], carrying the first letter of their [name] (a person icon +/// when unknown). Same pubkey → same colour on every device, so a person stays +/// visually recognizable without sharing anything. class PeerAvatar extends StatelessWidget { const PeerAvatar({ required this.pubkey, @@ -25,7 +23,7 @@ class PeerAvatar extends StatelessWidget { final String pubkey; final String? name; - /// The person's chosen avatar value; null/empty → the [GeneratedAvatar]. + /// The person's chosen avatar value; null/empty → the coloured-initial disc. final String? picture; final double radius; @@ -49,61 +47,35 @@ class PeerAvatar extends StatelessWidget { } } - return GeneratedAvatar(pubkey: pubkey, name: name, radius: radius); - } -} - -/// The `thumbs` DiceBear style, parsed once — [Style.parse] validates the style -/// definition against its schema, which is not free to repeat per build. -final _thumbsStyle = Style.parse(thumbs); - -/// Rendered-SVG memo keyed by pubkey, so a person's avatar is generated once and -/// reused across every rebuild and list row rather than re-rendered each time. -final _svgCache = {}; - -/// Strips the `` block (the style's CC0 licence notice) that -/// flutter_svg cannot parse and logs a warning for; CC0 requires no attribution -/// in the rendered image, and the licence still ships with the package source. -final _metadataElement = RegExp(r']*>.*?', dotAll: true); - -String _renderThumbs(String pubkey) => - Avatar(_thumbsStyle, {'seed': pubkey}).svg.replaceAll(_metadataElement, ''); - -/// The deterministic default avatar for a person with no chosen [picture]: a -/// friendly DiceBear "thumbs" face (CC0) seeded from their [pubkey], so the same -/// key yields the same face on every device with nothing shared. Rendered as an -/// SVG (no network, no assets). Exposes [pubkey] so call sites/tests can find it. -class GeneratedAvatar extends StatelessWidget { - const GeneratedAvatar({ - required this.pubkey, - this.name, - this.radius = 14, - super.key, - }); - - final String pubkey; - final String? name; - final double radius; - - @override - Widget build(BuildContext context) { - final svg = _svgCache[pubkey] ??= _renderThumbs(pubkey); - return Semantics( - label: name, - image: true, - child: ClipOval( - child: SizedBox.square( - dimension: radius * 2, - child: SvgPicture.string(svg, fit: BoxFit.cover), - ), - ), + final letter = _initial(name); + return CircleAvatar( + radius: radius, + backgroundColor: peerAvatarColor(pubkey), + child: letter == null + ? Icon(Icons.person_outline, size: radius, color: Colors.white) + : Text( + letter, + style: TextStyle( + color: Colors.white, + fontSize: radius, + fontWeight: FontWeight.w600, + ), + ), ); } + + static String? _initial(String? name) { + if (name == null) return null; + final trimmed = name.trim(); + if (trimmed.isEmpty) return null; + // characters.first handles emoji/combining marks safely. + return trimmed.characters.first.toUpperCase(); + } } /// A [PeerAvatar] that looks the person's published avatar up from the -/// [ProfileCache] (their kind:0 `picture`), falling back to the generated -/// pattern while it loads or when none is cached / no cache is available. Use at +/// [ProfileCache] (their kind:0 `picture`), falling back to the coloured-initial +/// disc while it loads or when none is cached / no cache is available. Use at /// list/row sites (one avatar each); for many avatars of the same few people /// (chat bubbles) resolve the picture once into state instead. class CachedAvatar extends StatelessWidget { diff --git a/apps/app_seeds/lib/ui/photo_crop.dart b/apps/app_seeds/lib/ui/photo_crop.dart new file mode 100644 index 0000000..a9e55d4 --- /dev/null +++ b/apps/app_seeds/lib/ui/photo_crop.dart @@ -0,0 +1,87 @@ +import 'dart:typed_data'; + +import 'package:crop_your_image/crop_your_image.dart'; +import 'package:flutter/material.dart'; + +import 'theme.dart'; + +/// Lets the user square-crop the picked [bytes] before it's saved as an avatar. +/// Returns the cropped image bytes, or null if cancelled. Pure Flutter (works on +/// every platform, desktop included) — no native cropper, no plaintext on disk. +Future cropToSquare(BuildContext context, Uint8List bytes) { + return Navigator.of(context).push( + MaterialPageRoute( + fullscreenDialog: true, + builder: (context) => _CropPage(bytes: bytes), + ), + ); +} + +class _CropPage extends StatefulWidget { + const _CropPage({required this.bytes}); + + final Uint8List bytes; + + @override + State<_CropPage> createState() => _CropPageState(); +} + +class _CropPageState extends State<_CropPage> { + final _controller = CropController(); + var _cropping = false; + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: Colors.black, + appBar: AppBar( + backgroundColor: Colors.black, + foregroundColor: Colors.white, + leading: IconButton( + key: const Key('crop.cancel'), + icon: const Icon(Icons.close), + onPressed: () => Navigator.of(context).pop(), + ), + actions: [ + if (_cropping) + const Padding( + padding: EdgeInsets.all(14), + child: SizedBox( + width: 20, + height: 20, + child: CircularProgressIndicator(strokeWidth: 2), + ), + ) + else + IconButton( + key: const Key('crop.confirm'), + icon: const Icon(Icons.check), + onPressed: () { + setState(() => _cropping = true); + _controller.crop(); + }, + ), + ], + ), + body: Crop( + image: widget.bytes, + controller: _controller, + aspectRatio: 1, + withCircleUi: true, + baseColor: Colors.black, + maskColor: Colors.black.withValues(alpha: 0.6), + cornerDotBuilder: (size, edgeAlignment) => + const DotControl(color: seedGreen), + onCropped: (result) { + if (!mounted) return; + switch (result) { + case CropSuccess(:final croppedImage): + Navigator.of(context).pop(croppedImage); + case CropFailure(): + setState(() => _cropping = false); + } + }, + ), + ); + } +} diff --git a/apps/app_seeds/pubspec.yaml b/apps/app_seeds/pubspec.yaml index 2aff431..c40545d 100644 --- a/apps/app_seeds/pubspec.yaml +++ b/apps/app_seeds/pubspec.yaml @@ -78,9 +78,7 @@ dependencies: # while the app is foregrounded. Mobile/Linux/macOS only; a no-op on web and # Windows. Foreground-only by design — background/push is a later concern. flutter_local_notifications: ^18.0.1 - dicebear_core: ^10.3.0 - dicebear_styles: ^10.2.0 - flutter_svg: ^2.3.0 + crop_your_image: ^2.0.0 dev_dependencies: flutter_test: diff --git a/apps/app_seeds/test/ui/chat_message_list_test.dart b/apps/app_seeds/test/ui/chat_message_list_test.dart index 1feb583..2eea2a2 100644 --- a/apps/app_seeds/test/ui/chat_message_list_test.dart +++ b/apps/app_seeds/test/ui/chat_message_list_test.dart @@ -124,14 +124,14 @@ void main() { await tester.pumpWidget(host(cubit)); await tester.pump(); - // Both sides carry an avatar, each generated from its own pubkey — + // Both sides carry an avatar, and the two people are different colours — // so you can tell who said what at a glance. expect(find.byType(PeerAvatar), findsNWidgets(2)); - final generated = tester - .widgetList(find.byType(GeneratedAvatar)) + final discs = tester + .widgetList(find.byType(CircleAvatar)) .toList(); - expect(generated, hasLength(2)); - expect(generated.first.pubkey, isNot(generated.last.pubkey)); + expect(discs, hasLength(2)); + expect(discs.first.backgroundColor, isNot(discs.last.backgroundColor)); }); testWidgets('a new message lands in view at the bottom, not below the fold', ( diff --git a/apps/app_seeds/test/ui/peer_avatar_test.dart b/apps/app_seeds/test/ui/peer_avatar_test.dart index a19e9e4..64546d6 100644 --- a/apps/app_seeds/test/ui/peer_avatar_test.dart +++ b/apps/app_seeds/test/ui/peer_avatar_test.dart @@ -36,19 +36,17 @@ void main() { home: Scaffold(body: Center(child: child)), ); - testWidgets('falls back to a generated avatar keyed by pubkey', ( - tester, - ) async { + testWidgets('shows the name initial when known', (tester) async { await tester.pumpWidget(host(PeerAvatar(pubkey: 'aa', name: 'rosa'))); - final generated = - tester.widget(find.byType(GeneratedAvatar)); - expect(generated.pubkey, 'aa'); // pubkey, not name → stable across renames - expect(find.byType(Text), findsNothing); + expect(find.text('R'), findsOneWidget); // uppercased first letter }); - testWidgets('generates it even when the name is unknown', (tester) async { + testWidgets('falls back to a person icon when the name is unknown', ( + tester, + ) async { await tester.pumpWidget(host(const PeerAvatar(pubkey: 'aa'))); - expect(find.byType(GeneratedAvatar), findsOneWidget); + expect(find.byIcon(Icons.person_outline), findsOneWidget); + expect(find.byType(Text), findsNothing); }); testWidgets('renders a seed illustration when the avatar is a token', ( @@ -75,19 +73,19 @@ void main() { expect(find.byType(SeedGlyph), findsOneWidget); }); - testWidgets('falls back to the generated avatar when nothing is cached', ( + testWidgets('falls back to the initial when nothing is cached', ( tester, ) async { final cache = ProfileCache(InMemorySecretStore()); await tester.pumpWidget(host( CachedAvatar(pubkey: 'peer2', name: 'Bea', cache: cache))); await tester.pumpAndSettle(); - expect(find.byType(GeneratedAvatar), findsOneWidget); + expect(find.text('B'), findsOneWidget); }); - testWidgets('no cache → the generated avatar', (tester) async { + testWidgets('no cache → the coloured-initial disc', (tester) async { await tester.pumpWidget(host(const CachedAvatar(pubkey: 'x', name: 'Bea'))); - expect(find.byType(GeneratedAvatar), findsOneWidget); + expect(find.text('B'), findsOneWidget); }); }); } diff --git a/apps/app_seeds/test/ui/photo_crop_test.dart b/apps/app_seeds/test/ui/photo_crop_test.dart new file mode 100644 index 0000000..d7b8510 --- /dev/null +++ b/apps/app_seeds/test/ui/photo_crop_test.dart @@ -0,0 +1,48 @@ +import 'dart:typed_data'; + +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:image/image.dart' as img; +import 'package:tane/ui/photo_crop.dart'; + +void main() { + // A small but real PNG the cropper can decode. + final bytes = Uint8List.fromList( + img.encodePng(img.Image(width: 32, height: 32)), + ); + + testWidgets('cropToSquare shows a cancel/confirm UI and cancel returns null', ( + tester, + ) async { + Uint8List? result; + var returned = false; + await tester.pumpWidget(MaterialApp( + home: Builder( + builder: (context) => Scaffold( + body: Center( + child: ElevatedButton( + onPressed: () async { + result = await cropToSquare(context, bytes); + returned = true; + }, + child: const Text('open'), + ), + ), + ), + ), + )); + + await tester.tap(find.text('open')); + await tester.pump(); // push the crop route + await tester.pump(const Duration(milliseconds: 100)); + + expect(find.byKey(const Key('crop.confirm')), findsOneWidget); + expect(find.byKey(const Key('crop.cancel')), findsOneWidget); + + await tester.tap(find.byKey(const Key('crop.cancel'))); + await tester.pump(); // pop the crop route + + expect(returned, isTrue); + expect(result, isNull); // cancelling yields no image + }); +} diff --git a/pubspec.lock b/pubspec.lock index 1f425f5..c5b37c4 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -241,6 +241,14 @@ packages: url: "https://pub.dev" source: hosted version: "1.15.1" + crop_your_image: + dependency: transitive + description: + name: crop_your_image + sha256: "14c8977b11a009dc5e73e0f6522970f93363e38183f1b2ffefe1676dc9c3f49d" + url: "https://pub.dev" + source: hosted + version: "2.0.0" cross_file: dependency: transitive description: @@ -297,30 +305,6 @@ packages: url: "https://pub.dev" source: hosted version: "0.7.14" - dicebear_core: - dependency: transitive - description: - name: dicebear_core - sha256: "7a38725ed8895feeeb6d34a6a0946322a03649077fa49f9a711530e035fb53f2" - url: "https://pub.dev" - source: hosted - version: "10.3.0" - dicebear_schema: - dependency: transitive - description: - name: dicebear_schema - sha256: dfbaa477e4e7ed1500ae8f0263ecf7db3081c492489b817a401a52e21e0ace9c - url: "https://pub.dev" - source: hosted - version: "1.3.0" - dicebear_styles: - dependency: transitive - description: - name: dicebear_styles - sha256: "4761fc26da7eb12b5b499be4efbd7cadc9186e301095199bbf424a3150bcd866" - url: "https://pub.dev" - source: hosted - version: "10.2.0" drift: dependency: transitive description: @@ -552,14 +536,6 @@ packages: url: "https://pub.dev" source: hosted version: "3.1.2" - flutter_svg: - dependency: transitive - description: - name: flutter_svg - sha256: "35882981abcbfb8c15b286f0cd690ff25bac12d95eff3e25ee207f37d4c42e7f" - url: "https://pub.dev" - source: hosted - version: "2.3.0" flutter_tesseract_ocr: dependency: transitive description: @@ -836,14 +812,6 @@ packages: url: "https://pub.dev" source: hosted version: "4.12.0" - json_schema: - dependency: transitive - description: - name: json_schema - sha256: f37d9c3fdfe8c9aae55fdfd5af815d24ce63c3a0f6a2c1f0982c30f43643fa1a - url: "https://pub.dev" - source: hosted - version: "5.2.2" leak_tracker: dependency: transitive description: @@ -1156,14 +1124,6 @@ packages: url: "https://pub.dev" source: hosted version: "3.0.2" - quiver: - dependency: transitive - description: - name: quiver - sha256: ea0b925899e64ecdfbf9c7becb60d5b50e706ade44a85b2363be2a22d88117d2 - url: "https://pub.dev" - source: hosted - version: "3.2.2" recase: dependency: transitive description: @@ -1180,14 +1140,6 @@ packages: url: "https://pub.dev" source: hosted version: "0.6.0" - rfc_6901: - dependency: transitive - description: - name: rfc_6901 - sha256: "6a43b1858dca2febaf93e15639aa6b0c49ccdfd7647775f15a499f872b018154" - url: "https://pub.dev" - source: hosted - version: "0.2.1" serial_csv: dependency: transitive description: @@ -1409,14 +1361,6 @@ packages: url: "https://pub.dev" source: hosted version: "2.3.1" - uri: - dependency: transitive - description: - name: uri - sha256: "889eea21e953187c6099802b7b4cf5219ba8f3518f604a1033064d45b1b8268a" - url: "https://pub.dev" - source: hosted - version: "1.0.0" url_launcher: dependency: transitive description: @@ -1489,30 +1433,6 @@ packages: url: "https://pub.dev" source: hosted version: "4.5.3" - vector_graphics: - dependency: transitive - description: - name: vector_graphics - sha256: "2306c03da2ba81724afeb589c351ebbc0aa7d86005925be8f8735856dbe5e42d" - url: "https://pub.dev" - source: hosted - version: "1.2.2" - vector_graphics_codec: - dependency: transitive - description: - name: vector_graphics_codec - sha256: "99fd9fbd34d9f9a32efd7b6a6aae14125d8237b10403b422a6a6dfeac2806146" - url: "https://pub.dev" - source: hosted - version: "1.1.13" - vector_graphics_compiler: - dependency: transitive - description: - name: vector_graphics_compiler - sha256: "142a9146f447d15b10bdc00e21d5f4d83e5b32bb5f8f8f5a04c75311344923a3" - url: "https://pub.dev" - source: hosted - version: "1.2.6" vector_math: dependency: transitive description: