From d517b946456a279057567580266cbc5484de73e6 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 18 Jul 2024 02:18:35 +0200
Subject: [PATCH 1/2] feat(NcAppNavigation): Provide consistent in-app search

`NcAppNaviation` now provides an optional in-app search when `show-search` is set.
This allows apps which have in app filtering / search to use a consistent layout.

There is also an actions slot to provide some inline actions like filters.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 l10n/messages.pot                             |   3 +
 .../NcAppNavigation/NcAppNavigation.vue       | 149 +++++++++++++++++-
 .../NcAppNavigation/NcAppNavigationSearch.vue | 123 +++++++++++++++
 styleguide.config.cjs                         |   1 +
 4 files changed, 273 insertions(+), 3 deletions(-)
 create mode 100644 src/components/NcAppNavigation/NcAppNavigationSearch.vue

diff --git a/l10n/messages.pot b/l10n/messages.pot
index 59eba91aa8..f45235049d 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -332,6 +332,9 @@ msgstr ""
 msgid "Search for time zone"
 msgstr ""
 
+msgid "Search in app…"
+msgstr ""
+
 msgid "Search results"
 msgstr ""
 
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index e4de402d84..b9e611e68f 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -33,6 +33,117 @@ emit('toggle-navigation', {
 })
 ```
 
+#### With in-app search
+
+```vue
+<template>
+	<div class="styleguide-wrapper">
+		<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
+			<NcAppNavigation show-search :search.sync="searchQuery">
+				<template #search-actions>
+					<NcActions aria-label="Filters">
+						<template #icon>
+							<IconFilter :size="20" />
+						</template>
+						<NcActionButton>
+							<template #icon>
+								<IconAccount :size="20" />
+							</template>
+							Filter by name
+						</NcActionButton>
+						<NcActionButton>
+							<template #icon>
+								<IconCalendarAccount :size="20" />
+							</template>
+							Filter by year
+						</NcActionButton>
+					</NcActions>
+					<NcButton aria-label="Search globally" type="tertiary">
+						<template #icon>
+							<IconSearchGlobal :size="20" />
+						</template>
+					</NcButton>
+				</template>
+				<template #list>
+					<NcAppNavigationItem name="First navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+					<NcAppNavigationItem name="Second navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+				</template>
+			</NcAppNavigation>
+			<NcAppContent>
+				<ul class="fake-content">
+					<li>Search query: {{ searchQuery }}</li>
+					<li v-for="(item, index) in items" :key="index">
+						{{ item }}
+					</li>
+				</ul>
+			</NcAppContent>
+		</NcContent>
+	</div>
+</template>
+<script>
+import IconAccount from 'vue-material-design-icons/Account.vue'
+import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
+import IconFilter from 'vue-material-design-icons/Filter.vue'
+import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
+import IconStar from 'vue-material-design-icons/Star.vue'
+
+const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
+
+export default {
+	components: {
+		IconAccount,
+		IconCalendarAccount,
+		IconFilter,
+		IconSearchGlobal,
+		IconStar,
+	},
+
+	data() {
+		return {
+			searchQuery: '',
+		}
+	},
+
+	computed: {
+		items() {
+			return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
+		},
+	},
+}
+</script>
+<style scoped>
+/* This styles just mock NcContent and NcAppContent */
+.content-styleguidist {
+	position: relative !important;
+	margin: 0 !important;
+	/* prevent jumping */
+	min-height: 200px;
+}
+
+.content-styleguidist > * {
+	height: auto;
+}
+
+.fake-content {
+	padding: var(--app-navigation-padding);
+	padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
+}
+
+.styleguide-wrapper {
+	background-color: var(--color-background-plain);
+	padding: var(--body-container-margin);
+}
+</style>
+```
+
 </docs>
 
 <template>
@@ -69,7 +180,6 @@ import { getTrapStack } from '../../utils/focusTrap.js'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { createFocusTrap } from 'focus-trap'
 
-import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
 import { warn } from 'vue'
 
@@ -78,6 +188,7 @@ export default {
 
 	components: {
 		NcAppNavigationList,
+		NcAppNavigationSearch,
 		NcAppNavigationToggle,
 	},
 
@@ -105,6 +216,38 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * If set an in-app search is shown as the first entry
+		 */
+		showSearch: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The current search query
+		 */
+		search: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Label of in-app search input
+		 */
+		searchLabel: {
+			type: String,
+			default: null,
+		},
+
+		/**
+		 * Force a menu if there is more than one search action
+		 */
+		noSearchInlineActions: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup() {
@@ -159,7 +302,7 @@ export default {
 		 * @param {boolean} [state] set the state instead of inverting the current one
 		 */
 		toggleNavigation(state) {
-			// Early return if alreay in that state
+			// Early return if already in that state
 			if (this.open === state) {
 				emit('navigation-toggled', {
 					open: this.open,
@@ -206,7 +349,7 @@ export default {
 <style lang="scss">
 .app-navigation,
 .app-content {
-	/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */
+	/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */
 	--app-navigation-padding: #{$app-navigation-padding};
 }
 </style>
diff --git a/src/components/NcAppNavigation/NcAppNavigationSearch.vue b/src/components/NcAppNavigation/NcAppNavigationSearch.vue
new file mode 100644
index 0000000000..501adfe476
--- /dev/null
+++ b/src/components/NcAppNavigation/NcAppNavigationSearch.vue
@@ -0,0 +1,123 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="app-navigation-search"
+		:class="{
+			'app-navigation-search--has-actions': hasActions(),
+		}">
+		<NcInputField ref="inputElement"
+			:aria-label="label"
+			class="app-navigation-search__input"
+			label-outside
+			:placeholder="label"
+			show-trailing-button
+			:trailing-button-label="t('Clear search')"
+			type="search"
+			:value="value"
+			@update:value="$emit('update:value', $event)"
+			@trailing-button-click="onCloseSearch">
+			<template #trailing-button-icon>
+				<IconClose :size="20" />
+			</template>
+		</NcInputField>
+		<Transition v-if="hasActions()" name="slide-fade">
+			<div v-show="showActions"
+				ref="actionsContainer"
+				class="app-navigation-search__actions">
+				<slot name="actions" />
+			</div>
+		</Transition>
+	</div>
+</template>
+
+<script setup>
+import { useFocusWithin } from '@vueuse/core'
+import { ref, nextTick, useSlots, watch } from 'vue'
+import { t } from '../../l10n.js'
+
+import IconClose from 'vue-material-design-icons/Close.vue'
+import NcInputField from '../NcInputField/NcInputField.vue'
+
+defineProps({
+	/**
+	 * Current search input
+	 */
+	value: {
+		type: String,
+		default: '',
+	},
+	/**
+	 * Text used to label the search input
+	 */
+	label: {
+		type: String,
+		default: t('Search in app…'),
+	},
+})
+
+const emit = defineEmits(['update:value'])
+const slots = useSlots()
+
+const inputElement = ref()
+const { focused: inputHasFocus } = useFocusWithin(inputElement)
+
+/**
+ * @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
+ */
+const actionsContainer = ref()
+const hasActions = () => !!slots.actions
+const showActions = ref(true)
+watch(inputHasFocus, () => {
+	showActions.value = !inputHasFocus.value
+})
+
+/**
+ * Handle close the search
+ */
+function onCloseSearch() {
+	emit('update:value', '')
+	if (hasActions()) {
+		showActions.value = true
+		nextTick(() => actionsContainer.value.$el.querySelector('button')?.focus())
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.app-navigation-search {
+	display: flex;
+	gap: var(--app-navigation-padding);
+	padding: var(--app-navigation-padding);
+
+	&--has-actions &__input {
+		flex-grow: 1;
+		z-index: 3;
+	}
+
+	&__actions {
+		display: flex;
+		gap: var(--default-grid-baseline);
+
+		margin-inline-start: 0;
+		max-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));
+		max-height: var(--default-clickable-area);
+	}
+
+	&__input {
+		// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there
+		--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;
+	}
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+	transition: margin-inline-start var(--animation-quick);
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+	margin-inline-start: calc(-1 * var(--default-clickable-area));
+}
+</style>
diff --git a/styleguide.config.cjs b/styleguide.config.cjs
index c8741dcf99..6f5c9e1c10 100644
--- a/styleguide.config.cjs
+++ b/styleguide.config.cjs
@@ -155,6 +155,7 @@ module.exports = async () => {
 									'src/components/NcAppNavigation*/*.vue',
 								],
 								ignore: [
+									'src/components/NcAppNavigation/NcAppNavigationSearch.vue',
 									'src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue',
 									'src/components/NcAppNavigationItem/NcInputConfirmCancel.vue',
 								],

From 24fe833d496b7f9c5ede732882741622c4ad6c56 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Mon, 22 Jul 2024 14:08:34 +0200
Subject: [PATCH 2/2] chore: Make the `NcAppNavigationSearch` a fully separated
 component

Co-authored-by: Grigorii K. Shartsev <me@shgk.me>

Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

[skip ci]
---
 l10n/messages.pot                             |   4 +-
 .../NcAppNavigation/NcAppNavigation.vue       | 154 +---------
 .../NcAppNavigation/NcAppNavigationSearch.vue | 123 --------
 .../NcAppNavigationItem.vue                   |  20 +-
 .../NcAppNavigationNewItem.vue                |   6 +-
 .../NcAppNavigationSearch.vue                 | 272 ++++++++++++++++++
 src/components/NcAppNavigationSearch/index.js |   6 +
 src/components/index.ts                       |   1 +
 styleguide.config.cjs                         |   1 -
 9 files changed, 303 insertions(+), 284 deletions(-)
 delete mode 100644 src/components/NcAppNavigation/NcAppNavigationSearch.vue
 create mode 100644 src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
 create mode 100644 src/components/NcAppNavigationSearch/index.js

diff --git a/l10n/messages.pot b/l10n/messages.pot
index f45235049d..40580f46cc 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -332,10 +332,10 @@ msgstr ""
 msgid "Search for time zone"
 msgstr ""
 
-msgid "Search in app…"
+msgid "Search results"
 msgstr ""
 
-msgid "Search results"
+msgid "Search…"
 msgstr ""
 
 #. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index b9e611e68f..efab522019 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -33,117 +33,6 @@ emit('toggle-navigation', {
 })
 ```
 
