Merge pull request #6 from gtsteffaniak/v0.1.3

v0.1.3 updated styling
2023-07-30 17:41:18 -05:00 · 2023-07-30 17:41:18 -05:00 · 8efec9317b
parent e8739b5dd1 a3652a772d
commit 8efec9317b
22 changed files with 774 additions and 656 deletions
--- a/.gitignore
+++ b/.gitignore
@ -5,8 +5,9 @@ rice-box.go
 .idea/
 /filebrowser
 /filebrowser.exe
-/dist
-/src/backend/vendor
+/frontend/dist
+/backend/vendor
+

 .DS_Store
 node_modules
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,16 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## v0.1.2
+
+ - improved styling, colors, transparency, blur
+ - made sidebar hidden on desktop as well
+ - simplified navbar to be three buttons
+   - open menu
+   - search
+   - toggle view
+ - moved every config to the configfile
+   - rather than flag/binary operation
 ## v0.1.2

 - Updated UI to use search features better
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-## Gtstef fork of filebrowser
+## Gtstef / filebrowser

 **Note: Intended to be used in docker only.**

@ -8,19 +8,26 @@ This fork makes the following significant changes to filebrowser for origin:
    - [x] Lightning fast
    - [x] Realtime results as you type
    - [x] Works with file type filter
+    - [x] better desktop search view
 1. [ ] Preview enhancements
-    - preview default view is constrained to files subwindow,
+    - Preview default view is constrained to files subwindow,
    which can be toggled to fullscreen.
+ 1. [x] Improved and simplified GUI
+    - Moved all action buttons to file action bar except for switch-view
+    - Simplified navbar to 3 main actions: settings,search, and switch-view
 1. [x] Updated version and dependencies
-    - [x] uses latest npm and node version
-    - [x] removes deprecated npm packages
+    - [x] Uses latest npm and node version
+    - [x] Removes deprecated npm packages
    - [x] Updates golang dependencies
- 1. [ ] Added authentication type
-    - [ ] Using bearer token with remote authentication server
+ 1. [ ] Moved all configurations to filebrowser.json.
+  no more flags or binary operations to db

 ## About

-filebrowser provides a file managing interface within a specified directory and it can be used to upload, delete, preview, rename and edit your files. It allows the creation of multiple users and each user can have its own directory. It can be used as a standalone app.
+Filebrowser provides a file managing interface within a specified directory 
+and it can be used to upload, delete, preview, rename and edit your files. 
+It allows the creation of multiple users and each user can have its own 
+directory. It can be used as a standalone app.

 ## Install

@ -29,7 +36,7 @@ Using docker:
 1. docker run:

 ```
-docker run -it -v /path/to/folder:/srv -p 8080:80 gtstef/filebrowser:0.1.0
+docker run -it -v /path/to/folder:/srv -p 8080:80 gtstef/filebrowser:0.1.3
 ```

 1. docker-compose:
@ -43,10 +50,10 @@ services:
    volumes:
      - '/path/to/folder:/srv'
      #- './database/:/database/'
-      #- './config.json:/.filebrowser.json'
+      - './config.json:/.filebrowser.json'
    ports:
      - '8080:80'
