feat: implement right-click context menu for style customization and enhance real-time stats tracking

frontend/src/components/SendButton.vue

@@ -1,12 +1,14 @@
-<!-- Bouton d'envoi circulaire avec flèche cyan -->
+<!-- Bouton d'envoi — clic gauche : envoyer / clic droit : personnaliser le style -->
 <template>
   <button
     class="send-btn"
     :disabled="disabled"
+    :style="btnStyle"
     aria-label="Envoyer"
+    title="Clic droit pour personnaliser"
     @click="$emit('send')"
+    @contextmenu.prevent="onRightClick"
   >
-    <!-- Flèche droite SVG (identique au SVG de la maquette) -->
     <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
       <polygon points="4,5 15,9 4,13 7,9" fill="currentColor" />
     </svg>
@@ -14,38 +16,49 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { openContextMenu } from '@/composables/useContextMenu';
+import { useCustomStyles, SEND_BUTTON_PRESETS } from '@/composables/useCustomStyles';
+
 defineProps<{ disabled?: boolean }>();
 defineEmits<{ send: [] }>();
+
+const { prefs } = useCustomStyles();
+
+const btnStyle = computed(() => {
+  const p = SEND_BUTTON_PRESETS[prefs.sendButton];
+  return { background: p.bg, color: p.color, borderRadius: p.radius };
+});
+
+function onRightClick(e: MouseEvent): void {
+  openContextMenu({
+    x: e.clientX,
+    y: e.clientY,
+    title: 'Bouton d\'envoi',
+    items: Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
+      value: k,
+      label: v.label,
+      swatch: v.color,
+    })),
+    current: prefs.sendButton,
+    onSelect: (v) => { prefs.sendButton = v as typeof prefs.sendButton; },
+  });
+}
 </script>
 
 <style scoped>
 .send-btn {
   width: 42px;
   height: 42px;
-  border-radius: 50%;
   flex-shrink: 0;
-  background: #004488;
-  border: 1px solid #004466;
-  color: #00ddff;
+  border: 1px solid #ffffff10;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 0 12px #00448866;
-  transition: background 0.15s, box-shadow 0.15s;
-}
-
-.send-btn:hover:not(:disabled) {
-  background: #005599;
-  box-shadow: 0 0 20px #00ddff55;
-}
-
-.send-btn:active:not(:disabled) {
-  background: #003377;
-}
-
-.send-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
+  transition: filter 0.15s;
 }
+.send-btn:hover:not(:disabled) { filter: brightness(1.3); }
+.send-btn:active:not(:disabled) { filter: brightness(0.85); }
+.send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
 </style>