Files
buzz/mobile/lib/features/activity/activity_page/header_actions.dart
klopez4212 6da45ac5cf Polish mobile message and search layouts (#3121)
## Summary

- align message typography, avatars, metadata, and spacing across mobile
surfaces
- improve message follow behavior, touch feedback, and Activity popover
motion
- refine Search motion, gutters, and explicit recent-search history

## Snapshots

### Home


![Home](https://raw.githubusercontent.com/block/buzz/99aaf9719f68a2813e14c484f503af10c4fca04a/pr-3121--01-home.png)

### Activity


![Activity](https://raw.githubusercontent.com/block/buzz/99aaf9719f68a2813e14c484f503af10c4fca04a/pr-3121--02-activity.png)

### Search


![Search](https://raw.githubusercontent.com/block/buzz/99aaf9719f68a2813e14c484f503af10c4fca04a/pr-3121--03-search.png)

## Testing

- `just mobile-check`
- `just mobile-test` (749 passed, 1 skipped)

---------

Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@buzz.block.builderlab.xyz>
Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Signed-off-by: npub15w828kxsxu2684ynste0uah2jwkgatd99flt7ds4523hzm8ju6cshdr8hh <a38ea3d8d03715a3d49382f2fe76ea93ac8eada52a7ebf3615a2a3716cf2e6b1@buzz.block.builderlab.xyz>
Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz>
Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Co-authored-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@buzz.block.builderlab.xyz>
Co-authored-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Carl <c7ebe626f000404285d3686e1dc74cc07cc60a9754a150041ba132e14bd3e2ec@buzz.block.builderlab.xyz>
Co-authored-by: npub15w828kxsxu2684ynste0uah2jwkgatd99flt7ds4523hzm8ju6cshdr8hh <a38ea3d8d03715a3d49382f2fe76ea93ac8eada52a7ebf3615a2a3716cf2e6b1@buzz.block.builderlab.xyz>
2026-07-28 17:20:50 +01:00

237 lines
8.0 KiB
Dart

part of '../activity_page.dart';
const _filterLabels = <InboxFilter, String>{
InboxFilter.all: 'All',
InboxFilter.mention: 'Mentions',
InboxFilter.thread: 'Threads',
InboxFilter.needsAction: 'Needs Action',
InboxFilter.activity: 'Activity',
InboxFilter.agentActivity: 'Agents',
InboxFilter.reminders: 'Reminders',
InboxFilter.drafts: 'Drafts',
};
/// Compact filter dropdown replacing the old chip rail — mirrors desktop's
/// inbox filter menu (`FILTER_OPTIONS`).
class _FilterMenuButton extends StatelessWidget {
final InboxFilter filter;
final int dueReminderCount;
final int draftCount;
final ValueChanged<InboxFilter> onChanged;
const _FilterMenuButton({
required this.filter,
required this.dueReminderCount,
required this.draftCount,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return Builder(
builder: (buttonContext) => InkWell(
key: const ValueKey('activity-filter-menu'),
borderRadius: BorderRadius.circular(Radii.md),
onTap: () async {
final selected = await _showActivityPopover<InboxFilter>(
context: buttonContext,
width: 240,
alignment: _ActivityPopoverAlignment.start,
offset: const Offset(0, Grid.half),
menuPadding: const EdgeInsets.symmetric(vertical: Grid.half),
color: context.colors.surface.withValues(alpha: 0.98),
elevation: 8,
shadowColor: context.colors.shadow.withValues(alpha: 0.18),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Radii.card),
side: BorderSide(
color: context.colors.outlineVariant.withValues(alpha: 0.45),
),
),
surfaceKey: const ValueKey('activity-filter-popover'),
items: [
for (final entry in _filterLabels.entries)
PopupMenuItem(
value: entry.key,
height: Grid.xl,
padding: const EdgeInsets.symmetric(horizontal: Grid.twelve),
child: Row(
children: [
SizedBox(
width: Grid.sm,
child: entry.key == filter
? Icon(
LucideIcons.check,
size: 16,
color: context.colors.primary,
)
: null,
),
Expanded(
child: Text(
entry.value,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: context.textTheme.labelLarge?.copyWith(
color: context.colors.onSurface,
),
),
),
if (entry.key == InboxFilter.reminders &&
dueReminderCount > 0)
_CountBadge(count: dueReminderCount)
else if (entry.key == InboxFilter.drafts &&
draftCount > 0)
_CountBadge(count: draftCount),
],
),
),
],
);
if (buttonContext.mounted && selected != null) onChanged(selected);
},
child: ConstrainedBox(
constraints: const BoxConstraints(minHeight: Grid.xl),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: Grid.xxs),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_filterLabels[filter]!,
style: context.textTheme.labelLarge?.copyWith(
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: Grid.quarter),
Icon(
LucideIcons.chevronDown,
size: 16,
color: context.colors.onSurfaceVariant,
),
if (dueReminderCount > 0 || draftCount > 0) ...[
const SizedBox(width: Grid.quarter),
Container(
width: 6,
height: 6,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: context.colors.primary,
),
),
],
],
),
),
),
),
);
}
}
class _CountBadge extends StatelessWidget {
final int count;
const _CountBadge({required this.count});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: Grid.half + Grid.quarter,
vertical: Grid.quarter,
),
decoration: BoxDecoration(
color: context.colors.primary,
borderRadius: BorderRadius.circular(Grid.xxs),
),
child: Text(
'$count',
style: context.textTheme.labelSmall?.copyWith(
color: context.colors.onPrimary,
fontWeight: FontWeight.w600,
),
),
);
}
}
/// Overflow menu with the unread-only toggle and mark-all-read, mirroring
/// desktop's inbox options popover.
class _InboxOptionsButton extends StatelessWidget {
final bool unreadOnly;
final int unreadCount;
final ValueChanged<bool> onUnreadOnlyChanged;
final VoidCallback onMarkAllRead;
const _InboxOptionsButton({
required this.unreadOnly,
required this.unreadCount,
required this.onUnreadOnlyChanged,
required this.onMarkAllRead,
});
@override
Widget build(BuildContext context) {
return Builder(
builder: (buttonContext) => IconButton(
key: const ValueKey('activity-options-menu'),
tooltip: 'Activity options',
icon: const Icon(LucideIcons.ellipsis, size: 20),
onPressed: () async {
final selected = await _showActivityPopover<String>(
context: buttonContext,
width: 216,
alignment: _ActivityPopoverAlignment.end,
color: context.colors.surface,
elevation: 4,
shadowColor: context.colors.shadow.withValues(alpha: 0.18),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(Radii.md),
side: BorderSide(color: context.colors.outline),
),
surfaceKey: const ValueKey('activity-options-popover'),
items: [
PopupMenuItem(
value: 'unread-only',
child: Row(
children: [
Expanded(
child: Text(unreadOnly ? 'Show all' : 'Show unread'),
),
if (unreadOnly)
Icon(
LucideIcons.check,
size: 16,
color: context.colors.primary,
),
],
),
),
PopupMenuItem(
value: 'mark-all-read',
enabled: unreadCount > 0,
child: Row(
children: [
const Expanded(child: Text('Mark all as read')),
if (unreadCount > 0)
Text(
'$unreadCount',
style: context.textTheme.labelSmall?.copyWith(
color: context.colors.onSurfaceVariant,
),
),
],
),
),
],
);
if (!buttonContext.mounted || selected == null) return;
if (selected == 'unread-only') onUnreadOnlyChanged(!unreadOnly);
if (selected == 'mark-all-read') onMarkAllRead();
},
),
);
}
}