Refactor toast notifications and modal dialog implementation

- Updated SCSS for toast notifications to support multiple toast types (success, info, warning, error) and improved layout.
- Added new SVG icons for error, info, success, and warning notifications.
- Created separate HTML templates for toast notifications and modal dialogs.
- Enhanced the dev panel with buttons to test different toast notifications and modal dialogs.

backend/templates/base.html

@@ -23,15 +23,8 @@
             dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
         </script>
 
-        <div id="toasts">
-            <div id="toast"></div>
-        </div>
-
-        <dialog id="modal-dialog">
-            <div class="content"></div>
-            <input type="button" class="ok" value="OK">
-            <input type="button" class="cancel" value="Cancel">
-        </dialog>
+        {% include "toast.html" %}
+        {% include "modal_dialog.html" %}
 
         {% block body_container %}{% endblock %}
 

backend/templates/dev_panel.html

@@ -3,14 +3,31 @@
 {% block content %}
 
 <div class="content" id="dev-panel">
-    <input type="button" class="button" id="test-toast" value="Test toast">
-    <input type="button" class="button" id="test-modal-dialog" value="Test modal">
+    <div>
+        <input type="button" class="button" id="test-toast" value="Test toast">
+        <input type="button" class="button" id="test-toast-success" value="Test toast success">
+        <input type="button" class="button" id="test-toast-info" value="Test toast info">
+        <input type="button" class="button" id="test-toast-warning" value="Test toast warning">
+        <input type="button" class="button" id="test-toast-error" value="Test toast error">
+
+        <input type="button" class="button" id="test-toast-success-content" value="Test toast content">
+        <input type="button" class="button" id="test-toast-success-content-initializer" value="Test toast content initializer">
+    </div>
+
+    <div>
+        <input type="button" class="button" id="test-modal-dialog" value="Test modal">
+    </div>
 </div>
 
 <div id="hidden-templates">
     <div class="modal-test-message">
         This is a message.
     </div>
+
+    <div class="toast-test-content">
+        <span>Item 1</span>
+        <span>Item 2</span>
+    </div>
 </div>
 
 {% endblock %}

backend/templates/modal_dialog.html

@@ -0,0 +1,6 @@
+{# Needed by the frontend modal_dialog module. #}
+<dialog id="modal-dialog">
+    <div class="content"></div>
+    <input type="button" class="ok" value="OK">
+    <input type="button" class="cancel" value="Cancel">
+</dialog>

backend/templates/toast.html

@@ -0,0 +1,8 @@
+{# Needed by the frontend toast module. #}
+<div id="toasts">
+    <div class="toast">
+        <img class="icon" width="24" height="24">
+        <div class="content"></div>
+        <span class="close button">✖</span>
+    </div>
+</div>