From 969b32ab68efb5df260b904b647c38575b809777 Mon Sep 17 00:00:00 2001
From: Koha9 <36852125+Koha9@users.noreply.github.com>
Date: Sun, 13 Jul 2025 06:56:26 +0900
Subject: [PATCH 1/4] feat(ui): add bootstrap toast for messages

---
 app/main.py                 |  5 +++--
 app/templates/base.html     | 20 ++++++++++++++++++++
 app/templates/login.html    |  3 ---
 app/templates/playlist.html |  3 ---
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/main.py b/app/main.py
index f800ce5..4387724 100644
--- a/app/main.py
+++ b/app/main.py
@@ -85,7 +85,7 @@ async def login(
             {
                 "request": request,
                 "message": "连接成功",
-                "success": True,
+                "message_type": "success",
                 "theme": server_config.theme,
                 "path": "/login",
                 "token": token,
@@ -100,7 +100,7 @@ async def login(
             {
                 "request": request,
                 "message": f"连接失败：{str(e)}",
-                "success": False,
+                "message_type": "danger",
                 "theme": server_config.theme,
                 "path": "/login",
                 "scheme": scheme,
@@ -128,6 +128,7 @@ async def set_playlist(
         {
             "request": request,
             "message": f"设置成功：地址 {address}，间隔 {interval} 分钟",
+            "message_type": "info",
             "theme": server_config.theme,
             "path": "/playlist",
         },
diff --git a/app/templates/base.html b/app/templates/base.html
index 828078a..6921acf 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -87,6 +87,18 @@
             <main class="col ms-sm-auto px-md-4 py-4">
                 {% block content %}{% endblock %}
             </main>
+            {% if message %}
+            <div class="position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1055; margin-top: 20px;">
+                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0" role="alert" aria-live="assertive" aria-atomic="true">
+                    <div class="d-flex">
+                        <div class="toast-body">
+                            {{ message }}
+                        </div>
+                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                    </div>
+                </div>
+            </div>
+            {% endif %}
         </div>
     </div>
 
@@ -106,6 +118,14 @@
             // listen for system theme changes
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyAutoTheme);
         }
+        // show toast message
+        document.addEventListener('DOMContentLoaded', () => {
+            const toastEl = document.getElementById('messageToast');
+            if (toastEl) {
+                const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
+                toast.show();
+            }
+        });
     </script>
 </body>
 
diff --git a/app/templates/login.html b/app/templates/login.html
index c5bfd43..24de3f8 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -35,9 +35,6 @@
     <button type="submit" class="btn btn-primary">连接</button>
 </form>
 
-{% if message %}
-<div class="alert alert-{{ 'success' if success else 'danger' }} mt-4">{{ message }}</div>
-{% endif %}
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         const tokenInput = document.getElementById('token');
diff --git a/app/templates/playlist.html b/app/templates/playlist.html
index 4d4db62..aeaa3e4 100644
--- a/app/templates/playlist.html
+++ b/app/templates/playlist.html
@@ -20,7 +20,4 @@
     <button type="submit" class="btn btn-success">保存设置</button>
 </form>
 
-{% if message %}
-<div class="alert alert-info mt-4">{{ message }}</div>
-{% endif %}
 {% endblock %}
\ No newline at end of file

From bf67d702dceefdfd32b9b104b32039ac89f831d1 Mon Sep 17 00:00:00 2001
From: Koha9 <36852125+Koha9@users.noreply.github.com>
Date: Sun, 13 Jul 2025 07:07:41 +0900
Subject: [PATCH 2/4] Center toast and add glass style

---
 app/static/styles.css   | 8 +++++++-
 app/templates/base.html | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index f23944f..08bc6df 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -1,3 +1,9 @@
 .custom-sidebar {
     max-width: 300px !important; /* 设置最大宽度为 300px */
-}
\ No newline at end of file
+}
+
+/* Toast with frosted glass effect */
+.glass-toast {
+    backdrop-filter: blur(8px);
+    background-color: rgba(var(--bs-body-bg-rgb), 0.75) !important;
+}
diff --git a/app/templates/base.html b/app/templates/base.html
index 6921acf..9be36ef 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -88,8 +88,8 @@
                 {% block content %}{% endblock %}
             </main>
             {% if message %}
-            <div class="position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1055; margin-top: 20px;">
-                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0" role="alert" aria-live="assertive" aria-atomic="true">
+            <div class="position-fixed top-0 start-50 translate-middle-x p-3 w-75" style="z-index: 1055; margin-top: 20px;">
+                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0 glass-toast w-100" role="alert" aria-live="assertive" aria-atomic="true">
                     <div class="d-flex">
                         <div class="toast-body">
                             {{ message }}

From 43a9c01f13703ebcf84be33ef8b2a833c9dbd05c Mon Sep 17 00:00:00 2001
From: Koha9 <36852125+Koha9@users.noreply.github.com>
Date: Sun, 13 Jul 2025 07:18:14 +0900
Subject: [PATCH 3/4] Tint toast glass effect with message color

---
 app/static/styles.css   | 13 ++++++++++++-
 app/templates/base.html |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index 08bc6df..c9fe6ca 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -5,5 +5,16 @@
 /* Toast with frosted glass effect */
 .glass-toast {
     backdrop-filter: blur(8px);
-    background-color: rgba(var(--bs-body-bg-rgb), 0.75) !important;
+}
+
+.glass-toast-success {
+    background-color: rgba(var(--bs-success-rgb), 0.75) !important;
+}
+
+.glass-toast-danger {
+    background-color: rgba(var(--bs-danger-rgb), 0.75) !important;
+}
+
+.glass-toast-info {
+    background-color: rgba(var(--bs-info-rgb), 0.75) !important;
 }
diff --git a/app/templates/base.html b/app/templates/base.html
index 9be36ef..6f4f810 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -89,7 +89,7 @@
             </main>
             {% if message %}
             <div class="position-fixed top-0 start-50 translate-middle-x p-3 w-75" style="z-index: 1055; margin-top: 20px;">
-                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0 glass-toast w-100" role="alert" aria-live="assertive" aria-atomic="true">
+                <div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0 glass-toast glass-toast-{{ message_type | default('info') }} w-100" role="alert" aria-live="assertive" aria-atomic="true">
                     <div class="d-flex">
                         <div class="toast-body">
                             {{ message }}

From 82f18dea9b5475d758392b6174d5ca6936453627 Mon Sep 17 00:00:00 2001
From: Koha9 <ucunicorn@hotmail.com>
Date: Sun, 13 Jul 2025 07:24:50 +0900
Subject: [PATCH 4/4] adjust backdrop blur for glass toast effect.

---
 app/static/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index c9fe6ca..4e45fc8 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -4,7 +4,7 @@
 
 /* Toast with frosted glass effect */
 .glass-toast {
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(5px);
 }
 
 .glass-toast-success {