refactor: remove unused server-side sync scripts

- Deleted cron-setup.sh for automated sync scheduling
- Removed init-backend.sh database initialization script
- Removed server-sync.sh for platform synchronization

src/components/PackageBrowserV2.tsx

@@ -205,7 +205,7 @@ export function PackageBrowserV2({
         </CardHeader>
         <CardContent className="pt-0">
           <div className="text-center py-8 text-muted-foreground">
-            Please select a platform first
+            {t('platform.please_select')}
           </div>
         </CardContent>
       </Card>
@@ -219,7 +219,7 @@ export function PackageBrowserV2({
           <PackageIcon className="h-5 w-5" />
           {t('packages.title')}
           <span className="text-sm font-normal text-muted-foreground">
-            ({packages.length} of {totalCount} packages for {selectedPlatform?.name || 'Unknown Platform'})
+            {t('packages.count_label', { current: packages.length, total: totalCount, platform: selectedPlatform?.name || 'Unknown Platform' })}
           </span>
         </CardTitle>
         <CardDescription className="text-sm">

src/components/PlatformSelector.tsx

@@ -16,6 +16,16 @@ export function PlatformSelector({ selectedPlatform, onPlatformSelect }: Platfor
   const { t } = useLocale()
   const [platforms, setPlatforms] = useState<Platform[]>([])
   const [loading, setLoading] = useState(true)
+  
+  const iconSlug: Record<string, string> = {
+    debian: 'debian',
+    ubuntu: 'ubuntu',
+    fedora: 'fedora',
+    arch: 'archlinux',
+    windows: 'windows',
+    macos: 'apple'
+  }
+  const iconBase = (slug: string) => `https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/${slug}.svg`
 
   useEffect(() => {
     const loadPlatforms = async () => {
@@ -62,29 +72,37 @@ export function PlatformSelector({ selectedPlatform, onPlatformSelect }: Platfor
         </CardDescription>
       </CardHeader>
       <CardContent className="pt-0">
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
+        <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2">
           {platforms.map((platform) => (
             <Button
               key={platform.id}
-              variant={selectedPlatform?.id === platform.id ? "default" : "outline"}
-              className="h-auto p-3 flex flex-col items-center space-y-1"
+              variant="outline"
+              className={`h-12 px-2 py-1 flex flex-col items-center justify-center gap-1 rounded-md border transition-colors
+                ${selectedPlatform?.id === platform.id 
+                  ? 'border-primary ring-2 ring-primary/60 bg-primary/5' 
+                  : 'border-border hover:bg-secondary/60'}`}
               onClick={() => onPlatformSelect(platform)}
             >
-              <div className="text-xl">{platform.icon}</div>
+              <div
+                className={`h-5 w-5 ${selectedPlatform?.id === platform.id ? 'text-foreground' : 'text-muted-foreground'}`}
+                style={{
+                  WebkitMaskImage: `url(${iconBase(iconSlug[platform.id] || 'linux')})`,
+                  maskImage: `url(${iconBase(iconSlug[platform.id] || 'linux')})`,
+                  WebkitMaskRepeat: 'no-repeat',
+                  maskRepeat: 'no-repeat',
+                  WebkitMaskSize: 'contain',
+                  maskSize: 'contain',
+                  WebkitMaskPosition: 'center',
+                  maskPosition: 'center',
+                  backgroundColor: 'currentColor'
+                } as React.CSSProperties}
+              />
               <div className="text-center">
-                <div className="font-semibold text-sm">{platform.name}</div>
-                <div className="text-xs text-muted-foreground">{platform.packageManager}</div>
+                <div className="font-medium text-xs leading-tight truncate max-w-[90px]">{platform.name}</div>
               </div>
             </Button>
           ))}
         </div>
-        {selectedPlatform && (
-          <div className="mt-3 p-3 bg-secondary rounded-md">
-            <p className="text-xs">
-              <strong>{t('platform.selected')}:</strong> {selectedPlatform.name} ({selectedPlatform.packageManager})
-            </p>
-          </div>
-        )}
       </CardContent>
     </Card>
   )

src/contexts/LocaleContext.tsx

@@ -15,7 +15,8 @@ const translations = {
     platform: {
       select: "Select Your Platform",
       description: "Choose your operating system and package manager to browse available packages",
-      selected: "Selected"
+      selected: "Selected",
+      please_select: "Please select a platform first"
     },
     packages: {
       title: "Available Packages",
@@ -23,6 +24,7 @@ const translations = {
       description: "Select packages to include in your installation script",
       search: "Search packages...",
       no_packages: "No packages found matching your criteria",
+      count_label: "({current} of {total} packages for {platform})",
       filters: {
         category: "Category",
         type: "Type",
@@ -116,7 +118,8 @@ const translations = {
     platform: {
       select: "Platformunuzu Seçin",
       description: "Mevcut paketlere göz atmak için işletim sisteminizi ve paket yöneticinizi seçin",
-      selected: "Seçildi"
+      selected: "Seçildi",
+      please_select: "Lütfen önce bir platform seçin"
     },
     packages: {
       title: "Mevcut Paketler",
@@ -124,6 +127,7 @@ const translations = {
       description: "Kurulum scriptinize dahil edilecek paketleri seçin",
       search: "Paket ara...",
       no_packages: "Kriterlerinize uyan paket bulunamadı",
+      count_label: "({platform} için {current} / {total} paket)",
       filters: {
         category: "Kategori",
         type: "Tür",
@@ -213,7 +217,7 @@ interface LocaleContextType {
   locale: Locale
   changeLocale: (locale: Locale) => void
   toggleLocale: () => void
-  t: (key: string) => string
+  t: (key: string, params?: Record<string, string | number>) => string
 }
 
 const LocaleContext = createContext<LocaleContextType | undefined>(undefined)
@@ -250,15 +254,19 @@ export function LocaleProvider({ children }: { children: ReactNode }) {
     changeLocale(locale === 'en' ? 'tr' : 'en')
   }
 
-  const t = (key: string) => {
+  const t = (key: string, params?: Record<string, string | number>) => {
     const keys = key.split('.')
     let value: any = translations[locale]
     
     for (const k of keys) {
       value = value?.[k]
     }
-    
-    return value || key
+    if (typeof value === 'string' && params) {
+      return value.replace(/\{(\w+)\}/g, (_, k) =>
+        Object.prototype.hasOwnProperty.call(params, k) ? String(params[k]) : `{${k}}`
+      )
+    }
+    return (typeof value === 'string') ? value : key
   }
 
   return (