@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/tu-do/my-tasks/my-tasks-content.tsx

@@ -1,328 +0,0 @@
-'use client';
-
-import { useQueryClient } from '@tanstack/react-query';
-import { Dialog, DialogContent, DialogTitle } from '@tuturuuu/ui/dialog';
-import { useAiCredits } from '@tuturuuu/ui/hooks/use-ai-credits';
-import { useUserConfig } from '@tuturuuu/ui/hooks/use-user-config';
-import { TaskNewLabelDialog } from '@tuturuuu/ui/tu-do/boards/boardId/task-dialogs/TaskNewLabelDialog';
-import { TaskNewProjectDialog } from '@tuturuuu/ui/tu-do/boards/boardId/task-dialogs/TaskNewProjectDialog';
-import { TaskBoardForm } from '@tuturuuu/ui/tu-do/boards/form';
-import { CreateListDialog } from '@tuturuuu/ui/tu-do/shared/create-list-dialog';
-import { useTranslations } from 'next-intl';
-import type React from 'react';
-import { AiCreditIndicator } from './ai-credit-indicator';
-import { BoardSelectorDialog } from './board-selector-dialog';
-import { CommandBar } from './command-bar';
-import { MyTasksFilters } from './my-tasks-filters';
-import { MyTasksHeader } from './my-tasks-header';
-import TaskList from './task-list';
-import { TaskPreviewDialog } from './task-preview-dialog';
-import { useMyTasksState } from './use-my-tasks-state';
-
-interface MyTasksContentProps {
-  disableAutoCreateBoard?: boolean;
-  embedded?: boolean;
-  initialBoard?: {
-    id: string;
-    name: string | null;
-  };
-  initialListId?: string;
-  initialLists?: Array<{
-    deleted?: boolean | null;
-    id: string;
-    name: string | null;
-    position?: number | null;
-  }>;
-  wsId: string;
-  userId: string;
-  isPersonal: boolean;
-}
-
-export default function MyTasksContent({
-  disableAutoCreateBoard = false,
-  embedded = false,
-  initialBoard,
-  initialListId,
-  initialLists,
-  wsId,
-  userId,
-  isPersonal,
-}: MyTasksContentProps) {
-  const t = useTranslations('ws-tasks');
-  const taskBoardT = useTranslations();
-  const queryClient = useQueryClient();
-  const { data: credits } = useAiCredits(wsId);
-  const aiCreditsExhausted = credits ? credits.remaining <= 0 : false;
-  const { data: submitShortcut } = useUserConfig(
-    'TASK_SUBMIT_SHORTCUT',
-    'enter'
-  );
-  const state = useMyTasksState({
-    ...(disableAutoCreateBoard ? { disableAutoCreateBoard } : {}),
-    ...(initialBoard ? { initialBoard } : {}),
-    ...(initialListId ? { initialListId } : {}),
-    ...(initialLists ? { initialLists } : {}),
-    wsId,
-    userId,
-    isPersonal,
-  });
-
-  return (
-    <div className={embedded ? 'space-y-4' : 'space-y-4 md:space-y-6'}>
-      {/* Header with greeting + summary cards */}
-      <MyTasksHeader
-        overdueCount={state.filteredTasks.overdueTasks?.length ?? 0}
-        todayCount={state.filteredTasks.todayTasks?.length ?? 0}
-        upcomingCount={state.filteredTasks.upcomingTasks?.length ?? 0}
-      />
-
-      {/* Command Bar */}
-      <div
-        className={embedded ? 'mx-auto max-w-5xl' : 'mx-auto mb-32 max-w-5xl'}
-      >
-        <CommandBar
-          value={state.commandBarInput}
-          onValueChange={state.setCommandBarInput}
-          onCreateTask={state.handleCreateTask}
-          onGenerateAI={state.handleGenerateAI}
-          onOpenBoardSelector={(title, isAi) => {
-            if (title) {
-              state.setPendingTaskTitle(title);
-              state.setTaskCreatorMode(isAi ? 'ai' : 'simple');
-            } else {
-              state.setPendingTaskTitle('');
-              state.setTaskCreatorMode(null);
-            }
-            state.setBoardSelectorOpen(true);
-          }}
-          selectedDestination={state.selectedDestination}
-          onClearDestination={state.handleClearDestination}
-          isLoading={state.commandBarLoading || state.previewMutation.isPending}
-          aiGenerateDescriptions={state.aiGenerateDescriptions}
-          aiGeneratePriority={state.aiGeneratePriority}
-          aiGenerateLabels={state.aiGenerateLabels}
-          onAiGenerateDescriptionsChange={state.setAiGenerateDescriptions}
-          onAiGeneratePriorityChange={state.setAiGeneratePriority}
-          onAiGenerateLabelsChange={state.setAiGenerateLabels}
-          autoAssignToMe={state.autoAssignToMe}
-          onAutoAssignToMeChange={state.setAutoAssignToMe}
-          workspaceLabels={state.workspaceLabels}
-          workspaceProjects={state.workspaceProjects}
-          workspaceMembers={state.workspaceMembers}
-          workspaceEstimationConfig={
-            state.boardConfig
-              ? {
-                  estimation_type: state.boardConfig.estimation_type,
-                  extended_estimation: state.boardConfig.extended_estimation,
-                  allow_zero_estimates: state.boardConfig.allow_zero_estimates,
-                }
-              : null
-          }
-          wsId={wsId}
-          onCreateNewLabel={() => state.setNewLabelDialogOpen(true)}
-          onCreateNewProject={() => state.setNewProjectDialogOpen(true)}
-          aiCreditsExhausted={aiCreditsExhausted}
-          aiCreditsTooltip={
-            aiCreditsExhausted ? t('ai_credits_exhausted_tooltip') : undefined
-          }
-        />
-        <div className="mt-2 flex items-center justify-end">
-          <AiCreditIndicator wsId={wsId} />
-        </div>
-      </div>
-
-      {/* Filters (personal workspace only) */}
-      {isPersonal && (
-        <MyTasksFilters
-          workspacesData={(state.workspacesData || []).map((ws) => ({
-            ...ws,
-            name: ws.name || 'Unnamed Workspace',
-          }))}
-          allBoardsData={(state.allBoardsData || []).map((board) => ({
-            ...board,
-            name: board.name || 'Unnamed Board',
-          }))}
-          taskFilters={state.taskFilters}
-          setTaskFilters={state.setTaskFilters}
-          availableLabels={state.availableLabels}
-          availableProjects={state.availableProjects}
-          workspaceLabels={state.workspaceLabels}
-          workspaceProjects={state.workspaceProjects}
-          onFilterChange={state.handleFilterChange}
-          onLabelFilterChange={state.handleLabelFilterChange}
-          onProjectFilterChange={state.handleProjectFilterChange}
-          onCreateNewBoard={() => {
-            state.setNewBoardName('');
-            state.setNewBoardDialogOpen(true);
-          }}
-        />
-      )}
-
-      {/* Task Sections */}
-      <TaskList
-        wsId={wsId}
-        userId={userId}
-        isPersonal={isPersonal}
-        commandBarLoading={
-          state.commandBarLoading || state.previewMutation.isPending
-        }
-        isAiGenerating={state.previewMutation.isPending}
-        queryLoading={state.queryLoading}
-        overdueTasks={state.filteredTasks.overdueTasks}
-        todayTasks={state.filteredTasks.todayTasks}
-        upcomingTasks={state.filteredTasks.upcomingTasks}
-        completedTasks={state.completedTasks}
-        totalActiveTasks={state.queryData?.totalActiveTasks ?? 0}
-        totalCompletedTasks={state.totalCompletedTasks}
-        hasMoreCompleted={state.hasMoreCompleted}
-        isFetchingMoreCompleted={state.isFetchingMoreCompleted}
-        onFetchMoreCompleted={state.fetchMoreCompleted}
-        collapsedSections={state.collapsedSections}
-        toggleSection={state.toggleSection}
-        handleUpdate={state.handleUpdate}
-        availableLabels={state.workspaceLabels}
-        onCreateNewLabel={() => state.setNewLabelDialogOpen(true)}
-      />
-
-      {/* Board & List Selection Dialog */}
-      <BoardSelectorDialog
-        open={state.boardSelectorOpen}
-        onOpenChange={state.setBoardSelectorOpen}
-        isPersonal={isPersonal}
-        workspacesData={state.workspacesData}
-        selectedWorkspaceId={state.selectedWorkspaceId}
-        onWorkspaceChange={state.handleWorkspaceSelectionChange}
-        boardsData={state.boardsData}
-        boardsLoading={state.boardsLoading}
-        selectedBoardId={state.selectedBoardId}
-        onBoardChange={state.handleBoardSelectionChange}
-        availableLists={state.availableLists}
-        selectedListId={state.selectedListId}
-        onListChange={state.setSelectedListId}
-        taskCreatorMode={state.taskCreatorMode}
-        aiFlowStep={state.aiFlowStep}
-        isSubmitting={state.createTasksMutation.isPending}
-        onConfirm={state.handleBoardSelectorConfirm}
-        onCreateBoard={(name) => {
-          state.setNewBoardName(name);
-          state.setNewBoardDialogOpen(true);
-        }}
-        onCreateList={(name) => {
-          state.setNewListName(name);
-          state.setNewListDialogOpen(true);
-        }}
-        submitShortcut={(submitShortcut as 'enter' | 'cmd_enter') ?? 'enter'}
-      />
-
-      {/* Board Creation Dialog */}
-      <Dialog
-        open={state.newBoardDialogOpen}
-        onOpenChange={state.setNewBoardDialogOpen}
-      >
-        <DialogContent
-          className="p-0"
-          style={{ maxWidth: '1200px', width: '85vw' } as React.CSSProperties}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          <DialogTitle className="sr-only">{t('create_new_board')}</DialogTitle>
-          <TaskBoardForm
-            wsId={state.selectedWorkspaceId}
-            data={{ name: state.newBoardName }}
-            onFinish={(formData) => {
-              state.setNewBoardDialogOpen(false);
-              state.setNewBoardName('');
-              if (formData?.id) state.setSelectedBoardId(formData.id);
-              queryClient.invalidateQueries({
-                queryKey: [
-                  'workspace',
-                  state.selectedWorkspaceId,
-                  'boards-with-lists',
-                ],
-              });
-            }}
-          />
-        </DialogContent>
-      </Dialog>
-
-      {/* List Creation Dialog */}
-      {state.selectedBoardId && (
-        <CreateListDialog
-          open={state.newListDialogOpen}
-          onOpenChange={state.setNewListDialogOpen}
-          boardId={state.selectedBoardId}
-          wsId={state.selectedWorkspaceId}
-          initialName={state.newListName}
-          onSuccess={(listId) => {
-            state.setSelectedListId(listId);
-            state.setNewListName('');
-          }}
-          translations={{
-            listNameAlreadyExists: taskBoardT(
-              'ws-task-boards.layout_settings.list_name_exists'
-            ),
-          }}
-        />
-      )}
-
-      {/* AI Preview Dialog */}
-      <TaskPreviewDialog
-        open={state.previewOpen}
-        onOpenChange={state.setPreviewOpen}
-        previewEntry={state.previewEntry}
-        pendingTaskTitle={state.pendingTaskTitle}
-        lastResult={state.lastResult}
-        workspaceLabels={state.workspaceLabels}
-        workspaceProjects={state.workspaceProjects}
-        boardConfig={state.boardConfig}
-        aiGenerateDescriptions={state.aiGenerateDescriptions}
-        aiGeneratePriority={state.aiGeneratePriority}
-        aiGenerateLabels={state.aiGenerateLabels}
-        clientTimezone={
-          Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC'
-        }
-        selectedLabelIds={state.selectedLabelIds}
-        setSelectedLabelIds={state.setSelectedLabelIds}
-        currentPreviewIndex={state.currentPreviewIndex}
-        setCurrentPreviewIndex={state.setCurrentPreviewIndex}
-        onConfirmReview={state.handleConfirmReview}
-        isCreating={state.createTasksMutation.isPending}
-        submitShortcut={(submitShortcut as 'enter' | 'cmd_enter') ?? 'enter'}
-      />
-
-      {/* Label Creation Dialog */}
-      <TaskNewLabelDialog
-        open={state.newLabelDialogOpen}
-        newLabelName={state.newLabelName}
-        newLabelColor={state.newLabelColor}
-        creatingLabel={state.creatingLabel}
-        onOpenChange={state.setNewLabelDialogOpen}
-        onNameChange={state.setNewLabelName}
-        onColorChange={state.setNewLabelColor}
-        onConfirm={state.handleCreateNewLabel}
-        translations={{
-          create_new_label: taskBoardT('common.create_new_label'),
-          create_new_label_description: taskBoardT(
-            'common.create_new_label_description'
-          ),
-          label_name: taskBoardT('common.label_name'),
-          color: taskBoardT('common.color'),
-          preview: taskBoardT('common.preview'),
-          cancel: taskBoardT('common.cancel'),
-          creating: taskBoardT('common.creating'),
-          create_label: taskBoardT('common.create_label'),
-          randomize_color: taskBoardT('common.randomize_color'),
-        }}
-      />
-
-      {/* Project Creation Dialog */}
-      <TaskNewProjectDialog
-        open={state.newProjectDialogOpen}
-        newProjectName={state.newProjectName}
-        creatingProject={state.creatingProject}
-        onOpenChange={state.setNewProjectDialogOpen}
-        onNameChange={state.setNewProjectName}
-        onConfirm={state.handleCreateNewProject}
-      />
-    </div>
-  );
-}