-#### With in-app search
-
-```vue
-<template>
-	<div class="styleguide-wrapper">
-		<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
-			<NcAppNavigation show-search :search.sync="searchQuery">
-				<template #search-actions>
-					<NcActions aria-label="Filters">
-						<template #icon>
-							<IconFilter :size="20" />
-						</template>
-						<NcActionButton>
-							<template #icon>
-								<IconAccount :size="20" />
-							</template>
-							Filter by name
-						</NcActionButton>
-						<NcActionButton>
-							<template #icon>
-								<IconCalendarAccount :size="20" />
-							</template>
-							Filter by year
-						</NcActionButton>
-					</NcActions>
-					<NcButton aria-label="Search globally" type="tertiary">
-						<template #icon>
-							<IconSearchGlobal :size="20" />
-						</template>
-					</NcButton>
-				</template>
-				<template #list>
-					<NcAppNavigationItem name="First navigation entry">
-						<template #icon>
-							<IconStar :size="20" />
-						</template>
-					</NcAppNavigationItem>
-					<NcAppNavigationItem name="Second navigation entry">
-						<template #icon>
-							<IconStar :size="20" />
-						</template>
-					</NcAppNavigationItem>
-				</template>
-			</NcAppNavigation>
-			<NcAppContent>
-				<ul class="fake-content">
-					<li>Search query: {{ searchQuery }}</li>
-					<li v-for="(item, index) in items" :key="index">
-						{{ item }}
-					</li>
-				</ul>
-			</NcAppContent>
-		</NcContent>
-	</div>
-</template>
-<script>
-import IconAccount from 'vue-material-design-icons/Account.vue'
-import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
-import IconFilter from 'vue-material-design-icons/Filter.vue'
-import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
-import IconStar from 'vue-material-design-icons/Star.vue'
-
-const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
-
-export default {
-	components: {
-		IconAccount,
-		IconCalendarAccount,
-		IconFilter,
-		IconSearchGlobal,
-		IconStar,
-	},
-
-	data() {
-		return {
-			searchQuery: '',
-		}
-	},
-
-	computed: {
-		items() {
-			return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
-		},
-	},
-}
-</script>
-<style scoped>
-/* This styles just mock NcContent and NcAppContent */
-.content-styleguidist {
-	position: relative !important;
-	margin: 0 !important;
-	/* prevent jumping */
-	min-height: 200px;
-}
-
-.content-styleguidist > * {
-	height: auto;
-}
-
-.fake-content {
-	padding: var(--app-navigation-padding);
-	padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
-}
-
-.styleguide-wrapper {
-	background-color: var(--color-background-plain);
-	padding: var(--body-container-margin);
-}
-</style>
-```
-
 </docs>
 
 <template>
