Files
buzz/mobile/lib/features/channels/compose_bar/suggestions.dart
Logan Johnson 4ef23609b7 feat(mobile): show contextual names in channel conversations (#7895)
🤖
## Summary

In a channel conversation, two identities with the same display name
looked identical. In the example below, the channel shows "Bad Janet"
twice, for two different identities. A reader cannot tell which one was
added and then removed.

This PR uses the contextual names from the previous PR everywhere a
conversation names someone:

- Message authors, threads, forum posts and replies
- Reactions, the typing indicator, and system rows (joined, added,
removed)
- Inline mentions and the agent activity sheet
- The profile sheet title, which now matches the row that opened it

Names are compared against the channel's members, so a label only gets
longer when a real collision exists in that channel.

The mention picker labels each choice against every candidate, so two
"Honey" choices look different. When you pick one, it still inserts the
identity's own name ("@Honey"), so the message text does not change.

Part 2 of 3: #7894 (resolver) → #7895 (conversations) → #7896 (lists,
Search, Pulse).

### Related issue

Related to #2910.

### Testing

- A widget test checks that the profile sheet names an author the same
way the channel does.
- A unit test checks that two same-name mention choices get different
labels but insert the same wire name.
- `flutter analyze` is clean, and the full `flutter test` suite passes.
- Checked on an Android emulator against the live relay, in an archived
channel with two identities named "Bad Janet".

| Before | After |
| --- | --- |
| <img width="300" alt="Before: the channel shows two different
identities both as Bad Janet"
src="https://github.com/user-attachments/assets/c7f6c345-12d8-4e11-9434-bbd2c63722db"
/> | <img width="300" alt="After: the second identity shows as Bad Janet
· sqxl"
src="https://github.com/user-attachments/assets/51c6b9fc-8900-4200-8ce0-ad1887f41dba"
/> |

---------

Signed-off-by: Logan Johnson <loganj@squareup.com>
Co-authored-by: Larry <627498bd4bd1f281a16431e3c6cce3b5c25b6692798c78672298aefbf2f8f8b5@buzz.block.builderlab.xyz>
2026-09-29 15:47:43 -04:00

214 lines
6.9 KiB
Dart

