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/apps/apps.dart
+++ b/lib/pages/apps/apps.dart
@@ -10,7 +10,9 @@ import 'package:flutter/foundation.dart';
 import 'package:http/http.dart' as http;
 import 'package:material_ui/material_ui.dart';
 import 'package:matrix/matrix.dart';
+import 'package:tatchat/config/miniapp_config.dart';
 import 'package:tatchat/config/setting_keys.dart';
+import 'package:tatchat/utils/miniapp_meta.dart';
 import 'package:tatchat/utils/miniapp_store.dart';
 import 'package:tatchat/widgets/matrix.dart';

@@ -46,12 +48,8 @@ class AppsController extends State<Apps> {
      allowedExtensions: ['html', 'htm'],
    );
    if (file == null) return;
-    final name = file.name.replaceAll(RegExp(r'\.(html?|htm)$'), '');
    final bytes = await file.readAsBytes();
-    await _importHtml(
-      name: name.isEmpty ? 'Imported app' : name,
-      html: _decodeBytes(bytes),
-    );
+    await _importHtml(html: _decodeBytes(bytes));
    if (!mounted) return;
    setState(() {});
  }
@@ -68,14 +66,7 @@ class AppsController extends State<Apps> {
    if (response.statusCode != 200) {
      throw Exception('${response.statusCode} ${response.reasonPhrase}');
    }
-    var name = Uri.parse(url).pathSegments.isNotEmpty
-        ? Uri.parse(url).pathSegments.last.replaceAll(
-            RegExp(r'\.(html?|htm)$'),
-            '',
-          )
-        : url;
-    if (name.isEmpty) name = 'Imported app';
-    await _importHtml(name: name, html: response.body);
+    await _importHtml(html: response.body);
    if (!mounted) return;
    setState(() {});
  }
@@ -115,16 +106,24 @@ class AppsController extends State<Apps> {
    return latin1.decode(bytes, allowInvalid: true);
  }

-  Future<void> _importHtml({
-    required String name,
-    required String html,
-  }) =>
-      client.importMiniApp(
-        appId: 'imported-${DateTime.now().millisecondsSinceEpoch}',
-        name: name,
-        html: html,
+  /// Reads the mini app manifest from the meta tags of [html], validates it
+  /// and installs the app. The manifest `id` is used as the account data key.
+  ///
+  /// Throws a [FormatException] when the document lacks the required meta
+  /// tags, or an [Exception] when the id is already taken.
+  Future<void> _importHtml({required String html}) async {
+    final meta = parseMiniAppMeta(html);
+    if (availableMiniApps.any((app) => app.id == meta.id)) {
+      throw Exception(
+        'The mini app id "${meta.id}" is reserved and cannot be reused',
      );
+    }
+    if (client.isMiniAppInstalled(meta.id)) {
+      throw Exception('A mini app with id "${meta.id}" is already installed');
+    }
+    await client.importMiniApp(meta: meta, html: html);
+  }

  @override
  Widget build(BuildContext context) => AppsView(this);
-}
+}
--- a/lib/pages/apps/apps_view.dart
+++ b/lib/pages/apps/apps_view.dart
@@ -3,6 +3,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later

+import 'dart:convert';
+
 import 'package:go_router/go_router.dart';
 import 'package:material_ui/material_ui.dart';
 import 'package:matrix/matrix.dart';
@@ -10,6 +12,7 @@ import 'package:tatchat/config/miniapp_config.dart';
 import 'package:tatchat/l10n/l10n.dart';
 import 'package:tatchat/pages/apps/apps.dart';
 import 'package:tatchat/utils/miniapp_store.dart';
+import 'package:tatchat/widgets/adaptive_dialogs/show_ok_cancel_alert_dialog.dart';
 import 'package:tatchat/widgets/adaptive_dialogs/show_text_input_dialog.dart';
 import 'package:tatchat/widgets/layouts/max_width_body.dart';

