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

lib/config/miniapp_config.dart

@@ -23,12 +23,19 @@ const List<MiniAppConfig> availableMiniApps = [
     id: miniAppTasksId,
     icon: Icons.checklist_rounded,
     color: Color(0xFF00D084),
+    category: 'productivity',
+    description:
+        'A simple task checklist that lives in your Matrix account data.',
+    inChat: false,
     htmlAsset: 'assets/miniapps/tasks.html',
   ),
   MiniAppConfig(
     id: miniAppAccountDataId,
     icon: Icons.storage_rounded,
     color: Color(0xFF1F8EF1),
+    category: 'developer',
+    description: 'Read and edit the account data of your Matrix account.',
+    inChat: false,
     htmlAsset: 'assets/miniapps/accountdata.html',
   ),
 ];
@@ -41,6 +48,14 @@ class MiniAppConfig {
   final IconData icon;
   final Color color;
   final String? name;
+  final String? category;
+  final String? description;
+
+  /// Logo of the app: either an http(s) URL or a `data:` URI.
+  final String? logo;
+
+  /// Whether the mini app can run inside a chat room.
+  final bool inChat;
   final String? htmlAsset;
   final String? html;
 
@@ -49,6 +64,10 @@ class MiniAppConfig {
     required this.icon,
     required this.color,
     this.name,
+    this.category,
+    this.description,
+    this.logo,
+    this.inChat = false,
     this.htmlAsset,
     this.html,
   });
@@ -58,12 +77,20 @@ class MiniAppConfig {
   MiniAppConfig.custom({
     required String id,
     String? name,
+    String? category,
+    String? description,
+    String? logo,
+    bool inChat = false,
     String? html,
   }) : this(
          id: id,
          icon: Icons.web_asset_rounded,
          color: const Color(0xFF9C27B0),
          name: name,
+         category: category,
+         description: description,
+         logo: logo,
+         inChat: inChat,
          html: html,
        );
 
@@ -86,6 +113,10 @@ MiniAppConfig? resolveMiniAppConfig(Client client, String appId) {
       return MiniAppConfig.custom(
         id: appId,
         name: client.getMiniAppName(appId),
+        category: client.getMiniAppCategory(appId),
+        description: client.getMiniAppDescription(appId),
+        logo: client.getMiniAppLogo(appId),
+        inChat: client.getMiniAppInChat(appId),
         html: html,
       );
     }
@@ -107,6 +138,10 @@ List<MiniAppConfig> installedMiniAppConfigs(Client client) {
           MiniAppConfig.custom(
             id: id,
             name: client.getMiniAppName(id),
+            category: client.getMiniAppCategory(id),
+            description: client.getMiniAppDescription(id),
+            logo: client.getMiniAppLogo(id),
+            inChat: client.getMiniAppInChat(id),
             html: client.getMiniAppSource(id),
           ),
   ];

lib/config/themes.dart

@@ -15,6 +15,9 @@ abstract class FluffyThemes {
 
   static const double navRailWidth = 80.0;
 
+  /// Width of the navigation sidebar (column mode only).
+  static const double sidebarWidth = 280.0;
+
   static bool isColumnModeByWidth(double width) =>
       width > columnWidth * 2 + navRailWidth;
 

lib/l10n/intl_en.arb

@@ -2558,6 +2558,13 @@
   "join": "Join",
   "searchOrEnterHomeserverAddress": "Search or enter homeserver address",
   "matrixId": "Matrix ID",
+  "@matrixId": {
+    "description": "The Matrix ID of the user"
+  },
+  "menu": "Menu",
+  "@menu": {
+    "description": "Label for the navigation menu button"
+  },
   "setPowerLevel": "Set power level",
   "makeModerator": "Make moderator",
   "makeAdmin": "Make admin",
@@ -2994,5 +3001,20 @@
   "@appImported": {
     "type": "String",
     "placeholders": {}
+  },
+  "moreOptions": "More options",
+  "@moreOptions": {
+    "type": "String",
+    "placeholders": {}
+  },
+  "uninstallApp": "Uninstall app?",
+  "@uninstallApp": {
+    "type": "String",
+    "placeholders": {}
+  },
+  "uninstallAppConfirm": "Do you really want to uninstall this app?",
+  "@uninstallAppConfirm": {
+    "type": "String",
+    "placeholders": {}
   }
 }

lib/l10n/intl_pt_BR.arb

@@ -1974,6 +1974,7 @@
   "createCanalAndInviteUsers": "Criar um canal e convidar pessoas",
   "createMuralAndInviteUsers": "Criar um mural e convidar pessoas",
   "mural": "Mural",
+  "menu": "Menu",
   "muralIsPublic": "O mural é público",
   "muralName": "Nome do mural",
   "noBackupWarning": "Atenção! Se não ativar o backup de conversas, você perderá acesso a suas mensagens criptografadas. É altamente recomendável ativar o backup antes de sair.",

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);
-}
+}

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),
+      ),
+    );
+  }
+}

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),

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,

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,

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(

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);
 }

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,

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),
-          ],
-        ),
-      ),
     ];
   }
 

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,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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 {
       ],
     );
   }
