diff --git a/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx b/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx index 11fd423b..3ad8dfbd 100644 --- a/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx +++ b/frontend/src/components/admin/ThemeCustomizerEnhanced.tsx @@ -1,10 +1,10 @@ import React, { useState, useEffect } from 'react'; -import { Palette, RotateCcw, Check, Layout, Type, Sparkles, Grid3X3, Layers, Play, Clock, Image, LayoutGrid, ChevronDown, Code, Info, FileCode, ImageIcon, Minimize2, EyeOff, Menu, SlidersHorizontal, Columns, Film } from 'lucide-react'; +import { Palette, RotateCcw, Check, Layout, Type, Sparkles, Grid3X3, Layers, Play, Clock, Image, LayoutGrid, ChevronDown, Code, Info, FileCode, ImageIcon, Minimize2, EyeOff, Menu, SlidersHorizontal, Columns, Film, AlertTriangle } from 'lucide-react'; import { Button, Card, Input } from '../common'; import { ThemeConfig, GALLERY_THEME_PRESETS, GalleryLayoutType, HeaderStyleType, HeroDividerStyle } from '../../types/theme.types'; import type { EnabledTemplate } from '../../services/cssTemplates.service'; -// import { settingsService } from '../../services/settings.service'; -// import { toast } from 'react-toastify'; +import { settingsService } from '../../services/settings.service'; +import { useQuery } from '@tanstack/react-query'; import { useTranslation } from 'react-i18next'; interface ThemeCustomizerEnhancedProps { @@ -90,7 +90,21 @@ export const ThemeCustomizerEnhanced: React.FC = ( const [selectedPreset, setSelectedPreset] = useState(presetName); const [customCss, setCustomCss] = useState(value.customCss || ''); const [showCssInstructions, setShowCssInstructions] = useState(false); - // const logoInputRef = useRef(null); + + const BETA_LAYOUTS: GalleryLayoutType[] = ['gallery-premium', 'gallery-story']; + const MIN_RECOMMENDED_THUMBNAIL_SIZE = 500; + + // Fetch thumbnail settings to warn about low resolution with beta themes + const { data: allSettings } = useQuery({ + queryKey: ['admin-settings'], + queryFn: () => settingsService.getAllSettings(), + staleTime: 60000, + }); + + const thumbnailWidth = parseInt(allSettings?.thumbnail_width) || 300; + const thumbnailHeight = parseInt(allSettings?.thumbnail_height) || 300; + const isBetaLayout = BETA_LAYOUTS.includes(localTheme.galleryLayout as GalleryLayoutType); + const isThumbnailTooSmall = Math.max(thumbnailWidth, thumbnailHeight) < MIN_RECOMMENDED_THUMBNAIL_SIZE; useEffect(() => { setLocalTheme(value); @@ -230,6 +244,33 @@ export const ThemeCustomizerEnhanced: React.FC = ( ))} + + {/* Warning: Beta preset with low thumbnail resolution */} + {isBetaLayout && isThumbnailTooSmall && !showGalleryLayouts && ( +
+
+ +
+

+ {t('branding.betaThumbnailWarningTitle')} +

+

+ {t('branding.betaThumbnailWarningText', { width: thumbnailWidth, height: thumbnailHeight, recommended: MIN_RECOMMENDED_THUMBNAIL_SIZE })} +

