feat(tasks): add inline title editing and status cycling in task list

Click task title to edit inline (Enter/blur saves via PUT API).
Click status dot to cycle pending -> in_progress -> done.
Optimistic UI updates with rollback on error.
Detail page still accessible by clicking other card areas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/tasks/app/tasks/page.tsx

@@ -315,6 +315,7 @@ export default function TasksPage() {
                   key={task.id}
                   task={task}
                   onComplete={handleCompleteTask}
+                  onUpdate={loadData}
                 />
               ))}
             </div>

apps/tasks/components/TaskCard.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
-import { Task } from "@/lib/api";
+import { Task, updateTask } from "@/lib/api";
+import { useAuth } from "@/lib/auth";
 import { useTranslation } from "@/lib/i18n";
 import Link from "next/link";
 import { useSwipeable } from "react-swipeable";
@@ -10,8 +11,11 @@ interface TaskCardProps {
   task: Task;
   onComplete?: (taskId: string) => void;
   onAssign?: (taskId: string) => void;
+  onUpdate?: () => void;
 }
 
+const STATUS_CYCLE: Task["status"][] = ["pending", "in_progress", "done"];
+
 function statusColor(status: string): string {
   switch (status) {
     case "todo":
@@ -50,18 +54,42 @@ function formatDate(dateStr: string): string {
   return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
 
-export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps) {
+export default function TaskCard({ task, onComplete, onAssign, onUpdate }: TaskCardProps) {
   const { t } = useTranslation();
+  const { token } = useAuth();
   const taskDone = task.status === "done";
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [swiped, setSwiped] = useState(false);
   const cardRef = useRef<HTMLDivElement>(null);
 
+  // Inline editing state
+  const [editing, setEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(task.title);
+  const [saving, setSaving] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Status cycling state
+  const [currentStatus, setCurrentStatus] = useState(task.status);
+
+  // Sync with prop changes
+  useEffect(() => {
+    setEditTitle(task.title);
+    setCurrentStatus(task.status);
+  }, [task.title, task.status]);
+
+  // Focus input when entering edit mode
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.setSelectionRange(0, inputRef.current.value.length);
+    }
+  }, [editing]);
+
   const SWIPE_THRESHOLD = 120;
   const assignees = task.assigned_to || [];
   const visibleAssignees = assignees.slice(0, 3);
   const groupColor = task.group_color;
-  const sColor = statusColor(task.status);
+  const sColor = statusColor(currentStatus);
 
   const swipeHandlers = useSwipeable({
     onSwiping: (e) => {
@@ -88,6 +116,67 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
 
   const showCompleteHint = swipeOffset > 40;
 
+  // Save title edit
+  const saveTitle = useCallback(async () => {
+    const trimmed = editTitle.trim();
+    if (!trimmed || trimmed === task.title || !token) {
+      setEditTitle(task.title);
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    try {
+      await updateTask(token, task.id, { title: trimmed });
+      setEditing(false);
+      if (onUpdate) onUpdate();
+    } catch (err) {
+      console.error("Failed to update title:", err);
+      setEditTitle(task.title);
+      setEditing(false);
+    } finally {
+      setSaving(false);
+    }
+  }, [editTitle, task.title, task.id, token, onUpdate]);
+
+  // Cycle status on dot click
+  const cycleStatus = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!token) return;
+
+    const idx = STATUS_CYCLE.indexOf(currentStatus);
+    const nextStatus = STATUS_CYCLE[(idx + 1) % STATUS_CYCLE.length];
+
+    // Optimistic update
+    setCurrentStatus(nextStatus);
+    try {
+      await updateTask(token, task.id, { status: nextStatus });
+      if (onUpdate) onUpdate();
+    } catch (err) {
+      console.error("Failed to cycle status:", err);
+      setCurrentStatus(task.status); // revert
+    }
+  }, [token, task.id, task.status, currentStatus, onUpdate]);
+
+  // Handle title click -> enter edit mode
+  const handleTitleClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setEditing(true);
+  }, []);
+
+  // Handle keyboard in edit input
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      saveTitle();
+    }
+    if (e.key === "Escape") {
+      setEditTitle(task.title);
+      setEditing(false);
+    }
+  }, [saveTitle, task.title]);
+
   return (
     <div className="relative overflow-hidden" ref={cardRef} style={{ margin: "0 0 5px" }}>
       {/* Swipe background */}
@@ -117,7 +206,8 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
           transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
         }}
       >
