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,20 +1305,38 @@ 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) */}
-              <select
+              {(() => {
-                value={task.kanbanStatus || (isCompleted ? 'done' : 'todo')}
+                const statusId = task.kanbanStatus || (isCompleted ? 'done' : 'todo');
-                disabled={readOnly}
+                const statusCol = activeColumns.find((c) => c.id === statusId);
-                onChange={(e) => handleSetKanbanStatus(task, e.target.value)}
+                const dot = <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${columnDotClass(statusCol)}`} aria-hidden="true" />;
-                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"
+                return (
-                title="Status / Zustand ändern"
+                  <>
-              >
+                    <span className="hidden sm:inline-flex items-center gap-1">
-                {activeColumns.map((c) => (
+                      {dot}
-                  <option key={c.id} value={c.id}>
+                      <select
-                    {c.name}
+                        value={statusId}
-                  </option>
+                        disabled={readOnly}
-                ))}
+                        onChange={(e) => handleSetKanbanStatus(task, e.target.value)}
-              </select>
+                        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
+                      <span className={`w-2 h-2 rounded-full ${columnDotClass(col)}`} />
-                        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>{col.name}</span>
                     </span>
                     <span className="badge-neutral font-mono">{colTasks.length}</span>