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

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/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>
   )
 }