feat: changes to the note editor

frontend/src/App.vue

@@ -342,10 +342,11 @@ const canManageSpaceSettings = computed(
         authStore.hasSpacePermission(currentSpace.value, "settings.member.view"),
 );
 
-const flattenCategories = (items, level = 0) =>
+const flattenCategories = (items, trail = []) =>
     items.flatMap((category) => {
-        const label = `${"  ".repeat(level)}${category.name}`;
-        return [{ id: category.id, name: category.name, label }, ...(category.subcategories?.length ? flattenCategories(category.subcategories, level + 1) : [])];
+        const nextTrail = [...trail, category.name];
+        const label = nextTrail.join("/");
+        return [{ id: category.id, name: category.name, label }, ...(category.subcategories?.length ? flattenCategories(category.subcategories, nextTrail) : [])];
     });
 
 const categoryOptions = computed(() => flattenCategories(categoryTree.value));

frontend/src/components/NoteEditor.vue

@@ -4,9 +4,6 @@
             <button class="btn btn-sm btn-primary" @click="saveNote">Save</button>
             <button v-if="canDelete" class="btn btn-sm btn-danger ms-2" @click="confirmDelete">Delete</button>
             <button class="btn btn-sm btn-outline-secondary ms-2" @click="emit('cancel')">Cancel</button>
-            <button class="btn btn-sm btn-secondary ms-2" @click="togglePreview">
-                {{ showPreview ? "Edit" : "Preview" }}
-            </button>
             <span class="save-status ms-auto" :class="saveState">{{ saveStatusLabel }}</span>
         </div>
 
@@ -19,11 +16,11 @@
             </div>
 
             <div class="row">
-                <div :class="{ 'col-md-6': showPreview, 'col-12': !showPreview }">
+                <div class="col-12 col-md-6">
                     <textarea v-model="editingNote.content" class="form-control editor-textarea" placeholder="Write your note in markdown..." @input="autoSave"></textarea>
                 </div>
 
-                <div v-if="showPreview" class="col-md-6">
+                <div class="col-12 col-md-6 mt-3 mt-md-0">
                     <div class="preview-pane border rounded p-3">
                         <div v-html="renderedMarkdown"></div>
                     </div>
@@ -101,7 +98,6 @@ const settingsStore = useSettingsStore();
 const publicSharingEnabled = ref(true);
 
 const editingNote = ref({ ...props.note });
-const showPreview = ref(false);
 const tagsInput = ref(props.note.tags?.join(", ") || "");
 const passwordAction = ref("keep");
 const notePassword = ref("");
@@ -201,10 +197,6 @@ const confirmDelete = () => {
     }
 };
 
-const togglePreview = () => {
-    showPreview.value = !showPreview.value;
-};
-
 onBeforeUnmount(() => {
     clearTimeout(saveTimeout.value);
     clearTimeout(saveStateTimeout.value);