From ecc4fc038a816b7be4109d11305d0d52595f8e07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Sun, 23 Nov 2025 15:25:03 +0300
Subject: [PATCH] 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
---
 src/components/RecommendationsSection.tsx | 10 ++++++----
 src/contexts/LocaleContext.tsx            |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/RecommendationsSection.tsx b/src/components/RecommendationsSection.tsx
index 0d2ecc4..71f579d 100644
--- a/src/components/RecommendationsSection.tsx
+++ b/src/components/RecommendationsSection.tsx
@@ -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)
diff --git a/src/contexts/LocaleContext.tsx b/src/contexts/LocaleContext.tsx
index 11310b9..7abc394 100644
--- a/src/contexts/LocaleContext.tsx
+++ b/src/contexts/LocaleContext.tsx
@@ -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",