From ac19e13714df62cb759f5ba70ea2bc16b178d013 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Sun, 3 May 2026 22:58:48 +0200
Subject: [PATCH] style: AnyDay "Add task..." reads as a real input field

Give the bottom-of-list "Add task..." input a framed background (white
with a subtle border in light mode, slate-800 with a darker border in
night mode) plus a small radius and padding, so it visually matches user
expectations of an input. The inline slot-editor that appears when you
click on an empty slot keeps the transparent look so it blends with the
surrounding task rows.

v1.104.1

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 package-lock.json             |  4 +--
 package.json                  |  2 +-
 src/components/WeeklyView.tsx | 49 +++++++++++++++++++++++++----------
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d2f64d9..5132fb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.104.0",
+  "version": "1.104.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "my-weekly-todo-list",
-      "version": "1.104.0",
+      "version": "1.104.1",
       "license": "MIT",
       "dependencies": {
         "@auth/prisma-adapter": "^2.11.1",
diff --git a/package.json b/package.json
index 1253ea8..d4b1ddc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.104.0",
+  "version": "1.104.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/components/WeeklyView.tsx b/src/components/WeeklyView.tsx
index 1be02cd..903fd85 100644
--- a/src/components/WeeklyView.tsx
+++ b/src/components/WeeklyView.tsx
@@ -8491,6 +8491,7 @@ export default function WeeklyView() {
                                                             <>
                                                                 {listToDelete !== list.id && <SomedayAddTask
                                                                     listId={list.id}
+                                                                    darkMode={darkMode}
                                                                     onAdd={async (title) => {
                                                                         const occupiedSlots = list.tasks.map(t => t.somedaySlotIndex).filter(s => s !== null && s !== undefined) as number[];
                                                                         let nextFreeSlot = 0;
@@ -9723,11 +9724,13 @@ function SomedayAddTask({
     onAdd,
     onCancel,
     slotIdx,
+    darkMode,
 }: {
     listId: string;
     onAdd: (title: string) => void;
     onCancel?: () => void;
     slotIdx?: number;
+    darkMode?: boolean;
 }) {
     const [title, setTitle] = useState("");
     const inputRef = useRef<HTMLInputElement>(null);
@@ -9747,11 +9750,16 @@ function SomedayAddTask({
         }
     }, [slotIdx]);
 
+    // Bottom-of-list "Add task..." gets an input-style background so it reads
+    // as a real input. The inline slot-editor (slotIdx !== undefined) keeps the
+    // transparent look so it visually matches the surrounding task rows.
+    const isBottomAddInput = slotIdx === undefined;
+
     return (
         <li
             className="weekly-task-item minimal"
             style={{
-                margin: slotIdx !== undefined ? "0" : "0 0.5rem",
+                margin: isBottomAddInput ? "0 0.5rem" : "0",
                 listStyle: "none",
                 width: "100%"
             }}
@@ -9777,18 +9785,33 @@ function SomedayAddTask({
                         }
                     }}
                     className="weekly-task-text"
-                    style={{
-                        width: "100%",
-                        border: "none",
-                        background: "transparent",
-                        padding: "0 0",
-                        fontSize: "0.9375rem",
-                        outline: "none",
-                        height: slotIdx !== undefined ? "auto" : "24px",
-                        display: "block", 
-                    }}
-                    placeholder={slotIdx !== undefined ? "" : "Add task..."}
-                    data-someday-add-input={slotIdx !== undefined ? undefined : listId}
+                    style={isBottomAddInput
+                        ? {
+                            width: "100%",
+                            border: `1px solid ${darkMode ? "#374151" : "#e5e7eb"}`,
+                            background: darkMode ? "#1f2937" : "#ffffff",
+                            color: darkMode ? "#f9fafb" : "#111827",
+                            padding: "4px 8px",
+                            borderRadius: "4px",
+                            fontSize: "0.9375rem",
+                            outline: "none",
+                            height: "26px",
+                            display: "block",
+                            boxSizing: "border-box",
+                        }
+                        : {
+                            width: "100%",
+                            border: "none",
+                            background: "transparent",
+                            padding: "0",
+                            fontSize: "0.9375rem",
+                            outline: "none",
+                            height: "auto",
+                            display: "block",
+                        }
+                    }
+                    placeholder={isBottomAddInput ? "Add task..." : ""}
+                    data-someday-add-input={isBottomAddInput ? listId : undefined}
                 />
             </form>
         </li>