feat(interface): merge search-nav & drill-down into network-breadcrumb (#704)

Author: PierreDemailly

i18n/english.js

@@ -218,7 +218,9 @@ const ui = {
     childOf: "child of",
     parentOf: "parent of",
     unlocked: "unlocked",
-    locked: "locked"
+    locked: "locked",
+    switchPayload: "Switch payload",
+    removeFromCache: "Remove from cache"
   },
   search: {
     packagesCache: "Packages available in the cache",

i18n/french.js

@@ -218,7 +218,9 @@ const ui = {
     childOf: "enfant de",
     parentOf: "parent de",
     unlocked: "Déverrouillé",
-    locked: "Verrouillé"
+    locked: "Verrouillé",
+    switchPayload: "Changer de payload",
+    removeFromCache: "Retirer du cache"
   },
   search: {
     packagesCache: "Packages disponibles dans le cache",

public/components/navigation/navigation.css

@@ -76,23 +76,3 @@ nav#aside>ul li.bottom-nav {
   margin-top: auto;
 }
 
-#search-nav {
-  z-index: 30;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  height: 30px;
-  left: 50px;
-  padding-left: 20px;
-  max-width: calc(100vw - 70px);
-  box-sizing: border-box;
-  background: var(--primary);
-  transform: skewX(-20deg);
-  box-shadow: 2px 1px 10px #26107f7a;
-}
-
-body.dark #search-nav {
-  background: var(--dark-theme-primary-color);
-}
-

…nts/drill-breadcrumb/drill-breadcrumb.js …network-breadcrumb/network-breadcrumb.jspublic/components/drill-breadcrumb/drill-breadcrumb.js renamed to public/components/network-breadcrumb/network-breadcrumb.js public/components/drill-breadcrumb/drill-breadcrumb.js renamed to public/components/network-breadcrumb/network-breadcrumb.js

@@ -3,25 +3,45 @@ import { LitElement, html, css, nothing } from "lit";
 
 // Import Internal Dependencies
 import { EVENTS } from "../../core/events.js";
+import { currentLang } from "../../common/utils.js";
 
-class DrillBreadcrumb extends LitElement {
+class NetworkBreadcrumb extends LitElement {
   static styles = css`
     :host {
+      --breadcrumb-bg: var(--primary);
+      --breadcrumb-shadow: 2px 1px 10px rgb(38 16 127 / 48%);
+      --breadcrumb-dropdown-bg: var(--primary-darker);
+      --breadcrumb-dropdown-border: rgb(255 255 255 / 20%);
+      --breadcrumb-dropdown-hover: rgb(255 255 255 / 15%);
+      --breadcrumb-header-color: rgb(255 255 255 / 50%);
+      --breadcrumb-separator-bg: rgb(255 255 255 / 15%);
+
       position: absolute;
-      top: 38px;
+      top: 8px;
       left: 10px;
       z-index: 20;
       display: flex;
       align-items: center;
       gap: 4px;
-      background: rgb(10 10 20 / 72%);
+      background: var(--breadcrumb-bg);
+      box-shadow: var(--breadcrumb-shadow);
       border-radius: 6px;
       padding: 4px 10px;
       font-family: mononoki, monospace;
       font-size: 12px;
       color: #fff;
     }
 
+    :host-context(body.dark) {
+      --breadcrumb-bg: rgb(10 10 20 / 72%);
+      --breadcrumb-shadow: none;
+      --breadcrumb-dropdown-bg: rgb(10 10 20 / 95%);
+      --breadcrumb-dropdown-border: rgb(255 255 255 / 15%);
+      --breadcrumb-dropdown-hover: rgb(255 255 255 / 10%);
+      --breadcrumb-header-color: rgb(255 255 255 / 40%);
+      --breadcrumb-separator-bg: rgb(255 255 255 / 10%);
+    }
+
     :host([hidden]) {
       display: none !important;
     }
@@ -72,14 +92,11 @@ class DrillBreadcrumb extends LitElement {
     .dropdown {
       position: absolute;
       top: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgb(10 10 20 / 95%);
-      border: 1px solid rgb(255 255 255 / 15%);
+      left: 0;
+      background: var(--breadcrumb-dropdown-bg);
+      border: 1px solid var(--breadcrumb-dropdown-border);
       border-radius: 6px;
       padding: 4px 0;
-      min-width: 180px;
-      max-height: 260px;
       overflow-y: auto;
       z-index: 30;
       box-shadow: 0 4px 16px rgb(0 0 0 / 50%);
@@ -97,25 +114,83 @@ class DrillBreadcrumb extends LitElement {
     }
 
     .dropdown button:hover {
-      background: rgb(255 255 255 / 10%);
+      background: var(--breadcrumb-dropdown-hover);
       color: #fff;
       text-decoration: none;
     }
+
+    .dropdown-header {
+      display: block;
+      padding: 4px 12px 3px;
+      font-size: 10px;
+      color: var(--breadcrumb-header-color);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      cursor: default;
+    }
+
+    .dropdown-separator {
+      height: 1px;
+      background: var(--breadcrumb-separator-bg);
+      margin: 3px 0 4px;
+    }
+
+    .root-switcher-wrapper {
+      position: static;
+    }
+
+    .root-switcher {
+      opacity: 0.55;
+      font-size: 11px;
+      padding: 0 3px;
+    }
+
+    .root-switcher:hover {
+      opacity: 1;
+      text-decoration: none;
+    }
+
+    .root-entry {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .root-label {
+      color: rgb(255 255 255 / 85%);
+    }
+
+    .remove-btn {
+      opacity: 0.3;
+      font-size: 14px;
+      line-height: 1;
+      padding: 0 1px;
+    }
+
+    .remove-btn:hover {
+      opacity: 1;
+      color: #ff6b6b;
+      text-decoration: none;
+    }
   `;
 
   static properties = {
     root: { type: Object },
     stack: { type: Array },
     siblings: { type: Array },
-    _openDropdown: { state: true }
+    packages: { type: Array },
+    _openDropdown: { state: true },
+    _rootSwitcherOpen: { state: true }
   };
 
   constructor() {
     super();
     this.root = null;
     this.stack = [];
     this.siblings = [];
+    this.packages = [];
     this._openDropdown = null;
+    this._rootSwitcherOpen = false;
   }
 
   connectedCallback() {
@@ -129,13 +204,17 @@ class DrillBreadcrumb extends LitElement {
   }
 
   updated() {
-    this.hidden = this.stack.length === 0 || this.root === null;
+    this.hidden = this.root === null;
   }
 
   #handleDocumentClick = () => {
     if (this._openDropdown !== null) {
       this._openDropdown = null;
     }
+
+    if (this._rootSwitcherOpen) {
+      this._rootSwitcherOpen = false;
+    }
   };
 
   #handleReset() {
@@ -170,13 +249,68 @@ class DrillBreadcrumb extends LitElement {
     }));
   }
 
