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

fix: replace Circle with project icon in task hover menu

Browse Source 
The project assign button and dropdown list now show the project's
actual icon (or faFolder as fallback) instead of a plain circle,
matching the icon rendering used in the task row stacked column.

v1.111.1
This commit is contained in:
mARTin-B78 2026-05-11 15:08:16 +02:00
parent b1e549dbfa
commit cb17c91ca6
2 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

40
src/components/GridTaskBlock.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useRef, useEffect, Suspense } from "react"; import React, { useState, useRef, useEffect, Suspense } from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
const RichTextEditor = dynamic(() => import("./RichTextEditor"), { ssr: false }); const RichTextEditor = dynamic(() => import("./RichTextEditor"), { ssr: false });
import { Repeat, Circle, X, ChevronDown, Link } from "lucide-react"; import { Repeat, X, ChevronDown, Link } from "lucide-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGoogle, faMicrosoft, faApple } from "@fortawesome/free-brands-svg-icons"; import { faGoogle, faMicrosoft, faApple } from "@fortawesome/free-brands-svg-icons";
import { faServer, faFolder, IconDefinition } from "@fortawesome/free-solid-svg-icons"; import { faServer, faFolder, IconDefinition } from "@fortawesome/free-solid-svg-icons";
@ -618,13 +618,21 @@ export function GridTaskBlock({
aria-expanded={showProjectPicker} aria-expanded={showProjectPicker}
aria-haspopup="listbox" aria-haspopup="listbox"
> >
<Circle {task.project ? (() => {
size={12} const rawIcon = task.project.icon || "";
aria-hidden="true" const normalised = rawIcon.startsWith("fa") && rawIcon.length > 2 && rawIcon[2] === rawIcon[2].toUpperCase()
fill={task.project?.color || "none"} ? rawIcon.slice(2, 3).toLowerCase() + rawIcon.slice(3)
stroke={task.project?.color || "currentColor"} : rawIcon;
strokeWidth={2} const found = allIcons.find(i => i.name === normalised || i.name === rawIcon);
/> if (found) {
return found.type === "fa"
? <FontAwesomeIcon icon={found.icon as IconDefinition} aria-hidden="true" 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", color: task.project.color || "#888" }}>{task.project.icon}</span>
: <FontAwesomeIcon icon={faFolder} aria-hidden="true" style={{ fontSize: "11px", color: task.project.color || "#888" }} />;
})() : <FontAwesomeIcon icon={faFolder} aria-hidden="true" style={{ fontSize: "11px" }} />}
</button> </button>
{showProjectPicker && ( {showProjectPicker && (
<div className="absolute z-[100] top-full left-1/2 -translate-x-1/2 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-[140px]" style={{ whiteSpace: "nowrap" }}> <div className="absolute z-[100] top-full left-1/2 -translate-x-1/2 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-[140px]" style={{ whiteSpace: "nowrap" }}>
@ -650,7 +658,21 @@ export function GridTaskBlock({
setShowProjectPicker(false); setShowProjectPicker(false);
}} }}
> >
<Circle size={10} fill={p.color || "#999"} stroke={p.color || "#999"} strokeWidth={0} /> {(() => {
const rawIcon = p.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: "10px", color: p.color || "#888" }} />
: <MdiIcon path={found.icon as string} size={0.45} color={p.color || "#888"} style={{ display: "inline-block" }} />;
}
return p.icon
? <span style={{ fontSize: "10px", color: p.color || "#888" }}>{p.icon}</span>
: <FontAwesomeIcon icon={faFolder} style={{ fontSize: "10px", color: p.color || "#888" }} />;
})()}
{p.name} {p.name}
</button> </button>
))} ))}