mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
**Category:** improvement **User Impact:** Mobile users can scan Activity as a focused conversation inbox and open the exact unread message or thread represented by each item. ## Context Mobile's Activity tab had not kept pace with Desktop: it presented isolated event headlines, advertised categories that were often empty, and opened a channel without clearly landing on the selected item. This PR brings the Mobile surface toward the conversation-oriented direction explored in Clay Delk's Desktop [Inbox refactor PR #2045](https://github.com/block/buzz/pull/2045), while adapting it to Mobile rather than copying the Desktop split-pane implementation. The related product/UX discussion is captured in the originating [Buzz thread](buzz://message?channel=a9bbc0e5-d25d-4740-849c-93c34bb578a4&id=a7d9a4d33dcd8c6bf0dc67d81c328892b9e38dedaa8548920224ef388301b6ab). ## UX decisions in this PR - **Conversation-oriented, not event-oriented:** related updates collapse into one row per thread/DM conversation, represented by the latest update and ordered by latest activity. Separate top-level conversations in the same channel remain separate rows. - **Resume at the oldest unread:** tapping a grouped row opens the represented canonical message/thread/DM at its oldest unread item, rather than merely opening the channel at an arbitrary position. - **Desktop-aligned row hierarchy:** rows lead with a full avatar and sender, followed by contextual location/type metadata, unread dot + time, and a two-line preview. A **New** boundary separates unread and read content. - **Mobile-native navigation:** Mobile keeps a single-column `Activity → canonical conversation → Back` flow. It does not introduce Desktop's persistent detail pane. - **Compact filtering:** the old horizontal chip rail becomes a compact filter menu so the source set fits a phone viewport without horizontal scanning. Filters are All, Mentions, Threads, Needs Action, Activity, Agents, Reminders, and Drafts. - **Focused source semantics:** All covers personally relevant work—DMs, mentions, thread replies, needs-action events, owned-agent activity, due reminders, and active drafts—rather than becoming a generic stream of every channel message. Mobile's standalone Activity source is currently limited to DM traffic because it does not have Desktop's aggregated channel-activity feed. - **Shared read behavior:** rows project canonical channel/thread/message markers, support unread-only and mark-all-read, and use local overrides only where canonical markers cannot represent an item. - **Reminders and drafts are real data:** reminders use the same encrypted NIP-ER events as Desktop. Drafts persist device-local composer state, restore on return, survive failed sends, and clear after successful sends. - **Explain navigation failures:** an unavailable destination produces an explanatory message rather than silently doing nothing or falling back to an unrelated channel position. ## Implementation summary - Adds a Mobile inbox model for conversation grouping, category priority, contextual labels, sorting, filtering, and oldest-unread targets. - Expands relay-backed sources for mentions, approvals, owned-agent lifecycle events, and DM traffic. - Adds fail-closed NIP-ER reminder decryption and device-local compose-draft persistence. - Redesigns Activity rows, boundaries, filters, unread controls, and empty/loading states. - Routes rows through Mobile's existing canonical channel/thread screens with precise target IDs. - Adds model, provider, widget, reminder, read-state, draft-lifecycle, and deep-link coverage. ## Reproduction steps 1. Run Mobile and open **Activity**. 2. Confirm full avatars, sender-first rows, context labels, unread indicators, timestamps, two-line previews, and the compact filter control. 3. Open the filter menu and verify All, Mentions, Threads, Needs Action, Activity, Agents, Reminders, and Drafts. 4. Tap a grouped thread row and confirm the canonical conversation opens at its oldest unread message. 5. Mark rows read/unread, enable unread-only mode, and use mark-all-read; confirm state agrees with the channel/thread destination. 6. Type without sending in a channel or thread, leave, and confirm the draft appears in Activity and restores in the composer. ## Screenshots | Before — merge-base `dd222a509` | After — PR head `52ad40aee` | |---|---| | <img width="1206" height="2622" alt="image" src="https://github.com/user-attachments/assets/ae961b08-bf8a-4bd5-b487-f6321ae8d85b" /> | <img width="1206" height="2622" alt="image" src="https://github.com/user-attachments/assets/bcbe7ab0-552a-417c-9e85-7a85eb4592ee" /> | Recaptured on the same authenticated iPhone 17 simulator, account, theme, and Activity view, at this PR's current merge-base (`dd222a509`) and head (`52ad40aee`). Both frames were taken within a few minutes on the same live feed, so the visible conversation set overlaps closely (the recent Ned/Bart/Tommy items appear in both). The compared change is the row *structure*: Before leads with an `@ Mention` headline over a small inline avatar and a horizontal chip rail; After leads with a full avatar, a compact `labelMedium` sender label, contextual "Mentioned in" metadata, and a filter menu. The sender username now renders at the same compact scale the old `@ Mention` label used. ## Verification - Current rebased head: `5bd87f4f4` on `origin/main` at `dd222a509`; GitHub reports the PR mergeable. - `flutter analyze` — clean at `5bd87f4f4`. - Full Mobile suite — 698 passed, 1 skipped, 4 failed; all four failures reproduce identically on clean `origin/main` (`channels_page_test` create-channel sheet and three `compose_bar_test` agent-mention cases). - The prior PR-specific `home_page_test` failures were fixed by providing the Activity local-state dependency in that harness. - Independent code and simulator UI review — approved. - Post-rebase GitHub checks are running. --------- Signed-off-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@buzz.block.builderlab.xyz> Co-authored-by: npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w <52a228d6edf316ec6812ac3c9fc0d696ab59fc7954d77e7be31eedcddf91335b@buzz.block.builderlab.xyz> Co-authored-by: npub14vtk7pvazqrq9639qu7e560wnqtl0d53ca4gjuvq6jzf3k2el23qqlwa7f <ab176f059d100602ea25073d9a69ee9817f7b691c76a897180d48498d959faa2@buzz.block.builderlab.xyz>
161 lines
5.1 KiB
Dart
161 lines
5.1 KiB
Dart
part of '../activity_page.dart';
|
|
|
|
/// Reminders surface for the Reminders filter — due/pending NIP-ER
|
|
/// reminders that deep-link to their target message.
|
|
class _RemindersList extends ConsumerWidget {
|
|
final void Function(Reminder reminder) onOpen;
|
|
final Future<void> Function() onRefresh;
|
|
|
|
const _RemindersList({required this.onOpen, required this.onRefresh});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final remindersAsync = ref.watch(remindersProvider);
|
|
final reminders = [
|
|
for (final r in remindersAsync.value ?? const <Reminder>[])
|
|
if (r.status == 'pending') r,
|
|
];
|
|
|
|
if (remindersAsync.isLoading && reminders.isEmpty) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
if (reminders.isEmpty) {
|
|
return const _EmptySurface(
|
|
icon: LucideIcons.clock,
|
|
message: 'No reminders',
|
|
detail: 'Reminders you set will show up here.',
|
|
);
|
|
}
|
|
|
|
final now = DateTime.now().millisecondsSinceEpoch ~/ 1000;
|
|
return RefreshIndicator(
|
|
onRefresh: onRefresh,
|
|
child: ListView.builder(
|
|
padding: const EdgeInsets.symmetric(vertical: Grid.xxs),
|
|
itemCount: reminders.length,
|
|
itemBuilder: (context, index) {
|
|
final reminder = reminders[index];
|
|
final due = reminder.isDue(now);
|
|
final title = reminder.note?.trim().isNotEmpty == true
|
|
? reminder.note!.trim()
|
|
: reminder.target?.preview ?? 'Reminder';
|
|
return ListTile(
|
|
key: ValueKey('reminder-row-${reminder.id}'),
|
|
leading: Icon(
|
|
due ? LucideIcons.bellRing : LucideIcons.clock,
|
|
size: 20,
|
|
color: due
|
|
? context.colors.primary
|
|
: context.colors.onSurfaceVariant,
|
|
),
|
|
title: Text(title, maxLines: 2, overflow: TextOverflow.ellipsis),
|
|
subtitle: reminder.notBefore != null
|
|
? Text(
|
|
due
|
|
? 'Due now'
|
|
: 'Due ${_inboxTimestamp(reminder.notBefore!)}',
|
|
)
|
|
: null,
|
|
onTap: () => onOpen(reminder),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Drafts surface for the Drafts filter — locally saved unsent composer
|
|
/// text that reopens the target composer.
|
|
class _DraftsList extends StatelessWidget {
|
|
final List<ComposeDraft> drafts;
|
|
final Map<String, Channel> channelById;
|
|
final String? myPubkey;
|
|
final void Function(ComposeDraft draft) onOpen;
|
|
final void Function(ComposeDraft draft) onDelete;
|
|
|
|
const _DraftsList({
|
|
required this.drafts,
|
|
required this.channelById,
|
|
required this.myPubkey,
|
|
required this.onOpen,
|
|
required this.onDelete,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (drafts.isEmpty) {
|
|
return const _EmptySurface(
|
|
icon: LucideIcons.filePen,
|
|
message: 'No drafts',
|
|
detail: 'Unsent messages you start composing will show up here.',
|
|
);
|
|
}
|
|
|
|
return ListView.builder(
|
|
padding: const EdgeInsets.symmetric(vertical: Grid.xxs),
|
|
itemCount: drafts.length,
|
|
itemBuilder: (context, index) {
|
|
final draft = drafts[index];
|
|
final channel = channelById[draft.channelId];
|
|
final destination = channel == null
|
|
? 'Unavailable channel'
|
|
: channel.isDm
|
|
? resolveDmChannelDisplayLabel(channel, currentPubkey: myPubkey)
|
|
: '#${channel.name}';
|
|
return ListTile(
|
|
key: ValueKey('draft-row-${draft.key}'),
|
|
leading: Icon(
|
|
LucideIcons.filePen,
|
|
size: 20,
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
title: Text(draft.text, maxLines: 2, overflow: TextOverflow.ellipsis),
|
|
subtitle: Text(
|
|
draft.threadHeadId != null ? 'Thread in $destination' : destination,
|
|
),
|
|
trailing: IconButton(
|
|
icon: const Icon(LucideIcons.trash2, size: 18),
|
|
tooltip: 'Delete draft',
|
|
onPressed: () => onDelete(draft),
|
|
),
|
|
onTap: () => onOpen(draft),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Inbox list timestamp — desktop's `formatInboxTimestamp`:
|
|
/// time today, "Yesterday", short date this year, dated otherwise.
|
|
String _inboxTimestamp(int unixSeconds, {DateTime? now}) {
|
|
final current = now ?? DateTime.now();
|
|
final date = DateTime.fromMillisecondsSinceEpoch(unixSeconds * 1000);
|
|
final today = DateTime(current.year, current.month, current.day);
|
|
final day = DateTime(date.year, date.month, date.day);
|
|
final dayDiff = today.difference(day).inDays;
|
|
|
|
if (dayDiff == 0) {
|
|
final hour = date.hour % 12 == 0 ? 12 : date.hour % 12;
|
|
final minute = date.minute.toString().padLeft(2, '0');
|
|
return '$hour:$minute ${date.hour < 12 ? 'AM' : 'PM'}';
|
|
}
|
|
if (dayDiff == 1) return 'Yesterday';
|
|
|
|
const months = [
|
|
'Jan',
|
|
'Feb',
|
|
'Mar',
|
|
'Apr',
|
|
'May',
|
|
'Jun',
|
|
'Jul',
|
|
'Aug',
|
|
'Sep',
|
|
'Oct',
|
|
'Nov',
|
|
'Dec',
|
|
];
|
|
final label = '${months[date.month - 1]} ${date.day}';
|
|
return date.year == current.year ? label : '$label, ${date.year}';
|
|
}
|