feat: tela de apps com logos/menu de exclusao, correcao de tema nas mini apps e sidebar de navegacao
This commit is contained in:
@@ -3,6 +3,12 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
<style>
|
||||
:root {
|
||||
@@ -261,6 +267,7 @@
|
||||
window.addEventListener('message', function (event) {
|
||||
const msg = event.data;
|
||||
if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return;
|
||||
if (msg.response === undefined) return;
|
||||
if (!_pending.has(msg.requestId)) return;
|
||||
const pending = _pending.get(msg.requestId);
|
||||
_pending.delete(msg.requestId);
|
||||
@@ -472,6 +479,34 @@
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
// 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();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -3,6 +3,12 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
<style>
|
||||
:root {
|
||||
@@ -125,6 +131,7 @@
|
||||
window.addEventListener('message', function (event) {
|
||||
const msg = event.data;
|
||||
if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return;
|
||||
if (msg.response === undefined) return;
|
||||
if (!_pending.has(msg.requestId)) return;
|
||||
const pending = _pending.get(msg.requestId);
|
||||
_pending.delete(msg.requestId);
|
||||
@@ -203,6 +210,32 @@
|
||||
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);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -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
|
||||
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
|
||||
|
||||
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) {
|
||||
const msg = event.data;
|
||||
if (!msg || msg.api !== 'fromMiniApp' || !msg.requestId) return;
|
||||
if (msg.response === undefined) return;
|
||||
if (!_pending.has(msg.requestId)) return;
|
||||
const pending = _pending.get(msg.requestId);
|
||||
_pending.delete(msg.requestId);
|
||||
const response = msg.response || {};
|
||||
const response = msg.response;
|
||||
if (response.error) pending.reject(new Error(response.error));
|
||||
else pending.resolve(response.data);
|
||||
});
|
||||
@@ -121,18 +152,18 @@ only if `avatarDataUri` is absent.
|
||||
### `io.tatuchat.theme.get`
|
||||
|
||||
Resolves with the color palette currently used by TatuChat, so your app can
|
||||
match the ecosystem (light/dark aware). Colors are `#AARRGGBB` hex strings
|
||||
suitable for CSS.
|
||||
match the ecosystem (light/dark aware). Colors are `#RRGGBBAA` hex strings
|
||||
(CSS 8-digit order: red, green, blue, alpha) suitable for CSS.
|
||||
|
||||
```js
|
||||
const { palette } = await bridgeRequest('io.tatuchat.theme.get');
|
||||
// => {
|
||||
// brightness: 'light' | 'dark',
|
||||
// primary: '#FF00D084',
|
||||
// onPrimary: '#FF000000',
|
||||
// primaryContainer: '#FF...',
|
||||
// surface: '#FF...',
|
||||
// surfaceContainerLowest/Low/Container/High/Highest: '#FF...',
|
||||
// primary: '#00D084FF',
|
||||
// onPrimary: '#000000FF',
|
||||
// primaryContainer: '#00D08433',
|
||||
// surface: '#FEF7FF00',
|
||||
// surfaceContainerLowest/Low/Container/High/Highest: '#…',
|
||||
// secondary..., tertiary..., error...,
|
||||
// outline, outlineVariant, background, onBackground, onSurface, ...
|
||||
// }
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
];
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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": {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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.",
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
],
|
||||
),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
312
lib/pages/chat_list/sidebar.dart
Normal file
312
lib/pages/chat_list/sidebar.dart
Normal 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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
109
lib/utils/miniapp_meta.dart
Normal file
109
lib/utils/miniapp_meta.dart
Normal 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',
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
94
test/miniapp_meta_test.dart
Normal file
94
test/miniapp_meta_test.dart
Normal 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);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user