add logic to resize

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

@@ -8,22 +8,26 @@
 		keyboard-shortcut-key="J"
 		class="BuilderCodePanel"
 	>
-		<div class="BuilderCodePanel__content">
-			<ShareSourceFilesTree
-				:source-files="sourceFiles"
-				:path-active="openedFilePath"
-				class="BuilderCodePanel__content__tree"
-				@select="openFile"
-			/>
-			<BuilderEmbeddedCodeEditor
-				v-model="code"
-				class="BuilderCodePanel__content__editor"
-				variant="full"
-				:language="openedFileLanguage"
-				:disabled="isDisabled"
-				@update:model-value="handleUpdate"
-			></BuilderEmbeddedCodeEditor>
-		</div>
+		<ShareHorizontalResize :initial-left-size="100">
+			<template #left>
+				<ShareSourceFilesTree
+					:source-files="sourceFiles"
+					:path-active="openedFilePath"
+					class="BuilderCodePanel__content__tree"
+					@select="openFile"
+				/>
+			</template>
+			<template #right>
+				<BuilderEmbeddedCodeEditor
+					v-model="code"
+					class="BuilderCodePanel__content__editor"
+					variant="full"
+					:language="openedFileLanguage"
+					:disabled="isDisabled"
+					@update:model-value="handleUpdate"
+				/>
+			</template>
+		</ShareHorizontalResize>
 		<template #actionsCompanion>
 			<div v-if="status" class="status" :class="status.type">
 				{{ status.message }}
@@ -39,6 +43,7 @@ import BuilderAsyncLoader from "../BuilderAsyncLoader.vue";
 import injectionKeys from "@/injectionKeys";
 import ShareSourceFilesTree from "@/components/shared/SharedSourceFilesTree/ShareSourceFilesTree.vue";
 import { useSourceFiles } from "@/core/useSourceFiles";
+import ShareHorizontalResize from "@/components/shared/ShareHorizontalResize.vue";
 
 defineProps<{
 	contentsTeleportEl: HTMLElement;
@@ -118,15 +123,12 @@ async function save() {
 
 <style scoped>
 .BuilderCodePanel__content {
-	display: grid;
-	grid-template-columns: 100px minmax(0, 100%);
 	height: 100%;
 	width: 100%;
 }
 .BuilderCodePanel__content__tree {
 	height: 100%;
 	width: 100%;
-	border-right: 1px solid var(--builderSeparatorColor);
 	padding: 4px;
 }
 

src/ui/src/components/shared/ShareHorizontalResize.vue

@@ -0,0 +1,58 @@
+<template>
+	<div ref="root" class="ShareHorizontalResize" :style="style">
+		<div class="ShareHorizontalResize__left">
+			<slot name="left" />
+		</div>
+		<hr
+			class="ShareHorizontalResize__divider"
+			@mousedown.prevent="handleMouseDown"
+		/>
+		<div class="ShareHorizontalResize__right">
+			<slot name="right" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, ref } from "vue";
+
+const props = defineProps({
+	initialLeftSize: { type: Number, required: true },
+});
+const root = ref<HTMLElement | null>(null);
+
+let leftSize = ref(props.initialLeftSize);
+const style = computed<CSSProperties>(() => ({
+	gridTemplateColumns: `${leftSize.value}px 1px minmax(0, 100%)`,
+}));
+
+function handleMouseDown() {
+	document.addEventListener("mousemove", onMouseMove);
+	document.addEventListener("mouseup", onMouseUp);
+
+	const sliderBoundingRect = root.value.getBoundingClientRect();
+
+	function onMouseMove(event: MouseEvent) {
+		leftSize.value = event.x - sliderBoundingRect.left;
+	}
+
+	function onMouseUp() {
+		document.removeEventListener("mouseup", onMouseUp);
+		document.removeEventListener("mousemove", onMouseMove);
+	}
+}
+</script>
+
+<style scoped>
+.ShareHorizontalResize {
+	display: grid;
+	height: 100%;
+}
+
+.ShareHorizontalResize__divider {
+	border: none;
+	background-color: var(--builderSeparatorColor);
+	height: 100%;
+	cursor: ew-resize;
+}
+</style>

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

@@ -50,7 +50,6 @@ const isDirectory = computed(() => typeof props.content !== "string");
 		:class="{
 			'SharedSourceFilesTreeNode__file--active': isPathActive,
 		}"
-		:data-writer-tooltip="currentPathString"
 		@click="$emit('select', [...path, root])"
 	>
 		<span class="material-symbols-outlined">description</span>

src/ui/src/writerTypes.ts

@@ -165,6 +165,23 @@ export type AbstractTemplate = {
 
 export type TemplateMap = Record<string, VueComponent>;
 
+/**
+ * Represent a file tree as an object with:
+ *
+ * - the key representing the filename
+ * - the content as a string for a readable text file, or as a recursive `SourceFiles` if it's a directory
+ *
+ * @example
+ * ```json
+ * {
+ *   "README.md": "# Hello\n...",
+ *   "main.py": "...",
+ *   "static": {
+ *     "style.css": "..."
+ *   }
+ * }
+ * ```
+ */
 export type SourceFiles = {
 	[key: string]: string | SourceFiles;
 };

src/writer/app_runner.py

@@ -105,7 +105,7 @@ def __init__(self,
         self.app_path = app_path
         self.mode = mode
         self.run_code = run_code
-        self.source_files = []
+        self.source_files = {}
         self.bmc_components = bmc_components
         self.is_app_process_server_ready = is_app_process_server_ready
         self.is_app_process_server_failed = is_app_process_server_failed 
@@ -680,7 +680,7 @@ def _build_file_tree(self) -> Dict:
 
         Example:
 
-        >>> {"dir": {"dir": {"file": "content of the file", "dir": {}}}}
+        >>> { "README.md": "...", "main.py": "...", "static": { "style.css": "..." } }
         """
         files = glob.glob(os.path.join(self.app_path, '**', "*"), recursive=True)
         file_tree = {}