Auto save post draft

🐛 Fix publisher edit screen overflow
This commit is contained in:
2025-06-24 01:00:29 +08:00
parent ffbe399614
commit 6d68b20122
9 changed files with 1150 additions and 119 deletions

View File

@ -1,3 +1,5 @@
import 'dart:developer';
import 'package:collection/collection.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
@ -9,8 +11,10 @@ import 'package:island/models/post.dart';
import 'package:island/pods/config.dart';
import 'package:island/pods/network.dart';
import 'package:island/services/file.dart';
import 'package:island/services/compose_storage.dart';
import 'package:island/widgets/alert.dart';
import 'package:pasteboard/pasteboard.dart';
import 'dart:async';
class ComposeState {
final ValueNotifier<List<UniversalFile>> attachments;
@ -21,6 +25,8 @@ class ComposeState {
final ValueNotifier<bool> submitting;
final ValueNotifier<Map<int, double>> attachmentProgress;
final ValueNotifier<SnPublisher?> currentPublisher;
final String draftId;
Timer? _autoSaveTimer;
ComposeState({
required this.attachments,
@ -31,7 +37,20 @@ class ComposeState {
required this.submitting,
required this.attachmentProgress,
required this.currentPublisher,
required this.draftId,
});
void startAutoSave(WidgetRef ref) {
_autoSaveTimer?.cancel();
_autoSaveTimer = Timer.periodic(const Duration(seconds: 3), (_) {
ComposeLogic.saveDraft(ref, this);
});
}
void stopAutoSave() {
_autoSaveTimer?.cancel();
_autoSaveTimer = null;
}
}
class ComposeLogic {
@ -39,7 +58,10 @@ class ComposeLogic {
SnPost? originalPost,
SnPost? forwardedPost,
SnPost? repliedPost,
String? draftId,
}) {
final id = draftId ?? DateTime.now().millisecondsSinceEpoch.toString();
return ComposeState(
attachments: ValueNotifier<List<UniversalFile>>(
originalPost?.attachments
@ -70,9 +92,106 @@ class ComposeLogic {
submitting: ValueNotifier<bool>(false),
attachmentProgress: ValueNotifier<Map<int, double>>({}),
currentPublisher: ValueNotifier<SnPublisher?>(null),
draftId: id,
);
}
static ComposeState createStateFromDraft(ComposeDraft draft) {
return ComposeState(
attachments: ValueNotifier<List<UniversalFile>>([]),
titleController: TextEditingController(text: draft.title),
descriptionController: TextEditingController(text: draft.description),
contentController: TextEditingController(text: draft.content),
visibility: ValueNotifier<int>(_parseVisibility(draft.visibility)),
submitting: ValueNotifier<bool>(false),
attachmentProgress: ValueNotifier<Map<int, double>>({}),
currentPublisher: ValueNotifier<SnPublisher?>(null),
draftId: draft.id,
);
}
static int _parseVisibility(String visibility) {
switch (visibility.toLowerCase()) {
case 'public':
return 0;
case 'unlisted':
return 1;
case 'friends':
return 2;
case 'selected':
return 3;
case 'private':
return 4;
default:
return 0;
}
}
static String _visibilityToString(int visibility) {
switch (visibility) {
case 0:
return 'public';
case 1:
return 'unlisted';
case 2:
return 'friends';
case 3:
return 'selected';
case 4:
return 'private';
default:
return 'public';
}
}
static Future<void> saveDraft(WidgetRef ref, ComposeState state) async {
try {
// Check if the auto-save timer is still active (widget not disposed)
if (state._autoSaveTimer == null) {
return; // Widget has been disposed, don't save
}
final draft = ComposeDraft(
id: state.draftId,
title: state.titleController.text,
description: state.descriptionController.text,
content: state.contentController.text,
attachmentIds:
state.attachments.value
.where((e) => e.isOnCloud)
.map((e) => e.data.id.toString())
.toList(),
visibility: _visibilityToString(state.visibility.value),
lastModified: DateTime.now(),
);
await ref.read(composeStorageNotifierProvider.notifier).saveDraft(draft);
} catch (e) {
log('[ComposeLogic] Failed to save draft, error: $e');
// Silently fail for auto-save to avoid disrupting user experience
}
}
static Future<void> deleteDraft(WidgetRef ref, String draftId) async {
try {
await ref
.read(composeStorageNotifierProvider.notifier)
.deleteDraft(draftId);
} catch (e) {
// Silently fail
}
}
static Future<ComposeDraft?> loadDraft(WidgetRef ref, String draftId) async {
try {
return ref
.read(composeStorageNotifierProvider.notifier)
.getDraft(draftId);
} catch (e) {
return null;
}
}
static String getMimeTypeFromFileType(UniversalFileType type) {
return switch (type) {
UniversalFileType.image => 'image/unknown',
@ -242,6 +361,19 @@ class ComposeLogic {
),
);
// Delete draft after successful submission
if (postType == 1) {
// Delete article draft
await ref
.read(articleStorageNotifierProvider.notifier)
.deleteDraft(state.draftId);
} else {
// Delete regular post draft
await ref
.read(composeStorageNotifierProvider.notifier)
.deleteDraft(state.draftId);
}
if (context.mounted) {
Navigator.of(context).maybePop(true);
}
@ -297,6 +429,7 @@ class ComposeLogic {
}
static void dispose(ComposeState state) {
state.stopAutoSave();
state.titleController.dispose();
state.descriptionController.dispose();
state.contentController.dispose();

View File

@ -0,0 +1,335 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/services/compose_storage.dart';
import 'package:material_symbols_icons/symbols.dart';
class DraftManagerSheet extends HookConsumerWidget {
final bool isArticle;
final Function(String draftId)? onDraftSelected;
const DraftManagerSheet({
super.key,
this.isArticle = false,
this.onDraftSelected,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final drafts =
isArticle
? ref.watch(articleStorageNotifierProvider)
: ref.watch(composeStorageNotifierProvider);
final sortedDrafts = useMemoized(() {
if (isArticle) {
final draftList = drafts.values.cast<ArticleDraft>().toList();
draftList.sort((a, b) => b.lastModified.compareTo(a.lastModified));
return draftList;
} else {
final draftList = drafts.values.cast<ComposeDraft>().toList();
draftList.sort((a, b) => b.lastModified.compareTo(a.lastModified));
return draftList;
}
}, [drafts]);
return Scaffold(
appBar: AppBar(
title: Text(isArticle ? 'articleDrafts'.tr() : 'postDrafts'.tr()),
),
body: Column(
children: [
if (sortedDrafts.isEmpty)
Expanded(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Symbols.draft,
size: 64,
color: colorScheme.onSurface.withOpacity(0.3),
),
const Gap(16),
Text(
'noDrafts'.tr(),
style: theme.textTheme.bodyLarge?.copyWith(
color: colorScheme.onSurface.withOpacity(0.6),
),
),
],
),
),
)
else
Expanded(
child: ListView.builder(
itemCount: sortedDrafts.length,
itemBuilder: (context, index) {
final draft = sortedDrafts[index];
return _DraftItem(
draft: draft,
isArticle: isArticle,
onTap: () {
Navigator.of(context).pop();
final draftId =
isArticle
? (draft as ArticleDraft).id
: (draft as ComposeDraft).id;
onDraftSelected?.call(draftId);
},
onDelete: () async {
final draftId =
isArticle
? (draft as ArticleDraft).id
: (draft as ComposeDraft).id;
if (isArticle) {
await ref
.read(articleStorageNotifierProvider.notifier)
.deleteDraft(draftId);
} else {
await ref
.read(composeStorageNotifierProvider.notifier)
.deleteDraft(draftId);
}
},
);
},
),
),
if (sortedDrafts.isNotEmpty) ...[
const Divider(),
Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: OutlinedButton.icon(
onPressed: () async {
final confirmed = await showDialog<bool>(
context: context,
builder:
(context) => AlertDialog(
title: Text('clearAllDrafts'.tr()),
content: Text('clearAllDraftsConfirm'.tr()),
actions: [
TextButton(
onPressed:
() => Navigator.of(context).pop(false),
child: Text('cancel'.tr()),
),
TextButton(
onPressed:
() => Navigator.of(context).pop(true),
child: Text('confirm'.tr()),
),
],
),
);
if (confirmed == true) {
if (isArticle) {
await ref
.read(articleStorageNotifierProvider.notifier)
.clearAllDrafts();
} else {
await ref
.read(composeStorageNotifierProvider.notifier)
.clearAllDrafts();
}
}
},
icon: const Icon(Symbols.delete_sweep),
label: Text('clearAll'.tr()),
),
),
],
),
),
],
],
),
);
}
}
class _DraftItem extends StatelessWidget {
final dynamic draft; // ComposeDraft or ArticleDraft
final bool isArticle;
final VoidCallback? onTap;
final VoidCallback? onDelete;
const _DraftItem({
required this.draft,
required this.isArticle,
this.onTap,
this.onDelete,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final String title;
final String content;
final DateTime lastModified;
final String visibility;
if (isArticle) {
final articleDraft = draft as ArticleDraft;
title =
articleDraft.title.isNotEmpty ? articleDraft.title : 'untitled'.tr();
content =
articleDraft.content.isNotEmpty
? articleDraft.content
: (articleDraft.description.isNotEmpty
? articleDraft.description
: 'noContent'.tr());
lastModified = articleDraft.lastModified;
visibility = _parseArticleVisibility(articleDraft.visibility);
} else {
final postDraft = draft as ComposeDraft;
title = postDraft.title.isNotEmpty ? postDraft.title : 'untitled'.tr();
content =
postDraft.content.isNotEmpty
? postDraft.content
: (postDraft.description.isNotEmpty
? postDraft.description
: 'noContent'.tr());
lastModified = postDraft.lastModified;
visibility = postDraft.visibility;
}
final preview =
content.length > 100 ? '${content.substring(0, 100)}...' : content;
final timeAgo = _formatTimeAgo(lastModified);
return Card(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
isArticle ? Symbols.article : Symbols.post_add,
size: 20,
color: colorScheme.primary,
),
const Gap(8),
Expanded(
child: Text(
title,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
IconButton(
onPressed: onDelete,
icon: const Icon(Symbols.delete),
iconSize: 20,
visualDensity: VisualDensity.compact,
),
],
),
if (preview.isNotEmpty) ...[
const Gap(8),
Text(
preview,
style: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurface.withOpacity(0.7),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
const Gap(8),
Row(
children: [
Icon(
Symbols.schedule,
size: 16,
color: colorScheme.onSurface.withOpacity(0.5),
),
const Gap(4),
Text(
timeAgo,
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurface.withOpacity(0.5),
),
),
const Spacer(),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Text(
visibility,
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onPrimaryContainer,
fontWeight: FontWeight.w500,
),
),
),
],
),
],
),
),
),
);
}
String _formatTimeAgo(DateTime dateTime) {
final now = DateTime.now();
final difference = now.difference(dateTime);
if (difference.inMinutes < 1) {
return 'justNow'.tr();
} else if (difference.inHours < 1) {
return 'minutesAgo'.tr(args: [difference.inMinutes.toString()]);
} else if (difference.inDays < 1) {
return 'hoursAgo'.tr(args: [difference.inHours.toString()]);
} else if (difference.inDays < 7) {
return 'daysAgo'.tr(args: [difference.inDays.toString()]);
} else {
return DateFormat('MMM dd, yyyy').format(dateTime);
}
}
String _parseArticleVisibility(String visibility) {
switch (visibility.toLowerCase()) {
case 'public':
return 'public'.tr();
case 'unlisted':
return 'unlisted'.tr();
case 'friends':
return 'friends'.tr();
case 'selected':
return 'selected'.tr();
case 'private':
return 'private'.tr();
default:
return 'unknown'.tr();
}
}
}

View File

@ -212,7 +212,9 @@ class PostItem extends HookConsumerWidget {
MarkdownTextContent(
content: item.content!,
linesMargin:
item.type == 0 ? EdgeInsets.zero : null,
item.type == 0
? EdgeInsets.only(bottom: 4)
: null,
),
// Show truncation hint if post is truncated
if (item.isTruncated && !isFullPost)
@ -415,6 +417,10 @@ Widget _buildReferencePost(BuildContext context, SnPost item) {
content: referencePost.content!,
textStyle: const TextStyle(fontSize: 14),
isSelectable: false,
linesMargin:
referencePost.type == 0
? EdgeInsets.only(bottom: 4)
: null,
).padding(bottom: 4),
// Truncation hint for referenced post
if (referencePost.isTruncated)