diff --git a/frontend/src/components/SendButton.vue b/frontend/src/components/SendButton.vue index 5bd5bfb..06b52c7 100644 --- a/frontend/src/components/SendButton.vue +++ b/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]) => ({ - value: k, - label: v.label, - swatch: v.color, - })), - current: prefs.sendButton, - onSelect: (v) => { prefs.sendButton = v as typeof prefs.sendButton; }, + items, + current: '', + onSelect: (v) => { + if (v === '__default_skin__') { prefs.sendSkin = ''; } + else if (v.startsWith('send-skin-')) { prefs.sendSkin = v; } + else { prefs.sendButton = v as typeof prefs.sendButton; } + }, }); } diff --git a/frontend/src/components/StyleContextMenu.vue b/frontend/src/components/StyleContextMenu.vue index 03aa9cb..52e5241 100644 --- a/frontend/src/components/StyleContextMenu.vue +++ b/frontend/src/components/StyleContextMenu.vue @@ -14,10 +14,11 @@ @@ -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; +} diff --git a/frontend/src/composables/useContextMenu.ts b/frontend/src/composables/useContextMenu.ts index fae9385..db4bca8 100644 --- a/frontend/src/composables/useContextMenu.ts +++ b/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 {