From dab79cec86181a690d4bd16b91e9a532fbfa06f6 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Mon, 8 Jun 2026 00:40:49 -0700
Subject: [PATCH] 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       |  6 +++---
 src/renderer/src/assets/rich-markdown-editor.css   | 13 +++++++++++--
 .../src/components/editor/MarkdownPreview.tsx      | 14 +++++++-------
 .../editor/RichMarkdownEditorSurface.tsx           | 14 +++++++-------
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/renderer/src/assets/markdown-preview.css b/src/renderer/src/assets/markdown-preview.css
index 231bf6ec69b..3b77c36fb53 100644
--- a/src/renderer/src/assets/markdown-preview.css
+++ b/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);
   }
 }
 
diff --git a/src/renderer/src/assets/rich-markdown-editor.css b/src/renderer/src/assets/rich-markdown-editor.css
index 7f85b880f89..3ae4118970d 100644
--- a/src/renderer/src/assets/rich-markdown-editor.css
+++ b/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;
diff --git a/src/renderer/src/components/editor/MarkdownPreview.tsx b/src/renderer/src/components/editor/MarkdownPreview.tsx
index caef7bc2810..4e8c2f07198 100644
--- a/src/renderer/src/components/editor/MarkdownPreview.tsx
+++ b/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>
   )
 }
diff --git a/src/renderer/src/components/editor/RichMarkdownEditorSurface.tsx b/src/renderer/src/components/editor/RichMarkdownEditorSurface.tsx
index 41a61ba6ad7..c47a811f239 100644
--- a/src/renderer/src/components/editor/RichMarkdownEditorSurface.tsx
+++ b/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>
   )
 }