feat(profile): generated default avatars (boring-avatars beam) from pubkey
People without a photo or seed illustration now get a deterministic pattern avatar drawn from their pubkey (flutter_boring_avatars, MIT), in an earthy seed-tone palette, replacing the coloured-initial disc. Same pubkey renders the same picture on every device with nothing shared.
This commit is contained in:
parent
e65d82017a
commit
1c2b3d5e8d
6 changed files with 59 additions and 45 deletions
|
|
@ -6,7 +6,7 @@ import 'seed_glyph.dart';
|
||||||
/// media server, like offer photos);
|
/// media server, like offer photos);
|
||||||
/// - `tane:seed:<name>` — one of our own seed illustrations (for people who'd
|
/// - `tane:seed:<name>` — one of our own seed illustrations (for people who'd
|
||||||
/// rather not put a real photo — pseudonymity stays the default);
|
/// rather not put a real photo — pseudonymity stays the default);
|
||||||
/// - empty — the deterministic coloured disc with the name's initial.
|
/// - empty — a pattern avatar generated deterministically from the pubkey.
|
||||||
const avatarGlyphPrefix = 'tane:seed:';
|
const avatarGlyphPrefix = 'tane:seed:';
|
||||||
|
|
||||||
/// The seed illustrations offered as ready-made avatars. Names are the stable
|
/// The seed illustrations offered as ready-made avatars. Names are the stable
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,27 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_boring_avatars/flutter_boring_avatars.dart';
|
||||||
|
|
||||||
import '../services/offer_thumbnail.dart' show decodeDataUri;
|
import '../services/offer_thumbnail.dart' show decodeDataUri;
|
||||||
import '../services/profile_cache.dart';
|
import '../services/profile_cache.dart';
|
||||||
import 'avatar.dart';
|
import 'avatar.dart';
|
||||||
import 'seed_glyph.dart';
|
import 'seed_glyph.dart';
|
||||||
|
import 'theme.dart';
|
||||||
|
|
||||||
|
/// Palette for the generated default avatars — earthy seed-and-leaf tones so
|
||||||
|
/// the fallback art sits inside the app's palette rather than fighting it.
|
||||||
|
const _generatedAvatarPalette = BoringAvatarPalette([
|
||||||
|
seedGreen,
|
||||||
|
seedRating, // warm amber
|
||||||
|
Color(0xFFB5541F), // terracotta pot
|
||||||
|
Color(0xFF6B4F2A), // seed-coat brown
|
||||||
|
Color(0xFFD3E8C8), // pale leaf
|
||||||
|
]);
|
||||||
|
|
||||||
/// A small round avatar for a person. When they've set an avatar ([picture] — a
|
/// A small round avatar for a person. When they've set an avatar ([picture] — a
|
||||||
/// `data:` photo thumbnail or a `tane:seed:<glyph>` illustration) it's shown;
|
/// `data:` photo thumbnail or a `tane:seed:<glyph>` illustration) it's shown;
|
||||||
/// otherwise it falls back to a deterministic disc coloured from their [pubkey],
|
/// otherwise it falls back to a generated pattern drawn deterministically from
|
||||||
/// with the first letter of their [name] (else a person glyph). Same pubkey →
|
/// their [pubkey] (boring-avatars "beam"). Same pubkey → same picture on every
|
||||||
/// same colour on every device, so a person stays visually recognizable.
|
/// device, so a person stays visually recognizable without sharing anything.
|
||||||
class PeerAvatar extends StatelessWidget {
|
class PeerAvatar extends StatelessWidget {
|
||||||
const PeerAvatar({
|
const PeerAvatar({
|
||||||
required this.pubkey,
|
required this.pubkey,
|
||||||
|
|
@ -46,35 +58,25 @@ class PeerAvatar extends StatelessWidget {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
final letter = _initial(name);
|
return Semantics(
|
||||||
return CircleAvatar(
|
label: name,
|
||||||
radius: radius,
|
image: true,
|
||||||
backgroundColor: peerAvatarColor(pubkey),
|
child: SizedBox.square(
|
||||||
child: letter == null
|
dimension: radius * 2,
|
||||||
? Icon(Icons.person_outline, size: radius, color: Colors.white)
|
child: BoringAvatar(
|
||||||
: Text(
|
name: pubkey,
|
||||||
letter,
|
type: BoringAvatarType.beam,
|
||||||
style: TextStyle(
|
palette: _generatedAvatarPalette,
|
||||||
color: Colors.white,
|
shape: const OvalBorder(),
|
||||||
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
|
/// A [PeerAvatar] that looks the person's published avatar up from the
|
||||||
/// [ProfileCache] (their kind:0 `picture`), falling back to the coloured-initial
|
/// [ProfileCache] (their kind:0 `picture`), falling back to the generated
|
||||||
/// disc while it loads or when none is cached / no cache is available. Use at
|
/// pattern 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
|
/// list/row sites (one avatar each); for many avatars of the same few people
|
||||||
/// (chat bubbles) resolve the picture once into state instead.
|
/// (chat bubbles) resolve the picture once into state instead.
|
||||||
class CachedAvatar extends StatelessWidget {
|
class CachedAvatar extends StatelessWidget {
|
||||||
|
|
|
||||||
|
|
@ -78,6 +78,7 @@ dependencies:
|
||||||
# while the app is foregrounded. Mobile/Linux/macOS only; a no-op on web and
|
# 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.
|
# Windows. Foreground-only by design — background/push is a later concern.
|
||||||
flutter_local_notifications: ^18.0.1
|
flutter_local_notifications: ^18.0.1
|
||||||
|
flutter_boring_avatars: ^2.1.0
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import 'dart:async';
|
||||||
import 'package:commons_core/commons_core.dart';
|
import 'package:commons_core/commons_core.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||||
|
import 'package:flutter_boring_avatars/flutter_boring_avatars.dart';
|
||||||
import 'package:flutter_localizations/flutter_localizations.dart';
|
import 'package:flutter_localizations/flutter_localizations.dart';
|
||||||
import 'package:flutter_test/flutter_test.dart';
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
import 'package:tane/domain/chat_timeline.dart';
|
import 'package:tane/domain/chat_timeline.dart';
|
||||||
|
|
@ -124,14 +125,14 @@ void main() {
|
||||||
await tester.pumpWidget(host(cubit));
|
await tester.pumpWidget(host(cubit));
|
||||||
await tester.pump();
|
await tester.pump();
|
||||||
|
|
||||||
// Both sides carry an avatar, and the two people are different colours —
|
// Both sides carry an avatar, each generated from its own pubkey —
|
||||||
// so you can tell who said what at a glance.
|
// so you can tell who said what at a glance.
|
||||||
expect(find.byType(PeerAvatar), findsNWidgets(2));
|
expect(find.byType(PeerAvatar), findsNWidgets(2));
|
||||||
final discs = tester
|
final generated = tester
|
||||||
.widgetList<CircleAvatar>(find.byType(CircleAvatar))
|
.widgetList<BoringAvatar>(find.byType(BoringAvatar))
|
||||||
.toList();
|
.toList();
|
||||||
expect(discs, hasLength(2));
|
expect(generated, hasLength(2));
|
||||||
expect(discs.first.backgroundColor, isNot(discs.last.backgroundColor));
|
expect(generated.first.name, isNot(generated.last.name));
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('a new message lands in view at the bottom, not below the fold', (
|
testWidgets('a new message lands in view at the bottom, not below the fold', (
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_boring_avatars/flutter_boring_avatars.dart';
|
||||||
import 'package:flutter_test/flutter_test.dart';
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
import 'package:tane/services/profile_cache.dart';
|
import 'package:tane/services/profile_cache.dart';
|
||||||
import 'package:tane/ui/avatar.dart';
|
import 'package:tane/ui/avatar.dart';
|
||||||
|
|
@ -37,19 +38,20 @@ void main() {
|
||||||
home: Scaffold(body: Center(child: child)),
|
home: Scaffold(body: Center(child: child)),
|
||||||
);
|
);
|
||||||
|
|
||||||
testWidgets('shows the name initial when known', (tester) async {
|
testWidgets('falls back to a generated pattern keyed by pubkey', (
|
||||||
await tester.pumpWidget(host(PeerAvatar(pubkey: 'aa', name: 'rosa')));
|
|
||||||
expect(find.text('R'), findsOneWidget); // uppercased first letter
|
|
||||||
});
|
|
||||||
|
|
||||||
testWidgets('falls back to a glyph when the name is unknown', (
|
|
||||||
tester,
|
tester,
|
||||||
) async {
|
) async {
|
||||||
await tester.pumpWidget(host(const PeerAvatar(pubkey: 'aa')));
|
await tester.pumpWidget(host(PeerAvatar(pubkey: 'aa', name: 'rosa')));
|
||||||
expect(find.byIcon(Icons.person_outline), findsOneWidget);
|
final generated = tester.widget<BoringAvatar>(find.byType(BoringAvatar));
|
||||||
|
expect(generated.name, 'aa'); // pubkey, not name → stable across renames
|
||||||
expect(find.byType(Text), findsNothing);
|
expect(find.byType(Text), findsNothing);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('generates it even when the name is unknown', (tester) async {
|
||||||
|
await tester.pumpWidget(host(const PeerAvatar(pubkey: 'aa')));
|
||||||
|
expect(find.byType(BoringAvatar), findsOneWidget);
|
||||||
|
});
|
||||||
|
|
||||||
testWidgets('renders a seed illustration when the avatar is a token', (
|
testWidgets('renders a seed illustration when the avatar is a token', (
|
||||||
tester,
|
tester,
|
||||||
) async {
|
) async {
|
||||||
|
|
@ -74,19 +76,19 @@ void main() {
|
||||||
expect(find.byType(SeedGlyph), findsOneWidget);
|
expect(find.byType(SeedGlyph), findsOneWidget);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('falls back to the initial when nothing is cached', (
|
testWidgets('falls back to the generated pattern when nothing is cached', (
|
||||||
tester,
|
tester,
|
||||||
) async {
|
) async {
|
||||||
final cache = ProfileCache(InMemorySecretStore());
|
final cache = ProfileCache(InMemorySecretStore());
|
||||||
await tester.pumpWidget(host(
|
await tester.pumpWidget(host(
|
||||||
CachedAvatar(pubkey: 'peer2', name: 'Bea', cache: cache)));
|
CachedAvatar(pubkey: 'peer2', name: 'Bea', cache: cache)));
|
||||||
await tester.pumpAndSettle();
|
await tester.pumpAndSettle();
|
||||||
expect(find.text('B'), findsOneWidget);
|
expect(find.byType(BoringAvatar), findsOneWidget);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('no cache → the coloured-initial disc', (tester) async {
|
testWidgets('no cache → the generated pattern', (tester) async {
|
||||||
await tester.pumpWidget(host(const CachedAvatar(pubkey: 'x', name: 'Bea')));
|
await tester.pumpWidget(host(const CachedAvatar(pubkey: 'x', name: 'Bea')));
|
||||||
expect(find.text('B'), findsOneWidget);
|
expect(find.byType(BoringAvatar), findsOneWidget);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -414,6 +414,14 @@ packages:
|
||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "9.1.1"
|
version: "9.1.1"
|
||||||
|
flutter_boring_avatars:
|
||||||
|
dependency: transitive
|
||||||
|
description:
|
||||||
|
name: flutter_boring_avatars
|
||||||
|
sha256: c4439a5e6753db58debd8d85a92e9747727e5f5c05cc1f3a252ba70d2c1df720
|
||||||
|
url: "https://pub.dev"
|
||||||
|
source: hosted
|
||||||
|
version: "2.1.0"
|
||||||
flutter_driver:
|
flutter_driver:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description: flutter
|
description: flutter
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue