From d2b34a481ff3f87d6fc84dbebc88b57366351103 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 01/10] Three column layout

Signed-off-by: Joachim von Eichborn <joachimeichborn@users.noreply.github.com>
---
 src/App.vue                                   |  55 ++----
 ...nCategoriesItem.vue => CategoriesList.vue} |  53 ++----
 src/components/EditorEasyMDE.vue              |   1 +
 src/components/NavigationNoteItem.vue         | 168 ------------------
 src/components/NoteItem.vue                   |  83 +++++++++
 src/components/NotesCaption.vue               |  33 ++++
 src/components/NotesList.vue                  |  34 ++++
 .../{NavigationList.vue => NotesView.vue}     | 168 +++++++++++-------
 src/components/Sidebar.vue                    |  47 ++++-
 src/router.js                                 |   4 +-
 src/store/notes.js                            |  47 +++++
 11 files changed, 376 insertions(+), 317 deletions(-)
 rename src/components/{NavigationCategoriesItem.vue => CategoriesList.vue} (65%)
 delete mode 100644 src/components/NavigationNoteItem.vue
 create mode 100644 src/components/NoteItem.vue
 create mode 100644 src/components/NotesCaption.vue
 create mode 100644 src/components/NotesList.vue
 rename src/components/{NavigationList.vue => NotesView.vue} (54%)

diff --git a/src/App.vue b/src/App.vue
index d3bfc9490..ef16cf08a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,11 +11,8 @@
 			</NcAppNavigationNew>
 
 			<template #list>
-				<NavigationList v-show="!loading.notes"
-					:filtered-notes="filteredNotes"
-					:category="filter.category"
-					@category-selected="onSelectCategory"
-					@note-deleted="onNoteDeleted"
+				<CategoriesList v-show="!loading.notes"
+					v-if="numNotes"
 				/>
 			</template>
 
@@ -39,7 +36,7 @@
 				<p>{{ t('notes', 'Please see Nextcloud server log for details.') }}</p>
 			</div>
 		</NcAppContent>
-		<router-view v-else />
+		<router-view v-else @note-deleted="onNoteDeleted" />
 
 		<router-view name="sidebar" />
 	</NcContent>
@@ -61,8 +58,8 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import CogIcon from 'vue-material-design-icons/Cog.vue'
 
 import AppSettings from './components/AppSettings.vue'
-import NavigationList from './components/NavigationList.vue'
 import EditorHint from './components/Modal/EditorHint.vue'
+import CategoriesList from './components/CategoriesList.vue'
 
 import { config } from './config.js'
 import { fetchNotes, noteExists, createNote, undoDeleteNote } from './NotesService.js'