part of '../compose_bar.dart';
class _MentionSuggestions extends StatelessWidget {
final List<MentionCandidate> suggestions;
final Map<String, UserProfile> userCache;
final String? currentPubkey;
final bool isDmChannel;
final void Function(MentionCandidate) onSelect;
const _MentionSuggestions({
required this.suggestions,
required this.userCache,
required this.currentPubkey,
required this.isDmChannel,
required this.onSelect,
});
@override
Widget build(BuildContext context) {
return Material(
key: const ValueKey('mention-suggestions-popover'),
type: MaterialType.card,
color: appPopoverColor(context),
surfaceTintColor: Colors.transparent,
elevation: appPopoverElevation,
shadowColor: appPopoverShadowColor(context),
shape: appPopoverShape(context),
clipBehavior: Clip.hardEdge,
child: ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 240),
child: ListView.separated(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(vertical: Grid.xxs),
itemCount: suggestions.length,
separatorBuilder: (_, _) => const SizedBox.shrink(),
itemBuilder: (context, index) {
final candidate = suggestions[index];
final name = candidate.pickerLabel;
final avatarUrl =
candidate.avatarUrl ?? userCache[candidate.pubkey]?.avatarUrl;
return ListTile(
dense: true,
visualDensity: VisualDensity.compact,
leading: AvatarImage(
imageUrl: avatarUrl,
radius: 18,
backgroundColor: context.colors.primaryContainer,
fallback: Text(
// Name-derived for named candidates; keyed to the hex
// public key for unnamed ones so the compact-npub label
// doesn't render `N` for everyone.
candidate.initial,
style: context.textTheme.labelMedium?.copyWith(
color: context.colors.onPrimaryContainer,
fontWeight: FontWeight.w600,
),
),
isAgent: candidate.isAgent,
),
title: Text(name, style: context.textTheme.titleSmall),
subtitle: _MentionSuggestionInfo.build(
context,
candidate: candidate,
currentPubkey: currentPubkey,
isDmChannel: isDmChannel,
userCache: userCache,
),
onTap: () => _runComposerAction(() => onSelect(candidate)),
);
},
),
),
);
}
}
/// The secondary info line under a mention suggestion — mirrors desktop's
/// `MentionAutocomplete` subtitle: bot icon + "agent" (or an "admin" badge
/// for human admins), then "managed by …" / "not in channel".
abstract final class _MentionSuggestionInfo {
static Widget? build(
BuildContext context, {
required MentionCandidate candidate,
required String? currentPubkey,
required bool isDmChannel,
required Map<String, UserProfile> userCache,
}) {
final ownerLabel = candidate.isAgent
? formatOwnerLabel(candidate.ownerPubkey, currentPubkey, userCache)
: null;
final notInChannel = !isDmChannel && !candidate.isMember;
final isAdmin = !candidate.isAgent && candidate.role == 'admin';
final String? detail;
if (ownerLabel != null && notInChannel) {
detail = 'managed by $ownerLabel \u00b7 not in channel';
} else if (ownerLabel != null) {
detail = 'managed by $ownerLabel';
} else if (notInChannel) {
detail = 'not in channel';
} else {
detail = null;
}
if (!candidate.isAgent && !isAdmin && detail == null) return null;
final style = context.textTheme.labelSmall?.copyWith(
color: context.colors.onSurfaceVariant,
);
return Row(
children: [
if (candidate.isAgent) ...[
Icon(
LucideIcons.bot,
size: 12,
color: context.colors.onSurfaceVariant,
),
const SizedBox(width: Grid.half),
Text('agent', style: style),
] else if (isAdmin)
Container(
padding: const EdgeInsets.symmetric(
horizontal: Grid.xxs,
vertical: 1,
),
decoration: BoxDecoration(
color: context.colors.secondaryContainer,
borderRadius: BorderRadius.circular(Radii.sm),
),
child: Text(
'admin',
style: style?.copyWith(
color: context.colors.onSecondaryContainer,
),
),
),
if (detail != null) ...[
if (candidate.isAgent || isAdmin) const SizedBox(width: Grid.xxs),
Flexible(
child: Text(detail, style: style, overflow: TextOverflow.ellipsis),
),
],
],
);
}
}
@visibleForTesting
List<Channel> filterChannels(List<Channel> channels, String? query) {
if (query == null) return const [];
final q = query.toLowerCase();
return channels
.where((c) => c.channelType != 'dm')
.where((c) {
if (q.isEmpty) return true;
return c.name.toLowerCase().contains(q);
})
.take(8)
.toList();
}
class _ChannelSuggestions extends StatelessWidget {
final List<Channel> suggestions;
final void Function(Channel) onSelect;
const _ChannelSuggestions({
required this.suggestions,
required this.onSelect,
});
@override
Widget build(BuildContext context) {
return Material(
key: const ValueKey('channel-suggestions-popover'),
type: MaterialType.card,
color: appPopoverColor(context),
surfaceTintColor: Colors.transparent,
elevation: appPopoverElevation,
shadowColor: appPopoverShadowColor(context),
shape: appPopoverShape(context),
clipBehavior: Clip.hardEdge,
child: ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 240),
child: ListView.separated(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(vertical: Grid.xxs),
itemCount: suggestions.length,
separatorBuilder: (_, _) => const SizedBox.shrink(),
itemBuilder: (context, index) {
final channel = suggestions[index];
return ListTile(
dense: true,
visualDensity: VisualDensity.compact,
horizontalTitleGap: 0,
leading: SizedBox.square(
dimension: 36,
child: Icon(
LucideIcons.hash,
size: 20,
color: context.colors.onSurfaceVariant,
),
),
title: Text(channel.name, style: context.textTheme.bodyLarge),
onTap: () => _runComposerAction(() => onSelect(channel)),
);
},
),
),
);
}
}