+ { + e.preventDefault(); + window.location.href = '/admin/settings'; + }} + > + {t('branding.betaThumbnailWarningLink')} → + +
+
+
+ )} {/* Gallery Layout */} @@ -271,6 +312,33 @@ export const ThemeCustomizerEnhanced: React.FC = ( ))} + {/* Warning: Beta theme with low thumbnail resolution */} + {isBetaLayout && isThumbnailTooSmall && ( +
+
+ +
+

+ {t('branding.betaThumbnailWarningTitle')} +

+

+ {t('branding.betaThumbnailWarningText', { width: thumbnailWidth, height: thumbnailHeight, recommended: MIN_RECOMMENDED_THUMBNAIL_SIZE })} +

+ { + e.preventDefault(); + window.location.href = '/admin/settings'; + }} + > + {t('branding.betaThumbnailWarningLink')} → + +
+
+
+ )} + {/* Layout-specific settings */} {localTheme.galleryLayout && (
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json index 21252d5c..236bb971 100644 --- a/frontend/src/i18n/locales/de.json +++ b/frontend/src/i18n/locales/de.json @@ -1705,7 +1705,10 @@ "classic": "Inline-Filterleiste unter der Kopfzeile", "sidebar": "Menü-Schaltfläche öffnet Seitenleiste mit Filtern" }, - "controlsStyleHeroWarning": "Für Hero-Kopfzeilen wird die Seitenleiste empfohlen, um zu verhindern, dass Steuerelemente über dem Hero-Bild erscheinen." + "controlsStyleHeroWarning": "Für Hero-Kopfzeilen wird die Seitenleiste empfohlen, um zu verhindern, dass Steuerelemente über dem Hero-Bild erscheinen.", + "betaThumbnailWarningTitle": "Niedrige Thumbnail-Auflösung erkannt", + "betaThumbnailWarningText": "Ihre Thumbnails sind derzeit {{width}}×{{height}}px. Beta-Themes zeigen Fotos in größeren Formaten an und benötigen mindestens {{recommended}}×{{recommended}}px für gute Qualität. Erhöhen Sie die Thumbnail-Abmessungen unter Einstellungen > Thumbnails und regenerieren Sie diese.", + "betaThumbnailWarningLink": "Zu den Thumbnail-Einstellungen" }, "admin": { "title": "Admin-Panel", diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index a0dcae8f..30ae0f9e 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -1276,7 +1276,10 @@ "classic": "Inline filter bar below header", "sidebar": "Menu button opens sidebar with filters" }, - "controlsStyleHeroWarning": "Sidebar is recommended for hero headers to prevent controls appearing above the hero image." + "controlsStyleHeroWarning": "Sidebar is recommended for hero headers to prevent controls appearing above the hero image.", + "betaThumbnailWarningTitle": "Low thumbnail resolution detected", + "betaThumbnailWarningText": "Your thumbnails are currently {{width}}×{{height}}px. Beta themes display photos at larger sizes and require at least {{recommended}}×{{recommended}}px for good quality. Increase the thumbnail dimensions in Settings > Thumbnails and regenerate.", + "betaThumbnailWarningLink": "Go to Thumbnail Settings" }, "admin": { "title": "Admin Panel", diff --git a/frontend/src/i18n/locales/nl.json b/frontend/src/i18n/locales/nl.json index 4a369ebc..50c53ac8 100644 --- a/frontend/src/i18n/locales/nl.json +++ b/frontend/src/i18n/locales/nl.json @@ -1276,7 +1276,10 @@ "classic": "Inline filterbalk onder de header", "sidebar": "Menuknop opent zijbalk met filters" }, - "controlsStyleHeroWarning": "Zijbalk wordt aanbevolen voor hero-headers om te voorkomen dat bedieningen boven de hero-afbeelding verschijnen." + "controlsStyleHeroWarning": "Zijbalk wordt aanbevolen voor hero-headers om te voorkomen dat bedieningen boven de hero-afbeelding verschijnen.", + "betaThumbnailWarningTitle": "Lage thumbnailresolutie gedetecteerd", + "betaThumbnailWarningText": "Uw thumbnails zijn momenteel {{width}}×{{height}}px. Beta-thema's tonen foto's op grotere formaten en vereisen minimaal {{recommended}}×{{recommended}}px voor goede kwaliteit. Verhoog de thumbnail-afmetingen via Instellingen > Thumbnails en genereer opnieuw.", + "betaThumbnailWarningLink": "Naar thumbnail-instellingen" }, "admin": { "title": "Beheerpaneel", diff --git a/frontend/src/i18n/locales/pt.json b/frontend/src/i18n/locales/pt.json index 345db31b..f7ec8e9c 100644 --- a/frontend/src/i18n/locales/pt.json +++ b/frontend/src/i18n/locales/pt.json @@ -1276,7 +1276,10 @@ "classic": "Barra de filtros inline abaixo do cabeçalho", "sidebar": "Botão de menu abre barra lateral com filtros" }, - "controlsStyleHeroWarning": "A barra lateral é recomendada para cabeçalhos hero para evitar que os controles apareçam acima da imagem hero." + "controlsStyleHeroWarning": "A barra lateral é recomendada para cabeçalhos hero para evitar que os controles apareçam acima da imagem hero.", + "betaThumbnailWarningTitle": "Baixa resolução de miniatura detectada", + "betaThumbnailWarningText": "Suas miniaturas são atualmente {{width}}×{{height}}px. Temas beta exibem fotos em tamanhos maiores e requerem pelo menos {{recommended}}×{{recommended}}px para boa qualidade. Aumente as dimensões das miniaturas em Configurações > Miniaturas e regenere.", + "betaThumbnailWarningLink": "Ir para configurações de miniaturas" }, "admin": { "title": "Painel Admin", diff --git a/frontend/src/i18n/locales/ru.json b/frontend/src/i18n/locales/ru.json index 6fe4f821..01ee14fc 100644 --- a/frontend/src/i18n/locales/ru.json +++ b/frontend/src/i18n/locales/ru.json @@ -1276,7 +1276,10 @@ "classic": "Встроенная панель фильтров под заголовком", "sidebar": "Кнопка меню открывает боковую панель с фильтрами" }, - "controlsStyleHeroWarning": "Для заголовков-баннеров рекомендуется боковая панель, чтобы элементы управления не перекрывали изображение." + "controlsStyleHeroWarning": "Для заголовков-баннеров рекомендуется боковая панель, чтобы элементы управления не перекрывали изображение.", + "betaThumbnailWarningTitle": "Обнаружено низкое разрешение миниатюр", + "betaThumbnailWarningText": "Ваши миниатюры сейчас {{width}}×{{height}}px. Бета-темы отображают фото в большем размере и требуют минимум {{recommended}}×{{recommended}}px для хорошего качества. Увеличьте размеры миниатюр в Настройки > Миниатюры и пересоздайте их.", + "betaThumbnailWarningLink": "Перейти к настройкам миниатюр" }, "admin": { "title": "Панель администратора",