@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/shared/assignee-select.tsx

@@ -1,592 +0,0 @@
-'use client';
-
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  Search,
-  UserCircle,
-  UserMinus,
-  UserPlus,
-  UserX,
-  X,
-} from '@tuturuuu/icons';
-import {
-  listWorkspaceTaskBoardViewableMembers,
-  updateWorkspaceTask,
-} from '@tuturuuu/internal-api/tasks';
-import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
-import { Button } from '@tuturuuu/ui/button';
-import { useWorkspaceMembers } from '@tuturuuu/ui/hooks/use-workspace-members';
-import { Input } from '@tuturuuu/ui/input';
-import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
-import { toast } from '@tuturuuu/ui/sonner';
-import { cn } from '@tuturuuu/utils/format';
-import { useParams } from 'next/navigation';
-import { useTranslations } from 'next-intl';
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
-import {
-  getActiveBoardRefresh,
-  useBoardBroadcast,
-} from './board-broadcast-context';
-import {
-  patchTaskInVisibleCaches,
-  restoreVisibleTaskCaches,
-  snapshotVisibleTaskCaches,
-} from './task-cache-patches';
-
-interface Member {
-  id: string;
-  user_id?: string; // For consistency with task creation flow
-  display_name?: string;
-  email?: string;
-  avatar_url?: string;
-}
-
-interface TaskWithAssignees {
-  id: string;
-  assignees?: Member[];
-}
-
-interface Props {
-  taskId: string;
-  assignees?: Member[];
-  onUpdate?: () => void;
-}
-
-export interface AssigneeSelectHandle {
-  open: () => void;
-  close: () => void;
-}
-
-export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
-  ({ taskId, assignees = [] }, ref) => {
-    const [open, setOpen] = useState(false);
-    const t = useTranslations('common');
-
-    // Expose open/close methods via ref
-    useImperativeHandle(ref, () => ({
-      open: () => setOpen(true),
-      close: () => setOpen(false),
-    }));
-    const [searchQuery, setSearchQuery] = useState('');
-    const params = useParams();
-    const rawWsId = params.wsId;
-    const wsId = Array.isArray(rawWsId) ? rawWsId[0] : rawWsId;
-    const rawBoardId = params.boardId;
-    const boardId = Array.isArray(rawBoardId) ? rawBoardId[0] : rawBoardId;
-    const queryClient = useQueryClient();
-    const broadcast = useBoardBroadcast();
-
-    // Deduplicate assignees by ID using O(n) Map approach
-    const uniqueAssignees = useMemo(
-      () =>
-        Array.from(
-          assignees
-            .reduce((map, assignee) => {
-              if (assignee?.id) {
-                map.set(assignee.id, assignee);
-              }
-              return map;
-            }, new Map<string, Member>())
-            .values()
-        ),
-      [assignees]
-    );
-    const [localAssigneesState, setLocalAssigneesState] =
-      useState<Member[]>(uniqueAssignees);
-
-    useEffect(() => {
-      setLocalAssigneesState((previousAssignees) => {
-        if (
-          previousAssignees.length === uniqueAssignees.length &&
-          previousAssignees.every(
-            (assignee, index) => assignee.id === uniqueAssignees[index]?.id
-          )
-        ) {
-          return previousAssignees;
-        }
-
-        return uniqueAssignees;
-      });
-    }, [uniqueAssignees]);
-
-    // Fetch workspace members with React Query
-    const shouldFetchBoardMembers = Boolean(wsId && boardId);
-    const workspaceMembersQuery = useWorkspaceMembers(wsId, {
-      enabled: Boolean(wsId) && !shouldFetchBoardMembers,
-    });
-    const boardMembersQuery = useQuery({
-      queryKey: ['task-board-viewable-members', wsId, boardId],
-      queryFn: async (): Promise<Member[]> => {
-        if (!wsId || !boardId) return [];
-
-        const payload = await listWorkspaceTaskBoardViewableMembers(
-          wsId,
-          boardId
-        );
-        const members = Array.isArray(payload?.members) ? payload.members : [];
-
-        return members.map((member) => ({
-          id: member.user_id,
-          user_id: member.user_id,
-          display_name: member.display_name || member.email || member.user_id,
-          email: member.email ?? undefined,
-          avatar_url: member.avatar_url ?? undefined,
-        }));
-      },
-      enabled: shouldFetchBoardMembers,
-      staleTime: 5 * 60 * 1000,
-    });
-    const fetchedMembers = shouldFetchBoardMembers
-      ? (boardMembersQuery.data ?? [])
-      : (workspaceMembersQuery.data ?? []);
-    const isFetchingMembers = shouldFetchBoardMembers
-      ? boardMembersQuery.isLoading
-      : workspaceMembersQuery.isLoading;
-    const membersError = shouldFetchBoardMembers
-      ? boardMembersQuery.error
-      : workspaceMembersQuery.error;
-
-    // Deduplicate members by ID using O(n) Map approach
-    // Also ensure user_id is set for consistency with task creation flow
-    const members: Member[] = Array.from(
-      fetchedMembers
-        .reduce((map, member) => {
-          if (member.id) {
-            map.set(member.id, {
-              ...member,
-              user_id: member.user_id || member.id, // Ensure user_id is set
-            });
-          }
-          return map;
-        }, new Map<string, Member>())
-        .values()
-    );
-
-    // Handle fetch errors
-    if (membersError) {
-      const errorMessage =
-        membersError instanceof Error
-          ? membersError.message
-          : t('no_members_available');
-      toast.error(errorMessage);
-    }
-
-    // Mutation for updating task assignees
-    const assigneeMutation = useMutation({
-      mutationFn: async ({
-        memberId,
-        action,
-      }: {
-        memberId: string;
-        action: 'add' | 'remove';
-      }) => {
-        if (!wsId) {
-          throw new Error(t('please_try_again_later'));
-        }
-
-        const boardTasks = queryClient.getQueryData<TaskWithAssignees[]>([
-          'tasks',
-          boardId,
-        ]);
-        const currentTask = boardTasks?.find((task) => task.id === taskId);
-        const existingIds =
-          currentTask?.assignees
-            ?.map((assignee) => assignee.id)
-            .filter(Boolean) ??
-          assignees?.map((assignee) => assignee.id).filter(Boolean) ??
-          localAssigneesState.map((assignee) => assignee.id).filter(Boolean);
-
-        const nextIds =
-          action === 'remove'
-            ? existingIds.filter((id) => id !== memberId)
-            : Array.from(new Set([...existingIds, memberId]));
-
-        await updateWorkspaceTask(wsId, taskId, {
-          assignee_ids: nextIds,
-        });
-
-        return { memberId, action };
-      },
-      onMutate: async ({ memberId, action }) => {
-        // Cancel any outgoing refetches
-        await queryClient.cancelQueries({ queryKey: ['tasks', boardId] });
-        if (boardId) {
-          await queryClient.cancelQueries({
-            queryKey: ['tasks-full', boardId],
-          });
-        }
-
-        // Snapshot the previous value
-        const cacheSnapshot = boardId
-          ? snapshotVisibleTaskCaches(queryClient, boardId, [taskId])
-          : undefined;
-
-        // Optimistically update the cache
-        if (boardId) {
-          patchTaskInVisibleCaches({
-            queryClient,
-            boardId,
-            taskId,
-            updater: (task) => {
-              const currentAssignees = task.assignees || [];
-              let newAssignees: Member[];
-
-              if (action === 'add') {
-                const member = members.find((m) => m.id === memberId);
-                if (
-                  member &&
-                  !currentAssignees.some((a: Member) => a.id === memberId)
-                ) {
-                  newAssignees = [...currentAssignees, member];
-                } else {
-                  newAssignees = currentAssignees;
-                }
-              } else {
-                newAssignees = currentAssignees.filter(
-                  (a: Member) => a.id !== memberId
-                );
-              }
-
-              return { ...task, assignees: newAssignees };
-            },
-          });
-        }
-
-        const previousLocalAssignees = localAssigneesState;
-
-        setLocalAssigneesState((old) => {
-          if (action === 'add') {
-            const member = members.find((m) => m.id === memberId);
-            if (!member || old.some((assignee) => assignee.id === memberId)) {
-              return old;
-            }
-
-            return [...old, member];
-          }
-
-          return old.filter((assignee) => assignee.id !== memberId);
-        });
-
-        return { cacheSnapshot, previousLocalAssignees };
-      },
-      onError: (err, _, context) => {
-        // Rollback optimistic update on error
-        if (context?.cacheSnapshot) {
-          restoreVisibleTaskCaches(queryClient, context.cacheSnapshot);
-        }
-
-        if (context?.previousLocalAssignees) {
-          setLocalAssigneesState(context.previousLocalAssignees);
-        }
-
-        const errorMessage =
-          err instanceof Error ? err.message : t('please_try_again_later');
-        console.error('Failed to update task assignees:', err);
-        toast.error(t('failed_to_update_assignees', { error: errorMessage }));
-      },
-      onSuccess: () => {
-        broadcast?.('task:relations-changed', { taskId });
-        getActiveBoardRefresh()?.({ invalidateTasks: false });
-      },
-      // Note: Removed onSettled invalidation to prevent flicker
-      // Optimistic updates handle immediate UI feedback
-      // Broadcast handles cross-user sync
-    });
-
-    const handleSelect = (memberId: string) => {
-      const isAssigned = uniqueAssignees.some(
-        (assignee) => assignee.id === memberId
-      );
-
-      assigneeMutation.mutate({
-        memberId,
-        action: isAssigned ? 'remove' : 'add',
-      });
-    };
-
-    const handleRemoveAll = async () => {
-      // Remove all assignees sequentially to avoid race conditions
-      for (const assignee of uniqueAssignees) {
-        await assigneeMutation.mutateAsync({
-          memberId: assignee.id,
-          action: 'remove',
-        });
-      }
-    };
-
-    // Filter assigned and unassigned members with additional safety checks
-    // Include assigned members who are still in the workspace
-    const assignedMembersInWorkspace = members.filter(
-      (member) =>
-        member?.id &&
-        uniqueAssignees.some((assignee) => assignee?.id === member.id)
-    );
-
-    // Also include assigned members who are NO LONGER in the workspace (removed members)
-    // These need to be shown so they can be unassigned
-    const assignedMembersNotInWorkspace = uniqueAssignees.filter(
-      (assignee) =>
-        assignee?.id && !members.some((member) => member?.id === assignee.id)
-    );
-
-    const unassignedMembers = members.filter(
-      (member) =>
-        member?.id &&
-        !uniqueAssignees.some((assignee) => assignee?.id === member.id)
-    );
-
-    // Combine assigned members from workspace and removed members
-    const allAssignedMembers = [
-      ...assignedMembersInWorkspace,
-      ...assignedMembersNotInWorkspace,
-    ];
-
-    // Create a Set of IDs for removed members for quick lookup
-    const removedMemberIds = new Set(
-      assignedMembersNotInWorkspace.map((m) => m.id)
-    );
-
-    // Additional deduplication using O(n) Map approach
-    const uniqueAssignedMembers = Array.from(
-      allAssignedMembers
-        .reduce((map: Map<string, Member>, member: Member) => {
-          if (member.id) {
-            map.set(member.id, member);
-          }
-          return map;
-        }, new Map<string, Member>())
-        .values()
-    );
-
-    const uniqueUnassignedMembers = Array.from(
-      unassignedMembers
-        .reduce((map: Map<string, Member>, member: Member) => {
-          if (member.id) {
-            map.set(member.id, member);
-          }
-          return map;
-        }, new Map<string, Member>())
-        .values()
-    );
-
-    return (
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="link"
-            aria-expanded={open}
-            disabled={isFetchingMembers}
-            size="xs"
-            className={cn(
-              'items-start justify-start transition-opacity duration-200',
-              assigneeMutation.isPending && 'opacity-50'
-            )}
-            onClick={(e) => {
-              e.stopPropagation(); // Always prevent event propagation to task card
-              // Prevent popover from opening when shift is held down
-              // (user might be about to select multiple tasks for bulk action)
-              if (e.shiftKey) {
-                e.preventDefault();
-              }
-            }}
-          >
-            {uniqueAssignees.length > 0 ? (
-              <div className="flex min-w-0 items-center gap-1">
-                <div className="flex items-center gap-1 -space-x-3">
-                  {uniqueAssignees.slice(0, 4).map((assignee) => (
-                    <div
-                      key={assignee.id}
-                      className="group/assignee relative flex items-center"
-                    >
-                      <Avatar className="h-4 w-4 border border-background shadow-sm">
-                        <AvatarImage src={assignee.avatar_url} />
-                        <AvatarFallback className="bg-muted font-semibold text-[9px]">
-                          {assignee.display_name?.[0] ||
-                            assignee.email?.[0] ||
-                            '?'}
-                        </AvatarFallback>
-                      </Avatar>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-1 text-muted-foreground">
-                <UserCircle className="h-4 w-4" />
-              </div>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent
-          className="w-80 border p-3 shadow-lg"
-          align="start"
-          side="bottom"
-          onClick={(e) => {
-            e.stopPropagation(); // Prevent triggering task card click
-          }}
-        >
-          <div className="space-y-3">
-            <div className="relative">
-              <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                placeholder={t('search_members')}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="h-9 border-0 bg-muted/50 pl-9 text-sm focus-visible:ring-0"
-              />
-            </div>
-            <div
-              className={cn(
-                'space-y-3 transition-opacity duration-200',
-                assigneeMutation.isPending && 'pointer-events-none opacity-50'
-              )}
-            >
-              {/* Selected Assignees */}
-              {uniqueAssignedMembers.length > 0 && (
-                <div className="space-y-1.5">
-                  <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
-                    {t('assigned')} ({uniqueAssignedMembers.length})
-                  </p>
-                  <div className="flex flex-wrap gap-1.5">
-                    {uniqueAssignedMembers.map((member) => {
-                      const isRemovedMember = removedMemberIds.has(member.id);
-                      return (
-                        <Button
-                          key={member.id}
-                          type="button"
-                          variant="default"
-                          size="xs"
-                          onClick={() => handleSelect(member.id)}
-                          title={
-                            isRemovedMember
-                              ? t('member_no_longer_in_workspace')
-                              : undefined
-                          }
-                          className={cn(
-                            'h-7 gap-1.5 rounded-full border px-3 font-medium text-xs shadow-sm transition-all',
-                            isRemovedMember
-                              ? 'border-dynamic-red/30 bg-dynamic-red/15 text-dynamic-red hover:border-dynamic-red/50 hover:bg-dynamic-red/25'
-                              : 'border-dynamic-orange/30 bg-dynamic-orange/15 text-dynamic-orange hover:border-dynamic-orange/50 hover:bg-dynamic-orange/25'
-                          )}
-                        >
-                          {isRemovedMember && <UserX className="h-3 w-3" />}
-                          <Avatar className="h-4 w-4">
-                            <AvatarImage src={member.avatar_url} />
-                            <AvatarFallback
-                              className={cn(
-                                'font-bold text-[9px]',
-                                isRemovedMember
-                                  ? 'bg-dynamic-red/20'
-                                  : 'bg-dynamic-orange/20'
-                              )}
-                            >
-                              {member.display_name?.[0] ||
-                                member.email?.[0] ||
-                                '?'}
-                            </AvatarFallback>
-                          </Avatar>
-                          {member.display_name || member.email}
-                          <X className="h-3 w-3 opacity-70" />
-                        </Button>
-                      );
-                    })}
-                  </div>
-                  {uniqueAssignedMembers.length > 1 && (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="xs"
-                      onClick={handleRemoveAll}
-                      className="mt-1 h-6 w-full text-dynamic-red text-xs hover:bg-dynamic-red/10 hover:text-dynamic-red"
-                    >
-                      <UserMinus className="mr-1 h-3 w-3" />
-                      {t('remove_all')}
-                    </Button>
-                  )}
-                </div>
-              )}
-
-              {/* Available Members */}
-              <div className="space-y-1.5">
-                {(() => {
-                  const filteredMembers = uniqueUnassignedMembers.filter(
-                    (member) =>
-                      !searchQuery ||
-                      (member.display_name || '')
-                        .toLowerCase()
-                        .includes(searchQuery.toLowerCase()) ||
-                      (member.email || '')
-                        .toLowerCase()
-                        .includes(searchQuery.toLowerCase())
-                  );
-
-                  if (filteredMembers.length === 0) {
-                    return searchQuery ? (
-                      <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-muted/30 py-6">
-                        <UserPlus className="h-4 w-4 text-muted-foreground/40" />
-                        <p className="text-center text-muted-foreground text-xs">
-                          {t('no_members_found')}
-                        </p>
-                      </div>
-                    ) : uniqueAssignedMembers.length > 0 ? (
-                      <div className="rounded-lg bg-muted/30 py-3 text-center">
-                        <p className="text-muted-foreground text-xs">
-                          {t('all_members_assigned')}
-                        </p>
-                      </div>
-                    ) : (
-                      <div className="rounded-lg bg-muted/30 py-3 text-center">
-                        <p className="text-muted-foreground text-xs">
-                          {t('no_members_available')}
-                        </p>
-                      </div>
-                    );
-                  }
-
-                  return (
-                    <>
-                      <p className="font-medium text-[10px] text-muted-foreground uppercase tracking-wide">
-                        {t('available')} ({filteredMembers.length})
-                      </p>
-                      <div className="flex max-h-48 flex-col gap-1 overflow-y-auto">
-                        {filteredMembers.map((member) => (
-                          <button
-                            key={member.id}
-                            type="button"
-                            onClick={() => handleSelect(member.id)}
-                            className="group flex items-center gap-2.5 rounded-md border border-transparent bg-background/50 px-3 py-2 text-left transition-all hover:border-dynamic-orange/30 hover:bg-dynamic-orange/5"
-                          >
-                            <Avatar className="h-7 w-7 shrink-0">
-                              <AvatarImage src={member.avatar_url} />
-                              <AvatarFallback className="bg-muted font-semibold text-muted-foreground text-xs group-hover:bg-dynamic-orange/20 group-hover:text-dynamic-orange">
-                                {member.display_name?.[0] ||
-                                  member.email?.[0] ||
-                                  '?'}
-                              </AvatarFallback>
-                            </Avatar>
-                            <span className="flex-1 truncate text-sm">
-                              {member.display_name || member.email}
-                            </span>
-                            <UserPlus className="h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
-                          </button>
-                        ))}
-                      </div>
-                    </>
-                  );
-                })()}
-              </div>
-            </div>
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  }
-);
-
-AssigneeSelect.displayName = 'AssigneeSelect';

package/src/components/ui/tu-do/shared/board-broadcast-context.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { createContext, useContext } from 'react';
-
-export type BoardBroadcastFn = (
-  event: string,
-  payload: Record<string, unknown>
-) => void;
-
-export interface BoardRefreshOptions {
-  includeLists?: boolean;
-  invalidateTasks?: boolean;
-}
-
-export type BoardRefreshFn = (options?: BoardRefreshOptions) => void;
-
-const BoardBroadcastContext = createContext<BoardBroadcastFn | null>(null);
-
-export const BoardBroadcastProvider = BoardBroadcastContext.Provider;
-
-export function useBoardBroadcast(): BoardBroadcastFn | null {
-  return useContext(BoardBroadcastContext);
-}
-
-// Module-level broadcast ref for components outside the BoardBroadcastProvider
-// tree (e.g. task dialog rendered at layout level). Only one board is active
-// at a time, so a singleton is safe.
-let _activeBroadcast: BoardBroadcastFn | null = null;
-let _activeBoardRefresh: BoardRefreshFn | null = null;
-
-export function setActiveBroadcast(fn: BoardBroadcastFn | null) {
-  _activeBroadcast = fn;
-}
-
-export function getActiveBroadcast(): BoardBroadcastFn | null {
-  return _activeBroadcast;
-}
-
-export function setActiveBoardRefresh(fn: BoardRefreshFn | null) {
-  _activeBoardRefresh = fn;
-}
-
-export function getActiveBoardRefresh(): BoardRefreshFn | null {
-  return _activeBoardRefresh;
-}