From 9aebdf9e1d427f5e7622c3d6814084e4cfc8c189 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 7 Jun 2026 23:53:51 -0700
Subject: [PATCH] Move table of contents panel to the left side of the editor

---
 src/renderer/src/assets/markdown-preview.css       |  6 +++---
 .../src/components/editor/MarkdownPreview.tsx      | 14 +++++++-------
 .../editor/RichMarkdownEditorSurface.tsx           | 14 +++++++-------
 3 files changed, 17 insertions(+), 17 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/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>
   )
 }