-    image: gtstef/filebrowser:0.1.0
+    image: gtstef/filebrowser:0.1.3
 ```

  - with network share
@ -61,7 +68,7 @@ services:
      #- './config.json:/.filebrowser.json'
    ports:
      - '8080:80'
-    image: gtstef/filebrowser:0.1.0
+    image: gtstef/filebrowser:0.1.3
 volumes:
  nas:
    driver_opts:
@ -72,3 +79,12 @@ volumes:

 ## Configuration

+All configuration is now done via the filebrowser.json config file. 
+This was chosen because it works best with a docker first use case.
+
+Previously the primary way to configure filebrowser was via flags. 
+But this quickly became cumbersome if you had many configurations to make
+
+The other method to configure was via `filebrowser config` commands which 
+would write configurations to a db if it existed already.
+When considering
--- a/backend/frontend/dist
+++ b/backend/frontend/dist
@ -0,0 +1 @@
+../../frontend/dist
--- a/backend/frontend/dist/.gitignore
+++ b/backend/frontend/dist/.gitignore
@ -1,4 +0,0 @@
-# Ignore everything in this directory
-*
-# Except this file
-!.gitignore
--- a/backend/search/conditions.go
+++ b/backend/search/conditions.go
@ -26,9 +26,9 @@ var compressedFile = []string{
 }

 type searchOptions struct {
-	Conditions    map[string]bool
+	Conditions    	map[string]bool
 	Size 			int
-	Terms         []string
+	Terms         	[]string
 }

 func ParseSearch(value string) *searchOptions {
@ -59,6 +59,7 @@ func ParseSearch(value string) *searchOptions {
 			case "folder"			: opts.Conditions["dir"] 		= true
 			case "file"				: opts.Conditions["dir"] 		= false
 		}
+		
 		if len(filter) < 8 {
 			continue
 		}
@ -90,7 +91,8 @@ func ParseSearch(value string) *searchOptions {
 		opts.Terms = []string{unique}
 		return opts
 	}
-
+	re := regexp.MustCompile(` +`)
+	value = re.ReplaceAllString(value, " ")
 	opts.Terms = strings.Split(value, " ")
 	return opts
 }
--- a/backend/version/version.go
+++ b/backend/version/version.go
@ -2,7 +2,7 @@ package version

 var (
 	// Version is the current File Browser version.
-	Version = "(0.1.2)"
+	Version = "(0.1.3)"
 	// CommitSHA is the commmit sha.
 	CommitSHA = "(unknown)"
 )
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -11,11 +11,13 @@
        "ace-builds": "^1.4.7",
        "clipboard": "^2.0.4",
        "css-vars-ponyfill": "^2.4.3",
+        "file-loader": "^6.2.0",
        "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",
@ -395,7 +397,6 @@
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/set-array": "^1.0.1",
        "@jridgewell/sourcemap-codec": "^1.4.10",
@ -409,7 +410,6 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "dev": true,
      "engines": {
        "node": ">=6.0.0"
      }
@ -418,7 +418,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
      "engines": {
        "node": ">=6.0.0"
      }
@ -427,7 +426,6 @@
      "version": "0.3.5",
      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/gen-mapping": "^0.3.0",
        "@jridgewell/trace-mapping": "^0.3.9"
@ -436,14 +434,12 @@
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.4.15",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.18",
      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/resolve-uri": "3.1.0",
        "@jridgewell/sourcemap-codec": "1.4.14"
@ -452,8 +448,7 @@
    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.4.14",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "dev": true
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
    },
    "node_modules/@leichtgewicht/ip-codec": {
      "version": "2.0.4",
@ -674,10 +669,9 @@
      }
    },
    "node_modules/@types/eslint": {
-      "version": "8.44.0",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz",
-      "integrity": "sha512-gsF+c/0XOguWgaOgvFs+xnnRqt9GwgTvIks36WpE6ueeI4KCEHHd8K/CKHqhOqrJKsYH8m27kRzQEvWXAwXUTw==",
-      "dev": true,
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.1.tgz",
+      "integrity": "sha512-XpNDc4Z5Tb4x+SW1MriMVeIsMoONHCkWFMkR/aPJbzEsxqHy+4Glu/BqTdPrApfDeMaXbtNh6bseNgl5KaWrSg==",
      "dependencies": {
        "@types/estree": "*",
        "@types/json-schema": "*"
@ -687,7 +681,6 @@
      "version": "3.7.4",
      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "dev": true,
      "dependencies": {
        "@types/eslint": "*",
        "@types/estree": "*"
@ -696,8 +689,7 @@
    "node_modules/@types/estree": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
-      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
-      "dev": true
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA=="
    },
    "node_modules/@types/express": {
      "version": "4.17.17",
@ -747,8 +739,7 @@
    "node_modules/@types/json-schema": {
      "version": "7.0.12",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
-      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
-      "dev": true
+      "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
    },
    "node_modules/@types/mime": {
      "version": "1.3.2",
@ -763,10 +754,9 @@
      "dev": true
    },
    "node_modules/@types/node": {
-      "version": "20.4.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz",
-      "integrity": "sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==",
-      "dev": true
+      "version": "20.4.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.5.tgz",
+      "integrity": "sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg=="
    },
    "node_modules/@types/normalize-package-data": {
      "version": "2.4.1",
@ -1211,7 +1201,6 @@
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/helper-numbers": "1.11.6",
        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
@ -1220,26 +1209,22 @@
    "node_modules/@webassemblyjs/floating-point-hex-parser": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
-      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==",
-      "dev": true
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
    },
    "node_modules/@webassemblyjs/helper-api-error": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
-      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==",
-      "dev": true
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
    },
    "node_modules/@webassemblyjs/helper-buffer": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
-      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==",
-      "dev": true
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA=="
    },
    "node_modules/@webassemblyjs/helper-numbers": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
        "@webassemblyjs/helper-api-error": "1.11.6",
@ -1249,14 +1234,12 @@
    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
-      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==",
-      "dev": true
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
    },
    "node_modules/@webassemblyjs/helper-wasm-section": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.11.6",
        "@webassemblyjs/helper-buffer": "1.11.6",
@ -1268,7 +1251,6 @@
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
-      "dev": true,
      "dependencies": {
        "@xtuc/ieee754": "^1.2.0"
      }
@ -1277,7 +1259,6 @@
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
-      "dev": true,
      "dependencies": {
        "@xtuc/long": "4.2.2"
      }
@ -1285,14 +1266,12 @@
    "node_modules/@webassemblyjs/utf8": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
-      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==",
-      "dev": true
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
    },
    "node_modules/@webassemblyjs/wasm-edit": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.11.6",
        "@webassemblyjs/helper-buffer": "1.11.6",
@ -1308,7 +1287,6 @@
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.11.6",
        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
@ -1321,7 +1299,6 @@
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.11.6",
        "@webassemblyjs/helper-buffer": "1.11.6",
@ -1333,7 +1310,6 @@
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.11.6",
        "@webassemblyjs/helper-api-error": "1.11.6",
@ -1347,7 +1323,6 @@
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
-      "dev": true,
      "dependencies": {
        "@webassemblyjs/ast": "1.11.6",
        "@xtuc/long": "4.2.2"
@ -1356,14 +1331,12 @@
    "node_modules/@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
    },
    "node_modules/@xtuc/long": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
    },
    "node_modules/accepts": {
      "version": "1.3.8",
@ -1387,7 +1360,6 @@
      "version": "8.10.0",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-      "dev": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@ -1399,7 +1371,6 @@
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
-      "dev": true,
      "peerDependencies": {
        "acorn": "^8"
      }
@ -1649,7 +1620,6 @@
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true,
      "engines": {
        "node": "*"
      }
@ -1772,7 +1742,6 @@
      "version": "4.21.9",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
      "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -1827,8 +1796,7 @@
    "node_modules/buffer-from": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
    },
    "node_modules/bytes": {
      "version": "3.0.0",
@ -1884,10 +1852,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001515",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001515.tgz",
-      "integrity": "sha512-eEFDwUOZbE24sb+Ecsx3+OvNETqjWIdabMy52oOkIgcUtAsQifjUG9q4U9dgTHJM2mfk4uEPxc0+xuFdJ629QA==",
-      "dev": true,
+      "version": "1.0.30001517",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz",
+      "integrity": "sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==",
      "funding": [
        {
          "type": "opencollective",
@ -1969,7 +1936,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true,
      "engines": {
        "node": ">=6.0"
      }
@ -3075,10 +3041,9 @@
      "dev": true
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.459",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.459.tgz",
-      "integrity": "sha512-XXRS5NFv8nCrBL74Rm3qhJjA2VCsRFx0OjHKBMPI0otij56aun8UWiKTDABmd5/7GTR021pA4wivs+Ri6XCElg==",
-      "dev": true
+      "version": "1.4.477",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.477.tgz",
+      "integrity": "sha512-shUVy6Eawp33dFBFIoYbIwLHrX0IZ857AlH9ug2o4rvbWmpaCUdBpQ5Zw39HRrfzAFm4APJE9V+E2A/WB0YqJw=="
    },
    "node_modules/emoji-regex": {
      "version": "8.0.0",
@ -3090,7 +3055,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true,
      "engines": {
        "node": ">= 4"
      }
@ -3117,7 +3081,6 @@
      "version": "5.15.0",
      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
-      "dev": true,
      "dependencies": {
        "graceful-fs": "^4.2.4",
        "tapable": "^2.2.0"
@ -3156,14 +3119,12 @@
    "node_modules/es-module-lexer": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz",
-      "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==",
-      "dev": true
+      "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA=="
    },
    "node_modules/escalade": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
      "engines": {
        "node": ">=6"
      }
@ -3187,7 +3148,6 @@
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
      "dependencies": {
        "esrecurse": "^4.3.0",
        "estraverse": "^4.1.1"
@ -3200,7 +3160,6 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
      "dependencies": {
        "estraverse": "^5.2.0"
      },
@ -3212,7 +3171,6 @@
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
      "engines": {
        "node": ">=4.0"
      }
@ -3221,7 +3179,6 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
      "engines": {
        "node": ">=4.0"
      }
@ -3254,7 +3211,6 @@
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
      "engines": {
        "node": ">=0.8.x"
      }
@ -3343,13 +3299,12 @@
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
    "node_modules/fast-glob": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
-      "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
      "dev": true,
      "dependencies": {
        "@nodelib/fs.stat": "^2.0.2",
@ -3377,8 +3332,7 @@
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
    },
    "node_modules/fastq": {
      "version": "1.15.0",
@ -3413,6 +3367,83 @@
        "node": ">=4"
      }
    },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/file-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/file-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -3655,8 +3686,7 @@
    "node_modules/glob-to-regexp": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
    },
    "node_modules/globals": {
      "version": "11.12.0",
@ -3699,8 +3729,7 @@
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
    },
    "node_modules/gzip-size": {
      "version": "6.0.0",
@ -4278,7 +4307,6 @@
      "version": "27.5.1",
      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
      "dependencies": {
        "@types/node": "*",
        "merge-stream": "^2.0.0",
@ -4292,7 +4320,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -4301,7 +4328,6 @@
      "version": "8.1.1",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
      "dependencies": {
        "has-flag": "^4.0.0"
      },
@ -4367,8 +4393,7 @@
    "node_modules/json-parse-even-better-errors": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
    },
    "node_modules/json-schema-traverse": {
      "version": "1.0.0",
@ -4380,7 +4405,6 @@
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
      "bin": {
        "json5": "lib/cli.js"
      },
@ -4456,7 +4480,6 @@
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
      "engines": {
        "node": ">=6.11.5"
      }
@ -4760,9 +4783,9 @@
      }
    },
    "node_modules/material-icons": {
-      "version": "1.13.8",
-      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.8.tgz",
-      "integrity": "sha512-vnLGXKa/AwFUxUgkiX39EpYVFttPhDQcKdVylIqmUUqz+Eo/O9A3BkdPCU3/G5cJOTezHi5B/b8sEpKYgUNAwQ=="
+      "version": "1.13.9",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.9.tgz",
+      "integrity": "sha512-dwuf2C8LR07FcrjRDx0vWnDEcHiDuamXOmtAck8bdONUv5Fi6wR/ubQwPfG1NbcqgPg+y0fHN8Unj5DO+5fV4w=="
    },
    "node_modules/mdn-data": {
      "version": "2.0.14",
@ -4809,8 +4832,7 @@
    "node_modules/merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
    },
    "node_modules/merge2": {
      "version": "1.4.1",
@ -4859,7 +4881,6 @@
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
      "engines": {
        "node": ">= 0.6"
      }
@ -4868,7 +4889,6 @@
      "version": "2.1.35",
      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
      "dependencies": {
        "mime-db": "1.52.0"
      },
@ -5043,8 +5063,7 @@
    "node_modules/neo-async": {
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
    },
    "node_modules/nice-try": {
      "version": "1.0.5",
@ -5094,8 +5113,7 @@
    "node_modules/node-releases": {
      "version": "2.0.13",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
-      "dev": true
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
    },
    "node_modules/normalize-package-data": {
      "version": "2.5.0",
@ -5148,6 +5166,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
    "node_modules/noty": {
      "version": "3.2.0-beta-deprecated",
      "resolved": "https://registry.npmjs.org/noty/-/noty-3.2.0-beta-deprecated.tgz",
@ -5598,9 +5621,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.25",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz",
-      "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==",
+      "version": "8.4.27",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
+      "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
      "funding": [
        {
          "type": "opencollective",
@ -6179,9 +6202,9 @@
      }
    },
    "node_modules/pretty-bytes": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.0.tgz",
-      "integrity": "sha512-Rk753HI8f4uivXi4ZCIYdhmG1V+WKzvRMg/X+M42a6t7D07RcmopXJMDNk6N++7Bl75URRGsb40ruvg7Hcp2wQ==",
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
+      "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==",
      "engines": {
        "node": "^14.13.1 || >=16.0.0"
      },
@ -6264,7 +6287,6 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-      "dev": true,
      "engines": {
        "node": ">=6"
      }
@ -6316,7 +6338,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
      "dependencies": {
        "safe-buffer": "^5.1.0"
      }
@ -6567,7 +6588,6 @@
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@ -6689,7 +6709,6 @@
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
-      "dev": true,
      "dependencies": {
        "randombytes": "^2.1.0"
      }
@ -6909,7 +6928,6 @@
      "version": "0.5.21",
      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
      "dependencies": {
        "buffer-from": "^1.0.0",
        "source-map": "^0.6.0"
@ -7138,16 +7156,14 @@
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
      "engines": {
        "node": ">=6"
      }
    },
    "node_modules/terser": {
-      "version": "5.19.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.0.tgz",
-      "integrity": "sha512-JpcpGOQLOXm2jsomozdMDpd5f8ZHh1rR48OFgWUH3QsyZcfPgv2qDCYbcDEAYNd4OZRj2bWYKpwdll/udZCk/Q==",
-      "dev": true,
+      "version": "5.19.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.2.tgz",
+      "integrity": "sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==",
      "dependencies": {
        "@jridgewell/source-map": "^0.3.3",
        "acorn": "^8.8.2",
@ -7165,7 +7181,6 @@
      "version": "5.3.9",
      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz",
      "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/trace-mapping": "^0.3.17",
        "jest-worker": "^27.4.5",
@ -7199,7 +7214,6 @@
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "fast-json-stable-stringify": "^2.0.0",
@ -7215,7 +7229,6 @@
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
      "peerDependencies": {
        "ajv": "^6.9.1"
      }
@ -7223,14 +7236,12 @@
    "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
    },
    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
      "dependencies": {
        "@types/json-schema": "^7.0.8",
        "ajv": "^6.12.5",
@ -7247,8 +7258,7 @@
    "node_modules/terser/node_modules/commander": {
      "version": "2.20.3",
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
    },
    "node_modules/thenify": {
      "version": "3.3.1",
@ -7415,9 +7425,9 @@
      "dev": true
    },
    "node_modules/tslib": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
-      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
+      "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==",
      "dev": true
    },
    "node_modules/type-fest": {
@ -7464,7 +7474,6 @@
      "version": "1.0.11",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@ -7494,7 +7503,6 @@
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
      "dependencies": {
        "punycode": "^2.1.0"
      }
@ -7744,7 +7752,6 @@
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "dev": true,
      "dependencies": {
        "glob-to-regexp": "^0.4.1",
        "graceful-fs": "^4.1.2"
@ -7778,10 +7785,9 @@
      "dev": true
    },
    "node_modules/webpack": {
-      "version": "5.88.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.1.tgz",
-      "integrity": "sha512-FROX3TxQnC/ox4N+3xQoWZzvGXSuscxR32rbzjpXgEzWudJFEJBpdlkkob2ylrv5yzzufD1zph1OoFsLtm6stQ==",
-      "dev": true,
+      "version": "5.88.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
+      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
      "dependencies": {
        "@types/eslint-scope": "^3.7.3",
        "@types/estree": "^1.0.0",
@ -8060,7 +8066,6 @@
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
      "engines": {
        "node": ">=10.13.0"
      }
@ -8075,7 +8080,6 @@
      "version": "6.12.6",
      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "fast-json-stable-stringify": "^2.0.0",
@ -8091,7 +8095,6 @@
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
      "peerDependencies": {
        "ajv": "^6.9.1"
      }
@ -8099,14 +8102,12 @@
    "node_modules/webpack/node_modules/json-schema-traverse": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
    },
    "node_modules/webpack/node_modules/schema-utils": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
      "dependencies": {
        "@types/json-schema": "^7.0.8",
        "ajv": "^6.12.5",
@ -8144,9 +8145,9 @@
      }
    },
    "node_modules/whatwg-fetch": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
-      "integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
+      "version": "3.6.17",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.17.tgz",
+      "integrity": "sha512-c4ghIvG6th0eudYwKZY5keb81wtFz9/WeAHAoy8+r18kcWlitUIrmGFQ2rWEl4UCKUilD3zCLHOIPheHx5ypRQ=="
    },
    "node_modules/whatwg-url": {
      "version": "5.0.0",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,8 +9,6 @@
    "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",
    "css-vars-ponyfill": "^2.4.3",
--- a/frontend/public/themes/dark.css
+++ b/frontend/public/themes/dark.css
@ -3,7 +3,6 @@
  --surfacePrimary: #20292F;
  --surfaceSecondary: #3A4147;
  --divider: rgba(255, 255, 255, 0.12);
-  --icon: #ffffff;
  --textPrimary: rgba(255, 255, 255, 0.87);
  --textSecondary: rgba(255, 255, 255, 0.6);
 }
@ -16,9 +15,6 @@ body {
 #loading {
  background: var(--background);
 }
-#loading .spinner div, main .spinner div {
-  background: var(--icon);
-}

 #login {
  background: var(--background);
@ -28,6 +24,13 @@ header {
  background: var(--surfacePrimary);
 }

+@supports (backdrop-filter: none) {
+  header {
+    background: transparent;
+    backdrop-filter: blur(16px) invert(0.1);
+  }
+}
+
 #search #input {
  background: var(--surfaceSecondary);
  border-color: var(--surfacePrimary);
@ -58,9 +61,7 @@ header {
 .action:hover {
  background-color: rgba(255, 255, 255, .1);
 }
-.action i {
-  color: var(--icon) !important;
-}
+
 .action .counter {
  border-color: var(--surfacePrimary);
 }
@ -85,9 +86,7 @@ nav > div {
  color: var(--textPrimary);
  border-color: var(--divider) !important;
 }
-#listing .item i {
-  color: var(--icon);
-}
+
 #listing .item .modified {
  color: var(--textSecondary);
 }
@ -98,9 +97,7 @@ nav > div {
 #listing.list .header span {
  color: var(--textPrimary);
 }
-#listing.list .header i {
-  color: var(--icon);
-}
+
 #listing.list .item.header {
  background: var(--background);
 }
@ -123,6 +120,9 @@ nav > div {
 .dashboard #nav ul li:hover {
  background: var(--surfaceSecondary);
 }
+#result-list {
+  background-color:#292929;
+}

 .card h3,
 .dashboard #nav,
@ -166,9 +166,6 @@ table th {
 .file-list li:before {
  color: var(--textSecondary);
 }
-.file-list li[aria-selected=true]:before {
-  color: var(--icon);
-}

 .shell {
  background: var(--surfacePrimary);
@ -185,20 +182,22 @@ table th {
 #editor-container .bar {
  background: var(--surfacePrimary);
 }
+nav {
+  background: var(--surfaceSecondary) !important;
+}

-@media (max-width: 736px) {
-  #file-selection {
-    background: var(--surfaceSecondary) !important;
-  }
-  #file-selection span {
-    color: var(--textPrimary) !important;
-  }
-  nav {
-    background: var(--surfaceSecondary) !important;
-  }
-  #dropdown {
-    background: var(--surfaceSecondary) !important;
-  }
+#file-selection {
+  background: var(--surfaceSecondary) !important;
+}
+#file-selection span {
+  color: var(--textPrimary) !important;
+}
+#dropdown {
+  background: var(--surfaceSecondary) !important;
+}
+
+.button-group button {
+  background-color:darkgray;
 }

 .share__box {
--- a/frontend/src/components/ButtonGroup.vue
+++ b/frontend/src/components/ButtonGroup.vue
@ -0,0 +1,94 @@
+<template>
+  <div class="button-group">
+    <button
+      v-for="(btn, index) in buttons"
+      :key="index"
+      :class="{ active: activeButton === index }"
+      @click="setActiveButton(index)"
+    >
+      {{ btn.label }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    buttons: {
+      type: Array,
+      default: () => [],
+    },
+    initialActive: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      activeButton: this.initialActive,
+    };
+  },
+  methods: {
+    setActiveButton(index) {
+      // If the clicked button is already active, de-select it
+      if (this.activeButton === index) {
+        this.activeButton = null;
+        this.$emit("remove-button-clicked", this.buttons[index].value);
+      } else {
+        // Emit remove-button-clicked for all other indexes
+        this.buttons.forEach((button, idx) => {
+          if (idx !== index) {
+            this.$emit("remove-button-clicked", button.value);
+          }
+        });
+
+        this.activeButton = index;
+        this.$emit("button-clicked", this.buttons[index].value);
+      }
+    },
+  },
+  watch: {
+    initialActive: {
+      immediate: true,
+      handler(newVal) {
+        this.activeButton = newVal;
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+button {
+  flex: 1;
+  height: 3em;
+  padding: 8px 16px;
+  border: none;
+  background-color: #f5f5f5;
+  transition: background-color 0.3s;
+
+  /* Add borders */
+  border-right: 1px solid #ccc;
+}
+
+/* Remove the border from the last button */
+.button-group > button:last-child {
+  border-right: none;
+}
+
+button:hover {
+  background-color: #e0e0e0;
+}
+
+button.active {
+  background-color: var(--blue);
+  color: #ffffff;
+}
+</style>
--- a/frontend/src/components/Search.vue
+++ b/frontend/src/components/Search.vue
@ -1,36 +1,39 @@
 <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')">
-        <i class="material-icons">arrow_back</i>
+      <button
+        v-if="active"
+        class="action"
+        @click="close"
+        :aria-label="$t('buttons.close')"
+        :title="$t('buttons.close')"
+      >
+        <i class="material-icons">close</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 v-if="isMobile && active" id="result" :class="{ hidden: !active }" 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="(v.label)">
-                  <i class="material-icons">{{ v.icon }}</i>
-                  <p>{{ v.label }}</p>
-                </div>
-              </div>
-            </div>
-          </template>
-        </template>
+        <div class="button" style="width: 100%">
+          Search Context: {{ getContext(this.$route.path) }}
+        </div>
        <ul v-show="results.length > 0">
-          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+          <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>
@ -44,12 +47,83 @@
            </router-link>
          </li>
        </ul>
+        <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="v.label"
+                >
+                  <i class="material-icons">{{ v.icon }}</i>
+                  <p>{{ v.label }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
+    <div v-if="!isMobile && active" id="result-desktop" ref="result">
+      <div id="result-list">
+        <div class="button" style="width: 100%">
+          Search Context: {{ getContext(this.$route.path) }}
+        </div>
+        <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>
+              <span class="text-container">
+                {{ basePath(s.path) }}<b>{{ baseName(s.path) }}</b>
+              </span>
+            </router-link>
+          </li>
+        </ul>
+        <template >
+          <p v-show="isEmpty" >{{ text }}</p>
+          <template >
+            <div v-show="results.length == 0" class="boxes">
+              <ButtonGroup
+                :buttons="folderSelect"
+                @button-clicked="init"
+                @remove-button-clicked="removeInit"
+              />
+              <ButtonGroup
+                :buttons="typeSelect"
+                @button-clicked="init"
+                @remove-button-clicked="removeInit"
+              />
+              <ButtonGroup
+                :buttons="sizeSelect"
+                @button-clicked="init"
+                @remove-button-clicked="removeInit"
+              />
+            </div>
+          </template>
+        </template>
      </div>
    </div>
  </div>
 </template>

 <script>
+import ButtonGroup from "./ButtonGroup.vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { search } from "@/api";

@ -66,10 +140,28 @@ var boxes = {
 };

 export default {
+  components: {
+    ButtonGroup,
+  },
  name: "search",
  data: function () {
    return {
+      folderSelect: [
+        { label: "Only Folders", value: "type:folder" },
+        { label: "Only Files", value: "type:file" },
+      ],
+      typeSelect: [
+        { label: "Archives", value: "type:archive" },
+        { label: "Audio Files", value: "type:audio" },
+        { label: "Videos", value: "type:video" },
+        { label: "Documents", value: "type:docs" },
+      ],
+      sizeSelect: [
+        { label: "Smaller than 100MB", value: "type:smaller=100" },
+        { label: "Larger than 100MB", value: "type:larger=100" },
+      ],
      value: "",
+      width: window.innerWidth,
      active: false,
      ongoing: false,
      results: [],
@ -120,42 +212,42 @@ export default {
        ? this.$t("search.typeToSearch")
        : this.$t("search.pressToSearch");
    },
+    isMobile() {
+      return this.width <= 800;
+    },
  },
  mounted() {
-    this.$refs.result.addEventListener("scroll", (event) => {
-      if (
-        event.target.offsetHeight + event.target.scrollTop >=
-        event.target.scrollHeight - 100
-      ) {
-        this.resultsCount += 50;
-      }
-    });
+    window.addEventListener("resize", this.handleResize);
+    this.handleResize(); // Call this once to set the initial width
  },
  methods: {
+    handleResize() {
+      this.width = window.innerWidth;
+    },
    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(/\/+$/, '') + "/"
+      url = url.slice(1);
+      let path = "./" + url.substring(url.indexOf("/") + 1);
+      return path.replace(/\/+$/, "") + "/";
    },
    basePath(str) {
-      if (!str.includes("/")){
-        return ""
+      if (!str.includes("/")) {
+        return "";
      }
-      let parts = str.replace(/\/$/, '').split("/")
-      parts.pop()
-      return parts.join("/") + "/"
+      let parts = str.replace(/\/$/, "").split("/");
+      parts.pop();
+      return parts.join("/") + "/";
    },
    baseName(str) {
-      let parts = str.split("/")
+      let parts = str.split("/");
      if (str.endsWith("/")) {
-        return parts[parts.length - 2] + "/"
+        return parts[parts.length - 2] + "/";
      } else {
-        return parts[parts.length - 1]
+        return parts[parts.length - 1];
      }
    },
    ...mapMutations(["showHover", "closeHovers", "setReload"]),
@ -174,8 +266,22 @@ export default {
      this.results.length === 0;
    },
    init(string) {
-      this.value = `${string} `;
-      this.$refs.input.focus();
+      if (string == null || string == ""){
+        return false
+      }
+      this.value = `${string} ${this.value}`;
+      if (this.isMobile){
+        this.$refs.input.focus();
+      }
+    },
+    removeInit(string) {
+      if (string == null || string == ""){
+        return false
+      }
+      this.value = this.value.replace(string+" ", "");
+      if (this.isMobile){
+        this.$refs.input.focus();
+      }
    },
    reset() {
      this.ongoing = false;
@ -184,7 +290,7 @@ export default {
    },
    async submit(event) {
      event.preventDefault();
-      const words = this.value.split(" ").filter(word => word.length < 3);
+      const words = this.value.split(" ").filter((word) => word.length < 3);
      if (this.value === "" || words.length > 0) {
        return;
      }
@ -200,4 +306,4 @@ export default {
    },
  },
 };
-</script>
+</script>
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@ -1,6 +1,7 @@
 <template>
  <nav :class="{ active }">
    <template v-if="isLogged">
+
      <button
        class="action"
        @click="toRoot"
--- a/frontend/src/components/header/HeaderBar.vue
+++ b/frontend/src/components/header/HeaderBar.vue
@ -1,12 +1,10 @@
 <template>
  <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
    <action
-      v-if="showMenu !== undefined"
      class="menu-button"
      icon="menu"
      :label="$t('buttons.toggleSidebar')"
-      @action="openSidebar()"
+      @action="toggleSidebar()"
    />

    <slot />
@ -15,25 +13,11 @@
      <slot name="actions" />
    </div>

-    <action
-      v-if="this.$slots.actions"
-      id="more"
-      icon="more_vert"
-      :label="$t('buttons.more')"
-      @action="$store.commit('showHover', 'more')"
-    />
-
-    <div
-      class="overlay"
-      v-show="this.$store.state.show == 'more'"
-      @click="$store.commit('closeHovers')"
-    />
  </header>
 </template>

 <script>
 import { logoURL } from "@/utils/constants";
-
 import Action from "@/components/header/Action";

 export default {
@ -48,8 +32,12 @@ export default {
    };
  },
  methods: {
-    openSidebar() {
-      this.$store.commit("showHover", "sidebar");
+    toggleSidebar() {
+      if ( this.$store.state.show == "sidebar" ) {
+        this.$store.commit("closeHovers");
+      } else {
+        this.$store.commit("showHover", "sidebar");
+      }
    },
  },
 };
--- a/frontend/src/components/prompts/Prompts.vue
+++ b/frontend/src/components/prompts/Prompts.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <component ref="currentComponent" :is="currentComponent"></component>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
+    <div v-if="showOverlay" @click="resetPrompts" class="overlay"></div>
  </div>
 </template>

@ -106,7 +106,7 @@ export default {
    },
    showOverlay: function () {
      return (
-        this.show !== null && this.show !== "search" && this.show !== "more"
+        this.show !== null && this.show !== "more"
      );
    },
  },
@ -116,4 +116,4 @@ export default {
    },
  },
 };
-</script>
+</script>
--- a/frontend/src/css/_share.css
+++ b/frontend/src/css/_share.css
@ -5,7 +5,7 @@
  align-items: flex-start;
 }

-@media (max-width: 736px) {
+@media (max-width: 800px) {
  .share {
    display: block;
  }
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@ -1,3 +1,4 @@
+/* Basic Styles */
 body {
  font-family: "Roboto", sans-serif;
  padding-top: 4em;
@ -11,12 +12,6 @@ body.rtl {

 * {
  box-sizing: border-box;
-}
-
-*,
-*:hover,
-*:active,
-*:focus {
  outline: 0;
 }

@ -28,45 +23,70 @@ img {
  max-width: 100%;
 }

-audio,
-video {
+audio, video {
  width: 100%;
 }

-.mobile-only {
+.hidden {
  display: none !important;
 }

+.break-word {
+  word-break: break-all;
+}
+
+/* Container */
 .container {
  width: 95%;
  max-width: 960px;
  margin: 1em auto 0;
 }

+/* Icons */
 i.spin {
  animation: 1s spin linear infinite;
 }

+/* App Styles */
 #app {
  transition: 0.2s ease padding;
 }
-
+over
 #app.multiple {
  padding-bottom: 4em;
 }

+/* Navigation Styles */
 nav {
  width: 16em;
  position: fixed;
  top: 4em;
-  left: 0;
+  left: -17em;
+  z-index: 99999;
+  background: #fff;
+  height: 100%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  transition: .1s ease left;
 }

 body.rtl nav {
+  left: unset;
+  right: -17em;
+}
+
+nav.active {
+  left: 0;
+}
+
+body.rtl nav.active {
  left: unset;
  right: 0;
 }

+nav > div {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
 nav .action {
  width: 100%;
  display: block;
@ -83,32 +103,24 @@ body.rtl .action {
  text-align: right;
 }

-nav > div {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
 nav .action > * {
  vertical-align: middle;
 }

+/* Main Content */
 main {
-  min-height: 1em;
-  margin: 0 1em 1em auto;
-  width: calc(100% - 19em);
+  margin: 1em;
 }

 .breadcrumbs {
  height: 3em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.breadcrumbs span,
-.breadcrumbs {
  display: flex;
  align-items: center;
  color: #6f6f6f;
 }

+.breadcrumbs span,
 .breadcrumbs a {
  color: inherit;
  transition: 0.1s ease-in;
@ -127,12 +139,14 @@ body.rtl .breadcrumbs a {
  padding: 0.2em;
 }

+/* Files */
 .files {
  position: absolute;
  bottom: 30px;
  width: 100%;
 }

+/* Progress Bar */
 .progress {
  position: fixed;
  top: 0;
@ -149,6 +163,76 @@ body.rtl .breadcrumbs a {
  transition: 0.2s ease width;
 }

-.break-word {
-  word-break: break-all;
-}
+/* Animations */
+@keyframes flyInFromTop {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+#search.active #result-desktop ul li a {
+  display: flex;
+  align-items: center;
+  padding: .3em 0;
+  margin-right: .3em;
+}
+
+#result-desktop {
+  animation: flyInFromTop 0.5s forwards;
+}
+
+/* File Selection */
+#file-selection {
+  position: fixed;
+  bottom: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: -ms-flexbox;
+  -ms-flex-align: center;
+  align-items: center;
+  background: #fff;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
+  width: 95%;
+  max-width: 25em;
+  z-index: 1;
+}
+
+button {
+  flex: 1;
+  height: 3em;
+  padding: 8px 16px;
+  border: none;
+  background-color: #f5f5f5;
+  transition: background-color 0.3s;
+
+  /* Add borders */
+  border-right: 1px solid #ccc;
+}
+
+@media (min-width: 800px) {
+  #file-selection {
+    bottom: 4em;
+  }
+}
+
+#file-selection .action {
+  border-radius: 50%;
+  width: auto;
+}
+
+#file-selection > span {
+  display: inline-block;
+  margin-left: 1em;
+  color: #6f6f6f;
+  margin-right: auto;
+}
+
+#file-selection .action span {
+  display: none;
+}
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@ -295,6 +295,17 @@ body.rtl .card .card-title>*:first-child {
  opacity: 0;
 }

+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 4em;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+  animation: .3s show ease-in;
+}
+
 .card#share .action.copy-clipboard.active::after {
  opacity: 1;
 }
@ -311,22 +322,6 @@ body.rtl .card .card-title>*:first-child {
  flex: 1;
 }

-.overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-  animation: .1s show forwards;
-}
-
-
-/* * * * * * * * * * * * * * * *
- *        PROMPT - MOVE        *
- * * * * * * * * * * * * * * * */
-
 .file-list {
  max-height: 50vh;
  overflow: auto;
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@ -1,20 +1,29 @@
+/* Header */
 header {
  z-index: 1000;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  position: fixed;
+  z-index: 10000;
  top: 0;
  left: 0;
-  height: 4em;
  width: 100%;
-  padding: 0;
+  height: 4em;
  display: flex;
-  padding: 0.5em 0.5em 0.5em 1em;
  align-items: center;
-  backdrop-filter: blur(6px);
+  justify-content: space-between;
+  background-color: white;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  padding: 0.5em;
 }

-header > * {
+@supports (backdrop-filter: none) {
+  header {
+    background-color: transparent;
+    backdrop-filter: blur(16px) invert(0.1);
+  }
+}
+
+header>* {
  flex: 0 0 auto;
 }

@ -27,11 +36,6 @@ header title {
  font-size: 1.2em;
 }

-header .overlay {
-  width: 0;
-  height: 0;
-}
-
 header a,
 header a:hover {
  color: inherit;
@ -55,30 +59,14 @@ header>div div {
  position: relative;
 }

-header .search-button,
-header .menu-button {
-  display: none;
-}
-
-#more {
-  display: none;
-}
-
+/* Search */
 #search {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  max-width: 25em;
-}
-
-#search.active {
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  z-index: 9999;
+  position: absolute;
+  height: 3em;
+  width: 50%;
+  max-width: 50em;
+  left: 50%;
+  transform: translate(-50%, 0%);
 }

 #search #input {
@ -92,23 +80,6 @@ header .menu-button {
  z-index: 2;
 }

-#search.active #input {
-  border-bottom: 3px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(6px);
-  height: 4em;
-}
-
-#search.active>div {
-  border-radius: 0 !important;
-}
-
-#search #input>.action,
-#search #input>i {
-  margin-right: 0.3em;
-  user-select: none;
-}
-
 #search input {
  width: 100%;
  border: 0;
@ -116,24 +87,44 @@ header .menu-button {
  padding: 0;
 }

+#result-list p {
+  margin: 1em;
+}
 #result-list {
  width: 60em;
  max-width: 100%;
-  padding-top: 3em;
  overflow-x: hidden;
  overflow-y: auto;
+  border-color: gray;
+}
+
+@media (min-width: 800px) {
+  #result-list {
+    padding-top: 0;
+    border-radius: .5em;
+    border-width: 2px;
+    border-style: solid;
+    background-color: white;
+    margin-top: 1em;
+    max-height: 80vh;
+    left: 50%;
+    max-width: 90vw;
+    transform: translateX(-50%);
+    box-shadow: 0px 2em 50px 10px rgba(0, 0, 0, 0.3)
+  }
 }

 .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 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
  text-align: left;
  direction: rtl;
 }

 #search #result {
+  padding-top: 1em;
  overflow: hidden;
  background: white;
  display: flex;
@ -141,19 +132,12 @@ header .menu-button {
  flex-direction: column;
  align-items: center;
  text-align: left;
-  padding: 0;
  color: rgba(0, 0, 0, 0.6);
  height: 0;
  transition: .2s ease height, .2s ease padding;
  z-index: 1;
 }

-@media screen and (min-width: 800px) {
-  #search #result {
-    background: linear-gradient(to right, white 15%,lightgray 25%,lightgray 75%,white 85%);
-  }
-}
-
 body.rtl #search #result {
  direction: ltr;
 }
@ -167,16 +151,12 @@ body.rtl #search #result {
  text-align: right;
 }

-/*** RTL - Keep search result LTR because it has paths (in english) ***/
+/* Search Results */
 body.rtl #search #result ul>* {
  direction: ltr;
  text-align: left;
 }

-#search.active #result {
-  height: 100vh
-}
-
 #search ul {
  margin-top: 1em;
  padding: 0;
@ -199,38 +179,28 @@ body.rtl #search #result ul>* {
  display: block;
 }

+/* Icon Colors */
 .folder-icons {
  color: var(--icon-blue);
 }
+
 .video-icons {
  color: lightskyblue;
 }
+
 .image-icons {
  color: lightcoral;
 }
+
 .archive-icons {
  color: tan;
 }
+
 .audio-icons {
  color: plum;
 }

-#search.active #result>p>i {
-  text-align: center;
-  margin: 0 auto;
-  display: table;
-}
-
-#search.active #result ul li a {
-  display: flex;
-  align-items: center;
-  padding: .3em 0;
-}
-
-#search.active #result ul li a i {
-  margin-right: .3em;
-}
-
+/* Search Input Placeholder */
 #search::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .5);
 }
@ -249,11 +219,12 @@ body.rtl #search #result ul>* {
  color: rgba(255, 255, 255, .5);
 }

+/* Search Boxes */
 #search .boxes {
  border: 1px solid rgba(0, 0, 0, 0.075);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background: #fff;
-  margin: 1em 0;
+  margin: 1em;
 }

 #search .boxes h3 {
@ -271,9 +242,11 @@ body.rtl #search .boxes h3 {
 #search .boxes>div {
  display: flex;
  flex-wrap: wrap;
+  margin: 1em;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 40em;
  justify-content: space-between;
-  margin-right: -1em;
-  margin-bottom: -1em;
 }

 #search .boxes>div>div {
--- a/frontend/src/css/mobile.css
+++ b/frontend/src/css/mobile.css
@ -1,49 +1,27 @@
@media (max-width: 1024px) {
-  nav {
-    width: 10em
-  }
+
  /* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
  #previewer .preview {
    height: calc(100% - 4em) !important;
  }
 }

-@media (max-width: 1024px) {
-  main {
-    width: calc(100% - 13em)
-  }
-}
-
-@media (max-width: 736px) {
+@media (max-width: 800px) {
  body {
    padding-bottom: 5em;
  }
+
  #listing.list .item .size {
    display: none;
  }
+
  #listing.list .item .name {
    width: 60%;
  }
+
  #more {
    display: inherit
  }
-  header .overlay {
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-  #dropdown {
-    position: fixed;
-    top: 1em;
-    right: 1em;
-    display: block;
-    background-color: #fff;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    transform: scale(0);
-    transition: .1s ease-in-out transform;
-    transform-origin: top right;
-    z-index: 99999;
-  }

  body.rtl #dropdown {
    right: unset;
@ -51,82 +29,10 @@
    transform-origin: top left;
  }

-  #dropdown > div {
-    display: block;
-  }
-  #dropdown.active {
-    transform: scale(1);
-  }
-  #dropdown .action {
-    display: flex;
-    align-items: center;
-    border-radius: 0;
-    width: 100%;
-  }
-  #dropdown .action span:not(.counter) {
-    display: inline-block;
-    padding: .4em;
-  }
-  #dropdown .counter {
-    left: 2.25em;
-  }
-  #file-selection {
-    position: fixed;
-    bottom: 1em;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    background: #fff;
-    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-    width: 95%;
-    max-width: 20em;
-    z-index: 1;
-  }
-  #file-selection .action {
-    border-radius: 50%;
-    width: auto;
-  }
-  #file-selection > span {
-    display: inline-block;
-    margin-left: 1em;
-    color: #6f6f6f;
-    margin-right: auto;
-  }
-  #file-selection .action span {
-    display: none;
-  }
-  nav {
-    top: 0;
-    z-index: 99999;
-    background: #fff;
-    height: 100%;
-    width: 16em;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    transition: .1s ease left;
-    left: -17em;
-  }
-
-  body.rtl nav {
-    left: unset;
-    right: -17em;
-  }
-  nav.active {
-    left: 0;
-  }
-
-  body.rtl nav.active {
-    left: unset;
-    right: 0;
-  }
-
-  header .search-button,
-  header .menu-button {
-    display: inherit;
-  }
  header img {
    display: none;
  }
+
  #listing {
    margin-bottom: 5em;
  }
@ -142,28 +48,76 @@
  body.rtl #nav .wrapper {
    margin-right: unset;
  }
-  
+
  body.rtl .dashboard .row {
    margin-right: unset;
  }

-  main {
-    margin: 0 1em;
-    width: calc(100% - 2em);
-  }
-  #search {
-    display: none;
-  }
  #search.active {
    display: block;
  }
+
+  #search.active {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    z-index: 9999;
+  }
+
+  #search.active #input {
+    border-bottom: 3px solid rgba(0, 0, 0, 0.075);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+    height: 4em;
+  }
+
+  #search.active>div {
+    border-radius: 0 !important;
+  }
+
+  #search.active #result {
+    height: 100vh
+  }
+
+  #search.active #result>p>i {
+    text-align: center;
+    margin: 0 auto;
+    display: table;
+  }
+
+  #search.active #result ul li a {
+    display: flex;
+    align-items: center;
+    padding: .3em 0;
+    margin-right: .3em;
+  }
+
+  #search #input>.action,
+  #search #input>i {
+    margin-right: 0.3em;
+    user-select: none;
+  }
+
+  #result-list {
+    padding-top: 3em;
+  }
+
 }

+
@media (max-width: 450px) {
  #listing.list .item .modified {
    display: none;
  }
+
  #listing.list .item .name {
    width: 100%;
  }
+}
+/* Mobile Specific Styles */
+.mobile-only {
+  display: none !important;
 }
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@ -117,20 +117,6 @@ main .spinner .bounce2 {
  background-color: rgba(0, 0, 0, 0.04);
 }

-#click-overlay {
-  display: none;
-  position: fixed;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-
-#click-overlay.active {
-  display: block;
-}
-
 .action .counter {
  display: block;
  position: absolute;
@ -172,7 +158,7 @@ main .spinner .bounce2 {
  color: #fff;
 }

-@media (min-width: 738px) {
+@media (min-width: 800px) {
  #previewer header #dropdown .action i {
    color: #fff;
  }
--- a/frontend/src/views/files/Listing.vue
+++ b/frontend/src/views/files/Listing.vue
@ -1,117 +1,58 @@
 <template>
  <div>
    <header-bar showMenu showLogo>
-      <search /> <title />
-      <action
-        class="search-button"
-        icon="search"
-        :label="$t('buttons.search')"
-        @action="openSearch()"
-      />
-
+      <search />
      <template #actions>
-        <template v-if="!isMobile">
-          <action
-            v-if="headerButtons.share"
-            icon="share"
-            :label="$t('buttons.share')"
-            show="share"
-          />
-          <action
-            v-if="headerButtons.rename"
-            icon="mode_edit"
-            :label="$t('buttons.rename')"
-            show="rename"
-          />
-          <action
-            v-if="headerButtons.copy"
-            id="copy-button"
-            icon="content_copy"
-            :label="$t('buttons.copyFile')"
-            show="copy"
-          />
-          <action
-            v-if="headerButtons.move"
-            id="move-button"
-            icon="forward"
-            :label="$t('buttons.moveFile')"
-            show="move"
-          />
-          <action
-            v-if="headerButtons.delete"
-            id="delete-button"
-            icon="delete"
-            :label="$t('buttons.delete')"
-            show="delete"
-          />
-        </template>
+        <action :icon="viewIcon" :label="$t('buttons.switchView')" @action="switchView" />
+      </template>
+    </header-bar>

+    <div id="file-selection">
+      <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
+      <template>
        <action
-          v-if="headerButtons.shell"
-          icon="code"
-          :label="$t('buttons.shell')"
-          @action="$store.commit('toggleShell')"
+          v-if="headerButtons.select"
+          icon="info"
+          :label="$t('buttons.info')"
+          show="info"
        />
        <action
-          :icon="viewIcon"
-          :label="$t('buttons.switchView')"
-          @action="switchView"
-        />
-        <action
-          v-if="headerButtons.download"
-          icon="file_download"
-          :label="$t('buttons.download')"
-          @action="download"
-          :counter="selectedCount"
-        />
-        <action
-          v-if="headerButtons.upload"
-          icon="file_upload"
-          id="upload-button"
-          :label="$t('buttons.upload')"
-          @action="upload"
-        />
-        <action icon="info" :label="$t('buttons.info')" show="info" />
-        <action
+        v-if="headerButtons.select"
          icon="check_circle"
          :label="$t('buttons.selectMultiple')"
          @action="toggleMultipleSelection"
        />
+        <action
+          v-if="headerButtons.share"
+          icon="share"
+          :label="$t('buttons.share')"
+          show="share"
+        />
+        <action
+          v-if="headerButtons.rename"
+          icon="mode_edit"
+          :label="$t('buttons.rename')"
+          show="rename"
+        />
+        <action
+          v-if="headerButtons.copy"
+          icon="content_copy"
+          :label="$t('buttons.copyFile')"
+          show="copy"
+        />
+        <action
+          v-if="headerButtons.move"
+          icon="forward"
+          :label="$t('buttons.moveFile')"
+          show="move"
+        />
+        <action
+          v-if="headerButtons.delete"
+          icon="delete"
+          :label="$t('buttons.delete')"
+          show="delete"
+        />
      </template>
-    </header-bar>
-
-    <div v-if="isMobile" id="file-selection">
-      <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-      <action
-        v-if="headerButtons.share"
-        icon="share"
-        :label="$t('buttons.share')"
-        show="share"
-      />
-      <action
-        v-if="headerButtons.rename"
-        icon="mode_edit"
-        :label="$t('buttons.rename')"
-        show="rename"
-      />
-      <action
-        v-if="headerButtons.copy"
-        icon="content_copy"
-        :label="$t('buttons.copyFile')"
-        show="copy"
-      />
-      <action
-        v-if="headerButtons.move"
-        icon="forward"
-        :label="$t('buttons.moveFile')"
-        show="move"
-      />
-      <action
-        v-if="headerButtons.delete"
-        icon="delete"
-        :label="$t('buttons.delete')"
-        show="delete"
-      />
    </div>

    <div v-if="loading">
@ -146,12 +87,7 @@
          multiple
        />
      </div>
-      <div
-        v-else
-        id="listing"
-        ref="listing"
-        :class="user.viewMode + ' file-icons'"
-      >
+      <div v-else id="listing" ref="listing" :class="user.viewMode + ' file-icons'">
        <div>
          <div class="item header">
            <div></div>
@ -297,15 +233,7 @@ export default {
    };
  },
  computed: {
-    ...mapState([
-      "req",
-      "selected",
-      "user",
-      "show",
-      "multiple",
-      "selected",
-      "loading",
-    ]),
+    ...mapState(["req", "selected", "user", "show", "multiple", "selected", "loading"]),
    ...mapGetters(["selectedCount"]),
    nameSorted() {
      return this.req.sorting.by === "name";
@ -374,6 +302,7 @@ export default {
    },
    headerButtons() {
      return {
+        select: this.selectedCount > 0,
        upload: this.user.perm.create,
        download: this.user.perm.download,
        shell: this.user.perm.execute && enableExec,
@ -384,9 +313,6 @@ export default {
        copy: this.selectedCount > 0 && this.user.perm.create,
      };
    },
-    isMobile() {
-      return this.width <= 736;
-    },
  },
  watch: {
    req: function () {
@ -543,9 +469,7 @@ export default {
      let items = [];

      for (let item of this.$store.state.clipboard.items) {
-        const from = item.from.endsWith("/")
-          ? item.from.slice(0, -1)
-          : item.from;
+        const from = item.from.endsWith("/") ? item.from.slice(0, -1) : item.from;
        const to = this.$route.path + encodeURIComponent(item.name);
        items.push({ from, to, name: item.name });
      }
@ -626,9 +550,7 @@ export default {

      if (currentPos > triggerPos) {
        // Quantity of items needed to fill 2x of the window height
-        const showQuantity = Math.ceil(
-          (window.innerHeight * 2) / this.itemWeight
-        );
+        const showQuantity = Math.ceil((window.innerHeight * 2) / this.itemWeight);

        // Increase the number of displayed items
        this.showLimit += showQuantity;
@ -674,11 +596,7 @@ export default {
        ? this.$route.path
        : this.$route.path + "/";

-      if (
-        el !== null &&
-        el.classList.contains("item") &&
-        el.dataset.dir === "true"
-      ) {
+      if (el !== null && el.classList.contains("item") && el.dataset.dir === "true") {
        // Get url from ListingItem instance
        path = el.__vue__.url;

@ -711,8 +629,7 @@ export default {

      let files = event.currentTarget.files;
      let folder_upload =
-        files[0].webkitRelativePath !== undefined &&
-        files[0].webkitRelativePath !== "";
+        files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== "";

      if (folder_upload) {
        for (let i = 0; i < files.length; i++) {
@ -766,9 +683,7 @@ export default {
      }

      try {
-        await users.update({ id: this.user.id, sorting: { by, asc } }, [
-          "sorting",
-        ]);
+        await users.update({ id: this.user.id, sorting: { by, asc } }, ["sorting"]);
      } catch (e) {
        this.$showError(e);
      }
@ -868,9 +783,7 @@ export default {
      const windowHeight = window.innerHeight;

      // Quantity of items needed to fill 2x of the window height
-      const showQuantity = Math.ceil(
-        (windowHeight + windowHeight * 2) / this.itemWeight
-      );
+      const showQuantity = Math.ceil((windowHeight + windowHeight * 2) / this.itemWeight);

      // Less items to display than current
      if (this.showLimit > showQuantity && !fit) return;