@@ -167,7 +56,7 @@ export default {
 				<slot name="list" />
 			</NcAppNavigationList>
 
-			<!-- Footer for e.g. NcAppNavigationSettings -->
+			<!-- @slot Footer for e.g. NcAppNavigationSettings -->
 			<slot name="footer" />
 		</nav>
 		<NcAppNavigationToggle :open="open" @update:open="toggleNavigation" />
@@ -188,7 +77,6 @@ export default {
 
 	components: {
 		NcAppNavigationList,
-		NcAppNavigationSearch,
 		NcAppNavigationToggle,
 	},
 
@@ -216,38 +104,6 @@ export default {
 			type: String,
 			default: '',
 		},
-
-		/**
-		 * If set an in-app search is shown as the first entry
-		 */
-		showSearch: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * The current search query
-		 */
-		search: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * Label of in-app search input
-		 */
-		searchLabel: {
-			type: String,
-			default: null,
-		},
-
-		/**
-		 * Force a menu if there is more than one search action
-		 */
-		noSearchInlineActions: {
-			type: Boolean,
-			default: false,
-		},
 	},
 
 	setup() {
@@ -386,6 +242,14 @@ export default {
 		margin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
 	}
 
+	&__search {
+		width: 100%;
+	}
+
+	&__body {
+		overflow-y: scroll;
+	}
+
 	// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot
 	// Same styles as NcAppNavigationList
 	&__content > ul {
diff --git a/src/components/NcAppNavigation/NcAppNavigationSearch.vue b/src/components/NcAppNavigation/NcAppNavigationSearch.vue
deleted file mode 100644
index 501adfe476..0000000000
--- a/src/components/NcAppNavigation/NcAppNavigationSearch.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-<template>
-	<div class="app-navigation-search"
-		:class="{
-			'app-navigation-search--has-actions': hasActions(),
-		}">
-		<NcInputField ref="inputElement"
-			:aria-label="label"
-			class="app-navigation-search__input"
-			label-outside
-			:placeholder="label"
-			show-trailing-button
-			:trailing-button-label="t('Clear search')"
-			type="search"
-			:value="value"
-			@update:value="$emit('update:value', $event)"
-			@trailing-button-click="onCloseSearch">
-			<template #trailing-button-icon>
-				<IconClose :size="20" />
-			</template>
-		</NcInputField>
-		<Transition v-if="hasActions()" name="slide-fade">
-			<div v-show="showActions"
-				ref="actionsContainer"
-				class="app-navigation-search__actions">
-				<slot name="actions" />
-			</div>
-		</Transition>
-	</div>
-</template>
-
-<script setup>
-import { useFocusWithin } from '@vueuse/core'
-import { ref, nextTick, useSlots, watch } from 'vue'
-import { t } from '../../l10n.js'
-
-import IconClose from 'vue-material-design-icons/Close.vue'
-import NcInputField from '../NcInputField/NcInputField.vue'
-
-defineProps({
-	/**
-	 * Current search input
-	 */
-	value: {
-		type: String,
-		default: '',
-	},
-	/**
-	 * Text used to label the search input
-	 */
-	label: {
-		type: String,
-		default: t('Search in app…'),
-	},
-})
-
-const emit = defineEmits(['update:value'])
-const slots = useSlots()
-
-const inputElement = ref()
-const { focused: inputHasFocus } = useFocusWithin(inputElement)
-
-/**
- * @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
- */
-const actionsContainer = ref()
-const hasActions = () => !!slots.actions
-const showActions = ref(true)
-watch(inputHasFocus, () => {
-	showActions.value = !inputHasFocus.value
-})
-
-/**
- * Handle close the search
- */
-function onCloseSearch() {
-	emit('update:value', '')
-	if (hasActions()) {
-		showActions.value = true
-		nextTick(() => actionsContainer.value.$el.querySelector('button')?.focus())
-	}
-}
-</script>
-
-<style scoped lang="scss">
-.app-navigation-search {
-	display: flex;
-	gap: var(--app-navigation-padding);
-	padding: var(--app-navigation-padding);
-
-	&--has-actions &__input {
-		flex-grow: 1;
-		z-index: 3;
-	}
-
-	&__actions {
-		display: flex;
-		gap: var(--default-grid-baseline);
-
-		margin-inline-start: 0;
-		max-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));
-		max-height: var(--default-clickable-area);
-	}
-
-	&__input {
-		// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there
-		--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;
-	}
-}
-
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-	transition: margin-inline-start var(--animation-quick);
-}
-
-.slide-fade-enter,
-.slide-fade-leave-to {
-	margin-inline-start: calc(-1 * var(--default-clickable-area));
-}
-</style>
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 50e013baa6..c3b21acb47 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -5,9 +5,9 @@
 
 <docs>
 
