feat: custom chat prefix system with effects, gradient colors, emoji icons and per-letter coloring

2026-06-19 15:06:20 +00:00 · 2026-03-22 18:43:42 +01:00
parent ccaec9185e
commit 02d8e5c2dd
7 changed files with 294 additions and 161 deletions
@@ -6,6 +6,9 @@ export const PRESET_PREFIX_EFFECTS: { id: string; label: string; icon: string }[
    { id: 'outline', label: 'Outline', icon: '🔲' },
    { id: 'pulse', label: 'Pulse', icon: '💫' },
    { id: 'bold-glow', label: 'Neon', icon: '💡' },
+    { id: 'rainbow', label: 'Rainbow', icon: '🌈' },
+    { id: 'shake', label: 'Shake', icon: '📳' },
+    { id: 'wave', label: 'Wave', icon: '🌊' },
 ];

 export const parsePrefixColors = (text: string, colorStr: string): string[] =>
@@ -40,11 +43,40 @@ export const getPrefixEffectStyle = (effect: string, color?: string): Record<str
                textShadow: `0 0 4px ${ baseColor }, 0 0 8px ${ baseColor }, 0 0 16px ${ baseColor }60`,
                fontWeight: 900
            };
+        case 'rainbow':
+            return { animation: 'prefix-rainbow 3s linear infinite', display: 'inline-block' };
+        case 'shake':
+            return { animation: 'prefix-shake 0.4s ease-in-out infinite', display: 'inline-block' };
+        case 'wave':
+            return { animation: 'prefix-wave 1s ease-in-out infinite', display: 'inline-block' };
        default:
            return {};
    }
 };

