feat(search-view): show recent packages (#466)

Author: PierreDemailly

i18n/english.js

@@ -192,6 +192,7 @@ const ui = {
     "Available licenses": "Available licenses",
     "Available flags": "Available flags",
     default: "Search options",
+    recentPackages: "Recent packages",
     packagesCache: "Packages available in the cache",
     noPackageFound: "No package found",
     packageLengthErr: "Package name must be between 2 and 64 characters.",

i18n/french.js

@@ -192,6 +192,7 @@ const ui = {
     "Available licenses": "Licences disponibles",
     "Available flags": "Drapeaux disponibles",
     default: "Options de recherche",
+    recentPackages: "Packages récents",
     packagesCache: "Packages disponibles dans le cache",
     noPackageFound: "Aucun package trouvé",
     packageLengthErr: "Le nom du package doit être compris entre 2 et 64 caractères.",

public/components/views/search/search.css

@@ -232,11 +232,10 @@ input:-webkit-autofill {
   width: 20px;
 }
 
-.cache-packages {
+.cache-packages, .recent-packages {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   margin-top: 20px;
   margin-bottom: 20px;
   width: 100%;
@@ -250,18 +249,18 @@ input:-webkit-autofill {
   overflow: auto;
 }
 
-.cache-packages h1 {
+.cache-packages h1, .recent-packages h1 {
   font-family: "mononoki";
   color: #546884;
 }
 
-.cache-packages .package-result {
+.cache-packages .package-result, .recent-packages .package-result {
   margin-top: 10px;
   background: #54688419;
   padding: 5px 10px;
 }
 
-.cache-packages .package-result:has(span:hover) {
+.cache-packages .package-result:has(span:hover), .recent-packages .package-result:has(span:hover) {
   color: var(--secondary-darker);
   background: #5468842a;
   cursor: pointer;

public/components/views/search/search.js

@@ -162,29 +162,49 @@ export class SearchView {
       cachePackagesElement.appendChild(h1Element);
 
       for (const pkg of window.scannedPackageCache) {
-        const { name, version, local } = parseNpmSpec(pkg);
-        const pkgElement = document.createElement("div");
-        pkgElement.classList.add("package-result");
-        const pkgSpanElement = document.createElement("span");
-        pkgSpanElement.innerHTML = `${name}@${version}${local ? " <b>local</b>" : ""}`;
-        pkgSpanElement.addEventListener("click", () => {
-          window.socket.send(JSON.stringify({ action: "SEARCH", pkg }));
-        }, { once: true });
-        const removeButton = createDOMElement("button", {
-          classList: ["remove"],
-          text: "x"
-        });
-        removeButton.addEventListener("click", (event) => {
-          event.stopPropagation();
-          window.socket.send(JSON.stringify({ action: "REMOVE", pkg }));
-        }, { once: true });
-        pkgElement.append(pkgSpanElement, removeButton);
-        cachePackagesElement.appendChild(pkgElement);
+        cachePackagesElement.appendChild(this.#cachePackageElement(pkg));
       }
     }
     else {
       cachePackagesElement.classList.add("hidden");
     }
+
+    const recentPackagesElement = this.searchContainer.querySelector(".recent-packages");
+    if (window.recentPackageCache.length > 0) {
+      recentPackagesElement.classList.remove("hidden");
+      const h1Element = document.createElement("h1");
+      h1Element.textContent = window.i18n[lang].search.recentPackages;
+      recentPackagesElement.appendChild(h1Element);
+
+      for (const pkg of window.recentPackageCache) {
+        recentPackagesElement.appendChild(this.#cachePackageElement(pkg));
+      }
+    }
+    else {
+      recentPackagesElement.classList.add("hidden");
+    }
+  }
+
+  #cachePackageElement(pkg) {
+    const { name, version, local } = parseNpmSpec(pkg);
+    const pkgElement = document.createElement("div");
+    pkgElement.classList.add("package-result");
+    const pkgSpanElement = document.createElement("span");
+    pkgSpanElement.innerHTML = `${name}@${version}${local ? " <b>local</b>" : ""}`;
+    pkgSpanElement.addEventListener("click", () => {
+      window.socket.send(JSON.stringify({ action: "SEARCH", pkg }));
+    }, { once: true });
+    const removeButton = createDOMElement("button", {
+      classList: ["remove"],
+      text: "x"
+    });
+    removeButton.addEventListener("click", (event) => {
+      event.stopPropagation();
+      window.socket.send(JSON.stringify({ action: "REMOVE", pkg }));
+    }, { once: true });
+    pkgElement.append(pkgSpanElement, removeButton);
+
+    return pkgElement;
   }
 
   async fetchPackage(packageName, version) {
@@ -222,6 +242,9 @@ export class SearchView {
     const cachePackagesElement = document.createElement("div");
     cachePackagesElement.classList.add("cache-packages", "hidden");
     searchViewContainer.appendChild(cachePackagesElement);
+    const recentPackagesElement = document.createElement("div");
+    recentPackagesElement.classList.add("recent-packages", "hidden");
+    searchViewContainer.appendChild(recentPackagesElement);
 
     this.initialize();
   }

public/main.js

@@ -29,6 +29,7 @@ let packageInfoOpened = false;
 
 document.addEventListener("DOMContentLoaded", async() => {
   window.scannedPackageCache = [];
+  window.recentPackageCache = [];
   window.locker = null;
   window.popup = new Popup();
   window.settings = await new Settings().fetchUserConfig();
@@ -56,10 +57,15 @@ document.addEventListener("DOMContentLoaded", async() => {
     }
     else if (data.status === "INIT" || data.status === "RELOAD") {
       window.scannedPackageCache = data.availables;
+      window.recentPackageCache = data.lru;
       console.log(
         "[INFO] Older packages are loaded!",
         window.scannedPackageCache
       );
+      console.log(
+        "[INFO] Recent packages are loaded!",
+        window.recentPackageCache
+      );
 
       initSearchNav(data, {
         searchOptions: {

src/cache.js

@@ -47,7 +47,7 @@ class _AppCache {
 
   getPayload(pkg) {
     try {
-      return JSON.parse(fs.readFileSync(path.join(kPayloadsPath, pkg.replaceAll(kSlashReplaceToken, "/")), "utf-8"));
+      return JSON.parse(fs.readFileSync(path.join(kPayloadsPath, pkg.replaceAll("/", kSlashReplaceToken)), "utf-8"));
     }
     catch (err) {
       logger.error(`[cache|get](pkg: ${pkg}|cache: not found)`);

src/http-server/endpoints/data.js

@@ -37,7 +37,7 @@ export async function get(_req, res) {
       mru: [formatted],
       current: formatted,
       lru: [],
-      availables: appCache.availablePayloads(),
+      availables: appCache.availablePayloads().filter((pkg) => pkg !== formatted),
       lastUsed: {
         [formatted]: Date.now()
       },

views/index.html

@@ -95,6 +95,9 @@
             <input type="text" id="package" name="package" placeholder="[[=z.token('search.registryPlaceholder')]]" autocomplete="off" required>
           </div>
         </form>
+        <div class="recent-packages">
+          <h2>[[=z.token('search.recentPackages')]]</h2>
+        </div>
         <div class="cache-packages">
           <h2>[[=z.token('search.packagesCache')]]</h2>
         </div>