-# Usage
+### Usage
 
-### Simple element
+#### Simple element
 
 * With an icon:
 
@@ -46,7 +46,7 @@
 </ul>
 ```
 
-### Element with actions
+#### Element with actions
 Wrap the children in a template. If you have more than 2 actions, a popover menu and a menu
 button will be automatically created.
 
@@ -103,7 +103,7 @@ button will be automatically created.
 	</script>
 ```
 
-### Element with counter
+#### Element with counter
 Just nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.
 
 ```vue
@@ -132,7 +132,7 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 	</script>
 ```
 
-### Element with children
+#### Element with children
 
 Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
 prevent the user from collapsing the items.
@@ -199,7 +199,7 @@ prevent the user from collapsing the items.
 	</script>
 ```
 
-### Editable element
+#### Editable element
 Add the prop `:editable=true` and an edit placeholder if you need it. By default
 the placeholder is the previous name of the element.
 
@@ -230,7 +230,7 @@ the placeholder is the previous name of the element.
 	</script>
 ```
 
-### Undo element
+#### Undo element
 Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.
 
 ```vue
@@ -250,7 +250,7 @@ Just set the `undo` and `name` props. When clicking the undo button, an `undo` e
 	</script>
 ```
 
-### Link element
+#### Link element
 Href that start by http will be treated as external and opened in a new tab
 ```
 <div>
@@ -261,14 +261,14 @@ Href that start by http will be treated as external and opened in a new tab
 </div>
 ```
 