+export const generateGradientColors = (startColor: string, endColor: string, steps: number): string[] =>
+{
+    if(steps <= 1) return [ startColor ];
+
+    const parseHex = (hex: string) =>
+    {
+        const h = hex.replace('#', '');
+        return { r: parseInt(h.substring(0, 2), 16), g: parseInt(h.substring(2, 4), 16), b: parseInt(h.substring(4, 6), 16) };
+    };
+
+    const start = parseHex(startColor);
+    const end = parseHex(endColor);
+
+    return Array.from({ length: steps }, (_, i) =>
+    {
+        const t = i / (steps - 1);
+        const r = Math.round(start.r + (end.r - start.r) * t);
+        const g = Math.round(start.g + (end.g - start.g) * t);
+        const b = Math.round(start.b + (end.b - start.b) * t);
+        return `#${ r.toString(16).padStart(2, '0') }${ g.toString(16).padStart(2, '0') }${ b.toString(16).padStart(2, '0') }`;
+    });
+};
+
 export const PREFIX_EFFECT_KEYFRAMES = `
@keyframes prefix-pulse {
    0%, 100% { opacity: 1; }
@@ -1,7 +1,7 @@
 import { PurchasePrefixComposer } from '@nitrots/nitro-renderer';
-import { createPortal } from 'react-dom';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { SendMessageComposer, PRESET_PREFIX_EFFECTS, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../../api';
+import { LocalizeText, SendMessageComposer, PRESET_PREFIX_EFFECTS, generateGradientColors } from '../../../../../api';
+import { PrefixPreview } from '../../../../../layout';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
@@ -23,11 +23,13 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
    }, [ page, hideNavigation ]);

    const [ prefixText, setPrefixText ] = useState('');
-    const [ colorMode, setColorMode ] = useState<'single' | 'perLetter'>('single');
+    const [ colorMode, setColorMode ] = useState<'single' | 'perLetter' | 'gradient'>('single');
    const [ singleColor, setSingleColor ] = useState('#FFFFFF');
    const [ letterColors, setLetterColors ] = useState<Record<number, string>>({});
    const [ selectedLetterIndex, setSelectedLetterIndex ] = useState<number | null>(null);
    const [ customColorInput, setCustomColorInput ] = useState('#FFFFFF');
+    const [ gradientStart, setGradientStart ] = useState('#FF0000');
+    const [ gradientEnd, setGradientEnd ] = useState('#0066FF');
    const [ selectedIcon, setSelectedIcon ] = useState('');
    const [ showIconPicker, setShowIconPicker ] = useState(false);
    const [ selectedEffect, setSelectedEffect ] = useState('');
@@ -63,15 +65,16 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
    {
        if(colorMode === 'single') return singleColor;

+        if(colorMode === 'gradient')
+        {
+            const steps = Math.max(prefixText.length, 2);
+            return generateGradientColors(gradientStart, gradientEnd, steps).join(',');
+        }
+
        if(!prefixText.length) return singleColor;

        return [ ...prefixText ].map((_, i) => letterColors[i] || singleColor).join(',');
-    }, [ colorMode, singleColor, letterColors, prefixText ]);
-
-    const previewColors = useMemo(() =>
-    {
-        return parsePrefixColors(prefixText || '...', colorString || '#FFFFFF');
-    }, [ prefixText, colorString ]);
+    }, [ colorMode, singleColor, letterColors, prefixText, gradientStart, gradientEnd ]);

    const isValid = useMemo(() =>
    {
@@ -79,9 +82,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>

        if(colorMode === 'single') return /^#[0-9A-Fa-f]{6}$/.test(singleColor);

+        if(colorMode === 'gradient')
+            return /^#[0-9A-Fa-f]{6}$/.test(gradientStart) && /^#[0-9A-Fa-f]{6}$/.test(gradientEnd);
+
        const colors = colorString.split(',');
        return colors.every(c => /^#[0-9A-Fa-f]{6}$/.test(c));
-    }, [ prefixText, colorMode, singleColor, colorString ]);
+    }, [ prefixText, colorMode, singleColor, colorString, gradientStart, gradientEnd ]);

    const handlePurchase = () =>
    {
@@ -99,12 +105,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
            setSingleColor(color);
            setCustomColorInput(color);
        }
-        else if(selectedLetterIndex !== null)
+        else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
        {
            setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: color }));
            setCustomColorInput(color);

-            // Auto-advance to next letter
+            // Auto-avanza alla lettera successiva
            if(selectedLetterIndex < prefixText.length - 1)
            {
                const nextIdx = selectedLetterIndex + 1;
@@ -123,7 +129,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
            {
                setSingleColor(value);
            }
-            else if(selectedLetterIndex !== null)
+            else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
            {
                setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: value }));
            }
@@ -148,18 +154,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
        setLetterColors(newColors);
    };

-    const hasMultiColor = colorMode === 'perLetter' && previewColors.length > 1 && new Set(previewColors).size > 1;
-
    const currentActiveColor = colorMode === 'single'
        ? singleColor
        : (selectedLetterIndex !== null ? (letterColors[selectedLetterIndex] || singleColor) : singleColor);

-    const effectStyle = getPrefixEffectStyle(selectedEffect, previewColors[0] || '#FFFFFF');
-
    return (
        <div className="flex flex-col gap-2 h-full overflow-auto p-1">
-            <style>{ PREFIX_EFFECT_KEYFRAMES }</style>
-
            { /* Header */ }
            { page.localization.getImage(0) &&
                <img alt="" className="w-full rounded" src={ page.localization.getImage(0) } /> }
@@ -175,31 +175,48 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                } }>
                <div className="absolute inset-0 rounded-lg opacity-20"
                    style={ { background: 'radial-gradient(ellipse at center, rgba(100,149,237,0.3) 0%, transparent 70%)' } } />
-                <span className="relative text-xl font-bold tracking-wide" style={ effectStyle }>
-                    { selectedIcon && <span className="mr-1">{ selectedIcon }</span> }
-                    <span style={ hasMultiColor ? effectStyle : { ...effectStyle, color: previewColors[0] || '#FFFFFF' } }>
-                        {'{'}
-                        { hasMultiColor
-                            ? [ ...(prefixText || '...') ].map((char, i) => (
-                                <span key={ i } style={ { color: previewColors[i] || previewColors[previewColors.length - 1], ...getPrefixEffectStyle(selectedEffect, previewColors[i]) } }>{ char }</span>
-                            ))
-                            : (prefixText || '...')
-                        }
-                        {'}'}
-                    </span>
+                <span className="relative flex items-center">
+                    <PrefixPreview
+                        className="tracking-wide"
+                        color={ colorString }
+                        effect={ selectedEffect }
+                        icon={ selectedIcon }
+                        text={ prefixText || '...' }
+                        textSize="text-xl" />
+                    <span className="ml-2 text-white/80 text-lg font-medium">Username</span>
                </span>
-                <span className="relative ml-2 text-white/80 text-lg font-medium">Username</span>
+            </div>
+
+            { /* Chat Bubble Preview */ }
+            <div className="relative rounded-lg overflow-hidden p-2"
+                style={ { background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.06)' } }>
+                <div className="text-[10px] opacity-40 mb-1 uppercase font-bold tracking-wider">{ LocalizeText('catalog.prefix.chat.preview') }</div>
+                <div className="chat-bubble bubble-0 type-0 max-w-[350px] relative z-1 wrap-break-word min-h-[26px] text-[14px]">
+                    <div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
+                        { (prefixText || '...') &&
+                            <PrefixPreview
+                                className="mr-1"
+                                color={ colorString }
+                                effect={ selectedEffect }
+                                icon={ selectedIcon }
+                                text={ prefixText || '...' }
+                                textSize="text-[inherit]" /> }
+                        <b className="username">Username: </b>
+                        <span className="message">Hello everyone!</span>
+                    </div>
+                    <div className="pointer absolute left-[50%] translate-x-[-50%] w-[9px] h-[6px] bottom-[-5px]" />
+                </div>
            </div>

            { /* Text + Icon Row */ }
            <div className="flex gap-2">
                <div className="flex flex-col gap-0.5 flex-1">
-                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Text</label>
+                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.text') }</label>
                    <div className="relative">
                        <input
                            className="w-full px-3 py-1.5 rounded-md text-sm focus:outline-none transition-all"
                            maxLength={ 15 }
-                            placeholder="Enter text..."
+                            placeholder={ LocalizeText('catalog.prefix.text.placeholder') }
                            style={ {
                                background: 'rgba(0,0,0,0.15)',
                                border: '1px solid rgba(0,0,0,0.15)',
@@ -214,7 +231,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                    </div>
                </div>
                <div className="flex flex-col gap-0.5 relative">
-                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Icon</label>
+                    <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.icon') }</label>
                    <div className="flex gap-1">
                        <button
                            className="flex items-center justify-center gap-1 px-3 py-1.5 rounded-md text-sm transition-all min-w-[70px]"
@@ -232,7 +249,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                            <button
                                className="flex items-center justify-center px-1.5 rounded-md text-xs transition-all"
                                style={ { background: 'rgba(239,68,68,0.15)', border: '1px solid rgba(239,68,68,0.3)' } }
-                                title="Remove icon"
+                                title={ LocalizeText('catalog.prefix.icon.remove') }
                                onClick={ () => setSelectedIcon('') }>
                                ✕
                            </button>
@@ -241,14 +258,14 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                </div>
            </div>

-            { /* Emoji Picker (emoji-mart) - portaled to body, no backdrop */ }
-            { showIconPicker && createPortal(
+            { /* Emoji Picker (emoji-mart) - fixed overlay */ }
+            { showIconPicker && (
                <>
-                    <div className="fixed inset-0" style={ { zIndex: 9998 } } onClick={ () => setShowIconPicker(false) } />
-                    <div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 9999, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: '#2b2f35' } }>
+                    <div className="fixed inset-0" style={ { zIndex: 999, background: 'rgba(0,0,0,0.5)' } } onClick={ () => setShowIconPicker(false) } />
+                    <div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
                        <Picker
                            data={ data }
-                            locale="en"
+                            locale="it"
                            onEmojiSelect={ (emoji: { native: string }) => { setSelectedIcon(emoji.native); setShowIconPicker(false); } }
                            theme="dark"
                            previewPosition="none"
@@ -261,13 +278,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                            set="native"
                        />
                    </div>
-                </>,
-                document.body
+                </>
            ) }

            { /* Effect Selector */ }
            <div className="flex flex-col gap-1">
-                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Effect</label>
+                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.effect') }</label>
                <div className="flex flex-wrap gap-1">
                    { PRESET_PREFIX_EFFECTS.map(fx => (
                        <button
@@ -287,7 +303,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>

            { /* Color Mode Toggle */ }
            <div className="flex flex-col gap-1">
-                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Color</label>
+                <label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.color') }</label>
                <div className="flex rounded-md overflow-hidden" style={ { border: '1px solid rgba(0,0,0,0.15)' } }>
                    <button
                        className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
@@ -297,26 +313,86 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                            opacity: colorMode === 'single' ? 1 : 0.6
                        } }
                        onClick={ () => { setColorMode('single'); setSelectedLetterIndex(null); } }>
-                        🎨 Single
+                        { LocalizeText('catalog.prefix.color.single') }
                    </button>
                    <button
                        className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
                        style={ {
                            background: colorMode === 'perLetter' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
+                            borderRight: '1px solid rgba(0,0,0,0.1)',
                            opacity: colorMode === 'perLetter' ? 1 : 0.6
                        } }
                        onClick={ () => { setColorMode('perLetter'); if(prefixText.length > 0) setSelectedLetterIndex(0); } }>
-                        🌈 Per Letter
+                        { LocalizeText('catalog.prefix.color.per.letter') }
+                    </button>
+                    <button
+                        className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
+                        style={ {
+                            background: colorMode === 'gradient' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
+                            opacity: colorMode === 'gradient' ? 1 : 0.6
+                        } }
+                        onClick={ () => { setColorMode('gradient'); setSelectedLetterIndex(null); } }>
+                        { LocalizeText('catalog.prefix.color.gradient') }
                    </button>
                </div>
            </div>

+            { /* Gradient Controls */ }
+            { colorMode === 'gradient' && (
+                <div className="flex flex-col gap-1.5">
+                    <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-1 flex-1">
+                            <label
+                                className="relative cursor-pointer shrink-0"
+                                style={ {
+                                    width: '24px', height: '24px', borderRadius: '6px',
+                                    backgroundColor: gradientStart,
+                                    border: '2px solid rgba(0,0,0,0.2)',
+                                    boxShadow: `0 0 6px ${ gradientStart }40`
+                                } }>
+                                <input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
+                                    type="color" value={ gradientStart }
+                                    onChange={ e => setGradientStart(e.target.value) } />
+                            </label>
+                            <input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
+                                maxLength={ 7 } placeholder="#FF0000"
+                                style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
+                                type="text" value={ gradientStart }
+                                onChange={ e => { const v = e.target.value; setGradientStart(v); } } />
+                        </div>
+                        <span className="text-xs opacity-40">→</span>
+                        <div className="flex items-center gap-1 flex-1">
+                            <label
+                                className="relative cursor-pointer shrink-0"
+                                style={ {
+                                    width: '24px', height: '24px', borderRadius: '6px',
+                                    backgroundColor: gradientEnd,
+                                    border: '2px solid rgba(0,0,0,0.2)',
+                                    boxShadow: `0 0 6px ${ gradientEnd }40`
+                                } }>
+                                <input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
+                                    type="color" value={ gradientEnd }
+                                    onChange={ e => setGradientEnd(e.target.value) } />
+                            </label>
+                            <input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
+                                maxLength={ 7 } placeholder="#0066FF"
+                                style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
+                                type="text" value={ gradientEnd }
+                                onChange={ e => { const v = e.target.value; setGradientEnd(v); } } />
+                        </div>
+                    </div>
+                    { /* Gradient preview bar */ }
+                    <div className="h-2 rounded-full"
+                        style={ { background: `linear-gradient(to right, ${ gradientStart }, ${ gradientEnd })` } } />
+                </div>
+            ) }
+
            { /* Per-Letter Selector */ }
            { colorMode === 'perLetter' && prefixText.length > 0 && (
                <div className="flex flex-col gap-1.5">
                    <div className="flex items-center justify-between">
                        <span className="text-[10px] opacity-50">
-                            Select a letter, then choose a color. Auto-advances.
+                            { LocalizeText('catalog.prefix.color.hint') }
                        </span>
                        <button
                            className="text-[10px] px-1.5 py-0.5 rounded transition-all"
@@ -324,9 +400,9 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                                background: 'rgba(0,0,0,0.1)',
                                border: '1px solid rgba(0,0,0,0.1)'
                            } }
-                            title="Apply current color to all letters"
+                            title={ LocalizeText('catalog.prefix.color.apply.all.title') }
                            onClick={ applyColorToAll }>
-                            Apply to all
+                            { LocalizeText('catalog.prefix.color.apply.all') }
                        </button>
                    </div>
                    <div className="flex flex-wrap gap-1 p-2 rounded-lg"
@@ -375,76 +451,73 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                </div>
            ) }

-            { /* Color Palette */ }
-            <div className="flex flex-col gap-1">
-                { colorMode === 'perLetter' && selectedLetterIndex !== null &&
-                    <span className="text-[10px] opacity-50 italic">
-                        Selected letter: &quot;{ prefixText[selectedLetterIndex] || '' }&quot;
-                    </span>
-                }
-                <div className="grid grid-cols-10 gap-[3px]">
-                    { PRESET_COLORS.map((color, idx) =>
-                    {
-                        const isActive = currentActiveColor === color;
-                        return (
-                            <div
-                                key={ idx }
-                                className="cursor-pointer transition-all"
-                                style={ {
-                                    width: '100%',
-                                    aspectRatio: '1',
-                                    borderRadius: '5px',
-                                    backgroundColor: color,
-                                    border: isActive ? '2px solid #fff' : '1px solid rgba(0,0,0,0.15)',
-                                    boxShadow: isActive ? `0 0 6px ${ color }, 0 0 0 1px rgba(0,0,0,0.2)` : 'inset 0 1px 0 rgba(255,255,255,0.2)',
-                                    transform: isActive ? 'scale(1.2)' : 'scale(1)',
-                                    zIndex: isActive ? 5 : 1
-                                } }
-                                onClick={ () => handleColorSelect(color) } />
-                        );
-                    }) }
-                </div>
-                <div className="flex items-center gap-2 mt-0.5">
-                    <label
-                        className="relative cursor-pointer"
-                        style={ {
-                            width: '24px',
-                            height: '24px',
-                            borderRadius: '6px',
-                            backgroundColor: customColorInput,
-                            border: '2px solid rgba(0,0,0,0.2)',
-                            boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
-                        } }>
+            { /* Color Palette (single & perLetter modes) */ }
+            { colorMode !== 'gradient' && (
+                <div className="flex flex-col gap-1">
+                    { colorMode === 'perLetter' && selectedLetterIndex !== null &&
+                        <span className="text-[10px] opacity-50 italic">
+                            { LocalizeText('catalog.prefix.color.selected') } &quot;{ prefixText[selectedLetterIndex] || '' }&quot;
+                        </span>
+                    }
+                    <div className="grid gap-1" style={ { gridTemplateColumns: 'repeat(auto-fill, minmax(34px, 1fr))' } }>
+                        { PRESET_COLORS.map((color, idx) =>
+                        {
+                            const isActive = currentActiveColor === color;
+                            return (
+                                <div
+                                    key={ idx }
+                                    className={ `aspect-square rounded cursor-pointer transition-all duration-100 border-2 ${ isActive ? 'scale-110 border-white shadow-lg' : 'border-transparent hover:scale-105' }` }
+                                    style={ {
+                                        backgroundColor: color,
+                                        boxShadow: isActive ? `0 0 8px ${ color }, 0 0 0 1px rgba(0,0,0,0.3)` : 'inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)',
+                                        zIndex: isActive ? 5 : 1
+                                    } }
+                                    onClick={ () => handleColorSelect(color) } />
+                            );
+                        }) }
+                    </div>
+                    <div className="flex items-center gap-2 mt-0.5">
+                        <label
+                            className="relative cursor-pointer"
+                            style={ {
+                                width: '24px',
+                                height: '24px',
+                                borderRadius: '6px',
+                                backgroundColor: customColorInput,
+                                border: '2px solid rgba(0,0,0,0.2)',
+                                boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
+                            } }>
+                            <input
+                                className="absolute inset-0 opacity-0 cursor-pointer"
+                                style={ { width: '100%', height: '100%' } }
+                                type="color"
+                                value={ customColorInput }
+                                onChange={ e => handleColorSelect(e.target.value) } />
+                        </label>
                        <input
-                            className="absolute inset-0 opacity-0 cursor-pointer"
-                            style={ { width: '100%', height: '100%' } }
-                            type="color"
+                            className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
+                            maxLength={ 7 }
+                            placeholder="#FFFFFF"
+                            style={ {
+                                background: 'rgba(0,0,0,0.15)',
+                                border: '1px solid rgba(0,0,0,0.1)',
+                                color: 'inherit',
+                                maxWidth: '80px',
+                                borderRadius: '5px'
+                            } }
+                            type="text"
                            value={ customColorInput }
-                            onChange={ e => handleColorSelect(e.target.value) } />
-                    </label>
-                    <input
-                        className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
-                        maxLength={ 7 }
-                        placeholder="#FFFFFF"
-                        style={ {
-                            background: 'rgba(0,0,0,0.15)',
-                            border: '1px solid rgba(0,0,0,0.1)',
-                            color: 'inherit',
-                            maxWidth: '80px',
-                            borderRadius: '5px'
-                        } }
-                        type="text"
-                        value={ customColorInput }
-                        onChange={ e => handleCustomColorChange(e.target.value) } />
+                            onChange={ e => handleCustomColorChange(e.target.value) } />
+                    </div>
                </div>
-            </div>
+            ) }

            { /* Purchase Footer */ }
            <div className="flex items-center justify-between mt-auto pt-2"
                style={ { borderTop: '1px solid rgba(0,0,0,0.1)' } }>
                <div className="flex items-center gap-1">
-                    <span className="text-xs opacity-60">Price:</span>
-                    <span className="text-sm font-bold">5 Credits</span>
+                    <span className="text-xs opacity-60">{ LocalizeText('catalog.prefix.price') }</span>
+                    <span className="text-sm font-bold">{ LocalizeText('catalog.prefix.price.amount') }</span>
                </div>
                <button
                    className="px-5 py-1.5 rounded-md text-sm font-bold transition-all"
@@ -462,7 +535,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
                        borderRadius: '6px'
                    } }
                    onClick={ handlePurchase }>
-                    { purchased ? '✓ Purchased!' : 'Purchase' }
+                    { purchased ? LocalizeText('catalog.prefix.purchased') : LocalizeText('catalog.prefix.purchase') }
                </button>
            </div>
        </div>
@@ -1,32 +1,8 @@
 import { FC, useEffect, useState } from 'react';
 import { FaTrashAlt } from 'react-icons/fa';
-import { IPrefixItem, LocalizeText, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../api';
+import { IPrefixItem, LocalizeText } from '../../../../api';
 import { useInventoryPrefixes, useNotification } from '../../../../hooks';
-import { NitroButton } from '../../../../layout';
-
-const PrefixPreview: FC<{ text: string; color: string; icon: string; effect?: string; className?: string; textSize?: string }> = ({ text, color, icon, effect = '', className = '', textSize = 'text-sm' }) =>
-{
-    const colors = parsePrefixColors(text, color);
-    const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
-    const fxStyle = getPrefixEffectStyle(effect, colors[0] || '#FFFFFF');
-
-    return (
-        <span className={ `font-bold ${ textSize } ${ className }` } style={ fxStyle }>
-            { effect === 'pulse' && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
-            { icon && <span className="mr-0.5">{ icon }</span> }
-            <span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
-                {'{'}
-                { hasMultiColor
-                    ? [ ...text ].map((char, i) => (
-                        <span key={ i } style={ { color: colors[i] || colors[colors.length - 1], ...getPrefixEffectStyle(effect, colors[i]) } }>{ char }</span>
-                    ))
-                    : text
-                }
-                {'}'}
-            </span>
-        </span>
-    );
-};
+import { NitroButton, PrefixPreview } from '../../../../layout';

 const PrefixItemView: FC<{
    prefix: IPrefixItem;
@@ -1,7 +1,8 @@
 import { GetRoomEngine, RoomChatSettings, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { ChatBubbleMessage, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../api';
+import { ChatBubbleMessage } from '../../../../api';
 import { useOnClickChat } from '../../../../hooks';
+import { PrefixPreview } from '../../../../layout';

 interface ChatWidgetMessageViewProps
 {
@@ -90,27 +91,8 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
                    ) }
                </div>
                <div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
-                    { chat.prefixEffect === 'pulse' && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
-                    { chat.prefixText && (() => {
-                        const colors = parsePrefixColors(chat.prefixText, chat.prefixColor);
-                        const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
-                        const fxStyle = getPrefixEffectStyle(chat.prefixEffect, colors[0] || '#FFFFFF');
-                        return (
-                            <span className="prefix font-bold mr-1" style={ fxStyle }>
-                                { chat.prefixIcon && <span className="mr-0.5 text-[13px]">{ chat.prefixIcon }</span> }
-                                <span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
-                                    {'{'}
-                                    { hasMultiColor
-                                        ? [ ...chat.prefixText ].map((char, i) => (
-                                            <span key={ i } style={ { color: colors[i] || colors[colors.length - 1], ...getPrefixEffectStyle(chat.prefixEffect, colors[i]) } }>{ char }</span>
-                                        ))
-                                        : chat.prefixText
-                                    }
-                                    {'}'}
-                                </span>
-                            </span>
-                        );
-                    })() }
+                    { chat.prefixText &&
+                        <PrefixPreview className="mr-1" color={ chat.prefixColor } effect={ chat.prefixEffect } icon={ chat.prefixIcon } text={ chat.prefixText } textSize="text-[inherit]" /> }
                    <b className="username" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
                    <span className={ `message${ chat.type === 1 ? ' italic text-[#595959]' : '' }` } dangerouslySetInnerHTML={ { __html: `${ chat.formattedText }` } } onClick={ onClickChat } />
                </div>
@@ -78,6 +78,27 @@ body {
 }

@layer components {
+    @keyframes prefix-pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+    }
+
+    @keyframes prefix-rainbow {
+        0% { filter: hue-rotate(0deg); }
+        100% { filter: hue-rotate(360deg); }
+    }
+
+    @keyframes prefix-shake {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-1px) rotate(-1deg); }
+        75% { transform: translateX(1px) rotate(1deg); }
+    }
+
+    @keyframes prefix-wave {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-3px); }
+    }
+
    @keyframes blink {

        0%,
@@ -0,0 +1,48 @@
+import { FC, useMemo } from 'react';
+import { parsePrefixColors, getPrefixEffectStyle } from '../api';
+
+interface PrefixPreviewProps
+{
+    text: string;
+    color: string;
+    icon?: string;
+    effect?: string;
+    className?: string;
+    textSize?: string;
+}
+
+export const PrefixPreview: FC<PrefixPreviewProps> = ({ text, color, icon = '', effect = '', className = '', textSize = 'text-sm' }) =>
+{
+    const colors = useMemo(() => parsePrefixColors(text, color), [ text, color ]);
+    const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
+    const fxStyle = useMemo(() => getPrefixEffectStyle(effect, colors[0] || '#FFFFFF'), [ effect, colors ]);
+    const isWave = effect === 'wave';
+
+    return (
+        <span className={ `font-bold ${ textSize } ${ className }` } style={ fxStyle }>
+            { icon && <span className="mr-0.5">{ icon }</span> }
+            <span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
+                {'{'}
+                { (hasMultiColor || isWave)
+                    ? [ ...text ].map((char, i) =>
+                    {
+                        const charStyle: Record<string, string | number> = {
+                            color: colors[i] || colors[colors.length - 1],
+                            ...getPrefixEffectStyle(effect, colors[i])
+                        };
+
+                        if(isWave)
+                        {
+                            charStyle.display = 'inline-block';
+                            charStyle.animationDelay = `${ i * 0.08 }s`;
+                        }
+
+                        return <span key={ i } style={ charStyle }>{ char }</span>;
+                    })
+                    : text
+                }
+                {'}'}
+            </span>
+        </span>
+    );
+};
@@ -3,6 +3,7 @@ export * from './NitroButton';
 export * from './NitroCard';
 export * from './NitroInput';
 export * from './NitroItemCountBadge';
+export * from './PrefixPreview';
 export * from './classNames';
 export * from './limited-edition';
 export * from './styleNames';