From d8a33703ab02e6429c5feb0f5b3abf9d797822a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Tue, 14 Dec 2021 17:59:22 +0100
Subject: [PATCH] filter suggestions

---
 public/mix-manifest.json                      |  83 ++-
 .../js/components/Spotlight/CategoryName.vue  |  10 +
 .../components/Spotlight/FilterSuggestion.vue |  19 +
 .../js/components/Spotlight/Spotlight.vue     | 540 ++++++++++--------
 4 files changed, 410 insertions(+), 242 deletions(-)
 create mode 100644 resources/js/components/Spotlight/CategoryName.vue
 create mode 100644 resources/js/components/Spotlight/FilterSuggestion.vue

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 32eb8ab5..827f1c5d 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -13,7 +13,7 @@
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=c93d93c96f9924e4517d",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=a6c18598d0dfd4d0998f",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=6609a9f3de6462d7c476",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=8e89d2271b17b2d78177",
     "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=0d6c4be667e46ea1303e",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=6035ca411b2c4239d964",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js?id=c3244f82e049a3364a6a",
@@ -436,5 +436,84 @@
     "/js/main.d997a30568b08b5adf35.hot-update.js": "/js/main.d997a30568b08b5adf35.hot-update.js",
     "/js/main.4423155b4706011fdce4.hot-update.js": "/js/main.4423155b4706011fdce4.hot-update.js",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e0bd7192a0e3a880c45a.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e0bd7192a0e3a880c45a.hot-update.js",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.509e825c6da896b8e585.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.509e825c6da896b8e585.hot-update.js"
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.509e825c6da896b8e585.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.509e825c6da896b8e585.hot-update.js",
+    "/js/main.c4026397aa4073205b2b.hot-update.js": "/js/main.c4026397aa4073205b2b.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c7dde88cbc1a91004f96.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c7dde88cbc1a91004f96.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.64f65e5518d8673df5fa.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.64f65e5518d8673df5fa.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5d8fcf53a85bfcb833fa.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5d8fcf53a85bfcb833fa.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7fe44109d83d1383f555.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7fe44109d83d1383f555.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f189d660654300bef1e3.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f189d660654300bef1e3.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.abaee0cbdd18a0572789.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.abaee0cbdd18a0572789.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.541b694b7ed8cb306966.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.541b694b7ed8cb306966.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.78437631d6b5e975f499.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.78437631d6b5e975f499.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f6cacfc77ec0bcd3c5b9.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f6cacfc77ec0bcd3c5b9.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.00263a31f69afc497e2c.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.00263a31f69afc497e2c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.da5338e7a4b0c2533922.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.da5338e7a4b0c2533922.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3adc5e5d03192e1ead86.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3adc5e5d03192e1ead86.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4c06a76ef46c52d1dbf4.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4c06a76ef46c52d1dbf4.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.49471a2dacc29407021c.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.49471a2dacc29407021c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.736707f55c04bfc7dfc1.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.736707f55c04bfc7dfc1.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a04004a489c6f6425c17.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a04004a489c6f6425c17.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.01da2c770c99077b0041.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.01da2c770c99077b0041.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9a414548c5590ba9af41.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9a414548c5590ba9af41.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b55067491e5aca738018.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b55067491e5aca738018.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.32d276f7630b46c14053.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.32d276f7630b46c14053.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.68324d2e1265255fac1a.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.68324d2e1265255fac1a.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f100000452d00b6dd078.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f100000452d00b6dd078.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.50aa5ba2dbba4f0cff21.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.50aa5ba2dbba4f0cff21.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.2d599b4a5eb3ed8db35d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.2d599b4a5eb3ed8db35d.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b48501c8cd4a542a519c.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b48501c8cd4a542a519c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.108ea140b8c47ca3c287.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.108ea140b8c47ca3c287.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.df66701490b4f8f09a96.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.df66701490b4f8f09a96.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.6a8be33a68c011d9a157.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.6a8be33a68c011d9a157.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d71a94ed6c635968e8d8.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d71a94ed6c635968e8d8.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.bc3d59762913a4b443d7.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.bc3d59762913a4b443d7.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b2715cb7bc7929868647.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b2715cb7bc7929868647.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.ddafb0af3f7675c771af.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.ddafb0af3f7675c771af.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.571c9644dbae0fd919b6.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.571c9644dbae0fd919b6.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3e25ac13f5716f7992db.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3e25ac13f5716f7992db.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.17c88cd9ac0b7ef00b07.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.17c88cd9ac0b7ef00b07.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.ade653814bbe8100ea8d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.ade653814bbe8100ea8d.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e14e9a04c74f91f364ee.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e14e9a04c74f91f364ee.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e987037c5f761985dcc4.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e987037c5f761985dcc4.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.47bf30cf07b559e597e6.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.47bf30cf07b559e597e6.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8951069559b18eaf96ab.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8951069559b18eaf96ab.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.23c6660c7bee9d529ee0.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.23c6660c7bee9d529ee0.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a6d80f3031c84ae59a67.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a6d80f3031c84ae59a67.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.ef13ca9dbab6c88ac504.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.ef13ca9dbab6c88ac504.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3ff17418bac3c84a7fed.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3ff17418bac3c84a7fed.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d1f69e7623b2d4372d90.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d1f69e7623b2d4372d90.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.997dad175465c2519bba.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.997dad175465c2519bba.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d26fac93a360b603336a.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d26fac93a360b603336a.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.0645df7cafd320a13950.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.0645df7cafd320a13950.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.18319f2d4e7f7bd4fcfb.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.18319f2d4e7f7bd4fcfb.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.1b2609ef93d860619e34.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.1b2609ef93d860619e34.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.6cf13fcad876a2276c69.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.6cf13fcad876a2276c69.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.020ecc722e9ef3d447ba.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.020ecc722e9ef3d447ba.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f726cafed316c43f78d8.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f726cafed316c43f78d8.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.057d5131a8878573182c.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.057d5131a8878573182c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4b42042fd9930f8c19c8.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4b42042fd9930f8c19c8.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.25080d679102e771014f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.25080d679102e771014f.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a04f7cf31277a19d2bd3.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a04f7cf31277a19d2bd3.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7b9153d2b577acb50b57.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7b9153d2b577acb50b57.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.01b2d17f78c44fc2374f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.01b2d17f78c44fc2374f.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5989d688bb2133cdde19.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.5989d688bb2133cdde19.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.13c160b9d1fbd6ccf641.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.13c160b9d1fbd6ccf641.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b44d41e92aaf08e2b87d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b44d41e92aaf08e2b87d.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.201cefd04279555ea510.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.201cefd04279555ea510.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.811d15f70923ebbb8914.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.811d15f70923ebbb8914.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e84fd7f7a95e4ade5649.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e84fd7f7a95e4ade5649.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8991b9c25874c6ee16f0.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.8991b9c25874c6ee16f0.hot-update.js",
+    "/js/main.fa219dd17219a2addb88.hot-update.js": "/js/main.fa219dd17219a2addb88.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.caa544a691b30e9dfb1d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.caa544a691b30e9dfb1d.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9b2a91c85f6a9f273259.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.9b2a91c85f6a9f273259.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.cbe1dbd7538ec45c322b.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.cbe1dbd7538ec45c322b.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.aba9781b19b6a5ee81a4.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.aba9781b19b6a5ee81a4.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.997d0e09fa9059365aba.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.997d0e09fa9059365aba.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.791e3ff61a57cc986446.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.791e3ff61a57cc986446.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.51300287bb65fc0e823b.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.51300287bb65fc0e823b.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4e8c4f0a3ccf6750bb95.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4e8c4f0a3ccf6750bb95.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7710c3e070e9cb6327f4.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7710c3e070e9cb6327f4.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a95cf2f2cd559af44653.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.a95cf2f2cd559af44653.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f7da4d6ea6c6f41893b3.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.f7da4d6ea6c6f41893b3.hot-update.js"
 }
