feat: tela de apps com logos/menu de exclusao, correcao de tema nas mini apps e sidebar de navegacao

2026-09-19 00:08:35 -03:00
parent 1f692b1e4e
commit 6c689d1f34
23 changed files with 1039 additions and 114 deletions
--- a/lib/pages/chat_list/chat_list.dart
+++ b/lib/pages/chat_list/chat_list.dart
@@ -7,6 +7,15 @@ import 'dart:async';

 import 'package:collection/collection.dart';
 import 'package:cross_file/cross_file.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_callkit_incoming/entities/entities.dart';
+import 'package:flutter_callkit_incoming/flutter_callkit_incoming.dart';
+import 'package:flutter_shortcuts_new/flutter_shortcuts_new.dart';
+import 'package:go_router/go_router.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart' as sdk;
+import 'package:matrix/matrix.dart';
+import 'package:receive_sharing_intent/receive_sharing_intent.dart';
 import 'package:tatchat/config/app_config.dart';
 import 'package:tatchat/l10n/l10n.dart';
 import 'package:tatchat/pages/chat_list/chat_list_view.dart';
@@ -24,15 +33,6 @@ import 'package:tatchat/widgets/adaptive_dialogs/show_text_input_dialog.dart';
 import 'package:tatchat/widgets/avatar.dart';
 import 'package:tatchat/widgets/future_loading_dialog.dart';
 import 'package:tatchat/widgets/share_scaffold_dialog.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_callkit_incoming/entities/entities.dart';
-import 'package:flutter_callkit_incoming/flutter_callkit_incoming.dart';
-import 'package:flutter_shortcuts_new/flutter_shortcuts_new.dart';
-import 'package:go_router/go_router.dart';
-import 'package:material_ui/material_ui.dart';
-import 'package:matrix/matrix.dart' as sdk;
-import 'package:matrix/matrix.dart';
-import 'package:receive_sharing_intent/receive_sharing_intent.dart';

 import '../../../utils/account_bundles.dart';
 import '../../config/setting_keys.dart';
