mirror of
https://github.com/block/buzz.git
synced 2026-10-29 13:31:44 +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>
272 lines
9.6 KiB
Dart
272 lines
9.6 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:flutter/foundation.dart';
|
|
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 'package:nostr/nostr.dart' as nostr;
|
|
import 'package:package_info_plus/package_info_plus.dart';
|
|
|
|
import '../../shared/auth/auth.dart';
|
|
import '../../shared/clipboard_utils.dart';
|
|
import '../../shared/community/community_membership_provider.dart';
|
|
import '../../shared/push/push_bridge.dart';
|
|
import '../../shared/relay/relay.dart';
|
|
import '../../shared/utils/string_utils.dart';
|
|
import '../pairing/pairing_provider.dart';
|
|
import '../../shared/theme/theme.dart';
|
|
import '../../shared/widgets/app_list.dart';
|
|
import '../../shared/widgets/app_list_card.dart';
|
|
import '../../shared/widgets/frosted_app_bar.dart';
|
|
import '../../shared/widgets/frosted_scaffold.dart';
|
|
import '../../shared/widgets/ios_glass_navigation_button.dart';
|
|
import '../../shared/widgets/ios_glass_navigation_action.dart';
|
|
import '../../shared/widgets/immediate_page_route.dart';
|
|
import '../../shared/widgets/modal_presentation.dart';
|
|
import 'theme_picker_page.dart';
|
|
|
|
part 'settings_page/community_section.dart';
|
|
part 'settings_page/connection_section.dart';
|
|
part 'settings_page/notifications_section.dart';
|
|
|
|
Widget _emptyProfileEditPage(BuildContext context) => const SizedBox.shrink();
|
|
|
|
enum _ProfileEditAction { displayName, description, photo }
|
|
|
|
class SettingsPage extends HookConsumerWidget {
|
|
/// Creates the settings page.
|
|
const SettingsPage({
|
|
super.key,
|
|
required this.profileHeader,
|
|
required this.invitePageBuilder,
|
|
required this.identityRecoveryPageBuilder,
|
|
this.profileEditPageBuilder = _emptyProfileEditPage,
|
|
this.onEditDisplayName,
|
|
this.onEditProfileDescription,
|
|
});
|
|
|
|
/// Header widget displayed at the top of settings.
|
|
final Widget profileHeader;
|
|
|
|
/// Builds the community-invite page pushed from the invite settings row.
|
|
final WidgetBuilder invitePageBuilder;
|
|
|
|
/// Builds the identity-recovery page pushed from the recovery settings row.
|
|
final WidgetBuilder identityRecoveryPageBuilder;
|
|
|
|
/// Builds the current-user profile editor opened from the top action.
|
|
final WidgetBuilder profileEditPageBuilder;
|
|
|
|
/// Opens the display-name editor after the Edit Profile sheet closes.
|
|
final Future<void> Function(BuildContext context)? onEditDisplayName;
|
|
|
|
/// Opens the profile-description editor after the Edit Profile sheet closes.
|
|
final Future<void> Function(BuildContext context)? onEditProfileDescription;
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final packageInfoFuture = useMemoized(() => PackageInfo.fromPlatform());
|
|
final packageInfo = useFuture(packageInfoFuture);
|
|
final topSectionHeight = frostedAppBarHeight(
|
|
context,
|
|
bottomHeight: Grid.xxs,
|
|
);
|
|
|
|
Future<void> showEditProfileSheet() async {
|
|
final action = await showBuzzModalBottomSheet<_ProfileEditAction>(
|
|
context: context,
|
|
title: 'Edit profile',
|
|
builder: (sheetContext) => SafeArea(
|
|
top: false,
|
|
child: Padding(
|
|
key: const ValueKey('edit-profile-sheet-content'),
|
|
padding: const EdgeInsets.only(bottom: Grid.xs),
|
|
// AppListCard normally fills the height offered by a page section.
|
|
// Give it unbounded vertical space here so this compact action sheet
|
|
// hugs its three rows instead of filling the modal height cap.
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
AppListCard(
|
|
key: const ValueKey('edit-profile-options'),
|
|
dividerIndent: Grid.xs,
|
|
verticalPadding: 0,
|
|
children: [
|
|
AppListRow(
|
|
key: const ValueKey('edit-profile-display-name'),
|
|
title: 'Display name',
|
|
trailing: const _RowChevron(),
|
|
onTap: () => Navigator.pop(
|
|
sheetContext,
|
|
_ProfileEditAction.displayName,
|
|
),
|
|
),
|
|
AppListRow(
|
|
key: const ValueKey('edit-profile-description'),
|
|
title: 'Profile description',
|
|
trailing: const _RowChevron(),
|
|
onTap: () => Navigator.pop(
|
|
sheetContext,
|
|
_ProfileEditAction.description,
|
|
),
|
|
),
|
|
AppListRow(
|
|
key: const ValueKey('edit-profile-photo'),
|
|
title: 'Photo',
|
|
trailing: const _RowChevron(),
|
|
onTap: () =>
|
|
Navigator.pop(sheetContext, _ProfileEditAction.photo),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
if (!context.mounted || action == null) return;
|
|
unawaited(HapticFeedback.selectionClick());
|
|
switch (action) {
|
|
case _ProfileEditAction.displayName:
|
|
await onEditDisplayName?.call(context);
|
|
break;
|
|
case _ProfileEditAction.description:
|
|
await onEditProfileDescription?.call(context);
|
|
break;
|
|
case _ProfileEditAction.photo:
|
|
await Navigator.of(
|
|
context,
|
|
).push(immediatePageRoute<void>(builder: profileEditPageBuilder));
|
|
break;
|
|
}
|
|
}
|
|
|
|
return FrostedScaffold(
|
|
useUtilitySurfaceTheme: true,
|
|
appBar: FrostedAppBar(
|
|
automaticallyImplyLeading: false,
|
|
horizontalInset: Grid.gutter,
|
|
showBottomDivider: false,
|
|
leading: Theme.of(context).platform == TargetPlatform.iOS
|
|
? IosGlassNavigationButton(
|
|
key: const ValueKey('settings-ios-glass-close'),
|
|
icon: IosGlassNavigationIcon.close,
|
|
semanticLabel: 'Close settings',
|
|
onPressed: () {
|
|
unawaited(HapticFeedback.lightImpact());
|
|
Navigator.of(context).pop();
|
|
},
|
|
foregroundColor: navigationPrimaryForeground(context),
|
|
)
|
|
: SizedBox(
|
|
width: Grid.xl,
|
|
height: Grid.xl,
|
|
child: IconButton(
|
|
tooltip: 'Close settings',
|
|
onPressed: () {
|
|
unawaited(HapticFeedback.lightImpact());
|
|
Navigator.of(context).pop();
|
|
},
|
|
color: navigationPrimaryForeground(context),
|
|
icon: const Icon(LucideIcons.x),
|
|
),
|
|
),
|
|
actions: [
|
|
if (Theme.of(context).platform == TargetPlatform.iOS)
|
|
IosGlassNavigationAction(
|
|
key: const ValueKey('settings-edit-profile'),
|
|
label: 'Edit',
|
|
foregroundColor: navigationPrimaryForeground(context),
|
|
onPressed: () => unawaited(showEditProfileSheet()),
|
|
)
|
|
else
|
|
Material(
|
|
key: const ValueKey('settings-edit-profile'),
|
|
color: context.colors.surfaceContainerHighest,
|
|
borderRadius: BorderRadius.circular(Radii.full),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: InkWell(
|
|
onTap: () => unawaited(showEditProfileSheet()),
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: Grid.xs,
|
|
vertical: Grid.xxs,
|
|
),
|
|
child: Text(
|
|
'Edit',
|
|
style: context.textTheme.labelLarge?.copyWith(
|
|
color: context.colors.onSurface,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
bottomHeight: Grid.xxs,
|
|
bottom: const SizedBox.expand(),
|
|
),
|
|
body: Column(
|
|
children: [
|
|
Expanded(
|
|
child: ListView(
|
|
padding: EdgeInsets.only(top: topSectionHeight, bottom: Grid.xs),
|
|
children: [
|
|
profileHeader,
|
|
_CommunitySection(invitePageBuilder: invitePageBuilder),
|
|
const _NotificationsSection(),
|
|
_ConnectionSection(
|
|
identityRecoveryPageBuilder: identityRecoveryPageBuilder,
|
|
),
|
|
const _RemoveCommunitySection(),
|
|
],
|
|
),
|
|
),
|
|
if (packageInfo.hasData)
|
|
_VersionFooter(version: packageInfo.data!.version),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _VersionFooter extends StatelessWidget {
|
|
const _VersionFooter({required this.version});
|
|
|
|
final String version;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SafeArea(
|
|
top: false,
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(bottom: Grid.xs, top: Grid.xxs),
|
|
child: Center(
|
|
child: Text(
|
|
'v$version',
|
|
style: context.textTheme.bodySmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant.withValues(alpha: 0.6),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Trailing affordance shared by the rows that push a picker page.
|
|
class _RowChevron extends StatelessWidget {
|
|
const _RowChevron();
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Icon(
|
|
LucideIcons.chevronRight,
|
|
size: 18,
|
|
color: context.colors.onSurfaceVariant,
|
|
);
|
|
}
|
|
}
|