UI improvements: official icon, bigger joystick, simplified controls

- Replace custom SVG with official Reachy Mini icon from desktop app
- Remove Motors panel and Animations panel
- Make joystick and roll slider larger (200px/180px)
- Cleaner sidebar with only essential controls

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.html

@@ -54,9 +54,10 @@
             gap: 12px;
         }
 
-        .logo svg {
+        .logo img {
             width: 36px;
             height: 36px;
+            border-radius: 8px;
         }
 
         .logo-text {
@@ -332,18 +333,19 @@
         /* Joystick */
         .joystick-container {
             display: flex;
-            gap: 16px;
+            gap: 24px;
             align-items: center;
             justify-content: center;
+            padding: 10px 0;
         }
 
         .joystick-area {
-            width: 160px;
-            height: 160px;
+            width: 200px;
+            height: 200px;
             background: radial-gradient(circle at center, var(--pollen-card-light) 0%, var(--pollen-darker) 100%);
             border-radius: 50%;
             position: relative;
-            border: 2px solid var(--pollen-coral);
+            border: 3px solid var(--pollen-coral);
             touch-action: none;
             cursor: grab;
         }
@@ -353,64 +355,67 @@
         }
 
         .joystick-knob {
-            width: 50px;
-            height: 50px;
+            width: 60px;
+            height: 60px;
             background: var(--pollen-coral);
             border-radius: 50%;
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            box-shadow: 0 4px 12px rgba(255,107,53,0.4);
+            box-shadow: 0 4px 16px rgba(255,107,53,0.5);
             pointer-events: none;
             transition: box-shadow 0.2s;
         }
 
         .joystick-area:active .joystick-knob {
-            box-shadow: 0 6px 20px rgba(255,107,53,0.6);
+            box-shadow: 0 6px 24px rgba(255,107,53,0.7);
         }
 
         .joystick-labels {
             position: absolute;
-            font-size: 0.7em;
+            font-size: 0.75em;
             color: var(--text-muted);
+            font-weight: 500;
         }
 
-        .joystick-labels.top { top: 8px; left: 50%; transform: translateX(-50%); }
-        .joystick-labels.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
-        .joystick-labels.left { left: 8px; top: 50%; transform: translateY(-50%); }
-        .joystick-labels.right { right: 8px; top: 50%; transform: translateY(-50%); }
+        .joystick-labels.top { top: 12px; left: 50%; transform: translateX(-50%); }
+        .joystick-labels.bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
+        .joystick-labels.left { left: 10px; top: 50%; transform: translateY(-50%); }
+        .joystick-labels.right { right: 10px; top: 50%; transform: translateY(-50%); }
 
         .z-slider-container {
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 8px;
+            gap: 10px;
         }
 
         .z-slider {
             writing-mode: vertical-lr;
             direction: rtl;
-            height: 140px;
-            width: 8px;
+            height: 180px;
+            width: 12px;
             -webkit-appearance: none;
             background: var(--pollen-darker);
-            border-radius: 4px;
+            border-radius: 6px;
+            border: 2px solid var(--pollen-card-light);
         }
 
         .z-slider::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
             background: var(--pollen-coral);
             border-radius: 50%;
             cursor: pointer;
-            box-shadow: 0 2px 8px rgba(255,107,53,0.4);
+            box-shadow: 0 2px 10px rgba(255,107,53,0.5);
         }
 
         .z-label {
-            font-size: 0.75em;
+            font-size: 0.8em;
             color: var(--text-muted);
+            font-weight: 500;
         }
 
         /* Sliders */
@@ -758,7 +763,11 @@
             }
 
             .joystick-area {
-                width: 140px;
+                width: 160px;
+                height: 160px;
+            }
+
+            .z-slider {
                 height: 140px;
             }
 
@@ -781,14 +790,7 @@
     <!-- Login View -->
     <div id="loginView" class="login-view">
         <div class="login-card">
-            <svg class="login-logo" viewBox="0 0 100 100" fill="none">
-                <circle cx="50" cy="50" r="45" stroke="#FF6B35" stroke-width="4"/>
-                <circle cx="35" cy="40" r="8" fill="#FF6B35"/>
-                <circle cx="65" cy="40" r="8" fill="#FF6B35"/>
-                <path d="M30 60 Q50 80 70 60" stroke="#FF6B35" stroke-width="4" fill="none" stroke-linecap="round"/>
-                <path d="M25 20 L35 35" stroke="#FF6B35" stroke-width="3" stroke-linecap="round"/>
-                <path d="M75 20 L65 35" stroke="#FF6B35" stroke-width="3" stroke-linecap="round"/>
-            </svg>
+            <img class="login-logo" src="https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png" alt="Reachy Mini">
             <h2>Reachy Mini</h2>
             <p>Sign in with your HuggingFace account to connect and control your robot remotely.</p>
             <button class="btn-hf" onclick="loginToHuggingFace()">
