alterações em telas

lib/pages/chat_list/tabs/channels_tab.dart

@@ -5,75 +5,104 @@
 
 import 'package:material_ui/material_ui.dart';
 import 'package:matrix/matrix.dart';
+import 'package:tatchat/config/app_config.dart';
 import 'package:tatchat/l10n/l10n.dart';
 import 'package:tatchat/pages/chat_list/chat_list.dart';
 import 'package:tatchat/pages/chat_list/chat_list_item.dart';
+import 'package:tatchat/pages/chat_list/tabs/chat_tab_header.dart';
 import 'package:tatchat/pages/chat_list/tabs/empty_tab_view.dart';
+import 'package:tatchat/pages/chat_list/tabs/home_tab.dart';
+import 'package:tatchat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:tatchat/utils/stream_extension.dart';
 import 'package:tatchat/widgets/matrix.dart';
 
-class ChannelsTab extends StatelessWidget {
+class ChannelsTab extends StatefulWidget {
   final ChatListController controller;
 
   const ChannelsTab(this.controller, {super.key});
 
+  @override
+  State<ChannelsTab> createState() => _ChannelsTabState();
+}
+
+class _ChannelsTabState extends State<ChannelsTab> {
+  final TextEditingController _searchController = TextEditingController();
+  final FocusNode _searchFocusNode = FocusNode();
+  bool _isSearchMode = false;
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _searchFocusNode.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final client = Matrix.of(context).client;
     final theme = Theme.of(context);
-    return StreamBuilder(
-      key: ValueKey(client.userID.toString()),
-      stream: client.onSync.stream
-          .where((s) => s.hasRoomUpdate)
-          .rateLimit(const Duration(seconds: 1)),
-      builder: (context, _) {
-        final channels = client.rooms
-            .where((room) => !room.isSpace && !room.isDirectChat)
-            .toList();
-        return CustomScrollView(
-          slivers: [
-            SliverToBoxAdapter(
-              child: Padding(
-                padding: const EdgeInsets.all(16.0),
-                child: Row(
-                  children: [
-                    Icon(
-                      Icons.tag_outlined,
-                      color: theme.colorScheme.primary,
-                    ),
-                    const SizedBox(width: 8),
-                    Text(
-                      L10n.of(context).channels,
-                      style: theme.textTheme.titleLarge,
-                    ),
-                  ],
-                ),
-              ),
-            ),
-            if (channels.isEmpty)
-              SliverFillRemaining(
-                hasScrollBody: false,
-                child: EmptyTabView(
-                  icon: Icons.tag_outlined,
-                  title: L10n.of(context).noChannelsFound,
-                ),
-              )
-            else
-              SliverList.builder(
-                itemCount: channels.length,
-                itemBuilder: (context, i) {
-                  final room = channels[i];
-                  return ChatListItem(
-                    room,
-                    key: Key('channel_list_item_${room.id}'),
-                    onTap: () => controller.onChatTap(room),
-                    activeChat: controller.activeChat == room.id,
-                  );
-                },
-              ),
-          ],
-        );
+    final searchText = _searchController.text.trim().toLowerCase();
+    return ChatTabScaffold(
+      tab: HomeTab.channels,
+      isSearchMode: _isSearchMode,
+      onSearchPressed: () => setState(() => _isSearchMode = true),
+      onSearchCancelled: () {
+        setState(() {
+          _isSearchMode = false;
+          _searchController.clear();
+        });
       },
+      searchController: _searchController,
+      searchFocusNode: _searchFocusNode,
+      onSearchChanged: (_) => setState(() {}),
+      controller: widget.controller,
+      child: StreamBuilder(
+        key: ValueKey(client.userID.toString()),
+        stream: client.onSync.stream
+            .where((s) => s.hasRoomUpdate)
+            .rateLimit(const Duration(seconds: 1)),
+        builder: (context, _) {
+          final channels = client.rooms
+              .where((room) => room.tags.keys.contains(AppConfig.canalTag))
+              .where(
+                (room) =>
+                    searchText.isEmpty ||
+                    room
+                        .getLocalizedDisplayname(MatrixLocals(L10n.of(context)))
+                        .toLowerCase()
+                        .contains(searchText),
+              )
+              .toList();
+          return ColoredBox(
+            color: theme.colorScheme.surface,
+            child: CustomScrollView(
+              slivers: [
+                if (channels.isEmpty)
+                  SliverFillRemaining(
+                    hasScrollBody: false,
+                    child: EmptyTabView(
+                      icon: Icons.tag_outlined,
+                      title: L10n.of(context).noChannelsFound,
+                    ),
+                  )
+                else
+                  SliverList.builder(
+                    itemCount: channels.length,
+                    itemBuilder: (context, i) {
+                      final room = channels[i];
+                      return ChatListItem(
+                        room,
+                        key: Key('channel_list_item_${room.id}'),
+                        onTap: () => widget.controller.onChatTap(room),
+                        activeChat: widget.controller.activeChat == room.id,
+                      );
+                    },
+                  ),
+              ],
+            ),
+          );
+        },
+      ),
     );
   }
 }

lib/pages/chat_list/tabs/chat_tab_header.dart

@@ -0,0 +1,139 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:material_ui/material_ui.dart';
+import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/pages/chat_list/chat_list.dart';
+import 'package:tatchat/pages/chat_list/client_chooser_button.dart';
+import 'package:tatchat/pages/chat_list/tabs/home_tab.dart';
+
+class ChatTabHeader extends StatelessWidget {
+  final HomeTab tab;
+  final bool isSearchMode;
+  final VoidCallback onSearchPressed;
+  final VoidCallback onSearchCancelled;
+  final TextEditingController searchController;
+  final FocusNode searchFocusNode;
+  final ValueChanged<String> onSearchChanged;
+  final ChatListController controller;
+
+  const ChatTabHeader({
+    super.key,
+    required this.tab,
+    required this.isSearchMode,
+    required this.onSearchPressed,
+    required this.onSearchCancelled,
+    required this.searchController,
+    required this.searchFocusNode,
+    required this.onSearchChanged,
+    required this.controller,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final l10n = L10n.of(context);
+    return Material(
+      color: theme.colorScheme.surface,
+      child: Container(
+        decoration: BoxDecoration(
+          border: Border(bottom: BorderSide(color: theme.dividerColor)),
+        ),
+        child: isSearchMode
+            ? Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+                child: TextField(
+                  controller: searchController,
+                  focusNode: searchFocusNode,
+                  autofocus: true,
+                  textInputAction: TextInputAction.search,
+                  onChanged: onSearchChanged,
+                  decoration: InputDecoration(
+                    hintText: l10n.search,
+                    filled: true,
+                    fillColor: theme.colorScheme.secondaryContainer,
+                    border: OutlineInputBorder(
+                      borderSide: BorderSide.none,
+                      borderRadius: BorderRadius.circular(99),
+                    ),
+                    contentPadding: EdgeInsets.zero,
+                    prefixIcon: IconButton(
+                      tooltip: l10n.cancel,
+                      icon: const Icon(Icons.close_outlined),
+                      onPressed: onSearchCancelled,
+                      color: theme.colorScheme.onPrimaryContainer,
+                    ),
+                  ),
+                ),
+              )
+            : SizedBox(
+                height: 56,
+                child: Row(
+                  children: [
+                    const SizedBox(width: 12),
+                    Icon(tab.icon, size: 22, color: theme.colorScheme.primary),
+                    const SizedBox(width: 8),
+                    Text(tab.label(context), style: theme.textTheme.titleLarge),
+                    const Spacer(),
+                    IconButton(
+                      tooltip: l10n.search,
+                      icon: const Icon(Icons.search),
+                      onPressed: onSearchPressed,
+                    ),
+                    const SizedBox(width: 4),
+                    ClientChooserButton(controller),
+                    const SizedBox(width: 8),
+                  ],
+                ),
+              ),
+      ),
+    );
+  }
+}
+
+class ChatTabScaffold extends StatelessWidget {
+  final HomeTab tab;
+  final bool isSearchMode;
+  final VoidCallback onSearchPressed;
+  final VoidCallback onSearchCancelled;
+  final TextEditingController searchController;
+  final FocusNode searchFocusNode;
+  final ValueChanged<String> onSearchChanged;
+  final ChatListController controller;
+  final Widget child;
+
+  const ChatTabScaffold({
+    super.key,
+    required this.tab,
+    required this.isSearchMode,
+    required this.onSearchPressed,
+    required this.onSearchCancelled,
+    required this.searchController,
+    required this.searchFocusNode,
+    required this.onSearchChanged,
+    required this.controller,
+    required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        ChatTabHeader(
+          tab: tab,
+          isSearchMode: isSearchMode,
+          onSearchPressed: onSearchPressed,
+          onSearchCancelled: onSearchCancelled,
+          searchController: searchController,
+          searchFocusNode: searchFocusNode,
+          onSearchChanged: onSearchChanged,
+          controller: controller,
+        ),
+        Expanded(child: child),
+      ],
+    );
+  }
+}

lib/pages/chat_list/tabs/murals_tab.dart

@@ -4,43 +4,105 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart';
+import 'package:tatchat/config/app_config.dart';
 import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/pages/chat_list/chat_list.dart';
+import 'package:tatchat/pages/chat_list/chat_list_item.dart';
+import 'package:tatchat/pages/chat_list/tabs/chat_tab_header.dart';
 import 'package:tatchat/pages/chat_list/tabs/empty_tab_view.dart';
+import 'package:tatchat/pages/chat_list/tabs/home_tab.dart';
+import 'package:tatchat/utils/matrix_sdk_extensions/matrix_locals.dart';
+import 'package:tatchat/utils/stream_extension.dart';
+import 'package:tatchat/widgets/matrix.dart';
 
-class MuralsTab extends StatelessWidget {
-  const MuralsTab({super.key});
+class MuralsTab extends StatefulWidget {
+  final ChatListController controller;
+
+  const MuralsTab(this.controller, {super.key});
+
+  @override
+  State<MuralsTab> createState() => _MuralsTabState();
+}
+
+class _MuralsTabState extends State<MuralsTab> {
+  final TextEditingController _searchController = TextEditingController();
+  final FocusNode _searchFocusNode = FocusNode();
+  bool _isSearchMode = false;
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _searchFocusNode.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    final l10n = L10n.of(context);
-    return ColoredBox(
-      color: Theme.of(context).colorScheme.surface,
-      child: CustomScrollView(
-        slivers: [
-          SliverToBoxAdapter(
-            child: Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: Row(
-                children: [
-                  Icon(
-                    Icons.dashboard_outlined,
-                    color: Theme.of(context).colorScheme.primary,
+    final client = Matrix.of(context).client;
+    final theme = Theme.of(context);
+    final searchText = _searchController.text.trim().toLowerCase();
+    return ChatTabScaffold(
+      tab: HomeTab.murals,
+      isSearchMode: _isSearchMode,
+      onSearchPressed: () => setState(() => _isSearchMode = true),
+      onSearchCancelled: () {
+        setState(() {
+          _isSearchMode = false;
+          _searchController.clear();
+        });
+      },
+      searchController: _searchController,
+      searchFocusNode: _searchFocusNode,
+      onSearchChanged: (_) => setState(() {}),
+      controller: widget.controller,
+      child: StreamBuilder(
+        key: ValueKey(client.userID.toString()),
+        stream: client.onSync.stream
+            .where((s) => s.hasRoomUpdate)
+            .rateLimit(const Duration(seconds: 1)),
+        builder: (context, _) {
+          final murals = client.rooms
+              .where((room) => room.tags.keys.contains(AppConfig.muralTag))
+              .where(
+                (room) =>
+                    searchText.isEmpty ||
+                    room
+                        .getLocalizedDisplayname(MatrixLocals(L10n.of(context)))
+                        .toLowerCase()
+                        .contains(searchText),
+              )
+              .toList();
+          return ColoredBox(
+            color: theme.colorScheme.surface,
+            child: CustomScrollView(
+              slivers: [
+                if (murals.isEmpty)
+                  SliverFillRemaining(
+                    hasScrollBody: false,
+                    child: EmptyTabView(
+                      icon: Icons.dashboard_outlined,
+                      title: L10n.of(context).noMuralsFound,
+                    ),
+                  )
+                else
+                  SliverList.builder(
+                    itemCount: murals.length,
+                    itemBuilder: (context, i) {
+                      final room = murals[i];
+                      return ChatListItem(
+                        room,
+                        key: Key('mural_list_item_${room.id}'),
+                        onTap: () => widget.controller.onChatTap(room),
+                        activeChat: widget.controller.activeChat == room.id,
+                      );
+                    },
                   ),
-                  const SizedBox(width: 8),
-                  Text(l10n.murals, style: Theme.of(context).textTheme.titleLarge),
-                ],
-              ),
+              ],
             ),
-          ),
-          SliverFillRemaining(
-            hasScrollBody: false,
-            child: EmptyTabView(
-              icon: Icons.dashboard_outlined,
-              title: l10n.muralsComingSoon,
-            ),
-          ),
-        ],
+          );
+        },
       ),
     );
   }
-}
+}

lib/pages/chat_list/tabs/spaces_tab.dart

@@ -6,84 +6,181 @@
 import 'package:go_router/go_router.dart';
 import 'package:material_ui/material_ui.dart';
 import 'package:matrix/matrix.dart';
+import 'package:tatchat/config/app_config.dart';
+import 'package:tatchat/config/themes.dart';
 import 'package:tatchat/l10n/l10n.dart';
 import 'package:tatchat/pages/chat_list/chat_list.dart';
-import 'package:tatchat/pages/chat_list/chat_list_item.dart';
-import 'package:tatchat/pages/chat_list/tabs/empty_tab_view.dart';
+import 'package:tatchat/pages/chat_list/navi_rail_item.dart';
+import 'package:tatchat/pages/chat_list/space_view.dart';
+import 'package:tatchat/pages/chat_list/tabs/chat_tab_header.dart';
 import 'package:tatchat/pages/chat_list/tabs/home_tab.dart';
+import 'package:tatchat/utils/matrix_sdk_extensions/matrix_locals.dart';
 import 'package:tatchat/utils/stream_extension.dart';
+import 'package:tatchat/widgets/avatar.dart';
 import 'package:tatchat/widgets/matrix.dart';
 
-class SpacesTab extends StatelessWidget {
+class SpacesTab extends StatefulWidget {
   final ChatListController controller;
 
   const SpacesTab(this.controller, {super.key});
 
+  @override
+  State<SpacesTab> createState() => _SpacesTabState();
+}
+
+class _SpacesTabState extends State<SpacesTab> {
+  final TextEditingController _searchController = TextEditingController();
+  final FocusNode _searchFocusNode = FocusNode();
+  bool _isSearchMode = false;
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _searchFocusNode.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     final client = Matrix.of(context).client;
     final theme = Theme.of(context);
-    return StreamBuilder(
-      key: ValueKey(client.userID.toString()),
-      stream: client.onSync.stream
-          .where((s) => s.hasRoomUpdate)
-          .rateLimit(const Duration(seconds: 1)),
-      builder: (context, _) {
-        final spaces = client.rooms.where((room) => room.isSpace).toList();
-        return CustomScrollView(
-          slivers: [
-            SliverToBoxAdapter(
-              child: Padding(
-                padding: const EdgeInsets.all(16.0),
-                child: Row(
-                  children: [
-                    Icon(
-                      Icons.workspaces_outlined,
-                      color: theme.colorScheme.primary,
-                    ),
-                    const SizedBox(width: 8),
-                    Text(
-                      L10n.of(context).spaces,
-                      style: theme.textTheme.titleLarge,
-                    ),
-                  ],
-                ),
-              ),
-            ),
-            if (spaces.isEmpty)
-              SliverFillRemaining(
-                hasScrollBody: false,
-                child: EmptyTabView(
-                  icon: Icons.workspaces_outlined,
-                  title: L10n.of(context).noSpacesFound,
-                ),
-              )
-            else
-              SliverList.builder(
-                itemCount: spaces.length + 1,
-                itemBuilder: (context, i) {
-                  if (i == spaces.length) {
-                    return ListTile(
-                      leading: const Icon(Icons.add),
-                      title: Text(L10n.of(context).createNewSpace),
-                      onTap: () => context.go('/rooms/newspace'),
-                    );
-                  }
-                  final space = spaces[i];
-                  return ChatListItem(
-                    space,
-                    key: Key('spaces_tab_item_${space.id}'),
-                    activeChat: controller.activeSpaceId == space.id,
-                    onTap: () {
-                      controller.setActiveSpace(space.id);
-                      controller.setHomeTab(HomeTab.chats);
-                    },
-                  );
-                },
-              ),
-          ],
-        );
+    final searchText = _searchController.text.trim().toLowerCase();
+    return ChatTabScaffold(
+      tab: HomeTab.spaces,
+      isSearchMode: _isSearchMode,
+      onSearchPressed: () => setState(() => _isSearchMode = true),
+      onSearchCancelled: () {
+        setState(() {
+          _isSearchMode = false;
+          _searchController.clear();
+        });
       },
+      searchController: _searchController,
+      searchFocusNode: _searchFocusNode,
+      onSearchChanged: (_) => setState(() {}),
+      controller: widget.controller,
+      child: StreamBuilder(
+        key: ValueKey(client.userID.toString()),
+        stream: client.onSync.stream
+            .where((s) => s.hasRoomUpdate)
+            .rateLimit(const Duration(seconds: 1)),
+        builder: (context, _) {
+          final spaces = client.rooms
+              .where((room) => room.isSpace)
+              .where(
+                (room) =>
+                    searchText.isEmpty ||
+                    room
+                        .getLocalizedDisplayname(MatrixLocals(L10n.of(context)))
+                        .toLowerCase()
+                        .contains(searchText),
+              )
+              .toList();
+          final activeSpaceId = widget.controller.activeSpaceId;
+          return Row(
+            children: [
+              SizedBox(
+                width: FluffyThemes.navRailWidth,
+                child: ColoredBox(
+                  color: theme.colorScheme.surfaceContainerHigh,
+                  child: Column(
+                    children: [
+                      const SizedBox(height: 8),
+                      if (spaces.isEmpty)
+                        const Expanded(child: SizedBox.shrink())
+                      else
+                        Expanded(
+                          child: ListView(
+                            padding: const EdgeInsets.symmetric(vertical: 4),
+                            children: [
+                              for (final space in spaces)
+                                NaviRailItem(
+                                  isSelected: activeSpaceId == space.id,
+                                  onTap: () => widget.controller.setActiveSpace(
+                                    space.id,
+                                  ),
+                                  toolTip: space.getLocalizedDisplayname(
+                                    MatrixLocals(L10n.of(context)),
+                                  ),
+                                  unreadBadgeFilter: (room) => space
+                                      .spaceChildren
+                                      .map((c) => c.roomId)
+                                      .contains(room.id),
+                                  icon: Avatar(
+                                    mxContent: space.avatar,
+                                    name: space.getLocalizedDisplayname(
+                                      MatrixLocals(L10n.of(context)),
+                                    ),
+                                    shapeBorder: RoundedSuperellipseBorder(
+                                      side: BorderSide(
+                                        width: 1,
+                                        color: theme.dividerColor,
+                                      ),
+                                      borderRadius: BorderRadius.circular(
+                                        AppConfig.spaceBorderRadius,
+                                      ),
+                                    ),
+                                    borderRadius: BorderRadius.circular(
+                                      AppConfig.spaceBorderRadius,
+                                    ),
+                                  ),
+                                ),
+                            ],
+                          ),
+                        ),
+                      NaviRailItem(
+                        isSelected: false,
+                        onTap: () => context.go('/rooms/newspace'),
+                        icon: const Padding(
+                          padding: EdgeInsets.all(12.0),
+                          child: Icon(Icons.add),
+                        ),
+                        toolTip: L10n.of(context).createNewSpace,
+                      ),
+                      const SizedBox(height: 8),
+                    ],
+                  ),
+                ),
+              ),
+              if (FluffyThemes.isColumnMode(context))
+                Container(width: 1, color: theme.dividerColor),
+              Expanded(
+                child: activeSpaceId == null
+                    ? Center(
+                        child: Column(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Icon(
+                              Icons.workspaces_outlined,
+                              size: 80,
+                              color: theme.colorScheme.secondary,
+                            ),
+                            Padding(
+                              padding: const EdgeInsets.all(16.0),
+                              child: Text(
+                                L10n.of(context).selectASpace,
+                                textAlign: TextAlign.center,
+                                style: TextStyle(
+                                  fontSize: 18,
+                                  color: theme.colorScheme.secondary,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      )
+                    : SpaceView(
+                        key: ValueKey(activeSpaceId),
+                        spaceId: activeSpaceId,
+                        onBack: widget.controller.clearActiveSpace,
+                        onChatTab: widget.controller.onChatTap,
+                        activeChat: widget.controller.activeChat,
+                      ),
+              ),
+            ],
+          );
+        },
+      ),
     );
   }
-}
+}