feat: tela de apps com logos/menu de exclusao, correcao de tema nas mini apps e sidebar de navegacao
Some checks failed
Main Deploy Workflow / deploy_web (push) Has been cancelled
Main Deploy Workflow / deploy_playstore_internal (push) Has been cancelled
Close stale issues and PRs / stale (push) Has been cancelled

This commit is contained in:
2026-09-19 00:08:35 -03:00
parent 1f692b1e4e
commit 6c689d1f34
23 changed files with 1039 additions and 114 deletions

View File

@@ -3,6 +3,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="mini-app-id" content="accountdata">
<meta name="mini-app-name" content="Account Data">
<meta name="mini-app-category" content="developer">
<meta name="mini-app-description" content="Read and edit the account data of your Matrix account.">
<meta name="mini-app-logo" content="">
<meta name="mini-app-in-chat" content="false">
<title>Account Data</title> <title>Account Data</title>
<style> <style>
:root { :root {
@@ -261,6 +267,7 @@
window.addEventListener('message', function (event) { window.addEventListener('message', function (event) {
const msg = event.data; const msg = event.data;
if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return; if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return;
if (msg.response === undefined) return;
if (!_pending.has(msg.requestId)) return; if (!_pending.has(msg.requestId)) return;
const pending = _pending.get(msg.requestId); const pending = _pending.get(msg.requestId);
_pending.delete(msg.requestId); _pending.delete(msg.requestId);
@@ -472,6 +479,34 @@
.replace(/"/g, '&quot;'); .replace(/"/g, '&quot;');
} }
// Follow the theme TatuChat is *actually* using instead of the environment's
// `prefers-color-scheme` (which on native webviews follows the device, not
// the app). Applies the palette reported by `io.tatuchat.theme.get`.
function applyTatuTheme(palette) {
if (!palette) return;
var root = document.documentElement.style;
var vars = {
'--accent': palette.primary,
'--bg': palette.surface,
'--fg': palette.onSurface,
'--card': palette.surfaceContainer,
'--border': palette.outlineVariant,
'--muted': palette.onSurfaceVariant,
'--danger': palette.error,
'--ok': palette.primary
};
Object.keys(vars).forEach(function (key) {
if (vars[key]) root.setProperty(key, vars[key]);
});
if (palette.brightness) {
document.documentElement.style.colorScheme = palette.brightness;
}
}
bridgeRequest('io.tatuchat.theme.get').then(function (res) {
applyTatuTheme(res && res.palette);
}).catch(function () {});
init(); init();
</script> </script>
</body> </body>

View File

@@ -3,6 +3,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="mini-app-id" content="tasks">
<meta name="mini-app-name" content="Tasks">
<meta name="mini-app-category" content="productivity">
<meta name="mini-app-description" content="A simple task checklist that lives in your Matrix account data.">
<meta name="mini-app-logo" content="">
<meta name="mini-app-in-chat" content="false">
<title>Tasks</title> <title>Tasks</title>
<style> <style>
:root { :root {
@@ -125,6 +131,7 @@
window.addEventListener('message', function (event) { window.addEventListener('message', function (event) {
const msg = event.data; const msg = event.data;
if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return; if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return;
if (msg.response === undefined) return;
if (!_pending.has(msg.requestId)) return; if (!_pending.has(msg.requestId)) return;
const pending = _pending.get(msg.requestId); const pending = _pending.get(msg.requestId);
_pending.delete(msg.requestId); _pending.delete(msg.requestId);
@@ -203,6 +210,32 @@
return bridgeRequest('io.tatuchat.storage.save', { tasks: tasks }).catch(function () {}); return bridgeRequest('io.tatuchat.storage.save', { tasks: tasks }).catch(function () {});
} }
// Follow the theme TatuChat is *actually* using instead of the environment's
// `prefers-color-scheme` (which on native webviews follows the device, not
// the app). Applies the palette reported by `io.tatuchat.theme.get`.
function applyTatuTheme(palette) {
if (!palette) return;
var root = document.documentElement.style;
var vars = {
'--accent': palette.primary,
'--bg': palette.surface,
'--fg': palette.onSurface,
'--card': palette.surfaceContainer,
'--border': palette.outlineVariant,
'--muted': palette.onSurfaceVariant
};
Object.keys(vars).forEach(function (key) {
if (vars[key]) root.setProperty(key, vars[key]);
});
if (palette.brightness) {
document.documentElement.style.colorScheme = palette.brightness;
}
}
bridgeRequest('io.tatuchat.theme.get').then(function (res) {
applyTatuTheme(res && res.palette);
}).catch(function () {});
load().finally(render); load().finally(render);
</script> </script>
</body> </body>

View File

@@ -21,6 +21,36 @@ The available apps page (`/rooms/apps`) lists the built-in apps (`tasks`,
`accountdata`) under *Installed* once you install them, plus every app you `accountdata`) under *Installed* once you install them, plus every app you
import. import.
## Manifest (meta tags)
Before installing an app, TatuChat reads the `<meta>` tags of the document and
uses them as the app's manifest. **Every tag listed below must be present** in
the `<head>` of your document, even if the value is empty — except `id` and
`name`, which must also be non-empty. An app that is missing any of these tags
**cannot be installed**.
```html
<meta name="mini-app-id" content="myapp">
<meta name="mini-app-name" content="My App">
<meta name="mini-app-category" content="productivity">
<meta name="mini-app-description" content="What my app does">
<meta name="mini-app-logo" content=""> <!-- empty is allowed -->
<meta name="mini-app-in-chat" content="false"> <!-- true|false -->
```
`mini-app-in-chat` must be `true` or `false` (empty defaults to `false`).
Values are trimmed and read case-insensitively.
The `mini-app-id` is used **as the key in the account data store**: the app's
store is persisted under `im.tatuchat.miniapps.data.<id>` and its HTML source
under `im.tatuchat.miniapps.source.<id>`. It must be unique: ids of built-in
apps (`tasks`, `accountdata`) are reserved and an already installed id cannot
be reused. This id is also the `widgetId` your app must send in the bridge
protocol.
The remaining fields are stored as metadata (`category`, `description`, `logo`,
`inChat`) and shown in the *Apps* page.
## Talking to TatuChat ## Talking to TatuChat
The host listens for `message` events. A channel app sends a request with The host listens for `message` events. A channel app sends a request with
@@ -64,10 +94,11 @@ function bridgeRequest(action, data) {
window.addEventListener('message', function (event) { window.addEventListener('message', function (event) {
const msg = event.data; const msg = event.data;
if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return; if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return;
if (msg.response === undefined) return;
if (!_pending.has(msg.requestId)) return; if (!_pending.has(msg.requestId)) return;
const pending = _pending.get(msg.requestId); const pending = _pending.get(msg.requestId);
_pending.delete(msg.requestId); _pending.delete(msg.requestId);
const response = msg.response || {}; const response = msg.response;
if (response.error) pending.reject(new Error(response.error)); if (response.error) pending.reject(new Error(response.error));
else pending.resolve(response.data); else pending.resolve(response.data);
}); });
@@ -121,18 +152,18 @@ only if `avatarDataUri` is absent.
### `io.tatuchat.theme.get` ### `io.tatuchat.theme.get`
Resolves with the color palette currently used by TatuChat, so your app can Resolves with the color palette currently used by TatuChat, so your app can
match the ecosystem (light/dark aware). Colors are `#AARRGGBB` hex strings match the ecosystem (light/dark aware). Colors are `#RRGGBBAA` hex strings
suitable for CSS. (CSS 8-digit order: red, green, blue, alpha) suitable for CSS.
```js ```js
const { palette } = await bridgeRequest('io.tatuchat.theme.get'); const { palette } = await bridgeRequest('io.tatuchat.theme.get');
// => { // => {
// brightness: 'light' | 'dark', // brightness: 'light' | 'dark',
// primary: '#FF00D084', // primary: '#00D084FF',
// onPrimary: '#FF000000', // onPrimary: '#000000FF',
// primaryContainer: '#FF...', // primaryContainer: '#00D08433',
// surface: '#FF...', // surface: '#FEF7FF00',
// surfaceContainerLowest/Low/Container/High/Highest: '#FF...', // surfaceContainerLowest/Low/Container/High/Highest: '#…',
// secondary..., tertiary..., error..., // secondary..., tertiary..., error...,
// outline, outlineVariant, background, onBackground, onSurface, ... // outline, outlineVariant, background, onBackground, onSurface, ...
// } // }

View File

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

View File

@@ -15,6 +15,9 @@ abstract class FluffyThemes {
static const double navRailWidth = 80.0; 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) => static bool isColumnModeByWidth(double width) =>
width > columnWidth * 2 + navRailWidth; width > columnWidth * 2 + navRailWidth;

View File

@@ -2558,6 +2558,13 @@
"join": "Join", "join": "Join",
"searchOrEnterHomeserverAddress": "Search or enter homeserver address", "searchOrEnterHomeserverAddress": "Search or enter homeserver address",
"matrixId": "Matrix ID", "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", "setPowerLevel": "Set power level",
"makeModerator": "Make moderator", "makeModerator": "Make moderator",
"makeAdmin": "Make admin", "makeAdmin": "Make admin",
@@ -2994,5 +3001,20 @@
"@appImported": { "@appImported": {
"type": "String", "type": "String",
"placeholders": {} "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": {}
} }
} }

View File

@@ -1974,6 +1974,7 @@
"createCanalAndInviteUsers": "Criar um canal e convidar pessoas", "createCanalAndInviteUsers": "Criar um canal e convidar pessoas",
"createMuralAndInviteUsers": "Criar um mural e convidar pessoas", "createMuralAndInviteUsers": "Criar um mural e convidar pessoas",
"mural": "Mural", "mural": "Mural",
"menu": "Menu",
"muralIsPublic": "O mural é público", "muralIsPublic": "O mural é público",
"muralName": "Nome do mural", "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.", "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.",

View File

@@ -10,7 +10,9 @@ import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http; import 'package:http/http.dart' as http;
import 'package:material_ui/material_ui.dart'; import 'package:material_ui/material_ui.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:tatchat/config/miniapp_config.dart';
import 'package:tatchat/config/setting_keys.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/utils/miniapp_store.dart';
import 'package:tatchat/widgets/matrix.dart'; import 'package:tatchat/widgets/matrix.dart';
@@ -46,12 +48,8 @@ class AppsController extends State<Apps> {
allowedExtensions: ['html', 'htm'], allowedExtensions: ['html', 'htm'],
); );
if (file == null) return; if (file == null) return;
final name = file.name.replaceAll(RegExp(r'\.(html?|htm)$'), '');
final bytes = await file.readAsBytes(); final bytes = await file.readAsBytes();
await _importHtml( await _importHtml(html: _decodeBytes(bytes));
name: name.isEmpty ? 'Imported app' : name,
html: _decodeBytes(bytes),
);
if (!mounted) return; if (!mounted) return;
setState(() {}); setState(() {});
} }
@@ -68,14 +66,7 @@ class AppsController extends State<Apps> {
if (response.statusCode != 200) { if (response.statusCode != 200) {
throw Exception('${response.statusCode} ${response.reasonPhrase}'); throw Exception('${response.statusCode} ${response.reasonPhrase}');
} }
var name = Uri.parse(url).pathSegments.isNotEmpty await _importHtml(html: response.body);
? Uri.parse(url).pathSegments.last.replaceAll(
RegExp(r'\.(html?|htm)$'),
'',
)
: url;
if (name.isEmpty) name = 'Imported app';
await _importHtml(name: name, html: response.body);
if (!mounted) return; if (!mounted) return;
setState(() {}); setState(() {});
} }
@@ -115,15 +106,23 @@ class AppsController extends State<Apps> {
return latin1.decode(bytes, allowInvalid: true); return latin1.decode(bytes, allowInvalid: true);
} }
Future<void> _importHtml({ /// Reads the mini app manifest from the meta tags of [html], validates it
required String name, /// and installs the app. The manifest `id` is used as the account data key.
required String html, ///
}) => /// Throws a [FormatException] when the document lacks the required meta
client.importMiniApp( /// tags, or an [Exception] when the id is already taken.
appId: 'imported-${DateTime.now().millisecondsSinceEpoch}', Future<void> _importHtml({required String html}) async {
name: name, final meta = parseMiniAppMeta(html);
html: 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 @override
Widget build(BuildContext context) => AppsView(this); Widget build(BuildContext context) => AppsView(this);

View File

@@ -3,6 +3,8 @@
// //
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
import 'dart:convert';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:material_ui/material_ui.dart'; import 'package:material_ui/material_ui.dart';
import 'package:matrix/matrix.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/l10n/l10n.dart';
import 'package:tatchat/pages/apps/apps.dart'; import 'package:tatchat/pages/apps/apps.dart';
import 'package:tatchat/utils/miniapp_store.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/adaptive_dialogs/show_text_input_dialog.dart';
import 'package:tatchat/widgets/layouts/max_width_body.dart'; import 'package:tatchat/widgets/layouts/max_width_body.dart';
@@ -29,6 +32,8 @@ class AppsView extends StatelessWidget {
appBar: AppBar( appBar: AppBar(
leading: const Center(child: BackButton()), leading: const Center(child: BackButton()),
title: Text(L10n.of(context).apps), title: Text(L10n.of(context).apps),
backgroundColor: Theme.of(context).colorScheme.surface,
surfaceTintColor: Colors.transparent,
actions: [ actions: [
PopupMenuButton<_ImportAction>( PopupMenuButton<_ImportAction>(
icon: const Icon(Icons.add_box_outlined), icon: const Icon(Icons.add_box_outlined),
@@ -36,7 +41,19 @@ class AppsView extends StatelessWidget {
onSelected: (action) async { onSelected: (action) async {
switch (action) { switch (action) {
case _ImportAction.file: case _ImportAction.file:
try {
await controller.importMiniAppFromFile(); 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: case _ImportAction.url:
final url = await showTextInputDialog( final url = await showTextInputDialog(
context: context, context: context,
@@ -53,9 +70,9 @@ class AppsView extends StatelessWidget {
} catch (e, s) { } catch (e, s) {
Logs().e('Failed to import mini app', e, s); Logs().e('Failed to import mini app', e, s);
if (!context.mounted) return; if (!context.mounted) return;
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(
SnackBar(content: Text(e.toString())), context,
); ).showSnackBar(SnackBar(content: Text(e.toString())));
} }
} }
}, },
@@ -96,15 +113,8 @@ class AppsView extends StatelessWidget {
app: app, app: app,
onTap: () => context.go('/rooms/apps/${app.id}'), onTap: () => context.go('/rooms/apps/${app.id}'),
trailing: [ trailing: [
IconButton( _AppCardMenu(
icon: const Icon(Icons.open_in_new), onUninstall: () => controller.uninstallMiniApp(app.id),
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),
), ),
], ],
), ),
@@ -133,10 +143,7 @@ class AppsView extends StatelessWidget {
} }
} }
enum _ImportAction { enum _ImportAction { file, url }
file,
url,
}
class _SectionHeader extends StatelessWidget { class _SectionHeader extends StatelessWidget {
final String text; final String text;
@@ -161,18 +168,122 @@ class _AppCard extends StatelessWidget {
@override @override
Widget build(BuildContext context) { 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( return Card(
margin: const EdgeInsets.symmetric(vertical: 4), margin: const EdgeInsets.symmetric(vertical: 4),
child: ListTile( child: ListTile(
onTap: onTap, onTap: onTap,
leading: CircleAvatar( leading: _Logo(logo: app.logo, color: app.color, name: name),
backgroundColor: app.color.withValues(alpha: .15), title: Text(name),
foregroundColor: app.color, subtitle: subtitle.isEmpty
child: Icon(app.icon), ? null
: Text(
subtitle,
maxLines: 3,
overflow: TextOverflow.ellipsis,
), ),
title: Text(miniAppName(context, app)),
trailing: Row(mainAxisSize: MainAxisSize.min, children: trailing), 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),
),
);
}
}

View File

@@ -77,11 +77,15 @@ class _MiniAppPageState extends State<MiniAppPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final themeColorScheme = Theme.of(context).colorScheme;
if (_notFound) { if (_notFound) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
leading: const Center(child: BackButton()), leading: const Center(child: BackButton()),
title: Text(widget.appId), title: Text(widget.appId),
backgroundColor: themeColorScheme.surface,
surfaceTintColor: Colors.transparent,
foregroundColor: themeColorScheme.onSurface,
), ),
body: const Center(child: Text('App not found')), body: const Center(child: Text('App not found')),
); );
@@ -92,9 +96,10 @@ class _MiniAppPageState extends State<MiniAppPage> {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
leading: const Center(child: BackButton()), leading: const Center(child: BackButton()),
title: Text( title: Text(_config?.name ?? _config?.id ?? widget.appId),
_config?.name ?? _config?.id ?? widget.appId, backgroundColor: themeColorScheme.surface,
), surfaceTintColor: Colors.transparent,
foregroundColor: themeColorScheme.onSurface,
), ),
body: const Center( body: const Center(
child: CircularProgressIndicator.adaptive(strokeWidth: 2), child: CircularProgressIndicator.adaptive(strokeWidth: 2),

View File

@@ -2,8 +2,8 @@
// //
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart'; import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:material_ui/material_ui.dart';
import 'package:tatchat/l10n/l10n.dart'; import 'package:tatchat/l10n/l10n.dart';
/// Native implementation of [MiniAppShell] using an isolated [InAppWebView]. /// Native implementation of [MiniAppShell] using an isolated [InAppWebView].
@@ -42,7 +42,7 @@ class _MiniAppShellState extends State<MiniAppShell> {
<script> <script>
window.addEventListener('message', function (event) { window.addEventListener('message', function (event) {
var msg = event.data; 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) { window.flutter_inappwebview.callHandler('$_handlerName', msg).then(function (response) {
var reply = Object.assign({}, msg, { response: response }); var reply = Object.assign({}, msg, { response: response });
window.postMessage(reply, '*'); window.postMessage(reply, '*');
@@ -63,8 +63,9 @@ window.addEventListener('message', function (event) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text(widget.title), title: Text(widget.title),
backgroundColor: theme.colorScheme.primary, backgroundColor: theme.colorScheme.surface,
foregroundColor: theme.colorScheme.onPrimary, surfaceTintColor: Colors.transparent,
foregroundColor: theme.colorScheme.onSurface,
actions: [ actions: [
IconButton( IconButton(
tooltip: L10n.of(context).refresh, tooltip: L10n.of(context).refresh,

View File

@@ -5,7 +5,7 @@
import 'dart:js_interop'; import 'dart:js_interop';
import 'dart:ui_web' as ui_web; 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/l10n/l10n.dart';
import 'package:tatchat/utils/miniapp_bridge.dart'; import 'package:tatchat/utils/miniapp_bridge.dart';
import 'package:web/web.dart' as web; import 'package:web/web.dart' as web;
@@ -132,8 +132,9 @@ class _MiniAppShellState extends State<MiniAppShell> {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text(widget.title), title: Text(widget.title),
backgroundColor: theme.colorScheme.primary, backgroundColor: theme.colorScheme.surface,
foregroundColor: theme.colorScheme.onPrimary, surfaceTintColor: Colors.transparent,
foregroundColor: theme.colorScheme.onSurface,
actions: [ actions: [
IconButton( IconButton(
tooltip: L10n.of(context).refresh, tooltip: L10n.of(context).refresh,

View File

@@ -104,8 +104,9 @@ class ChatView extends StatelessWidget {
backgroundColor: controller.selectedEvents.isEmpty backgroundColor: controller.selectedEvents.isEmpty
? controller.activeThreadId != null ? controller.activeThreadId != null
? theme.colorScheme.secondaryContainer ? theme.colorScheme.secondaryContainer
: theme.colorScheme.surface.withAlpha(240) : theme.colorScheme.surface
: theme.colorScheme.tertiaryContainer, : theme.colorScheme.tertiaryContainer,
surfaceTintColor: Colors.transparent,
automaticallyImplyLeading: false, automaticallyImplyLeading: false,
leading: controller.selectMode leading: controller.selectMode
? IconButton( ? IconButton(

View File

@@ -7,6 +7,15 @@ import 'dart:async';
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:cross_file/cross_file.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/config/app_config.dart';
import 'package:tatchat/l10n/l10n.dart'; import 'package:tatchat/l10n/l10n.dart';
import 'package:tatchat/pages/chat_list/chat_list_view.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/avatar.dart';
import 'package:tatchat/widgets/future_loading_dialog.dart'; import 'package:tatchat/widgets/future_loading_dialog.dart';
import 'package:tatchat/widgets/share_scaffold_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 '../../../utils/account_bundles.dart';
import '../../config/setting_keys.dart'; import '../../config/setting_keys.dart';
@@ -63,11 +63,16 @@ class ChatList extends StatefulWidget {
final String? activeSpace; final String? activeSpace;
final bool displayNavigationRail; final bool displayNavigationRail;
/// Whether the navigation sidebar drawer is available (e.g. hidden inside
/// the settings column).
final bool sideMenuEnabled;
const ChatList({ const ChatList({
super.key, super.key,
required this.activeChat, required this.activeChat,
this.activeSpace, this.activeSpace,
this.displayNavigationRail = false, this.displayNavigationRail = false,
this.sideMenuEnabled = true,
}); });
@override @override
@@ -76,6 +81,10 @@ class ChatList extends StatefulWidget {
class ChatListController extends State<ChatList> class ChatListController extends State<ChatList>
with TickerProviderStateMixin, RouteAware { 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? _intentDataStreamSubscription;
StreamSubscription? _intentFileStreamSubscription; StreamSubscription? _intentFileStreamSubscription;
@@ -1109,7 +1118,8 @@ class ChatListController extends State<ChatList>
} }
@override @override
Widget build(BuildContext context) => ChatListView(this); Widget build(BuildContext context) =>
ChatListView(this, sideMenuEnabled: widget.sideMenuEnabled);
Future<void> dehydrate() => Matrix.of(context).dehydrateAction(context); Future<void> dehydrate() => Matrix.of(context).dehydrateAction(context);
} }

View File

@@ -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 'package:tatchat/pages/chat_list/tabs/spaces_tab.dart';
import 'chat_list_body.dart'; import 'chat_list_body.dart';
import 'sidebar.dart';
class ChatListView extends StatelessWidget { class ChatListView extends StatelessWidget {
final ChatListController controller; 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -45,9 +50,24 @@ class ChatListView extends StatelessWidget {
ChatTopTabBar( ChatTopTabBar(
currentTab: homeTab, currentTab: homeTab,
onTabSelected: controller.setHomeTab, onTabSelected: controller.setHomeTab,
onMenuPressed: sideMenuEnabled
? () => controller.scaffoldKey.currentState?.openDrawer()
: null,
), ),
Expanded( Expanded(
child: Scaffold( 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( body: SafeArea(
top: false, top: false,
bottom: false, bottom: false,

View File

@@ -4,15 +4,16 @@
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
import 'package:async/async.dart'; 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:go_router/go_router.dart';
import 'package:material_ui/material_ui.dart'; import 'package:material_ui/material_ui.dart';
import 'package:matrix/matrix.dart' hide Result; 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:url_launcher/url_launcher_string.dart';
import 'package:tatchat/utils/tatu_share.dart';
import 'chat_list.dart'; import 'chat_list.dart';
class ClientChooserButton extends StatelessWidget { class ClientChooserButton extends StatelessWidget {
@@ -30,6 +31,23 @@ class ClientChooserButton extends StatelessWidget {
? -1 ? -1
: 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>>[ return <PopupMenuEntry<Object>>[
PopupMenuItem( PopupMenuItem(
value: SettingsAction.newGroup, value: SettingsAction.newGroup,
@@ -102,6 +120,26 @@ class ClientChooserButton extends StatelessWidget {
), ),
), ),
const PopupMenuDivider(), 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) ...[ for (final bundle in bundles) ...[
if (matrix.accountBundles[bundle]!.length != 1 || if (matrix.accountBundles[bundle]!.length != 1 ||
matrix.accountBundles[bundle]!.single!.userID != bundle) 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),
],
),
),
]; ];
} }

View File

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

View File

@@ -5,16 +5,19 @@
import 'package:material_ui/material_ui.dart'; import 'package:material_ui/material_ui.dart';
import 'package:tatchat/config/themes.dart'; import 'package:tatchat/config/themes.dart';
import 'package:tatchat/l10n/l10n.dart';
import 'package:tatchat/pages/chat_list/tabs/home_tab.dart'; import 'package:tatchat/pages/chat_list/tabs/home_tab.dart';
class ChatTopTabBar extends StatelessWidget { class ChatTopTabBar extends StatelessWidget {
final HomeTab currentTab; final HomeTab currentTab;
final ValueChanged<HomeTab> onTabSelected; final ValueChanged<HomeTab> onTabSelected;
final VoidCallback? onMenuPressed;
const ChatTopTabBar({ const ChatTopTabBar({
super.key, super.key,
required this.currentTab, required this.currentTab,
required this.onTabSelected, required this.onTabSelected,
this.onMenuPressed,
}); });
@override @override
@@ -29,6 +32,12 @@ class ChatTopTabBar extends StatelessWidget {
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround, mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [ children: [
if (onMenuPressed != null)
IconButton(
tooltip: L10n.of(context).menu,
icon: const Icon(Icons.menu),
onPressed: onMenuPressed,
),
for (final tab in HomeTab.values) for (final tab in HomeTab.values)
Expanded( Expanded(
child: InkWell( child: InkWell(
@@ -43,9 +52,7 @@ class ChatTopTabBar extends StatelessWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Icon( Icon(
tab == currentTab tab == currentTab ? tab.selectedIcon : tab.icon,
? tab.selectedIcon
: tab.icon,
size: 20, size: 20,
color: tab == currentTab color: tab == currentTab
? theme.colorScheme.primary ? theme.colorScheme.primary

View File

@@ -4,6 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
import 'package:material_ui/material_ui.dart'; import 'package:material_ui/material_ui.dart';
import 'package:tatchat/config/themes.dart';
import 'package:tatchat/l10n/l10n.dart'; import 'package:tatchat/l10n/l10n.dart';
import 'package:tatchat/pages/chat_list/chat_list.dart'; import 'package:tatchat/pages/chat_list/chat_list.dart';
import 'package:tatchat/pages/chat_list/client_chooser_button.dart'; import 'package:tatchat/pages/chat_list/client_chooser_button.dart';
@@ -72,6 +73,12 @@ class ChatTabHeader extends StatelessWidget {
height: 56, height: 56,
child: Row( child: Row(
children: [ children: [
if (!FluffyThemes.isColumnMode(context))
IconButton(
tooltip: l10n.menu,
icon: const Icon(Icons.menu),
onPressed: () => Scaffold.of(context).openDrawer(),
),
const SizedBox(width: 12), const SizedBox(width: 12),
Icon(tab.icon, size: 22, color: theme.colorScheme.primary), Icon(tab.icon, size: 22, color: theme.colorScheme.primary),
const SizedBox(width: 8), const SizedBox(width: 8),

View File

@@ -71,11 +71,20 @@ class MiniappBridge {
} }
/// Builds the theme palette map sent to mini apps. Colors are serialized as /// 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. /// `#RRGGBBAA` hex strings (CSS 8-digit order) so they can be used directly
static Map<String, Object?> buildPalette(ColorScheme scheme, Brightness brightness) { /// in CSS/JS.
static Map<String, Object?> buildPalette(
ColorScheme scheme,
Brightness brightness,
) {
String hex(Color c) { String hex(Color c) {
final value = c.toARGB32(); 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 { return {

109
lib/utils/miniapp_meta.dart Normal file
View File

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

View File

@@ -4,6 +4,7 @@
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:tatchat/utils/miniapp_meta.dart';
/// Account data key that holds the list of installed mini app IDs. /// Account data key that holds the list of installed mini app IDs.
const String installedMiniAppsKey = 'im.tatuchat.miniapps.installed'; const String installedMiniAppsKey = 'im.tatuchat.miniapps.installed';
@@ -32,16 +33,22 @@ extension MiniAppStoreExtension on Client {
if (apps.contains(appId)) return; if (apps.contains(appId)) return;
apps.add(appId); apps.add(appId);
await setAccountData(userID!, installedMiniAppsKey, {'apps': apps}); await setAccountData(userID!, installedMiniAppsKey, {'apps': apps});
_cacheAccountData(installedMiniAppsKey, {'apps': apps});
} }
Future<void> uninstallMiniApp(String appId) async { Future<void> uninstallMiniApp(String appId) async {
final apps = installedMiniApps..remove(appId); final apps = installedMiniApps..remove(appId);
await setAccountData(userID!, installedMiniAppsKey, {'apps': apps}); await setAccountData(userID!, installedMiniAppsKey, {'apps': apps});
_cacheAccountData(installedMiniAppsKey, {'apps': apps});
// Clear the custom HTML source if present. // Clear the custom HTML source if present.
await setAccountData(userID!, '$miniAppSourceKeyPrefix$appId', { await setAccountData(userID!, '$miniAppSourceKeyPrefix$appId', {
'html': '', 'html': '',
'name': '', 'name': '',
}); });
_cacheAccountData(
'$miniAppSourceKeyPrefix$appId',
{'html': '', 'name': ''},
);
} }
/// Reads the JSON document of the given mini app. Returns an empty map if /// 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 {}; accountData['$miniAppDataKeyPrefix$appId']?.content ?? const {};
/// Overwrites the JSON document of the given mini app. /// Overwrites the JSON document of the given mini app.
Future<void> setMiniAppData(String appId, Map<String, Object?> data) => Future<void> setMiniAppData(String appId, Map<String, Object?> data) async {
setAccountData(userID!, '$miniAppDataKeyPrefix$appId', data); final key = '$miniAppDataKeyPrefix$appId';
await setAccountData(userID!, key, data);
_cacheAccountData(key, data);
}
// ---------- Imported (custom) apps ---------- // ---------- Imported (custom) apps ----------
/// Stores the HTML source and a display name for a user-imported mini app /// Stores the HTML source and the manifest of a user-imported mini app and
/// and adds it to the installed list if not already present. /// 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({ Future<void> importMiniApp({
required String appId, required MiniAppMeta meta,
required String name,
required String html, required String html,
}) async { }) async {
await setAccountData(userID!, '$miniAppSourceKeyPrefix$appId', { final sourceKey = '$miniAppSourceKeyPrefix${meta.id}';
'name': name, final content = <String, Object?>{
'name': meta.name,
'category': meta.category,
'description': meta.description,
'logo': meta.logo,
'inChat': meta.inChat,
'html': html, 'html': html,
}); };
await setAccountData(userID!, sourceKey, content);
_cacheAccountData(sourceKey, content);
final apps = installedMiniApps; final apps = installedMiniApps;
if (!apps.contains(appId)) { if (!apps.contains(meta.id)) {
apps.add(appId); apps.add(meta.id);
await setAccountData(userID!, installedMiniAppsKey, {'apps': apps}); 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 /// Returns the raw HTML source of an imported mini app, or null if the app
/// is a built-in app or was never imported. /// is a built-in app or was never imported.
String? getMiniAppSource(String appId) { String? getMiniAppSource(String appId) {
@@ -85,10 +110,36 @@ extension MiniAppStoreExtension on Client {
/// Returns the display name of an imported mini app, or null. /// Returns the display name of an imported mini app, or null.
String? getMiniAppName(String appId) { String? getMiniAppName(String appId) {
final content = final content = accountData['$miniAppSourceKeyPrefix$appId']?.content;
accountData['$miniAppSourceKeyPrefix$appId']?.content; return _stringContent(content, 'name');
if (content == null) return null; }
final name = content['name'];
return (name is String && name.isNotEmpty) ? name : null; /// 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;
} }
} }

View File

@@ -0,0 +1,94 @@
// SPDX-FileCopyrightText: 2026 TatuChat
//
// SPDX-License-Identifier: AGPL-3.0-or-later
import 'package:flutter_test/flutter_test.dart';
import 'package:tatchat/utils/miniapp_meta.dart';
void main() {
test('Parses a valid manifest from meta tags', () {
const html = '''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="mini-app-id" content="myapp">
<meta name="mini-app-name" content="My App">
<meta name="mini-app-category" content="productivity">
<meta name="mini-app-description" content="Does things">
<meta name="mini-app-logo" content="data:image/png;base64,AAAA">
<meta name="mini-app-in-chat" content="TRUE">
</head>
<body></body>
</html>
''';
final meta = parseMiniAppMeta(html);
expect(meta.id, 'myapp');
expect(meta.name, 'My App');
expect(meta.category, 'productivity');
expect(meta.description, 'Does things');
expect(meta.logo, 'data:image/png;base64,AAAA');
expect(meta.inChat, isTrue);
});
test('Allows empty optional values and defaults inChat to false', () {
const html = '''
<html><head>
<meta name="mini-app-id" content="empty">
<meta name="mini-app-name" content="Empty">
<meta name="mini-app-category" content="">
<meta name="mini-app-description" content="">
<meta name="mini-app-logo" content="">
<meta name="mini-app-in-chat" content="">
</head></html>
''';
final meta = parseMiniAppMeta(html);
expect(meta.id, 'empty');
expect(meta.name, 'Empty');
expect(meta.category, '');
expect(meta.description, '');
expect(meta.logo, '');
expect(meta.inChat, isFalse);
});
test('Independent of attribute order and quoting style', () {
final tags = extractMetaTags(
'<meta content="x" name="mini-app-id">'
"<meta name='mini-app-name' content='N'>",
);
expect(tags['mini-app-id'], 'x');
expect(tags['mini-app-name'], 'N');
});
test('Rejects documents missing required meta tags', () {
expect(() => parseMiniAppMeta('<html><head></head></html>'),
throwsFormatException);
const missingOptional = '''
<meta name="mini-app-id" content="myapp">
<meta name="mini-app-name" content="My App">
''';
expect(() => parseMiniAppMeta(missingOptional), throwsFormatException);
});
test('Rejects empty or missing id/name', () {
const emptyId = '''
<meta name="mini-app-id" content="">
<meta name="mini-app-name" content="My App">
<meta name="mini-app-category" content="">
<meta name="mini-app-description" content="">
<meta name="mini-app-logo" content="">
<meta name="mini-app-in-chat" content="">
''';
expect(() => parseMiniAppMeta(emptyId), throwsFormatException);
const emptyName = '''
<meta name="mini-app-id" content="myapp">
<meta name="mini-app-name" content=" ">
<meta name="mini-app-category" content="">
<meta name="mini-app-description" content="">
<meta name="mini-app-logo" content="">
<meta name="mini-app-in-chat" content="">
''';
expect(() => parseMiniAppMeta(emptyName), throwsFormatException);
});
}