Added a special effect when a user uploads his first file

app/[locale]/dashboard/components/file-upload.tsx

@@ -25,7 +25,7 @@ import { addDays, format } from "date-fns";
 import { valibotResolver } from "@hookform/resolvers/valibot";
 import { type FileAttributes } from "@/interfaces/File";
 import { useLocale, useTranslations } from "next-intl";
-import { useEffect, useState, useActionState } from "react";
+import { useEffect, useState, useCallback, useActionState } from "react";
 
 import { Label } from "../../components/ui/label";
 import { Input } from "../../components/ui/input";
@@ -171,6 +171,24 @@ export default function FileUpload( {
 		);
 	};
 
+	// Lance des confettis pour le premier téléversement d'un fichier.
+	//  Source : https://github.com/nextui-org/nextui/blob/1485eca48fce8a0acc42fe40590b828c1a90ff48/apps/docs/components/demos/custom-button.tsx#L11-L36
+	const throwConfettis = useCallback( async () =>
+	{
+		const confetti = ( await import( "canvas-confetti" ) ).default;
+
+		confetti( {
+			origin: {
+				x: 0.5,
+				y: 0.75
+			},
+			spread: 90,
+			zIndex: 10,
+			particleCount: 100,
+			disableForReducedMotion: true
+		} );
+	}, [] );
+
 	// Mise à jour automatique du quota utilisateur.
 	useEffect( () =>
 	{
@@ -245,12 +263,18 @@ export default function FileUpload( {
 
 			// On filtre les fichiers déjà existants pour éviter les
 			//  doublons avant de mettre à jour la liste des fichiers.
-			setFiles( ( previous ) => [
-				...previous.filter(
-					( value ) => !uploaded.find( ( file ) => file.uuid === value.uuid )
-				),
-				...uploaded
-			] );
+			setFiles( ( previous ) =>
+			{
+				if ( previous.length === 0 )
+				{
+					throwConfettis();
+				}
+
+				return [
+					...previous.filter( ( value ) => !uploaded.find( ( file ) => file.uuid === value.uuid ) ),
+					...uploaded
+				];
+			} );
 		}
 
 		// On affiche enfin une notification avec la raison fournie
@@ -272,7 +296,7 @@ export default function FileUpload( {
 				description: reason
 			} );
 		}
-	}, [ form, setFiles, formMessages, uploadState ] );
+	}, [ form, setFiles, formMessages, uploadState, throwConfettis ] );
 
 	// Affichage de la fenêtre modale de clé de déchiffrement.
 	if ( key && !isOpen )

package.json

@@ -49,6 +49,7 @@
     "@types/bcrypt": "~5.0",
     "@types/react-dom": "~18.3",
     "@types/nodemailer": "~6.4",
+    "@types/canvas-confetti": "~1.6",
     "clsx": "~2.1",
     "husky": "~9.1",
     "prisma": "~6.0",
@@ -67,6 +68,7 @@
     "tailwind-merge": "~2.5",
     "react-hook-form": "~7.53",
     "@faker-js/faker": "~9.2",
+    "canvas-confetti": "~1.9",
     "@playwright/test": "~1.49",
     "react-day-picker": "<9.0",
     "@cspell/dict-fr-fr": "~2.2",