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 ( +
+
+ {minimap && } +
+ ); } \ 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 ( +