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

@@ -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

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;
 

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,12 +1305,20 @@ export const TasksView: React.FC<TasksViewProps> = ({
                 </button>
               )}
 
-              {/* Kanban status selector pill (Desktop only - on mobile done via TaskDetailModal) */}
+              {/* 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={task.kanbanStatus || (isCompleted ? 'done' : 'todo')}
+                        value={statusId}
                         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"
+                        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) => (
@@ -1319,6 +1327,16 @@ export const TasksView: React.FC<TasksViewProps> = ({
                           </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>