- search UI icon in desktop implemented

- spotlight refactoring

resources/js/components/FilesView/DesktopToolbar.vue

@@ -16,12 +16,17 @@
 			<ToolbarWrapper>
 
 				<!--Search bar-->
-				<ToolbarGroup v-if="false" style="margin-left: 0">
-					<SearchBar />
+				<ToolbarGroup class="ml-0">
+					<SearchBar class="lg:block hidden" />
 				</ToolbarGroup>
 
 				<!--Create button for all pages except SharedWithMe-->
 				<ToolbarGroup v-if="$checkPermission(['master', 'editor']) && ! $isThisRoute($route, ['SharedWithMe'])">
+
+					<span class="lg:hidden block">
+						<ToolbarButton @click.stop.native="$openSpotlight" source="search" :action="$t('Search files or folders')" />
+					</span>
+
 					<PopoverWrapper>
 						<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :action="$t('actions.create')" />
 
@@ -39,6 +44,8 @@
 
 				<!--Create button for shared with me page-->
 				<ToolbarGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
+					<ToolbarButton @click.stop.native="$openSpotlight" source="search" :action="$t('Search files or folders')" class="lg:hidden block" />
+
 					<PopoverWrapper>
 						<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :class="{'is-inactive': ! canEdit}" :action="$t('actions.create')" />
 

resources/js/components/FilesView/ItemHandler.vue

@@ -3,6 +3,7 @@
 		<ItemList
 			v-if="itemViewType === 'list'"
 			:entry="item"
+			:highlight="true"
 			@mouseup.stop.native="clickFilter"
 			@dragstart.native="$emit('dragstart')"
 			@drop.native="drop()"

resources/js/components/FilesView/ItemList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="{'dark:bg-dark-foreground bg-light-background': isClicked}" class="flex items-center px-2.5 py-2 rounded-lg select-none border-2 border-transparent border-dashed dark:hover:bg-dark-foreground hover:bg-light-background" :draggable="canDrag" spellcheck="false">
+	<div :class="{'dark:bg-dark-foreground bg-light-background': isClicked && highlight, 'dark:hover:bg-dark-foreground hover:bg-light-background': highlight}" class="flex items-center px-2.5 py-2 rounded-lg select-none border-2 border-transparent border-dashed" :draggable="canDrag" spellcheck="false">
 
 		<!--MultiSelecting for the mobile version-->
 		<CheckBox v-if="isMultiSelectMode" :is-clicked="isClicked" class="mr-5"/>
@@ -82,6 +82,7 @@
 			LinkIcon,
 		},
 		props: [
+			'highlight',
 			'entry',
 		],
 		data() {

resources/js/components/FilesView/SearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div @click="showSpotlight" class="search-bar">
+    <div @click="$openSpotlight" class="search-bar">
         <div class="message">
 			<span>
 				{{ $t('inputs.placeholder_search_files') }}
@@ -25,11 +25,6 @@
 				return this.$isApple() ? '⌘' : '⊞'
 			},
 		},
-		methods: {
-			showSpotlight() {
-				events.$emit('spotlight:show')
-			}
-		}
     }
 </script>
 

resources/js/components/FilesView/ToolbarButton.vue

@@ -14,6 +14,7 @@
     <grid-icon v-if="source === 'th'" size="19" />
     <link-icon v-if="source === 'share'" size="19" />
     <x-icon v-if="source === 'close'" size="19" />
+    <search-icon v-if="source === 'search'" size="19" />
     <cloud-off-icon v-if="source === 'shared-off'" size="19" />
     <sorting-icon v-if="source === 'preview-sorting'" class="preview-sorting"/>
     <CloudPlusIcon v-if="source === 'cloud-plus'" class="preview-sorting"/>
@@ -24,6 +25,7 @@
     import SortingIcon from '/resources/js/components/FilesView/Icons/SortingIcon'
     import CloudPlusIcon from '/resources/js/components/FilesView/Icons/CloudPlusIcon'
     import {
+		SearchIcon,
     	UserPlusIcon,
         CornerDownRightIcon,
         DownloadCloudIcon,
@@ -48,6 +50,7 @@
             'action'
         ],
         components: {
+			SearchIcon,
 			CloudPlusIcon,
 			UserPlusIcon,
             SortingIcon,