240 lines
11 KiB
TypeScript
240 lines
11 KiB
TypeScript
'use client'
|
|
import React, {ChangeEvent, useCallback, useEffect, useMemo} from 'react';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
import {faEye, faFont, faIndent, faPalette, faTextHeight, faTextWidth} from '@fortawesome/free-solid-svg-icons';
|
|
import {useTranslations} from "next-intl";
|
|
import SelectBox from "@/components/form/SelectBox";
|
|
|
|
interface UserEditorSettingsProps {
|
|
settings: EditorDisplaySettings;
|
|
onSettingsChange: (settings: EditorDisplaySettings) => void;
|
|
}
|
|
|
|
export interface EditorDisplaySettings {
|
|
zoomLevel: number;
|
|
indent: number;
|
|
lineHeight: number;
|
|
theme: 'clair' | 'sombre' | 'sépia';
|
|
fontFamily: 'lora' | 'serif' | 'sans-serif' | 'monospace';
|
|
maxWidth: number;
|
|
focusMode: boolean;
|
|
}
|
|
|
|
const ZOOM_LABELS = ['Très petit', 'Petit', 'Normal', 'Grand', 'Très grand'] as const;
|
|
const FONT_SIZES = [14, 16, 18, 20, 22] as const;
|
|
const THEMES = ['clair', 'sombre', 'sépia'] as const;
|
|
|
|
const DEFAULT_SETTINGS: EditorDisplaySettings = {
|
|
zoomLevel: 3,
|
|
indent: 30,
|
|
lineHeight: 1.5,
|
|
theme: 'sombre',
|
|
fontFamily: 'lora',
|
|
maxWidth: 768,
|
|
focusMode: false
|
|
};
|
|
|
|
export default function UserEditorSettings({settings, onSettingsChange}: UserEditorSettingsProps) {
|
|
const t = useTranslations();
|
|
|
|
const handleSettingChange = useCallback(<K extends keyof EditorDisplaySettings>(
|
|
key: K,
|
|
value: EditorDisplaySettings[K]
|
|
) => {
|
|
onSettingsChange({...settings, [key]: value});
|
|
}, [settings, onSettingsChange]);
|
|
|
|
const resetToDefaults = useCallback(() => {
|
|
onSettingsChange(DEFAULT_SETTINGS);
|
|
}, [onSettingsChange]);
|
|
|
|
const zoomOptions = useMemo(() =>
|
|
ZOOM_LABELS.map((label, index) => ({
|
|
value: (index + 1).toString(),
|
|
label: `${t(`userEditorSettings.zoom.${label}`)} (${FONT_SIZES[index]}px)`
|
|
}))
|
|
, [t]);
|
|
|
|
const themeButtons = useMemo(() =>
|
|
THEMES.map(theme => ({
|
|
key: theme,
|
|
isActive: settings.theme === theme,
|
|
className: `p-2.5 rounded-xl border capitalize transition-all duration-200 font-medium ${
|
|
settings.theme === theme
|
|
? 'bg-primary text-text-primary border-primary shadow-md scale-105'
|
|
: 'bg-secondary/50 border-secondary/50 text-muted hover:text-text-primary hover:border-secondary hover:bg-secondary hover:scale-102'
|
|
}`
|
|
}))
|
|
, [settings.theme]);
|
|
|
|
useEffect((): void => {
|
|
try {
|
|
const savedSettings: string | null = localStorage.getItem('userEditorSettings');
|
|
if (savedSettings) {
|
|
const parsed = JSON.parse(savedSettings);
|
|
if (parsed && typeof parsed === 'object') {
|
|
onSettingsChange({...DEFAULT_SETTINGS, ...parsed});
|
|
}
|
|
}
|
|
} catch (e: unknown) {
|
|
onSettingsChange(DEFAULT_SETTINGS);
|
|
}
|
|
}, [onSettingsChange]);
|
|
|
|
useEffect((): () => void => {
|
|
const timeoutId = setTimeout((): void => {
|
|
try {
|
|
localStorage.setItem('userEditorSettings', JSON.stringify(settings));
|
|
} catch (error) {
|
|
console.error('Erreur lors de la sauvegarde des settings:', error);
|
|
}
|
|
}, 100);
|
|
|
|
return (): void => clearTimeout(timeoutId);
|
|
}, [settings]);
|
|
|
|
return (
|
|
<div
|
|
className="p-5 bg-secondary/30 backdrop-blur-sm border-l border-secondary/50 h-full overflow-y-auto shadow-inner">
|
|
<div className="flex items-center gap-3 mb-8 pb-4 border-b border-secondary/50">
|
|
<FontAwesomeIcon icon={faEye} className="text-primary w-6 h-6"/>
|
|
<h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t("userEditorSettings.displayPreferences")}</h3>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div>
|
|
<label className="flex items-center gap-2 mb-2 text-text-primary">
|
|
<FontAwesomeIcon icon={faTextHeight} className="text-muted w-5 h-5"/>
|
|
{t("userEditorSettings.textSize")}
|
|
</label>
|
|
<SelectBox
|
|
defaultValue={settings.zoomLevel.toString()}
|
|
onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => {
|
|
handleSettingChange('zoomLevel', Number(e.target.value))
|
|
}}
|
|
data={zoomOptions}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2 mb-2 text-text-primary">
|
|
<FontAwesomeIcon icon={faIndent} className="text-muted w-5 h-5"/>
|
|
{t("userEditorSettings.indent")}
|
|
</label>
|
|
<div className="space-y-2">
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={50}
|
|
step={5}
|
|
value={settings.indent}
|
|
onChange={(e) => handleSettingChange('indent', Number(e.target.value))}
|
|
className="w-full accent-primary"
|
|
/>
|
|
<div className="flex justify-between text-sm text-muted">
|
|
<span>{t("userEditorSettings.indentNone")}</span>
|
|
<span className="text-text-primary font-medium">{settings.indent}px</span>
|
|
<span>{t("userEditorSettings.indentMax")}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2 mb-2 text-text-primary">
|
|
<FontAwesomeIcon icon={faTextWidth} className="text-muted w-5 h-5"/>
|
|
{t("userEditorSettings.lineHeight")}
|
|
</label>
|
|
<SelectBox
|
|
defaultValue={settings.lineHeight.toString()}
|
|
onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => handleSettingChange('lineHeight', Number(e.target.value))}
|
|
data={[
|
|
{value: "1.2", label: t("userEditorSettings.lineHeightCompact")},
|
|
{value: "1.5", label: t("userEditorSettings.lineHeightNormal")},
|
|
{value: "1.75", label: t("userEditorSettings.lineHeightSpaced")},
|
|
{value: "2", label: t("userEditorSettings.lineHeightDouble")}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2 mb-2 text-text-primary">
|
|
<FontAwesomeIcon icon={faFont} className="text-muted w-5 h-5"/>
|
|
{t("userEditorSettings.fontFamily")}
|
|
</label>
|
|
<SelectBox
|
|
defaultValue={settings.fontFamily}
|
|
onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => handleSettingChange('fontFamily', e.target.value as EditorDisplaySettings['fontFamily'])}
|
|
data={[
|
|
{value: "lora", label: t("userEditorSettings.fontLora")},
|
|
{value: "serif", label: t("userEditorSettings.fontSerif")},
|
|
{value: "sans-serif", label: t("userEditorSettings.fontSansSerif")},
|
|
{value: "monospace", label: t("userEditorSettings.fontMonospace")}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2 mb-2 text-text-primary">
|
|
<FontAwesomeIcon icon={faTextWidth} className="text-muted w-5 h-5"/>
|
|
{t("userEditorSettings.maxWidth")}
|
|
</label>
|
|
<div className="space-y-2">
|
|
<input
|
|
type="range"
|
|
min={600}
|
|
max={1200}
|
|
step={50}
|
|
value={settings.maxWidth}
|
|
onChange={(e) => handleSettingChange('maxWidth', Number(e.target.value))}
|
|
className="w-full accent-primary"
|
|
/>
|
|
<div className="flex justify-between text-sm text-muted">
|
|
<span>{t("userEditorSettings.maxWidthNarrow")}</span>
|
|
<span className="text-text-primary font-medium">{settings.maxWidth}px</span>
|
|
<span>{t("userEditorSettings.maxWidthWide")}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2 mb-2 text-text-primary">
|
|
<FontAwesomeIcon icon={faPalette} className="text-muted w-5 h-5"/>
|
|
{t("userEditorSettings.theme")}
|
|
</label>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{themeButtons.map((themeBtn) => (
|
|
<button
|
|
key={themeBtn.key}
|
|
onClick={() => handleSettingChange('theme', themeBtn.key)}
|
|
className={themeBtn.className}
|
|
>
|
|
{t(`userEditorSettings.themeOption.${themeBtn.key}`)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={settings.focusMode}
|
|
onChange={(e) => handleSettingChange('focusMode', e.target.checked)}
|
|
className="w-4 h-4 accent-primary"
|
|
/>
|
|
<span className="text-text-primary">{t("userEditorSettings.focusMode")}</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="pt-6 border-t border-secondary/50">
|
|
<button
|
|
onClick={resetToDefaults}
|
|
className="w-full py-2.5 bg-secondary/50 border border-secondary/50 rounded-xl text-muted hover:text-text-primary hover:border-secondary hover:bg-secondary transition-all duration-200 hover:scale-105 shadow-sm hover:shadow-md font-medium"
|
|
>
|
|
{t("userEditorSettings.reset")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |