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.

Squashed: 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>

l10n/messages.pot

@@ -332,6 +332,9 @@ msgstr ""
 msgid "Search results"
 msgstr ""
 
+msgid "Search…"
+msgstr ""
+
 #. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
 msgid "sec. ago"
 msgstr ""

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -8,11 +8,9 @@
 <template>
 	<div class="styleguide-nc-content">
 		<NcAppNavigation>
-			<!-- TODO replace with template #search -->
-			<template #default>
+			<template #search>
 				<div class="navigation__header">
-					<!-- TODO replace with NcAppNavigationSearch -->
-					<NcTextField v-model="searchValue" label="Search …" />
+					<NcAppNavigationSearch v-model="searchValue" label="Search …" />
 					<NcActions>
 						<NcActionButton close-after-click @click="showModal = true">
 							<template #icon>
@@ -147,8 +145,13 @@ emit('toggle-navigation', {
 			class="app-navigation__content"
 			:inert="!open || undefined"
 			@keydown.esc="handleEsc">
+			<div class="app-navigation__search">
+				<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->
+				<slot name="search" />
+			</div>
+
 			<div class="app-navigation__body" :class="{ 'app-navigation__body--no-list': !$slots.list }">
-				<!-- The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
+				<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->
 				<slot />
 			</div>
 
@@ -157,7 +160,7 @@ emit('toggle-navigation', {
 				<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" />
@@ -170,8 +173,8 @@ 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 NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import { warn } from 'vue'
 
 export default {
@@ -343,6 +346,14 @@ export default {
 		margin-inline-start: 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 {

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
@@ -130,7 +130,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.
@@ -195,7 +195,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.
 
@@ -226,7 +226,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
@@ -246,7 +246,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>
@@ -257,14 +257,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>

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">