feat: admin listelerinde açılır-kapanır öğe kartları

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/Admin/Field.vue

@@ -14,7 +14,7 @@
   <details
     v-else-if="kind === 'object'"
     class="border border-gray-200 rounded-xl bg-white"
-    :open="(depth ?? 0) < 1"
+    :open="(depth ?? 0) < 1 && field !== 'meta'"
   >
     <summary
       class="cursor-pointer select-none px-4 py-2.5 font-semibold text-sm text-[#3C393D] flex items-center gap-2"
@@ -43,21 +43,28 @@
       {{ displayLabel }}
       <span class="text-xs font-normal text-gray-400">({{ value.length }})</span>
     </p>
-    <div
+    <template v-for="(item, i) in value" :key="i">
-      v-for="(item, i) in value"
+      <!-- Nesne öğeler: açılır-kapanır kart -->
-      :key="i"
+      <details
-      class="relative border border-gray-200 rounded-xl bg-[#fafbfc]"
+        v-if="item !== null && typeof item === 'object'"
+        class="border border-gray-200 rounded-xl bg-[#fafbfc] group"
       >
-      <div
+        <summary
-        class="flex items-center gap-1 px-3 py-1.5 border-b border-gray-100 text-xs text-gray-500"
+          class="flex items-center gap-1.5 px-3 py-2 text-xs text-gray-600 cursor-pointer select-none list-none"
         >
-        <span class="font-semibold truncate">{{ itemTitle(item, i) }}</span>
+          <span
+            class="text-gray-400 transition-transform group-open:rotate-90 shrink-0"
+            >▶</span
+          >
+          <span class="font-semibold truncate text-[13px]">{{
+            itemTitle(item, i)
+          }}</span>
           <span class="flex-1"></span>
           <button
             class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
             :disabled="i === 0"
             title="Yukarı taşı"
-          @click="move(i, -1)"
+            @click.stop.prevent="move(i, -1)"
           >
             ▲
           </button>
@@ -65,19 +72,19 @@
             class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
             :disabled="i === value.length - 1"
             title="Aşağı taşı"
-          @click="move(i, 1)"
+            @click.stop.prevent="move(i, 1)"
           >
             ▼
           </button>
           <button
             class="px-1.5 py-0.5 rounded text-red-500 hover:bg-red-50 cursor-pointer"
             title="Sil"
-          @click="removeAt(i)"
+            @click.stop.prevent="removeAt(i)"
           >
             Sil
           </button>
-      </div>
+        </summary>
-      <div class="p-3">
+        <div class="p-3 border-t border-gray-100">
           <AdminField
             :parent="value"
             :field="i"
@@ -85,7 +92,43 @@
             bare
           />
         </div>
+      </details>
+
+      <!-- Basit (metin/sayı) öğeler: tek satır -->
+      <div v-else class="flex items-center gap-1.5">
+        <div class="flex-1 min-w-0">
+          <AdminField
+            :parent="value"
+            :field="i"
+            :depth="(depth ?? 0) + 1"
+            bare
+          />
         </div>
+        <button
+          class="px-1.5 py-0.5 rounded text-xs text-gray-400 hover:bg-gray-200 cursor-pointer disabled:opacity-30"
+          :disabled="i === 0"
+          title="Yukarı taşı"
+          @click="move(i, -1)"
+        >
+          ▲
+        </button>
+        <button
+          class="px-1.5 py-0.5 rounded text-xs text-gray-400 hover:bg-gray-200 cursor-pointer disabled:opacity-30"
+          :disabled="i === value.length - 1"
+          title="Aşağı taşı"
+          @click="move(i, 1)"
+        >
+          ▼
+        </button>
+        <button
+          class="px-1.5 py-0.5 rounded text-xs text-red-400 hover:bg-red-50 cursor-pointer"
+          title="Sil"
+          @click="removeAt(i)"
+        >
+          Sil
+        </button>
+      </div>
+    </template>
     <button
       class="w-full border border-dashed border-gray-300 rounded-xl py-2 text-sm text-gray-500 hover:border-[#3FA0C7] hover:text-[#3FA0C7] cursor-pointer"
       @click="addItem"