Create dummy UI of new selection sheet

lib/ui/components/bottom_action_bar/action_bar_widget.dart

@@ -40,42 +40,48 @@ class _ActionBarWidgetState extends State<ActionBarWidget> {
   @override
   Widget build(BuildContext context) {
     final textTheme = getEnteTextTheme(context);
-    final colorScheme = getEnteColorScheme(context);
     return SizedBox(
       child: Padding(
-        padding: const EdgeInsets.fromLTRB(20, 16, 20, 64),
+        padding: const EdgeInsets.fromLTRB(20, 8, 20, 8),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            ValueListenableBuilder(
-              valueListenable: _selectedFilesNotifier,
-              builder: (context, value, child) {
-                return Text(
-                  _selectedOwnedFilesNotifier.value !=
-                          _selectedFilesNotifier.value
-                      ? S.of(context).selectedPhotosWithYours(
-                            _selectedFilesNotifier.value,
-                            _selectedOwnedFilesNotifier.value,
-                          )
-                      : S.of(context).selectedPhotos(
-                            _selectedFilesNotifier.value,
-                          ),
-                  style: textTheme.body.copyWith(
-                    color: colorScheme.blurTextBase,
-                  ),
-                );
-              },
+            Flexible(
+              flex: 1,
+              child: ValueListenableBuilder(
+                valueListenable: _selectedFilesNotifier,
+                builder: (context, value, child) {
+                  return Text(
+                    _selectedOwnedFilesNotifier.value !=
+                            _selectedFilesNotifier.value
+                        ? S.of(context).selectedPhotosWithYours(
+                              _selectedFilesNotifier.value,
+                              _selectedOwnedFilesNotifier.value,
+                            )
+                        : S.of(context).selectedPhotos(
+                              _selectedFilesNotifier.value,
+                            ),
+                    style: textTheme.miniMuted,
+                  );
+                },
+              ),
             ),
-            GestureDetector(
-              behavior: HitTestBehavior.opaque,
-              onTap: () {
-                widget.onCancel?.call();
-              },
-              child: Center(
-                child: Text(
-                  S.of(context).cancel,
-                  style: textTheme.bodyBold
-                      .copyWith(color: colorScheme.blurTextBase),
+            Flexible(
+              flex: 1,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 12),
+                child: GestureDetector(
+                  behavior: HitTestBehavior.opaque,
+                  onTap: () {
+                    widget.onCancel?.call();
+                  },
+                  child: Align(
+                    alignment: Alignment.centerRight,
+                    child: Text(
+                      S.of(context).cancel,
+                      style: textTheme.mini,
+                    ),
+                  ),
                 ),
               ),
             ),

lib/ui/components/bottom_action_bar/bottom_action_bar_widget.dart

@@ -4,6 +4,7 @@ import 'package:photos/models/selected_files.dart';
 import "package:photos/theme/effects.dart";
 import 'package:photos/theme/ente_theme.dart';
 import 'package:photos/ui/components/bottom_action_bar/action_bar_widget.dart';
+import "package:photos/ui/components/divider_widget.dart";
 
 class BottomActionBarWidget extends StatelessWidget {
   final Widget expandedMenu;
@@ -23,6 +24,7 @@ class BottomActionBarWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    print("HasSmallerBottomPadding: $hasSmallerBottomPadding");
     final widthOfScreen = MediaQuery.of(context).size.width;
     final colorScheme = getEnteColorScheme(context);
     final double leftRightPadding = widthOfScreen > restrictedMaxWidth
@@ -32,22 +34,97 @@ class BottomActionBarWidget extends StatelessWidget {
       decoration: BoxDecoration(
         color: backgroundColor ?? colorScheme.backgroundElevated2,
         boxShadow: shadowFloatFaintLight,
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(8),
+          topRight: Radius.circular(8),
+        ),
       ),
       padding: EdgeInsets.only(
         top: 4,
-        bottom: hasSmallerBottomPadding ? 24 : 36,
+        bottom: hasSmallerBottomPadding ? 0 : 12,
         right: leftRightPadding,
         left: leftRightPadding,
       ),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
+          const SizedBox(height: 12),
+          SingleChildScrollView(
+            physics: const BouncingScrollPhysics(),
+            scrollDirection: Axis.horizontal,
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                SelectionOptionButton(
+                  name: "Share link",
+                  icon: Icons.link_outlined,
+                ),
+                SelectionOptionButton(name: "Add to album", icon: Icons.add),
+                SelectionOptionButton(
+                  name: "Delete",
+                  icon: Icons.delete_outline,
+                ),
+                SelectionOptionButton(
+                  name: "Hide",
+                  icon: Icons.visibility_off_outlined,
+                ),
+                SelectionOptionButton(
+                  name: "Archive",
+                  icon: Icons.archive_outlined,
+                ),
+                SelectionOptionButton(
+                  name: "Favorite",
+                  icon: Icons.favorite_border_outlined,
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 20),
+          const DividerWidget(dividerType: DividerType.bottomBar),
           ActionBarWidget(
             selectedFiles: selectedFiles,
             onCancel: onCancel,
           ),
+          // const SizedBox(height: 2)
         ],
       ),
     );
   }
 }
+
+class SelectionOptionButton extends StatelessWidget {
+  final String name;
+  final IconData icon;
+  const SelectionOptionButton({
+    required this.name,
+    required this.icon,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+      child: SizedBox(
+        width: 64,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              icon,
+              size: 24,
+              color: getEnteColorScheme(context).textMuted,
+            ),
+            const SizedBox(height: 4),
+            Text(
+              name,
+              textAlign: TextAlign.center,
+              style: getEnteTextTheme(context).miniMuted,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}