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", "name": "my-weekly-todo-list",
"version": "1.104.0", "version": "1.104.1",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "my-weekly-todo-list", "name": "my-weekly-todo-list",
"version": "1.104.0", "version": "1.104.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@auth/prisma-adapter": "^2.11.1", "@auth/prisma-adapter": "^2.11.1",

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "my-weekly-todo-list", "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", "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": {

49
src/components/WeeklyView.tsx
View File

@ -8491,6 +8491,7 @@ export default function WeeklyView() {
<> <>
{listToDelete !== list.id && <SomedayAddTask {listToDelete !== list.id && <SomedayAddTask
listId={list.id} listId={list.id}
darkMode={darkMode}
onAdd={async (title) => { onAdd={async (title) => {
const occupiedSlots = list.tasks.map(t => t.somedaySlotIndex).filter(s => s !== null && s !== undefined) as number[]; const occupiedSlots = list.tasks.map(t => t.somedaySlotIndex).filter(s => s !== null && s !== undefined) as number[];
let nextFreeSlot = 0; let nextFreeSlot = 0;
@ -9723,11 +9724,13 @@ function SomedayAddTask({
onAdd, onAdd,
onCancel, onCancel,
slotIdx, slotIdx,
darkMode,
}: { }: {
listId: string; listId: string;
onAdd: (title: string) => void; onAdd: (title: string) => void;
onCancel?: () => void; onCancel?: () => void;
slotIdx?: number; slotIdx?: number;
darkMode?: boolean;
}) { }) {
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
@ -9747,11 +9750,16 @@ function SomedayAddTask({
} }
}, [slotIdx]); }, [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 ( return (
<li <li
className="weekly-task-item minimal" className="weekly-task-item minimal"
style={{ style={{
margin: slotIdx !== undefined ? "0" : "0 0.5rem", margin: isBottomAddInput ? "0 0.5rem" : "0",
listStyle: "none", listStyle: "none",
width: "100%" width: "100%"
}} }}
@ -9777,18 +9785,33 @@ function SomedayAddTask({
} }
}} }}
className="weekly-task-text" className="weekly-task-text"
style={{ style={isBottomAddInput
width: "100%", ? {
border: "none", width: "100%",
background: "transparent", border: `1px solid ${darkMode ? "#374151" : "#e5e7eb"}`,
padding: "0 0", background: darkMode ? "#1f2937" : "#ffffff",
fontSize: "0.9375rem", color: darkMode ? "#f9fafb" : "#111827",
outline: "none", padding: "4px 8px",
height: slotIdx !== undefined ? "auto" : "24px", borderRadius: "4px",
display: "block", fontSize: "0.9375rem",
}} outline: "none",
placeholder={slotIdx !== undefined ? "" : "Add task..."} height: "26px",
data-someday-add-input={slotIdx !== undefined ? undefined : listId} 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> </form>
</li> </li>