chore: clean up scratch files and apply remaining updates

app/[locale]/admin/collections/[id]/CollectionForm.tsx

@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { createOrUpdateCollectionAction } from '@/app/actions'
-import { ArrowLeft, Save } from 'lucide-react'
 import { Link } from '@/i18n/routing'
+import { ArrowLeft, Save } from 'lucide-react'
 
 interface Option {
   value: string
@@ -13,23 +13,24 @@ interface Option {
 
 interface FormProps {
   collection: any | null
-  listingOptions: Option[]
+  allListings: Option[]
 }
 
-export default function CollectionForm({ collection, listingOptions }: FormProps) {
+export default function CollectionForm({ collection, allListings }: FormProps) {
   const router = useRouter()
   const [activeTab, setActiveTab] = useState<'tr' | 'en' | 'ru'>('tr')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState(false)
+  
+  // Track selected listing IDs
+  const [selectedListingIds, setSelectedListingIds] = useState<string[]>(
+    collection?.listingIds || []
+  )
 
-  // Selected Listings
-  const [selectedListings, setSelectedListings] = useState<string[]>(collection?.listingIds || [])
-  const [listingSearch, setListingSearch] = useState('')
-
-  const handleListingToggle = (id: string) => {
-    setSelectedListings(prev => 
-      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+  const toggleListing = (id: string) => {
+    setSelectedListingIds(prev => 
+      prev.includes(id) ? prev.filter(p => p !== id) : [...prev, id]
     )
   }
 
@@ -43,7 +44,11 @@ export default function CollectionForm({ collection, listingOptions }: FormProps
     if (collection) {
       formData.append('id', collection.id)
     }
-    formData.append('listingIds', selectedListings.join(','))
+    
+    // Append array of listing IDs manually since standard FormData doesn't handle arrays easily
+    selectedListingIds.forEach(id => {
+      formData.append('listingIds', id)
+    })
 
     try {
       const res = await createOrUpdateCollectionAction(formData)
@@ -63,10 +68,6 @@ export default function CollectionForm({ collection, listingOptions }: FormProps
     }
   }
 
-  const filteredListings = listingOptions.filter(opt => 
-    opt.label.toLowerCase().includes(listingSearch.toLowerCase())
-  )
-
   return (
     <form onSubmit={handleSubmit} className="space-y-6">
       {error && (
@@ -77,11 +78,10 @@ export default function CollectionForm({ collection, listingOptions }: FormProps
 
       {success && (
         <div className="bg-turquoise/10 border border-turquoise/25 text-turquoise p-4 rounded-xl text-xs font-bold">
-          Seçki başarıyla kaydedildi! Yönlendiriliyorsunuz...
+          Koleksiyon başarıyla kaydedildi! Yönlendiriliyorsunuz...
         </div>
       )}
 
-      {/* Language tabs */}
       <div className="border-b border-pine/8">
         <div className="flex gap-2">
           {(['tr', 'en', 'ru'] as const).map((lang) => {
@@ -105,88 +105,40 @@ export default function CollectionForm({ collection, listingOptions }: FormProps
         </div>
       </div>
 
-      {/* Localized inputs */}
       <div className="space-y-4">
         {activeTab === 'tr' && (
           <div className="space-y-4">
             <div className="space-y-1.5">
-              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Seçki Başlığı (TR) *</label>
-              <input
-                type="text"
-                name="titleTr"
-                required
-                defaultValue={collection?.titleTr || ''}
-                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
-                placeholder="Örn: Aile Dostu Restoranlar"
-              />
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Başlık (TR) *</label>
+              <input type="text" name="titleTr" required defaultValue={collection?.titleTr || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink" placeholder="Örn: En İyi Kahvaltı Mekanları" />
             </div>
-            
             <div className="space-y-1.5">
               <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (TR) *</label>
-              <textarea
-                name="descriptionTr"
-                required
-                rows={3}
-                defaultValue={collection?.descriptionTr || ''}
-                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
-                placeholder="Bu seçkinin odağını ve amacını açıklayın..."
-              />
+              <textarea name="descriptionTr" required rows={4} defaultValue={collection?.descriptionTr || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink" placeholder="Türkçe açıklama..." />
             </div>
           </div>
         )}
-
         {activeTab === 'en' && (
           <div className="space-y-4">
             <div className="space-y-1.5">
-              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Seçki Başlığı (EN) *</label>
-              <input
-                type="text"
-                name="titleEn"
-                required
-                defaultValue={collection?.titleEn || ''}
-                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
-                placeholder="Örn: Family Friendly Restaurants"
-              />
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Başlık (EN) *</label>
+              <input type="text" name="titleEn" required defaultValue={collection?.titleEn || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink" placeholder="e.g. Best Breakfast Spots" />
             </div>
-            
             <div className="space-y-1.5">
               <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (EN) *</label>
-              <textarea
-                name="descriptionEn"
-                required
-                rows={3}
-                defaultValue={collection?.descriptionEn || ''}
-                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
-                placeholder="Describe this collection's focus..."
-              />
+              <textarea name="descriptionEn" required rows={4} defaultValue={collection?.descriptionEn || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink" placeholder="English description..." />
             </div>
           </div>
         )}
-
         {activeTab === 'ru' && (
           <div className="space-y-4">
             <div className="space-y-1.5">
-              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Seçki Başlığı (RU) *</label>
-              <input
-                type="text"
-                name="titleRu"
-                required
-                defaultValue={collection?.titleRu || ''}
-                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
-                placeholder="Örn: Семейные рестораны"
-              />
+              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Başlık (RU) *</label>
+              <input type="text" name="titleRu" required defaultValue={collection?.titleRu || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink" placeholder="e.g. Лучшие места для завтрака" />
             </div>
-            
             <div className="space-y-1.5">
               <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (RU) *</label>
-              <textarea
-                name="descriptionRu"
-                required
-                rows={3}
-                defaultValue={collection?.descriptionRu || ''}
-                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
-                placeholder="Описание подборки..."
-              />
+              <textarea name="descriptionRu" required rows={4} defaultValue={collection?.descriptionRu || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink" placeholder="Russian description..." />
             </div>
           </div>
         )}
@@ -194,97 +146,42 @@ export default function CollectionForm({ collection, listingOptions }: FormProps
 
       <hr className="border-dashed border-pine/8" />
 
-      {/* Global fields */}
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        {/* Slug */}
         <div className="space-y-1.5">
           <label className="block text-xs font-mono uppercase tracking-wider text-shutter">URL Slug *</label>
-          <input
-            type="text"
-            name="slug"
-            required
-            defaultValue={collection?.slug || ''}
-            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
-            placeholder="aile-dostu-restoranlar"
-          />
+          <input type="text" name="slug" required defaultValue={collection?.slug || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono" placeholder="en-iyi-kahvalti" />
         </div>
-
-        {/* Cover Image Upload */}
         <div className="space-y-1.5">
-          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Kapak Görseli</label>
-          <input
-            type="file"
-            name="coverImageFile"
-            accept="image/*"
-            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink file:mr-3 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-pine file:text-stone hover:file:opacity-90 cursor-pointer"
-          />
-          {collection?.coverImage && (
-            <div className="mt-2 text-xs flex items-center gap-2">
-              <span className="text-shutter/65">Mevcut Görsel:</span>
-              <a href={collection.coverImage} target="_blank" rel="noopener noreferrer" className="text-turquoise hover:underline font-mono truncate max-w-xs">{collection.coverImage}</a>
-              <input type="hidden" name="coverImageUrl" value={collection.coverImage} />
-            </div>
-          )}
+          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Kapak Görseli URL</label>
+          <input type="url" name="coverImageUrl" defaultValue={collection?.coverImage || ''} className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink" placeholder="https://..." />
+        </div>
+      </div>
+      
+      <div className="space-y-1.5">
+        <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Koleksiyon Mekanları (Seçiniz)</label>
+        <div className="bg-stone border border-pine/10 rounded-xl p-4 max-h-60 overflow-y-auto space-y-2">
+          {allListings.map(listing => (
+            <label key={listing.value} className="flex items-center gap-2 cursor-pointer hover:bg-stone-deep/20 p-2 rounded-lg transition">
+              <input 
+                type="checkbox" 
+                checked={selectedListingIds.includes(listing.value)}
+                onChange={() => toggleListing(listing.value)}
+                className="rounded border-pine/20 text-turquoise focus:ring-turquoise" 
+              />
+              <span className="text-sm font-medium text-ink">{listing.label}</span>
+            </label>
+          ))}
         </div>
       </div>
 
-      {/* Listing multi-select panel */}
-      <div className="space-y-2 border-t border-dashed border-pine/8 pt-4">
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
-          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Seçkide Yer Alan Mekanlar * ({selectedListings.length} seçildi)</label>
-          <input
-            type="text"
-            value={listingSearch}
-            onChange={(e) => setListingSearch(e.target.value)}
-            className="bg-stone border border-pine/10 rounded-xl px-3 py-1.5 text-xs outline-none focus:ring-1 focus:ring-turquoise w-full sm:w-64 placeholder:text-shutter/60"
-            placeholder="Mekan ara..."
-          />
-        </div>
-        
-        <div className="border border-pine/10 bg-stone/20 rounded-2xl max-h-52 overflow-y-auto p-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
-          {filteredListings.length === 0 ? (
-            <span className="text-xs text-shutter/60 col-span-2 py-4 text-center font-mono">Aradığınız mekan bulunamadı.</span>
-          ) : (
-            filteredListings.map((opt) => {
-              const isChecked = selectedListings.includes(opt.value)
-              return (
-                <label 
-                  key={opt.value} 
-                  className={`flex items-center gap-2.5 p-2 rounded-xl border text-xs cursor-pointer select-none transition ${
-                    isChecked ? 'bg-turquoise/5 border-turquoise/35 text-pine font-bold' : 'border-transparent text-ink/75 hover:bg-stone/50'
-                  }`}
-                >
-                  <input
-                    type="checkbox"
-                    checked={isChecked}
-                    onChange={() => handleListingToggle(opt.value)}
-                    className="accent-turquoise rounded w-3.5 h-3.5 shrink-0"
-                  />
-                  <span className="truncate leading-none">{opt.label}</span>
-                </label>
-              )
-            })
-          )}
-        </div>
-      </div>
-
-      {/* Buttons */}
-      <div className="flex gap-4 pt-4 border-t border-dashed border-pine/8">
-        <Link
-          href="/admin/collections"
-          className="inline-flex items-center gap-1.5 px-5 py-3 border border-pine/20 rounded-xl text-xs font-bold text-pine hover:bg-stone/30 transition duration-150"
-        >
-          <ArrowLeft className="w-4 h-4" />
-          İptal
+      <div className="flex items-center justify-between pt-4">
+        <Link href="/admin/collections" className="text-xs font-bold text-shutter hover:text-pine transition inline-flex items-center gap-1">
+          <ArrowLeft className="w-3.5 h-3.5" />
+          İptal ve Geri Dön
         </Link>
-        
-        <button
-          type="submit"
-          disabled={loading}
-          className="inline-flex items-center gap-1.5 px-5 py-3 bg-turquoise hover:bg-turquoise/90 disabled:opacity-75 text-paper rounded-xl text-xs font-bold shadow-sm transition duration-150"
-        >
+        <button disabled={loading} type="submit" className="bg-turquoise hover:bg-turquoise/90 text-paper px-6 py-3 rounded-xl font-bold text-sm transition-colors shadow-sm inline-flex items-center gap-2 disabled:opacity-50">
           <Save className="w-4 h-4" />
-          {loading ? 'Kaydediliyor...' : 'Seçkiyi Kaydet'}
+          {loading ? 'Kaydediliyor...' : 'Kaydet'}
         </button>
       </div>
     </form>

app/[locale]/admin/collections/[id]/page.tsx

@@ -7,7 +7,8 @@ interface Props {
 }
 
 export default async function AdminCollectionEditPage({ params }: Props) {
-  const { id } = await params
+  const { locale, id } = await params
+
   let collection = null
 
   if (id !== 'new') {
@@ -17,30 +18,29 @@ export default async function AdminCollectionEditPage({ params }: Props) {
     }
   }
 
-  // Fetch listings for option list
-  const listings = await mockDb.getListings()
-  const listingOptions = listings.map(l => ({
+  const allListings = await mockDb.getListings()
+  const listingOptions = allListings.map(l => ({
     value: l.id,
-    label: `${l.nameTr} (${l.neighborhood?.nameTr})`
+    label: l.nameTr
   }))
 
   return (
-    <div className="space-y-6 max-w-5xl">
+    <div className="space-y-6 max-w-4xl">
       <div>
         <h2 className="text-3xl font-heading font-extrabold text-pine lowercase">
-          {id === 'new' ? 'yeni seçki (koleksiyon)' : 'seçkiyi düzenle'}
+          {id === 'new' ? 'yeni seçki ekle' : 'seçkiyi düzenle'}
         </h2>
         <p className="text-ink/65 text-xs font-medium mt-1">
           {id === 'new' 
-            ? 'Yeni bir tematik mekan derlemesi oluşturun.' 
-            : 'Mevcut kürasyon seki bilgilerini güncelleyin.'}
+            ? 'Yeni bir mekan kürasyonu oluşturun.' 
+            : 'Mevcut kürasyon bilgilerini güncelleyin.'}
         </p>
       </div>
 
       <div className="bg-paper border border-pine/8 rounded-3xl shadow-sm p-6 sm:p-8">
         <CollectionForm
           collection={collection}
-          listingOptions={listingOptions}
+          allListings={listingOptions}
         />
       </div>
     </div>

app/[locale]/admin/collections/page.tsx

@@ -1,6 +1,7 @@
 import { mockDb } from '@/lib/mockDb'
 import { deleteCollectionAction } from '@/app/actions'
 import { Link } from '@/i18n/routing'
+import DeleteButton from '@/components/DeleteButton'
 import { Edit, Trash, Plus, Layers } from 'lucide-react'
 
 export default async function AdminCollectionsPage() {
@@ -79,17 +80,11 @@ export default async function AdminCollectionsPage() {
                             <Edit className="w-4 h-4" />
                           </Link>
 
-                          <form action={async () => {
+<form action={async () => {
                             'use server'
                             await deleteCollectionAction(col.id)
                           }}>
-                            <button
-                              type="submit"
-                              className="p-1.5 bg-paper text-shutter hover:text-bougainvillea hover:bg-bougainvillea/5 rounded-lg border border-pine/10 hover:border-bougainvillea/25 transition shadow-sm"
-                              title="Sil"
-                            >
-                              <Trash className="w-4 h-4" />
-                            </button>
+                            <DeleteButton />
                           </form>
                         </div>
                       </td>