From 4412195062b3b9e9a12100941fbbcc3c2276a582 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sat, 26 Mar 2022 00:20:46 +0100
Subject: [PATCH 01/19] Added option to have all categories always visible in
 the navigation listgit

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 l10n/de_DE.js                               |  2 +
 l10n/de_DE.json                             |  2 +
 lib/Service/SettingsService.php             |  1 +
 src/components/AppSettings.vue              | 14 ++++
 src/components/NavigationCategoriesItem.vue | 39 ++-------
 src/components/NavigationCategoriesList.vue | 89 +++++++++++++++++++++
 src/components/NavigationList.vue           | 15 +++-
 7 files changed, 128 insertions(+), 34 deletions(-)
 create mode 100644 src/components/NavigationCategoriesList.vue

diff --git a/l10n/de_DE.js b/l10n/de_DE.js
index 44162d791..2b9acf775 100644
--- a/l10n/de_DE.js
+++ b/l10n/de_DE.js
@@ -20,6 +20,8 @@ OC.L10N.register(
     "File extension for new notes" : "Dateiendung für neue Notizen",
     "Display mode for notes" : "Anzeigemodus für Notizen",
     "User defined" : "Benutzerdefiniert",
+    "Always show all categories" : "Immer alle Kategorien anzeigen",
+    "Collapse categories" : "Kategorien einklappen",
     "Open in edit mode" : "Im Bearbeitungsmodus öffnen",
     "Open in preview mode" : "Im Vorschaumodus öffnen",
     "No notes yet" : "Noch keine Notizen vorhanden",
diff --git a/l10n/de_DE.json b/l10n/de_DE.json
index 78a57de70..a8c5b1c8a 100644
--- a/l10n/de_DE.json
+++ b/l10n/de_DE.json
@@ -18,6 +18,8 @@
     "File extension for new notes" : "Dateiendung für neue Notizen",
     "Display mode for notes" : "Anzeigemodus für Notizen",
     "User defined" : "Benutzerdefiniert",
+    "Always show all categories" : "Immer alle Kategorien anzeigen",
+    "Collapse categories" : "Kategorien einklappen",
     "Open in edit mode" : "Im Bearbeitungsmodus öffnen",
     "Open in preview mode" : "Im Vorschaumodus öffnen",
     "No notes yet" : "Noch keine Notizen vorhanden",
diff --git a/lib/Service/SettingsService.php b/lib/Service/SettingsService.php
index d3e0eb13e..616153def 100644
--- a/lib/Service/SettingsService.php
+++ b/lib/Service/SettingsService.php
@@ -46,6 +46,7 @@ public function __construct(
 					return implode(DIRECTORY_SEPARATOR, $path);
 				},
 			],
