From 99377ee38d2bfebac445d9530aa5a8dae0b9fc85 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Thu, 2 Oct 2025 14:40:50 +0200 Subject: [PATCH] feat: enhance BackgroundImageSelector with custom image management - Removed preserved custom URL handling and replaced it with a custom images array for better management of user-added backgrounds. - Updated the component to allow adding, selecting, and removing custom images, improving user experience and flexibility. - Adjusted background cycling logic to include custom images, ensuring a seamless integration with existing backgrounds. --- .../settings/BackgroundImageSelector.tsx | 133 +++++++++++------- src/hooks/useBackgroundCycle.ts | 22 ++- src/lib/types.ts | 2 + 3 files changed, 93 insertions(+), 64 deletions(-) diff --git a/src/components/settings/BackgroundImageSelector.tsx b/src/components/settings/BackgroundImageSelector.tsx index ac54f9e..ef3aaa2 100644 --- a/src/components/settings/BackgroundImageSelector.tsx +++ b/src/components/settings/BackgroundImageSelector.tsx @@ -87,19 +87,11 @@ export function BackgroundImageSelector() { const [customUrl, setCustomUrl] = useState(''); const [showCustomInput, setShowCustomInput] = useState(false); const [showAdvancedOptions, setShowAdvancedOptions] = useState(false); - const [preservedCustomUrl, setPreservedCustomUrl] = useState(''); const currentBackground = preferences?.viewPreferences?.backgroundImage; const backgroundBlur = preferences?.viewPreferences?.backgroundBlur || 0; const backgroundOpacity = preferences?.viewPreferences?.backgroundOpacity || 100; - - // Préserver l'URL personnalisée si elle existe - useEffect(() => { - if (currentBackground && !PRESET_BACKGROUNDS.some(preset => preset.id === currentBackground)) { - setPreservedCustomUrl(currentBackground); - localStorage.setItem('preservedCustomBackground', currentBackground); - } - }, [currentBackground]); + const customImages = preferences?.viewPreferences?.customImages || []; const handlePresetSelect = (presetId: string) => { const backgroundImage = presetId === 'none' ? undefined : presetId; @@ -110,23 +102,33 @@ export function BackgroundImageSelector() { if (!customUrl.trim()) return; const url = customUrl.trim(); - updateViewPreferences({ backgroundImage: url }); - setPreservedCustomUrl(url); - localStorage.setItem('preservedCustomBackground', url); + + // Ajouter l'image aux images personnalisées si elle n'existe pas déjà + if (!customImages.includes(url)) { + const newCustomImages = [...customImages, url]; + updateViewPreferences({ + backgroundImage: url, + customImages: newCustomImages + }); + } else { + // Si elle existe déjà, juste la sélectionner + updateViewPreferences({ backgroundImage: url }); + } + setCustomUrl(''); setShowCustomInput(false); }; - const handleRemoveCustom = () => { - updateViewPreferences({ backgroundImage: undefined }); - setPreservedCustomUrl(''); - localStorage.removeItem('preservedCustomBackground'); + const handleRemoveCustomImage = (urlToRemove: string) => { + const newCustomImages = customImages.filter(url => url !== urlToRemove); + updateViewPreferences({ + customImages: newCustomImages, + backgroundImage: currentBackground === urlToRemove ? undefined : currentBackground + }); }; - const handleRestoreCustom = () => { - if (preservedCustomUrl) { - updateViewPreferences({ backgroundImage: preservedCustomUrl }); - } + const handleSelectCustomImage = (url: string) => { + updateViewPreferences({ backgroundImage: url }); }; const handleBlurChange = (blur: number) => { @@ -219,6 +221,60 @@ export function BackgroundImageSelector() { + {/* Images personnalisées */} + {customImages.length > 0 && ( + + +
Images personnalisées :
+
+ {customImages.map((url, index) => ( +
+ + + {/* Bouton supprimer - positionné absolument */} + +
+ ))} +
+ + + )} {/* URL personnalisée */} @@ -231,25 +287,13 @@ export function BackgroundImageSelector() { Ajoutez votre propre image de fond

-
- {preservedCustomUrl && ( - - )} - -
+ {showCustomInput && ( @@ -282,17 +326,6 @@ export function BackgroundImageSelector() { )} - - {/* Bouton pour supprimer l'image personnalisée */} - {currentBackground && !PRESET_BACKGROUNDS.find(p => p.id === currentBackground) && ( - - )} diff --git a/src/hooks/useBackgroundCycle.ts b/src/hooks/useBackgroundCycle.ts index f1a0400..80af728 100644 --- a/src/hooks/useBackgroundCycle.ts +++ b/src/hooks/useBackgroundCycle.ts @@ -23,23 +23,17 @@ export function useBackgroundCycle() { const cycleBackground = () => { const currentBackground = preferences?.viewPreferences?.backgroundImage; + const customImages = preferences?.viewPreferences?.customImages || []; - // Construire la liste complète des backgrounds (prédéfinis + personnalisé) + // Construire la liste complète des backgrounds (prédéfinis + personnalisés) const allBackgrounds = [...BACKGROUND_CYCLE]; - // Ajouter l'image personnalisée préservée si elle existe - const preservedCustomUrl = localStorage.getItem('preservedCustomBackground'); - - if (preservedCustomUrl && !BACKGROUND_CYCLE.includes(preservedCustomUrl)) { - allBackgrounds.push(preservedCustomUrl); - } - - // Ajouter aussi l'image actuelle si elle est personnalisée ET différente de celle préservée - if (currentBackground && - !BACKGROUND_CYCLE.includes(currentBackground) && - currentBackground !== preservedCustomUrl) { - allBackgrounds.push(currentBackground); - } + // Ajouter toutes les images personnalisées + customImages.forEach(url => { + if (!allBackgrounds.includes(url)) { + allBackgrounds.push(url); + } + }); const currentIndex = allBackgrounds.findIndex(bg => bg === currentBackground); diff --git a/src/lib/types.ts b/src/lib/types.ts index 6e4acd2..7deefce 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -107,6 +107,7 @@ export interface ViewPreferences { backgroundImage?: string; backgroundBlur?: number; backgroundOpacity?: number; + customImages?: string[]; [key: string]: | boolean | 'tags' @@ -117,6 +118,7 @@ export interface ViewPreferences { | 'large' | string | number + | string[] | undefined; }