Refine visual polish: blue accent states, tab hover, editor hints (M5 Task 4)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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()
 })

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 {

src/components/Editor.tsx

@@ -122,6 +122,7 @@ export function Editor({ tabs, activeTabPath, onSwitchTab, onCloseTab, onNavigat
       <div className="editor">
         <div className="editor__placeholder">
           <p>Select a note to start editing</p>
+          <span className="editor__placeholder-hint">Cmd+P to search &middot; Cmd+N to create</span>
         </div>
       </div>
     )

src/components/Inspector.css

@@ -14,7 +14,7 @@
 }
 
 .inspector__header {
-  padding: 12px;
+  padding: 14px 12px;
   border-bottom: 1px solid #2a2a4a;
   display: flex;
   align-items: center;
@@ -23,8 +23,11 @@
 
 .inspector__header h3 {
   margin: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #999;
 }
 
 .inspector__toggle {

src/components/NoteList.css

@@ -111,9 +111,9 @@
 }
 
 .note-list__pill--active {
-  background: #4a9eff;
-  color: #ffffff;
-  border-color: #4a9eff;
+  background: #4a9eff22;
+  color: #4a9eff;
+  border-color: #4a9eff44;
 }
 
 .note-list__items {

src/components/Sidebar.css

@@ -177,18 +177,22 @@
   padding: 5px 16px 5px 28px;
   cursor: pointer;
   font-size: 13px;
-  border-radius: 4px;
-  margin: 1px 4px;
+  border-radius: 6px;
+  margin: 1px 6px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #bbb;
+  transition: all 0.12s;
 }
 
 .sidebar__topic-item:hover {
-  background: #2a2a4a;
+  background: #252545;
+  color: #ddd;
 }
 
 .sidebar__topic-item--active {
-  background: #2a2a4a;
-  color: #ffffff;
+  background: #4a9eff18;
+  color: #4a9eff;
+  font-weight: 500;
 }