From 97c50a964c1aed24bebfb55f21ed688fe05ccca0 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 10 Jul 2025 22:04:11 +0200
Subject: [PATCH] Add tutorial

---
 ui/src/components/TabloTutorial.tsx | 244 ++++++++++++++++++++++++++++
 ui/src/pages/tablo.tsx              |  85 +++++++++-
 2 files changed, 328 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/components/TabloTutorial.tsx

diff --git a/ui/src/components/TabloTutorial.tsx b/ui/src/components/TabloTutorial.tsx
new file mode 100644
index 0000000..7455184
--- /dev/null
+++ b/ui/src/components/TabloTutorial.tsx
@@ -0,0 +1,244 @@
+import React, { useState } from "react";
+import { Button } from "@ui/ui-library/button";
+import { twMerge } from "tailwind-merge";
+import { X, ArrowRight, ArrowLeft, HelpCircle } from "lucide-react";
+
+interface TutorialStep {
+  id: string;
+  title: string;
+  description: string;
+  target?: string;
+  position?: "top" | "bottom" | "left" | "right";
+  action?: () => void;
+}
+
+interface TabloTutorialProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreateTablo: () => void;
+}
+
+const tutorialSteps: TutorialStep[] = [
+  {
+    id: "welcome",
+    title: "Bienvenue sur XTablo ! 🎉",
+    description:
+      "Découvrez comment XTablo peut révolutionner votre façon de gérer vos projets, équipes et collaborations.",
+  },
+  {
+    id: "what-is-tablo",
+    title: "Qu'est-ce qu'un Tablo ?",
+    description:
+      "Un Tablo est un espace de travail collaboratif qui regroupe toutes les fonctionnalités dont vous avez besoin : conversations, planning, documents et plus encore.",
+  },
+
+  {
+    id: "tablo-features",
+    title: "Fonctionnalités des Tablos",
+    description:
+      "Chaque Tablo vous donne accès à :\n• 💬 Conversations en temps réel\n• 📅 Planning partagé\n• 📝 Notes et documents\n• 👥 Gestion d'équipe",
+  },
+  {
+    id: "tablo-status",
+    title: "Gérer le statut des Tablos",
+    description:
+      "Organisez vos projets avec les statuts :\n• 📋 À faire : Projets en attente\n• 🔄 En cours : Projets actifs\n• ✅ Terminé : Projets complétés",
+  },
+  {
+    id: "collaboration",
+    title: "Collaboration d'équipe",
+    description:
+      "Invitez vos collègues dans vos Tablos. Vous serez Admin du Tablo que vous créez, et pourrez inviter d'autres membres en tant qu'invités.",
+  },
+  {
+    id: "navigation",
+    title: "Navigation rapide",
+    description:
+      "Utilisez le clic droit sur un Tablo pour accéder rapidement aux conversations et au planning. Filtrez vos Tablos par statut pour une meilleure organisation.",
+  },
+  {
+    id: "create-first-tablo",
+    title: "Créer votre premier Tablo",
+    description:
+      "Vous êtes maintenant prêt à utiliser XTablo ! Créez votre premier Tablo pour démarrer votre projet.",
+    target: "create-tablo-button",
+    position: "bottom",
+    action: () => {}, // Will be set by the parent component
+  },
+];
+
+export const TabloTutorial: React.FC<TabloTutorialProps> = ({
+  isOpen,
+  onClose,
+  onCreateTablo,
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const currentStepData = tutorialSteps[currentStep];
+
+  const handleNext = () => {
+    if (currentStep < tutorialSteps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      handleClose();
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleClose = () => {
+    setCurrentStep(0);
+    localStorage.setItem("xtablo-tutorial-completed", "true");
+    onClose();
+  };
+
+  const handleCreateTabloAction = () => {
+    if (currentStepData.id === "create-first-tablo") {
+      onCreateTablo();
+      handleNext();
+    }
+  };
+
+  const handleSkip = () => {
+    setCurrentStep(tutorialSteps.length - 1);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
+      <div
+        className={twMerge(
+          "bg-white dark:bg-gray-800 rounded-xl shadow-2xl",
+          "max-w-2xl w-full mx-4 p-6",
+          "border border-gray-200 dark:border-gray-700"
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
+              <HelpCircle className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+                Guide de démarrage
+              </h2>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Étape {currentStep + 1} sur {tutorialSteps.length}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={handleClose}
+            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="mb-6">
+          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+            <div
+              className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+              style={{
+                width: `${((currentStep + 1) / tutorialSteps.length) * 100}%`,
+              }}
+            />
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="mb-8">
+          <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+            {currentStepData.title}
+          </h3>
+          <div className="text-gray-600 dark:text-gray-300 text-lg leading-relaxed whitespace-pre-line">
+            {currentStepData.description}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            {currentStep > 0 && (
+              <Button
+                variant="outline"
+                onPress={handlePrevious}
+                className="flex items-center gap-2"
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Précédent
+              </Button>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {currentStep < tutorialSteps.length - 1 && (
+              <Button
+                variant="outline"
+                onPress={handleSkip}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                Passer
+              </Button>
+            )}
+
+            {currentStepData.id === "create-first-tablo" ? (
+              <Button
+                onPress={handleCreateTabloAction}
+                className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
+              >
+                Créer mon premier Tablo
+                <ArrowRight className="w-4 h-4" />
+              </Button>
+            ) : (
+              <Button
+                onPress={
+                  currentStep === tutorialSteps.length - 1
+                    ? handleClose
+                    : handleNext
+                }
+                className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
+              >
+                {currentStep === tutorialSteps.length - 1
+                  ? "Commencer"
+                  : "Suivant"}
+                <ArrowRight className="w-4 h-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Completion Message */}
+        {currentStep === tutorialSteps.length - 1 && (
+          <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+            <div className="flex items-center gap-2">
+              <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
+                <svg
+                  className="w-3 h-3 text-white"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <span className="text-green-800 dark:text-green-200 font-medium">
+                Félicitations ! Vous êtes prêt à utiliser XTablo.
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index 89627c6..e632346 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -2,6 +2,7 @@ import { SignOutButton } from "@ui/components/SignOutButton";
 import { CreateTabloModal } from "@ui/components/CreateTabloModal";
 import { TabloModal } from "@ui/components/TabloModal";
 import { DeleteTabloModal } from "@ui/components/DeleteTabloModal";
+import { TabloTutorial } from "@ui/components/TabloTutorial";
 import {
   Select,
   SelectButton,
@@ -9,7 +10,7 @@ import {
   SelectListBox,
   SelectListItem,
 } from "@ui/ui-library/select";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   useTablosList,
   useCreateTablo,
@@ -19,6 +20,7 @@ import {
 import { LoadingSpinner } from "@ui/components/LoadingSpinner";
 import { TabloInsert, TabloUpdate, UserTablo } from "@ui/types/tablos.types";
 import { useNavigate } from "react-router-dom";
+import { HelpCircle } from "lucide-react";
 
 type FilterOption = {
   id: "all" | "todo" | "in_progress" | "done";
@@ -45,6 +47,9 @@ export const TabloPage = () => {
   const [filterType, setFilterType] = useState<
     "all" | "todo" | "in_progress" | "done"
   >("all");
+  const [isTutorialOpen, setIsTutorialOpen] = useState(false);
+  const [hasInteractedWithTutorial, setHasInteractedWithTutorial] =
+    useState(false);
   const navigate = useNavigate();
 
   const { data: tablos, isLoading, error } = useTablosList();
@@ -52,6 +57,22 @@ export const TabloPage = () => {
   const { mutateAsync: updateTablo } = useUpdateTablo();
   const { mutateAsync: deleteTablo } = useDeleteTablo();
 
+  // Check if tutorial should be shown
+  useEffect(() => {
+    const tutorialCompleted = localStorage.getItem("xtablo-tutorial-completed");
+    const tutorialInteracted = localStorage.getItem(
+      "xtablo-tutorial-interacted"
+    );
+
+    // Show tutorial if user hasn't completed it and has no tablos
+    if (!tutorialCompleted && !isLoading && tablos && tablos.length === 0) {
+      setIsTutorialOpen(true);
+    }
+
+    // Check if user has interacted with tutorial before
+    setHasInteractedWithTutorial(!!tutorialInteracted);
+  }, [tablos, isLoading]);
+
   // Filter tablos based on status
   const filteredTablos = tablos?.filter((tablo) => {
     if (filterType === "todo") {
@@ -183,6 +204,20 @@ export const TabloPage = () => {
     setIsDeleting(false);
   };
 
+  const handleCloseTutorial = () => {
+    setIsTutorialOpen(false);
+  };
+
+  const handleOpenTutorial = () => {
+    setIsTutorialOpen(true);
+    setHasInteractedWithTutorial(true);
+    localStorage.setItem("xtablo-tutorial-interacted", "true");
+  };
+
+  const handleTutorialCreateTablo = () => {
+    setIsCreateModalOpen(true);
+  };
+
   const getUserRole = (tablo: UserTablo) => {
     return tablo.is_admin ? "Admin" : "Invité";
   };
@@ -544,6 +579,46 @@ export const TabloPage = () => {
           Tablos
         </h1>
         <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
+            {!hasInteractedWithTutorial && (
+              <div className="flex items-center gap-1 px-3 py-1 bg-blue-50 dark:bg-blue-950 rounded-full border border-blue-200 dark:border-blue-800 animate-pulse shadow-lg shadow-blue-200/50 dark:shadow-blue-800/50">
+                <span className="text-sm font-medium text-blue-700 dark:text-blue-300">
+                  Avant de commencer
+                </span>
+                <svg
+                  className="w-4 h-4 text-blue-600 dark:text-blue-400"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </div>
+            )}
+            <button
+              className={`p-2 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors ${
+                !hasInteractedWithTutorial
+                  ? "animate-pulse bg-blue-50 dark:bg-blue-950 rounded-lg shadow-lg ring-2 ring-blue-200 dark:ring-blue-800 ring-opacity-50"
+                  : ""
+              }`}
+              onClick={handleOpenTutorial}
+              title="Aide - Revoir le guide"
+            >
+              <HelpCircle
+                className={`w-5 h-5 ${
+                  !hasInteractedWithTutorial
+                    ? "text-blue-600 dark:text-blue-400"
+                    : ""
+                }`}
+              />
+            </button>
+          </div>
+
           {/* Filter Controls */}
           <div className="flex items-center gap-2">
             <Select
@@ -568,6 +643,7 @@ export const TabloPage = () => {
           </div>
 
           <button
+            id="create-tablo-button"
             type="button"
             className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
             onClick={openCreateModal}
@@ -671,6 +747,13 @@ export const TabloPage = () => {
           isDeleting={isDeleting}
         />
       )}
+
+      {/* Tutorial */}
+      <TabloTutorial
+        isOpen={isTutorialOpen}
+        onClose={handleCloseTutorial}
+        onCreateTablo={handleTutorialCreateTablo}
+      />
     </div>
   );
 };