feat(interface): replace searchbar with new search-command

README.md

@@ -136,24 +136,20 @@ Our back-end scanner package is available [here](https://github.com/NodeSecure/s
 
 Flags and emojis legends are documented [here](https://github.com/NodeSecure/flags/blob/main/FLAGS.md).
 
-## Searchbar filters
+## Search command
 
-Since version **0.6.0**, the UI includes a brand new search bar that allows you to search anything within the tree (graph) using multiple criteria (filters). The currently available filters are:
+Press `Cmd+K` (macOS) or `Ctrl+K` (Windows/Linux) from the network view to open the search command. It lets you filter the dependency graph using one or more criteria simultaneously.
 
-- package (**the default filter if there is none**).
-- version (take a semver range as an argument).
-- flag (list of available flags in the current payload/tree).
-- license (list of available licenses in the current payload/tree).
-- author (author name/email/url).
-- ext (list of available file extensions in the current payload/tree).
-- builtin (available Node.js core module name).
-- size (see [here](https://github.com/NodeSecure/size-satisfies#usage-example)).
+Type a package name directly to search, or prefix with a filter name followed by `:` to use a specific filter:
 
-Exemple of query:
-
-```
-version: >=1.2 | 2, ext: .js, builtin: fs
-```
+- `package` — **default when no prefix is given**, matches by name.
+- `version` — semver range (e.g. `>=1.2.0`, `^2.0.0`).
+- `flag` — select from the list of flags present in the current tree.
+- `license` — SPDX identifier (e.g. `MIT`, `Apache-2.0`).
+- `author` — author name or email.
+- `ext` — file extension present in the package (e.g. `.js`, `.ts`).
+- `builtin` — Node.js core module used by the package (e.g. `fs`, `path`).
+- `size` — size range (see [size-satisfies](https://github.com/NodeSecure/size-satisfies#usage-example), e.g. `>50kb`, `10kb..200kb`).
 
 ## FAQ
 

i18n/arabic.js

@@ -159,7 +159,6 @@ const ui = {
       thirdPartyTools: "أدوات الطرف الثالث"
     }
   },
-  searchbar_placeholder: "بحث",
   loading_nodes: "... جاري تحميل العقد ...",
   please_wait: "(يرجى الانتظار)",
   popup: {

i18n/english.js

@@ -161,7 +161,6 @@ const ui = {
       thirdPartyTools: "Third-party tools"
     }
   },
-  searchbar_placeholder: "Search",
   loading_nodes: "... Loading nodes ...",
   please_wait: "(Please wait)",
   popup: {
@@ -235,6 +234,37 @@ const ui = {
     packageLengthErr: "Package name must be between 2 and 64 characters.",
     registryPlaceholder: "Search packages"
   },
+  search_command: {
+    placeholder: "Search packages...",
+    placeholder_filter_hint: "or use",
+    placeholder_refine: "Add another filter...",
+    section_filters: "Filters",
+    section_flags: "Flags - click to toggle",
+    section_size: "Size - select a preset or type above",
+    section_version: "Version - select a preset or type above",
+    section_packages: "Packages",
+    section_licenses: "Available licenses",
+    section_extensions: "File extensions",
+    section_builtins: "Node.js core modules",
+    section_authors: "Authors",
+    hint_size: "e.g. >50kb, 10kb..200kb",
+    hint_version: "e.g. ^1.0.0, >=2.0.0",
+    empty: "No results found",
+    nav_navigate: "navigate",
+    nav_select: "select",
+    nav_remove: "remove filter",
+    nav_close: "close",
+    filter_hints: {
+      package: "name",
+      version: "semver range",
+      flag: "click to select",
+      license: "SPDX identifier",
+      author: "name or email",
+      ext: "file extension",
+      builtin: "node.js module",
+      size: "e.g. >50kb"
+    }
+  },
   legend: {
     default: "The package is fine.",
     warn: "The package has warnings.",

i18n/french.js

@@ -161,7 +161,6 @@ const ui = {
       thirdPartyTools: "Outils tiers"
     }
   },
-  searchbar_placeholder: "Recherche",
   loading_nodes: "... Chargement des noeuds ...",
   please_wait: "(Merci de patienter)",
   popup: {
@@ -235,6 +234,37 @@ const ui = {
     packageLengthErr: "Le nom du package doit être compris entre 2 et 64 caractères.",
     registryPlaceholder: "Recherche de packages"
   },
+  search_command: {
+    placeholder: "Rechercher des packages...",
+    placeholder_filter_hint: "ou utiliser",
+    placeholder_refine: "Ajouter un autre filtre...",
+    section_filters: "Filtres",
+    section_flags: "Flags - cliquer pour activer",
+    section_size: "Taille - choisir un préréglage ou saisir ci-dessus",
+    section_version: "Version - choisir un préréglage ou saisir ci-dessus",
+    section_packages: "Packages",
+    section_licenses: "Licences disponibles",
+    section_extensions: "Extensions de fichiers",
+    section_builtins: "Modules Node.js natifs",
+    section_authors: "Auteurs",
+    hint_size: "ex. >50kb, 10kb..200kb",
+    hint_version: "ex. ^1.0.0, >=2.0.0",
+    empty: "Aucun résultat trouvé",
+    nav_navigate: "naviguer",
+    nav_select: "sélectionner",
+    nav_remove: "supprimer le filtre",
+    nav_close: "fermer",
+    filter_hints: {
+      package: "nom",
+      version: "range semver",
+      flag: "cliquer pour sélectionner",
+      license: "identifiant SPDX",
+      author: "nom ou email",
+      ext: "extension de fichier",
+      builtin: "module node.js",
+      size: "ex. >50kb"
+    }
+  },
   legend: {
     default: "Rien à signaler.",
     warn: "La dépendance contient des menaces.",

i18n/turkish.js

@@ -161,7 +161,6 @@ const ui = {
       thirdPartyTools: "Üçüncü taraf araçlar"
     }
   },
-  searchbar_placeholder: "Ara",
   loading_nodes: "... Düğümler yükleniyor ...",
   please_wait: "(Lütfen bekleyin)",
   popup: {

public/components/navigation/navigation.js

@@ -35,7 +35,8 @@ export class ViewNavigation {
       const isTargetPopup = event.target.id === "popup--background";
       const isPopupOpened = document.querySelector("#popup--background.show");
       const isTargetInput = event.target.tagName === "INPUT";
-      if (isTargetPopup || isWikiOpen || isTargetInput || isPopupOpened) {
+      const isSearchCommandOpen = Boolean(document.querySelector("search-command")?.open);
+      if (isTargetPopup || isWikiOpen || isTargetInput || isPopupOpened || isSearchCommandOpen) {
         return;
       }
 
@@ -75,11 +76,6 @@ export class ViewNavigation {
     selectedNav.classList.add("active");
     this.setAnchor(menuName);
 
-    const searchbar = document.getElementById("searchbar");
-    if (searchbar) {
-      searchbar.style.display = menuName === "network--view" ? "flex" : "none";
-    }
-
     this.activeMenu = selectedNav;
   }