Add UI to list collection participants

lib/ui/sharing/album_participants_page.dart

@@ -1 +1,210 @@
+import 'package:flutter/material.dart';
+import 'package:photos/core/configuration.dart';
+import 'package:photos/extensions/list.dart';
+import 'package:photos/models/collection.dart';
+import 'package:photos/theme/ente_theme.dart';
+import 'package:photos/ui/components/captioned_text_widget.dart';
+import 'package:photos/ui/components/divider_widget.dart';
+import 'package:photos/ui/components/menu_item_widget.dart';
+import 'package:photos/ui/components/menu_section_title.dart';
+import 'package:photos/ui/components/title_bar_title_widget.dart';
+import 'package:photos/ui/components/title_bar_widget.dart';
+import 'package:photos/ui/sharing/user_avator_widget.dart';
 
+class AlbumParticipantsPage extends StatelessWidget {
+  final Collection collection;
+
+  const AlbumParticipantsPage(
+    this.collection, {
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = getEnteColorScheme(context);
+    final currentUserID = Configuration.instance.getUserID()!;
+    final int particpants = 1 + collection.getSharees().length;
+    final User owner = collection.owner!;
+    if (owner.id == currentUserID && owner.email == "") {
+      owner.email = Configuration.instance.getEmail()!;
+    }
+    final splitResult = collection.getSharees().splitMatch((x) => x.isViewer);
+    final List<User> viewers = splitResult.matched;
+    final List<User> collaborators = splitResult.unmatched;
+
+    return Scaffold(
+      body: CustomScrollView(
+        primary: false,
+        slivers: <Widget>[
+          TitleBarWidget(
+            flexibleSpaceTitle: TitleBarTitleWidget(
+              title: "${collection.name}",
+            ),
+            flexibleSpaceCaption: "$particpants Participants",
+          ),
+          SliverList(
+            delegate: SliverChildBuilderDelegate(
+              (context, index) {
+                return Padding(
+                  padding: const EdgeInsets.only(top: 20, left: 16, right: 16),
+                  child: Column(
+                    children: [
+                      Column(
+                        children: [
+                          const MenuSectionTitle(
+                            title: "Owner",
+                            iconData: Icons.admin_panel_settings_outlined,
+                          ),
+                          MenuItemWidget(
+                            captionedTextWidget: const CaptionedTextWidget(
+                              title: "You",
+                              makeTextBold: true,
+                            ),
+                            leadingIconWidget: UserAvatarWidget(
+                              owner,
+                              currentUserID: currentUserID,
+                            ),
+                            leadingIconSize: 24,
+                            menuItemColor: colorScheme.fillFaint,
+                            borderRadius: 8,
+                            isGestureDetectorDisabled: true,
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                );
+              },
+              childCount: 1,
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.only(top: 20, left: 16, right: 16),
+            sliver: SliverList(
+              delegate: SliverChildBuilderDelegate(
+                (context, index) {
+                  if (index == 0) {
+                    return const MenuSectionTitle(
+                      title: "Collaborator",
+                      iconData: Icons.edit_outlined,
+                    );
+                  } else if (index > 0 && index <= collaborators.length) {
+                    final listIndex = index - 1;
+                    final currentUser = collaborators[listIndex];
+                    return Column(
+                      children: [
+                        MenuItemWidget(
+                          captionedTextWidget: CaptionedTextWidget(
+                            title: currentUser.email,
+                          ),
+                          leadingIconSize: 24.0,
+                          leadingIconWidget: UserAvatarWidget(
+                            currentUser,
+                            type: AvatarType.mini,
+                          ),
+                          menuItemColor: getEnteColorScheme(context).fillFaint,
+                          pressedColor: getEnteColorScheme(context).fillFaint,
+                          trailingIcon: Icons.chevron_right,
+                          trailingIconIsMuted: true,
+                          onTap: () async {},
+                          isTopBorderRadiusRemoved: listIndex > 0,
+                          isBottomBorderRadiusRemoved: true,
+                          borderRadius: 8,
+                        ),
+                        DividerWidget(
+                          dividerType: DividerType.menu,
+                          bgColor: getEnteColorScheme(context).blurStrokeFaint,
+                        ),
+                      ],
+                    );
+                  } else if (index == (1 + collaborators.length)) {
+                    return MenuItemWidget(
+                      captionedTextWidget: CaptionedTextWidget(
+                        title:
+                            collaborators.isNotEmpty ? "Add more" : "Add email",
+                        makeTextBold: true,
+                      ),
+                      leadingIcon: Icons.add_outlined,
+                      menuItemColor: getEnteColorScheme(context).fillFaint,
+                      pressedColor: getEnteColorScheme(context).fillFaint,
+                      onTap: () async {},
+                      isTopBorderRadiusRemoved: collaborators.isNotEmpty,
+                      borderRadius: 8,
+                    );
+                  }
+                  return const Text("-----");
+                },
+                childCount: 1 + collaborators.length + 1,
+              ),
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.only(top: 24, left: 16, right: 16),
+            sliver: SliverList(
+              delegate: SliverChildBuilderDelegate(
+                (context, index) {
+                  if (index == 0) {
+                    return const MenuSectionTitle(
+                      title: "Viewer",
+                      iconData: Icons.photo_outlined,
+                    );
+                  } else if (index > 0 && index <= viewers.length) {
+                    final listIndex = index - 1;
+                    final currentUser = viewers[listIndex];
+                    return Column(
+                      children: [
+                        MenuItemWidget(
+                          captionedTextWidget: CaptionedTextWidget(
+                            title: currentUser.email,
+                          ),
+                          leadingIconSize: 24.0,
+                          leadingIconWidget: UserAvatarWidget(
+                            currentUser,
+                            type: AvatarType.mini,
+                          ),
+                          menuItemColor: getEnteColorScheme(context).fillFaint,
+                          pressedColor: getEnteColorScheme(context).fillFaint,
+                          trailingIcon: Icons.chevron_right,
+                          trailingIconIsMuted: true,
+                          onTap: () async {},
+                          isTopBorderRadiusRemoved: listIndex > 0,
+                          isBottomBorderRadiusRemoved: true,
+                          borderRadius: 8,
+                        ),
+                        DividerWidget(
+                          dividerType: DividerType.menu,
+                          bgColor: getEnteColorScheme(context).blurStrokeFaint,
+                        ),
+                      ],
+                    );
+                  } else if (index == (1 + viewers.length)) {
+                    return MenuItemWidget(
+                      captionedTextWidget: CaptionedTextWidget(
+                        title: viewers.isNotEmpty ? "Add more" : "Add Viewer",
+                        makeTextBold: true,
+                      ),
+                      leadingIcon: Icons.add_outlined,
+                      menuItemColor: getEnteColorScheme(context).fillFaint,
+                      pressedColor: getEnteColorScheme(context).fillFaint,
+                      onTap: () async {},
+                      isTopBorderRadiusRemoved: viewers.isNotEmpty,
+                      borderRadius: 8,
+                    );
+                  }
+                  return const Padding(
+                    padding: EdgeInsets.symmetric(vertical: 20, horizontal: 16),
+                    child: MenuSectionTitle(
+                      title: "Viewer",
+                      iconData: Icons.photo_outlined,
+                    ),
+                  );
+                },
+                childCount: 1 + viewers.length + 1,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}