@@ -74,7 +71,6 @@ export default {
 	components: {
 		AppSettings,
 		EditorHint,
-		NavigationList,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationNew,
@@ -82,6 +78,7 @@ export default {
 		NcContent,
 		CogIcon,
 		PlusIcon,
+		CategoriesList,
 	},
 
 	data() {
@@ -104,37 +101,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()
 		},
 	},
 
@@ -255,7 +231,7 @@ export default {
 				return
 			}
 			this.loading.create = true
-			createNote(this.filter.category)
+			createNote(store.getters.getSelectedCategory())
 				.then(note => {
 					this.routeToNote(note.id, { new: null })
 				})
@@ -266,15 +242,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/NavigationCategoriesItem.vue b/src/components/CategoriesList.vue
similarity index 65%
rename from src/components/NavigationCategoriesItem.vue
rename to src/components/CategoriesList.vue
index ab324a6a1..831fa5e7f 100644
--- a/src/components/NavigationCategoriesItem.vue
+++ b/src/components/CategoriesList.vue
@@ -1,15 +1,9 @@
 <template>
-	<NcAppNavigationItem
-		:title="title"
-		class="app-navigation-noclose separator-below"
-		:class="{ 'category-header': selectedCategory !== null }"
-		:open.sync="open"
-		:allow-collapse="true"
-		@click.prevent.stop="onToggleCategories"
-	>
-		<FolderIcon slot="icon" :size="20" />
+	<Fragment>
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
+			icon="icon-recent"
+			:class="{ active: null === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
 			<HistoryIcon slot="icon" :size="20" />
@@ -21,6 +15,8 @@
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:title="categoryTitle(category.name)"
+			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
+			:class="{ active: category.name === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(category.name)"
 		>
 			<FolderOutlineIcon v-if="category.name === ''" slot="icon" :size="20" />
@@ -29,7 +25,7 @@
 				{{ category.count }}
 			</NcAppNavigationCounter>
 		</NcAppNavigationItem>
-	</NcAppNavigationItem>
+	</Fragment>
 </template>
 
 <script>
@@ -37,6 +33,7 @@ import {
 	NcAppNavigationItem,
 	NcAppNavigationCounter,
 } from '@nextcloud/vue'
+import { Fragment } from 'vue-fragment'
 
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
 import FolderOutlineIcon from 'vue-material-design-icons/FolderOutline.vue'
@@ -47,27 +44,15 @@ import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
 export default {
-	name: 'NavigationCategoriesItem',
+	name: 'CategoriesList',
 
 	components: {
+		Fragment,
+		NcAppNavigationItem,
+		NcAppNavigationCounter,
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
-		NcAppNavigationItem,
-		NcAppNavigationCounter,
-	},
-
-	props: {
-		selectedCategory: {
-			type: String,
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			open: false,
-		}
 	},
 
 	computed: {
@@ -79,8 +64,8 @@ export default {
 			return getCategories(1, true)
 		},
 
-		title() {
-			return this.selectedCategory === null ? this.t('notes', 'Categories') : categoryLabel(this.selectedCategory)
+		selectedCategory() {
+			return store.getters.getSelectedCategory()
 		},
 	},
 
@@ -89,19 +74,9 @@ export default {
 			return categoryLabel(category)
 		},
 
-		onToggleCategories() {
-			this.open = !this.open
-		},
-
 		onSelectCategory(category) {
-			this.open = false
-			this.$emit('category-selected', category)
+			store.commit('setSelectedCategory', category)
 		},
 	},
 }
 </script>
-<style scoped>
-.separator-below {
-	border-bottom: 1px solid var(--color-border);
-}
-</style>
diff --git a/src/components/EditorEasyMDE.vue b/src/components/EditorEasyMDE.vue
index e1dc35690..bb3b55f49 100644
--- a/src/components/EditorEasyMDE.vue
+++ b/src/components/EditorEasyMDE.vue
@@ -374,5 +374,6 @@ export default {
 	z-index: 10;
 	height: 40px;
 	margin-right: 5px;
+	top: 65px;
 }
 </style>
diff --git a/src/components/NavigationNoteItem.vue b/src/components/NavigationNoteItem.vue
deleted file mode 100644
index e222d64cc..000000000
--- a/src/components/NavigationNoteItem.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-	<NcAppNavigationItem
-		:title="title"
-		:icon="icon"
-		:menu-open.sync="actionsOpen"
-		: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"
-	>
-		<template #actions>
-			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
-				{{ actionFavoriteText }}
-			</NcActionButton>
-			<NcActionButton icon="icon-details" @click="onToggleSidebar">
-				<SidebarIcon slot="icon" :size="20" />
-				{{ t('notes', 'Details') }}
-			</NcActionButton>
-			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
-				{{ t('notes', 'Delete note') }}
-			</NcActionButton>
-			<NcActionSeparator />
-			<NcActionButton icon="icon-files-dark" @click="onCategorySelected">
-				{{ actionCategoryText }}
-			</NcActionButton>
-		</template>
-	</NcAppNavigationItem>
-</template>
-
-<script>
-import {
-	NcActionButton,
-	NcActionSeparator,
-	NcAppNavigationItem,
-} from '@nextcloud/vue'
-import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
-import { showError } from '@nextcloud/dialogs'
-import store from '../store.js'
-
-import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
-import { categoryLabel, routeIsNewNote } from '../Util.js'
-
-export default {
-	name: 'NavigationNoteItem',
-
-	components: {
-		NcActionButton,
-		NcActionSeparator,
-		NcAppNavigationItem,
-		SidebarIcon,
-	},
-
-	props: {
-		note: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			loading: {
-				note: false,
-				favorite: false,
-				delete: false,
-			},
-			actionsOpen: false,
-		}
-	},
-
-	computed: {
-		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
-		},
-
-		actionCategoryText() {
-			return categoryLabel(this.note.category)
-		},
-
-		actionDeleteIcon() {
-			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
-		},
-	},
-
-	methods: {
-		onToggleFavorite() {
-			this.loading.favorite = true
-			setFavorite(this.note.id, !this.note.favorite)
-				.catch(() => {
-				})
-				.then(() => {
-					this.loading.favorite = false
-					this.actionsOpen = false
-				})
-		},
-
-		onCategorySelected() {
-			this.actionsOpen = false
-			this.$emit('category-selected', this.note.category)
-		},
-
-		onToggleSidebar() {
-			this.actionsOpen = false
-			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
-		},
-
-		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
-					this.actionsOpen = false
-				})
-			} catch (e) {
-				showError(this.t('notes', 'Error during preparing note for deletion.'))
-				this.loading.delete = false
-				this.actionsOpen = false
-			}
-		},
-	},
-}
-</script>
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
new file mode 100644
index 000000000..45c144884
--- /dev/null
+++ b/src/components/NoteItem.vue
@@ -0,0 +1,83 @@
+<template>
+	<NcListItem
+		:title="title"
+		:active="isSelected"
+		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
+		@click="onNoteSelected(note.id)"
+	>
+		<template #subtitle>
+			{{ categoryTitle }}
+		</template>
+		<template #icon>
+			<AlertOctagonIcon v-if="note.error"
+				slot="icon"
+				:size="20"
+				fill-color="#E9322D"
+			/>
+			<StarIcon v-else-if="note.favorite"
+				slot="icon"
+				:size="20"
+				fill-color="#FC0"
+			/>
+			<FileDocumentOutlineIcon v-else
+				slot="icon"
+				:size="20"
+				fill-color="var(--color-text-lighter)"
+			/>
+		</template>
+	</NcListItem>
+</template>
+
+<script>
+import { NcListItem } from '@nextcloud/vue'
+import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
+import StarIcon from 'vue-material-design-icons/Star.vue'
+import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
+import { categoryLabel } from '../Util.js'
+
+export default {
+	name: 'NoteItem',
+
+	components: {
+		NcListItem,
+		AlertOctagonIcon,
+		StarIcon,
+		FileDocumentOutlineIcon,
+	},
+
+	props: {
+		note: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			loading: {
+				note: false,
+			},
+		}
+	},
+
+	computed: {
+		isSelected() {
+			return this.$store.getters.getSelectedNote() === this.note.id
+		},
+
+		title() {
+			return this.note.title + (this.note.unsaved ? ' *' : '')
+		},
+
+		categoryTitle() {
+			return categoryLabel(this.note.category)
+		},
+	},
+
+	methods: {
+		onNoteSelected(noteId) {
+			this.$emit('note-selected', noteId)
+		},
+	},
+}
+</script>
diff --git a/src/components/NotesCaption.vue b/src/components/NotesCaption.vue
new file mode 100644
index 000000000..85dd3d5b8
--- /dev/null
+++ b/src/components/NotesCaption.vue
@@ -0,0 +1,33 @@
+<template>
+	<div class="title">
+		{{ title }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'NotesCaption',
+
+	components: {
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.title {
+		color: var(--color-primary-light-text);
+		font-weight: bold;
+		padding-left: 10px;
+		padding-top: 5px;
+		padding-bottom: 5px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>
diff --git a/src/components/NotesList.vue b/src/components/NotesList.vue
new file mode 100644
index 000000000..5b7124b5f
--- /dev/null
+++ b/src/components/NotesList.vue
@@ -0,0 +1,34 @@
+<template>
+	<ul>
+		<NoteItem v-for="note in notes"
+			:key="note.id"
+			:note="note"
+			@note-selected="onNoteSelected"
+		/>
+	</ul>
+</template>
+
+<script>
+import NoteItem from './NoteItem.vue'
+
+export default {
+	name: 'NotesList',
+
+	components: {
+		NoteItem,
+	},
+
+	props: {
+		notes: {
+			type: Array,
+			required: true,
+		},
+	},
+
+	methods: {
+		onNoteSelected(noteId) {
+			this.$emit('note-selected', noteId)
+		},
+	},
+}
+</script>
diff --git a/src/components/NavigationList.vue b/src/components/NotesView.vue
similarity index 54%
rename from src/components/NavigationList.vue
rename to src/components/NotesView.vue
index 9862aa984..edbe8fad8 100644
--- a/src/components/NavigationList.vue
+++ b/src/components/NotesView.vue
@@ -1,62 +1,68 @@
 <template>
-	<Fragment>
-		<!-- collapsible categories -->
-		<NavigationCategoriesItem
-			v-if="numNotes"
-			:selected-category="category"
-			@category-selected="$emit('category-selected', $event)"
-		/>
-
-		<!-- list of notes -->
-		<template v-for="item in noteItems">
-			<NcAppNavigationCaption v-if="category!==null && category!==item.category"
-				:key="item.category"
-				class="app-navigation-noclose"
-				:title="categoryToLabel(item.category)"
-				@click.native="$emit('category-selected', item.category)"
-			/>
-			<NcAppNavigationCaption 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)"
-			/>
+	<NcAppContent pane-config-key="note" :show-details="showNote" @update:showDetails="hideNote">
+		<template slot="list">
+			<NcAppContentList>
+				<div class="spacer" />
+				<NotesList v-if="groupedNotes.length === 1"
+					:notes="groupedNotes[0].notes"
+					@note-selected="onNoteSelected"
+				/>
+				<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>
+			</NcAppContentList>
 		</template>
-		<NcAppNavigationItem
-			v-if="notes.length != filteredNotes.length"
-			v-observe-visibility="onEndOfNotes"
-			:title="t('notes', 'Loading …')"
-			:loading="true"
-		/>
-	</Fragment>
+
+		<NcAppContentDetails>
+			<Note v-if="showNote" :note-id="noteId" @note-deleted="onNoteDeleted" />
+		</NcAppContentDetails>
+	</NcAppContent>
 </template>
 
 <script>
+
 import {
-	NcAppNavigationCaption,
-	NcAppNavigationItem,
+	NcAppContent,
+	NcAppContentList,
+	NcAppContentDetails,
 } from '@nextcloud/vue'
-import { Fragment } from 'vue-fragment'
-import { ObserveVisibility } from 'vue-observe-visibility'
-
 import { categoryLabel } from '../Util.js'
-import NavigationCategoriesItem from './NavigationCategoriesItem.vue'
-import NavigationNoteItem from './NavigationNoteItem.vue'
+import NotesList from './NotesList.vue'
+import NotesCaption from './NotesCaption.vue'
 import store from '../store.js'
+import Note from './Note.vue'
+
+import { ObserveVisibility } from 'vue-observe-visibility'
 
 export default {
-	name: 'NavigationList',
+	name: 'NotesView',
 
 	components: {
-		Fragment,
-		NavigationCategoriesItem,
-		NavigationNoteItem,
-		NcAppNavigationCaption,
-		NcAppNavigationItem,
+		NcAppContent,
+		NcAppContentList,
+		NcAppContentDetails,
+		Note,
+		NotesList,
+		NotesCaption,
 	},
 
 	directives: {
@@ -64,13 +70,9 @@ export default {
 	},
 
 	props: {
-		filteredNotes: {
-			type: Array,
-			required: true,
-		},
-		category: {
+		noteId: {
 			type: String,
-			default: null,
+			required: true,
 		},
 	},
 
@@ -80,15 +82,20 @@ export default {
 			monthFormat: new Intl.DateTimeFormat(OC.getLanguage(), { month: 'long', year: 'numeric' }),
 			lastYear: new Date(new Date().getFullYear() - 1, 0),
 			showFirstNotesOnly: true,
+			showNote: true,
 		}
 	},
 
 	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 {
@@ -99,7 +106,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: [] })
@@ -108,7 +115,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: [] })
 					}
