@@ -1,5 +1,10 @@
 import { test, expect, type Page } from '../support/fixtures.js';
-import { hasGarageCredentials, requireGarageCredentials } from '../support/garage.js';
+import {
+  createGarageBucketCredentials,
+  hasGarageAdmin,
+  hasGarageCredentials,
+  requireGarageCredentials
+} from '../support/garage.js';
 import { connectToStorage, openConnectForm } from './helpers.js';
 import { waitForHydration } from '../support/helpers.js';
 
@@ -321,3 +326,162 @@ test.describe('Storage — Connections management', () => {
     await expect(page).toHaveURL('/settings/connections');
   });
 });
+
+test.describe('Storage — Connection edit sidebar', () => {
+  test.use({ locale: 'en-US' });
+
+  test.beforeEach(() => {
+    test.skip(
+      !hasGarageCredentials() || !hasGarageAdmin(),
+      'Skipped: requires a running Garage instance with admin access'
+    );
+  });
+
+  /**
+   * Saves two connections that differ in their access key, then opens the edit page of the most
+   * recent one from the saved connections sidebar, which stays filled when navigated from there.
+   * Returns the access keys in sidebar order.
+   */
+  async function openEditWithTwoConnections(page: Page): Promise<[string, string]> {
+    const base = requireGarageCredentials();
+    const second = await createGarageBucketCredentials(base, {
+      bucketName: 'e2e-connection-edit-sidebar',
+      keyName: 'e2e-connection-edit-sidebar',
+      permissions: { owner: false, read: true, write: false }
+    });
+    await connectToStorage(page, base);
+    await connectToStorage(page, second, { clearSaved: false });
+
+    await page.getByRole('button', { name: 'Disconnect' }).click();
+    await page.getByRole('dialog').getByRole('button', { name: 'Disconnect' }).click();
+    await expect(page.getByRole('heading', { name: 'Connect to storage' })).toBeVisible();
+    const savedList = page.getByRole('list', { name: 'Saved connections' });
+    await expect(savedList.getByRole('listitem')).toHaveCount(2);
+    await savedList.getByRole('button', { name: 'More options' }).first().click({ force: true });
+    await page.getByRole('menuitem', { name: 'Edit', exact: true }).click();
+    await waitForHydration(page);
+    await expect(page.getByRole('heading', { name: 'Edit connection' })).toBeVisible();
+
+    // Most recently saved first.
+    return [second.accessKeyId, base.accessKeyId];
+  }
+
+  function sidebarConnection(page: Page, index: number) {
+    return page
+      .getByRole('list', { name: 'Saved connections' })
+      .getByRole('listitem')
+      .nth(index)
+      .getByRole('button')
+      .first();
+  }
+
+  async function deleteFromSidebar(page: Page, index: number) {
+    await page
+      .getByRole('list', { name: 'Saved connections' })
+      .getByRole('button', { name: 'More options' })
+      .nth(index)
+      .click({ force: true });
+    await page.getByRole('menuitem', { name: 'Delete', exact: true }).click();
+    await page.getByRole('dialog').getByRole('button', { name: 'Delete', exact: true }).click();
+  }
+
+  test('switching connections loads the other connection without asking', async ({ page }) => {
+    const [firstKey, secondKey] = await openEditWithTwoConnections(page);
+    await expect(page.getByLabel('Access key')).toHaveValue(firstKey);
+    const firstUrl = page.url();
+
+    await sidebarConnection(page, 1).click();
+
+    await expect(page).not.toHaveURL(firstUrl);
+    await expect(page.getByLabel('Access key')).toHaveValue(secondKey);
+    await expect(page.getByRole('dialog')).toHaveCount(0);
+
+    // The switch must not leave the form tainted.
+    await page.getByRole('link', { name: '← Manage connections' }).click();
+    await expect(page).toHaveURL('/settings/connections');
+    await expect(page.getByRole('dialog')).toHaveCount(0);
+  });
+
+  test('switching connections with unsaved changes asks first', async ({ page }) => {
+    await openEditWithTwoConnections(page);
+    const firstUrl = page.url();
+
+    await page.getByLabel('Connection name').fill('Changed name');
+    await sidebarConnection(page, 1).click();
+
+    await expect(page.getByRole('heading', { name: 'Unsaved changes' })).toBeVisible();
+    await page.getByRole('dialog').getByRole('button', { name: 'Stay on page' }).click();
+    await expect(page).toHaveURL(firstUrl);
+    await expect(page.getByLabel('Connection name')).toHaveValue('Changed name');
+  });
+
+  test('sidebar delete with unsaved changes asks in the app before deleting', async ({ page }) => {
+    await openEditWithTwoConnections(page);
+    let deleteRequests = 0;
+    let nativeDialogs = 0;
+    page.on('request', (request) => {
+      if (request.url().endsWith('?/deleteConnection')) deleteRequests++;
+    });
+    page.on('dialog', (dialog) => {
+      nativeDialogs++;
+      void dialog.dismiss();
+    });
+
+    await page.getByLabel('Connection name').fill('Changed name');
+    await deleteFromSidebar(page, 1);
+
+    await expect(page.getByRole('heading', { name: 'Unsaved changes' })).toBeVisible();
+    await page.getByRole('button', { name: 'Stay on page' }).click();
+    await expect(page.getByRole('heading', { name: 'Unsaved changes' })).toBeHidden();
+    await expect(page).toHaveURL(/\/edit$/);
+    expect(deleteRequests).toBe(0);
+
+    await deleteFromSidebar(page, 1);
+    await page.getByRole('button', { name: 'Leave' }).click();
+
+    await expect(page).toHaveURL('/settings/connections');
+    await expect(page.locator('table tbody tr')).toHaveCount(1);
+    expect(deleteRequests).toBe(1);
+    expect(nativeDialogs).toBe(0);
+  });
+
+  test('sidebar delete without changes deletes without asking', async ({ page }) => {
+    await openEditWithTwoConnections(page);
+
+    await deleteFromSidebar(page, 1);
+
+    await expect(page).toHaveURL('/settings/connections');
+    await expect(page.getByRole('heading', { name: 'Unsaved changes' })).toHaveCount(0);
+    await expect(page.locator('table tbody tr')).toHaveCount(1);
+
+    // The sidebar on the next edit page no longer lists the deleted connection.
+    await openFirstConnectionEditPage(page);
+    await expect(
+      page.getByRole('list', { name: 'Saved connections' }).getByRole('listitem')
+    ).toHaveCount(1);
+  });
+
+  test('a failed sidebar delete shows the error and keeps the unsaved changes', async ({
+    page
+  }) => {
+    await openEditWithTwoConnections(page);
+    // An invalid ID makes the action fail.
+    await page.route(/\?\/deleteConnection$/, (route) =>
+      route.continue({ postData: 'connectionId=not-a-uuid' })
+    );
+
+    await page.getByLabel('Connection name').fill('Changed name');
+    await deleteFromSidebar(page, 1);
+    await page.getByRole('button', { name: 'Leave' }).click();
+
+    await expect(
+      page.getByRole('alert').filter({ hasText: 'Connection not found.' })
+    ).toBeVisible();
+    await expect(page).toHaveURL(/\/edit$/);
+    await expect(page.getByLabel('Connection name')).toHaveValue('Changed name');
+
+    // The changes are still guarded.
+    await page.getByRole('link', { name: '← Manage connections' }).click();
+    await expect(page.getByRole('heading', { name: 'Unsaved changes' })).toBeVisible();
+  });
+});
@@ -53,6 +53,7 @@ async function clearSavedConnections(page: Page) {
         .catch(() => false)
     )
       break;
