WIP: New UI global search

Resolves: #39162

Signed-off-by: fenn-cs <fenn25.fn@gmail.com>

core/src/components/GlobalSearch/SearchFilterChip.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="chip">
+		<span class="icon">
+			<slot v-if="filter.type === 'app' || filter.type === 'person'" name="icon" />
+			<span v-if="filter.type == 'date'"> {{ filter.pretext }} : </span>
+		</span>
+		<span class="text">{{ filter.text }}</span>
+		<span class="close-icon" @click="removeChip">
+			<CloseIcon :size="20" />
+		</span>
+	</div>
+</template>
+
+<script>
+import CloseIcon from 'vue-material-design-icons/CloseThick.vue'
+
+export default {
+	name: 'SearchFilterChip',
+	components: {
+		CloseIcon,
+	},
+	props: {
+		filter: Object,
+	},
+	methods: {
+		removeChip() {
+			this.$emit('remove-filter', this.filter)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.chip {
+    display: flex;
+    align-items: center;
+    padding: 2px 4px;
+    border: 1px solid var(--color-primary-element);
+    border-radius: 12px;
+    color: var(--color-main-background);
+    background-color: var(--color-primary-element);
+    margin: 2px;
+    font-size: 12px;
+
+    & .icon {
+        display: flex;
+        align-items: center;
+        height: 20px;
+        padding-right: 5px;
+    }
+
+    & .text {
+        margin: 0 2px;
+    }
+
+    & .close-icon {
+        cursor: pointer;
+
+        &:hover {
+            border: 1px solid var(--color-main-background);
+            border-radius: 4px;
+            box-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
+            padding: 1px;
+        }
+    }
+}
+</style>

core/src/components/GlobalSearch/SearchResultItem.vue

@@ -0,0 +1,68 @@
+ <!--
+  - @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 class="result-item">
+    <slot name="icon"></slot>
+    <div class="details">
+      <span>Result Title</span>
+      <small>More details about result</small>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SearchResultItem',
+  components: {
+  },
+
+  data() {
+    return {
+    }
+  },
+
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.result-item {
+  display: flex;
+  padding: 5px; /* Add padding for the border effect */
+  border: 1px solid #f0f0f0; /* Faint border */
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* Light shadow */
+  transition: background-color 0.3s ease; /* Smooth hover transition */
+
+  & .details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &:hover {
+    background-color: var(--color-placeholder-light);
+  }
+}
+</style>

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),
+})

core/src/views/GlobalSearch.vue

@@ -0,0 +1,61 @@
+ <!--
+  - @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 :isVisible="showGlobalSearch" />
+    </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></style>