+			'categoriesMode' => $this->getListAttrs('visible', 'collapsed'),
 			'noteMode' => $this->getListAttrs('edit', 'preview'),
 			'customSuffix' => [
 				'default' => '.txt',
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index f154a1a00..007ad49aa 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -32,6 +32,16 @@
 				@change="onChangeSettings"
 			>
 		</div>
+		<div class="settings-block">
+			<p class="settings-hint">
+				<label for="categoriesMode">{{ t('notes', 'Display mode for categories') }}</label>
+			</p>
+			<select id="categoriesMode" v-model="settings.categoriesMode" @change="onChangeSettings">
+				<option v-for="mode in categoriesModes" :key="mode.value" :value="mode.value">
+					{{ mode.label }}
+				</option>
+			</select>
+		</div>
 		<div class="settings-block">
 			<p class="settings-hint">
 				<label for="noteMode">{{ t('notes', 'Display mode for notes') }}</label>
@@ -67,6 +77,10 @@ export default {
 				{ value: '.md', label: '.md' },
 				{ value: 'custom', label: t('notes', 'User defined') },
 			],
+			categoriesModes: [
+				{ value: 'visible', label: t('notes', 'Always show all categories') },
+				{ value: 'collapsed', label: t('notes', 'Collapse categories') },
+			],
 			noteModes: [
 				{ value: 'edit', label: t('notes', 'Open in edit mode') },
 				{ value: 'preview', label: t('notes', 'Open in preview mode') },
diff --git a/src/components/NavigationCategoriesItem.vue b/src/components/NavigationCategoriesItem.vue
index 026948370..224441d10 100644
--- a/src/components/NavigationCategoriesItem.vue
+++ b/src/components/NavigationCategoriesItem.vue
@@ -8,46 +8,27 @@
 		:allow-collapse="true"
 		@click.prevent.stop="onToggleCategories"
 	>
-		<AppNavigationItem
-			:title="t('notes', 'All notes')"
-			icon="icon-recent"
-			@click.prevent.stop="onSelectCategory(null)"
-		>
-			<AppNavigationCounter slot="counter">
-				{{ numNotes }}
-			</AppNavigationCounter>
-		</AppNavigationItem>
-
-		<AppNavigationItem v-for="category in categories"
-			:key="category.name"
-			:title="categoryTitle(category.name)"
-			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
-			@click.prevent.stop="onSelectCategory(category.name)"
-		>
-			<AppNavigationCounter slot="counter">
-				{{ category.count }}
-			</AppNavigationCounter>
-		</AppNavigationItem>
+		<NavigationCategoriesList
+			:selected-category="selectedCategory"
+			@category-selected="onSelectCategory"
+		/>
 	</AppNavigationItem>
 </template>
 
 <script>
 import {
 	AppNavigationItem,
-	AppNavigationCounter,
 } from '@nextcloud/vue'
 
-import { getCategories } from '../NotesService'
 import { categoryLabel } from '../Util'
-
-import store from '../store'
+import NavigationCategoriesList from './NavigationCategoriesList.vue'
 
 export default {
 	name: 'NavigationCategoriesItem',
 
 	components: {
 		AppNavigationItem,
-		AppNavigationCounter,
+		NavigationCategoriesList,
 	},
 
 	props: {
@@ -64,14 +45,6 @@ export default {
 	},
 
 	computed: {
-		numNotes() {
-			return store.getters.numNotes()
-		},
-
-		categories() {
-			return getCategories(1, true)
-		},
-
 		title() {
 			return this.selectedCategory === null ? this.t('notes', 'Categories') : categoryLabel(this.selectedCategory)
 		},
diff --git a/src/components/NavigationCategoriesList.vue b/src/components/NavigationCategoriesList.vue
new file mode 100644
index 000000000..f214a14fe
--- /dev/null
+++ b/src/components/NavigationCategoriesList.vue
@@ -0,0 +1,89 @@
+<template>
+	<Fragment class="app-navigation-noclose separator-below">
+		<AppNavigationItem
+			:title="t('notes', 'All notes')"
+			icon="icon-recent"
+			:class="{ active: null === selectedCategory }"
+			@click.prevent.stop="onSelectCategory(null)"
+		>
+			<AppNavigationCounter slot="counter">
+				{{ numNotes }}
+			</AppNavigationCounter>
+		</AppNavigationItem>
+
+		<AppNavigationItem 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)"
+		>
+			<AppNavigationCounter slot="counter">
+				{{ category.count }}
+			</AppNavigationCounter>
+		</AppNavigationItem>
+
+		<AppNavigationSpacer v-if="showSpacer" class="separator-above" />
+	</Fragment>
+</template>
+
+<script>
+import {
+	AppNavigationItem,
+	AppNavigationCounter,
+	AppNavigationSpacer,
+} from '@nextcloud/vue'
+import { Fragment } from 'vue-fragment'
+
+import { getCategories } from '../NotesService'
+import { categoryLabel } from '../Util'
+
+import store from '../store'
+
+export default {
+	name: 'NavigationCategoriesList',
+
+	components: {
+		Fragment,
+		AppNavigationItem,
+		AppNavigationCounter,
+		AppNavigationSpacer,
+	},
+
+	props: {
+		selectedCategory: {
+			type: String,
+			default: null,
+		},
+		showSpacer: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		numNotes() {
+			return store.getters.numNotes()
+		},
+
+		categories() {
+			return getCategories(1, true)
+		},
+	},
+
+	methods: {
+		categoryTitle(category) {
+			return categoryLabel(category)
+		},
+
+		onSelectCategory(category) {
+			this.$emit('category-selected', category)
+		},
+	},
+}
+</script>
+<style scoped>
+.separator-above {
+	border-top: 1px solid var(--color-border);
+}
+</style>
diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue
index 5f8986791..37e37884d 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NavigationList.vue
@@ -2,11 +2,18 @@
 	<Fragment>
 		<!-- collapsible categories -->
 		<NavigationCategoriesItem
-			v-if="numNotes"
+			v-if="numNotes && showCollapsed"
 			:selected-category="category"
 			@category-selected="$emit('category-selected', $event)"
 		/>
 
+		<NavigationCategoriesList
+			v-if="numNotes && !showCollapsed"
+			:selected-category="category"
+			:show-spacer="true"
+			@category-selected="$emit('category-selected', $event)"
+		/>
+
 		<!-- list of notes -->
 		<template v-for="item in noteItems">
 			<AppNavigationCaption v-if="category!==null && category!==item.category"
@@ -45,6 +52,7 @@ import { Fragment } from 'vue-fragment'
 
 import { categoryLabel } from '../Util'
 import NavigationCategoriesItem from './NavigationCategoriesItem'
+import NavigationCategoriesList from './NavigationCategoriesList'
 import NavigationNoteItem from './NavigationNoteItem'
 import store from '../store'
 
@@ -58,6 +66,7 @@ export default {
 		AppNavigationItem,
 		Fragment,
 		NavigationCategoriesItem,
+		NavigationCategoriesList,
 		NavigationNoteItem,
 	},
 
@@ -86,6 +95,10 @@ export default {
 	},
 
 	computed: {
+		showCollapsed() {
+			return store.state.app.settings.categoriesMode === 'collapsed'
+		},
+
 		numNotes() {
 			return store.getters.numNotes()
 		},

From 383fe2ca06dd5c4b4f6dc25c09cb1082a7c9b2ce Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sat, 26 Mar 2022 22:09:01 +0100
Subject: [PATCH 02/19] Removed option to collapse categories in navigation
 list

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 l10n/de_DE.js                               |  2 -
 l10n/de_DE.json                             |  2 -
 lib/Service/SettingsService.php             |  1 -
 src/components/AppSettings.vue              | 14 ----
 src/components/NavigationCategoriesItem.vue | 73 ---------------------
 src/components/NavigationCategoriesList.vue |  6 +-
 src/components/NavigationList.vue           | 16 +----
 7 files changed, 2 insertions(+), 112 deletions(-)
 delete mode 100644 src/components/NavigationCategoriesItem.vue

diff --git a/l10n/de_DE.js b/l10n/de_DE.js
index 2b9acf775..44162d791 100644
--- a/l10n/de_DE.js
+++ b/l10n/de_DE.js
@@ -20,8 +20,6 @@ OC.L10N.register(
     "File extension for new notes" : "Dateiendung für neue Notizen",
     "Display mode for notes" : "Anzeigemodus für Notizen",
     "User defined" : "Benutzerdefiniert",
-    "Always show all categories" : "Immer alle Kategorien anzeigen",
-    "Collapse categories" : "Kategorien einklappen",
     "Open in edit mode" : "Im Bearbeitungsmodus öffnen",
     "Open in preview mode" : "Im Vorschaumodus öffnen",
     "No notes yet" : "Noch keine Notizen vorhanden",
diff --git a/l10n/de_DE.json b/l10n/de_DE.json
index a8c5b1c8a..78a57de70 100644
--- a/l10n/de_DE.json
+++ b/l10n/de_DE.json
@@ -18,8 +18,6 @@
     "File extension for new notes" : "Dateiendung für neue Notizen",
     "Display mode for notes" : "Anzeigemodus für Notizen",
     "User defined" : "Benutzerdefiniert",
-    "Always show all categories" : "Immer alle Kategorien anzeigen",
-    "Collapse categories" : "Kategorien einklappen",
     "Open in edit mode" : "Im Bearbeitungsmodus öffnen",
     "Open in preview mode" : "Im Vorschaumodus öffnen",
     "No notes yet" : "Noch keine Notizen vorhanden",
diff --git a/lib/Service/SettingsService.php b/lib/Service/SettingsService.php
index 616153def..d3e0eb13e 100644
--- a/lib/Service/SettingsService.php
+++ b/lib/Service/SettingsService.php
@@ -46,7 +46,6 @@ public function __construct(
 					return implode(DIRECTORY_SEPARATOR, $path);
 				},
 			],
-			'categoriesMode' => $this->getListAttrs('visible', 'collapsed'),
 			'noteMode' => $this->getListAttrs('edit', 'preview'),
 			'customSuffix' => [
 				'default' => '.txt',
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index 007ad49aa..f154a1a00 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -32,16 +32,6 @@
 				@change="onChangeSettings"
 			>
 		</div>
-		<div class="settings-block">
-			<p class="settings-hint">
-				<label for="categoriesMode">{{ t('notes', 'Display mode for categories') }}</label>
-			</p>
-			<select id="categoriesMode" v-model="settings.categoriesMode" @change="onChangeSettings">
-				<option v-for="mode in categoriesModes" :key="mode.value" :value="mode.value">
-					{{ mode.label }}
-				</option>
-			</select>
-		</div>
 		<div class="settings-block">
 			<p class="settings-hint">
 				<label for="noteMode">{{ t('notes', 'Display mode for notes') }}</label>
@@ -77,10 +67,6 @@ export default {
 				{ value: '.md', label: '.md' },
 				{ value: 'custom', label: t('notes', 'User defined') },
 			],
-			categoriesModes: [
-				{ value: 'visible', label: t('notes', 'Always show all categories') },
-				{ value: 'collapsed', label: t('notes', 'Collapse categories') },
-			],
 			noteModes: [
 				{ value: 'edit', label: t('notes', 'Open in edit mode') },
 				{ value: 'preview', label: t('notes', 'Open in preview mode') },
diff --git a/src/components/NavigationCategoriesItem.vue b/src/components/NavigationCategoriesItem.vue
deleted file mode 100644
index 224441d10..000000000
--- a/src/components/NavigationCategoriesItem.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-	<AppNavigationItem
-		:title="title"
-		icon="icon-files"
-		class="app-navigation-noclose separator-below"
-		:class="{ 'category-header': selectedCategory !== null }"
-		:open.sync="open"
-		:allow-collapse="true"
-		@click.prevent.stop="onToggleCategories"
-	>
-		<NavigationCategoriesList
-			:selected-category="selectedCategory"
-			@category-selected="onSelectCategory"
-		/>
-	</AppNavigationItem>
-</template>
-
-<script>
-import {
-	AppNavigationItem,
-} from '@nextcloud/vue'
-
-import { categoryLabel } from '../Util'
-import NavigationCategoriesList from './NavigationCategoriesList.vue'
-
-export default {
-	name: 'NavigationCategoriesItem',
-
-	components: {
-		AppNavigationItem,
-		NavigationCategoriesList,
-	},
-
-	props: {
-		selectedCategory: {
-			type: String,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			open: false,
-		}
-	},
-
-	computed: {
-		title() {
-			return this.selectedCategory === null ? this.t('notes', 'Categories') : categoryLabel(this.selectedCategory)
-		},
-	},
-
-	methods: {
-		categoryTitle(category) {
-			return categoryLabel(category)
-		},
-
-		onToggleCategories() {
-			this.open = !this.open
-		},
-
-		onSelectCategory(category) {
-			this.open = false
-			this.$emit('category-selected', category)
-		},
-	},
-}
-</script>
-<style scoped>
-.separator-below {
-	border-bottom: 1px solid var(--color-border);
-}
-</style>
diff --git a/src/components/NavigationCategoriesList.vue b/src/components/NavigationCategoriesList.vue
index f214a14fe..360b55005 100644
--- a/src/components/NavigationCategoriesList.vue
+++ b/src/components/NavigationCategoriesList.vue
@@ -23,7 +23,7 @@
 			</AppNavigationCounter>
 		</AppNavigationItem>
 
-		<AppNavigationSpacer v-if="showSpacer" class="separator-above" />
+		<AppNavigationSpacer class="separator-above" />
 	</Fragment>
 </template>
 
@@ -55,10 +55,6 @@ export default {
 			type: String,
 			default: null,
 		},
-		showSpacer: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	computed: {
diff --git a/src/components/NavigationList.vue b/src/components/NavigationList.vue
index 37e37884d..38f209043 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NavigationList.vue
@@ -1,16 +1,8 @@
 <template>
 	<Fragment>
-		<!-- collapsible categories -->
-		<NavigationCategoriesItem
-			v-if="numNotes && showCollapsed"
-			:selected-category="category"
-			@category-selected="$emit('category-selected', $event)"
-		/>
-
 		<NavigationCategoriesList
-			v-if="numNotes && !showCollapsed"
+			v-if="numNotes"
 			:selected-category="category"
-			:show-spacer="true"
 			@category-selected="$emit('category-selected', $event)"
 		/>
 
@@ -51,7 +43,6 @@ import {
 import { Fragment } from 'vue-fragment'
 
 import { categoryLabel } from '../Util'
-import NavigationCategoriesItem from './NavigationCategoriesItem'
 import NavigationCategoriesList from './NavigationCategoriesList'
 import NavigationNoteItem from './NavigationNoteItem'
 import store from '../store'
@@ -65,7 +56,6 @@ export default {
 		AppNavigationCaption,
 		AppNavigationItem,
 		Fragment,
-		NavigationCategoriesItem,
 		NavigationCategoriesList,
 		NavigationNoteItem,
 	},
@@ -95,10 +85,6 @@ export default {
 	},
 
 	computed: {
-		showCollapsed() {
-			return store.state.app.settings.categoriesMode === 'collapsed'
-		},
-
 		numNotes() {
 			return store.getters.numNotes()
 		},

From fdd2a36588ef8e4707f4d9b3db23e9f1241569a7 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sat, 26 Mar 2022 23:34:03 +0100
Subject: [PATCH 03/19] Removed NavigationList component

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/App.vue                                   | 58 ++++------------
 ...nCategoriesList.vue => CategoriesList.vue} | 15 ++--
 .../{NavigationList.vue => NotesList.vue}     | 68 ++++++++-----------
 src/router.js                                 |  3 +
 src/store/notes.js                            | 38 +++++++++++
 5 files changed, 89 insertions(+), 93 deletions(-)
 rename src/components/{NavigationCategoriesList.vue => CategoriesList.vue} (91%)
 rename src/components/{NavigationList.vue => NotesList.vue} (80%)

diff --git a/src/App.vue b/src/App.vue
index 37c2a7d94..209b3f018 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,11 +10,8 @@
 			/>
 
 			<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"
 				/>
 			</template>
 
@@ -30,7 +27,10 @@
 				<p>{{ t('notes', 'Please see Nextcloud server log for details.') }}</p>
 			</div>
 		</AppContent>
-		<router-view v-else />
+
+		<router-view name="notes" v-if="!error" />
+
+		<router-view v-if="!error" />
 
 		<router-view name="sidebar" />
 	</Content>
@@ -49,7 +49,7 @@ import '@nextcloud/dialogs/styles/toast.scss'
 import { config } from './config'
 import { fetchNotes, noteExists, createNote, undoDeleteNote } from './NotesService'
 import AppSettings from './components/AppSettings'
-import NavigationList from './components/NavigationList'
+import CategoriesList from './components/CategoriesList.vue'
 import store from './store'
 
 export default {
@@ -61,7 +61,7 @@ export default {
 		AppNavigationNew,
 		AppSettings,
 		Content,
-		NavigationList,
+		CategoriesList,
 	},
 
 	data() {
@@ -82,37 +82,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()
 		},
 	},
 
@@ -228,7 +207,7 @@ export default {
 				return
 			}
 			this.loading.create = true
-			createNote(this.filter.category || '')
+			createNote(store.getters.getSelectedCategory() || '')
 				.then(note => {
 					this.routeToNote(note.id, { new: null })
 				})
@@ -239,15 +218,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()
diff --git a/src/components/NavigationCategoriesList.vue b/src/components/CategoriesList.vue
similarity index 91%
rename from src/components/NavigationCategoriesList.vue
rename to src/components/CategoriesList.vue
index 360b55005..8a69e719e 100644
--- a/src/components/NavigationCategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -41,7 +41,7 @@ import { categoryLabel } from '../Util'
 import store from '../store'
 
 export default {
-	name: 'NavigationCategoriesList',
+	name: 'CategoriesList',
 
 	components: {
 		Fragment,
@@ -50,13 +50,6 @@ export default {
 		AppNavigationSpacer,
 	},
 
-	props: {
-		selectedCategory: {
-			type: String,
-			default: null,
-		},
-	},
-
 	computed: {
 		numNotes() {
 			return store.getters.numNotes()
@@ -65,6 +58,10 @@ export default {
 		categories() {
 			return getCategories(1, true)
 		},
+
+		selectedCategory() {
+			return store.getters.getSelectedCategory()
+		}
 	},
 
 	methods: {
@@ -73,7 +70,7 @@ export default {
 		},
 
 		onSelectCategory(category) {
-			this.$emit('category-selected', category)
+			store.commit('setSelectedCategory', category)
 		},
 	},
 }
diff --git a/src/components/NavigationList.vue b/src/components/NotesList.vue
similarity index 80%
rename from src/components/NavigationList.vue
rename to src/components/NotesList.vue
index 38f209043..3f82f5e08 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NotesList.vue
@@ -1,14 +1,7 @@
 <template>
-	<Fragment>
-		<NavigationCategoriesList
-			v-if="numNotes"
-			:selected-category="category"
-			@category-selected="$emit('category-selected', $event)"
-		/>
-
-		<!-- list of notes -->
+	<ul>
 		<template v-for="item in noteItems">
-			<AppNavigationCaption v-if="category!==null && category!==item.category"
+			<!--<AppNavigationCaption v-if="category!==null && category!==item.category"
 				:key="item.category"
 				icon="icon-files"
 				class="app-navigation-noclose"
@@ -19,6 +12,12 @@
 				:key="item.timeslot"
 				:title="item.timeslot"
 			/>
+			<NavigationNoteItem v-for="note in item.notes"
+				:key="note.id"
+				:note="note"
+				@category-selected="$emit('category-selected', $event)"
+				@note-deleted="$emit('note-deleted', $event)"
+			/>-->
 			<NavigationNoteItem v-for="note in item.notes"
 				:key="note.id"
 				:note="note"
@@ -26,37 +25,33 @@
 				@note-deleted="$emit('note-deleted', $event)"
 			/>
 		</template>
-		<AppNavigationItem
-			v-if="notes.length != filteredNotes.length"
+		<!--<AppNavigationItem
+			v-if="displayedNotes.length != filteredNotes.length"
 			v-observe-visibility="onEndOfNotes"
 			:title="t('notes', 'Loading …')"
 			:loading="true"
-		/>
-	</Fragment>
+		/> !-->
+	</ul>
 </template>
 
 <script>
-import {
-	AppNavigationCaption,
-	AppNavigationItem,
-} from '@nextcloud/vue'
-import { Fragment } from 'vue-fragment'
+// import {
+// AppNavigationCaption,
+// AppNavigationItem,
+// } from '@nextcloud/vue'
 
 import { categoryLabel } from '../Util'
-import NavigationCategoriesList from './NavigationCategoriesList'
 import NavigationNoteItem from './NavigationNoteItem'
 import store from '../store'
 
 import { ObserveVisibility } from 'vue-observe-visibility'
 
 export default {
-	name: 'NavigationList',
+	name: 'NotesList',
 
 	components: {
-		AppNavigationCaption,
-		AppNavigationItem,
-		Fragment,
-		NavigationCategoriesList,
+		// AppNavigationCaption,
+		// AppNavigationItem,
 		NavigationNoteItem,
 	},
 
@@ -64,17 +59,6 @@ export default {
 		'observe-visibility': ObserveVisibility,
 	},
 
-	props: {
-		filteredNotes: {
-			type: Array,
-			required: true,
-		},
-		category: {
-			type: String,
-			default: null,
-		},
-	},
-
 	data() {
 		return {
 			timeslots: [],
@@ -85,11 +69,15 @@ export default {
 	},
 
 	computed: {
-		numNotes() {
-			return store.getters.numNotes()
+		category() {
+			return store.getters.getSelectedCategory()
+		},
+
+		filteredNotes() {
+			return store.getters.getFilteredNotes()
 		},
 
-		notes() {
+		displayedNotes() {
 			if (this.filteredNotes.length > 40 && this.showFirstNotesOnly) {
 				return this.filteredNotes.slice(0, 30)
 			} else {
@@ -100,7 +88,7 @@ export default {
 		// group notes by time ("All notes") or by category (if category chosen)
 		groupedNotes() {
 			if (this.category === null) {
-				return this.notes.reduce((g, note) => {
+				return this.displayedNotes.reduce((g, note) => {
 					const timeslot = this.getTimeslotFromNote(note)
 					if (g.length === 0 || g[g.length - 1].timeslot !== timeslot) {
 						g.push({ timeslot, notes: [] })
@@ -109,7 +97,7 @@ export default {
 					return g
 				}, [])
 			} else {
-				return this.notes.reduce((g, note) => {
+				return this.displayedNotes.reduce((g, note) => {
 					if (g.length === 0 || g[g.length - 1].category !== note.category) {
 						g.push({ category: note.category, notes: [] })
 					}
diff --git a/src/router.js b/src/router.js
index eb5f3be65..6e9bd8938 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,6 +4,7 @@ import { generateUrl } from '@nextcloud/router'
 
 import Loading from './components/Loading'
 import Welcome from './components/Welcome'
+import NotesList from './components/NotesList'
 import Note from './components/Note'
 import Sidebar from './components/Sidebar'
 
@@ -28,10 +29,12 @@ export default new Router({
 			path: '/note/:noteId',
 			name: 'note',
 			components: {
+				notes: NotesList,
 				default: Note,
 				sidebar: Sidebar,
 			},
 			props: {
+				notes: true,
 				default: true,
 				sidebar: true,
 			},
diff --git a/src/store/notes.js b/src/store/notes.js
index 24289e18e..546696249 100644
--- a/src/store/notes.js
+++ b/src/store/notes.js
@@ -5,6 +5,7 @@ const state = {
 	categories: [],
 	notes: [],
 	notesIds: {},
+	selectedCategory: null,
 }
 
 const getters = {
@@ -70,6 +71,39 @@ const getters = {
 		}
 		return result
 	},
+
+	getFilteredNotes: (state) => () => {
+		const notes = state.notes.filter(note => {
+			if (state.selectedCategory !== null
+				&& state.selectedCategory !== note.category
+				&& !note.category.startsWith(state.selectedCategory + '/')) {
+				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(state.selectedCategory === null ? cmpRecent : cmpCategory)
+
+		return notes
+	},
+
+	getSelectedCategory: (state) => () => {
+		return state.selectedCategory
+	},
 }
 
 const mutations = {
@@ -111,6 +145,10 @@ const mutations = {
 	setCategories(state, categories) {
 		state.categories = categories
 	},
+
+	setSelectedCategory(state, category) {
+		state.selectedCategory = category
+	},
 }
 
 const actions = {

From 3ee52eaba8e55773d46f2db869e378a4dd8e5d00 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sun, 27 Mar 2022 14:00:11 +0200
Subject: [PATCH 04/19] Introduced three column layout

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/App.vue                                   |   4 +-
 src/components/CategoriesList.vue             |   2 +-
 src/components/Note.vue                       |  32 +++-
 .../{NavigationNoteItem.vue => NoteItem.vue}  |  66 +++----
 src/components/NotesList.vue                  | 162 ++---------------
 src/components/NotesView.vue                  | 165 ++++++++++++++++++
 src/components/Sidebar.vue                    |  32 +++-
 src/router.js                                 |   4 +-
 src/store/notes.js                            |   9 +
 9 files changed, 278 insertions(+), 198 deletions(-)
 rename src/components/{NavigationNoteItem.vue => NoteItem.vue} (67%)
 create mode 100644 src/components/NotesView.vue

diff --git a/src/App.vue b/src/App.vue
index 209b3f018..0c5134cd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,9 +28,9 @@
 			</div>
 		</AppContent>
 
-		<router-view name="notes" v-if="!error" />
+		<router-view v-if="!error" name="notes" @note-deleted="onNoteDeleted" />
 
-		<router-view v-if="!error" />
+		<router-view v-if="!error" @note-deleted="onNoteDeleted" />
 
 		<router-view name="sidebar" />
 	</Content>
diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index 8a69e719e..3ce50cbf3 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -61,7 +61,7 @@ export default {
 
 		selectedCategory() {
 			return store.getters.getSelectedCategory()
-		}
+		},
 	},
 
 	methods: {
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 63cd7b730..b2d3eb983 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -61,6 +61,14 @@
 					>
 						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
 					</ActionButton>
+					<ActionButton
+						:disabled="note.readonly"
+						:icon="actionDeleteIcon"
+						:closeAfterClick="true"
+						@click="onDeleteNote"
+					>
+						{{ t('notes', 'Delete note') }}
+					</ActionButton>
 				</Actions>
 				<Actions v-if="note.readonly">
 					<ActionButton>
@@ -101,7 +109,7 @@ import SyncAlertIcon from 'vue-material-design-icons/SyncAlert'
 import PencilOffIcon from 'vue-material-design-icons/PencilOff'
 
 import { config } from '../config'
-import { fetchNote, refreshNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService'
+import { fetchNote, refreshNote, deleteNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService'
 import { routeIsNewNote } from '../Util'
 import TheEditor from './EditorEasyMDE'
 import ThePreview from './EditorMarkdownIt'
@@ -139,6 +147,7 @@ export default {
 	data() {
 		return {
 			loading: false,
+			loadingDelete: false,
 			fullscreen: false,
 			preview: false,
 			actionsOpen: false,
@@ -166,6 +175,9 @@ export default {
 		sidebarOpen() {
 			return store.state.app.sidebarOpen
 		},
+		actionDeleteIcon() {
+			return 'icon-delete' + (this.loadingDelete ? ' loading' : '')
+		},
 	},
 
 	watch: {
@@ -183,6 +195,7 @@ export default {
 	},
 
 	created() {
+		this.$store.commit('setSelectedNote', parseInt(this.noteId))
 		this.fetchData()
 		document.addEventListener('webkitfullscreenchange', this.onDetectFullscreen)
 		document.addEventListener('mozfullscreenchange', this.onDetectFullscreen)
@@ -391,6 +404,23 @@ export default {
 			conflictSolutionRemote(this.note)
 			this.showConflict = false
 		},
+
+		async onDeleteNote() {
+			this.loadingDelete = true
+			try {
+				const note = await fetchNote(this.note.id)
+				if (note.errorType) {
+					throw new Error('Note has errors')
+				}
+				await deleteNote(this.note.id, () => {
+					this.$emit('note-deleted', note)
+					this.loadingDelete = false
+				})
+			} catch (e) {
+				showError(this.t('notes', 'Error during preparing note for deletion.'))
+				this.loadingDelete = false
+			}
+		},
 	},
 }
 </script>
diff --git a/src/components/NavigationNoteItem.vue b/src/components/NoteItem.vue
similarity index 67%
rename from src/components/NavigationNoteItem.vue
rename to src/components/NoteItem.vue
index 4484e057f..5b3d70c19 100644
--- a/src/components/NavigationNoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -1,56 +1,51 @@
 <template>
-	<AppNavigationItem
+	<ListItem
 		:title="title"
-		:icon="icon"
-		:menu-open.sync="actionsOpen"
+		:active="isSelected"
+		@click="onNoteSelected(note.id)"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
-		:class="{ actionsOpen }"
-		:loading="loading.note"
-		:editable="!note.readonly"
-		:edit-label="t('notes', 'Rename')"
-		:edit-placeholder="t('notes', 'Note\'s title')"
-		@update:title="onRename"
+		:forceDisplayActions="true"
 	>
 		<template #actions>
-			<ActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
+			<ActionButton
+				:icon="actionFavoriteIcon"
+				:closeAfterClick="true"
+				@click="onToggleFavorite"
+			>
 				{{ actionFavoriteText }}
 			</ActionButton>
-			<ActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
+			<ActionButton
+				:disabled="note.readonly"
+				:icon="actionDeleteIcon"
+				:closeAfterClick="true"
+				@click="onDeleteNote"
+			>
 				{{ t('notes', 'Delete note') }}
 			</ActionButton>
-			<ActionSeparator />
-			<ActionButton icon="icon-files-dark" @click="onCategorySelected">
-				{{ actionCategoryText }}
-			</ActionButton>
 		</template>
-	</AppNavigationItem>
+	</ListItem>
 </template>
 
 <script>
-import {
-	ActionButton,
-	ActionSeparator,
-	AppNavigationItem,
-} from '@nextcloud/vue'
-import { showError } from '@nextcloud/dialogs'
+import { ActionButton, ListItem } from '@nextcloud/vue'
 
+import { showError } from '@nextcloud/dialogs'
 import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService'
-import { categoryLabel, routeIsNewNote } from '../Util'
+import { routeIsNewNote } from '../Util'
 
 export default {
-	name: 'NavigationNoteItem',
+	name: 'NoteItem',
 
 	components: {
 		ActionButton,
-		ActionSeparator,
-		AppNavigationItem,
+		ListItem,
 	},
 
 	props: {
 		note: {
 			type: Object,
 			required: true,
-		},
+		}
 	},
 
 	data() {
@@ -60,11 +55,14 @@ export default {
 				favorite: false,
 				delete: false,
 			},
-			actionsOpen: false,
 		}
 	},
 
 	computed: {
+		isSelected() {
+			return this.$store.getters.getSelectedNote() === this.note.id
+		},
+
 		icon() {
 			let icon = ''
 			if (this.note.error) {
@@ -91,10 +89,6 @@ export default {
 			return icon
 		},
 
-		actionCategoryText() {
-			return categoryLabel(this.note.category)
-		},
-
 		actionDeleteIcon() {
 			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
 		},
@@ -108,13 +102,11 @@ export default {
 				})
 				.then(() => {
 					this.loading.favorite = false
-					this.actionsOpen = false
 				})
 		},
 
-		onCategorySelected() {
-			this.actionsOpen = false
-			this.$emit('category-selected', this.note.category)
+		onNoteSelected(noteId) {
+			this.$store.commit('setSelectedNote', noteId)
 		},
 
 		onRename(newTitle) {
@@ -143,12 +135,10 @@ export default {
 				await deleteNote(this.note.id, () => {
 					this.$emit('note-deleted', note)
 					this.loading.delete = false
-					this.actionsOpen = false
 				})
 			} catch (e) {
 				showError(this.t('notes', 'Error during preparing note for deletion.'))
 				this.loading.delete = false
-				this.actionsOpen = false
 			}
 		},
 	},
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
index 3f82f5e08..2725e7200 100644
--- a/src/components/NotesList.vue
+++ b/src/components/NotesList.vue
@@ -1,167 +1,27 @@
 <template>
 	<ul>
-		<template v-for="item in noteItems">
-			<!--<AppNavigationCaption v-if="category!==null && category!==item.category"
-				:key="item.category"
-				icon="icon-files"
-				class="app-navigation-noclose"
-				:title="categoryToLabel(item.category)"
-				@click.native="$emit('category-selected', item.category)"
-			/>
-			<AppNavigationCaption v-if="category===null && item.timeslot"
-				:key="item.timeslot"
-				:title="item.timeslot"
-			/>
-			<NavigationNoteItem v-for="note in item.notes"
-				:key="note.id"
-				:note="note"
-				@category-selected="$emit('category-selected', $event)"
-				@note-deleted="$emit('note-deleted', $event)"
-			/>-->
-			<NavigationNoteItem v-for="note in item.notes"
-				:key="note.id"
-				:note="note"
-				@category-selected="$emit('category-selected', $event)"
-				@note-deleted="$emit('note-deleted', $event)"
-			/>
-		</template>
-		<!--<AppNavigationItem
-			v-if="displayedNotes.length != filteredNotes.length"
-			v-observe-visibility="onEndOfNotes"
-			:title="t('notes', 'Loading …')"
-			:loading="true"
-		/> !-->
+		<NoteItem v-for="note in notes"
+			:key="note.id"
+			:note="note"
+			@note-deleted="$emit('note-deleted', $event)"
+		/>
 	</ul>
 </template>
 
 <script>
-// import {
-// AppNavigationCaption,
-// AppNavigationItem,
-// } from '@nextcloud/vue'
-
-import { categoryLabel } from '../Util'
-import NavigationNoteItem from './NavigationNoteItem'
-import store from '../store'
-
-import { ObserveVisibility } from 'vue-observe-visibility'
+import NoteItem from './NoteItem'
 
 export default {
 	name: 'NotesList',
 
 	components: {
-		// AppNavigationCaption,
-		// AppNavigationItem,
-		NavigationNoteItem,
-	},
-
-	directives: {
-		'observe-visibility': ObserveVisibility,
+		NoteItem,
 	},
 
-	data() {
-		return {
-			timeslots: [],
-			monthFormat: new Intl.DateTimeFormat(OC.getLanguage(), { month: 'long', year: 'numeric' }),
-			lastYear: new Date(new Date().getFullYear() - 1, 0),
-			showFirstNotesOnly: true,
-		}
-	},
-
-	computed: {
-		category() {
-			return store.getters.getSelectedCategory()
-		},
-
-		filteredNotes() {
-			return store.getters.getFilteredNotes()
-		},
-
-		displayedNotes() {
-			if (this.filteredNotes.length > 40 && this.showFirstNotesOnly) {
-				return this.filteredNotes.slice(0, 30)
-			} else {
-				return this.filteredNotes
-			}
-		},
-
-		// group notes by time ("All notes") or by category (if category chosen)
-		groupedNotes() {
-			if (this.category === null) {
-				return this.displayedNotes.reduce((g, note) => {
-					const timeslot = this.getTimeslotFromNote(note)
-					if (g.length === 0 || g[g.length - 1].timeslot !== timeslot) {
-						g.push({ timeslot, notes: [] })
-					}
-					g[g.length - 1].notes.push(note)
-					return g
-				}, [])
-			} else {
-				return this.displayedNotes.reduce((g, note) => {
-					if (g.length === 0 || g[g.length - 1].category !== note.category) {
-						g.push({ category: note.category, notes: [] })
-					}
-					g[g.length - 1].notes.push(note)
-					return g
-				}, [])
-			}
-		},
-
-		noteItems() {
-			return this.groupedNotes
-		},
-	},
-
-	watch: {
-		category() { this.showFirstNotesOnly = true },
-	},
-
-	created() {
-		this.updateTimeslots()
-		setInterval(this.updateTimeslots, 1000 * 60)
-	},
-
-	methods: {
-		updateTimeslots() {
-			const now = new Date()
-			// define the time groups we want to allow
-			this.timeslots = [
-				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate()), l: t('notes', 'Today') },
-				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1), l: t('notes', 'Yesterday') },
-				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay()), l: t('notes', 'This week') },
-				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay() - 7), l: t('notes', 'Last week') },
-				{ t: new Date(now.getFullYear(), now.getMonth(), 1), l: t('notes', 'This month') },
-				{ t: new Date(now.getFullYear(), now.getMonth() - 1, 1), l: t('notes', 'Last month') },
-			]
-		},
-
-		categoryTitle(category) {
-			return categoryLabel(category)
-		},
-
-		categoryToLabel(category) {
-			return categoryLabel(category.substring(this.category.length + 1))
-		},
-
-		getTimeslotFromNote(note) {
-			if (note.favorite) {
-				return ''
-			}
-			const t = note.modified * 1000
-			const timeslot = this.timeslots.find(timeslot => t >= timeslot.t.getTime())
-			if (timeslot !== undefined) {
-				return timeslot.l
-			} else if (t >= this.lastYear) {
-				return this.monthFormat.format(new Date(t))
-			} else {
-				return new Date(t).getFullYear().toString()
-			}
-		},
-
-		onEndOfNotes(isVisible) {
-			if (isVisible) {
-				this.showFirstNotesOnly = false
-			}
+	props: {
+		notes: {
+			type: Array,
+			required: true,
 		},
 	},
 }
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
new file mode 100644
index 000000000..50395e21c
--- /dev/null
+++ b/src/components/NotesView.vue
@@ -0,0 +1,165 @@
+<template>
+	<div class="notes-view">
+		<NotesList v-if="groupedNotes.length === 1"
+			:notes="groupedNotes[0].notes"
+			@note-deleted="$emit('note-deleted', $event)"
+		/>
+		<template v-else v-for="(group, idx) in groupedNotes">
+			<AppNavigationCaption v-if="group.category && category!==group.category"
+				:key="group.category"
+				icon="icon-files"
+				:title="categoryToLabel(group.category)"
+			/>
+			<AppNavigationCaption v-if="group.timeslot"
+				:key="group.timeslot"
+				:title="group.timeslot"
+			/>
+			<NotesList
+				:key=idx
+				:notes="group.notes"
+				@note-deleted="$emit('note-deleted', $event)"
+			/>
+		</template>
+		<!--<AppNavigationItem
+			v-if="displayedNotes.length != filteredNotes.length"
+			v-observe-visibility="onEndOfNotes"
+			:title="t('notes', 'Loading …')"
+			:loading="true"
+		/> !-->
+	</div>
+</template>
+
+<script>
+
+import { AppNavigationCaption } from '@nextcloud/vue'
+import { categoryLabel } from '../Util'
+import NotesList from './NotesList'
+import store from '../store'
+
+import { ObserveVisibility } from 'vue-observe-visibility'
+
+export default {
+	name: 'NotesView',
+
+	components: {
+		AppNavigationCaption,
+		NotesList,
+	},
+
+	directives: {
+		'observe-visibility': ObserveVisibility,
+	},
+
+	data() {
+		return {
+			timeslots: [],
+			monthFormat: new Intl.DateTimeFormat(OC.getLanguage(), { month: 'long', year: 'numeric' }),
+			lastYear: new Date(new Date().getFullYear() - 1, 0),
+			showFirstNotesOnly: true,
+		}
+	},
+
+	computed: {
+		category() {
+			return store.getters.getSelectedCategory()
+		},
+
+		filteredNotes() {
+			return store.getters.getFilteredNotes()
+		},
+
+		displayedNotes() {
+			if (this.filteredNotes.length > 40 && this.showFirstNotesOnly) {
+				return this.filteredNotes.slice(0, 30)
+			} else {
+				return this.filteredNotes
+			}
+		},
+
+		// group notes by time ("All notes") or by category (if category chosen)
+		groupedNotes() {
+			if (this.category === null) {
+				return this.displayedNotes.reduce((g, note) => {
+					const timeslot = this.getTimeslotFromNote(note)
+					if (g.length === 0 || g[g.length - 1].timeslot !== timeslot) {
+						g.push({ timeslot, notes: [] })
+					}
+					g[g.length - 1].notes.push(note)
+					return g
+				}, [])
+			} else {
+				return this.displayedNotes.reduce((g, note) => {
+					if (g.length === 0 || g[g.length - 1].category !== note.category) {
+						g.push({ category: note.category, notes: [] })
+					}
+					g[g.length - 1].notes.push(note)
+					return g
+				}, [])
+			}
+		},
+	},
+
+	watch: {
+		category() { this.showFirstNotesOnly = true },
+	},
+
+	created() {
+		this.updateTimeslots()
+		setInterval(this.updateTimeslots, 1000 * 60)
+	},
+
+	methods: {
+		updateTimeslots() {
+			const now = new Date()
+			// define the time groups we want to allow
+			this.timeslots = [
+				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate()), l: t('notes', 'Today') },
+				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1), l: t('notes', 'Yesterday') },
+				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay()), l: t('notes', 'This week') },
+				{ t: new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay() - 7), l: t('notes', 'Last week') },
+				{ t: new Date(now.getFullYear(), now.getMonth(), 1), l: t('notes', 'This month') },
+				{ t: new Date(now.getFullYear(), now.getMonth() - 1, 1), l: t('notes', 'Last month') },
+			]
+		},
+
+		categoryTitle(category) {
+			return categoryLabel(category)
+		},
+
+		categoryToLabel(category) {
+			return categoryLabel(category.substring(this.category.length + 1))
+		},
+
+		getTimeslotFromNote(note) {
+			if (note.favorite) {
+				return ''
+			}
+			const t = note.modified * 1000
+			const timeslot = this.timeslots.find(timeslot => t >= timeslot.t.getTime())
+			if (timeslot !== undefined) {
+				return timeslot.l
+			} else if (t >= this.lastYear) {
+				return this.monthFormat.format(new Date(t))
+			} else {
+				return new Date(t).getFullYear().toString()
+			}
+		},
+
+		onEndOfNotes(isVisible) {
+			if (isVisible) {
+				this.showFirstNotesOnly = false
+			}
+		},
+
+		onCategorySelected(category) {
+			store.commit('setSelectedCategory', category)
+		}
+	},
+}
+</script>
+<style scoped>
+	.notes-view {
+		min-width: 300px;
+		padding-top: 44px;
+	}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 67dd62b33..b1a7dc782 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -4,7 +4,10 @@
 		:subtitle="subtitle"
 		:star-loading="loading.favorite"
 		:starred="note.favorite"
+		:title-editable.sync="titleEditable"
+		:title-tooltip="titleTooltip"
 		@update:starred="onSetFavorite"
+		@update:title="onRename"
 		@close="onCloseSidebar"
 	>
 		<div class="sidebar-content-wrapper">
@@ -61,7 +64,7 @@ import {
 } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 
-import { getCategories, setFavorite, setCategory, saveNoteManually } from '../NotesService'
+import { getCategories, setFavorite, setTitle, setCategory, saveNoteManually } from '../NotesService'
 import { categoryLabel } from '../Util'
 import store from '../store'
 
@@ -96,8 +99,10 @@ export default {
 			loading: {
 				category: false,
 				favorite: false,
+				title: false, // TODO reflect this state in the UI
 			},
 			categoryInput: null,
+			titleEditableInternal: false,
 		}
 	},
 
@@ -105,11 +110,19 @@ export default {
 		note() {
 			return store.getters.getNote(parseInt(this.noteId))
 		},
+		titleEditable: {
+			get() {
+				return this.titleEditableInternal && !this.note.readonly
+			},
+			set(newValue) {
+				this.titleEditableInternal = newValue
+			}
+		},
 		title() {
-			return this.note ? this.note.title : ''
+			return this.note?.title || ''
 		},
 		category() {
-			return this.note ? this.note.category : ''
+			return this.note?.category || ''
 		},
 		formattedDate() {
 			return moment(this.note.modified * 1000).format('LLL')
@@ -141,6 +154,9 @@ export default {
 		sidebarOpen() {
 			return store.state.app.sidebarOpen
 		},
+		titleTooltip() {
+			return t('notes', 'Click to edit title')
+		}
 	},
 
 	methods: {
@@ -168,6 +184,16 @@ export default {
 				})
 		},
 
+		onRename(newTitle) {
+			this.loading.title = true
+			setTitle(this.note.id, newTitle)
+				.catch(() => {
+				})
+				.finally(() => {
+					this.loading.title = false
+				})
+		},
+
 		onSaveCategory(category) {
 			this.categoryInput = null
 			if (category !== null && this.note.category !== category) {
diff --git a/src/router.js b/src/router.js
index 6e9bd8938..72a28b873 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,7 +4,7 @@ import { generateUrl } from '@nextcloud/router'
 
 import Loading from './components/Loading'
 import Welcome from './components/Welcome'
-import NotesList from './components/NotesList'
+import NotesView from './components/NotesView'
 import Note from './components/Note'
 import Sidebar from './components/Sidebar'
 
@@ -29,7 +29,7 @@ export default new Router({
 			path: '/note/:noteId',
 			name: 'note',
 			components: {
-				notes: NotesList,
+				notes: NotesView,
 				default: Note,
 				sidebar: Sidebar,
 			},
diff --git a/src/store/notes.js b/src/store/notes.js
index 546696249..875bac348 100644
--- a/src/store/notes.js
+++ b/src/store/notes.js
@@ -6,6 +6,7 @@ const state = {
 	notes: [],
 	notesIds: {},
 	selectedCategory: null,
+	selectedNote: null,
 }
 
 const getters = {
@@ -104,6 +105,10 @@ const getters = {
 	getSelectedCategory: (state) => () => {
 		return state.selectedCategory
 	},
+
+	getSelectedNote: (state) => () => {
+		return state.selectedNote
+	}
 }
 
 const mutations = {
@@ -149,6 +154,10 @@ const mutations = {
 	setSelectedCategory(state, category) {
 		state.selectedCategory = category
 	},
+
+	setSelectedNote(state, note) {
+		state.selectedNote = note
+	}
 }
 
 const actions = {

From e18810f8394e303aea1c5190370b0bb0c6d5715c Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sun, 27 Mar 2022 15:40:25 +0200
Subject: [PATCH 05/19] Added breadcrumbs to note

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/EditorEasyMDE.vue |  2 +-
 src/components/Note.vue          | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index 33f42acb2..4cfe4cddf 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -364,7 +364,7 @@ export default {
 
 .upload-button {
 	position: fixed;
-	right: 64px;
+	right: 15px;
 	z-index: 10;
 	height: 40px;
 	margin-right: 5px;
diff --git a/src/components/Note.vue b/src/components/Note.vue
index b2d3eb983..acaf13835 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -5,6 +5,12 @@
 			class="note-container"
 			:class="{ fullscreen: fullscreen }"
 		>
+			<Breadcrumbs>
+				<Breadcrumb title="Home" />
+				<Breadcrumb :title="category" :key="category" v-for="category of categories" />
+				<Breadcrumb :title="title" />
+			</Breadcrumbs>
+
 			<Modal v-if="note.conflict && showConflict" size="full" @close="showConflict=false">
 				<div class="conflict-modal">
 					<div class="conflict-header">
@@ -101,6 +107,8 @@ import {
 	Modal,
 	Tooltip,
 	isMobile,
+	Breadcrumbs,
+	Breadcrumb
 } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -129,6 +137,8 @@ export default {
 		SyncAlertIcon,
 		TheEditor,
 		ThePreview,
+		Breadcrumbs,
+		Breadcrumb,
 	},
 
 	directives: {
@@ -164,7 +174,7 @@ export default {
 			return store.getters.getNote(parseInt(this.noteId))
 		},
 		title() {
-			return this.note ? this.note.title : ''
+			return this.note?.title || ''
 		},
 		isNewNote() {
 			return routeIsNewNote(this.$route)
@@ -178,6 +188,9 @@ export default {
 		actionDeleteIcon() {
 			return 'icon-delete' + (this.loadingDelete ? ' loading' : '')
 		},
+		categories() {
+			return this.note.category?.split('/') || []
+		}
 	},
 
 	watch: {

From 134c6f211be1504c7c6770eeab95043ec5f7fab4 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sun, 27 Mar 2022 15:40:41 +0200
Subject: [PATCH 06/19] Improved note renaming

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/Sidebar.vue | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index b1a7dc782..c8e49f879 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -7,7 +7,8 @@
 		:title-editable.sync="titleEditable"
 		:title-tooltip="titleTooltip"
 		@update:starred="onSetFavorite"
-		@update:title="onRename"
+		@update:title="onUpdateTitle"
+		@submit-title="onRenameTitle"
 		@close="onCloseSidebar"
 	>
 		<div class="sidebar-content-wrapper">
@@ -103,6 +104,7 @@ export default {
 			},
 			categoryInput: null,
 			titleEditableInternal: false,
+			newTtitle: '',
 		}
 	},
 
@@ -184,14 +186,22 @@ export default {
 				})
 		},
 
-		onRename(newTitle) {
-			this.loading.title = true
-			setTitle(this.note.id, newTitle)
-				.catch(() => {
-				})
-				.finally(() => {
-					this.loading.title = false
-				})
+		onUpdateTitle(newTitle) {
+			this.newTitle = newTitle
+		},
+
+		onRenameTitle(event) {
+			if (event && this.title !== this.newTitle) {
+				this.loading.title = true
+				setTitle(this.note.id, this.newTitle)
+					.catch(() => {
+					})
+					.finally(() => {
+						this.loading.title = false
+						this.newTitle = this.title
+					})
+			}
+			this.newTitle = this.title
 		},
 
 		onSaveCategory(category) {

From 0cc2c76e015e7101cb9a067a202cf5549d161d99 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sun, 27 Mar 2022 22:01:15 +0200
Subject: [PATCH 07/19] Fixed layout issues

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/EditorEasyMDE.vue |  3 +-
 src/components/Note.vue          |  9 ++++-
 src/components/NotesView.vue     | 65 ++++++++++++++++++++------------
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index 4cfe4cddf..ff52f8fb5 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -364,9 +364,10 @@ export default {
 
 .upload-button {
 	position: fixed;
-	right: 15px;
+	right: 64px;
 	z-index: 10;
 	height: 40px;
 	margin-right: 5px;
+	top: 65px;
 }
 </style>
diff --git a/src/components/Note.vue b/src/components/Note.vue
index acaf13835..e17128aaa 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -5,7 +5,7 @@
 			class="note-container"
 			:class="{ fullscreen: fullscreen }"
 		>
-			<Breadcrumbs>
+			<Breadcrumbs class="breadcrumbs">
 				<Breadcrumb title="Home" />
 				<Breadcrumb :title="category" :key="category" v-for="category of categories" />
 				<Breadcrumb :title="title" />
@@ -449,6 +449,7 @@ export default {
 	font-size: 16px;
 	padding: 1em;
 	padding-bottom: 0;
+	padding-top: 44px;
 }
 
 /* center editor on large screens */
@@ -530,4 +531,10 @@ export default {
 	}
 }
 
+.breadcrumbs {
+	position: fixed;
+	z-index: 1;
+	background-color: var(--color-main-background);
+}
+
 </style>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 50395e21c..b5479ca27 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -1,31 +1,34 @@
 <template>
 	<div class="notes-view">
-		<NotesList v-if="groupedNotes.length === 1"
-			:notes="groupedNotes[0].notes"
-			@note-deleted="$emit('note-deleted', $event)"
-		/>
-		<template v-else v-for="(group, idx) in groupedNotes">
-			<AppNavigationCaption v-if="group.category && category!==group.category"
-				:key="group.category"
-				icon="icon-files"
-				:title="categoryToLabel(group.category)"
-			/>
-			<AppNavigationCaption v-if="group.timeslot"
-				:key="group.timeslot"
-				:title="group.timeslot"
-			/>
-			<NotesList
-				:key=idx
-				:notes="group.notes"
+		<div class="spacer" />
+		<div class="notes-list">
+			<NotesList v-if="groupedNotes.length === 1"
+				:notes="groupedNotes[0].notes"
 				@note-deleted="$emit('note-deleted', $event)"
 			/>
-		</template>
-		<!--<AppNavigationItem
-			v-if="displayedNotes.length != filteredNotes.length"
-			v-observe-visibility="onEndOfNotes"
-			:title="t('notes', 'Loading …')"
-			:loading="true"
-		/> !-->
+			<template v-else v-for="(group, idx) in groupedNotes">
+				<AppNavigationCaption v-if="group.category && category!==group.category"
+					:key="group.category"
+					icon="icon-files"
+					:title="categoryToLabel(group.category)"
+				/>
+				<AppNavigationCaption v-if="group.timeslot"
+					:key="group.timeslot"
+					:title="group.timeslot"
+				/>
+				<NotesList
+					:key=idx
+					:notes="group.notes"
+					@note-deleted="$emit('note-deleted', $event)"
+				/>
+			</template>
+			<!--<AppNavigationItem
+				v-if="displayedNotes.length != filteredNotes.length"
+				v-observe-visibility="onEndOfNotes"
+				:title="t('notes', 'Loading …')"
+				:loading="true"
+			/> !-->
+		</div>
 	</div>
 </template>
 
@@ -160,6 +163,18 @@ export default {
 <style scoped>
 	.notes-view {
 		min-width: 300px;
-		padding-top: 44px;
+		position: sticky;
+		position: -webkit-sticky;
+		height: calc(100vh - 50px);
+		top: 50px;
+		border-right: 1px solid var(--color-border);
+	}
+
+	.spacer{
+		height: 50px;
+	}
+	.notes-list {
+		overflow-y: auto;
+		height: calc(100vh - 100px);
 	}
 </style>

From 98d6dc19436641fcf520637d88bafb2d98139852 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sun, 27 Mar 2022 22:21:22 +0200
Subject: [PATCH 08/19] Edit mode is active for new notes, fixed bugs in
 highlighting new notes as active and breadcrumbs

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/Note.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index e17128aaa..fef6c21b3 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -189,7 +189,7 @@ export default {
 			return 'icon-delete' + (this.loadingDelete ? ' loading' : '')
 		},
 		categories() {
-			return this.note.category?.split('/') || []
+			return this.note.category ? this.note.category.split('/') : []
 		}
 	},
 
@@ -208,7 +208,6 @@ export default {
 	},
 
 	created() {
-		this.$store.commit('setSelectedNote', parseInt(this.noteId))
 		this.fetchData()
 		document.addEventListener('webkitfullscreenchange', this.onDetectFullscreen)
 		document.addEventListener('mozfullscreenchange', this.onDetectFullscreen)
@@ -229,6 +228,8 @@ export default {
 
 	methods: {
 		fetchData() {
+			this.$store.commit('setSelectedNote', parseInt(this.noteId))
+
 			this.etag = null
 			this.stopRefreshTimer()
 
@@ -238,7 +239,7 @@ export default {
 
 			this.onUpdateTitle(this.title)
 			this.loading = true
-			this.preview = store.state.app.settings.noteMode === 'preview'
+			this.preview = store.state.app.settings.noteMode === 'preview' && !this.isNewNote
 			fetchNote(parseInt(this.noteId))
 				.then((note) => {
 					if (note.error) {

From 0843c54ab80d1f2832a9d49de438bcee12852a3f Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Sun, 27 Mar 2022 23:16:04 +0200
Subject: [PATCH 09/19] Improved note renaming

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/Sidebar.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index c8e49f879..fa026c8ea 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -104,7 +104,7 @@ export default {
 			},
 			categoryInput: null,
 			titleEditableInternal: false,
-			newTtitle: '',
+			newTitle: '',
 		}
 	},
 
@@ -117,11 +117,18 @@ export default {
 				return this.titleEditableInternal && !this.note.readonly
 			},
 			set(newValue) {
+				if (newValue) {
+					this.newTitle = this.title
+				}
 				this.titleEditableInternal = newValue
 			}
 		},
 		title() {
-			return this.note?.title || ''
+			if (!this.titleEditable) {
+				return this.note?.title || ''
+			} else {
+				return this.newTitle || ''
+			}
 		},
 		category() {
 			return this.note?.category || ''
@@ -198,10 +205,8 @@ export default {
 					})
 					.finally(() => {
 						this.loading.title = false
-						this.newTitle = this.title
 					})
 			}
-			this.newTitle = this.title
 		},
 
 		onSaveCategory(category) {

From a6b2a58c9312c373973e04e361d98a8c8f0ead1a Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Mon, 28 Mar 2022 08:45:43 +0200
Subject: [PATCH 10/19] Added favorite option to note action menu, fixed lint
 warnings

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/Note.vue      | 71 +++++++++++++++++++++++++-----------
 src/components/NoteItem.vue  | 10 ++---
 src/components/NotesView.vue |  7 ++--
 src/components/Sidebar.vue   |  4 +-
 src/store/notes.js           |  4 +-
 5 files changed, 63 insertions(+), 33 deletions(-)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index fef6c21b3..9b491bd85 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,13 +1,13 @@
 <template>
-	<AppContent :class="{ loading: loading || isManualSave, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen }">
-		<div v-if="!loading && note && !note.error && !note.deleting"
+	<AppContent :class="{ loading: loading.note || isManualSave, 'icon-error': !loading.note && (!note || note.error), 'sidebar-open': sidebarOpen }">
+		<div v-if="!loading.note && note && !note.error && !note.deleting"
 			id="note-container"
 			class="note-container"
 			:class="{ fullscreen: fullscreen }"
 		>
 			<Breadcrumbs class="breadcrumbs">
 				<Breadcrumb title="Home" />
-				<Breadcrumb :title="category" :key="category" v-for="category of categories" />
+				<Breadcrumb v-for="category of categories" :key="category" :title="category" />
 				<Breadcrumb :title="title" />
 			</Breadcrumbs>
 
@@ -46,9 +46,17 @@
 				/>
 			</div>
 			<span class="action-buttons">
-				<Actions :open.sync="actionsOpen" container=".action-buttons" menu-align="right">
+				<Actions container=".action-buttons" :primary="true">
+					<ActionButton
+						:icon="actionFavoriteIcon"
+						:close-after-click="true"
+						@click="onToggleFavorite"
+					>
+						{{ actionFavoriteText }}
+					</ActionButton>
 					<ActionButton v-show="!sidebarOpen && !fullscreen"
 						icon="icon-details"
+						:close-after-click="true"
 						@click="onToggleSidebar"
 					>
 						{{ t('notes', 'Details') }}
@@ -56,6 +64,7 @@
 					<ActionButton
 						v-tooltip.left="t('notes', 'CTRL + /')"
 						:icon="preview ? 'icon-rename' : 'icon-toggle'"
+						:close-after-click="true"
 						@click="onTogglePreview"
 					>
 						{{ preview ? t('notes', 'Edit') : t('notes', 'Preview') }}
@@ -63,6 +72,7 @@
 					<ActionButton
 						icon="icon-fullscreen"
 						:class="{ active: fullscreen }"
+						:close-after-click="true"
 						@click="onToggleDistractionFree"
 					>
 						{{ fullscreen ? t('notes', 'Exit full screen') : t('notes', 'Full screen') }}
@@ -70,7 +80,7 @@
 					<ActionButton
 						:disabled="note.readonly"
 						:icon="actionDeleteIcon"
-						:closeAfterClick="true"
+						:close-after-click="true"
 						@click="onDeleteNote"
 					>
 						{{ t('notes', 'Delete note') }}
@@ -108,7 +118,7 @@ import {
 	Tooltip,
 	isMobile,
 	Breadcrumbs,
-	Breadcrumb
+	Breadcrumb,
 } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -117,7 +127,7 @@ import SyncAlertIcon from 'vue-material-design-icons/SyncAlert'
 import PencilOffIcon from 'vue-material-design-icons/PencilOff'
 
 import { config } from '../config'
-import { fetchNote, refreshNote, deleteNote, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService'
+import { fetchNote, refreshNote, deleteNote, setFavorite, saveNoteManually, queueCommand, conflictSolutionLocal, conflictSolutionRemote } from '../NotesService'
 import { routeIsNewNote } from '../Util'
 import TheEditor from './EditorEasyMDE'
 import ThePreview from './EditorMarkdownIt'
@@ -156,11 +166,13 @@ export default {
 
 	data() {
 		return {
-			loading: false,
-			loadingDelete: false,
+			loading: {
+				note: false,
+				delete: false,
+				favorite: false,
+			},
 			fullscreen: false,
 			preview: false,
-			actionsOpen: false,
 			autosaveTimer: null,
 			autotitleTimer: null,
 			refreshTimer: null,
@@ -186,11 +198,21 @@ export default {
 			return store.state.app.sidebarOpen
 		},
 		actionDeleteIcon() {
-			return 'icon-delete' + (this.loadingDelete ? ' loading' : '')
+			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
 		},
 		categories() {
 			return this.note.category ? this.note.category.split('/') : []
-		}
+		},
+		actionFavoriteText() {
+			return this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites')
+		},
+		actionFavoriteIcon() {
+			let icon = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
+			if (this.loading.favorite) {
+				icon += ' loading'
+			}
+			return icon
+		},
 	},
 
 	watch: {
@@ -238,7 +260,7 @@ export default {
 			}
 
 			this.onUpdateTitle(this.title)
-			this.loading = true
+			this.loading.note = true
 			this.preview = store.state.app.settings.noteMode === 'preview' && !this.isNewNote
 			fetchNote(parseInt(this.noteId))
 				.then((note) => {
@@ -251,7 +273,7 @@ export default {
 					// note not found
 				})
 				.then(() => {
-					this.loading = false
+					this.loading.note = false
 				})
 		},
 
@@ -266,7 +288,6 @@ export default {
 
 		onTogglePreview() {
 			this.preview = !this.preview
-			this.actionsOpen = false
 		},
 
 		onDetectFullscreen() {
@@ -301,12 +322,10 @@ export default {
 			} else {
 				launchIntoFullscreen(document.getElementById('note-container'))
 			}
-			this.actionsOpen = false
 		},
 
 		onToggleSidebar() {
 			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
-			this.actionsOpen = false
 		},
 
 		onVisibilityChange() {
@@ -420,7 +439,7 @@ export default {
 		},
 
 		async onDeleteNote() {
-			this.loadingDelete = true
+			this.loading.delete = true
 			try {
 				const note = await fetchNote(this.note.id)
 				if (note.errorType) {
@@ -428,13 +447,24 @@ export default {
 				}
 				await deleteNote(this.note.id, () => {
 					this.$emit('note-deleted', note)
-					this.loadingDelete = false
+					this.loading.delete = false
 				})
 			} catch (e) {
 				showError(this.t('notes', 'Error during preparing note for deletion.'))
-				this.loadingDelete = false
+				this.loading.delete = false
 			}
 		},
+
+		onToggleFavorite() {
+			this.loading.favorite = true
+			setFavorite(this.note.id, !this.note.favorite)
+				.catch(() => {
+				})
+				.then(() => {
+					this.loading.favorite = false
+				})
+		},
+
 	},
 }
 </script>
@@ -537,5 +567,4 @@ export default {
 	z-index: 1;
 	background-color: var(--color-main-background);
 }
-
 </style>
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index 5b3d70c19..ca9c47ddf 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -2,14 +2,14 @@
 	<ListItem
 		:title="title"
 		:active="isSelected"
-		@click="onNoteSelected(note.id)"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
-		:forceDisplayActions="true"
+		:force-display-actions="true"
+		@click="onNoteSelected(note.id)"
 	>
 		<template #actions>
 			<ActionButton
 				:icon="actionFavoriteIcon"
-				:closeAfterClick="true"
+				:close-after-click="true"
 				@click="onToggleFavorite"
 			>
 				{{ actionFavoriteText }}
@@ -17,7 +17,7 @@
 			<ActionButton
 				:disabled="note.readonly"
 				:icon="actionDeleteIcon"
-				:closeAfterClick="true"
+				:close-after-click="true"
 				@click="onDeleteNote"
 			>
 				{{ t('notes', 'Delete note') }}
@@ -45,7 +45,7 @@ export default {
 		note: {
 			type: Object,
 			required: true,
-		}
+		},
 	},
 
 	data() {
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index b5479ca27..b4010bc0e 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -6,7 +6,7 @@
 				:notes="groupedNotes[0].notes"
 				@note-deleted="$emit('note-deleted', $event)"
 			/>
-			<template v-else v-for="(group, idx) in groupedNotes">
+			<template v-for="(group, idx) in groupedNotes" v-else>
 				<AppNavigationCaption v-if="group.category && category!==group.category"
 					:key="group.category"
 					icon="icon-files"
@@ -17,7 +17,7 @@
 					:title="group.timeslot"
 				/>
 				<NotesList
-					:key=idx
+					:key="idx"
 					:notes="group.notes"
 					@note-deleted="$emit('note-deleted', $event)"
 				/>
@@ -156,7 +156,7 @@ export default {
 
 		onCategorySelected(category) {
 			store.commit('setSelectedCategory', category)
-		}
+		},
 	},
 }
 </script>
@@ -173,6 +173,7 @@ export default {
 	.spacer{
 		height: 50px;
 	}
+
 	.notes-list {
 		overflow-y: auto;
 		height: calc(100vh - 100px);
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index fa026c8ea..24f279bc1 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -121,7 +121,7 @@ export default {
 					this.newTitle = this.title
 				}
 				this.titleEditableInternal = newValue
-			}
+			},
 		},
 		title() {
 			if (!this.titleEditable) {
@@ -165,7 +165,7 @@ export default {
 		},
 		titleTooltip() {
 			return t('notes', 'Click to edit title')
-		}
+		},
 	},
 
 	methods: {
diff --git a/src/store/notes.js b/src/store/notes.js
index 875bac348..6cb155364 100644
--- a/src/store/notes.js
+++ b/src/store/notes.js
@@ -108,7 +108,7 @@ const getters = {
 
 	getSelectedNote: (state) => () => {
 		return state.selectedNote
-	}
+	},
 }
 
 const mutations = {
@@ -157,7 +157,7 @@ const mutations = {
 
 	setSelectedNote(state, note) {
 		state.selectedNote = note
-	}
+	},
 }
 
 const actions = {

From 8911153841e77da12e19f690fa7f5552d6abc27f Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Mon, 28 Mar 2022 22:55:26 +0200
Subject: [PATCH 11/19] Added icons and category information in notes list

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/App.vue                  |   2 +-
 src/components/Note.vue      |  13 ++--
 src/components/NoteItem.vue  | 121 +++++++++--------------------------
 src/components/NotesList.vue |   1 -
 src/components/NotesView.vue |   2 -
 5 files changed, 34 insertions(+), 105 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0c5134cd4..d3e3eade7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,7 @@
 			</div>
 		</AppContent>
 
-		<router-view v-if="!error" name="notes" @note-deleted="onNoteDeleted" />
+		<router-view v-if="!error" name="notes" />
 
 		<router-view v-if="!error" @note-deleted="onNoteDeleted" />
 
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 9b491bd85..5fa86f29e 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -33,9 +33,9 @@
 				</div>
 			</Modal>
 			<div class="note-editor">
-				<div v-show="!note.content" class="placeholder">
+				<EmptyContent v-if="!note.content" icon="icon-edit">
 					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
-				</div>
+				</EmptyContent>
 				<ThePreview v-if="preview" :value="note.content" :noteid="noteId" />
 				<TheEditor v-else
 					:value="note.content"
@@ -119,6 +119,7 @@ import {
 	isMobile,
 	Breadcrumbs,
 	Breadcrumb,
+	EmptyContent,
 } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
@@ -149,6 +150,7 @@ export default {
 		ThePreview,
 		Breadcrumbs,
 		Breadcrumb,
+		EmptyContent,
 	},
 
 	directives: {
@@ -510,13 +512,6 @@ export default {
 	margin: 0 auto;
 }
 
-/* placeholder */
-.placeholder {
-	position: absolute;
-	padding: 1em;
-	opacity: 0.5;
-}
-
 /* main editor button */
 .action-buttons {
 	position: fixed;
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index ca9c47ddf..b6d5f659b 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -3,42 +3,46 @@
 		:title="title"
 		:active="isSelected"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
-		:force-display-actions="true"
 		@click="onNoteSelected(note.id)"
 	>
-		<template #actions>
-			<ActionButton
-				:icon="actionFavoriteIcon"
-				:close-after-click="true"
-				@click="onToggleFavorite"
-			>
-				{{ actionFavoriteText }}
-			</ActionButton>
-			<ActionButton
-				:disabled="note.readonly"
-				:icon="actionDeleteIcon"
-				:close-after-click="true"
-				@click="onDeleteNote"
-			>
-				{{ t('notes', 'Delete note') }}
-			</ActionButton>
+		<template #subtitle>
+			{{ categoryTitle }}
+		</template>
+		<template #icon>
+			<AlertOctagonIcon v-if="note.error"
+				slot="icon"
+				:size="20"
+				fillColor="#E9322D"
+			/>
+			<StarIcon v-else-if="note.favorite"
+				slot="icon"
+				:size="20"
+				fill-color="#FC0"
+			/>
+			<NoteTextOutlineIcon v-else
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-text-lighter)"
+			/>
 		</template>
 	</ListItem>
 </template>
 
 <script>
-import { ActionButton, ListItem } from '@nextcloud/vue'
-
-import { showError } from '@nextcloud/dialogs'
-import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService'
-import { routeIsNewNote } from '../Util'
+import { ListItem } from '@nextcloud/vue'
+import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'
+import StarIcon from 'vue-material-design-icons/Star'
+import NoteTextOutlineIcon from 'vue-material-design-icons/NoteTextOutline'
+import { categoryLabel } from '../Util'
 
 export default {
 	name: 'NoteItem',
 
 	components: {
-		ActionButton,
 		ListItem,
+		AlertOctagonIcon,
+		StarIcon,
+		NoteTextOutlineIcon,
 	},
 
 	props: {
@@ -52,8 +56,6 @@ export default {
 		return {
 			loading: {
 				note: false,
-				favorite: false,
-				delete: false,
 			},
 		}
 	},
@@ -63,84 +65,19 @@ export default {
 			return this.$store.getters.getSelectedNote() === this.note.id
 		},
 
-		icon() {
-			let icon = ''
-			if (this.note.error) {
-				icon = 'nav-icon icon-error-color'
-			} else if (this.note.favorite) {
-				icon = 'nav-icon icon-starred'
-			}
-			return icon
-		},
-
 		title() {
 			return this.note.title + (this.note.unsaved ? ' *' : '')
 		},
 
-		actionFavoriteText() {
-			return this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites')
-		},
-
-		actionFavoriteIcon() {
-			let icon = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
-			if (this.loading.favorite) {
-				icon += ' loading'
-			}
-			return icon
-		},
-
-		actionDeleteIcon() {
-			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
+		categoryTitle() {
+			return categoryLabel(this.note.category)
 		},
 	},
 
 	methods: {
-		onToggleFavorite() {
-			this.loading.favorite = true
-			setFavorite(this.note.id, !this.note.favorite)
-				.catch(() => {
-				})
-				.then(() => {
-					this.loading.favorite = false
-				})
-		},
-
 		onNoteSelected(noteId) {
 			this.$store.commit('setSelectedNote', noteId)
 		},
-
-		onRename(newTitle) {
-			this.loading.note = true
-			setTitle(this.note.id, newTitle)
-				.catch(() => {
-				})
-				.finally(() => {
-					this.loading.note = false
-				})
-			if (routeIsNewNote(this.$route)) {
-				this.$router.replace({
-					name: 'note',
-					params: { noteId: this.note.id.toString() },
-				})
-			}
-		},
-
-		async onDeleteNote() {
-			this.loading.delete = true
-			try {
-				const note = await fetchNote(this.note.id)
-				if (note.errorType) {
-					throw new Error('Note has errors')
-				}
-				await deleteNote(this.note.id, () => {
-					this.$emit('note-deleted', note)
-					this.loading.delete = false
-				})
-			} catch (e) {
-				showError(this.t('notes', 'Error during preparing note for deletion.'))
-				this.loading.delete = false
-			}
-		},
 	},
 }
 </script>
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
index 2725e7200..48ed83509 100644
--- a/src/components/NotesList.vue
+++ b/src/components/NotesList.vue
@@ -3,7 +3,6 @@
 		<NoteItem v-for="note in notes"
 			:key="note.id"
 			:note="note"
-			@note-deleted="$emit('note-deleted', $event)"
 		/>
 	</ul>
 </template>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index b4010bc0e..0489c90dc 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -4,7 +4,6 @@
 		<div class="notes-list">
 			<NotesList v-if="groupedNotes.length === 1"
 				:notes="groupedNotes[0].notes"
-				@note-deleted="$emit('note-deleted', $event)"
 			/>
 			<template v-for="(group, idx) in groupedNotes" v-else>
 				<AppNavigationCaption v-if="group.category && category!==group.category"
@@ -19,7 +18,6 @@
 				<NotesList
 					:key="idx"
 					:notes="group.notes"
-					@note-deleted="$emit('note-deleted', $event)"
 				/>
 			</template>
 			<!--<AppNavigationItem

From 359b3da3d1658eab6ed47e567dae895b422bd2d2 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Tue, 29 Mar 2022 21:54:25 +0200
Subject: [PATCH 12/19] Replaced AppNavigationCaption usage

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/NoteItem.vue   |  8 +++----
 src/components/NotesGroup.vue | 30 +++++++++++++++++++++++++
 src/components/NotesView.vue  | 42 ++++++++++++++++++++++++++---------
 3 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 src/components/NotesGroup.vue

diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index b6d5f659b..e11de07a7 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -12,14 +12,14 @@
 			<AlertOctagonIcon v-if="note.error"
 				slot="icon"
 				:size="20"
-				fillColor="#E9322D"
+				fill-color="#E9322D"
 			/>
 			<StarIcon v-else-if="note.favorite"
 				slot="icon"
 				:size="20"
 				fill-color="#FC0"
 			/>
-			<NoteTextOutlineIcon v-else
+			<FileDocumentOutlineIcon v-else
 				slot="icon"
 				:size="20"
 				fill-color="var(--color-text-lighter)"
@@ -32,7 +32,7 @@
 import { ListItem } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon'
 import StarIcon from 'vue-material-design-icons/Star'
-import NoteTextOutlineIcon from 'vue-material-design-icons/NoteTextOutline'
+import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline'
 import { categoryLabel } from '../Util'
 
 export default {
@@ -42,7 +42,7 @@ export default {
 		ListItem,
 		AlertOctagonIcon,
 		StarIcon,
-		NoteTextOutlineIcon,
+		FileDocumentOutlineIcon,
 	},
 
 	props: {
diff --git a/src/components/NotesGroup.vue b/src/components/NotesGroup.vue
new file mode 100644
index 000000000..9af0b8375
--- /dev/null
+++ b/src/components/NotesGroup.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="title">
+		{{ title }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'NotesGroup',
+
+	components: {
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.title {
+		color: var(--color-primary-light-text);
+		font-weight: bold;
+		font-size: 1.2em;
+		padding-left: 10px;
+	}
+</style>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 0489c90dc..6ef3eff15 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -6,12 +6,11 @@
 				:notes="groupedNotes[0].notes"
 			/>
 			<template v-for="(group, idx) in groupedNotes" v-else>
-				<AppNavigationCaption v-if="group.category && category!==group.category"
+				<NotesGroup v-if="group.category && category!==group.category"
 					:key="group.category"
-					icon="icon-files"
 					:title="categoryToLabel(group.category)"
 				/>
-				<AppNavigationCaption v-if="group.timeslot"
+				<NotesGroup v-if="group.timeslot"
 					:key="group.timeslot"
 					:title="group.timeslot"
 				/>
@@ -20,21 +19,22 @@
 					:notes="group.notes"
 				/>
 			</template>
-			<!--<AppNavigationItem
+			<div
 				v-if="displayedNotes.length != filteredNotes.length"
 				v-observe-visibility="onEndOfNotes"
-				:title="t('notes', 'Loading …')"
-				:loading="true"
-			/> !-->
+				class="loading-label"
+			>
+				{{ t('notes', 'Loading …') }}
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-
-import { AppNavigationCaption } from '@nextcloud/vue'
+/* eslint-disable no-console */
 import { categoryLabel } from '../Util'
 import NotesList from './NotesList'
+import NotesGroup from './NotesGroup'
 import store from '../store'
 
 import { ObserveVisibility } from 'vue-observe-visibility'
@@ -43,8 +43,8 @@ export default {
 	name: 'NotesView',
 
 	components: {
-		AppNavigationCaption,
 		NotesList,
+		NotesGroup,
 	},
 
 	directives: {
@@ -176,4 +176,26 @@ export default {
 		overflow-y: auto;
 		height: calc(100vh - 100px);
 	}
+
+	.loading-label {
+		color: var(--color-text-lighter);
+		text-align: center;
+	}
+
+	.loading-label::before {
+		content: ' ';
+		height: 16px;
+		width: 16px;
+		display: inline-block;
+		border-radius: 100%;
+		-webkit-animation: rotate 0.8s infinite linear;
+		animation: rotate 0.8s infinite linear;
+		-webkit-transform-origin: center;
+		-ms-transform-origin: center;
+		transform-origin: center;
+		border: 2px solid var(--color-loading-light);
+		border-top-color: var(--color-loading-dark);
+		vertical-align: top;
+		margin-right: 5px;
+	}
 </style>

From 3859c007d63fe58a299ba63cce624e1b49091203 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Tue, 29 Mar 2022 21:57:42 +0200
Subject: [PATCH 13/19] NotesView can change with; UI fixes

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 l10n/de.js                                    |  2 +-
 l10n/de.json                                  |  2 +-
 l10n/de_DE.js                                 |  2 +-
 l10n/de_DE.json                               |  2 +-
 src/components/Note.vue                       | 10 ++--
 .../{NotesGroup.vue => NotesCaption.vue}      |  5 +-
 src/components/NotesView.vue                  | 49 +++++++++++++++----
 7 files changed, 51 insertions(+), 21 deletions(-)
 rename src/components/{NotesGroup.vue => NotesCaption.vue} (78%)

diff --git a/l10n/de.js b/l10n/de.js
index 8b72b7b15..ee17ae843 100644
--- a/l10n/de.js
+++ b/l10n/de.js
@@ -54,7 +54,7 @@ OC.L10N.register(
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Du kannst sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",
diff --git a/l10n/de.json b/l10n/de.json
index 767d825de..c829ddc2a 100644
--- a/l10n/de.json
+++ b/l10n/de.json
@@ -52,7 +52,7 @@
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Du kannst sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",
diff --git a/l10n/de_DE.js b/l10n/de_DE.js
index 44162d791..b55d3d676 100644
--- a/l10n/de_DE.js
+++ b/l10n/de_DE.js
@@ -57,7 +57,7 @@ OC.L10N.register(
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Sie können sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",
diff --git a/l10n/de_DE.json b/l10n/de_DE.json
index 78a57de70..abd7a69bf 100644
--- a/l10n/de_DE.json
+++ b/l10n/de_DE.json
@@ -55,7 +55,7 @@
     "Full screen" : "Vollbild",
     "Note is read-only. You cannot change it." : "Notiz ist schreibgeschützt. Sie können sie nicht ändern.",
     "Save failed. Click to retry." : "Speichern fehlgeschlagen. Klicken um es erneut zu versuchen.",
-    "Update conflict. Click for resolving manually." : "Aktualisierungskonflickt. Bitte klicken um den Konflikt manuell zu lösen.",
+    "Update conflict. Click for resolving manually." : "Aktualisierungskonflikt. Bitte klicken um den Konflikt manuell zu lösen.",
     "Error from Nextcloud server: {msg}" : "Fehler vom Nextcloud-Server: {msg}",
     "Set category" : "Kategorie ändern",
     "Category" : "Kategorie",
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 5fa86f29e..3d16ba4fc 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -45,8 +45,8 @@
 					@input="onEdit"
 				/>
 			</div>
-			<span class="action-buttons">
-				<Actions container=".action-buttons" :primary="true">
+			<div class="action-buttons">
+				<Actions :primary="true">
 					<ActionButton
 						:icon="actionFavoriteIcon"
 						:close-after-click="true"
@@ -104,7 +104,7 @@
 						{{ t('notes', 'Update conflict. Click for resolving manually.') }}
 					</ActionButton>
 				</Actions>
-			</span>
+			</div>
 		</div>
 	</AppContent>
 </template>
@@ -531,10 +531,6 @@ export default {
 	top: 0px;
 }
 
-.action-buttons button {
-	padding: 15px;
-}
-
 /* Conflict Modal */
 .conflict-modal {
 	width: 70vw;
diff --git a/src/components/NotesGroup.vue b/src/components/NotesCaption.vue
similarity index 78%
rename from src/components/NotesGroup.vue
rename to src/components/NotesCaption.vue
index 9af0b8375..c87bfdeab 100644
--- a/src/components/NotesGroup.vue
+++ b/src/components/NotesCaption.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-	name: 'NotesGroup',
+	name: 'NotesCaption',
 
 	components: {
 	},
@@ -26,5 +26,8 @@ export default {
 		font-weight: bold;
 		font-size: 1.2em;
 		padding-left: 10px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
 	}
 </style>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 6ef3eff15..7db51efe9 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -1,16 +1,23 @@
 <template>
-	<div class="notes-view">
-		<div class="spacer" />
+	<div class="notes-view" :class="{ collapsed: collapsed }">
+		<div class="header">
+			<Actions :class="{ flipped: collapsed }">
+				<ActionButton @click="collapsed=!collapsed">
+					<ArrowLeftThickIcon slot="icon" :size="24" fill-color="var(--color-main-text)" />
+					{{ t('notes', 'Note is read-only. You cannot change it.') }}
+				</ActionButton>
+			</Actions>
+		</div>
 		<div class="notes-list">
 			<NotesList v-if="groupedNotes.length === 1"
 				:notes="groupedNotes[0].notes"
 			/>
 			<template v-for="(group, idx) in groupedNotes" v-else>
-				<NotesGroup v-if="group.category && category!==group.category"
+				<NotesCaption v-if="group.category && category!==group.category"
 					:key="group.category"
 					:title="categoryToLabel(group.category)"
 				/>
-				<NotesGroup v-if="group.timeslot"
+				<NotesCaption v-if="group.timeslot"
 					:key="group.timeslot"
 					:title="group.timeslot"
 				/>
@@ -31,10 +38,15 @@
 </template>
 
 <script>
-/* eslint-disable no-console */
+
+import {
+	Actions,
+	ActionButton,
+} from '@nextcloud/vue'
+import ArrowLeftThickIcon from 'vue-material-design-icons/ArrowLeftThick'
 import { categoryLabel } from '../Util'
 import NotesList from './NotesList'
-import NotesGroup from './NotesGroup'
+import NotesCaption from './NotesCaption'
 import store from '../store'
 
 import { ObserveVisibility } from 'vue-observe-visibility'
@@ -44,7 +56,10 @@ export default {
 
 	components: {
 		NotesList,
-		NotesGroup,
+		NotesCaption,
+		Actions,
+		ActionButton,
+		ArrowLeftThickIcon,
 	},
 
 	directives: {
@@ -57,6 +72,7 @@ export default {
 			monthFormat: new Intl.DateTimeFormat(OC.getLanguage(), { month: 'long', year: 'numeric' }),
 			lastYear: new Date(new Date().getFullYear() - 1, 0),
 			showFirstNotesOnly: true,
+			collapsed: false,
 		}
 	},
 
@@ -160,16 +176,31 @@ export default {
 </script>
 <style scoped>
 	.notes-view {
-		min-width: 300px;
+		width: 300px;
 		position: sticky;
 		position: -webkit-sticky;
 		height: calc(100vh - 50px);
 		top: 50px;
 		border-right: 1px solid var(--color-border);
+		flex-grow: 0;
+		flex-shrink: 0;
+		transition-duration: var(--animation-quick);
+		transition-property: width;
+	}
+
+	.notes-view.collapsed {
+		width: 120px;
 	}
 
-	.spacer{
+	.header {
 		height: 50px;
+		text-align: right;
+		padding-right: 2px;
+		padding-top: 2px;
+	}
+
+	.flipped {
+		transform: scaleX(-1);
 	}
 
 	.notes-list {

From 0eb460570f535604e50da29aad34b1464cf2bdc2 Mon Sep 17 00:00:00 2001
From: joachimeichborn <jeichborn@gmail.com>
Date: Wed, 30 Mar 2022 21:29:31 +0200
Subject: [PATCH 14/19] Minor UI improvements

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/NotesCaption.vue | 3 ++-
 src/components/NotesView.vue    | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/NotesCaption.vue b/src/components/NotesCaption.vue
index c87bfdeab..bd5e95301 100644
--- a/src/components/NotesCaption.vue
+++ b/src/components/NotesCaption.vue
@@ -24,8 +24,9 @@ export default {
 	.title {
 		color: var(--color-primary-light-text);
 		font-weight: bold;
-		font-size: 1.2em;
 		padding-left: 10px;
+		padding-top: 5px;
+		padding-bottom: 5px;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 7db51efe9..5ea688743 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="notes-view" :class="{ collapsed: collapsed }">
 		<div class="header">
-			<Actions :class="{ flipped: collapsed }">
+			<Actions :class="{ flipped: collapsed }" id="shrinkButton">
 				<ActionButton @click="collapsed=!collapsed">
 					<ArrowLeftThickIcon slot="icon" :size="24" fill-color="var(--color-main-text)" />
 					{{ t('notes', 'Note is read-only. You cannot change it.') }}
@@ -229,4 +229,10 @@ export default {
 		vertical-align: top;
 		margin-right: 5px;
 	}
+
+	@media (min-width: 900px) {
+	#shrinkButton {
+		display: none;
+	}
+}
 </style>

From f7fad2180237eba0c3fe7c0f438b0810c025d59e Mon Sep 17 00:00:00 2001
From: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
Date: Sat, 2 Apr 2022 00:45:01 +0200
Subject: [PATCH 15/19] Lint fixes

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/NotesView.vue | 100 +++++++++++++++++------------------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 5ea688743..5aa67169c 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="notes-view" :class="{ collapsed: collapsed }">
 		<div class="header">
-			<Actions :class="{ flipped: collapsed }" id="shrinkButton">
+			<Actions id="shrinkButton" :class="{ flipped: collapsed }">
 				<ActionButton @click="collapsed=!collapsed">
 					<ArrowLeftThickIcon slot="icon" :size="24" fill-color="var(--color-main-text)" />
 					{{ t('notes', 'Note is read-only. You cannot change it.') }}
@@ -175,62 +175,62 @@ export default {
 }
 </script>
 <style scoped>
-	.notes-view {
-		width: 300px;
-		position: sticky;
-		position: -webkit-sticky;
-		height: calc(100vh - 50px);
-		top: 50px;
-		border-right: 1px solid var(--color-border);
-		flex-grow: 0;
-		flex-shrink: 0;
-		transition-duration: var(--animation-quick);
-		transition-property: width;
-	}
+.notes-view {
+	width: 300px;
+	position: sticky;
+	position: -webkit-sticky;
+	height: calc(100vh - 50px);
+	top: 50px;
+	border-right: 1px solid var(--color-border);
+	flex-grow: 0;
+	flex-shrink: 0;
+	transition-duration: var(--animation-quick);
+	transition-property: width;
+}
 
-	.notes-view.collapsed {
-		width: 120px;
-	}
+.notes-view.collapsed {
+	width: 120px;
+}
 
-	.header {
-		height: 50px;
-		text-align: right;
-		padding-right: 2px;
-		padding-top: 2px;
-	}
+.header {
+	height: 50px;
+	text-align: right;
+	padding-right: 2px;
+	padding-top: 2px;
+}
 
-	.flipped {
-		transform: scaleX(-1);
-	}
+.flipped {
+	transform: scaleX(-1);
+}
 
-	.notes-list {
-		overflow-y: auto;
-		height: calc(100vh - 100px);
-	}
+.notes-list {
+	overflow-y: auto;
+	height: calc(100vh - 100px);
+}
 
-	.loading-label {
-		color: var(--color-text-lighter);
-		text-align: center;
-	}
+.loading-label {
+	color: var(--color-text-lighter);
+	text-align: center;
+}
 
-	.loading-label::before {
-		content: ' ';
-		height: 16px;
-		width: 16px;
-		display: inline-block;
-		border-radius: 100%;
-		-webkit-animation: rotate 0.8s infinite linear;
-		animation: rotate 0.8s infinite linear;
-		-webkit-transform-origin: center;
-		-ms-transform-origin: center;
-		transform-origin: center;
-		border: 2px solid var(--color-loading-light);
-		border-top-color: var(--color-loading-dark);
-		vertical-align: top;
-		margin-right: 5px;
-	}
+.loading-label::before {
+	content: ' ';
+	height: 16px;
+	width: 16px;
+	display: inline-block;
+	border-radius: 100%;
+	-webkit-animation: rotate 0.8s infinite linear;
+	animation: rotate 0.8s infinite linear;
+	-webkit-transform-origin: center;
+	-ms-transform-origin: center;
+	transform-origin: center;
+	border: 2px solid var(--color-loading-light);
+	border-top-color: var(--color-loading-dark);
+	vertical-align: top;
+	margin-right: 5px;
+}
 
-	@media (min-width: 900px) {
+@media (min-width: 900px) {
 	#shrinkButton {
 		display: none;
 	}

From 378555d1c34f3b1befc7db5a07cf56c8ff494847 Mon Sep 17 00:00:00 2001
From: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
Date: Sat, 14 May 2022 12:00:19 +0200
Subject: [PATCH 16/19] Use standard AppConentList functionality to display
 notes list

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/App.vue                       |   5 +-
 src/components/CategoriesList.vue |  11 +--
 src/components/Note.vue           |   2 +-
 src/components/NoteItem.vue       |   2 +-
 src/components/NotesList.vue      |   7 ++
 src/components/NotesView.vue      | 145 ++++++++++++++----------------
 src/router.js                     |   5 +-
 7 files changed, 78 insertions(+), 99 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d3e3eade7..266fe3c60 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,7 @@
 				<p>{{ t('notes', 'Please see Nextcloud server log for details.') }}</p>
 			</div>
 		</AppContent>
-
-		<router-view v-if="!error" name="notes" />
-
-		<router-view v-if="!error" @note-deleted="onNoteDeleted" />
+		<router-view v-else @note-deleted="onNoteDeleted" />
 
 		<router-view name="sidebar" />
 	</Content>
diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index 3ce50cbf3..8bd35f5f3 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -1,5 +1,5 @@
 <template>
-	<Fragment class="app-navigation-noclose separator-below">
+	<Fragment>
 		<AppNavigationItem
 			:title="t('notes', 'All notes')"
 			icon="icon-recent"
@@ -22,8 +22,6 @@
 				{{ category.count }}
 			</AppNavigationCounter>
 		</AppNavigationItem>
-
-		<AppNavigationSpacer class="separator-above" />
 	</Fragment>
 </template>
 
@@ -31,7 +29,6 @@
 import {
 	AppNavigationItem,
 	AppNavigationCounter,
-	AppNavigationSpacer,
 } from '@nextcloud/vue'
 import { Fragment } from 'vue-fragment'
 
@@ -47,7 +44,6 @@ export default {
 		Fragment,
 		AppNavigationItem,
 		AppNavigationCounter,
-		AppNavigationSpacer,
 	},
 
 	computed: {
@@ -75,8 +71,3 @@ export default {
 	},
 }
 </script>
-<style scoped>
-.separator-above {
-	border-top: 1px solid var(--color-border);
-}
-</style>
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 3d16ba4fc..569cbc6df 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -5,7 +5,7 @@
 			class="note-container"
 			:class="{ fullscreen: fullscreen }"
 		>
-			<Breadcrumbs class="breadcrumbs">
+			<Breadcrumbs v-if="!isMobile" class="breadcrumbs">
 				<Breadcrumb title="Home" />
 				<Breadcrumb v-for="category of categories" :key="category" :title="category" />
 				<Breadcrumb :title="title" />
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index e11de07a7..636178271 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -76,7 +76,7 @@ export default {
 
 	methods: {
 		onNoteSelected(noteId) {
-			this.$store.commit('setSelectedNote', noteId)
+			this.$emit('note-selected', noteId)
 		},
 	},
 }
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
index 48ed83509..04ccdc253 100644
--- a/src/components/NotesList.vue
+++ b/src/components/NotesList.vue
@@ -3,6 +3,7 @@
 		<NoteItem v-for="note in notes"
 			:key="note.id"
 			:note="note"
+			@note-selected="onNoteSelected"
 		/>
 	</ul>
 </template>
@@ -23,5 +24,11 @@ export default {
 			required: true,
 		},
 	},
+
+	methods: {
+		onNoteSelected(noteId) {
+			this.$emit('note-selected', noteId)
+		},
+	},
 }
 </script>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 5aa67169c..3893fa725 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -1,53 +1,55 @@
 <template>
-	<div class="notes-view" :class="{ collapsed: collapsed }">
-		<div class="header">
-			<Actions id="shrinkButton" :class="{ flipped: collapsed }">
-				<ActionButton @click="collapsed=!collapsed">
-					<ArrowLeftThickIcon slot="icon" :size="24" fill-color="var(--color-main-text)" />
-					{{ t('notes', 'Note is read-only. You cannot change it.') }}
-				</ActionButton>
-			</Actions>
-		</div>
-		<div class="notes-list">
-			<NotesList v-if="groupedNotes.length === 1"
-				:notes="groupedNotes[0].notes"
-			/>
-			<template v-for="(group, idx) in groupedNotes" v-else>
-				<NotesCaption v-if="group.category && category!==group.category"
-					:key="group.category"
-					:title="categoryToLabel(group.category)"
+	<AppContent pane-config-key="note" :show-details="showNote" @update:showDetails="hideNote">
+		<template slot="list">
+			<AppContentList>
+				<div class="spacer" />
+				<NotesList v-if="groupedNotes.length === 1"
+					:notes="groupedNotes[0].notes"
+					@note-selected="onNoteSelected"
 				/>
-				<NotesCaption v-if="group.timeslot"
-					:key="group.timeslot"
-					:title="group.timeslot"
-				/>
-				<NotesList
-					:key="idx"
-					:notes="group.notes"
-				/>
-			</template>
-			<div
-				v-if="displayedNotes.length != filteredNotes.length"
-				v-observe-visibility="onEndOfNotes"
-				class="loading-label"
-			>
-				{{ t('notes', 'Loading …') }}
-			</div>
-		</div>
-	</div>
+				<template v-for="(group, idx) in groupedNotes" v-else>
+					<NotesCaption v-if="group.category && category!==group.category"
+						:key="group.category"
+						:title="categoryToLabel(group.category)"
+					/>
+					<NotesCaption v-if="group.timeslot"
+						:key="group.timeslot"
+						:title="group.timeslot"
+					/>
+					<NotesList
+						:key="idx"
+						:notes="group.notes"
+						@note-selected="onNoteSelected"
+					/>
+				</template>
+				<div
+					v-if="displayedNotes.length != filteredNotes.length"
+					v-observe-visibility="onEndOfNotes"
+					class="loading-label"
+				>
+					{{ t('notes', 'Loading …') }}
+				</div>
+			</AppContentList>
+		</template>
+
+		<AppContentDetails>
+			<Note v-if="showNote" :note-id="noteId" @note-deleted="onNoteDeleted" />
+		</AppContentDetails>
+	</AppContent>
 </template>
 
 <script>
 
 import {
-	Actions,
-	ActionButton,
+	AppContent,
+	AppContentList,
+	AppContentDetails,
 } from '@nextcloud/vue'
-import ArrowLeftThickIcon from 'vue-material-design-icons/ArrowLeftThick'
 import { categoryLabel } from '../Util'
 import NotesList from './NotesList'
 import NotesCaption from './NotesCaption'
 import store from '../store'
+import Note from './Note'
 
 import { ObserveVisibility } from 'vue-observe-visibility'
 
@@ -55,24 +57,32 @@ export default {
 	name: 'NotesView',
 
 	components: {
+		AppContent,
+		AppContentList,
+		AppContentDetails,
+		Note,
 		NotesList,
 		NotesCaption,
-		Actions,
-		ActionButton,
-		ArrowLeftThickIcon,
 	},
 
 	directives: {
 		'observe-visibility': ObserveVisibility,
 	},
 
+	props: {
+		noteId: {
+			type: String,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			timeslots: [],
 			monthFormat: new Intl.DateTimeFormat(OC.getLanguage(), { month: 'long', year: 'numeric' }),
 			lastYear: new Date(new Date().getFullYear() - 1, 0),
 			showFirstNotesOnly: true,
-			collapsed: false,
+			showNote: true,
 		}
 	},
 
@@ -171,41 +181,24 @@ export default {
 		onCategorySelected(category) {
 			store.commit('setSelectedCategory', category)
 		},
-	},
-}
-</script>
-<style scoped>
-.notes-view {
-	width: 300px;
-	position: sticky;
-	position: -webkit-sticky;
-	height: calc(100vh - 50px);
-	top: 50px;
-	border-right: 1px solid var(--color-border);
-	flex-grow: 0;
-	flex-shrink: 0;
-	transition-duration: var(--animation-quick);
-	transition-property: width;
-}
 
-.notes-view.collapsed {
-	width: 120px;
-}
+		hideNote() {
+			this.showNote = false
+		},
 
-.header {
-	height: 50px;
-	text-align: right;
-	padding-right: 2px;
-	padding-top: 2px;
-}
+		onNoteDeleted(note) {
+			this.$emit('note-deleted', note)
+		},
 
-.flipped {
-	transform: scaleX(-1);
+		onNoteSelected(noteId) {
+			this.showNote = true
+		},
+	},
 }
-
-.notes-list {
-	overflow-y: auto;
-	height: calc(100vh - 100px);
+</script>
+<style scoped>
+.spacer {
+	padding: 16px;
 }
 
 .loading-label {
@@ -229,10 +222,4 @@ export default {
 	vertical-align: top;
 	margin-right: 5px;
 }
-
-@media (min-width: 900px) {
-	#shrinkButton {
-		display: none;
-	}
-}
 </style>
diff --git a/src/router.js b/src/router.js
index 72a28b873..6e22ee3cc 100644
--- a/src/router.js
+++ b/src/router.js
@@ -5,7 +5,6 @@ import { generateUrl } from '@nextcloud/router'
 import Loading from './components/Loading'
 import Welcome from './components/Welcome'
 import NotesView from './components/NotesView'
-import Note from './components/Note'
 import Sidebar from './components/Sidebar'
 
 Vue.use(Router)
@@ -29,12 +28,10 @@ export default new Router({
 			path: '/note/:noteId',
 			name: 'note',
 			components: {
-				notes: NotesView,
-				default: Note,
+				default: NotesView,
 				sidebar: Sidebar,
 			},
 			props: {
-				notes: true,
 				default: true,
 				sidebar: true,
 			},

From b0e945f72097d866d65633a406155f7d00deb7ed Mon Sep 17 00:00:00 2001
From: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
Date: Sat, 14 May 2022 15:18:04 +0200
Subject: [PATCH 17/19] Updated nextcloud/vue library to fix bug with app
 navigation close button

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 package-lock.json | 102 ++++------------------------------------------
 package.json      |   2 +-
 2 files changed, 10 insertions(+), 94 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9f7ad5ae5..665077d1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
 				"@nextcloud/event-bus": "^2.1.1",
 				"@nextcloud/moment": "^1.1.1",
 				"@nextcloud/router": "^2.0.0",
-				"@nextcloud/vue": "^5.1.0",
+				"@nextcloud/vue": "^5.3.1",
 				"@nextcloud/vue-dashboard": "^2.0.1",
 				"diff": "^5.0.0",
 				"easymde": "^2.16.1",
@@ -2012,9 +2012,9 @@
 			}
 		},
 		"node_modules/@nextcloud/vue": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.1.0.tgz",
-			"integrity": "sha512-8VMEtvJVWVkbog15B0jEMQOeo79dScYBI2R14uWI1OvBMH+HWgfw/xZks5n7EsMGGavlfQ5NYLlQBN8pafYECA==",
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.3.1.tgz",
+			"integrity": "sha512-f+OSbcS01s2UqYiLSUufJ8tGe5+SqALj1dysPGJm8pJ+R2zH+Pdl8R13YErwzdAa0nHwyISIp9L9MEOUItixRQ==",
 			"dependencies": {
 				"@nextcloud/auth": "^1.2.3",
 				"@nextcloud/axios": "^1.3.2",
@@ -2035,7 +2035,7 @@
 				"splitpanes": "^2.3.6",
 				"string-length": "^5.0.0",
 				"striptags": "^3.1.1",
-				"style-loader": "^2.0.0",
+				"style-loader": "^3.3.1",
 				"tributejs": "^5.1.3",
 				"v-click-outside": "^3.0.1",
 				"v-tooltip": "^2.0.3",
@@ -2043,7 +2043,6 @@
 				"vue-color": "^2.7.1",
 				"vue-material-design-icons": "^5.0.0",
 				"vue-multiselect": "^2.1.6",
-				"vue-visible": "^1.0.2",
 				"vue2-datepicker": "^3.6.3"
 			},
 			"engines": {
@@ -2262,60 +2261,11 @@
 				"vue": ">2.0.0"
 			}
 		},
-		"node_modules/@nextcloud/vue/node_modules/loader-utils": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-			"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-			"dependencies": {
-				"big.js": "^5.2.2",
-				"emojis-list": "^3.0.0",
-				"json5": "^2.1.2"
-			},
-			"engines": {
-				"node": ">=8.9.0"
-			}
-		},
 		"node_modules/@nextcloud/vue/node_modules/regenerator-runtime": {
 			"version": "0.13.9",
 			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
 			"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
 		},
-		"node_modules/@nextcloud/vue/node_modules/schema-utils": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-			"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-			"dependencies": {
-				"@types/json-schema": "^7.0.8",
-				"ajv": "^6.12.5",
-				"ajv-keywords": "^3.5.2"
-			},
-			"engines": {
-				"node": ">= 10.13.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/webpack"
-			}
-		},
-		"node_modules/@nextcloud/vue/node_modules/style-loader": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-			"integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-			"dependencies": {
-				"loader-utils": "^2.0.0",
-				"schema-utils": "^3.0.0"
-			},
-			"engines": {
-				"node": ">= 10.13.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/webpack"
-			},
-			"peerDependencies": {
-				"webpack": "^4.0.0 || ^5.0.0"
-			}
-		},
 		"node_modules/@nextcloud/webpack-vue-config": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-5.0.0.tgz",
@@ -10483,8 +10433,6 @@
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
 			"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-			"dev": true,
-			"peer": true,
 			"engines": {
 				"node": ">= 12.13.0"
 			},
@@ -13506,9 +13454,9 @@
 			}
 		},
 		"@nextcloud/vue": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.1.0.tgz",
-			"integrity": "sha512-8VMEtvJVWVkbog15B0jEMQOeo79dScYBI2R14uWI1OvBMH+HWgfw/xZks5n7EsMGGavlfQ5NYLlQBN8pafYECA==",
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-5.3.1.tgz",
+			"integrity": "sha512-f+OSbcS01s2UqYiLSUufJ8tGe5+SqALj1dysPGJm8pJ+R2zH+Pdl8R13YErwzdAa0nHwyISIp9L9MEOUItixRQ==",
 			"requires": {
 				"@nextcloud/auth": "^1.2.3",
 				"@nextcloud/axios": "^1.3.2",
@@ -13529,7 +13477,7 @@
 				"splitpanes": "^2.3.6",
 				"string-length": "^5.0.0",
 				"striptags": "^3.1.1",
-				"style-loader": "^2.0.0",
+				"style-loader": "^3.3.1",
 				"tributejs": "^5.1.3",
 				"v-click-outside": "^3.0.1",
 				"v-tooltip": "^2.0.3",
@@ -13537,7 +13485,6 @@
 				"vue-color": "^2.7.1",
 				"vue-material-design-icons": "^5.0.0",
 				"vue-multiselect": "^2.1.6",
-				"vue-visible": "^1.0.2",
 				"vue2-datepicker": "^3.6.3"
 			},
 			"dependencies": {
@@ -13573,39 +13520,10 @@
 						"vue-virtual-scroller": "^1.0.10"
 					}
 				},
-				"loader-utils": {
-					"version": "2.0.2",
-					"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-					"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-					"requires": {
-						"big.js": "^5.2.2",
-						"emojis-list": "^3.0.0",
-						"json5": "^2.1.2"
-					}
-				},
 				"regenerator-runtime": {
 					"version": "0.13.9",
 					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
 					"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
-				},
-				"schema-utils": {
-					"version": "3.1.1",
-					"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-					"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-					"requires": {
-						"@types/json-schema": "^7.0.8",
-						"ajv": "^6.12.5",
-						"ajv-keywords": "^3.5.2"
-					}
-				},
-				"style-loader": {
-					"version": "2.0.0",
-					"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-					"integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-					"requires": {
-						"loader-utils": "^2.0.0",
-						"schema-utils": "^3.0.0"
-					}
 				}
 			}
 		},
@@ -20138,8 +20056,6 @@
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
 			"integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-			"dev": true,
-			"peer": true,
 			"requires": {}
 		},
 		"style-search": {
diff --git a/package.json b/package.json
index af65058dd..2dae32b80 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
 		"@nextcloud/event-bus": "^2.1.1",
 		"@nextcloud/moment": "^1.1.1",
 		"@nextcloud/router": "^2.0.0",
-		"@nextcloud/vue": "^5.1.0",
+		"@nextcloud/vue": "^5.3.1",
 		"@nextcloud/vue-dashboard": "^2.0.1",
 		"diff": "^5.0.0",
 		"easymde": "^2.16.1",

From 978c4c31f39e3b5746f0c55449e37d962688b6f0 Mon Sep 17 00:00:00 2001
From: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
Date: Sat, 17 Sep 2022 22:25:11 +0200
Subject: [PATCH 18/19] Fixed disappearing note group captions for long note
 lists

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/NotesCaption.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/NotesCaption.vue b/src/components/NotesCaption.vue
index bd5e95301..85dd3d5b8 100644
--- a/src/components/NotesCaption.vue
+++ b/src/components/NotesCaption.vue
@@ -29,6 +29,5 @@ export default {
 		padding-bottom: 5px;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		overflow: hidden;
 	}
 </style>

From e42c44da7c5a0df923968012fc95a680d2555dd2 Mon Sep 17 00:00:00 2001
From: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
Date: Fri, 27 Jan 2023 23:41:34 +0100
Subject: [PATCH 19/19] Added deep styles to make breadcrumbs appear
 non-interactive

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/components/Note.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index bb1c40856..d758812b4 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -579,4 +579,13 @@ export default {
 	z-index: 1;
 	background-color: var(--color-main-background);
 }
+
+/deep/ .breadcrumbs a:hover {
+	background: none !important;
+}
+
+/deep/ .breadcrumbs *{
+	cursor: default !important;
+}
+
 </style>