From 1a28f924c015fcd1875f772190b2f9ebcbd18581 Mon Sep 17 00:00:00 2001
From: fenn-cs <fenn25.fn@gmail.com>
Date: Mon, 9 Oct 2023 07:58:14 +0100
Subject: [PATCH] Feat: New UI global search

We are introducing a new search UI that providers a lot more space
for users via a large centralized modal and providers various filters
which can by applied by adding various chips on the UI.

For example, users can now filter their search or scope it by limiting the results
to specific apps, time period and people by apply the appropriate filters on the
new UI, previously filters where applied using text in the search box by prefixing
with `::`.

Resolves: #39162

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>
---
 .../GlobalSearch/CustomDateRangeModal.vue     |  98 ++++
 .../GlobalSearch/SearchFilterChip.vue         |  72 +++
 core/src/global-search.js                     |  55 ++
 core/src/services/GlobalSearchService.js      | 107 ++++
 core/src/views/GlobalSearch.vue               |  67 +++
 core/src/views/GlobalSearchModal.vue          | 500 ++++++++++++++++++
 core/templates/layout.user.php                |   1 +
 lib/private/TemplateLayout.php                |   1 +
 webpack.modules.js                            |   1 +
 9 files changed, 902 insertions(+)
 create mode 100644 core/src/components/GlobalSearch/CustomDateRangeModal.vue
 create mode 100644 core/src/components/GlobalSearch/SearchFilterChip.vue
 create mode 100644 core/src/global-search.js
 create mode 100644 core/src/services/GlobalSearchService.js
 create mode 100644 core/src/views/GlobalSearch.vue
 create mode 100644 core/src/views/GlobalSearchModal.vue

