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/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 %}