feat: 4628 - new "reorder KP" feature from dev mode (#4778)

New files:
* `reorderable_knowledge_panel_page.dart`: Page where the user can reorder the Knowledge Panel Cards.
* `reordered_knowledge_panel_cards.dart`: Knowledge Panel Cards as reordered by the user.
* `standard_knowledge_panel_page.dart`: Knowledge Panel Cards as provided by the server.

Impacted files:
* `app_en.arb`: added a "reorder the attributes" label
* `knowledge_panel_card.dart`: added an `isClickable` parameter to be get rid of the click icon+effect when reordering attributes
* `knowledge_panel_expanded_card.dart`: added an `isClickable` parameter
* `knowledge_panel_group_card.dart`: added an `isClickable` parameter
* `knowledge_panel_page.dart`: explicitly setting `isClickable: true`
* `knowledge_panels_builder.dart`: added an `isClickable` parameter
* `new_product_page.dart`: now using a dev-mode flag to determine if we display the reorder feature; moved code to new class `StandardKnowledgePanelCards`
* `pubspec.lock`: wtf
* `score_card.dart`: unrelated minor refactoring
* `user_preferences.dart`: added the user ordered attribute list as preference
* `user_preferences_dev_mode.dart`: added a flag for user reordered attribute feature

packages/smooth_app/lib/cards/data_cards/score_card.dart

@@ -9,46 +9,38 @@ import 'package:smooth_app/themes/constant_icons.dart';
 import 'package:smooth_app/themes/smooth_theme.dart';
 
 enum CardEvaluation {
-  UNKNOWN,
-  VERY_BAD,
-  BAD,
-  NEUTRAL,
-  GOOD,
-  VERY_GOOD;
+  UNKNOWN(
+    backgroundColor: GREY_COLOR,
+    textColor: PRIMARY_GREY_COLOR,
+  ),
+  VERY_BAD(
+    backgroundColor: RED_BACKGROUND_COLOR,
+    textColor: RED_COLOR,
+  ),
+  BAD(
+    backgroundColor: ORANGE_BACKGROUND_COLOR,
+    textColor: LIGHT_ORANGE_COLOR,
+  ),
+  NEUTRAL(
+    backgroundColor: YELLOW_BACKGROUND_COLOR,
+    textColor: DARK_YELLOW_COLOR,
+  ),
+  GOOD(
+    backgroundColor: LIGHT_GREEN_BACKGROUND_COLOR,
+    textColor: LIGHT_GREEN_COLOR,
+  ),
+  VERY_GOOD(
+    backgroundColor: DARK_GREEN_BACKGROUND_COLOR,
+    textColor: DARK_GREEN_COLOR,
+  );
 
-  Color getBackgroundColor() {
-    switch (this) {
-      case CardEvaluation.UNKNOWN:
-        return GREY_COLOR;
-      case CardEvaluation.VERY_BAD:
-        return RED_BACKGROUND_COLOR;
-      case CardEvaluation.BAD:
-        return ORANGE_BACKGROUND_COLOR;
-      case CardEvaluation.NEUTRAL:
-        return YELLOW_BACKGROUND_COLOR;
-      case CardEvaluation.GOOD:
-        return LIGHT_GREEN_BACKGROUND_COLOR;
-      case CardEvaluation.VERY_GOOD:
-        return DARK_GREEN_BACKGROUND_COLOR;
-    }
-  }
+  const CardEvaluation({
+    required this.backgroundColor,
+    required this.textColor,
+  });
 
-  Color getTextColor() {
-    switch (this) {
-      case CardEvaluation.UNKNOWN:
-        return PRIMARY_GREY_COLOR;
-      case CardEvaluation.VERY_BAD:
-        return RED_COLOR;
-      case CardEvaluation.BAD:
-        return LIGHT_ORANGE_COLOR;
-      case CardEvaluation.NEUTRAL:
-        return DARK_YELLOW_COLOR;
-      case CardEvaluation.GOOD:
-        return LIGHT_GREEN_COLOR;
-      case CardEvaluation.VERY_GOOD:
-        return DARK_GREEN_COLOR;
-    }
-  }
+  final Color backgroundColor;
+  final Color textColor;
 }
 
 class ScoreCard extends StatelessWidget {
@@ -83,10 +75,10 @@ class ScoreCard extends StatelessWidget {
         ? 1
         : SmoothTheme.ADDITIONAL_OPACITY_FOR_DARK;
     final Color backgroundColor =
-        cardEvaluation.getBackgroundColor().withOpacity(opacity);
+        cardEvaluation.backgroundColor.withOpacity(opacity);
     final Color textColor = themeData.brightness == Brightness.dark
         ? Colors.white
-        : cardEvaluation.getTextColor().withOpacity(opacity);
+        : cardEvaluation.textColor.withOpacity(opacity);
     final SvgIconChip? iconChip =
         iconUrl == null ? null : SvgIconChip(iconUrl!, height: iconHeight);
 

packages/smooth_app/lib/data_models/preferences/user_preferences.dart

@@ -99,6 +99,10 @@ class UserPreferences extends ChangeNotifier {
 
   static const String _TAG_NUMBER_OF_SCANS = 'numberOfScans';
 
+  /// User knowledge panel order
+  static const String _TAG_USER_KNOWLEDGE_PANEL_ORDER =
+      'userKnowledgePanelOrder';
+
   Future<void> init(final ProductPreferences productPreferences) async {
     await _onMigrate();
 
@@ -332,4 +336,14 @@ class UserPreferences extends ChangeNotifier {
     await _sharedPreferences.setString(_TAG_USER_PICTURE_SOURCE, source.tag);
     notifyListeners();
   }
+
+  List<String> get userKnowledgePanelOrder =>
+      _sharedPreferences.getStringList(_TAG_USER_KNOWLEDGE_PANEL_ORDER) ??
+      <String>[];
+
+  Future<void> setUserKnowledgePanelOrder(final List<String> source) async {
+    await _sharedPreferences.setStringList(
+        _TAG_USER_KNOWLEDGE_PANEL_ORDER, source);
+    notifyListeners();
+  }
 }

packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_card.dart

@@ -12,10 +12,12 @@ class KnowledgePanelCard extends StatelessWidget {
   const KnowledgePanelCard({
     required this.panelId,
     required this.product,
+    required this.isClickable,
   });
 
   final String panelId;
   final Product product;
+  final bool isClickable;
 
   static const String PANEL_NUTRITION_TABLE_ID = 'nutrition_facts_table';
   static const String PANEL_INGREDIENTS_ID = 'ingredients';
@@ -36,30 +38,34 @@ class KnowledgePanelCard extends StatelessWidget {
         panelId: panelId,
         product: product,
         isInitiallyExpanded: false,
+        isClickable: isClickable,
       );
     }
 
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: SMALL_SPACE),
       child: InkWell(
         borderRadius: ANGULAR_BORDER_RADIUS,
+        onTap: !isClickable
+            ? null
+            : () async => Navigator.push<Widget>(
+                  context,
+                  MaterialPageRoute<Widget>(
+                    builder: (BuildContext context) => SmoothBrightnessOverride(
+                      brightness:
+                          SmoothBrightnessOverride.of(context)?.brightness,
+                      child: KnowledgePanelPage(
+                        panelId: panelId,
+                        product: product,
+                      ),
+                    ),
+                  ),
+                ),
         child: KnowledgePanelsBuilder.getPanelSummaryWidget(
           panel,
-          isClickable: true,
+          isClickable: isClickable,
           margin: EdgeInsets.zero,
         ),
-        onTap: () async => Navigator.push<Widget>(
-          context,
-          MaterialPageRoute<Widget>(
-            builder: (BuildContext context) => SmoothBrightnessOverride(
-              brightness: SmoothBrightnessOverride.of(context)?.brightness,
-              child: KnowledgePanelPage(
-                panelId: panelId,
-                product: product,
-              ),
-            ),
-          ),
-        ),
       ),
     );
   }

packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_expanded_card.dart

@@ -8,11 +8,13 @@ class KnowledgePanelExpandedCard extends StatelessWidget {
     required this.panelId,
     required this.product,
     required this.isInitiallyExpanded,
+    required this.isClickable,
   });
 
   final Product product;
   final String panelId;
   final bool isInitiallyExpanded;
