feat: render file paths (#262)

Author: jonathanlab

apps/array/src/renderer/features/code-editor/components/CodeEditorPanel.tsx

@@ -64,6 +64,7 @@ export function CodeEditorPanel({
       <CodeMirrorEditor
         content={fileContent}
         filePath={absolutePath}
+        relativePath={filePath}
         readOnly
       />
     </Box>

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

@@ -1,4 +1,4 @@
-import { Box, Flex, SegmentedControl } from "@radix-ui/themes";
+import { Box, Flex, SegmentedControl, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
 import { useCodeMirror } from "../hooks/useCodeMirror";
 import { useEditorExtensions } from "../hooks/useEditorExtensions";
@@ -8,13 +8,15 @@ interface CodeMirrorDiffEditorProps {
   originalContent: string;
   modifiedContent: string;
   filePath?: string;
+  relativePath?: string;
   onContentChange?: (content: string) => void;
 }
 
 export function CodeMirrorDiffEditor({
   originalContent,
   modifiedContent,
   filePath,
+  relativePath,
   onContentChange,
 }: CodeMirrorDiffEditorProps) {
   const { viewMode, setViewMode } = useDiffViewerStore();
@@ -41,11 +43,22 @@ export function CodeMirrorDiffEditor({
 
   return (
     <Flex direction="column" height="100%">
-      <Box
+      <Flex
         px="3"
         py="2"
+        align="center"
+        justify="between"
         style={{ borderBottom: "1px solid var(--gray-6)", flexShrink: 0 }}
       >
+        {relativePath && (
+          <Text
+            size="1"
+            color="gray"
+            style={{ fontFamily: "var(--code-font-family)" }}
+          >
+            {relativePath}
+          </Text>
+        )}
         <SegmentedControl.Root
           size="1"
           value={viewMode}
@@ -54,7 +67,7 @@ export function CodeMirrorDiffEditor({
           <SegmentedControl.Item value="split">Split</SegmentedControl.Item>
           <SegmentedControl.Item value="unified">Unified</SegmentedControl.Item>
         </SegmentedControl.Root>
-      </Box>
+      </Flex>
       <Box style={{ flex: 1, overflow: "auto" }}>
         <div ref={containerRef} style={{ height: "100%", width: "100%" }} />
       </Box>

apps/array/src/renderer/features/code-editor/components/CodeMirrorEditor.tsx

@@ -1,16 +1,19 @@
+import { Box, Flex, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
 import { useCodeMirror } from "../hooks/useCodeMirror";
 import { useEditorExtensions } from "../hooks/useEditorExtensions";
 
 interface CodeMirrorEditorProps {
   content: string;
   filePath?: string;
+  relativePath?: string;
   readOnly?: boolean;
 }
 
 export function CodeMirrorEditor({
   content,
   filePath,
+  relativePath,
   readOnly = false,
 }: CodeMirrorEditorProps) {
   const extensions = useEditorExtensions(filePath, readOnly);
@@ -20,5 +23,28 @@ export function CodeMirrorEditor({
   );
   const containerRef = useCodeMirror(options);
 
-  return <div ref={containerRef} style={{ height: "100%", width: "100%" }} />;
+  if (!relativePath) {
+    return <div ref={containerRef} style={{ height: "100%", width: "100%" }} />;
+  }
+
+  return (
+    <Flex direction="column" height="100%">
+      <Box
+        px="3"
+        py="2"
+        style={{ borderBottom: "1px solid var(--gray-6)", flexShrink: 0 }}
+      >
+        <Text
+          size="1"
+          color="gray"
+          style={{ fontFamily: "var(--code-font-family)" }}
+        >
+          {relativePath}
+        </Text>
+      </Box>
+      <Box style={{ flex: 1, overflow: "auto" }}>
+        <div ref={containerRef} style={{ height: "100%", width: "100%" }} />
+      </Box>
+    </Flex>
+  );
 }

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

@@ -96,12 +96,14 @@ export function DiffEditorPanel({
           originalContent={originalContent ?? ""}
           modifiedContent={modifiedContent ?? ""}
           filePath={absolutePath}
+          relativePath={filePath}
           onContentChange={handleContentChange}
         />
       ) : (
         <CodeMirrorEditor
           content={content ?? ""}
           filePath={absolutePath}
+          relativePath={filePath}
           readOnly
         />
       )}