From 72eafbd63c31a190c7f52b48c34667af1d031d22 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Wed, 11 Mar 2026 08:55:55 +0100
Subject: [PATCH] fix: drag and drop lists onto tabs to assign them

Drag a someday list by its handle and drop it on a tab button to assign
it to that tab. Drop on "All" to unassign. Visual feedback with dashed
outline on hover during drag.

v1.27.1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json                  |  2 +-
 src/app/globals.css           |  6 +++++
 src/components/WeeklyView.tsx | 50 ++++++++++++++++++++++++++++++++---
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0f561ed..f44305f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.27.0",
+  "version": "1.27.1",
   "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": {
diff --git a/src/app/globals.css b/src/app/globals.css
index 55d076e..5ec2702 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1560,6 +1560,12 @@ h3 {
   color: #fff;
 }
 
+.someday-tab-btn-h.drag-over {
+  outline: 2px dashed var(--weekly-accent, #6366f1);
+  outline-offset: -1px;
+  background: rgba(99, 102, 241, 0.12);
+}
+
 .someday-tab-count {
   display: inline-flex;
   align-items: center;
diff --git a/src/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 59b5c95..e1547da 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -1470,6 +1470,7 @@ export default function WeeklyView() {
     const [newTabNameValue, setNewTabNameValue] = useState("");
     const [creatingNewTab, setCreatingNewTab] = useState(false);
     const [creatingNewTabName, setCreatingNewTabName] = useState("");
+    const [dragOverTab, setDragOverTab] = useState<string | null>(null);
 
     useEffect(() => {
         if (typeof window !== "undefined") {
@@ -6448,8 +6449,27 @@ export default function WeeklyView() {
                         )}
                         <div className="someday-tabs-bar-divider" />
                         <button
-                            className={`someday-tab-btn-h ${activeSomedayTab === null ? "active" : ""}`}
+                            className={`someday-tab-btn-h ${activeSomedayTab === null ? "active" : ""} ${dragOverTab === "__all__" ? "drag-over" : ""}`}
                             onClick={() => setSomedayTab(null)}
+                            onDragOver={(e) => {
+                                if (e.dataTransfer.types.includes("text/list-id")) {
+                                    e.preventDefault();
+                                    e.dataTransfer.dropEffect = "move";
+                                    setDragOverTab("__all__");
+                                }
+                            }}
+                            onDragLeave={() => setDragOverTab(null)}
+                            onDrop={(e) => {
+                                const listId = e.dataTransfer.getData("text/list-id");
+                                if (listId) {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    assignListToTab(listId, null);
+                                    setDraggingListId(null);
+                                    setDropTargetListIndex(null);
+                                }
+                                setDragOverTab(null);
+                            }}
                         >{t.allTabs} <span className="someday-tab-count">{somedayLists.length}</span></button>
                         {somedayTabs.map(tab => (
                             editingTabName === tab ? (
@@ -6478,9 +6498,31 @@ export default function WeeklyView() {
                                     }}
                                 />
                             ) : (
-                                <div key={tab} className="someday-tab-wrapper-h">
+                                <div
+                                    key={tab}
+                                    className="someday-tab-wrapper-h"
+                                    onDragOver={(e) => {
+                                        if (e.dataTransfer.types.includes("text/list-id")) {
+                                            e.preventDefault();
+                                            e.dataTransfer.dropEffect = "move";
+                                            setDragOverTab(tab);
+                                        }
+                                    }}
+                                    onDragLeave={() => setDragOverTab(null)}
+                                    onDrop={(e) => {
+                                        const listId = e.dataTransfer.getData("text/list-id");
+                                        if (listId) {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            assignListToTab(listId, tab);
+                                            setDraggingListId(null);
+                                            setDropTargetListIndex(null);
+                                        }
+                                        setDragOverTab(null);
+                                    }}
+                                >
                                     <button
-                                        className={`someday-tab-btn-h ${activeSomedayTab === tab ? "active" : ""}`}
+                                        className={`someday-tab-btn-h ${activeSomedayTab === tab ? "active" : ""} ${dragOverTab === tab ? "drag-over" : ""}`}
                                         onClick={() => setSomedayTab(tab)}
                                         onDoubleClick={() => {
                                             setEditingTabName(tab);
@@ -6581,7 +6623,7 @@ export default function WeeklyView() {
                                                     e.dataTransfer.setData("text/list-id", list.id);
                                                     e.dataTransfer.effectAllowed = "move";
                                                 }}
-                                                onDragEnd={() => { setDraggingListId(null); setDropTargetListIndex(null); }}
+                                                onDragEnd={() => { setDraggingListId(null); setDropTargetListIndex(null); setDragOverTab(null); }}
                                                 onDragOver={(e) => {
                                                     e.preventDefault();
                                                     e.dataTransfer.dropEffect = "move";