feat: The modal sheet for the 4 main photos with the date (#5957)

* Add the date to the photo grid

* Tiny fix

* Remove unused key

packages/smooth_app/assets/fonts/icons/config.json

@@ -1691,6 +1691,20 @@
       "search": [
         "milk_download"
       ]
+    },
+    {
+      "uid": "9a877c6086d25c55119d5cd5d654818e",
+      "css": "clock",
+      "code": 59512,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M500 1000C776.1 1000 1000 776.1 1000 500 1000 223.9 776.1 0 500 0 223.9 0 0 223.9 0 500 0 776.1 223.9 1000 500 1000ZM516.8 250C548.9 250 575 274.3 575 304.3L575 521.3C575 535.7 568.9 549.5 557.9 559.7L424.4 684.1C401.7 705.3 364.7 705.3 342 684.1 319.3 663 319.3 628.6 342 607.4L458.5 498.9 458.5 304.3C458.5 274.3 484.6 250 516.8 250Z",
+        "width": 1000
+      },
+      "search": [
+        "clock"
+      ]
     }
   ]
 }

packages/smooth_app/lib/generic_lib/bottom_sheets/smooth_bottom_sheet.dart

@@ -76,6 +76,9 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
   required String title,
   required Iterable<String> labels,
   required Iterable<T> values,
+  bool addEndArrowToItems = false,
+  Widget? header,
+  Widget? footer,
   List<Widget>? prefixIcons,
   Color? prefixIconTint,
   List<Widget>? suffixIcons,
@@ -89,6 +92,11 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
   assert(suffixIconTint == null || suffixIcons != null);
 
   final List<Widget> items = <Widget>[];
+
+  if (header != null) {
+    items.add(header);
+  }
+
   for (int i = 0; i < labels.length; i++) {
     items.add(
       ListTile(
@@ -101,12 +109,17 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
           labels.elementAt(i),
           style: const TextStyle(fontWeight: FontWeight.w500),
         ),
-        contentPadding: padding,
-        trailing: suffixIcons != null
+        contentPadding: EdgeInsetsDirectional.only(
+          start: LARGE_SPACE,
+          end: addEndArrowToItems ? 18.0 : LARGE_SPACE,
+        ),
+        trailing: (suffixIcons != null
             ? IconTheme.merge(
                 data: IconThemeData(color: suffixIconTint),
                 child: suffixIcons[i])
-            : null,
+            : (addEndArrowToItems
+                ? const _SmoothListOfChoicesEndArrow()
+                : null)),
         onTap: () {
           Navigator.of(context).pop(values.elementAt(i));
         },
@@ -117,6 +130,11 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
       items.add(const Divider(height: 1.0));
     }
   }
+
+  if (footer != null) {
+    items.add(footer);
+  }
+
   items.add(SizedBox(height: MediaQuery.of(context).padding.bottom));
 
   return showSmoothModalSheet<T>(
@@ -130,6 +148,33 @@ Future<T?> showSmoothListOfChoicesModalSheet<T>({
   );
 }
 
+class _SmoothListOfChoicesEndArrow extends StatelessWidget {
+  const _SmoothListOfChoicesEndArrow();
+
+  @override
+  Widget build(BuildContext context) {
+    final SmoothColorsThemeExtension extension =
+        context.extension<SmoothColorsThemeExtension>();
+    final bool lightTheme = context.lightTheme();
+
+    return ExcludeSemantics(
+      child: icons.CircledArrow.right(
+        color: lightTheme ? extension.primaryLight : extension.primaryDark,
+        type: icons.CircledArrowType.normal,
+        circleColor:
+            lightTheme ? extension.primaryDark : extension.primaryMedium,
+        size: 24.0,
+        padding: const EdgeInsetsDirectional.only(
+          start: 6.0,
+          end: 6.0,
+          top: 6.5,
+          bottom: 7.5,
+        ),
+      ),
+    );
+  }
+}
+
 /// A non scrollable modal sheet
 class SmoothModalSheet extends StatelessWidget {
   SmoothModalSheet({

packages/smooth_app/lib/l10n/app_en.arb

@@ -3362,5 +3362,6 @@
     "photo_field_nutrition": "Nutrition photo",
     "photo_field_packaging": "Packaging information photo",
     "photo_already_exists": "This photo already exists",
-    "photo_missing": "This photo is missing"
+    "photo_missing": "This photo is missing",
+    "date": "Date"
 }