+  final bool isClickable;
 
   @override
   Widget build(BuildContext context) {
@@ -32,6 +34,7 @@ class KnowledgePanelExpandedCard extends StatelessWidget {
           knowledgePanelElement: element,
           product: product,
           isInitiallyExpanded: isInitiallyExpanded,
+          isClickable: isClickable,
         );
         if (elementWidget != null) {
           elementWidgets.add(

packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_group_card.dart

@@ -8,10 +8,12 @@ class KnowledgePanelGroupCard extends StatelessWidget {
   const KnowledgePanelGroupCard({
     required this.groupElement,
     required this.product,
+    required this.isClickable,
   });
 
   final KnowledgePanelPanelGroupElement groupElement;
   final Product product;
+  final bool isClickable;
 
   @override
   Widget build(BuildContext context) {
@@ -35,6 +37,7 @@ class KnowledgePanelGroupCard extends StatelessWidget {
             KnowledgePanelCard(
               panelId: panelId,
               product: product,
+              isClickable: isClickable,
             )
         ],
       ),

packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_page.dart

@@ -79,6 +79,7 @@ class _KnowledgePanelPageState extends State<KnowledgePanelPage>
                         panelId: widget.panelId,
                         product: upToDateProduct,
                         isInitiallyExpanded: true,
+                        isClickable: true,
                       ),
                     ),
                   ),

packages/smooth_app/lib/knowledge_panel/knowledge_panels_builder.dart

@@ -51,6 +51,7 @@ class KnowledgePanelsBuilder {
             knowledgePanelElement: element,
             product: product,
             isInitiallyExpanded: false,
+            isClickable: true,
           );
           if (widget != null) {
             children.add(widget);
@@ -153,11 +154,13 @@ class KnowledgePanelsBuilder {
     required final KnowledgePanelElement knowledgePanelElement,
     required final Product product,
     required final bool isInitiallyExpanded,
+    required final bool isClickable,
   }) {
     final Widget? result = _getElementWidget(
       element: knowledgePanelElement,
       product: product,
       isInitiallyExpanded: isInitiallyExpanded,
+      isClickable: isClickable,
     );
     if (result == null) {
       return null;
@@ -179,6 +182,7 @@ class KnowledgePanelsBuilder {
     required final KnowledgePanelElement element,
     required final Product product,
     required final bool isInitiallyExpanded,
+    required final bool isClickable,
   }) {
     switch (element.elementType) {
       case KnowledgePanelElementType.TEXT:
@@ -205,12 +209,14 @@ class KnowledgePanelsBuilder {
         return KnowledgePanelCard(
           panelId: panelId,
           product: product,
+          isClickable: isClickable,
         );
 
       case KnowledgePanelElementType.PANEL_GROUP:
         return KnowledgePanelGroupCard(
           groupElement: element.panelGroupElement!,
           product: product,
+          isClickable: isClickable,
         );
 
       case KnowledgePanelElementType.TABLE:

packages/smooth_app/lib/l10n/app_en.arb

@@ -2523,6 +2523,10 @@
     "hunger_games_loading_line2": "We're downloading the questions!",
     "hunger_games_error_label": "Argh! Something went wrong… and we couldn't load the questions.",
     "hunger_games_error_retry_button": "Let's retry!",
+    "reorder_attribute_action": "Reorder the attributes",
+    "@reorder_attribute_action": {
+        "description": "An action button or a page title about reordering the attributes (e.g. 'is vegan?', 'nutrition facts', ...)"
+    },
     "link_cant_be_opened": "This link can't be opened on your device. Please check that you have a browser installed.",
     "@link_cant_be_opened": {
         "description": "An error may happen if the device doesn't have a browser installed."

packages/smooth_app/lib/pages/preferences/user_preferences_dev_mode.dart

@@ -49,6 +49,7 @@ class UserPreferencesDevMode extends AbstractUserPreferences {
       '__accessibilityNoColor';
   static const String userPreferencesFlagAccessibilityEmoji =
       '__accessibilityEmoji';
+  static const String userPreferencesFlagUserOrderedKP = '__userOrderedKP';
 
   final TextEditingController _textFieldController = TextEditingController();
 
@@ -305,6 +306,16 @@ class UserPreferencesDevMode extends AbstractUserPreferences {
               builder: (BuildContext context) =>
                   const UserPreferencesDebugInfo())),
         ),
+        UserPreferencesItemSwitch(
+          title: 'User ordered knowledge panels',
+          value: userPreferences.getFlag(userPreferencesFlagUserOrderedKP) ??
+              false,
+          onChanged: (bool value) async {
+            await userPreferences.setFlag(
+                userPreferencesFlagUserOrderedKP, value);
+            _showSuccessMessage();
+          },
+        ),
         UserPreferencesItemTile(
           title: 'Preference Search...',
           onTap: () async => Navigator.of(context).push(