anto/XIP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance customization options with new 'Mes Persos' panel and improved context menus

Browse Source
This commit is contained in:
arussac
2026-05-31 15:04:51 +02:00
parent 1a76e9076c
commit 02bba16285
10 changed files with 426 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/MessageItem.vue
View File

@@ -3,7 +3,7 @@
<div class="message-item">
<!-- Auteur + horodatage -->
<div class="message-meta">
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" title="Clic droit pour personnaliser">
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, message.authorIp)" :title="message.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
<span v-if="petsLeft(message)" class="pet">{{ petsLeft(message) }}</span>
<span class="ip" :style="ipStyle(message)">{{ message.authorIp }}</span>
<span v-if="petsRight(message)" class="pet">{{ petsRight(message) }}</span>
@@ -30,7 +30,7 @@
:key="reply.id"
class="reply"
>
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" title="Clic droit pour personnaliser">
<span class="ip-wrap" @contextmenu.prevent="openIpMenu($event, reply.authorIp)" :title="reply.authorIp === myIp ? 'Clic droit pour personnaliser' : undefined">
<span v-if="petsLeft(reply)" class="pet pet--sm">{{ petsLeft(reply) }}</span>
<span class="ip reply-ip" :style="ipStyle(reply)">{{ reply.authorIp }}</span>
<span v-if="petsRight(reply)" class="pet pet--sm">{{ petsRight(reply) }}</span>
@@ -55,14 +55,16 @@ import type { Message, Reply } from '@/composables/useMessages';
import { getIpColorWithPerks, getIpGlowWithPerks, getIpColor, getIpGlow } from '@/composables/ipColor';
import { usePerks } from '@/composables/usePerks';
import { openContextMenu } from '@/composables/useContextMenu';
import { useCustomStyles, IP_COLOR_OPTIONS, PET_OPTIONS } from '@/composables/useCustomStyles';
import { useCustomStyles, IP_COLOR_OPTIONS } from '@/composables/useCustomStyles';
import { useMyPerks } from '@/composables/useMessages';
import RichContent from './RichContent.vue';
import MessageAttachments from './MessageAttachments.vue';
defineProps<{ message: Message }>();
const props = defineProps<{ message: Message; myIp?: string }>();
defineEmits<{ reply: [payload: { id: string; authorIp: string }] }>();
const { perksFor } = usePerks();
const { myPerks } = useMyPerks();
const { prefs } = useCustomStyles();
function perksOf(m: Reply): any {
@@ -102,19 +104,43 @@ function petsRight(m: Reply): string {
}
function openIpMenu(e: MouseEvent, ip: string): void {
if (ip !== props.myIp) return;
const hasElementSkin = !!myPerks.value.elementSkin;
const ownedPets = myPerks.value.pets ?? [];
const hasPets = ownedPets.length > 0;
// Nothing to show if no perk unlocks customization.
if (!hasElementSkin && !hasPets) return;
const currentColor = prefs.ipColors[ip] ?? 'auto';
const currentPet = ip in prefs.ipPets ? prefs.ipPets[ip] : '__inherit__';
const items: import('@/composables/useContextMenu').ContextMenuItem[] = [];
if (hasElementSkin) {
items.push({ value: '__h_color', label: 'Couleur', isHeader: true });
items.push(...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })));
}
if (hasPets) {
items.push({ value: '__h_pet', label: 'Pet', isHeader: true });
items.push({ value: 'pet:__inherit__', label: '↩ défaut' });
// Show only the pets the user actually owns.
const seen = new Set<string>();
for (const p of ownedPets) {
if (!seen.has(p.char)) {
seen.add(p.char);
items.push({ value: `pet:${p.char}`, label: p.char });
}
}
}
openContextMenu({
x: e.clientX,
y: e.clientY,
title: ip,
items: [
{ value: '__h_color', label: 'Couleur', isHeader: true },
...IP_COLOR_OPTIONS.map((o) => ({ value: `color:${o.value}`, label: o.label, swatch: o.swatch })),
{ value: '__h_pet', label: 'Pet', isHeader: true },
{ value: 'pet:__inherit__', label: '↩ défaut (perk)' },
...PET_OPTIONS.map((o) => ({ value: `pet:${o.value}`, label: o.label })),
],
items,
current: currentColor !== 'auto' ? `color:${currentColor}` : `pet:${currentPet}`,
onSelect: (v) => {
if (v.startsWith('color:')) {