feat: Notion-style block editor v6 + sidebar refactoring

Block editor:
- Vanilla JS rendering (renderBlock) — zero Alpine x-for on blocks
- 15 block types with Notion placeholders (Heading 1-4, Toggle list, Empty quote, etc.)
- Event delegation keydown handler on container
- sync() before every render() — content preserved across Enter/Backspace/type changes
- Slash menu with event delegation, single innerHTML set, window.E for applySlash
- Markdown shortcuts use idx (not bid) to avoid stale references after render
- data-bid only on contentEditable (not .block-wrapper) — fixes '+' artifact
- .empty class + outline:none on block-content

Sidebar:
- Notion-style collapsible sections (Recents/Private/Shared/Notion apps)
- Workspace header with chevron, Search tab, Home tab
- Sticky footer with '+ New page' button
- sectionsOpen/toggleSection/toggleWorkspaceMenu/openQuickFind in appState
- CSS: uppercase section headers, 240px width, collapsed 56px mode, border-right

static/css/app.css

@@ -19,8 +19,10 @@
   --text-primary: #FFFFFF;
   --text-secondary: #A0A0A0;
   --text-dim: #6B6B6B;
+  --text-muted: #4A4A4A;
 
   --border: #333333;
+  --border-color: rgba(255,255,255,0.06);
   --border-light: #3a3a3a;
 
   /* ===== Couleurs d'accent Notion ===== */
@@ -70,7 +72,9 @@
   --text-primary: #1A1A1A;
   --text-secondary: #6B6B6B;
   --text-dim: #9B9B9B;
+  --text-muted: #B0B0B0;
   --border: #E0E0E0;
+  --border-color: rgba(0,0,0,0.06);
   --border-light: #EDEDEC;
   --blue-bg: #E8F0FE;
   --green-bg: #E6F4EA;
@@ -1511,8 +1515,6 @@ input, select, textarea { font-family: inherit; color: inherit; }
   overflow-y: auto;
   padding: 0;
   min-height: 0;
-  display: flex;
-  flex-direction: column;
 }
 
 /* Page title area */
@@ -1560,7 +1562,6 @@ input, select, textarea { font-family: inherit; color: inherit; }
   max-width: 900px;
   margin: 0 auto;
   min-height: 300px;
-  flex: 1;
 }
 
 .blocks-empty {
@@ -1674,10 +1675,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   min-height: 28px;
   word-break: break-word;
 }
-.block-content:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Headings */
@@ -1700,6 +1702,16 @@ input, select, textarea { font-family: inherit; color: inherit; }
   padding: 4px 2px 2px;
 }
 
+.block-h4 {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  padding: 4px 2px 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+}
+
 /* Bulleted list */
 .block-bullet {
   padding-left: 18px;
@@ -1743,10 +1755,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   min-height: 26px;
   word-break: break-word;
 }
-.block-todo div:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Toggle */
@@ -1783,10 +1796,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   min-height: 26px;
   word-break: break-word;
 }
-.block-toggle div:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Quote */
@@ -1860,10 +1874,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   line-height: 1.6;
   min-height: 24px;
 }
-.block-callout div:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Image block */