feat: add deprecation description (#532)

Author: clemgbld

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);

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);

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
     });
   }