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

feat: show priority & delegation icons in all views

Browse Source 
A small icon appears before each task title whenever priority has been set
in the Priority View. Works in simple, calendar, list, someday, and kanban.

Icon + color mapping
  ⚡ Zap         red  #ef4444  Sofort erledigen  (urgent + important / ABCDE A)
  🕐 CalendarClock blue #3b82f6  Planen           (important, not urgent / B)
  ↗ CornerUpRight orange #f97316 Delegieren       (urgent, not important / D)
  📦 Archive     gray #9ca3af  Eliminieren       (neither / E)
  🕐 Clock       yellow #eab308 ABCDE C only

Delegation badge
  🤖 Bot   purple  task.delegatedTo === "AI"
  👤 User  purple  task.delegatedTo = person name

Hover tooltip shows the full label (e.g. "Sofort erledigen", "Planen").
Icons are 11–12 px so they sit inline without disrupting the task row.

v1.88.2
This commit is contained in:
mARTin 2026-04-06 16:03:16 +02:00
parent a3b0849525
commit d8d1003e78
2 changed files with 65 additions and 1 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",
"version": "1.88.1",
"version": "1.88.2",
"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": {

64
src/components/WeeklyView.tsx
View File

@ -84,6 +84,10 @@ import {
Pencil,
FileText,
ArrowLeftRight,
CalendarClock,
CornerUpRight,
Archive,
Bot,
} from "lucide-react";
const stripHtml = (html: string) => html.replace(/<[^>]*>/g, '').trim();
@ -6240,6 +6244,24 @@ export default function WeeklyView() {
className="kanban-card-checkbox"
/>
)}
{(() => {
const pm = getPriorityMeta(task);
return pm ? (
<span title={pm.label} style={{ flexShrink: 0, display: "flex", alignItems: "center", marginRight: "4px" }}>
<pm.Icon size={12} color={pm.color} />
</span>
) : null;
})()}
{task.delegatedTo && (
<span
title={task.delegatedTo === "AI" ? `AI: ${task.delegationNote || ""}` : task.delegatedTo}
style={{ flexShrink: 0, display: "flex", alignItems: "center", marginRight: "4px" }}
>
{task.delegatedTo === "AI"
? <Bot size={12} color="#8b5cf6" />
: <User size={12} color="#8b5cf6" />}
</span>
)}
<span
className="kanban-card-title"
contentEditable
@ -9396,6 +9418,30 @@ interface TaskItemProps {
kanbanStages?: KanbanStage[];
}
// ── Priority indicator helper ─────────────────────────────────────
// Returns icon + color for a task based on Eisenhower quadrant (primary)
// or ABCDE grade (fallback). Returns null when no priority is set.
function getPriorityMeta(task: Task): { Icon: React.ElementType; color: string; label: string } | null {
if (task.urgency != null && task.importance != null) {
if (task.urgency && task.importance) return { Icon: Zap, color: "#ef4444", label: "Sofort erledigen" };
if (!task.urgency && task.importance) return { Icon: CalendarClock, color: "#3b82f6", label: "Planen" };
if (task.urgency && !task.importance) return { Icon: CornerUpRight, color: "#f97316", label: "Delegieren" };
return { Icon: Archive, color: "#9ca3af", label: "Eliminieren" };
}
if (task.priority) {
const map: Record<string, { Icon: React.ElementType; color: string }> = {
A: { Icon: Zap, color: "#ef4444" },
B: { Icon: CalendarClock, color: "#3b82f6" },
C: { Icon: Clock, color: "#eab308" },
D: { Icon: CornerUpRight, color: "#f97316" },
E: { Icon: Archive, color: "#9ca3af" },
};
const m = map[task.priority];
return m ? { ...m, label: task.priority } : null;
}
return null;
}
function TaskItem({
task,
isEditing,
@ -9683,6 +9729,24 @@ function TaskItem({
flex: 1,
}}
>
{(() => {
const pm = getPriorityMeta(task);
return pm ? (
<span title={pm.label} style={{ marginRight: "3px", verticalAlign: "middle", display: "inline-flex", alignItems: "center" }}>
<pm.Icon size={11} color={pm.color} />
</span>
) : null;
})()}
{task.delegatedTo && (
<span
title={task.delegatedTo === "AI" ? `AI: ${task.delegationNote || ""}` : task.delegatedTo}
style={{ marginRight: "3px", verticalAlign: "middle", display: "inline-flex", alignItems: "center" }}
>
{task.delegatedTo === "AI"
? <Bot size={11} color="#8b5cf6" />
: <User size={11} color="#8b5cf6" />}
</span>
)}
{showProjectIcons && task.project && (
<span style={{ marginRight: "4px", verticalAlign: "middle" }}>
<ProjectIcon icon={task.project.icon} size={13} color={task.project.color || "#888"} />