pinokiod 3.48.0 → 3.50.0

package/server/public/urldropdown.js

@@ -0,0 +1,396 @@
+/**
+ * URL Dropdown functionality for process selection
+ * Fetches running processes from /info/procs API and displays them in a dropdown
+ */
+
+function initUrlDropdown(config = {}) {
+  const urlInput = document.querySelector('.urlbar input[type="url"]');
+  const dropdown = document.getElementById('url-dropdown');
+  const mobileButton = document.getElementById('mobile-link-button');
+  
+  if (!urlInput || !dropdown) {
+    console.warn('URL dropdown elements not found');
+    return;
+  }
+
+  // Configuration options
+  const options = {
+    clearBehavior: config.clearBehavior || 'empty', // 'empty' or 'restore'
+    defaultValue: config.defaultValue || '',
+    apiEndpoint: config.apiEndpoint || '/info/procs',
+    ...config
+  };
+
+  let isDropdownVisible = false;
+  let allProcesses = []; // Store all processes for filtering
+  let filteredProcesses = []; // Store currently filtered processes
+
+  // Initialize input field state based on clear behavior
+  initializeInputValue();
+  
+  // Handle page navigation events
+  window.addEventListener('pageshow', function(event) {
+    if (event.persisted || window.performance?.navigation?.type === 2) {
+      initializeInputValue();
+    }
+  });
+
+  // Event listeners
+  urlInput.addEventListener('focus', function() {
+    // Auto-select text for restore behavior to make filtering easier
+    if (options.clearBehavior === 'restore' && urlInput.value) {
+      // Use setTimeout to ensure the focus event completes first
+      setTimeout(() => {
+        urlInput.select();
+      }, 0);
+    }
+    showDropdown();
+  });
+  urlInput.addEventListener('input', handleInputChange);
+  
+  // Hide dropdown when clicking outside
+  document.addEventListener('click', function(e) {
+    if (!e.target.closest('.url-input-container')) {
+      hideDropdown();
+    }
+  });
+
+  function initializeInputValue() {
+    if (options.clearBehavior === 'empty') {
+      urlInput.value = '';
+    } else if (options.clearBehavior === 'restore') {
+      const originalValue = urlInput.getAttribute('value') || options.defaultValue;
+      if (urlInput.value !== originalValue) {
+        urlInput.value = originalValue;
+      }
+    }
+  }
+
+  function showDropdown() {
+    if (isDropdownVisible && allProcesses.length > 0) {
+      // If dropdown is already visible and we have data, show all initially
+      showAllProcesses();
+      return;
+    }
+    
+    isDropdownVisible = true;
+    dropdown.style.display = 'block';
+    
+    // If we already have processes data, show all initially
+    if (allProcesses.length > 0) {
+      showAllProcesses();
+      return;
+    }
+    
+    // Otherwise, show loading and fetch data
+    dropdown.innerHTML = '<div class="url-dropdown-loading">Loading running processes...</div>';
+    
+    // Fetch processes from API
+    fetch(options.apiEndpoint)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        allProcesses = data.info || [];
+        showAllProcesses(); // Show all processes when dropdown first opens
+      })
+      .catch(error => {
+        console.error('Failed to fetch processes:', error);
+        dropdown.innerHTML = '<div class="url-dropdown-empty">Failed to load processes</div>';
+        allProcesses = [];
+      });
+  }
+
+  function showAllProcesses() {
+    filteredProcesses = allProcesses;
+    populateDropdown(filteredProcesses);
+  }
+
+  function handleInputChange() {
+    if (!isDropdownVisible) return;
+    
+    const query = urlInput.value.toLowerCase().trim();
+    
+    // Special case: if text is selected (user just focused), don't filter yet
+    if (urlInput.selectionStart === 0 && urlInput.selectionEnd === urlInput.value.length) {
+      // Text is fully selected, show all processes until user starts typing
+      filteredProcesses = allProcesses;
+    } else if (!query) {
+      // No query, show all processes
+      filteredProcesses = allProcesses;
+    } else {
+      // Filter processes based on name and URL
+      filteredProcesses = allProcesses.filter(process => {
+        const url = `http://${process.ip}`;
+        const name = process.name.toLowerCase();
+        const urlLower = url.toLowerCase();
+        
+        return name.includes(query) || urlLower.includes(query);
+      });
+    }
+    
+    populateDropdown(filteredProcesses);
+  }
+
+  function hideDropdown() {
+    isDropdownVisible = false;
+    dropdown.style.display = 'none';
+  }
+
+  function populateDropdown(processes) {
+    if (processes.length === 0) {
+      const query = urlInput.value.toLowerCase().trim();
+      const message = query 
+        ? `No processes match "${query}"` 
+        : 'No running processes found';
+      dropdown.innerHTML = `<div class="url-dropdown-empty">${message}</div>`;
+      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('');
+
+    dropdown.innerHTML = items;
+
+    // Add click handlers to dropdown items
+    dropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+      item.addEventListener('click', function() {
+        const url = this.getAttribute('data-url');
+        urlInput.value = url;
+        hideDropdown();
+        // Submit the form
+        urlInput.closest('form').dispatchEvent(new Event('submit'));
+      });
+    });
+  }
+
+  // Utility function to escape HTML
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Mobile modal functionality
+  function createMobileModal() {
+    const overlay = document.createElement('div');
+    overlay.className = 'url-modal-overlay';
+    overlay.id = 'url-modal-overlay';
+    
+    const content = document.createElement('div');
+    content.className = 'url-modal-content';
+    
+    const closeButton = document.createElement('span');
+    closeButton.className = 'url-modal-close';
+    closeButton.innerHTML = '&times;';
+    closeButton.onclick = closeMobileModal;
+    
+    const modalInput = document.createElement('input');
+    modalInput.type = 'url';
+    modalInput.className = 'url-modal-input';
+    modalInput.placeholder = 'enter a local url';
+    
+    const modalDropdown = document.createElement('div');
+    modalDropdown.className = 'url-dropdown';
+    modalDropdown.id = 'url-modal-dropdown';
+    modalDropdown.style.position = 'relative';
+    modalDropdown.style.top = '0';
+    modalDropdown.style.left = '0';
+    modalDropdown.style.right = '0';
+    modalDropdown.style.marginTop = '10px';
+    
+    content.appendChild(closeButton);
+    content.appendChild(modalInput);
+    content.appendChild(modalDropdown);
+    overlay.appendChild(content);
+    
+    return { overlay, input: modalInput, dropdown: modalDropdown };
+  }
+  
+  function showMobileModal() {
+    let modal = document.getElementById('url-modal-overlay');
+    if (!modal) {
+      const { overlay, input: modalInput, dropdown: modalDropdown } = createMobileModal();
+      modal = overlay;
+      document.body.appendChild(modal);
+      
+      // Initialize dropdown functionality for modal
+      modalInput.addEventListener('focus', function() {
+        if (options.clearBehavior === 'restore' && modalInput.value) {
+          setTimeout(() => modalInput.select(), 0);
+        }
+        showModalDropdown(modalDropdown);
+      });
+      modalInput.addEventListener('input', function() {
+        handleModalInputChange(modalInput, modalDropdown);
+      });
+      
+      // Close modal when clicking outside content
+      modal.addEventListener('click', function(e) {
+        if (e.target === modal) {
+          closeMobileModal();
+        }
+      });
+      
+      // Handle form submission
+      modalInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          if (modalInput.value) {
+            urlInput.value = modalInput.value;
+            urlInput.closest('form').dispatchEvent(new Event('submit'));
+            closeMobileModal();
+          }
+        }
+      });
+    }
+    
+    modal.style.display = 'flex';
+    const modalInput = modal.querySelector('.url-modal-input');
+    
+    // Set initial value based on config
+    if (options.clearBehavior === 'restore') {
+      modalInput.value = urlInput.value || options.defaultValue || '';
+    } else {
+      modalInput.value = '';
+    }
+    
+    setTimeout(() => modalInput.focus(), 100);
+  }
+  
+  function closeMobileModal() {
+    const modal = document.getElementById('url-modal-overlay');
+    if (modal) {
+      modal.style.display = 'none';
+    }
+  }
+  
+  function showModalDropdown(modalDropdown) {
+    modalDropdown.style.display = 'block';
+    
+    if (allProcesses.length > 0) {
+      populateModalDropdown(allProcesses, modalDropdown);
+      return;
+    }
+    
+    modalDropdown.innerHTML = '<div class="url-dropdown-loading">Loading running processes...</div>';
+    
+    fetch(options.apiEndpoint)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        allProcesses = data.info || [];
+        populateModalDropdown(allProcesses, modalDropdown);
+      })
+      .catch(error => {
+        console.error('Failed to fetch processes:', error);
+        modalDropdown.innerHTML = '<div class="url-dropdown-empty">Failed to load processes</div>';
+      });
+  }
+  
+  function handleModalInputChange(modalInput, modalDropdown) {
+    const query = modalInput.value.toLowerCase().trim();
+    let filtered = allProcesses;
+    
+    if (modalInput.selectionStart === 0 && modalInput.selectionEnd === modalInput.value.length) {
+      filtered = allProcesses;
+    } else if (query) {
+      filtered = allProcesses.filter(process => {
+        const url = `http://${process.ip}`;
+        const name = process.name.toLowerCase();
+        const urlLower = url.toLowerCase();
+        return name.includes(query) || urlLower.includes(query);
+      });
+    }
+    
+    populateModalDropdown(filtered, modalDropdown);
+  }
+  
+  function populateModalDropdown(processes, modalDropdown) {
+    const modalInput = modalDropdown.parentElement.querySelector('.url-modal-input');
+    
+    if (processes.length === 0) {
+      const query = modalInput.value.toLowerCase().trim();
+      const message = query ? `No processes match "${query}"` : 'No running processes found';
+      modalDropdown.innerHTML = `<div class="url-dropdown-empty">${message}</div>`;
+      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('');
+
+    modalDropdown.innerHTML = items;
+
+    modalDropdown.querySelectorAll('.url-dropdown-item').forEach(item => {
+      item.addEventListener('click', function() {
+        const url = this.getAttribute('data-url');
+        modalInput.value = url;
+        urlInput.value = url;
+        urlInput.closest('form').dispatchEvent(new Event('submit'));
+        closeMobileModal();
+      });
+    });
+  }
+  
+  // Set up mobile button click handler
+  if (mobileButton) {
+    mobileButton.addEventListener('click', showMobileModal);
+  }
+
+  // Public API
+  return {
+    show: showDropdown,
+    hide: hideDropdown,
+    showAll: showAllProcesses,
+    showMobileModal: showMobileModal,
+    closeMobileModal: closeMobileModal,
+    refresh: function() {
+      allProcesses = []; // Clear cache to force refetch
+      if (isDropdownVisible) {
+        showDropdown();
+      }
+    },
+    filter: handleInputChange,
+    destroy: function() {
+      // Remove the focus event listener (need to store reference)
+      urlInput.removeEventListener('input', handleInputChange);
+      if (mobileButton) {
+        mobileButton.removeEventListener('click', showMobileModal);
+      }
+      hideDropdown();
+      closeMobileModal();
+      allProcesses = [];
+      filteredProcesses = [];
+    }
+  };
+}
+
+// Auto-initialize if DOM is already loaded, otherwise wait for it
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', function() {
+    // Will be initialized by individual templates with their specific config
+  });
+} else {
+  // DOM is already loaded, templates can initialize immediately
+}