diff --git a/resources/js/components/Spotlight/CategoryName.vue b/resources/js/components/Spotlight/CategoryName.vue
new file mode 100644
index 00000000..030fca49
--- /dev/null
+++ b/resources/js/components/Spotlight/CategoryName.vue
@@ -0,0 +1,10 @@
+<template>
+	<b class="text-xs text-gray-500 mb-1.5 block">
+		<slot></slot>
+	</b>
+</template>
+<script>
+	export default {
+		name: 'CategoryName',
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Spotlight/FilterSuggestion.vue b/resources/js/components/Spotlight/FilterSuggestion.vue
new file mode 100644
index 00000000..35eef5dd
--- /dev/null
+++ b/resources/js/components/Spotlight/FilterSuggestion.vue
@@ -0,0 +1,19 @@
+<template>
+	<div class="flex items-center py-2 cursor-pointer">
+		<span class="text-sm dark:bg-4x-dark-foreground bg-light-background font-bold py-1 px-2 rounded-lg dark-text-theme">
+			{{ keyword }} + {{ $t('space') }}
+		</span>
+		<p class="ml-3 text-sm font-semibold text-gray-500">
+			{{ description }}
+		</p>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'FilterSuggestion',
+		props: [
+			'keyword',
+			'description',
+		]
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index 4927218b..e303b5f9 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -17,8 +17,8 @@
 				</div>
 
 				<!--Filter-->
-				<div v-if="activeFilter" @click="removeFilter" class="bg-light-background rounded-lg px-2 py-1 mr-3 flex items-center cursor-pointer">
-					<b class="font-bold pr-1.5 text-sm">
+				<div v-if="activeFilter" @click="removeFilter" class="dark:bg-4x-dark-foreground bg-light-background rounded-lg px-2 py-1 mr-3 flex items-center cursor-pointer">
+					<b class="font-bold pr-1.5 text-sm dark-text-theme">
 						{{ activeFilter }}
 					</b>
 					<x-icon size="12" />
@@ -49,54 +49,73 @@
 				</div>
 			</div>
 
+			<!--Show tips-->
+			<div v-if="isEmptyQuery && ! activeFilter" class="relative z-50 px-4 pb-4">
+
+				<CategoryName>
+					{{ $t('Suggested Filters') }}
+				</CategoryName>
+
+				<FilterSuggestion
+					v-for="filter in filters"
+					:key="filter.slug"
+					:keyword="filter.keyword"
+					:description="filter.description"
+					@click.native="setFilter(filter.slug)"
+				/>
+			</div>
+
 			<!--Results-->
-			<div v-if="isNotEmptyQuery" class="spotlight-results relative z-50 px-4 pb-4">
+			<div v-if="isNotEmptyQuery" class="relative z-50 px-4 pb-4">
 
 				<!--Show actions-->
-				<b v-if="actions.length !== 0" class="text-xs text-gray-500 mb-1.5 block">
+				<CategoryName v-if="actions.length !== 0">
 					{{ $t('Actions') }}
-				</b>
-				<div v-if="actions.length !== 0" v-for="(result, i) in actions" :key="result.action.value" class="relative">
+				</CategoryName>
 
-					<div
-						class="flex items-center px-3.5 py-2.5"
-						:class="{'dark:bg-4x-dark-foreground bg-light-background rounded-xl': i === index}"
-					>
-						<settings-icon v-if="['AppOthers', 'Profile', 'Password'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
-						<home-icon v-if="result.action.value === 'Files'" size="18" class="vue-feather text-theme"/>
-						<trash2-icon v-if="result.action.value === 'Trash'" size="18" class="vue-feather text-theme"/>
-						<database-icon v-if="result.action.value === 'PlanCreate'" size="18" class="vue-feather text-theme"/>
-						<user-plus-icon v-if="result.action.value === 'UserCreate'" size="18" class="vue-feather text-theme"/>
-						<users-icon v-if="['TeamFolders', 'Users'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
-						<user-check-icon v-if="result.action.value === 'SharedWithMe'" size="18" class="vue-feather text-theme"/>
-						<link-icon v-if="result.action.value === 'MySharedItems'" size="18" class="vue-feather text-theme"/>
-						<upload-cloud-icon v-if="result.action.value === 'RecentUploads'" size="18" class="vue-feather text-theme"/>
-						<file-text-icon v-if="['Invoices', 'Invoice'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
-						<database-icon v-if="result.action.value === 'Plans'" size="18" class="vue-feather text-theme"/>
-						<dollar-sign-icon v-if="['Subscriptions', 'Subscription'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
-						<globe-icon v-if="result.action.value === 'Language'" size="18" class="vue-feather text-theme"/>
-						<monitor-icon v-if="result.action.value === 'Pages'" size="18" class="vue-feather text-theme"/>
-						<box-icon v-if="result.action.value === 'Dashboard'" size="18" class="vue-feather text-theme"/>
-						<hard-drive-icon v-if="result.action.value === 'Storage'" size="18" class="vue-feather text-theme"/>
-						<moon-icon v-if="result.action.value === 'dark-mode'" size="18" class="vue-feather text-theme"/>
-						<power-icon v-if="result.action.value === 'log-out'" size="18" class="vue-feather text-theme"/>
-						<trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme"/>
+				<div v-if="actions.length !== 0" class="mb-2">
+					<div v-for="(result, i) in actions" :key="result.action.value" class="relative">
+						<div
+							class="flex items-center px-3.5 py-2.5"
+							:class="{'dark:bg-4x-dark-foreground bg-light-background rounded-xl': i === index}"
+						>
+							<settings-icon v-if="['AppOthers', 'Profile', 'Password'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
+							<home-icon v-if="result.action.value === 'Files'" size="18" class="vue-feather text-theme"/>
+							<trash2-icon v-if="result.action.value === 'Trash'" size="18" class="vue-feather text-theme"/>
+							<database-icon v-if="result.action.value === 'PlanCreate'" size="18" class="vue-feather text-theme"/>
+							<user-plus-icon v-if="result.action.value === 'UserCreate'" size="18" class="vue-feather text-theme"/>
+							<users-icon v-if="['TeamFolders', 'Users'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
+							<user-check-icon v-if="result.action.value === 'SharedWithMe'" size="18" class="vue-feather text-theme"/>
+							<link-icon v-if="result.action.value === 'MySharedItems'" size="18" class="vue-feather text-theme"/>
+							<upload-cloud-icon v-if="result.action.value === 'RecentUploads'" size="18" class="vue-feather text-theme"/>
+							<file-text-icon v-if="['Invoices', 'Invoice'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
+							<database-icon v-if="result.action.value === 'Plans'" size="18" class="vue-feather text-theme"/>
+							<dollar-sign-icon v-if="['Subscriptions', 'Subscription'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
+							<globe-icon v-if="result.action.value === 'Language'" size="18" class="vue-feather text-theme"/>
+							<monitor-icon v-if="result.action.value === 'Pages'" size="18" class="vue-feather text-theme"/>
+							<box-icon v-if="result.action.value === 'Dashboard'" size="18" class="vue-feather text-theme"/>
+							<hard-drive-icon v-if="result.action.value === 'Storage'" size="18" class="vue-feather text-theme"/>
+							<moon-icon v-if="result.action.value === 'dark-mode'" size="18" class="vue-feather text-theme"/>
+							<power-icon v-if="result.action.value === 'log-out'" size="18" class="vue-feather text-theme"/>
+							<trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme"/>
 
-						<b class="font-bold text-sm ml-3.5">
-							{{ result.title }}
-						</b>
-					</div>
+							<b class="font-bold text-sm ml-3.5">
+								{{ result.title }}
+							</b>
+						</div>
 
-					<!--Keyboard shortcut hint-->
-					<div v-if="! $isMobile()" class="absolute right-4 top-1/2 transform -translate-y-1/2">
-						<span class="text-xs text-gray-400">{{ i === 0 ? '↵' : metaKeyIcon + i }}</span>
+						<!--Keyboard shortcut hint-->
+						<div v-if="! $isMobile()" class="absolute right-4 top-1/2 transform -translate-y-1/2">
+							<span class="text-xs text-gray-400">{{ i === 0 ? '↵' : metaKeyIcon + i }}</span>
+						</div>
 					</div>
 				</div>
 
 				<!--Show results-->
-				<b v-if="! activeFilter && results.length !== 0" class="text-xs text-gray-500 mb-1.5 block mt-3">
+				<CategoryName v-if="! activeFilter && results.length !== 0">
 					{{ $t('Files & Folders') }}
-				</b>
+				</CategoryName>
+
 				<div v-if="results.length !== 0" v-for="(result, i) in results" :key="result.data.id" class="relative">
 
 					<!--Users result-->
@@ -166,10 +185,36 @@
 </template>
 
 <script>
-import {TrashIcon, MoonIcon, PowerIcon, HardDriveIcon, UploadCloudIcon, FileTextIcon, DollarSignIcon, GlobeIcon, MonitorIcon, BoxIcon, UsersIcon, UserCheckIcon, LinkIcon, DatabaseIcon, SearchIcon, Trash2Icon, UserPlusIcon, XIcon, HomeIcon, SettingsIcon, ArrowUpIcon, ArrowDownIcon, CornerDownLeftIcon} from 'vue-feather-icons'
+import {
+	ArrowDownIcon,
+	ArrowUpIcon,
+	BoxIcon,
+	CornerDownLeftIcon,
+	DatabaseIcon,
+	DollarSignIcon,
+	FileTextIcon,
+	GlobeIcon,
+	HardDriveIcon,
+	HomeIcon,
+	LinkIcon,
+	MonitorIcon,
+	MoonIcon,
+	PowerIcon,
+	SearchIcon,
+	SettingsIcon,
+	Trash2Icon,
+	TrashIcon,
+	UploadCloudIcon,
+	UserCheckIcon,
+	UserPlusIcon,
+	UsersIcon,
+	XIcon
+} from 'vue-feather-icons'
 import Spinner from '/resources/js/components/FilesView/Spinner'
 import MemberAvatar from "../FilesView/MemberAvatar"
+import FilterSuggestion from "./FilterSuggestion"
 import ItemList from "../FilesView/ItemList"
+import CategoryName from "./CategoryName"
 import {events} from '/resources/js/bus'
 import {mapGetters} from 'vuex'
 import {debounce} from 'lodash'
@@ -177,208 +222,9 @@ import axios from "axios"
 
 export default {
 	name: 'Spotlight',
-	watch: {
-		query(query) {
-			if (query === '' || typeof query === 'undefined')
-				this.results = []
-				this.actions = []
-
-			// Reset selection index
-			this.index = 0
-
-			// Go for filter keyword
-			let getFilterQuery = query.substr(0, 2)
-
-			// search for the users
-			if (getFilterQuery === 'u ' && this.isAdmin && ! this.activeFilter) {
-				this.setFilter('users')
-			}
-
-			// Browse actions
-			if (! this.activeFilter) {
-				this.actions = this.actionList.filter(el => el.title.toLowerCase().indexOf(query) > -1).slice(0, 3)
-			}
-
-			this.findResult(query)
-		},
-	},
-	methods: {
-		showByShortcut(e) {
-			// Preserve select and reload native shortcut
-			if (!['a', 'r', 'v'].includes(e.key)) {
-				e.preventDefault()
-			}
-
-			const allowedRange = this.results.length + this.actions.length
-
-			// Allow only numbers within result range
-			if (Number.isInteger(parseInt(e.key)) && parseInt(e.key) < allowedRange) {
-				this.index = parseInt(e.key)
-
-				this.showSelected()
-			}
-		},
-		showSelected() {
-			let index = this.index
-			let resultIndex = index - this.actions.length
-
-			// Open Action
-			if (this.actions.length > 0 && index < this.actions.length ) {
-				this.openAction(this.actions[index])
-				return
-			}
-
-			// Open user
-			if (this.activeFilter === 'users') {
-				this.openUser(this.results[resultIndex])
-			}
-
-			// Open file or folder
-			if (! this.activeFilter) {
-				this.openItem(this.results[resultIndex])
-			}
-		},
-		openAction(arg) {
-			if (arg.action.type === 'route') {
-				this.$router.push({name: arg.action.value})
-			}
-
-			if (arg.action.type === 'function') {
-
-				if (arg.action.value === 'dark-mode') {
-					this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
-				}
-
-				if (arg.action.value === 'log-out') {
-					this.$store.dispatch('logOut')
-				}
-
-				if (arg.action.value === 'empty-trash') {
-					this.$emptyTrashQuietly()
-				}
-			}
-
-			this.exitSpotlight()
-		},
-		openUser(user) {
-			this.$router.push({name: 'UserDetail', params: {id: user.data.id}})
-
-			this.exitSpotlight()
-		},
-		openItem(file) {
-
-			// Show folder
-			if (file.data.type === 'folder') {
-
-				if (file.data.attributes.isTeamFolder) {
-
-					if (file.data.relationships.owner.data.id === this.user.data.id) {
-						this.$router.push({name: 'TeamFolders', params: {id: file.data.id}})
-					} else {
-						this.$router.push({name: 'SharedWithMe', params: {id: file.data.id}})
-					}
-				} else {
-					this.$router.push({name: 'Files', params: {id: file.data.id}})
-				}
-			} else {
-
-				// Show file
-				if (['video', 'audio', 'image'].includes(file.data.type) || file.data.attributes.mimetype === 'pdf') {
-					this.$store.commit('ADD_TO_FAST_PREVIEW', file)
-
-					events.$emit('file-preview:show')
-				} else {
-					this.$downloadFile(file.data.attributes.file_url, file.data.attributes.name + '.' + file.data.attributes.mimetype)
-				}
-			}
-
-			this.exitSpotlight()
-		},
-		findResult: debounce(function (value) {
-			// Prevent empty searching
-			if (value === '' || typeof value === 'undefined') return
-
-			this.isLoading = true
-
-			// Get route
-			let route = undefined
-
-			if (this.$store.getters.sharedDetail) {
-				let permission = this.$store.getters.sharedDetail.data.attributes.protected
-					? 'private'
-					: 'public'
-
-				route = `/api/browse/search/${permission}/${this.$router.currentRoute.params.token}`
-
-			} else {
-				route = '/api/browse/search'
-			}
-
-			axios
-				.get(`${route}?filter=${this.activeFilter}`, {
-					params: {query: value}
-				})
-				.then(response => {
-
-					// Show user result
-					if (this.activeFilter === 'users') {
-						this.results = response.data.data
-					}
-
-					// Show file result
-					if (! this.activeFilter) {
-						let files = response.data.files.data
-						let folders = response.data.folders.data
-
-						this.results = folders.concat(files)
-					}
-				})
-				.catch(() => this.$isSomethingWrong())
-				.finally(() => this.isLoading = false)
-		}, 150),
-		exitSpotlight() {
-			this.actions = []
-			this.results = []
-			this.query = ''
-			this.isVisible = false
-			events.$emit('popup:close')
-		},
-		onPageDown() {
-			let results = this.results.length
-			let actions = this.actions.length
-
-			let totalResultLength = (results + actions) - 1
-
-			if (this.index < totalResultLength)
-				this.index++
-		},
-		onPageUp() {
-			if (this.index > 0) this.index--
-		},
-		setFilter(filter) {
-			// Set active filter
-			this.activeFilter = filter
-
-			// Set default values
-			this.results = []
-			this.query = ''
-		},
-		undoFilter() {
-			if (this.activeFilter && this.query === '' && this.backspaceHits !== 2) {
-				this.backspaceHits++
-			}
-
-			if (this.backspaceHits === 2) {
-				this.removeFilter()
-			}
-		},
-		removeFilter() {
-			// Set default values
-			this.activeFilter = undefined
-			this.backspaceHits = 0
-		},
-	},
 	components: {
+		CategoryName,
+		FilterSuggestion,
 		TrashIcon,
 		MoonIcon,
 		PowerIcon,
@@ -611,6 +457,9 @@ export default {
 		},
 		isNotEmptyQuery() {
 			return this.query !== ''
+		},
+		isEmptyQuery() {
+			return this.query === '' || this.query === undefined
 		}
 	},
 	data() {
@@ -624,8 +473,219 @@ export default {
 
 			results: [],
 			actions: [],
+
+			filters: [
+				{
+					keyword: 'u',
+					description: this.$t('Search through your users...'),
+					slug: 'users',
+				},
+			]
 		}
 	},
+	watch: {
+		query(query) {
+			if (query === '' || typeof query === 'undefined')
+				this.results = []
+				this.actions = []
+
+			// Reset selection index
+			this.index = 0
+
+			// Go for filter keyword
+			let getFilterQuery = query.substr(0, 2)
+
+			// search for the users
+			if (getFilterQuery === 'u ' && this.isAdmin && ! this.activeFilter) {
+				this.setFilter('users')
+			}
+
+			// Browse actions
+			if (! this.activeFilter) {
+				this.actions = this.actionList.filter(el => el.title.toLowerCase().indexOf(query) > -1).slice(0, 3)
+			}
+
+			this.findResult(query)
+		},
+	},
+	methods: {
+		showByShortcut(e) {
+			// Preserve select and reload native shortcut
+			if (!['a', 'r', 'v'].includes(e.key)) {
+				e.preventDefault()
+			}
+
+			const allowedRange = this.results.length + this.actions.length
+
+			// Allow only numbers within result range
+			if (Number.isInteger(parseInt(e.key)) && parseInt(e.key) < allowedRange) {
+				this.index = parseInt(e.key)
+
+				this.showSelected()
+			}
+		},
+		showSelected() {
+			let index = this.index
+			let resultIndex = index - this.actions.length
+
+			// Open Action
+			if (this.actions.length > 0 && index < this.actions.length ) {
+				this.openAction(this.actions[index])
+				return
+			}
+
+			// Open user
+			if (this.activeFilter === 'users') {
+				this.openUser(this.results[resultIndex])
+			}
+
+			// Open file or folder
+			if (! this.activeFilter) {
+				this.openItem(this.results[resultIndex])
+			}
+		},
+		openAction(arg) {
+			if (arg.action.type === 'route') {
+				this.$router.push({name: arg.action.value})
+			}
+
+			if (arg.action.type === 'function') {
+
+				if (arg.action.value === 'dark-mode') {
+					this.$store.dispatch('toggleDarkMode', !this.isDarkMode)
+				}
+
+				if (arg.action.value === 'log-out') {
+					this.$store.dispatch('logOut')
+				}
+
+				if (arg.action.value === 'empty-trash') {
+					this.$emptyTrashQuietly()
+				}
+			}
+
+			this.exitSpotlight()
+		},
+		openUser(user) {
+			this.$router.push({name: 'UserDetail', params: {id: user.data.id}})
+
+			this.exitSpotlight()
+		},
+		openItem(file) {
+
+			// Show folder
+			if (file.data.type === 'folder') {
+
+				if (file.data.attributes.isTeamFolder) {
+
+					if (file.data.relationships.owner.data.id === this.user.data.id) {
+						this.$router.push({name: 'TeamFolders', params: {id: file.data.id}})
+					} else {
+						this.$router.push({name: 'SharedWithMe', params: {id: file.data.id}})
+					}
+				} else {
+					this.$router.push({name: 'Files', params: {id: file.data.id}})
+				}
+			} else {
+
+				// Show file
+				if (['video', 'audio', 'image'].includes(file.data.type) || file.data.attributes.mimetype === 'pdf') {
+					this.$store.commit('ADD_TO_FAST_PREVIEW', file)
+
+					events.$emit('file-preview:show')
+				} else {
+					this.$downloadFile(file.data.attributes.file_url, file.data.attributes.name + '.' + file.data.attributes.mimetype)
+				}
+			}
+
+			this.exitSpotlight()
+		},
+		findResult: debounce(function (value) {
+			// Prevent empty searching
+			if (value === '' || typeof value === 'undefined') return
+
+			this.isLoading = true
+
+			// Get route
+			let route = undefined
+
+			if (this.$store.getters.sharedDetail) {
+				let permission = this.$store.getters.sharedDetail.data.attributes.protected
+					? 'private'
+					: 'public'
+
+				route = `/api/browse/search/${permission}/${this.$router.currentRoute.params.token}`
+
+			} else {
+				route = '/api/browse/search'
+			}
+
+			axios
+				.get(`${route}?filter=${this.activeFilter}`, {
+					params: {query: value}
+				})
+				.then(response => {
+
+					// Show user result
+					if (this.activeFilter === 'users') {
+						this.results = response.data.data
+					}
+
+					// Show file result
+					if (! this.activeFilter) {
+						let files = response.data.files.data
+						let folders = response.data.folders.data
+
+						this.results = folders.concat(files)
+					}
+				})
+				.catch(() => this.$isSomethingWrong())
+				.finally(() => this.isLoading = false)
+		}, 150),
+		exitSpotlight() {
+			this.actions = []
+			this.results = []
+			this.query = ''
+			this.isVisible = false
+			events.$emit('popup:close')
+		},
+		onPageDown() {
+			let results = this.results.length
+			let actions = this.actions.length
+
+			let totalResultLength = (results + actions) - 1
+
+			if (this.index < totalResultLength)
+				this.index++
+		},
+		onPageUp() {
+			if (this.index > 0) this.index--
+		},
+		setFilter(filter) {
+			// Set active filter
+			this.activeFilter = filter
+
+			// Set default values
+			this.results = []
+			this.query = ''
+
+			this.$nextTick(() => this.$refs.searchInput.focus())
+		},
+		undoFilter() {
+			if (this.activeFilter && this.query === '' && this.backspaceHits !== 2) {
+				this.backspaceHits++
+			}
+
+			if (this.backspaceHits === 2) {
+				this.removeFilter()
+			}
+		},
+		removeFilter() {
+			// Set default values
+			this.activeFilter = undefined
+			this.backspaceHits = 0
+		},
+	},
 	created() {
 		events.$on('spotlight:show', filter => {
 			this.isVisible = true