Ajout des pages de modification de profil, des composant de profil et de creation de channel

pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      lucide-svelte:
+        specifier: ^0.462.0
+        version: 0.462.0(svelte@5.2.7)
+      multer:
+        specifier: ^1.4.5-lts.1
+        version: 1.4.5-lts.1
       svelte-radix:
         specifier: ^2.0.1
         version: 2.0.1(svelte@5.2.7)
@@ -576,6 +582,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  append-field@1.0.0:
+    resolution: {integrity: sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==}
+
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -624,6 +633,13 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
   callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
@@ -665,10 +681,17 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  concat-stream@1.6.2:
+    resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
+    engines: {'0': node >= 0.8}
+
   cookie@0.6.0:
     resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
     engines: {node: '>= 0.6'}
 
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -923,6 +946,9 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -950,6 +976,9 @@ packages:
   is-reference@3.0.3:
     resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
 
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1011,6 +1040,11 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lucide-svelte@0.462.0:
+    resolution: {integrity: sha512-BTY44UyXEhlakuPMS4w7NayKhDYARzmhEv3E2YchTiNZ/aySS0F2ktPscTlXRgSZ9xwqoozhnhO1oKhm/nnmqg==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
   magic-string@0.30.13:
     resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==}
 
@@ -1019,6 +1053,10 @@ packages:
     peerDependencies:
       svelte: ^3.56.0 || ^4.0.0 || ^5.0.0-next.120
 
+  media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1027,6 +1065,14 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1034,10 +1080,17 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -1049,6 +1102,10 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  multer@1.4.5-lts.1:
+    resolution: {integrity: sha512-ywPWvcDMeH+z9gQq5qYHCCy+ethsk4goepZ45GLD63fOu0YcNecQxi64nDs3qluZB+murG3/D4dJ7+dGctcCQQ==}
+    engines: {node: '>= 6.0.0'}
+
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -1275,6 +1332,9 @@ packages:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
 
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -1285,6 +1345,9 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
   readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -1317,6 +1380,9 @@ packages:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
 
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
   semver@7.6.3:
     resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
     engines: {node: '>=10'}
