diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts index 185fa8b3..f07efa2c 100644 --- a/e2e/app.spec.ts +++ b/e2e/app.spec.ts @@ -19,9 +19,9 @@ test('sidebar shows filters and section groups', async ({ page }) => { await expect(page.locator('.sidebar__filter-item').filter({ hasText: 'All Notes' })).toBeVisible() await expect(page.locator('.sidebar__filter-item').filter({ hasText: 'People' })).toBeVisible() await expect(page.locator('.sidebar__filter-item').filter({ hasText: 'Events' })).toBeVisible() - // Section groups - await expect(page.getByText('PROJECTS')).toBeVisible() - await expect(page.getByText('EXPERIMENTS')).toBeVisible() - await expect(page.getByText('RESPONSIBILITIES')).toBeVisible() - await expect(page.getByText('PROCEDURES')).toBeVisible() + // Section groups (use exact match to avoid collision with note list pills) + await expect(page.locator('.sidebar__section-label', { hasText: 'PROJECTS' })).toBeVisible() + await expect(page.locator('.sidebar__section-label', { hasText: 'EXPERIMENTS' })).toBeVisible() + await expect(page.locator('.sidebar__section-label', { hasText: 'RESPONSIBILITIES' })).toBeVisible() + await expect(page.locator('.sidebar__section-label', { hasText: 'PROCEDURES' })).toBeVisible() }) diff --git a/src/components/Editor.css b/src/components/Editor.css index 0ed979e4..c57b265c 100644 --- a/src/components/Editor.css +++ b/src/components/Editor.css @@ -10,15 +10,23 @@ .editor__placeholder { display: flex; + flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; - color: #555; + color: #444; + gap: 8px; } .editor__placeholder p { - margin: 8px 0; + margin: 0; + font-size: 15px; +} + +.editor__placeholder-hint { + font-size: 12px; + color: #383858; } /* Tab bar */ @@ -38,19 +46,20 @@ display: flex; align-items: center; gap: 6px; - padding: 6px 12px; + padding: 7px 14px; font-size: 12px; - color: #888; + color: #777; cursor: pointer; border-right: 1px solid #2a2a4a; white-space: nowrap; max-width: 180px; flex-shrink: 0; + transition: all 0.1s; } .editor__tab:hover { - background: #1e1e3a; - color: #ccc; + background: #1a1a35; + color: #bbb; } .editor__tab--active { @@ -73,6 +82,13 @@ padding: 0 2px; line-height: 1; border-radius: 3px; + opacity: 0; + transition: opacity 0.1s; +} + +.editor__tab:hover .editor__tab-close, +.editor__tab--active .editor__tab-close { + opacity: 1; } .editor__tab-close:hover { diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 980d236c..70aa6370 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -122,6 +122,7 @@ export function Editor({ tabs, activeTabPath, onSwitchTab, onCloseTab, onNavigat
Select a note to start editing
+ Cmd+P to search · Cmd+N to create