bak

public/js/modules/buckets.js

@@ -121,6 +121,15 @@ export function populateSelects() {
     }
 }
 
+function autoBucketNameFromCard(card) {
+    const existing = new Set(state.buckets.map(b => String(b.name || '').trim().toLowerCase()).filter(Boolean));
+    const base = String(card?.title || '').trim().replace(/\s+/g, ' ').slice(0, 40) || 'bucket';
+    if (!existing.has(base.toLowerCase())) return base;
+    let i = 2;
+    while (existing.has(`${base} ${i}`.toLowerCase())) i++;
+    return `${base} ${i}`;
+}
+
 function updateHeaderTint() {
     const tint = $('header-tint');
     if (!tint) return;
@@ -145,7 +154,7 @@ function renderBar() {
             const active = state.activeBucket == b.id;
             return `<button class="${tab(active)}" data-bucket="${b.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${active ? `border-color:${c};color:${c}` : ''}"><i class="ph ph-folder text-sm"></i><span class="font-pixel text-[10px]">${esc(b.name)}</span></button>`;
         }).join('')}
-        <button id="add-bucket-btn" class="flex items-center gap-1 px-2 py-1 text-xs text-t-dim hover:text-t-accent transition-colors shrink-0"><i class="ph ph-plus text-sm"></i><span class="font-pixel text-[10px]">bucket</span></button>`;
+        <button id="add-bucket-btn" class="bucket-add flex items-center gap-1 px-2 py-1 text-xs text-t-dim hover:text-t-accent transition-colors shrink-0"><i class="ph ph-plus text-sm"></i><span class="font-pixel text-[10px]">bucket</span></button>`;
 
     updateHeaderTint();
 
@@ -223,11 +232,34 @@ function renderBar() {
         });
     });
 
-    $('add-bucket-btn')?.addEventListener('click', async () => {
+    const addBtn = $('add-bucket-btn');
+    addBtn?.addEventListener('click', async () => {
         const name = await showDialog({ title: 'new_bucket', input: true, placeholder: '> bucket name...' });
         if (!name || !name.trim()) return;
         await api('api/buckets', { method: 'POST', body: { name: name.trim() } });
         await loadBuckets();
         window._renderBoard();
     });
+
+    const isCardDrag = e => Array.from(e.dataTransfer?.types || []).includes('text/plain');
+
+    addBtn?.addEventListener('dragover', e => {
+        if (!isCardDrag(e)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        addBtn.classList.add('drag-over');
+    });
+    addBtn?.addEventListener('dragleave', () => addBtn.classList.remove('drag-over'));
+    addBtn?.addEventListener('drop', async e => {
+        addBtn.classList.remove('drag-over');
+        const cardId = e.dataTransfer.getData('text/plain');
+        if (!cardId) return;
+        e.preventDefault();
+        const card = state.cards.find(c => String(c.id) === String(cardId));
+        const created = await api('api/buckets', { method: 'POST', body: { name: autoBucketNameFromCard(card) } });
+        if (!created?.id) return;
+        await api(`api/cards/${cardId}`, { method: 'PATCH', body: { bucket_id: created.id } });
+        await loadBuckets();
+        await window._reloadAll();
+    });
 }