-}
+}

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 {
       ],
     );
   }
-}
+}

lib/utils/miniapp_bridge.dart

@@ -71,11 +71,20 @@ class MiniappBridge {
   }
 
   /// Builds the theme palette map sent to mini apps. Colors are serialized as
-  /// `#AARRGGBB` hex strings so they can be used directly in CSS/JS.
-  static Map<String, Object?> buildPalette(ColorScheme scheme, Brightness brightness) {
+  /// `#RRGGBBAA` hex strings (CSS 8-digit order) so they can be used directly
+  /// in CSS/JS.
+  static Map<String, Object?> buildPalette(
+    ColorScheme scheme,
+    Brightness brightness,
+  ) {
     String hex(Color c) {
       final value = c.toARGB32();
-      return '#${value.toRadixString(16).padLeft(8, '0').toUpperCase()}';
+      final rgb = value & 0xFFFFFF;
+      final alpha = (value >> 24) & 0xFF;
+      return '#${rgb
+              .toRadixString(16)
+              .padLeft(6, '0')}${alpha.toRadixString(16).padLeft(2, '0')}'
+          .toUpperCase();
     }
 
     return {

lib/utils/miniapp_meta.dart

@@ -0,0 +1,109 @@
+// SPDX-FileCopyrightText: 2026 TatuChat
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+/// Names of the `<meta>` tags a mini app document must declare to be
+/// installable. They act as the mini app's manifest.
+const String miniAppMetaIdTag = 'mini-app-id';
+const String miniAppMetaNameTag = 'mini-app-name';
+const String miniAppMetaCategoryTag = 'mini-app-category';
+const String miniAppMetaDescriptionTag = 'mini-app-description';
+const String miniAppMetaLogoTag = 'mini-app-logo';
+const String miniAppMetaInChatTag = 'mini-app-in-chat';
+
+const List<String> miniAppMetaTags = [
+  miniAppMetaIdTag,
+  miniAppMetaNameTag,
+  miniAppMetaCategoryTag,
+  miniAppMetaDescriptionTag,
+  miniAppMetaLogoTag,
+  miniAppMetaInChatTag,
+];
+
+/// Manifest of a mini app, extracted from its `<meta>` tags.
+///
+/// [id] is mandatory and non-empty. It is used as the account data key under
+/// which the app's store and HTML source are persisted
+/// (`im.tatuchat.miniapps.data.<id>` / `im.tatuchat.miniapps.source.<id>`).
+class MiniAppMeta {
+  final String id;
+  final String name;
+  final String category;
+  final String description;
+  final String logo;
+
+  /// Whether the mini app can run inside a chat room. `false` by default.
+  final bool inChat;
+
+  const MiniAppMeta({
+    required this.id,
+    required this.name,
+    this.category = '',
+    this.description = '',
+    this.logo = '',
+    this.inChat = false,
+  });
+}
+
+/// Extracts the meta tags of an HTML document into a `name -> content` map
+/// (names normalized to lower case). Attribute order and quoting style are
+/// irrelevant.
+Map<String, String> extractMetaTags(String html) {
+  final result = <String, String>{};
+  final metaRegex = RegExp(r'<meta\b[^>]*>', caseSensitive: false);
+  final attrRegex = RegExp(
+    r"""(name|content)\s*=\s*["']([^"']*)["']""",
+    caseSensitive: false,
+  );
+  for (final match in metaRegex.allMatches(html)) {
+    final attributes = <String, String>{};
+    for (final attr in attrRegex.allMatches(match.group(0)!)) {
+      attributes[attr.group(1)!.toLowerCase()] = attr.group(2)!;
+    }
+    final name = attributes['name'];
+    final content = attributes['content'];
+    if (name != null && content != null) {
+      result[name.toLowerCase()] = content;
+    }
+  }
+  return result;
+}
+
+/// Parses the mini app manifest out of the `<meta>` tags of [html].
+///
+/// All [miniAppMetaTags] must be present (their content may be empty), except
+/// `mini-app-id` and `mini-app-name`, which must also be non-empty. Throws a
+/// [FormatException] with a human readable reason otherwise.
+MiniAppMeta parseMiniAppMeta(String html) {
+  final tags = extractMetaTags(html);
+  final missing = [
+    for (final tag in miniAppMetaTags)
+      if (!tags.containsKey(tag)) tag,
+  ];
+  if (missing.isNotEmpty) {
+    throw FormatException(
+      'This document is missing the required meta tag(s): '
+      '${missing.join(', ')}',
+    );
+  }
+  final id = tags[miniAppMetaIdTag]!.trim();
+  final name = tags[miniAppMetaNameTag]!.trim();
+  if (id.isEmpty) {
+    throw FormatException(
+      'The meta tag "$miniAppMetaIdTag" must not be empty',
+    );
+  }
+  if (name.isEmpty) {
+    throw FormatException(
+      'The meta tag "$miniAppMetaNameTag" must not be empty',
+    );
+  }
+  return MiniAppMeta(
+    id: id,
+    name: name,
+    category: tags[miniAppMetaCategoryTag]!.trim(),
+    description: tags[miniAppMetaDescriptionTag]!.trim(),
+    logo: tags[miniAppMetaLogoTag]!.trim(),
+    inChat: tags[miniAppMetaInChatTag]!.trim().toLowerCase() == 'true',
+  );
+}

lib/utils/miniapp_store.dart

@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 import 'package:matrix/matrix.dart';
+import 'package:tatchat/utils/miniapp_meta.dart';
 
 /// Account data key that holds the list of installed mini app IDs.
 const String installedMiniAppsKey = 'im.tatuchat.miniapps.installed';
@@ -32,16 +33,22 @@ extension MiniAppStoreExtension on Client {
     if (apps.contains(appId)) return;
     apps.add(appId);
     await setAccountData(userID!, installedMiniAppsKey, {'apps': apps});
+    _cacheAccountData(installedMiniAppsKey, {'apps': apps});
   }
 
   Future<void> uninstallMiniApp(String appId) async {
     final apps = installedMiniApps..remove(appId);
     await setAccountData(userID!, installedMiniAppsKey, {'apps': apps});
+    _cacheAccountData(installedMiniAppsKey, {'apps': apps});
     // Clear the custom HTML source if present.
     await setAccountData(userID!, '$miniAppSourceKeyPrefix$appId', {
       'html': '',
       'name': '',
     });
+    _cacheAccountData(
+      '$miniAppSourceKeyPrefix$appId',
+      {'html': '', 'name': ''},
+    );
   }
 
   /// Reads the JSON document of the given mini app. Returns an empty map if
@@ -50,29 +57,47 @@ extension MiniAppStoreExtension on Client {
       accountData['$miniAppDataKeyPrefix$appId']?.content ?? const {};
 
   /// Overwrites the JSON document of the given mini app.
-  Future<void> setMiniAppData(String appId, Map<String, Object?> data) =>
-      setAccountData(userID!, '$miniAppDataKeyPrefix$appId', data);
+  Future<void> setMiniAppData(String appId, Map<String, Object?> data) async {
+    final key = '$miniAppDataKeyPrefix$appId';
+    await setAccountData(userID!, key, data);
+    _cacheAccountData(key, data);
+  }
 
   // ---------- Imported (custom) apps ----------
 
-  /// Stores the HTML source and a display name for a user-imported mini app
-  /// and adds it to the installed list if not already present.
+  /// Stores the HTML source and the manifest of a user-imported mini app and
+  /// adds it to the installed list if not already present. The manifest's
+  /// [MiniAppMeta.id] is used as the account data key for the app.
   Future<void> importMiniApp({
-    required String appId,
-    required String name,
+    required MiniAppMeta meta,
     required String html,
   }) async {
-    await setAccountData(userID!, '$miniAppSourceKeyPrefix$appId', {
-      'name': name,
+    final sourceKey = '$miniAppSourceKeyPrefix${meta.id}';
+    final content = <String, Object?>{
+      'name': meta.name,
+      'category': meta.category,
+      'description': meta.description,
+      'logo': meta.logo,
+      'inChat': meta.inChat,
       'html': html,
-    });
+    };
+    await setAccountData(userID!, sourceKey, content);
+    _cacheAccountData(sourceKey, content);
     final apps = installedMiniApps;
-    if (!apps.contains(appId)) {
-      apps.add(appId);
+    if (!apps.contains(meta.id)) {
+      apps.add(meta.id);
       await setAccountData(userID!, installedMiniAppsKey, {'apps': apps});
+      _cacheAccountData(installedMiniAppsKey, {'apps': apps});
     }
   }
 
+  /// Mirrors the just-written account data into the in-memory cache so that
+  /// reads right after a write (e.g. a mini app saving and immediately
+  /// loading its store) see the new value without waiting for the next sync.
+  void _cacheAccountData(String key, Map<String, Object?> content) {
+    accountData[key] = BasicEvent(type: key, content: content);
+  }
+
   /// Returns the raw HTML source of an imported mini app, or null if the app
   /// is a built-in app or was never imported.
   String? getMiniAppSource(String appId) {
@@ -85,10 +110,36 @@ extension MiniAppStoreExtension on Client {
 
   /// Returns the display name of an imported mini app, or null.
   String? getMiniAppName(String appId) {
-    final content =
-        accountData['$miniAppSourceKeyPrefix$appId']?.content;
-    if (content == null) return null;
-    final name = content['name'];
-    return (name is String && name.isNotEmpty) ? name : null;
+    final content = accountData['$miniAppSourceKeyPrefix$appId']?.content;
+    return _stringContent(content, 'name');
+  }
+
+  /// Returns the category of an imported mini app, or null.
+  String? getMiniAppCategory(String appId) {
+    final content = accountData['$miniAppSourceKeyPrefix$appId']?.content;
+    return _stringContent(content, 'category');
+  }
+
+  /// Returns the description of an imported mini app, or null.
+  String? getMiniAppDescription(String appId) {
+    final content = accountData['$miniAppSourceKeyPrefix$appId']?.content;
+    return _stringContent(content, 'description');
+  }
+
+  /// Returns the logo (data URI or URL) of an imported mini app, or null.
+  String? getMiniAppLogo(String appId) {
+    final content = accountData['$miniAppSourceKeyPrefix$appId']?.content;
+    return _stringContent(content, 'logo');
+  }
+
+  /// Whether an imported mini app declares that it can run inside a chat.
+  bool getMiniAppInChat(String appId) {
+    final content = accountData['$miniAppSourceKeyPrefix$appId']?.content;
+    return content?['inChat'] == true;
+  }
+
+  String? _stringContent(Map<String, Object?>? content, String key) {
+    final value = content?[key];
+    return (value is String && value.isNotEmpty) ? value : null;
   }
 }