mirror of
https://github.com/block/buzz.git
synced 2026-10-27 04:30:52 +00:00
🤖 ## Summary In the mobile app, anyone who hasn't set a display name shows up as a raw 64-character hex key (e.g. `3a5d4f9c…`) — unreadable, and unrecognizable as the same identity across screens. Profile and Settings also let you copy that raw hex. Nostr public keys have a standard readable form — `npub1…`, the same encoding other Nostr apps and our desktop app already display. This PR makes every mobile identity surface render npub instead: - **Unnamed people everywhere** — message and thread authors, reactions, typing indicators, member lists, channel details, DM headers and tiles, inbox, search, forum cards, Pulse notes and reply context, mention suggestions, and invite rows — now show a compact npub label: first 8 + last 4 characters of the full npub joined by an ellipsis (`npub1abcd…wxyz`), the same truncation desktop uses. Previously these showed truncated raw hex. - **DM fallback avatars and blank names** — 1:1 DM tiles and headers key their fallback avatar to the same non-self counterpart the label names, including self-first participant order; a self-DM keeps its hex-key-derived initial. Blank or whitespace-only display names fall back to the compact npub instead of rendering empty, while nonblank authored names render verbatim (padding included). - **Profile sheet → "Copy public key"** now copies the full canonical npub — never raw hex. When the identity string isn't a valid public key, the copy tile is disabled, so a malformed key never reaches the clipboard. - **Settings → Identity (pubkey)** displays and copies the full npub; an invalid identity reads "Identity unavailable" with copy disabled. - **Invalid identities never leak truncated raw hex** into the UI anywhere — they render a neutral "Unknown identity" label. - **Unchanged on purpose:** display names and verified handles (NIP-05 — the `name@domain` badge) still render as before. Unnamed avatars keep distinct per-key initials, derived from the underlying hex key rather than the npub — otherwise every unnamed key would render the same "N" initial. Event IDs are not public keys, so they keep their hex truncation (in Pulse's "Replying to", the parent author shows npub while an event-id fallback still shows hex). The nevent share link, private keys, and internal hex storage are untouched. Inputs that accept a key (invite/member entry) accept both hex and npub and keep working in hex internally. ### Related issue N/A. Searched open issues/PRs for npub identity display on mobile — closest related: none found. Desktop's parallel npub standardization lives in the stacked desktop PRs (#7488 foundation, #7489 controls, #7495 display surfaces); this is the independent mobile slice (based directly on `main`, not on those branches). ### Testing At exact head `5a620e420a1fd57d9d8011ac26434eed32fcf765` (base: `main` `44316ff72`; 40 files, +1,345/−154): - Full mobile suite: 2,098 tests passing (`cd mobile && flutter test`); `flutter analyze` clean; `dart format --set-exit-if-changed .` clean — the same checks CI runs. - Widget/unit coverage at production seams: compact labels and hex-keyed avatar initials for DM headers/tiles, member rows, mention suggestions, and Pulse reply context; DM fallback avatars keyed to the labeled counterpart (self-first order and self-DMs); blank/whitespace display-name npub fallback with nonblank authored labels verbatim, including the Activity inbox sender and profile-sheet heading (each with its own empty/whitespace production-seam regression); full-npub copy and disabled-copy semantics in profile and settings; invalid-key suppression; and hex↔npub input round-trips. Verified via unit and widget tests — no device/simulator validation is claimed. ### Task provenance Buzz channel: `1f0e4a3d-7e01-4efe-bb16-843b357f85c9` Task: buzz://message?channel=1f0e4a3d-7e01-4efe-bb16-843b357f85c9&id=86b34eb4bd84a1472419e9af22636c011c0fe273e3c196f967d7a36996e149b6 --------- Signed-off-by: Logan Johnson <loganj@squareup.com> Co-authored-by: Larry <627498bd4bd1f281a16431e3c6cce3b5c25b6692798c78672298aefbf2f8f8b5@buzz.block.builderlab.xyz>
463 lines
16 KiB
Dart
463 lines
16 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
|
|
|
import '../../shared/animated_avatar.dart';
|
|
import '../../shared/relay/relay.dart';
|
|
import '../../shared/theme/theme.dart';
|
|
import '../../shared/utils/string_utils.dart';
|
|
import '../../shared/widgets/avatar_image.dart';
|
|
import '../../shared/widgets/buzz_action_tile.dart';
|
|
import '../../shared/widgets/modal_presentation.dart';
|
|
import '../../shared/widgets/progressive_animated_avatar.dart';
|
|
import '../channels/channel.dart';
|
|
import '../channels/channel_detail_page.dart';
|
|
import '../channels/channel_management_provider.dart';
|
|
import '../channels/message_content.dart';
|
|
import 'presence_cache_provider.dart';
|
|
import '../../shared/profile/user_cache_provider.dart';
|
|
import 'user_status_cache_provider.dart';
|
|
|
|
/// Show a user profile bottom sheet for the given [pubkey].
|
|
void showUserProfileSheet(BuildContext context, String pubkey) {
|
|
showBuzzModalBottomSheet<Channel>(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
showDragHandle: false,
|
|
builder: (_) => UserProfileSheet(pubkey: pubkey),
|
|
).then((channel) {
|
|
if (channel == null || !context.mounted) return;
|
|
Navigator.of(context).push(
|
|
MaterialPageRoute<void>(
|
|
builder: (_) => ChannelDetailPage(channel: channel),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
class UserProfileSheet extends HookConsumerWidget {
|
|
final String pubkey;
|
|
|
|
const UserProfileSheet({super.key, required this.pubkey});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final pk = pubkey.toLowerCase();
|
|
final currentPubkey = ref.watch(currentPubkeyProvider);
|
|
|
|
// Watch cached profile, presence, and user status.
|
|
final profile =
|
|
ref.watch(userCacheProvider.select((cache) => cache[pk])) ??
|
|
ref.read(userCacheProvider.notifier).get(pk);
|
|
final presenceMap = ref.watch(presenceCacheProvider);
|
|
final presence = presenceMap[pk] ?? 'offline';
|
|
final statusCache = ref.watch(userStatusCacheProvider);
|
|
final userStatus = statusCache[pk];
|
|
|
|
// Fetch about from the user's kind:0 profile event.
|
|
final aboutFuture = useMemoized(
|
|
() => ref
|
|
.read(relaySessionProvider.notifier)
|
|
.fetchHistory(NostrFilters.profile(pk))
|
|
.then((events) {
|
|
if (events.isEmpty) return '';
|
|
return ProfileData.fromEvent(events.first).about ?? '';
|
|
})
|
|
.catchError((_) => ''),
|
|
[pk],
|
|
);
|
|
final aboutSnapshot = useFuture(aboutFuture);
|
|
final about = aboutSnapshot.data ?? profile?.about ?? '';
|
|
|
|
// Ensure presence and status are tracked.
|
|
useEffect(() {
|
|
ref.read(presenceCacheProvider.notifier).track([pk]);
|
|
ref.read(userStatusCacheProvider.notifier).track([pk]);
|
|
ref.read(userCacheProvider.notifier).preload([pk]);
|
|
return null;
|
|
}, [pk]);
|
|
final copied = useState(false);
|
|
final isOpeningDirectMessage = useState(false);
|
|
|
|
// Canonical npub for the copy action; null when [pubkey] is not a valid
|
|
// identity, in which case the copy tile is disabled — an invalid key is
|
|
// never placed on the clipboard.
|
|
final npub = fullNpub(pubkey);
|
|
|
|
// Routed through the shared label so a blank cached name (empty or
|
|
// whitespace-only, relay-valid) falls back to the compact npub instead
|
|
// of an empty heading.
|
|
final displayName = profile?.label;
|
|
final avatarUrl = profile?.avatarUrl;
|
|
final nip05 = profile?.nip05Handle;
|
|
final initial =
|
|
profile?.initial ?? (pubkey.isNotEmpty ? pubkey[0].toUpperCase() : '?');
|
|
|
|
Future<void> copyPublicKey() async {
|
|
if (npub == null) return;
|
|
await Clipboard.setData(ClipboardData(text: npub));
|
|
if (!context.mounted) return;
|
|
copied.value = true;
|
|
_showProfileCopyToast(context);
|
|
unawaited(
|
|
Future<void>.delayed(const Duration(seconds: 2), () {
|
|
if (context.mounted) copied.value = false;
|
|
}),
|
|
);
|
|
}
|
|
|
|
Future<void> openDirectMessage() async {
|
|
if (isOpeningDirectMessage.value) return;
|
|
isOpeningDirectMessage.value = true;
|
|
try {
|
|
final channel = await ref
|
|
.read(channelActionsProvider)
|
|
.openDm(pubkeys: [pk]);
|
|
if (!context.mounted) return;
|
|
Navigator.of(context).pop(channel);
|
|
} catch (_) {
|
|
// Silently fail — user tapped but DM open failed.
|
|
if (context.mounted) isOpeningDirectMessage.value = false;
|
|
}
|
|
}
|
|
|
|
return ConstrainedBox(
|
|
constraints: BoxConstraints(
|
|
maxHeight: MediaQuery.sizeOf(context).height * 0.7,
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Flexible(
|
|
child: Padding(
|
|
padding: EdgeInsets.fromLTRB(
|
|
Grid.gutter,
|
|
0,
|
|
Grid.gutter,
|
|
MediaQuery.viewInsetsOf(context).bottom,
|
|
),
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.only(bottom: Grid.xs),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Center the presence chip on the avatar's lower edge.
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: Grid.xl / 2),
|
|
child: Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Align(
|
|
alignment: Alignment.center,
|
|
child: FractionallySizedBox(
|
|
widthFactor: 0.5,
|
|
child: _ProfileAvatar(
|
|
avatarUrl: avatarUrl,
|
|
initial: initial,
|
|
isAgent: profile?.isAgent == true,
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
left: 0,
|
|
right: 0,
|
|
bottom: -(Grid.xl / 2),
|
|
child: _ProfilePresenceChip(presence: presence),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: Grid.half),
|
|
|
|
// Display name — centered, large
|
|
Center(
|
|
child: Text(
|
|
displayName ?? shortPubkey(pubkey),
|
|
style: context.textTheme.headlineSmall?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
),
|
|
// Match Settings: status is quiet, centered copy directly
|
|
// below the profile name rather than a separate information row.
|
|
if (userStatus != null && !userStatus.isEmpty)
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(
|
|
top: Grid.xxs,
|
|
left: Grid.gutter,
|
|
right: Grid.gutter,
|
|
bottom: Grid.xxs,
|
|
),
|
|
child: MessageContent(
|
|
content: userStatus.text.isNotEmpty
|
|
? '${userStatus.emoji.isNotEmpty ? '${userStatus.emoji} ' : ''}${userStatus.text}'
|
|
: userStatus.emoji,
|
|
baseStyle: context.textTheme.bodySmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
maxLines: 2,
|
|
),
|
|
),
|
|
),
|
|
|
|
// NIP-05 handle — centered, secondary
|
|
if (nip05 != null && nip05.isNotEmpty) ...[
|
|
const SizedBox(height: Grid.half),
|
|
Center(
|
|
child: Text(
|
|
nip05,
|
|
style: context.textTheme.bodyMedium?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
|
|
const SizedBox(height: Grid.xs + Grid.half),
|
|
|
|
Row(
|
|
children: [
|
|
if (pk != currentPubkey) ...[
|
|
Expanded(
|
|
child: BuzzActionTile(
|
|
icon: isOpeningDirectMessage.value
|
|
? null
|
|
: LucideIcons.messageSquare,
|
|
label: isOpeningDirectMessage.value
|
|
? 'Opening…'
|
|
: 'Message',
|
|
isLoading: isOpeningDirectMessage.value,
|
|
loadingSemanticLabel: 'Opening direct message',
|
|
onTap: openDirectMessage,
|
|
),
|
|
),
|
|
const SizedBox(width: Grid.twelve),
|
|
],
|
|
Expanded(
|
|
child: BuzzActionTile(
|
|
icon: copied.value
|
|
? LucideIcons.check
|
|
: LucideIcons.key,
|
|
label: copied.value ? 'Copied' : 'Copy public key',
|
|
isEnabled: npub != null,
|
|
onTap: copyPublicKey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: Grid.xs),
|
|
|
|
// About / bio section
|
|
if (about.isNotEmpty) ...[
|
|
const SizedBox(height: Grid.xxs),
|
|
Divider(
|
|
color: context.colors.outlineVariant.withValues(
|
|
alpha: 0.3,
|
|
),
|
|
),
|
|
const SizedBox(height: Grid.xxs),
|
|
Text(
|
|
'About',
|
|
style: context.textTheme.labelSmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: Grid.half),
|
|
Text(
|
|
about,
|
|
style: context.textTheme.bodyMedium?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Shows clipboard feedback above the bottom-sheet route. A regular SnackBar
|
|
/// belongs to the page Scaffold, which sits behind the modal sheet.
|
|
void _showProfileCopyToast(BuildContext context) {
|
|
final overlay = Overlay.of(context, rootOverlay: true);
|
|
final colors = context.colors;
|
|
final textStyle = context.textTheme.bodyMedium?.copyWith(
|
|
color: colors.onInverseSurface,
|
|
);
|
|
late final OverlayEntry entry;
|
|
entry = OverlayEntry(
|
|
builder: (overlayContext) => Positioned(
|
|
left: Grid.gutter,
|
|
right: Grid.gutter,
|
|
bottom: MediaQuery.viewPaddingOf(overlayContext).bottom + Grid.xs,
|
|
child: Material(
|
|
color: colors.inverseSurface,
|
|
elevation: 6,
|
|
borderRadius: BorderRadius.circular(Radii.lg),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: Grid.xs,
|
|
vertical: Grid.twelve,
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(LucideIcons.check, size: 18, color: colors.onInverseSurface),
|
|
const SizedBox(width: Grid.xxs),
|
|
Text('Public key copied', style: textStyle),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
overlay.insert(entry);
|
|
Future<void>.delayed(const Duration(seconds: 2), () {
|
|
if (entry.mounted) entry.remove();
|
|
});
|
|
}
|
|
|
|
/// The read-only version of the presence control in Settings. A viewed profile
|
|
/// reflects its owner's availability but does not allow another user to change
|
|
/// it.
|
|
class _ProfilePresenceChip extends StatelessWidget {
|
|
const _ProfilePresenceChip({required this.presence});
|
|
|
|
final String presence;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final effectivePresence = switch (presence) {
|
|
'online' || 'away' => presence,
|
|
_ => 'offline',
|
|
};
|
|
final backgroundColor = switch (effectivePresence) {
|
|
'online' => context.appColors.success,
|
|
'away' => context.appColors.warning,
|
|
_ => context.colors.onSurfaceVariant,
|
|
};
|
|
final label = switch (effectivePresence) {
|
|
'online' => 'Online',
|
|
'away' => 'Away',
|
|
_ => 'Offline',
|
|
};
|
|
|
|
return Semantics(
|
|
label: 'Presence: $label',
|
|
child: SizedBox(
|
|
height: Grid.xl,
|
|
child: Center(
|
|
child: Material(
|
|
color: backgroundColor,
|
|
borderRadius: BorderRadius.circular(Radii.full),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: Grid.xs,
|
|
vertical: Grid.xxs,
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: filterChipTextStyle.copyWith(
|
|
color: context.colors.onPrimary,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ProfileAvatar extends HookWidget {
|
|
final String? avatarUrl;
|
|
final String initial;
|
|
final bool isAgent;
|
|
|
|
const _ProfileAvatar({
|
|
required this.avatarUrl,
|
|
required this.initial,
|
|
required this.isAgent,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final animatedAvatar = parseAnimatedAvatarUrl(avatarUrl);
|
|
final stoppedAnimationUrl = useState<String?>(null);
|
|
final isPlaying =
|
|
animatedAvatar != null &&
|
|
stoppedAnimationUrl.value != animatedAvatar.animationUrl;
|
|
|
|
return AspectRatio(
|
|
aspectRatio: 1,
|
|
child: GestureDetector(
|
|
key: const ValueKey('selected-profile-avatar'),
|
|
onTap: animatedAvatar == null
|
|
? null
|
|
: () => stoppedAnimationUrl.value =
|
|
stoppedAnimationUrl.value == animatedAvatar.animationUrl
|
|
? null
|
|
: animatedAvatar.animationUrl,
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final avatar = isPlaying
|
|
? ProgressiveAnimatedAvatar(
|
|
key: ValueKey(animatedAvatar.animationUrl),
|
|
descriptor: animatedAvatar,
|
|
fallback: _AvatarFallback(initial: initial),
|
|
)
|
|
: AvatarImageContent(
|
|
imageUrl: animatedAvatar?.posterUrl ?? avatarUrl,
|
|
fallback: _AvatarFallback(initial: initial),
|
|
);
|
|
if (!isAgent) return ClipOval(child: avatar);
|
|
return ClipRRect(
|
|
borderRadius: BorderRadius.circular(
|
|
constraints.biggest.shortestSide * 0.3,
|
|
),
|
|
child: avatar,
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _AvatarFallback extends StatelessWidget {
|
|
final String initial;
|
|
|
|
const _AvatarFallback({required this.initial});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
color: context.colors.primaryContainer,
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
initial,
|
|
style: context.textTheme.displayLarge?.copyWith(
|
|
color: context.colors.onPrimaryContainer,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|