From be67ba7c34392cb76df467a296e1784b9892e3ca Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sun, 12 Apr 2026 00:06:17 +0800
Subject: [PATCH] feat(views): support inline property editing on project list
 page

Allow users to modify project priority, status, and lead directly from
the project list without navigating to the detail page. Only the project
name/icon column navigates to the detail view now.
---
 .../projects/components/projects-page.tsx     | 182 ++++++++++++++----
 1 file changed, 149 insertions(+), 33 deletions(-)

diff --git a/packages/views/projects/components/projects-page.tsx b/packages/views/projects/components/projects-page.tsx
index 7c76d057d..1756e4900 100644
--- a/packages/views/projects/components/projects-page.tsx
+++ b/packages/views/projects/components/projects-page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useState, useRef } from "react";
-import { Plus, FolderKanban, ChevronRight, Maximize2, Minimize2, X as XIcon, UserMinus } from "lucide-react";
+import { useState, useRef, useCallback } from "react";
+import { Plus, FolderKanban, ChevronRight, Maximize2, Minimize2, X as XIcon, UserMinus, Check } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { projectListOptions } from "@multica/core/projects/queries";
-import { useCreateProject } from "@multica/core/projects/mutations";
+import { useCreateProject, useUpdateProject } from "@multica/core/projects/mutations";
 import { PROJECT_STATUS_CONFIG, PROJECT_STATUS_ORDER, PROJECT_PRIORITY_CONFIG, PROJECT_PRIORITY_ORDER } from "@multica/core/projects/config";
 import { useWorkspaceId } from "@multica/core/hooks";
 import { useWorkspaceStore } from "@multica/core/workspace";
@@ -36,7 +36,7 @@ import { Tooltip, TooltipTrigger, TooltipContent } from "@multica/ui/components/
 import { ContentEditor, type ContentEditorRef } from "../../editor";
 import { TitleEditor } from "../../editor";
 import { EmojiPicker } from "@multica/ui/components/common/emoji-picker";
