feat: fix kanban drag persistence, add view switcher and kanban filters

Fix stale closure in updateTaskFields causing tasks to disappear after
dragging between kanban columns. Add view switcher icons (Week/List/Kanban)
in the header on hover. Add search bar and filter dropdowns (project,
someday list, week) to the kanban board. Include someday list tasks in
kanban view.

v1.29.0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {

src/app/globals.css

@@ -1656,6 +1656,89 @@ h3 {
 }
 
 /* Kanban Board */
+.kanban-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.kanban-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--weekly-border, #e5e7eb);
+  background: var(--weekly-bg, #fff);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.kanban-filter-search {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--weekly-bg-alt, #f3f4f6);
+  border: 1px solid var(--weekly-border, #e5e7eb);
+  border-radius: 6px;
+  padding: 4px 8px;
+  min-width: 160px;
+}
+
+.kanban-filter-icon {
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+.kanban-filter-input {
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 0.8rem;
+  width: 100%;
+  color: inherit;
+}
+
+.kanban-filter-clear {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #9ca3af;
+  padding: 2px;
+  display: flex;
+  border-radius: 50%;
+}
+.kanban-filter-clear:hover {
+  color: #374151;
+  background: #e5e7eb;
+}
+
+.kanban-filter-select {
+  font-size: 0.8rem;
+  padding: 4px 8px;
+  border: 1px solid var(--weekly-border, #e5e7eb);
+  border-radius: 6px;
+  background: var(--weekly-bg-alt, #f3f4f6);
+  color: inherit;
+  cursor: pointer;
+  max-width: 180px;
+}
+
+.kanban-filter-reset {
+  background: none;
+  border: 1px solid var(--weekly-border, #e5e7eb);
+  border-radius: 6px;
+  cursor: pointer;
+  color: #9ca3af;
+  padding: 4px 6px;
+  display: flex;
+  align-items: center;
+}
+.kanban-filter-reset:hover {
+  color: #ef4444;
+  border-color: #ef4444;
+}
+
 .kanban-board {
   display: flex;
   gap: 12px;
@@ -1778,6 +1861,14 @@ h3 {
   padding-left: 20px;
 }
 
+.kanban-card-list {
+  font-size: 0.65rem;
+  margin-top: 2px;
+  padding-left: 20px;
+  color: #6b7280;
+  font-style: italic;
+}
+
 /* Kanban stage color indicator on weekly tasks */
 .kanban-stage-indicator {
   width: 4px;

src/components/WeeklyView.tsx

@@ -62,6 +62,10 @@ import {
     Link,
     Globe,
     Tag,
+    Kanban,
+    CalendarDays,
+    ListTodo,
+    Filter,
 } from "lucide-react";
 
 // Types
@@ -244,7 +248,11 @@ const translations: Record<string, any> = {
         simpleView: "Simple",
         calendarView: "Calendar",
         listView: "List",
+        weekView: "Week",
         kanbanView: "Kanban",
+        filterByProject: "All Projects",
+        filterByList: "All Lists",
+        filterByWeek: "All Weeks",
         kanbanStages: "Kanban Stages",
         kanbanStagesDesc: "Define the stages for your Kanban board. Drag tasks between columns to change their stage.",
         addStage: "Add stage",
@@ -444,6 +452,10 @@ const translations: Record<string, any> = {
         simpleView: "Einfach",
         calendarView: "Kalender",
         kanbanView: "Kanban",
+        weekView: "Woche",
+        filterByProject: "Alle Projekte",
+        filterByList: "Alle Listen",
+        filterByWeek: "Alle Wochen",
         kanbanStages: "Kanban-Phasen",
         kanbanStagesDesc: "Definiere die Phasen für dein Kanban-Board. Ziehe Aufgaben zwischen Spalten, um ihre Phase zu ändern.",
         addStage: "Phase hinzufügen",
@@ -645,7 +657,11 @@ const translations: Record<string, any> = {
         simpleView: "Simple",
         calendarView: "Calendrier",
         listView: "Liste",
+        weekView: "Semaine",
         kanbanView: "Kanban",
+        filterByProject: "Tous les projets",
+        filterByList: "Toutes les listes",
+        filterByWeek: "Toutes les semaines",
         kanbanStages: "Étapes Kanban",
         kanbanStagesDesc: "Définissez les étapes de votre tableau Kanban. Glissez les tâches entre les colonnes pour changer leur étape.",
         addStage: "Ajouter une étape",
@@ -845,7 +861,11 @@ const translations: Record<string, any> = {
         simpleView: "Simple",
         calendarView: "Calendario",
         listView: "Lista",
+        weekView: "Semana",
         kanbanView: "Kanban",
+        filterByProject: "Todos los proyectos",
+        filterByList: "Todas las listas",
+        filterByWeek: "Todas las semanas",
         kanbanStages: "Etapas Kanban",
         kanbanStagesDesc: "Define las etapas de tu tablero Kanban. Arrastra tareas entre columnas para cambiar su etapa.",
         addStage: "Añadir etapa",
@@ -1045,7 +1065,11 @@ const translations: Record<string, any> = {
         simpleView: "Semplice",
         calendarView: "Calendario",
         listView: "Lista",
+        weekView: "Settimana",
         kanbanView: "Kanban",
+        filterByProject: "Tutti i progetti",
+        filterByList: "Tutte le liste",
+        filterByWeek: "Tutte le settimane",
         kanbanStages: "Fasi Kanban",
         kanbanStagesDesc: "Definisci le fasi della tua board Kanban. Trascina le attività tra le colonne per cambiare la loro fase.",
         addStage: "Aggiungi fase",
@@ -1848,6 +1872,12 @@ export default function WeeklyView() {
             });
         } catch (e) { console.error("Failed to save kanban stages:", e); }
     };
+    // Kanban filters
+    const [kanbanFilterProject, setKanbanFilterProject] = useState<string>("");
+    const [kanbanFilterList, setKanbanFilterList] = useState<string>("");
+    const [kanbanFilterWeek, setKanbanFilterWeek] = useState<string>("");
+    const [kanbanSearch, setKanbanSearch] = useState("");
+
     const [protectEventTimes, setProtectEventTimes] = useState(false);
     const [unlockedEvents, setUnlockedEvents] = useState<Set<string>>(new Set());
 
@@ -3785,8 +3815,8 @@ export default function WeeklyView() {
     };
 
     const updateTaskFields = async (taskId: string, fields: Partial<Task>) => {
-        setTasks(
+        setTasks((prev) =>
-            tasks.map((t) =>
+            prev.map((t) =>
                 t.id === taskId ? { ...t, ...fields, updatedAt: new Date() } : t,
             ),
         );
@@ -5512,6 +5542,30 @@ export default function WeeklyView() {
                         </div>
                     )}
 
+                    {/* View Switcher */}
+                    <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded p-0.5" title={t.viewStyle}>
+                        <button
+                            onClick={() => { setViewStyle("simple"); saveSetting("viewStyle", "simple"); }}
+                            className={`p-1.5 rounded transition-colors ${viewStyle !== "kanban" && viewStyle !== "list" ? "bg-white shadow-sm text-black dark:bg-gray-700 dark:text-white" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                            title={t.weekView}
+                        >
+                            <CalendarDays size={16} />
+                        </button>
+                        <button
+                            onClick={() => { setViewStyle("list"); saveSetting("viewStyle", "list"); }}
+                            className={`p-1.5 rounded transition-colors ${viewStyle === "list" ? "bg-white shadow-sm text-black dark:bg-gray-700 dark:text-white" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                            title={t.listView}
+                        >
+                            <ListTodo size={16} />
+                        </button>
+                        <button
+                            onClick={() => { setViewStyle("kanban"); saveSetting("viewStyle", "kanban"); }}
+                            className={`p-1.5 rounded transition-colors ${viewStyle === "kanban" ? "bg-white shadow-sm text-black dark:bg-gray-700 dark:text-white" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
+                            title={t.kanbanView}
+                        >
+                            <Kanban size={16} />
+                        </button>
+                    </div>
 
                 </div>
 
@@ -5834,154 +5888,217 @@ export default function WeeklyView() {
             {allDayPosition === "above" && allDaySection}
 
             {/* Kanban Board View */}
-            {viewStyle === "kanban" && (
+            {viewStyle === "kanban" && (() => {
-                <div className="kanban-board">
+                // Combine all tasks (weekly + someday) for kanban
-                    {kanbanStages.map((stage) => {
+                const allSomedayTasks = somedayLists.flatMap(l => l.tasks);
-                        const stageTasks = tasks.filter(t => (t.kanbanStage || null) === stage.id && !t.somedayListId);
+                const allKanbanTasks = [...tasks, ...allSomedayTasks];
-                        return (
+
-                            <div
+                // Build week options for filter
-                                key={stage.id}
+                const weekOptions = (() => {
-                                className="kanban-column"
+                    const weeks = new Map<string, string>();
-                                onDragOver={(e) => {
+                    allKanbanTasks.forEach(t => {
-                                    if (e.dataTransfer.types.includes("text/kanban-task")) {
+                        if (t.scheduledDate) {
-                                        e.preventDefault();
+                            const d = new Date(t.scheduledDate);
-                                        e.dataTransfer.dropEffect = "move";
+                            const weekStart = getStartOfWeek(d);
-                                        e.currentTarget.classList.add("kanban-column-drag-over");
+                            const key = weekStart.toISOString().split("T")[0];
-                                    }
+                            if (!weeks.has(key)) {
+                                const weekEnd = new Date(weekStart);
+                                weekEnd.setDate(weekEnd.getDate() + 6);
+                                weeks.set(key, `${weekStart.toLocaleDateString(language, { month: "short", day: "numeric" })} - ${weekEnd.toLocaleDateString(language, { month: "short", day: "numeric" })}`);
+                            }
+                        }
+                    });
+                    return Array.from(weeks.entries()).sort((a, b) => a[0].localeCompare(b[0]));
+                })();
+
+                // Apply filters
+                const filteredKanbanTasks = allKanbanTasks.filter(t => {
+                    if (kanbanSearch && !t.title.toLowerCase().includes(kanbanSearch.toLowerCase())) return false;
+                    if (kanbanFilterProject && t.projectId !== kanbanFilterProject) return false;
+                    if (kanbanFilterList) {
+                        if (kanbanFilterList === "__none__") {
+                            if (t.somedayListId) return false;
+                        } else {
+                            if (t.somedayListId !== kanbanFilterList) return false;
+                        }
+                    }
+                    if (kanbanFilterWeek && t.scheduledDate) {
+                        const d = new Date(t.scheduledDate);
+                        const weekStart = getStartOfWeek(d);
+                        if (weekStart.toISOString().split("T")[0] !== kanbanFilterWeek) return false;
+                    }
+                    return true;
+                });
+
+                const renderKanbanCard = (task: Task) => (
+                    <div
+                        key={task.id}
+                        className={`kanban-card ${task.completed ? "kanban-card-done" : ""}`}
+                        draggable
+                        onDragStart={(e) => {
+                            e.dataTransfer.setData("text/kanban-task", task.id);
+                            e.dataTransfer.effectAllowed = "move";
+                        }}
+                    >
+                        <div className="kanban-card-header">
+                            <input
+                                type="checkbox"
+                                checked={task.completed}
+                                onChange={() => toggleTask(task.id)}
+                                className="kanban-card-checkbox"
+                            />
+                            <span
+                                className="kanban-card-title"
+                                contentEditable
+                                suppressContentEditableWarning
+                                onBlur={(e) => {
+                                    const text = (e.target as HTMLElement).textContent || "";
+                                    if (text !== task.title) updateTask(task.id, text);
                                 }}
-                                onDragLeave={(e) => {
+                                onKeyDown={(e) => {
-                                    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                                    if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLElement).blur(); }
-                                        e.currentTarget.classList.remove("kanban-column-drag-over");
-                                    }
-                                }}
-                                onDrop={async (e) => {
-                                    e.currentTarget.classList.remove("kanban-column-drag-over");
-                                    const taskId = e.dataTransfer.getData("text/kanban-task");
-                                    if (taskId) {
-                                        e.preventDefault();
-                                        await updateTaskFields(taskId, { kanbanStage: stage.id });
-                                    }
                                 }}
                             >
-                                <div className="kanban-column-header" style={{ borderBottomColor: stage.color }}>
+                                {task.title}
-                                    <span className="kanban-column-dot" style={{ background: stage.color }} />
+                            </span>
-                                    <span className="kanban-column-title">{stage.name}</span>
+                        </div>
-                                    <span className="kanban-column-count">{stageTasks.length}</span>
+                        {task.scheduledDate && (
-                                </div>
+                            <div className="kanban-card-date">
-                                <div className="kanban-column-body">
+                                {new Date(task.scheduledDate).toLocaleDateString(language, { month: "short", day: "numeric" })}
-                                    {stageTasks.map(task => (
-                                        <div
-                                            key={task.id}
-                                            className={`kanban-card ${task.completed ? "kanban-card-done" : ""}`}
-                                            draggable
-                                            onDragStart={(e) => {
-                                                e.dataTransfer.setData("text/kanban-task", task.id);
-                                                e.dataTransfer.effectAllowed = "move";
-                                            }}
-                                        >
-                                            <div className="kanban-card-header">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={task.completed}
-                                                    onChange={() => toggleTask(task.id)}
-                                                    className="kanban-card-checkbox"
-                                                />
-                                                <span
-                                                    className="kanban-card-title"
-                                                    contentEditable
-                                                    suppressContentEditableWarning
-                                                    onBlur={(e) => {
-                                                        const text = (e.target as HTMLElement).textContent || "";
-                                                        if (text !== task.title) updateTask(task.id, text);
-                                                    }}
-                                                    onKeyDown={(e) => {
-                                                        if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLElement).blur(); }
-                                                    }}
-                                                >
-                                                    {task.title}
-                                                </span>
-                                            </div>
-                                            {task.scheduledDate && (
-                                                <div className="kanban-card-date">
-                                                    {new Date(task.scheduledDate).toLocaleDateString(language, { month: "short", day: "numeric" })}
-                                                </div>
-                                            )}
-                                            {task.project && (
-                                                <div className="kanban-card-project" style={{ color: task.project.color || "#888" }}>
-                                                    {task.project.icon || "📁"} {task.project.name}
-                                                </div>
-                                            )}
-                                        </div>
-                                    ))}
-                                </div>
                             </div>
-                        );
+                        )}
-                    })}
+                        {task.project && (
-                    {/* Unassigned column */}
+                            <div className="kanban-card-project" style={{ color: task.project.color || "#888" }}>
-                    {(() => {
+                                {task.project.icon || "📁"} {task.project.name}
-                        const unassigned = tasks.filter(t => !t.kanbanStage && !t.somedayListId && !t.completed);
+                            </div>
-                        if (unassigned.length === 0) return null;
+                        )}
-                        return (
+                        {task.somedayListId && (() => {
-                            <div
+                            const list = somedayLists.find(l => l.id === task.somedayListId);
-                                className="kanban-column kanban-column-unassigned"
+                            return list ? <div className="kanban-card-list">{list.title}</div> : null;
-                                onDragOver={(e) => {
+                        })()}
-                                    if (e.dataTransfer.types.includes("text/kanban-task")) {
+                    </div>
-                                        e.preventDefault();
+                );
-                                        e.currentTarget.classList.add("kanban-column-drag-over");
+
-                                    }
+                const kanbanColumnDrop = (stageId: string | null) => ({
-                                }}
+                    onDragOver: (e: React.DragEvent) => {
-                                onDragLeave={(e) => {
+                        if (e.dataTransfer.types.includes("text/kanban-task")) {
-                                    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                            e.preventDefault();
-                                        e.currentTarget.classList.remove("kanban-column-drag-over");
+                            e.dataTransfer.dropEffect = "move";
-                                    }
+                            e.currentTarget.classList.add("kanban-column-drag-over");
-                                }}
+                        }
-                                onDrop={async (e) => {
+                    },
-                                    e.currentTarget.classList.remove("kanban-column-drag-over");
+                    onDragLeave: (e: React.DragEvent) => {
-                                    const taskId = e.dataTransfer.getData("text/kanban-task");
+                        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-                                    if (taskId) {
+                            e.currentTarget.classList.remove("kanban-column-drag-over");
-                                        e.preventDefault();
+                        }
-                                        await updateTaskFields(taskId, { kanbanStage: null });
+                    },
-                                    }
+                    onDrop: async (e: React.DragEvent) => {
-                                }}
+                        e.currentTarget.classList.remove("kanban-column-drag-over");
+                        const taskId = e.dataTransfer.getData("text/kanban-task");
+                        if (taskId) {
+                            e.preventDefault();
+                            await updateTaskFields(taskId, { kanbanStage: stageId });
+                        }
+                    },
+                });
+
+                const hasActiveFilters = kanbanSearch || kanbanFilterProject || kanbanFilterList || kanbanFilterWeek;
+
+                return (
+                    <div className="kanban-wrapper">
+                        {/* Filter Bar */}
+                        <div className="kanban-filter-bar">
+                            <div className="kanban-filter-search">
+                                <Search size={14} className="kanban-filter-icon" />
+                                <input
+                                    type="text"
+                                    value={kanbanSearch}
+                                    onChange={(e) => setKanbanSearch(e.target.value)}
+                                    placeholder="Search..."
+                                    className="kanban-filter-input"
+                                />
+                                {kanbanSearch && (
+                                    <button onClick={() => setKanbanSearch("")} className="kanban-filter-clear"><X size={12} /></button>
+                                )}
+                            </div>
+                            <select
+                                value={kanbanFilterProject}
+                                onChange={(e) => setKanbanFilterProject(e.target.value)}
+                                className="kanban-filter-select"
                             >
-                                <div className="kanban-column-header" style={{ borderBottomColor: "#d1d5db" }}>
+                                <option value="">{t.filterByProject}</option>
-                                    <span className="kanban-column-dot" style={{ background: "#d1d5db" }} />
+                                {projects.map(p => (
-                                    <span className="kanban-column-title">{t.noStage}</span>
+                                    <option key={p.id} value={p.id}>{p.icon || "📁"} {p.name}</option>
-                                    <span className="kanban-column-count">{unassigned.length}</span>
+                                ))}
-                                </div>
+                            </select>
-                                <div className="kanban-column-body">
+                            <select
-                                    {unassigned.map(task => (
+                                value={kanbanFilterList}
-                                        <div
+                                onChange={(e) => setKanbanFilterList(e.target.value)}
-                                            key={task.id}
+                                className="kanban-filter-select"
-                                            className="kanban-card"
+                            >
-                                            draggable
+                                <option value="">{t.filterByList}</option>
-                                            onDragStart={(e) => {
+                                <option value="__none__">{t.weekView}</option>
-                                                e.dataTransfer.setData("text/kanban-task", task.id);
+                                {somedayLists.map(l => (
-                                                e.dataTransfer.effectAllowed = "move";
+                                    <option key={l.id} value={l.id}>{l.title}</option>
-                                            }}
+                                ))}
-                                        >
+                            </select>
-                                            <div className="kanban-card-header">
+                            <select
-                                                <input
+                                value={kanbanFilterWeek}
-                                                    type="checkbox"
+                                onChange={(e) => setKanbanFilterWeek(e.target.value)}
-                                                    checked={task.completed}
+                                className="kanban-filter-select"
-                                                    onChange={() => toggleTask(task.id)}
+                            >
-                                                    className="kanban-card-checkbox"
+                                <option value="">{t.filterByWeek}</option>
-                                                />
+                                {weekOptions.map(([key, label]) => (
-                                                <span className="kanban-card-title">{task.title}</span>
+                                    <option key={key} value={key}>{label}</option>
-                                            </div>
+                                ))}
-                                            {task.scheduledDate && (
+                            </select>
-                                                <div className="kanban-card-date">
+                            {hasActiveFilters && (
-                                                    {new Date(task.scheduledDate).toLocaleDateString(language, { month: "short", day: "numeric" })}
+                                <button
-                                                </div>
+                                    onClick={() => { setKanbanSearch(""); setKanbanFilterProject(""); setKanbanFilterList(""); setKanbanFilterWeek(""); }}
-                                            )}
+                                    className="kanban-filter-reset"
+                                    title="Clear filters"
+                                >
+                                    <X size={14} />
+                                </button>
+                            )}
+                        </div>
+                        <div className="kanban-board">
+                            {kanbanStages.map((stage) => {
+                                const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id);
+                                return (
+                                    <div key={stage.id} className="kanban-column" {...kanbanColumnDrop(stage.id)}>
+                                        <div className="kanban-column-header" style={{ borderBottomColor: stage.color }}>
+                                            <span className="kanban-column-dot" style={{ background: stage.color }} />
+                                            <span className="kanban-column-title">{stage.name}</span>
+                                            <span className="kanban-column-count">{stageTasks.length}</span>
                                         </div>
-                                    ))}
+                                        <div className="kanban-column-body">
-                                </div>
+                                            {stageTasks.map(renderKanbanCard)}
-                            </div>
+                                        </div>
-                        );
+                                    </div>
-                    })()}
+                                );
-                </div>
+                            })}
-            )}
+                            {/* Unassigned column */}
+                            {(() => {
+                                const unassigned = filteredKanbanTasks.filter(t => !t.kanbanStage && !t.completed);
+                                if (unassigned.length === 0 && !hasActiveFilters) return null;
+                                return (
+                                    <div className="kanban-column kanban-column-unassigned" {...kanbanColumnDrop(null)}>
+                                        <div className="kanban-column-header" style={{ borderBottomColor: "#d1d5db" }}>
+                                            <span className="kanban-column-dot" style={{ background: "#d1d5db" }} />
+                                            <span className="kanban-column-title">{t.noStage}</span>
+                                            <span className="kanban-column-count">{unassigned.length}</span>
+                                        </div>
+                                        <div className="kanban-column-body">
+                                            {unassigned.map(renderKanbanCard)}
+                                        </div>
+                                    </div>
+                                );
+                            })()}
+                        </div>
+                    </div>
+                );
+            })()}
 
             {/* Main Grid with Time Column */}
             {viewStyle !== "kanban" && <div className="time-grid-wrapper">