refactor: Improve mobile responsiveness of RecommendationsSection header and add translation for "All" filter

- Make header layout stack vertically on mobile with flex-col, horizontal on desktop with sm:flex-row
- Make action buttons full-width on mobile, auto-width on desktop
- Reverse button order on mobile (customize first, then select/deselect) using flex-col-reverse
- Make collapse/expand button full-width on mobile
- Add "All" translation key to both English and Turkish locales
This commit is contained in:
Yusuf İpek
2025-11-23 15:25:03 +03:00
parent 696de6939f
commit ecc4fc038a
2 changed files with 8 additions and 4 deletions
+6 -4
View File
@@ -133,7 +133,7 @@ export function RecommendationsSection({
return (
<Card className="w-full">
<CardHeader className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={() => setIsExpanded(!isExpanded)}>
<div className="flex items-start justify-between">
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div className="flex items-center gap-2">
<Sparkles className="h-5 w-5 text-primary" />
<div>
@@ -152,7 +152,7 @@ export function RecommendationsSection({
</CardDescription>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-col-reverse sm:flex-row sm:items-center gap-2 w-full sm:w-auto">
{isExpanded && (
<>
<Button
@@ -182,6 +182,7 @@ export function RecommendationsSection({
}
}}
disabled={loading || recommendations.length === 0}
className="w-full sm:w-auto"
>
{recommendations.every(rec => selectedPackages.some(sel => sel.id === rec.id))
? (t('common.deselect_all') || 'Deselect All')
@@ -195,6 +196,7 @@ export function RecommendationsSection({
e.stopPropagation()
onCustomizeClick()
}}
className="w-full sm:w-auto"
>
<Settings className="h-4 w-4 mr-2" />
{t('recommendations.customize')}
@@ -204,7 +206,7 @@ export function RecommendationsSection({
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0"
className="h-8 w-full sm:w-8 p-0"
>
{isExpanded ? (
<ChevronUp className="h-4 w-4" />
@@ -249,7 +251,7 @@ export function RecommendationsSection({
}}
className="h-8 text-xs"
>
All ({recommendations.length})
{(t('common.all') || 'All')} ({recommendations.length})
</Button>
{profile.categories.map(cat => {
const count = getCategoryCount(cat)
+2
View File
@@ -10,6 +10,7 @@ const translations = {
title: "RepoHub - Cross-Platform Package Manager",
subtitle: "Cross-Platform Package Manager",
description: "Simplify software installation across Linux, Windows, and macOS with official repositories",
all: "All",
close: "Close",
next: "Next",
back: "Back",
@@ -203,6 +204,7 @@ const translations = {
title: "RepoHub - Çok Platformlu Paket Yöneticisi",
subtitle: "Çok Platformlu Paket Yöneticisi",
description: "Linux, Windows ve macOS'te resmi depoları kullanarak yazılım kurulumunu basitleştirin",
all: "Tümü",
close: "Kapat",
next: "İleri",
back: "Geri",