WIP preserve local changes before duckie merge

2026-06-20 07:26:19 +00:00 · 2026-04-21 11:13:32 +02:00
parent e0174e450c
commit 9b36513def
74 changed files with 4419 additions and 408 deletions
@@ -0,0 +1,102 @@
+import { FC, useMemo } from 'react';
+import { GetNickIconUrl } from '../assets/images/user_custom/nick_icons';
+import { PREFIX_EFFECT_KEYFRAMES, getPrefixEffectStyle, getPrefixFontStyle, parsePrefixColors } from '../api';
+
+interface UserIdentityViewProps
+{
+    username: string;
+    nickIcon?: string;
+    prefixText?: string;
+    prefixColor?: string;
+    prefixIcon?: string;
+    prefixEffect?: string;
+    prefixFont?: string;
+    displayOrder?: string;
+    showColon?: boolean;
+    className?: string;
+    iconClassName?: string;
+    nameClassName?: string;
+    prefixClassName?: string;
+}
+
+const sanitizeDisplayOrder = (displayOrder?: string) =>
+{
+    const fallback = [ 'icon', 'prefix', 'name' ];
+
+    if(!displayOrder?.length) return fallback;
+
+    const parts = displayOrder.toLowerCase().split('-');
+
+    if(parts.length !== 3) return fallback;
+
+    const unique = new Set(parts);
+
+    if(unique.size !== 3) return fallback;
+
+    if(parts.some(part => !fallback.includes(part))) return fallback;
+
+    return parts;
+};
+
+export const UserIdentityView: FC<UserIdentityViewProps> = ({
+    username = '',
+    nickIcon = '',
+    prefixText = '',
+    prefixColor = '',
+    prefixIcon = '',
+    prefixEffect = '',
+    prefixFont = '',
+    displayOrder = 'icon-prefix-name',
+    showColon = false,
+    className = '',
+    iconClassName = 'inline-block w-auto h-auto align-[-1px]',
+    nameClassName = 'username font-bold',
+    prefixClassName = ''
+}) =>
+{
+    const nickIconUrl = GetNickIconUrl(nickIcon);
+    const prefixColors = useMemo(() => parsePrefixColors(prefixText, prefixColor), [ prefixText, prefixColor ]);
+    const hasMultiColor = (prefixColors.length > 1) && (new Set(prefixColors).size > 1);
+    const prefixStyle = getPrefixEffectStyle(prefixEffect, prefixColors[0] || '#FFFFFF');
+    const prefixFontStyle = getPrefixFontStyle(prefixFont);
+    const displayParts = sanitizeDisplayOrder(displayOrder);
+
+    const parts = displayParts.map(part =>
+    {
+        switch(part)
+        {
+            case 'icon':
+                if(!nickIconUrl) return null;
+
+                return <img key="identity-icon" className={ `${ iconClassName } mr-1` } src={ nickIconUrl } alt="" />;
+            case 'prefix':
+                if(!prefixText?.length) return null;
+
+                return (
+                    <span key="identity-prefix" className={ `prefix inline-block whitespace-nowrap font-bold mr-1 ${ prefixClassName }` } style={ { ...prefixFontStyle, ...prefixStyle } }>
+                        { prefixIcon && <span className="mr-0.5 text-[13px] leading-none">{ prefixIcon }</span> }
+                        <span style={ hasMultiColor ? { ...prefixFontStyle, ...prefixStyle } : { ...prefixFontStyle, ...prefixStyle, color: prefixColors[0] || '#FFFFFF' } }>
+                            {'{'}
+                            { hasMultiColor
+                                ? [ ...prefixText ].map((char, index) => (
+                                    <span key={ index } style={ { ...prefixFontStyle, color: prefixColors[index] || prefixColors[prefixColors.length - 1], ...getPrefixEffectStyle(prefixEffect, prefixColors[index]) } }>{ char }</span>
+                                ))
+                                : prefixText }
+                            {'}'}
+                        </span>
+                    </span>
+                );
+            case 'name':
+                return <span key="identity-name" className={ `${ nameClassName } whitespace-nowrap` }>{ username }{ showColon ? ':' : '' }{ showColon ? ' ' : '' }</span>;
+            default:
+                return null;
+        }
+    }).filter(Boolean);
+
+    return (
+        <span className={ `inline-flex items-center whitespace-nowrap align-middle ${ className }` }>
+            { !!prefixEffect && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
+            { parts }
+        </span>
+    );
+};