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:
@@ -573,6 +573,27 @@ class FabledDatabase extends _$FabledDatabase {
|
||||
);
|
||||
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 ──────────────────────────────────────────────────
|
||||
|
||||
@@ -173,3 +173,20 @@ final writeQueueDepthProvider = StreamProvider<int>((ref) {
|
||||
final writeQueueFailuresProvider = StreamProvider<QueueFailure>((ref) {
|
||||
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);
|
||||
});
|
||||
|
||||
@@ -4,6 +4,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../core/constants.dart';
|
||||
import '../../data/local/database.dart';
|
||||
import '../../data/models/milestone.dart';
|
||||
import '../../data/models/project.dart';
|
||||
import '../../data/models/task.dart';
|
||||
@@ -11,6 +12,7 @@ import '../../providers/api_client_provider.dart';
|
||||
import '../../providers/milestones_provider.dart';
|
||||
import '../../providers/projects_provider.dart';
|
||||
import '../../providers/tasks_provider.dart';
|
||||
import '../../widgets/pending_sync_badge.dart';
|
||||
|
||||
class ProjectTasksScreen extends ConsumerStatefulWidget {
|
||||
final int projectId;
|
||||
@@ -346,7 +348,10 @@ class _TaskRow extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
Row(
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
task.title.isNotEmpty ? task.title : 'Untitled',
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
decoration: effectiveStatus == TaskStatus.done
|
||||
@@ -359,6 +364,13 @@ class _TaskRow extends StatelessWidget {
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
PendingSyncBadge(
|
||||
domain: kSyncDomainTasks,
|
||||
id: task.id,
|
||||
),
|
||||
],
|
||||
),
|
||||
if (task.dueDate != null) ...[
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
|
||||
@@ -3,8 +3,10 @@ import 'package:lucide_icons/lucide_icons.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../../data/local/database.dart';
|
||||
import '../../data/models/project.dart';
|
||||
import '../../providers/projects_provider.dart';
|
||||
import '../../widgets/pending_sync_badge.dart';
|
||||
|
||||
class ProjectsScreen extends ConsumerWidget {
|
||||
const ProjectsScreen({super.key});
|
||||
@@ -50,7 +52,12 @@ class _ProjectCard extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListTile(
|
||||
title: Text(project.title),
|
||||
title: Row(
|
||||
children: [
|
||||
Flexible(child: Text(project.title)),
|
||||
PendingSyncBadge(domain: kSyncDomainProjects, id: project.id),
|
||||
],
|
||||
),
|
||||
subtitle: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
|
||||
@@ -2,12 +2,17 @@ import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons/lucide_icons.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
|
||||
import '../data/local/database.dart';
|
||||
import '../data/models/knowledge_item.dart';
|
||||
import 'pending_sync_badge.dart';
|
||||
|
||||
class KnowledgeItemCard extends StatelessWidget {
|
||||
final KnowledgeItem item;
|
||||
const KnowledgeItemCard({super.key, required this.item});
|
||||
|
||||
String get _pendingDomain =>
|
||||
item.noteType == 'task' ? kSyncDomainTasks : kSyncDomainNotes;
|
||||
|
||||
IconData get _icon => switch (item.noteType) {
|
||||
'person' => LucideIcons.user,
|
||||
'place' => LucideIcons.mapPin,
|
||||
@@ -52,11 +57,18 @@ class KnowledgeItemCard extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return ListTile(
|
||||
leading: Icon(_icon, color: _statusColor(context)),
|
||||
title: Text(
|
||||
title: Row(
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
item.title.isEmpty ? '(untitled)' : item.title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
PendingSyncBadge(domain: _pendingDomain, id: item.id),
|
||||
],
|
||||
),
|
||||
subtitle: _subtitle != null
|
||||
? Text(
|
||||
_subtitle!,
|
||||
@@ -100,6 +112,7 @@ class KnowledgeItemCard extends StatelessWidget {
|
||||
?.copyWith(fontWeight: FontWeight.w600),
|
||||
),
|
||||
),
|
||||
PendingSyncBadge(domain: _pendingDomain, id: item.id),
|
||||
],
|
||||
),
|
||||
if (_subtitle != null) ...[
|
||||
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user