fix: minor bugs in right pane

src/components/editor.tsx

@@ -10,6 +10,7 @@ import { markdown } from "@codemirror/lang-markdown";
 import { EditorView } from "@codemirror/view";
 import { EditorState } from "@codemirror/state";
 import clsx from "clsx";
+import { LanguageSupport } from "@codemirror/language";
 import { debounce } from "../lib/utils";
 import { LanguageSupport } from "@codemirror/language";
 

src/components/scope/index.tsx

@@ -45,14 +45,19 @@ export const Scope: FC = () => {
 				<>
 					{scopeManager.scopes.map((subScope, index) => (
 						<ScopeItem
+							isArray={Array.isArray(scopeManager.scopes)}
 							key={index}
 							data={subScope}
 							index={index + 1}
 						/>
 					))}
 				</>
 			) : (
-				<ScopeItem data={scopeManager.globalScope} index={-1} />
+				<ScopeItem
+					isArray={Array.isArray(scopeManager.globalScope)}
+					data={scopeManager.globalScope}
+					index={-1}
+				/>
 			)}
 		</Accordion>
 	);

src/components/scope/scope-item.tsx

@@ -8,11 +8,16 @@ import { TreeEntry } from "../tree-entry";
 import type { FC } from "react";
 
 type ScopeItemProperties = {
+	isArray: boolean;
 	readonly index: number;
 	readonly data: Scope | Variable | Reference | null;
 };
 
-export const ScopeItem: FC<ScopeItemProperties> = ({ data, index }) => {
+export const ScopeItem: FC<ScopeItemProperties> = ({
+	data,
+	index,
+	isArray,
+}) => {
 	if (!data) {
 		return null;
 	}
@@ -23,6 +28,8 @@ export const ScopeItem: FC<ScopeItemProperties> = ({ data, index }) => {
 		key = data.type;
 	} else if (data instanceof Variable) {
 		key = data.name;
+	} else if (data instanceof Reference) {
+		key = data.identifier.name;
 	}
 
 	return (
@@ -31,7 +38,7 @@ export const ScopeItem: FC<ScopeItemProperties> = ({ data, index }) => {
 			className="border rounded-lg overflow-hidden"
 		>
 			<AccordionTrigger className="text-sm bg-muted-foreground/5 px-4 py-3 capitalize">
-				{Math.max(index, 0)}. {key}
+				{isArray ? `${Math.max(index, 0)}.` : null} {key}
 			</AccordionTrigger>
 			<AccordionContent className="p-4 border-t">
 				<div className="space-y-1">

src/components/tree-entry.tsx

@@ -20,14 +20,29 @@ const isProbablyNode = (value: unknown) => {
 	);
 };
 
-const sanitizeValue = (value: unknown): ReactNode => {
+const SanitizeValue = ({
+	value,
+	isArray,
+	index,
+}: {
+	value: unknown;
+	isArray: boolean;
+	index: number;
+}): ReactNode => {
 	if (!value) {
 		return null;
 	}
 
 	if (Array.isArray(value)) {
 		if (typeof value[0] === "object") {
-			return value.map(sanitizeValue);
+			return value.map((item, index) => (
+				<SanitizeValue
+					key={index}
+					value={item}
+					index={index}
+					isArray={Array.isArray(value)}
+				/>
+			));
 		}
 
 		return (
@@ -46,7 +61,11 @@ const sanitizeValue = (value: unknown): ReactNode => {
 	) {
 		return (
 			<div className="mt-3 space-y-3 ml-2">
-				<ScopeItem data={value as Scope} index={0} />
+				<ScopeItem
+					isArray={isArray}
+					data={value as Scope}
+					index={index ? index : 0}
+				/>
 			</div>
 		);
 	}
@@ -91,7 +110,13 @@ export const TreeEntry: FC<TreeEntryProperties> = ({ data }) => {
 					</span>
 				))}
 			</div>
-			{open ? sanitizeValue(value) : null}
+			{open ? (
+				<SanitizeValue
+					value={value}
+					isArray={Array.isArray(value)}
+					index={0}
+				/>
+			) : null}
 		</>
 	);
 };