Clean up dialogs and buttons throughout the app

lib/history.dart

@@ -34,13 +34,9 @@ class HistoryManager {
     canRedo = _redoList.isNotEmpty;
   }
 
-  void undo() {
-    _undoOrRedo(redo: false);
-  }
+  void undo() => _undoOrRedo(redo: false);
 
-  void redo() {
-    _undoOrRedo(redo: true);
-  }
+  void redo() => _undoOrRedo(redo: true);
 
   void _undoOrRedo({required bool redo}) {
     final list = redo ? _redoList : _undoList;

lib/preferences.dart

@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
 import '/widgets/dialog.dart';
-import '/widgets/button.dart';
 import '/widgets/toggle_buttons.dart';
 
 final Future<SharedPreferences> prefs = SharedPreferences.getInstance();
@@ -28,39 +27,32 @@ Future<void> initPreferences() async {
 
 void showSlyPreferencesDialog(BuildContext context) {
   showSlyDialog(context, 'Appearance', <Widget>[
-    Padding(
-      padding: const EdgeInsets.only(bottom: 32),
-      child: SlyToggleButtons(
-        compact: true,
-        defaultItem: themeNotifier.value == ThemeMode.dark
-            ? 0
-            : themeNotifier.value == ThemeMode.system
-                ? 1
-                : 2,
-        onSelected: (index) async {
-          (await prefs).setInt('theme', index);
+    SlyToggleButtons(
+      compact: true,
+      defaultItem: themeNotifier.value == ThemeMode.dark
+          ? 0
+          : themeNotifier.value == ThemeMode.system
+              ? 1
+              : 2,
+      onSelected: (index) async {
+        (await prefs).setInt('theme', index);
 
-          switch (index) {
-            case 0:
-              themeNotifier.value = ThemeMode.dark;
-            case 1:
-              themeNotifier.value = ThemeMode.system;
-            case 2:
-              themeNotifier.value = ThemeMode.light;
-          }
-        },
-        children: const <Widget>[
-          Text('Dark'),
-          Text('System'),
-          Text('Light'),
-        ],
-      ),
-    ),
-    SlyButton(
-      onPressed: () {
-        Navigator.pop(context);
+        switch (index) {
+          case 0:
+            themeNotifier.value = ThemeMode.dark;
+          case 1:
+            themeNotifier.value = ThemeMode.system;
+          case 2:
+            themeNotifier.value = ThemeMode.light;
+        }
       },
-      child: const Text('Done'),
+      children: const <Widget>[
+        Text('Dark'),
+        Text('System'),
+        Text('Light'),
+      ],
     ),
+    const SizedBox(height: 8),
+    const SlyCancelButton(label: 'Done'),
   ]);
 }

lib/widgets/button.dart

@@ -96,13 +96,10 @@ class SlyButtonState extends State<SlyButton> {
     return elevatedButton!;
   }
 
-  void setChild(Widget newChild) {
-    setState(() {
-      elevatedButtonChild = SizedBox(
-        key: UniqueKey(),
-        height: 40,
-        child: Center(child: newChild),
-      );
-    });
-  }
+  void setChild(Widget newChild) =>
+      setState(() => elevatedButtonChild = SizedBox(
+            key: UniqueKey(),
+            height: 40,
+            child: Center(child: newChild),
+          ));
 }

lib/widgets/dialog.dart

@@ -1,5 +1,17 @@
 import 'package:flutter/material.dart';
 
+import '/widgets/button.dart';
+
+/// Presents a dialog with `title` and `children` underneath it.
+///
+/// On smaller screens, the dialog is presented as a bottom sheet.
+///
+/// If it is not required to complete the action inside the dialog,
+/// consider adding a `SlyCancelButton` to the end of `children`
+/// for the user to be able to exit the dialog conveniently.
+///
+/// Children have pre-baked spacing between them, if that is not desired,
+/// consider passing in a single child with your own padding.
 Future<void> showSlyDialog(
   BuildContext context,
   String title,
@@ -28,7 +40,7 @@ Future<void> showSlyDialog(
           ),
           titlePadding: const EdgeInsets.only(
             top: 32,
-            bottom: 24,
+            bottom: 20,
             left: 16,
             right: 16,
           ),
@@ -39,7 +51,16 @@ Future<void> showSlyDialog(
               style: const TextStyle(fontWeight: FontWeight.bold),
             ),
           ),
-          children: children,
+          children: children
+              .asMap()
+              .entries
+              .map((entry) => entry.key == children.length - 1
+                  ? entry.value
+                  : Padding(
+                      padding: const EdgeInsets.only(bottom: 12),
+                      child: entry.value,
+                    ))
+              .toList(),
         );
       },
       transitionDuration: const Duration(milliseconds: 300),
@@ -94,7 +115,7 @@ Future<void> showSlyDialog(
             Padding(
               padding: const EdgeInsets.only(
                 top: 32,
-                bottom: 24,
+                bottom: 20,
                 left: 16,
                 right: 16,
               ),
@@ -109,19 +130,38 @@ Future<void> showSlyDialog(
                 ),
               ),
             ),
-            ListView(
+            ListView.separated(
               padding: const EdgeInsets.only(
-                bottom: 36,
+                bottom: 32,
                 left: 24,
                 right: 24,
               ),
               shrinkWrap: true,
               physics: const NeverScrollableScrollPhysics(),
-              children: children,
+              itemCount: children.length,
+              separatorBuilder: (BuildContext context, int index) =>
+                  const SizedBox(height: 12),
+              itemBuilder: (BuildContext context, int index) => children[index],
             ),
           ],
         );
       },
     );
   }
 }