-        <Link href={`/tasks/${task.id}`} className="block">
+        {/* When editing, don't wrap in Link - just show the card with input */}
+        {editing ? (
           <div
             style={{
               padding: "10px 14px",
@@ -125,42 +215,39 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
               background: "#13131A",
               border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
               borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
-              cursor: "pointer",
               display: "flex",
               alignItems: "center",
               gap: 10,
-              opacity: swiped ? 0 : 1,
-              transition: swiped ? "opacity 0.3s" : undefined,
             }}
           >
-            {/* LEFT: title + optional due date */}
+            {/* LEFT: editable input */}
             <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{
+              <input
-                fontSize: 14,
+                ref={inputRef}
-                fontWeight: 500,
+                type="text"
-                overflow: "hidden",
+                value={editTitle}
-                textOverflow: "ellipsis",
+                onChange={(e) => setEditTitle(e.target.value)}
-                whiteSpace: "nowrap",
+                onBlur={saveTitle}
-                color: "#E8E8F0",
+                onKeyDown={handleKeyDown}
-                textDecoration: taskDone ? "line-through" : "none",
+                disabled={saving}
-                opacity: taskDone ? 0.5 : 1,
+                style={{
-              }}>
+                  width: "100%",
-                {task.title}
+                  fontSize: 14,
-              </div>
+                  fontWeight: 500,
-              {task.due_at && isDueSoon(task.due_at) && (
+                  color: "#E8E8F0",
-                <div style={{
+                  background: "#1A1A28",
-                  fontSize: 11,
+                  border: "1px solid #3B82F6",
-                  color: isPast(task.due_at) ? "#EF4444" : "#F59E0B",
+                  borderRadius: 6,
-                  marginTop: 2,
+                  padding: "4px 8px",
-                }}>
+                  outline: "none",
-                  {formatDate(task.due_at)}
+                  boxShadow: "0 0 0 2px rgba(59,130,246,0.3)",
-                </div>
+                  opacity: saving ? 0.6 : 1,
-              )}
+                }}
+              />
             </div>
 
-            {/* RIGHT: avatars + big status dot */}
+            {/* RIGHT: avatars + status dot (still interactive) */}
             <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
-              {/* Avatars */}
               <div style={{ display: "flex", alignItems: "center" }}>
                 {visibleAssignees.map((userId, i) => (
                   <div
@@ -182,15 +269,13 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
                     {userId.slice(0, 2).toUpperCase()}
                   </div>
                 ))}
-
-                {/* + add user button */}
                 <div
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (onAssign) onAssign(task.id);
                   }}
-                  title="Přidat uživatele"
+                  title="Pridat uzivatele"
                   style={{
                     width: 26, height: 26,
                     borderRadius: "50%",
@@ -208,20 +293,164 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
                 </div>
               </div>
 
-              {/* Big colored status dot */}
+              {/* Status dot - clickable to cycle */}
               <div
-                title={t(`tasks.status.${task.status}`)}
+                onClick={cycleStatus}
+                title={t(`tasks.status.${currentStatus}`) + " (click to change)"}
                 style={{
                   width: 14, height: 14,
                   borderRadius: "50%",
                   background: sColor,
                   flexShrink: 0,
                   boxShadow: `0 0 6px ${sColor}80`,
+                  cursor: "pointer",
+                  transition: "transform 0.15s ease, box-shadow 0.15s ease",
+                }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLElement).style.transform = "scale(1.3)";
+                  (e.currentTarget as HTMLElement).style.boxShadow = `0 0 10px ${sColor}`;
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLElement).style.transform = "scale(1)";
+                  (e.currentTarget as HTMLElement).style.boxShadow = `0 0 6px ${sColor}80`;
                 }}
               />
             </div>
           </div>
