feat: warn about low thumbnail resolution when selecting beta themes

Beta themes (Gallery Premium, Gallery Story) display thumbnails at
400-800px, but the default thumbnail size is 300x300px, causing visible
pixelation. Show an amber warning banner with a link to Thumbnail
Settings when a beta layout is active and thumbnails are below 500px.

Warning appears both in the preset selector and the layout selector
sections of the theme customizer.

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<ThemeCustomizerEnhancedProps> = (
   const [selectedPreset, setSelectedPreset] = useState(presetName);
   const [customCss, setCustomCss] = useState(value.customCss || '');
   const [showCssInstructions, setShowCssInstructions] = useState(false);
-  // const logoInputRef = useRef<HTMLInputElement>(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<ThemeCustomizerEnhancedProps> = (
             </button>
           ))}
         </div>
+
+        {/* Warning: Beta preset with low thumbnail resolution */}
+        {isBetaLayout && isThumbnailTooSmall && !showGalleryLayouts && (
+          <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
+            <div className="flex items-start gap-3">
+              <AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
+                  {t('branding.betaThumbnailWarningTitle')}
+                </p>
+                <p className="text-sm text-amber-700 dark:text-amber-400 mt-1">
+                  {t('branding.betaThumbnailWarningText', { width: thumbnailWidth, height: thumbnailHeight, recommended: MIN_RECOMMENDED_THUMBNAIL_SIZE })}
+                </p>
+                <a
+                  href="/admin/settings"
+                  className="inline-flex items-center gap-1 mt-2 text-sm font-medium text-amber-800 dark:text-amber-300 hover:underline"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    window.location.href = '/admin/settings';
+                  }}
+                >
+                  {t('branding.betaThumbnailWarningLink')} →
+                </a>
+              </div>
+            </div>
+          </div>
+        )}
       </Card>
 
       {/* Gallery Layout */}
@@ -271,6 +312,33 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
             ))}
           </div>
 
+          {/* Warning: Beta theme with low thumbnail resolution */}
+          {isBetaLayout && isThumbnailTooSmall && (
+            <div className="mt-4 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
+              <div className="flex items-start gap-3">
+                <AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
+                    {t('branding.betaThumbnailWarningTitle')}
+                  </p>
+                  <p className="text-sm text-amber-700 dark:text-amber-400 mt-1">
+                    {t('branding.betaThumbnailWarningText', { width: thumbnailWidth, height: thumbnailHeight, recommended: MIN_RECOMMENDED_THUMBNAIL_SIZE })}
+                  </p>
+                  <a
+                    href="/admin/settings"
+                    className="inline-flex items-center gap-1 mt-2 text-sm font-medium text-amber-800 dark:text-amber-300 hover:underline"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      window.location.href = '/admin/settings';
+                    }}
+                  >
+                    {t('branding.betaThumbnailWarningLink')} →
+                  </a>
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Layout-specific settings */}
           {localTheme.galleryLayout && (
             <div className="mt-6 space-y-4 pt-6 border-t border-neutral-200 dark:border-neutral-700">

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",

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",

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",

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",

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": "Панель администратора",