diff --git a/e2e/sidebar-collapse.spec.ts b/e2e/sidebar-collapse.spec.ts
new file mode 100644
index 00000000..c54528bf
--- /dev/null
+++ b/e2e/sidebar-collapse.spec.ts
@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test'
+
+// On macOS, Alt+key produces special characters, so we dispatch events directly
+function dispatchAltKey(page: import('@playwright/test').Page, key: string) {
+  return page.evaluate((k) => {
+    window.dispatchEvent(new KeyboardEvent('keydown', {
+      key: k, altKey: true, metaKey: false, ctrlKey: false,
+      bubbles: true, cancelable: true,
+    }))
+  }, key)
+}
+
+async function loadApp(page: import('@playwright/test').Page) {
+  await page.goto('/')
+  // Clear stored view mode so we start fresh
+  await page.evaluate(() => localStorage.removeItem('laputa-view-mode'))
+  await page.reload()
+  await page.waitForTimeout(500)
+}
+
+test.describe('Sidebar collapse', () => {
+  test('default: all three panels visible', async ({ page }) => {
+    await loadApp(page)
+
+    await expect(page.locator('.app__sidebar')).toBeVisible()
+    await expect(page.locator('.app__note-list')).toBeVisible()
+    await expect(page.locator('.app__editor')).toBeVisible()
+
+    await page.screenshot({ path: 'test-results/collapse-all-panels.png', fullPage: true })
+  })
+
+  test('collapse button hides sidebar', async ({ page }) => {
+    await loadApp(page)
+
+    const collapseBtn = page.locator('button[aria-label="Collapse sidebar"]')
+    await expect(collapseBtn).toBeVisible()
+    await collapseBtn.click()
+    await page.waitForTimeout(500)
+
+    await expect(page.locator('.app__sidebar')).toHaveCount(0)
+    await expect(page.locator('.app__note-list')).toBeVisible()
+    await expect(page.locator('.app__editor')).toBeVisible()
+
+    await page.screenshot({ path: 'test-results/collapse-sidebar-hidden.png', fullPage: true })
+  })
+
+  test('Alt+1 shows editor only', async ({ page }) => {
+    await loadApp(page)
+
+    await dispatchAltKey(page, '1')
+    await page.waitForTimeout(500)
+
+    await expect(page.locator('.app__sidebar')).toHaveCount(0)
+    await expect(page.locator('.app__note-list')).toHaveCount(0)
+    await expect(page.locator('.app__editor')).toBeVisible()
+
+    await page.screenshot({ path: 'test-results/collapse-editor-only.png', fullPage: true })
+  })
+
+  test('Alt+2 shows editor + note list', async ({ page }) => {
+    await loadApp(page)
+
+    await dispatchAltKey(page, '2')
+    await page.waitForTimeout(500)
+
+    await expect(page.locator('.app__sidebar')).toHaveCount(0)
+    await expect(page.locator('.app__note-list')).toBeVisible()
+    await expect(page.locator('.app__editor')).toBeVisible()
+
+    await page.screenshot({ path: 'test-results/collapse-editor-list.png', fullPage: true })
+  })
+
+  test('Alt+3 restores all panels after collapse', async ({ page }) => {
+    await loadApp(page)
+
+    // Collapse first
+    await dispatchAltKey(page, '1')
+    await page.waitForTimeout(500)
+    await expect(page.locator('.app__sidebar')).toHaveCount(0)
+
+    // Restore
+    await dispatchAltKey(page, '3')
+    await page.waitForTimeout(500)
+    await expect(page.locator('.app__sidebar')).toBeVisible()
+    await expect(page.locator('.app__note-list')).toBeVisible()
+    await expect(page.locator('.app__editor')).toBeVisible()
+
+    await page.screenshot({ path: 'test-results/collapse-restored.png', fullPage: true })
+  })
+})