use bottom sheets instead of dialogs

This commit is contained in:
Fabian Freund
2026-01-29 18:24:35 +01:00
parent 1e9ecb40ba
commit c9fdb6b768
10 changed files with 295 additions and 166 deletions
@@ -25,55 +25,78 @@ import 'package:nullability/nullability.dart';
import 'package:weblibre/features/geckoview/features/browser/domain/services/browser_data.dart';
import 'package:weblibre/features/user/data/models/general_settings.dart';
class DeleteDataDialog extends HookConsumerWidget {
/// Shows a bottom sheet to select and delete browsing data.
Future<void> showDeleteDataDialog(
BuildContext context, {
Set<DeleteBrowsingDataType> initialSettings = const {},
}) {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => _DeleteDataSheet(initialSettings: initialSettings),
);
}
class _DeleteDataSheet extends HookConsumerWidget {
final Set<DeleteBrowsingDataType> initialSettings;
const DeleteDataDialog({required this.initialSettings});
const _DeleteDataSheet({required this.initialSettings});
@override
Widget build(BuildContext context, WidgetRef ref) {
final selections = useState(initialSettings);
return SimpleDialog(
title: const Text('Delete Browsing Data'),
children: [
for (final type in DeleteBrowsingDataType.values)
CheckboxListTile.adaptive(
value: selections.value.contains(type),
controlAffinity: ListTileControlAffinity.leading,
title: Text(type.title),
subtitle: type.description.mapNotNull(
(description) => Text(description),
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Delete Browsing Data',
style: Theme.of(context).textTheme.titleLarge,
),
onChanged: (value) {
if (value == true) {
selections.value = {...selections.value, type};
} else {
selections.value = {...selections.value}..remove(type);
}
},
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: FilledButton.icon(
onPressed: () async {
await ref
.read(browserDataServiceProvider.notifier)
.deleteData(selections.value);
const SizedBox(height: 16),
for (final type in DeleteBrowsingDataType.values)
CheckboxListTile.adaptive(
value: selections.value.contains(type),
controlAffinity: ListTileControlAffinity.leading,
title: Text(type.title),
subtitle: type.description.mapNotNull(
(description) => Text(description),
),
onChanged: (value) {
if (value == true) {
selections.value = {...selections.value, type};
} else {
selections.value = {...selections.value}..remove(type);
}
},
),
const SizedBox(height: 16),
FilledButton.icon(
onPressed: selections.value.isEmpty
? null
: () async {
await ref
.read(browserDataServiceProvider.notifier)
.deleteData(selections.value);
if (context.mounted) {
context.pop();
}
},
style: FilledButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.error,
foregroundColor: Theme.of(context).colorScheme.onError,
if (context.mounted) {
context.pop();
}
},
style: FilledButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.error,
foregroundColor: Theme.of(context).colorScheme.onError,
),
label: const Text('Delete'),
icon: const Icon(Icons.delete_forever),
),
label: const Text('Delete'),
icon: const Icon(Icons.delete_forever),
),
],
),
],
),
);
}
}
@@ -21,46 +21,68 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_mozilla_components/flutter_mozilla_components.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:weblibre/features/geckoview/features/bookmarks/presentation/widgets/folder_tree_picker.dart';
/// Dialog to select a bookmark folder.
/// Bottom sheet to select a bookmark folder.
/// Returns the selected folder GUID or null if cancelled.
Future<String?> showSelectFolderDialog(BuildContext context) {
return showDialog<String>(
return showModalBottomSheet<String>(
context: context,
builder: (context) => const _SelectFolderDialog(),
isScrollControlled: true,
builder: (context) => const _SelectFolderSheet(),
);
}
class _SelectFolderDialog extends HookConsumerWidget {
const _SelectFolderDialog();
class _SelectFolderSheet extends HookConsumerWidget {
const _SelectFolderSheet();
@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedFolderGuid = useState(BookmarkRoot.mobile.id);
return AlertDialog(
title: const Text('Select folder'),
content: SizedBox(
width: double.maxFinite,
child: SingleChildScrollView(
child: FolderTreePicker(
selectedFolderGuid: selectedFolderGuid,
entryGuid: BookmarkRoot.root.id,
),
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Select folder',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 16),
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.5,
),
child: SingleChildScrollView(
child: FolderTreePicker(
selectedFolderGuid: selectedFolderGuid,
entryGuid: BookmarkRoot.root.id,
),
),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => context.pop(),
child: const Text('Cancel'),
),
const SizedBox(width: 8),
FilledButton(
onPressed: () => context.pop(selectedFolderGuid.value),
child: const Text('Select'),
),
],
),
],
),
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: const Text('Cancel'),
),
FilledButton(
onPressed: () => Navigator.of(context).pop(selectedFolderGuid.value),
child: const Text('Select'),
),
],
);
}
}
@@ -280,13 +280,9 @@ class HistoryScreen extends HookConsumerWidget {
else
IconButton(
onPressed: () async {
await showDialog(
context: context,
builder: (context) {
return const DeleteDataDialog(
initialSettings: {DeleteBrowsingDataType.history},
);
},
await showDeleteDataDialog(
context,
initialSettings: {DeleteBrowsingDataType.history},
);
// ignore: unused_result
@@ -254,12 +254,7 @@ class _DeleteBrowsingDataTile extends StatelessWidget {
leading: const Icon(MdiIcons.databaseRemove),
trailing: const Icon(Icons.chevron_right),
onTap: () async {
await showDialog(
context: context,
builder: (context) {
return const DeleteDataDialog(initialSettings: {});
},
);
await showDeleteDataDialog(context);
},
);
}
@@ -28,6 +28,7 @@ import 'package:weblibre/features/user/domain/repositories/profile.dart';
import 'package:weblibre/presentation/widgets/failure_widget.dart';
import 'package:weblibre/utils/exit_app.dart';
/// Bottom sheet widget to select a user profile.
class SelectProfileDialog extends HookConsumerWidget {
const SelectProfileDialog();
@@ -35,58 +36,76 @@ class SelectProfileDialog extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final usersAsync = ref.watch(profileRepositoryProvider);
return AlertDialog(
title: const Text('Users'),
scrollable: true,
content: usersAsync.when(
skipLoadingOnReload: true,
data: (profiles) => Column(
children: profiles.map((profile) {
final isSelected = filesystem.selectedProfile == profile.uuidValue;
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Users',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 16),
usersAsync.when(
skipLoadingOnReload: true,
data: (profiles) => Column(
mainAxisSize: MainAxisSize.min,
children: profiles.map((profile) {
final isSelected =
filesystem.selectedProfile == profile.uuidValue;
return ListTile(
key: ValueKey(profile.id),
enabled: !isSelected,
trailing: !isSelected ? const Icon(MdiIcons.accountSwitch) : null,
title: Text(profile.name),
subtitle: isSelected ? const Text('Active') : null,
onTap: () async {
await handleSwitchProfile(context, ref, profile);
},
);
}).toList(),
return ListTile(
key: ValueKey(profile.id),
enabled: !isSelected,
trailing:
!isSelected ? const Icon(MdiIcons.accountSwitch) : null,
title: Text(profile.name),
subtitle: isSelected ? const Text('Active') : null,
onTap: () async {
await handleSwitchProfile(context, ref, profile);
},
);
}).toList(),
),
error: (error, stackTrace) => Center(
child: FailureWidget(
title: 'Failed to load Profiles',
exception: error,
),
),
loading: () => const Center(child: CircularProgressIndicator()),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton.icon(
icon: const Icon(MdiIcons.power),
iconAlignment: IconAlignment.start,
label: const Text('Quit Browser'),
onPressed: () async {
final result = await showQuitBrowserDialog(context);
if (result == true) {
await exitApp(ref.container);
}
},
),
TextButton.icon(
icon: const Icon(MdiIcons.accountGroup),
iconAlignment: IconAlignment.end,
label: const Text('Manage'),
onPressed: () async {
await ProfileListRoute().push(context);
},
),
],
),
],
),
error: (error, stackTrace) => Center(
child: FailureWidget(
title: 'Failed to load Profiles',
exception: error,
),
),
loading: () => const Center(child: CircularProgressIndicator()),
),
actionsAlignment: MainAxisAlignment.spaceBetween,
actions: [
TextButton.icon(
icon: const Icon(MdiIcons.power),
iconAlignment: IconAlignment.start,
label: const Text('Quit Browser'),
onPressed: () async {
final result = await showQuitBrowserDialog(context);
if (result == true) {
await exitApp(ref.container);
}
},
),
TextButton.icon(
icon: const Icon(MdiIcons.accountGroup),
iconAlignment: IconAlignment.end,
label: const Text('Manage'),
onPressed: () async {
await ProfileListRoute().push(context);
},
),
],
);
}
}
@@ -25,6 +25,7 @@ import 'package:weblibre/core/routing/routes.dart';
import 'package:weblibre/features/web_feed/domain/providers.dart';
import 'package:weblibre/presentation/widgets/failure_widget.dart';
/// Bottom sheet widget to select a feed from discovered feeds.
class SelectFeedDialog extends HookConsumerWidget {
final Set<Uri> feedUris;
@@ -32,47 +33,58 @@ class SelectFeedDialog extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return SimpleDialog(
title: const Text('Add Feed'),
children: feedUris
.map(
(uri) => HookConsumer(
builder: (context, ref, child) {
final feedAsync = ref.watch(fetchWebFeedProvider(uri));
return feedAsync.when(
skipLoadingOnReload: true,
data: (data) {
return ListTile(
title: Text(
data.feedData.title.whenNotEmpty ?? 'Unnamed Feed',
),
subtitle: Text(uri.toString()),
trailing: const Icon(Icons.add),
onTap: () {
FeedCreateRoute(feedId: uri).pushReplacement(context);
},
);
},
error: (error, stackTrace) => FailureWidget(
title: 'Failed to fetch Feed',
exception: error,
onRetry: () {
// ignore: unused_result
ref.refresh(fetchWebFeedProvider(uri));
},
),
loading: () => Skeletonizer(
child: ListTile(
title: Text(BoneMock.title),
subtitle: Skeleton.keep(child: Text(uri.toString())),
),
),
);
},
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Add Feed',
style: Theme.of(context).textTheme.titleLarge,
),
)
.toList(),
const SizedBox(height: 16),
...feedUris.map(
(uri) => HookConsumer(
builder: (context, ref, child) {
final feedAsync = ref.watch(fetchWebFeedProvider(uri));
return feedAsync.when(
skipLoadingOnReload: true,
data: (data) {
return ListTile(
title: Text(
data.feedData.title.whenNotEmpty ?? 'Unnamed Feed',
),
subtitle: Text(uri.toString()),
trailing: const Icon(Icons.add),
onTap: () {
FeedCreateRoute(feedId: uri).pushReplacement(context);
},
);
},
error: (error, stackTrace) => FailureWidget(
title: 'Failed to fetch Feed',
exception: error,
onRetry: () {
// ignore: unused_result
ref.refresh(fetchWebFeedProvider(uri));
},
),
loading: () => Skeletonizer(
child: ListTile(
title: Text(BoneMock.title),
subtitle: Skeleton.keep(child: Text(uri.toString())),
),
),
);
},
),
),
],
),
),
);
}
}