feat(offline): tier 2 phase 4 — per-row pending-sync indicators

A small cloud-upload glyph appears next to any row whose id has a
queued offline write (offline-created temp ids and pending edits both
count). Tooltip reads "Pending sync — will save when online". Renders
nothing during normal online operation so the list stays clean.

- DB: `watchPendingIds(domain)` streams the union of target_id and
  temp_id across the queue, scoped per domain.
- Per-domain Riverpod stream providers for notes / tasks / projects.
- New `PendingSyncBadge` widget — used by KnowledgeItemCard (both
  list and grid variants), `_ProjectCard`, and `_TaskRow` in the
  project workspace.

flutter analyze clean; 21 tests pass. Closes #147 — all four phases
of Tier 2 offline mode are in place.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-28 22:14:36 -04:00
parent 7df7b5ff85
commit 76aff4ea9e
6 changed files with 135 additions and 17 deletions
+21
View File
@@ -573,6 +573,27 @@ class FabledDatabase extends _$FabledDatabase {
); );
return query.watchSingle().map((row) => row.read<int>('c')); return query.watchSingle().map((row) => row.read<int>('c'));
} }
/// Watch the set of ids in [domain] that have a queued write (either a
/// `target_id` for an update/delete or a `temp_id` for an offline create).
/// Phase 4 — used by per-row pending-sync indicators in the list views.
Stream<Set<int>> watchPendingIds(String domain) {
final query = customSelect(
'SELECT target_id, temp_id FROM pending_writes WHERE domain = ?',
variables: [Variable.withString(domain)],
readsFrom: {pendingWrites},
);
return query.watch().map((rows) {
final ids = <int>{};
for (final r in rows) {
final t = r.read<int?>('target_id');
final tmp = r.read<int?>('temp_id');
if (t != null) ids.add(t);
if (tmp != null) ids.add(tmp);
}
return ids;
});
}
} }
// ── Row ↔ model converters ────────────────────────────────────────────────── // ── Row ↔ model converters ──────────────────────────────────────────────────
+17
View File
@@ -173,3 +173,20 @@ final writeQueueDepthProvider = StreamProvider<int>((ref) {
final writeQueueFailuresProvider = StreamProvider<QueueFailure>((ref) { final writeQueueFailuresProvider = StreamProvider<QueueFailure>((ref) {
return ref.watch(writeQueueProvider).failures; return ref.watch(writeQueueProvider).failures;
}); });
/// Per-domain set of ids with a queued write (target_id temp_id). Phase 4
/// — used by `PendingSyncBadge` in list views to mark rows that are still
/// in flight.
final pendingNoteIdsProvider = StreamProvider<Set<int>>((ref) {
return ref.watch(fabledDatabaseProvider).watchPendingIds(kSyncDomainNotes);
});
final pendingTaskIdsProvider = StreamProvider<Set<int>>((ref) {
return ref.watch(fabledDatabaseProvider).watchPendingIds(kSyncDomainTasks);
});
final pendingProjectIdsProvider = StreamProvider<Set<int>>((ref) {
return ref
.watch(fabledDatabaseProvider)
.watchPendingIds(kSyncDomainProjects);
});
+24 -12
View File
@@ -4,6 +4,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import '../../core/constants.dart'; import '../../core/constants.dart';
import '../../data/local/database.dart';
import '../../data/models/milestone.dart'; import '../../data/models/milestone.dart';
import '../../data/models/project.dart'; import '../../data/models/project.dart';
import '../../data/models/task.dart'; import '../../data/models/task.dart';
@@ -11,6 +12,7 @@ import '../../providers/api_client_provider.dart';
import '../../providers/milestones_provider.dart'; import '../../providers/milestones_provider.dart';
import '../../providers/projects_provider.dart'; import '../../providers/projects_provider.dart';
import '../../providers/tasks_provider.dart'; import '../../providers/tasks_provider.dart';
import '../../widgets/pending_sync_badge.dart';
class ProjectTasksScreen extends ConsumerStatefulWidget { class ProjectTasksScreen extends ConsumerStatefulWidget {
final int projectId; final int projectId;
@@ -346,18 +348,28 @@ class _TaskRow extends StatelessWidget {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Row(
task.title.isNotEmpty ? task.title : 'Untitled', children: [
style: theme.textTheme.titleSmall?.copyWith( Flexible(
decoration: effectiveStatus == TaskStatus.done child: Text(
? TextDecoration.lineThrough task.title.isNotEmpty ? task.title : 'Untitled',
: null, style: theme.textTheme.titleSmall?.copyWith(
color: effectiveStatus == TaskStatus.done decoration: effectiveStatus == TaskStatus.done
? theme.colorScheme.onSurfaceVariant ? TextDecoration.lineThrough
: null, : null,
), color: effectiveStatus == TaskStatus.done
maxLines: 2, ? theme.colorScheme.onSurfaceVariant
overflow: TextOverflow.ellipsis, : null,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
PendingSyncBadge(
domain: kSyncDomainTasks,
id: task.id,
),
],
), ),
if (task.dueDate != null) ...[ if (task.dueDate != null) ...[
const SizedBox(height: 2), const SizedBox(height: 2),
+8 -1
View File
@@ -3,8 +3,10 @@ import 'package:lucide_icons/lucide_icons.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import '../../data/local/database.dart';
import '../../data/models/project.dart'; import '../../data/models/project.dart';
import '../../providers/projects_provider.dart'; import '../../providers/projects_provider.dart';
import '../../widgets/pending_sync_badge.dart';
class ProjectsScreen extends ConsumerWidget { class ProjectsScreen extends ConsumerWidget {
const ProjectsScreen({super.key}); const ProjectsScreen({super.key});
@@ -50,7 +52,12 @@ class _ProjectCard extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ListTile( return ListTile(
title: Text(project.title), title: Row(
children: [
Flexible(child: Text(project.title)),
PendingSyncBadge(domain: kSyncDomainProjects, id: project.id),
],
),
subtitle: Column( subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
+17 -4
View File
@@ -2,12 +2,17 @@ import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart'; import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import '../data/local/database.dart';
import '../data/models/knowledge_item.dart'; import '../data/models/knowledge_item.dart';
import 'pending_sync_badge.dart';
class KnowledgeItemCard extends StatelessWidget { class KnowledgeItemCard extends StatelessWidget {
final KnowledgeItem item; final KnowledgeItem item;
const KnowledgeItemCard({super.key, required this.item}); const KnowledgeItemCard({super.key, required this.item});
String get _pendingDomain =>
item.noteType == 'task' ? kSyncDomainTasks : kSyncDomainNotes;
IconData get _icon => switch (item.noteType) { IconData get _icon => switch (item.noteType) {
'person' => LucideIcons.user, 'person' => LucideIcons.user,
'place' => LucideIcons.mapPin, 'place' => LucideIcons.mapPin,
@@ -52,10 +57,17 @@ class KnowledgeItemCard extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ListTile( return ListTile(
leading: Icon(_icon, color: _statusColor(context)), leading: Icon(_icon, color: _statusColor(context)),
title: Text( title: Row(
item.title.isEmpty ? '(untitled)' : item.title, children: [
maxLines: 1, Flexible(
overflow: TextOverflow.ellipsis, child: Text(
item.title.isEmpty ? '(untitled)' : item.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
PendingSyncBadge(domain: _pendingDomain, id: item.id),
],
), ),
subtitle: _subtitle != null subtitle: _subtitle != null
? Text( ? Text(
@@ -100,6 +112,7 @@ class KnowledgeItemCard extends StatelessWidget {
?.copyWith(fontWeight: FontWeight.w600), ?.copyWith(fontWeight: FontWeight.w600),
), ),
), ),
PendingSyncBadge(domain: _pendingDomain, id: item.id),
], ],
), ),
if (_subtitle != null) ...[ if (_subtitle != null) ...[
+48
View File
@@ -0,0 +1,48 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../data/local/database.dart';
import '../providers/api_client_provider.dart';
/// Small cloud-upload glyph shown next to a row whose id has a queued
/// offline write (Phase 4). Renders nothing when the queue is empty for
/// that id, so list views stay clean during normal online operation.
class PendingSyncBadge extends ConsumerWidget {
final String domain;
final int id;
final double size;
const PendingSyncBadge({
super.key,
required this.domain,
required this.id,
this.size = 14,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final pending = switch (domain) {
kSyncDomainNotes => ref.watch(pendingNoteIdsProvider).asData?.value,
kSyncDomainTasks => ref.watch(pendingTaskIdsProvider).asData?.value,
kSyncDomainProjects =>
ref.watch(pendingProjectIdsProvider).asData?.value,
_ => null,
};
if (pending == null || !pending.contains(id)) {
return const SizedBox.shrink();
}
final scheme = Theme.of(context).colorScheme;
return Tooltip(
message: 'Pending sync — will save when online',
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Icon(
LucideIcons.uploadCloud,
size: size,
color: scheme.onSurfaceVariant,
),
),
);
}
}