-### Custom title
+#### Custom title
 ```
 <ul>
 	<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
 </ul>
 ```
 
-### Pinned element
+#### Pinned element
 Just set the `pinned` prop.
 ```
 <ul>
diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
index 981225f664..e0a192684e 100644
--- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
+++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -4,9 +4,9 @@
 -->
 
 <docs>
-# Usage
+### Usage
 
-### New Item element
+#### New Item element
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" @new-item="function(value){alert(value)}">
@@ -26,7 +26,7 @@
 	</script>
 ```
 
-### New Item element with a loading animation instead of the icon
+#### New Item element with a loading animation instead of the icon
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" :loading="true">
diff --git a/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
new file mode 100644
index 0000000000..07f419444b
--- /dev/null
+++ b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
@@ -0,0 +1,272 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<docs>
+### Usage
+
+```vue
+<template>
+	<div class="styleguide-wrapper">
+		<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
+			<NcAppNavigation>
+				<template #search>
+					<NcAppNavigationSearch v-model="searchQuery">
+						<template #actions>
+							<NcActions aria-label="Filters">
+								<template #icon>
+									<IconFilter :size="20" />
+								</template>
+								<NcActionButton>
+									<template #icon>
+										<IconAccount :size="20" />
+									</template>
+									Filter by name
+								</NcActionButton>
+								<NcActionButton>
+									<template #icon>
+										<IconCalendarAccount :size="20" />
+									</template>
+									Filter by year
+								</NcActionButton>
+							</NcActions>
+							<NcButton aria-label="Search globally" type="tertiary">
+								<template #icon>
+									<IconSearchGlobal :size="20" />
+								</template>
+							</NcButton>
+						</template>
+					</NcAppNavigationSearch>
+				</template>
+				<template #list>
+					<NcAppNavigationItem name="First navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+					<NcAppNavigationItem name="Second navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+				</template>
+			</NcAppNavigation>
+			<NcAppContent>
+				<ul class="fake-content">
+					<li>Search query: {{ searchQuery }}</li>
+					<li v-for="(item, index) in items" :key="index">
+						{{ item }}
+					</li>
+				</ul>
+			</NcAppContent>
+		</NcContent>
+	</div>
+</template>
+<script>
+import IconAccount from 'vue-material-design-icons/Account.vue'
+import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
+import IconFilter from 'vue-material-design-icons/Filter.vue'
+import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
+import IconStar from 'vue-material-design-icons/Star.vue'
+
+const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
+
+export default {
+	components: {
+		IconAccount,
+		IconCalendarAccount,
+		IconFilter,
+		IconSearchGlobal,
+		IconStar,
+	},
+
+	data() {
+		return {
+			searchQuery: '',
+		}
+	},
+
+	computed: {
+		items() {
+			return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
+		},
+	},
+}
+</script>
+<style scoped>
+/* This styles just mock NcContent and NcAppContent */
+.content-styleguidist {
+	position: relative !important;
+	margin: 0 !important;
+	/* prevent jumping */
+	min-height: 200px;
+}
+
+.content-styleguidist > * {
+	height: auto;
+}
+
+.fake-content {
+	padding: var(--app-navigation-padding);
+	padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
+}
+
+.styleguide-wrapper {
+	background-color: var(--color-background-plain);
+	padding: var(--body-container-margin);
+}
+</style>
+```
+</docs>
+<template>
+	<div class="app-navigation-search"
+		:class="{
+			'app-navigation-search--has-actions': hasActions(),
+		}">
+		<NcInputField ref="inputElement"
+			:aria-label="label"
+			class="app-navigation-search__input"
+			label-outside
+			:placeholder="placeholder ?? label"
+			show-trailing-button
+			:trailing-button-label="t('Clear search')"
+			type="search"
+			:value="modelValue"
+			@update:value="$emit('update:modelValue', $event)"
+			@trailing-button-click="onCloseSearch">
+			<template #trailing-button-icon>
+				<IconClose :size="20" />
+			</template>
+		</NcInputField>
+		<div v-if="hasActions()"
+			ref="actionsContainer"
+			class="app-navigation-search__actions"
+			:class="{
+				'app-navigation-search__actions--hidden': !showActions,
+				'hidden-visually': hideActions,
+			}">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { useFocusWithin } from '@vueuse/core'
+import { ref, nextTick, useSlots, watch } from 'vue'
+import { t } from '../../l10n.js'
+
+import IconClose from 'vue-material-design-icons/Close.vue'
+import NcInputField from '../NcInputField/NcInputField.vue'
+
+defineProps({
+	/**
+	 * Current search input
+	 */
+	modelValue: {
+		type: String,
+		default: '',
+	},
+	/**
+	 * Text used to label the search input
+	 */
+	label: {
+		type: String,
+		default: t('Search…'),
+	},
+
+	/**
+	 * Placeholder of the search input
+	 * By default the value of `label` is used.
+	 */
+	placeholder: {
+		type: String,
+		default: null,
+	},
+})
+
+const emit = defineEmits(['update:modelValue'])
+const slots = useSlots()
+
+const inputElement = ref()
+const { focused: inputHasFocus } = useFocusWithin(inputElement)
+
+/** Timeout used to define when the search input is fully expanded */
+const transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100
+
+/**
+ * @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
+ */
+const actionsContainer = ref()
+const hasActions = () => !!slots.actions
+const showActions = ref(true)
+const timeoutId = ref()
+/** This is used to hide the actions after the transition is done */
+const hideActions = ref(false)
+watch(inputHasFocus, () => {
+	showActions.value = !inputHasFocus.value
+	window.clearTimeout(timeoutId.value)
+	if (showActions.value) {
+		hideActions.value = false
+	} else {
+		// If the transition is done, we fully hide the actions visually
+		window.setTimeout(() => {
+			hideActions.value = !showActions.value
+		}, transitionTimeout)
+	}
+})
+
+/**
+ * Handle close the search
+ */
+function onCloseSearch() {
+	emit('update:modelValue', '')
+	if (hasActions()) {
+		showActions.value = true
+		nextTick(() => actionsContainer.value.$el.querySelector('button')?.focus())
+	}
+}
+</script>
+
+<script>
+export default {
+	name: 'NcAppNavigationSearch',
+	model: {
+		event: 'update:modelValue',
+		prop: 'modelValue',
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.app-navigation-search {
+	display: flex;
+	gap: var(--app-navigation-padding);
+	padding: var(--app-navigation-padding);
+
+	&--has-actions &__input {
+		flex-grow: 1;
+		z-index: 3;
+	}
+
+	&__actions {
+		display: flex;
+		gap: var(--default-grid-baseline);
+
+		margin-inline-start: 0;
+		max-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));
+		max-height: var(--default-clickable-area);
+
+		transition: margin-inline-start var(--animation-quick);
+
+		&--hidden {
+			margin-inline-start: calc(-1 * var(--default-clickable-area));
+		}
+	}
+
+	&__input {
+		// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there
+		--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;
+	}
+}
+</style>
diff --git a/src/components/NcAppNavigationSearch/index.js b/src/components/NcAppNavigationSearch/index.js
new file mode 100644
index 0000000000..b60247b1c1
--- /dev/null
+++ b/src/components/NcAppNavigationSearch/index.js
@@ -0,0 +1,6 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export { default } from './NcAppNavigationSearch.vue'
diff --git a/src/components/index.ts b/src/components/index.ts
index 971adf617e..8b7f409742 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,6 +25,7 @@ export { default as NcAppNavigationItem } from './NcAppNavigationItem/index.js'
 export { default as NcAppNavigationList } from './NcAppNavigationList/index.js'
 export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js'
 export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js'
+export { default as NcAppNavigationSearch } from './NcAppNavigationSearch/index.js'
 export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js'
 export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js'
 export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/index.js'
diff --git a/styleguide.config.cjs b/styleguide.config.cjs
index 6f5c9e1c10..c8741dcf99 100644
--- a/styleguide.config.cjs
+++ b/styleguide.config.cjs
@@ -155,7 +155,6 @@ module.exports = async () => {
 									'src/components/NcAppNavigation*/*.vue',
 								],
 								ignore: [
-									'src/components/NcAppNavigation/NcAppNavigationSearch.vue',
 									'src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue',
 									'src/components/NcAppNavigationItem/NcInputConfirmCancel.vue',
 								],