From e42cfe2827642a9cb29860bf7ca07f02fa74ba2a Mon Sep 17 00:00:00 2001
From: cgombauld <clement.gombauld@cpexterne.org>
Date: Sat, 5 Jul 2025 20:51:47 +0200
Subject: [PATCH] feat: add deprecation description

---
 public/components/package/header/header.js |  4 +--
 public/components/views/home/home.css      | 11 +++++--
 public/components/views/home/home.js       | 36 ++++++++++++++--------
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/public/components/package/header/header.js b/public/components/package/header/header.js
index d4ee9e0d..cf099b22 100644
--- a/public/components/package/header/header.js
+++ b/public/components/package/header/header.js
@@ -197,7 +197,7 @@ export class PackageHeader {
   }
 
   renderFlags(flags) {
-    const { warnings } = this.package.dependencyVersion;
+    const { warnings, deprecated } = this.package.dependencyVersion;
     const warningsLength = warnings.filter(
       (warning) => !window.settings.config.ignore.warnings.has(warning.kind)
     ).length;
@@ -228,7 +228,7 @@ export class PackageHeader {
 
         const htmlElement = createFlagInfoBulle(
           icon,
-          flagsMap.get(icon).tooltipDescription
+          name === "isDeprecated" ? deprecated : flagsMap.get(icon).tooltipDescription
         );
         htmlElement.addEventListener("click", () => {
           const { name } = flagsMap.get(icon);
diff --git a/public/components/views/home/home.css b/public/components/views/home/home.css
index 639aae40..e110cc19 100644
--- a/public/components/views/home/home.css
+++ b/public/components/views/home/home.css
@@ -358,8 +358,6 @@ body.dark .home--overview>div>span {
 
 .home--packages--overview>div {
   background: linear-gradient(to right, rgb(231 216 195) 0%, rgb(255 255 255 / 0%) 100%);
-  display: flex;
-  align-items: center;
   padding: 5px 10px;
   position: relative;
   box-sizing: border-box;
@@ -370,10 +368,17 @@ body.dark .home--overview>div>span {
   border-left: 2px solid #da9744;
   color: #992323;
   font-size: 16px;
-  flex-wrap: wrap;
   transition: 0.5s linear all;
 }
 
+.home--package--header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
 body.dark .home--packages--overview>div {
   background: linear-gradient(to right, rgb(11 3 31) 0%, rgb(46 10 10 / 80%) 100%);
   color: rgb(253 210 210);
diff --git a/public/components/views/home/home.js b/public/components/views/home/home.js
index db9cfb0a..ed354b8b 100644
--- a/public/components/views/home/home.js
+++ b/public/components/views/home/home.js
@@ -232,7 +232,7 @@ export class HomeView {
   }
 
   renderPackage(dependencyVer) {
-    const { name, version, flags } = dependencyVer;
+    const { name, version, flags, deprecated } = dependencyVer;
     const inlinedEmojis = getFlagsEmojisInlined(
       flags.filter((name) => kFlagsToWatch.has(name)),
       new Set(window.settings.config.ignore.flags)
@@ -241,19 +241,29 @@ export class HomeView {
     const childs = utils.extractEmojis(inlinedEmojis)
       .map((emoji) => utils.createDOMElement("p", { text: `${emoji} ${kEmojiDescription[emoji]}` }));
 
+    const packageContents = [
+      utils.createDOMElement("div", {
+        className: "home--package--header",
+        childs: [
+          utils.createDOMElement("p", {
+            childs: [
+              document.createTextNode(name),
+              utils.createDOMElement("span", { text: `v${version}` })
+            ]
+          }),
+          utils.createDOMElement("div", {
+            className: "chips",
+            childs
+          })]
+      })
+    ];
+
+    if (deprecated) {
+      packageContents.push(utils.createDOMElement("p", { text: deprecated }));
+    }
+
     return utils.createDOMElement("div", {
-      childs: [
-        utils.createDOMElement("p", {
-          childs: [
-            document.createTextNode(name),
-            utils.createDOMElement("span", { text: `v${version}` })
-          ]
-        }),
-        utils.createDOMElement("div", {
-          className: "chips",
-          childs
-        })
-      ]
+      childs: packageContents
     });
   }