Rework the project editor to include file edition and display the file sorter in the sidebar.

components/Editor.vue

@@ -3,11 +3,11 @@ const External = Annotation.define<boolean>();
 </script>
 
 <script setup lang="ts">
-import { dropCursor, crosshairCursor, keymap, EditorView, ViewUpdate } from '@codemirror/view';
+import { dropCursor, crosshairCursor, keymap, EditorView, ViewUpdate, placeholder as placeholderExtension } from '@codemirror/view';
 import { Annotation, EditorState } from '@codemirror/state';
 import { indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
 import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
-import { searchKeymap } from '@codemirror/search';
+import { search, searchKeymap } from '@codemirror/search';
 import { closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
 import { lintKeymap } from '@codemirror/lint';
 
@@ -15,6 +15,9 @@ const editor = useTemplateRef('editor');
 const view = ref<EditorView>();
 const state = ref<EditorState>();
 
+const { placeholder } = defineProps<{
+    placeholder?: string
+}>();
 const model = defineModel<string>();
 
 onMounted(() => {
@@ -24,6 +27,7 @@ onMounted(() => {
             doc: model.value,
             extensions: [
                 history(),
+                search(),
                 dropCursor(),
                 EditorState.allowMultipleSelections.of(true),
                 indentOnInput(),
@@ -31,6 +35,7 @@ onMounted(() => {
                 bracketMatching(),
                 closeBrackets(),
                 crosshairCursor(),
+                placeholderExtension(placeholder ?? ''),
                 EditorView.lineWrapping,
                 keymap.of([
                     ...closeBracketsKeymap,
@@ -46,7 +51,8 @@ onMounted(() => {
                     {
                         model.value = viewUpdate.state.doc.toString();
                     }
-                })
+                }),
+                EditorView.contentAttributes.of({spellcheck: "true"}),
             ]
         });
         view.value = new EditorView({

components/base/DraggableTree.vue

@@ -1,5 +1,5 @@
 <template>
-	<TreeRoot v-bind="forward" v-slot="{ flattenItems }" class="list-none select-none border border-light-35 dark:border-dark-35 text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto w-[450px] max-h-full">
+	<TreeRoot v-bind="forward" v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto max-h-full">
 		<DraggableTreeItem v-for="item in flattenItems" :key="item._id" v-bind="item" class="flex items-center outline-none relative cursor-pointer hover:bg-light-20 dark:hover:bg-dark-20 data-[selected]:bg-light-35 dark:data-[selected]:bg-dark-35" @select.prevent @toggle.prevent>
 			<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver }">
 				<slot :handleToggle="handleToggle"