feat: 4-tab major redesign: Search, Favorites, History & Collections v2.1.0

This commit is contained in:
2026-09-04 11:12:38 +03:00
parent b33248ef9d
commit c6a9dcb4d5
18 changed files with 2634 additions and 403 deletions
@@ -6,10 +6,11 @@ import '../../../app/app.dart';
import '../../../app/responsive.dart';
import '../../../backend/backend.dart';
import '../../../shared/widgets/adaptive_scaffold.dart';
import '../../../shared/widgets/empty_view.dart';
import '../../../shared/widgets/confirm_dialog.dart';
import '../../../shared/widgets/error_view.dart';
import '../../../shared/widgets/post_masonry_grid.dart';
import '../../favorites/presentation/favorites_controller.dart';
import 'collection_form_dialog.dart';
import 'collections_controller.dart';
class CollectionDetailsScreen extends ConsumerWidget {
@@ -19,60 +20,181 @@ class CollectionDetailsScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final posts = ref.watch(collectionPostsProvider(collectionId));
final postsAsync = ref.watch(collectionPostsProvider(collectionId));
final collections = ref.watch(collectionsControllerProvider).valueOrNull;
final title = collections
?.where((collection) => collection.id == collectionId)
.firstOrNull
?.name ??
'Collection';
final collection = collections
?.where((c) => c.id == collectionId)
.firstOrNull;
final settings =
ref.watch(appSettingsProvider).value ?? AppSettings.defaults;
final isRu = settings.languageCode == 'ru';
final favoriteKeys = ref.watch(favoriteKeysProvider).value ?? <String>{};
return AdaptiveScaffold(
title: title,
body: posts.when(
title: collection?.name ?? (isRu ? 'Коллекция' : 'Collection'),
actions: [
if (collection != null) ...[
IconButton(
tooltip: isRu ? 'Редактировать' : 'Edit',
icon: const Icon(Icons.edit_rounded),
onPressed: () => showCollectionFormDialog(
context,
ref,
collection: collection,
),
),
IconButton(
tooltip: isRu ? 'Удалить' : 'Delete',
icon: const Icon(Icons.delete_outline_rounded),
onPressed: () async {
final ok = await showConfirmDialog(
context,
title: isRu ? 'Удалить коллекцию' : 'Delete collection',
message: isRu
? 'Удалить подборку "${collection.name}"?'
: 'Remove "${collection.name}"?',
);
if (ok) {
await ref
.read(collectionsControllerProvider.notifier)
.delete(collection.id);
if (context.mounted) context.pop();
}
},
),
],
],
body: postsAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (error, _) => ErrorView(message: error.toString()),
data: (items) => items.isEmpty
? const EmptyView(title: 'Collection is empty')
: PostMasonryGrid(
posts: items,
columns: Responsive.columnsFor(
context,
mobileColumns: settings.mobileColumns,
desktopColumns: settings.desktopColumns,
data: (items) {
if (items.isEmpty) {
return Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.primaryContainer
.withValues(alpha: 0.3),
shape: BoxShape.circle,
),
child: Icon(
Icons.collections_bookmark_rounded,
size: 56,
color: Theme.of(context).colorScheme.primary,
),
),
const SizedBox(height: 16),
Text(
isRu ? 'В коллекции пока нет постов' : 'Collection is empty',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
isRu
? 'Добавляйте посты из ленты через меню «Добавить в коллекцию» на карточке поста'
: 'Add posts to this collection using "Add to collection" from post cards in the feed',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
const SizedBox(height: 24),
FilledButton.icon(
onPressed: () => context.go('/feed'),
icon: const Icon(Icons.explore_rounded),
label: Text(isRu ? 'Перейти в ленту' : 'Explore Feed'),
),
],
),
blurExplicit: settings.blurExplicitContent,
showBadges: settings.showPostBadges,
nsfwEnabled: settings.nsfwEnabled,
mediaQualityMode:
MediaQualityMode.fromName(settings.mediaQualityMode),
favoriteKeys: favoriteKeys,
onOpen: (post) => context.push(
'/post/${post.providerId}/${post.id}',
extra: PostNavigationContext(
currentPost: post,
posts: items,
),
);
}
return Column(
children: [
if (collection?.description != null &&
collection!.description!.isNotEmpty)
Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 4),
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 14,
vertical: 10,
),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerLow,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: Theme.of(context)
.colorScheme
.outlineVariant
.withValues(alpha: 0.3),
),
),
child: Text(
collection.description!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
),
),
onFavorite: (post) async {
if (favoriteKeys.contains(post.cacheKey)) {
await ref
.read(favoriteServiceProvider)
.removeFavorite(post.id, post.providerId);
} else {
await ref.read(favoriteServiceProvider).addFavorite(
post,
settings: settings,
downloadManager:
ref.read(downloadManagerServiceProvider),
);
}
ref.invalidate(favoriteKeysProvider);
ref.invalidate(favoritesControllerProvider);
},
Expanded(
child: PostMasonryGrid(
posts: items,
columns: Responsive.columnsFor(
context,
mobileColumns: settings.mobileColumns,
desktopColumns: settings.desktopColumns,
),
blurExplicit: settings.blurExplicitContent,
showBadges: settings.showPostBadges,
nsfwEnabled: settings.nsfwEnabled,
mediaQualityMode:
MediaQualityMode.fromName(settings.mediaQualityMode),
favoriteKeys: favoriteKeys,
onOpen: (post) => context.push(
'/post/${post.providerId}/${post.id}',
extra: PostNavigationContext(
currentPost: post,
posts: items,
),
),
onFavorite: (post) async {
if (favoriteKeys.contains(post.cacheKey)) {
await ref
.read(favoriteServiceProvider)
.removeFavorite(post.id, post.providerId);
} else {
await ref.read(favoriteServiceProvider).addFavorite(
post,
settings: settings,
downloadManager:
ref.read(downloadManagerServiceProvider),
);
}
ref.invalidate(favoriteKeysProvider);
ref.invalidate(favoritesControllerProvider);
},
),
),
],
);
},
),
);
}
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../app/app.dart';
import '../../../backend/backend.dart';
import 'collections_controller.dart';
@@ -9,56 +10,117 @@ Future<void> showCollectionFormDialog(
WidgetRef ref, {
Collection? collection,
}) async {
final settings =
ref.read(appSettingsProvider).value ?? AppSettings.defaults;
final isRu = settings.languageCode == 'ru';
final nameController = TextEditingController(text: collection?.name);
final descriptionController =
TextEditingController(text: collection?.description);
await showDialog<void>(
context: context,
builder: (context) => AlertDialog(
title: Text(collection == null ? 'New collection' : 'Edit collection'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: nameController,
decoration: const InputDecoration(labelText: 'Name'),
builder: (context) {
final scheme = Theme.of(context).colorScheme;
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
titlePadding: const EdgeInsets.fromLTRB(24, 24, 24, 12),
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
actionsPadding: const EdgeInsets.fromLTRB(24, 16, 24, 20),
title: Row(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: scheme.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Icon(
collection == null
? Icons.create_new_folder_rounded
: Icons.edit_note_rounded,
color: scheme.onPrimaryContainer,
size: 24,
),
),
const SizedBox(width: 14),
Expanded(
child: Text(
collection == null
? (isRu ? 'Новая коллекция' : 'New collection')
: (isRu ? 'Редактировать' : 'Edit collection'),
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
),
],
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 8),
TextField(
controller: nameController,
autofocus: collection == null,
decoration: InputDecoration(
labelText: isRu ? 'Название' : 'Name',
hintText: isRu ? 'Например, Избранные обои' : 'e.g. Best Wallpapers',
prefixIcon: const Icon(Icons.bookmark_border_rounded),
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
),
),
),
const SizedBox(height: 14),
TextField(
controller: descriptionController,
maxLines: 2,
decoration: InputDecoration(
labelText: isRu ? 'Описание (необязательно)' : 'Description (optional)',
hintText: isRu ? 'О чем эта подборка' : 'What is this collection about',
prefixIcon: const Icon(Icons.description_outlined),
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
),
),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(isRu ? 'Отмена' : 'Cancel'),
),
const SizedBox(height: 12),
TextField(
controller: descriptionController,
decoration: const InputDecoration(labelText: 'Description'),
FilledButton(
onPressed: () async {
final name = nameController.text.trim();
if (name.isEmpty) return;
if (collection == null) {
await ref
.read(collectionsControllerProvider.notifier)
.create(name, descriptionController.text.trim());
} else {
await ref
.read(collectionsControllerProvider.notifier)
.updateCollection(
collection.id,
name: name,
description: descriptionController.text.trim(),
coverUrl: collection.coverUrl,
);
}
if (context.mounted) Navigator.pop(context);
},
child: Text(isRu ? 'Сохранить' : 'Save'),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Cancel'),
),
FilledButton(
onPressed: () async {
final name = nameController.text.trim();
if (name.isEmpty) return;
if (collection == null) {
await ref
.read(collectionsControllerProvider.notifier)
.create(name, descriptionController.text.trim());
} else {
await ref
.read(collectionsControllerProvider.notifier)
.updateCollection(
collection.id,
name: name,
description: descriptionController.text.trim(),
coverUrl: collection.coverUrl,
);
}
if (context.mounted) Navigator.pop(context);
},
child: const Text('Save'),
),
],
),
);
},
);
nameController.dispose();
descriptionController.dispose();
@@ -1,11 +1,12 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../backend/models/collection.dart';
import '../../../app/app.dart';
import '../../../backend/backend.dart';
import '../../../shared/widgets/adaptive_scaffold.dart';
import '../../../shared/widgets/confirm_dialog.dart';
import '../../../shared/widgets/empty_view.dart';
import '../../../shared/widgets/error_view.dart';
import 'collection_form_dialog.dart';
import 'collections_controller.dart';
@@ -16,11 +17,15 @@ class CollectionsScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final collections = ref.watch(collectionsControllerProvider);
final settings =
ref.watch(appSettingsProvider).value ?? AppSettings.defaults;
final isRu = settings.languageCode == 'ru';
return AdaptiveScaffold(
title: 'Collections',
title: isRu ? 'Коллекции' : 'Collections',
actions: [
IconButton(
tooltip: 'New collection',
tooltip: isRu ? 'Новая коллекция' : 'New collection',
icon: const Icon(Icons.add_rounded),
onPressed: () => showCollectionFormDialog(context, ref),
),
@@ -28,141 +33,251 @@ class CollectionsScreen extends ConsumerWidget {
body: collections.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (error, _) => ErrorView(message: error.toString()),
data: (items) => items.isEmpty
? const EmptyView(title: 'No collections yet')
: GridView.builder(
padding: const EdgeInsets.all(16),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 320,
mainAxisSpacing: 12,
crossAxisSpacing: 12,
childAspectRatio: 1.35,
),
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return _CollectionCard(
collection: item,
onOpen: () => context.go('/collections/${item.id}'),
onEdit: () => showCollectionFormDialog(
context,
ref,
collection: item,
data: (items) {
if (items.isEmpty) {
return Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.primaryContainer
.withValues(alpha: 0.3),
shape: BoxShape.circle,
),
child: Icon(
Icons.collections_bookmark_rounded,
size: 56,
color: Theme.of(context).colorScheme.primary,
),
),
onDelete: () async {
final ok = await showConfirmDialog(
context,
title: 'Delete collection',
message: 'Remove ${item.name}?',
);
if (ok) {
await ref
.read(collectionsControllerProvider.notifier)
.delete(item.id);
}
},
);
},
const SizedBox(height: 16),
Text(
isRu ? 'Нет коллекций' : 'No collections yet',
style: Theme.of(context).textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
isRu
? 'Создавайте тематические коллекции и объединяйте в них понравившиеся работы'
: 'Create themed collections and organize your favorite posts',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
const SizedBox(height: 24),
FilledButton.icon(
onPressed: () => showCollectionFormDialog(context, ref),
icon: const Icon(Icons.add_rounded),
label: Text(
isRu ? 'Создать коллекцию' : 'Create collection',
),
),
],
),
),
);
}
return GridView.builder(
padding: const EdgeInsets.all(16),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 320,
mainAxisSpacing: 14,
crossAxisSpacing: 14,
childAspectRatio: 0.88,
),
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return _CollectionCard(
collection: item,
isRu: isRu,
onOpen: () => context.go('/collections/${item.id}'),
onEdit: () => showCollectionFormDialog(
context,
ref,
collection: item,
),
onDelete: () async {
final ok = await showConfirmDialog(
context,
title: isRu ? 'Удалить коллекцию' : 'Delete collection',
message: isRu
? 'Удалить подборку "${item.name}"?'
: 'Remove "${item.name}"?',
);
if (ok) {
await ref
.read(collectionsControllerProvider.notifier)
.delete(item.id);
}
},
);
},
);
},
),
);
}
}
class _CollectionCard extends StatelessWidget {
class _CollectionCard extends ConsumerWidget {
const _CollectionCard({
required this.collection,
required this.isRu,
required this.onOpen,
required this.onEdit,
required this.onDelete,
});
final Collection collection;
final bool isRu;
final VoidCallback onOpen;
final VoidCallback onEdit;
final VoidCallback onDelete;
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final scheme = Theme.of(context).colorScheme;
final postsAsync = ref.watch(collectionPostsProvider(collection.id));
final posts = postsAsync.value ?? const <Post>[];
final previewUrls = posts
.map((p) => MediaUrlSelector.preview(p).firstOrNull)
.whereType<String>()
.take(4)
.toList();
return Card(
elevation: 0,
color: scheme.surfaceContainerLow,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18),
side: BorderSide(
color: scheme.outlineVariant.withValues(alpha: 0.3),
),
),
child: InkWell(
onTap: onOpen,
child: Stack(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Positioned.fill(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 54,
child: Align(
alignment: Alignment.centerLeft,
child: DecoratedBox(
decoration: BoxDecoration(
color:
scheme.primaryContainer.withValues(alpha: 0.56),
borderRadius: BorderRadius.circular(12),
// Cover Collage (2x2 or Hero)
Expanded(
child: Stack(
fit: StackFit.expand,
children: [
_buildCoverMosaic(previewUrls, scheme),
// Glass count badge
Positioned(
bottom: 8,
right: 8,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.photo_library_outlined,
size: 12,
color: Colors.white,
),
child: const Padding(
padding: EdgeInsets.all(12),
child: Icon(
Icons.collections_bookmark_rounded,
size: 28,
const SizedBox(width: 4),
Text(
'${posts.length}',
style: const TextStyle(
color: Colors.white,
fontSize: 11,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
const Spacer(),
Text(
collection.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 4),
Text(
collection.description ?? 'No description',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: scheme.onSurfaceVariant,
),
),
],
),
),
],
),
),
Positioned(
top: 6,
right: 6,
child: PopupMenuButton<String>(
tooltip: 'Collection actions',
icon: const Icon(Icons.more_horiz_rounded),
onSelected: (value) {
if (value == 'edit') onEdit();
if (value == 'delete') onDelete();
},
itemBuilder: (context) => const [
PopupMenuItem(
value: 'edit',
child: ListTile(
dense: true,
leading: Icon(Icons.edit_rounded),
title: Text('Edit'),
// Info Row
Padding(
padding: const EdgeInsets.fromLTRB(12, 10, 8, 10),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
collection.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.bold,
),
),
if (collection.description != null &&
collection.description!.isNotEmpty) ...[
const SizedBox(height: 2),
Text(
collection.description!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: scheme.onSurfaceVariant,
),
),
],
],
),
),
PopupMenuItem(
value: 'delete',
child: ListTile(
dense: true,
leading: Icon(Icons.delete_rounded),
title: Text('Delete'),
PopupMenuButton<String>(
tooltip: isRu ? 'Действия' : 'Actions',
icon: Icon(
Icons.more_vert_rounded,
size: 20,
color: scheme.onSurfaceVariant,
),
padding: EdgeInsets.zero,
onSelected: (value) {
if (value == 'edit') onEdit();
if (value == 'delete') onDelete();
},
itemBuilder: (context) => [
PopupMenuItem(
value: 'edit',
child: ListTile(
dense: true,
leading: const Icon(Icons.edit_rounded, size: 20),
title: Text(isRu ? 'Редактировать' : 'Edit'),
),
),
PopupMenuItem(
value: 'delete',
child: ListTile(
dense: true,
leading: const Icon(Icons.delete_rounded, size: 20),
title: Text(isRu ? 'Удалить' : 'Delete'),
),
),
],
),
],
),
@@ -172,4 +287,63 @@ class _CollectionCard extends StatelessWidget {
),
);
}
Widget _buildCoverMosaic(List<String> urls, ColorScheme scheme) {
if (urls.isEmpty) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
scheme.primaryContainer.withValues(alpha: 0.6),
scheme.tertiaryContainer.withValues(alpha: 0.6),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Icon(
Icons.collections_bookmark_rounded,
size: 40,
color: scheme.primary,
),
),
);
}
if (urls.length == 1) {
return CachedNetworkImage(
imageUrl: urls[0],
fit: BoxFit.cover,
placeholder: (_, __) => Container(color: scheme.surfaceContainerHighest),
errorWidget: (_, __, ___) => Container(
color: scheme.surfaceContainerHighest,
child: const Icon(Icons.broken_image_rounded),
),
);
}
// Mosaic grid (up to 4)
return GridView.count(
crossAxisCount: 2,
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
children: [
for (int i = 0; i < 4; i++)
if (i < urls.length)
CachedNetworkImage(
imageUrl: urls[i],
fit: BoxFit.cover,
placeholder: (_, __) =>
Container(color: scheme.surfaceContainerHighest),
errorWidget: (_, __, ___) => Container(
color: scheme.surfaceContainerHighest,
child: const Icon(Icons.image_not_supported_rounded, size: 16),
),
)
else
Container(color: scheme.surfaceContainerHighest),
],
);
}
}