@@ -117,10 +124,6 @@ export default {
 				}, [])
 			}
 		},
-
-		noteItems() {
-			return this.groupedNotes
-		},
 	},
 
 	watch: {
@@ -174,6 +177,49 @@ export default {
 				this.showFirstNotesOnly = false
 			}
 		},
+
+		onCategorySelected(category) {
+			store.commit('setSelectedCategory', category)
+		},
+
+		hideNote() {
+			this.showNote = false
+		},
+
+		onNoteDeleted(note) {
+			this.$emit('note-deleted', note)
+		},
+
+		onNoteSelected(noteId) {
+			this.showNote = true
+		},
 	},
 }
 </script>
+<style scoped>
+.spacer {
+	padding: 16px;
+}
+
+.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>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index a894b1493..e160fdece 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -4,7 +4,11 @@
 		:subtitle="subtitle"
 		:star-loading="loading.favorite"
 		:starred="note.favorite"
+		:title-editable.sync="titleEditable"
+		:title-tooltip="titleTooltip"
 		@update:starred="onSetFavorite"
+		@update:title="onUpdateTitle"
+		@submit-title="onRenameTitle"
 		@close="onCloseSidebar"
 	>
 		<div class="sidebar-content-wrapper">
@@ -62,7 +66,7 @@ import moment from '@nextcloud/moment'
 
 import InfoIcon from 'vue-material-design-icons/Information.vue'
 
