Allow going back to start

tests/e2e/integration.spec.js

@@ -1079,6 +1079,20 @@ test.describe('Custom patches', () => {
     // Mode → Back → Device
     await page.click('#btn-mode-back');
     await expect(page.locator('#step-device')).not.toBeHidden();
+
+    // Device → Back → Connect
+    await page.click('#btn-device-back');
+    await expect(page.locator('#step-connect')).not.toBeHidden();
+
+    // After going back from device, switching to manual mode should not
+    // carry stale device state (patches should not appear pre-loaded).
+    await page.click('#btn-manual');
+    await expect(page.locator('#step-mode')).not.toBeHidden();
+    await expect(page.locator('input[name="mode"][value="patches"]')).not.toBeDisabled();
+    await page.click('input[name="mode"][value="patches"]');
+    await page.click('#btn-mode-next');
+    // Manual + patches should go to version selection (not straight to patches)
+    await expect(page.locator('#step-manual-version')).not.toBeHidden();
   });
 
   test('no device — back navigation through manual mode flow', async ({ page }) => {

web/src/css/style.css

@@ -205,8 +205,28 @@ h2 {
 }
 
 #step-connect-instructions .disclaimer {
-    color: var(--text-secondary);
+    background: var(--primary-light);
+    border: 1px solid #bfdbfe;
+    color: #1e40af;
+    padding: 0.65rem 1rem;
+    border-radius: 8px;
     font-size: 0.80rem;
+    line-height: 1.55;
+}
+
+#step-connect-instructions .disclaimer summary {
+    cursor: pointer;
+    font-size: 0.83rem;
+}
+
+#step-connect-instructions .disclaimer ol {
+    margin: 0.5rem 0 0 1.25rem;
+    font-size: 0.80rem;
+    color: inherit;
+}
+
+#step-connect-instructions .disclaimer li {
+    margin-bottom: 0.25rem;
 }
 
 #mode-patches-hint {

web/src/index.html

@@ -134,7 +134,13 @@
                 <li>In <span id="connect-file-manager">your file manager</span>, you should now see <strong>KOBOeReader</strong> appear as a drive.</li>
                 <li>When you press the button below, your browser will open a folder picker. Select the <strong>KOBOeReader</strong> volume, then click <strong>"Allow"</strong> when your browser asks if you want to give this site permission to write to this folder.</li>
             </ol>
-            <p class="disclaimer"><strong>Anything else I should know?</strong> Information about your device is <b>never</b> collected, it is only displayed on this page, temporarily. This website will <b>only</b> write to your device when you press the "Write to Kobo" button when you're done with the wizard. (You also have the option to download an archive instead of writing everything to your device, when you're done with all steps.)</p>
+            <details class="disclaimer">
+                <summary><strong>Anything else I should know?</strong></summary>
+                <ol>
+                    <li>Information about your device is <b>never</b> collected. It is only displayed on this page, temporarily, and used to determine which options are compatible with your device.</li>
+                    <li>This website will <b>only</b> write to your device when you press the "Write to Kobo" button at the end of the wizard. You also have the option to download an archive instead.</li>
+                </ol>
+            </details>
             <div class="step-actions">
                 <button id="btn-connect-instructions-back" class="secondary">&#x2039; Back</button>
                 <button id="btn-connect-ready" class="primary">Select "KOBOeReader"</button>
@@ -191,8 +197,11 @@
                 <span>I understand that this model is likely not officially supported by NickelMenu yet, but I wish to continue regardless, and I understand it may not work correctly.</span>
             </label>
             <div class="step-actions">
-                <button id="btn-device-restore" class="secondary">Restore Software</button>
+                <button id="btn-device-back" class="secondary">&#x2039; Back</button>
-                <button id="btn-device-next" class="primary">Continue &#x203A;</button>
+                <div class="step-actions-right">
+                    <button id="btn-device-restore" class="secondary">Restore Software</button>
+                    <button id="btn-device-next" class="primary">Continue &#x203A;</button>
+                </div>
             </div>
         </section>
 

web/src/js/app.js

@@ -103,6 +103,7 @@ const btnManualConfirm = $('btn-manual-confirm');
 const btnManualVersionBack = $('btn-manual-version-back');
 const manualVersion = $('manual-version');
 const manualModel = $('manual-model');
+const btnDeviceBack = $('btn-device-back');
 const btnDeviceNext = $('btn-device-next');
 const btnDeviceRestore = $('btn-device-restore');
 const btnModeBack = $('btn-mode-back');
@@ -419,6 +420,17 @@ btnConnectReady.addEventListener('click', async () => {
     }
 });
 
+btnDeviceBack.addEventListener('click', () => {
+    // Reset state from the previous connection so it doesn't leak
+    // into a subsequent manual mode or a different device connection.
+    state.selectedPrefix = null;
+    state.patchesLoaded = false;
+    state.firmwareURL = null;
+    state.device = new KoboDevice();
+    setNavStep(1);
+    showStep(stepConnect);
+});
+
 btnDeviceNext.addEventListener('click', () => {
     goToModeSelection();
 });