From b1e549dbfa0ba7076ff693913b582024bb824537 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 11 May 2026 15:07:01 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20weekday=20task=20layout=20matches=20Any?=
 =?UTF-8?q?Day=20=E2=80=94=20stacked=20icon=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Priority icon (top) + project icon (bottom) now rendered in a fixed
leading column before the checkbox, matching the AnyDay area layout.
Provider/sync icon always inline at end (removed absolute fallback).

v1.111.0
---
 package.json                     |  2 +-
 src/components/GridTaskBlock.tsx | 73 ++++++++++++--------------------
 2 files changed, 28 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 94faffb..1e15598 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.110.7",
+  "version": "1.111.0",
   "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/GridTaskBlock.tsx b/src/components/GridTaskBlock.tsx
index 451fbc1..44d89f8 100644
--- a/src/components/GridTaskBlock.tsx
+++ b/src/components/GridTaskBlock.tsx
@@ -341,6 +341,31 @@ export function GridTaskBlock({
                             setEditingTaskId(task.id);
                         }}
                     >
+                        {(() => {
+                            const pb = showPriorityIcons ? getPriorityBadge(task, priorityStyle, 11) : null;
+                            const hasProject = !!(showProjectIcons && task.project);
+                            if (!pb && !hasProject) return null;
+                            return (
+                                <span style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", flexShrink: 0, gap: "1px", paddingTop: "2px", opacity: task.completed && showTaskCheckboxes ? 0.5 : 1 }}>
+                                    {pb && <span title={pb.label} style={{ display: "inline-flex", alignItems: "center" }}>{pb.node}</span>}
+                                    {hasProject && (() => {
+                                        const rawIcon = task.project!.icon || "";
+                                        const normalised = rawIcon.startsWith("fa") && rawIcon.length > 2 && rawIcon[2] === rawIcon[2].toUpperCase()
+                                            ? rawIcon.slice(2, 3).toLowerCase() + rawIcon.slice(3)
+                                            : rawIcon;
+                                        const found = allIcons.find(i => i.name === normalised || i.name === rawIcon);
+                                        if (found) {
+                                            return found.type === "fa"
+                                                ? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />
+                                                : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ display: "inline-block" }} />;
+                                        }
+                                        return task.project!.icon
+                                            ? <span style={{ fontSize: "11px" }}>{task.project!.icon}</span>
+                                            : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", color: task.project!.color || "#888" }} />;
+                                    })()}
+                                </span>
+                            );
+                        })()}
                         {showTaskCheckboxes && (
                             <input
                                 type="checkbox"
@@ -353,30 +378,7 @@ export function GridTaskBlock({
                             />
                         )}
                         <span style={task.completed && showTaskCheckboxes ? { opacity: 0.5, flex: 1, display: "flex", alignItems: "center", flexWrap: "wrap", rowGap: "2px" } : { flex: 1, display: "flex", alignItems: "center", flexWrap: "wrap", rowGap: "2px" }}>
-                            {showPriorityIcons && (() => {
-                                const pb = getPriorityBadge(task, priorityStyle, 11);
-                                return pb ? (
-                                    <span title={pb.label} style={{ marginRight: "4px", display: "inline-flex", alignItems: "center", flexShrink: 0 }}>
-                                        {pb.node}
-                                    </span>
-                                ) : null;
-                            })()}
-                            <span style={{ marginRight: "4px" }}>{showProjectIcons && task.project && (() => {
-                                const rawIcon = task.project!.icon || "";
-                                const normalised = rawIcon.startsWith("fa") && rawIcon.length > 2 && rawIcon[2] === rawIcon[2].toUpperCase()
-                                    ? rawIcon.slice(2, 3).toLowerCase() + rawIcon.slice(3)
-                                    : rawIcon;
-                                const found = allIcons.find(i => i.name === normalised || i.name === rawIcon);
-                                const iconStyle = { marginRight: "4px", verticalAlign: "middle" } as const;
-                                if (found) {
-                                    return found.type === "fa"
-                                        ? <FontAwesomeIcon icon={found.icon as IconDefinition} style={{ fontSize: "11px", ...iconStyle, color: task.project!.color || "#888" }} />
-                                        : <MdiIcon path={found.icon as string} size={0.5} color={task.project!.color || "#888"} style={{ ...iconStyle, display: "inline-block" }} />;
-                                }
-                                return task.project!.icon
-                                    ? <span style={{ fontSize: "11px", ...iconStyle }}>{task.project!.icon}</span>
-                                    : <FontAwesomeIcon icon={faFolder} style={{ fontSize: "11px", ...iconStyle, color: task.project!.color || "#888" }} />;
-                            })()}{task.title}</span>
+                            <span style={{ marginRight: "4px" }}>{task.title}</span>
                             {/* Subtask indicator */}
                             {task.subTasks && task.subTasks.length > 0 && (() => {
                                 const completed = task.subTasks.filter(s => s.completed).length;
@@ -507,7 +509,7 @@ export function GridTaskBlock({
                                     </svg>
                                 </span>
                             )}
-                            {weatherEnabled && (() => {
+                            {(() => {
                                 const provider = task.externalProvider
                                     || (task.externalId?.startsWith("synology::") ? "synology" : null);
                                 if (!provider) return null;
@@ -533,27 +535,6 @@ export function GridTaskBlock({
                     </span>
                 )}
             </div>
-            {!weatherEnabled && (() => {
-                const provider = task.externalProvider
-                    || (task.externalId?.startsWith("synology::") ? "synology" : null);
-                if (!provider) return null;
-                const iconMap: Record<string, { icon: any; color: string; label: string }> = {
-                    google: { icon: faGoogle, color: "#4285F4", label: "Google" },
-                    outlook: { icon: faMicrosoft, color: "#0078D4", label: "Microsoft" },
-                    apple: { icon: faApple, color: "#555", label: "Apple" },
-                    synology: { icon: faServer, color: "#007AFF", label: "Synology" },
-                };
-                const info = iconMap[provider];
-                if (!info) return null;
-                return (
-                    <span
-                        aria-label={`Synced with ${info.label}`}
-                        style={{ position: "absolute", top: "3px", right: "4px", display: "inline-flex", alignItems: "center", opacity: 0.45, zIndex: 2 }}
-                    >
-                        <FontAwesomeIcon icon={info.icon} aria-hidden="true" style={{ width: 10, height: 10, color: info.color }} />
-                    </span>
-                );
-            })()}
 
             <div
                 className="task-actions"