+    const before = await items.count();
     // Click the last button in the first list item. On desktop this is the
     // "more options" button (opacity-0, so use force). On mobile it's the
     // X delete button which submits the form directly.
@@ -65,9 +66,15 @@ async function clearSavedConnections(page: Page) {
       // Confirm in the modal
       await page.getByRole('button', { name: 'Delete', exact: true }).click();
     }
-    // The form action POSTs and the server redirects back to /storage;
-    // wait for the page to re-hydrate before checking the list again.
-    await waitForHydration(page);
+    // The delete is sent without a page reload: wait until the list has changed. The last
+    // delete empties it (desktop shows a placeholder, mobile hides the list).
+    await expect(async () => {
+      const changed =
+        !(await savedList.isVisible()) ||
+        (await savedList.getByText('No saved connections yet').isVisible()) ||
+        (await items.count()) < before;
+      expect(changed).toBe(true);
+    }).toPass();
   }
 }
 
@@ -103,14 +110,18 @@ export async function openConnectForm(page: Page, { clearSaved = true } = {}) {
   }
 }
 
-export async function connectToStorage(page: Page, credentials: GarageCredentials) {
-  await openConnectForm(page);
+export async function connectToStorage(
+  page: Page,
+  credentials: GarageCredentials,
+  { clearSaved = true } = {}
+) {
+  await openConnectForm(page, { clearSaved });
   const url = new URL(credentials.endpoint);
   const host = url.hostname;
   const port = url.port;
   const useTls = url.protocol === 'https:';
 
-  await page.getByLabel('Host').fill(host);
+  await page.getByLabel('Host', { exact: true }).fill(host);
   if (port) {
     await page.getByLabel('Port').fill(port);
   }
 
@@ -167,6 +167,7 @@
   "storage_connect_error_network": "Speicher-Backend nicht erreichbar — Host und Port prüfen.",
   "storage_connect_error_hdfs": "HDFS-Verbindungen werden noch nicht unterstützt.",
   "storage_connect_save_failed": "Die Verbindung konnte nicht gespeichert werden. Bitte erneut versuchen.",
+  "storage_connect_activate_failed": "Die Verbindung wurde gespeichert, konnte aber nicht aktiviert werden. Laden Sie die Seite neu und wählen Sie sie in den gespeicherten Verbindungen aus.",
   "storage_connect_host_required": "Host ist erforderlich",
   "storage_connect_host_invalid": "Host muss ein gültiger Hostname oder eine gültige IP-Adresse sein",
   "storage_connect_port_invalid": "Port muss eine ganze Zahl zwischen 1 und 65535 sein",
 
@@ -167,6 +167,7 @@
   "storage_connect_error_network": "Could not reach the storage backend — check the host and port.",
   "storage_connect_error_hdfs": "HDFS connections are not yet supported.",
   "storage_connect_save_failed": "Could not save the connection. Please try again.",
+  "storage_connect_activate_failed": "The connection was saved but could not be activated. Reload the page and select it from the saved connections.",
   "storage_connect_host_required": "Host is required",
   "storage_connect_host_invalid": "Host must be a valid hostname or IP address",
   "storage_connect_port_invalid": "Port must be a whole number between 1 and 65535",
 
@@ -6,7 +6,9 @@
   import TooltipTrigger from '$lib/components/TooltipTrigger.svelte';
   import { createResizablePanel } from './resizable-panel.svelte.js';
   import ResizeHandle from './ResizeHandle.svelte';
+  import { enhance } from '$app/forms';
   import { resolve } from '$app/paths';
+  import type { SubmitFunction } from '@sveltejs/kit';
   import * as m from '$lib/paraglide/messages.js';
   import type { ConnectionMetadata } from '$lib/storage/connection-types.js';
   import { connectionLabel } from '$lib/storage/display-helpers.js';
@@ -25,9 +27,16 @@
      * connection edits rather than activating them.
      */
     onselect?: (conn: ConnectionMetadata) => void;
+    /**
+     * Called before a delete is sent. Resolving `false` cancels it. Edit pages use this to ask
+     * about unsaved changes before the connection is deleted, not after.
+     */
+    onbeforedelete?: () => Promise<boolean>;
+    /** Called once the server has answered a delete; `deleted` is false when it failed. */
+    ondeletesettled?: (connectionId: string, deleted: boolean) => void;
   }
 
-  let { connections, activeId, onselect }: Props = $props();
+  let { connections, activeId, onselect, onbeforedelete, ondeletesettled }: Props = $props();
 
   const resize = createResizablePanel({
     storageKey: 'storage_connect_sidebar_width',
@@ -96,6 +105,22 @@
     closeContextMenu();
   }
 
+  const enhanceDelete: SubmitFunction = async ({ cancel }) => {
+    if (onbeforedelete && !(await onbeforedelete())) {
+      cancel();
+      cancelDelete();
+      return;
+    }
+    return async ({ formData, result, update }) => {
+      cancelDelete();
+      ondeletesettled?.(
+        String(formData.get('connectionId')),
+        result.type === 'redirect' || result.type === 'success'
+      );
+      await update();
+    };
+  };
+
   const deleteConn = $derived.by<SavedConnection | null>(() => {
     if (!menuConn) return null;
     const ep = menuConn.endpoint ?? '';
@@ -111,7 +136,13 @@
 
 <!-- Context menu (fixed, rendered outside the layout flow) -->
 {#if menuConn}
-  <form method="POST" action="?/deleteConnection" bind:this={deleteFormEl} class="contents">
+  <form
+    method="POST"
+    action="?/deleteConnection"
+    bind:this={deleteFormEl}
+    use:enhance={enhanceDelete}
+    class="contents"
+  >
     <input type="hidden" name="connectionId" value={menuConn.id} />
   </form>
   <ul
@@ -207,9 +238,7 @@
           <form
             method="POST"
             action="?/deleteConnection"
-            onsubmit={() => {
-              // Redirect handles the page update
-            }}
+            use:enhance={enhanceDelete}
             class="absolute -top-2 -right-2"
           >
             <input type="hidden" name="connectionId" value={conn.id} />
 
@@ -4,3 +4,17 @@ import type { TabsState } from './tabs.svelte.js';
 
 export const [getStorageState, setStorageState] = createContext<StorageState>();
 export const [getTabsState, setTabsState] = createContext<TabsState>();
+
+/**
+ * Lets the connection edit page ask about unsaved changes before the sidebar in its layout
+ * deletes a connection.
+ */
+export interface ConnectionEditGuard {
+  /** Resolves `true` when the delete may go ahead; the changes are then discarded. */
+  confirmDiscard: (() => Promise<boolean>) | null;
+  /** Brings back the discarded changes when the delete failed. */
+  restoreChanges: (() => void) | null;
+}
+
+export const [getConnectionEditGuard, setConnectionEditGuard] =
+  createContext<ConnectionEditGuard>();
@@ -5,21 +5,39 @@
   import StorageConnectionSidebar from '$lib/components/storage/sidebar/StorageConnectionSidebar.svelte';
   import type { ConnectionMetadata } from '$lib/storage/connection-types.js';
   import { connectionStore } from '$lib/storage/connection-store.svelte.js';
+  import { setConnectionEditGuard, type ConnectionEditGuard } from '$lib/storage/context.js';
 
   let { children } = $props();
 
   const connectionId = $derived(page.params.id);
 
+  // The edit page registers its unsaved-changes check here.
+  const editGuard: ConnectionEditGuard = { confirmDiscard: null, restoreChanges: null };
+  setConnectionEditGuard(editGuard);
+
   function handleSelect(conn: ConnectionMetadata) {
     goto(resolve(`/settings/connections/${conn.id}/edit`));
   }
+
+  // Only /storage fills the store, so drop deleted connections here.
+  function handleDeleteSettled(connectionId: string, deleted: boolean) {
+    if (deleted) {
+      connectionStore.connections = connectionStore.connections.filter(
+        (c) => c.id !== connectionId
+      );
+    } else {
+      editGuard.restoreChanges?.();
+    }
+  }
 </script>
 
 <div class="flex flex-col gap-4 md:flex-row md:items-start">
   <StorageConnectionSidebar
     connections={connectionStore.connections}
     activeId={connectionId}
     onselect={handleSelect}
+    onbeforedelete={() => editGuard.confirmDiscard?.() ?? Promise.resolve(true)}
+    ondeletesettled={handleDeleteSettled}
   />
   <div class="min-w-0 flex-1">
     {@render children()}