Three column layout

src/App.vue

@@ -10,11 +10,8 @@
 			</NcAppNavigationNew>
 
 			<template #list>
-				<NavigationList v-show="!loading.notes"
-					:filtered-notes="filteredNotes"
-					:category="filter.category"
-					@category-selected="onSelectCategory"
-					@note-deleted="onNoteDeleted"
+				<CategoriesList v-show="!loading.notes"
+					v-if="numNotes"
 				/>
 				<NcAppNavigationItem
 					:title="t('notes', 'Help')"
@@ -38,7 +35,7 @@
 				<p>{{ t('notes', 'Please see Nextcloud server log for details.') }}</p>
 			</div>
 		</NcAppContent>
-		<router-view v-else />
+		<router-view v-else @note-deleted="onNoteDeleted" />
 
 		<router-view name="sidebar" />
 	</NcContent>
@@ -59,8 +56,8 @@ import InfoIcon from 'vue-material-design-icons/Information.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import AppSettings from './components/AppSettings.vue'
-import NavigationList from './components/NavigationList.vue'
 import AppHelp from './components/AppHelp.vue'
+import CategoriesList from './components/CategoriesList.vue'
 
 import { config } from './config.js'
 import { fetchNotes, noteExists, createNote, undoDeleteNote } from './NotesService.js'
@@ -73,13 +70,13 @@ export default {
 		AppHelp,
 		AppSettings,
 		InfoIcon,
-		NavigationList,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcContent,
 		PlusIcon,
+		CategoriesList,
 	},
 
 	data() {
@@ -101,37 +98,16 @@ export default {
 	},
 
 	computed: {
+		numNotes() {
+			return store.getters.numNotes()
+		},
+
 		notes() {
 			return store.state.notes.notes
 		},
 
 		filteredNotes() {
-			const notes = this.notes.filter(note => {
-				if (this.filter.category !== null
-					&& this.filter.category !== note.category
-					&& !note.category.startsWith(this.filter.category + '/')) {
-					return false
-				}
-				return true
-			})
-
-			function cmpRecent(a, b) {
-				if (a.favorite && !b.favorite) return -1
-				if (!a.favorite && b.favorite) return 1
-				return b.modified - a.modified
-			}
-
-			function cmpCategory(a, b) {
-				const cmpCat = a.category.localeCompare(b.category)
-				if (cmpCat !== 0) return cmpCat
-				if (a.favorite && !b.favorite) return -1
-				if (!a.favorite && b.favorite) return 1
-				return a.title.localeCompare(b.title)
-			}
-
-			notes.sort(this.filter.category === null ? cmpRecent : cmpCategory)
-
-			return notes
+			return store.getters.getFilteredNotes()
 		},
 	},
 
@@ -252,7 +228,7 @@ export default {
 				return
 			}
 			this.loading.create = true
-			createNote(this.filter.category)
+			createNote(store.getters.getSelectedCategory())
 				.then(note => {
 					this.routeToNote(note.id, { new: null })
 				})
@@ -263,15 +239,6 @@ export default {
 				})
 		},
 
-		onSelectCategory(category) {
-			this.filter.category = category
-
-			const appNavigation = document.querySelector('#app-navigation > ul')
-			if (appNavigation) {
-				appNavigation.scrollTop = 0
-			}
-		},
-
 		onNoteDeleted(note) {
 			this.deletedNotes.push(note)
 			this.clearUndoTimer()

src/components/NavigationCategoriesItem.vue → src/components/CategoriesList.vue

@@ -1,15 +1,9 @@
 <template>
-	<NcAppNavigationItem
-		:title="title"
-		class="app-navigation-noclose separator-below"
-		:class="{ 'category-header': selectedCategory !== null }"
-		:open.sync="open"
-		:allow-collapse="true"
-		@click.prevent.stop="onToggleCategories"
-	>
-		<FolderIcon slot="icon" :size="20" />
+	<Fragment>
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
+			icon="icon-recent"
+			:class="{ active: null === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
 			<HistoryIcon slot="icon" :size="20" />
@@ -21,6 +15,8 @@
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:title="categoryTitle(category.name)"
+			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
+			:class="{ active: category.name === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(category.name)"
 		>
 			<FolderOutlineIcon v-if="category.name === ''" slot="icon" :size="20" />
@@ -29,14 +25,15 @@
 				{{ category.count }}
 			</NcAppNavigationCounter>
 		</NcAppNavigationItem>
-	</NcAppNavigationItem>
+	</Fragment>
 </template>
 
 <script>
 import {
 	NcAppNavigationItem,
 	NcAppNavigationCounter,
 } from '@nextcloud/vue'
+import { Fragment } from 'vue-fragment'
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
@@ -47,27 +44,15 @@ import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
 export default {
-	name: 'NavigationCategoriesItem',
+	name: 'CategoriesList',
 
 	components: {
+		Fragment,
+		NcAppNavigationItem,
+		NcAppNavigationCounter,
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
-		NcAppNavigationItem,
-		NcAppNavigationCounter,
-	},
-
-	props: {
-		selectedCategory: {
-			type: String,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			open: false,
-		}
 	},
 
 	computed: {
@@ -79,8 +64,8 @@ export default {
 			return getCategories(1, true)
 		},
 
-		title() {
-			return this.selectedCategory === null ? this.t('notes', 'Categories') : categoryLabel(this.selectedCategory)
+		selectedCategory() {
+			return store.getters.getSelectedCategory()
 		},
 	},
 
@@ -89,19 +74,9 @@ export default {
 			return categoryLabel(category)
 		},
 
-		onToggleCategories() {
-			this.open = !this.open
-		},
-
 		onSelectCategory(category) {
-			this.open = false
-			this.$emit('category-selected', category)
+			store.commit('setSelectedCategory', category)
 		},
 	},
 }
 </script>
-<style scoped>
-.separator-below {
-	border-bottom: 1px solid var(--color-border);
-}
-</style>

src/components/EditorEasyMDE.vue

@@ -374,5 +374,6 @@ export default {
 	z-index: 10;
 	height: 40px;
 	margin-right: 5px;
+	top: 65px;
 }
 </style>