Add notification center in dashboard.

Author: pierre-rouanet

src/reachy_mini/daemon/app/dashboard/static/js/notification.js

@@ -0,0 +1,41 @@
+const notificationCenter = {
+
+    showInfo: (message, duration = 5000, autoclose = true) => {
+        notificationCenter.showNotification(message, false, duration, autoclose);
+    },
+    showError: (message, duration = 5000, autoclose = false) => {
+        message = notificationCenter.errorTranslation(message);
+        notificationCenter.showNotification(message, true, duration, autoclose);
+    },
+
+    showNotification: (message, error, duration = 5000, autoclose = true) => {
+        document.getElementById('notification-message').textContent = message;
+        document.getElementById('notification-modal').style.display = 'block';
+
+        if (error) {
+            document.getElementById('notification-content').classList.add('error');
+            document.getElementById('notification-content').classList.remove('info');
+        } else {
+            document.getElementById('notification-content').classList.remove('error');
+            document.getElementById('notification-content').classList.add('info');
+        }
+
+        if (autoclose) {
+            setTimeout(notificationCenter.closeNotification, duration);
+        }
+    },
+
+    closeNotification: () => {
+        document.getElementById('notification-modal').style.display = 'none';
+    },
+
+    errorTranslation: (errorMessage) => {
+        if (errorMessage.includes('No Reachy Mini serial port found.')) {
+            return 'Reachy Mini not detected on USB. Please check that the USB cable is properly connected.';
+        }
+
+        console.log('No translation found for error message:', errorMessage);
+        return errorMessage;
+    },
+
+};

src/reachy_mini/daemon/app/dashboard/static/style.css

@@ -94,3 +94,60 @@ body {
     font-weight: 400;
     color: rgba(0, 0, 0, 0.7);
 }
+
+
+.notification-modal {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 9999;
+    min-width: 300px;
+    max-width: 400px;
+    background: #fff;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    display: none;
+    animation: fadeInUp 0.3s;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.notification-content {
+    padding: 20px 28px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* Notification variants */
+.notification-content.info {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+}
+
+.notification-content.error {
+    background: #ffeaea;
+    border: 1px solid #ff4d4f;
+    color: #b71c1c;
+}
+
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: #888;
+}

src/reachy_mini/daemon/app/dashboard/templates/index.html

@@ -6,6 +6,7 @@
     {% include "sections/daemon.html" %}
     {% include "sections/apps.html" %}
     {% include "sections/appstore.html" %}
+    {% include "sections/notification.html" %}
 </div>
 {% endblock %}
 
@@ -14,4 +15,5 @@
 <script src="/static/js/apps.js"></script>
 <script src="/static/js/appstore.js"></script>
 <script src="/static/js/move_player.js"></script>
+<script src="/static/js/notification.js"></script>
 {% endblock %}

src/reachy_mini/daemon/app/dashboard/templates/sections/notification.html

@@ -0,0 +1,19 @@
+<!-- Notification Modal (Bottom Right) -->
+<div id="notification-modal" class="notification-modal">
+    <div class="notification-content" id="notification-content">
+        <!-- Notification message will appear here -->
+        <span id="notification-message"></span>
+        <button class="close-btn" onclick="closeNotification()">×</button>
+    </div>
+</div>
+
+<script>
+    function showNotification(message) {
+        document.getElementById('notification-message').textContent = message;
+        document.getElementById('notification-modal').style.display = 'block';
+        setTimeout(closeNotification, 5000); // Auto-close after 5s
+    }
+    function closeNotification() {
+        document.getElementById('notification-modal').style.display = 'none';
+    }
+</script>