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,6 +206,119 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
           transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
         }}
       >
+        {/* When editing, don't wrap in Link - just show the card with input */}
+        {editing ? (
+          <div
+            style={{
+              padding: "10px 14px",
+              borderRadius: 10,
+              background: "#13131A",
+              border: `1px solid ${groupColor ? groupColor + "30" : "#1E1E2E"}`,
+              borderLeft: `3px solid ${groupColor || "#2A2A3A"}`,
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+            }}
+          >
+            {/* LEFT: editable input */}
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <input
+                ref={inputRef}
+                type="text"
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                onBlur={saveTitle}
+                onKeyDown={handleKeyDown}
+                disabled={saving}
+                style={{
+                  width: "100%",
+                  fontSize: 14,
+                  fontWeight: 500,
+                  color: "#E8E8F0",
+                  background: "#1A1A28",
+                  border: "1px solid #3B82F6",
+                  borderRadius: 6,
+                  padding: "4px 8px",
+                  outline: "none",
+                  boxShadow: "0 0 0 2px rgba(59,130,246,0.3)",
+                  opacity: saving ? 0.6 : 1,
+                }}
+              />
+            </div>
+
+            {/* RIGHT: avatars + status dot (still interactive) */}
+            <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
+              <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>
+                ))}
+                <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>
+
+              {/* 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>
+        ) : (
+          /* Normal mode: Link wrapping for navigation on non-interactive areas */
           <Link href={`/tasks/${task.id}`} className="block">
             <div
               style={{
@@ -133,9 +335,11 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
                 transition: swiped ? "opacity 0.3s" : undefined,
               }}
             >
-            {/* LEFT: title + optional due date */}
+              {/* LEFT: title (clickable for inline edit) + optional due date */}
               <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{
+                <div
+                  onClick={handleTitleClick}
+                  style={{
                     fontSize: 14,
                     fontWeight: 500,
                     overflow: "hidden",
@@ -144,7 +348,20 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
                     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) && (
@@ -190,7 +407,7 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
                       e.stopPropagation();
                       if (onAssign) onAssign(task.id);
                     }}
-                  title="Přidat uživatele"
+                    title="Pridat uzivatele"
                     style={{
                       width: 26, height: 26,
                       borderRadius: "50%",
@@ -208,20 +425,32 @@ export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps)
                   </div>
                 </div>
 
-              {/* Big colored status dot */}
+                {/* Big colored 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>
+        )}
       </div>
     </div>
   );