Fix PicPeak regressions and close #22 #24 #25 #26 #27 #28

frontend/src/components/admin/GalleryPreview.tsx

@@ -1,9 +1,19 @@
 import React, { useMemo } from 'react';
 import { Camera } from 'lucide-react';
 import { ThemeConfig, GalleryLayoutType } from '../../types/theme.types';
+import { buildResourceUrl } from '../../utils/url';
+
+interface GalleryPreviewBranding {
+  company_name?: string;
+  company_tagline?: string;
+  logo_url?: string;
+  logo_display_mode?: 'logo_only' | 'text_only' | 'logo_and_text';
+  logo_position?: 'left' | 'center' | 'right';
+}
 
 interface GalleryPreviewProps {
   theme: ThemeConfig;
+  branding?: GalleryPreviewBranding;
   layoutType?: GalleryLayoutType;
   className?: string;
 }
@@ -56,6 +66,7 @@ const PreviewPhoto: React.FC<{
 
 export const GalleryPreview: React.FC<GalleryPreviewProps> = ({ 
   theme, 
+  branding,
   layoutType,
   className = '' 
 }) => {
@@ -63,6 +74,23 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
   
   // Use the provided layoutType or fallback to theme's gallery layout
   const activeLayout = layoutType || theme.galleryLayout || 'grid';
+
+  const displayMode = branding?.logo_display_mode || 'logo_and_text';
+  const showLogo = displayMode === 'logo_only' || displayMode === 'logo_and_text';
+  const showText = displayMode === 'text_only' || displayMode === 'logo_and_text';
+  const brandName = branding?.company_name?.trim() || 'Your Studio';
+  const brandTagline = branding?.company_tagline?.trim() || '';
+  const resolvedLogoUrl = showLogo && branding?.logo_url
+    ? (branding.logo_url.startsWith('http')
+        ? branding.logo_url
+        : buildResourceUrl(branding.logo_url))
+    : null;
+  const logoPosition = branding?.logo_position || 'left';
+  const brandFlexClass = logoPosition === 'center'
+    ? 'justify-center text-center'
+    : logoPosition === 'right'
+      ? 'justify-end text-right flex-row-reverse'
+      : 'justify-start text-left';
   
   const renderLayout = () => {
     const spacing = theme.gallerySettings?.spacing || 'normal';
@@ -163,14 +191,41 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
     >
       {/* Preview Header */}
       <div 
-        className="px-4 py-3 border-b"
+        className="px-4 py-3 border-b space-y-2"
         style={{
           borderColor: theme.primaryColor ? `${theme.primaryColor}20` : '#e5e7eb',
         }}
       >
-        <h3 className="text-sm font-medium">
-          Gallery Preview - <span className="capitalize">{activeLayout}</span> Layout
-        </h3>
+        <div className={`flex items-center gap-3 ${brandFlexClass}`}>
+          {showLogo && (
+            resolvedLogoUrl ? (
+              <img
+                src={resolvedLogoUrl}
+                alt={brandName}
+                className="h-8 w-auto object-contain"
+              />
+            ) : (
+              <div className="h-8 w-8 rounded-full bg-neutral-200 flex items-center justify-center">
+                <Camera className="w-4 h-4 text-neutral-500" />
+              </div>
+            )
+          )}
+          {showText && (
+            <div>
+              <p className="text-sm font-semibold leading-tight">{brandName}</p>
+              {brandTagline && (
+                <p className="text-xs text-neutral-500 leading-tight">{brandTagline}</p>
+              )}
+            </div>
+          )}
+          {!showLogo && !showText && (
+            <p className="text-sm font-semibold">{brandName}</p>
+          )}
+        </div>
+        <div className="text-xs text-neutral-500 flex justify-between">
+          <span>Gallery preview</span>
+          <span className="capitalize">{activeLayout} layout</span>
+        </div>
       </div>
       
       {/* Preview Content */}
@@ -181,4 +236,4 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
   );
 };
 
-GalleryPreview.displayName = 'GalleryPreview';
+GalleryPreview.displayName = 'GalleryPreview';

frontend/src/components/gallery/GalleryFilter.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { Heart, Star, MessageSquare } from 'lucide-react';
+import { Heart, Star, MessageSquare, Bookmark } from 'lucide-react';
 import { Button } from '../common';
 import { useTranslation } from 'react-i18next';
 
-export type FilterType = 'all' | 'liked' | 'rated' | 'commented';
+export type FilterType = 'all' | 'liked' | 'favorited' | 'rated' | 'commented';
 
 interface GalleryFilterProps {
   currentFilter: FilterType;
   onFilterChange: (filter: FilterType) => void;
   feedbackEnabled: boolean;
   likeCount?: number;
+  favoriteCount?: number;
   ratedCount?: number;
   className?: string;
   isMobile?: boolean;
@@ -21,6 +22,7 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
   onFilterChange,
   feedbackEnabled,
   likeCount = 0,
+  favoriteCount = 0,
   ratedCount = 0,
   className = '',
   isMobile = false,
@@ -59,6 +61,15 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
             >
               <Heart className="w-3.5 h-3.5" />
             </Button>
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="p-1 w-8 h-8 flex items-center justify-center"
+              aria-label={t('gallery.favorited', 'Saved')}
+            >
+              <Bookmark className="w-3.5 h-3.5" />
+            </Button>
             <Button
               variant={currentFilter === 'rated' ? 'primary' : 'outline'}
               size="sm"
@@ -110,6 +121,16 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
               <Heart className="w-3 h-3" />
               <span>{likeCount > 0 ? likeCount : t('gallery.liked', 'Liked')}</span>
             </Button>
+
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="text-xs flex-1 min-w-[80px] flex items-center justify-center gap-1"
+            >
+              <Bookmark className="w-3 h-3" />
+              <span>{favoriteCount > 0 ? favoriteCount : t('gallery.favorited', 'Saved')}</span>
+            </Button>
             
             <Button
               variant={currentFilter === 'rated' ? 'primary' : 'outline'}
@@ -152,6 +173,21 @@ export const GalleryFilter: React.FC<GalleryFilterProps> = ({
                 </span>
               )}
             </Button>
+
+            <Button
+              variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+              size="sm"
+              onClick={() => onFilterChange('favorited')}
+              className="text-xs sm:text-sm flex items-center gap-1"
+            >
+              <Bookmark className="w-3 h-3 sm:w-4 sm:h-4" />
+              <span className="hidden sm:inline">{t('gallery.favorited', 'Saved')}</span>
+              {favoriteCount > 0 && (
+                <span className="bg-primary-100 text-primary-700 px-1.5 rounded">
+                  {favoriteCount}
+                </span>
+              )}
+            </Button>
             
             <Button
               variant={currentFilter === 'rated' ? 'primary' : 'outline'}

frontend/src/components/gallery/GallerySidebar.tsx

@@ -32,6 +32,7 @@ interface GallerySidebarProps {
   filterType?: FilterType;
   onFilterChange?: (filter: FilterType) => void;
   likeCount?: number;
+  favoriteCount?: number;
   ratedCount?: number;
 }
 
@@ -62,6 +63,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
   filterType = 'all',
   onFilterChange,
   likeCount = 0,
+  favoriteCount = 0,
   ratedCount = 0
 }) => {
   const { t } = useTranslation();
@@ -221,6 +223,7 @@ export const GallerySidebar: React.FC<GallerySidebarProps> = ({
                 }}
                 feedbackEnabled={feedbackEnabled}
                 likeCount={likeCount}
+                favoriteCount={favoriteCount}
                 ratedCount={ratedCount}
                 className="w-full"
                 variant="compact"

frontend/src/components/gallery/GalleryView.tsx

@@ -270,6 +270,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
       case 'liked':
         photos = photos.filter(photo => (photo.like_count || 0) > 0);
         break;
+      case 'favorited':
+        photos = photos.filter(photo => (photo.favorite_count || 0) > 0);
+        break;
       case 'rated':
         photos = photos.filter(photo => (photo.average_rating || 0) > 0 || (photo.total_ratings || 0) > 0);
         break;
@@ -314,6 +317,21 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
     return photos;
   }, [data?.photos, selectedCategoryId, searchTerm, sortBy, watermarkEnabled, slug, filterType]);
 
