paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: theme save without Live Preview, Branding default on new events, gallery loading flicker (#323, #321)

Browse Source 
#323-A — Branding colour changes weren't persisting unless "Apply changes
immediately (Live Preview)" was checked. ThemeCustomizerEnhanced was
gating its `onChange` callback on `isPreviewMode`, but the parent
BrandingPage already gates global `setTheme()` on its own copy of that
flag — so the customizer's gate was double-gating and silently dropped
the new values from the parent state that Save reads from. Always
propagate `onChange`; let parents decide what's "live". Removed the now
no-op `isPreviewMode` prop and dropped the unused passers.

#323-B — Default theme set in Branding wasn't applied to new events.
CreateEventPage only inherited the event-type's recommended preset, with
'default' falling back to Classic Grid. Now reads `settings.theme_config`
on first load and uses it as the form's starting theme; the event-type
effect skips the generic 'default' so the Branding default sticks for
event types like "Other".

#321 — Visitors saw four sequential render states when opening a gallery
(full-page "Loading Gallery" → "publicly accessible — loading photos"
card → skeleton grid → real gallery). Extracted the skeleton into a
shared <GallerySkeleton/> and used it for both GalleryView's photos-
loading state and GalleryPage's gallery-info-loading + public-auto-login
phases. The "publicly accessible" interstitial is gone. Net: one
continuous skeleton from URL open until real photos render.
This commit is contained in:
Paul Nothaft
2026-04-27 22:38:00 +02:00
parent 63a6bfebce
commit 822be9a9b2
6 changed files with 124 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/admin/ThemeCustomizerEnhanced.tsx
+11 -15
View File
@@ -12,7 +12,6 @@ interface ThemeCustomizerEnhancedProps {
onChange: (theme: ThemeConfig) => void;
presetName?: string;
onPresetChange?: (presetName: string) => void;
isPreviewMode?: boolean;
showGalleryLayouts?: boolean;
hideActions?: boolean;
onApply?: (theme: ThemeConfig, metadata: { presetName: string }) => Promise<void> | void;
@@ -76,7 +75,6 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
onChange,
presetName = 'default',
onPresetChange,
isPreviewMode = false,
showGalleryLayouts = true,
hideActions = false,
onApply,
@@ -125,10 +123,11 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
onPresetChange('custom');
}
if (isPreviewMode) {
// Include customCss in the propagated theme
onChange({ ...updated, customCss });
}
// Always propagate to parent so Save sees the latest values (#323).
// The "Apply changes immediately (Live Preview)" toggle controls whether
// the parent applies the theme globally — that gating belongs in the
// parent, not here.
onChange({ ...updated, customCss });
};
const handlePresetSelect = (presetKey: string) => {
@@ -140,9 +139,8 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
if (onPresetChange) {
onPresetChange(presetKey);
}
if (isPreviewMode) {
onChange(preset.config);
}
// Always propagate; live-apply gating is the parent's concern (#323).
onChange(preset.config);
}
};
@@ -795,7 +793,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
mutedTextColor: '#a3a3a3',
};
setLocalTheme(updated);
if (isPreviewMode) onChange({ ...updated, customCss });
onChange({ ...updated, customCss });
} else if (mode === 'light' && localTheme.colorMode === 'dark') {
const updated = {
...localTheme,
@@ -807,7 +805,7 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
mutedTextColor: '#737373',
};
setLocalTheme(updated);
if (isPreviewMode) onChange({ ...updated, customCss });
onChange({ ...updated, customCss });
}
}}
className={`px-4 py-2 text-sm font-medium rounded-lg border transition-colors ${
@@ -1181,10 +1179,8 @@ export const ThemeCustomizerEnhanced: React.FC<ThemeCustomizerEnhancedProps> = (
setSelectedPreset('custom');
onPresetChange('custom');
}
// Propagate customCss changes to parent in preview mode
if (isPreviewMode) {
onChange({ ...localTheme, customCss: newCss });
}
// Propagate to parent so Save sees the latest CSS (#323).
onChange({ ...localTheme, customCss: newCss });
}}
placeholder="/* Add custom CSS here */"
className="w-full h-40 px-3 py-2 font-mono text-sm border border-neutral-300 dark:border-neutral-600 rounded-lg bg-neutral-50 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100"