package/server/public/window_storage.js

@@ -0,0 +1,30 @@
+const WINDOW_ID = (() => {
+  // Try to get existing window ID or create a new one
+  let id = sessionStorage.getItem('__window_id');
+  if (!id) {
+    id = Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    try { sessionStorage.setItem('__window_id', id); } catch (_) {}
+  }
+  return id;
+})();
+
+// Window-specific storage wrapper
+window.windowStorage = {
+  setItem: (key, value) => {
+    try { 
+      sessionStorage.setItem(`${WINDOW_ID}:${key}`, value); 
+    } catch (_) {}
+  },
+  removeItem: (key, value) => {
+    try { 
+      sessionStorage.removeItem(`${WINDOW_ID}:${key}`)
+    } catch (_) {}
+  },
+  getItem: (key) => {
+    try { 
+      return sessionStorage.getItem(`${WINDOW_ID}:${key}`); 
+    } catch (_) { 
+      return null; 
+    }
+  }
+};

package/server/views/app.ejs

@@ -1663,13 +1663,30 @@ body.dark .pinokio-git-commit-hash:hover {
 body.minimized {
   flex-direction: row !important;
 }
+body.minimized aside {
+  display: none;
+}
+@media only screen and (max-width: 800px) {
+  .mode-selector .btn2 {
+    width: unset;
+  }
+  .mode-selector .btn2 .caption {
+    display: none;
+  }
+}
+/*
 @media only screen and (max-width: 800px) {
   body {
     flex-direction: row !important;
   }
+  aside {
+    display: none;
+  }
 }
+*/
 </style>
 <link href="/app.css" rel="stylesheet"/>
+<script src="/window_storage.js"></script>
 <script src="/timeago.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
@@ -2003,24 +2020,6 @@ body.minimized {
     document.querySelector("main").appendChild(frame)
     loaded[name] = true
   }
-  /*
-  if (document.body.classList.contains("minimized")) {
-    document.querySelector("#collapse i").className = "fa-solid fa-compress"
-  } else {
-    document.querySelector("#collapse i").className = "fa-solid fa-expand"
-  }
-  */
-  document.querySelector("#collapse").addEventListener("click", (e) => {
-    document.body.classList.toggle("minimized")
-    let frame_key = window.frameElement?.name || "";
-    if (document.body.classList.contains("minimized")) {
-//      document.querySelector("#collapse i").className = "fa-solid fa-compress"
-      sessionStorage.setItem(frame_key + ":window_mode", "minimized")
-    } else {
-//      document.querySelector("#collapse i").className = "fa-solid fa-expand"
-      sessionStorage.setItem(frame_key + ":window_mode", "full")
-    }
-  })
   document.addEventListener("click", (e) => {
     interacted = true
   })
@@ -2256,7 +2255,7 @@ body.minimized {
         <% if (type !== "run") { %>
           let _url = new URL(target.href)
           let frame_key = window.frameElement?.name || "";
-          sessionStorage.setItem(frame_key + ":url", _url.pathname + _url.search + _url.hash)
+          windowStorage.setItem(frame_key + ":url", _url.pathname + _url.search + _url.hash)
         <% } %>
 
         // hide all frames
@@ -3223,7 +3222,7 @@ body.minimized {
   refresh_du("logs")
   let frame_key = window.frameElement?.name || "";
 
-  let selection_url = sessionStorage.getItem(frame_key + ":url")
+  let selection_url = windowStorage.getItem(frame_key + ":url")
   console.log({ frame_key, selection_url })
   let selection
   if (selection_url) {
@@ -3237,13 +3236,6 @@ body.minimized {
       selection.click()
 //    }, 100)
   }
-  let window_mode = sessionStorage.getItem(frame_key + ":window_mode")
-  console.log({ window_mode })
-  if (window_mode) {
-    if (window_mode === "minimized") {
-      document.body.classList.add("minimized")
-    }
-  }
   <% if (type !== 'run') { %>
     fetch("<%=repos%>").then((res) => {
       return res.text()