From 20deaece0cfd7d4490f3fcab9576f19395fe6cc5 Mon Sep 17 00:00:00 2001
From: mARTin <mail@martin-bierschenk.de>
Date: Thu, 26 Feb 2026 07:54:24 +0100
Subject: [PATCH] fix(hooks): clean up syntax and formatting in GridTaskBlock

---
 src/components/GridTaskBlock.tsx | 131 +++++++++++++++----------------
 1 file changed, 62 insertions(+), 69 deletions(-)

diff --git a/src/components/GridTaskBlock.tsx b/src/components/GridTaskBlock.tsx
index 9f53710..c9b7f89 100644
--- a/src/components/GridTaskBlock.tsx
+++ b/src/components/GridTaskBlock.tsx
@@ -196,7 +196,7 @@ export function GridTaskBlock({
                         onSubmit={(e) => {
                             e.preventDefault();
                             const input = e.currentTarget.elements.namedItem("title") as HTMLInputElement;
-                            updateTask(task.id, input.value || \"\");
+                            updateTask(task.id, input.value || "");
                         }}
                         onClick={(e) => e.stopPropagation()}
                         style={{ width: "100%", paddingRight: "20px" }}
@@ -268,78 +268,73 @@ export function GridTaskBlock({
                         <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                     </svg>
                 </button>
-                <button className={`task-action-btn ${isSubTaskInputOpen ? \"active\" : \"\"}`} onClick={(e) => { e.stopPropagation(); setIsSubTaskInputOpen(!isSubTaskInputOpen); if (!isSubTaskInputOpen) { setIsSubTasksOpen(true); setTimeout(() => subTaskInputRef.current?.focus(), 50); } }} title="Add sub-task">
+                <button className={`task-action-btn ${isSubTaskInputOpen ? "active" : ""}`} onClick={(e) => { e.stopPropagation(); setIsSubTaskInputOpen(!isSubTaskInputOpen); if (!isSubTaskInputOpen) { setIsSubTasksOpen(true); setTimeout(() => subTaskInputRef.current?.focus(), 50); } }} title="Add sub-task">
                     <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
                         <line x1="12" y1="5" x2="12" y2="19" />
                         <line x1="5" y1="12" x2="19" y2="12" />
                     </svg>
                 </button>
-                <button className={`task-action-btn ${isNotesOpen ? \"active\" : \"\"}`} onClick={(e) => { e.stopPropagation(); setIsNotesOpen(!isNotesOpen); }} title="Notes">
-        < svg viewBox = "0 0 24 24" width = "12" height = "12" stroke = "currentColor" strokeWidth = "2.5" fill = "none" strokeLinecap = "round" strokeLinejoin = "round" >
+                <button className={`task-action-btn ${isNotesOpen ? "active" : ""}`} onClick={(e) => { e.stopPropagation(); setIsNotesOpen(!isNotesOpen); }} title="Notes">
+                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
                         <line x1="3" y1="12" x2="21" y2="12" />
                         <line x1="3" y1="6" x2="21" y2="6" />
                         <line x1="3" y1="18" x2="21" y2="18" />
-                    </svg >
-                </button >
-        {!task.completed && (
-            <button
-                className={`task-action-btn ${task.isRolling ?\"active\" : \"\"}`}
-    onClick = {(e) => { e.stopPropagation(); toggleTaskRolling(task.id); }
-}
-title = {
-    task.isRolling ?\"Disable rolling\" : \"Enable rolling\"}
+                    </svg>
+                </button>
+                {!task.completed && (
+                    <button
+                        className={`task-action-btn ${task.isRolling ? "active" : ""}`}
+                        onClick={(e) => { e.stopPropagation(); toggleTaskRolling(task.id); }}
+                        title={task.isRolling ? "Disable rolling" : "Enable rolling"}
                     >
-        <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="23 4 23 10 17 10" />
-            <path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\" />
-        </svg>
+                        <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="23 4 23 10 17 10" />
+                            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+                        </svg>
                     </button>
                 )}
-{
-    !task.completed && (
-        <button
-            className={`task-action-btn ${task.isRecurring ?\"active\" : \"\"}`}
-    onClick = {(e) => { e.stopPropagation(); setSelectedTaskForRecurrence(task); }
-}
-title = {
-    task.isRecurring ?\"Edit recurrence\" : \"Make recurring\"}
+                {!task.completed && (
+                    <button
+                        className={`task-action-btn ${task.isRecurring ? "active" : ""}`}
+                        onClick={(e) => { e.stopPropagation(); setSelectedTaskForRecurrence(task); }}
+                        title={task.isRecurring ? "Edit recurrence" : "Make recurring"}
                     >
-        <Repeat size={12} />
+                        <Repeat size={12} />
                     </button>
                 )}
-<button className="task-action-btn delete" onClick={(e) => { e.stopPropagation(); deleteTask(task.id); }} title="Delete">
-    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
-        <polyline points="3 6 5 6 21 6"></polyline>
-        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-    </svg>
-</button>
-            </div >
+                <button className="task-action-btn delete" onClick={(e) => { e.stopPropagation(); deleteTask(task.id); }} title="Delete">
+                    <svg viewBox="0 0 24 24" width="12" height="12" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
+                        <polyline points="3 6 5 6 21 6"></polyline>
+                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                    </svg>
+                </button>
+            </div>
 
             <div style={{ paddingLeft: "4px", paddingRight: "4px", paddingBottom: "10px", marginTop: "4px" }}>
                 {isNotesOpen && (
                     <div
-                        className={`weekly-notes-popup ${topOffset > 180 ? \"on-top\" : \"\"}`}
+                        className={`weekly-notes-popup ${topOffset > 180 ? "on-top" : ""}`}
                         onClick={(e) => e.stopPropagation()}
                         style={{
-                            top: topOffset > 180 ? \"auto\" : \"100%\",
-                            bottom: topOffset > 180 ? \"100%\" : \"auto\",
-                            marginTop: topOffset > 180 ? \"0\" : \"10px\",
-                            marginBottom: topOffset > 180 ? \"10px\" : \"0\",
-                            left: \"-10px\",
-                            right: \"-10px\",
-                            width: \"auto\",
+                            top: topOffset > 180 ? "auto" : "100%",
+                            bottom: topOffset > 180 ? "100%" : "auto",
+                            marginTop: topOffset > 180 ? "0" : "10px",
+                            marginBottom: topOffset > 180 ? "10px" : "0",
+                            left: "-10px",
+                            right: "-10px",
+                            width: "auto",
                         }}
                     >
                         <div className="notes-toolbar">
-                            <button className="notes-toolbar-btn" onClick={() => insertMarkdown(\"**\", \"**\")} title=\"Bold\">B</button>
-                            <button className="notes-toolbar-btn" onClick={() => insertMarkdown(\"*\", \"*\")} title=\"Italic\">i</button>
-                            <button className="notes-toolbar-btn" onClick={() => insertMarkdown(\"- \")} title=\"List\">☑</button>
-                            <span style={{ marginLeft: \"auto\", fontSize: \"0.75rem\", color: \"#999\" }}>Markdown</span>
+                            <button className="notes-toolbar-btn" onClick={() => insertMarkdown("**", "**")} title="Bold">B</button>
+                            <button className="notes-toolbar-btn" onClick={() => insertMarkdown("*", "*")} title="Italic">i</button>
+                            <button className="notes-toolbar-btn" onClick={() => insertMarkdown("- ")} title="List">☑</button>
+                            <span style={{ marginLeft: "auto", fontSize: "0.75rem", color: "#999" }}>Markdown</span>
                             <button
                                 className="notes-toolbar-btn"
                                 onClick={() => setIsNotesOpen(false)}
-                                title=\"Close\"
-                                style={{ marginLeft: \"8px\", fontSize: \"1rem\", lineHeight: 1 }}
+                                title="Close"
+                                style={{ marginLeft: "8px", fontSize: "1rem", lineHeight: 1 }}
                             >×</button>
                         </div>
                         <textarea
@@ -349,45 +344,43 @@ title = {
                             onChange={(e) => setNotesValue(e.target.value)}
                             onBlur={handleNotesBlur}
                             placeholder="Add notes..."
-                            style={{ minHeight: \"120px\", padding: \"4px\" }}
+                            style={{ minHeight: "120px", padding: "4px" }}
                         />
                     </div>
                 )}
                 {isSubTasksOpen && task.subTasks && task.subTasks.length > 0 && (
                     <ul className="subtask-list mt-1" onClick={(e) => e.stopPropagation()}>
                         {task.subTasks.map((subTask: Task) => (
-                            <li key={subTask.id} className={`subtask-item ${subTask.completed ? \"completed\" : \"\"}`}>
+                            <li key={subTask.id} className={`subtask-item ${subTask.completed ? "completed" : ""}`}>
                                 <button className="subtask-checkbox" onClick={() => toggleSubTask(subTask.id)}>
                                     {subTask.completed ? (
-                                        <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"20 6 9 17 4 12\" /></svg>
+                                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                                     ) : (
-                                        <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\" /></svg>
+                                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /></svg>
                                     )}
                                 </button>
                                 {onSetEditingTaskId && editingTaskId === subTask.id ? (
-                                    <form onSubmit={(e) => { e.preventDefault(); const input = e.currentTarget.querySelector(\"input\"); if (input) { updateSubTask(subTask.id, input.value); onSetEditingTaskId(null); } }} style={{ flex: 1 }}>
-                                        <input type=\"text\" defaultValue={subTask.title} autoFocus className=\"subtask-edit-input\" onBlur={(e) => { updateSubTask(subTask.id, e.target.value); onSetEditingTaskId(null); }} onKeyDown={(e) => { if (e.key === \"Escape\") onSetEditingTaskId(null); }} />
+                                    <form onSubmit={(e) => { e.preventDefault(); const input = e.currentTarget.querySelector("input"); if (input) { updateSubTask(subTask.id, input.value); onSetEditingTaskId(null); } }} style={{ flex: 1 }}>
+                                        <input type="text" defaultValue={subTask.title} autoFocus className="subtask-edit-input" onBlur={(e) => { updateSubTask(subTask.id, e.target.value); onSetEditingTaskId(null); }} onKeyDown={(e) => { if (e.key === "Escape") onSetEditingTaskId(null); }} />
                                     </form>
                                 ) : (
-    <span className={`subtask-title ${subTask.completed ?\"completed\" : \"\"}`} onClick={() => onSetEditingTaskId && onSetEditingTaskId(subTask.id)}>{subTask.title}</span>
+                                    <span className={`subtask-title ${subTask.completed ? "completed" : ""}`} onClick={() => onSetEditingTaskId && onSetEditingTaskId(subTask.id)}>{subTask.title}</span>
                                 )}
-<button className=\"subtask-delete-btn\" onClick={() => deleteSubTask(subTask.id)} title=\"Remove\"><svg viewBox=\"0 0 24 24\" width=\"10\" height=\"10\" stroke=\"currentColor\" strokeWidth=\"2.5\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" /><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" /></svg></button>
-                            </li >
+                                <button className="subtask-delete-btn" onClick={() => deleteSubTask(subTask.id)} title="Remove"><svg viewBox="0 0 24 24" width="10" height="10" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg></button>
+                            </li>
                         ))}
-                    </ul >
+                    </ul>
                 )}
-{
-    isSubTaskInputOpen && (
+                {isSubTaskInputOpen && (
                     <div className="subtask-add-row mt-1" onClick={(e) => e.stopPropagation()}>
-                        <form onSubmit={(e) => { e.preventDefault(); if (newSubTaskTitle.trim()) { addSubTask(task.id, newSubTaskTitle.trim()); setNewSubTaskTitle(\"\"); } }} style={{ display: \"flex\", alignItems: \"center\", gap: \"0.25rem\", flex: 1 }}>
-                            <svg viewBox=\"0 0 24 24\" width=\"12\" height=\"12\" stroke=\"var(--weekly-text-muted, #999)\" strokeWidth=\"2\" fill=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\" style={{ flexShrink: 0 }}><circle cx=\"12\" cy=\"12\" r=\"10\" /></svg>
-                            <input ref={subTaskInputRef} type=\"text\" value={newSubTaskTitle} onChange={(e) => setNewSubTaskTitle(e.target.value)} onBlur={() => { if (!newSubTaskTitle.trim()) setIsSubTaskInputOpen(false); }} onKeyDown={(e) => { if (e.key === \"Escape\") { setNewSubTaskTitle(\"\"); setIsSubTaskInputOpen(false); } }} placeholder=\"Add sub-task...\" className=\"subtask-add-input\" autoFocus />
-                        </form >
-                    </div >
-                )
-}
-            </div >
-    <div className="resize-handle" onMouseDown={onResizeStart} />
-        </div >
+                        <form onSubmit={(e) => { e.preventDefault(); if (newSubTaskTitle.trim()) { addSubTask(task.id, newSubTaskTitle.trim()); setNewSubTaskTitle(""); } }} style={{ display: "flex", alignItems: "center", gap: "0.25rem", flex: 1 }}>
+                            <svg viewBox="0 0 24 24" width="12" height="12" stroke="var(--weekly-text-muted, #999)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><circle cx="12" cy="12" r="10" /></svg>
+                            <input ref={subTaskInputRef} type="text" value={newSubTaskTitle} onChange={(e) => setNewSubTaskTitle(e.target.value)} onBlur={() => { if (!newSubTaskTitle.trim()) setIsSubTaskInputOpen(false); }} onKeyDown={(e) => { if (e.key === "Escape") { setNewSubTaskTitle(""); setIsSubTaskInputOpen(false); } }} placeholder="Add sub-task..." className="subtask-add-input" autoFocus />
+                        </form>
+                    </div>
+                )}
+            </div>
+            <div className="resize-handle" onMouseDown={onResizeStart} />
+        </div>
     );
 }