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>
|
<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, '"');
|
.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();
|
init();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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, ...
|
||||||
// }
|
// }
|
||||||
|
|||||||
@@ -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),
|
||||||
),
|
),
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
|
|||||||
@@ -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": {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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.",
|
||||||
|
|||||||
@@ -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,16 +106,24 @@ 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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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:
|
||||||
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:
|
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(
|
||||||
title: Text(miniAppName(context, app)),
|
subtitle,
|
||||||
|
maxLines: 3,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
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),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -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),
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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(
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
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: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
|
||||||
@@ -112,4 +119,4 @@ class ChatBottomTabBar extends StatelessWidget {
|
|||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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),
|
||||||
@@ -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
|
/// 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
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
|
// 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
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