From 0ca715ba6455e62d9605ce89843945582b4f83f7 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 1 Nov 2026 10:00:30 +0100
Subject: [PATCH] feat(tasks): status dot in the column colour in the list
 view, also on phones

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  3 +
 .../features/triage/ManageColumnsModal.tsx    | 12 ++++
 frontend/src/features/triage/TasksView.tsx    | 60 +++++++++++--------
 3 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16aa477..aa83080 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+### Added
+- Aufgaben in der Listenansicht zeigen ihren Status mit einem farbigen Punkt in der Farbe der Kanban-Spalte: am PC vor der Status-Auswahl, am Handy als Punkt mit Spaltenname (reine Anzeige, ändern weiter in der Detailansicht).
+
 ## [0.29.0] - 2026-11-01
 
 ### Added
diff --git a/frontend/src/features/triage/ManageColumnsModal.tsx b/frontend/src/features/triage/ManageColumnsModal.tsx
index 367ff0d..b3035c6 100644
--- a/frontend/src/features/triage/ManageColumnsModal.tsx
+++ b/frontend/src/features/triage/ManageColumnsModal.tsx
@@ -28,6 +28,18 @@ export const DEFAULT_KANBAN_COLUMNS: KanbanColumn[] = [
 ];
 
 // Wrapper and content split so the hooks always run in the same number (see TaskDetailModal)
+// Dot colour of a status column (Kanban header, list view); fixed by column role for now
+export const columnDotClass = (col: KanbanColumn | undefined): string =>
+  !col
+    ? 'bg-faint'
+    : col.isDone
+    ? 'bg-status-ok'
+    : col.id === 'in_progress'
+    ? 'bg-accent'
+    : col.id === 'waiting'
+    ? 'bg-status-warn'
+    : 'bg-faint';
+
 export const ManageColumnsModal: React.FC<ManageColumnsModalProps> = (props) =>
   props.isOpen ? <ManageColumnsModalContent {...props} /> : null;
 
diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx
index 0508047..5d8f1bf 100644
--- a/frontend/src/features/triage/TasksView.tsx
+++ b/frontend/src/features/triage/TasksView.tsx
@@ -36,7 +36,7 @@ import { api, triggerHaptic } from '../../lib/api';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { TaskDetailModal } from './TaskDetailModal';
 import { AgentBadge } from '../../components/AgentBadge';
-import { ManageColumnsModal, DEFAULT_KANBAN_COLUMNS } from './ManageColumnsModal';
+import { ManageColumnsModal, DEFAULT_KANBAN_COLUMNS, columnDotClass } from './ManageColumnsModal';
 import { AvatarStack, AvatarPerson } from '../../components/AvatarStack';
 import { CountBadge } from '../../components/CountBadge';
 import { FormSheet } from '../../components/FormSheet';
@@ -1305,20 +1305,38 @@ export const TasksView: React.FC<TasksViewProps> = ({
                 </button>
               )}
 
-              {/* Kanban status selector pill (Desktop only - on mobile done via TaskDetailModal) */}
-              <select
-                value={task.kanbanStatus || (isCompleted ? 'done' : 'todo')}
-                disabled={readOnly}
-                onChange={(e) => handleSetKanbanStatus(task, e.target.value)}
-                className="hidden sm:inline-block h-5 px-1.5 text-[10px] rounded-btn border border-border bg-panel text-muted hover:text-main cursor-pointer"
-                title="Status / Zustand ändern"
-              >
-                {activeColumns.map((c) => (
-                  <option key={c.id} value={c.id}>
-                    {c.name}
-                  </option>
-                ))}
-              </select>
+              {/* Status: dot in the column colour; a selector on desktop, plain text on phones (changed in TaskDetailModal) */}
+              {(() => {
+                const statusId = task.kanbanStatus || (isCompleted ? 'done' : 'todo');
+                const statusCol = activeColumns.find((c) => c.id === statusId);
+                const dot = <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${columnDotClass(statusCol)}`} aria-hidden="true" />;
+                return (
+                  <>
+                    <span className="hidden sm:inline-flex items-center gap-1">
+                      {dot}
+                      <select
+                        value={statusId}
+                        disabled={readOnly}
+                        onChange={(e) => handleSetKanbanStatus(task, e.target.value)}
+                        className="h-5 px-1.5 text-[10px] rounded-btn border border-border bg-panel text-muted hover:text-main cursor-pointer"
+                        title="Status / Zustand ändern"
+                      >
+                        {activeColumns.map((c) => (
+                          <option key={c.id} value={c.id}>
+                            {c.name}
+                          </option>
+                        ))}
+                      </select>
+                    </span>
+                    {statusCol && (
+                      <span className="sm:hidden inline-flex items-center gap-1 text-[10px] text-muted" title="Status">
+                        {dot}
+                        {statusCol.name}
+                      </span>
+                    )}
+                  </>
+                );
+              })()}
 
               {/* Priority badge: click to cycle or clear */}
               {task.priority === 'urgent' && (
@@ -2292,17 +2310,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
                   {/* Column Header */}
                   <div className="px-3 py-2 bg-panel border-b border-border flex items-center justify-between">
                     <span className="text-xs font-semibold text-main flex items-center gap-1.5">
-                      <span
-                        className={`w-2 h-2 rounded-full ${
-                          col.isDone
-                            ? 'bg-status-ok'
-                            : col.id === 'in_progress'
-                            ? 'bg-accent'
-                            : col.id === 'waiting'
-                            ? 'bg-status-warn'
-                            : 'bg-faint'
-                        }`}
-                      />
+                      <span className={`w-2 h-2 rounded-full ${columnDotClass(col)}`} />
                       <span>{col.name}</span>
                     </span>
                     <span className="badge-neutral font-mono">{colTasks.length}</span>