@@ -804,14 +806,7 @@
     <div id="mainApp" class="hidden">
         <header class="header">
             <div class="logo">
-                <svg viewBox="0 0 100 100" fill="none">
-                    <circle cx="50" cy="50" r="45" stroke="#FF6B35" stroke-width="4"/>
-                    <circle cx="35" cy="40" r="8" fill="#FF6B35"/>
-                    <circle cx="65" cy="40" r="8" fill="#FF6B35"/>
-                    <path d="M30 60 Q50 80 70 60" stroke="#FF6B35" stroke-width="4" fill="none" stroke-linecap="round"/>
-                    <path d="M25 20 L35 35" stroke="#FF6B35" stroke-width="3" stroke-linecap="round"/>
-                    <path d="M75 20 L65 35" stroke="#FF6B35" stroke-width="3" stroke-linecap="round"/>
-                </svg>
+                <img src="https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png" alt="Reachy Mini">
                 <div class="logo-text">Reachy Mini <span>by Pollen Robotics</span></div>
             </div>
             <div class="user-section">
@@ -890,18 +885,6 @@
 
             <!-- Control Sidebar -->
             <div class="control-sidebar">
-                <!-- Motors -->
-                <div class="panel">
-                    <div class="panel-header">Motors</div>
-                    <div class="panel-content">
-                        <div class="motor-grid">
-                            <button class="motor-btn on" id="btnMotorOn" onclick="setMotorMode('enabled')" disabled>ON</button>
-                            <button class="motor-btn off" id="btnMotorOff" onclick="setMotorMode('disabled')" disabled>OFF</button>
-                            <button class="motor-btn gravity" id="btnMotorGrav" onclick="setMotorMode('gravity_compensation')" disabled>Gravity</button>
-                        </div>
-                    </div>
-                </div>
-
                 <!-- Joystick Control -->
                 <div class="panel">
                     <div class="panel-header">Position Control (Relative)</div>
@@ -982,17 +965,6 @@
                     </div>
                 </div>
 
-                <!-- Animations -->
-                <div class="panel">
-                    <div class="panel-header">Animations</div>
-                    <div class="panel-content">
-                        <div class="action-grid">
-                            <button class="action-btn" id="btnWakeUp" onclick="wakeUp()" disabled>Wake Up</button>
-                            <button class="action-btn" id="btnSleep" onclick="goToSleep()" disabled>Sleep</button>
-                        </div>
-                    </div>
-                </div>
-
                 <!-- Sound & Speak -->
                 <div class="panel">
                     <div class="panel-header">Sound & Speak</div>
@@ -1413,7 +1385,7 @@
         }
 
         function enableControls(enabled) {
-            const btns = ['btnMotorOn', 'btnMotorOff', 'btnMotorGrav', 'btnWakeUp', 'btnSleep', 'btnPlaySound', 'btnStartRec', 'btnStopRec'];
+            const btns = ['btnPlaySound', 'btnStartRec', 'btnStopRec'];
             btns.forEach(id => document.getElementById(id).disabled = !enabled);
         }
 
@@ -1423,7 +1395,6 @@
                 updateRobotState(data.state);
             } else if (data.motor_mode) {
                 robotState.motorMode = data.motor_mode;
-                updateMotorButtons(data.motor_mode);
                 document.getElementById('stateMotors').textContent = data.motor_mode;
             } else if (data.error) {
                 console.error('Robot error:', data.error);
@@ -1434,7 +1405,6 @@
             if (state.motor_mode) {
                 robotState.motorMode = state.motor_mode;
                 document.getElementById('stateMotors').textContent = state.motor_mode;
-                updateMotorButtons(state.motor_mode);
             }
 
             if (state.head_pose) {
@@ -1503,12 +1473,6 @@
             }
         }
 
-        function updateMotorButtons(mode) {
-            document.getElementById('btnMotorOn').classList.toggle('active', mode === 'enabled');
-            document.getElementById('btnMotorOff').classList.toggle('active', mode === 'disabled');
-            document.getElementById('btnMotorGrav').classList.toggle('active', mode === 'gravity_compensation');
-        }
-
         // ===================== Joystick =====================
         function initJoystick() {
             const joystick = document.getElementById('joystick');