tqff

frontend/src/components/SendButton.vue

@@ -40,18 +40,33 @@ const btnStyle = computed(() => {
 });
 
 function onRightClick(e: MouseEvent): void {
-  if (!myPerks.value.elementSkin) return;
+  const skins = myPerks.value.sendSkins ?? [];
+  const items: import('@/composables/useContextMenu').ContextMenuItem[] = [
+    ...Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
+      value: k,
+      label: v.label,
+      swatch: v.color,
+      checked: prefs.sendButton === k,
+    })),
+  ];
+  if (skins.length > 0) {
+    items.push({ value: '__skin_header__', label: 'Skin', isHeader: true });
+    items.push({ value: '__default_skin__', label: 'Défaut', emoji: '▶', checked: prefs.sendSkin === '' });
+    for (const s of skins) {
+      items.push({ value: s.id, label: s.label ?? s.id.replace('send-skin-', ''), emoji: s.char, checked: prefs.sendSkin === s.id });
+    }
+  }
   openContextMenu({
     x: e.clientX,
     y: e.clientY,
     title: 'Bouton d\'envoi',
-    items: Object.entries(SEND_BUTTON_PRESETS).map(([k, v]) => ({
+    items,
-      value: k,
+    current: '',
-      label: v.label,
+    onSelect: (v) => {
-      swatch: v.color,
+      if (v === '__default_skin__') { prefs.sendSkin = ''; }
-    })),
+      else if (v.startsWith('send-skin-')) { prefs.sendSkin = v; }
-    current: prefs.sendButton,
+      else { prefs.sendButton = v as typeof prefs.sendButton; }
-    onSelect: (v) => { prefs.sendButton = v as typeof prefs.sendButton; },
+    },
   });
 }
 </script>

frontend/src/components/StyleContextMenu.vue

@@ -14,10 +14,11 @@
         <button
           v-else
           class="ctx-item"
-          :class="{ 'ctx-item--active': item.value === state.current }"
+          :class="{ 'ctx-item--active': item.checked || item.value === state.current }"
           @click="pick(item.value)"
         >
-          <span v-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
+          <span v-if="item.emoji" class="ctx-emoji">{{ item.emoji }}</span>
+          <span v-else-if="item.swatch" class="ctx-swatch" :style="{ background: item.swatch }" />
           {{ item.label }}
         </button>
       </template>
@@ -127,4 +128,11 @@ onUnmounted(() => {
   flex-shrink: 0;
   border: 1px solid #ffffff22;
 }
+.ctx-emoji {
+  font-size: 14px;
+  line-height: 1;
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
 </style>

frontend/src/composables/useContextMenu.ts

@@ -9,7 +9,9 @@ export interface ContextMenuItem {
   value: string;
   label: string;
   swatch?: string;        // optional color swatch dot
+  emoji?: string;         // optional emoji shown instead of swatch
   isHeader?: boolean;     // non-interactive section heading
+  checked?: boolean;      // explicit checkmark (for multi-group menus)
 }
 
 interface MenuState {