package/src/components/ui/tu-do/my-tasks/my-tasks-data-loader.tsx

@@ -1,17 +0,0 @@
-import MyTasksContent from './my-tasks-content';
-
-export async function MyTasksDataLoader({
-  wsId,
-  userId,
-  isPersonal,
-}: {
-  wsId: string;
-  userId: string;
-  isPersonal: boolean;
-}) {
-  return (
-    <div className="mx-auto mt-32 max-w-4xl space-y-4 md:space-y-6">
-      <MyTasksContent wsId={wsId} userId={userId} isPersonal={isPersonal} />
-    </div>
-  );
-}

package/src/components/ui/tu-do/my-tasks/my-tasks-filters.tsx

@@ -1,258 +0,0 @@
-'use client';
-
-import { Box, Tag, UserRoundCog, X } from '@tuturuuu/icons';
-import { Badge } from '@tuturuuu/ui/badge';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@tuturuuu/ui/tooltip';
-import { useTranslations } from 'next-intl';
-import { LabelProjectFilter } from './label-project-filter';
-import { TaskFilter } from './task-filter';
-
-interface TaskFiltersState {
-  workspaceIds: string[];
-  boardIds: string[];
-  labelIds: string[];
-  projectIds: string[];
-  selfManagedOnly: boolean;
-}
-
-interface MyTasksFiltersProps {
-  workspacesData: Array<{
-    id: string;
-    name: string | null;
-    personal: boolean | null;
-  }>;
-  allBoardsData: Array<{ id: string; name: string | null; ws_id: string }>;
-  taskFilters: TaskFiltersState;
-  setTaskFilters: React.Dispatch<React.SetStateAction<TaskFiltersState>>;
-  availableLabels: any[];
-  availableProjects: any[];
-  workspaceLabels: any[];
-  workspaceProjects: any[];
-  onFilterChange: (filters: Record<string, any>) => void;
-  onLabelFilterChange: (ids: string[]) => void;
-  onProjectFilterChange: (ids: string[]) => void;
-  onCreateNewBoard: () => void;
-}
-
-export function MyTasksFilters({
-  workspacesData,
-  allBoardsData,
-  taskFilters,
-  setTaskFilters,
-  availableLabels,
-  availableProjects,
-  workspaceLabels,
-  workspaceProjects,
-  onFilterChange,
-  onLabelFilterChange,
-  onProjectFilterChange,
-  onCreateNewBoard,
-}: MyTasksFiltersProps) {
-  const t = useTranslations();
-  const hasActiveFilters =
-    !taskFilters.workspaceIds.includes('all') ||
-    !taskFilters.boardIds.includes('all') ||
-    taskFilters.labelIds.length > 0 ||
-    taskFilters.projectIds.length > 0;
-
-  return (
-    <div className="space-y-2">
-      <div className="flex flex-nowrap justify-start gap-2">
-        <TaskFilter
-          workspaces={(workspacesData || []).map((ws) => ({
-            ...ws,
-            name: ws.name || 'Unnamed Workspace',
-          }))}
-          boards={(allBoardsData || []).map((board) => ({
-            ...board,
-            name: board.name || 'Unnamed Board',
-          }))}
-          onFilterChange={onFilterChange}
-          onCreateNewBoard={onCreateNewBoard}
-        />
-        <LabelProjectFilter
-          labels={availableLabels || []}
-          projects={availableProjects || []}
-          selectedLabelIds={taskFilters.labelIds}
-          selectedProjectIds={taskFilters.projectIds}
-          onSelectedLabelIdsChange={onLabelFilterChange}
-          onSelectedProjectIdsChange={onProjectFilterChange}
-        />
-
-        <Button
-          variant={taskFilters.selfManagedOnly ? 'default' : 'outline'}
-          size="sm"
-          onClick={() =>
-            setTaskFilters((prev) => ({
-              ...prev,
-              selfManagedOnly: !prev.selfManagedOnly,
-            }))
-          }
-          className="shrink-0 gap-1.5"
-        >
-          <UserRoundCog className="h-3.5 w-3.5" />
-          {t('ws-tasks.self_managed')}
-        </Button>
-
-        {/* Filter Chips */}
-        {hasActiveFilters && (
-          <div className="flex items-center gap-2">
-            {(!taskFilters.workspaceIds.includes('all') ||
-              !taskFilters.boardIds.includes('all')) && (
-              <FilterChip
-                onClear={() =>
-                  setTaskFilters((prev) => ({
-                    ...prev,
-                    workspaceIds: ['all'],
-                    boardIds: ['all'],
-                  }))
-                }
-                tooltipContent={
-                  <>
-                    {!taskFilters.workspaceIds.includes('all') &&
-                      workspacesData
-                        ?.filter((ws) =>
-                          taskFilters.workspaceIds.includes(ws.id)
-                        )
-                        .map((ws) => <div key={ws.id}>{ws.name}</div>)}
-                    {!taskFilters.boardIds.includes('all') &&
-                      allBoardsData
-                        ?.filter((b) => taskFilters.boardIds.includes(b.id))
-                        .map((b) => <div key={b.id}>{b.name}</div>)}
-                  </>
-                }
-                showTooltip={
-                  taskFilters.workspaceIds.length > 1 ||
-                  taskFilters.boardIds.length > 1
-                }
-              >
-                {(() => {
-                  const selectedWorkspaces = workspacesData?.filter((ws) =>
-                    taskFilters.workspaceIds.includes(ws.id)
-                  );
-                  const selectedBoards = allBoardsData?.filter((b) =>
-                    taskFilters.boardIds.includes(b.id)
-                  );
-
-                  const workspaceText = !taskFilters.workspaceIds.includes(
-                    'all'
-                  )
-                    ? taskFilters.workspaceIds.length > 1
-                      ? t('ws-tasks.n_workspaces', {
-                          count: taskFilters.workspaceIds.length,
-                        })
-                      : selectedWorkspaces?.[0]?.name
-                    : '';
-
-                  const boardText = !taskFilters.boardIds.includes('all')
-                    ? taskFilters.boardIds.length > 1
-                      ? t('ws-tasks.n_boards', {
-                          count: taskFilters.boardIds.length,
-                        })
-                      : selectedBoards?.[0]?.name
-                    : '';
-
-                  if (workspaceText && boardText)
-                    return `${workspaceText} / ${boardText}`;
-                  return workspaceText || boardText || '';
-                })()}
-              </FilterChip>
-            )}
-            {taskFilters.labelIds.length > 0 && (
-              <FilterChip
-                icon={<Tag className="h-3.5 w-3.5" />}
-                onClear={() =>
-                  setTaskFilters((prev) => ({ ...prev, labelIds: [] }))
-                }
-                tooltipContent={workspaceLabels
-                  ?.filter((l: any) => taskFilters.labelIds.includes(l.id))
-                  .map((l: any) => <div key={l.id}>{l.name}</div>)}
-                showTooltip={taskFilters.labelIds.length > 1}
-              >
-                {taskFilters.labelIds.length > 1
-                  ? t('ws-tasks.n_labels', {
-                      count: taskFilters.labelIds.length,
-                    })
-                  : workspaceLabels?.find(
-                      (l: any) => l.id === taskFilters.labelIds[0]
-                    )?.name}
-              </FilterChip>
-            )}
-            {taskFilters.projectIds.length > 0 && (
-              <FilterChip
-                icon={<Box className="h-3.5 w-3.5" />}
-                onClear={() =>
-                  setTaskFilters((prev) => ({ ...prev, projectIds: [] }))
-                }
-                tooltipContent={workspaceProjects
-                  ?.filter((p: any) => taskFilters.projectIds.includes(p.id))
-                  .map((p: any) => <div key={p.id}>{p.name}</div>)}
-                showTooltip={taskFilters.projectIds.length > 1}
-              >
-                {taskFilters.projectIds.length > 1
-                  ? t('ws-tasks.n_projects', {
-                      count: taskFilters.projectIds.length,
-                    })
-                  : workspaceProjects?.find(
-                      (p: any) => p.id === taskFilters.projectIds[0]
-                    )?.name}
-              </FilterChip>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface FilterChipProps {
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-  onClear: () => void;
-  tooltipContent?: React.ReactNode;
-  showTooltip?: boolean;
-}
-
-function FilterChip({
-  icon,
-  children,
-  onClear,
-  tooltipContent,
-  showTooltip,
-}: FilterChipProps) {
-  const chip = (
-    <Badge
-      variant="secondary"
-      className="group/chip flex items-center gap-x-1.5 rounded-md bg-dynamic-blue/10 px-2.5 py-1 font-medium text-dynamic-blue text-sm"
-    >
-      {icon}
-      <span>{children}</span>
-      <button
-        type="button"
-        onClick={onClear}
-        className="h-full w-0 overflow-hidden pr-0 opacity-0 transition-all group-hover/chip:w-4 group-hover/chip:pr-1 group-hover/chip:opacity-100"
-      >
-        <X className="h-3.5 w-3.5" />
-      </button>
-    </Badge>
-  );
-
-  if (!showTooltip) return chip;
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <div className="inline-flex">{chip}</div>
-        </TooltipTrigger>
-        <TooltipContent>{tooltipContent}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}