Move TOC panel to left side and unify toolbar chrome row height (#4871)

* Move table of contents panel to the left side of the editor

* Compact toolbar height when TOC panel is visible

Align both the TOC header and markdown toolbar to a consistent 40px
height with a shared bottom border when the TOC panel is open, removing
redundant borders and reducing visual clutter.

* Unify RME toolbar and TOC header chrome row styling

- Merge toolbar and TOC header into a shared 40px chrome row with
  consistent padding, inset-shadow divider, and background
- Replace border-bottom with inset box-shadow for aligned dividers
  when TOC panel is visible

src/renderer/src/assets/markdown-preview.css

@@ -99,7 +99,7 @@
   max-width: 30%;
   flex-shrink: 0;
   flex-direction: column;
-  border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+  border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
   background: color-mix(in srgb, var(--background) 88%, var(--editor-surface));
 }
 
@@ -181,13 +181,13 @@
   .markdown-toc-panel {
     position: absolute;
     top: 0;
-    right: 0;
+    left: 0;
     bottom: 0;
     z-index: 30;
     width: min(240px, 72cqw);
     min-width: 0;
     max-width: calc(100cqw - 44px);
-    box-shadow: -10px 0 24px rgb(0 0 0 / 0.14);
+    box-shadow: 10px 0 24px rgb(0 0 0 / 0.14);
   }
 }
 

src/renderer/src/assets/rich-markdown-editor.css

@@ -25,11 +25,20 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 10px 14px;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+  min-height: 40px;
+  box-sizing: border-box;
+  padding: 6px 14px;
+  border-bottom: none;
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 72%, transparent);
   background: color-mix(in srgb, var(--background) 84%, transparent);
 }
 
+/* Why: the TOC header uses the same 40px chrome row; swap its border for an inset shadow so both dividers align. */
+.rich-markdown-editor-layout:has(.markdown-toc-panel) .markdown-toc-header {
+  border-bottom: none;
+  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 72%, transparent);
+}
+
 .rich-markdown-toolbar-button {
   display: inline-flex;
   align-items: center;

src/renderer/src/components/editor/MarkdownPreview.tsx

@@ -1625,6 +1625,13 @@ export default function MarkdownPreview({
 
   return (
     <div className="markdown-preview-shell">
+      {showTableOfContents ? (
+        <MarkdownTableOfContentsPanel
+          items={tableOfContentsItems}
+          onClose={onCloseTableOfContents ?? (() => {})}
+          onNavigate={navigateToTableOfContentsItem}
+        />
+      ) : null}
       <div
         ref={setRootRef}
         tabIndex={0}
@@ -1786,13 +1793,6 @@ export default function MarkdownPreview({
           </Markdown>
         </div>
       </div>
-      {showTableOfContents ? (
-        <MarkdownTableOfContentsPanel
-          items={tableOfContentsItems}
-          onClose={onCloseTableOfContents ?? (() => {})}
-          onNavigate={navigateToTableOfContentsItem}
-        />
-      ) : null}
     </div>
   )
 }

src/renderer/src/components/editor/RichMarkdownEditorSurface.tsx

@@ -163,6 +163,13 @@ export function RichMarkdownEditorSurface({
 }: RichMarkdownEditorSurfaceProps): React.JSX.Element {
   return (
     <div className="rich-markdown-editor-layout">
+      {showTableOfContents ? (
+        <MarkdownTableOfContentsPanel
+          items={tableOfContentsItems}
+          onClose={onCloseTableOfContents ?? (() => {})}
+          onNavigate={onNavigateTableOfContentsItem}
+        />
+      ) : null}
       <div
         ref={rootRef}
         className={`rich-markdown-editor-shell ${
@@ -280,13 +287,6 @@ export function RichMarkdownEditorSurface({
           />
         ) : null}
       </div>
-      {showTableOfContents ? (
-        <MarkdownTableOfContentsPanel
-          items={tableOfContentsItems}
-          onClose={onCloseTableOfContents ?? (() => {})}
-          onNavigate={onNavigateTableOfContentsItem}
-        />
-      ) : null}
     </div>
   )
 }