fix: switch to code when executing actions

Author: norberttech

web/landing/assets/controllers/playground_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-    static outlets = ["wasm", "code-editor", "turnstile", "playground-output"]
+    static outlets = ["wasm", "code-editor", "turnstile", "playground-output", "playground-tabs"]
     static targets = ["loadingMessage", "loadingBar", "loadingPercent", "navigation", "editor", "outputContainer", "storageIndicator", "actionSpinner"]
     static values = {
         packageIcon: String,
@@ -20,6 +20,9 @@ export default class extends Controller {
     }
 
     onActionStarted() {
+        if (this.hasPlaygroundTabsOutlet) {
+            this.playgroundTabsOutlet.switchToCode()
+        }
         document.querySelectorAll('#action-run, #action-format, #action-share, #action-upload').forEach(btn => btn.disabled = true)
         const resetLink = document.getElementById('action-reset')
         if (resetLink) {

web/landing/assets/controllers/playground_tabs_controller.js

@@ -60,6 +60,11 @@ export default class extends Controller {
             return
         }
 
+        if (filePath === '/code.php') {
+            this.switchToCode()
+            return
+        }
+
         if (!this.hasWasmOutlet) {
             this.#log('WASM outlet not found')
             return
@@ -102,6 +107,17 @@ export default class extends Controller {
         this.#updateTabUI()
     }
 
+    openFileFromDropdown(event) {
+        const filePath = event.target.value
+        if (!filePath) {
+            return
+        }
+
+        event.target.value = ''
+
+        this.openFile({ currentTarget: { dataset: { filePath } } })
+    }
+
     downloadPreviewFile(event) {
         if (event) {
             event.preventDefault()

web/landing/assets/controllers/playground_workspace_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
     static outlets = ["wasm", "code-editor", "playground"]
-    static targets = ["tree", "emptyState"]
+    static targets = ["tree", "dropdown", "emptyState"]
     static values = {
         rootPath: { type: String, default: '/workspace' },
         folderIcon: String,
@@ -104,6 +104,7 @@ export default class extends Controller {
         }
 
         this.treeTarget.innerHTML = this.#renderFileTree(tree)
+        this.#populateDropdown(tree)
         this.#treeRendered = true
 
         if (this.hasEmptyStateTarget) {
@@ -239,4 +240,42 @@ export default class extends Controller {
 
         return count
     }
+
+    #populateDropdown(tree) {
+        if (!this.hasDropdownTarget) {
+            return
+        }
+
+        const files = this.#collectFiles(tree)
+
+        this.dropdownTarget.innerHTML = '<option value="">Select a file...</option>'
+        this.dropdownTarget.innerHTML += '<option value="/code.php">code.php</option>'
+
+        for (const file of files) {
+            const option = document.createElement('option')
+            option.value = file.path
+            option.textContent = file.path
+            this.dropdownTarget.appendChild(option)
+        }
+    }
+
+    #collectFiles(tree, prefix = '') {
+        const files = []
+
+        const entries = Object.values(tree).sort((a, b) => {
+            if (a.type === 'directory' && b.type !== 'directory') return -1
+            if (a.type !== 'directory' && b.type === 'directory') return 1
+            return a.name.localeCompare(b.name)
+        })
+
+        for (const entry of entries) {
+            if (entry.type === 'directory' && entry.children) {
+                files.push(...this.#collectFiles(entry.children, `${prefix}/${entry.name}`))
+            } else if (entry.type === 'file') {
+                files.push({ path: entry.path, name: entry.name })
+            }
+        }
+
+        return files
+    }
 }

web/landing/assets/styles/app.css

@@ -349,9 +349,39 @@ code {
         @apply grid gap-6 grid-cols-1 lg:grid-cols-12 mb-6;
         display: none; /* Hidden by default, shown by Stimulus */
 
+        div.file-browser-mobile {
+            @apply grid grid-cols-[auto_1fr] items-center gap-4;
+
+            @screen lg {
+                display: none;
+            }
+
+            .file-browser-label {
+                @apply text-sm font-bold text-stone-400 uppercase whitespace-nowrap;
+
+                .help-trigger-workspace {
+                    @apply cursor-pointer border-0 bg-transparent p-0 ml-2 transition-opacity hover:opacity-70 inline-block align-middle;
+                }
+            }
+
+            .file-select {
+                @apply bg-stone-800 text-white border border-gray rounded px-3 py-2 text-base
+                    focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-transparent;
+
+                option {
+                    @apply text-base py-2;
+                }
+            }
+        }
+
         div.file-browser {
             @apply rounded p-4 overflow-auto shadow-2xl shadow-gray border-gray border-2
                 lg:col-span-2 bg-transparent;
+            display: none;
+
+            @screen lg {
+                display: block;
+            }
 
             .file-browser-header {
                 @apply text-sm font-bold mb-3 text-stone-400 uppercase;

web/landing/templates/playground/index.html.twig

@@ -62,6 +62,7 @@
      data-playground-storage-code-editor-outlet="#code-editor"
      data-playground-storage-wasm-outlet="#playground"
      data-playground-reset-playground-storage-outlet="#playground"
+     data-playground-playground-tabs-outlet="#playground-editor"
      data-action="wasm:initialized->playground#onWasmInitialized
                   wasm:initialized->playground-workspace#refreshTree
                   wasm:initialized->playground-share#onWasmResourcesLoaded
@@ -241,10 +242,28 @@
             </a>
         </div>
     </div>
-    <div class="editor" data-playground-target="editor"
+    <div id="playground-editor" class="editor" data-playground-target="editor"
          data-controller="playground-tabs"
          data-playground-tabs-wasm-outlet="#playground"
          data-playground-tabs-code-editor-outlet="#code-editor">
+        <div class="file-browser-mobile">
+            <label for="file-select" class="file-browser-label">
+                Workspace
+                <button
+                        data-action="click->playground-help#showTopic"
+                        data-help-topic="help-workspace"
+                        class="help-trigger-workspace"
+                        aria-label="What is the Workspace?">
+                    <img src="{{ asset('images/icons/help.svg') }}" alt="Help" width="14" height="14">
+                </button>
+            </label>
+            <select id="file-select"
+                    class="file-select"
+                    data-playground-workspace-target="dropdown"
+                    data-action="change->playground-tabs#openFileFromDropdown">
+                <option value="">Select a file...</option>
+            </select>
+        </div>
         <div class="file-browser">
             <div class="file-browser-header">
                 Workspace