+
+class SlyCancelButton extends StatelessWidget {
+  final String? label;
+
+  /// A button to dismiss a dialog.
+  ///
+  /// If the `label` parameter is not provided, it will be 'Cancel'.
+  const SlyCancelButton({super.key, this.label});
+
+  @override
+  Widget build(BuildContext context) => SlyButton(
+        suggested: true,
+        onPressed: () => Navigator.pop(context),
+        child: Text(label ?? 'Cancel'),
+      );
+}

lib/widgets/title_bar.dart

@@ -55,9 +55,7 @@ class SlyTitleBar extends StatelessWidget {
                         icon: const ImageIcon(
                           AssetImage('assets/icons/window-close.webp'),
                         ),
-                        onPressed: () {
-                          exit(0);
-                        },
+                        onPressed: () => exit(0),
                       ),
                     ),
                   ],

lib/widgets/unique/about.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 
 import '/widgets/dialog.dart';
-import '/widgets/button.dart';
 import '/widgets/markup_text.dart';
 import '/widgets/title_bar.dart';
 
@@ -53,13 +52,8 @@ can be viewed [here](slycallback://0).
                     ),
                   )
             ]),
-            const SizedBox(height: 24),
-            SlyButton(
-              onPressed: () {
-                Navigator.pop(context);
-              },
-              child: const Text('Done'),
-            ),
+            const SizedBox(height: 12),
+            const SlyCancelButton(label: 'Done'),
           ],
         ),
       ),

lib/widgets/unique/carousel.dart

@@ -7,7 +7,7 @@ import '/widgets/tooltip.dart';
 import '/juggler.dart';
 
 class SlyCarouselData extends InheritedWidget {
-  final (bool, bool, SlyJuggler, GlobalKey, VoidCallback?) data;
+  final (bool, bool, SlyJuggler, GlobalKey) data;
 
   const SlyCarouselData({
     super.key,
@@ -43,7 +43,6 @@ class _SlyImageCarouselState extends State<SlyImageCarousel> {
     final wideLayout = data.$2;
     final juggler = data.$3;
     final globalKey = data.$4;
-    final exportAll = data.$5;
 
     final buttonStyle = IconButton.styleFrom(
       backgroundColor: wideLayout
@@ -85,20 +84,18 @@ class _SlyImageCarouselState extends State<SlyImageCarousel> {
                           icon: const ImageIcon(AssetImage(
                             'assets/icons/add.webp',
                           )),
-                          onPressed: () {
-                            juggler.editImages(
-                              context: context,
-                              loadingCallback: () => showSlySnackBar(
-                                context,
-                                'Loading',
-                                loading: true,
-                              ),
-                            );
-                          },
+                          onPressed: () => juggler.editImages(
+                            context: context,
+                            loadingCallback: () => showSlySnackBar(
+                              context,
+                              'Loading',
+                              loading: true,
+                            ),
+                          ),
                         ),
                       ),
                       SlyTooltip(
-                        message: 'Image Options',
+                        message: 'Remove Image',
                         child: IconButton(
                           visualDensity: const VisualDensity(
                             vertical: -2,
@@ -109,37 +106,29 @@ class _SlyImageCarouselState extends State<SlyImageCarousel> {
                           splashColor: Colors.transparent,
                           highlightColor: Colors.transparent,
                           icon: const ImageIcon(AssetImage(
-                            'assets/icons/cog.webp',
+                            'assets/icons/delete.webp',
                           )),
                           onPressed: () =>
-                              showSlyDialog(context, 'Image Options', [
-                            juggler.images.length > 1
-                                ? Padding(
-                                    padding: const EdgeInsets.only(bottom: 12),
-                                    child: SlyButton(
-                                      onPressed: () {
-                                        juggler.remove(juggler.selected);
-                                        Navigator.pop(context);
-                                      },
-                                      child: const Text('Remove'),
-                                    ),
-                                  )
-                                : Container(),
+                              showSlyDialog(context, 'Remove Image?', [
                             Padding(
                               padding: const EdgeInsets.only(bottom: 12),
-                              child: SlyButton(
-                                onPressed: () {
-                                  Navigator.pop(context);
-                                  if (exportAll != null) exportAll();
-                                },
-                                child: const Text('Save All'),
+                              child: ConstrainedBox(
+                                constraints:
+                                    const BoxConstraints(maxWidth: 240),
+                                child: const Text(
+                                  'The original will not be deleted, but unsaved edits will be lost.',
+                                  textAlign: TextAlign.center,
+                                ),
                               ),
                             ),
                             SlyButton(
-                              suggested: true,
-                              onPressed: () => Navigator.pop(context),
-                              child: const Text('Cancel'),
-                            )
+                              onPressed: () {
+                                juggler.remove(juggler.selected);
+                                Navigator.pop(context);
+                              },
+                              child: const Text('Remove'),
+                            ),
+                            const SlyCancelButton(),
                           ]),
                         ),
                       ),