-        </Link>
+        ) : (
+          /* Normal mode: Link wrapping for navigation on non-interactive areas */
+          <Link href={`/tasks/${task.id}`} className="block">
+            <div
+              style={{
+                padding: "10px 14px",
+                borderRadius: 10,
+                background: "#13131A",
+                border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
+                borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                opacity: swiped ? 0 : 1,
+                transition: swiped ? "opacity 0.3s" : undefined,
+              }}
+            >
+              {/* LEFT: title (clickable for inline edit) + optional due date */}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div
+                  onClick={handleTitleClick}
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 500,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    color: "#E8E8F0",
+                    textDecoration: taskDone ? "line-through" : "none",
+                    opacity: taskDone ? 0.5 : 1,
+                    borderRadius: 4,
+                    padding: "1px 4px",
+                    margin: "-1px -4px",
+                    transition: "background 0.15s ease",
+                    cursor: "text",
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.background = "rgba(59,130,246,0.1)";
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.background = "transparent";
+                  }}
+                  title="Click to edit title"
+                >
+                  {task.title}
+                </div>
+                {task.due_at && isDueSoon(task.due_at) && (
+                  <div style={{
+                    fontSize: 11,
+                    color: isPast(task.due_at) ? "#EF4444" : "#F59E0B",
+                    marginTop: 2,
+                  }}>
+                    {formatDate(task.due_at)}
+                  </div>
+                )}
+              </div>
+
+              {/* RIGHT: avatars + big status dot */}
+              <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
+                {/* Avatars */}
+                <div style={{ display: "flex", alignItems: "center" }}>
+                  {visibleAssignees.map((userId, i) => (
+                    <div
+                      key={userId}
+                      title={userId}
+                      style={{
+                        width: 26, height: 26,
+                        borderRadius: "50%",
+                        marginLeft: i > 0 ? -8 : 0,
+                        border: "2px solid #13131A",
+                        background: userColor(userId),
+                        display: "flex", alignItems: "center", justifyContent: "center",
+                        fontSize: 10, fontWeight: 700, color: "white",
+                        zIndex: 3 - i,
+                        position: "relative",
+                        flexShrink: 0,
+                      }}
+                    >
+                      {userId.slice(0, 2).toUpperCase()}
+                    </div>
+                  ))}
+
+                  {/* + add user button */}
+                  <div
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (onAssign) onAssign(task.id);
+                    }}
+                    title="Pridat uzivatele"
+                    style={{
+                      width: 26, height: 26,
+                      borderRadius: "50%",
+                      marginLeft: visibleAssignees.length > 0 ? -8 : 0,
+                      border: "2px dashed #3A3A5A",
+                      background: "transparent",
+                      cursor: "pointer",
+                      display: "flex", alignItems: "center", justifyContent: "center",
+                      fontSize: 14, color: "#4A4A6A",
+                      position: "relative", zIndex: 0,
+                      flexShrink: 0,
+                    }}
+                  >
+                    +
+                  </div>
+                </div>
+
+                {/* Big colored status dot - clickable to cycle */}
+                <div
+                  onClick={cycleStatus}
+                  title={t(`tasks.status.${currentStatus}`) + " (click to change)"}
+                  style={{
+                    width: 14, height: 14,
+                    borderRadius: "50%",
+                    background: sColor,
+                    flexShrink: 0,
+                    boxShadow: `0 0 6px ${sColor}80`,
+                    cursor: "pointer",
+                    transition: "transform 0.15s ease, box-shadow 0.15s ease",
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = "scale(1.3)";
+                    (e.currentTarget as HTMLElement).style.boxShadow = `0 0 10px ${sColor}`;
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = "scale(1)";
+                    (e.currentTarget as HTMLElement).style.boxShadow = `0 0 6px ${sColor}80`;
+                  }}
+                />
+              </div>
+            </div>
+          </Link>
+        )}
       </div>
     </div>
   );