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,