From 6d07b7afe3412b6f2d871456a7a60f02b020f0da Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 14 Feb 2026 21:26:58 +0100
Subject: [PATCH] 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              | 10 +++++-----
 src/components/Editor.css    | 28 ++++++++++++++++++++++------
 src/components/Editor.tsx    |  1 +
 src/components/Inspector.css |  7 +++++--
 src/components/NoteList.css  |  6 +++---
 src/components/Sidebar.css   | 14 +++++++++-----
 6 files changed, 45 insertions(+), 21 deletions(-)

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
       <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>
     )
diff --git a/src/components/Inspector.css b/src/components/Inspector.css
index 17a60b9d..f1088b41 100644
--- a/src/components/Inspector.css
+++ b/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 {
diff --git a/src/components/NoteList.css b/src/components/NoteList.css
index f73e9856..691bf546 100644
--- a/src/components/NoteList.css
+++ b/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 {
diff --git a/src/components/Sidebar.css b/src/components/Sidebar.css
index f1b7f55a..b09ab5d0 100644
--- a/src/components/Sidebar.css
+++ b/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;
 }