firebase-os 1.1.4 → 1.1.6

package/src/templates/TemplateBoard.tsx

@@ -0,0 +1,642 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowLeft, GripVertical, Trash, LayoutList, Columns, Plus, X, User, Edit2, Loader2, Search, Filter, ChevronDown, Clock, Bot, Check } from 'lucide-react';
+import { adminBoardPrompt, privateBoardPrompt, publicBoardPrompt } from '../prompts';
+import { Link } from 'react-router-dom';
+import { Button } from '../components/Button';
+import { Input } from '../components/Input';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { db } from '../lib/firebase';
+import { collection, onSnapshot, doc, setDoc, deleteDoc, getDocs, query, where } from 'firebase/firestore';
+import { useState, useEffect } from 'react';
+import { useAuth } from '../lib/AuthContext';
+import { DashboardNav } from '../components/DashboardNav';
+
+interface Task {
+  id: string;
+  categoryId: string;
+  name: string;
+  fields?: { key: string; value: string }[];
+  order?: number;
+}
+
+interface Category {
+  id: string;
+  title: string;
+  color?: string;
+  createdAt?: number;
+}
+
+const pastelColors = [
+  { text: 'text-red-400', bgCircle: 'bg-red-400', bgCard: 'bg-red-500/[0.08]', borderCard: 'border-red-500/30', bgLight: 'bg-red-500/15', bgHover: 'hover:bg-red-500', bgAlt: 'bg-red-500/[0.04]', name: 'Red' },
+  { text: 'text-orange-400', bgCircle: 'bg-orange-400', bgCard: 'bg-orange-500/[0.08]', borderCard: 'border-orange-500/30', bgLight: 'bg-orange-500/15', bgHover: 'hover:bg-orange-500', bgAlt: 'bg-orange-500/[0.04]', name: 'Orange' },
+  { text: 'text-yellow-400', bgCircle: 'bg-yellow-400', bgCard: 'bg-yellow-500/[0.08]', borderCard: 'border-yellow-500/30', bgLight: 'bg-yellow-500/15', bgHover: 'hover:bg-yellow-500', bgAlt: 'bg-yellow-500/[0.04]', name: 'Yellow' },
+  { text: 'text-green-400', bgCircle: 'bg-green-400', bgCard: 'bg-green-500/[0.08]', borderCard: 'border-green-500/30', bgLight: 'bg-green-500/15', bgHover: 'hover:bg-green-500', bgAlt: 'bg-green-500/[0.04]', name: 'Green' },
+  { text: 'text-blue-400', bgCircle: 'bg-blue-400', bgCard: 'bg-blue-500/[0.08]', borderCard: 'border-blue-500/30', bgLight: 'bg-blue-500/15', bgHover: 'hover:bg-blue-500', bgAlt: 'bg-blue-500/[0.04]', name: 'Blue' },
+  { text: 'text-accent', bgCircle: 'bg-accent', bgCard: 'bg-accent/[0.08]', borderCard: 'border-accent/30', bgLight: 'bg-accent/15', bgHover: 'hover:bg-accent', bgAlt: 'bg-accent/[0.04]', name: 'Purple' },
+  { text: 'text-pink-400', bgCircle: 'bg-pink-400', bgCard: 'bg-pink-500/[0.08]', borderCard: 'border-pink-500/30', bgLight: 'bg-pink-500/15', bgHover: 'hover:bg-pink-500', bgAlt: 'bg-pink-500/[0.04]', name: 'Pink' },
+  { text: 'text-foreground/60', bgCircle: 'bg-foreground/30', bgCard: 'bg-foreground/[0.04]', borderCard: 'border-[var(--panel-border)]/50', bgLight: 'bg-foreground/15', bgHover: 'hover:bg-foreground/30', bgAlt: 'bg-foreground/[0.02]', name: 'Default' },
+];
+
+export interface BoardProps {
+  title?: string;
+  subtitle?: string;
+  backUrl?: string;
+  tasksCollection?: string;
+  categoriesCollection?: string;
+  config?: any;
+}
+
+export function TemplateBoard({
+  title = 'Board View',
+  subtitle = '/templates/board',
+  backUrl = '/templates',
+  tasksCollection = 'pub_tasks',
+  categoriesCollection = 'pub_categories',
+  config
+}: BoardProps) {
+  const { user } = useAuth();
+  const isTabMode = !!config;
+  const isPrivate = config?.isPrivate && !config?.isAdmin && !config?.isShared;
+  const isAdminOrShared = config?.isAdmin || config?.isShared;
+  const showCreator = isTabMode ? isAdminOrShared : true;
+  const showAddButton = config?.showButton !== false;
+  const addButtonText = config?.buttonText || '+';
+  const addButtonStyle = config?.buttonStyle || 'primary';
+  const keyLabel = config?.keyName || 'key';
+  const valueLabel = config?.valueName || 'value';
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [availableForms, setAvailableForms] = useState<string[]>([]);
+
+
+  const [addingItemTo, setAddingItemTo] = useState<string | null>(null);
+  const [editingItemId, setEditingItemId] = useState<string | null>(null);
+  const [inlineData, setInlineData] = useState<{ id?: string, name: string }>({ name: '' });
+  const [inlineFields, setInlineFields] = useState<{ key: string, value: string }[]>([]);
+
+  const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
+  const [dragOverTaskId, setDragOverTaskId] = useState<string | null>(null);
+  const [dragOverCategoryId, setDragOverCategoryId] = useState<string | null>(null);
+
+  const [isSavingItem, setIsSavingItem] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null);
+  const [categoryEditTitle, setCategoryEditTitle] = useState('');
+  const [confirmDelete, setConfirmDelete] = useState<{ type: 'item' | 'category', id: string, title: string } | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  // Prompt text
+  const getPrompt = () => {
+    if (config?.isAdmin) return adminBoardPrompt(config, title, tasksCollection, categoriesCollection);
+    if (config?.isPrivate) return privateBoardPrompt(config, title, tasksCollection, categoriesCollection, availableForms);
+    return publicBoardPrompt(config, title, tasksCollection, categoriesCollection, availableForms);
+  };
+  const promptText = getPrompt();
+
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(promptText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  useEffect(() => {
+    // Fetch forms
+    const isShared = config?.isShared;
+    const isAdmin = config?.isAdmin;
+    const isPrivate = config?.isPrivate && !isAdmin && !isShared;
+    const isPublic = !isAdmin && !isShared && !isPrivate;
+
+    if (isPrivate || isPublic) {
+      getDocs(collection(db, 'sys_forms')).then(snap => {
+        const type = isPublic ? 'public' : 'private';
+        setAvailableForms(snap.docs.filter(d => d.data().formType === type).map(doc => doc.id));
+      });
+    } else {
+      setAvailableForms([]);
+    }
+
+    const isTaskPrivate = tasksCollection.startsWith('user_');
+    const isCatPrivate = categoriesCollection.startsWith('user_');
+
+    if (isTaskPrivate && !user) return; // Prevent unauthorized run
+
+    const tasksQuery = (isTaskPrivate && user)
+      ? query(collection(db, tasksCollection), where('uid', '==', user.uid))
+      : collection(db, tasksCollection);
+
+    const unsubTasks = onSnapshot(tasksQuery as any, (snapshot: any) => {
+      const fetchedTasks: Task[] = [];
+      snapshot.forEach((docSnap: any) => {
+        const d = docSnap.data();
+        fetchedTasks.push({
+          id: docSnap.id,
+          categoryId: d.categoryId,
+          name: d.name || d.text || 'Unnamed Item',
+          fields: d.fields || (d.value ? [{ key: 'Label', value: d.value }] : []),
+          order: d.order || 0
+        } as Task);
+      });
+      setTasks(fetchedTasks.sort((a, b) => (a.order || 0) - (b.order || 0)));
+    });
+
+    const catsQuery = (isCatPrivate && user)
+      ? query(collection(db, categoriesCollection), where('uid', '==', user.uid))
+      : collection(db, categoriesCollection);
+
+    const unsubCats = onSnapshot(catsQuery as any, (snapshot: any) => {
+      const fetchedCats: Category[] = [];
+      snapshot.forEach((docSnap: any) => {
+        fetchedCats.push({ id: docSnap.id, ...docSnap.data() } as Category);
+      });
+
+      if (fetchedCats.length === 0) {
+        const initCats = [
+          { id: 'todo', title: 'To Do', createdAt: Date.now() - 2000 },
+          { id: 'in_progress', title: 'In Progress', createdAt: Date.now() - 1000 },
+          { id: 'review', title: 'Review', createdAt: Date.now() }
+        ];
+
+        const basePayload = user ? { uid: user.uid } : {};
+        initCats.forEach(c => setDoc(doc(db, categoriesCollection, c.id), { ...basePayload, title: c.title, createdAt: c.createdAt }));
+      } else {
+        setCategories(fetchedCats);
+      }
+    });
+
+    return () => { unsubTasks(); unsubCats(); };
+  }, [tasksCollection, categoriesCollection, user]);
+
+  const openInlineEditor = (categoryId: string, item?: Task) => {
+    if (item) {
+      setEditingItemId(item.id);
+      setInlineData({ id: item.id, name: item.name });
+      setInlineFields(item.fields?.length ? [...item.fields, { key: '', value: '' }] : [{ key: '', value: '' }]);
+    } else {
+      setAddingItemTo(categoryId);
+      setInlineData({ name: '' });
+      setInlineFields([{ key: '', value: '' }]);
+    }
+  };
+
+  const updateField = (index: number, key: string, value: string) => {
+    const newFields = [...inlineFields];
+    newFields[index] = { key, value };
+    if (index === inlineFields.length - 1 && (key.trim() !== '' || value.trim() !== '')) {
+      newFields.push({ key: '', value: '' });
+    }
+    setInlineFields(newFields);
+  };
+
+  const handleDragStart = (e: React.DragEvent, taskId: string) => {
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('taskId', taskId);
+    setDraggedTaskId(taskId);
+  };
+
+  const handleDragOverItem = (e: React.DragEvent, taskId: string) => {
+    e.preventDefault(); e.stopPropagation();
+    if (taskId !== draggedTaskId) setDragOverTaskId(taskId);
+  };
+
+  const handleDragOverColumn = (e: React.DragEvent, categoryId: string) => {
+    e.preventDefault(); e.stopPropagation();
+    setDragOverCategoryId(categoryId);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragOverTaskId(null);
+    setDragOverCategoryId(null);
+  };
+
+  const handleDrop = async (e: React.DragEvent, targetCategoryId: string, targetTaskId?: string) => {
+    e.preventDefault(); e.stopPropagation();
+    setDragOverTaskId(null);
+    setDragOverCategoryId(null);
+
+    const draggedId = e.dataTransfer.getData('taskId');
+    if (!draggedId || draggedId === targetTaskId) {
+      setDraggedTaskId(null);
+      return;
+    }
+
+    const draggedTask = tasks.find(t => t.id === draggedId);
+    if (!draggedTask) return;
+
+    let targetTasks = tasks.filter(t => t.categoryId === targetCategoryId).sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    if (draggedTask.categoryId !== targetCategoryId) {
+      targetTasks.push({ ...draggedTask, categoryId: targetCategoryId });
+    } else {
+      targetTasks = targetTasks.filter(t => t.id !== draggedId);
+      targetTasks.push(draggedTask);
+    }
+
+    if (targetTaskId) {
+      const dropIndex = targetTasks.findIndex(t => t.id === targetTaskId);
+      const draggedIndex = targetTasks.findIndex(t => t.id === draggedId);
+      const [moved] = targetTasks.splice(draggedIndex, 1);
+      targetTasks.splice(dropIndex, 0, moved);
+    }
+
+    targetTasks.forEach((t, i) => {
+      const updatePayload: any = { categoryId: targetCategoryId, order: i };
+      if (user) updatePayload.uid = user.uid;
+      setDoc(doc(db, tasksCollection, t.id), updatePayload, { merge: true });
+    });
+    setDraggedTaskId(null);
+  };
+
+  const handleSaveInline = async (categoryId: string) => {
+    const newId = inlineData.id || `item_${Date.now()}`;
+    const finalName = inlineData.name.trim();
+    const finalNameOrUntitled = finalName || 'Untitled Item';
+    const cleanedFields = inlineFields.filter(f => f.key.trim() !== '' || f.value.trim() !== '');
+
+    // Change detection!
+    let hasChanges = true;
+    const existingTask = inlineData.id ? tasks.find(t => t.id === inlineData.id) : null;
+
+    if (existingTask) {
+      const existingFieldsStr = JSON.stringify(existingTask.fields || []);
+      const newFieldsStr = JSON.stringify(cleanedFields);
+      if (existingTask.name === finalNameOrUntitled && existingFieldsStr === newFieldsStr) {
+        hasChanges = false;
+      }
+    } else {
+      // If totally clean new item with no data, treat as no changes
+      if (!finalName && cleanedFields.length === 0) {
+        hasChanges = false;
+      }
+    }
+
+    if (!hasChanges) {
+      setAddingItemTo(null);
+      setEditingItemId(null);
+      return;
+    }
+
+    setIsSavingItem(inlineData.id || 'new');
+
+    const payload: any = {
+      categoryId: categoryId,
+      name: finalNameOrUntitled,
+      fields: cleanedFields
+    };
+    if (user && !inlineData.id) payload.uid = user.uid;
+
+    await setDoc(doc(db, tasksCollection, newId), payload, { merge: true });
+
+    setTimeout(() => {
+      setAddingItemTo(null);
+      setEditingItemId(null);
+      setIsSavingItem(null);
+    }, 400);
+  };
+
+  const handleDeleteItem = (taskId: string, titleStr: string) => {
+    setConfirmDelete({ type: 'item', id: taskId, title: titleStr });
+  };
+
+  const handleAddCategoryClick = async () => {
+    const newId = `cat_${Date.now()}`;
+    const payload: any = { title: '', createdAt: Date.now() };
+    if (user) payload.uid = user.uid;
+    await setDoc(doc(db, categoriesCollection, newId), payload);
+    setEditingCategoryId(newId);
+    setCategoryEditTitle('');
+    setTimeout(() => {
+      const board = document.getElementById('board-container');
+      if (board) board.scrollTo({ left: board.scrollWidth, behavior: 'smooth' });
+    }, 150);
+  };
+
+  const saveEditedCategory = async (catId: string) => {
+    if (categoryEditTitle.trim()) {
+      await setDoc(doc(db, categoriesCollection, catId), { title: categoryEditTitle }, { merge: true });
+    } else {
+      await deleteDoc(doc(db, categoriesCollection, catId));
+    }
+    setEditingCategoryId(null);
+  };
+
+  const handleDeleteCategory = (catId: string, titleStr: string) => {
+    setConfirmDelete({ type: 'category', id: catId, title: titleStr });
+  };
+
+  const executeDelete = async () => {
+    if (!confirmDelete) return;
+    setIsDeleting(true);
+    try {
+      if (confirmDelete.type === 'item') {
+        await deleteDoc(doc(db, tasksCollection, confirmDelete.id));
+        setEditingItemId(null);
+      } else {
+        const catTasks = tasks.filter(t => t.categoryId === confirmDelete.id);
+        for (const t of catTasks) await deleteDoc(doc(db, tasksCollection, t.id));
+        await deleteDoc(doc(db, categoriesCollection, confirmDelete.id));
+      }
+    } catch (e) { }
+    setIsDeleting(false);
+    setConfirmDelete(null);
+  };
+
+  const sortedCategories = [...categories].sort((a, b) => {
+    return (a.createdAt || 0) - (b.createdAt || 0);
+  });
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen overflow-x-hidden">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-4">
+        <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+          {title}
+        </h1>
+        {subtitle && (
+          <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+            <span className="w-8 h-[1px] bg-foreground/10" />
+            {subtitle}
+          </div>
+        )}
+      </motion.div>
+
+      {isTabMode && <div className="mb-6"><DashboardNav /></div>}
+
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-[var(--panel-border)] pb-6 gap-4 relative z-20 shrink-0">
+        {!isTabMode && backUrl && (
+          <Link to={backUrl} className="px-5 py-2 hover:bg-foreground/5 transition-all flex items-center gap-2" style={{ borderRadius: 'var(--btn-radius, 0.75rem)' }}>
+            <ArrowLeft className="w-4 h-4" /> Go Back
+          </Link>
+        )}
+        {isTabMode && <div />}
+        <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
+          {config?.showPrompt && (
+            <motion.button
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={handleCopyPrompt}
+              title={copied ? 'Copied!' : 'Copy Developer Prompt'}
+              className={`w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer ${copied
+                ? 'bg-emerald-500/10 text-emerald-500 border border-emerald-500/20'
+                : 'btn-secondary shadow-lg'
+                }`}
+            >
+              {copied ? <Check className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
+            </motion.button>
+          )}
+          {showAddButton && (
+            <Button variant={addButtonStyle === 'secondary' ? 'secondary' : undefined} onClick={handleAddCategoryClick} className="flex-1 sm:flex-none px-3 py-2.5 text-[14px] font-bold rounded-xl shadow-lg hover:-translate-y-0.5 transition-all shrink-0">
+              {addButtonText === '+' ? <Plus className="w-4 h-4" /> : addButtonText}
+            </Button>
+          )}
+        </div>
+      </div>
+
+
+
+      <div className="flex-1 w-full relative z-40 min-h-0">
+        <div id="board-container" className="w-full h-full flex flex-row gap-4 md:gap-6 overflow-x-auto pb-4 snap-x snap-mandatory styled-scrollbars items-start">
+          {sortedCategories.map((col, colIndex) => {
+            let colTasks = tasks.filter(t => t.categoryId === col.id);
+            colTasks.sort((a, b) => (a.order || 0) - (b.order || 0));
+            const themeDef = pastelColors.find(p => p.text === col.color) || pastelColors.find(p => p.text === 'text-accent')!;
+            const txtColor = themeDef.text;
+            const bgLight = themeDef.bgLight;
+            const bgHover = themeDef.bgHover;
+
+            return (
+              <motion.div
+                key={col.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: colIndex * 0.1 }}
+                className={`w-[300px] md:w-[320px] shrink-0 flex flex-col max-h-full rounded-3xl p-4 snap-center relative border transition-colors ${pastelColors.find(p => p.text === col.color)?.bgCard || 'bg-foreground/[0.02]'} ${pastelColors.find(p => p.text === col.color)?.borderCard || 'border-[var(--panel-border)]/50'}`}
+              >
+                <div className="flex items-center justify-between mb-4 px-2 relative z-[200]">
+                  <h3 className="font-bold text-[14px] flex items-center w-full text-foreground/80 group relative z-[200]">
+                    {editingCategoryId === col.id ? (
+                      <div className="relative flex-1 w-full flex items-center pr-8 z-[200]">
+                        <div className="fixed inset-0 z-[-1]" onClick={(e) => { e.stopPropagation(); saveEditedCategory(col.id); }} />
+                        <input
+                          value={categoryEditTitle}
+                          onChange={e => setCategoryEditTitle(e.target.value)}
+                          onBlur={(e) => {
+                            if (!e.relatedTarget?.closest('.category-color-picker')) saveEditedCategory(col.id);
+                          }}
+                          onKeyDown={e => e.key === 'Enter' && saveEditedCategory(col.id)}
+                          className={`bg-transparent border-none outline-none font-bold text-[14px] w-full p-0 ${col.color || 'text-foreground/80'}`}
+                          placeholder="Category name"
+                        />
+                        <div className="absolute top-8 left-0 flex gap-1.5 bg-background/95 backdrop-blur-xl border border-[var(--panel-border)] p-2 rounded-xl shadow-xl z-[100] category-color-picker items-center" tabIndex={-1}>
+                          <button
+                            onClick={async (e) => {
+                              e.preventDefault(); e.stopPropagation();
+                              await setDoc(doc(db, 'pub_categories', col.id), { color: '' }, { merge: true });
+                              setEditingCategoryId(null);
+                            }}
+                            className="w-4 h-4 rounded-full flex items-center justify-center bg-foreground/10 hover:bg-red-500/20 hover:text-red-500 text-foreground/40 transition-colors border border-[var(--panel-border)]/50 shrink-0"
+                            title="Reset Category Color"
+                          >
+                            <X className="w-3 h-3" />
+                          </button>
+                          <div className="h-4 w-px bg-[var(--panel-border)]/50 mx-0.5" />
+                          {pastelColors.map(c => (
+                            <button
+                              key={c.name}
+                              onMouseDown={async (e) => {
+                                e.preventDefault();
+                                await setDoc(doc(db, 'pub_categories', col.id), { color: c.text }, { merge: true });
+                              }}
+                              className={`w-4 h-4 rounded-full ${c.bgCircle} hover:scale-125 transition-transform border border-[var(--panel-border)]/50 shrink-0`}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2 w-full cursor-pointer hover:text-foreground transition-colors pr-8" onClick={() => { setEditingCategoryId(col.id); setCategoryEditTitle(col.title); }}>
+                        <span className={`w-2.5 h-2.5 rounded-full ${pastelColors.find(p => p.text === col.color)?.bgCircle || 'bg-foreground/20'} transition-colors shrink-0`} />
+                        <span className={`truncate flex-1 max-w-[200px] ${col.color || ''}`}>{col.title || 'Untitled Category'}</span>
+                        <span className="text-[11px] bg-foreground/10 text-foreground/60 px-1.5 py-0.5 rounded-md font-medium shrink-0">{colTasks.length}</span>
+                      </div>
+                    )}
+
+                    {categories.length > 1 && (
+                      <button onClick={() => handleDeleteCategory(col.id, col.title)} className="absolute right-0 opacity-0 group-hover:opacity-100 text-foreground/30 hover:text-red-500 transition-all shrink-0"><Trash className="w-3.5 h-3.5" /></button>
+                    )}
+                  </h3>
+                </div>
+
+                <div
+                  className={`flex flex-col gap-2.5 flex-1 overflow-y-auto styled-scrollbars pr-1 relative min-h-[150px] rounded-xl transition-all ${dragOverCategoryId === col.id && !dragOverTaskId ? 'bg-foreground/5 scale-[1.01] border-dashed border border-accent/20' : ''}`}
+                  onDragOver={(e) => handleDragOverColumn(e, col.id)}
+                  onDragLeave={handleDragLeave}
+                  onDrop={(e) => handleDrop(e, col.id)}
+                >
+                  <AnimatePresence>
+                    {colTasks.map((item) => (
+                      editingItemId === item.id ? (
+                        <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} key={item.id} className="bg-background/80 rounded-xl p-3 shadow-md border border-accent/40 transition-all flex flex-col gap-2 relative z-[100]">
+                          <div className="fixed inset-0 z-[-1]" onClick={(e) => { e.stopPropagation(); handleSaveInline(col.id); }} />
+                          <textarea
+                            placeholder="Write an item name..."
+                            className="no-glow bg-transparent border-none outline-none text-[13px] text-foreground/90 font-medium leading-snug resize-none w-full min-h-[40px] relative z-10"
+                            value={inlineData.name}
+                            onChange={e => setInlineData({ ...inlineData, name: e.target.value })}
+                            onKeyDown={e => {
+                              if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSaveInline(col.id); }
+                            }}
+                          />
+                          <div className="flex flex-col gap-2 mt-1 relative z-10 w-full">
+                            {inlineFields.map((f, i) => (
+                              <div key={i} className="flex items-start bg-foreground/[0.04] border border-[var(--panel-border)]/50 rounded-[8px] px-2.5 py-1.5 w-full">
+                                <input
+                                  placeholder={keyLabel}
+                                  style={{ width: `${Math.max(25, f.key.length * 7)}px` }}
+                                  value={f.key}
+                                  onChange={e => updateField(i, e.target.value, f.value)}
+                                  onKeyDown={e => e.key === 'Enter' && handleSaveInline(col.id)}
+                                  className="no-glow bg-transparent outline-none text-[11px] text-foreground/50 font-bold placeholder:text-foreground/30 relative top-[1px]"
+                                />
+                                <span className="text-[11px] text-foreground/50 font-bold mr-1.5 relative top-[1px]">:</span>
+                                <textarea
+                                  rows={1}
+                                  placeholder={valueLabel}
+                                  value={f.value}
+                                  onChange={e => updateField(i, f.key, e.target.value)}
+                                  onInput={(e) => { const tgt = e.target as HTMLTextAreaElement; tgt.style.height = 'auto'; tgt.style.height = tgt.scrollHeight + 'px'; }}
+                                  onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSaveInline(col.id); } }}
+                                  className="no-glow bg-transparent outline-none text-[12px] text-foreground/90 font-medium flex-1 min-w-[40px] placeholder:opacity-40 resize-none overflow-hidden leading-tight relative top-[1px]"
+                                />
+                              </div>
+                            ))}
+                          </div>
+                          {isSavingItem === item.id && (
+                            <div className="flex items-center justify-end pt-1">
+                              <div className="w-3 h-3 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+                            </div>
+                          )}
+                        </motion.div>
+                      ) : (
+                        <motion.div
+                          draggable
+                          onDragStart={(e: any) => handleDragStart(e, item.id)}
+                          onDragOver={(e: any) => handleDragOverItem(e, item.id)}
+                          onDragLeave={handleDragLeave}
+                          onDrop={(e: any) => handleDrop(e, col.id, item.id)}
+                          initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
+                          key={item.id}
+                          className={`bg-background/80 rounded-xl p-3 shadow-sm hover:shadow-md cursor-grab active:cursor-grabbing hover:border-accent/40 transition-all group flex flex-col gap-2 relative z-10 border ${dragOverTaskId === item.id ? 'border-accent border-t-2 translate-y-1' : 'border-[var(--panel-border)]'} ${draggedTaskId === item.id ? 'opacity-30 scale-95 border-dashed border-2' : ''}`}
+                        >
+                          <div className="absolute top-2 right-2 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity bg-background/90 backdrop-blur-md border border-[var(--panel-border)] rounded-lg p-1 z-20 shadow-md">
+                            <button onClick={(e) => { e.stopPropagation(); openInlineEditor(col.id, item); }} className="p-1 hover:bg-foreground/5 rounded-md text-foreground/60 hover:text-accent transition-colors"><Edit2 className="w-3.5 h-3.5" /></button>
+                            <button onClick={(e) => { e.stopPropagation(); handleDeleteItem(item.id, item.name); }} className="p-1 hover:bg-red-500/10 rounded-md text-foreground/60 hover:text-red-500 transition-colors"><Trash className="w-3.5 h-3.5" /></button>
+                          </div>
+
+                          <p className="text-[13px] text-foreground/90 font-medium leading-snug break-words pr-12">{item.name}</p>
+
+                          {item.fields && item.fields.length > 0 && (
+                            <div className="flex flex-row flex-wrap gap-2 mt-2">
+                              {item.fields.map((f, i) => (
+                                <div key={i} className="inline-block bg-foreground/[0.04] border border-[var(--panel-border)]/50 rounded-[8px] px-2.5 py-1.5 max-w-full">
+                                  <span className="text-[11px] text-foreground/50 font-bold mr-1.5 relative -top-[1px]">{f.key}:</span>
+                                  <span className="text-[12px] text-foreground/90 font-medium break-words leading-tight">{f.value}</span>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+
+                          <div className="flex items-end justify-between mt-3 pt-3 border-t border-[var(--panel-border)]/50 w-full gap-2">
+                            {showCreator && isTabMode && user ? (
+                              <div className="flex items-center gap-1.5 pr-2 border-r border-[var(--panel-border)] border-dashed mr-auto">
+                                {user.photoURL ? (
+                                  <img src={user.photoURL} className="w-4 h-4 rounded-full shrink-0 object-cover" />
+                                ) : (
+                                  <div className="w-4 h-4 rounded-full bg-accent/20 text-accent flex items-center justify-center text-[9px] font-bold shrink-0">
+                                    {(user.displayName || user.email || 'U')[0].toUpperCase()}
+                                  </div>
+                                )}
+                                <span className="text-[10px] font-bold text-foreground/60 truncate max-w-[80px]">{user.displayName || user.email?.split('@')[0] || 'User'}</span>
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-2 pr-2 border-r border-[var(--panel-border)] border-dashed mr-auto"></div>
+                            )}
+                            <span className="text-[10px] text-foreground/40 font-bold text-right pt-0.5 shrink-0 max-w-[50%] truncate flex-1">
+                              {item.id.startsWith('item_') ? new Date(parseInt(item.id.split('_')[1])).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'Recently Added'}
+                            </span>
+                          </div>
+                        </motion.div>
+                      )
+                    ))}
+                  </AnimatePresence>
+
+                  {addingItemTo === col.id ? (
+                    <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="bg-background/80 rounded-xl p-3 shadow-md border border-accent/40 transition-all flex flex-col gap-2 relative z-[100] mt-1">
+                      <div className="fixed inset-0 z-[-1]" onClick={(e) => { e.stopPropagation(); handleSaveInline(col.id); }} />
+                      <textarea
+                        placeholder="Write an item name..."
+                        className="no-glow bg-transparent border-none outline-none text-[13px] text-foreground/90 font-medium leading-snug resize-none w-full min-h-[40px] relative z-10"
+                        value={inlineData.name}
+                        onChange={e => setInlineData({ ...inlineData, name: e.target.value })}
+                        onKeyDown={e => {
+                          if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSaveInline(col.id); }
+                        }}
+                        autoFocus
+                      />
+                      <div className="flex flex-col gap-2 mt-1 relative z-10 w-full">
+                        {inlineFields.map((f, i) => (
+                          <div key={i} className="flex items-start bg-foreground/[0.04] border border-[var(--panel-border)]/50 rounded-[8px] px-2.5 py-1.5 w-full">
+                            <input
+                              placeholder={keyLabel}
+                              style={{ width: `${Math.max(25, f.key.length * 7)}px` }}
+                              value={f.key}
+                              onChange={e => updateField(i, e.target.value, f.value)}
+                              onKeyDown={e => e.key === 'Enter' && handleSaveInline(col.id)}
+                              className="no-glow bg-transparent outline-none text-[11px] text-foreground/50 font-bold placeholder:text-foreground/30 relative top-[1px]"
+                            />
+                            <span className="text-[11px] text-foreground/50 font-bold mr-1.5 relative top-[1px]">:</span>
+                            <textarea
+                              rows={1}
+                              placeholder={valueLabel}
+                              value={f.value}
+                              onChange={e => updateField(i, f.key, e.target.value)}
+                              onInput={(e) => { const tgt = e.target as HTMLTextAreaElement; tgt.style.height = 'auto'; tgt.style.height = tgt.scrollHeight + 'px'; }}
+                              onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSaveInline(col.id); } }}
+                              className="no-glow bg-transparent outline-none text-[12px] text-foreground/90 font-medium flex-1 min-w-[40px] placeholder:opacity-40 resize-none overflow-hidden leading-tight relative top-[1px]"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                      {isSavingItem === 'new' && (
+                        <div className="flex items-center justify-end pt-1">
+                          <div className="w-3 h-3 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+                        </div>
+                      )}
+                    </motion.div>
+                  ) : (
+                    <button onClick={() => openInlineEditor(col.id)} className="flex items-center gap-2 justify-center w-full py-2.5 mt-1 rounded-xl border border-transparent text-[12px] font-bold text-foreground/40 hover:text-foreground hover:bg-foreground/[0.03] transition-all shrink-0">
+                      <Plus className="w-4 h-4" /> Add Item
+                    </button>
+                  )}
+                </div>
+              </motion.div>
+            );
+          })}
+          {/* Empty Ghost padding allows easy visual scroll */}
+          <div className="w-[10px] shrink-0 pointer-events-none" />
+        </div>
+      </div>
+
+      <style>{`.styled-scrollbars::-webkit-scrollbar { width: 6px; height: 6px; } .styled-scrollbars::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-color) 20%, transparent); border-radius: 4px; } .styled-scrollbars::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-color) 40%, transparent); }`}</style>
+
+      <ConfirmModal
+        isOpen={!!confirmDelete}
+        title="Confirm Deletion"
+        message={<>Are you entirely sure you wish to delete <strong className="text-foreground">{confirmDelete?.title}</strong>? This action is permanent.</>}
+        onConfirm={executeDelete}
+        onCancel={() => setConfirmDelete(null)}
+        isProcessing={isDeleting}
+        confirmText="Yes, Delete"
+      />
+
+    </main>
+  );
+}