+  #toggleRootSwitcher(event) {
+    event.stopPropagation();
+
+    this._rootSwitcherOpen = !this._rootSwitcherOpen;
+  }
+
+  #handleRootSwitch(spec, event) {
+    event.stopPropagation();
+
+    this._rootSwitcherOpen = false;
+    this.dispatchEvent(new CustomEvent(EVENTS.ROOT_SWITCH, {
+      detail: { spec },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  #handleRootRemove(event) {
+    event.stopPropagation();
+
+    this.dispatchEvent(new CustomEvent(EVENTS.ROOT_REMOVE, {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   render() {
-    if (this.stack.length === 0 || this.root === null) {
+    if (this.root === null) {
       return nothing;
     }
 
+    const otherPackages = this.packages ?? [];
+    const isInDrill = this.stack.length > 0;
+    const i18n = window.i18n[currentLang()];
+
     return html`
-      <button @click="${this.#handleReset}">${this.root.name}@${this.root.version}</button>
+      ${otherPackages.length > 0 ? html`
+        <span class="separator-wrapper root-switcher-wrapper">
+          <button
+            class="root-switcher"
+            @click="${this.#toggleRootSwitcher}"
+          >▾</button>
+          ${this._rootSwitcherOpen ? html`
+            <div class="dropdown">
+              <span class="dropdown-header">${i18n.network.switchPayload}</span>
+              <div class="dropdown-separator"></div>
+              ${otherPackages.map((pkg) => html`
+                <button @click="${(event) => this.#handleRootSwitch(pkg.spec, event)}">
+                  ${pkg.spec}
+                </button>
+              `)}
+            </div>
+          ` : nothing}
+        </span>
+      ` : nothing}
+      <span class="root-entry">
+        ${isInDrill
+            ? html`<button @click="${this.#handleReset}">${this.root.name}@${this.root.version}</button>`
+            : html`<span class="root-label">${this.root.name}@${this.root.version}</span>`
+        }
+        <button class="remove-btn" @click="${this.#handleRootRemove}" title="${i18n.network.removeFromCache}">×</button>
+      </span>
       ${this.stack.map((entry, stackIndex) => {
         const siblingList = this.siblings?.[stackIndex] ?? [];
         const hasSiblings = siblingList.length > 0;
@@ -212,4 +346,4 @@ class DrillBreadcrumb extends LitElement {
   }
 }
 
-customElements.define("drill-breadcrumb", DrillBreadcrumb);
+customElements.define("network-breadcrumb", NetworkBreadcrumb);