@@ -29,6 +32,8 @@ class AppsView extends StatelessWidget {
      appBar: AppBar(
        leading: const Center(child: BackButton()),
        title: Text(L10n.of(context).apps),
+        backgroundColor: Theme.of(context).colorScheme.surface,
+        surfaceTintColor: Colors.transparent,
        actions: [
          PopupMenuButton<_ImportAction>(
            icon: const Icon(Icons.add_box_outlined),
@@ -36,7 +41,19 @@ class AppsView extends StatelessWidget {
            onSelected: (action) async {
              switch (action) {
                case _ImportAction.file:
-                  await controller.importMiniAppFromFile();
+                  try {
+                    await controller.importMiniAppFromFile();
+                    if (!context.mounted) return;
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      SnackBar(content: Text(L10n.of(context).appImported)),
+                    );
+                  } catch (e, s) {
+                    Logs().e('Failed to import mini app', e, s);
+                    if (!context.mounted) return;
+                    ScaffoldMessenger.of(
+                      context,
+                    ).showSnackBar(SnackBar(content: Text(e.toString())));
+                  }
                case _ImportAction.url:
                  final url = await showTextInputDialog(
                    context: context,
@@ -53,9 +70,9 @@ class AppsView extends StatelessWidget {
                  } catch (e, s) {
                    Logs().e('Failed to import mini app', e, s);
                    if (!context.mounted) return;
-                    ScaffoldMessenger.of(context).showSnackBar(
-                      SnackBar(content: Text(e.toString())),
-                    );
+                    ScaffoldMessenger.of(
+                      context,
+                    ).showSnackBar(SnackBar(content: Text(e.toString())));
                  }
              }
            },
@@ -96,15 +113,8 @@ class AppsView extends StatelessWidget {
                  app: app,
                  onTap: () => context.go('/rooms/apps/${app.id}'),
                  trailing: [
-                    IconButton(
-                      icon: const Icon(Icons.open_in_new),
-                      tooltip: L10n.of(context).open,
-                      onPressed: () => context.go('/rooms/apps/${app.id}'),
-                    ),
-                    IconButton(
-                      icon: const Icon(Icons.delete_outline),
-                      tooltip: L10n.of(context).uninstall,
-                      onPressed: () => controller.uninstallMiniApp(app.id),
+                    _AppCardMenu(
+                      onUninstall: () => controller.uninstallMiniApp(app.id),
                    ),
                  ],
                ),
@@ -133,10 +143,7 @@ class AppsView extends StatelessWidget {
  }
 }

-enum _ImportAction {
-  file,
-  url,
-}
+enum _ImportAction { file, url }

 class _SectionHeader extends StatelessWidget {
  final String text;
@@ -161,18 +168,122 @@ class _AppCard extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    final category = app.category?.trim() ?? '';
+    final description = app.description?.trim() ?? '';
+    final subtitle = [
+      if (category.isNotEmpty) category,
+      if (description.isNotEmpty) description,
+    ].join(' · ');
+    final name = miniAppName(context, app);
    return Card(
      margin: const EdgeInsets.symmetric(vertical: 4),
      child: ListTile(
        onTap: onTap,
-        leading: CircleAvatar(
-          backgroundColor: app.color.withValues(alpha: .15),
-          foregroundColor: app.color,
-          child: Icon(app.icon),
-        ),
-        title: Text(miniAppName(context, app)),
+        leading: _Logo(logo: app.logo, color: app.color, name: name),
+        title: Text(name),
+        subtitle: subtitle.isEmpty
+            ? null
+            : Text(
+                subtitle,
+                maxLines: 3,
+                overflow: TextOverflow.ellipsis,
+              ),
        trailing: Row(mainAxisSize: MainAxisSize.min, children: trailing),
      ),
    );
  }
-}
+}
+
+enum _AppMenuAction { uninstall }
+
+/// Trailing three-dot menu of an installed app. Uninstalling asks for
+/// confirmation before it is executed.
+class _AppCardMenu extends StatelessWidget {
+  final VoidCallback onUninstall;
+
+  const _AppCardMenu({required this.onUninstall});
+
+  @override
+  Widget build(BuildContext context) {
+    return PopupMenuButton<_AppMenuAction>(
+      icon: const Icon(Icons.more_vert),
+      tooltip: L10n.of(context).moreOptions,
+      onSelected: (action) async {
+        switch (action) {
+          case _AppMenuAction.uninstall:
+            final result = await showOkCancelAlertDialog(
+              context: context,
+              title: L10n.of(context).uninstallApp,
+              message: L10n.of(context).uninstallAppConfirm,
+              okLabel: L10n.of(context).uninstall,
+              isDestructive: true,
+            );
+            if (result == OkCancelResult.ok) onUninstall();
+        }
+      },
+      itemBuilder: (context) => [
+        PopupMenuItem<_AppMenuAction>(
+          value: _AppMenuAction.uninstall,
+          child: Row(
+            children: [
+              Icon(
+                Icons.delete_outline,
+                color: Theme.of(context).colorScheme.error,
+              ),
+              const SizedBox(width: 12),
+              Text(L10n.of(context).uninstall),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Shows the logo declared by the mini app (data URI or http(s) URL), falling
+/// back to the initial letter of the app name when no usable logo is
+/// available.
+class _Logo extends StatelessWidget {
+  final String? logo;
+  final Color color;
+  final String name;
+
+  const _Logo({required this.logo, required this.color, required this.name});
+
+  @override
+  Widget build(BuildContext context) {
+    final value = logo?.trim() ?? '';
+    Widget? image;
+    if (value.startsWith('data:image/')) {
+      final comma = value.indexOf(',');
+      if (comma != -1 && value.substring(0, comma).contains('base64')) {
+        try {
+          final bytes = base64Decode(value.substring(comma + 1));
+          image = ClipOval(
+            child: Image.memory(
+              bytes,
+              width: 48,
+              height: 48,
+              fit: BoxFit.cover,
+            ),
+          );
+        } catch (_) {}
+      }
+    } else if (value.startsWith('http://') || value.startsWith('https://')) {
+      image = ClipOval(
+        child: Image.network(value, width: 48, height: 48, fit: BoxFit.cover),
+      );
+    }
+    if (image != null) return CircleAvatar(radius: 24, child: image);
+    final initial = name.trim().isEmpty ? '?' : name.trim()[0].toUpperCase();
+    return CircleAvatar(
+      radius: 24,
+      backgroundColor: color.withValues(alpha: .15),
+      foregroundColor: color,
+      child: Text(
+        initial,
+        style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
+      ),
+    );
+  }
+}
--- a/lib/pages/apps/miniapp_page.dart
+++ b/lib/pages/apps/miniapp_page.dart
@@ -77,11 +77,15 @@ class _MiniAppPageState extends State<MiniAppPage> {

  @override
  Widget build(BuildContext context) {
+    final themeColorScheme = Theme.of(context).colorScheme;
    if (_notFound) {
      return Scaffold(
        appBar: AppBar(
          leading: const Center(child: BackButton()),
          title: Text(widget.appId),
+          backgroundColor: themeColorScheme.surface,
+          surfaceTintColor: Colors.transparent,
+          foregroundColor: themeColorScheme.onSurface,
        ),
        body: const Center(child: Text('App not found')),
      );
@@ -92,9 +96,10 @@ class _MiniAppPageState extends State<MiniAppPage> {
      return Scaffold(
        appBar: AppBar(
          leading: const Center(child: BackButton()),
-          title: Text(
-            _config?.name ?? _config?.id ?? widget.appId,
-          ),
+          title: Text(_config?.name ?? _config?.id ?? widget.appId),
+          backgroundColor: themeColorScheme.surface,
+          surfaceTintColor: Colors.transparent,
+          foregroundColor: themeColorScheme.onSurface,
        ),
        body: const Center(
          child: CircularProgressIndicator.adaptive(strokeWidth: 2),
--- a/lib/pages/apps/miniapp_shell_native.dart
+++ b/lib/pages/apps/miniapp_shell_native.dart
@@ -2,8 +2,8 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later

-import 'package:flutter/material.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
+import 'package:material_ui/material_ui.dart';
 import 'package:tatchat/l10n/l10n.dart';

 /// Native implementation of [MiniAppShell] using an isolated [InAppWebView].
@@ -42,7 +42,7 @@ class _MiniAppShellState extends State<MiniAppShell> {
 <script>
 window.addEventListener('message', function (event) {
  var msg = event.data;
-  if (!msg || msg.api !== 'fromMiniApp') return;
+  if (!msg || msg.api !== 'fromMiniApp' || msg.response !== undefined) return;
  window.flutter_inappwebview.callHandler('$_handlerName', msg).then(function (response) {
    var reply = Object.assign({}, msg, { response: response });
    window.postMessage(reply, '*');
@@ -63,8 +63,9 @@ window.addEventListener('message', function (event) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
-        backgroundColor: theme.colorScheme.primary,
-        foregroundColor: theme.colorScheme.onPrimary,
+        backgroundColor: theme.colorScheme.surface,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: theme.colorScheme.onSurface,
        actions: [
          IconButton(
            tooltip: L10n.of(context).refresh,
--- a/lib/pages/apps/miniapp_shell_web.dart
+++ b/lib/pages/apps/miniapp_shell_web.dart
@@ -5,7 +5,7 @@
 import 'dart:js_interop';
 import 'dart:ui_web' as ui_web;

-import 'package:flutter/material.dart';
+import 'package:material_ui/material_ui.dart';
 import 'package:tatchat/l10n/l10n.dart';
 import 'package:tatchat/utils/miniapp_bridge.dart';
 import 'package:web/web.dart' as web;
@@ -132,8 +132,9 @@ class _MiniAppShellState extends State<MiniAppShell> {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
-        backgroundColor: theme.colorScheme.primary,
-        foregroundColor: theme.colorScheme.onPrimary,
+        backgroundColor: theme.colorScheme.surface,
+        surfaceTintColor: Colors.transparent,
+        foregroundColor: theme.colorScheme.onSurface,
        actions: [
          IconButton(
            tooltip: L10n.of(context).refresh,
--- a/lib/pages/chat/chat_view.dart
+++ b/lib/pages/chat/chat_view.dart
@@ -104,8 +104,9 @@ class ChatView extends StatelessWidget {
                backgroundColor: controller.selectedEvents.isEmpty
                    ? controller.activeThreadId != null
                          ? theme.colorScheme.secondaryContainer
-                          : theme.colorScheme.surface.withAlpha(240)
+                          : theme.colorScheme.surface
                    : theme.colorScheme.tertiaryContainer,
+                surfaceTintColor: Colors.transparent,
                automaticallyImplyLeading: false,
                leading: controller.selectMode
                    ? IconButton(
--- 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 {
      ],
    );
  }
-}
+}