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

assets/miniapps/accountdata.html

@@ -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, '&quot;');
   }
 
+  // Follow the theme TatuChat is *actually* using instead of the environment's
+  // `prefers-color-scheme` (which on native webviews follows the device, not
+  // the app). Applies the palette reported by `io.tatuchat.theme.get`.
+  function applyTatuTheme(palette) {
+    if (!palette) return;
+    var root = document.documentElement.style;
+    var vars = {
+      '--accent': palette.primary,
+      '--bg': palette.surface,
+      '--fg': palette.onSurface,
+      '--card': palette.surfaceContainer,
+      '--border': palette.outlineVariant,
+      '--muted': palette.onSurfaceVariant,
+      '--danger': palette.error,
+      '--ok': palette.primary
+    };
+    Object.keys(vars).forEach(function (key) {
+      if (vars[key]) root.setProperty(key, vars[key]);
+    });
+    if (palette.brightness) {
+      document.documentElement.style.colorScheme = palette.brightness;
+    }
+  }
+
+  bridgeRequest('io.tatuchat.theme.get').then(function (res) {
+    applyTatuTheme(res && res.palette);
+  }).catch(function () {});
+
   init();
 </script>
 </body>

assets/miniapps/tasks.html

@@ -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>