From 17f14b6ed42d606475ddc799b656a3ab2544ed83 Mon Sep 17 00:00:00 2001
From: fraxken <gentilhomme.thomas@gmail.com>
Date: Sat, 7 Dec 2024 10:25:06 +0100
Subject: [PATCH] refactor: enhance initSearchBar

---
 public/core/search-nav.js | 105 +++++++++++++++++++++-----------------
 public/main.js            |   3 +-
 views/index.html          |   2 +-
 3 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/public/core/search-nav.js b/public/core/search-nav.js
index 3793642c..0028f713 100644
--- a/public/core/search-nav.js
+++ b/public/core/search-nav.js
@@ -3,20 +3,42 @@ import { createDOMElement, parseNpmSpec } from "../common/utils";
 import { SearchBar } from "../components/searchbar/searchbar";
 
 // CONSTANTS
-const kSearchbarId = "searchbar-tpl";
+const kSearchbarId = "searchbar-content";
 
 export function initSearchNav(data, nsn, secureDataSet) {
   const searchNavElement = document.getElementById("search-nav");
-  // reset
   searchNavElement.innerHTML = "";
-  const pkgs = data.lru;
-  const hasAtLeast2Packages = pkgs.length > 1;
-  const hasExactly2Packages = pkgs.length === 2;
-  const packagesContainer = document.createElement("div");
-  packagesContainer.classList.add("packages");
-
-  for (const pkg of pkgs) {
-    // Initialize Search nav
+
+  searchNavElement.appendChild(
+    initPackagesNavigation(data)
+  );
+
+  const searchElement = document.getElementById(kSearchbarId);
+  const searchElementClone = searchElement.content.cloneNode(true);
+  searchNavElement.appendChild(searchElementClone);
+
+  // Initialize searchbar
+  {
+    const dataListElement = document.getElementById("package-list");
+    for (const info of secureDataSet.packages) {
+      const content = `<p>${info.flags} ${info.name}</p><b>${info.version}</b>`;
+      dataListElement.insertAdjacentHTML("beforeend", `<div class="package hide" data-value="${info.id}">${content}</div>`);
+    }
+  }
+  window.searchbar = new SearchBar(nsn, secureDataSet.linker);
+}
+
+function initPackagesNavigation(data) {
+  const fragment = document.createDocumentFragment();
+  const packages = data.lru;
+
+  const hasAtLeast2Packages = packages.length > 1;
+  const hasExactly2Packages = packages.length === 2;
+  const container = createDOMElement("div", {
+    classList: ["packages"]
+  });
+
+  for (const pkg of packages) {
     const { name, version } = parseNpmSpec(pkg);
 
     const pkgElement = createDOMElement("div", {
@@ -38,62 +60,51 @@ export function initSearchNav(data, nsn, secureDataSet) {
     });
 
     if (hasAtLeast2Packages && pkg !== data.root) {
-      addRemoveButton(pkgElement, { hasExactly2Packages });
+      pkgElement.appendChild(
+        renderPackageRemoveButton(pkgElement.dataset.name, { hasExactly2Packages })
+      );
     }
 
-    packagesContainer.appendChild(pkgElement);
+    container.appendChild(pkgElement);
   }
 
-  searchNavElement.appendChild(packagesContainer);
-
-  const plusButtonElement = document.createElement("button");
-  plusButtonElement.classList.add("add");
-  plusButtonElement.appendChild(createDOMElement("p", {
-    text: "+"
-  }));
+  const plusButtonElement = createDOMElement("button", {
+    classList: ["add"],
+    childs: [
+      createDOMElement("p", { text: "+" })
+    ]
+  });
   plusButtonElement.addEventListener("click", () => {
     window.navigation.setNavByName("search--view");
   });
 
-  searchNavElement.appendChild(plusButtonElement);
-
-  const searchElement = document.getElementById(kSearchbarId);
-  const searchElementClone = searchElement.content.cloneNode(true);
-  searchNavElement.appendChild(searchElementClone);
+  fragment.append(container, plusButtonElement);
 
-  // Initialize searchbar
-  {
-    const dataListElement = document.getElementById("package-list");
-    for (const info of secureDataSet.packages) {
-      const content = `<p>${info.flags} ${info.name}</p><b>${info.version}</b>`;
-      dataListElement.insertAdjacentHTML("beforeend", `<div class="package hide" data-value="${info.id}">${content}</div>`);
-    }
-  }
-  window.searchbar = new SearchBar(nsn, secureDataSet.linker);
+  return fragment;
 }
 
-function addRemoveButton(pkgElement, options) {
+function renderPackageRemoveButton(packageName, options) {
   const {
     hasExactly2Packages
   } = options;
+
   // we allow to remove a package when at least 2 packages are present
-  const removeButton = document.createElement("button");
-  removeButton.classList.add("remove");
-  removeButton.textContent = "x";
+  const removeButton = createDOMElement("button", {
+    classList: ["remove"],
+    text: "x"
+  });
+
   removeButton.addEventListener("click", (event) => {
     event.stopPropagation();
-    const pkgToRemove = pkgElement.dataset.name;
-    window.socket.send(JSON.stringify({ action: "REMOVE", pkg: pkgToRemove }));
+    window.socket.send(JSON.stringify({ action: "REMOVE", pkg: packageName }));
 
     if (hasExactly2Packages) {
-      const allPackages = [...document.getElementById("search-nav").querySelectorAll(".package")];
-      for (const pkg of allPackages) {
-        const removeBtn = pkg.querySelector(".remove");
-        if (removeBtn) {
-          removeBtn.remove();
-        }
-      }
+      document
+        .getElementById("search-nav")
+        .querySelectorAll(".package")
+        .forEach((element) => element.querySelector(".remove")?.remove());
     }
   }, { once: true });
-  pkgElement.appendChild(removeButton);
+
+  return removeButton;
 }
diff --git a/public/main.js b/public/main.js
index 858ec044..50a23c72 100644
--- a/public/main.js
+++ b/public/main.js
@@ -146,8 +146,7 @@ async function init(options = { navigateToNetworkView: false }) {
   }
 
   // update search nav
-  const searchNavElement = document.getElementById("search-nav");
-  const pkgs = searchNavElement.querySelectorAll(".package");
+  const pkgs = document.querySelectorAll("#search-nav > .package");
   for (const pkg of pkgs) {
     if (pkg.dataset.name.startsWith(window.activePackage)) {
       pkg.classList.add("active");
diff --git a/views/index.html b/views/index.html
index 3d92a8b9..ed957541 100644
--- a/views/index.html
+++ b/views/index.html
@@ -680,7 +680,7 @@ <h2><i class="icon-keyboard"></i>[[=z.token('settings.shortcuts.title')]]</h2>
   </div>
 </template>
 
-<template id="searchbar-tpl">
+<template id="searchbar-content">
   <div id="searchbar">
     <i class="icon-globe-alt-outline"></i>
     <div class="search-items"></div>