mirror of
https://github.com/block/buzz.git
synced 2026-10-27 04:30:52 +00:00
5fefec604f
## Summary - Restores `#` and lock icons for public and private channels on Home, with matching loading placeholders. - Updates the dark-mode navigation colors to the desktop design-system tokens (read and unread text, section headings). - Replaces the chat color picker with the seven desktop accents (Gray, Chartreuse, Flame, Magenta, Iris, Cobalt, Jade). Saved legacy colors map to the closest one. - Uses white text in your own bubbles, and black where white falls below 4.5:1 (Chartreuse, dark-mode Gray). Links (underlined), quotes, tables and code use the same text color. - Insets code blocks in bubbles evenly, with corners concentric to the bubble and even inner padding. - The swipe-to-reply indicator uses the chosen chat color. ## Testing - `flutter analyze` and `dart format` are clean. The full mobile suite passes (3,705 tests). - Installed and checked on a Pixel 10 and an iPhone Air against a real community. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Signed-off-by: kenny lopez <klopez4212@gmail.com> Co-authored-by: Terp <5856f6900e8e0a4e0ea1f4f8d2ee33e4753d2119bc122f94ecafc660b46c0511@buzz.block.builderlab.xyz> Co-authored-by: Queue <874bf2d815c2c4b459b90438c669c57f2702f3a76bb6e16fa97184259aac3e9e@buzz.block.builderlab.xyz> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
608 lines
17 KiB
Dart
608 lines
17 KiB
Dart
part of '../channels_page.dart';
|
||
|
||
const _sectionMenuItemPadding = EdgeInsets.fromLTRB(Grid.xs, 0, Grid.twelve, 0);
|
||
|
||
class _CustomChannelSection extends StatelessWidget {
|
||
final ChannelSection section;
|
||
final List<Channel> channels;
|
||
final Set<String> unreadChannelIds;
|
||
final Set<String> mutedChannelIds;
|
||
final String? currentPubkey;
|
||
final bool expanded;
|
||
final bool isFirst;
|
||
final bool isLast;
|
||
final bool showTopDivider;
|
||
final VoidCallback onToggle;
|
||
final VoidCallback onRename;
|
||
final VoidCallback onDelete;
|
||
final VoidCallback onMoveUp;
|
||
final VoidCallback onMoveDown;
|
||
final ChannelSortMode sortMode;
|
||
final ValueChanged<ChannelSortMode> onSortModeChange;
|
||
final Future<void> Function(Channel channel) onSelectChannel;
|
||
final void Function(Channel channel) onMarkChannelRead;
|
||
|
||
const _CustomChannelSection({
|
||
required this.section,
|
||
required this.channels,
|
||
required this.unreadChannelIds,
|
||
required this.mutedChannelIds,
|
||
required this.currentPubkey,
|
||
required this.expanded,
|
||
required this.isFirst,
|
||
required this.isLast,
|
||
required this.showTopDivider,
|
||
required this.onToggle,
|
||
required this.onRename,
|
||
required this.onDelete,
|
||
required this.onMoveUp,
|
||
required this.onMoveDown,
|
||
required this.sortMode,
|
||
required this.onSortModeChange,
|
||
required this.onSelectChannel,
|
||
required this.onMarkChannelRead,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
if (showTopDivider) const _SectionDivider(),
|
||
_CustomSectionHeader(
|
||
section: section,
|
||
expanded: expanded,
|
||
isFirst: isFirst,
|
||
isLast: isLast,
|
||
onToggle: onToggle,
|
||
onRename: onRename,
|
||
onDelete: onDelete,
|
||
onMoveUp: onMoveUp,
|
||
onMoveDown: onMoveDown,
|
||
sortMode: sortMode,
|
||
onSortModeChange: onSortModeChange,
|
||
),
|
||
CollapsibleSectionBody(
|
||
expanded: expanded,
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
for (final channel in channels)
|
||
_ChannelTile(
|
||
channel: channel,
|
||
isUnread: unreadChannelIds.contains(channel.id),
|
||
isMuted: mutedChannelIds.contains(channel.id),
|
||
currentPubkey: currentPubkey,
|
||
onTap: () => onSelectChannel(channel),
|
||
onMarkRead: () => onMarkChannelRead(channel),
|
||
sectionId: section.id,
|
||
),
|
||
const SizedBox(height: _kExpandedSectionTrailingPadding),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
class _CustomSectionHeader extends StatelessWidget {
|
||
final ChannelSection section;
|
||
final bool expanded;
|
||
final bool isFirst;
|
||
final bool isLast;
|
||
final VoidCallback onToggle;
|
||
final VoidCallback onRename;
|
||
final VoidCallback onDelete;
|
||
final VoidCallback onMoveUp;
|
||
final VoidCallback onMoveDown;
|
||
final ChannelSortMode sortMode;
|
||
final ValueChanged<ChannelSortMode> onSortModeChange;
|
||
|
||
const _CustomSectionHeader({
|
||
required this.section,
|
||
required this.expanded,
|
||
required this.isFirst,
|
||
required this.isLast,
|
||
required this.onToggle,
|
||
required this.onRename,
|
||
required this.onDelete,
|
||
required this.onMoveUp,
|
||
required this.onMoveDown,
|
||
required this.sortMode,
|
||
required this.onSortModeChange,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final sectionColor = navigationMetadataForeground(context);
|
||
return GestureDetector(
|
||
onTap: onToggle,
|
||
behavior: HitTestBehavior.opaque,
|
||
child: Padding(
|
||
padding: const EdgeInsets.fromLTRB(
|
||
Grid.gutter,
|
||
_kSectionHeaderVerticalPadding,
|
||
Grid.gutter,
|
||
_kSectionHeaderVerticalPadding,
|
||
),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: _SectionLabel(
|
||
label: section.name,
|
||
expanded: expanded,
|
||
color: sectionColor,
|
||
),
|
||
),
|
||
Builder(
|
||
builder: (buttonContext) => _SectionOptionsButton(
|
||
key: ValueKey('section-menu-${section.id}'),
|
||
tooltip: '${section.name} options',
|
||
icon: Icon(
|
||
BuzzIcons.ellipsisVertical,
|
||
size: _kChannelIconSize,
|
||
color: navigationSecondaryForeground(context),
|
||
),
|
||
onPressed: () async {
|
||
final value = await showAnchoredPopover<String>(
|
||
context: buttonContext,
|
||
width: 216,
|
||
alignment: AnchoredPopoverAlignment.end,
|
||
surfaceKey: ValueKey('section-popover-${section.id}'),
|
||
items: [
|
||
const PopupMenuItem(
|
||
value: 'rename',
|
||
padding: _sectionMenuItemPadding,
|
||
child: _SectionMenuItemContent(
|
||
icon: BuzzIcons.pencil,
|
||
label: 'Rename section',
|
||
),
|
||
),
|
||
PopupMenuItem(
|
||
value: 'move_up',
|
||
enabled: !isFirst,
|
||
padding: _sectionMenuItemPadding,
|
||
child: const _SectionMenuItemContent(
|
||
icon: BuzzIcons.arrowUp,
|
||
label: 'Move up',
|
||
),
|
||
),
|
||
PopupMenuItem(
|
||
value: 'move_down',
|
||
enabled: !isLast,
|
||
padding: _sectionMenuItemPadding,
|
||
child: const _SectionMenuItemContent(
|
||
icon: BuzzIcons.arrowDown,
|
||
label: 'Move down',
|
||
),
|
||
),
|
||
..._sortMenuItems(sortMode),
|
||
PopupMenuItem(
|
||
value: 'delete',
|
||
padding: _sectionMenuItemPadding,
|
||
child: _SectionMenuItemContent(
|
||
icon: BuzzIcons.trash2,
|
||
label: 'Delete section',
|
||
color: context.colors.error,
|
||
),
|
||
),
|
||
],
|
||
);
|
||
switch (value) {
|
||
case 'rename':
|
||
onRename();
|
||
case 'move_up':
|
||
onMoveUp();
|
||
case 'move_down':
|
||
onMoveDown();
|
||
case _kSortRecentMenuValue:
|
||
onSortModeChange(ChannelSortMode.recent);
|
||
case _kSortAlphaMenuValue:
|
||
onSortModeChange(ChannelSortMode.alpha);
|
||
case 'delete':
|
||
onDelete();
|
||
}
|
||
},
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _SectionMenuItemContent extends StatelessWidget {
|
||
final IconData icon;
|
||
final String label;
|
||
final Color? color;
|
||
|
||
const _SectionMenuItemContent({
|
||
required this.icon,
|
||
required this.label,
|
||
this.color,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Row(
|
||
children: [
|
||
Icon(icon, size: 16, color: color),
|
||
const SizedBox(width: Grid.xxs),
|
||
Flexible(
|
||
child: Text(
|
||
label,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: color == null ? null : TextStyle(color: color),
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
class _SectionNameDialog extends HookWidget {
|
||
final String title;
|
||
final String confirmLabel;
|
||
final String initialValue;
|
||
|
||
const _SectionNameDialog({
|
||
required this.title,
|
||
required this.confirmLabel,
|
||
this.initialValue = '',
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final controller = useTextEditingController(text: initialValue);
|
||
|
||
void confirm() {
|
||
final name = controller.text.trim();
|
||
if (name.isNotEmpty) Navigator.of(context).pop(name);
|
||
}
|
||
|
||
return AlertDialog(
|
||
title: Text(title),
|
||
content: TextField(
|
||
controller: controller,
|
||
autofocus: true,
|
||
decoration: const InputDecoration(labelText: 'Name'),
|
||
onSubmitted: (_) => confirm(),
|
||
),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: () => Navigator.of(context).pop(),
|
||
child: const Text('Cancel'),
|
||
),
|
||
TextButton(onPressed: confirm, child: Text(confirmLabel)),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
const _kSortRecentMenuValue = 'sort_recent';
|
||
const _kSortAlphaMenuValue = 'sort_alpha';
|
||
|
||
PopupMenuItem<String> _sortMenuItem({
|
||
required String value,
|
||
required String label,
|
||
required bool selected,
|
||
}) => PopupMenuItem(
|
||
value: value,
|
||
child: Row(
|
||
children: [
|
||
Expanded(child: Text(label)),
|
||
if (selected)
|
||
const Icon(BuzzIcons.check, key: ValueKey('sort-selected-check'))
|
||
else
|
||
const SizedBox(width: 24),
|
||
],
|
||
),
|
||
);
|
||
|
||
List<PopupMenuEntry<String>> _sortMenuItems(
|
||
ChannelSortMode current, {
|
||
bool showDivider = true,
|
||
}) => [
|
||
if (showDivider) const PopupMenuDivider(),
|
||
_sortMenuItem(
|
||
value: _kSortRecentMenuValue,
|
||
label: 'Sort: Recent',
|
||
selected: current == ChannelSortMode.recent,
|
||
),
|
||
_sortMenuItem(
|
||
value: _kSortAlphaMenuValue,
|
||
label: 'Sort: A–Z',
|
||
selected: current == ChannelSortMode.alpha,
|
||
),
|
||
];
|
||
|
||
class _ChannelSection extends StatelessWidget {
|
||
final String title;
|
||
final bool expanded;
|
||
final VoidCallback onToggle;
|
||
final List<Channel> channels;
|
||
final bool showTopDivider;
|
||
final Set<String> unreadChannelIds;
|
||
final Set<String> mutedChannelIds;
|
||
final String? currentPubkey;
|
||
final String emptyLabel;
|
||
final ChannelSortMode? sortMode;
|
||
final ValueChanged<ChannelSortMode>? onSortModeChange;
|
||
final Future<void> Function(Channel channel) onSelectChannel;
|
||
|
||
const _ChannelSection({
|
||
required this.title,
|
||
required this.expanded,
|
||
required this.onToggle,
|
||
required this.channels,
|
||
required this.showTopDivider,
|
||
required this.unreadChannelIds,
|
||
required this.mutedChannelIds,
|
||
required this.currentPubkey,
|
||
required this.emptyLabel,
|
||
this.sortMode,
|
||
this.onSortModeChange,
|
||
required this.onSelectChannel,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
if (showTopDivider) const _SectionDivider(),
|
||
_SectionHeader(
|
||
label: title,
|
||
expanded: expanded,
|
||
onToggle: onToggle,
|
||
sortMode: sortMode,
|
||
onSortModeChange: onSortModeChange,
|
||
),
|
||
CollapsibleSectionBody(
|
||
expanded: expanded,
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
if (channels.isEmpty)
|
||
Padding(
|
||
padding: const EdgeInsets.only(
|
||
left: _kChannelLabelInset,
|
||
right: _kChannelSectionInset,
|
||
top: Grid.half,
|
||
bottom: Grid.half,
|
||
),
|
||
child: Text(
|
||
emptyLabel,
|
||
style: contentListBodyTextStyle.copyWith(
|
||
color: context.colors.onSurfaceVariant,
|
||
),
|
||
),
|
||
)
|
||
else
|
||
for (final channel in channels)
|
||
_ChannelTile(
|
||
channel: channel,
|
||
isUnread: unreadChannelIds.contains(channel.id),
|
||
isMuted: mutedChannelIds.contains(channel.id),
|
||
currentPubkey: currentPubkey,
|
||
onTap: () => onSelectChannel(channel),
|
||
onMarkRead: null,
|
||
sectionId: null,
|
||
),
|
||
const SizedBox(height: _kExpandedSectionTrailingPadding),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
class _EmptyState extends StatelessWidget {
|
||
const _EmptyState();
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return SizedBox(
|
||
height: MediaQuery.sizeOf(context).height * 0.55,
|
||
child: Center(
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Icon(
|
||
BuzzIcons.messagesSquare,
|
||
size: Grid.xl,
|
||
color: context.colors.onSurfaceVariant,
|
||
),
|
||
const SizedBox(height: Grid.xs),
|
||
Text(
|
||
'No conversations yet',
|
||
style: context.textTheme.bodyLarge?.copyWith(
|
||
color: context.colors.onSurfaceVariant,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _SectionDivider extends StatelessWidget {
|
||
const _SectionDivider();
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: Grid.xxs),
|
||
child: Divider(
|
||
height: 1,
|
||
thickness: 1,
|
||
indent: _kChannelSectionInset,
|
||
endIndent: _kChannelSectionInset,
|
||
color: context.colors.onSurface.withValues(alpha: 0.07),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _SectionHeader extends StatelessWidget {
|
||
final String label;
|
||
final bool expanded;
|
||
final VoidCallback onToggle;
|
||
final ChannelSortMode? sortMode;
|
||
final ValueChanged<ChannelSortMode>? onSortModeChange;
|
||
|
||
const _SectionHeader({
|
||
required this.label,
|
||
required this.expanded,
|
||
required this.onToggle,
|
||
this.sortMode,
|
||
this.onSortModeChange,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final sectionColor = navigationMetadataForeground(context);
|
||
|
||
return GestureDetector(
|
||
onTap: onToggle,
|
||
behavior: HitTestBehavior.opaque,
|
||
child: Padding(
|
||
padding: const EdgeInsets.fromLTRB(
|
||
Grid.gutter,
|
||
_kSectionHeaderVerticalPadding,
|
||
Grid.gutter,
|
||
_kSectionHeaderVerticalPadding,
|
||
),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: _SectionLabel(
|
||
label: label,
|
||
expanded: expanded,
|
||
color: sectionColor,
|
||
),
|
||
),
|
||
if (sortMode case final mode?) ...[
|
||
Builder(
|
||
builder: (buttonContext) => _SectionOptionsButton(
|
||
key: ValueKey('sort-menu-$label'),
|
||
tooltip: '$label options',
|
||
icon: Icon(
|
||
BuzzIcons.ellipsisVertical,
|
||
size: _kChannelIconSize,
|
||
color: navigationSecondaryForeground(context),
|
||
),
|
||
onPressed: () async {
|
||
final value = await showAnchoredPopover<String>(
|
||
context: buttonContext,
|
||
width: 216,
|
||
alignment: AnchoredPopoverAlignment.end,
|
||
surfaceKey: ValueKey('sort-popover-$label'),
|
||
items: _sortMenuItems(mode, showDivider: false),
|
||
);
|
||
if (value == _kSortRecentMenuValue) {
|
||
onSortModeChange?.call(ChannelSortMode.recent);
|
||
} else if (value == _kSortAlphaMenuValue) {
|
||
onSortModeChange?.call(ChannelSortMode.alpha);
|
||
}
|
||
},
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _SectionLabel extends StatelessWidget {
|
||
const _SectionLabel({
|
||
required this.label,
|
||
required this.expanded,
|
||
required this.color,
|
||
});
|
||
|
||
final String label;
|
||
final bool expanded;
|
||
final Color color;
|
||
|
||
@override
|
||
Widget build(BuildContext context) => Row(
|
||
children: [
|
||
Flexible(
|
||
child: Text(
|
||
label,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: contentListTitleTextStyle.copyWith(
|
||
color: color,
|
||
fontWeight: FontWeight.w400,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: Grid.quarter),
|
||
_SectionChevron(
|
||
expanded: expanded,
|
||
color: navigationSecondaryForeground(context),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
class _SectionChevron extends StatelessWidget {
|
||
final bool expanded;
|
||
final Color color;
|
||
|
||
const _SectionChevron({required this.expanded, required this.color});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final reducedMotion = MediaQuery.of(context).disableAnimations;
|
||
|
||
return AnimatedRotation(
|
||
turns: expanded ? 0 : -0.25,
|
||
duration: reducedMotion ? Duration.zero : sectionExpandDuration,
|
||
curve: sectionExpandCurve,
|
||
child: Icon(BuzzIcons.chevronDown, size: _kChannelIconSize, color: color),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _SectionOptionsButton extends StatelessWidget {
|
||
const _SectionOptionsButton({
|
||
super.key,
|
||
required this.tooltip,
|
||
required this.icon,
|
||
required this.onPressed,
|
||
});
|
||
|
||
final String tooltip;
|
||
final Widget icon;
|
||
final VoidCallback onPressed;
|
||
|
||
@override
|
||
Widget build(BuildContext context) => Semantics(
|
||
button: true,
|
||
label: tooltip,
|
||
onTap: onPressed,
|
||
excludeSemantics: true,
|
||
child: Tooltip(
|
||
message: tooltip,
|
||
child: SizedBox.square(
|
||
dimension: 40,
|
||
child: InkWell(
|
||
onTap: onPressed,
|
||
borderRadius: BorderRadius.circular(Radii.full),
|
||
child: Align(alignment: Alignment.centerRight, child: icon),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|