feat(navbar): add plus button for new window, manage navbar buttons

src/pages/nav-box.js

@@ -9,28 +9,44 @@ class NavBox extends HTMLElement {
   buildNavBox() {
     this.id = "navbox";
     const buttons = [
-      { id: "back", svg: "left.svg" },
-      { id: "forward", svg: "right.svg" },
-      { id: "refresh", svg: "reload.svg" },
-      { id: "home", svg: "home.svg" },
+      { id: "back", svg: "left.svg", position: "start" },
+      { id: "forward", svg: "right.svg", position: "start" },
+      { id: "refresh", svg: "reload.svg", position: "start" },
+      { id: "home", svg: "home.svg", position: "start" },
+      { id: "plus", svg: "plus.svg", position: "end" },
     ];
 
     this.buttonElements = {};
 
-    buttons.forEach((button) => {
-      const btnElement = this.createButton(
-        button.id,
-        `peersky://static/assets/svg/${button.svg}`
-      );
-      this.appendChild(btnElement);
-      this.buttonElements[button.id] = btnElement;
-    });
+    // Create buttons that should appear before the URL input
+    buttons
+      .filter((btn) => btn.position === "start")
+      .forEach((button) => {
+        const btnElement = this.createButton(
+          button.id,
+          `peersky://static/assets/svg/${button.svg}`
+        );
+        this.appendChild(btnElement);
+        this.buttonElements[button.id] = btnElement;
+      });
 
     const urlInput = document.createElement("input");
     urlInput.type = "text";
     urlInput.id = "url";
     urlInput.placeholder = "Search with DuckDuckGo or type a P2P URL";
     this.appendChild(urlInput);
+
+    // Create buttons that should appear after the URL input
+    buttons
+      .filter((btn) => btn.position === "end")
+      .forEach((button) => {
+        const btnElement = this.createButton(
+          button.id,
+          `peersky://static/assets/svg/${button.svg}`
+        );
+        this.appendChild(btnElement);
+        this.buttonElements[button.id] = btnElement;
+      });
   }
 
   createButton(id, svgPath) {
@@ -124,6 +140,8 @@ class NavBox extends HTMLElement {
           } else {
             this.dispatchEvent(new CustomEvent("reload"));
           }
+        } else if (button.id === "plus") {
+          this.dispatchEvent(new CustomEvent("new-window"));
         } else if (!button.disabled) {
           this.navigate(button.id);
         }

src/renderer.js

@@ -37,6 +37,9 @@ document.addEventListener("DOMContentLoaded", () => {
       const { url } = detail;
       navigateTo(url);
     });
+    nav.addEventListener("new-window", () => {
+      ipcRenderer.send("new-window");
+    });
 
     // Handle webview loading events to toggle refresh/stop button
     if (webviewContainer.webviewElement) {

src/window-manager.js

@@ -15,6 +15,13 @@ class WindowManager {
     this.saverInterval = DEFAULT_SAVE_INTERVAL;
     this.isSaving = false; // Flag to prevent concurrent saves
     this.isQuitting = false; // Flag to indicate app is quitting
+    this.registerListeners();
+  }
+
+  registerListeners() {
+    ipcMain.on("new-window", () => {
+      this.open();
+    });
   }
 
   setQuitting(flag) {