-import type { Project, ProjectStatus, ProjectPriority } from "@multica/core/types";
+import type { Project, ProjectStatus, ProjectPriority, UpdateProjectRequest } from "@multica/core/types";
 import { PriorityIcon } from "../../issues/components/priority-icon";
 
 function formatRelativeDate(date: string): string {
@@ -50,32 +50,83 @@ function formatRelativeDate(date: string): string {
 }
 
 function ProjectRow({ project }: { project: Project }) {
+  const wsId = useWorkspaceId();
   const statusCfg = PROJECT_STATUS_CONFIG[project.status];
   const priorityCfg = PROJECT_PRIORITY_CONFIG[project.priority];
+  const updateProject = useUpdateProject();
+  const { data: members = [] } = useQuery(memberListOptions(wsId));
+  const { data: agents = [] } = useQuery(agentListOptions(wsId));
+  const { getActorName } = useActorName();
+
+  const [leadOpen, setLeadOpen] = useState(false);
+  const [leadFilter, setLeadFilter] = useState("");
+  const leadQuery = leadFilter.toLowerCase();
+  const filteredMembers = members.filter((m) => m.name.toLowerCase().includes(leadQuery));
+  const filteredAgents = agents.filter((a) => !a.archived_at && a.name.toLowerCase().includes(leadQuery));
+
+  const handleUpdate = useCallback(
+    (data: UpdateProjectRequest) => {
+      updateProject.mutate({ id: project.id, ...data });
+    },
+    [project.id, updateProject],
+  );
+
   return (
-    <AppLink
-      href={`/projects/${project.id}`}
-      className="group/row flex h-11 items-center gap-2 px-5 text-sm transition-colors hover:bg-accent/40"
-    >
-      {/* Icon + Name */}
-      <span className="shrink-0 w-[24px] text-center text-base">{project.icon || "📁"}</span>
-      <span className="min-w-0 flex-1 truncate font-medium">{project.title}</span>
+    <div className="group/row flex h-11 items-center gap-2 px-5 text-sm transition-colors hover:bg-accent/40">
+      {/* Icon + Name (navigates to detail) */}
+      <AppLink
+        href={`/projects/${project.id}`}
+        className="flex min-w-0 flex-1 items-center gap-2"
+      >
+        <span className="shrink-0 w-[24px] text-center text-base">{project.icon || "📁"}</span>
+        <span className="min-w-0 flex-1 truncate font-medium">{project.title}</span>
+      </AppLink>
 
-      {/* Priority */}
-      <span className="flex w-24 items-center justify-center gap-1 shrink-0">
-        <PriorityIcon priority={project.priority} />
-        <span className={cn("text-xs", priorityCfg.color)}>{priorityCfg.label}</span>
-      </span>
+      {/* Priority — dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <button type="button" className="flex w-24 items-center justify-center gap-1 shrink-0 rounded px-1 py-0.5 hover:bg-accent/60 transition-colors cursor-pointer">
+              <PriorityIcon priority={project.priority} />
+              <span className={cn("text-xs", priorityCfg.color)}>{priorityCfg.label}</span>
+            </button>
+          }
+        />
+        <DropdownMenuContent align="start" className="w-44">
+          {PROJECT_PRIORITY_ORDER.map((p) => (
+            <DropdownMenuItem key={p} onClick={() => handleUpdate({ priority: p as ProjectPriority })}>
+              <PriorityIcon priority={p} />
+              <span>{PROJECT_PRIORITY_CONFIG[p].label}</span>
+              {p === project.priority && <Check className="ml-auto h-3.5 w-3.5" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
 
-      {/* Status */}
-      <span className={cn(
-        "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium shrink-0 w-28 justify-center",
-        statusCfg.badgeBg, statusCfg.badgeText,
-      )}>
-        {statusCfg.label}
-      </span>
+      {/* Status — dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <button type="button" className={cn(
+              "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium shrink-0 w-28 justify-center cursor-pointer hover:opacity-80 transition-opacity",
+              statusCfg.badgeBg, statusCfg.badgeText,
+            )}>
+              {statusCfg.label}
+            </button>
+          }
+        />
+        <DropdownMenuContent align="start" className="w-44">
+          {PROJECT_STATUS_ORDER.map((s) => (
+            <DropdownMenuItem key={s} onClick={() => handleUpdate({ status: s as ProjectStatus })}>
+              <span className={cn("size-2 rounded-full", PROJECT_STATUS_CONFIG[s].dotColor)} />
+              <span>{PROJECT_STATUS_CONFIG[s].label}</span>
+              {s === project.status && <Check className="ml-auto h-3.5 w-3.5" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
 
-      {/* Progress */}
+      {/* Progress (read-only) */}
       <span className="flex w-24 items-center justify-center gap-1.5 shrink-0">
         {project.issue_count > 0 ? (
           <>
@@ -94,20 +145,85 @@ function ProjectRow({ project }: { project: Project }) {
         )}
       </span>
 
-      {/* Lead */}
-      <span className="flex w-10 items-center justify-center shrink-0">
-        {project.lead_type && project.lead_id ? (
-          <ActorAvatar actorType={project.lead_type} actorId={project.lead_id} size={22} />
-        ) : (
-          <span className="h-[22px] w-[22px] rounded-full border border-dashed border-muted-foreground/30" />
-        )}
-      </span>
+      {/* Lead — popover */}
+      <Popover open={leadOpen} onOpenChange={(v) => { setLeadOpen(v); if (!v) setLeadFilter(""); }}>
+        <PopoverTrigger
+          render={
+            <button type="button" className="flex w-10 items-center justify-center shrink-0 rounded-full hover:ring-2 hover:ring-accent transition-all cursor-pointer">
+              {project.lead_type && project.lead_id ? (
+                <Tooltip>
+                  <TooltipTrigger render={<span><ActorAvatar actorType={project.lead_type} actorId={project.lead_id} size={22} /></span>} />
+                  <TooltipContent side="bottom">{getActorName(project.lead_type, project.lead_id)}</TooltipContent>
+                </Tooltip>
+              ) : (
+                <span className="h-[22px] w-[22px] rounded-full border border-dashed border-muted-foreground/30" />
+              )}
+            </button>
+          }
+        />
+        <PopoverContent align="start" className="w-52 p-0">
+          <div className="px-2 py-1.5 border-b">
+            <input
+              type="text"
+              value={leadFilter}
+              onChange={(e) => setLeadFilter(e.target.value)}
+              placeholder="Assign lead..."
+              className="w-full bg-transparent text-sm placeholder:text-muted-foreground outline-none"
+            />
+          </div>
+          <div className="p-1 max-h-60 overflow-y-auto">
+            <button
+              type="button"
+              onClick={() => { handleUpdate({ lead_type: null, lead_id: null }); setLeadOpen(false); }}
+              className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+            >
+              <UserMinus className="h-3.5 w-3.5 text-muted-foreground" />
+              <span className="text-muted-foreground">No lead</span>
+            </button>
+            {filteredMembers.length > 0 && (
+              <>
+                <div className="px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground uppercase tracking-wider">Members</div>
+                {filteredMembers.map((m) => (
+                  <button
+                    type="button"
+                    key={m.user_id}
+                    onClick={() => { handleUpdate({ lead_type: "member", lead_id: m.user_id }); setLeadOpen(false); }}
+                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+                  >
+                    <ActorAvatar actorType="member" actorId={m.user_id} size={16} />
+                    <span>{m.name}</span>
+                  </button>
+                ))}
+              </>
+            )}
+            {filteredAgents.length > 0 && (
+              <>
+                <div className="px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground uppercase tracking-wider">Agents</div>
+                {filteredAgents.map((a) => (
+                  <button
+                    type="button"
+                    key={a.id}
+                    onClick={() => { handleUpdate({ lead_type: "agent", lead_id: a.id }); setLeadOpen(false); }}
+                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+                  >
+                    <ActorAvatar actorType="agent" actorId={a.id} size={16} />
+                    <span>{a.name}</span>
+                  </button>
+                ))}
+              </>
+            )}
+            {filteredMembers.length === 0 && filteredAgents.length === 0 && leadFilter && (
+              <div className="px-2 py-3 text-center text-sm text-muted-foreground">No results</div>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
 
       {/* Created */}
       <span className="w-20 shrink-0 text-right text-xs text-muted-foreground tabular-nums">
         {formatRelativeDate(project.created_at)}
       </span>
-    </AppLink>
+    </div>
   );
 }