Fix display_name TS error + clean rebuild

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

apps/tasks/app/globals.css

@@ -356,3 +356,13 @@ main {
     min-height: 28px !important;
   }
 }
+
+/* Status dot pulse animation for in_progress tasks */
+@keyframes statusPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.status-dot-active {
+  animation: statusPulse 2s ease-in-out infinite;
+}

apps/tasks/app/tasks/page.tsx

@@ -6,21 +6,33 @@ import { useAuth } from "@/lib/auth";
 import { getTasks, getGroups, createTask, updateTask, Task, Group } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n";
 import TaskCard from "@/components/TaskCard";
-import GroupSelector from "@/components/GroupSelector";
 import TaskModal from "@/components/TaskModal";
 import { useSwipeable } from "react-swipeable";
 
-type StatusFilter = "all" | "pending" | "in_progress" | "done" | "cancelled";
+const STATUS_VALUES = ["pending", "in_progress", "done", "cancelled"] as const;
+type StatusValue = (typeof STATUS_VALUES)[number];
+
+function statusColor(s: StatusValue | null): string {
+  switch (s) {
+    case "pending": return "#FBBF24";
+    case "in_progress": return "#60A5FA";
+    case "done": return "#34D399";
+    case "cancelled": return "#9CA3AF";
+    default: return "#7A7A9A";
+  }
+}
 
 export default function TasksPage() {
-  const { token } = useAuth();
+  const { token, user } = useAuth();
   const { t } = useTranslation();
   const router = useRouter();
   const [tasks, setTasks] = useState<Task[]>([]);
   const [groups, setGroups] = useState<Group[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [selectedStatus, setSelectedStatus] = useState<StatusValue | null>(null);
+  const [groupOpen, setGroupOpen] = useState(false);
+  
   const [showForm, setShowForm] = useState(false);
   const [swipeDirection, setSwipeDirection] = useState<"left" | "right" | null>(null);
   const [swipeOverlay, setSwipeOverlay] = useState<{ name: string; icon: string | null } | null>(null);
@@ -34,13 +46,18 @@ export default function TasksPage() {
     return groupOrder.indexOf(selectedGroup);
   }, [groupOrder, selectedGroup]);
 
+  const selectedGroupObj = useMemo(
+    () => (selectedGroup ? groups.find((g) => g.id === selectedGroup) ?? null : null),
+    [selectedGroup, groups]
+  );
+
   const loadData = useCallback(async () => {
     if (!token) return;
     setLoading(true);
     try {
       const params: Record<string, string> = {};
       if (selectedGroup) params.group_id = selectedGroup;
-      if (statusFilter !== "all") params.status = statusFilter;
+      if (selectedStatus) params.status = selectedStatus;
 
       const [tasksRes, groupsRes] = await Promise.all([
         getTasks(token, Object.keys(params).length > 0 ? params : undefined),
@@ -53,7 +70,7 @@ export default function TasksPage() {
     } finally {
       setLoading(false);
     }
-  }, [token, selectedGroup, statusFilter]);
+  }, [token, selectedGroup, selectedStatus]);
 
   useEffect(() => {
     if (!token) {
@@ -118,46 +135,141 @@ export default function TasksPage() {
     }
   }
 
-  const statusOptions: { value: StatusFilter; label: string }[] = [
-    { value: "all", label: t("tasks.all") },
-    { value: "pending", label: t("tasks.status.pending") },
-    { value: "in_progress", label: t("tasks.status.in_progress") },
-    { value: "done", label: t("tasks.status.done") },
-    { value: "cancelled", label: t("tasks.status.cancelled") },
-  ];
-
   if (!token) return null;
 
+  const userInitial = (user?.name || user?.email || "?").charAt(0).toUpperCase();
+
   return (
-    <div className="space-y-2 pb-24 sm:pb-8 px-4 sm:px-0">
+    <div className="pb-24 sm:pb-8">
-      {/* Group dropdown + Status pills — single compact row */}
+      {/* Single-row sticky filter header — group dropdown left, status pills right */}
-      <div className="flex items-center gap-3 flex-nowrap">
+      <div style={{
-        <div className="flex-shrink-0">
+        display: "flex", alignItems: "center",
-          <GroupSelector
+        padding: "0 8px",
-            groups={groups}
+        position: "sticky", top: 44, zIndex: 40,
-            selected={selectedGroup}
+        height: 40, maxHeight: 40,
-            onSelect={setSelectedGroup}
+        background: "var(--background, #fff)",
-          />
+        borderBottom: "1px solid var(--border, #e5e7eb)",
+        flexWrap: "nowrap", overflow: "hidden",
+      }}>
+
+        {/* Groups dropdown — compact, left side */}
+        <div style={{ position: "relative", flexShrink: 0 }}>
+          <button
+            onClick={() => { setGroupOpen(o => !o); }}
+            style={{
+              display: "flex", alignItems: "center", gap: 4,
+              padding: "4px 10px", borderRadius: 16, height: 32,
+              border: `1.5px solid ${selectedGroupObj?.color || "var(--border, #3A3A4A)"}`,
+              background: selectedGroupObj ? selectedGroupObj.color + "18" : "transparent",
+              color: selectedGroupObj?.color || "var(--foreground, #374151)",
+              fontSize: 12, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap",
+            }}
+          >
+            {selectedGroupObj
+              ? `${selectedGroupObj.icon ?? ""} ${(selectedGroupObj as any).name}`
+              : t("tasks.all")}
+            <span style={{ fontSize: 8, opacity: 0.5, marginLeft: 1 }}>{groupOpen ? "\u25b2" : "\u25bc"}</span>
+          </button>
+          {groupOpen && (
+            <>
+              <div onClick={() => setGroupOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 150 }} />
+              <div style={{
+                position: "absolute", top: "110%", left: 0, zIndex: 200,
+                background: "var(--popover, #fff)", border: "1px solid var(--border, #e5e7eb)",
+                borderRadius: 12, padding: "4px 0", minWidth: 180,
+                boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+              }}>
+                <button
+                  onClick={() => { setSelectedGroup(null); setGroupOpen(false); }}
+                  style={{
+                    width: "100%", padding: "9px 14px",
+                    background: !selectedGroup ? "rgba(29,78,216,0.08)" : "transparent",
+                    border: "none", borderLeft: `3px solid ${!selectedGroup ? "#1D4ED8" : "transparent"}`,
+                    color: !selectedGroup ? "#2563EB" : "var(--foreground, #374151)",
+                    textAlign: "left", fontSize: 13, cursor: "pointer",
+                  }}
+                >
+                  {t("tasks.all")}
+                </button>
+                {groups.map(g => (
+                  <button
+                    key={g.id}
+                    onClick={() => { setSelectedGroup(g.id); setGroupOpen(false); }}
+                    style={{
+                      width: "100%", padding: "9px 14px",
+                      background: selectedGroup === g.id ? g.color + "18" : "transparent",
+                      border: "none", borderLeft: `3px solid ${selectedGroup === g.id ? g.color : "transparent"}`,
+                      color: selectedGroup === g.id ? g.color : "var(--foreground, #374151)",
+                      textAlign: "left", fontSize: 13, cursor: "pointer",
+                      display: "flex", alignItems: "center", gap: 8,
+                    }}
+                  >
+                    <span>{g.icon}</span>
+                    {g.name}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
         </div>
-        <div className="flex gap-1 overflow-x-auto scrollbar-hide flex-1 min-w-0">
+
-          {statusOptions.map((opt) => (
+        {/* Status pills — horizontal scroll, right side */}
+        <div style={{
+          display: "flex", alignItems: "center", gap: 4,
+          flex: 1, overflow: "hidden", marginLeft: 0,
+          justifyContent: "flex-end",
+        }}
+          className="scrollbar-hide"
+        >
+          <div style={{
+            display: "flex", alignItems: "center", gap: 3,
+            overflowX: "auto", flexShrink: 1,
+          }}
+            className="scrollbar-hide"
+          >
+            {/* "All" pill */}
             <button
-              key={opt.value}
+              onClick={() => setSelectedStatus(null)}
-              onClick={() => setStatusFilter(opt.value)}
+              style={{
-              className={`flex-shrink-0 px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${
+                padding: "3px 10px", borderRadius: 14, height: 28,
-                statusFilter === opt.value
+                border: "none", cursor: "pointer", whiteSpace: "nowrap",
-                  ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
+                fontSize: 11, fontWeight: selectedStatus === null ? 700 : 500,
-                  : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                background: selectedStatus === null ? "rgba(29,78,216,0.12)" : "transparent",
-              }`}
+                color: selectedStatus === null ? "#2563EB" : "var(--muted, #6B7280)",
+                transition: "all 0.15s ease",
+                flexShrink: 0,
+              }}
             >
-              {opt.label}
+              {t("tasks.all")}
             </button>
-          ))}
+            {STATUS_VALUES.map(s => (
+              <button
+                key={s}
+                onClick={() => setSelectedStatus(selectedStatus === s ? null : s)}
+                style={{
+                  display: "flex", alignItems: "center", gap: 4,
+                  padding: "3px 10px", borderRadius: 14, height: 28,
+                  border: "none", cursor: "pointer", whiteSpace: "nowrap",
+                  fontSize: 11, fontWeight: selectedStatus === s ? 700 : 500,
+                  background: selectedStatus === s ? statusColor(s) + "20" : "transparent",
+                  color: selectedStatus === s ? statusColor(s) : "var(--muted, #6B7280)",
+                  transition: "all 0.15s ease",
+                  flexShrink: 0,
+                }}
+              >
+                <span style={{
+                  width: 6, height: 6, borderRadius: "50%",
+                  background: statusColor(s), flexShrink: 0,
+                }} />
+                {t(`tasks.status.${s}`)}
+              </button>
+            ))}
+          </div>
         </div>
       </div>
 
       {/* Swipeable task list area */}
-      <div {...swipeHandlers} className="relative min-h-[200px]">
+      <div {...swipeHandlers} className="relative min-h-[200px] px-4 sm:px-0 pt-2">
         {/* Swipe overlay */}
         {swipeOverlay && (
           <div className="absolute inset-0 z-30 flex items-center justify-center pointer-events-none">

apps/tasks/components/TaskCard.tsx

@@ -3,7 +3,6 @@
 import { useState, useRef } from "react";
 import { Task } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n";
-import StatusBadge from "./StatusBadge";
 import Link from "next/link";
 import { useSwipeable } from "react-swipeable";
 
@@ -19,19 +18,64 @@ const PRIORITY_COLORS: Record<string, string> = {
   low: "#22c55e",
 };
 
+const PRIORITY_ICONS: Record<string, string> = {
+  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",
+    "#10B981", "#06B6D4", "#F97316", "#6366F1",
+  ];
+  let hash = 0;
+  for (let i = 0; i < userId.length; i++) {
+    hash = ((hash << 5) - hash) + userId.charCodeAt(i);
+    hash |= 0;
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+
+/** Get initials from user ID (first 2 chars uppercase) */
+function userInitials(userId: string): string {
+  return userId.slice(0, 2).toUpperCase();
+}
+
 export default function TaskCard({ task, onComplete }: TaskCardProps) {
   const { t } = useTranslation();
   const priorityColor = PRIORITY_COLORS[task.priority] || PRIORITY_COLORS.medium;
+  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 extraCount = assignees.length - MAX_AVATARS;
 
   const swipeHandlers = useSwipeable({
     onSwiping: (e) => {
@@ -93,20 +137,67 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
         }}
       >
         <Link href={`/tasks/${task.id}`} className="block group">
-          <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" : ""}`}>
+          <div
-            {/* Priority line on left edge */}
+            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" : ""}`}
-            <div
+            style={{ minHeight: 44 }}
-              className="absolute left-0 top-0 bottom-0 w-0.5"
+          >
-              style={{ backgroundColor: priorityColor }}
+            <div className="px-3 py-2 flex items-center gap-2.5" style={{ minHeight: 44 }}>
-            />
 
-            <div className="pl-3 pr-2.5 py-2 flex items-center gap-2">
+              {/* LEFT: User avatars (overlapping circles) */}
-              {/* Group icon */}
+              <div className="flex-shrink-0 flex items-center" style={{ minWidth: assignees.length > 0 ? 28 : 0 }}>
-              {task.group_icon && (
+                {visibleAssignees.length > 0 && (
-                <span className="text-base flex-shrink-0 leading-none">{task.group_icon}</span>
+                  <div className="flex items-center" style={{ position: "relative" }}>
-              )}
+                    {visibleAssignees.map((userId, idx) => (
+                      <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}
+                      >
+                        {userInitials(userId)}
+                      </div>
+                    ))}
+                    {extraCount > 0 && (
+                      <div
+                        style={{
+                          width: 22, height: 22,
+                          borderRadius: "50%",
+                          background: "var(--muted, #6B7280)",
+                          border: "2px solid var(--background, #fff)",
+                          display: "flex", alignItems: "center", justifyContent: "center",
+                          fontSize: 8, fontWeight: 700, color: "#fff",
+                          marginLeft: -8,
+                          position: "relative", zIndex: 0,
+                        }}
+                      >
+                        +{extraCount}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
 
-              {/* Title - single line, truncated */}
+              {/* Status dot — big colored circle */}
+              <div
+                className={`flex-shrink-0 ${taskActive ? "status-dot-active" : ""}`}
+                style={{
+                  width: 14, height: 14,
+                  borderRadius: "50%",
+                  background: statusDotColor,
+                  boxShadow: taskActive ? `0 0 6px ${statusDotColor}80` : "none",
+                }}
+                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" : ""
@@ -115,17 +206,19 @@ export default function TaskCard({ task, onComplete }: TaskCardProps) {
                 {task.title}
               </h3>
 
-              {/* Status badge */}
+              {/* RIGHT: Group icon */}
-              <div className="flex-shrink-0">
+              {task.group_icon && (
-                <StatusBadge status={task.status} size="sm" />
+                <span className="text-sm flex-shrink-0 leading-none opacity-70">{task.group_icon}</span>
-              </div>
+              )}
 
-              {/* Priority dot */}
+              {/* RIGHT: Priority indicator */}
-              <div
+              <span
-                className="w-2 h-2 rounded-full flex-shrink-0"
+                className="flex-shrink-0 text-xs font-bold"
-                style={{ backgroundColor: priorityColor }}
+                style={{ color: priorityColor, lineHeight: 1 }}
                 title={t(`tasks.priority.${task.priority}`)}
-              />
+              >
+                {priorityIcon}
+              </span>
             </div>
           </div>
         </Link>

apps/tasks/lib/api.ts

@@ -141,6 +141,7 @@ export interface Group {
   color: string;
   icon: string | null;
   sort_order: number;
+  display_name?: string;
 }
 
 export interface Connector {