feat: add 'Project Icons' toggle to show icons on tasks

New per-view setting to display project icons next to task titles in
simple, calendar, and list views. Toggle via Quick Settings sidebar,
similar to the existing 'Checkboxes' toggle.

v1.59.0
This commit is contained in:
mARTin 2026-03-23 12:31:19 +01:00
parent 3061ac09d0
commit d7eeafb08f
2 changed files with 20 additions and 2 deletions

View File

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

View File

@ -1983,6 +1983,7 @@ export default function WeeklyView() {
weatherEnabled?: boolean;
weatherDisplay?: WeatherDisplayKey[];
showTaskCheckboxes?: boolean;
showProjectIcons?: boolean;
showSomeday?: boolean;
showAllDayEvents?: boolean;
allDayPosition?: "above" | "below";
@ -1991,7 +1992,7 @@ export default function WeeklyView() {
startHour?: number;
endHour?: number;
};
const PER_VIEW_KEYS = ["hourLabelFormat", "showSubHourSlots", "weatherEnabled", "weatherDisplay", "showTaskCheckboxes", "showSomeday", "showAllDayEvents", "allDayPosition", "showCompletedTasks", "cellDuration", "startHour", "endHour"] as const;
const PER_VIEW_KEYS = ["hourLabelFormat", "showSubHourSlots", "weatherEnabled", "weatherDisplay", "showTaskCheckboxes", "showProjectIcons", "showSomeday", "showAllDayEvents", "allDayPosition", "showCompletedTasks", "cellDuration", "startHour", "endHour"] as const;
const [viewSettings, setViewSettings] = useState<Record<string, PerViewOverrides>>({});
const viewSettingsRef = useRef<Record<string, PerViewOverrides>>({});
viewSettingsRef.current = viewSettings;
@ -2062,6 +2063,7 @@ export default function WeeklyView() {
const effectiveWeatherEnabled = getEffective("weatherEnabled", profile.weatherEnabled);
const effectiveWeatherDisplay = (getEffective("weatherDisplay", WEATHER_DISPLAY_DEFAULTS) || WEATHER_DISPLAY_DEFAULTS) as WeatherDisplayKey[];
const effectiveShowTaskCheckboxes = getEffective("showTaskCheckboxes", profile.showTaskCheckboxes);
const effectiveShowProjectIcons = getEffective("showProjectIcons", profile.showProjectIcons);
const effectiveShowSomeday = getEffective("showSomeday", showSomeday);
const effectiveShowAllDay = getEffective("showAllDayEvents", showAllDay);
const effectiveAllDayPosition = getEffective("allDayPosition", allDayPosition) || "above";
@ -5859,6 +5861,12 @@ export default function WeeklyView() {
{profile.showTaskCheckboxes ? <Eye size={16} /> : <EyeOff size={16} />}
</button>
</div>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<span style={{ fontSize: "0.75rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Projekt-Icons" : "Project Icons"}</span>
<button onClick={() => { const v = !profile.showProjectIcons; setProfile({ ...profile, showProjectIcons: v }); saveSetting("showProjectIcons", v); }} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px", color: darkMode ? "#9ca3af" : "#6b7280" }}>
{profile.showProjectIcons ? <Eye size={16} /> : <EyeOff size={16} />}
</button>
</div>
{/* Start on */}
<div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
@ -7613,6 +7621,7 @@ export default function WeeklyView() {
editingTaskId={editingTaskId}
onSetEditingTaskId={setEditingTaskId}
showTaskCheckboxes={effectiveShowTaskCheckboxes}
showProjectIcons={effectiveShowProjectIcons}
projects={projects}
onProjectAssign={assignProject}
kanbanStages={kanbanStages}
@ -8312,6 +8321,7 @@ export default function WeeklyView() {
editingTaskId={editingTaskId}
onSetEditingTaskId={setEditingTaskId}
showTaskCheckboxes={effectiveShowTaskCheckboxes}
showProjectIcons={effectiveShowProjectIcons}
projects={projects}
onProjectAssign={assignProject}
kanbanStages={kanbanStages}
@ -8383,6 +8393,7 @@ export default function WeeklyView() {
editingTaskId={editingTaskId}
onSetEditingTaskId={setEditingTaskId}
showTaskCheckboxes={effectiveShowTaskCheckboxes}
showProjectIcons={effectiveShowProjectIcons}
projects={projects}
onProjectAssign={assignProject}
kanbanStages={kanbanStages}
@ -9450,6 +9461,7 @@ interface TaskItemProps {
onSetEditingTaskId?: (id: string | null) => void;
isSubTask?: boolean;
showTaskCheckboxes?: boolean;
showProjectIcons?: boolean;
projects?: { id: string; name: string; icon?: string | null; color?: string | null }[];
onProjectAssign?: (taskId: string, projectId: string | null) => void;
kanbanStages?: KanbanStage[];
@ -9477,6 +9489,7 @@ function TaskItem({
onSetEditingTaskId,
isSubTask = false,
showTaskCheckboxes = false,
showProjectIcons = false,
projects = [],
onProjectAssign,
kanbanStages = [],
@ -9756,6 +9769,11 @@ function TaskItem({
}}
/>
)}
{showProjectIcons && task.project && (
<span style={{ flexShrink: 0, position: "relative", top: "2px" }}>
<ProjectIcon icon={task.project.icon} size={13} color={task.project.color || "#888"} />
</span>
)}
<span
style={{
whiteSpace: "pre-wrap",