From b75f436aaaedc39df47d2736fa5552840fbc7ced Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Fri, 5 Jun 2026 13:07:55 +0530
Subject: [PATCH] feat(renderer): PreviewPane with empty state and
 MarkdownRenderer

---
 .../components/preview/PreviewPane.tsx        | 20 +++++++++++++
 tests/component/preview/PreviewPane.test.tsx  | 30 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 src/renderer/components/preview/PreviewPane.tsx
 create mode 100644 tests/component/preview/PreviewPane.test.tsx

diff --git a/src/renderer/components/preview/PreviewPane.tsx b/src/renderer/components/preview/PreviewPane.tsx
new file mode 100644
index 0000000..16acf53
--- /dev/null
+++ b/src/renderer/components/preview/PreviewPane.tsx
@@ -0,0 +1,20 @@
+import { MarkdownRenderer } from './MarkdownRenderer';
+import { usePreviewStore } from '@/stores/preview-store';
+
+export function PreviewPane() {
+  const { source } = usePreviewStore();
+
+  if (!source) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <p>Nothing to preview. Start typing in the editor.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto bg-card/10">
+      <MarkdownRenderer source={source} />
+    </div>
+  );
+}
diff --git a/tests/component/preview/PreviewPane.test.tsx b/tests/component/preview/PreviewPane.test.tsx
new file mode 100644
index 0000000..e2f8677
--- /dev/null
+++ b/tests/component/preview/PreviewPane.test.tsx
@@ -0,0 +1,30 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { PreviewPane } from '@/components/preview/PreviewPane';
+import { usePreviewStore } from '@/stores/preview-store';
+
+describe('PreviewPane', () => {
+  beforeEach(() => {
+    usePreviewStore.setState({ scrollRatio: 0, source: '' });
+  });
+
+  it('renders empty state when no source', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <PreviewPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/nothing to preview/i)).toBeInTheDocument();
+  });
+
+  it('renders markdown when source is set', () => {
+    usePreviewStore.setState({ source: '# Hello' });
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <PreviewPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByRole('heading', { level: 1, name: /hello/i })).toBeInTheDocument();
+  });
+});