fluffychat/lib/widgets/navigation_rail.dart

import 'package:flutter/material.dart';

import 'package:badges/badges.dart' as b;
import 'package:go_router/go_router.dart';
import 'package:matrix/matrix.dart';

import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/l10n/l10n.dart';
import 'package:fluffychat/pages/chat_list/navi_rail_item.dart';
import 'package:fluffychat/pangea/analytics_misc/analytics_navigation_util.dart';
import 'package:fluffychat/pangea/chat_list/utils/chat_list_handle_space_tap.dart';
import 'package:fluffychat/pangea/course_plans/map_clipper.dart';
import 'package:fluffychat/pangea/extensions/pangea_room_extension.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:fluffychat/utils/stream_extension.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';

class SpacesNavigationRail extends StatelessWidget {
  final String? activeSpaceId;
  // #Pangea
  // final void Function() onGoToChats;
  // final void Function(String) onGoToSpaceId;
  final String? path;
  final double railWidth;
  final bool expanded;
  final VoidCallback collapse;
  // Pangea#

  const SpacesNavigationRail({
    required this.activeSpaceId,
    // #Pangea
    // required this.onGoToChats,
    // required this.onGoToSpaceId,
    required this.path,
    required this.railWidth,
    required this.collapse,
    this.expanded = false,
    // Pangea#
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final client = Matrix.of(context).client;
    final isSettings = GoRouter.of(context)
        .routeInformationProvider
        .value
        .uri
        .path
        .startsWith('/rooms/settings');
    // #Pangea
    final isAnalytics = path?.contains('analytics') ?? false;
    final isCourse = path?.contains('course') ?? false;
    final isColumnMode = FluffyThemes.isColumnMode(context);

    final width = isColumnMode
        ? FluffyThemes.navRailWidth
        : FluffyThemes.navRailWidth - 8.0;
    // return StreamBuilder(
    return Material(
      child: SafeArea(
        child: StreamBuilder(
          // Pangea#
          key: ValueKey(
            client.userID.toString(),
          ),
          stream: client.onSync.stream
              .where((s) => s.hasRoomUpdate)
              .rateLimit(const Duration(seconds: 1)),
          builder: (context, _) {
            final allSpaces = client.rooms.where((room) => room.isSpace);
            final rootSpaces = allSpaces
                .where(
                  (space) => !allSpaces.any(
                    (parentSpace) => parentSpace.spaceChildren
                        .any((child) => child.roomId == space.id),
                  ),
                )
                .toList();

            // #Pangea
            // return SizedBox(
            return AnimatedContainer(
              // width: FluffyThemes.navRailWidth,
              width: railWidth,
              duration: FluffyThemes.animationDuration,
              // Pangea#
              child: Column(
                // #Pangea
                crossAxisAlignment: CrossAxisAlignment.start,
                // Pangea#
                children: [
                  Expanded(
                    child: ListView.builder(
                      scrollDirection: Axis.vertical,
                      // #Pangea
                      // itemCount: rootSpaces.length + 2,
                      itemCount: rootSpaces.length + 3,
                      // Pangea#
                      itemBuilder: (context, i) {
                        // #Pangea
                        if (i == 0) {
                          return NaviRailItem(
                            isSelected: isAnalytics,
                            onTap: () {
                              collapse();
                              AnalyticsNavigationUtil.navigateToAnalytics(
                                context: context,
                              );
                            },
                            backgroundColor: Colors.transparent,
                            icon: FutureBuilder<Profile>(
                              future: client.fetchOwnProfile(),
                              builder: (context, snapshot) => Stack(
                                alignment: Alignment.center,
                                children: [
                                  Material(
                                    color: Colors.transparent,
                                    borderRadius: BorderRadius.circular(99),
                                    child: Avatar(
                                      mxContent: snapshot.data?.avatarUrl,
                                      name: snapshot.data?.displayName ??
                                          client.userID!.localpart,
                                      size:
                                          width - (isColumnMode ? 32.0 : 24.0),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            toolTip: L10n.of(context).home,
                            // #Pangea
                            expanded: expanded,
                            // Pangea#
                          );
                        }
                        i--;
                        // Pangea#
                        if (i == 0) {
                          return NaviRailItem(
                            // #Pangea
                            // isSelected: activeSpaceId == null && !isSettings,
                            isSelected: activeSpaceId == null &&
                                !isSettings &&
                                !isAnalytics &&
                                !isCourse,
                            // onTap: onGoToChats,
                            // icon: const Padding(
                            //   padding: EdgeInsets.all(10.0),
                            //   child: Icon(Icons.forum_outlined),
                            // ),
                            // selectedIcon: const Padding(
                            //   padding: EdgeInsets.all(10.0),
                            //   child: Icon(Icons.forum),
                            // ),
                            // toolTip: L10n.of(context).chats,
                            // unreadBadgeFilter: (room) => true,
                            icon: const Icon(Icons.forum_outlined),
                            selectedIcon: const Icon(Icons.forum),
                            onTap: () {
                              collapse();
                              context.go("/rooms");
                            },
                            toolTip: L10n.of(context).allChats,
                            unreadBadgeFilter: (room) =>
                                room.firstSpaceParent == null,
                            expanded: expanded,
                            // Pangea#
                          );
                        }
                        i--;
                        if (i == rootSpaces.length) {
                          return NaviRailItem(
                            // #Pangea
                            // isSelected: false,
                            // onTap: () => context.go('/rooms/newspace'),
                            // icon: const Padding(
                            //   padding: EdgeInsets.all(8.0),
                            //   child: Icon(Icons.add),
                            // ),
                            // toolTip: L10n.of(context).createNewSpace,
                            backgroundColor: Colors.transparent,
                            borderRadius: BorderRadius.circular(0),
                            isSelected: isCourse,
                            onTap: () {
                              collapse();
                              context.go('/rooms/course');
                            },
                            icon: ClipPath(
                              clipper: MapClipper(),
                              child: Container(
                                width: width - (isColumnMode ? 32.0 : 24.0),
                                height: width - (isColumnMode ? 32.0 : 24.0),
                                color: isCourse
                                    ? Theme.of(context)
                                        .colorScheme
                                        .primaryContainer
                                    : Theme.of(context)
                                        .colorScheme
                                        .surfaceContainerHigh,
                                child: const Icon(Icons.add),
                              ),
                            ),
                            toolTip: L10n.of(context).addCourse,
                            expanded: expanded,
                            // Pangea#
                          );
                        }
                        final space = rootSpaces[i];
                        final displayname =
                            rootSpaces[i].getLocalizedDisplayname(
                          MatrixLocals(L10n.of(context)),
                        );
                        final spaceChildrenIds =
                            space.spaceChildren.map((c) => c.roomId).toSet();
                        return NaviRailItem(
                          toolTip: displayname,
                          isSelected: activeSpaceId == space.id,
                          // #Pangea
                          backgroundColor: Colors.transparent,
                          borderRadius: BorderRadius.circular(0),
                          // onTap: () => onGoToSpaceId(rootSpaces[i].id),
                          onTap: () {
                            collapse();
                            final room = client.getRoomById(rootSpaces[i].id);
                            if (room != null) {
                              chatListHandleSpaceTap(
                                context,
                                room,
                              );
                            } else {
                              context.go(
                                "/rooms/spaces/${rootSpaces[i].id}/details",
                              );
                            }
                          },
                          // Pangea#
                          unreadBadgeFilter: (room) =>
                              spaceChildrenIds.contains(room.id),
                          // #Pangea
                          // icon: Avatar(
                          //   mxContent: rootSpaces[i].avatar,
                          //   name: displayname,
                          //   border: BorderSide(
                          //     width: 1,
                          //     color: Theme.of(context).dividerColor,
                          //   ),
                          //   borderRadius: BorderRadius.circular(
                          //     AppConfig.borderRadius / 2,
                          //   ),
                          // ),
                          icon: b.Badge(
                            showBadge:
                                rootSpaces[i].membership == Membership.invite,
                            badgeStyle: b.BadgeStyle(
                              badgeColor: Theme.of(context).colorScheme.error,
                              elevation: 4,
                              borderSide: BorderSide.none,
                              padding: const EdgeInsetsGeometry.all(0),
                            ),
                            badgeContent: Icon(
                              Icons.error_outline,
                              color: Theme.of(context).colorScheme.onPrimary,
                              size: 16,
                            ),
                            position: b.BadgePosition.topEnd(
                              top: -5,
                              end: -7,
                            ),
                            child: ClipPath(
                              clipper: MapClipper(),
                              child: Avatar(
                                mxContent: rootSpaces[i].avatar,
                                name: displayname,
                                border: BorderSide(
                                  width: 1,
                                  color: Theme.of(context).dividerColor,
                                ),
                                borderRadius: BorderRadius.circular(0),
                                size: width - (isColumnMode ? 32.0 : 24.0),
                              ),
                            ),
                          ),
                          expanded: expanded,
                          // Pangea#
                        );
                      },
                    ),
                  ),
                  NaviRailItem(
                    isSelected: isSettings,
                    // #Pangea
                    // onTap: () => context.go('/rooms/settings'),
                    // icon: const Padding(
                    //   padding: EdgeInsets.all(10.0),
                    //   child: Icon(Icons.settings_outlined),
                    // ),
                    // selectedIcon: const Padding(
                    //   padding: EdgeInsets.all(10.0),
                    //   child: Icon(Icons.settings),
                    // ),
                    onTap: () {
                      collapse();
                      context.go('/rooms/settings');
                    },
                    icon: const Icon(Icons.settings_outlined),
                    selectedIcon: const Icon(Icons.settings),
                    expanded: expanded,
                    // Pangea#
                    toolTip: L10n.of(context).settings,
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}