Skip to content

Commit 1c99bde

Browse files
adboioadboio
committed
feat(code): reivew panel
1 parent f143548 commit 1c99bde

22 files changed

Lines changed: 792 additions & 503 deletions

File tree

‎apps/code/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@
125125
"@opentelemetry/semantic-conventions": "^1.39.0",
126126
"@parcel/watcher": "^2.5.6",
127127
"@phosphor-icons/react": "^2.1.10",
128+
"@pierre/diffs": "^1.1.7",
128129
"@posthog/agent": "workspace:*",
129130
"@posthog/electron-trpc": "workspace:*",
130131
"@posthog/git": "workspace:*",

‎apps/code/src/renderer/features/code-editor/components/CodeMirrorDiffEditor.tsx‎

Lines changed: 22 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { openSearchPanel } from "@codemirror/search";
22
import { EditorView } from "@codemirror/view";
3-
import { DotsThree } from "@phosphor-icons/react";
4-
import { Box, DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes";
3+
import { Columns, Rows } from "@phosphor-icons/react";
4+
import { Box, Button, Flex, Text } from "@radix-ui/themes";
55
import { useEffect, useMemo } from "react";
66
import { useCodeMirror } from "../hooks/useCodeMirror";
77
import { useEditorExtensions } from "../hooks/useEditorExtensions";
88
import { useDiffViewerStore } from "../stores/diffViewerStore";
9+
import { DiffSettingsMenu } from "./DiffSettingsMenu";
910

1011
interface CodeMirrorDiffEditorProps {
1112
originalContent: string;
@@ -14,6 +15,7 @@ interface CodeMirrorDiffEditorProps {
1415
relativePath?: string;
1516
onContentChange?: (content: string) => void;
1617
onRefresh?: () => void;
18+
hideToolbar?: boolean;
1719
}
1820

1921
export function CodeMirrorDiffEditor({
@@ -23,21 +25,15 @@ export function CodeMirrorDiffEditor({
2325
relativePath,
2426
onContentChange,
2527
onRefresh,
28+
hideToolbar,
2629
}: CodeMirrorDiffEditorProps) {
2730
const viewMode = useDiffViewerStore((s) => s.viewMode);
2831
const toggleViewMode = useDiffViewerStore((s) => s.toggleViewMode);
29-
const wordWrap = useDiffViewerStore((s) => s.wordWrap);
30-
const toggleWordWrap = useDiffViewerStore((s) => s.toggleWordWrap);
3132
const loadFullFiles = useDiffViewerStore((s) => s.loadFullFiles);
32-
const toggleLoadFullFiles = useDiffViewerStore((s) => s.toggleLoadFullFiles);
3333
const wordDiffs = useDiffViewerStore((s) => s.wordDiffs);
34-
const toggleWordDiffs = useDiffViewerStore((s) => s.toggleWordDiffs);
3534
const hideWhitespaceChanges = useDiffViewerStore(
3635
(s) => s.hideWhitespaceChanges,
3736
);
38-
const toggleHideWhitespaceChanges = useDiffViewerStore(
39-
(s) => s.toggleHideWhitespaceChanges,
40-
);
4137
const extensions = useEditorExtensions(filePath, true, true);
4238
const options = useMemo(
4339
() => ({
@@ -84,6 +80,10 @@ export function CodeMirrorDiffEditor({
8480
document.removeEventListener("keydown", handleKeyDown, { capture: true });
8581
}, [instanceRef]);
8682

83+
if (hideToolbar) {
84+
return <div ref={containerRef} style={{ width: "100%" }} />;
85+
}
86+
8787
return (
8888
<Flex direction="column" height="100%">
8989
<Flex
@@ -104,53 +104,19 @@ export function CodeMirrorDiffEditor({
104104
) : (
105105
<span />
106106
)}
107-
<DropdownMenu.Root>
108-
<DropdownMenu.Trigger>
109-
<IconButton
110-
size="1"
111-
variant="ghost"
112-
style={{ color: "var(--gray-9)" }}
113-
>
114-
<DotsThree size={16} weight="bold" />
115-
</IconButton>
116-
</DropdownMenu.Trigger>
117-
<DropdownMenu.Content size="1" align="end">
118-
<DropdownMenu.Item onSelect={toggleViewMode}>
119-
<Text size="1">
120-
{viewMode === "split" ? "Unified view" : "Split view"}
121-
</Text>
122-
</DropdownMenu.Item>
123-
<DropdownMenu.Item onSelect={toggleWordWrap}>
124-
<Text size="1">
125-
{wordWrap ? "Disable word wrap" : "Enable word wrap"}
126-
</Text>
127-
</DropdownMenu.Item>
128-
<DropdownMenu.Item onSelect={toggleLoadFullFiles}>
129-
<Text size="1">
130-
{loadFullFiles ? "Collapse unchanged" : "Load full files"}
131-
</Text>
132-
</DropdownMenu.Item>
133-
<DropdownMenu.Item onSelect={toggleWordDiffs}>
134-
<Text size="1">
135-
{wordDiffs ? "Disable word diffs" : "Enable word diffs"}
136-
</Text>
137-
</DropdownMenu.Item>
138-
<DropdownMenu.Item onSelect={toggleHideWhitespaceChanges}>
139-
<Text size="1">
140-
{hideWhitespaceChanges ? "Show whitespace" : "Hide whitespace"}
141-
</Text>
142-
</DropdownMenu.Item>
143-
144-
{onRefresh && (
145-
<>
146-
<DropdownMenu.Separator />
147-
<DropdownMenu.Item onSelect={onRefresh}>
148-
<Text size="1">Refresh</Text>
149-
</DropdownMenu.Item>
150-
</>
151-
)}
152-
</DropdownMenu.Content>
153-
</DropdownMenu.Root>
107+
<Flex align="center" gap="1">
108+
<Button
109+
size="1"
110+
variant="ghost"
111+
color="gray"
112+
onClick={toggleViewMode}
113+
style={{ cursor: "pointer" }}
114+
>
115+
{viewMode === "split" ? <Rows size={14} /> : <Columns size={14} />}
116+
<Text size="1">{viewMode === "split" ? "Unified" : "Split"}</Text>
117+
</Button>
118+
<DiffSettingsMenu onRefresh={onRefresh} />
119+
</Flex>
154120
</Flex>
155121
<Box style={{ flex: 1, overflow: "auto" }}>
156122
<div ref={containerRef} style={{ height: "100%", width: "100%" }} />

‎apps/code/src/renderer/features/code-editor/components/DiffEditorPanel.tsx‎

Lines changed: 0 additions & 183 deletions
This file was deleted.

‎apps/code/src/renderer/features/code-editor/components/DiffSettingsMenu.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { DotsThree } from "@phosphor-icons/react";
2+
import { DropdownMenu, IconButton, Text } from "@radix-ui/themes";
3+
import { useDiffViewerStore } from "../stores/diffViewerStore";
4+
5+
interface DiffSettingsMenuProps {
6+
onRefresh?: () => void;
7+
}
8+
9+
export function DiffSettingsMenu({ onRefresh }: DiffSettingsMenuProps) {
10+
const wordWrap = useDiffViewerStore((s) => s.wordWrap);
11+
const toggleWordWrap = useDiffViewerStore((s) => s.toggleWordWrap);
12+
const loadFullFiles = useDiffViewerStore((s) => s.loadFullFiles);
13+
const toggleLoadFullFiles = useDiffViewerStore((s) => s.toggleLoadFullFiles);
14+
const wordDiffs = useDiffViewerStore((s) => s.wordDiffs);
15+
const toggleWordDiffs = useDiffViewerStore((s) => s.toggleWordDiffs);
16+
const hideWhitespaceChanges = useDiffViewerStore(
17+
(s) => s.hideWhitespaceChanges,
18+
);
19+
const toggleHideWhitespaceChanges = useDiffViewerStore(
20+
(s) => s.toggleHideWhitespaceChanges,
21+
);
22+
23+
return (
24+
<DropdownMenu.Root>
25+
<DropdownMenu.Trigger>
26+
<IconButton size="1" variant="ghost" style={{ color: "var(--gray-9)" }}>
27+
<DotsThree size={16} weight="bold" />
28+
</IconButton>
29+
</DropdownMenu.Trigger>
30+
<DropdownMenu.Content size="1" align="end">
31+
<DropdownMenu.Item onSelect={toggleWordWrap}>
32+
<Text size="1">
33+
{wordWrap ? "Disable word wrap" : "Enable word wrap"}
34+
</Text>
35+
</DropdownMenu.Item>
36+
<DropdownMenu.Item onSelect={toggleLoadFullFiles}>
37+
<Text size="1">
38+
{loadFullFiles ? "Collapse unchanged" : "Load full files"}
39+
</Text>
40+
</DropdownMenu.Item>
41+
<DropdownMenu.Item onSelect={toggleWordDiffs}>
42+
<Text size="1">
43+
{wordDiffs ? "Disable word diffs" : "Enable word diffs"}
44+
</Text>
45+
</DropdownMenu.Item>
46+
<DropdownMenu.Item onSelect={toggleHideWhitespaceChanges}>
47+
<Text size="1">
48+
{hideWhitespaceChanges ? "Show whitespace" : "Hide whitespace"}
49+
</Text>
50+
</DropdownMenu.Item>
51+
52+
{onRefresh && (
53+
<>
54+
<DropdownMenu.Separator />
55+
<DropdownMenu.Item onSelect={onRefresh}>
56+
<Text size="1">Refresh</Text>
57+
</DropdownMenu.Item>
58+
</>
59+
)}
60+
</DropdownMenu.Content>
61+
</DropdownMenu.Root>
62+
);
63+
}

0 commit comments

Comments
 (0)