@@ -1345,6 +1411,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -1353,6 +1423,9 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -1456,6 +1529,13 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+
+  typedarray@0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+
   typescript-eslint@8.15.0:
     resolution: {integrity: sha512-wY4FRGl0ZI+ZU4Jo/yjdBu0lVTSML58pu6PgGtJmCufvzfV565pUF6iACQt092uFOd49iLOTX/sEVmHtbSrS+w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1545,6 +1625,10 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
@@ -1986,6 +2070,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  append-field@1.0.0: {}
+
   arg@5.0.2: {}
 
   argparse@2.0.1: {}
@@ -2035,6 +2121,12 @@ snapshots:
       node-releases: 2.0.18
       update-browserslist-db: 1.1.1(browserslist@4.24.2)
 
+  buffer-from@1.1.2: {}
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
   callsites@3.1.0: {}
 
   camelcase-css@2.0.1: {}
@@ -2074,8 +2166,17 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  concat-stream@1.6.2:
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 2.3.8
+      typedarray: 0.0.6
+
   cookie@0.6.0: {}
 
+  core-util-is@1.0.3: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -2352,6 +2453,8 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
+  inherits@2.0.4: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -2374,6 +2477,8 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.6
 
+  isarray@1.0.0: {}
+
   isexe@2.0.0: {}
 
   jackspeak@3.4.3:
@@ -2423,6 +2528,10 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lucide-svelte@0.462.0(svelte@5.2.7):
+    dependencies:
+      svelte: 5.2.7
+
   magic-string@0.30.13:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -2435,6 +2544,8 @@ snapshots:
       svelte: 5.2.7
       vfile-message: 2.0.4
 
+  media-typer@0.3.0: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -2442,6 +2553,12 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -2450,14 +2567,30 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
+  minimist@1.2.8: {}
+
   minipass@7.1.2: {}
 
+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
 
   ms@2.1.3: {}
 
+  multer@1.4.5-lts.1:
+    dependencies:
+      append-field: 1.0.0
+      busboy: 1.6.0
+      concat-stream: 1.6.2
+      mkdirp: 0.5.6
+      object-assign: 4.1.1
+      type-is: 1.6.18
+      xtend: 4.0.2
+
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -2593,6 +2726,8 @@ snapshots:
 
   prismjs@1.29.0: {}
 
+  process-nextick-args@2.0.1: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -2601,6 +2736,16 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -2649,6 +2794,8 @@ snapshots:
     dependencies:
       mri: 1.2.0
 
+  safe-buffer@5.1.2: {}
+
   semver@7.6.3: {}
 
   set-cookie-parser@2.7.1: {}
@@ -2669,6 +2816,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  streamsearch@1.1.0: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -2681,6 +2830,10 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
 
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -2816,6 +2969,13 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-is@1.6.18:
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+
+  typedarray@0.0.6: {}
+
   typescript-eslint@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.7.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.15.0(@typescript-eslint/parser@8.15.0(eslint@9.15.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.15.0(jiti@1.21.6))(typescript@5.7.2)
@@ -2880,6 +3040,8 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.0
 
+  xtend@4.0.2: {}
+
   yaml@1.10.2: {}
 
   yaml@2.6.1: {}

src/lib/components/ui/Alert.svelte

@@ -1,30 +1,46 @@
 <script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
     import { fade, fly } from 'svelte/transition';  // Importer fade et fly
 
     export let message: string = "";  // Le message d'alerte
     export let onClose: () => void = () => {};  // Fonction de fermeture de l'alerte
     export let duration: number = 5000;
 
+    export let show = false;
+
     // Fonction pour fermer l'alerte
     const closeAlert = () => {
         onClose();
     };
 
-    setTimeout(() => {
+    // Gestion du timeout pour fermer l'alerte après un certain délai
-        closeAlert();
+    let timeout: NodeJS.Timeout;
+
+    $: {
+        if (show) {
+            timeout = setTimeout(() => {
+                closeAlert();  // Fermer l'alerte après la durée
             }, duration);
+        } else {
+            clearTimeout(timeout);  // Si l'alerte est fermée, on annule le timeout
+        }
+    }
+
+    // Nettoyage du timeout si le composant est démonté avant la fin du délai
+    onDestroy(() => {
+        clearTimeout(timeout);
+    });
+
 </script>
 
-<!-- Alerte avec animation d'apparition (glissement et fade) -->
+{#if show}
-<div class="fixed top-4 right-4 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg"
+    <div class="alert fixed top-4 right-4 bg-blue-500 text-white px-6 py-3 rounded-lg shadow-lg"
         in:fly={{ y: -20, opacity: 0, duration: 300 }}
         out:fly={{ y: -20, opacity: 0, duration: 300 }}>
 
         <span>{message}</span>
-
+    </div>
-    <!-- Bouton pour fermer l'alerte -->
+{/if}
-    <button on:click={closeAlert} class="ml-4 text-xl">&times;</button>
-</div>
 
 <style>
     /* Styles de l'alerte */
@@ -37,6 +53,7 @@
         padding: 10px 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
     }
 
     button {

src/lib/components/ui/CreateChat.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import Alert from "$lib/components/ui/Alert.svelte"; // Importer le composant Alert
+
+	export let show = false;
+
+	export let onClose: () => void; // Callback pour fermer le composant
+
+	let showAlert = false;
+	let alertMessage = "";
+
+	let chatName = "";
+
+	const createChat = () => {
+		if (chatName.trim()) {
+			alertMessage = `Le chat "${chatName}" a été créé avec succès.`;
+			showAlert = true;
+			chatName = ""; // Réinitialiser
+			onClose?.(); // Fermer le composant après création
+		} else {
+			alertMessage = "Veuillez entrer un nom pour le chat.";
+			showAlert = true;
+		}
+	};
+
+	const closeAlert = () => {
+		showAlert = false;
+	};
+
+	// Fonction pour détecter le clic en dehors
+	let createChatRef: HTMLElement | null = null;
+
+</script>
+
+{#if show}
+	<div class="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-50" on:click={onClose}>
+		<div
+			class="bg-white border border-gray-300 rounded-lg p-8 w-96"
+			bind:this={createChatRef}
+			on:click|stopPropagation
+		>
+			<h1 class="text-2xl font-bold mb-6 text-center">Créer un nouveau chat</h1>
+			<input
+				type="text"
+				bind:value={chatName}
+				placeholder="Nom du chat..."
+				class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:border-blue-500 mb-4"
+			/>
+			<button
+				on:click={createChat}
+				class="bg-blue-500 text-white w-full px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none"
+			>
+				Créer
+			</button>
+		</div>
+	</div>
+{/if}
+
+<Alert show={showAlert} message={alertMessage} onClose={closeAlert} />
+
+<style>
+    .fixed {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .bg-white {
+        background-color: white;
+    }
+</style>

src/lib/components/ui/ProfileCard.svelte

@@ -1,28 +1,71 @@
-<script lang="ts">
+<script>
-	export let name: string = "Nom de l'utilisateur";
+	export let user = {
-	export let imageUrl: string = "https://via.placeholder.com/150"; // URL de l'image du profil
+		pseudo: '',
-	export let bio: string = "Une courte bio sur l'utilisateur.";
+		prenom: '',
-
+		nom: '',
-	export let onClick: () => void = () => {}; // Fonction pour ouvrir un modal ou autre action
+		description: '',
+		profilePictureUrl: '',  // Ajouter l'URL de l'image de profil
+	}; // Infos utilisateur
+	export let show = false; // Contrôle si la carte est visible
+	export let onClose = () => {
+	}; // Fonction pour fermer la carte
 </script>
 
-<div class="bg-white shadow-lg rounded-lg overflow-hidden w-64 cursor-pointer" on:click={onClick}>
+{#if show}
+	<div class="overlay" role="dialog" aria-labelledby="profile-card-title" on:click={onClose}>
+		<div class="profile-card" on:click|stopPropagation>
+			<div class="profile-header">
 				<!-- Image de profil -->
-	<img src={imageUrl} alt="Photo de profil" class="w-full h-32 object-cover" />
+				<img src={user.profilePictureUrl} alt="Profile" class="profile-image" />
-
+				<h2 id="profile-card-title" class="profile-name">{user.pseudo}</h2>
-	<!-- Détails du profil -->
-	<div class="p-4">
-		<h3 class="text-lg font-bold">{name}</h3>
-		<p class="text-gray-600 text-sm">{bio}</p>
 			</div>
-</div>
+			<p>{user.prenom} {user.nom}</p>
+			<p>{user.description}</p>
+		</div>
+	</div>
+{/if}
 
 <style>
-    div {
+    .overlay {
-        transition: transform 0.3s ease;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec opacité */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
     }
 
-    div:hover {
+    .profile-card {
-        transform: scale(1.05);
+        background: white;
+        padding: 30px;
+        border-radius: 15px;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+        text-align: center;
+        width: 400px; /* Taille de la carte ajustée */
+        max-width: 90%; /* Limite la largeur */
+    }
+
+    .profile-header {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+
+    .profile-image {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%; /* Rendre l'image ronde */
+        object-fit: cover; /* Pour que l'image remplisse bien le cercle */
+        margin-right: 15px;
+    }
+
+    .profile-name {
+        font-size: 1.5rem;
+        font-weight: bold;
     }
 </style>

src/lib/components/ui/ProfileInfo.svelte

@@ -0,0 +1,34 @@
+<script>
+	export let user = { pseudo: '', prenom: '', nom: '', description: '' }; // Infos utilisateur
+	export let position = 'right'; // Position de la photo de profil: 'left' ou 'right'
+</script>
+
+<div class="user-info" style="left: {position === 'left' ? 'auto' : '0'}; right: {position === 'right' ? '0' : 'auto'};">
+	<h3>{user.pseudo}</h3>
+	<p>{user.prenom} {user.nom}</p>
+	<p>{user.description}</p>
+</div>
+
+<style>
+    .user-info {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        background: rgba(255, 255, 255, 0.9);
+        padding: 10px;
+        border-radius: 5px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        max-width: 200px;
+        transition: all 0.3s ease;
+    }
+
+    .user-info h3 {
+        margin: 0;
+        font-size: 18px;
+    }
+
+    .user-info p {
+        margin: 5px 0;
+        font-size: 14px;
+    }
+</style>

src/lib/components/ui/ProfileModal.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	export let name: string = "Nom de l'utilisateur";
-	export let imageUrl: string = "https://via.placeholder.com/150";
-	export let bio: string = "Bio de l'utilisateur détaillée.";
-	export let onClose: () => void = () => {};  // Fonction pour fermer le modal
-</script>
-
-<div class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center" on:click={onClose}>
-	<div class="bg-white rounded-lg w-96 p-8" on:click|stopPropagation>
-		<div class="flex justify-between items-center">
-			<h2 class="text-2xl font-bold">{name}</h2>
-			<button on:click={onClose} class="text-gray-600 hover:text-gray-900">×</button>
-		</div>
-
-		<div class="mt-4 text-center">
-			<img src={imageUrl} alt="Photo de profil" class="w-24 h-24 rounded-full mx-auto mb-4" />
-			<p class="text-gray-800">{bio}</p>
-		</div>
-
-		<div class="mt-6 text-center">
-			<button on:click={onClose} class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
-				Fermer
-			</button>
-		</div>
-	</div>
-</div>
-
-<style>
-    div {
-        transition: opacity 0.3s ease, transform 0.3s ease;
-    }
-
-    div:hover {
-        opacity: 1;
-    }
-</style>

src/routes/api/users/+page.server.ts

@@ -2,6 +2,25 @@
 import { json } from '@sveltejs/kit';
 import redisClient from '$lib/redisClient';
 import prisma from '$lib/prismaClient';
+import multer from 'multer';
+
+const destinationDir = '/uploads';
+
+const storage = multer.diskStorage({
+	destination: (req, file, cb) => {
+		cb(null, `.${destinationDir}');  // Dossier où les images sont stockées`
+	},
+	filename: (req, file, cb) => {
+		cb(null, `${Date.now()}-${file.originalname}`);
+	},
+	fileFilter(req, file, cb) {
+		const fileExtension = path.extname(file.originalname).toLowerCase();
+		if (fileExtension !== '.jpg' && fileExtension !== '.jpeg' && fileExtension !== '.png') {
+			return cb(new Error('Seules les images JPG, JPEG et PNG sont autorisées.'));
+		}
+		cb(null, true);
+	}
+});
 
 export async function GET() {
 	try {

src/routes/chat/+page.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-    import Alert from "$lib/components/ui/Alert.svelte";  // Importer le composant Alert
-
-    let chatName = "";
-    let showAlert = false;
-    let alertMessage = "";
-
-    // Fonction pour valider la création du chat
-    const createChat = () => {
-        if (chatName.trim()) {
-            alertMessage = `Le chat "${chatName}" a été créé avec succès.`;
-            showAlert = true;
-        } else {
-            alertMessage = "Veuillez entrer un nom pour le chat.";
-            showAlert = true;
-        }
-    };
-</script>
-
-<!-- Container principal centré -->
-<div class="flex items-center justify-center h-screen bg-gray-100">
-    <div class="bg-white border border-gray-300 rounded-lg p-8 w-96">
-        <h1 class="text-2xl font-bold mb-6 text-center">Créer un nouveau chat</h1>
-
-        <!-- Champ pour entrer le nom du chat -->
-        <input
-            type="text"
-            bind:value={chatName}
-            placeholder="Nom du chat..."
-            class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring focus:border-blue-500 mb-4"
-        />
-
-        <!-- Bouton pour valider -->
-        <button
-            on:click={createChat}
-            class="bg-blue-500 text-white w-full px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none"
-        >
-            Créer
-        </button>
-    </div>
-</div>
-
-<!-- Affichage de l'alerte si elle doit être visible -->
-{#if showAlert}
-    <Alert message={alertMessage} onClose={() => showAlert = false} />
-{/if}
-
-<style>
-    body {
-        background-color: #f9fafb; /* Couleur de fond claire */
-        font-family: sans-serif;
-    }
-</style>

src/routes/chats/+page.svelte

@@ -3,16 +3,64 @@
 	import Plus from "svelte-radix/Plus.svelte"; // Icône pour "Ajouter"
 	import Search from "$lib/components/ui/Search.svelte";
 	import ChatItem from "$lib/components/ui/ChatItem.svelte";
+	import ProfileCard from "$lib/components/ui/ProfileCard.svelte"; // Importer le composant ProfileCard
+	import CreateChat from "$lib/components/ui/CreateChat.svelte"; // Importer le composant CreateChat
+
+	let showProfileCard = false;  // État pour afficher ou masquer le ProfileCard
+	let showCreateChat = false;  // État pour afficher ou masquer CreateChat
+	let user = {
+		pseudo: 'JohnDoe',
+		prenom: 'John',
+		nom: 'Doe',
+		description: 'Développeur passionné',
+		profilePictureUrl: 'path/to/profile-picture.jpg',  // URL de l'image de profil
+	};
+
+	function openProfileCard() {
+		console.log('openProfileCard');
+		showProfileCard = true;  // Inverser l'état pour afficher/masquer le ProfilCard
+	}
+
+	function closeProfileCard() {
+		console.log('closeProfileCard');
+		showProfileCard = false;  // Inverser l'état pour afficher/masquer le ProfilCard
+	}
+
+	function openCreateChat() {
+		console.log('openCreateChat');
+		showCreateChat = true;  // Afficher le composant CreateChat
+	}
+
+	function closeCreateChat() {
+		console.log('closeCreateChat');
+		showCreateChat = false;  // Fermer le composant CreateChat
+	}
 </script>
 
 <div class="h-full flex flex-col gap-5 p-5">
 	<div class="flex justify-between items-center">
-		<div class="flex items-center gap-2 w-full mr-10">
+		<!-- Bouton Profile avec l'image de l'utilisateur -->
+		<Button
+			size="default"
+			class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white"
+			on:click={openProfileCard}
+		>
+			<img src={user.profilePictureUrl} alt="Profile" class="h-8 w-8 rounded-full" />
+			Profile
+		</Button>
+
+		<div class="flex items-center gap-2 w-full mr-6 ml-6">
 			<div class="relative w-full">
 				<Search class="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400" />
 			</div>
 		</div>
-		<Button size="default" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white">
+
+		<!-- Bouton Nouveau Chat -->
+		<Button
+			size="default"
+			class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white"
+			on:click={openCreateChat}
+		>
 			<Plus class="h-5 w-5" />
 			Nouveau Chat
 		</Button>
@@ -22,7 +70,10 @@
 		<ChatItem title="Discussion avec Yanax" lastMessage="Salut les amis !" time="12:34" />
 		<ChatItem title="Discussion avec Luxray" lastMessage="Salut Yanax" time="12:30" />
 	</div>
+
 </div>
+<CreateChat show={showCreateChat} onClose={closeCreateChat} />
+<ProfileCard {user} show={showProfileCard} onClose={closeProfileCard} />
 
 <style>
     .h-full {