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

ui(gallery): feedback filter headline + horizontal compact icons (desktop+mobile); render only when feedback enabled

Browse Source
This commit is contained in:
paul
2025-09-16 09:11:32 +02:00
parent ff89f96e31
commit 4b64b80b20
1 changed files with 41 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/PhotoFilterBar.tsx
+41 -33
View File
@@ -174,36 +174,41 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
</div> </div>
</div> </div>
{/* Desktop: compact vertical feedback filter (icons only), outside the overflow area */} {/* Desktop: compact horizontal feedback filter with headline (icons only) */}
{feedbackEnabled && onFilterChange && ( {feedbackEnabled && onFilterChange && (
<div className="hidden lg:flex flex-col items-center gap-1 mx-2"> <div className="hidden lg:flex items-center gap-2 mx-2 flex-shrink-0">
<Button <span className="text-sm text-neutral-600 whitespace-nowrap">
variant={currentFilter === 'all' ? 'primary' : 'outline'} {t('gallery.feedbackFilter', 'Feedback Filter')}
size="sm" </span>
onClick={() => onFilterChange('all')} <div className="flex items-center gap-1">
className="p-1 w-8 h-8 flex items-center justify-center" <Button
aria-label={t('gallery.all')} variant={currentFilter === 'all' ? 'primary' : 'outline'}
> size="sm"
<Grid className="w-3.5 h-3.5" /> onClick={() => onFilterChange('all')}
</Button> className="p-1 w-8 h-8 flex items-center justify-center"
<Button aria-label={t('gallery.all', 'All')}
variant={currentFilter === 'liked' ? 'primary' : 'outline'} >
size="sm" <Grid className="w-3.5 h-3.5" />
onClick={() => onFilterChange('liked')} </Button>
className="p-1 w-8 h-8 flex items-center justify-center" <Button
aria-label={t('feedback.likes', 'Likes')} variant={currentFilter === 'liked' ? 'primary' : 'outline'}
> size="sm"
<Heart className="w-3.5 h-3.5" /> onClick={() => onFilterChange('liked')}
</Button> className="p-1 w-8 h-8 flex items-center justify-center"
<Button aria-label={t('feedback.likes', 'Likes')}
variant={currentFilter === 'favorited' ? 'primary' : 'outline'} >
size="sm" <Heart className="w-3.5 h-3.5" />
onClick={() => onFilterChange('favorited')} </Button>
className="p-1 w-8 h-8 flex items-center justify-center" <Button
aria-label={t('feedback.favorites', 'Favorites')} variant={currentFilter === 'favorited' ? 'primary' : 'outline'}
> size="sm"
<Star className="w-3.5 h-3.5" /> onClick={() => onFilterChange('favorited')}
</Button> 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> </div>
)} )}
@@ -213,16 +218,19 @@ export const PhotoFilterBar: React.FC<PhotoFilterBarProps> = ({
</div> </div>
)} )}
{/* Mobile/Tablet: compact vertical icons below categories */} {/* Mobile/Tablet: compact horizontal icons with headline below categories */}
{feedbackEnabled && onFilterChange && ( {feedbackEnabled && onFilterChange && (
<div className="flex lg:hidden gap-2"> <div className="flex lg:hidden items-center gap-2">
<div className="flex flex-col gap-1"> <span className="text-xs text-neutral-600 whitespace-nowrap">
{t('gallery.feedbackFilter', 'Feedback Filter')}
</span>
<div className="flex items-center gap-1">
<Button <Button
variant={currentFilter === 'all' ? 'primary' : 'outline'} variant={currentFilter === 'all' ? 'primary' : 'outline'}
size="sm" size="sm"
onClick={() => onFilterChange('all')} onClick={() => onFilterChange('all')}
className="p-1 w-8 h-8 flex items-center justify-center" 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" /> <Grid className="w-3.5 h-3.5" />
</Button> </Button>