UI redesign: status dots with pulse + avatar circles + one-row header

- TaskCard: overlapping avatars, colored status dot (pulse for active)
- Header: group dropdown + status pills in single 40px row
- CSS: statusPulse animation
- Group interface: display_name optional field

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

apps/tasks/components/TaskCard.tsx

@@ -9,39 +9,20 @@ import { useSwipeable } from "react-swipeable";
 interface TaskCardProps {
   task: Task;
   onComplete?: (taskId: string) => void;
+  onAssign?: (taskId: string) => void;
 }
 
-const PRIORITY_COLORS: Record<string, string> = {
+function statusColor(status: string): string {
-  urgent: "#ef4444",
+  switch (status) {
-  high: "#f97316",
+    case "todo":
-  medium: "#eab308",
+    case "pending":     return "#F59E0B"; // yellow
-  low: "#22c55e",
+    case "in_progress": return "#3B82F6"; // blue
-};
+    case "done":        return "#22C55E"; // green
-
+    case "cancelled":   return "#6B7280"; // gray
-const PRIORITY_ICONS: Record<string, string> = {
+    default:            return "#F59E0B";
-  urgent: "\u25c6",
+  }
-  high: "\u25b2",
-  medium: "\u25cf",
-  low: "\u25bd",
-};
-
-const STATUS_DOT_COLORS: Record<string, string> = {
-  pending: "#9CA3AF",
-  in_progress: "#F59E0B",
-  done: "#22C55E",
-  completed: "#22C55E",
-  cancelled: "#EF4444",
-};
-
-function isDone(status: string): boolean {
-  return status === "done" || status === "completed";
 }
 
-function isInProgress(status: string): boolean {
-  return status === "in_progress";
-}
-
-/** Generate a consistent color from a string (user ID) */
 function userColor(userId: string): string {
   const colors = [
     "#3B82F6", "#8B5CF6", "#EC4899", "#F59E0B",
@@ -55,41 +36,43 @@ function userColor(userId: string): string {
   return colors[Math.abs(hash) % colors.length];
 }
 
-/** Get initials from user ID (first 2 chars uppercase) */
+function isDueSoon(dateStr: string): boolean {
-function userInitials(userId: string): string {
+  const due = new Date(dateStr).getTime();
-  return userId.slice(0, 2).toUpperCase();
+  const now = Date.now();
+  return due - now <= 7 * 24 * 60 * 60 * 1000;
 }
 
-export default function TaskCard({ task, onComplete }: TaskCardProps) {
+function isPast(dateStr: string): boolean {
+  return new Date(dateStr).getTime() < Date.now();
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+export default function TaskCard({ task, onComplete, onAssign }: TaskCardProps) {
   const { t } = useTranslation();
-  const priorityColor = PRIORITY_COLORS[task.priority] || PRIORITY_COLORS.medium;
+  const taskDone = task.status === "done";
-  const priorityIcon = PRIORITY_ICONS[task.priority] || PRIORITY_ICONS.medium;
-  const statusDotColor = STATUS_DOT_COLORS[task.status] || STATUS_DOT_COLORS.pending;
-  const taskDone = isDone(task.status);
-  const taskActive = isInProgress(task.status);
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [swiped, setSwiped] = useState(false);
   const cardRef = useRef<HTMLDivElement>(null);
 
   const SWIPE_THRESHOLD = 120;
-  const MAX_AVATARS = 3;
   const assignees = task.assigned_to || [];
-  const visibleAssignees = assignees.slice(0, MAX_AVATARS);
+  const visibleAssignees = assignees.slice(0, 3);
-  const extraCount = assignees.length - MAX_AVATARS;
+  const groupColor = task.group_color;
+  const sColor = statusColor(task.status);
 
   const swipeHandlers = useSwipeable({
     onSwiping: (e) => {
       if (e.dir === "Right" && !taskDone && onComplete) {
-        const offset = Math.min(e.deltaX, 160);
+        setSwipeOffset(Math.min(e.deltaX, 160));
-        setSwipeOffset(offset);
       }
     },
     onSwipedRight: (e) => {
       if (e.absX > SWIPE_THRESHOLD && !taskDone && onComplete) {
         setSwiped(true);
-        setTimeout(() => {
+        setTimeout(() => { onComplete(task.id); }, 300);
-          onComplete(task.id);
-        }, 300);
       } else {
         setSwipeOffset(0);
       }
@@ -106,14 +89,12 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
   const showCompleteHint = swipeOffset > 40;
 
   return (
-    <div className="relative overflow-hidden rounded-lg" ref={cardRef}>
+    <div className="relative overflow-hidden" ref={cardRef} style={{ margin: "0 0 5px" }}>
-      {/* Swipe background - green complete indicator */}
+      {/* Swipe background */}
       {onComplete && !taskDone && (
         <div
-          className={`absolute inset-0 flex items-center pl-4 rounded-lg transition-colors ${
+          className={`absolute inset-0 flex items-center pl-4 rounded-xl transition-colors ${
-            swipeOffset > SWIPE_THRESHOLD
+            swipeOffset > SWIPE_THRESHOLD ? "bg-green-500" : "bg-green-400/80"
-              ? "bg-green-500"
-              : "bg-green-400/80"
           }`}
         >
           <div
@@ -136,89 +117,108 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
           transition: swipeOffset === 0 ? "transform 0.3s ease" : "none",
         }}
       >
-        <Link href={`/tasks/${task.id}`} className="block group">
+        <Link href={`/tasks/${task.id}`} className="block">
           <div
-            className={`relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-all duration-150 active:scale-[0.99] ${swiped ? "opacity-0 transition-opacity duration-300" : ""}`}
+            style={{
-            style={{ minHeight: 44 }}
+              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,
+            }}
           >
-            <div className="px-3 py-2 flex items-center gap-2.5" style={{ minHeight: 44 }}>
+            {/* LEFT: title + optional due date */}
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{
+                fontSize: 14,
+                fontWeight: 500,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                color: "#E8E8F0",
+                textDecoration: taskDone ? "line-through" : "none",
+                opacity: taskDone ? 0.5 : 1,
+              }}>
+                {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>
 
-              {/* LEFT: User avatars (overlapping circles) */}
+            {/* RIGHT: avatars + big status dot */}
-              <div className="flex-shrink-0 flex items-center" style={{ minWidth: assignees.length > 0 ? 28 : 0 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
-                {visibleAssignees.length > 0 && (
+              {/* Avatars */}
-                  <div className="flex items-center" style={{ position: "relative" }}>
+              <div style={{ display: "flex", alignItems: "center" }}>
-                    {visibleAssignees.map((userId, idx) => (
+                {visibleAssignees.map((userId, i) => (
                   <div
                     key={userId}
-                        style={{
-                          width: 22, height: 22,
-                          borderRadius: "50%",
-                          background: userColor(userId),
-                          border: "2px solid var(--background, #fff)",
-                          display: "flex", alignItems: "center", justifyContent: "center",
-                          fontSize: 9, fontWeight: 700, color: "#fff",
-                          marginLeft: idx > 0 ? -8 : 0,
-                          position: "relative", zIndex: MAX_AVATARS - idx,
-                        }}
                     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,
+                    }}
                   >
-                        {userInitials(userId)}
+                    {userId.slice(0, 2).toUpperCase()}
                   </div>
                 ))}
-                    {extraCount > 0 && (
+
+                {/* + add user button */}
                 <div
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (onAssign) onAssign(task.id);
+                  }}
+                  title="Přidat uživatele"
                   style={{
-                          width: 22, height: 22,
+                    width: 26, height: 26,
                     borderRadius: "50%",
-                          background: "var(--muted, #6B7280)",
+                    marginLeft: visibleAssignees.length > 0 ? -8 : 0,
-                          border: "2px solid var(--background, #fff)",
+                    border: "2px dashed #3A3A5A",
+                    background: "transparent",
+                    cursor: "pointer",
                     display: "flex", alignItems: "center", justifyContent: "center",
-                          fontSize: 8, fontWeight: 700, color: "#fff",
+                    fontSize: 14, color: "#4A4A6A",
-                          marginLeft: -8,
                     position: "relative", zIndex: 0,
+                    flexShrink: 0,
                   }}
                 >
-                        +{extraCount}
+                  +
                 </div>
-                    )}
-                  </div>
-                )}
               </div>
 
-              {/* Status dot — big colored circle */}
+              {/* Big colored status dot */}
               <div
-                className={`flex-shrink-0 ${taskActive ? "status-dot-active" : ""}`}
+                title={t(`tasks.status.${task.status}`)}
                 style={{
                   width: 14, height: 14,
                   borderRadius: "50%",
-                  background: statusDotColor,
+                  background: sColor,
-                  boxShadow: taskActive ? `0 0 6px ${statusDotColor}80` : "none",
+                  flexShrink: 0,
+                  boxShadow: `0 0 6px ${sColor}80`,
                 }}
-                title={t(`tasks.status.${task.status}`)}
               />
-
-              {/* MIDDLE: Task title — single line, truncated */}
-              <h3
-                className={`text-sm font-medium truncate flex-1 min-w-0 ${
-                  taskDone ? "line-through text-muted" : ""
-                }`}
-              >
-                {task.title}
-              </h3>
-
-              {/* RIGHT: Group icon */}
-              {task.group_icon && (
-                <span className="text-sm flex-shrink-0 leading-none opacity-70">{task.group_icon}</span>
-              )}
-
-              {/* RIGHT: Priority indicator */}
-              <span
-                className="flex-shrink-0 text-xs font-bold"
-                style={{ color: priorityColor, lineHeight: 1 }}
-                title={t(`tasks.priority.${task.priority}`)}
-              >
-                {priorityIcon}
-              </span>
             </div>
           </div>
         </Link>