mARTin-B78/My-Weekly-ToDo-List
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: drag and drop lists onto tabs to assign them

Browse Source 
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>
This commit is contained in:
mARTin 2026-03-11 08:55:55 +01:00
parent 8959aa7f5a
commit 72eafbd63c
3 changed files with 53 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "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", "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

6
src/app/globals.css
View File

@ -1560,6 +1560,12 @@ h3 {
color: #fff; 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 { .someday-tab-count {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

50
src/components/WeeklyView.tsx
View File

@ -1470,6 +1470,7 @@ export default function WeeklyView() {
const [newTabNameValue, setNewTabNameValue] = useState(""); const [newTabNameValue, setNewTabNameValue] = useState("");
const [creatingNewTab, setCreatingNewTab] = useState(false); const [creatingNewTab, setCreatingNewTab] = useState(false);
const [creatingNewTabName, setCreatingNewTabName] = useState(""); const [creatingNewTabName, setCreatingNewTabName] = useState("");
const [dragOverTab, setDragOverTab] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
@ -6448,8 +6449,27 @@ export default function WeeklyView() {
)} )}
<div className="someday-tabs-bar-divider" /> <div className="someday-tabs-bar-divider" />
<button <button
className={`someday-tab-btn-h ${activeSomedayTab === null ? "active" : ""}`} className={`someday-tab-btn-h ${activeSomedayTab === null ? "active" : ""} ${dragOverTab === "__all__" ? "drag-over" : ""}`}
onClick={() => setSomedayTab(null)} 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> >{t.allTabs} <span className="someday-tab-count">{somedayLists.length}</span></button>
{somedayTabs.map(tab => ( {somedayTabs.map(tab => (
editingTabName === 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 <button
className={`someday-tab-btn-h ${activeSomedayTab === tab ? "active" : ""}`} className={`someday-tab-btn-h ${activeSomedayTab === tab ? "active" : ""} ${dragOverTab === tab ? "drag-over" : ""}`}
onClick={() => setSomedayTab(tab)} onClick={() => setSomedayTab(tab)}
onDoubleClick={() => { onDoubleClick={() => {
setEditingTabName(tab); setEditingTabName(tab);
@ -6581,7 +6623,7 @@ export default function WeeklyView() {
e.dataTransfer.setData("text/list-id", list.id); e.dataTransfer.setData("text/list-id", list.id);
e.dataTransfer.effectAllowed = "move"; e.dataTransfer.effectAllowed = "move";
}} }}
onDragEnd={() => { setDraggingListId(null); setDropTargetListIndex(null); }} onDragEnd={() => { setDraggingListId(null); setDropTargetListIndex(null); setDragOverTab(null); }}
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
e.dataTransfer.dropEffect = "move"; e.dataTransfer.dropEffect = "move";