diff --git a/core/src/components/GlobalSearch/CustomDateRangeModal.vue b/core/src/components/GlobalSearch/CustomDateRangeModal.vue
new file mode 100644
index 0000000000000..aca37b3c71b7d
--- /dev/null
+++ b/core/src/components/GlobalSearch/CustomDateRangeModal.vue
@@ -0,0 +1,98 @@
+<template>
+	<NcModal v-if="isModalOpen"
+		id="global-search"
+		:name="t('core', 'Date range filter')"
+		:show.sync="isModalOpen"
+		:size="'small'"
+		:clear-view-delay="0"
+		:title="t('Date range filter')"
+		@close="closeModal">
+		<!-- Custom date range -->
+		<div class="global-search-custom-date-modal">
+			<h1>{{ t('core', 'Date range filter') }}</h1>
+			<div class="global-search-custom-date-modal__pickers">
+				<NcDateTimePicker :id="'globalsearch-custom-date-range-start'"
+					v-model="dateFilter.startFrom"
+					:max="new Date()"
+					:label="t('core', 'Pick start date')"
+					type="date" />
+				<NcDateTimePicker :id="'globalsearch-custom-date-range-end'"
+					v-model="dateFilter.endAt"
+					:max="new Date()"
+					:label="t('core', 'Pick end date')"
+					type="date" />
+			</div>
+			<NcButton @click="applyCustomRange">
+				{{ t('core', 'Apply range') }}
+				<template #icon>
+					<CalendarRangeIcon :size="20" />
+				</template>
+			</NcButton>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePickerNative.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import CalendarRangeIcon from 'vue-material-design-icons/CalendarRange.vue'
+
+export default {
+	name: 'CustomDateRangeModal',
+	components: {
+		NcButton,
+		NcModal,
+		CalendarRangeIcon,
+		NcDateTimePicker,
+	},
+	props: {
+		isOpen: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			dateFilter: { startFrom: null, endAt: null },
+		}
+	},
+	computed: {
+		isModalOpen: {
+			get() {
+				return this.isOpen
+			},
+			set(value) {
+				this.$emit('update:is-open', value)
+			},
+		},
+	},
+	methods: {
+		closeModal() {
+			this.isModalOpen = false
+		},
+		applyCustomRange() {
+			this.$emit('set:custom-date-range', this.dateFilter)
+			this.closeModal()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.global-search-custom-date-modal {
+	padding: 10px 20px 10px 20px;
+
+	h1 {
+		font-size: 16px;
+		font-weight: bolder;
+		line-height: 2em;
+	}
+
+	&__pickers {
+		display: flex;
+		flex-direction: column;
+	}
+
+}
+</style>
diff --git a/core/src/components/GlobalSearch/SearchFilterChip.vue b/core/src/components/GlobalSearch/SearchFilterChip.vue
new file mode 100644
index 0000000000000..4353234f77124
--- /dev/null
+++ b/core/src/components/GlobalSearch/SearchFilterChip.vue
@@ -0,0 +1,72 @@
+<template>
+	<div class="chip">
+		<span class="icon">
+			<slot name="icon" />
+			<span v-if="pretext.length"> {{ pretext }} : </span>
+		</span>
+		<span class="text">{{ text }}</span>
+		<span class="close-icon" @click="deleteChip">
+			<CloseIcon :size="16" />
+		</span>
+	</div>
+</template>
+
+<script>
+import CloseIcon from 'vue-material-design-icons/CloseThick.vue'
+
+export default {
+	name: 'SearchFilterChip',
+	components: {
+		CloseIcon,
+	},
+	props: {
+		text: String,
+		pretext: String,
+	},
+	methods: {
+		deleteChip() {
+			this.$emit('delete', this.filter)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.chip {
+    display: flex;
+    align-items: center;
+    padding: 2px 4px;
+    border: 1px solid var(--color-primary-element-light);
+    border-radius: 20px;
+    background-color: var(--color-primary-element-light);
+    margin: 2px;
+    font-size: 10px;
+    font-weight: bolder;
+
+    .icon {
+        display: flex;
+        align-items: center;
+        padding-right: 5px;
+
+        img {
+            width: 20px;
+            padding: 2px;
+            background-color: var(--color-primary-element);
+            border-radius: 20px;
+        }
+    }
+
+    .text {
+        margin: 0 2px;
+    }
+
+    .close-icon {
+        cursor: pointer;
+
+        :hover {
+            border-radius: 4px;
+            padding: 1px;
+        }
+    }
+}
+</style>
diff --git a/core/src/global-search.js b/core/src/global-search.js
new file mode 100644
index 0000000000000..f0c47fa189501
--- /dev/null
+++ b/core/src/global-search.js
@@ -0,0 +1,55 @@
+/**
+ * @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+ *
+ * @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { getLoggerBuilder } from '@nextcloud/logger'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+import Vue from 'vue'
+
+import GlobalSearch from './views/GlobalSearch.vue'
+
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(getRequestToken())
+
+const logger = getLoggerBuilder()
+	.setApp('global-search')
+	.detectUser()
+	.build()
+
+Vue.mixin({
+	data() {
+		return {
+			logger,
+		}
+	},
+	methods: {
+		t,
+		n,
+	},
+})
+
+export default new Vue({
+	el: '#global-search',
+	// eslint-disable-next-line vue/match-component-file-name
+	name: 'GlobalSearchRoot',
+	render: h => h(GlobalSearch),
+})
diff --git a/core/src/services/GlobalSearchService.js b/core/src/services/GlobalSearchService.js
new file mode 100644
index 0000000000000..47fd97a535ed8
--- /dev/null
+++ b/core/src/services/GlobalSearchService.js
@@ -0,0 +1,107 @@
+/**
+ * @copyright 2023, Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+ *
+ * @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { generateOcsUrl, generateUrl } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
+import axios from '@nextcloud/axios'
+
+export const defaultLimit = loadState('unified-search', 'limit-default')
+export const minSearchLength = loadState('unified-search', 'min-search-length', 1)
+export const enableLiveSearch = loadState('unified-search', 'live-search', true)
+
+export const regexFilterIn = /(^|\s)in:([a-z_-]+)/ig
+export const regexFilterNot = /(^|\s)-in:([a-z_-]+)/ig
+
+/**
+ * Create a cancel token
+ *
+ * @return {import('axios').CancelTokenSource}
+ */
+const createCancelToken = () => axios.CancelToken.source()
+
+/**
+ * Get the list of available search providers
+ *
+ * @return {Promise<Array>}
+ */
+export async function getProviders() {
+	try {
+		const { data } = await axios.get(generateOcsUrl('search/providers'), {
+			params: {
+				// Sending which location we're currently at
+				from: window.location.pathname.replace('/index.php', '') + window.location.search,
+			},
+		})
+		if ('ocs' in data && 'data' in data.ocs && Array.isArray(data.ocs.data) && data.ocs.data.length > 0) {
+			// Providers are sorted by the api based on their order key
+			return data.ocs.data
+		}
+	} catch (error) {
+		console.error(error)
+	}
+	return []
+}
+
+/**
+ * Get the list of available search providers
+ *
+ * @param {object} options destructuring object
+ * @param {string} options.type the type to search
+ * @param {string} options.query the search
+ * @param {number|string|undefined} options.cursor the offset for paginated searches
+ * @return {object} {request: Promise, cancel: Promise}
+ */
+export function search({ type, query, cursor }) {
+	/**
+	 * Generate an axios cancel token
+	 */
+	const cancelToken = createCancelToken()
+
+	const request = async () => axios.get(generateOcsUrl('search/providers/{type}/search', { type }), {
+		cancelToken: cancelToken.token,
+		params: {
+			term: query,
+			cursor,
+			// Sending which location we're currently at
+			from: window.location.pathname.replace('/index.php', '') + window.location.search,
+		},
+	})
+
+	return {
+		request,
+		cancel: cancelToken.cancel,
+	}
+}
+
+/**
+ * Get the list of active contacts
+ *
+ * @param {object} filter filter contacts by string
+ * @param filter.searchTerm
+ * @return {object} {request: Promise}
+ */
+export async function getContacts({ searchTerm }) {
+	const { data: { contacts } } = await axios.post(generateUrl('/contactsmenu/contacts'), {
+		filter: searchTerm,
+	})
+	return contacts
+}
diff --git a/core/src/views/GlobalSearch.vue b/core/src/views/GlobalSearch.vue
new file mode 100644
index 0000000000000..4d1692a4f4eec
--- /dev/null
+++ b/core/src/views/GlobalSearch.vue
@@ -0,0 +1,67 @@
+ <!--
+  - @copyright Copyright (c) 2020 Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+  -
+  - @author Fon E. Noel NFEBE <fenn25.fn@gmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+<template>
+	<div>
+		<NcButton aria-label="Global search" @click="toggleGlobalSearch">
+			<template #icon>
+				<Magnify class="unified-search__trigger" :size="22" />
+			</template>
+		</NcButton>
+		<GlobalSearchModal :is-visible="showGlobalSearch" :class="'global-search-modal'" />
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
+import GlobalSearchModal from './GlobalSearchModal.vue'
+
+export default {
+	name: 'GlobalSearch',
+	components: {
+		NcButton,
+		Magnify,
+		GlobalSearchModal,
+	},
+	data() {
+		return {
+			showGlobalSearch: false,
+		}
+	},
+	mounted() {
+		console.debug('Global search initialized!')
+	},
+	methods: {
+		toggleGlobalSearch() {
+			this.showGlobalSearch = !this.showGlobalSearch
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.global-search-modal {
+    ::v-deep .modal-container {
+        height: 80%;
+    }
+}
+</style>
diff --git a/core/src/views/GlobalSearchModal.vue b/core/src/views/GlobalSearchModal.vue
new file mode 100644
index 0000000000000..55e4763ab3130
--- /dev/null
+++ b/core/src/views/GlobalSearchModal.vue
@@ -0,0 +1,500 @@
+<template>
+	<NcModal v-if="isVisible"
+		id="global-search"
+		:name="t('core', 'Global search')"
+		:show.sync="isVisible"
+		:clear-view-delay="0"
+		:title="t('Global search')"
+		@close="closeModal">
+		<CustomDateRangeModal :is-open="showDateRangeModal"
+			:class="'global-search__date-range'"
+			@set:custom-date-range="setCustomDateRange"
+			@update:is-open="showDateRangeModal = $event" />
+		<!-- Global search form -->
+		<div ref="globalSearch" class="global-search-modal">
+			<h1>{{ t('core', 'Global search') }}</h1>
+			<NcInputField :value.sync="searchQuery"
+				type="text"
+				:label="t('core', 'Search apps, files, tags, messages...')"
+				@update:value="debouncedFind" />
+			<div class="global-search-modal__filters">
+				<NcActions :menu-name="t('core', 'Apps and Settings')" :open.sync="providerActionMenuIsOpen">
+					<template #icon>
+						<ListBox :size="20" />
+					</template>
+					<NcActionButton v-for="provider in providers" :key="provider.id" @click="addProviderFilter(provider)">
+						<template #icon>
+							<img :src="provider.icon">
+						</template>
+						{{ t('core', provider.name) }}
+					</NcActionButton>
+				</NcActions>
+				<NcActions :menu-name="t('core', 'Modified')" :open.sync="dateActionMenuIsOpen">
+					<template #icon>
+						<CalendarRangeIcon :size="20" />
+					</template>
+					<NcActionButton @click="applyQuickDateRange('today')">
+						{{ t('core', 'Today') }}
+					</NcActionButton>
+					<NcActionButton @click="applyQuickDateRange('7days')">
+						{{ t('core', 'Last 7 days') }}
+					</NcActionButton>
+					<NcActionButton @click="applyQuickDateRange('30days')">
+						{{ t('core', 'Last 30 days') }}
+					</NcActionButton>
+					<NcActionButton @click="applyQuickDateRange('thisyear')">
+						{{ t('core', 'This year') }}
+					</NcActionButton>
+					<NcActionButton @click="applyQuickDateRange('lastyear')">
+						{{ t('core', 'Last year') }}
+					</NcActionButton>
+					<NcActionButton @click="applyQuickDateRange('custom')">
+						{{ t('core', 'Custom date range') }}
+					</NcActionButton>
+				</NcActions>
+				<NcSelect v-bind="peopleSeclectProps"
+					v-model="peopleSeclectProps.value"
+					@search="filterContacts"
+					@option:selected="applyPersonFilter" />
+			</div>
+			<div class="global-search-modal__filters-applied">
+				<FilterChip v-for="filter in filters"
+					:key="filter.id"
+					:text="filter.name ?? filter.text"
+					:pretext="''"
+					@delete="removeFilter(filter)">
+					<template #icon>
+						<AccountIcon v-if="filter.type === 'person'" />
+						<CalendarRangeIcon v-else-if="filter.type === 'date'" />
+						<img v-else :src="filter.icon" alt="">
+					</template>
+				</FilterChip>
+			</div>
+			<div v-if="searchQuery.length === 0">
+				<NcEmptyContent :name="t('core', 'Start typing in search')">
+					<template #icon>
+						<MagnifyIcon />
+					</template>
+				</NcEmptyContent>
+			</div>
+			<div v-for="providerResult in results" :key="providerResult.id" class="global-search-modal__results">
+				<div class="result">
+					<div class="result-title">
+						<span>{{ providerResult.provider }}</span>
+					</div>
+					<ul class="result-items">
+						<NcListItem v-for="(result, index) in providerResult.results"
+							:key="index"
+							:name="result.title"
+							:bold="false">
+							<template #icon>
+								<img :src="result.thumbnailUrl">
+								<!-- <NcAvatar :size="44" user="janedoe" display-name="Jane Doe" /> -->
+								<!-- <FolderIcon v-if="providerResult.provider === 'Files'" :size="40" /> -->
+								<!-- <AccountIcon v-else :size="40" /> -->
+							</template>
+							<template #subname>
+								{{ result.subline }}
+							</template>
+						</NcListItem>
+					</ul>
+					<div class="result-footer">
+						<NcButton type="tertiary-no-background">
+							Load more results
+							<template #icon>
+								<DotsHorizontalIcon :size="20" />
+							</template>
+						</NcButton>
+						<NcButton alignment="end-reverse" type="tertiary-no-background">
+							Search in {{ providerResult.provider }}
+							<template #icon>
+								<ArrowRight :size="20" />
+							</template>
+						</NcButton>
+					</div>
+				</div>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import AccountIcon from 'vue-material-design-icons/AccountCircle.vue'
+import CalendarRangeIcon from 'vue-material-design-icons/CalendarRange.vue'
+import CustomDateRangeModal from '../components/GlobalSearch/CustomDateRangeModal.vue'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+import FilterChip from '../components/GlobalSearch/SearchFilterChip.vue'
+import ListBox from 'vue-material-design-icons/ListBox.vue'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import MagnifyIcon from 'vue-material-design-icons/Magnify.vue'
+
+import debounce from 'debounce'
+import { getProviders, search as globalSearch, getContacts } from '../services/GlobalSearchService.js'
+
+export default {
+	name: 'GlobalSearchModal',
+	components: {
+		AccountIcon,
+		ArrowRight,
+		CalendarRangeIcon,
+		CustomDateRangeModal,
+		DotsHorizontalIcon,
+		FilterChip,
+		ListBox,
+		NcActions,
+		NcActionButton,
+		NcButton,
+		NcEmptyContent,
+		NcModal,
+		NcListItem,
+		NcSelect,
+		NcInputField,
+		MagnifyIcon,
+	},
+	props: {
+		isVisible: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			providers: [],
+			providerActionMenuIsOpen: false,
+			dateActionMenuIsOpen: false,
+			dateFilter: { id: 'date', type: 'date', text: '', startFrom: null, endAt: null },
+			filteredProviders: [],
+			searchQuery: '',
+			placesFilter: '',
+			dateTimeFilter: null,
+			filters: [],
+			results: [],
+			contacts: [],
+			debouncedFind: debounce(this.find, 300),
+			showDateRangeModal: false,
+		}
+	},
+
+	computed: {
+		peopleSeclectProps: {
+			get() {
+				return {
+					// inputId: getRandomId(),
+					userSelect: true,
+					label: t('core', 'People filter'),
+					placeholder: t('core', 'Search people'),
+					placement: 'top',
+					options: this.contacts,
+					value: null,
+				}
+			},
+
+		},
+
+	},
+	mounted() {
+		getProviders().then((providers) => {
+			this.providers = providers
+			console.debug('Search providers', this.providers)
+		})
+		getContacts({ filter: '' }).then((contacts) => {
+			this.contacts = this.mapContacts(contacts)
+			console.debug('Contacts', this.contacts)
+		})
+	},
+	methods: {
+		find(query) {
+			if (query.length === 0) {
+				this.results = []
+				return
+			}
+			const newResults = []
+			const providersToSearch = this.filteredProviders.length > 0 ? this.filteredProviders : this.providers
+			const searchProvider = (provider) => {
+				const request = globalSearch({ type: provider.id, query, cursor: null }).request
+				request().then((response) => {
+					newResults.push({ id: provider.id, provider: provider.name, results: response.data.ocs.data.entries })
+					console.debug('New results', newResults)
+					console.debug('Global search results:', this.results)
+					this.updateResults(newResults)
+				})
+			}
+			providersToSearch.forEach(provider => {
+				searchProvider(provider)
+			})
+
+		},
+		updateResults(newResults) {
+			let updatedResults = [...this.results]
+			// If filters are applied, remove any previous results for providers that are not in current filters
+			if (this.filters.length > 0) {
+				updatedResults = updatedResults.filter(result => {
+					return this.filters.some(filter => filter.id === result.id)
+				})
+			}
+			// Process the new results
+			newResults.forEach(newResult => {
+				const existingResultIndex = updatedResults.findIndex(result => result.id === newResult.id)
+				if (existingResultIndex !== -1) {
+					if (newResult.results.length === 0) {
+						// If the new results data has no matches for and existing result, remove the existing result
+						updatedResults.splice(existingResultIndex, 1)
+					} else {
+						// If input triggered a change in existing results, update existing result
+						updatedResults.splice(existingResultIndex, 1, newResult)
+					}
+				} else if (newResult.results.length > 0) {
+					// Push the new result to the array only if its results array is not empty
+					updatedResults.push(newResult)
+				}
+			})
+			this.results = updatedResults
+		},
+		closeModal() {
+			this.searchQuery = ''
+		},
+		mapContacts(contacts) {
+			return contacts.map(contact => {
+				return {
+					id: contact.id,
+					displayName: contact.fullName,
+					isNoUser: false,
+					subname: contact.emailAddresses[0] ? contact.emailAddresses[0] : '',
+					icon: '',
+					user: contact.id,
+				}
+			})
+		},
+		filterContacts(query) {
+			getContacts({ filter: query }).then((contacts) => {
+				this.contacts = this.mapContacts(contacts)
+				console.debug(`Contacts filtered by ${query}`, this.contacts)
+			})
+		},
+		applyPersonFilter(person) {
+			console.debug('Apply person filter', person)
+		},
+		addProviderFilter(providerFilter) {
+			if (!providerFilter.id) return
+			this.providerActionMenuIsOpen = false
+			const existingFilter = this.filteredProviders.find(existing => existing.id === providerFilter.id)
+			if (!existingFilter) {
+				this.filteredProviders.push({ id: providerFilter.id, name: providerFilter.name, icon: providerFilter.icon, type: 'provider' })
+			}
+			this.filters = this.syncProviderFilters(this.filters, this.filteredProviders)
+			console.debug('Search filters (newly added)', this.filters)
+			this.debouncedFind(this.searchQuery)
+		},
+		removeFilter(filter) {
+			if (filter.type === 'provider') {
+				for (let i = 0; i < this.filteredProviders.length; i++) {
+					if (this.filteredProviders[i].id === filter.id) {
+						this.filteredProviders.splice(i, 1)
+						break
+					}
+				}
+				this.filters = this.syncProviderFilters(this.filters, this.filteredProviders)
+				console.debug('Search filters (recently removed)', this.filters)
+
+			} else {
+				for (let i = 0; i < this.filters.length; i++) {
+					if (this.filters[i].id === 'date') {
+						this.filters.splice(i, 1)
+						break
+					}
+				}
+			}
+			this.debouncedFind(this.searchQuery)
+		},
+		syncProviderFilters(firstArray, secondArray) {
+			// Create a copy of the first array to avoid modifying it directly.
+			const synchronizedArray = firstArray.slice()
+			// Remove items from the synchronizedArray that are not in the secondArray.
+			synchronizedArray.forEach((item, index) => {
+				const itemId = item.id
+				if (item.type === 'provider') {
+					if (!secondArray.some(secondItem => secondItem.id === itemId)) {
+						synchronizedArray.splice(index, 1)
+					}
+				}
+			})
+			// Add items to the synchronizedArray that are in the secondArray but not in the firstArray.
+			secondArray.forEach(secondItem => {
+				const itemId = secondItem.id
+				if (secondItem.type === 'provider') {
+					if (!synchronizedArray.some(item => item.id === itemId)) {
+						synchronizedArray.push(secondItem)
+					}
+				}
+			})
+
+			return synchronizedArray
+		},
+		updateDateFilter() {
+			const currFilterIndex = this.filters.findIndex(filter => filter.id === 'date')
+			if (currFilterIndex !== -1) {
+				this.filters[currFilterIndex] = this.dateFilter
+			} else {
+				this.filters.push(this.dateFilter)
+			}
+			this.debouncedFind(this.searchQuery)
+		},
+		applyQuickDateRange(range) {
+			this.dateActionMenuIsOpen = false
+			const today = new Date()
+			let endDate = today
+			let startDate
+			switch (range) {
+			case 'today':
+				// For 'Today', both start and end are set to today
+				startDate = today
+				this.dateFilter.text = t('core', 'Today')
+				break
+			case '7days':
+				// For 'Last 7 days', start date is 7 days ago, end is today
+				startDate = new Date(today)
+				startDate.setDate(today.getDate() - 7)
+				this.dateFilter.text = t('core', 'Last 7 days')
+				break
+			case '30days':
+				// For 'Last 30 days', start date is 30 days ago, end is today
+				startDate = new Date(today)
+				startDate.setDate(today.getDate() - 30)
+				this.dateFilter.text = t('core', 'Last 30 days')
+				break
+			case 'thisyear':
+				// For 'This year', start date is the first day of the year, end is today
+				startDate = new Date(today.getFullYear(), 0, 1)
+				this.dateFilter.text = t('core', 'This year')
+				break
+			case 'lastyear':
+				// For 'Last year', start date is the first day of the previous year, end is the last day of the previous year
+				startDate = new Date(today.getFullYear() - 1, 0, 1)
+				endDate = new Date(today.getFullYear() - 1, 11, 31)
+				this.dateFilter.text = t('core', 'Last year')
+				break
+			case 'custom':
+				this.showDateRangeModal = true
+				return
+			default:
+				return
+
+			}
+			this.dateFilter.startFrom = startDate
+			this.dateFilter.endAt = endDate
+			this.updateDateFilter()
+
+		},
+		setCustomDateRange(event) {
+			console.debug('Custom date range', event)
+			this.dateFilter.startFrom = event.startFrom.toLocaleDateString()
+			this.dateFilter.endAt = event.endAt.toLocaleDateString()
+			this.dateFilter.text = t('core', `Between ${this.dateFilter.startFrom} and ${this.dateFilter.endAt}`)
+			this.updateDateFilter()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.global-search-modal {
+	padding: 10px 20px 10px 20px;
+	height: 60%;
+
+	h1 {
+		font-size: 16px;
+		font-weight: bolder;
+		line-height: 2em;
+	}
+
+	&__filters {
+		display: flex;
+		padding-top: 5px;
+		align-items: center;
+		justify-content: space-between;
+
+		/* Overwrite NcSelect styles */
+		::v-deep div.v-select {
+			min-width: 0; // reset NcSelect min width
+
+			div.vs__dropdown-toggle {
+				height: 44px; // Overwrite height of NcSelect component to match button
+			}
+		}
+
+		::v-deep>* {
+			min-width: auto;
+			/* Reset hard set min widths */
+			min-height: 0;
+			/* Reset any min heights */
+			display: flex;
+			align-items: center;
+			flex: 1;
+
+			>* {
+				flex: 1;
+				min-width: auto;
+				/* Reset hard set min widths */
+				min-height: 0;
+			}
+
+		}
+
+		::v-deep>*:not(:last-child) {
+			margin: 0 2px;
+		}
+	}
+
+	&__filters-applied {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	&__results {
+		padding: 10px;
+
+		.result {
+
+			.result-title {
+				span {
+					color: var(--color-primary-element);
+					font-weight: bolder;
+					font-size: 16px;
+				}
+			}
+
+			.result-footer {
+				justify-content: space-between;
+				align-items: center;
+				display: flex;
+			}
+		}
+
+	}
+}
+
+div.v-popper__wrapper {
+	ul {
+		li {
+			::v-deep button.action-button {
+				align-items: center !important;
+
+				img {
+					width: 24px;
+					margin: 0 4px;
+					background-color: var(--color-primary-element);
+					border-radius: 5px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 9c23930f32491..9e04fed196f27 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -68,6 +68,7 @@
 			</div>
 
 			<div class="header-right">
+			    <div id="global-search"></div>
 				<div id="unified-search"></div>
 				<div id="notifications"></div>
 				<div id="contactsmenu"></div>
diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php
index e2504363257ee..90ca935974074 100644
--- a/lib/private/TemplateLayout.php
+++ b/lib/private/TemplateLayout.php
@@ -110,6 +110,7 @@ public function __construct($renderAs, $appId = '') {
 			$this->initialState->provideInitialState('unified-search', 'min-search-length', (int)$this->config->getAppValue('core', 'unified-search.min-search-length', (string)1));
 			$this->initialState->provideInitialState('unified-search', 'live-search', $this->config->getAppValue('core', 'unified-search.live-search', 'yes') === 'yes');
 			Util::addScript('core', 'unified-search', 'core');
+			Util::addScript('core', 'global-search', 'core');
 
 			// Set body data-theme
 			$this->assign('enabledThemes', []);
diff --git a/webpack.modules.js b/webpack.modules.js
index 67be70c5fed64..b380a8385ed0b 100644
--- a/webpack.modules.js
+++ b/webpack.modules.js
@@ -38,6 +38,7 @@ module.exports = {
 		profile: path.join(__dirname, 'core/src', 'profile.js'),
 		recommendedapps: path.join(__dirname, 'core/src', 'recommendedapps.js'),
 		systemtags: path.resolve(__dirname, 'core/src', 'systemtags/merged-systemtags.js'),
+		'global-search': path.join(__dirname, 'core/src', 'global-search.js'),
 		'unified-search': path.join(__dirname, 'core/src', 'unified-search.js'),
 		'unsupported-browser': path.join(__dirname, 'core/src', 'unsupported-browser.js'),
 		'unsupported-browser-redirect': path.join(__dirname, 'core/src', 'unsupported-browser-redirect.js'),