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

style: AnyDay "Add task..." reads as a real input field

Browse Source 
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>
This commit is contained in:
mARTin-B78 2026-05-03 22:58:48 +02:00
parent 8958df03ce
commit ac19e13714
3 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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": {

49
src/components/WeeklyView.tsx
View File

@ -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>