arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Merge pull request #62 from artslidd/codex/tablo-overview-builder-v1

Browse source 
Codex/tablo overview builder v1
This commit is contained in:
Arthur Belleville 2026-03-14 14:06:27 +01:00 committed by GitHub
commit ca4ede28bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 739 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/main/src/hooks/tablos.ts
View file

@ -45,6 +45,22 @@ export const useTablo = (id: string) => {
});
};
export const useTabloOverviewLayout = (tabloId: string | undefined) => {
return useQuery({
queryKey: ["tablo-overview-layout", tabloId],
queryFn: async () => {
const { data, error } = await supabase
.from("tablos")
.select("layout_overview_v1")
.eq("id", tabloId)
.single();
if (error) throw error;
return data.layout_overview_v1;
},
enabled: !!tabloId,
});
};
// Fetch tablo members
export const useTabloMembers = (tabloId: string) => {
const api = useAuthedApi();
@ -112,6 +128,7 @@ export const useUpdateTablo = () => {
onSuccess: (_, { id }) => {
queryClient.invalidateQueries({ queryKey: ["tablos"] });
queryClient.invalidateQueries({ queryKey: ["tablos", id] });
queryClient.invalidateQueries({ queryKey: ["tablo-overview-layout", id] });
queryClient.invalidateQueries({ queryKey: ["events", "all"] });
queryClient.invalidateQueries({ queryKey: ["events", id] });
},

143
apps/main/src/pages/tablo-details.layout.test.tsx Normal file
View file

@ -0,0 +1,143 @@
import { screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { renderWithProviders } from "../utils/testHelpers";
import { TabloDetailsPage } from "./tablo-details";
const mutateUpdateTablo = vi.fn();
const mutateUpdateTask = vi.fn();
const tablosData = [
{
id: "tablo-1",
name: "Test Tablo",
color: "bg-blue-500",
image: null,
created_at: "2026-01-01T00:00:00.000Z",
deleted_at: null,
position: 0,
status: "todo",
user_id: "user-1",
is_admin: true,
access_level: "admin",
},
];
const layoutData: unknown = {
version: 1,
leftZone: ["myTasks", "description"],
rightZone: ["files", "info"],
};
vi.mock("../hooks/channel", () => ({
useTabloDiscussionUnread: () => ({
hasUnread: false,
}),
}));
vi.mock("../hooks/tablos", () => ({
useTablosList: () => ({
data: tablosData,
isLoading: false,
}),
useTabloMembers: () => ({
data: [],
}),
useTabloOverviewLayout: () => ({
data: layoutData,
}),
useUpdateTablo: () => ({
mutate: mutateUpdateTablo,
}),
}));
vi.mock("../hooks/tablo_invites", () => ({
usePendingTabloInvitesByTablo: () => ({
data: [],
}),
useCancelTabloInvite: () => ({
mutate: vi.fn(),
isPending: false,
}),
}));
vi.mock("../hooks/invite", () => ({
useInviteUser: () => ({
mutate: vi.fn(),
isPending: false,
}),
}));
vi.mock("../hooks/tasks", () => ({
useAllTasks: () => ({
data: [
{
id: "task-1",
tablo_id: "tablo-1",
assignee_id: "user-1",
title: "Task A",
status: "todo",
},
],
}),
useTabloEtapes: () => ({
data: [],
}),
useUpdateTask: () => ({
mutate: mutateUpdateTask,
}),
useTask: () => ({
data: null,
}),
useCreateEtape: () => ({
mutateAsync: vi.fn(),
isPending: false,
}),
useCreateTask: () => ({
mutate: vi.fn(),
}),
}));
vi.mock("../hooks/tablo_data", () => ({
useTabloFileNames: () => ({
data: {
fileNames: [],
},
}),
}));
vi.mock("../providers/UserStoreProvider", async (importOriginal) => {
const actual = await importOriginal<typeof import("../providers/UserStoreProvider")>();
return {
...actual,
useUser: () => ({
id: "user-1",
name: "Test User",
avatar_url: null,
}),
};
});
describe("TabloDetailsPage overview layout", () => {
it("renders overview cards in persisted left-zone order", () => {
renderWithProviders(<TabloDetailsPage />, {
route: "/tablos/tablo-1",
path: "/tablos/:tabloId",
});
const tasksHeading = screen.getByText("Mes tâches");
const descriptionHeading = screen.getByText("Description du projet");
expect(tasksHeading.compareDocumentPosition(descriptionHeading)).toBe(
Node.DOCUMENT_POSITION_FOLLOWING
);
});
it("shows layout edit toggle for admin users", () => {
renderWithProviders(<TabloDetailsPage />, {
route: "/tablos/tablo-1",
path: "/tablos/:tabloId",
});
expect(screen.getByRole("button", { name: "Modifier la mise en page" })).toBeInTheDocument();
});
});

536
apps/main/src/pages/tablo-details.tsx
View file

@ -50,7 +50,12 @@ import { useTabloDiscussionUnread } from "../hooks/channel";
import { useInviteUser } from "../hooks/invite";
import { useTabloFileNames } from "../hooks/tablo_data";
import { useCancelTabloInvite, usePendingTabloInvitesByTablo } from "../hooks/tablo_invites";
import { useTabloMembers, useTablosList } from "../hooks/tablos";
import {
useTabloMembers,
useTabloOverviewLayout,
useTablosList,
useUpdateTablo,
} from "../hooks/tablos";
import {
useAllTasks,
useCreateEtape,
@ -60,6 +65,13 @@ import {
} from "../hooks/tasks";
import { useUser } from "../providers/UserStoreProvider";
import { getEtapeProgressStats } from "../utils/etapeProgress";
import {
DEFAULT_OVERVIEW_LAYOUT,
type OverviewBlockId,
type OverviewLayoutV1,
sanitizeOverviewLayout,
} from "./tablo-details/overviewLayout";
import { moveBetweenZones, moveWithinZone } from "./tablo-details/overviewReorder";
// ─── Icon helpers ─────────────────────────────────────────────────────────────
@ -170,13 +182,21 @@ export const TabloDetailsPage = () => {
const [showAllOverviewTasks, setShowAllOverviewTasks] = useState(false);
const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
const [inviteEmail, setInviteEmail] = useState("");
const [isLayoutEditMode, setIsLayoutEditMode] = useState(false);
const [draggedOverviewBlock, setDraggedOverviewBlock] = useState<{
zone: "left" | "right";
index: number;
} | null>(null);
const [overviewLayout, setOverviewLayout] = useState<OverviewLayoutV1>(DEFAULT_OVERVIEW_LAYOUT);
const currentUser = useUser();
const { data: members } = useTabloMembers(tabloId ?? "");
const { data: rawOverviewLayout } = useTabloOverviewLayout(tabloId);
const { data: pendingInvites } = usePendingTabloInvitesByTablo(tabloId ?? "");
const { mutate: cancelInvite, isPending: isCancellingInvite } = useCancelTabloInvite();
const { mutate: inviteUser, isPending: isInvitingUser } = useInviteUser();
const { mutate: updateTask } = useUpdateTask();
const { mutate: updateTablo } = useUpdateTablo();
const isEmailValid = (email: string): boolean => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@ -231,6 +251,10 @@ export const TabloDetailsPage = () => {
}
}, [tablos, tabloId, navigate]);
useEffect(() => {
setOverviewLayout(sanitizeOverviewLayout(rawOverviewLayout));
}, [rawOverviewLayout]);
// Tasks for this tablo (used in overview)
const { data: allTasks = [] } = useAllTasks();
const tabloTasks = (allTasks as KanbanTask[]).filter((t) => t.tablo_id === tabloId);
@ -260,6 +284,100 @@ export const TabloDetailsPage = () => {
const TabloIcon = getTabloIcon(tablo.color);
const iconColor = getTabloIconColor(tablo.color);
const persistOverviewLayout = (
nextLayout: OverviewLayoutV1,
previousLayout: OverviewLayoutV1
) => {
setOverviewLayout(nextLayout);
if (!tabloId) return;
updateTablo(
{
id: tabloId,
layout_overview_v1: nextLayout,
},
{
onError: () => {
setOverviewLayout(previousLayout);
},
}
);
};
const buildLayoutWithMetadata = (next: OverviewLayoutV1): OverviewLayoutV1 => ({
...next,
updatedAt: new Date().toISOString(),
updatedBy: currentUser.id,
});
const handleOverviewBlockDragStart = (
event: React.DragEvent<HTMLDivElement>,
zone: "left" | "right",
index: number
) => {
if (!isLayoutEditMode) return;
event.dataTransfer.effectAllowed = "move";
setDraggedOverviewBlock({ zone, index });
};
const handleOverviewBlockDragOver = (event: React.DragEvent<HTMLDivElement>) => {
if (!isLayoutEditMode) return;
event.preventDefault();
event.dataTransfer.dropEffect = "move";
};
const handleOverviewBlockDrop = (zone: "left" | "right", targetIndex: number) => {
if (!isLayoutEditMode || !draggedOverviewBlock) {
setDraggedOverviewBlock(null);
return;
}
const sourceKey = draggedOverviewBlock.zone === "left" ? "leftZone" : "rightZone";
const targetKey = zone === "left" ? "leftZone" : "rightZone";
const sourceZone = overviewLayout[sourceKey];
const targetZone = overviewLayout[targetKey];
const nextLayout =
sourceKey === targetKey
? {
...overviewLayout,
[targetKey]: moveWithinZone(targetZone, draggedOverviewBlock.index, targetIndex),
}
: (() => {
const moved = moveBetweenZones(
sourceZone,
targetZone,
draggedOverviewBlock.index,
targetIndex
);
return {
...overviewLayout,
[sourceKey]: moved.sourceItems,
[targetKey]: moved.targetItems,
};
})();
setDraggedOverviewBlock(null);
if (
nextLayout.leftZone === overviewLayout.leftZone &&
nextLayout.rightZone === overviewLayout.rightZone
) {
return;
}
const previousLayout = overviewLayout;
persistOverviewLayout(buildLayoutWithMetadata(nextLayout), previousLayout);
};
const handleResetOverviewLayout = () => {
const previousLayout = overviewLayout;
const resetLayout = buildLayoutWithMetadata(DEFAULT_OVERVIEW_LAYOUT);
persistOverviewLayout(resetLayout, previousLayout);
};
return (
<div>
{/* ── Header ──────────────────────────────────────────────────────── */}
@ -382,165 +500,287 @@ export const TabloDetailsPage = () => {
{/* ── Tab content ─────────────────────────────────────────────────── */}
<div className="px-4 sm:px-6 pt-6 pb-8">
{activeSection === "overview" && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Left column */}
<div className="lg:col-span-2 space-y-6">
{/* Description */}
<div className="bg-white dark:bg-card rounded-xl border border-border p-6 sm:p-8 shadow-sm">
<h2 className="text-xl sm:text-2xl font-bold text-foreground mb-4">
Description du projet
</h2>
<p className="text-muted-foreground leading-relaxed text-sm sm:text-base">
Ce projet regroupe les tâches, fichiers et événements associés. Utilisez les
onglets ci-dessus pour naviguer entre les différentes sections.
</p>
</div>
{/* Tasks */}
<div className="bg-white dark:bg-card rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
<div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700 gap-3">
<h2 className="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-gray-100">
Mes tâches
{activeSection === "overview" &&
(() => {
const overviewBlocks: Record<OverviewBlockId, React.ReactNode> = {
description: (
<div className="bg-white dark:bg-card rounded-xl border border-border p-6 sm:p-8 shadow-sm">
<h2 className="text-xl sm:text-2xl font-bold text-foreground mb-4">
Description du projet
</h2>
<button
type="button"
onClick={() => openTaskModal()}
className="flex items-center justify-center gap-2 px-3 sm:px-4 py-2 bg-[#804EEC] hover:bg-[#6f3fd4] text-white rounded-xl w-full sm:w-auto transition-colors"
>
<PlusIcon className="w-4 h-4" />
<span className="text-sm">Ajouter</span>
</button>
<p className="text-muted-foreground leading-relaxed text-sm sm:text-base">
Ce projet regroupe les tâches, fichiers et événements associés. Utilisez les
onglets ci-dessus pour naviguer entre les différentes sections.
</p>
</div>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
{myTabloTasks.length === 0 ? (
<div className="p-6 text-center text-muted-foreground text-sm">
Aucune tâche
</div>
) : (
visibleOverviewTasks.map((task) => (
<div
key={task.id}
className="flex items-center gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
onClick={() => setSearchParams({ section: "tasks" })}
>
<button
type="button"
className="shrink-0"
onClick={(e) => {
e.stopPropagation();
if (task.status !== "done") {
updateTask({ id: task.id, status: "done" });
}
}}
aria-label={
task.status === "done"
? "Tâche terminée"
: "Marquer la tâche comme terminée"
}
>
{task.status === "done" ? (
<CircleCheckIcon className="w-5 h-5 text-green-500" />
) : (
<div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" />
)}
</button>
<p
className={cn(
"text-sm font-medium truncate",
task.status === "done"
? "line-through text-gray-400"
: "text-gray-900 dark:text-gray-100"
)}
>
{task.title}
</p>
</div>
))
)}
{myTabloTasks.length > 5 && (
),
myTasks: (
<div className="bg-white dark:bg-card rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
<div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700 gap-3">
<h2 className="text-xl sm:text-2xl font-semibold text-gray-900 dark:text-gray-100">
Mes tâches
</h2>
<button
type="button"
onClick={() => setShowAllOverviewTasks((prev) => !prev)}
className="w-full p-3 text-sm text-[#804EEC] hover:underline text-center"
onClick={() => openTaskModal()}
className="flex items-center justify-center gap-2 px-3 sm:px-4 py-2 bg-[#804EEC] hover:bg-[#6f3fd4] text-white rounded-xl w-full sm:w-auto transition-colors"
>
{showAllOverviewTasks
? "Voir moins"
: `Voir les ${myTabloTasks.length - 5} tâches restantes`}
<PlusIcon className="w-4 h-4" />
<span className="text-sm">Ajouter</span>
</button>
)}
</div>
</div>
</div>
{/* Right column */}
<div className="space-y-6">
{/* Files */}
<div className="bg-white dark:bg-card rounded-xl border border-border p-5 sm:p-6 shadow-sm">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-bold text-foreground">Fichiers</h3>
<button
type="button"
onClick={() => setSearchParams({ section: "files" })}
className="text-sm text-[#804EEC] hover:underline"
>
Voir tout
</button>
</div>
<div className="space-y-3">
{fileNames.length === 0 ? (
<p className="text-sm text-muted-foreground">Aucun fichier</p>
) : (
fileNames.slice(0, 5).map((fileName) => (
<div
key={fileName}
className="flex items-start gap-3 p-3 hover:bg-accent dark:hover:bg-gray-800 rounded-lg transition-colors"
>
<div className="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center shrink-0">
<FileTextIcon className="w-4 h-4 text-red-500" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-foreground text-sm truncate">{fileName}</p>
</div>
<button
type="button"
className="text-muted-foreground hover:text-foreground p-1 shrink-0"
>
<EllipsisVerticalIcon className="w-4 h-4" />
</button>
</div>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
{myTabloTasks.length === 0 ? (
<div className="p-6 text-center text-muted-foreground text-sm">
Aucune tâche
</div>
))
)}
) : (
visibleOverviewTasks.map((task) => (
<div
key={task.id}
className="flex items-center gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
onClick={() => setSearchParams({ section: "tasks" })}
>
<button
type="button"
className="shrink-0"
onClick={(e) => {
e.stopPropagation();
if (task.status !== "done") {
updateTask({ id: task.id, status: "done" });
}
}}
aria-label={
task.status === "done"
? "Tâche terminée"
: "Marquer la tâche comme terminée"
}
>
{task.status === "done" ? (
<CircleCheckIcon className="w-5 h-5 text-green-500" />
) : (
<div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" />
)}
</button>
<p
className={cn(
"text-sm font-medium truncate",
task.status === "done"
? "line-through text-gray-400"
: "text-gray-900 dark:text-gray-100"
)}
>
{task.title}
</p>
</div>
))
)}
{myTabloTasks.length > 5 && (
<button
type="button"
onClick={() => setShowAllOverviewTasks((prev) => !prev)}
className="w-full p-3 text-sm text-[#804EEC] hover:underline text-center"
>
{showAllOverviewTasks
? "Voir moins"
: `Voir les ${myTabloTasks.length - 5} tâches restantes`}
</button>
)}
</div>
</div>
</div>
),
files: (
<div className="bg-white dark:bg-card rounded-xl border border-border p-5 sm:p-6 shadow-sm">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-bold text-foreground">Fichiers</h3>
<button
type="button"
onClick={() => setSearchParams({ section: "files" })}
className="text-sm text-[#804EEC] hover:underline"
>
Voir tout
</button>
</div>
<div className="space-y-3">
{fileNames.length === 0 ? (
<p className="text-sm text-muted-foreground">Aucun fichier</p>
) : (
fileNames.slice(0, 5).map((fileName) => (
<div
key={fileName}
className="flex items-start gap-3 p-3 hover:bg-accent dark:hover:bg-gray-800 rounded-lg transition-colors"
>
<div className="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center shrink-0">
<FileTextIcon className="w-4 h-4 text-red-500" />
</div>
<div className="flex-1 min-w-0">
<p className="font-medium text-foreground text-sm truncate">
{fileName}
</p>
</div>
<button
type="button"
className="text-muted-foreground hover:text-foreground p-1 shrink-0"
>
<EllipsisVerticalIcon className="w-4 h-4" />
</button>
</div>
))
)}
</div>
</div>
),
info: (
<div className="bg-white dark:bg-card rounded-xl border border-border p-5 sm:p-6 shadow-sm">
<h3 className="text-lg font-bold text-foreground mb-4">Informations</h3>
<dl className="space-y-3 text-sm">
<div className="flex justify-between">
<dt className="text-muted-foreground">Tâches</dt>
<dd className="font-medium text-foreground">{tabloTasks.length}</dd>
</div>
<div className="flex justify-between">
<dt className="text-muted-foreground">Fichiers</dt>
<dd className="font-medium text-foreground">{fileNames.length}</dd>
</div>
<div className="flex justify-between">
<dt className="text-muted-foreground">Statut</dt>
<dd
className={cn("px-2 py-0.5 rounded-full text-xs font-medium", badgeClass)}
>
{statusLabel}
</dd>
</div>
<div className="flex justify-between">
<dt className="text-muted-foreground">Rôle</dt>
<dd className="font-medium text-foreground">
{isAdmin ? "Admin" : "Invité"}
</dd>
</div>
</dl>
</div>
),
};
{/* Info */}
<div className="bg-white dark:bg-card rounded-xl border border-border p-5 sm:p-6 shadow-sm">
<h3 className="text-lg font-bold text-foreground mb-4">Informations</h3>
<dl className="space-y-3 text-sm">
<div className="flex justify-between">
<dt className="text-muted-foreground">Tâches</dt>
<dd className="font-medium text-foreground">{tabloTasks.length}</dd>
return (
<>
{isAdmin && (
<div className="flex flex-wrap items-center justify-end gap-2 mb-4">
{isLayoutEditMode && (
<button
type="button"
onClick={handleResetOverviewLayout}
className="border border-gray-300 dark:border-gray-700 text-foreground hover:bg-gray-100 dark:hover:bg-gray-800 font-medium py-2 px-4 rounded-lg transition-colors"
>
Réinitialiser
</button>
)}
<button
type="button"
onClick={() => setIsLayoutEditMode((prev) => !prev)}
className={cn(
"font-medium py-2 px-4 rounded-lg transition-colors",
isLayoutEditMode
? "bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900"
: "border border-[#804EEC] text-[#804EEC] hover:bg-[#804EEC]/10"
)}
>
{isLayoutEditMode ? "Terminer la mise en page" : "Modifier la mise en page"}
</button>
</div>
<div className="flex justify-between">
<dt className="text-muted-foreground">Fichiers</dt>
<dd className="font-medium text-foreground">{fileNames.length}</dd>
)}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div
className="lg:col-span-2 space-y-6"
onDragOver={handleOverviewBlockDragOver}
onDrop={(event) => {
event.preventDefault();
handleOverviewBlockDrop("left", overviewLayout.leftZone.length);
}}
>
{overviewLayout.leftZone.map((blockId, index) => (
<div
key={`${blockId}-${index}`}
draggable={isLayoutEditMode}
onDragStart={(event) => handleOverviewBlockDragStart(event, "left", index)}
onDragOver={handleOverviewBlockDragOver}
onDrop={(event) => {
event.preventDefault();
event.stopPropagation();
handleOverviewBlockDrop("left", index);
}}
onDragEnd={() => setDraggedOverviewBlock(null)}
className={cn(
isLayoutEditMode && "cursor-move",
isLayoutEditMode &&
draggedOverviewBlock?.zone === "left" &&
draggedOverviewBlock.index === index &&
"opacity-60"
)}
>
{isLayoutEditMode && (
<div className="flex items-center justify-end mb-2 text-xs text-muted-foreground">
<EllipsisVerticalIcon className="w-4 h-4 mr-1" />
Glisser pour réorganiser
</div>
)}
{overviewBlocks[blockId]}
</div>
))}
{isLayoutEditMode && overviewLayout.leftZone.length === 0 && (
<div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-4 text-sm text-muted-foreground text-center">
Déposez un bloc ici
</div>
)}
</div>
<div className="flex justify-between">
<dt className="text-muted-foreground">Statut</dt>
<dd className={cn("px-2 py-0.5 rounded-full text-xs font-medium", badgeClass)}>
{statusLabel}
</dd>
<div
className="space-y-6"
onDragOver={handleOverviewBlockDragOver}
onDrop={(event) => {
event.preventDefault();
handleOverviewBlockDrop("right", overviewLayout.rightZone.length);
}}
>
{overviewLayout.rightZone.map((blockId, index) => (
<div
key={`${blockId}-${index}`}
draggable={isLayoutEditMode}
onDragStart={(event) => handleOverviewBlockDragStart(event, "right", index)}
onDragOver={handleOverviewBlockDragOver}
onDrop={(event) => {
event.preventDefault();
event.stopPropagation();
handleOverviewBlockDrop("right", index);
}}
onDragEnd={() => setDraggedOverviewBlock(null)}
className={cn(
isLayoutEditMode && "cursor-move",
isLayoutEditMode &&
draggedOverviewBlock?.zone === "right" &&
draggedOverviewBlock.index === index &&
"opacity-60"
)}
>
{isLayoutEditMode && (
<div className="flex items-center justify-end mb-2 text-xs text-muted-foreground">
<EllipsisVerticalIcon className="w-4 h-4 mr-1" />
Glisser pour réorganiser
</div>
)}
{overviewBlocks[blockId]}
</div>
))}
{isLayoutEditMode && overviewLayout.rightZone.length === 0 && (
<div className="border border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-4 text-sm text-muted-foreground text-center">
Déposez un bloc ici
</div>
)}
</div>
<div className="flex justify-between">
<dt className="text-muted-foreground">Rôle</dt>
<dd className="font-medium text-foreground">{isAdmin ? "Admin" : "Invité"}</dd>
</div>
</dl>
</div>
</div>
</div>
)}
</div>
</>
);
})()}
{activeSection === "tasks" && <TabloTasksSection tablo={tablo} isAdmin={isAdmin} />}
{activeSection === "files" && <TabloFilesSection tablo={tablo} isAdmin={isAdmin} />}

36
apps/main/src/pages/tablo-details/overviewLayout.test.ts Normal file
View file

@ -0,0 +1,36 @@
import { describe, expect, it } from "vitest";
import { DEFAULT_OVERVIEW_LAYOUT, sanitizeOverviewLayout } from "./overviewLayout";
describe("sanitizeOverviewLayout", () => {
it("returns the default layout when input is null", () => {
expect(sanitizeOverviewLayout(null)).toEqual(DEFAULT_OVERVIEW_LAYOUT);
});
it("drops unknown IDs and restores missing required IDs", () => {
const result = sanitizeOverviewLayout({
version: 1,
leftZone: ["description", "unknown"],
rightZone: [],
});
expect(result).toEqual({
version: 1,
leftZone: ["description"],
rightZone: ["myTasks", "files", "info"],
});
});
it("deduplicates IDs across zones and preserves zone split", () => {
const result = sanitizeOverviewLayout({
version: 1,
leftZone: ["description", "files"],
rightZone: ["files", "info", "description"],
});
expect(result).toEqual({
version: 1,
leftZone: ["description", "files"],
rightZone: ["info", "myTasks"],
});
});
});

66
apps/main/src/pages/tablo-details/overviewLayout.ts Normal file
View file

@ -0,0 +1,66 @@
type OverviewLayoutVersion = 1;
export type OverviewBlockId = "description" | "myTasks" | "files" | "info";
export type OverviewLayoutV1 = {
version: OverviewLayoutVersion;
leftZone: OverviewBlockId[];
rightZone: OverviewBlockId[];
updatedAt?: string;
updatedBy?: string;
};
const DEFAULT_LEFT_ZONE: OverviewBlockId[] = ["description", "myTasks"];
const DEFAULT_RIGHT_ZONE: OverviewBlockId[] = ["files", "info"];
const ALL_BLOCK_IDS: OverviewBlockId[] = ["description", "myTasks", "files", "info"];
export const DEFAULT_OVERVIEW_LAYOUT: OverviewLayoutV1 = {
version: 1,
leftZone: DEFAULT_LEFT_ZONE,
rightZone: DEFAULT_RIGHT_ZONE,
};
function unique<T>(items: T[]): T[] {
return [...new Set(items)];
}
function isObject(value: unknown): value is Record<string, unknown> {
return typeof value === "object" && value !== null;
}
function parseZone(value: unknown): OverviewBlockId[] {
if (!Array.isArray(value)) return [];
const valid = value.filter(
(item): item is OverviewBlockId =>
item === "description" || item === "myTasks" || item === "files" || item === "info"
);
return unique(valid);
}
export function sanitizeOverviewLayout(input: unknown): OverviewLayoutV1 {
if (!isObject(input)) {
return DEFAULT_OVERVIEW_LAYOUT;
}
const leftZoneInput = parseZone(input.leftZone);
const rightZoneInput = parseZone(input.rightZone);
const leftZoneSize = leftZoneInput.length;
const allBlocks = unique([...leftZoneInput, ...rightZoneInput]);
for (const blockId of ALL_BLOCK_IDS) {
if (!allBlocks.includes(blockId)) {
allBlocks.push(blockId);
}
}
const safeLeftZoneSize = Math.min(leftZoneSize, allBlocks.length);
const leftZone = allBlocks.slice(0, safeLeftZoneSize);
const rightZone = allBlocks.slice(safeLeftZoneSize);
return {
version: 1,
leftZone,
rightZone,
};
}

32
apps/main/src/pages/tablo-details/overviewReorder.test.ts Normal file
View file

@ -0,0 +1,32 @@
import { describe, expect, it } from "vitest";
import { moveBetweenZones, moveWithinZone } from "./overviewReorder";
describe("moveWithinZone", () => {
it("reorders items within bounds", () => {
expect(moveWithinZone(["a", "b", "c"], 0, 2)).toEqual(["b", "c", "a"]);
});
it("supports moving to end using zone drop target index", () => {
expect(moveWithinZone(["a", "b", "c"], 1, 3)).toEqual(["a", "c", "b"]);
});
it("returns original list when indices are invalid", () => {
expect(moveWithinZone(["a"], 0, 2)).toEqual(["a"]);
});
});
describe("moveBetweenZones", () => {
it("moves one item from source to target at requested index", () => {
expect(moveBetweenZones(["a", "b"], ["c"], 0, 1)).toEqual({
sourceItems: ["b"],
targetItems: ["c", "a"],
});
});
it("returns original zones when source index is invalid", () => {
expect(moveBetweenZones(["a"], ["b"], 2, 0)).toEqual({
sourceItems: ["a"],
targetItems: ["b"],
});
});
});

46
apps/main/src/pages/tablo-details/overviewReorder.ts Normal file
View file

@ -0,0 +1,46 @@
export function moveWithinZone<T>(items: T[], fromIndex: number, toIndex: number): T[] {
if (fromIndex < 0 || fromIndex >= items.length || toIndex < 0 || toIndex > items.length) {
return items;
}
const next = [...items];
const [moved] = next.splice(fromIndex, 1);
const insertionIndex = Math.min(toIndex, next.length);
next.splice(insertionIndex, 0, moved);
if (next.every((item, index) => item === items[index])) {
return items;
}
return next;
}
export function moveBetweenZones<T>(
sourceItems: T[],
targetItems: T[],
sourceIndex: number,
targetIndex: number
): {
sourceItems: T[];
targetItems: T[];
} {
if (
sourceIndex < 0 ||
sourceIndex >= sourceItems.length ||
targetIndex < 0 ||
targetIndex > targetItems.length
) {
return { sourceItems, targetItems };
}
const nextSourceItems = [...sourceItems];
const [moved] = nextSourceItems.splice(sourceIndex, 1);
const nextTargetItems = [...targetItems];
const insertionIndex = Math.min(targetIndex, nextTargetItems.length);
nextTargetItems.splice(insertionIndex, 0, moved);
return {
sourceItems: nextSourceItems,
targetItems: nextTargetItems,
};
}

3
packages/shared-types/src/database.types.ts
View file

@ -570,6 +570,7 @@ export type Database = {
deleted_at: string | null;
id: string;
image: string | null;
layout_overview_v1: Json | null;
name: string;
owner_id: string;
position: number;
@ -582,6 +583,7 @@ export type Database = {
deleted_at?: string | null;
id?: string;
image?: string | null;
layout_overview_v1?: Json | null;
name: string;
owner_id: string;
position?: number;
@ -594,6 +596,7 @@ export type Database = {
deleted_at?: string | null;
id?: string;
image?: string | null;
layout_overview_v1?: Json | null;
name?: string;
owner_id?: string;
position?: number;

5
supabase/migrations/20260314103000_add_tablo_overview_layout_v1.sql Normal file
View file

@ -0,0 +1,5 @@
alter table public.tablos
add column if not exists layout_overview_v1 jsonb;
comment on column public.tablos.layout_overview_v1 is
'Per-tablo overview layout configuration (v1) for tablo-details.';

5
supabase/tests/database/01_schema_structure.test.sql
View file

@ -1,5 +1,5 @@
begin;
select plan(97); -- Total number of tests
select plan(99); -- Total number of tests
-- ============================================================================
-- Table Existence Tests
@ -42,11 +42,13 @@ SELECT has_column('public', 'tablos', 'status', 'tablos should have status colum
SELECT has_column('public', 'tablos', 'position', 'tablos should have position column');
SELECT has_column('public', 'tablos', 'created_at', 'tablos should have created_at column');
SELECT has_column('public', 'tablos', 'deleted_at', 'tablos should have deleted_at column');
SELECT has_column('public', 'tablos', 'layout_overview_v1', 'tablos should have layout_overview_v1 column');
SELECT col_type_is('public', 'tablos', 'owner_id', 'uuid', 'tablos.owner_id should be uuid');
SELECT col_type_is('public', 'tablos', 'name', 'character varying(255)', 'tablos.name should be varchar(255)');
SELECT col_type_is('public', 'tablos', 'status', 'character varying(20)', 'tablos.status should be varchar(20)');
SELECT col_type_is('public', 'tablos', 'position', 'integer', 'tablos.position should be integer');
SELECT col_type_is('public', 'tablos', 'layout_overview_v1', 'jsonb', 'tablos.layout_overview_v1 should be jsonb');
SELECT col_not_null('public', 'tablos', 'owner_id', 'tablos.owner_id should be NOT NULL');
SELECT col_not_null('public', 'tablos', 'name', 'tablos.name should be NOT NULL');
@ -156,4 +158,3 @@ SELECT col_type_is('public', 'note_access', 'is_active', 'boolean', 'note_access
select * from finish();
rollback;