manage users

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -5,6 +5,8 @@ import type { LabelsView, TaskLabel } from "./labels/types";
 import TaskDetailActionBar from "./TaskDetailActionBar";
 import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
 import type { TaskDetailTab } from "./types";
+import { DEFAULT_USERS } from "./users/constants";
+import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
 
 type Props = {
   activeTab: TaskDetailTab | null;
@@ -14,10 +16,13 @@ type Props = {
 const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
   const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(["1"]));
+  const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
+  const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set(["1"]));
 
-  const selectedLabels = labels.filter((label) => selectedIds.has(label.id));
+  const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
+  const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id));
   const isLabelsOpen = activeTab === "labels";
+  const isUsersOpen = activeTab === "users";
 
   const handleTabChange = (tab: TaskDetailTab) => {
     if (tab === "labels" && activeTab !== "labels") {
@@ -26,8 +31,20 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
     onTabChange(tab);
   };
 
-  const handleToggle = (id: string) => {
-    setSelectedIds((prev) => {
+  const handleLabelToggle = (id: string) => {
+    setSelectedLabelIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleUserToggle = (id: string) => {
+    setSelectedUserIds((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
         next.delete(id);
@@ -45,7 +62,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
       color,
     };
     setLabels((prev) => [...prev, newLabel]);
-    setSelectedIds((prev) => new Set([...prev, newLabel.id]));
+    setSelectedLabelIds((prev) => new Set([...prev, newLabel.id]));
     setLabelsView("list");
   };
 
@@ -55,11 +72,25 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
         activeTab={activeTab}
         onTabChange={handleTabChange}
         labelsPopover={
-          isLabelsOpen ? <TaskDetailLabelsPopover view={labelsView} labels={labels} selectedIds={selectedIds} onViewChange={setLabelsView} onToggle={handleToggle} onCreate={handleCreate} /> : null
+          isLabelsOpen ? (
+            <TaskDetailLabelsPopover
+              view={labelsView}
+              labels={labels}
+              selectedIds={selectedLabelIds}
+              onViewChange={setLabelsView}
+              onToggle={handleLabelToggle}
+              onCreate={handleCreate}
+            />
+          ) : null
+        }
+        usersPopover={
+          isUsersOpen ? (
+            <TaskDetailUsersPopover users={DEFAULT_USERS} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
+          ) : null
         }
       />
 
-      <TaskDetailMetadataPreview selectedLabels={selectedLabels} />
+      <TaskDetailMetadataPreview selectedLabels={selectedLabels} selectedUsers={selectedUsers} />
     </div>
   );
 };