-import { getCategories, setFavorite, setCategory, saveNoteManually } from '../NotesService.js'
+import { getCategories, setFavorite, setTitle, setCategory, saveNoteManually } from '../NotesService.js'
 import { categoryLabel } from '../Util.js'
 import store from '../store.js'
 
@@ -98,8 +102,11 @@ export default {
 			loading: {
 				category: false,
 				favorite: false,
+				title: false, // TODO reflect this state in the UI
 			},
 			categoryInput: null,
+			titleEditableInternal: false,
+			newTitle: '',
 		}
 	},
 
@@ -107,11 +114,26 @@ export default {
 		note() {
 			return store.getters.getNote(parseInt(this.noteId))
 		},
+		titleEditable: {
+			get() {
+				return this.titleEditableInternal && !this.note.readonly
+			},
+			set(newValue) {
+				if (newValue) {
+					this.newTitle = this.title
+				}
+				this.titleEditableInternal = newValue
+			},
+		},
 		title() {
-			return this.note ? this.note.title : ''
+			if (!this.titleEditable) {
+				return this.note?.title || ''
+			} else {
+				return this.newTitle || ''
+			}
 		},
 		category() {
-			return this.note ? this.note.category : ''
+			return this.note?.category || ''
 		},
 		formattedDate() {
 			return moment(this.note.modified * 1000).format('LLL')
@@ -143,6 +165,9 @@ export default {
 		sidebarOpen() {
 			return store.state.app.sidebarOpen
 		},
+		titleTooltip() {
+			return t('notes', 'Click to edit title')
+		},
 	},
 
 	methods: {
@@ -170,6 +195,22 @@ export default {
 				})
 		},
 
+		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
+					})
+			}
+		},
+
 		onSaveCategory(category) {
 			this.categoryInput = null
 			if (category !== null && this.note.category !== category) {
diff --git a/src/router.js b/src/router.js
index 1233057da..1e63d22d6 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,7 +4,7 @@ import { generateUrl } from '@nextcloud/router'
 
 import Loading from './components/Loading.vue'
 import Welcome from './components/Welcome.vue'
-import Note from './components/Note.vue'
+import NotesView from './components/NotesView.vue'
 import Sidebar from './components/Sidebar.vue'
 
 Vue.use(Router)
@@ -28,7 +28,7 @@ export default new Router({
 			path: '/note/:noteId',
 			name: 'note',
 			components: {
-				default: Note,
+				default: NotesView,
 				sidebar: Sidebar,
 			},
 			props: {
diff --git a/src/store/notes.js b/src/store/notes.js
index d00581c0b..582c64090 100644
--- a/src/store/notes.js
+++ b/src/store/notes.js
@@ -5,6 +5,8 @@ const state = {
 	categories: [],
 	notes: [],
 	notesIds: {},
+	selectedCategory: null,
+	selectedNote: null,
 }
 
 const getters = {
@@ -70,6 +72,43 @@ 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
+	},
+
+	getSelectedNote: (state) => () => {
+		return state.selectedNote
+	},
 }
 
 const mutations = {
@@ -111,6 +150,14 @@ const mutations = {
 	setCategories(state, categories) {
 		state.categories = categories
 	},
+
+	setSelectedCategory(state, category) {
+		state.selectedCategory = category
+	},
+
+	setSelectedNote(state, note) {
+		state.selectedNote = note
+	},
 }
 
 const actions = {

From 87b19daf9bb5e8283b980d0c1fb8ad39a40bb169 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 13 Apr 2023 23:00:14 +0200
Subject: [PATCH 02/10] fix: Bring back note actions in list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/NoteItem.vue  | 100 ++++++++++++++++++++++++++++++++++-
 src/components/NotesView.vue |   8 ++-
 2 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index 45c144884..68de7bc2b 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -25,24 +25,46 @@
 				fill-color="var(--color-text-lighter)"
 			/>
 		</template>
+		<template #actions>
+			<NcActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
+				{{ actionFavoriteText }}
+			</NcActionButton>
+			<NcActionButton @click="onToggleSidebar">
+				<SidebarIcon slot="icon" :size="20" />
+				{{ t('notes', 'Details') }}
+			</NcActionButton>
+			<NcActionButton v-if="!note.readonly" :icon="actionDeleteIcon" @click="onDeleteNote">
+				{{ t('notes', 'Delete note') }}
+			</NcActionButton>
+			<NcActionSeparator />
+			<NcActionButton icon="icon-files-dark" @click="onCategorySelected">
+				{{ actionCategoryText }}
+			</NcActionButton>
+		</template>
 	</NcListItem>
 </template>
 
 <script>
-import { NcListItem } from '@nextcloud/vue'
+import { NcListItem, NcActionButton } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
 import StarIcon from 'vue-material-design-icons/Star.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
-import { categoryLabel } from '../Util.js'
+import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
+import { categoryLabel, routeIsNewNote } from '../Util.js'
+import { showError } from '@nextcloud/dialogs'
+import store from '../store.js'
+import { setFavorite, setTitle, fetchNote, deleteNote } from '../NotesService.js'
 
 export default {
 	name: 'NoteItem',
 
 	components: {
+		NcActionButton,
 		NcListItem,
 		AlertOctagonIcon,
 		StarIcon,
 		FileDocumentOutlineIcon,
+		SidebarIcon,
 	},
 
 	props: {
@@ -72,12 +94,86 @@ export default {
 		categoryTitle() {
 			return categoryLabel(this.note.category)
 		},
+
+		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
+		},
+		actionCategoryText() {
+			return categoryLabel(this.note.category)
+		},
+		actionDeleteIcon() {
+			return 'icon-delete' + (this.loading.delete ? ' loading' : '')
+		},
 	},
 
 	methods: {
 		onNoteSelected(noteId) {
+			console.error('select note', noteId)
 			this.$emit('note-selected', noteId)
 		},
+		onToggleFavorite() {
+			this.loading.favorite = true
+			setFavorite(this.note.id, !this.note.favorite)
+				.catch(() => {
+				})
+				.then(() => {
+					this.loading.favorite = false
+					this.actionsOpen = false
+				})
+		},
+		onCategorySelected() {
+			this.actionsOpen = false
+			this.$emit('category-selected', this.note.category)
+		},
+		onToggleSidebar() {
+			this.actionsOpen = false
+			store.commit('setSidebarOpen', !store.state.app.sidebarOpen)
+		},
+		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
+					this.actionsOpen = false
+				})
+			} catch (e) {
+				showError(this.t('notes', 'Error during preparing note for deletion.'))
+				this.loading.delete = false
+				this.actionsOpen = false
+			}
+		},
 	},
 }
 </script>
+<style scoped>
+.material-design-icon {
+	width: 44px;
+}
+</style>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index edbe8fad8..4daa9ce98 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -1,7 +1,7 @@
 <template>
 	<NcAppContent pane-config-key="note" :show-details="showNote" @update:showDetails="hideNote">
 		<template slot="list">
-			<NcAppContentList>
+			<NcAppContentList class="content-list">
 				<div class="spacer" />
 				<NotesList v-if="groupedNotes.length === 1"
 					:notes="groupedNotes[0].notes"
@@ -197,8 +197,12 @@ export default {
 }
 </script>
 <style scoped>
+.content-list {
+	padding: 0 4px;
+}
+
 .spacer {
-	padding: 16px;
+	height: 44px;
 }
 
 .loading-label {

From 02160670a6f05b6cef38ee992650795820150bd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Apr 2023 11:28:35 +0200
Subject: [PATCH 03/10] fix: workaround for active style of NcAppNavigationItem
 without using router-link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/CategoriesList.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index 831fa5e7f..66219765b 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -80,3 +80,8 @@ export default {
 	},
 }
 </script>
+<style scoped>
+.app-navigation-entry-wrapper.active:deep(.app-navigation-entry) {
+	background-color: var(--color-primary-light) !important;
+}
+</style>

From 5d13a77c702aff92e3b307e379e86add8871676c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Apr 2023 11:28:55 +0200
Subject: [PATCH 04/10] fix: Avoid loading plain editor during initial load
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/Note.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Note.vue b/src/components/Note.vue
index d74ad9ef5..7123d23af 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,6 +1,6 @@
 <template>
-	<NoteRich v-if="rich" :note-id="noteId" />
-	<NotePlain v-else :note-id="noteId" />
+	<NoteRich v-if="ready && rich" :note-id="noteId" />
+	<NotePlain v-else-if="ready" :note-id="noteId" />
 </template>
 <script>
 import NoteRich from './NoteRich.vue'
@@ -26,6 +26,9 @@ export default {
 		rich() {
 			return window.oc_appswebroots.text && store.state.app.settings.noteMode === 'rich'
 		},
+		ready() {
+			return store.state.app.settings.noteMode !== null
+		},
 	},
 }
 </script>

From 7992083ea922bd9e8ddd297eec172bd73b4d3766 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Apr 2023 11:30:53 +0200
Subject: [PATCH 05/10] feat: note filtering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/NotesView.vue | 44 ++++++++++++++++++++++++++++++++----
 src/store/app.js             |  5 ++++
 src/store/notes.js           | 30 +++++++++++++++++++++++-
 3 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 4daa9ce98..013afa0a5 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -2,7 +2,10 @@
 	<NcAppContent pane-config-key="note" :show-details="showNote" @update:showDetails="hideNote">
 		<template slot="list">
 			<NcAppContentList class="content-list">
-				<div class="spacer" />
+				<div class="content-list__search">
+					<input type="search" :placeholder="t('notes', 'Search for notes')" @input="event => searchText = event.target.value">
+				</div>
+
 				<NotesList v-if="groupedNotes.length === 1"
 					:notes="groupedNotes[0].notes"
 					@note-selected="onNoteSelected"
@@ -29,6 +32,11 @@
 				>
 					{{ t('notes', 'Loading …') }}
 				</div>
+				<div v-if="getFilteredTotalCount > 0" class="content-list__search-more">
+					<NcButton @click="onCategorySelected(null)">
+						{{ t('notes', 'Find in all categories') }}
+					</NcButton>
+				</div>
 			</NcAppContentList>
 		</template>
 
@@ -44,6 +52,7 @@ import {
 	NcAppContent,
 	NcAppContentList,
 	NcAppContentDetails,
+	NcButton,
 } from '@nextcloud/vue'
 import { categoryLabel } from '../Util.js'
 import NotesList from './NotesList.vue'
@@ -60,6 +69,7 @@ export default {
 		NcAppContent,
 		NcAppContentList,
 		NcAppContentDetails,
+		NcButton,
 		Note,
 		NotesList,
 		NotesCaption,
@@ -87,6 +97,10 @@ export default {
 	},
 
 	computed: {
+		getFilteredTotalCount() {
+			return store.getters.getFilteredTotalCount()
+		},
+
 		category() {
 			return store.getters.getSelectedCategory()
 		},
@@ -124,6 +138,14 @@ export default {
 				}, [])
 			}
 		},
