🆕 Added New catalogue page

src/components/interface-settings/InterfaceColorTabView.tsx

@@ -0,0 +1,288 @@
+import { RgbaColorPicker, RgbaColor } from 'react-colorful';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FaUndo, FaTrash, FaDownload, FaUpload } from 'react-icons/fa';
+import { LocalizeText, PRESET_COLORS, THEME_PRESETS, useUiSettings } from '../../api';
+import { Flex, Text } from '../../common';
+
+const hexToRgba = (hex: string, a = 1): RgbaColor =>
+{
+    const num = parseInt(hex.replace('#', ''), 16);
+    return { r: (num >> 16) & 0xFF, g: (num >> 8) & 0xFF, b: num & 0xFF, a };
+};
+
+const rgbaToHex = (rgba: RgbaColor): string =>
+{
+    return '#' + ((1 << 24) + (rgba.r << 16) + (rgba.g << 8) + rgba.b).toString(16).slice(1);
+};
+
+export const InterfaceColorTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings, resetSettings } = useUiSettings();
+    const [ color, setColor ] = useState<RgbaColor>(() => hexToRgba(settings.headerColor, settings.headerAlpha / 100));
+    const [ importValue, setImportValue ] = useState('');
+    const [ showImport, setShowImport ] = useState(false);
+    const [ copyFeedback, setCopyFeedback ] = useState(false);
+    const previewTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    const hexColor = useMemo(() => rgbaToHex(color), [ color ]);
+    const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]);
+
+    // Live preview con debounce
+    useEffect(() =>
+    {
+        if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
+
+        previewTimerRef.current = setTimeout(() =>
+        {
+            updateSettings({
+                colorMode: 'color',
+                headerColor: hexColor,
+                headerAlpha: alphaPercent
+            });
+        }, 50);
+
+        return () =>
+        {
+            if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
+        };
+    }, [ hexColor, alphaPercent ]);
+
+    const onHexInput = useCallback((value: string) =>
+    {
+        const clean = value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
+        if(clean.length === 6)
+        {
+            const rgba = hexToRgba('#' + clean, color.a);
+            setColor(rgba);
+        }
+    }, [ color.a ]);
+
+    const onRgbInput = useCallback((channel: 'r' | 'g' | 'b', value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(255, value || 0));
+        setColor(prev => ({ ...prev, [channel]: clamped }));
+    }, []);
+
+    const onAlphaInput = useCallback((value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(100, value || 0));
+        setColor(prev => ({ ...prev, a: clamped / 100 }));
+    }, []);
+
+    const onPresetClick = useCallback((presetHex: string) =>
+    {
+        setColor(hexToRgba(presetHex, color.a));
+    }, [ color.a ]);
+
+    const onThemeClick = useCallback((themeColor: string, themeAlpha: number) =>
+    {
+        setColor(hexToRgba(themeColor, themeAlpha / 100));
+    }, []);
+
+    const onReset = useCallback(() =>
+    {
+        resetSettings();
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ resetSettings ]);
+
+    const onDelete = useCallback(() =>
+    {
+        updateSettings({ colorMode: 'default' });
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ updateSettings ]);
+
+    const onExport = useCallback(() =>
+    {
+        const data = JSON.stringify({
+            color: hexColor,
+            alpha: alphaPercent,
+            mode: settings.colorMode,
+            image: settings.headerImageUrl
+        });
+
+        navigator.clipboard.writeText(data);
+        setCopyFeedback(true);
+        setTimeout(() => setCopyFeedback(false), 2000);
+    }, [ hexColor, alphaPercent, settings ]);
+
+    const onImport = useCallback(() =>
+    {
+        try
+        {
+            const data = JSON.parse(importValue);
+
+            if(data.color)
+            {
+                const alpha = data.alpha ?? 100;
+                setColor(hexToRgba(data.color, alpha / 100));
+                updateSettings({
+                    colorMode: data.mode || 'color',
+                    headerColor: data.color,
+                    headerAlpha: alpha,
+                    headerImageUrl: data.image || ''
+                });
+            }
+
+            setImportValue('');
+            setShowImport(false);
+        }
+        catch(e) {}
+    }, [ importValue, updateSettings ]);
+
+    return (
+        <Flex column gap={ 2 } className="items-center p-2">
+            {/* Color picker */}
+            <div className="w-[280px]">
+                <RgbaColorPicker color={ color } onChange={ setColor } style={ { width: '100%', height: '180px' } } />
+            </div>
+
+            {/* Color preview swatch */}
+            <div
+                className="w-[280px] h-[32px] rounded border border-black/20"
+                style={ { backgroundColor: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })` } }
+            />
+
+            {/* Hex/RGB/A inputs */}
+            <Flex gap={ 1 } className="items-center mt-1">
+                <Flex column className="items-center">
+                    <input
+                        className="form-control form-control-sm text-center w-[70px]"
+                        value={ hexColor.replace('#', '').toUpperCase() }
+                        onChange={ e => onHexInput(e.target.value) }
+                        maxLength={ 6 }
+                    />
+                    <Text small className="text-black">Hex</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.r }
+                        onChange={ e => onRgbInput('r', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">R</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.g }
+                        onChange={ e => onRgbInput('g', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">G</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.b }
+                        onChange={ e => onRgbInput('b', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">B</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ alphaPercent }
+                        onChange={ e => onAlphaInput(parseInt(e.target.value)) }
+                        min={ 0 } max={ 100 }
+                    />
+                    <Text small className="text-black">A</Text>
+                </Flex>
+            </Flex>
+
+            {/* Preset colors */}
+            <div className="grid grid-cols-10 gap-0.5 mt-1">
+                { PRESET_COLORS.map((presetHex, i) => (
+                    <div
+                        key={ i }
+                        className={ `w-[24px] h-[24px] rounded cursor-pointer border hover:scale-110 transition-transform ${ hexColor.toUpperCase() === presetHex.toUpperCase() ? 'border-white border-2 scale-110' : 'border-black/20' }` }
+                        style={ { backgroundColor: presetHex } }
+                        onClick={ () => onPresetClick(presetHex) }
+                    />
+                )) }
+            </div>
+
+            {/* Theme presets */}
+            <Text small bold className="text-black mt-2">{ LocalizeText('interface.settings.color.themes') }</Text>
+            <div className="grid grid-cols-6 gap-1 w-full">
+                { THEME_PRESETS.map((theme) => (
+                    <div
+                        key={ theme.name }
+                        className={ `flex flex-col items-center gap-0.5 p-1 rounded cursor-pointer hover:bg-black/5 transition-colors ${ hexColor.toUpperCase() === theme.color.toUpperCase() ? 'ring-2 ring-white' : '' }` }
+                        onClick={ () => onThemeClick(theme.color, theme.alpha) }
+                    >
+                        <div
+                            className="w-[32px] h-[32px] rounded-full border border-black/20"
+                            style={ { backgroundColor: theme.color, opacity: theme.alpha / 100 } }
+                        />
+                        <Text small className="text-black text-[10px]">{ LocalizeText(`interface.settings.theme.${ theme.name }`) }</Text>
+                    </div>
+                )) }
+            </div>
+
+            {/* Action buttons */}
+            <Flex gap={ 1 } className="w-full mt-2">
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onReset }
+                    title={ LocalizeText('interface.settings.color.reset') }
+                >
+                    <FaUndo size={ 12 } />
+                    { LocalizeText('interface.settings.color.reset') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#c0392b' } }
+                    onClick={ onDelete }
+                    title={ LocalizeText('interface.settings.color.remove') }
+                >
+                    <FaTrash size={ 12 } />
+                    { LocalizeText('interface.settings.color.remove') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#2980b9' } }
+                    onClick={ onExport }
+                    title={ LocalizeText('interface.settings.color.export') }
+                >
+                    <FaDownload size={ 12 } />
+                    { copyFeedback ? LocalizeText('interface.settings.color.copied') : LocalizeText('interface.settings.color.export') }
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
+                    style={ { backgroundColor: '#27ae60' } }
+                    onClick={ () => setShowImport(!showImport) }
+                    title={ LocalizeText('interface.settings.color.import') }
+                >
+                    <FaUpload size={ 12 } />
+                    { LocalizeText('interface.settings.color.import') }
+                </button>
+            </Flex>
+
+            {/* Import panel */}
+            { showImport && (
+                <Flex gap={ 1 } className="w-full">
+                    <input
+                        className="form-control form-control-sm flex-1"
+                        placeholder={ LocalizeText('interface.settings.color.import.placeholder') }
+                        value={ importValue }
+                        onChange={ e => setImportValue(e.target.value) }
+                    />
+                    <button
+                        className="px-3 py-1 rounded cursor-pointer text-white text-xs"
+                        style={ { backgroundColor: '#27ae60' } }
+                        onClick={ onImport }
+                    >
+                        OK
+                    </button>
+                </Flex>
+            ) }
+        </Flex>
+    );
+};

src/components/interface-settings/InterfaceImageTabView.tsx

@@ -0,0 +1,52 @@
+import { FC, useCallback, useMemo } from 'react';
+import { GetConfigurationValue, useUiSettings } from '../../api';
+
+export const InterfaceImageTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings } = useUiSettings();
+
+    const imageCount = useMemo(() =>
+    {
+        return GetConfigurationValue<number>('ui.header.images.count', 30);
+    }, []);
+
+    const baseUrl = useMemo(() =>
+    {
+        return GetConfigurationValue<string>('ui.header.images.url', 'https://image.webbo.city/image/headerImage/image{id}.gif');
+    }, []);
+
+    const images = useMemo(() =>
+    {
+        const result: string[] = [];
+        for(let i = 1; i <= imageCount; i++)
+        {
+            result.push(baseUrl.replace('{id}', String(i)));
+        }
+        return result;
+    }, [ imageCount, baseUrl ]);
+
+    const onImageSelect = useCallback((url: string) =>
+    {
+        updateSettings({
+            colorMode: 'image',
+            headerImageUrl: url
+        });
+    }, [ updateSettings ]);
+
+    return (
+        <div className="grid grid-cols-8 gap-1 p-2 overflow-auto max-h-[400px]">
+            { images.map((url, i) => (
+                <div
+                    key={ i }
+                    className={ `w-[75px] h-[75px] rounded cursor-pointer border-2 transition-all hover:scale-105 ${ (settings.colorMode === 'image' && settings.headerImageUrl === url) ? 'border-white shadow-lg' : 'border-transparent' }` }
+                    style={ {
+                        backgroundImage: `url(${ url })`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center'
+                    } }
+                    onClick={ () => onImageSelect(url) }
+                />
+            )) }
+        </div>
+    );
+};