Fix display_name TS error + clean rebuild

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 00:42:40 +00:00
parent 317672aa08
commit e250b2124f
4 changed files with 273 additions and 57 deletions
--- a/apps/tasks/app/globals.css
+++ b/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;
+}
--- a/apps/tasks/app/tasks/page.tsx
+++ b/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">
-      {/* Group dropdown + Status pills — single compact row */}
-      <div className="flex items-center gap-3 flex-nowrap">
-        <div className="flex-shrink-0">
-          <GroupSelector
-            groups={groups}
-            selected={selectedGroup}
-            onSelect={setSelectedGroup}
-          />
+    <div className="pb-24 sm:pb-8">
+      {/* Single-row sticky filter header — group dropdown left, status pills right */}
+      <div style={{
+        display: "flex", alignItems: "center",
+        padding: "0 8px",
+        position: "sticky", top: 44, zIndex: 40,
+        height: 40, maxHeight: 40,
+        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={() => setStatusFilter(opt.value)}
-              className={`flex-shrink-0 px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${
-                statusFilter === opt.value
-                  ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
-                  : "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
-              }`}
+              onClick={() => setSelectedStatus(null)}
+              style={{
+                padding: "3px 10px", borderRadius: 14, height: 28,
+                border: "none", cursor: "pointer", whiteSpace: "nowrap",
+                fontSize: 11, fontWeight: selectedStatus === null ? 700 : 500,
+                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">