@@ -63,11 +63,16 @@ class ChatList extends StatefulWidget {
  final String? activeSpace;
  final bool displayNavigationRail;

+  /// Whether the navigation sidebar drawer is available (e.g. hidden inside
+  /// the settings column).
+  final bool sideMenuEnabled;
+
  const ChatList({
    super.key,
    required this.activeChat,
    this.activeSpace,
    this.displayNavigationRail = false,
+    this.sideMenuEnabled = true,
  });

  @override
@@ -76,6 +81,10 @@ class ChatList extends StatefulWidget {

 class ChatListController extends State<ChatList>
    with TickerProviderStateMixin, RouteAware {
+  /// Scaffold state of the chat list, used to open the navigation sidebar
+  /// (drawer) from the hamburger menus.
+  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
+
  StreamSubscription? _intentDataStreamSubscription;

  StreamSubscription? _intentFileStreamSubscription;
@@ -1109,7 +1118,8 @@ class ChatListController extends State<ChatList>
  }

  @override
-  Widget build(BuildContext context) => ChatListView(this);
+  Widget build(BuildContext context) =>
+      ChatListView(this, sideMenuEnabled: widget.sideMenuEnabled);

  Future<void> dehydrate() => Matrix.of(context).dehydrateAction(context);
 }
--- a/lib/pages/chat_list/chat_list_view.dart
+++ b/lib/pages/chat_list/chat_list_view.dart
@@ -15,11 +15,16 @@ import 'package:tatchat/pages/chat_list/tabs/murals_tab.dart';
 import 'package:tatchat/pages/chat_list/tabs/spaces_tab.dart';

 import 'chat_list_body.dart';
+import 'sidebar.dart';

 class ChatListView extends StatelessWidget {
  final ChatListController controller;

-  const ChatListView(this.controller, {super.key});
+  /// Whether the navigation sidebar (drawer) is available, e.g. hidden inside
+  /// the settings column.
+  final bool sideMenuEnabled;
+
+  const ChatListView(this.controller, {super.key, this.sideMenuEnabled = true});

  @override
  Widget build(BuildContext context) {
@@ -45,9 +50,24 @@ class ChatListView extends StatelessWidget {
              ChatTopTabBar(
                currentTab: homeTab,
                onTabSelected: controller.setHomeTab,
+                onMenuPressed: sideMenuEnabled
+                    ? () => controller.scaffoldKey.currentState?.openDrawer()
+                    : null,
              ),
            Expanded(
              child: Scaffold(
+                key: controller.scaffoldKey,
+                drawer: sideMenuEnabled
+                    ? Drawer(
+                        width: FluffyThemes.sidebarWidth,
+                        child: Sidebar(controller),
+                      )
+                    : null,
+                // Avoid accidentally opening the drawer when swiping at the
+                // edge of the chat column.
+                drawerEdgeDragWidth: isColumnMode || !sideMenuEnabled
+                    ? 0
+                    : null,
                body: SafeArea(
                  top: false,
                  bottom: false,
--- a/lib/pages/chat_list/client_chooser_button.dart
+++ b/lib/pages/chat_list/client_chooser_button.dart
@@ -4,15 +4,16 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later

 import 'package:async/async.dart';
-import 'package:tatchat/l10n/l10n.dart';
-import 'package:tatchat/widgets/avatar.dart';
-import 'package:tatchat/widgets/matrix.dart';
 import 'package:go_router/go_router.dart';
 import 'package:material_ui/material_ui.dart';
 import 'package:matrix/matrix.dart' hide Result;
+import 'package:tatchat/config/themes.dart';
+import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/utils/tatu_share.dart';
+import 'package:tatchat/widgets/avatar.dart';
+import 'package:tatchat/widgets/matrix.dart';
 import 'package:url_launcher/url_launcher_string.dart';

-import 'package:tatchat/utils/tatu_share.dart';
 import 'chat_list.dart';

 class ClientChooserButton extends StatelessWidget {
@@ -30,6 +31,23 @@ class ClientChooserButton extends StatelessWidget {
            ? -1
            : 1,
      );
+    if (FluffyThemes.isColumnMode(context)) {
+      // In column mode the settings/actions live in the navigation sidebar,
+      // so the avatar popup only offers the account switcher.
+      return <PopupMenuEntry<Object>>[
+        ..._bundleEntries(context, matrix, bundles),
+        PopupMenuItem(
+          value: SettingsAction.addAccount,
+          child: Row(
+            children: [
+              const Icon(Icons.person_add_outlined),
+              const SizedBox(width: 18),
+              Text(L10n.of(context).addAccount),
+            ],
+          ),
+        ),
+      ];
+    }
    return <PopupMenuEntry<Object>>[
      PopupMenuItem(
        value: SettingsAction.newGroup,
@@ -102,6 +120,26 @@ class ClientChooserButton extends StatelessWidget {
        ),
      ),
      const PopupMenuDivider(),
+      ..._bundleEntries(context, matrix, bundles),
+      PopupMenuItem(
+        value: SettingsAction.addAccount,
+        child: Row(
+          children: [
+            const Icon(Icons.person_add_outlined),
+            const SizedBox(width: 18),
+            Text(L10n.of(context).addAccount),
+          ],
+        ),
+      ),
+    ];
+  }
+
+  List<PopupMenuEntry<Object>> _bundleEntries(
+    BuildContext context,
+    MatrixState matrix,
+    List<String?> bundles,
+  ) {
+    return <PopupMenuEntry<Object>>[
      for (final bundle in bundles) ...[
        if (matrix.accountBundles[bundle]!.length != 1 ||
            matrix.accountBundles[bundle]!.single!.userID != bundle)
@@ -163,16 +201,6 @@ class ClientChooserButton extends StatelessWidget {
              ),
            ),
      ],
-      PopupMenuItem(
-        value: SettingsAction.addAccount,
-        child: Row(
-          children: [
-            const Icon(Icons.person_add_outlined),
-            const SizedBox(width: 18),
-            Text(L10n.of(context).addAccount),
-          ],
-        ),
-      ),
    ];
  }

--- a/lib/pages/chat_list/sidebar.dart
+++ b/lib/pages/chat_list/sidebar.dart
@@ -0,0 +1,312 @@
+// SPDX-FileCopyrightText: 2019-Present Christian Kußowski
+// SPDX-FileCopyrightText: 2019-Present Contributors to FluffyChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import 'package:go_router/go_router.dart';
+import 'package:material_ui/material_ui.dart';
+import 'package:matrix/matrix.dart' hide Result;
+import 'package:tatchat/config/themes.dart';
+import 'package:tatchat/l10n/l10n.dart';
+import 'package:tatchat/utils/tatu_share.dart';
+import 'package:tatchat/widgets/avatar.dart';
+import 'package:tatchat/widgets/matrix.dart';
+import 'package:url_launcher/url_launcher_string.dart';
+
+import 'chat_list.dart';
+
+/// Left navigation sidebar shown in column mode. It hosts the actions that
+/// used to live in the avatar popup menu plus the account switcher.
+class Sidebar extends StatelessWidget {
+  final ChatListController controller;
+
+  const Sidebar(this.controller, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Material(
+      color: theme.colorScheme.surface,
+      child: SafeArea(
+        bottom: false,
+        child: SizedBox(
+          width: FluffyThemes.sidebarWidth,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 16,
+                  vertical: 14,
+                ),
+                child: Row(
+                  children: [
+                    Icon(
+                      Icons.chat_bubble_outline,
+                      size: 22,
+                      color: theme.colorScheme.primary,
+                    ),
+                    const SizedBox(width: 10),
+                    Text(
+                      'TatuChat',
+                      style: theme.textTheme.titleMedium?.copyWith(
+                        fontWeight: FontWeight.bold,
+                        color: theme.colorScheme.onSurface,
+                      ),
+                    ),
+                    const Spacer(),
+                    IconButton(
+                      tooltip: L10n.of(context).close,
+                      icon: const Icon(Icons.close),
+                      onPressed: () => Navigator.of(context).pop(),
+                    ),
+                  ],
+                ),
+              ),
+              Divider(color: theme.colorScheme.outlineVariant, height: 1),
+              Expanded(child: _AccountSection(controller)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _AccountSection extends StatelessWidget {
+  final ChatListController controller;
+
+  const _AccountSection(this.controller);
+
+  @override
+  Widget build(BuildContext context) {
+    final matrix = Matrix.of(context);
+    final bundles = matrix.accountBundles;
+    return ListView(
+      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
+      children: [
+        _ActionTile(
+          icon: Icons.group_add_outlined,
+          label: L10n.of(context).createGroup,
+          onTap: () => context.go('/rooms/newgroup'),
+        ),
+        _ActionTile(
+          icon: Icons.edit_outlined,
+          label: L10n.of(context).setStatus,
+          onTap: controller.setStatus,
+        ),
+        _ActionTile(
+          icon: Icons.adaptive.share_outlined,
+          label: L10n.of(context).inviteContact,
+          onTap: () => TatuShare.shareInviteLink(context),
+        ),
+        _ActionTile(
+          icon: Icons.archive_outlined,
+          label: L10n.of(context).archive,
+          onTap: () => context.go('/rooms/archive'),
+        ),
+        _ActionTile(
+          icon: Icons.apps_outlined,
+          label: L10n.of(context).apps,
+          onTap: () => context.go('/rooms/apps'),
+        ),
+        _ActionTile(
+          icon: Icons.settings_outlined,
+          label: L10n.of(context).settings,
+          onTap: () => context.go('/rooms/settings'),
+        ),
+        _ActionTile(
+          icon: Icons.favorite,
+          iconColor: Colors.red,
+          label: L10n.of(context).supportFluffyChat,
+          onTap: () => launchUrlString(
+            'https://ko-fi.com/post/How-can-I-support-FluffyChat-J2G325WE6I',
+          ),
+        ),
+        const Divider(),
+        for (final bundle in bundles.keys) ...[
+          if (bundles[bundle]!.length != 1 ||
+              bundles[bundle]!.single!.userID != bundle)
+            Padding(
+              padding: const EdgeInsets.fromLTRB(12, 12, 12, 4),
+              child: Text(
+                bundle!,
+                style: TextStyle(
+                  color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  fontSize: 12,
+                  fontWeight: FontWeight.w500,
+                ),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ...bundles[bundle]!
+              .whereType<Client>()
+              .where((client) => client.isLogged())
+              .map(
+                (client) => _AccountTile(
+                  client: client,
+                  controller: controller,
+                  bundle: bundle,
+                ),
+              ),
+        ],
+        _AddAccountTile(onTap: () => context.go('/rooms/settings/addaccount')),
+      ],
+    );
+  }
+}
+
+class _ActionTile extends StatelessWidget {
+  final IconData icon;
+  final Color? iconColor;
+  final String label;
+  final VoidCallback onTap;
+
+  const _ActionTile({
+    required this.icon,
+    this.iconColor,
+    required this.label,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(12),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+        child: Row(
+          children: [
+            Icon(
+              icon,
+              size: 22,
+              color: iconColor ?? theme.colorScheme.onSurfaceVariant,
+            ),
+            const SizedBox(width: 14),
+            Text(
+              label,
+              style: theme.textTheme.bodyLarge?.copyWith(
+                color: theme.colorScheme.onSurface,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _AccountTile extends StatelessWidget {
+  final Client client;
+  final ChatListController controller;
+  final String? bundle;
+
+  const _AccountTile({
+    required this.client,
+    required this.controller,
+    required this.bundle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final matrix = Matrix.of(context);
+    final isActive = client == matrix.client;
+    return FutureBuilder<Profile?>(
+      future: client.fetchOwnProfile(),
+      builder: (context, snapshot) {
+        final displayname =
+            snapshot.data?.displayName ?? client.userID?.localpart ?? '';
+        return InkWell(
+          onTap: () => controller.setActiveClient(client),
+          borderRadius: BorderRadius.circular(12),
+          child: Container(
+            margin: const EdgeInsets.symmetric(vertical: 2),
+            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+            decoration: BoxDecoration(
+              color: isActive
+                  ? theme.colorScheme.primary.withValues(alpha: 0.08)
+                  : null,
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: Row(
+              children: [
+                Avatar(
+                  mxContent: snapshot.data?.avatarUrl,
+                  name: displayname,
+                  size: 30,
+                ),
+                const SizedBox(width: 10),
+                Expanded(
+                  child: Text(
+                    displayname,
+                    overflow: TextOverflow.ellipsis,
+                    style: theme.textTheme.bodyMedium?.copyWith(
+                      color: theme.colorScheme.onSurface,
+                      fontWeight: isActive ? FontWeight.w600 : null,
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 6),
+                SizedBox(
+                  width: 32,
+                  height: 32,
+                  child: isActive
+                      ? Icon(
+                          Icons.check_circle,
+                          size: 20,
+                          color: theme.colorScheme.primary,
+                        )
+                      : IconButton(
+                          icon: const Icon(Icons.edit_outlined, size: 18),
+                          tooltip: L10n.of(context).editBundlesForAccount,
+                          onPressed: () => controller.editBundlesForAccount(
+                            client.userID,
+                            bundle,
+                          ),
+                        ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _AddAccountTile extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _AddAccountTile({required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(12),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+        child: Row(
+          children: [
+            Icon(
+              Icons.person_add_outlined,
+              size: 22,
+              color: theme.colorScheme.onSurfaceVariant,
+            ),
+            const SizedBox(width: 14),
+            Text(
+              L10n.of(context).addAccount,
+              style: theme.textTheme.bodyLarge?.copyWith(
+                color: theme.colorScheme.onSurface,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/lib/pages/chat_list/tabs/chat_tab_bar.dart
+++ b/lib/pages/chat_list/tabs/chat_tab_bar.dart
@@ -5,16 +5,19 @@

 import 'package:material_ui/material_ui.dart';
 import 'package:tatchat/config/themes.dart';
+import 'package:tatchat/l10n/l10n.dart';
 import 'package:tatchat/pages/chat_list/tabs/home_tab.dart';

 class ChatTopTabBar extends StatelessWidget {
  final HomeTab currentTab;
  final ValueChanged<HomeTab> onTabSelected;
+  final VoidCallback? onMenuPressed;

  const ChatTopTabBar({
    super.key,
    required this.currentTab,
    required this.onTabSelected,
+    this.onMenuPressed,
  });

  @override
@@ -29,6 +32,12 @@ class ChatTopTabBar extends StatelessWidget {
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
+            if (onMenuPressed != null)
+              IconButton(
+                tooltip: L10n.of(context).menu,
+                icon: const Icon(Icons.menu),
+                onPressed: onMenuPressed,
+              ),
            for (final tab in HomeTab.values)
              Expanded(
                child: InkWell(
@@ -43,9 +52,7 @@ class ChatTopTabBar extends StatelessWidget {
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(
-                              tab == currentTab
-                                  ? tab.selectedIcon
-                                  : tab.icon,
+                              tab == currentTab ? tab.selectedIcon : tab.icon,
                              size: 20,
                              color: tab == currentTab
                                  ? theme.colorScheme.primary
@@ -112,4 +119,4 @@ class ChatBottomTabBar extends StatelessWidget {
      ],
    );
  }
-}
+}
--- a/lib/pages/chat_list/tabs/chat_tab_header.dart
+++ b/lib/pages/chat_list/tabs/chat_tab_header.dart
@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later

 import 'package:material_ui/material_ui.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/client_chooser_button.dart';
@@ -72,6 +73,12 @@ class ChatTabHeader extends StatelessWidget {
                height: 56,
                child: Row(
                  children: [
+                    if (!FluffyThemes.isColumnMode(context))
+                      IconButton(
+                        tooltip: l10n.menu,
+                        icon: const Icon(Icons.menu),
+                        onPressed: () => Scaffold.of(context).openDrawer(),
+                      ),
                    const SizedBox(width: 12),
                    Icon(tab.icon, size: 22, color: theme.colorScheme.primary),
                    const SizedBox(width: 8),
@@ -136,4 +143,4 @@ class ChatTabScaffold extends StatelessWidget {
      ],
    );
  }
-}
+}