diff --git a/src/renderer/components/editor/CodeMirrorEditor.tsx b/src/renderer/components/editor/CodeMirrorEditor.tsx
index b32d58f..68c1a99 100644
--- a/src/renderer/components/editor/CodeMirrorEditor.tsx
+++ b/src/renderer/components/editor/CodeMirrorEditor.tsx
@@ -9,6 +9,8 @@ import { oneDark } from '@codemirror/theme-one-dark';
import { useTheme } from 'next-themes';
import { lightTheme, lightHighlight } from './themes/light';
import { useEditorStore } from '@/stores/editor-store';
+import { useSettingsStore } from '@/stores/settings-store';
+import { Minimap } from './Minimap';
interface Props {
bufferId: string;
@@ -24,6 +26,7 @@ export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorC
const { resolvedTheme } = useTheme();
const updateContent = useEditorStore((s) => s.updateContent);
const setCursor = useEditorStore((s) => s.setCursor);
+ const minimap = useSettingsStore((s) => s.minimap);
useEffect(() => {
if (!ref.current) return;
@@ -76,5 +79,10 @@ export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorC
});
}, [resolvedTheme]);
- return
;
+ return (
+
+ );
}
\ No newline at end of file
diff --git a/src/renderer/components/editor/Minimap.tsx b/src/renderer/components/editor/Minimap.tsx
new file mode 100644
index 0000000..2e31a7f
--- /dev/null
+++ b/src/renderer/components/editor/Minimap.tsx
@@ -0,0 +1,33 @@
+interface Props {
+ content: string;
+ scrollRatio?: number; // 0-1, where the viewport is
+ visibleRatio?: number; // 0-1, what fraction of content is visible
+}
+
+export function Minimap({ content, scrollRatio = 0, visibleRatio = 1 }: Props) {
+ const lines = content.split('\n');
+ // Compute viewport position in the minimap
+ const viewportTop = Math.round(scrollRatio * 100);
+ const viewportHeight = Math.round(visibleRatio * 100);
+
+ return (
+
+
+ {lines.map((line, i) => (
+
+ {line || ' '}
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/tests/component/editor/Minimap.test.tsx b/tests/component/editor/Minimap.test.tsx
new file mode 100644
index 0000000..3429686
--- /dev/null
+++ b/tests/component/editor/Minimap.test.tsx
@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Minimap } from '@/components/editor/Minimap';
+
+describe('Minimap', () => {
+ it('renders lines of content as shrunk text', () => {
+ const content = 'line 1\nline 2\nline 3';
+ render();
+ const lines = screen.getAllByTestId('minimap-line');
+ expect(lines).toHaveLength(3);
+ });
+
+ it('renders a viewport indicator', () => {
+ render(
+
+ );
+ const indicator = screen.getByTestId('minimap-viewport');
+ expect(indicator).toBeInTheDocument();
+ });
+});
\ No newline at end of file