Files
buzz/mobile/lib/features/activity/activity_page/header_actions.dart
ff0b7982f1 Polish mobile top navigation (#4778)
## Summary

- Polish mobile Home, Activity, Search, and Settings navigation chrome.
- Add progressive Buzz gradients/frost, aligned theme colors, dividers,
typography, and section spacing.
- Refine Search and Settings motion, including automatic keyboard focus
on search activation.

<img width="630" height="1368"
alt="C78FA3CE-F2B3-45F2-B9F5-7EA7500778CC"
src="https://github.com/user-attachments/assets/5935514b-d894-4010-80dd-a938363fee93"
/>
<img width="630" height="1368"
alt="5C058A73-1879-476A-881C-531ACC256D84"
src="https://github.com/user-attachments/assets/5266c841-17ee-49e8-9841-b06d84f4195f"
/>
<img width="630" height="1368"
alt="3F50ADB7-9BDA-4A8D-A81E-20560C3B9EA6"
src="https://github.com/user-attachments/assets/f615f61e-9e96-4bce-b261-ae5ec54db872"
/>
<img width="630" height="1368"
alt="35ECE741-01F3-4B79-80C5-1DDD447121A7"
src="https://github.com/user-attachments/assets/b5145186-9884-44eb-8ebc-f3303831c0a4"
/>

## Validation


- `flutter analyze`
- Focused Home, Activity, Channels, Search, theme, and footer widget
tests
- Full pre-push checks, including mobile tests, desktop checks, and
Tauri checks
- On-device iPhone review during the visual polish pass

---------

Signed-off-by: kenny lopez <klopez4212@gmail.com>
Signed-off-by: npub1glqcqfjxdens59scl477pmejh8lht4hqkhx0y4w38jxr6e6w6y2sm29y4e <47c18026466e670a1618fd7de0ef32b9ff75d6e0b5ccf255d13c8c3d674ed115@buzz.block.builderlab.xyz>
Signed-off-by: Code Reviewer <037593536284cf40e221c96c931e9877d4166d54f6bb84e5341a86d7fd5d05a4@buzz.block.builderlab.xyz>
Signed-off-by: Kenny Lopez <klopez4212@gmail.com>
Co-authored-by: npub1glqcqfjxdens59scl477pmejh8lht4hqkhx0y4w38jxr6e6w6y2sm29y4e <47c18026466e670a1618fd7de0ef32b9ff75d6e0b5ccf255d13c8c3d674ed115@buzz.block.builderlab.xyz>
Co-authored-by: Code Reviewer <037593536284cf40e221c96c931e9877d4166d54f6bb84e5341a86d7fd5d05a4@buzz.block.builderlab.xyz>
2026-08-05 19:01:20 +01:00

281 lines
9.1 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',
};
class _ActivityActionsPill extends StatelessWidget {
final InboxFilter filter;
final int dueReminderCount;
final int draftCount;
final bool unreadOnly;
final int unreadCount;
final ValueChanged<InboxFilter> onFilterChanged;
final ValueChanged<bool> onUnreadOnlyChanged;
final VoidCallback onMarkAllRead;
const _ActivityActionsPill({
required this.filter,
required this.dueReminderCount,
required this.draftCount,
required this.unreadOnly,
required this.unreadCount,
required this.onFilterChanged,
required this.onUnreadOnlyChanged,
required this.onMarkAllRead,
});
@override
Widget build(BuildContext context) => ClipRRect(
borderRadius: BorderRadius.circular(Radii.full),
child: DecoratedBox(
decoration: BoxDecoration(
color: context.colors.primaryContainer,
borderRadius: BorderRadius.circular(Radii.full),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: Grid.quarter),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
_FilterMenuButton(
filter: filter,
dueReminderCount: dueReminderCount,
draftCount: draftCount,
onChanged: onFilterChanged,
),
_InboxOptionsButton(
unreadOnly: unreadOnly,
unreadCount: unreadCount,
onUnreadOnlyChanged: onUnreadOnlyChanged,
onMarkAllRead: onMarkAllRead,
),
],
),
),
),
);
}
/// 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 showAnchoredPopover<InboxFilter>(
context: buttonContext,
width: 240,
alignment: AnchoredPopoverAlignment.start,
offset: const Offset(0, Grid.half),
menuPadding: const EdgeInsets.symmetric(vertical: Grid.half),
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(
color: navigationPrimaryForeground(context),
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: Grid.quarter),
Icon(
LucideIcons.chevronDown,
size: 16,
color: navigationPrimaryForeground(context),
),
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: navigationPrimaryForeground(context),
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',
color: navigationPrimaryForeground(context),
padding: const EdgeInsets.symmetric(horizontal: Grid.xxs),
constraints: const BoxConstraints.tightFor(
width: Grid.xl,
height: Grid.xl,
),
icon: const Icon(LucideIcons.ellipsis, size: 20),
onPressed: () async {
final selected = await showAnchoredPopover<String>(
context: buttonContext,
width: 216,
alignment: AnchoredPopoverAlignment.end,
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();
},
),
);
}
}