#420 tag editor review

lib/model/settings/defaults.dart

@@ -109,6 +109,10 @@ class SettingsDefaults {
   static const coordinateFormat = CoordinateFormat.dms;
   static const unitSystem = UnitSystem.metric;
 
+  // tag editor
+
+  static const tagEditorCurrentFilterSectionExpanded = true;
+
   // rendering
   static const imageBackground = EntryBackground.white;
 

lib/model/settings/settings.dart

@@ -139,6 +139,10 @@ class Settings extends ChangeNotifier {
   static const coordinateFormatKey = 'coordinates_format';
   static const unitSystemKey = 'unit_system';
 
+  // tag editor
+
+  static const tagEditorCurrentFilterSectionExpandedKey = 'tag_editor_current_filter_section_expanded';
+
   // map
   static const mapStyleKey = 'info_map_style';
   static const mapDefaultCenterKey = 'map_default_center';
@@ -623,6 +627,12 @@ class Settings extends ChangeNotifier {
 
   set unitSystem(UnitSystem newValue) => setAndNotify(unitSystemKey, newValue.toString());
 
+  // tag editor
+
+  bool get tagEditorCurrentFilterSectionExpanded => getBool(tagEditorCurrentFilterSectionExpandedKey) ?? SettingsDefaults.tagEditorCurrentFilterSectionExpanded;
+
+  set tagEditorCurrentFilterSectionExpanded(bool newValue) => setAndNotify(tagEditorCurrentFilterSectionExpandedKey, newValue);
+
   // map
 
   EntryMapStyle? get mapStyle {
@@ -961,6 +971,7 @@ class Settings extends ChangeNotifier {
             case videoGestureDoubleTapTogglePlayKey:
             case videoGestureSideDoubleTapSeekKey:
             case subtitleShowOutlineKey:
+            case tagEditorCurrentFilterSectionExpandedKey:
             case saveSearchHistoryKey:
             case filePickerShowHiddenFilesKey:
             case screenSaverFillScreenKey:

lib/widgets/common/expandable_filter_row.dart

@@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
 
 class TitledExpandableFilterRow extends StatelessWidget {
   final String title;
-  final Iterable<CollectionFilter> filters;
+  final List<CollectionFilter> filters;
   final ValueNotifier<String?> expandedNotifier;
   final bool showGenericIcon;
   final HeroType Function(CollectionFilter filter)? heroTypeBuilder;
@@ -65,9 +65,10 @@ class TitledExpandableFilterRow extends StatelessWidget {
 }
 
 class ExpandableFilterRow extends StatelessWidget {
-  final Iterable<CollectionFilter> filters;
+  final List<CollectionFilter> filters;
   final bool isExpanded;
-  final bool showGenericIcon;
+  final bool removable, showGenericIcon;
+  final Widget? Function(CollectionFilter)? leadingBuilder;
   final HeroType Function(CollectionFilter filter)? heroTypeBuilder;
   final FilterCallback onTap;
   final OffsetFilterCallback? onLongPress;
@@ -79,7 +80,9 @@ class ExpandableFilterRow extends StatelessWidget {
     super.key,
     required this.filters,
     required this.isExpanded,
+    this.removable = false,
     this.showGenericIcon = true,
+    this.leadingBuilder,
     this.heroTypeBuilder,
     required this.onTap,
     required this.onLongPress,
@@ -101,7 +104,6 @@ class ExpandableFilterRow extends StatelessWidget {
   }
 
   Widget _buildExpanded() {
-    final filterList = filters.toList();
     return Container(
       key: const Key('wrap'),
       padding: const EdgeInsets.symmetric(horizontal: horizontalPadding),
@@ -111,13 +113,12 @@ class ExpandableFilterRow extends StatelessWidget {
       child: Wrap(
         spacing: horizontalPadding,
         runSpacing: verticalPadding,
-        children: filterList.map(_buildChip).toList(),
+        children: filters.map(_buildChip).toList(),
       ),
     );
   }
 
   Widget _buildCollapsed() {
-    final filterList = filters.toList();
     final list = Container(
       key: const Key('list'),
       // specify transparent as a workaround to prevent
@@ -128,10 +129,10 @@ class ExpandableFilterRow extends StatelessWidget {
         scrollDirection: Axis.horizontal,
         padding: const EdgeInsets.symmetric(horizontal: horizontalPadding),
         itemBuilder: (context, index) {
-          return index < filterList.length ? _buildChip(filterList[index]) : const SizedBox();
+          return index < filters.length ? _buildChip(filters[index]) : const SizedBox();
         },
         separatorBuilder: (context, index) => const SizedBox(width: 8),
-        itemCount: filterList.length,
+        itemCount: filters.length,
       ),
     );
     return list;
@@ -142,7 +143,9 @@ class ExpandableFilterRow extends StatelessWidget {
       // key `album-{path}` is expected by test driver
       key: Key(filter.key),
       filter: filter,
+      removable: removable,
       showGenericIcon: showGenericIcon,
+      leadingOverride: leadingBuilder?.call(filter),
       heroType: heroTypeBuilder?.call(filter) ?? HeroType.onTap,
       onTap: onTap,
       onLongPress: onLongPress,

lib/widgets/dialogs/entry_editors/edit_tags_dialog.dart

@@ -81,7 +81,7 @@ class _TagEditorPageState extends State<TagEditorPage> {
                   return ListView(
                     children: [
                       Padding(
-                        padding: const EdgeInsetsDirectional.only(start: 8),
+                        padding: const EdgeInsetsDirectional.only(start: 8, end: 16),
                         child: Row(
                           crossAxisAlignment: CrossAxisAlignment.end,
                           children: [
@@ -108,7 +108,17 @@ class _TagEditorPageState extends State<TagEditorPage> {
                                   tooltip: l10n.tagEditorPageAddTagTooltip,
                                 );
                               },
-                            )
+                            ),
+                            Selector<Settings, bool>(
+                              selector: (context, s) => s.tagEditorCurrentFilterSectionExpanded,
+                              builder: (context, isExpanded, child) {
+                                return IconButton(
+                                  icon: Icon(isExpanded ? AIcons.collapse : AIcons.expand),
+                                  onPressed: sortedTags.isEmpty ? null : () => settings.tagEditorCurrentFilterSectionExpanded = !isExpanded,
+                                  tooltip: isExpanded ? MaterialLocalizations.of(context).expandedIconTapHint : MaterialLocalizations.of(context).collapsedIconTapHint,
+                                );
+                              },
+                            ),
                           ],
                         ),
                       ),
@@ -131,22 +141,18 @@ class _TagEditorPageState extends State<TagEditorPage> {
                               ),
                             ),
                           ),
-                          secondChild: Padding(
-                            padding: const EdgeInsets.symmetric(horizontal: 8),
-                            child: Wrap(
-                              spacing: 8,
-                              runSpacing: 8,
-                              children: sortedTags.map((kv) {
-                                return AvesFilterChip(
-                                  filter: kv.key,
-                                  removable: true,
-                                  showGenericIcon: false,
-                                  leadingOverride: showCount ? _TagCount(count: kv.value) : null,
-                                  onTap: _removeTag,
-                                  onLongPress: null,
-                                );
-                              }).toList(),
-                            ),
+                          secondChild: ExpandableFilterRow(
+                            filters: sortedTags.map((kv) => kv.key).toList(),
+                            isExpanded: context.select<Settings, bool>((v) => v.tagEditorCurrentFilterSectionExpanded),
+                            removable: true,
+                            showGenericIcon: false,
+                            leadingBuilder: showCount
+                                ? (filter) => _TagCount(
+                                      count: sortedTags.firstWhere((kv) => kv.key == filter).value,
+                                    )
+                                : null,
+                            onTap: _removeTag,
+                            onLongPress: null,
                           ),
                           crossFadeState: sortedTags.isEmpty ? CrossFadeState.showFirst : CrossFadeState.showSecond,
                           duration: Durations.tagEditorTransition,
@@ -154,14 +160,14 @@ class _TagEditorPageState extends State<TagEditorPage> {
                       ),
                       const Divider(height: 0),
                       _FilterRow(
-                        title: l10n.tagEditorSectionRecent,
-                        filters: recentFilters,
+                        title: l10n.statsTopTagsSectionTitle,
+                        filters: topTagFilters,
                         expandedNotifier: _expandedSectionNotifier,
                         onTap: _addTag,
                       ),
                       _FilterRow(
-                        title: l10n.statsTopTagsSectionTitle,
-                        filters: topTagFilters,
+                        title: l10n.tagEditorSectionRecent,
+                        filters: recentFilters,
                         expandedNotifier: _expandedSectionNotifier,
                         onTap: _addTag,
                       ),

lib/widgets/viewer/overlay/details/rating_tags.dart

@@ -36,13 +36,13 @@ class OverlayRatingTagsRow extends AnimatedWidget {
     return Row(
       children: [
         if (ratingString.isNotEmpty) ...[
-          Text(ratingString),
+          Text(ratingString, strutStyle: Constants.overflowStrutStyle),
           if (hasTags) const Text(Constants.separator),
         ],
         if (hasTags) ...[
           DecoratedIcon(AIcons.tag, size: ViewerDetailOverlayContent.iconSize, shadows: ViewerDetailOverlayContent.shadows(context)),
           const SizedBox(width: ViewerDetailOverlayContent.iconPadding),
-          Expanded(child: Text(tags)),
+          Expanded(child: Text(tags, strutStyle: Constants.overflowStrutStyle)),
         ],
       ],
     );