+  const likeCount = useMemo(
+    () => data?.photos?.filter(p => (p.like_count ?? 0) > 0).length || 0,
+    [data?.photos]
+  );
+
+  const favoriteCount = useMemo(
+    () => data?.photos?.filter(p => (p.favorite_count ?? 0) > 0).length || 0,
+    [data?.photos]
+  );
+
+  const ratedCount = useMemo(
+    () => data?.photos?.filter(p => (p.total_ratings || 0) > 0 || (p.average_rating || 0) > 0).length || 0,
+    [data?.photos]
+  );
+
   // Check if downloads are allowed (both event setting and not expired)
   const allowDownloads = !isExpired && (data?.event?.allow_downloads === true);
 
@@ -471,8 +489,9 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
           feedbackEnabled={feedbackEnabled}
           filterType={filterType}
           onFilterChange={setFilterType}
-          likeCount={data?.photos?.filter(p => (p.like_count ?? 0) > 0).length || 0}
-          ratedCount={data?.photos?.filter(p => (p.total_ratings || 0) > 0).length || 0}
+          likeCount={likeCount}
+          favoriteCount={favoriteCount}
+          ratedCount={ratedCount}
         />
       ) : null}
 

frontend/src/components/gallery/PhotoFilterBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Search, SortAsc, Grid, Heart, Star, MessageSquare } from 'lucide-react';
+import { Search, SortAsc, Grid, Heart, Star, MessageSquare, Bookmark } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input } from '../common';
 import type { FilterType } from './GalleryFilter';
@@ -50,7 +50,6 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
 }) => {
   const { t } = useTranslation();
   const [showSortMenu, setShowSortMenu] = useState(false);
-
   return (
     <div className="space-y-4">
       {/* Search and Sort */}
@@ -195,6 +194,15 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
                   >
                     <Heart className="w-3.5 h-3.5" />
                   </Button>
+                  <Button
+                    variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+                    size="sm"
+                    onClick={() => onFilterChange('favorited')}
+                    className="p-1 w-8 h-8 flex items-center justify-center"
+                    aria-label={t('gallery.favorited', 'Saved')}
+                  >
+                    <Bookmark className="w-3.5 h-3.5" />
+                  </Button>
                   <Button
                     variant={currentFilter === 'rated' ? 'primary' : 'outline'}
                     size="sm"
@@ -248,6 +256,15 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
               >
                 <Heart className="w-3.5 h-3.5" />
               </Button>
+              <Button
+                variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
+                size="sm"
+                onClick={() => onFilterChange('favorited')}
+                className="p-1 w-8 h-8 flex items-center justify-center"
+                aria-label={t('gallery.favorited', 'Saved')}
+              >
+                <Bookmark className="w-3.5 h-3.5" />
+              </Button>
               <Button
                 variant={currentFilter === 'rated' ? 'primary' : 'outline'}
                 size="sm"