@tuturuuu/ui 0.13.0 → 0.16.0

package/src/components/ui/tu-do/progress/task-progress-panels.tsx

@@ -22,15 +22,17 @@ export function SummaryCard({
   value: number;
 }) {
   return (
-    <Card>
+    <Card className="group overflow-hidden transition-all hover:-translate-y-0.5 hover:shadow-md">
       <CardHeader className="pb-2">
         <CardTitle className="flex items-center gap-2 text-muted-foreground text-sm">
-          {icon}
+          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-dynamic-blue/10 text-dynamic-blue transition-transform group-hover:scale-110">
+            {icon}
+          </span>
           {label}
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="font-bold text-2xl">
+        <div className="font-bold text-3xl tracking-tight">
           {Number(value).toLocaleString()}
         </div>
       </CardContent>
@@ -49,7 +51,7 @@ function MetricSelect({
 }) {
   return (
     <select
-      className="h-10 rounded-md border bg-background px-3 text-sm"
+      className="h-11 w-full rounded-xl border bg-background px-3 text-sm shadow-sm outline-none transition focus:border-dynamic-blue focus:ring-2 focus:ring-dynamic-blue/15"
       defaultValue={selectedMetric?.id}
       name={name}
       required
@@ -81,8 +83,8 @@ export function ProgressPanel(props: {
   } = props;
 
   return (
-    <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
-      <Card>
+    <div className="grid gap-4 xl:grid-cols-[minmax(20rem,0.75fr)_minmax(0,1.25fr)]">
+      <Card className="h-fit xl:sticky xl:top-6">
         <CardHeader>
           <CardTitle>{t('progress.log_entry')}</CardTitle>
         </CardHeader>
@@ -138,7 +140,7 @@ export function ProgressPanel(props: {
           ) : (
             entries.map((entry) => (
               <div
-                className="flex items-start justify-between gap-3 rounded-md border p-3"
+                className="flex items-start justify-between gap-3 rounded-xl border bg-background p-4 transition-colors hover:bg-muted/30"
                 key={entry.id}
               >
                 <div>
@@ -177,8 +179,8 @@ export function GoalsPanel(props: {
   const { createGoalMutation, goals, metrics, selectedMetric, t } = props;
 
   return (
-    <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
-      <Card>
+    <div className="grid gap-4 xl:grid-cols-[minmax(20rem,0.75fr)_minmax(0,1.25fr)]">
+      <Card className="h-fit xl:sticky xl:top-6">
         <CardHeader>
           <CardTitle>{t('goals.create_goal')}</CardTitle>
         </CardHeader>
@@ -202,7 +204,7 @@ export function GoalsPanel(props: {
             <Input defaultValue={today()} name="period_start" type="date" />
             <Input name="period_end" type="date" />
             <select
-              className="h-10 rounded-md border bg-background px-3 text-sm"
+              className="h-11 rounded-xl border bg-background px-3 text-sm shadow-sm outline-none focus:border-dynamic-blue focus:ring-2 focus:ring-dynamic-blue/15"
               name="goal_type"
             >
               <option value="target">{t('goal_types.target')}</option>

package/src/components/ui/tu-do/projects/components/project-grid-card.tsx

@@ -30,6 +30,7 @@ interface ProjectGridCardProps {
   onDelete: (projectId: string) => void;
   onManageTasks: (project: TaskProject) => void;
   onNavigate: (projectId: string) => void;
+  navigationMode?: 'dialog' | 'route';
   isUpdating: boolean;
   isDeleting: boolean;
   isLinking: boolean;
@@ -43,6 +44,7 @@ export function ProjectGridCard({
   onDelete,
   onManageTasks,
   onNavigate,
+  navigationMode = 'route',
   isUpdating,
   isDeleting,
   isLinking,
@@ -132,15 +134,29 @@ export function ProjectGridCard({
           <Link2 className="h-4 w-4" />
           {t('manage')}
         </Button>
-        <NextLink
-          href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
-          onClick={(event) => event.stopPropagation()}
-        >
-          <Button size="sm" className="w-full gap-2">
+        {navigationMode === 'route' ? (
+          <NextLink
+            href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <Button size="sm" className="w-full gap-2">
+              <ExternalLink className="h-4 w-4" />
+              {t('open')}
+            </Button>
+          </NextLink>
+        ) : (
+          <Button
+            size="sm"
+            className="w-full gap-2"
+            onClick={(event) => {
+              event.stopPropagation();
+              onNavigate(project.id);
+            }}
+          >
             <ExternalLink className="h-4 w-4" />
             {t('open')}
           </Button>
-        </NextLink>
+        )}
       </div>
     </Card>
   );

package/src/components/ui/tu-do/projects/components/project-list-item.tsx

@@ -30,6 +30,7 @@ interface ProjectListItemProps {
   onDelete: (projectId: string) => void;
   onManageTasks: (project: TaskProject) => void;
   onNavigate: (projectId: string) => void;
+  navigationMode?: 'dialog' | 'route';
   isUpdating: boolean;
   isDeleting: boolean;
   isLinking: boolean;
@@ -43,6 +44,7 @@ export function ProjectListItem({
   onDelete,
   onManageTasks,
   onNavigate,
+  navigationMode = 'route',
   isUpdating,
   isDeleting,
   isLinking,
@@ -61,14 +63,28 @@ export function ProjectListItem({
         <div className="min-w-0 space-y-3">
           <div className="flex items-start justify-between gap-3">
             <div className="min-w-0">
-              <NextLink
-                href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
-                className="inline-flex max-w-full items-center gap-2 font-semibold text-lg hover:text-dynamic-blue"
-                onClick={(event) => event.stopPropagation()}
-              >
-                <span className="truncate">{project.name}</span>
-                <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
-              </NextLink>
+              {navigationMode === 'route' ? (
+                <NextLink
+                  href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
+                  className="inline-flex max-w-full items-center gap-2 font-semibold text-lg hover:text-dynamic-blue"
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  <span className="truncate">{project.name}</span>
+                  <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+                </NextLink>
+              ) : (
+                <button
+                  type="button"
+                  className="inline-flex max-w-full items-center gap-2 text-left font-semibold text-lg hover:text-dynamic-blue"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onNavigate(project.id);
+                  }}
+                >
+                  <span className="truncate">{project.name}</span>
+                  <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+                </button>
+              )}
               <p className="mt-1 line-clamp-2 text-muted-foreground text-sm">
                 {project.description || t('no_description')}
               </p>

package/src/components/ui/tu-do/projects/projectId/components/__tests__/tasks-tab-layout.test.tsx

@@ -160,4 +160,10 @@ describe('TasksTab layout', () => {
     expect(captured.listViewProps.preserveTaskOrder).toBe(true);
     expect(captured.listViewProps.searchQuery).toBe('project');
   });
+
+  it('omits removed projects route back link in embedded mode', () => {
+    renderTasksTab({ embedded: true });
+
+    expect(captured.boardHeaderProps.backUrl).toBeUndefined();
+  });
 });

package/src/components/ui/tu-do/projects/projectId/components/tasks-tab.tsx

@@ -38,6 +38,7 @@ interface TasksTabProps {
   setListStatusFilter: (filter: ListStatusFilter) => void;
   setShowLinkTaskDialog: (show: boolean) => void;
   onTaskPartialUpdate: (taskId: string, partial: Partial<Task>) => void;
+  embedded?: boolean;
   isMultiSelectMode: boolean;
   setIsMultiSelectMode: (mode: boolean) => void;
 }
@@ -58,6 +59,7 @@ export function TasksTab({
   setListStatusFilter,
   setShowLinkTaskDialog,
   onTaskPartialUpdate,
+  embedded = false,
   isMultiSelectMode,
   setIsMultiSelectMode,
 }: TasksTabProps) {
@@ -207,7 +209,7 @@ export function TasksTab({
             listStatusFilter={listStatusFilter}
             onListStatusFilterChange={setListStatusFilter}
             isPersonalWorkspace={workspace.personal}
-            backUrl={`/${wsId}${tasksHref('/projects')}`}
+            backUrl={embedded ? undefined : `/${wsId}${tasksHref('/projects')}`}
             hideActions={true}
             isMultiSelectMode={isMultiSelectMode}
             setIsMultiSelectMode={setIsMultiSelectMode}

package/src/components/ui/tu-do/projects/projectId/task-project-detail-page-client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
+import { Loader2 } from '@tuturuuu/icons';
 import {
   getWorkspaceTaskProject,
   getWorkspaceTaskProjectTasks,
@@ -16,8 +17,9 @@ interface Props {
   projectId: string;
   currentUserId: string;
   workspace: Workspace;
-  initialProject: TaskProjectWithRelations;
-  initialProjectData: { tasks: Task[]; documents: Task[]; lists: TaskList[] };
+  embedded?: boolean;
+  initialProject?: TaskProjectWithRelations;
+  initialProjectData?: { tasks: Task[]; documents: Task[]; lists: TaskList[] };
 }
 
 export default function TaskProjectDetailPageClient({
@@ -25,6 +27,7 @@ export default function TaskProjectDetailPageClient({
   projectId,
   currentUserId,
   workspace,
+  embedded = false,
   initialProject,
   initialProjectData,
 }: Props) {
@@ -53,7 +56,11 @@ export default function TaskProjectDetailPageClient({
   }
 
   if (!project || !projectData) {
-    return null;
+    return (
+      <div className="flex min-h-[320px] items-center justify-center">
+        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    );
   }
 
   const lists: TaskList[] = (projectData.lists ?? []).map((list) => ({
@@ -79,6 +86,7 @@ export default function TaskProjectDetailPageClient({
       documents={projectData.documents ?? []}
       lists={lists}
       currentUserId={currentUserId}
+      embedded={embedded}
       wsId={wsId}
     />
   );

package/src/components/ui/tu-do/projects/projectId/task-project-detail.tsx

@@ -38,6 +38,7 @@ export function TaskProjectDetail({
   documents,
   lists,
   currentUserId,
+  embedded = false,
   wsId,
 }: TaskProjectDetailProps) {
   const router = useRouter();
@@ -334,6 +335,7 @@ export function TaskProjectDetail({
               setListStatusFilter={setListStatusFilter}
               setShowLinkTaskDialog={taskLinking.setShowLinkTaskDialog}
               onTaskPartialUpdate={handleTaskPartialUpdate}
+              embedded={embedded}
               isMultiSelectMode={isMultiSelectMode}
               setIsMultiSelectMode={setIsMultiSelectMode}
             />

package/src/components/ui/tu-do/projects/projectId/types.ts

@@ -24,6 +24,7 @@ export interface TaskProjectDetailProps {
   documents: Task[];
   lists: TaskList[];
   currentUserId: string;
+  embedded?: boolean;
   wsId: string;
 }
 

package/src/components/ui/tu-do/projects/task-projects-client.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 import { useCallback, useMemo, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../dialog';
 import { useTasksHref } from '../tasks-route-context';
 import {
   ProjectGridCard,
@@ -16,11 +17,15 @@ import {
   ManageTasksDialog,
 } from './dialogs';
 import { useProjectFilters, useTaskProjects } from './hooks';
+import TaskProjectDetailPageClient from './projectId/task-project-detail-page-client';
 import type { TaskProject, TaskProjectsClientProps } from './types';
 
 export function TaskProjectsClient({
+  currentUserId,
+  detailMode = 'route',
   wsId,
   initialProjects,
+  workspace,
 }: TaskProjectsClientProps) {
   const router = useRouter();
   const tasksHref = useTasksHref();
@@ -34,6 +39,9 @@ export function TaskProjectsClient({
   const [managingProject, setManagingProject] = useState<TaskProject | null>(
     null
   );
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
+    null
+  );
 
   // Custom hooks
   const taskProjects = useTaskProjects({
@@ -74,6 +82,11 @@ export function TaskProjectsClient({
       ),
     [taskProjects.projects]
   );
+  const selectedProject = selectedProjectId
+    ? (taskProjects.projects.find(
+        (project) => project.id === selectedProjectId
+      ) ?? null)
+    : null;
 
   // Handlers
   const handleEditProject = (project: TaskProject) => {
@@ -120,9 +133,14 @@ export function TaskProjectsClient({
 
   const navigateToProject = useCallback(
     (projectId: string) => {
+      if (detailMode === 'dialog' && workspace && currentUserId) {
+        setSelectedProjectId(projectId);
+        return;
+      }
+
       router.push(`/${wsId}${tasksHref(`/projects/${projectId}`)}`);
     },
-    [router, wsId, tasksHref]
+    [currentUserId, detailMode, router, tasksHref, workspace, wsId]
   );
 
   return (
@@ -168,6 +186,7 @@ export function TaskProjectsClient({
               onDelete={taskProjects.deleteProject}
               onManageTasks={handleOpenManageTasks}
               onNavigate={navigateToProject}
+              navigationMode={detailMode}
               isUpdating={taskProjects.isUpdating}
               isDeleting={taskProjects.isDeleting}
               isLinking={taskProjects.isLinking}
@@ -186,6 +205,7 @@ export function TaskProjectsClient({
               onDelete={taskProjects.deleteProject}
               onManageTasks={handleOpenManageTasks}
               onNavigate={navigateToProject}
+              navigationMode={detailMode}
               isUpdating={taskProjects.isUpdating}
               isDeleting={taskProjects.isDeleting}
               isLinking={taskProjects.isLinking}
@@ -221,6 +241,30 @@ export function TaskProjectsClient({
         isLinking={taskProjects.isLinking}
         isUnlinking={taskProjects.isUnlinking}
       />
+
+      <Dialog
+        open={Boolean(selectedProjectId)}
+        onOpenChange={(open) => {
+          if (!open) setSelectedProjectId(null);
+        }}
+      >
+        <DialogContent className="max-h-[90vh] max-w-6xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="sr-only">
+              {selectedProject?.name ?? ''}
+            </DialogTitle>
+          </DialogHeader>
+          {selectedProjectId && workspace && currentUserId && (
+            <TaskProjectDetailPageClient
+              currentUserId={currentUserId}
+              embedded
+              projectId={selectedProjectId}
+              workspace={workspace}
+              wsId={wsId}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

package/src/components/ui/tu-do/projects/types.ts

@@ -1,5 +1,5 @@
 import type { TaskProjectLinkedItem } from '@tuturuuu/internal-api/tasks';
-import type { TaskProjectWithRelations } from '@tuturuuu/types';
+import type { TaskProjectWithRelations, Workspace } from '@tuturuuu/types';
 
 export type ProjectStatus =
   | 'backlog'
@@ -30,6 +30,9 @@ export interface TaskProject extends TaskProjectWithRelations {
 export interface TaskProjectsClientProps {
   wsId: string;
   initialProjects: TaskProject[];
+  currentUserId?: string;
+  detailMode?: 'dialog' | 'route';
+  workspace?: Workspace | null;
 }
 
 export interface TaskOption {

package/src/components/ui/tu-do/providers/task-dialog-provider.tsx

@@ -70,6 +70,10 @@ interface TaskDialogState {
   taskWorkspaceTier?: WorkspaceProductTier;
   /** Initial board/list context used for immediate partial-task rendering. */
   initialSharedContext?: SharedTaskContext;
+  /** Board that supplied the visible task card before source-task hydration. */
+  visibleBoardId?: string;
+  /** Visible task snapshot before hydration, used to preserve overlay metadata. */
+  visibleTaskSnapshot?: Partial<Task>;
   /** True while an existing task was opened from a partial snapshot and is hydrating. */
   isHydratingTask?: boolean;
   /** True when the latest hydration request failed after the dialog already opened. */
@@ -90,6 +94,8 @@ interface OpenTaskByIdOptions {
   canUseBoardAssignees?: boolean;
   assigneeMemberSource?: TaskAssigneeMemberSource;
   initialSharedContext?: SharedTaskContext;
+  visibleBoardId?: string;
+  visibleTaskSnapshot?: Partial<Task>;
 }
 
 interface TaskDialogContextValue {
@@ -486,6 +492,8 @@ export function TaskDialogProvider({
         assigneeMemberSource: options?.assigneeMemberSource,
         taskWorkspaceTier: options?.taskWorkspaceTier,
         initialSharedContext: options?.initialSharedContext,
+        visibleBoardId: options?.visibleBoardId,
+        visibleTaskSnapshot: options?.visibleTaskSnapshot,
         isHydratingTask: true,
         taskLoadError: false,
         taskHydrationVersion: 0,
@@ -567,6 +575,8 @@ export function TaskDialogProvider({
             options?.canUseBoardAssignees ?? !isTaskWorkspacePersonal,
           assigneeMemberSource: options?.assigneeMemberSource,
           taskWorkspaceTier,
+          visibleBoardId: options?.visibleBoardId,
+          visibleTaskSnapshot: options?.visibleTaskSnapshot,
           isHydratingTask: false,
           taskLoadError: false,
           taskHydrationVersion: 1,

package/src/components/ui/tu-do/shared/__tests__/board-client.test.tsx

@@ -209,10 +209,16 @@ describe('BoardClient', () => {
     );
 
     expect(screen.getByTestId('task-board-loading-state')).toHaveClass(
-      '-m-4',
+      '-mt-4',
+      '-mb-4',
+      '-ml-4',
       'h-[calc(100dvh+2rem)]',
       'w-[calc(100%+2rem)]'
     );
+    expect(screen.getByTestId('task-board-loading-state')).not.toHaveClass(
+      '-m-4',
+      '-mr-4'
+    );
     expect(
       screen.getByTestId('task-board-header-skeleton')
     ).toBeInTheDocument();

package/src/components/ui/tu-do/shared/__tests__/board-header.test.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { SidebarContext } from '@tuturuuu/ui/custom/sidebar-context';
 import type React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { BoardHeader } from '../board-header';
@@ -180,7 +181,8 @@ const mockBoard = {
 } as const;
 
 function renderBoardHeader(
-  overrides?: Partial<React.ComponentProps<typeof BoardHeader>>
+  overrides?: Partial<React.ComponentProps<typeof BoardHeader>>,
+  sidebarContext?: React.ContextType<typeof SidebarContext>
 ) {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -190,7 +192,7 @@ function renderBoardHeader(
     },
   });
 
-  return render(
+  const content = (
     <QueryClientProvider client={queryClient}>
       <BoardHeader
         workspaceId="ws-1"
@@ -221,6 +223,16 @@ function renderBoardHeader(
       />
     </QueryClientProvider>
   );
+
+  return render(
+    sidebarContext ? (
+      <SidebarContext.Provider value={sidebarContext}>
+        {content}
+      </SidebarContext.Provider>
+    ) : (
+      content
+    )
+  );
 }
 
 describe('BoardHeader', () => {
@@ -247,6 +259,79 @@ describe('BoardHeader', () => {
     );
   });
 
+  it('renders a compact hide-sidebar button when sidebar context is available', () => {
+    const handleBehaviorChange = vi.fn();
+
+    renderBoardHeader(undefined, {
+      behavior: 'expanded',
+      handleBehaviorChange,
+      localOverride: false,
+      setBehavior: vi.fn(),
+      setLocalOverride: vi.fn(),
+    });
+
+    const hideButton = screen.getByRole('button', {
+      name: 'common.hide_sidebar',
+    });
+
+    expect(hideButton).toHaveClass('border', 'h-7', 'w-7', 'px-0');
+    fireEvent.click(hideButton);
+    expect(handleBehaviorChange).toHaveBeenCalledWith('hidden');
+  });
+
+  it('does not render the hide-sidebar button without context or when already hidden', () => {
+    const { rerender } = renderBoardHeader();
+
+    expect(
+      screen.queryByRole('button', { name: 'common.hide_sidebar' })
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <SidebarContext.Provider
+        value={{
+          behavior: 'hidden',
+          handleBehaviorChange: vi.fn(),
+          localOverride: false,
+          setBehavior: vi.fn(),
+          setLocalOverride: vi.fn(),
+        }}
+      >
+        <QueryClientProvider client={new QueryClient()}>
+          <BoardHeader
+            workspaceId="ws-1"
+            board={mockBoard}
+            currentView="kanban"
+            filters={{
+              assignees: [],
+              dueDateRange: null,
+              estimationRange: null,
+              includeMyTasks: false,
+              includeUnassigned: false,
+              labels: [],
+              priorities: [],
+              projects: [],
+              sourceBoardIds: [],
+              sourceScope: 'all_visible',
+              sourceWorkspaceIds: [],
+            }}
+            isMultiSelectMode={false}
+            isPersonalWorkspace={false}
+            listStatusFilter="all"
+            onFiltersChange={vi.fn()}
+            onListStatusFilterChange={vi.fn()}
+            onUpdate={vi.fn()}
+            onViewChange={vi.fn()}
+            setIsMultiSelectMode={vi.fn()}
+          />
+        </QueryClientProvider>
+      </SidebarContext.Provider>
+    );
+
+    expect(
+      screen.queryByRole('button', { name: 'common.hide_sidebar' })
+    ).not.toBeInTheDocument();
+  });
+
   it('prefetches current board settings before opening the dialog', async () => {
     renderBoardHeader();