improved search ui and efficiency:

- 15% less ram
 - colored icons
 - context bar
 - more search type filters

src/backend/http/search.go

@@ -8,23 +8,18 @@ import (
 var searchHandler = withUser(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
 	response := []map[string]interface{}{}
 	query := r.URL.Query().Get("query")
-	files, dirs, fileTypes := search.SearchAllIndexes(query, r.URL.Path)
-	for _,path := range(files){
+	indexInfo, fileTypes := search.SearchAllIndexes(query, r.URL.Path)
+	for _,path := range(indexInfo){
 		f := fileTypes[path]
 		responseObj := map[string]interface{}{
-			"dir"		:  	false,
 			"path"		: 	path,
 		}
-		for _,filterType := range(search.FilterableTypes) {
-			if f[filterType] { responseObj[filterType] = f[filterType] }
+		for filterType,_ := range(f) {
+			if f[filterType] {
+				responseObj[filterType] = f[filterType]
+			}
 		}
 		response = append(response,responseObj)
 	}
-	for _,v := range(dirs){
-		response = append(response, map[string]interface{}{
-			"dir":  true,
-			"path": v,
-		})
-	}
 	return renderJSON(w, r, response)
 })

src/backend/package.json

@@ -0,0 +1,14 @@
+{
+  "devDependencies": {
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-replace": "^5.0.2",
+    "rollup": "^2.79.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-vue": "^6.0.0",
+    "vue-template-compiler": "^2.7.14"
+  }
+}

src/backend/search/conditions.go

@@ -58,6 +58,10 @@ func ParseSearch(value string) *searchOptions {
 				opts.Conditions["doc"] = true
 			case "archive":
 				opts.Conditions["archive"] = true
+			case "folder":
+				opts.Conditions["dir"] = true
+			case "file":
+				opts.Conditions["dir"] = false
 		}
 	}
 

src/backend/search/indexing.go

@@ -14,7 +14,6 @@ import (
 var (
 	rootPath 	string = "/srv"
 	indexes =		map[string][]string{}
-	FilterableTypes = []string{"audio","image","video","doc","archive"}
 	mutex       sync.RWMutex
 	lastIndexed time.Time
 )
@@ -108,13 +107,12 @@ func addToIndex(path string, fileName string, isDir bool) {
 	}
 }
 
-func SearchAllIndexes(search string, scope string) ([]string, []string, map[string]map[string]bool) {
+func SearchAllIndexes(search string, scope string) ([]string, map[string]map[string]bool) {
 	searchOptions := ParseSearch(search)
 	mutex.RLock()
 	defer mutex.RUnlock()
 	fileListTypes := make(map[string]map[string]bool)
-	var matchingFiles []string
-	var matchingDirs []string
+	var matching []string
 	maximum := 125
 
 	for _, searchTerm := range searchOptions.Terms {
@@ -131,12 +129,13 @@ func SearchAllIndexes(search string, scope string) ([]string, []string, map[stri
 			if pathName == "" {
 				continue
 			}
-			matches, _ := containsSearchTerm(pathName, searchTerm, searchOptions.Conditions)
+			matches, fileType := containsSearchTerm(pathName, searchTerm, searchOptions.Conditions, true)
 			if !matches {
 				continue
 			}
 			count++
-			matchingDirs = append(matchingDirs, pathName)
+			matching = append(matching, pathName+"/")
+			fileListTypes[pathName+"/"] = fileType
 		}
 		count = 0
 		for _, fileName := range indexes["files"] {
@@ -148,28 +147,22 @@ func SearchAllIndexes(search string, scope string) ([]string, []string, map[stri
 				continue
 			}
 			// Check if the path name contains the search term
-			matches, fileType := containsSearchTerm(pathName, searchTerm, searchOptions.Conditions)
+			matches, fileType := containsSearchTerm(pathName, searchTerm, searchOptions.Conditions, false)
 			if !matches {
 				continue
 			}
-			matchingFiles = append(matchingFiles, pathName)
+			matching = append(matching, pathName)
 			fileListTypes[pathName] = fileType
 			count++
 		}
 	}
 	// Sort the strings based on the number of elements after splitting by "/"
-	sort.Slice(matchingFiles, func(i, j int) bool {
-		parts1 := strings.Split(matchingFiles[i], "/")
-		parts2 := strings.Split(matchingFiles[j], "/")
+	sort.Slice(matching, func(i, j int) bool {
+		parts1 := strings.Split(matching[i], "/")
+		parts2 := strings.Split(matching[j], "/")
 		return len(parts1) < len(parts2)
 	})
-	// Sort the strings based on the number of elements after splitting by "/"
-	sort.Slice(matchingDirs, func(i, j int) bool {
-		parts1 := strings.Split(matchingDirs[i], "/")
-		parts2 := strings.Split(matchingDirs[j], "/")
-		return len(parts1) < len(parts2)
-	})
-	return matchingFiles, matchingDirs, fileListTypes
+	return matching, fileListTypes
 }
 
 func scopedPathNameFilter(pathName string, scope string) string {
@@ -182,24 +175,25 @@ func scopedPathNameFilter(pathName string, scope string) string {
 	return pathName
 }
 
-func containsSearchTerm(pathName string, searchTerm string, conditions map[string]bool) (bool, map[string]bool) {
+func containsSearchTerm(pathName string, searchTerm string, conditions map[string]bool, isDir bool) (bool, map[string]bool) {
 	path 					:= getLastPathComponent(pathName)
 	fileTypes 				:= map[string]bool{}
 	matchesCondition 		:= false
 	extension 				:= filepath.Ext(strings.ToLower(path))
 	mimetype 				:= mime.TypeByExtension(extension)
-	filterTypes 			:= FilterableTypes
 	fileTypes["audio"] 		= strings.HasPrefix(mimetype, "audio")
 	fileTypes["image"]		= strings.HasPrefix(mimetype, "image")
 	fileTypes["video"] 		= strings.HasPrefix(mimetype, "video")
 	fileTypes["doc"] 		= isDoc(extension)
 	fileTypes["archive"] 	= isArchive(extension)
+	fileTypes["dir"]		= isDir
 	anyFilter 				:= false
-	for _,t := range(filterTypes){
-		if conditions[t] {
-			anyFilter = true
-			matchesCondition = fileTypes[t]
+	for t,v := range conditions {
+		if t == "exact" {
+			continue
 		}
+		matchesCondition = v == fileTypes[t]
+		anyFilter = true
 	}
 	if !anyFilter {
 		matchesCondition = true

src/backend/version/version.go

@@ -2,7 +2,7 @@ package version
 
 var (
 	// Version is the current File Browser version.
-	Version = "(0.1.0)"
+	Version = "(0.1.2)"
 	// CommitSHA is the commmit sha.
 	CommitSHA = "(unknown)"
 )

src/frontend/package.json

@@ -9,20 +9,19 @@
     "watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean"
   },
   "dependencies": {
+    "normalize.css": "^8.0.1",
+    "file-loader": "^6.2.0",
     "ace-builds": "^1.4.7",
     "clipboard": "^2.0.4",
-    "core-js": "^3.9.1",
     "css-vars-ponyfill": "^2.4.3",
     "js-base64": "^2.5.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "material-icons": "^1.10.5",
     "moment": "^2.29.4",
-    "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta",
     "pretty-bytes": "^6.0.0",
     "qrcode.vue": "^1.7.0",
-    "semver": "^7.5.3",
     "utif": "^3.1.0",
     "vue": "^2.6.10",
     "vue-async-computed": "^3.9.0",
@@ -35,11 +34,8 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "compression-webpack-plugin": "^10.0.0",
-    "file-loader": "^6.2.0",
-    "prettier": "^2.2.1",
     "vue-template-compiler": "^2.6.10"
   },
   "postcss": {

src/frontend/rollup.config.js

@@ -0,0 +1,32 @@
+import vue from 'rollup-plugin-vue'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import { terser } from "rollup-plugin-terser"
+import postcss from 'rollup-plugin-postcss'
+import babel from '@rollup/plugin-babel'
+import replace from '@rollup/plugin-replace'
+import livereload from 'rollup-plugin-livereload'
+import css from 'rollup-plugin-css-only'
+import autoprefixer from 'autoprefixer'
+
+export default {
+  input: 'src/main.js', // Entry file
+  output: {
+    file: 'dist/build.js', // Output file
+    format: 'iife', // Immediately Invoked Function Expression format suitable for <script> tag
+  },
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.VUE_ENV': '"client"'
+    }),
+    nodeResolve({ browser: true, jsnext: true }), // Resolve modules from node_modules
+    commonjs(), // Convert CommonJS modules to ES6
+    vue({ css: false }), // Handle .vue files
+    css({ output: 'bundle.css' }), // css to separate file
+    postcss({ plugins: [autoprefixer()]}),
+    babel({ babelHelpers: 'bundled' }), // Transpile to ES5
+    terser(), // Minify the build
+    livereload('dist') // Live reload for development
+  ],
+}

src/frontend/src/components/Search.vue

@@ -1,72 +1,50 @@
 <template>
   <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
-      <button
-        v-if="active"
-        class="action"
-        @click="close"
-        :aria-label="$t('buttons.close')"
-        :title="$t('buttons.close')"
-      >
+      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
         <i class="material-icons">arrow_back</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input
-        type="text"
-        @keyup.exact="keyup"
-        @input="submit"
-        ref="input"
-        :autofocus="active"
-        v-model.trim="value"
-        :aria-label="$t('search.search')"
-        :placeholder="$t('search.search')"
-      />
+      <input type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active" v-model.trim="value"
+        :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
     </div>
 
     <div id="result" ref="result">
       <div id="result-list">
         <br>
         <br>
+        <div class="button" style="width:100%">Search Context: {{ getContext(this.$route.path) }}</div>
         <template v-if="isEmpty">
           <p>{{ text }}</p>
-
           <template v-if="value.length === 0">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
-                <div
-                  tabindex="0"
-                  v-for="(v, k) in boxes"
-                  :key="k"
-                  role="button"
-                  @click="init('type:' + k)"
-                  :aria-label="$t('search.' + v.label)"
-                >
+                <div tabindex="0" v-for="(v, k) in boxes" :key="k" role="button" @click="init('type:' + k)"
+                  :aria-label="(v.label)">
                   <i class="material-icons">{{ v.icon }}</i>
-                  <p>{{ $t("search." + v.label) }}</p>
+                  <p>{{ v.label }}</p>
                 </div>
               </div>
             </div>
           </template>
         </template>
-        <ul v-show="filteredResults.length > 0">
-          <div>Searching Scope : {{ path }}</div>
-          <li v-for="(s, k) in filteredResults" :key="k" @click="navigate(s.url,$event)" style="cursor: pointer;">
-            <router-link :to="s.url">
+        <ul v-show="results.length > 0">
+          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+            <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
               <i v-else-if="s.image" class="material-icons image-icons"> photo </i>
               <i v-else-if="s.video" class="material-icons video-icons"> movie </i>
               <i v-else-if="s.archive" class="material-icons archive-icons"> archive </i>
               <i v-else class="material-icons file-icons"> insert_drive_file </i>
-              {{ s.path }}
+              <span class="text-container">
+                {{ basePath(s.path) }}<b>{{ baseName(s.path) }}</b>
+              </span>
             </router-link>
           </li>
         </ul>
       </div>
-      <p id="renew">
-        <i class="material-icons spin">autorenew</i>
-      </p>
     </div>
   </div>
 </template>
@@ -77,10 +55,13 @@ import url from "@/utils/url";
 import { search } from "@/api";
 
 var boxes = {
-  image: { label: "images", icon: "insert_photo" },
-  audio: { label: "music", icon: "volume_up" },
-  video: { label: "video", icon: "movie" },
-  pdf: { label: "pdf", icon: "picture_as_pdf" },
+  folder: { label: "folders", icon: "folder" },
+  file: { label: "files", icon: "insert_drive_file" },
+  archive: { label: "archives", icon: "archive" },
+  image: { label: "images", icon: "photo" },
+  audio: { label: "audio files", icon: "volume_up" },
+  video: { label: "videos", icon: "movie" },
+  doc: { label: "documents", icon: "picture_as_pdf" },
 };
 
 export default {
@@ -139,9 +120,6 @@ export default {
         ? this.$t("search.typeToSearch")
         : this.$t("search.pressToSearch");
     },
-    filteredResults() {
-      return this.results.slice(0, this.resultsCount);
-    },
   },
   mounted() {
     this.$refs.result.addEventListener("scroll", (event) => {
@@ -154,26 +132,38 @@ export default {
     });
   },
   methods: {
+    async navigateTo(url) {
+      this.closeHovers();
+      await this.$nextTick();
+      setTimeout(() => this.$router.push(url), 0);
+    },
+    getContext(url) {
+      url = url.slice(1)
+      let path = "./" + url.substring(url.indexOf('/') + 1);
+      return path.replace(/\/+$/, '') + "/"
+    },
+    basePath(str) {
+      let parts = str.replace(/\/$/, '').split("/")
+      parts.pop()
+      return parts.join("/") + "/"
+    },
+    baseName(str) {
+      let parts = str.replace(/\/$/, '').split("/")
+      return parts.pop();
+    },
     ...mapMutations(["showHover", "closeHovers", "setReload"]),
     open() {
       this.showHover("search");
     },
     close(event) {
       event.stopPropagation();
-      event.preventDefault();
-      console.log("closing")
       this.closeHovers();
     },
-    navigate(url, event) {
-      this.close(event); // pass the event object to the close method
-      this.$router.push(url);
-    },
     keyup(event) {
       if (event.keyCode === 27) {
         this.close(event);
         return;
       }
-
       this.results.length === 0;
     },
     init(string) {

src/frontend/src/css/header.css

@@ -1,6 +1,5 @@
 header {
   z-index: 1000;
-  background-color: #fff;
   border-bottom: 1px solid rgba(0, 0, 0, 0.075);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   position: fixed;
@@ -12,6 +11,7 @@ header {
   display: flex;
   padding: 0.5em 0.5em 0.5em 1em;
   align-items: center;
+  backdrop-filter: blur(6px);
 }
 
 header > * {
@@ -119,11 +119,20 @@ header .menu-button {
 #result-list {
   width: 60em;
   max-width: 100%;
-  padding: 0.5em;
+  padding-top: 3em;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
+.text-container {
+  white-space: nowrap;       /* Prevents the text from wrapping */
+  overflow: hidden;         /* Hides the content that exceeds the div size */
+  text-overflow: ellipsis;  /* Adds "..." when the text overflows */
+  width: 100%;              /* Ensures the content takes the full width available */
+  text-align: left;
+  direction: rtl;
+}
+
 #search #result {
   overflow: hidden;
   background: white;
@@ -165,8 +174,7 @@ body.rtl #search #result ul>* {
 }
 
 #search.active #result {
-  padding: .5em;
-  height: 100%
+  height: 100vh
 }
 
 #search ul {
@@ -176,7 +184,7 @@ body.rtl #search #result ul>* {
 }
 
 #search li {
-  margin-bottom: .5em;
+  margin: .5em;
 }
 
 #search #result #renew {

src/frontend/src/views/files/Listing.vue

@@ -805,9 +805,7 @@ export default {
         prompt: "download",
         confirm: (format) => {
           this.$store.commit("closeHovers");
-
           let files = [];
-
           if (this.selectedCount > 0) {
             for (let i of this.selected) {
               files.push(this.req.items[i].url);
@@ -822,7 +820,6 @@ export default {
     },
     switchView: async function () {
       this.$store.commit("closeHovers");
-
       const modes = {
         list: "mosaic",
         mosaic: "mosaic gallery",