Fix admin reference mode regressions

frontend/src/components/admin/ThemeCustomizerEnhanced.tsx

@@ -14,6 +14,8 @@ interface ThemeCustomizerEnhancedProps {
   isPreviewMode?: boolean;
   showGalleryLayouts?: boolean;
   hideActions?: boolean;
+  onApply?: (theme: ThemeConfig, metadata: { presetName: string }) => Promise<void> | void;
+  isApplying?: boolean;
 }
 
 const layoutIcons: Record<GalleryLayoutType, React.ReactNode> = {
@@ -34,7 +36,9 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
   onPresetChange,
   isPreviewMode = false,
   showGalleryLayouts = true,
-  hideActions = false
+  hideActions = false,
+  onApply,
+  isApplying = false
 }) => {
   const { t } = useTranslation();
   const [localTheme, setLocalTheme] = useState<ThemeConfig>(value);
@@ -80,8 +84,13 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
     }
   };
 
-  const handleApply = () => {
-    onChange({ ...localTheme, customCss });
+  const handleApply = async () => {
+    const themeWithCss = { ...localTheme, customCss };
+    onChange(themeWithCss);
+
+    if (onApply) {
+      await onApply(themeWithCss, { presetName: selectedPreset });
+    }
   };
 
   const handleReset = () => {
@@ -587,11 +596,12 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
             variant="primary"
             leftIcon={<Palette className="w-4 h-4" />}
             onClick={handleApply}
+            disabled={isApplying}
           >
-            {t('branding.applyTheme')}
+            {isApplying ? t('common.applying', 'Applying...') : t('branding.applyTheme')}
           </Button>
         </div>
       )}
     </div>
   );
-};
+};

frontend/src/components/admin/__tests__/ThemeCustomizerEnhanced.test.tsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ThemeCustomizerEnhanced } from '../ThemeCustomizerEnhanced';
+import type { ThemeConfig } from '../../../types/theme.types';
+
+vi.mock('react-i18next', async () => {
+  const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next');
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (_key: string, fallback?: string) => fallback ?? _key
+    })
+  };
+});
+
+describe('ThemeCustomizerEnhanced', () => {
+  const baseTheme: ThemeConfig = {
+    primaryColor: '#000000',
+    accentColor: '#ffffff',
+    backgroundColor: '#eeeeee',
+    textColor: '#111111',
+    galleryLayout: 'grid',
+    gallerySettings: {
+      spacing: 'normal'
+    }
+  };
+
+  it('invokes onApply when Apply Theme is clicked', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    const handleApply = vi.fn().mockResolvedValue(undefined);
+
+    render(
+      <ThemeCustomizerEnhanced
+        value={baseTheme}
+        onChange={handleChange}
+        presetName="default"
+        onApply={handleApply}
+      />
+    );
+
+    const applyButton = screen.getByRole('button', { name: /branding\.applyTheme/i });
+    await user.click(applyButton);
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleApply).toHaveBeenCalledTimes(1);
+    expect(handleApply).toHaveBeenCalledWith(
+      expect.objectContaining({ primaryColor: '#000000' }),
+      expect.objectContaining({ presetName: 'default' })
+    );
+  });
+
+  it('disables the Apply button while applying', () => {
+    const handleChange = vi.fn();
+
+    render(
+      <ThemeCustomizerEnhanced
+        value={baseTheme}
+        onChange={handleChange}
+        presetName="default"
+        isApplying={true}
+      />
+    );
+
+    const applyButton = screen.getByRole('button', { name: /applying/i });
+    expect(applyButton).toBeDisabled();
+  });
+});

frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Download, Maximize2, Check, ChevronDown, Calendar, Clock, Heart, MessageSquare } from 'lucide-react';
 import { parseISO } from 'date-fns';
 import { useTranslation } from 'react-i18next';
@@ -163,12 +163,22 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
         
         {/* Scroll Indicator */}
         <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
-          <ChevronDown className="w-8 h-8 text-white drop-shadow-lg" />
+          <button
+            type="button"
+            onClick={handleScrollToGrid}
+            className="rounded-full border border-white/30 bg-white/10 p-3 text-white transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 hover:bg-white/20"
+            aria-label={t('gallery.scrollToGallery', 'Scroll to gallery')}
+          >
+            <ChevronDown className="w-8 h-8 drop-shadow-lg" />
+          </button>
         </div>
       </div>
 
       {/* Grid Section */}
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+      <div
+        ref={gridRef}
+        className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"
+      >
         {remainingPhotos.map((photo) => {
           const actualIndex = photos.findIndex(p => p.id === photo.id);
           return (
@@ -313,3 +323,9 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
     </>
   );
 };
+  const gridRef = useRef<HTMLDivElement | null>(null);
+  const handleScrollToGrid = useCallback(() => {
+    if (gridRef.current) {
+      gridRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, []);

frontend/src/pages/admin/EventDetailsPage.tsx

@@ -236,6 +236,28 @@ export const EventDetailsPage: React.FC = () => {
     },
   });
 
+  const applyThemeMutation = useMutation({
+    mutationFn: async ({ theme, presetName }: { theme: ThemeConfig; presetName: string }) => {
+      if (!id) {
+        throw new Error('Missing event identifier');
+      }
+
+      const colorThemeValue = presetName && presetName !== 'custom'
+        ? presetName
+        : JSON.stringify(theme);
+
+      return eventsService.updateEvent(parseInt(id), { color_theme: colorThemeValue });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
+      toast.success(t('branding.themeApplied', 'Theme updated'));
+    },
+    onError: (error: any) => {
+      const message = error?.response?.data?.error || t('branding.themeApplyError', 'Failed to apply theme');
+      toast.error(message);
+    }
+  });
+
   // Archive mutation
   const archiveMutation = useMutation({
     mutationFn: () => eventsService.archiveEvent(parseInt(id!)),
@@ -1124,6 +1146,20 @@ export const EventDetailsPage: React.FC = () => {
                 }}
                 isPreviewMode={false}
                 showGalleryLayouts={true}
+                onApply={async (theme, { presetName }) => {
+                  const resolvedPreset = presetName || 'custom';
+                  setCurrentTheme(theme);
+                  setCurrentPresetName(resolvedPreset);
+
+                  const themeValue = resolvedPreset !== 'custom'
+                    ? resolvedPreset
+                    : JSON.stringify(theme);
+
+                  setEditForm(prev => ({ ...prev, color_theme: themeValue }));
+
+                  await applyThemeMutation.mutateAsync({ theme, presetName: resolvedPreset });
+                }}
+                isApplying={applyThemeMutation.isPending}
               />
             </Card>
           )}