pinokiod 3.326.0 → 3.327.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.326.0",
+  "version": "3.327.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/urldropdown.css

@@ -65,15 +65,24 @@ body.dark .url-dropdown {
   flex-direction: column;
   gap: 4px;
 }
+.url-dropdown-item.non-selectable {
+  cursor: default;
+}
 body.dark .url-dropdown-item {
   border-bottom-color: rgba(255,255,255,0.1);
 }
 .url-dropdown-item:hover {
   background: #f7fafc;
 }
+.url-dropdown-item.non-selectable:hover {
+  background: transparent;
+}
 body.dark .url-dropdown-item:hover {
   background: rgba(255,255,255,0.04);
 }
+body.dark .url-dropdown-item.non-selectable:hover {
+  background: transparent;
+}
 .url-dropdown-item:last-child {
   border-bottom: none;
 }
@@ -97,6 +106,9 @@ body.dark .url-dropdown-name {
   align-items: center;
   gap: 8px;
 }
+.url-dropdown-item.current-project .url-dropdown-url {
+  margin-bottom: 2px;
+}
 body.dark .url-dropdown-url {
   color: #a0aec0;
 }
@@ -147,6 +159,51 @@ body.dark .url-dropdown-empty {
   align-items: center;
   gap: 8px;
 }
+.url-mode-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.url-mode-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  background: rgba(127, 91, 243, 0.08);
+  color: #1f2937;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
+}
+.url-mode-button:hover {
+  background: rgba(127, 91, 243, 0.14);
+  border-color: rgba(15, 23, 42, 0.12);
+}
+.url-mode-button:active {
+  transform: translateY(1px);
+}
+.url-mode-button.active {
+  background: black;
+  border-color: black;
+  color: white;
+}
+body.dark .url-mode-button {
+  background: rgba(255,255,255,0.04);
+  border-color: rgba(255,255,255,0.08);
+  color: #e2e8f0;
+}
+body.dark .url-mode-button:hover {
+  background: rgba(255,255,255,0.08);
+  border-color: rgba(255,255,255,0.12);
+}
+body.dark .url-mode-button.active {
+  background: rgba(127, 91, 243, 0.8);
+  border-color: rgba(127, 91, 243, 0.8);
+  color: white;
+}
 .url-dropdown-create-button {
   padding: 8px 18px;
   border-radius: 6px;

package/server/public/urldropdown.js

@@ -169,6 +169,55 @@ function initUrlDropdown(config = {}) {
     return url.replace(/^https?:\/\//i, '');
   };
 
+  const parseProjectContext = (url) => {
+    if (!url || typeof url !== 'string') return null;
+    let parsed;
+    try {
+      parsed = new URL(url, (typeof window !== 'undefined' && window.location) ? window.location.origin : undefined);
+    } catch (_) {
+      return null;
+    }
+    const pathname = parsed.pathname || '';
+    const match = pathname.match(/^\/p\/([^/]+)(?:\/(dev|files|review))?\/?$/i);
+    if (!match) return null;
+    const project = match[1];
+    const currentMode = match[2] || 'run';
+    return {
+      origin: parsed.origin || '',
+      project,
+      basePath: `/p/${project}`,
+      currentMode
+    };
+  };
+
+  const buildProjectModeButtons = (projectCtx) => {
+    if (!projectCtx) return '';
+    const modes = [
+      { key: 'run', label: 'Run', icon: 'fa-solid fa-circle-play', suffix: '' },
+      { key: 'dev', label: 'Dev', icon: 'fa-solid fa-code', suffix: '/dev' },
+      { key: 'files', label: 'Files', icon: 'fa-solid fa-file-lines', suffix: '/files' },
+      { key: 'review', label: 'Forum', icon: 'fa-regular fa-message', suffix: '/review' },
+    ];
+
+    const buildTarget = (suffix) => {
+      const targetPath = `${projectCtx.basePath}${suffix}`;
+      return projectCtx.origin ? `${projectCtx.origin}${targetPath}` : targetPath;
+    };
+
+    const buttonsHtml = modes.map((mode) => {
+      const target = buildTarget(mode.suffix);
+      const isActive = mode.key === projectCtx.currentMode;
+      return `
+        <button type="button" class="url-mode-button${isActive ? ' active' : ''}" data-url="${escapeAttribute(target)}" data-host-type="current">
+          <i class="${mode.icon}"></i>
+          <span>${mode.label}</span>
+        </button>
+      `;
+    }).join('');
+
+    return `<div class="url-mode-buttons" role="group" aria-label="Project views">${buttonsHtml}</div>`;
+  };
+
   let isDropdownVisible = false;
   let allProcesses = []; // Store all processes for filtering
   let filteredProcesses = []; // Store currently filtered processes
@@ -480,25 +529,36 @@ function initUrlDropdown(config = {}) {
   const buildDropdownHtml = (processes, { includeCurrentTab = true, inputElement } = {}) => {
     const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
     const currentTitle = typeof document !== 'undefined' ? (document.title || 'Current tab') : 'Current tab';
+    const currentProject = parseProjectContext(currentUrl);
 
     let html = '';
     if (includeCurrentTab && currentUrl) {
       const schemeLabel = currentUrl.startsWith('https://') ? 'HTTPS' : 'HTTP';
+      const currentPathLabel = currentProject ? currentProject.basePath : formatUrlLabel(currentUrl) || currentUrl;
+      const projectButtons = currentProject ? buildProjectModeButtons(currentProject) : '';
       html += `
         <div class="url-dropdown-host-header current-tab">
           <span class="host-name">Current tab</span>
         </div>
-        <div class="url-dropdown-item" data-url="${escapeAttribute(currentUrl)}" data-host-type="current">
+        <div class="url-dropdown-item${currentProject ? ' non-selectable current-project' : ''}" data-url="${escapeAttribute(currentUrl)}" data-host-type="current">
           <div class="url-dropdown-name">
             <span>
               <i class="fa-solid fa-clone"></i>
               ${escapeHtml(currentTitle)}
             </span>
           </div>
-          <div class="url-dropdown-url">
-            <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
-            <span class="url-address">${escapeHtml(formatUrlLabel(currentUrl) || currentUrl)}</span>
-          </div>
+          ${currentProject ? `
+            <div class="url-dropdown-url">
+              <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
+              <span class="url-address">${escapeHtml(currentPathLabel)}</span>
+            </div>
+            ${projectButtons}
+          ` : `
+            <div class="url-dropdown-url">
+              <span class="url-scheme ${schemeLabel === 'HTTPS' ? 'https' : 'http'}">${schemeLabel}</span>
+              <span class="url-address">${escapeHtml(currentPathLabel)}</span>
+            </div>
+          `}
         </div>
       `;
     }
@@ -546,6 +606,14 @@ function initUrlDropdown(config = {}) {
         }
       });
     });
+    container.querySelectorAll('.url-mode-button').forEach(button => {
+      button.addEventListener('click', function(event) {
+        event.stopPropagation();
+        const url = this.getAttribute('data-url');
+        const type = this.getAttribute('data-host-type') || 'current';
+        onSelect(url, type, selectionOptions);
+      });
+    });
     container.querySelectorAll('.peer-network-button').forEach(button => {
       button.addEventListener('click', function(event) {
         event.stopPropagation();