From 4b64b80b20cdbebb43ea314011c5cc310c5df33a Mon Sep 17 00:00:00 2001
From: paul <paul-nothaft@hotmail.de>
Date: Tue, 16 Sep 2025 09:11:32 +0200
Subject: [PATCH] ui(gallery): feedback filter headline + horizontal compact
 icons (desktop+mobile); render only when feedback enabled

---
 .../src/components/gallery/PhotoFilterBar.tsx | 74 ++++++++++---------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/gallery/PhotoFilterBar.tsx b/frontend/src/components/gallery/PhotoFilterBar.tsx
index 7070a88..9ef1a6b 100644
--- a/frontend/src/components/gallery/PhotoFilterBar.tsx
+++ b/frontend/src/components/gallery/PhotoFilterBar.tsx
@@ -174,36 +174,41 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
               </div>
             </div>
 
-            {/* Desktop: compact vertical feedback filter (icons only), outside the overflow area */}
+            {/* Desktop: compact horizontal feedback filter with headline (icons only) */}
             {feedbackEnabled && onFilterChange && (
-              <div className="hidden lg:flex flex-col items-center gap-1 mx-2">
-                <Button
-                  variant={currentFilter === 'all' ? 'primary' : 'outline'}
-                  size="sm"
-                  onClick={() => onFilterChange('all')}
-                  className="p-1 w-8 h-8 flex items-center justify-center"
-                  aria-label={t('gallery.all')}
-                >
-                  <Grid className="w-3.5 h-3.5" />
-                </Button>
-                <Button
-                  variant={currentFilter === 'liked' ? 'primary' : 'outline'}
-                  size="sm"
-                  onClick={() => onFilterChange('liked')}
-                  className="p-1 w-8 h-8 flex items-center justify-center"
-                  aria-label={t('feedback.likes', 'Likes')}
-                >
-                  <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('feedback.favorites', 'Favorites')}
-                >
-                  <Star className="w-3.5 h-3.5" />
-                </Button>
+              <div className="hidden lg:flex items-center gap-2 mx-2 flex-shrink-0">
+                <span className="text-sm text-neutral-600 whitespace-nowrap">
+                  {t('gallery.feedbackFilter', 'Feedback Filter')}
+                </span>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant={currentFilter === 'all' ? 'primary' : 'outline'}
+                    size="sm"
+                    onClick={() => onFilterChange('all')}
+                    className="p-1 w-8 h-8 flex items-center justify-center"
+                    aria-label={t('gallery.all', 'All')}
+                  >
+                    <Grid className="w-3.5 h-3.5" />
+                  </Button>
+                  <Button
+                    variant={currentFilter === 'liked' ? 'primary' : 'outline'}
+                    size="sm"
+                    onClick={() => onFilterChange('liked')}
+                    className="p-1 w-8 h-8 flex items-center justify-center"
+                    aria-label={t('feedback.likes', 'Likes')}
+                  >
+                    <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('feedback.favorites', 'Favorites')}
+                  >
+                    <Star className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
               </div>
             )}
 
@@ -213,16 +218,19 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
           </div>
         )}
         
-        {/* Mobile/Tablet: compact vertical icons below categories */}
+        {/* Mobile/Tablet: compact horizontal icons with headline below categories */}
         {feedbackEnabled && onFilterChange && (
-          <div className="flex lg:hidden gap-2">
-            <div className="flex flex-col gap-1">
+          <div className="flex lg:hidden items-center gap-2">
+            <span className="text-xs text-neutral-600 whitespace-nowrap">
+              {t('gallery.feedbackFilter', 'Feedback Filter')}
+            </span>
+            <div className="flex items-center gap-1">
               <Button
                 variant={currentFilter === 'all' ? 'primary' : 'outline'}
                 size="sm"
                 onClick={() => onFilterChange('all')}
                 className="p-1 w-8 h-8 flex items-center justify-center"
-                aria-label={t('gallery.all')}
+                aria-label={t('gallery.all', 'All')}
               >
                 <Grid className="w-3.5 h-3.5" />
               </Button>