viewer: expand one submenu at once

lib/widgets/collection/app_bar.dart

@@ -284,6 +284,7 @@ class _CollectionAppBarState extends State<CollectionAppBar> with SingleTickerPr
                   padding: EdgeInsets.zero,
                   child: PopupMenuItemExpansionPanel<EntrySetAction>(
                     enabled: canApplyEditActions,
+                    value: 'edit',
                     icon: AIcons.edit,
                     title: context.l10n.collectionActionEdit,
                     items: [

lib/widgets/common/basic/menu.dart

@@ -55,25 +55,27 @@ class MenuIconTheme extends StatelessWidget {
 
 class PopupMenuItemExpansionPanel<T> extends StatefulWidget {
   final bool enabled;
+  final String value;
+  final ValueNotifier<String?> expandedNotifier;
   final IconData icon;
   final String title;
   final List<PopupMenuEntry<T>> items;
 
-  const PopupMenuItemExpansionPanel({
+  PopupMenuItemExpansionPanel({
     super.key,
     this.enabled = true,
+    required this.value,
+    ValueNotifier<String?>? expandedNotifier,
     required this.icon,
     required this.title,
     required this.items,
-  });
+  }) : expandedNotifier = expandedNotifier ?? ValueNotifier(null);
 
   @override
   State<PopupMenuItemExpansionPanel<T>> createState() => _PopupMenuItemExpansionPanelState<T>();
 }
 
 class _PopupMenuItemExpansionPanelState<T> extends State<PopupMenuItemExpansionPanel<T>> {
-  bool _isExpanded = false;
-
   // ref `_kMenuHorizontalPadding` used in `PopupMenuItem`
   static const double _horizontalPadding = 16;
 
@@ -86,38 +88,43 @@ class _PopupMenuItemExpansionPanelState<T> extends State<PopupMenuItemExpansionP
     }
     final animationDuration = context.select<DurationsData, Duration>((v) => v.expansionTileAnimation);
 
-    Widget child = ExpansionPanelList(
+    Widget child = ValueListenableBuilder<String?>(
-      expansionCallback: (index, isExpanded) {
+      valueListenable: widget.expandedNotifier,
-        setState(() => _isExpanded = !isExpanded);
+      builder: (context, expandedValue, child) {
-      },
+        return ExpansionPanelList(
-      animationDuration: animationDuration,
+          expansionCallback: (index, isExpanded) {
-      expandedHeaderPadding: EdgeInsets.zero,
+            widget.expandedNotifier.value = isExpanded ? null : widget.value;
-      elevation: 0,
+          },
-      children: [
+          animationDuration: animationDuration,
-        ExpansionPanel(
+          expandedHeaderPadding: EdgeInsets.zero,
-          headerBuilder: (context, isExpanded) => DefaultTextStyle(
+          elevation: 0,
-            style: style,
+          children: [
-            child: Padding(
+            ExpansionPanel(
-              padding: const EdgeInsets.symmetric(horizontal: _horizontalPadding),
+              headerBuilder: (context, isExpanded) => DefaultTextStyle(
-              child: MenuRow(
+                style: style,
-                text: widget.title,
+                child: Padding(
-                icon: Icon(widget.icon),
+                  padding: const EdgeInsets.symmetric(horizontal: _horizontalPadding),
+                  child: MenuRow(
+                    text: widget.title,
+                    icon: Icon(widget.icon),
+                  ),
+                ),
               ),
+              body: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const PopupMenuDivider(height: 0),
+                  ...widget.items,
+                  const PopupMenuDivider(height: 0),
+                ],
+              ),
+              isExpanded: expandedValue == widget.value,
+              canTapOnHeader: true,
+              backgroundColor: Colors.transparent,
             ),
-          ),
+          ],
-          body: Column(
+        );
-            crossAxisAlignment: CrossAxisAlignment.start,
+      },
-            children: [
-              const PopupMenuDivider(height: 0),
-              ...widget.items,
-              const PopupMenuDivider(height: 0),
-            ],
-          ),
-          isExpanded: _isExpanded,
-          canTapOnHeader: true,
-          backgroundColor: Colors.transparent,
-        ),
-      ],
     );
     if (!widget.enabled) {
       child = IgnorePointer(child: child);

lib/widgets/viewer/overlay/viewer_buttons.dart

@@ -142,12 +142,13 @@ class ViewerButtonRowContent extends StatelessWidget {
   final List<EntryAction> quickActions, topLevelActions, exportActions, videoActions;
   final Animation<double> scale;
   final AvesEntry mainEntry, pageEntry;
+  final ValueNotifier<String?> _popupExpandedNotifier = ValueNotifier(null);
 
   AvesEntry get favouriteTargetEntry => mainEntry.isBurst ? pageEntry : mainEntry;
 
   static const double padding = 8;
 
-  const ViewerButtonRowContent({
+  ViewerButtonRowContent({
     super.key,
     required this.quickActions,
     required this.topLevelActions,
@@ -188,6 +189,8 @@ class ViewerButtonRowContent extends StatelessWidget {
                               PopupMenuItem<EntryAction>(
                                 padding: EdgeInsets.zero,
                                 child: PopupMenuItemExpansionPanel<EntryAction>(
+                                  value: 'export',
+                                  expandedNotifier: _popupExpandedNotifier,
                                   icon: AIcons.export,
                                   title: context.l10n.entryActionExport,
                                   items: [
@@ -201,6 +204,8 @@ class ViewerButtonRowContent extends StatelessWidget {
                               PopupMenuItem<EntryAction>(
                                 padding: EdgeInsets.zero,
                                 child: PopupMenuItemExpansionPanel<EntryAction>(
+                                  value: 'video',
+                                  expandedNotifier: _popupExpandedNotifier,
                                   icon: AIcons.video,
                                   title: context.l10n.settingsSectionVideo,
                                   items: [
@@ -215,9 +220,13 @@ class ViewerButtonRowContent extends StatelessWidget {
                           ];
                         },
                         onSelected: (action) {
+                          _popupExpandedNotifier.value = null;
                           // wait for the popup menu to hide before proceeding with the action
                           Future.delayed(Durations.popupMenuAnimation * timeDilation, () => _onActionSelected(context, action));
                         },
+                        onCanceled: () {
+                          _popupExpandedNotifier.value = null;
+                        },
                         onMenuOpened: () {
                           // if the menu is opened while overlay is hiding,
                           // the popup menu button is disposed and menu items are ineffective,