show open file + set monaco lang

src/ui/src/builder/panels/BuilderCodePanel.vue

@@ -11,14 +11,15 @@
 		<div class="BuilderCodePanel__content">
 			<ShareSourceFilesTree
 				:source-files="sourceFiles"
+				:path-active="openedFilePath"
 				class="BuilderCodePanel__content__tree"
-				@select="updateEditedFile"
+				@select="openFile"
 			/>
 			<BuilderEmbeddedCodeEditor
 				v-model="code"
 				class="BuilderCodePanel__content__editor"
 				variant="full"
-				language="python"
+				:language="openedFileLanguage"
 				:disabled="isDisabled"
 				@update:model-value="handleUpdate"
 			></BuilderEmbeddedCodeEditor>
@@ -37,6 +38,7 @@ import BuilderPanel, { type BuilderPanelAction } from "./BuilderPanel.vue";
 import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 import injectionKeys from "@/injectionKeys";
 import ShareSourceFilesTree from "@/components/shared/SharedSourceFilesTree/ShareSourceFilesTree.vue";
+import { useSourceFiles } from "@/core/useSourceFiles";
 
 defineProps<{
 	contentsTeleportEl: HTMLElement;
@@ -49,19 +51,9 @@ const BuilderEmbeddedCodeEditor = defineAsyncComponent({
 
 const wf = inject(injectionKeys.core);
 
-const sourceFiles = computed(() => wf.sourceFiles.value ?? {});
+const { sourceFiles, openFile, code, openedFileLanguage, openedFilePath } =
+	useSourceFiles(wf);
 
-function updateEditedFile(path: string[]) {
-	console.log("##updateEditedFile", path);
-
-	const file = path.reduce((acc, value) => {
-		return acc[value];
-	}, sourceFiles.value);
-
-	code.value = file;
-}
-
-const code = ref<string>(wf.runCode.value);
 const status = ref<null | {
 	type: "error" | "success" | "neutral";
 	message: string;

src/ui/src/components/shared/SharedSourceFilesTree/ShareSourceFilesTree.vue

@@ -6,6 +6,7 @@ import ShareSourceFilesTreeNode from "./ShareSourceFilesTreeNode.vue";
 const props = defineProps({
 	sourceFiles: { type: Object as PropType<SourceFiles>, required: true },
 	path: { type: Array as PropType<string[]>, default: () => [] },
+	pathActive: { type: Array as PropType<string[]>, default: () => [] },
 });
 
 defineEmits({
@@ -25,6 +26,7 @@ const sourceFilesEntries = computed(() =>
 			:path="path"
 			:content="content"
 			:root="filePath"
+			:path-active="pathActive"
 			@select="$emit('select', $event)"
 		/>
 	</div>

src/ui/src/components/shared/SharedSourceFilesTree/ShareSourceFilesTreeNode.vue

@@ -10,25 +10,41 @@ const props = defineProps({
 		required: true,
 	},
 	path: { type: Array as PropType<string[]>, default: () => [] },
+	pathActive: { type: Array as PropType<string[]>, default: () => [] },
 	root: { type: String, required: true },
 });
 
 defineEmits({
 	select: (path: string[]) => Array.isArray(path),
 });
 
+const isPathActive = computed(() =>
+	props.pathActive
+		.join("/")
+		.startsWith([...props.path, props.root].join("/")),
+);
+
 const isDirectory = computed(() => typeof props.content !== "string");
 </script>
 
 <template>
 	<SharedCollapsible v-if="isDirectory">
 		<template #title
-			><span>{{ root }}</span></template
+			><span
+				class="SharedSourceFilesTreeNode__folder"
+				:class="{
+					'SharedSourceFilesTreeNode__folder--active': isPathActive,
+				}"
+			>
+				<span class="material-symbols-outlined">folder</span>
+				{{ root }}</span
+			></template
 		>
 		<template #content>
 			<div class="SharedSourceFilesTreeNode__content">
 				<ShareSourceFilesTree
 					:path="[...path, root]"
+					:path-active="pathActive"
 					:source-files="content as any"
 					@select="$emit('select', $event)"
 				/>
@@ -38,8 +54,12 @@ const isDirectory = computed(() => typeof props.content !== "string");
 	<button
 		v-else
 		class="SharedSourceFilesTreeNode__file"
+		:class="{
+			'SharedSourceFilesTreeNode__file--active': isPathActive,
+		}"
 		@click="$emit('select', [...path, root])"
 	>
+		<span class="material-symbols-outlined"> description </span>
 		{{ root }}
 	</button>
 </template>
@@ -56,5 +76,14 @@ const isDirectory = computed(() => typeof props.content !== "string");
 	cursor: pointer;
 	padding: none;
 	text-align: left;
+
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: 4px;
+	align-items: center;
+}
+.SharedSourceFilesTreeNode__folder--active,
+.SharedSourceFilesTreeNode__file--active {
+	color: var(--accentColor);
 }
 </style>

src/ui/src/core/useSourceFiles.ts

@@ -1,4 +1,59 @@
-import { SourceFiles } from "@/writerTypes";
-import { ComputedRef } from "vue";
+import { Core, SourceFiles } from "@/writerTypes";
+import { computed, onMounted, ref, shallowRef } from "vue";
 
-export function useSourceFiles(sourceFiles: ComputedRef<SourceFiles>) {}
+export function useSourceFiles(wf: Core) {
+	const sourceFiles = computed<SourceFiles>(() => wf.sourceFiles.value ?? {});
+
+	const code = ref("");
+	const openedFilePath = shallowRef<string[] | undefined>();
+
+	const openedFileExtension = computed(() => {
+		if (!openedFilePath.value?.length) return undefined;
+		const filename = openedFilePath.value.at(-1);
+		return filename.split(".").at(-1);
+	});
+
+	const openedFileLanguage = computed(() => {
+		switch (openedFileExtension.value) {
+			case "py":
+				return "python";
+			case "md":
+			case "markdown":
+				return "markdown";
+			default:
+				return openedFileExtension.value;
+		}
+	});
+
+	function openFile(path: string[]) {
+		try {
+			code.value = getFileContent(path);
+			openedFilePath.value = path;
+		} catch (e) {
+			console.error(e);
+		}
+	}
+
+	onMounted(() => {
+		openFile(["main.py"]);
+	});
+
+	function getFileContent(path: string[]) {
+		const file = path.reduce((acc, value) => {
+			return acc[value];
+		}, sourceFiles.value);
+
+		if (typeof file !== "string") {
+			throw Error(`Could not get file ${path.join("/")}`);
+		}
+		return file;
+	}
+
+	return {
+		code,
+		sourceFiles,
+		openedFilePath,
+		openedFileLanguage,
+		openFile,
+	};
+}