From fef96359c99b59a8da92259c77ba83538f37ba8b Mon Sep 17 00:00:00 2001 From: ggurdin Date: Fri, 23 May 2025 09:35:56 -0400 Subject: [PATCH] chore: make space nav bar narrower on mobile and ensure space nav bar matches user's theme --- lib/pages/chat_list/navi_rail_item.dart | 6 +- lib/pages/settings/settings_view.dart | 3 +- lib/widgets/navigation_rail.dart | 201 ++++++++++++------------ 3 files changed, 110 insertions(+), 100 deletions(-) diff --git a/lib/pages/chat_list/navi_rail_item.dart b/lib/pages/chat_list/navi_rail_item.dart index 0e844e05d..f29a16b5d 100644 --- a/lib/pages/chat_list/navi_rail_item.dart +++ b/lib/pages/chat_list/navi_rail_item.dart @@ -44,7 +44,11 @@ class NaviRailItem extends StatelessWidget { bottom: 8, left: 0, child: AnimatedContainer( - width: isSelected ? 8 : 0, + width: isSelected + ? FluffyThemes.isColumnMode(context) + ? 8 + : 4 + : 0, duration: FluffyThemes.animationDuration, curve: FluffyThemes.animationCurve, decoration: BoxDecoration( diff --git a/lib/pages/settings/settings_view.dart b/lib/pages/settings/settings_view.dart index 60891901f..0a72704aa 100644 --- a/lib/pages/settings/settings_view.dart +++ b/lib/pages/settings/settings_view.dart @@ -34,8 +34,7 @@ class SettingsView extends StatelessWidget { ?.tryGet('account'); return Row( children: [ - if (FluffyThemes.isColumnMode(context) || - AppConfig.displayNavigationRail) ...[ + if (FluffyThemes.isColumnMode(context)) ...[ SpacesNavigationRail( activeSpaceId: null, onGoToChats: () => context.go('/rooms'), diff --git a/lib/widgets/navigation_rail.dart b/lib/widgets/navigation_rail.dart index 81e8fa744..d27d84912 100644 --- a/lib/widgets/navigation_rail.dart +++ b/lib/widgets/navigation_rail.dart @@ -33,105 +33,112 @@ class SpacesNavigationRail extends StatelessWidget { .uri .path .startsWith('/rooms/settings'); - return StreamBuilder( - 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(); + return Material( + child: SafeArea( + child: StreamBuilder( + 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(); - return SizedBox( - width: FluffyThemes.navRailWidth, - child: Column( - children: [ - Expanded( - child: ListView.builder( - scrollDirection: Axis.vertical, - itemCount: rootSpaces.length + 2, - itemBuilder: (context, i) { - if (i == 0) { - return NaviRailItem( - isSelected: activeSpaceId == null && !isSettings, - 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, - ); - } - i--; - if (i == rootSpaces.length) { - return NaviRailItem( - isSelected: false, - onTap: () => context.go('/rooms/newspace'), - icon: const Padding( - padding: EdgeInsets.all(8.0), - child: Icon(Icons.add), - ), - toolTip: L10n.of(context).createNewSpace, - ); - } - 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, - onTap: () => onGoToSpaceId(rootSpaces[i].id), - unreadBadgeFilter: (room) => - spaceChildrenIds.contains(room.id), - icon: Avatar( - mxContent: rootSpaces[i].avatar, - name: displayname, - border: BorderSide( - width: 1, - color: Theme.of(context).dividerColor, - ), - borderRadius: BorderRadius.circular( - AppConfig.borderRadius / 2, - ), - ), - ); - }, - ), + return SizedBox( + width: FluffyThemes.isColumnMode(context) + ? FluffyThemes.navRailWidth + : FluffyThemes.navRailWidth * 0.75, + child: Column( + children: [ + Expanded( + child: ListView.builder( + scrollDirection: Axis.vertical, + itemCount: rootSpaces.length + 2, + itemBuilder: (context, i) { + if (i == 0) { + return NaviRailItem( + isSelected: activeSpaceId == null && !isSettings, + 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, + ); + } + i--; + if (i == rootSpaces.length) { + return NaviRailItem( + isSelected: false, + onTap: () => context.go('/rooms/newspace'), + icon: const Padding( + padding: EdgeInsets.all(8.0), + child: Icon(Icons.add), + ), + toolTip: L10n.of(context).createNewSpace, + ); + } + 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, + onTap: () => onGoToSpaceId(rootSpaces[i].id), + unreadBadgeFilter: (room) => + spaceChildrenIds.contains(room.id), + icon: Avatar( + mxContent: rootSpaces[i].avatar, + name: displayname, + border: BorderSide( + width: 1, + color: Theme.of(context).dividerColor, + ), + borderRadius: BorderRadius.circular( + AppConfig.borderRadius / 2, + ), + ), + ); + }, + ), + ), + NaviRailItem( + isSelected: isSettings, + 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), + ), + toolTip: L10n.of(context).settings, + ), + ], ), - NaviRailItem( - isSelected: isSettings, - 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), - ), - toolTip: L10n.of(context).settings, - ), - ], - ), - ); - }, + ); + }, + ), + ), ); } }