Add in-app search

Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Marco Ambrosini <marcoambrosini@icloud.com>

core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class="local-unified-search">
+		<NcIconSvgWrapper class="local-unified-search__icon"
+			:path="mdiMagnify" />
+		<!-- We can not use labels as it breaks the header layout so only aria-label and placeholder -->
+		<NcInputField class="local-unified-search__input"
+			:aria-label="t('core', 'Search in current app')"
+			:placeholder="t('core', 'Search in current app')"
+			show-trailing-button
+			:trailing-button-label="t('core', 'Search everywhere')"
+			:value="query"
+			@update:value="$emit('update:query', $event)"
+			@trailing-button-click="$emit('global-search')">
+			<template #trailing-button-icon>
+				<NcIconSvgWrapper :path="mdiEarth" />
+			</template>
+		</NcInputField>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { mdiEarth, mdiMagnify } from '@mdi/js'
+import { translate as t } from '@nextcloud/l10n'
+
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+
+defineProps<{
+	query: string,
+}>()
+
+defineEmits<{
+	(e: 'update:query', query: string): void
+	(e: 'global-search'): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.local-unified-search {
+	height: var(--header-height);
+	width: var(--header-height);
+
+	&:hover > &__input,
+	&:focus-within > &__input,
+	&__input:focus,
+	&__input:has(input:not(:placeholder-shown)) {
+		// Move to make it visible (center it on the header)
+		inset-block-start: calc((var(--header-height) - var(--default-clickable-area)) / 2);
+		// Adjust width for transition
+		--width: min(250px, 95vw);
+	}
+
+	&__icon {
+		width: 100%;
+		height: 100%;
+	}
+
+	#{&} &__input {
+		--width: calc(2 * var(--default-clickable-area));
+
+		// override some nextcloud-vue styles
+		margin: 0;
+		// Hide the search bar by default visually
+		position: absolute;
+		inset-block-start: calc(-2 * var(--header-height));
+		// Make it small by default, we animate the width
+		inset-inline-start: calc(var(--header-height) - var(--width));
+		width: var(--width);
+		// Add transition
+		transition-property: width, inset-inline-start;
+		transition-duration: .2s;
+		transition-timing-function: linear;
+	}
+}
+</style>