gallery header improvement

frontend/src/components/Constructor/ElementEditorPanel.tsx

@@ -495,6 +495,9 @@ export function ElementEditorPanel({
                           galleryHeaderImageUrl={
                             selectedElement.galleryHeaderImageUrl || ''
                           }
+                          galleryHeaderText={
+                            selectedElement.galleryHeaderText || ''
+                          }
                           galleryTitle={selectedElement.galleryTitle || ''}
                           galleryInfoSpans={
                             selectedElement.galleryInfoSpans || []

frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx

@@ -17,6 +17,7 @@ import { FONT_OPTIONS } from '../../lib/fonts';
 interface GallerySettingsSectionCompactProps {
   // Header settings
   galleryHeaderImageUrl: string;
+  galleryHeaderText: string;
   galleryTitle: string;
   galleryInfoSpans: GalleryInfoSpan[];
   galleryColumns: number;
@@ -29,6 +30,7 @@ interface GallerySettingsSectionCompactProps {
   // Header handlers
   onUpdateHeader: (patch: {
     galleryHeaderImageUrl?: string;
+    galleryHeaderText?: string;
     galleryTitle?: string;
     galleryColumns?: number;
     galleryTitleFontFamily?: string;
@@ -47,6 +49,7 @@ const GallerySettingsSectionCompact: React.FC<
   GallerySettingsSectionCompactProps
 > = ({
   galleryHeaderImageUrl,
+  galleryHeaderText,
   galleryTitle,
   galleryInfoSpans,
   galleryColumns,
@@ -87,6 +90,15 @@ const GallerySettingsSectionCompact: React.FC<
           ))}
         </select>
 
+        <input
+          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+          placeholder='Header text (if no image)'
+          value={galleryHeaderText}
+          onChange={(event) =>
+            onUpdateHeader({ galleryHeaderText: event.target.value })
+          }
+        />
+
         <input
           className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
           placeholder='Title (location note)'

frontend/src/components/ElementSettings/types.ts

@@ -172,6 +172,7 @@ export interface GallerySettingsSectionProps {
 export interface GallerySettingsSectionCompactProps {
   // Header settings
   galleryHeaderImageUrl: string;
+  galleryHeaderText: string;
   galleryTitle: string;
   galleryInfoSpans: GalleryInfoSpan[];
   galleryColumns: number;
@@ -184,6 +185,7 @@ export interface GallerySettingsSectionCompactProps {
   // Header handlers
   onUpdateHeader: (patch: {
     galleryHeaderImageUrl?: string;
+    galleryHeaderText?: string;
     galleryTitle?: string;
     galleryColumns?: number;
     galleryTitleFontFamily?: string;

frontend/src/components/UiElements/elements/GalleryElement.tsx

@@ -34,6 +34,7 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
   const cards: GalleryCard[] = element.galleryCards || [];
   const infoSpans: GalleryInfoSpan[] = element.galleryInfoSpans || [];
   const headerImageUrl = element.galleryHeaderImageUrl;
+  const headerText = element.galleryHeaderText;
   const title = element.galleryTitle;
   const columns = element.galleryColumns || 3;
 
@@ -61,8 +62,8 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
         className='flex flex-col gap-2 p-3 rounded-xl min-w-[200px] backdrop-blur-sm'
         style={{ backgroundColor: backgroundColor || 'rgba(0, 0, 0, 0.6)' }}
       >
-        {/* Header image */}
-        {headerImageUrl && (
+        {/* Header: image takes priority, otherwise render text */}
+        {headerImageUrl ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={resolve(headerImageUrl)}
@@ -70,7 +71,14 @@ const GalleryElement: React.FC<GalleryElementProps> = ({
             className='w-full h-auto object-cover rounded-lg'
             draggable={false}
           />
-        )}
+        ) : headerText ? (
+          <div
+            className='text-2xl font-bold px-1 py-2'
+            style={titleFontStyle}
+          >
+            {headerText}
+          </div>
+        ) : null}
 
         {/* Title */}
         {title && (

frontend/src/types/constructor.ts

@@ -94,6 +94,7 @@ export interface CanvasElement extends BaseCanvasElement {
   galleryCards?: GalleryCard[];
   // Gallery header settings
   galleryHeaderImageUrl?: string;
+  galleryHeaderText?: string;
   galleryTitle?: string;
   galleryInfoSpans?: GalleryInfoSpan[];
   galleryColumns?: number;