From 17f605cf5fb09125998f826823e0fa2c8b241a79 Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Tue, 20 Jan 2026 11:45:02 +0100
Subject: [PATCH] fix toast display and auto-dismiss

- Wrap toast message in span for proper text rendering
- Use setTimeout instead of mosis.timer for auto-dismiss
- Remove unsupported CSS animation property
- Add explicit color to toast variants
- Change px to dp units for RmlUi compatibility

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/main/assets/apps/shell/shell.lua | 13 ++++++-------
 src/main/assets/apps/shell/shell.rml | 11 +++++++----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/main/assets/apps/shell/shell.lua b/src/main/assets/apps/shell/shell.lua
index 0cb2bcd..95b97f2 100644
--- a/src/main/assets/apps/shell/shell.lua
+++ b/src/main/assets/apps/shell/shell.lua
@@ -227,14 +227,13 @@ function showToast(message, type)
         class = "toast toast-warning"
     end
 
-    -- Add toast element
-    local toast_html = '<div class="' .. class .. '">' .. message .. '</div>'
-    container.inner_rml = container.inner_rml .. toast_html
+    -- Clear existing toasts and add new one
+    local toast_html = '<div class="' .. class .. '"><span>' .. message .. '</span></div>'
+    container.inner_rml = toast_html
 
-    -- Auto-remove after 3 seconds (would need timer API)
-    if mosis and mosis.timer then
-        mosis.timer.setTimeout(function()
-            -- Remove first toast
+    -- Auto-remove after 3 seconds
+    if setTimeout then
+        setTimeout(function()
             container.inner_rml = ""
         end, 3000)
     end
diff --git a/src/main/assets/apps/shell/shell.rml b/src/main/assets/apps/shell/shell.rml
index 02a44df..9cfb1f6 100644
--- a/src/main/assets/apps/shell/shell.rml
+++ b/src/main/assets/apps/shell/shell.rml
@@ -113,24 +113,27 @@
         .toast {
             background-color: #323232;
             color: #FFFFFF;
-            padding: 14px 24px;
-            border-radius: 8px;
-            font-size: 14px;
+            padding: 14dp 24dp;
+            border-radius: 8dp;
+            font-size: 14dp;
             text-align: center;
             pointer-events: auto;
-            animation: toast-in 0.3s ease-out;
+            width: auto;
         }
 
         .toast-success {
             background-color: #4CAF50;
+            color: #FFFFFF;
         }
 
         .toast-error {
             background-color: #F44336;
+            color: #FFFFFF;
         }
 
         .toast-warning {
             background-color: #FF9800;
+            color: #000000;
         }
 
         @keyframes toast-in {