webusb: add support for exporting. usb: block requests with no timeout, using pbox to cancel if the user presses B.

tools/webusb/index.html

@@ -32,8 +32,20 @@
             </div>
         </div>
 
+
+        <!-- Step 2: Mode Selection -->
         <div class="section">
-            <h3>Step 2: Select Files to Transfer</h3>
+            <h3>Step 2: Select Mode</h3>
+            <label for="modeSelect" style="font-weight: 600; color: #bed0d6;">Choose transfer mode:</label>
+            <select id="modeSelect" class="custom-select" style="margin-left: 10px;">
+                <option value="upload">Upload (PC → Switch)</option>
+                <option value="download">Download (Switch → PC)</option>
+            </select>
+        </div>
+
+        <!-- Step 3: Upload (default) - File Selection -->
+        <div class="section" id="uploadStep3Section">
+            <h3>Step 3: Select Files to Transfer</h3>
             <input type="file" id="fileInput" accept=".nsp, .xci, .nsz, .xcz" multiple class="hidden">
 
             <div class="file-controls">
@@ -50,8 +62,16 @@
             </div>
         </div>
 
-        <div class="section">
-            <h3>Step 3: Transfer Files</h3>
+        <!-- Step 3: Download - Folder Picker (hidden by default) -->
+        <div class="section" id="downloadStep3Section" style="display: none;">
+            <h3>Step 3: Select Download Destination</h3>
+            <button id="pickFolderBtn" class="btn-add">Pick Folder</button>
+            <span id="selectedFolderName" style="margin-left: 10px; color: #5cbeff;"></span>
+        </div>
+
+        <!-- Step 4: Upload - Transfer Files -->
+        <div class="section" id="uploadStep4Section">
+            <h3>Step 4: Transfer Files</h3>
             <button id="sendBtn" disabled>Send Files</button>
             <div id="transferProgress" class="device-info" style="display: none;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
@@ -91,6 +111,18 @@
             </div>
         </div>
 
+        <!-- Step 4: Download - Spinner and status -->
+        <div class="section" id="downloadStep4Section" style="display: none;">
+            <h3>Step 4: Download Files</h3>
+            <div id="downloadSpinner" style="display:none;align-items:center;gap:10px;margin:18px 0 0 0;font-size:1.1em;">
+                <span class="spinner"></span>
+                <div id="downloadSpinnerTextWrap" style="display:flex;align-items:center;flex:1;min-width:0;">
+                    <span id="downloadSpinnerText" style="overflow-x:auto;white-space:nowrap;display:block;min-width:0;flex:1;"></span>
+                    <span id="downloadSpinnerSpeed" style="flex-shrink:0;margin-left:12px;color:#32ffcf;"></span>
+                </div>
+            </div>
+        </div>
+
         <div class="section">
             <h3>Logs</h3>
             <div id="logDiv" class="log"></div>