+		searchText: {
+			get() {
+				return store.state.searchText
+			},
+			set(value) {
+				store.commit('updateSearchText', value)
+			},
+		},
 	},
 
 	watch: {
@@ -196,13 +218,27 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .content-list {
 	padding: 0 4px;
 }
 
-.spacer {
-	height: 44px;
+.content-list__search {
+	padding: 4px;
+	padding-left: 50px;
+	position: sticky;
+    top: 0;
+    background-color: var(--color-main-background-translucent);
+    z-index: 1;
+
+	input {
+		width: 100%;
+	}
+}
+.content-list__search-more {
+	.button {
+		margin: auto;
+	}
 }
 
 .loading-label {
diff --git a/src/store/app.js b/src/store/app.js
index 3ddc20d63..f7efb464a 100644
--- a/src/store/app.js
+++ b/src/store/app.js
@@ -6,6 +6,7 @@ const state = {
 	isManualSave: false,
 	documentTitle: null,
 	sidebarOpen: false,
+	searchText: '',
 }
 
 const getters = {
@@ -35,6 +36,10 @@ const mutations = {
 	setSidebarOpen(state, open) {
 		state.sidebarOpen = open
 	},
+
+	updateSearchText(state, searchText) {
+		state.searchText = searchText
+	},
 }
 
 const actions = {
diff --git a/src/store/notes.js b/src/store/notes.js
index 582c64090..8e3603f83 100644
--- a/src/store/notes.js
+++ b/src/store/notes.js
@@ -7,6 +7,7 @@ const state = {
 	notesIds: {},
 	selectedCategory: null,
 	selectedNote: null,
+	filterString: '',
 }
 
 const getters = {
@@ -73,13 +74,19 @@ const getters = {
 		return result
 	},
 
-	getFilteredNotes: (state) => () => {
+	getFilteredNotes: (state, getters, rootState, rootGetters) => () => {
+		const searchText = rootState.app.searchText.toLowerCase()
 		const notes = state.notes.filter(note => {
 			if (state.selectedCategory !== null
 				&& state.selectedCategory !== note.category
 				&& !note.category.startsWith(state.selectedCategory + '/')) {
 				return false
 			}
+
+			if (searchText !== '' && note.title.toLowerCase().indexOf(searchText) === -1) {
+				return false
+			}
+
 			return true
 		})
 
@@ -102,6 +109,27 @@ const getters = {
 		return notes
 	},
 
+	getFilteredTotalCount: (state, getters, rootState, rootGetters) => () => {
+		const searchText = rootState.app.searchText.toLowerCase()
+
+		if (state.selectedCategory === null || searchText === '') {
+			return 0
+		}
+
+		const notes = state.notes.filter(note => {
+			if (state.selectedCategory === note.category || note.category.startsWith(state.selectedCategory + '/')) {
+				return false
+			}
+
+			if (note.title.toLowerCase().indexOf(searchText) === -1) {
+				return false
+			}
+
+			return true
+		})
+		return notes.length
+	},
+
 	getSelectedCategory: (state) => () => {
 		return state.selectedCategory
 	},

From 84d9624b4c71c9cd938570e9853e73d6b6887306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Apr 2023 12:06:34 +0200
Subject: [PATCH 06/10] fix: Remove duplicate icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/CategoriesList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index 66219765b..be8783360 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -2,7 +2,6 @@
 	<Fragment>
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
-			icon="icon-recent"
 			:class="{ active: null === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(null)"
 		>

From fa0fb79287d13fdf6f98b1fd73a7ec229569ab9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Apr 2023 12:07:03 +0200
Subject: [PATCH 07/10] fix: Section styling and app links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/CategoriesList.vue |  4 ++++
 src/components/HelpMobile.vue     |  8 ++++----
 src/components/NotesCaption.vue   | 18 +++++++++++-------
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index be8783360..99d1ed126 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -11,6 +11,8 @@
 			</NcAppNavigationCounter>
 		</NcAppNavigationItem>
 
+		<NcAppNavigationCaption :title="t('notes', 'Categories')" />
+
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
 			:title="categoryTitle(category.name)"
@@ -30,6 +32,7 @@
 <script>
 import {
 	NcAppNavigationItem,
+	NcAppNavigationCaption,
 	NcAppNavigationCounter,
 } from '@nextcloud/vue'
 import { Fragment } from 'vue-fragment'
@@ -48,6 +51,7 @@ export default {
 	components: {
 		Fragment,
 		NcAppNavigationItem,
+		NcAppNavigationCaption,
 		NcAppNavigationCounter,
 		FolderIcon,
 		FolderOutlineIcon,
diff --git a/src/components/HelpMobile.vue b/src/components/HelpMobile.vue
index 79d015c12..057138688 100644
--- a/src/components/HelpMobile.vue
+++ b/src/components/HelpMobile.vue
@@ -4,8 +4,8 @@
 			{{ t('notes', 'Install the app for your mobile phone in order to access your notes from everywhere.') }}
 		</div>
 		<div class="badge-wrapper">
-			<a target="_blank" href="https://github.com/stefan-niedermann/nextcloud-notes">
-				{{ t('notes', 'Android app: {notes} by {company}', {notes: 'Nextcloud Notes', company: 'Niedermann IT-Dienstleistungen'}) }}
+			<a target="_blank" href="https://github.com/nextcloud/nextcloud-notes">
+				{{ t('notes', 'Android app: {notes}', {notes: 'Nextcloud Notes'}) }}
 			</a>
 			<div>
 				<div class="badge">
@@ -22,11 +22,11 @@
 		</div>
 		<div class="badge-wrapper">
 			<a target="_blank" href="https://github.com/phedlund/CloudNotes">
-				{{ t('notes', 'iOS app: {notes} by {company}', {notes: 'CloudNotes - Nextcloud Notes', company: 'Peter Hedlund'}) }}
+				{{ t('notes', 'iOS app: {notes}', {notes: 'Nextcloud Notes'}) }}
 			</a>
 			<div>
 				<div class="badge">
-					<a target="_blank" href="https://apps.apple.com/app/cloudnotes-owncloud-notes/id813973264">
+					<a target="_blank" href="https://apps.apple.com/app/nextcloud-notes/id813973264">
 						<img :src="getRoute('badge_applestore.svg')" class="appstore-badge badge-playstore-fix">
 					</a>
 				</div>
diff --git a/src/components/NotesCaption.vue b/src/components/NotesCaption.vue
index 85dd3d5b8..34dd885bc 100644
--- a/src/components/NotesCaption.vue
+++ b/src/components/NotesCaption.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="title">
+	<h3 class="title">
 		{{ title }}
-	</div>
+	</h3>
 </template>
 
 <script>
@@ -22,12 +22,16 @@ export default {
 
 <style scoped>
 	.title {
-		color: var(--color-primary-light-text);
 		font-weight: bold;
-		padding-left: 10px;
-		padding-top: 5px;
-		padding-bottom: 5px;
-		text-overflow: ellipsis;
+		color: var(--color-primary-element);
+		font-size: var(--default-font-size);
+		line-height: 44px;
 		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		opacity: .7;
+		box-shadow: none !important;
+		flex-shrink: 0;
+		padding: 0 calc(var(--default-grid-baseline, 4px)*2) 0 calc(var(--default-grid-baseline, 4px)*3);
 	}
 </style>

From b90da5b392243d37e27007e893a8b8dfdecde6ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Apr 2023 12:25:58 +0200
Subject: [PATCH 08/10] fix: Avoid duplicate appcontent to bring back menubar
 stickyness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/NoteRich.vue  | 12 +++++-------
 src/components/NotesView.vue |  4 ++++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/NoteRich.vue b/src/components/NoteRich.vue
index 210c51c95..3d38908fd 100644
--- a/src/components/NoteRich.vue
+++ b/src/components/NoteRich.vue
@@ -1,12 +1,11 @@
 <template>
-	<NcAppContent :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen, 'is-mobile': isMobile }">
+	<div class="text-editor-wrapper" :class="{ loading: loading, 'icon-error': !loading && (!note || note.error), 'sidebar-open': sidebarOpen, 'is-mobile': isMobile }">
 		<div v-show="!loading" ref="editor" class="text-editor" />
-	</NcAppContent>
+	</div>
 </template>
 <script>
 
 import {
-	NcAppContent,
 	isMobile,
 } from '@nextcloud/vue'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -18,10 +17,6 @@ import store from '../store.js'
 export default {
 	name: 'NoteRich',
 
-	components: {
-		NcAppContent,
-	},
-
 	mixins: [isMobile],
 
 	props: {
@@ -120,6 +115,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.text-editor-wrapper {
+	height: 100%;
+}
 .text-editor {
 	height: 100%;
 }
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 013afa0a5..4cf2e86dc 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -241,6 +241,10 @@ export default {
 	}
 }
 
+.app-content-details {
+	height: 100%;
+}
+
 .loading-label {
 	color: var(--color-text-lighter);
 	text-align: center;

From eb9f1f6168a14fade70976af0fd954060b258c13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 29 Apr 2023 12:26:47 +0200
Subject: [PATCH 09/10] style: fix codestyle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/NoteRich.vue     | 1 +
 src/components/NotesCaption.vue | 2 +-
 src/components/NotesView.vue    | 7 ++++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/NoteRich.vue b/src/components/NoteRich.vue
index 3d38908fd..305c06097 100644
--- a/src/components/NoteRich.vue
+++ b/src/components/NoteRich.vue
@@ -118,6 +118,7 @@ export default {
 .text-editor-wrapper {
 	height: 100%;
 }
+
 .text-editor {
 	height: 100%;
 }
diff --git a/src/components/NotesCaption.vue b/src/components/NotesCaption.vue
index 34dd885bc..313431cc1 100644
--- a/src/components/NotesCaption.vue
+++ b/src/components/NotesCaption.vue
@@ -32,6 +32,6 @@ export default {
 		opacity: .7;
 		box-shadow: none !important;
 		flex-shrink: 0;
-		padding: 0 calc(var(--default-grid-baseline, 4px)*2) 0 calc(var(--default-grid-baseline, 4px)*3);
+		padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 3);
 	}
 </style>
diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 4cf2e86dc..96eef2595 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -227,14 +227,15 @@ export default {
 	padding: 4px;
 	padding-left: 50px;
 	position: sticky;
-    top: 0;
-    background-color: var(--color-main-background-translucent);
-    z-index: 1;
+	top: 0;
+	background-color: var(--color-main-background-translucent);
+	z-index: 1;
 
 	input {
 		width: 100%;
 	}
 }
+
 .content-list__search-more {
 	.button {
 		margin: auto;

From 6e03368ad5b1e1bd668bec6ccb7ea8e62e7e3f0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 3 May 2023 14:21:16 +0200
Subject: [PATCH 10/10] fix: Address review comments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/App.vue                       |  6 +++---
 src/components/CategoriesList.vue |  2 +-
 src/components/Note.vue           | 10 +++++-----
 src/components/NoteItem.vue       |  9 ++++-----
 src/components/Sidebar.vue        |  4 ++--
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ef16cf08a..21cad506a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,8 +58,8 @@ import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import CogIcon from 'vue-material-design-icons/Cog.vue'
 
 import AppSettings from './components/AppSettings.vue'
-import EditorHint from './components/Modal/EditorHint.vue'
 import CategoriesList from './components/CategoriesList.vue'
+import EditorHint from './components/Modal/EditorHint.vue'
 
 import { config } from './config.js'
 import { fetchNotes, noteExists, createNote, undoDeleteNote } from './NotesService.js'
@@ -70,15 +70,15 @@ export default {
 
 	components: {
 		AppSettings,
+		CategoriesList,
+		CogIcon,
 		EditorHint,
 		NcAppContent,
 		NcAppNavigation,
 		NcAppNavigationNew,
 		NcAppNavigationItem,
 		NcContent,
-		CogIcon,
 		PlusIcon,
-		CategoriesList,
 	},
 
 	data() {
diff --git a/src/components/CategoriesList.vue b/src/components/CategoriesList.vue
index 99d1ed126..58ef9ecd6 100644
--- a/src/components/CategoriesList.vue
+++ b/src/components/CategoriesList.vue
@@ -2,7 +2,7 @@
 	<Fragment>
 		<NcAppNavigationItem
 			:title="t('notes', 'All notes')"
-			:class="{ active: null === selectedCategory }"
+			:class="{ active: selectedCategory === null }"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
 			<HistoryIcon slot="icon" :size="20" />
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 7123d23af..a1e035791 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,6 +1,6 @@
 <template>
-	<NoteRich v-if="ready && rich" :note-id="noteId" />
-	<NotePlain v-else-if="ready" :note-id="noteId" />
+	<NoteRich v-if="isRichMode" :note-id="noteId" />
+	<NotePlain v-else-if="isPlainMode" :note-id="noteId" />
 </template>
 <script>
 import NoteRich from './NoteRich.vue'
@@ -23,11 +23,11 @@ export default {
 	},
 
 	computed: {
-		rich() {
+		isRichMode() {
 			return window.oc_appswebroots.text && store.state.app.settings.noteMode === 'rich'
 		},
-		ready() {
-			return store.state.app.settings.noteMode !== null
+		isPlainMode() {
+			return store.state.app.settings.noteMode !== null && store.state.app.settings.noteMode !== 'rich'
 		},
 	},
 }
diff --git a/src/components/NoteItem.vue b/src/components/NoteItem.vue
index 68de7bc2b..56ab9cb48 100644
--- a/src/components/NoteItem.vue
+++ b/src/components/NoteItem.vue
@@ -47,8 +47,8 @@
 <script>
 import { NcListItem, NcActionButton } from '@nextcloud/vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
-import StarIcon from 'vue-material-design-icons/Star.vue'
 import FileDocumentOutlineIcon from 'vue-material-design-icons/FileDocumentOutline.vue'
+import StarIcon from 'vue-material-design-icons/Star.vue'
 import SidebarIcon from 'vue-material-design-icons/PageLayoutSidebarRight.vue'
 import { categoryLabel, routeIsNewNote } from '../Util.js'
 import { showError } from '@nextcloud/dialogs'
@@ -59,12 +59,12 @@ export default {
 	name: 'NoteItem',
 
 	components: {
-		NcActionButton,
-		NcListItem,
 		AlertOctagonIcon,
-		StarIcon,
 		FileDocumentOutlineIcon,
+		NcActionButton,
+		NcListItem,
 		SidebarIcon,
+		StarIcon,
 	},
 
 	props: {
@@ -115,7 +115,6 @@ export default {
 
 	methods: {
 		onNoteSelected(noteId) {
-			console.error('select note', noteId)
 			this.$emit('note-selected', noteId)
 		},
 		onToggleFavorite() {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index e160fdece..742d7746e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -199,8 +199,8 @@ export default {
 			this.newTitle = newTitle
 		},
 
-		onRenameTitle(event) {
-			if (event && this.title !== this.newTitle) {
+		onRenameTitle() {
+			if (this.title !== this.newTitle) {
 				this.loading.title = true
 				setTitle(this.note.id, this.newTitle)
 					.catch(() => {