pinokiod 3.51.0 → 3.53.0

package/server/public/urldropdown.js

@@ -55,6 +55,31 @@ function initUrlDropdown(config = {}) {
     }
   });
 
+  if (document.querySelector(".urlbar")) {
+    document.querySelector(".urlbar").addEventListener("submit", (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      let el = e.target.querySelector("input[type=url]")
+      let val = el.value
+      let type = el.getAttribute("data-host-type")
+      if (type === "local") {
+        let redirect_uri = "/container?url=" + val
+        location.href = redirect_uri
+      } else {
+        let u = new URL(val)
+        if (String(u.port) === "42000") {
+          // pinokio app => open the url itself
+          window.open(val, "_blank")
+        } else {
+          // other servers => open in pinokio redirect frame
+          let redirect_uri = "/container?url=" + val
+          location.href = redirect_uri
+        }
+      }
+    })
+  }
+
+
   function initializeInputValue() {
     if (options.clearBehavior === 'empty') {
       urlInput.value = '';
@@ -140,6 +165,111 @@ function initUrlDropdown(config = {}) {
     dropdown.style.display = 'none';
   }
 
+  function createHostBadge(host) {
+    if (!host || !host.platform) return '';
+    
+    // Get platform icon
+    let platformIcon = '';
+    switch (host.platform) {
+      case 'darwin':
+        platformIcon = 'fa-brands fa-apple';
+        break;
+      case 'win32':
+        platformIcon = 'fa-brands fa-windows';
+        break;
+      case 'linux':
+        platformIcon = 'fa-brands fa-linux';
+        break;
+      default:
+        platformIcon = 'fa-solid fa-desktop';
+        break;
+    }
+    
+    // Create badge HTML
+    return `
+      <span class="host-badge">
+        <i class="${platformIcon}"></i>
+        <span class="host-name">${escapeHtml(host.name)}</span>
+      </span>
+    `;
+  }
+
+  function groupProcessesByHost(processes) {
+    const grouped = {};
+    
+    processes.forEach(process => {
+      // Create a normalized host key based only on name for grouping
+      const hostKey = process.host ? process.host.name : 'Unknown';
+      
+      if (!grouped[hostKey]) {
+        grouped[hostKey] = {
+          host: process.host || { name: 'Unknown', platform: 'unknown', arch: 'unknown' },
+          processes: [],
+          isLocal: false
+        };
+      }
+      
+      // Mark as local if any process from this host is local
+      if (process.host.local === true) {
+        grouped[hostKey].isLocal = true;
+      }
+      
+      grouped[hostKey].processes.push(process);
+    });
+    
+    // Sort host keys: local host first, then alphabetically
+    return Object.keys(grouped)
+      .sort((a, b) => {
+        const aIsLocal = grouped[a].isLocal;
+        const bIsLocal = grouped[b].isLocal;
+        
+        // Local host always comes first
+        if (aIsLocal && !bIsLocal) return 1;
+        if (!aIsLocal && bIsLocal) return -1;
+        
+        // Both local or both remote - sort alphabetically
+        return a.localeCompare(b);
+      })
+      .reduce((sortedGrouped, hostKey) => {
+        sortedGrouped[hostKey] = grouped[hostKey];
+        return sortedGrouped;
+      }, {});
+  }
+
+  function createHostHeader(host, isLocal = false) {
+    if (!host) return '';
+    
+    // Get platform icon
+    let platformIcon = '';
+    switch (host.platform) {
+      case 'darwin':
+        platformIcon = 'fa-brands fa-apple';
+        break;
+      case 'win32':
+        platformIcon = 'fa-brands fa-windows';
+        break;
+      case 'linux':
+        platformIcon = 'fa-brands fa-linux';
+        break;
+      default:
+        platformIcon = 'fa-solid fa-desktop';
+        break;
+    }
+    
+    console.log({ isLocal, host })
+    const hostName = isLocal ? `${host.name} (This Machine)` : `${host.name} (Peer)`;
+    
+    return `
+      <div class="url-dropdown-host-header">
+        <span class='host-meta'>
+          <i class="${platformIcon}"></i>
+          <span class="host-arch">${escapeHtml(host.arch)}</span>
+        </span>
+        <span class="host-name">${escapeHtml(hostName)}</span>
+      </div>
+    `;
+  }
+
   function populateDropdown(processes) {
     if (processes.length === 0) {
       const query = urlInput.value.toLowerCase().trim();
@@ -150,28 +280,76 @@ function initUrlDropdown(config = {}) {
       return;
     }
 
-    const items = processes.map(process => {
-      const url = `http://${process.ip}`;
-      return `
-        <div class="url-dropdown-item" data-url="${url}">
-          <div class="url-dropdown-name">${escapeHtml(process.name)}</div>
-          <div class="url-dropdown-url">${escapeHtml(url)}</div>
-        </div>
-      `;
-    }).join('');
+    // Group processes by host
+    const groupedProcesses = groupProcessesByHost(processes);
+    
+    let html = '';
+    Object.keys(groupedProcesses).forEach(hostKey => {
+      const hostData = groupedProcesses[hostKey];
+      const hostInfo = hostData.host;
+      const processes = hostData.processes;
+      const isLocal = hostData.isLocal;
+      
+      // Add host header
+      html += createHostHeader(hostInfo, isLocal);
+      
+      // Add processes for this host
+      processes.forEach(process => {
+        const onlineIndicator = process.online ? 
+          '<div class="status-circle online"></div>' : 
+          '<div class="status-circle offline"></div>';
+        
+        if (process.ip === null || process.ip === undefined) {
+          // Non-selectable item with "turn on peer network" button
+          const networkUrl = `http://${process.host.ip}:42000/network`;
+          html += `
+            <div class="url-dropdown-item non-selectable">
+              <div class="url-dropdown-name">
+                ${onlineIndicator}
+                <button class="peer-network-button" data-network-url="${networkUrl}"><i class="fa-solid fa-toggle-on"></i> Turn on peer network</button>
+                ${escapeHtml(process.name)}
+              </div>
+            </div>
+          `;
+        } else {
+          // Normal selectable item
+          const url = `http://${process.ip}`;
+          html += `
+            <div class="url-dropdown-item" data-url="${url}" data-host-type="${process.host.local ? "local" : "remote"}">
+              <div class="url-dropdown-name">
+                ${onlineIndicator}
+                ${escapeHtml(process.name)}
+              </div>
+              <div class="url-dropdown-url">${escapeHtml(url)}</div>
+            </div>
+          `;
+        }
+      });
+    });
 
-    dropdown.innerHTML = items;
+    dropdown.innerHTML = html;
 
     // Add click handlers to dropdown items
-    dropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+    dropdown.querySelectorAll('.url-dropdown-item:not(.non-selectable)').forEach(item => {
       item.addEventListener('click', function() {
         const url = this.getAttribute('data-url');
+        const type = this.getAttribute('data-host-type');
         urlInput.value = url;
+        urlInput.setAttribute("data-host-type", type)
         hideDropdown();
         // Submit the form
         urlInput.closest('form').dispatchEvent(new Event('submit'));
       });
     });
+
+    // Add click handlers to peer network buttons
+    dropdown.querySelectorAll('.peer-network-button').forEach(button => {
+      button.addEventListener('click', function(e) {
+        e.stopPropagation();
+        const networkUrl = this.getAttribute('data-network-url');
+        window.open(networkUrl, '_blank');
+      });
+    });
   }
 
   // Utility function to escape HTML
@@ -330,19 +508,54 @@ function initUrlDropdown(config = {}) {
       return;
     }
 
-    const items = processes.map(process => {
-      const url = `http://${process.ip}`;
-      return `
-        <div class="url-dropdown-item" data-url="${url}">
-          <div class="url-dropdown-name">${escapeHtml(process.name)}</div>
-          <div class="url-dropdown-url">${escapeHtml(url)}</div>
-        </div>
-      `;
-    }).join('');
+    // Group processes by host
+    const groupedProcesses = groupProcessesByHost(processes);
+    
+    let html = '';
+    Object.keys(groupedProcesses).forEach(hostKey => {
+      const hostData = groupedProcesses[hostKey];
+      const hostInfo = hostData.host;
+      const processes = hostData.processes;
+      const isLocal = hostData.isLocal;
+      
+      // Add host header
+      html += createHostHeader(hostInfo, isLocal);
+      
+      // Add processes for this host
+      processes.forEach(process => {
+        const onlineIndicator = process.online ? 
+          '<div class="status-circle online"></div>' : 
+          '<div class="status-circle offline"></div>';
+        
+        if (process.ip === null || process.ip === undefined) {
+          // Non-selectable item with "turn on peer network" button
+          const networkUrl = `http://${process.host.ip}:42000/network`;
+          html += `
+            <div class="url-dropdown-item non-selectable">
+              <div class="url-dropdown-name">
+                ${onlineIndicator}
+                ${escapeHtml(process.name)}
+              </div>
+              <button class="peer-network-button" data-network-url="${networkUrl}"><i class="fa-solid fa-toggle-on"></i> Turn on peer network</button>
+            </div>
+          `;
+        } else {
+          // Normal selectable item
+          const url = `http://${process.ip}`;
+          html += `
+            <div class="url-dropdown-item" data-url="${url}" data-host-type="${process.host.local ? "local" : "remote"}">
+              ${onlineIndicator}
+              <div class="url-dropdown-name">${escapeHtml(process.name)}</div>
+              <div class="url-dropdown-url">${escapeHtml(url)}</div>
+            </div>
+          `;
+        }
+      });
+    });
 
-    modalDropdown.innerHTML = items;
+    modalDropdown.innerHTML = html;
 
-    modalDropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+    modalDropdown.querySelectorAll('.url-dropdown-item:not(.non-selectable)').forEach(item => {
       item.addEventListener('click', function() {
         const url = this.getAttribute('data-url');
         modalInput.value = url;
@@ -351,6 +564,15 @@ function initUrlDropdown(config = {}) {
         closeMobileModal();
       });
     });
+
+    // Add click handlers to peer network buttons in modal
+    modalDropdown.querySelectorAll('.peer-network-button').forEach(button => {
+      button.addEventListener('click', function(e) {
+        e.stopPropagation();
+        const networkUrl = this.getAttribute('data-network-url');
+        window.open(networkUrl, '_blank');
+      });
+    });
   }
   
   // Set up mobile button click handler
@@ -393,4 +615,4 @@ if (document.readyState === 'loading') {
   });
 } else {
   // DOM is already loaded, templates can initialize immediately
-}
+}