Merge remote-tracking branch 'upstream/master' into feat/merge-upstream-2.31

.github/workflows/main.yaml

@@ -13,32 +13,22 @@ jobs:
   lint-frontend:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
       - run: make lint-frontend
   lint-backend:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
-      - uses: actions/setup-go@v2
+      - uses: actions/setup-go@v5
         with:
-          go-version: 1.21.0
+          go-version: 1.23.0
       - run: make lint-backend
-  lint-commits:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '18'
-      - run: make lint-commits
   lint:
     runs-on: ubuntu-latest
-    needs: [lint-frontend, lint-backend, lint-commits]
+    needs: [lint-frontend, lint-backend]
     steps:
       - run: echo "done"
 
@@ -46,18 +36,18 @@ jobs:
   test-frontend:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: '18'
       - run: make test-frontend
   test-backend:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
-      - uses: actions/setup-go@v2
+      - uses: actions/setup-go@v5
         with:
-          go-version: 1.21.0
+          go-version: 1.23.0
       - run: make test-backend
   test:
     runs-on: ubuntu-latest

.github/workflows/pr-lint.yaml

@@ -0,0 +1,46 @@
+name: "Lint PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: write
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fails, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Hey there and thank you for opening this pull request! 👋🏼
+            
+            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
+
+            Details:
+            
+            ```
+            ${{ steps.lint_pr_title.outputs.error_message }}
+            ```
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true

.gitignore

@@ -31,9 +31,18 @@ bin/
 dist/
 build/
 
-/frontend/dist/*
-!/frontend/dist/.gitkeep
-
 # Hostinger-specific files
 .cagefs/
 .filebrowser/
+
+# Vue distributable files
+/frontend/dist/*
+!/frontend/dist/.gitkeep
+
+# Playwright files
+/frontend/test-results/
+/frontend/playwright-report/
+/frontend/playwright/.cache/
+
+default.nix
+Dockerfile.dev

.golangci.yml

@@ -6,8 +6,6 @@ linters-settings:
   funlen:
     lines: 100
     statements: 50
-  gci:
-    local-prefixes: github.com/filebrowser/filebrowser
   goconst:
     min-len: 2
     min-occurrences: 2
@@ -29,23 +27,31 @@ linters-settings:
   goimports:
     local-prefixes: github.com/filebrowser/filebrowser
   gomnd:
-    settings:
-      mnd:
     # don't include the "operation" and "assign"
-        checks: argument,case,condition,return
+    checks:
+      - argument
+      - case
+      - condition
+      - return
+    ignored-numbers:
+      - '0'
+      - '1'
+      - '2'
+      - '3'
+    ignored-functions:
+      - strings.SplitN
   govet:
-    check-shadowing: true
+    enable:
+      - nilness
+      - shadow
   lll:
     line-length: 140
-  maligned:
-    suggest-new: true
   misspell:
     locale: US
   nolintlint:
-    allow-leading-space: true # don't require machine-readable nolint directives (i.e. with no leading space)
     allow-unused: false # report any unused nolint directives
-    require-explanation: false # don't require an explanation for nolint directives
+    require-explanation: false # require an explanation for nolint directives
-    require-specific: false # don't require nolint directives to be specific about which linter is being skipped
+    require-specific: true # require nolint directives to be specific about which linter is being skipped
 
 linters:
   # please, do not use `enable-all`: it's deprecated and will be removed soon.
@@ -53,17 +59,19 @@ linters:
   disable-all: true
   enable:
     - bodyclose
-    - deadcode
     - dogsled
     - dupl
     - errcheck
+    - errorlint
     - exportloopref
     - exhaustive
     - funlen
+    - gocheckcompilerdirectives
     - gochecknoinits
     - goconst
     - gocritic
     - gocyclo
+    - godox
     - goimports
     - gomnd
     - goprintffuncname
@@ -75,18 +83,21 @@ linters:
     - misspell
     - nakedret
     - nolintlint
+    - prealloc
+    - revive
     - rowserrcheck
     - staticcheck
-    - structcheck
     - stylecheck
+    - testifylint
     - typecheck
     - unconvert
     - unparam
     - unused
     - whitespace
-    - prealloc
 
 issues:
+  exclude-dirs:
+    - frontend/
   exclude-rules:
     - path: cmd/.*.go
       linters:
@@ -107,13 +118,4 @@ issues:
         - gomnd
 
 run:
-  go: '1.18'
+  timeout: 5m
-  skip-dirs:
-    - frontend/
-  skip-files:
-    - http/rice-box.go
-
-# golangci.com configuration
-# https://github.com/golangci/golangci/wiki/Configuration
-service:
-  golangci-lint-version: 1.27.x # use the fixed version to not introduce new linters unexpectedly

.goreleaser.yml

@@ -1,3 +1,5 @@
+version: 2
+
 project_name: filebrowser
 
 env:
@@ -189,7 +191,7 @@ brews:
     repository:
       owner: filebrowser
       name: homebrew-tap
-    folder: Formula
+    directory: Formula
     homepage: https://filebrowser.org
     commit_author:
       name: FileBrowser Robot

.tx/config

@@ -1,10 +0,0 @@
-[main]
-host = https://www.transifex.com
-lang_map = pt_BR: pt-br, zh_CN: zh-cn, zh_HK: zh-hk, zh_TW: zh-tw, nl_BE: nl-be, sv_SE: sv-se
-
-[file-browser.file-browser]
-file_filter = frontend/src/i18n/<lang>.json
-minimum_perc = 50
-source_file = frontend/src/i18n/en.json
-source_lang = en
-type = KEYVALUEJSON

CHANGELOG.md

@@ -2,6 +2,166 @@
 
 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.
 
+### [2.31.2](https://github.com/filebrowser/filebrowser/compare/v2.31.1...v2.31.2) (2024-10-03)
+
+
+### Bug Fixes
+
+* added whitespace before version ([#3510](https://github.com/filebrowser/filebrowser/issues/3510)) ([2b37e69](https://github.com/filebrowser/filebrowser/commit/2b37e696c9bde4d0c453de236a3555d982346bbb))
+* change location of custom init scripts ([#3493](https://github.com/filebrowser/filebrowser/issues/3493)) ([406d4f7](https://github.com/filebrowser/filebrowser/commit/406d4f78845a1684df7c9c457b208f4dd9b2a930))
+* files list alignment ([#3494](https://github.com/filebrowser/filebrowser/issues/3494)) ([64400ff](https://github.com/filebrowser/filebrowser/commit/64400ffda8b09f66b8662a3c9400235139800a4d))
+* german translation spelling typos ([#3469](https://github.com/filebrowser/filebrowser/issues/3469)) ([1e7c415](https://github.com/filebrowser/filebrowser/commit/1e7c41505fb6a3b9baa1534787492a186e09bcfb))
+
+
+### Build
+
+* **deps-dev:** bump vite from 5.2.7 to 5.4.6 in /frontend ([#3496](https://github.com/filebrowser/filebrowser/issues/3496)) ([ec7b643](https://github.com/filebrowser/filebrowser/commit/ec7b643e8e9499f7ff226ec7f8e63a9df9890352))
+* **deps:** bump rollup from 4.21.3 to 4.22.4 in /frontend ([#3504](https://github.com/filebrowser/filebrowser/issues/3504)) ([03d74ee](https://github.com/filebrowser/filebrowser/commit/03d74ee7582196c09720f8d488056339f06c446c))
+
+### [2.31.1](https://github.com/filebrowser/filebrowser/compare/v2.31.0...v2.31.1) (2024-08-30)
+
+
+### Bug Fixes
+
+* command not found in shell ([#3438](https://github.com/filebrowser/filebrowser/issues/3438)) ([121d9ab](https://github.com/filebrowser/filebrowser/commit/121d9abecdc7d4e923cfc5023519995938a6ccae))
+
+
+### Build
+
+* update to alpine 3.20 ([#3447](https://github.com/filebrowser/filebrowser/issues/3447)) ([7de6bc4](https://github.com/filebrowser/filebrowser/commit/7de6bc4a912b5734dd0df02ed8391e78619e2615))
+
+## [2.31.0](https://github.com/filebrowser/filebrowser/compare/v2.30.0...v2.31.0) (2024-08-29)
+
+
+### Features
+
+* add Czech translation ([#3416](https://github.com/filebrowser/filebrowser/issues/3416)) ([8e67a12](https://github.com/filebrowser/filebrowser/commit/8e67a12f260caefcbe419c2281025b9b15f02bf3))
+* Added epub preview. Resolves [#3375](https://github.com/filebrowser/filebrowser/issues/3375) ([#3376](https://github.com/filebrowser/filebrowser/issues/3376)) ([99a6382](https://github.com/filebrowser/filebrowser/commit/99a6382b320874e94f9bd74708f46dd9a7485d3c))
+* implement markdown file preview in Ace editor ([#3431](https://github.com/filebrowser/filebrowser/issues/3431)) ([b0f4604](https://github.com/filebrowser/filebrowser/commit/b0f4604f44e6a35e07df3000f106f523cd942cfc))
+* support mime type for epub extension ([#3425](https://github.com/filebrowser/filebrowser/issues/3425)) ([f6f7e5f](https://github.com/filebrowser/filebrowser/commit/f6f7e5fea3ff7073ee652008a51cb5445a6f3d5d))
+
+
+### Bug Fixes
+
+* clipboard copy in safari ([#3261](https://github.com/filebrowser/filebrowser/issues/3261)) ([1fccc5d](https://github.com/filebrowser/filebrowser/commit/1fccc5d649add2a56c55e75cf9dec4851e6d7cbf))
+* CSS selectors for listing icons ([#3277](https://github.com/filebrowser/filebrowser/issues/3277)) ([2a90cdf](https://github.com/filebrowser/filebrowser/commit/2a90cdfdaff8655c7cb1167c01994a0978dece8f))
+* fix catalan i18n file ([090272e](https://github.com/filebrowser/filebrowser/commit/090272e3b7c56a940c4aa2d28f860c574aa17d53))
+* fixing an issue where the upload indicator would "jump" around in the UI ([#3354](https://github.com/filebrowser/filebrowser/issues/3354)) ([7be5644](https://github.com/filebrowser/filebrowser/commit/7be564495226bc6846289a56edb8893511036c6e))
+* **frontend:** N files selected hint use i18n ([#3390](https://github.com/filebrowser/filebrowser/issues/3390)) ([10bf3cf](https://github.com/filebrowser/filebrowser/commit/10bf3cffbf8eb7d95fe4e1cc6acf1012329744b9))
+* pdf preview header ([#3274](https://github.com/filebrowser/filebrowser/issues/3274)) ([a838868](https://github.com/filebrowser/filebrowser/commit/a8388689f3019083f263845900f683ddc13884dc))
+* pull down to refresh within editor ([#3378](https://github.com/filebrowser/filebrowser/issues/3378)) ([21783ed](https://github.com/filebrowser/filebrowser/commit/21783ed91a13ad52afdb411e43faf14fb6ef6e42))
+
+
+### Build
+
+* bump go libs ([b596567](https://github.com/filebrowser/filebrowser/commit/b596567c6163d57eaefbf3e30d84cfca65c24cdf))
+* bump go version to 1.23.0 ([364fdaa](https://github.com/filebrowser/filebrowser/commit/364fdaaf0c1eace82ff8637d337cc1b32e5e9972))
+* bump golangci-lint to 1.60.3 ([a6347c8](https://github.com/filebrowser/filebrowser/commit/a6347c88586e584b4565277b0010fa9ff2576b1f))
+* **deps-dev:** bump braces from 3.0.2 to 3.0.3 in /frontend ([#3316](https://github.com/filebrowser/filebrowser/issues/3316)) ([e8589be](https://github.com/filebrowser/filebrowser/commit/e8589be6409a2b29edd44ee2edd3fbf6b2d72724))
+* **deps-dev:** bump ws from 8.16.0 to 8.17.1 in /frontend ([#3321](https://github.com/filebrowser/filebrowser/issues/3321)) ([c3465f9](https://github.com/filebrowser/filebrowser/commit/c3465f99136506d51b813be4f31b289e708da0ce))
+* **deps:** bump golang.org/x/image from 0.15.0 to 0.18.0 ([#3335](https://github.com/filebrowser/filebrowser/issues/3335)) ([30a8ddf](https://github.com/filebrowser/filebrowser/commit/30a8ddf113862e3de2c09547662b7f2af8a30dfe))
+* fix goreleaser file ([056cfa8](https://github.com/filebrowser/filebrowser/commit/056cfa8facdca4c397a6b245028d4c9d3f0ca518))
+
+## [2.30.0](https://github.com/filebrowser/filebrowser/compare/v2.29.0...v2.30.0) (2024-05-19)
+
+
+### Features
+
+* allow multi-select with SHIFT key in singleClick mode ([#3185](https://github.com/filebrowser/filebrowser/issues/3185)) ([2e47a03](https://github.com/filebrowser/filebrowser/commit/2e47a038d63de8f848b070578c1d71f765438a24))
+* Enhance MIME Type Detection for Additional File Extensions ([#3183](https://github.com/filebrowser/filebrowser/issues/3183)) ([be62f56](https://github.com/filebrowser/filebrowser/commit/be62f56782551e17d6d5dc23bc29cc56ef961a66))
+
+
+### Bug Fixes
+
+* add overlay for sidebar on mobile ([#3197](https://github.com/filebrowser/filebrowser/issues/3197)) ([3b48f75](https://github.com/filebrowser/filebrowser/commit/3b48f75301287fe94cbbacff184b4db03f37f7ea))
+* current folder name in page title ([#3200](https://github.com/filebrowser/filebrowser/issues/3200)) ([e336a25](https://github.com/filebrowser/filebrowser/commit/e336a25ad29ed8b956169d426992860a877ee551))
+* Fixing the inability to play MKV video files online and enhancing the auxiliary features of the VideoPlayer. ([#3181](https://github.com/filebrowser/filebrowser/issues/3181)) ([782375b](https://github.com/filebrowser/filebrowser/commit/782375b1cb4c4f954468c30ec277ce021c82b40d))
+* shell window size ([#3198](https://github.com/filebrowser/filebrowser/issues/3198)) ([4c5b612](https://github.com/filebrowser/filebrowser/commit/4c5b612cb2563817f9da50413c7cf9e89b4c4d4a))
+* The file type icon in the file list is sensitive to the case of the suffix name ([#3187](https://github.com/filebrowser/filebrowser/issues/3187)) ([a9c327c](https://github.com/filebrowser/filebrowser/commit/a9c327cc0687796a3c7bfafd4ddabf4342859e31))
+
+## [2.29.0](https://github.com/filebrowser/filebrowser/compare/v2.28.0...v2.29.0) (2024-04-30)
+
+
+### Features
+
+* Display Upload Progress as Percentage and File Size / Total File Size ([#3111](https://github.com/filebrowser/filebrowser/issues/3111)) ([236ca63](https://github.com/filebrowser/filebrowser/commit/236ca637f99e373adfeaaefc5db6af50bd15b6bf))
+* migrate to vue 3 ([#2689](https://github.com/filebrowser/filebrowser/issues/2689)) ([5100e58](https://github.com/filebrowser/filebrowser/commit/5100e587d73831ecdb5e3bd35a78fef96ad248a4))
+
+
+### Bug Fixes
+
+* abort upload behavior to properly handle server-side deletion and frontend state reset ([#3114](https://github.com/filebrowser/filebrowser/issues/3114)) ([434e49b](https://github.com/filebrowser/filebrowser/commit/434e49bf59e4ddf7ec90893fa3fd53faee8c9cbb))
+* apply proper zindex to modal dialogs ([#3172](https://github.com/filebrowser/filebrowser/issues/3172)) ([821f51e](https://github.com/filebrowser/filebrowser/commit/821f51ea5ad1f5c2eb72441bc761031cacee43e1))
+* correct list item selector ([#3126](https://github.com/filebrowser/filebrowser/issues/3126)) ([#3147](https://github.com/filebrowser/filebrowser/issues/3147)) ([22a05e1](https://github.com/filebrowser/filebrowser/commit/22a05e1f02a083cf7b630e16873dad0de89b7854))
+* don't redirect to login when no auth ([#3165](https://github.com/filebrowser/filebrowser/issues/3165)) ([da5a6e0](https://github.com/filebrowser/filebrowser/commit/da5a6e051faa80134c2adf4e621426cbdf046c88))
+* Frontend bug, administrators unable to delete users ([#3170](https://github.com/filebrowser/filebrowser/issues/3170)) ([bee71d9](https://github.com/filebrowser/filebrowser/commit/bee71d93fee137cdd807cd8f7716c7da0830fae7))
+* handle quotes in healthcheck.sh ([#3130](https://github.com/filebrowser/filebrowser/issues/3130)) ([18f04a7](https://github.com/filebrowser/filebrowser/commit/18f04a7d26186927f51f46354f3b2164a68f1b41))
+* the copy method in clipboard.ts ([#3177](https://github.com/filebrowser/filebrowser/issues/3177)) ([4786187](https://github.com/filebrowser/filebrowser/commit/4786187852b8eef07e40aa00cd159ccc1e7e79dc))
+
+
+### Build
+
+* bump go version to 1.22.1 ([bbd0abb](https://github.com/filebrowser/filebrowser/commit/bbd0abbdfdbb3ddf3326247b7c6d925751dfabcb))
+* bump go version to 1.22.2 ([#3158](https://github.com/filebrowser/filebrowser/issues/3158)) ([a9da7fd](https://github.com/filebrowser/filebrowser/commit/a9da7fd56c849b5a13133136b35ef5ebee622962))
+* **deps:** bump golang.org/x/net from 0.22.0 to 0.23.0 ([#3133](https://github.com/filebrowser/filebrowser/issues/3133)) ([6b77b8d](https://github.com/filebrowser/filebrowser/commit/6b77b8d683f7357ef71af678550e78910c10ddeb))
+
+## [2.28.0](https://github.com/filebrowser/filebrowser/compare/v2.27.0...v2.28.0) (2024-04-01)
+
+
+### Features
+
+* allow to configure if home directory is automatically created from cli ([#2963](https://github.com/filebrowser/filebrowser/issues/2963)) ([a4b089a](https://github.com/filebrowser/filebrowser/commit/a4b089a6dbf9821ecede428cd7d13e69c8b85231))
+* auto hiding header bar in preview to enlarge the preview window ([#3024](https://github.com/filebrowser/filebrowser/issues/3024)) ([d706506](https://github.com/filebrowser/filebrowser/commit/d70650689c34ce9f631fda6a453fd521faef22fa))
+* close editor when click escape key ([#2947](https://github.com/filebrowser/filebrowser/issues/2947)) ([70c8261](https://github.com/filebrowser/filebrowser/commit/70c826133b8578b8712e6db8f762a15a076cd9a9))
+* enable preview in shared folder ([#3055](https://github.com/filebrowser/filebrowser/issues/3055)) ([4c233c3](https://github.com/filebrowser/filebrowser/commit/4c233c3db39ea5a00d6e602ec0ecbddecb590877))
+* focus editor when opened ([#2946](https://github.com/filebrowser/filebrowser/issues/2946)) ([b19710e](https://github.com/filebrowser/filebrowser/commit/b19710efca6daa7af56dc211d0051d500d2eea22))
+* freezing the list in the background while previewing a file ([#3004](https://github.com/filebrowser/filebrowser/issues/3004)) ([e167c3e](https://github.com/filebrowser/filebrowser/commit/e167c3e1efed8b16be45d994a8d443fda1d8cf49))
+* prompt to confirm discard editor changes ([#2948](https://github.com/filebrowser/filebrowser/issues/2948)) ([fb1a09c](https://github.com/filebrowser/filebrowser/commit/fb1a09c7c172b913c12b30975ca545e505df0c05))
+* select multiple files with ctrl even with singleClick option ([#2953](https://github.com/filebrowser/filebrowser/issues/2953)) ([d49c3df](https://github.com/filebrowser/filebrowser/commit/d49c3dfacfc0ff07e620b3ad2700e64927b06235))
+
+
+### Bug Fixes
+
+* dashboard buttons position in rtl layout ([#2949](https://github.com/filebrowser/filebrowser/issues/2949)) ([2cfee21](https://github.com/filebrowser/filebrowser/commit/2cfee2183c98d0cb67fc4e9788644ed4278e25bc))
+* editor discard prompt ([#2990](https://github.com/filebrowser/filebrowser/issues/2990)) ([34a0817](https://github.com/filebrowser/filebrowser/commit/34a08170c894321d49bb843e259a0e59e2245998))
+* files and directories are created with the correct permissions ([#2966](https://github.com/filebrowser/filebrowser/issues/2966)) ([5c5ab6b](https://github.com/filebrowser/filebrowser/commit/5c5ab6b8750a5168f0ae2a26bd5de41e0b6d9637))
+* fix lint warnings ([#2976](https://github.com/filebrowser/filebrowser/issues/2976)) ([fe5ca74](https://github.com/filebrowser/filebrowser/commit/fe5ca74aa1e4257e5cb36f1de58daa0c3548319f))
+* **healthcheck:** use address configured if not empty ([#2938](https://github.com/filebrowser/filebrowser/issues/2938)) ([81cd8fc](https://github.com/filebrowser/filebrowser/commit/81cd8fc6d307b00af278beefcdbad4158a128fea))
+* keyboard shortcut to confirm prompts ([#2932](https://github.com/filebrowser/filebrowser/issues/2932)) ([ff9502f](https://github.com/filebrowser/filebrowser/commit/ff9502ff34790c46f31d175911cd51c9b62804fb))
+* moment locale ([#2952](https://github.com/filebrowser/filebrowser/issues/2952)) ([883383a](https://github.com/filebrowser/filebrowser/commit/883383a5715d82883c51138dfb547805dfad2a3c))
+* shell direction ([#2980](https://github.com/filebrowser/filebrowser/issues/2980)) ([6d7ba65](https://github.com/filebrowser/filebrowser/commit/6d7ba65faf576ee4ed095f3d0c41775b21e498de))
+* stay in the same position after renaming or deleting ([#3039](https://github.com/filebrowser/filebrowser/issues/3039)) ([cdf8def](https://github.com/filebrowser/filebrowser/commit/cdf8def3304315bef261da7f52f8599d90b1f0f0))
+
+
+### Build
+
+* **deps-dev:** bump vite from 4.4.12 to 4.5.2 in /frontend ([#2951](https://github.com/filebrowser/filebrowser/issues/2951)) ([bf36cc0](https://github.com/filebrowser/filebrowser/commit/bf36cc00f1369dd10a422f230ccabcbeefae1517))
+* **deps:** bump google.golang.org/protobuf from 1.31.0 to 1.33.0 ([#3045](https://github.com/filebrowser/filebrowser/issues/3045)) ([05bfae2](https://github.com/filebrowser/filebrowser/commit/05bfae264a7a477d1b7db582f06f4efb24d26ec9))
+* **deps:** bump google.golang.org/protobuf in /tools ([#3044](https://github.com/filebrowser/filebrowser/issues/3044)) ([7797a4e](https://github.com/filebrowser/filebrowser/commit/7797a4ef18038a877df31bd34f2ebf70d18823f8))
+
+## [2.27.0](https://github.com/filebrowser/filebrowser/compare/v2.26.0...v2.27.0) (2024-01-02)
+
+
+### Features
+
+* allow setting theme via cli ([#2881](https://github.com/filebrowser/filebrowser/issues/2881)) ([748af71](https://github.com/filebrowser/filebrowser/commit/748af7172ce96f0b66c394e88839bd57c194ffc7))
+* display image resolutions in file details ([#2830](https://github.com/filebrowser/filebrowser/issues/2830)) ([a09dfa8](https://github.com/filebrowser/filebrowser/commit/a09dfa8d9f190243d811a841de44c4abb4403d87))
+* make user session timeout configurable by flags ([#2845](https://github.com/filebrowser/filebrowser/issues/2845)) ([391a078](https://github.com/filebrowser/filebrowser/commit/391a078cd486e618c95a0c5850326076cbc025b6))
+
+
+### Bug Fixes
+
+* delete message when delete file from preview ([3264cea](https://github.com/filebrowser/filebrowser/commit/3264cea8307dca9ab5463dc81f2a10a817eb3d54))
+* fix typo ([#2843](https://github.com/filebrowser/filebrowser/issues/2843)) ([4dbc802](https://github.com/filebrowser/filebrowser/commit/4dbc802972c930f5f42fc27507fac35c28c42afd))
+* set correct port in docker healthcheck ([#2812](https://github.com/filebrowser/filebrowser/issues/2812)) ([d59ad59](https://github.com/filebrowser/filebrowser/commit/d59ad594b8649f57f61453b0dfbc350c57b690a2))
+* typo in build error [#2903](https://github.com/filebrowser/filebrowser/issues/2903) ([#2904](https://github.com/filebrowser/filebrowser/issues/2904)) ([c4e955a](https://github.com/filebrowser/filebrowser/commit/c4e955acf4a1a8f8e8e94f697ffc838515e69a60))
+
+
+### Build
+
+* **deps-dev:** bump vite from 4.4.9 to 4.4.12 in /frontend ([#2862](https://github.com/filebrowser/filebrowser/issues/2862)) ([fc2ee37](https://github.com/filebrowser/filebrowser/commit/fc2ee373536584d024f7def62f350bdbb712d927))
+* **deps:** bump golang.org/x/crypto from 0.14.0 to 0.17.0 ([#2890](https://github.com/filebrowser/filebrowser/issues/2890)) ([821fba4](https://github.com/filebrowser/filebrowser/commit/821fba41a25ba99d47641f01b10ac51960157888))
+
 ## [2.26.0](https://github.com/filebrowser/filebrowser/compare/v2.25.0...v2.26.0) (2023-11-02)
 
 

Dockerfile.s6

@@ -1,4 +1,4 @@
-FROM ghcr.io/linuxserver/baseimage-alpine:3.17
+FROM ghcr.io/linuxserver/baseimage-alpine:3.20
 
 RUN apk --update add ca-certificates \
                      mailcap \

Dockerfile.s6.aarch64

@@ -1,4 +1,4 @@
-FROM ghcr.io/linuxserver/baseimage-alpine:arm64v8-3.17
+FROM ghcr.io/linuxserver/baseimage-alpine:arm64v8-3.20
 
 RUN apk --update add ca-certificates \
                      mailcap \

Dockerfile.s6.armhf

@@ -1,16 +0,0 @@
-FROM ghcr.io/linuxserver/baseimage-alpine:arm32v7-3.17
-
-RUN apk --update add ca-certificates \
-                     mailcap \
-                     curl
-
-HEALTHCHECK --start-period=2s --interval=5s --timeout=3s \
-  CMD curl -f http://localhost/health || exit 1
-
-# copy local files
-COPY docker/root/ /
-COPY filebrowser /usr/bin/filebrowser
-
-# ports and volumes
-VOLUME /srv /config /database
-EXPOSE 80

Makefile

@@ -27,7 +27,7 @@ test-backend: ## Run backend tests
 	$Q $(go) test -v ./...
 
 .PHONY: lint
-lint: lint-frontend lint-backend lint-commits ## Run all linters
+lint: lint-frontend lint-backend ## Run all linters
 
 .PHONY: lint-frontend
 lint-frontend: ## Run frontend linters

auth/hook.go

@@ -2,6 +2,7 @@ package auth
 
 import (
 	"encoding/json"
+	"errors"
 	"fmt"
 	"log"
 	"net/http"
@@ -9,7 +10,7 @@ import (
 	"os/exec"
 	"strings"
 
-	"github.com/filebrowser/filebrowser/v2/errors"
+	fbErrors "github.com/filebrowser/filebrowser/v2/errors"
 	"github.com/filebrowser/filebrowser/v2/files"
 	"github.com/filebrowser/filebrowser/v2/settings"
 	"github.com/filebrowser/filebrowser/v2/users"
@@ -123,10 +124,10 @@ func (a *HookAuth) GetValues(s string) {
 
 	// iterate input lines
 	for _, val := range strings.Split(s, "\n") {
-		v := strings.SplitN(val, "=", 2) //nolint: gomnd
+		v := strings.SplitN(val, "=", 2)
 
 		// skips non key and value format
-		if len(v) != 2 { //nolint: gomnd
+		if len(v) != 2 {
 			continue
 		}
 
@@ -144,7 +145,7 @@ func (a *HookAuth) GetValues(s string) {
 // SaveUser updates the existing user or creates a new one when not found
 func (a *HookAuth) SaveUser() (*users.User, error) {
 	u, err := a.Users.Get(a.Server.Root, a.Cred.Username)
-	if err != nil && err != errors.ErrNotExist {
+	if err != nil && !errors.Is(err, fbErrors.ErrNotExist) {
 		return nil, err
 	}
 

auth/json.go

@@ -26,7 +26,7 @@ type JSONAuth struct {
 }
 
 // Auth authenticates the user via a json in content body.
-func (a JSONAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error) {
+func (a JSONAuth) Auth(r *http.Request, usr users.Store, _ *settings.Settings, srv *settings.Server) (*users.User, error) {
 	var cred jsonCred
 
 	if r.Body == nil {
@@ -39,7 +39,7 @@ func (a JSONAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings,
 	}
 
 	// If ReCaptcha is enabled, check the code.
-	if a.ReCaptcha != nil && len(a.ReCaptcha.Secret) > 0 {
+	if a.ReCaptcha != nil && a.ReCaptcha.Secret != "" {
 		ok, err := a.ReCaptcha.Ok(cred.ReCaptcha) //nolint:govet
 
 		if err != nil {

auth/none.go

@@ -14,7 +14,7 @@ const MethodNoAuth settings.AuthMethod = "noauth"
 type NoAuth struct{}
 
 // Auth uses authenticates user 1.
-func (a NoAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error) {
+func (a NoAuth) Auth(_ *http.Request, usr users.Store, _ *settings.Settings, srv *settings.Server) (*users.User, error) {
 	return usr.Get(srv.Root, uint(1))
 }
 

auth/proxy.go

@@ -1,10 +1,11 @@
 package auth
 
 import (
+	"errors"
 	"net/http"
 	"os"
 
-	"github.com/filebrowser/filebrowser/v2/errors"
+	fbErrors "github.com/filebrowser/filebrowser/v2/errors"
 	"github.com/filebrowser/filebrowser/v2/settings"
 	"github.com/filebrowser/filebrowser/v2/users"
 )
@@ -18,10 +19,10 @@ type ProxyAuth struct {
 }
 
 // Auth authenticates the user via an HTTP header.
-func (a ProxyAuth) Auth(r *http.Request, usr users.Store, stg *settings.Settings, srv *settings.Server) (*users.User, error) {
+func (a ProxyAuth) Auth(r *http.Request, usr users.Store, _ *settings.Settings, srv *settings.Server) (*users.User, error) {
 	username := r.Header.Get(a.Header)
 	user, err := usr.Get(srv.Root, username)
-	if err == errors.ErrNotExist {
+	if errors.Is(err, fbErrors.ErrNotExist) {
 		return nil, os.ErrPermission
 	}
 

cmd/cmds_add.go

@@ -14,8 +14,8 @@ var cmdsAddCmd = &cobra.Command{
 	Use:   "add <event> <command>",
 	Short: "Add a command to run on a specific event",
 	Long:  `Add a command to run on a specific event.`,
-	Args:  cobra.MinimumNArgs(2), //nolint:gomnd
+	Args:  cobra.MinimumNArgs(2),
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(_ *cobra.Command, args []string, d pythonData) {
 		s, err := d.store.Settings.Get()
 		checkErr(err)
 		command := strings.Join(args[1:], " ")

cmd/cmds_ls.go

@@ -14,7 +14,7 @@ var cmdsLsCmd = &cobra.Command{
 	Short: "List all commands for each event",
 	Long:  `List all commands for each event.`,
 	Args:  cobra.NoArgs,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(cmd *cobra.Command, _ []string, d pythonData) {
 		s, err := d.store.Settings.Get()
 		checkErr(err)
 		evt := mustGetString(cmd.Flags(), "event")

cmd/cmds_rm.go

@@ -23,7 +23,7 @@ You can also specify an optional parameter (index_end) so
 you can remove all commands from 'index' to 'index_end',
 including 'index_end'.`,
 	Args: func(cmd *cobra.Command, args []string) error {
-		if err := cobra.RangeArgs(2, 3)(cmd, args); err != nil { //nolint:gomnd
+		if err := cobra.RangeArgs(2, 3)(cmd, args); err != nil {
 			return err
 		}
 
@@ -35,7 +35,7 @@ including 'index_end'.`,
 
 		return nil
 	},
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(_ *cobra.Command, args []string, d pythonData) {
 		s, err := d.store.Settings.Get()
 		checkErr(err)
 		evt := args[0]
@@ -43,7 +43,7 @@ including 'index_end'.`,
 		i, err := strconv.Atoi(args[1])
 		checkErr(err)
 		f := i
-		if len(args) == 3 { //nolint:gomnd
+		if len(args) == 3 {
 			f, err = strconv.Atoi(args[2])
 			checkErr(err)
 		}

cmd/config.go

@@ -31,6 +31,7 @@ func addConfigFlags(flags *pflag.FlagSet) {
 	addServerFlags(flags)
 	addUserFlags(flags)
 	flags.BoolP("signup", "s", false, "allow users to signup")
+	flags.Bool("create-user-dir", false, "generate user's home directory automatically")
 	flags.String("shell", "", "shell command to which other commands should be appended")
 
 	flags.String("auth.method", string(auth.MethodJSONAuth), "authentication type")
@@ -43,6 +44,7 @@ func addConfigFlags(flags *pflag.FlagSet) {
 	flags.String("recaptcha.secret", "", "ReCaptcha secret")
 
 	flags.String("branding.name", "", "replace 'File Browser' by this name")
+	flags.String("branding.theme", "", "set the theme")
 	flags.String("branding.color", "", "set the theme color")
 	flags.String("branding.files", "", "path to directory with images and custom styles")
 	flags.Bool("branding.disableExternal", false, "disable external links such as GitHub links")
@@ -139,7 +141,7 @@ func getAuthentication(flags *pflag.FlagSet, defaults ...interface{}) (settings.
 }
 
 func printSettings(ser *settings.Server, set *settings.Settings, auther auth.Auther) {
-	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0) //nolint:gomnd
+	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0)
 
 	fmt.Fprintf(w, "Sign up:\t%t\n", set.Signup)
 	fmt.Fprintf(w, "Create User Dir:\t%t\n", set.CreateUserDir)
@@ -151,6 +153,7 @@ func printSettings(ser *settings.Server, set *settings.Settings, auther auth.Aut
 	fmt.Fprintf(w, "\tDisable external links:\t%t\n", set.Branding.DisableExternal)
 	fmt.Fprintf(w, "\tDisable used disk percentage graph:\t%t\n", set.Branding.DisableUsedPercentage)
 	fmt.Fprintf(w, "\tColor:\t%s\n", set.Branding.Color)
+	fmt.Fprintf(w, "\tTheme:\t%s\n", set.Branding.Theme)
 	fmt.Fprintln(w, "\nServer:")
 	fmt.Fprintf(w, "\tLog:\t%s\n", ser.Log)
 	fmt.Fprintf(w, "\tPort:\t%s\n", ser.Port)

cmd/config_cat.go

@@ -13,7 +13,7 @@ var configCatCmd = &cobra.Command{
 	Short: "Prints the configuration",
 	Long:  `Prints the configuration.`,
 	Args:  cobra.NoArgs,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(_ *cobra.Command, _ []string, d pythonData) {
 		set, err := d.store.Settings.Get()
 		checkErr(err)
 		ser, err := d.store.Settings.GetServer()

cmd/config_export.go

@@ -15,7 +15,7 @@ var configExportCmd = &cobra.Command{
 json or yaml file. This exported configuration can be changed,
 and imported again with 'config import' command.`,
 	Args: jsonYamlArg,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(_ *cobra.Command, args []string, d pythonData) {
 		settings, err := d.store.Settings.Get()
 		checkErr(err)
 

cmd/config_import.go

@@ -34,7 +34,7 @@ database.
 
 The path must be for a json or yaml file.`,
 	Args: jsonYamlArg,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(_ *cobra.Command, args []string, d pythonData) {
 		var key []byte
 		if d.hadDB {
 			settings, err := d.store.Settings.Get()

cmd/config_init.go

@@ -22,7 +22,7 @@ this options can be changed in the future with the command
 to the defaults when creating new users and you don't
 override the options.`,
 	Args: cobra.NoArgs,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(cmd *cobra.Command, _ []string, d pythonData) {
 		defaults := settings.UserDefaults{}
 		flags := cmd.Flags()
 		getUserDefaults(flags, &defaults, true)
@@ -31,6 +31,7 @@ override the options.`,
 		s := &settings.Settings{
 			Key:           generateKey(),
 			Signup:        mustGetBool(flags, "signup"),
+			CreateUserDir: mustGetBool(flags, "create-user-dir"),
 			Shell:         convertCmdStrToCmdArray(mustGetString(flags, "shell")),
 			AuthMethod:    authMethod,
 			AuthLogoutURL: mustGetString(flags, "auth.logoutUrl"),
@@ -39,6 +40,7 @@ override the options.`,
 				Name:                  mustGetString(flags, "branding.name"),
 				DisableExternal:       mustGetBool(flags, "branding.disableExternal"),
 				DisableUsedPercentage: mustGetBool(flags, "branding.disableUsedPercentage"),
+				Theme:                 mustGetString(flags, "branding.theme"),
 				Files:                 mustGetString(flags, "branding.files"),
 			},
 		}

cmd/config_set.go

@@ -16,7 +16,7 @@ var configSetCmd = &cobra.Command{
 	Long: `Updates the configuration. Set the flags for the options
 you want to change. Other options will remain unchanged.`,
 	Args: cobra.NoArgs,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(cmd *cobra.Command, _ []string, d pythonData) {
 		flags := cmd.Flags()
 		set, err := d.store.Settings.Get()
 		checkErr(err)
@@ -53,10 +53,14 @@ you want to change. Other options will remain unchanged.`,
 				set.AuthLogoutURL = mustGetString(flags, flag.Name)
 			case "shell":
 				set.Shell = convertCmdStrToCmdArray(mustGetString(flags, flag.Name))
+			case "create-user-dir":
+				set.CreateUserDir = mustGetBool(flags, flag.Name)
 			case "branding.name":
 				set.Branding.Name = mustGetString(flags, flag.Name)
 			case "branding.color":
 				set.Branding.Color = mustGetString(flags, flag.Name)
+			case "branding.theme":
+				set.Branding.Theme = mustGetString(flags, flag.Name)
 			case "branding.disableExternal":
 				set.Branding.DisableExternal = mustGetBool(flags, flag.Name)
 			case "branding.disableUsedPercentage":

cmd/docs.go

@@ -39,12 +39,12 @@ var docsCmd = &cobra.Command{
 	Use:    "docs",
 	Hidden: true,
 	Args:   cobra.NoArgs,
-	Run: func(cmd *cobra.Command, args []string) {
+	Run: func(cmd *cobra.Command, _ []string) {
 		dir := mustGetString(cmd.Flags(), "path")
 		generateDocs(rootCmd, dir)
 		names := []string{}
 
-		err := filepath.Walk(dir, func(path string, info os.FileInfo, err error) error {
+		err := filepath.Walk(dir, func(_ string, info os.FileInfo, err error) error {
 			if err != nil || info.IsDir() {
 				return err
 			}
@@ -101,7 +101,7 @@ func generateMarkdown(cmd *cobra.Command, w io.Writer) {
 		_, _ = fmt.Fprintf(buf, "```\n%s\n```\n\n", cmd.UseLine())
 	}
 
-	if len(cmd.Example) > 0 {
+	if cmd.Example != "" {
 		buf.WriteString("## Examples\n\n")
 		_, _ = fmt.Fprintf(buf, "```\n%s\n```\n\n", cmd.Example)
 	}

cmd/hash.go

@@ -17,7 +17,7 @@ var hashCmd = &cobra.Command{
 	Short: "Hashes a password",
 	Long:  `Hashes a password using bcrypt algorithm.`,
 	Args:  cobra.ExactArgs(1),
-	Run: func(cmd *cobra.Command, args []string) {
+	Run: func(_ *cobra.Command, args []string) {
 		pwd, err := users.HashPwd(args[0])
 		checkErr(err)
 		fmt.Println(pwd)

cmd/root.go

@@ -77,7 +77,7 @@ var rootCmd = &cobra.Command{
 	Use:   "filebrowser",
 	Short: "A stylish web-based file browser",
 	Long: `File Browser CLI lets you create the database to use with File Browser,
-manage your users and all the configurations without acessing the
+manage your users and all the configurations without accessing the
 web interface.
 
 If you've never run File Browser, you'll need to have a database for
@@ -109,9 +109,9 @@ name in caps. So to set "database" via an env variable, you should
 set FB_DATABASE.
 
 Also, if the database path doesn't exist, File Browser will enter into
-the quick setup mode and a new database will be bootstraped and a new
+the quick setup mode and a new database will be bootstrapped and a new
 user created with the credentials from options "username" and "password".`,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(cmd *cobra.Command, _ []string, d pythonData) {
 		log.Println(cfgFile)
 
 		if !d.hadDB {
@@ -421,7 +421,8 @@ func initConfig() {
 	v.SetEnvKeyReplacer(strings.NewReplacer(".", "_"))
 
 	if err := v.ReadInConfig(); err != nil {
-		if _, ok := err.(v.ConfigParseError); ok {
+		var configParseError v.ConfigParseError
+		if errors.As(err, &configParseError) {
 			panic(err)
 		}
 		cfgFile = "No config file used"

cmd/rule_rm.go

@@ -28,7 +28,7 @@ You can also specify an optional parameter (index_end) so
 you can remove all commands from 'index' to 'index_end',
 including 'index_end'.`,
 	Args: func(cmd *cobra.Command, args []string) error {
-		if err := cobra.RangeArgs(1, 2)(cmd, args); err != nil { //nolint:gomnd
+		if err := cobra.RangeArgs(1, 2)(cmd, args); err != nil {
 			return err
 		}
 
@@ -44,7 +44,7 @@ including 'index_end'.`,
 		i, err := strconv.Atoi(args[0])
 		checkErr(err)
 		f := i
-		if len(args) == 2 { //nolint:gomnd
+		if len(args) == 2 {
 			f, err = strconv.Atoi(args[1])
 			checkErr(err)
 		}

cmd/rules_ls.go

@@ -13,7 +13,7 @@ var rulesLsCommand = &cobra.Command{
 	Short: "List global rules or user specific rules",
 	Long:  `List global rules or user specific rules.`,
 	Args:  cobra.NoArgs,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(cmd *cobra.Command, _ []string, d pythonData) {
 		runRules(d.store, cmd, nil, nil)
 	}, pythonConfig{}),
 }

cmd/upgrade.go

@@ -21,7 +21,7 @@ var upgradeCmd = &cobra.Command{
 import share links because they are incompatible with
 this version.`,
 	Args: cobra.NoArgs,
-	Run: func(cmd *cobra.Command, args []string) {
+	Run: func(cmd *cobra.Command, _ []string) {
 		flags := cmd.Flags()
 		oldDB := mustGetString(flags, "old.database")
 		oldConf := mustGetString(flags, "old.config")

cmd/users.go

@@ -26,7 +26,7 @@ var usersCmd = &cobra.Command{
 }
 
 func printUsers(usrs []*users.User) {
-	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0) //nolint:gomnd
+	w := tabwriter.NewWriter(os.Stdout, 0, 0, 2, ' ', 0)
 	fmt.Fprintln(w, "ID\tUsername\tScope\tLocale\tV. Mode\tS.Click\tAdmin\tExecute\tCreate\tRename\tModify\tDelete\tShare\tDownload\tPwd Lock")
 
 	for _, u := range usrs {

cmd/users_add.go

@@ -15,7 +15,7 @@ var usersAddCmd = &cobra.Command{
 	Use:   "add <username> <password>",
 	Short: "Create a new user",
 	Long:  `Create a new user and add it to the database.`,
-	Args:  cobra.ExactArgs(2), //nolint:gomnd
+	Args:  cobra.ExactArgs(2),
 	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
 		s, err := d.store.Settings.Get()
 		checkErr(err)

cmd/users_export.go

@@ -14,7 +14,7 @@ var usersExportCmd = &cobra.Command{
 	Long: `Export all users to a json or yaml file. Please indicate the
 path to the file where you want to write the users.`,
 	Args: jsonYamlArg,
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(_ *cobra.Command, args []string, d pythonData) {
 		list, err := d.store.Users.Gets("")
 		checkErr(err)
 

cmd/users_find.go

@@ -26,7 +26,7 @@ var usersLsCmd = &cobra.Command{
 	Run:   findUsers,
 }
 
-var findUsers = python(func(cmd *cobra.Command, args []string, d pythonData) {
+var findUsers = python(func(_ *cobra.Command, args []string, d pythonData) {
 	var (
 		list []*users.User
 		user *users.User

cmd/users_import.go

@@ -60,7 +60,7 @@ list or set it to 0.`,
 			// User exists in DB.
 			if err == nil {
 				if !overwrite {
-					checkErr(errors.New("user " + strconv.Itoa(int(user.ID)) + " is already registred"))
+					checkErr(errors.New("user " + strconv.Itoa(int(user.ID)) + " is already registered"))
 				}
 
 				// If the usernames mismatch, check if there is another one in the DB
@@ -84,6 +84,6 @@ list or set it to 0.`,
 }
 
 func usernameConflictError(username string, originalID, newID uint) error {
-	return fmt.Errorf(`can't import user with ID %d and username "%s" because the username is already registred with the user %d`,
+	return fmt.Errorf(`can't import user with ID %d and username "%s" because the username is already registered with the user %d`,
 		newID, username, originalID)
 }

cmd/users_rm.go

@@ -15,7 +15,7 @@ var usersRmCmd = &cobra.Command{
 	Short: "Delete a user by username or id",
 	Long:  `Delete a user by username or id`,
 	Args:  cobra.ExactArgs(1),
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Run: python(func(_ *cobra.Command, args []string, d pythonData) {
 		username, id := parseUsernameOrID(args[0])
 		var err error
 

cmd/utils.go

@@ -87,16 +87,23 @@ func python(fn pythonFunc, cfg pythonConfig) cobraFunc {
 		data := pythonData{hadDB: true}
 
 		path := getParam(cmd.Flags(), "database")
+		absPath, err := filepath.Abs(path)
+		if err != nil {
+			panic(err)
+		}
 		exists, err := dbExists(path)
 
 		if err != nil {
 			panic(err)
 		} else if exists && cfg.noDB {
-			log.Fatal(path + " already exists")
+			log.Fatal(absPath + " already exists")
 		} else if !exists && !cfg.noDB && !cfg.allowNoDB {
-			log.Fatal(path + " does not exist. Please run 'filebrowser config init' first.")
+			log.Fatal(absPath + " does not exist. Please run 'filebrowser config init' first.")
+		} else if !exists && !cfg.noDB {
+			log.Println("Warning: filebrowser.db can't be found. Initialing in " + strings.TrimSuffix(absPath, "filebrowser.db"))
 		}
 
+		log.Println("Using database: " + absPath)
 		data.hadDB = exists
 		db, err := storm.Open(path)
 		checkErr(err)
@@ -181,7 +188,7 @@ func cleanUpMapValue(v interface{}) interface{} {
 }
 
 // convertCmdStrToCmdArray checks if cmd string is blank (whitespace included)
-// then returns empty string array, else returns the splitted word array of cmd.
+// then returns empty string array, else returns the split word array of cmd.
 // This is to ensure the result will never be []string{""}
 func convertCmdStrToCmdArray(cmd string) []string {
 	var cmdArray []string

cmd/version.go

@@ -15,7 +15,7 @@ func init() {
 var versionCmd = &cobra.Command{
 	Use:   "version",
 	Short: "Print the version number",
-	Run: func(cmd *cobra.Command, args []string) {
+	Run: func(_ *cobra.Command, _ []string) {
-		fmt.Println("File Browser " + version.Version + "/" + version.CommitSHA)
+		fmt.Println("File Browser v" + version.Version + "/" + version.CommitSHA)
 	},
 }

diskcache/file_cache.go

@@ -31,7 +31,7 @@ func New(fs afero.Fs, root string) *FileCache {
 	}
 }
 
-func (f *FileCache) Store(ctx context.Context, key string, value []byte) error {
+func (f *FileCache) Store(_ context.Context, key string, value []byte) error {
 	mu := f.getScopedLocks(key)
 	mu.Lock()
 	defer mu.Unlock()
@@ -48,7 +48,7 @@ func (f *FileCache) Store(ctx context.Context, key string, value []byte) error {
 	return nil
 }
 
-func (f *FileCache) Load(ctx context.Context, key string) (value []byte, exist bool, err error) {
+func (f *FileCache) Load(_ context.Context, key string) (value []byte, exist bool, err error) {
 	r, ok, err := f.open(key)
 	if err != nil || !ok {
 		return nil, ok, err
@@ -62,7 +62,7 @@ func (f *FileCache) Load(ctx context.Context, key string) (value []byte, exist b
 	return value, true, nil
 }
 
-func (f *FileCache) Delete(ctx context.Context, key string) error {
+func (f *FileCache) Delete(_ context.Context, key string) error {
 	mu := f.getScopedLocks(key)
 	mu.Lock()
 	defer mu.Unlock()

diskcache/file_cache_test.go

@@ -40,7 +40,7 @@ func TestFileCache(t *testing.T) {
 	require.False(t, exists)
 }
 
-func checkValue(t *testing.T, ctx context.Context, fs afero.Fs, fileFullPath string, cache *FileCache, key, wantValue string) { //nolint:golint
+func checkValue(t *testing.T, ctx context.Context, fs afero.Fs, fileFullPath string, cache *FileCache, key, wantValue string) { //nolint:revive
 	t.Helper()
 	// check actual file content
 	b, err := afero.ReadFile(fs, fileFullPath)

diskcache/noop_cache.go

@@ -11,14 +11,14 @@ func NewNoOp() *NoOp {
 	return &NoOp{}
 }
 
-func (n *NoOp) Store(ctx context.Context, key string, value []byte) error {
+func (n *NoOp) Store(_ context.Context, _ string, _ []byte) error {
 	return nil
 }
 
-func (n *NoOp) Load(ctx context.Context, key string) (value []byte, exist bool, err error) {
+func (n *NoOp) Load(_ context.Context, _ string) (value []byte, exist bool, err error) {
 	return nil, false, nil
 }
 
-func (n *NoOp) Delete(ctx context.Context, key string) error {
+func (n *NoOp) Delete(_ context.Context, _ string) error {
 	return nil
 }

files/file.go

@@ -6,27 +6,35 @@ import (
 	"crypto/sha256"
 	"crypto/sha512"
 	"encoding/hex"
+	"errors"
 	"hash"
 	"image"
 	"io"
+	"io/fs"
 	"log"
 	"mime"
 	"net/http"
 	"os"
 	"path"
 	"path/filepath"
+	"regexp"
 	"strings"
 	"time"
 
 	"github.com/spf13/afero"
 
-	"github.com/filebrowser/filebrowser/v2/errors"
+	fbErrors "github.com/filebrowser/filebrowser/v2/errors"
 	"github.com/filebrowser/filebrowser/v2/rules"
 )
 
-const PermFile = 0664
+const PermFile = 0644
 const PermDir = 0755
 
+var (
+	reSubDirs = regexp.MustCompile("(?i)^sub(s|titles)$")
+	reSubExts = regexp.MustCompile("(?i)(.vtt|.srt|.ass|.ssa)$")
+)
+
 // FileInfo describes a file.
 type FileInfo struct {
 	*Listing
@@ -39,12 +47,12 @@ type FileInfo struct {
 	Mode       os.FileMode       `json:"mode"`
 	IsDir      bool              `json:"isDir"`
 	IsSymlink  bool              `json:"isSymlink"`
-	Link       string            `json:"link"`
 	Type       string            `json:"type"`
 	Subtitles  []string          `json:"subtitles,omitempty"`
 	Content    string            `json:"content,omitempty"`
 	Checksums  map[string]string `json:"checksums,omitempty"`
 	Token      string            `json:"token,omitempty"`
+	Link       string            `json:"link"`
 	DiskUsage  int64             `json:"diskUsage,omitempty"`
 	Inodes     int64             `json:"inodes,omitempty"`
 	currentDir []os.FileInfo     `json:"-"`
@@ -71,7 +79,7 @@ type ImageResolution struct {
 // NewFileInfo creates a File object from a path and a given user. This File
 // object will be automatically filled depending on if it is a directory
 // or a file. If it's a video file, it will also detect any subtitles.
-func NewFileInfo(opts FileOptions) (*FileInfo, error) {
+func NewFileInfo(opts *FileOptions) (*FileInfo, error) {
 	if !opts.Checker.Check(opts.Path) {
 		return nil, os.ErrPermission
 	}
@@ -98,7 +106,7 @@ func NewFileInfo(opts FileOptions) (*FileInfo, error) {
 	return file, err
 }
 
-func stat(opts FileOptions) (*FileInfo, error) {
+func stat(opts *FileOptions) (*FileInfo, error) {
 	var file *FileInfo
 
 	if lstaterFs, ok := opts.Fs.(afero.Lstater); ok {
@@ -161,7 +169,7 @@ func stat(opts FileOptions) (*FileInfo, error) {
 // algorithm. The checksums data is saved on File object.
 func (i *FileInfo) Checksum(algo string) error {
 	if i.IsDir {
-		return errors.ErrIsDirectory
+		return fbErrors.ErrIsDirectory
 	}
 
 	if i.Checksums == nil {
@@ -187,7 +195,7 @@ func (i *FileInfo) Checksum(algo string) error {
 	case "sha512":
 		h = sha512.New()
 	default:
-		return errors.ErrInvalidOption
+		return fbErrors.ErrInvalidOption
 	}
 
 	_, err = io.Copy(h, reader)
@@ -280,8 +288,8 @@ func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	return nil
 }
 
-func calculateImageResolution(fs afero.Fs, filePath string) (*ImageResolution, error) {
+func calculateImageResolution(fSys afero.Fs, filePath string) (*ImageResolution, error) {
-	file, err := fs.Open(filePath)
+	file, err := fSys.Open(filePath)
 	if err != nil {
 		return nil, err
 	}
@@ -313,7 +321,7 @@ func (i *FileInfo) readFirstBytes() []byte {
 
 	buffer := make([]byte, 512) //nolint:gomnd
 	n, err := reader.Read(buffer)
-	if err != nil && err != io.EOF {
+	if err != nil && !errors.Is(err, io.EOF) {
 		log.Print(err)
 		i.Type = "blob"
 		return nil
@@ -331,7 +339,6 @@ func (i *FileInfo) detectSubtitles() {
 	ext := filepath.Ext(i.Path)
 
 	// detect multiple languages. Base*.vtt
-	// TODO: give subtitles descriptive names (lang) and track attributes
 	parentDir := strings.TrimRight(i.Path, i.Name)
 	var dir []os.FileInfo
 	if len(i.currentDir) > 0 {
@@ -346,12 +353,45 @@ func (i *FileInfo) detectSubtitles() {
 
 	base := strings.TrimSuffix(i.Name, ext)
 	for _, f := range dir {
-		if !f.IsDir() && strings.HasPrefix(f.Name(), base) && strings.HasSuffix(f.Name(), ".vtt") {
+		// load all supported subtitles from subs directories
-			i.Subtitles = append(i.Subtitles, path.Join(parentDir, f.Name()))
+		// should cover all instances of subtitle distributions
+		// like tv-shows with multiple episodes in single dir
+		if f.IsDir() && reSubDirs.MatchString(f.Name()) {
+			subsDir := path.Join(parentDir, f.Name())
+			i.loadSubtitles(subsDir, base, true)
+		} else if isSubtitleMatch(f, base) {
+			i.addSubtitle(path.Join(parentDir, f.Name()))
 		}
 	}
 }
 
+func (i *FileInfo) loadSubtitles(subsPath, baseName string, recursive bool) {
+	dir, err := afero.ReadDir(i.Fs, subsPath)
+	if err == nil {
+		for _, f := range dir {
+			if isSubtitleMatch(f, "") {
+				i.addSubtitle(path.Join(subsPath, f.Name()))
+			} else if f.IsDir() && recursive && strings.HasPrefix(f.Name(), baseName) {
+				subsDir := path.Join(subsPath, f.Name())
+				i.loadSubtitles(subsDir, baseName, false)
+			}
+		}
+	}
+}
+
+func IsSupportedSubtitle(fileName string) bool {
+	return reSubExts.MatchString(fileName)
+}
+
+func isSubtitleMatch(f fs.FileInfo, baseName string) bool {
+	return !f.IsDir() && strings.HasPrefix(f.Name(), baseName) &&
+		IsSupportedSubtitle(f.Name())
+}
+
+func (i *FileInfo) addSubtitle(fPath string) {
+	i.Subtitles = append(i.Subtitles, fPath)
+}
+
 func (i *FileInfo) readListing(checker rules.Checker, readHeader bool) error {
 	afs := &afero.Afero{Fs: i.Fs}
 	dir, err := afs.ReadDir(i.Path)

files/listing.go

@@ -20,7 +20,6 @@ type Listing struct {
 //nolint:goconst
 func (l Listing) ApplySort() {
 	// Check '.Order' to know how to sort
-	// TODO: use enum
 	if !l.Sorting.Asc {
 		switch l.Sorting.By {
 		case "name":

files/mime.go

@@ -0,0 +1,609 @@
+package files
+
+// This file contains code primarily sourced from::
+// github.com/kataras/iris
+
+import (
+	"mime"
+)
+
+const (
+	// ContentBinaryHeaderValue header value for binary data.
+	ContentBinaryHeaderValue = "application/octet-stream"
+	// ContentWebassemblyHeaderValue header value for web assembly files.
+	ContentWebassemblyHeaderValue = "application/wasm"
+	// ContentHTMLHeaderValue is the  string of text/html response header's content type value.
+	ContentHTMLHeaderValue = "text/html"
+	// ContentJSONHeaderValue header value for JSON data.
+	ContentJSONHeaderValue = "application/json"
+	// ContentJSONProblemHeaderValue header value for JSON API problem error.
+	// Read more at: https://tools.ietf.org/html/rfc7807
+	ContentJSONProblemHeaderValue = "application/problem+json"
+	// ContentXMLProblemHeaderValue header value for XML API problem error.
+	// Read more at: https://tools.ietf.org/html/rfc7807
+	ContentXMLProblemHeaderValue = "application/problem+xml"
+	// ContentJavascriptHeaderValue header value for JSONP & Javascript data.
+	ContentJavascriptHeaderValue = "text/javascript"
+	// ContentTextHeaderValue header value for Text data.
+	ContentTextHeaderValue = "text/plain"
+	// ContentXMLHeaderValue header value for XML data.
+	ContentXMLHeaderValue = "text/xml"
+	// ContentXMLUnreadableHeaderValue obsolete header value for XML.
+	ContentXMLUnreadableHeaderValue = "application/xml"
+	// ContentMarkdownHeaderValue custom key/content type, the real is the text/html.
+	ContentMarkdownHeaderValue = "text/markdown"
+	// ContentYAMLHeaderValue header value for YAML data.
+	ContentYAMLHeaderValue = "application/x-yaml"
+	// ContentYAMLTextHeaderValue header value for YAML plain text.
+	ContentYAMLTextHeaderValue = "text/yaml"
+	// ContentProtobufHeaderValue header value for Protobuf messages data.
+	ContentProtobufHeaderValue = "application/x-protobuf"
+	// ContentMsgPackHeaderValue header value for MsgPack data.
+	ContentMsgPackHeaderValue = "application/msgpack"
+	// ContentMsgPack2HeaderValue alternative header value for MsgPack data.
+	ContentMsgPack2HeaderValue = "application/x-msgpack"
+	// ContentFormHeaderValue header value for post form data.
+	ContentFormHeaderValue = "application/x-www-form-urlencoded"
+	// ContentFormMultipartHeaderValue header value for post multipart form data.
+	ContentFormMultipartHeaderValue = "multipart/form-data"
+	// ContentMultipartRelatedHeaderValue header value for multipart related data.
+	ContentMultipartRelatedHeaderValue = "multipart/related"
+	// ContentGRPCHeaderValue Content-Type header value for gRPC.
+	ContentGRPCHeaderValue = "application/grpc"
+)
+
+var types = map[string]string{
+	".3dm":       "x-world/x-3dmf",
+	".3dmf":      "x-world/x-3dmf",
+	".7z":        "application/x-7z-compressed",
+	".a":         "application/octet-stream",
+	".aab":       "application/x-authorware-bin",
+	".aam":       "application/x-authorware-map",
+	".aas":       "application/x-authorware-seg",
+	".abc":       "text/vndabc",
+	".ace":       "application/x-ace-compressed",
+	".acgi":      "text/html",
+	".afl":       "video/animaflex",
+	".ai":        "application/postscript",
+	".aif":       "audio/aiff",
+	".aifc":      "audio/aiff",
+	".aiff":      "audio/aiff",
+	".aim":       "application/x-aim",
+	".aip":       "text/x-audiosoft-intra",
+	".alz":       "application/x-alz-compressed",
+	".ani":       "application/x-navi-animation",
+	".aos":       "application/x-nokia-9000-communicator-add-on-software",
+	".aps":       "application/mime",
+	".apk":       "application/vnd.android.package-archive",
+	".arc":       "application/x-arc-compressed",
+	".arj":       "application/arj",
+	".art":       "image/x-jg",
+	".asf":       "video/x-ms-asf",
+	".asm":       "text/x-asm",
+	".asp":       "text/asp",
+	".asx":       "application/x-mplayer2",
+	".au":        "audio/basic",
+	".avi":       "video/x-msvideo",
+	".avs":       "video/avs-video",
+	".bcpio":     "application/x-bcpio",
+	".bin":       "application/mac-binary",
+	".bmp":       "image/bmp",
+	".boo":       "application/book",
+	".book":      "application/book",
+	".boz":       "application/x-bzip2",
+	".bsh":       "application/x-bsh",
+	".bz2":       "application/x-bzip2",
+	".bz":        "application/x-bzip",
+	".c++":       ContentTextHeaderValue,
+	".c":         "text/x-c",
+	".cab":       "application/vnd.ms-cab-compressed",
+	".cat":       "application/vndms-pkiseccat",
+	".cc":        "text/x-c",
+	".ccad":      "application/clariscad",
+	".cco":       "application/x-cocoa",
+	".cdf":       "application/cdf",
+	".cer":       "application/pkix-cert",
+	".cha":       "application/x-chat",
+	".chat":      "application/x-chat",
+	".chrt":      "application/vnd.kde.kchart",
+	".class":     "application/java",
+	".com":       ContentTextHeaderValue,
+	".conf":      ContentTextHeaderValue,
+	".cpio":      "application/x-cpio",
+	".cpp":       "text/x-c",
+	".cpt":       "application/mac-compactpro",
+	".crl":       "application/pkcs-crl",
+	".crt":       "application/pkix-cert",
+	".crx":       "application/x-chrome-extension",
+	".csh":       "text/x-scriptcsh",
+	".css":       "text/css",
+	".csv":       "text/csv",
+	".cxx":       ContentTextHeaderValue,
+	".dar":       "application/x-dar",
+	".dcr":       "application/x-director",
+	".deb":       "application/x-debian-package",
+	".deepv":     "application/x-deepv",
+	".def":       ContentTextHeaderValue,
+	".der":       "application/x-x509-ca-cert",
+	".dif":       "video/x-dv",
+	".dir":       "application/x-director",
+	".divx":      "video/divx",
+	".dl":        "video/dl",
+	".dmg":       "application/x-apple-diskimage",
+	".doc":       "application/msword",
+	".dot":       "application/msword",
+	".dp":        "application/commonground",
+	".drw":       "application/drafting",
+	".dump":      "application/octet-stream",
+	".dv":        "video/x-dv",
+	".dvi":       "application/x-dvi",
+	".dwf":       "drawing/x-dwf=(old)",
+	".dwg":       "application/acad",
+	".dxf":       "application/dxf",
+	".dxr":       "application/x-director",
+	".el":        "text/x-scriptelisp",
+	".elc":       "application/x-bytecodeelisp=(compiled=elisp)",
+	".eml":       "message/rfc822",
+	".env":       "application/x-envoy",
+	".eps":       "application/postscript",
+	".es":        "application/x-esrehber",
+	".etx":       "text/x-setext",
+	".evy":       "application/envoy",
+	".exe":       "application/octet-stream",
+	".f77":       "text/x-fortran",
+	".f90":       "text/x-fortran",
+	".f":         "text/x-fortran",
+	".fdf":       "application/vndfdf",
+	".fif":       "application/fractals",
+	".fli":       "video/fli",
+	".flo":       "image/florian",
+	".flv":       "video/x-flv",
+	".flx":       "text/vndfmiflexstor",
+	".fmf":       "video/x-atomic3d-feature",
+	".for":       "text/x-fortran",
+	".fpx":       "image/vndfpx",
+	".frl":       "application/freeloader",
+	".funk":      "audio/make",
+	".g3":        "image/g3fax",
+	".g":         ContentTextHeaderValue,
+	".gif":       "image/gif",
+	".gl":        "video/gl",
+	".gsd":       "audio/x-gsm",
+	".gsm":       "audio/x-gsm",
+	".gsp":       "application/x-gsp",
+	".gss":       "application/x-gss",
+	".gtar":      "application/x-gtar",
+	".gz":        "application/x-compressed",
+	".gzip":      "application/x-gzip",
+	".h":         "text/x-h",
+	".hdf":       "application/x-hdf",
+	".help":      "application/x-helpfile",
+	".hgl":       "application/vndhp-hpgl",
+	".hh":        "text/x-h",
+	".hlb":       "text/x-script",
+	".hlp":       "application/hlp",
+	".hpg":       "application/vndhp-hpgl",
+	".hpgl":      "application/vndhp-hpgl",
+	".hqx":       "application/binhex",
+	".hta":       "application/hta",
+	".htc":       "text/x-component",
+	".htm":       "text/html",
+	".html":      "text/html",
+	".htmls":     "text/html",
+	".htt":       "text/webviewhtml",
+	".htx":       "text/html",
+	".ice":       "x-conference/x-cooltalk",
+	".ico":       "image/x-icon",
+	".ics":       "text/calendar",
+	".icz":       "text/calendar",
+	".idc":       ContentTextHeaderValue,
+	".ief":       "image/ief",
+	".iefs":      "image/ief",
+	".iges":      "application/iges",
+	".igs":       "application/iges",
+	".ima":       "application/x-ima",
+	".imap":      "application/x-httpd-imap",
+	".inf":       "application/inf",
+	".ins":       "application/x-internett-signup",
+	".ip":        "application/x-ip2",
+	".isu":       "video/x-isvideo",
+	".it":        "audio/it",
+	".iv":        "application/x-inventor",
+	".ivr":       "i-world/i-vrml",
+	".ivy":       "application/x-livescreen",
+	".jam":       "audio/x-jam",
+	".jav":       "text/x-java-source",
+	".java":      "text/x-java-source",
+	".jcm":       "application/x-java-commerce",
+	".jfif-tbnl": "image/jpeg",
+	".jfif":      "image/jpeg",
+	".jnlp":      "application/x-java-jnlp-file",
+	".jpe":       "image/jpeg",
+	".jpeg":      "image/jpeg",
+	".jpg":       "image/jpeg",
+	".jps":       "image/x-jps",
+	".js":        ContentJavascriptHeaderValue,
+	".mjs":       ContentJavascriptHeaderValue,
+	".json":      ContentJSONHeaderValue,
+	".vue":       ContentJavascriptHeaderValue,
+	".jut":       "image/jutvision",
+	".kar":       "audio/midi",
+	".karbon":    "application/vnd.kde.karbon",
+	".kfo":       "application/vnd.kde.kformula",
+	".flw":       "application/vnd.kde.kivio",
+	".kml":       "application/vnd.google-earth.kml+xml",
+	".kmz":       "application/vnd.google-earth.kmz",
+	".kon":       "application/vnd.kde.kontour",
+	".kpr":       "application/vnd.kde.kpresenter",
+	".kpt":       "application/vnd.kde.kpresenter",
+	".ksp":       "application/vnd.kde.kspread",
+	".kwd":       "application/vnd.kde.kword",
+	".kwt":       "application/vnd.kde.kword",
+	".ksh":       "text/x-scriptksh",
+	".la":        "audio/nspaudio",
+	".lam":       "audio/x-liveaudio",
+	".latex":     "application/x-latex",
+	".lha":       "application/lha",
+	".lhx":       "application/octet-stream",
+	".list":      ContentTextHeaderValue,
+	".lma":       "audio/nspaudio",
+	".log":       ContentTextHeaderValue,
+	".lsp":       "text/x-scriptlisp",
+	".lst":       ContentTextHeaderValue,
+	".lsx":       "text/x-la-asf",
+	".ltx":       "application/x-latex",
+	".lzh":       "application/octet-stream",
+	".lzx":       "application/lzx",
+	".m1v":       "video/mpeg",
+	".m2a":       "audio/mpeg",
+	".m2v":       "video/mpeg",
+	".m3u":       "audio/x-mpegurl",
+	".m":         "text/x-m",
+	".man":       "application/x-troff-man",
+	".manifest":  "text/cache-manifest",
+	".map":       "application/x-navimap",
+	".mar":       ContentTextHeaderValue,
+	".mbd":       "application/mbedlet",
+	".mc$":       "application/x-magic-cap-package-10",
+	".mcd":       "application/mcad",
+	".mcf":       "text/mcf",
+	".mcp":       "application/netmc",
+	".me":        "application/x-troff-me",
+	".mht":       "message/rfc822",
+	".mhtml":     "message/rfc822",
+	".mid":       "application/x-midi",
+	".midi":      "application/x-midi",
+	".mif":       "application/x-frame",
+	".mime":      "message/rfc822",
+	".mjf":       "audio/x-vndaudioexplosionmjuicemediafile",
+	".mjpg":      "video/x-motion-jpeg",
+	".mm":        "application/base64",
+	".mme":       "application/base64",
+	".mod":       "audio/mod",
+	".moov":      "video/quicktime",
+	".mov":       "video/quicktime",
+	".movie":     "video/x-sgi-movie",
+	".mp2":       "audio/mpeg",
+	".mp3":       "audio/mpeg",
+	".mp4":       "video/mp4",
+	".mpa":       "audio/mpeg",
+	".mpc":       "application/x-project",
+	".mpe":       "video/mpeg",
+	".mpeg":      "video/mpeg",
+	".mpg":       "video/mpeg",
+	".mpga":      "audio/mpeg",
+	".mpp":       "application/vndms-project",
+	".mpt":       "application/x-project",
+	".mpv":       "application/x-project",
+	".mpx":       "application/x-project",
+	".mrc":       "application/marc",
+	".ms":        "application/x-troff-ms",
+	".mv":        "video/x-sgi-movie",
+	".my":        "audio/make",
+	".mzz":       "application/x-vndaudioexplosionmzz",
+	".nap":       "image/naplps",
+	".naplps":    "image/naplps",
+	".nc":        "application/x-netcdf",
+	".ncm":       "application/vndnokiaconfiguration-message",
+	".nif":       "image/x-niff",
+	".niff":      "image/x-niff",
+	".nix":       "application/x-mix-transfer",
+	".nsc":       "application/x-conference",
+	".nvd":       "application/x-navidoc",
+	".o":         "application/octet-stream",
+	".oda":       "application/oda",
+	".odb":       "application/vnd.oasis.opendocument.database",
+	".odc":       "application/vnd.oasis.opendocument.chart",
+	".odf":       "application/vnd.oasis.opendocument.formula",
+	".odg":       "application/vnd.oasis.opendocument.graphics",
+	".odi":       "application/vnd.oasis.opendocument.image",
+	".odm":       "application/vnd.oasis.opendocument.text-master",
+	".odp":       "application/vnd.oasis.opendocument.presentation",
+	".ods":       "application/vnd.oasis.opendocument.spreadsheet",
+	".odt":       "application/vnd.oasis.opendocument.text",
+	".oga":       "audio/ogg",
+	".ogg":       "audio/ogg",
+	".ogv":       "video/ogg",
+	".omc":       "application/x-omc",
+	".omcd":      "application/x-omcdatamaker",
+	".omcr":      "application/x-omcregerator",
+	".otc":       "application/vnd.oasis.opendocument.chart-template",
+	".otf":       "application/vnd.oasis.opendocument.formula-template",
+	".otg":       "application/vnd.oasis.opendocument.graphics-template",
+	".oth":       "application/vnd.oasis.opendocument.text-web",
+	".oti":       "application/vnd.oasis.opendocument.image-template",
+	".otm":       "application/vnd.oasis.opendocument.text-master",
+	".otp":       "application/vnd.oasis.opendocument.presentation-template",
+	".ots":       "application/vnd.oasis.opendocument.spreadsheet-template",
+	".ott":       "application/vnd.oasis.opendocument.text-template",
+	".p10":       "application/pkcs10",
+	".p12":       "application/pkcs-12",
+	".p7a":       "application/x-pkcs7-signature",
+	".p7c":       "application/pkcs7-mime",
+	".p7m":       "application/pkcs7-mime",
+	".p7r":       "application/x-pkcs7-certreqresp",
+	".p7s":       "application/pkcs7-signature",
+	".p":         "text/x-pascal",
+	".part":      "application/pro_eng",
+	".pas":       "text/pascal",
+	".pbm":       "image/x-portable-bitmap",
+	".pcl":       "application/vndhp-pcl",
+	".pct":       "image/x-pict",
+	".pcx":       "image/x-pcx",
+	".pdb":       "chemical/x-pdb",
+	".pdf":       "application/pdf",
+	".pfunk":     "audio/make",
+	".pgm":       "image/x-portable-graymap",
+	".pic":       "image/pict",
+	".pict":      "image/pict",
+	".pkg":       "application/x-newton-compatible-pkg",
+	".pko":       "application/vndms-pkipko",
+	".pl":        "text/x-scriptperl",
+	".plx":       "application/x-pixclscript",
+	".pm4":       "application/x-pagemaker",
+	".pm5":       "application/x-pagemaker",
+	".pm":        "text/x-scriptperl-module",
+	".png":       "image/png",
+	".pnm":       "application/x-portable-anymap",
+	".pot":       "application/mspowerpoint",
+	".pov":       "model/x-pov",
+	".ppa":       "application/vndms-powerpoint",
+	".ppm":       "image/x-portable-pixmap",
+	".pps":       "application/mspowerpoint",
+	".ppt":       "application/mspowerpoint",
+	".ppz":       "application/mspowerpoint",
+	".pre":       "application/x-freelance",
+	".prt":       "application/pro_eng",
+	".ps":        "application/postscript",
+	".psd":       "application/octet-stream",
+	".pvu":       "paleovu/x-pv",
+	".pwz":       "application/vndms-powerpoint",
+	".py":        "text/x-scriptphyton",
+	".pyc":       "application/x-bytecodepython",
+	".qcp":       "audio/vndqcelp",
+	".qd3":       "x-world/x-3dmf",
+	".qd3d":      "x-world/x-3dmf",
+	".qif":       "image/x-quicktime",
+	".qt":        "video/quicktime",
+	".qtc":       "video/x-qtc",
+	".qti":       "image/x-quicktime",
+	".qtif":      "image/x-quicktime",
+	".ra":        "audio/x-pn-realaudio",
+	".ram":       "audio/x-pn-realaudio",
+	".rar":       "application/x-rar-compressed",
+	".ras":       "application/x-cmu-raster",
+	".rast":      "image/cmu-raster",
+	".rexx":      "text/x-scriptrexx",
+	".rf":        "image/vndrn-realflash",
+	".rgb":       "image/x-rgb",
+	".rm":        "application/vndrn-realmedia",
+	".rmi":       "audio/mid",
+	".rmm":       "audio/x-pn-realaudio",
+	".rmp":       "audio/x-pn-realaudio",
+	".rng":       "application/ringing-tones",
+	".rnx":       "application/vndrn-realplayer",
+	".roff":      "application/x-troff",
+	".rp":        "image/vndrn-realpix",
+	".rpm":       "audio/x-pn-realaudio-plugin",
+	".rt":        "text/vndrn-realtext",
+	".rtf":       "text/richtext",
+	".rtx":       "text/richtext",
+	".rv":        "video/vndrn-realvideo",
+	".s":         "text/x-asm",
+	".s3m":       "audio/s3m",
+	".s7z":       "application/x-7z-compressed",
+	".saveme":    "application/octet-stream",
+	".sbk":       "application/x-tbook",
+	".scm":       "text/x-scriptscheme",
+	".sdml":      ContentTextHeaderValue,
+	".sdp":       "application/sdp",
+	".sdr":       "application/sounder",
+	".sea":       "application/sea",
+	".set":       "application/set",
+	".sgm":       "text/x-sgml",
+	".sgml":      "text/x-sgml",
+	".sh":        "text/x-scriptsh",
+	".shar":      "application/x-bsh",
+	".shtml":     "text/x-server-parsed-html",
+	".sid":       "audio/x-psid",
+	".skd":       "application/x-koan",
+	".skm":       "application/x-koan",
+	".skp":       "application/x-koan",
+	".skt":       "application/x-koan",
+	".sit":       "application/x-stuffit",
+	".sitx":      "application/x-stuffitx",
+	".sl":        "application/x-seelogo",
+	".smi":       "application/smil",
+	".smil":      "application/smil",
+	".snd":       "audio/basic",
+	".sol":       "application/solids",
+	".spc":       "text/x-speech",
+	".spl":       "application/futuresplash",
+	".spr":       "application/x-sprite",
+	".sprite":    "application/x-sprite",
+	".spx":       "audio/ogg",
+	".src":       "application/x-wais-source",
+	".ssi":       "text/x-server-parsed-html",
+	".ssm":       "application/streamingmedia",
+	".sst":       "application/vndms-pkicertstore",
+	".step":      "application/step",
+	".stl":       "application/sla",
+	".stp":       "application/step",
+	".sv4cpio":   "application/x-sv4cpio",
+	".sv4crc":    "application/x-sv4crc",
+	".svf":       "image/vnddwg",
+	".svg":       "image/svg+xml",
+	".svr":       "application/x-world",
+	".swf":       "application/x-shockwave-flash",
+	".t":         "application/x-troff",
+	".talk":      "text/x-speech",
+	".tar":       "application/x-tar",
+	".tbk":       "application/toolbook",
+	".tcl":       "text/x-scripttcl",
+	".tcsh":      "text/x-scripttcsh",
+	".tex":       "application/x-tex",
+	".texi":      "application/x-texinfo",
+	".texinfo":   "application/x-texinfo",
+	".text":      ContentTextHeaderValue,
+	".tgz":       "application/gnutar",
+	".tif":       "image/tiff",
+	".tiff":      "image/tiff",
+	".tr":        "application/x-troff",
+	".tsi":       "audio/tsp-audio",
+	".tsp":       "application/dsptype",
+	".tsv":       "text/tab-separated-values",
+	".turbot":    "image/florian",
+	".txt":       ContentTextHeaderValue,
+	".uil":       "text/x-uil",
+	".uni":       "text/uri-list",
+	".unis":      "text/uri-list",
+	".unv":       "application/i-deas",
+	".uri":       "text/uri-list",
+	".uris":      "text/uri-list",
+	".ustar":     "application/x-ustar",
+	".uu":        "text/x-uuencode",
+	".uue":       "text/x-uuencode",
+	".vcd":       "application/x-cdlink",
+	".vcf":       "text/x-vcard",
+	".vcard":     "text/x-vcard",
+	".vcs":       "text/x-vcalendar",
+	".vda":       "application/vda",
+	".vdo":       "video/vdo",
+	".vew":       "application/groupwise",
+	".viv":       "video/vivo",
+	".vivo":      "video/vivo",
+	".vmd":       "application/vocaltec-media-desc",
+	".vmf":       "application/vocaltec-media-file",
+	".voc":       "audio/voc",
+	".vos":       "video/vosaic",
+	".vox":       "audio/voxware",
+	".vqe":       "audio/x-twinvq-plugin",
+	".vqf":       "audio/x-twinvq",
+	".vql":       "audio/x-twinvq-plugin",
+	".vrml":      "application/x-vrml",
+	".vrt":       "x-world/x-vrt",
+	".vsd":       "application/x-visio",
+	".vst":       "application/x-visio",
+	".vsw":       "application/x-visio",
+	".w60":       "application/wordperfect60",
+	".w61":       "application/wordperfect61",
+	".w6w":       "application/msword",
+	".wav":       "audio/wav",
+	".wb1":       "application/x-qpro",
+	".wbmp":      "image/vnd.wap.wbmp",
+	".web":       "application/vndxara",
+	".wiz":       "application/msword",
+	".wk1":       "application/x-123",
+	".wmf":       "windows/metafile",
+	".wml":       "text/vnd.wap.wml",
+	".wmlc":      "application/vnd.wap.wmlc",
+	".wmls":      "text/vnd.wap.wmlscript",
+	".wmlsc":     "application/vnd.wap.wmlscriptc",
+	".word":      "application/msword",
+	".wp5":       "application/wordperfect",
+	".wp6":       "application/wordperfect",
+	".wp":        "application/wordperfect",
+	".wpd":       "application/wordperfect",
+	".wq1":       "application/x-lotus",
+	".wri":       "application/mswrite",
+	".wrl":       "application/x-world",
+	".wrz":       "model/vrml",
+	".wsc":       "text/scriplet",
+	".wsrc":      "application/x-wais-source",
+	".wtk":       "application/x-wintalk",
+	".x-png":     "image/png",
+	".xbm":       "image/x-xbitmap",
+	".xdr":       "video/x-amt-demorun",
+	".xgz":       "xgl/drawing",
+	".xif":       "image/vndxiff",
+	".xl":        "application/excel",
+	".xla":       "application/excel",
+	".xlb":       "application/excel",
+	".xlc":       "application/excel",
+	".xld":       "application/excel",
+	".xlk":       "application/excel",
+	".xll":       "application/excel",
+	".xlm":       "application/excel",
+	".xls":       "application/excel",
+	".xlt":       "application/excel",
+	".xlv":       "application/excel",
+	".xlw":       "application/excel",
+	".xm":        "audio/xm",
+	".xml":       ContentXMLHeaderValue,
+	".xmz":       "xgl/movie",
+	".xpix":      "application/x-vndls-xpix",
+	".xpm":       "image/x-xpixmap",
+	".xsr":       "video/x-amt-showrun",
+	".xwd":       "image/x-xwd",
+	".xyz":       "chemical/x-pdb",
+	".z":         "application/x-compress",
+	".zip":       "application/zip",
+	".zoo":       "application/octet-stream",
+	".zsh":       "text/x-scriptzsh",
+	".docx":      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	".docm":      "application/vnd.ms-word.document.macroEnabled.12",
+	".dotx":      "application/vnd.openxmlformats-officedocument.wordprocessingml.template",
+	".dotm":      "application/vnd.ms-word.template.macroEnabled.12",
+	".xlsx":      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	".xlsm":      "application/vnd.ms-excel.sheet.macroEnabled.12",
+	".xltx":      "application/vnd.openxmlformats-officedocument.spreadsheetml.template",
+	".xltm":      "application/vnd.ms-excel.template.macroEnabled.12",
+	".xlsb":      "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
+	".xlam":      "application/vnd.ms-excel.addin.macroEnabled.12",
+	".pptx":      "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+	".pptm":      "application/vnd.ms-powerpoint.presentation.macroEnabled.12",
+	".ppsx":      "application/vnd.openxmlformats-officedocument.presentationml.slideshow",
+	".ppsm":      "application/vnd.ms-powerpoint.slideshow.macroEnabled.12",
+	".potx":      "application/vnd.openxmlformats-officedocument.presentationml.template",
+	".potm":      "application/vnd.ms-powerpoint.template.macroEnabled.12",
+	".ppam":      "application/vnd.ms-powerpoint.addin.macroEnabled.12",
+	".sldx":      "application/vnd.openxmlformats-officedocument.presentationml.slide",
+	".sldm":      "application/vnd.ms-powerpoint.slide.macroEnabled.12",
+	".thmx":      "application/vnd.ms-officetheme",
+	".onetoc":    "application/onenote",
+	".onetoc2":   "application/onenote",
+	".onetmp":    "application/onenote",
+	".onepkg":    "application/onenote",
+	".xpi":       "application/x-xpinstall",
+	".wasm":      "application/wasm",
+	".m4a":       "audio/mp4",
+	".flac":      "audio/x-flac",
+	".amr":       "audio/amr",
+	".aac":       "audio/aac",
+	".opus":      "video/ogg",
+	".m4v":       "video/mp4",
+	".mkv":       "video/x-matroska",
+	".caf":       "audio/x-caf",
+	".m3u8":      "application/x-mpegURL",
+	".mpd":       "application/dash+xml",
+	".webp":      "image/webp",
+	".epub":      "application/epub+zip",
+}
+
+//nolint:gochecknoinits
+func init() {
+	for ext, typ := range types {
+		// skip errors
+		_ = mime.AddExtensionType(ext, typ)
+	}
+}

fileutils/copy.go

@@ -10,7 +10,38 @@ import (
 )
 
 // Copy copies a file or folder from one place to another.
-func Copy(fs afero.Fs, src, dst, scope string) error {
+func Copy(fs afero.Fs, src, dst string) error {
+	if src = path.Clean("/" + src); src == "" {
+		return os.ErrNotExist
+	}
+
+	if dst = path.Clean("/" + dst); dst == "" {
+		return os.ErrNotExist
+	}
+
+	if src == "/" || dst == "/" {
+		// Prohibit copying from or to the virtual root directory.
+		return os.ErrInvalid
+	}
+
+	if dst == src {
+		return os.ErrInvalid
+	}
+
+	info, err := fs.Stat(src)
+	if err != nil {
+		return err
+	}
+
+	if info.IsDir() {
+		return CopyDir(fs, src, dst)
+	}
+
+	return CopyFile(fs, src, dst)
+}
+
+// Same as Copy, but checks scope in symlinks
+func CopyScoped(fs afero.Fs, src, dst, scope string) error {
 	if src = path.Clean("/" + src); src == "" {
 		return os.ErrNotExist
 	}
@@ -33,18 +64,17 @@ func Copy(fs afero.Fs, src, dst, scope string) error {
 		return err
 	}
 
-	//nolint:exhaustive
 	switch info.Mode() & os.ModeType {
 	case os.ModeDir:
-		return CopyDir(fs, src, dst, scope)
+		return CopyDirScoped(fs, src, dst, scope)
 	case os.ModeSymlink:
-		return CopySymLink(fs, src, dst, scope)
+		return CopySymLinkScoped(fs, src, dst, scope)
 	default:
 		return CopyFile(fs, src, dst)
 	}
 }
 
-func CopySymLink(fs afero.Fs, source, dest, scope string) error {
+func CopySymLinkScoped(fs afero.Fs, source, dest, scope string) error {
 	if reader, ok := fs.(afero.LinkReader); ok {
 		link, err := reader.ReadlinkIfPossible(source)
 		if err != nil {

fileutils/dir.go

@@ -11,7 +11,60 @@ import (
 // CopyDir copies a directory from source to dest and all
 // of its sub-directories. It doesn't stop if it finds an error
 // during the copy. Returns an error if any.
-func CopyDir(fs afero.Fs, source, dest, scope string) error {
+func CopyDir(fs afero.Fs, source, dest string) error {
+	// Get properties of source.
+	srcinfo, err := fs.Stat(source)
+	if err != nil {
+		return err
+	}
+
+	// Create the destination directory.
+	err = fs.MkdirAll(dest, srcinfo.Mode())
+	if err != nil {
+		return err
+	}
+
+	dir, _ := fs.Open(source)
+	obs, err := dir.Readdir(-1)
+	if err != nil {
+		return err
+	}
+
+	var errs []error
+
+	for _, obj := range obs {
+		fsource := source + "/" + obj.Name()
+		fdest := dest + "/" + obj.Name()
+
+		if obj.IsDir() {
+			// Create sub-directories, recursively.
+			err = CopyDir(fs, fsource, fdest)
+			if err != nil {
+				errs = append(errs, err)
+			}
+		} else {
+			// Perform the file copy.
+			err = CopyFile(fs, fsource, fdest)
+			if err != nil {
+				errs = append(errs, err)
+			}
+		}
+	}
+
+	var errString string
+	for _, err := range errs {
+		errString += err.Error() + "\n"
+	}
+
+	if errString != "" {
+		return errors.New(errString)
+	}
+
+	return nil
+}
+
+// Same as CopyDir, but checks scope in symlinks
+func CopyDirScoped(fs afero.Fs, source, dest, scope string) error {
 	// Get properties of source.
 	srcinfo, err := fs.Stat(source)
 	if err != nil {
@@ -36,15 +89,14 @@ func CopyDir(fs afero.Fs, source, dest, scope string) error {
 		fsource := source + "/" + obj.Name()
 		fdest := dest + "/" + obj.Name()
 
-		//nolint:exhaustive
 		switch obj.Mode() & os.ModeType {
 		case os.ModeDir:
 			// Create sub-directories, recursively.
-			if err := CopyDir(fs, fsource, fdest, scope); err != nil {
+			if err := CopyDirScoped(fs, fsource, fdest, scope); err != nil {
 				errs = append(errs, err)
 			}
 		case os.ModeSymlink:
-			if err := CopySymLink(fs, fsource, fdest, scope); err != nil {
+			if err := CopySymLinkScoped(fs, fsource, fdest, scope); err != nil {
 				return err
 			}
 		default:

fileutils/file.go

@@ -11,6 +11,8 @@ import (
 
 	"github.com/mholt/archiver/v3"
 	"github.com/spf13/afero"
+
+	"github.com/filebrowser/filebrowser/v2/files"
 )
 
 // MoveFile moves file from src to dst.
@@ -26,7 +28,8 @@ func MoveFile(fs afero.Fs, src, dst string) error {
 	}
 
 	// fallback
-	if err := CopyFile(fs, src, dst); err != nil {
+	err := Copy(fs, src, dst)
+	if err != nil {
 		_ = fs.Remove(dst)
 		return err
 	}
@@ -48,13 +51,13 @@ func CopyFile(fs afero.Fs, source, dest string) error {
 
 	// Makes the directory needed to create the dst
 	// file.
-	err = fs.MkdirAll(filepath.Dir(dest), 0666) //nolint:gomnd
+	err = fs.MkdirAll(filepath.Dir(dest), files.PermDir)
 	if err != nil {
 		return err
 	}
 
 	// Create the destination file.
-	dst, err := fs.OpenFile(dest, os.O_RDWR|os.O_CREATE|os.O_TRUNC, 0775) //nolint:gomnd
+	dst, err := fs.OpenFile(dest, os.O_RDWR|os.O_CREATE|os.O_TRUNC, files.PermFile)
 	if err != nil {
 		return err
 	}
@@ -145,7 +148,7 @@ func CommonPrefix(sep byte, paths ...string) string {
 	// (e.g. /home/user1, /home/user1/foo, /home/user1/bar).
 	// path.Clean will have cleaned off trailing / separators with
 	// the exception of the root directory, "/" (in which case we
-	// make it "//", but this will get fixed up to "/" bellow).
+	// make it "//", but this will get fixed up to "/" below).
 	c = append(c, sep)
 
 	// Ignore the first path since it's already in c

frontend/.eslintrc.json

@@ -4,14 +4,21 @@
     "node": true
   },
   "extends": [
-    "plugin:vue/essential",
+    "plugin:vue/vue3-essential",
     "eslint:recommended",
+    "@vue/eslint-config-typescript",
     "@vue/eslint-config-prettier"
   ],
   "rules": {
     "vue/multi-word-component-names": "off",
-    "vue/no-reserved-component-names": "warn",
+    "vue/no-mutating-props": [
-    "vue/no-mutating-props": "warn"
+      "error",
+      {
+        "shallowOnly": true
+      }
+    ]
+    // no-undef is already included in
+    // @vue/eslint-config-typescript
   },
   "parserOptions": {
     "ecmaVersion": "latest",

frontend/index.html

@@ -187,6 +187,6 @@
       </div>
     </div>
 
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

frontend/package.json

@@ -1,64 +1,73 @@
 {
   "name": "filebrowser-frontend",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "private": true,
   "type": "module",
+  "engines": {
+    "npm": ">=7.0.0",
+    "node": ">=18.0.0"
+  },
   "scripts": {
     "dev": "vite dev",
-    "serve": "vite serve",
+    "build": "npm run typecheck && vite build",
-    "build": "vite build",
-    "watch": "vite build --watch",
     "clean": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitkeep' -exec rm -r {} +",
-    "lint": "eslint --ext .vue,.js src/",
+    "typecheck": "vue-tsc -p ./tsconfig.json --noEmit",
-    "lint:fix": "eslint --ext .vue,.js --fix src/",
+    "lint": "npm run typecheck && eslint --ext .vue,.ts src/",
-    "format": "prettier --write ."
+    "lint:fix": "eslint --ext .vue,.ts --fix src/",
+    "format": "prettier --write .",
+    "test": "playwright test"
   },
   "dependencies": {
-    "ace-builds": "^1.23.4",
+    "@chenfengyuan/vue-number-input": "^2.0.1",
-    "clipboard": "^2.0.11",
+    "@vueuse/core": "^10.9.0",
-    "core-js": "^3.32.0",
+    "@vueuse/integrations": "^10.9.0",
-    "css-vars-ponyfill": "^2.4.8",
+    "ace-builds": "^1.32.9",
-    "filesize": "^10.0.8",
+    "core-js": "^3.36.1",
-    "js-base64": "^3.7.5",
+    "dayjs": "^1.11.10",
-    "lodash.clonedeep": "^4.5.0",
+    "filesize": "^10.1.1",
-    "lodash.throttle": "^4.1.1",
+    "js-base64": "^3.7.7",
-    "material-icons": "^1.13.9",
+    "jwt-decode": "^4.0.0",
-    "moment": "^2.29.4",
+    "lodash-es": "^4.17.21",
+    "marked": "^14.1.0",
+    "material-icons": "^1.13.12",
     "normalize.css": "^8.0.1",
-    "noty": "^3.2.0-beta",
+    "pinia": "^2.1.7",
     "pretty-bytes": "^6.1.1",
-    "qrcode.vue": "^1.7.0",
+    "qrcode.vue": "^3.4.1",
-    "tus-js-client": "^3.1.1",
+    "tus-js-client": "^4.1.0",
     "utif": "^3.1.0",
-    "vue": "^2.7.14",
+    "video.js": "^8.10.0",
-    "vue-async-computed": "^3.9.0",
+    "videojs-hotkeys": "^0.2.28",
-    "vue-i18n": "^8.28.2",
+    "videojs-mobile-ui": "^1.1.1",
-    "vue-lazyload": "^1.3.5",
+    "vue": "^3.4.21",
-    "vue-router": "^3.6.5",
+    "vue-final-modal": "^4.5.4",
-    "vue-simple-progress": "^1.1.1",
+    "vue-i18n": "^9.10.2",
-    "vuex": "^3.6.2",
+    "vue-lazyload": "^3.0.0",
-    "vuex-router-sync": "^5.0.0",
+    "vue-reader": "^1.2.14",
-    "whatwg-fetch": "^3.6.17"
+    "vue-router": "^4.3.0",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-legacy": "^4.1.1",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
-    "@vitejs/plugin-vue2": "^2.2.0",
+    "@playwright/test": "^1.42.1",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@types/lodash-es": "^4.17.12",
-    "autoprefixer": "^10.4.14",
+    "@types/node": "^20.12.2",
-    "eslint": "^8.46.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "@vitejs/plugin-legacy": "^5.3.2",
-    "eslint-plugin-vue": "^9.16.1",
+    "@vitejs/plugin-vue": "^5.0.4",
-    "jsdom": "^22.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
-    "postcss": "^8.4.31",
+    "@vue/eslint-config-typescript": "^13.0.0",
-    "prettier": "^3.0.1",
+    "autoprefixer": "^10.4.19",
-    "terser": "^5.19.2",
+    "concurrently": "^8.2.2",
-    "vite": "^4.5.2",
+    "eslint": "^8.57.0",
-    "vite-plugin-compression2": "^0.10.3",
+    "eslint-plugin-prettier": "^5.1.3",
-    "vite-plugin-rewrite-all": "^1.0.1"
+    "eslint-plugin-vue": "^9.24.0",
-  },
+    "jsdom": "^24.0.0",
-  "browserslist": [
+    "postcss": "^8.4.38",
-    "> 1%",
+    "prettier": "^3.2.5",
-    "last 2 versions",
+    "terser": "^5.30.0",
-    "not ie < 11"
+    "vite": "^5.4.6",
-  ]
+    "vite-plugin-compression2": "^1.0.0",
+    "vue-tsc": "^2.0.7"
+  }
 }

frontend/playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://127.0.0.1:5173",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    /* Set default locale to English (US) */
+    locale: "en-US",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://127.0.0.1:5173",
+    reuseExistingServer: !process.env.CI,
+  },
+});

frontend/public/index.html

@@ -16,6 +16,8 @@
       [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]
     </title>
 
+    <meta name="robots" content="noindex,nofollow" />
+
     <link
       rel="icon"
       type="image/png"
@@ -179,14 +181,9 @@
       </div>
     </div>
 
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
 
-    [{[ if .Theme -]}]
+    [{[ if .CSS -]}]
-    <link
-      rel="stylesheet"
-      href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css"
-    />
-    [{[ end ]}] [{[ if .CSS -]}]
     <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
     [{[ end ]}]
   </body>

frontend/public/themes/dark.css

@@ -1,232 +0,0 @@
-:root {
-  --background: #141D24;
-  --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);
-}
-
-body {
-  background: var(--background);
-  color: var(--textPrimary);
-}
-
-#loading {
-  background: var(--background);
-}
-#loading .spinner div, main .spinner div {
-  background: var(--icon);
-}
-
-#login {
-  background: var(--background);
-}
-
-header {
-  background: var(--surfacePrimary);
-}
-
-#search #input {
-  background: var(--surfaceSecondary);
-  border-color: var(--surfacePrimary);
-}
-#search #input input::placeholder {
-  color: var(--textSecondary);
-}
-#search.active #input {
-  background: var(--surfacePrimary);
-}
-#search.active input {
-  color: var(--textPrimary);
-}
-#search #result {
-  background: var(--background);
-  color: var(--textPrimary);
-}
-#search .boxes {
-  background: var(--surfaceSecondary);
-}
-#search .boxes h3 {
-  color: var(--textPrimary);
-}
-
-.action {
-  color: var(--textPrimary) !important;
-}
-.action:hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-.action i {
-  color: var(--icon) !important;
-}
-.action .counter {
-  border-color: var(--surfacePrimary);
-}
-
-nav > div {
-  border-color: var(--divider);
-}
-
-.breadcrumbs {
-  border-color: var(--divider);
-  color: var(--textPrimary) !important;
-}
-.breadcrumbs span {
-  color: var(--textPrimary) !important;
-}
-.breadcrumbs a:hover {
-  background-color: rgba(255, 255, 255, .2);
-}
-
-#listing .item {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-  border-color: var(--divider) !important;
-}
-#listing .item i {
-  color: var(--icon);
-}
-#listing .item .modified {
-  color: var(--textSecondary);
-}
-#listing h2,
-#listing.list .header span {
-  color: var(--textPrimary) !important;
-}
-#listing.list .header span {
-  color: var(--textPrimary);
-}
-#listing.list .header i {
-  color: var(--icon);
-}
-#listing.list .item.header {
-  background: var(--background);
-}
-#listing .item .symlink-icon {
-  color: var(--surfacePrimary);
-}
-
-.message {
-  color: var(--textPrimary);
-}
-
-.card {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-}
-.button--flat:hover {
-  background: var(--surfaceSecondary);
-}
-
-.dashboard #nav ul li {
-  color: var(--textSecondary);
-}
-.dashboard #nav ul li:hover {
-  background: var(--surfaceSecondary);
-}
-
-.card h3,
-.dashboard #nav,
-.dashboard p label {
-  color: var(--textPrimary);
-}
-.card#share input,
-.card#share select,
-.input {
-  background: var(--surfaceSecondary);
-  color: var(--textPrimary);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-}
-.input:hover,
-.input:focus {
-  border-color: rgba(255, 255, 255, 0.15);
-}
-.input--red {
-  background: #73302D;
-}
-
-.input--green {
-  background: #147A41;
-}
-
-.dashboard #nav .wrapper,
-.collapsible {
-  border-color: var(--divider);
-}
-.collapsible > label * {
-  color: var(--textPrimary);
-}
-
-table th {
-  color: var(--textSecondary);
-}
-
-.file-list li:hover {
-  background: var(--surfaceSecondary);
-}
-.file-list li:before {
-  color: var(--textSecondary);
-}
-.file-list li[aria-selected=true]:before {
-  color: var(--icon);
-}
-
-.shell {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-}
-.shell__divider {
-  background: rgba(255, 255, 255, 0.1);
-}
-.shell__divider:hover {
-  background: rgba(255, 255, 255, 0.4);
-}
-.shell__result {
-  border-top: 1px solid var(--divider);
-}
-
-#editor-container {
-  background: var(--background);
-}
-
-#editor-container .bar {
-  background: var(--surfacePrimary);
-}
-
-@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;
-  }
-}
-
-.share__box {
-  background: var(--surfacePrimary) !important;
-  color: var(--textPrimary);
-}
-
-.share__box__element {
-  border-top-color: var(--divider);
-}
-
-@keyframes pulse {
-  0% {
-    background-color: rgba(0, 0, 0, 0);
-  }
-  50% {
-    background-color: rgba(255, 255, 255, .2);
-  }
-  100% {
-    background-color: rgba(0, 0, 0, 0);
-  }
-}

frontend/src/App.vue

@@ -4,23 +4,30 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-// eslint-disable-next-line no-undef
+import { ref, onMounted, watch } from "vue";
-// __webpack_public_path__ = window.FileBrowser.StaticURL + "/";
+import { useI18n } from "vue-i18n";
+import { setHtmlLocale } from "./i18n";
+import { getMediaPreference, getTheme, setTheme } from "./utils/theme";
 
-export default {
+const { locale } = useI18n();
-  name: "app",
+
-  mounted() {
+const userTheme = ref<UserTheme>(getTheme() || getMediaPreference());
+
+onMounted(() => {
+  setTheme(userTheme.value);
+  setHtmlLocale(locale.value);
+  // this might be null during HMR
   const loading = document.getElementById("loading");
-    loading.classList.add("done");
+  loading?.classList.add("done");
 
   setTimeout(function () {
-      loading.parentNode.removeChild(loading);
+    loading?.parentNode?.removeChild(loading);
   }, 200);
-  },
+});
-};
-</script>
 
-<style>
+// handles ltr/rtl changes
-@import "./css/styles.css";
+watch(locale, (newValue) => {
-</style>
+  newValue && setHtmlLocale(newValue);
+});
+</script>

frontend/src/api/commands.ts

@@ -1,15 +1,22 @@
 import { removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 
 const ssl = window.location.protocol === "https:";
 const protocol = ssl ? "wss:" : "ws:";
 
-export default function command(url, command, onmessage, onclose) {
+export default function command(
-  url = removePrefix(url);
+  url: string,
-  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${store.state.jwt}`;
+  command: string,
+  onmessage: WebSocket["onmessage"],
+  onclose: WebSocket["onclose"]
+) {
+  const authStore = useAuthStore();
 
-  let conn = new window.WebSocket(url);
+  url = removePrefix(url);
+  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${authStore.jwt}`;
+
+  const conn = new window.WebSocket(url);
   conn.onopen = () => conn.send(command);
   conn.onmessage = onmessage;
   conn.onclose = onclose;

frontend/src/api/files.ts

@@ -1,19 +1,20 @@
 import { createURL, fetchURL, removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
 import { upload as postTus, useTus } from "./tus";
 
-export async function fetch(url) {
+export async function fetch(url: string) {
   url = removePrefix(url);
 
   const res = await fetchURL(`/api/resources${url}`, {});
 
-  let data = await res.json();
+  const data = (await res.json()) as Resource;
   data.url = `/files${url}`;
 
   if (data.isDir) {
     if (!data.url.endsWith("/")) data.url += "/";
-    data.items = data.items.map((item, index) => {
+    // Perhaps change the any
+    data.items = data.items.map((item: any, index: any) => {
       item.index = index;
       item.url = `${data.url}${encodeURIComponent(item.name)}`;
 
@@ -28,10 +29,12 @@ export async function fetch(url) {
   return data;
 }
 
-async function resourceAction(url, method, content) {
+async function resourceAction(url: string, method: ApiMethod, content?: any) {
   url = removePrefix(url);
 
-  let opts = { method };
+  const opts: ApiOpts = {
+    method,
+  };
 
   if (content) {
     opts.body = content;
@@ -42,15 +45,15 @@ async function resourceAction(url, method, content) {
   return res;
 }
 
-export async function remove(url, skipTrash = true) {
+export async function remove(url: string, skipTrash = true) {
   return resourceAction(`${url}?skip_trash=${skipTrash}`, "DELETE");
 }
 
-export async function put(url, content = "") {
+export async function put(url: string, content = "") {
   return resourceAction(url, "PUT", content);
 }
 
-export function download(format, ...files) {
+export function download(format: any, ...files: string[]) {
   let url = `${baseURL}/api/raw`;
 
   if (files.length === 1) {
@@ -58,7 +61,7 @@ export function download(format, ...files) {
   } else {
     let arg = "";
 
-    for (let file of files) {
+    for (const file of files) {
       arg += removePrefix(file) + ",";
     }
 
@@ -71,14 +74,20 @@ export function download(format, ...files) {
     url += `algo=${format}&`;
   }
 
-  if (store.state.jwt) {
+  const authStore = useAuthStore();
-    url += `auth=${store.state.jwt}&`;
+  if (authStore.jwt) {
+    url += `auth=${authStore.jwt}&`;
   }
 
   window.open(url);
 }
 
-export async function post(url, content = "", overwrite = false, onupload) {
+export async function post(
+  url: string,
+  content: ApiContent = "",
+  overwrite = false,
+  onupload: any = () => {}
+) {
   // Use the pre-existing API if:
   const useResourcesApi =
     // a folder is being created
@@ -93,10 +102,15 @@ export async function post(url, content = "", overwrite = false, onupload) {
     : postTus(url, content, overwrite, onupload);
 }
 
-async function postResources(url, content = "", overwrite = false, onupload) {
+async function postResources(
+  url: string,
+  content: ApiContent = "",
+  overwrite = false,
+  onupload: any
+) {
   url = removePrefix(url);
 
-  let bufferContent;
+  let bufferContent: ArrayBuffer;
   if (
     content instanceof Blob &&
     !["http:", "https:"].includes(window.location.protocol)
@@ -104,14 +118,15 @@ async function postResources(url, content = "", overwrite = false, onupload) {
     bufferContent = await new Response(content).arrayBuffer();
   }
 
+  const authStore = useAuthStore();
   return new Promise((resolve, reject) => {
-    let request = new XMLHttpRequest();
+    const request = new XMLHttpRequest();
     request.open(
       "POST",
       `${baseURL}/api/resources${url}?override=${overwrite}`,
       true
     );
-    request.setRequestHeader("X-Auth", store.state.jwt);
+    request.setRequestHeader("X-Auth", authStore.jwt);
 
     if (typeof onupload === "function") {
       request.upload.onprogress = onupload;
@@ -135,12 +150,17 @@ async function postResources(url, content = "", overwrite = false, onupload) {
   });
 }
 
-function moveCopy(items, copy = false, overwrite = false, rename = false) {
+function moveCopy(
-  let promises = [];
+  items: any[],
+  copy = false,
+  overwrite = false,
+  rename = false
+) {
+  const promises = [];
 
-  for (let item of items) {
+  for (const item of items) {
     const from = item.from;
-    const to = encodeURIComponent(removePrefix(item.to));
+    const to = encodeURIComponent(removePrefix(item.to ?? ""));
     const url = `${from}?action=${
       copy ? "copy" : "rename"
     }&destination=${to}&override=${overwrite}&rename=${rename}`;
@@ -150,25 +170,25 @@ function moveCopy(items, copy = false, overwrite = false, rename = false) {
   return Promise.all(promises);
 }
 
-export function move(items, overwrite = false, rename = false) {
+export function move(items: any[], overwrite = false, rename = false) {
   return moveCopy(items, false, overwrite, rename);
 }
 
-export function copy(items, overwrite = false, rename = false) {
+export function copy(items: any[], overwrite = false, rename = false) {
   return moveCopy(items, true, overwrite, rename);
 }
 
-export async function checksum(url, algo) {
+export async function checksum(url: string, algo: ChecksumAlg) {
   const data = await resourceAction(`${url}?checksum=${algo}`, "GET");
   return (await data.json()).checksums[algo];
 }
 
-export async function diskUsage(url) {
+export async function diskUsage(url: string) {
   const data = await resourceAction(`${url}?disk_usage=true`, "GET");
   return await data.json();
 }
 
-export async function archive(url, name, format, ...files) {
+export async function archive(url: string, name: string, format: string, ...files: string[]) {
   let arg = "";
 
   for (let file of files) {
@@ -187,14 +207,14 @@ export async function archive(url, name, format, ...files) {
   return post(url);
 }
 
-export async function unarchive(path, name, override) {
+export async function unarchive(path: string, name: string, override: boolean) {
   const to = removePrefix(name);
   const action = `unarchive`;
   const url = `${path}?action=${action}&destination=${to}&override=${override}`;
   return resourceAction(url, "PATCH");
 }
 
-export async function chmod(path, perms, recursive, recursionType) {
+export async function chmod(path: string, perms: number, recursive: boolean, recursionType: string) {
   const action = `chmod`;
   let url = `${path}?action=${action}&permissions=${perms}&recursive=${recursive}`;
   if (recursive) {
@@ -203,7 +223,7 @@ export async function chmod(path, perms, recursive, recursionType) {
   return resourceAction(url, "PATCH");
 }
 
-export function getDownloadURL(file, inline) {
+export function getDownloadURL(file: ResourceItem, inline: any) {
   const params = {
     ...(inline && { inline: "true" }),
   };
@@ -211,7 +231,7 @@ export function getDownloadURL(file, inline) {
   return createURL("api/raw" + file.path, params);
 }
 
-export function getPreviewURL(file, size) {
+export function getPreviewURL(file: ResourceItem, size: string) {
   const params = {
     inline: "true",
     key: Date.parse(file.modified),
@@ -220,20 +240,15 @@ export function getPreviewURL(file, size) {
   return createURL("api/preview/" + size + file.path, params);
 }
 
-export function getSubtitlesURL(file) {
+export function getSubtitlesURL(file: ResourceItem) {
   const params = {
     inline: "true",
   };
 
-  const subtitles = [];
+  return file.subtitles?.map((d) => createURL("api/subtitle" + d, params));
-  for (const sub of file.subtitles) {
-    subtitles.push(createURL("api/raw" + sub, params));
 }
 
-  return subtitles;
+export async function usage(url: string) {
-}
-
-export async function usage(url) {
   url = removePrefix(url);
 
   const res = await fetchURL(`/api/usage${url}`, {});

frontend/src/api/index.ts

@@ -1,9 +1,10 @@
 import * as files from "./files";
 import * as share from "./share";
 import * as users from "./users";
+import * as quota from "./quota";
 import * as settings from "./settings";
 import * as pub from "./pub";
 import search from "./search";
 import commands from "./commands";
 
-export { files, share, users, settings, pub, commands, search };
+export { files, share, users, quota, settings, pub, commands, search };

frontend/src/api/pub.ts

@@ -1,7 +1,7 @@
 import { fetchURL, removePrefix, createURL } from "./utils";
 import { baseURL } from "@/utils/constants";
 
-export async function fetch(url, password = "") {
+export async function fetch(url: string, password: string = "") {
   url = removePrefix(url);
 
   const res = await fetchURL(
@@ -12,12 +12,12 @@ export async function fetch(url, password = "") {
     false
   );
 
-  let data = await res.json();
+  const data = (await res.json()) as Resource;
   data.url = `/share${url}`;
 
   if (data.isDir) {
     if (!data.url.endsWith("/")) data.url += "/";
-    data.items = data.items.map((item, index) => {
+    data.items = data.items.map((item: any, index: any) => {
       item.index = index;
       item.url = `${data.url}${encodeURIComponent(item.name)}`;
 
@@ -32,7 +32,12 @@ export async function fetch(url, password = "") {
   return data;
 }
 
-export function download(format, hash, token, ...files) {
+export function download(
+  format: DownloadFormat,
+  hash: string,
+  token: string,
+  ...files: string[]
+) {
   let url = `${baseURL}/api/public/dl/${hash}`;
 
   if (files.length === 1) {
@@ -40,7 +45,7 @@ export function download(format, hash, token, ...files) {
   } else {
     let arg = "";
 
-    for (let file of files) {
+    for (const file of files) {
       arg += encodeURIComponent(file) + ",";
     }
 
@@ -60,11 +65,11 @@ export function download(format, hash, token, ...files) {
   window.open(url);
 }
 
-export function getDownloadURL(share, inline = false) {
+export function getDownloadURL(res: Resource, inline = false) {
   const params = {
     ...(inline && { inline: "true" }),
-    ...(share.token && { token: share.token }),
+    ...(res.token && { token: res.token }),
   };
 
-  return createURL("api/public/dl/" + share.hash + share.path, params, false);
+  return createURL("api/public/dl/" + res.hash + res.path, params, false);
 }

frontend/src/api/quota.ts

@@ -0,0 +1,7 @@
+import { fetchJSON } from "./utils";
+
+export async function getQuota() {
+  return await fetchJSON<IQuota>(`/api/quota`, {
+    method: "GET",
+  });
+}

frontend/src/api/search.ts

@@ -1,7 +1,7 @@
 import { fetchURL, removePrefix } from "./utils";
 import url from "../utils/url";
 
-export default async function search(base, query) {
+export default async function search(base: string, query: string) {
   base = removePrefix(base);
   query = encodeURIComponent(query);
 
@@ -9,11 +9,11 @@ export default async function search(base, query) {
     base += "/";
   }
 
-  let res = await fetchURL(`/api/search${base}?query=${query}`, {});
+  const res = await fetchURL(`/api/search${base}?query=${query}`, {});
 
   let data = await res.json();
 
-  data = data.map((item) => {
+  data = data.map((item: UploadItem) => {
     item.url = `/files${base}` + url.encodePath(item.path);
 
     if (item.dir) {

frontend/src/api/settings.ts

@@ -1,10 +1,10 @@
 import { fetchURL, fetchJSON } from "./utils";
 
 export function get() {
-  return fetchJSON(`/api/settings`, {});
+  return fetchJSON<ISettings>(`/api/settings`, {});
 }
 
-export async function update(settings) {
+export async function update(settings: ISettings) {
   await fetchURL(`/api/settings`, {
     method: "PUT",
     body: JSON.stringify(settings),

frontend/src/api/share.ts

@@ -1,21 +1,26 @@
 import { fetchURL, fetchJSON, removePrefix, createURL } from "./utils";
 
 export async function list() {
-  return fetchJSON("/api/shares");
+  return fetchJSON<Share[]>("/api/shares");
 }
 
-export async function get(url) {
+export async function get(url: string) {
   url = removePrefix(url);
-  return fetchJSON(`/api/share${url}`);
+  return fetchJSON<Share>(`/api/share${url}`);
 }
 
-export async function remove(hash) {
+export async function remove(hash: string) {
   await fetchURL(`/api/share/${hash}`, {
     method: "DELETE",
   });
 }
 
-export async function create(url, password = "", expires = "", unit = "hours") {
+export async function create(
+  url: string,
+  password = "",
+  expires = "",
+  unit = "hours"
+) {
   url = removePrefix(url);
   url = `/api/share${url}`;
   if (expires !== "") {
@@ -23,7 +28,11 @@ export async function create(url, password = "", expires = "", unit = "hours") {
   }
   let body = "{}";
   if (password != "" || expires !== "" || unit !== "hours") {
-    body = JSON.stringify({ password: password, expires: expires, unit: unit });
+    body = JSON.stringify({
+      password: password,
+      expires: expires.toString(), // backend expects string not number
+      unit: unit,
+    });
   }
   return fetchJSON(url, {
     method: "POST",
@@ -31,6 +40,6 @@ export async function create(url, password = "", expires = "", unit = "hours") {
   });
 }
 
-export function getShareURL(share) {
+export function getShareURL(share: Share) {
   return createURL("share/" + share.hash, {}, false);
 }

frontend/src/api/tus.ts

@@ -1,6 +1,7 @@
 import * as tus from "tus-js-client";
 import { baseURL, tusEndpoint, tusSettings } from "@/utils/constants";
-import store from "@/store";
+import { useAuthStore } from "@/stores/auth";
+import { useUploadStore } from "@/stores/upload";
 import { removePrefix } from "@/api/utils";
 import { fetchURL } from "./utils";
 
@@ -11,13 +12,13 @@ const ALPHA = 0.2;
 const ONE_MINUS_ALPHA = 1 - ALPHA;
 const RECENT_SPEEDS_LIMIT = 5;
 const MB_DIVISOR = 1024 * 1024;
-const CURRENT_UPLOAD_LIST = {};
+const CURRENT_UPLOAD_LIST: CurrentUploadList = {};
 
 export async function upload(
-  filePath,
+  filePath: string,
-  content = "",
+  content: ApiContent = "",
   overwrite = false,
-  onupload
+  onupload: any
 ) {
   if (!tusSettings) {
     // Shouldn't happen as we check for tus support before calling this function
@@ -25,36 +26,42 @@ export async function upload(
   }
 
   filePath = removePrefix(filePath);
-  let resourcePath = `${tusEndpoint}${filePath}?override=${overwrite}`;
+  const resourcePath = `${tusEndpoint}${filePath}?override=${overwrite}`;
 
   await createUpload(resourcePath);
 
-  return new Promise((resolve, reject) => {
+  const authStore = useAuthStore();
-    let upload = new tus.Upload(content, {
+
+  // Exit early because of typescript, tus content can't be a string
+  if (content === "") {
+    return false;
+  }
+  return new Promise<void | string>((resolve, reject) => {
+    const upload = new tus.Upload(content, {
       uploadUrl: `${baseURL}${resourcePath}`,
       chunkSize: tusSettings.chunkSize,
       retryDelays: computeRetryDelays(tusSettings),
       parallelUploads: 1,
       storeFingerprintForResuming: false,
       headers: {
-        "X-Auth": store.state.jwt,
+        "X-Auth": authStore.jwt,
       },
       onError: function (error) {
         if (CURRENT_UPLOAD_LIST[filePath].interval) {
           clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
         }
         delete CURRENT_UPLOAD_LIST[filePath];
-        reject("Upload failed: " + error);
+        reject(new Error(`Upload failed: ${error.message}`));
       },
       onProgress: function (bytesUploaded) {
-        let fileData = CURRENT_UPLOAD_LIST[filePath];
+        const fileData = CURRENT_UPLOAD_LIST[filePath];
         fileData.currentBytesUploaded = bytesUploaded;
 
         if (!fileData.hasStarted) {
           fileData.hasStarted = true;
           fileData.lastProgressTimestamp = Date.now();
 
-          fileData.interval = setInterval(() => {
+          fileData.interval = window.setInterval(() => {
             calcProgress(filePath);
           }, SPEED_UPDATE_INTERVAL);
         }
@@ -79,14 +86,14 @@ export async function upload(
       lastProgressTimestamp: null,
       sumOfRecentSpeeds: 0,
       hasStarted: false,
-      interval: null,
+      interval: undefined,
     };
     upload.start();
   });
 }
 
-async function createUpload(resourcePath) {
+async function createUpload(resourcePath: string) {
-  let headResp = await fetchURL(resourcePath, {
+  const headResp = await fetchURL(resourcePath, {
     method: "POST",
   });
   if (headResp.status !== 201) {
@@ -96,10 +103,10 @@ async function createUpload(resourcePath) {
   }
 }
 
-function computeRetryDelays(tusSettings) {
+function computeRetryDelays(tusSettings: TusSettings): number[] | undefined {
   if (!tusSettings.retryCount || tusSettings.retryCount < 1) {
     // Disable retries altogether
-    return null;
+    return undefined;
   }
   // The tus client expects our retries as an array with computed backoffs
   // E.g.: [0, 3000, 5000, 10000, 20000]
@@ -115,7 +122,7 @@ function computeRetryDelays(tusSettings) {
   return retryDelays;
 }
 
-export async function useTus(content) {
+export async function useTus(content: ApiContent) {
   return isTusSupported() && content instanceof Blob;
 }
 
@@ -123,25 +130,34 @@ function isTusSupported() {
   return tus.isSupported === true;
 }
 
-function computeETA(state) {
+function computeETA(state: ETAState, speed?: number) {
   if (state.speedMbyte === 0) {
     return Infinity;
   }
-  const totalSize = state.sizes.reduce((acc, size) => acc + size, 0);
+  const totalSize = state.sizes.reduce(
+    (acc: number, size: number) => acc + size,
+    0
+  );
   const uploadedSize = state.progress.reduce(
-    (acc, progress) => acc + progress,
+    (acc: number, progress: Progress) => {
+      if (typeof progress === "number") {
+        return acc + progress;
+      }
+      return acc;
+    },
     0
   );
   const remainingSize = totalSize - uploadedSize;
-  const speedBytesPerSecond = state.speedMbyte * 1024 * 1024;
+  const speedBytesPerSecond = (speed ?? state.speedMbyte) * 1024 * 1024;
   return remainingSize / speedBytesPerSecond;
 }
 
 function computeGlobalSpeedAndETA() {
+  const uploadStore = useUploadStore();
   let totalSpeed = 0;
   let totalCount = 0;
 
-  for (let filePath in CURRENT_UPLOAD_LIST) {
+  for (const filePath in CURRENT_UPLOAD_LIST) {
     totalSpeed += CURRENT_UPLOAD_LIST[filePath].currentAverageSpeed;
     totalCount++;
   }
@@ -149,41 +165,43 @@ function computeGlobalSpeedAndETA() {
   if (totalCount === 0) return { speed: 0, eta: Infinity };
 
   const averageSpeed = totalSpeed / totalCount;
-  const averageETA = computeETA(store.state.upload, averageSpeed);
+  const averageETA = computeETA(uploadStore, averageSpeed);
 
   return { speed: averageSpeed, eta: averageETA };
 }
 
-function calcProgress(filePath) {
+function calcProgress(filePath: string) {
-  let fileData = CURRENT_UPLOAD_LIST[filePath];
+  const uploadStore = useUploadStore();
+  const fileData = CURRENT_UPLOAD_LIST[filePath];
 
-  let elapsedTime = (Date.now() - fileData.lastProgressTimestamp) / 1000;
+  const elapsedTime =
-  let bytesSinceLastUpdate =
+    (Date.now() - (fileData.lastProgressTimestamp ?? 0)) / 1000;
+  const bytesSinceLastUpdate =
     fileData.currentBytesUploaded - fileData.initialBytesUploaded;
-  let currentSpeed = bytesSinceLastUpdate / MB_DIVISOR / elapsedTime;
+  const currentSpeed = bytesSinceLastUpdate / MB_DIVISOR / elapsedTime;
 
   if (fileData.recentSpeeds.length >= RECENT_SPEEDS_LIMIT) {
-    fileData.sumOfRecentSpeeds -= fileData.recentSpeeds.shift();
+    fileData.sumOfRecentSpeeds -= fileData.recentSpeeds.shift() ?? 0;
   }
 
   fileData.recentSpeeds.push(currentSpeed);
   fileData.sumOfRecentSpeeds += currentSpeed;
 
-  let avgRecentSpeed =
+  const avgRecentSpeed =
     fileData.sumOfRecentSpeeds / fileData.recentSpeeds.length;
   fileData.currentAverageSpeed =
     ALPHA * avgRecentSpeed + ONE_MINUS_ALPHA * fileData.currentAverageSpeed;
 
   const { speed, eta } = computeGlobalSpeedAndETA();
-  store.commit("setUploadSpeed", speed);
+  uploadStore.setUploadSpeed(speed);
-  store.commit("setETA", eta);
+  uploadStore.setETA(eta);
 
   fileData.initialBytesUploaded = fileData.currentBytesUploaded;
   fileData.lastProgressTimestamp = Date.now();
 }
 
 export function abortAllUploads() {
-  for (let filePath in CURRENT_UPLOAD_LIST) {
+  for (const filePath in CURRENT_UPLOAD_LIST) {
     if (CURRENT_UPLOAD_LIST[filePath].interval) {
       clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
     }

frontend/src/api/users.ts

@@ -1,14 +1,14 @@
-import { fetchURL, fetchJSON } from "./utils";
+import { fetchURL, fetchJSON, StatusError } from "./utils";
 
 export async function getAll() {
-  return fetchJSON(`/api/users`, {});
+  return fetchJSON<IUser[]>(`/api/users`, {});
 }
 
-export async function get(id) {
+export async function get(id: number) {
-  return fetchJSON(`/api/users/${id}`, {});
+  return fetchJSON<IUser>(`/api/users/${id}`, {});
 }
 
-export async function create(user) {
+export async function create(user: IUser) {
   const res = await fetchURL(`/api/users`, {
     method: "POST",
     body: JSON.stringify({
@@ -21,9 +21,11 @@ export async function create(user) {
   if (res.status === 201) {
     return res.headers.get("Location");
   }
+
+  throw new StatusError(await res.text(), res.status);
 }
 
-export async function update(user, which = ["all"]) {
+export async function update(user: IUser, which = ["all"]) {
   await fetchURL(`/api/users/${user.id}`, {
     method: "PUT",
     body: JSON.stringify({
@@ -34,14 +36,8 @@ export async function update(user, which = ["all"]) {
   });
 }
 
-export async function remove(id) {
+export async function remove(id: number) {
   await fetchURL(`/api/users/${id}`, {
     method: "DELETE",
   });
 }
-
-export async function getQuota() {
-  return await fetchJSON(`/api/quota`, {
-    method: "GET",
-  });
-}

frontend/src/api/utils.js

@@ -1,80 +0,0 @@
-import store from "@/store";
-import { renew, logout } from "@/utils/auth";
-import { baseURL } from "@/utils/constants";
-import { encodePath } from "@/utils/url";
-
-export async function fetchURL(url, opts, auth = true) {
-  opts = opts || {};
-  opts.headers = opts.headers || {};
-
-  let { headers, ...rest } = opts;
-  let res;
-  try {
-    res = await fetch(`${baseURL}${url}`, {
-      headers: {
-        "X-Auth": store.state.jwt,
-        ...headers,
-      },
-      ...rest,
-    });
-  } catch {
-    const error = new Error("000 No connection");
-    error.status = 0;
-
-    throw error;
-  }
-
-  if (auth && res.headers.get("X-Renew-Token") === "true") {
-    await renew(store.state.jwt);
-  }
-
-  if (res.status < 200 || res.status > 299) {
-    const error = new Error(await res.text());
-    error.status = res.status;
-
-    if (auth && res.status == 401) {
-      logout();
-    }
-
-    throw error;
-  }
-
-  return res;
-}
-
-export async function fetchJSON(url, opts) {
-  const res = await fetchURL(url, opts);
-
-  if (res.status === 200) {
-    return res.json();
-  } else {
-    throw new Error(res.status);
-  }
-}
-
-export function removePrefix(url) {
-  url = url.split("/").splice(2).join("/");
-
-  if (url === "") url = "/";
-  if (url[0] !== "/") url = "/" + url;
-  return url;
-}
-
-export function createURL(endpoint, params = {}, auth = true) {
-  let prefix = baseURL;
-  if (!prefix.endsWith("/")) {
-    prefix = prefix + "/";
-  }
-  const url = new URL(prefix + encodePath(endpoint), origin);
-
-  const searchParams = {
-    ...(auth && { auth: store.state.jwt }),
-    ...params,
-  };
-
-  for (const key in searchParams) {
-    url.searchParams.set(key, searchParams[key]);
-  }
-
-  return url.toString();
-}

frontend/src/api/utils.ts

@@ -0,0 +1,98 @@
+import { useAuthStore } from "@/stores/auth";
+import { renew, logout } from "@/utils/auth";
+import { baseURL } from "@/utils/constants";
+import { encodePath } from "@/utils/url";
+
+export class StatusError extends Error {
+  constructor(
+    message: any,
+    public status?: number
+  ) {
+    super(message);
+    this.name = "StatusError";
+  }
+}
+
+export async function fetchURL(
+  url: string,
+  opts: ApiOpts,
+  auth = true
+): Promise<Response> {
+  const authStore = useAuthStore();
+
+  opts = opts || {};
+  opts.headers = opts.headers || {};
+
+  const { headers, ...rest } = opts;
+  let res;
+  try {
+    res = await fetch(`${baseURL}${url}`, {
+      headers: {
+        "X-Auth": authStore.jwt,
+        ...headers,
+      },
+      ...rest,
+    });
+  } catch {
+    throw new StatusError("000 No connection", 0);
+  }
+
+  if (auth && res.headers.get("X-Renew-Token") === "true") {
+    await renew(authStore.jwt);
+  }
+
+  if (res.status < 200 || res.status > 299) {
+    const body = await res.text();
+    const error = new StatusError(
+      body || `${res.status} ${res.statusText}`,
+      res.status
+    );
+
+    if (auth && res.status == 401) {
+      logout();
+    }
+
+    throw error;
+  }
+
+  return res;
+}
+
+export async function fetchJSON<T>(url: string, opts?: any): Promise<T> {
+  const res = await fetchURL(url, opts);
+
+  if (res.status === 200) {
+    return res.json() as Promise<T>;
+  }
+
+  throw new StatusError(`${res.status} ${res.statusText}`, res.status);
+}
+
+export function removePrefix(url: string): string {
+  url = url.split("/").splice(2).join("/");
+
+  if (url === "") url = "/";
+  if (url[0] !== "/") url = "/" + url;
+  return url;
+}
+
+export function createURL(endpoint: string, params = {}, auth = true): string {
+  const authStore = useAuthStore();
+
+  let prefix = baseURL;
+  if (!prefix.endsWith("/")) {
+    prefix = prefix + "/";
+  }
+  const url = new URL(prefix + encodePath(endpoint), origin);
+
+  const searchParams: SearchParams = {
+    ...(auth && { auth: authStore.jwt }),
+    ...params,
+  };
+
+  for (const key in searchParams) {
+    url.searchParams.set(key, searchParams[key]);
+  }
+
+  return url.toString();
+}

frontend/src/components/Breadcrumbs.vue

@@ -3,8 +3,8 @@
     <component
       :is="element"
       :to="base || ''"
-      :aria-label="$t('files.home')"
+      :aria-label="t('files.home')"
-      :title="$t('files.home')"
+      :title="t('files.home')"
     >
       <i class="material-icons">home</i>
     </component>
@@ -18,13 +18,22 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed } from "vue";
-  name: "breadcrumbs",
+import { useI18n } from "vue-i18n";
-  props: ["base", "noLink"],
+import { useRoute } from "vue-router";
-  computed: {
+
-    items() {
+const { t } = useI18n();
-      const relativePath = this.$route.path.replace(this.base, "");
+
+const route = useRoute();
+
+const props = defineProps<{
+  base: string;
+  noLink?: boolean;
+}>();
+
+const items = computed(() => {
+  const relativePath = route.path.replace(props.base, "");
   let parts = relativePath.split("/");
 
   if (parts[0] === "") {
@@ -35,13 +44,13 @@ export default {
     parts.pop();
   }
 
-      let breadcrumbs = [];
+  let breadcrumbs: BreadCrumb[] = [];
 
   for (let i = 0; i < parts.length; i++) {
     if (i === 0) {
       breadcrumbs.push({
         name: decodeURIComponent(parts[i]),
-            url: this.base + "/" + parts[i] + "/",
+        url: props.base + "/" + parts[i] + "/",
       });
     } else {
       breadcrumbs.push({
@@ -60,16 +69,15 @@ export default {
   }
 
   return breadcrumbs;
-    },
+});
-    element() {
+
-      if (this.noLink !== undefined) {
+const element = computed(() => {
+  if (props.noLink) {
     return "span";
   }
 
   return "router-link";
-    },
+});
-  },
-};
 </script>
 
 <style></style>

frontend/src/components/CustomToast.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="t-container">
+    <span>{{ message }}</span>
+    <button v-if="isReport" class="action" @click.stop="clicked">
+      {{ reportText }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  message: string;
+  reportText?: string;
+  isReport?: boolean;
+}>();
+
+const clicked = () => {
+  window.open("https://github.com/filebrowser/filebrowser/issues/new/choose");
+};
+</script>
+
+<style scoped>
+.t-container {
+  width: 100%;
+  padding: 5px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.action {
+  text-align: center;
+  height: 40px;
+  padding: 0 10px;
+  margin-left: 20px;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+  border: thin solid currentColor;
+}
+
+html[dir="rtl"] .action {
+  margin-left: initial;
+  margin-right: 20px;
+}
+</style>

frontend/src/components/ProgressBar.vue

@@ -0,0 +1,224 @@
+<!-- This component taken directly from vue-simple-progress
+since it didnt support Vue 3 but the component itself does
+https://raw.githubusercontent.com/dzwillia/vue-simple-progress/master/src/components/Progress.vue -->
+<template>
+  <div>
+    <div
+      class="vue-simple-progress-text"
+      :style="text_style"
+      v-if="text.length > 0 && textPosition == 'top'"
+    >
+      {{ text }}
+    </div>
+    <div class="vue-simple-progress" :style="progress_style">
+      <div
+        class="vue-simple-progress-text"
+        :style="text_style"
+        v-if="text.length > 0 && textPosition == 'middle'"
+      >
+        {{ text }}
+      </div>
+      <div
+        style="position: relative; left: -9999px"
+        :style="text_style"
+        v-if="text.length > 0 && textPosition == 'inside'"
+      >
+        {{ text }}
+      </div>
+      <div class="vue-simple-progress-bar" :style="bar_style">
+        <div
+          :style="text_style"
+          v-if="text.length > 0 && textPosition == 'inside'"
+        >
+          {{ text }}
+        </div>
+      </div>
+    </div>
+    <div
+      class="vue-simple-progress-text"
+      :style="text_style"
+      v-if="text.length > 0 && textPosition == 'bottom'"
+    >
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script>
+// We're leaving this untouched as you can read in the beginning
+var isNumber = function (n) {
+  return !isNaN(parseFloat(n)) && isFinite(n);
+};
+
+export default {
+  name: "progress-bar",
+  props: {
+    val: {
+      default: 0,
+    },
+    max: {
+      default: 100,
+    },
+    size: {
+      // either a number (pixel width/height) or 'tiny', 'small',
+      // 'medium', 'large', 'huge', 'massive' for common sizes
+      default: 3,
+    },
+    "bg-color": {
+      type: String,
+      default: "#eee",
+    },
+    "bar-color": {
+      type: String,
+      default: "#2196f3", // match .blue color to Material Design's 'Blue 500' color
+    },
+    "bar-transition": {
+      type: String,
+      default: "all 0.5s ease",
+    },
+    "bar-border-radius": {
+      type: Number,
+      default: 0,
+    },
+    spacing: {
+      type: Number,
+      default: 4,
+    },
+    text: {
+      type: String,
+      default: "",
+    },
+    "text-align": {
+      type: String,
+      default: "center", // 'left', 'right'
+    },
+    "text-position": {
+      type: String,
+      default: "bottom", // 'bottom', 'top', 'middle', 'inside'
+    },
+    "font-size": {
+      type: Number,
+      default: 13,
+    },
+    "text-fg-color": {
+      type: String,
+      default: "#222",
+    },
+  },
+  computed: {
+    pct() {
+      var pct = (this.val / this.max) * 100;
+      pct = pct.toFixed(2);
+      return Math.min(pct, this.max);
+    },
+    size_px() {
+      switch (this.size) {
+        case "tiny":
+          return 2;
+        case "small":
+          return 4;
+        case "medium":
+          return 8;
+        case "large":
+          return 12;
+        case "big":
+          return 16;
+        case "huge":
+          return 32;
+        case "massive":
+          return 64;
+      }
+
+      return isNumber(this.size) ? this.size : 32;
+    },
+    text_padding() {
+      switch (this.size) {
+        case "tiny":
+        case "small":
+        case "medium":
+        case "large":
+        case "big":
+        case "huge":
+        case "massive":
+          return Math.min(Math.max(Math.ceil(this.size_px / 8), 3), 12);
+      }
+
+      return isNumber(this.spacing) ? this.spacing : 4;
+    },
+    text_font_size() {
+      switch (this.size) {
+        case "tiny":
+        case "small":
+        case "medium":
+        case "large":
+        case "big":
+        case "huge":
+        case "massive":
+          return Math.min(Math.max(Math.ceil(this.size_px * 1.4), 11), 32);
+      }
+
+      return isNumber(this.fontSize) ? this.fontSize : 13;
+    },
+    progress_style() {
+      var style = {
+        background: this.bgColor,
+      };
+
+      if (this.textPosition == "middle" || this.textPosition == "inside") {
+        style["position"] = "relative";
+        style["min-height"] = this.size_px + "px";
+        style["z-index"] = "-2";
+      }
+
+      if (this.barBorderRadius > 0) {
+        style["border-radius"] = this.barBorderRadius + "px";
+      }
+
+      return style;
+    },
+    bar_style() {
+      var style = {
+        background: this.barColor,
+        width: this.pct + "%",
+        height: this.size_px + "px",
+        transition: this.barTransition,
+      };
+
+      if (this.barBorderRadius > 0) {
+        style["border-radius"] = this.barBorderRadius + "px";
+      }
+
+      if (this.textPosition == "middle" || this.textPosition == "inside") {
+        style["position"] = "absolute";
+        style["top"] = "0";
+        style["height"] = "100%";
+        (style["min-height"] = this.size_px + "px"), (style["z-index"] = "-1");
+      }
+
+      return style;
+    },
+    text_style() {
+      var style = {
+        color: this.textFgColor,
+        "font-size": this.text_font_size + "px",
+        "text-align": this.textAlign,
+      };
+
+      if (
+        this.textPosition == "top" ||
+        this.textPosition == "middle" ||
+        this.textPosition == "inside"
+      )
+        style["padding-bottom"] = this.text_padding + "px";
+      if (
+        this.textPosition == "bottom" ||
+        this.textPosition == "middle" ||
+        this.textPosition == "inside"
+      )
+        style["padding-top"] = this.text_padding + "px";
+
+      return style;
+    },
+  },
+};
+</script>

frontend/src/components/Quota.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="quota">
     <div>
-      <div class="quota-label">{{ $t("sidebar.quota.space") }}</div>
+      <div class="quota-label">{{ t("sidebar.quota.space") }}</div>
 
       <br />
 
       <progress-bar
         :val="spaceProgress"
         size="small"
-        :title="spaceProgress + '%'"
+        :text="spaceProgress + '%'"
       ></progress-bar>
 
       <div v-if="loaded" class="quota-metric">{{ spaceUsageTitle }}</div>
@@ -17,14 +17,14 @@
     <br />
 
     <div>
-      <div class="quota-label">{{ $t("sidebar.quota.inodes") }}</div>
+      <div class="quota-label">{{ t("sidebar.quota.inodes") }}</div>
 
       <br />
 
       <progress-bar
         :val="inodeProgress"
         size="small"
-        :title="inodeProgress + '%'"
+        :text="inodeProgress + '%'"
       ></progress-bar>
 
       <div v-if="loaded" class="quota-metric">{{ inodeUsageTitle }}</div>
@@ -32,62 +32,44 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useQuotaStore } from "@/stores/quota";
 import { filesize } from "@/utils";
-import { mapState } from "vuex";
+import { computed, onMounted } from "vue";
-import ProgressBar from "vue-simple-progress";
+import { useI18n } from "vue-i18n";
+import ProgressBar from "@/components/ProgressBar.vue";
 
-export default {
+const quotaStore = useQuotaStore();
-  name: "quota",
-  components: {
-    ProgressBar,
-  },
-  computed: {
-    ...mapState("quota", {
-      inodes: (state) => state.inodes,
-      space: (state) => state.space,
-    }),
-    loaded() {
-      return this.inodes !== null && this.space !== null;
-    },
-    spaceProgress() {
-      if (!this.loaded) {
-        return 0;
-      }
 
-      return this.progress(this.space);
+const { t } = useI18n();
-    },
-    inodeProgress() {
-      if (!this.loaded) {
-        return 0;
-      }
 
-      return this.progress(this.inodes);
+const loaded = computed(() =>
-    },
+  quotaStore.quota ? quotaStore.quota.inodes !== null && quotaStore.quota.space !== null : false
-    spaceUsageTitle() {
+);
-      if (this.space === null) {
+
-        return "- / -";
+const spaceProgress = computed(() =>
-      } else {
+  quotaStore.quota && quotaStore.quota.space !== null ? progress(quotaStore.quota.space) : 0
-        return filesize(this.space.usage) + " / " + filesize(this.space.quota);
+);
-      }
+
-    },
+const inodeProgress = computed(() =>
-    inodeUsageTitle() {
+  quotaStore.quota && quotaStore.quota.inodes !== null ? progress(quotaStore.quota.inodes) : 0
-      if (this.inodes === null) {
+);
-        return "- / -";
+
-      } else {
+const spaceUsageTitle = computed(() =>
-        return this.inodes.usage + " / " + this.inodes.quota;
+  !quotaStore.quota ? "- / -" : filesize(quotaStore.quota.space.usage) + " / " + filesize(quotaStore.quota.space.quota)
-      }
+);
-    },
+
-  },
+const inodeUsageTitle = computed(() =>
-  mounted() {
+  !quotaStore.quota ? "- / -" : filesize(quotaStore.quota.inodes.usage) + " / " + filesize(quotaStore.quota.inodes.quota)
-    this.$store.dispatch("quota/fetch");
+);
-  },
+
-  methods: {
+const progress = (info: QuotaInfo) => {
-    progress(metric) {
+  let prc = (info.usage / info.quota) * 100;
-      let prc = (metric.usage / metric.quota) * 100;
   prc = Math.round((prc + Number.EPSILON) * 100) / 100;
   return Math.min(prc, 100);
-    },
-  },
 };
+
+onMounted(() => {
+  quotaStore.fetchQuota();
+})
 </script>

frontend/src/components/Search.vue

@@ -17,7 +17,7 @@
         @keyup.enter="submit"
         ref="input"
         :autofocus="active"
-        v-model.trim="value"
+        v-model.trim="prompt"
         :aria-label="$t('search.search')"
         :placeholder="$t('search.search')"
       />
@@ -28,7 +28,7 @@
         <template v-if="isEmpty">
           <p>{{ text }}</p>
 
-          <template v-if="value.length === 0">
+          <template v-if="prompt.length === 0">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
@@ -49,7 +49,7 @@
         </template>
         <ul v-show="results.length > 0">
           <li v-for="(s, k) in filteredResults" :key="k">
-            <router-link @click.native="close" :to="s.url">
+            <router-link v-on:click="close" :to="s.url">
               <i v-if="s.dir" class="material-icons">folder</i>
               <i v-else class="material-icons">insert_drive_file</i>
               <span>./{{ s.path }}</span>
@@ -64,138 +64,155 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapState, mapGetters, mapMutations } from "vuex";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import url from "@/utils/url";
 import { search } from "@/api";
+import { computed, inject, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
 
-var boxes = {
+const 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" },
 };
 
-export default {
+const layoutStore = useLayoutStore();
-  name: "search",
+const fileStore = useFileStore();
-  data: function () {
-    return {
-      value: "",
-      active: false,
-      ongoing: false,
-      results: [],
-      reload: false,
-      resultsCount: 50,
-      scrollable: null,
-    };
-  },
-  watch: {
-    currentPrompt(val, old) {
-      this.active = val?.prompt === "search";
 
-      if (old?.prompt === "search" && !this.active) {
+const { currentPromptName } = storeToRefs(layoutStore);
-        if (this.reload) {
+
-          this.setReload(true);
+const prompt = ref<string>("");
+const active = ref<boolean>(false);
+const ongoing = ref<boolean>(false);
+const results = ref<any[]>([]);
+const reload = ref<boolean>(false);
+const resultsCount = ref<number>(50);
+
+const $showError = inject<IToastError>("$showError")!;
+
+const input = ref<HTMLInputElement | null>(null);
+const result = ref<HTMLElement | null>(null);
+
+const { t } = useI18n();
+
+const route = useRoute();
+
+watch(currentPromptName, (newVal, oldVal) => {
+  active.value = newVal === "search";
+
+  if (oldVal === "search" && !active.value) {
+    if (reload.value) {
+      fileStore.reload = true;
     }
 
     document.body.style.overflow = "auto";
-        this.reset();
+    reset();
-        this.value = "";
+    prompt.value = "";
-        this.active = false;
+    active.value = false;
-        this.$refs.input.blur();
+    input.value?.blur();
-      } else if (this.active) {
+  } else if (active.value) {
-        this.reload = false;
+    reload.value = false;
-        this.$refs.input.focus();
+    input.value?.focus();
     document.body.style.overflow = "hidden";
   }
-    },
+});
-    value() {
+
-      if (this.results.length) {
+watch(prompt, () => {
-        this.reset();
+  if (results.value.length) {
+    reset();
   }
-    },
+});
-  },
+
-  computed: {
+// ...mapState(useFileStore, ["isListing"]),
-    ...mapState(["user"]),
+// ...mapState(useLayoutStore, ["show"]),
-    ...mapGetters(["isListing", "currentPrompt"]),
+// ...mapWritableState(useFileStore, { sReload: "reload" }),
-    boxes() {
+
-      return boxes;
+const isEmpty = computed(() => {
-    },
+  return results.value.length === 0;
-    isEmpty() {
+});
-      return this.results.length === 0;
+const text = computed(() => {
-    },
+  if (ongoing.value) {
-    text() {
-      if (this.ongoing) {
     return "";
   }
 
-      return this.value === ""
+  return prompt.value === ""
-        ? this.$t("search.typeToSearch")
+    ? t("search.typeToSearch")
-        : this.$t("search.pressToSearch");
+    : t("search.pressToSearch");
-    },
+});
-    filteredResults() {
+const filteredResults = computed(() => {
-      return this.results.slice(0, this.resultsCount);
+  return results.value.slice(0, resultsCount.value);
-    },
+});
-  },
+
-  mounted() {
+onMounted(() => {
-    this.$refs.result.addEventListener("scroll", (event) => {
+  if (result.value === null) {
+    return;
+  }
+  result.value.addEventListener("scroll", (event: Event) => {
     if (
-        event.target.offsetHeight + event.target.scrollTop >=
+      (event.target as HTMLElement).offsetHeight +
-        event.target.scrollHeight - 100
+        (event.target as HTMLElement).scrollTop >=
+      (event.target as HTMLElement).scrollHeight - 100
     ) {
-        this.resultsCount += 50;
+      resultsCount.value += 50;
     }
   });
-  },
+});
-  methods: {
+
-    ...mapMutations(["showHover", "closeHovers", "setReload"]),
+const open = () => {
-    open() {
+  !active.value && layoutStore.showHover("search");
-      this.showHover("search");
+};
-    },
+
-    close(event) {
+const close = (event: Event) => {
   event.stopPropagation();
   event.preventDefault();
-      this.closeHovers();
+  layoutStore.closeHovers();
-    },
+};
-    keyup(event) {
+
-      if (event.keyCode === 27) {
+const keyup = (event: KeyboardEvent) => {
-        this.close(event);
+  if (event.key === "Escape") {
+    close(event);
     return;
   }
+  results.value.length = 0;
+};
 
-      this.results.length = 0;
+const init = (string: string) => {
-    },
+  prompt.value = `${string} `;
-    init(string) {
+  input.value !== null ? input.value.focus() : "";
-      this.value = `${string} `;
+};
-      this.$refs.input.focus();
+
-    },
+const reset = () => {
-    reset() {
+  ongoing.value = false;
-      this.ongoing = false;
+  resultsCount.value = 50;
-      this.resultsCount = 50;
+  results.value = [];
-      this.results = [];
+};
-    },
+
-    async submit(event) {
+const submit = async (event: Event) => {
   event.preventDefault();
 
-      if (this.value === "") {
+  if (prompt.value === "") {
     return;
   }
 
-      let path = this.$route.path;
+  let path = route.path;
-      if (!this.isListing) {
+  if (!fileStore.isListing) {
     path = url.removeLastDir(path) + "/";
   }
 
-      this.ongoing = true;
+  ongoing.value = true;
 
   try {
-        this.results = await search(path, this.value);
+    results.value = await search(path, prompt.value);
-      } catch (error) {
+  } catch (error: any) {
-        this.$showError(error);
+    $showError(error);
   }
 
-      this.ongoing = false;
+  ongoing.value = false;
-    },
-  },
 };
 </script>

frontend/src/components/Shell.vue

@@ -2,7 +2,7 @@
   <div
     class="shell"
     :class="{ ['shell--hidden']: !showShell }"
-    :style="{ height: `${this.shellHeight}em` }"
+    :style="{ height: `${this.shellHeight}em`, direction: 'ltr' }"
   >
     <div
       @pointerdown="startDrag()"
@@ -29,9 +29,9 @@
           tabindex="0"
           ref="input"
           class="shell__text"
-          contenteditable="true"
+          :contenteditable="true"
-          @keydown.prevent.38="historyUp"
+          @keydown.prevent.arrow-up="historyUp"
-          @keydown.prevent.40="historyDown"
+          @keydown.prevent.arrow-down="historyDown"
           @keypress.prevent.enter="submit"
         />
       </div>
@@ -45,7 +45,10 @@
 </template>
 
 <script>
-import { mapMutations, mapState, mapGetters } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { commands } from "@/api";
 import { throttle } from "lodash";
 import { theme } from "@/utils/constants";
@@ -53,8 +56,8 @@ import { theme } from "@/utils/constants";
 export default {
   name: "shell",
   computed: {
-    ...mapState(["user", "showShell"]),
+    ...mapState(useLayoutStore, ["showShell"]),
-    ...mapGetters(["isFiles", "isLogged"]),
+    ...mapState(useFileStore, ["isFiles"]),
     path: function () {
       if (this.isFiles) {
         return this.$route.path;
@@ -75,11 +78,11 @@ export default {
   mounted() {
     window.addEventListener("resize", this.resize);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("resize", this.resize);
   },
   methods: {
-    ...mapMutations(["toggleShell"]),
+    ...mapActions(useLayoutStore, ["toggleShell"]),
     checkTheme() {
       if (theme == "dark") {
         return "rgba(255, 255, 255, 0.4)";

frontend/src/components/Sidebar.vue

@@ -1,6 +1,7 @@
 <template>
+  <div v-show="active" @click="closeHovers" class="overlay"></div>
   <nav :class="{ active }">
-    <template v-if="isLogged">
+    <template v-if="isLoggedIn">
       <button
         class="action"
         @click="toRoot"
@@ -13,7 +14,7 @@
 
       <div v-if="user.perm.create">
         <button
-          @click="$store.commit('showHover', 'newDir')"
+          @click="showHover('newDir')"
           class="action"
           :aria-label="$t('sidebar.newFolder')"
           :title="$t('sidebar.newFolder')"
@@ -23,7 +24,7 @@
         </button>
 
         <button
-          @click="$store.commit('showHover', 'newFile')"
+          @click="showHover('newFile')"
           class="action"
           :aria-label="$t('sidebar.newFile')"
           :title="$t('sidebar.newFile')"
@@ -112,9 +113,7 @@
 
     <div
       class="credits"
-      v-if="
+      v-if="isFiles && !disableUsedPercentage"
-        $router.currentRoute.path.includes('/files/') && !disableUsedPercentage
-      "
       style="width: 90%; margin: 2em 2.5em 3em 2.5em"
     >
       <progress-bar :val="usage.usedPercentage" size="small"></progress-bar>
@@ -132,7 +131,7 @@
           href="https://github.com/filebrowser/filebrowser"
           >File Browser</a
         >
-        <span> {{ version }}</span>
+        <span> {{ ' ' }} {{ version }}</span>
       </span>
       <span>
         <a @click="help">{{ $t("sidebar.help") }}</a>
@@ -142,49 +141,59 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { reactive } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import * as auth from "@/utils/auth";
 import Quota from "./Quota.vue";
 import {
   version,
   signup,
   disableExternal,
+  disableUsedPercentage,
+  noAuth,
+  loginPage,
   tmpDir,
   trashDir,
   quotaExists,
-  disableUsedPercentage,
-  noAuth,
-  authMethod,
   authLogoutURL,
-  loginPage,
 } from "@/utils/constants";
 import { files as api } from "@/api";
-import ProgressBar from "vue-simple-progress";
+import ProgressBar from "@/components/ProgressBar.vue";
 import prettyBytes from "pretty-bytes";
 
+const USAGE_DEFAULT = { used: "0 B", total: "0 B", usedPercentage: 0 };
+
 export default {
   name: "sidebar",
+  setup() {
+    const usage = reactive(USAGE_DEFAULT);
+    return { usage };
+  },
   components: {
     Quota,
     ProgressBar,
   },
+  inject: ["$showError"],
   computed: {
-    ...mapState(["user"]),
+    ...mapState(useAuthStore, ["user", "isLoggedIn"]),
-    ...mapGetters(["isLogged", "currentPrompt"]),
+    ...mapState(useFileStore, ["isFiles", "reload"]),
+    ...mapState(useLayoutStore, ["currentPromptName"]),
     active() {
-      return this.currentPrompt?.prompt === "sidebar";
+      return this.currentPromptName === "sidebar";
     },
     signup: () => signup,
     version: () => version,
     disableExternal: () => disableExternal,
+    disableUsedPercentage: () => disableUsedPercentage,
+    canLogout: () => !noAuth && loginPage,
     tmpDir: () => tmpDir,
     trashDir: () => trashDir,
     quotaExists: () => quotaExists,
-    noAuth: () => noAuth,
-    authMethod: () => authMethod,
     authLogoutURL: () => authLogoutURL,
-    disableUsedPercentage: () => disableUsedPercentage,
-    canLogout: () => !noAuth && loginPage,
   },
   asyncComputed: {
     usage: {
@@ -215,18 +224,44 @@ export default {
     },
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
+    async fetchUsage() {
+      let path = this.$route.path.endsWith("/")
+        ? this.$route.path
+        : this.$route.path + "/";
+      let usageStats = USAGE_DEFAULT;
+      if (this.disableUsedPercentage) {
+        return Object.assign(this.usage, usageStats);
+      }
+      try {
+        let usage = await api.usage(path);
+        usageStats = {
+          used: prettyBytes(usage.used, { binary: true }),
+          total: prettyBytes(usage.total, { binary: true }),
+          usedPercentage: Math.round((usage.used / usage.total) * 100),
+        };
+      } catch (error) {
+        this.$showError(error);
+      }
+      return Object.assign(this.usage, usageStats);
+    },
     toRoot() {
-      this.$router.push({ path: "/files/" }, () => {});
+      this.$router.push({ path: "/files" });
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
     toSettings() {
-      this.$router.push({ path: "/settings" }, () => {});
+      this.$router.push({ path: "/settings" });
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
     help() {
-      this.$store.commit("showHover", "help");
+      this.showHover("help");
     },
     logout: auth.logout,
   },
+  watch: {
+    isFiles(newValue) {
+      newValue && this.fetchUsage();
+    },
+  },
 };
 </script>

frontend/src/components/files/ContextMenu.vue

@@ -1,24 +1,23 @@
 <template>
   <div
     id="context-menu"
-    ref="contextMenu"
+    ref="contextMenuDiv"
     class="card"
-    :style="menuPosition"
+    :style="menuStyle"
-    @click="close"
   >
     <p>
-      <action icon="info" :label="$t('buttons.info')" show="info" />
+      <action icon="info" :label="t('buttons.info')" show="info" />
     </p>
     <p v-if="options.share">
-      <action icon="share" :label="$t('buttons.share')" show="share" />
+      <action icon="share" :label="t('buttons.share')" show="share" />
     </p>
     <p v-if="options.edit">
-      <action icon="mode_edit" :label="$t('buttons.edit')" @action="openFile" />
+      <action icon="mode_edit" :label="t('buttons.edit')" @action="openFile" />
     </p>
     <p v-if="options.rename">
       <action
         icon="drive_file_rename_outline"
-        :label="$t('buttons.rename')"
+        :label="t('buttons.rename')"
         show="rename"
       />
     </p>
@@ -26,7 +25,7 @@
       <action
         id="copy-button"
         icon="content_copy"
-        :label="$t('buttons.copyFile')"
+        :label="t('buttons.copyFile')"
         show="copy"
       />
     </p>
@@ -34,7 +33,7 @@
       <action
         id="move-button"
         icon="forward"
-        :label="$t('buttons.moveFile')"
+        :label="t('buttons.moveFile')"
         show="move"
       />
     </p>
@@ -42,7 +41,7 @@
       <action
         id="permissions-button"
         icon="lock"
-        :label="$t('buttons.permissions')"
+        :label="t('buttons.permissions')"
         show="permissions"
       />
     </p>
@@ -50,7 +49,7 @@
       <action
         id="archive-button"
         icon="archive"
-        :label="$t('buttons.archive')"
+        :label="t('buttons.archive')"
         show="archive"
       />
     </p>
@@ -58,120 +57,140 @@
       <action
         id="unarchive-button"
         icon="unarchive"
-        :label="$t('buttons.unarchive')"
+        :label="t('buttons.unarchive')"
         show="unarchive"
       />
     </p>
     <p v-if="options.download">
       <action
         icon="file_download"
-        :label="$t('buttons.download')"
+        :label="t('buttons.download')"
         @action="download"
-        :counter="selectedCount"
+        :counter="fileStore.selectedCount"
       />
     </p>
     <p v-if="options.delete">
       <action
         id="delete-button"
         icon="delete"
-        :label="$t('buttons.delete')"
+        :label="t('buttons.delete')"
         show="delete"
       />
     </p>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapState, mapGetters } from "vuex";
+import { ref,computed, onMounted, onBeforeUnmount, CSSProperties } from "vue";
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useContextMenuStore } from "@/stores/contextMenu";
 import { files as api } from "@/api";
+import { useI18n } from "vue-i18n";
 import Action from "../header/Action.vue";
 
-export default {
+const authStore = useAuthStore();
-  name: "context-menu",
+const fileStore = useFileStore();
-  components: { Action },
+const layoutStore = useLayoutStore();
-  computed: {
+const contextMenuStore = useContextMenuStore();
-    ...mapState(["req", "selected", "user", "contextMenu"]),
+
-    ...mapGetters(["selectedCount", "onlyArchivesSelected"]),
+const route = useRoute();
-    menuPosition() {
+const router = useRouter();
-      if (this.contextMenu === null) {
+
+const { t } = useI18n();
+
+const contextMenuDiv = ref<HTMLDivElement | null>(null);
+
+const menuStyle = computed((): CSSProperties => {
+  if (contextMenuStore.position === null) {
     return { left: "0px", right: "0px" };
   }
 
-      let style = {
+  let style: CSSProperties = {
-        left: this.contextMenu.x + "px",
+    left: contextMenuStore.position.x + "px",
-        top: this.contextMenu.y + "px",
+    top: contextMenuStore.position.y + "px",
   };
 
-      if (window.innerWidth - this.contextMenu.x < 150) {
+  if (window.innerWidth - contextMenuStore.position.x < 150) {
     style.transform = "translateX(calc(-100% - 3px))";
   }
 
   return style;
-    },
+});
-    options() {
+
+const options = computed(() => {
   return {
-        download: this.user.perm.download,
+    download: authStore.user?.perm.download ?? false,
-        delete: this.selectedCount > 0 && this.user.perm.delete,
+    delete: fileStore.selectedCount > 0 && authStore.user?.perm.delete,
     edit:
-          this.selectedCount === 1 &&
+      fileStore.selectedCount === 1 && (
-          (this.req.items[this.selected].type === "text" ||
+        fileStore.req?.items[fileStore.selected[0]].type === "text" ||
-            this.req.items[this.selected].type === "textImmutable"),
+        fileStore.req?.items[fileStore.selected[0]].type === "textImmutable"
-        rename: this.selectedCount === 1 && this.user.perm.rename,
+      ),
-        share: this.selectedCount === 1 && this.user.perm.share,
+    rename: fileStore.selectedCount === 1 && authStore.user?.perm.rename,
-        move: this.selectedCount > 0 && this.user.perm.rename,
+    share: fileStore.selectedCount === 1 && authStore.user?.perm.share,
-        copy: this.selectedCount > 0 && this.user.perm.create,
+    move: fileStore.selectedCount > 0 && authStore.user?.perm.rename,
-        permissions: this.selectedCount === 1 && this.user.perm.modify,
+    copy: fileStore.selectedCount > 0 && authStore.user?.perm.create,
-        archive: this.selectedCount > 0 && this.user.perm.create,
+    permissions: fileStore.selectedCount === 1 && authStore.user?.perm.modify,
+    archive: fileStore.selectedCount > 0 && authStore.user?.perm.create,
     unarchive:
-          this.selectedCount === 1 &&
+      fileStore.selectedCount === 1 &&
-          this.onlyArchivesSelected &&
+      fileStore.onlyArchivesSelected &&
-          this.user.perm.create,
+      authStore.user?.perm.create,
   };
-    },
+});
-  },
+
-  mounted() {
+const windowClick = (event: MouseEvent) => {
-    window.addEventListener("mousedown", this.windowClick);
+  if (!contextMenuDiv.value?.contains(event.target as Node)) {
-  },
+    contextMenuStore.hide();
-  beforeDestroy() {
-    window.removeEventListener("mousedown", this.windowClick);
-  },
-  methods: {
-    windowClick(event) {
-      if (!this.$refs.contextMenu.contains(event.target)) {
-        this.close();
   }
-    },
+};
-    close() {
+
-      this.$store.commit("hideContextMenu");
+const openFile = () => {
-    },
+  let path = fileStore.req?.items[fileStore.selected[0]].url;
-    openFile() {
+  if (path) {
-      this.$router.push({ path: this.req.items[this.selected].url });
+    router.push({ path: path });
-    },
+  }
-    download() {
+};
-      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
+
-        api.download(null, this.req.items[this.selected[0]].url);
+const download = () => {
+  if (fileStore.req === null) return;
+
+  if (
+    fileStore.selectedCount === 1 &&
+    !fileStore.req.items[fileStore.selected[0]].isDir
+  ) {
+    api.download(null, fileStore.req.items[fileStore.selected[0]].url);
     return;
   }
 
-      this.$store.commit("showHover", {
+  layoutStore.showHover({
     prompt: "download",
-        confirm: (format) => {
+    confirm: (format: any) => {
-          this.$store.commit("closeHovers");
+      layoutStore.closeHovers();
 
       let files = [];
 
-          if (this.selectedCount > 0) {
+      if (fileStore.selectedCount > 0 && fileStore.req !== null) {
-            for (let i of this.selected) {
+        for (let i of fileStore.selected) {
-              files.push(this.req.items[i].url);
+          files.push(fileStore.req.items[i].url);
         }
       } else {
-            files.push(this.$route.path);
+        files.push(route.path);
       }
 
       api.download(format, ...files);
     },
   });
-    },
-  },
 };
+
+onMounted(() => {
+  window.addEventListener("mousedown", windowClick);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("mousedown", windowClick);
+});
 </script>

frontend/src/components/files/ExtendedImage.vue

@@ -13,205 +13,230 @@
     <img class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad" />
   </div>
 </template>
-<script>
+<script setup lang="ts">
-import throttle from "lodash.throttle";
+import throttle from "lodash/throttle";
 import UTIF from "utif";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-export default {
+interface IProps {
-  props: {
+  src: string;
-    src: String,
+  moveDisabledTime: number;
-    moveDisabledTime: {
+  classList: any[];
-      type: Number,
+  zoomStep: number;
-      default: () => 200,
+}
-    },
+
-    classList: {
+const props = withDefaults(defineProps<IProps>(), {
-      type: Array,
+  moveDisabledTime: () => 200,
-      default: () => [],
+  classList: () => [],
-    },
+  zoomStep: () => 0.25,
-    zoomStep: {
+});
-      type: Number,
+
-      default: () => 0.25,
+const scale = ref<number>(1);
-    },
+const lastX = ref<number | null>(null);
-  },
+const lastY = ref<number | null>(null);
-  data() {
+const inDrag = ref<boolean>(false);
-    return {
+const touches = ref<number>(0);
-      scale: 1,
+const lastTouchDistance = ref<number | null>(0);
-      lastX: null,
+const moveDisabled = ref<boolean>(false);
-      lastY: null,
+const disabledTimer = ref<number | null>(null);
-      inDrag: false,
+const imageLoaded = ref<boolean>(false);
-      touches: 0,
+const position = ref<{
-      lastTouchDistance: 0,
+  center: { x: number; y: number };
-      moveDisabled: false,
+  relative: { x: number; y: number };
-      disabledTimer: null,
+}>({
-      imageLoaded: false,
-      position: {
   center: { x: 0, y: 0 },
   relative: { x: 0, y: 0 },
-      },
+});
-      maxScale: 4,
+const maxScale = ref<number>(4);
-      minScale: 0.25,
+const minScale = ref<number>(0.25);
-    };
+
-  },
+// Refs
-  mounted() {
+const imgex = ref<HTMLImageElement | null>(null);
-    if (!this.decodeUTIF()) {
+const container = ref<HTMLDivElement | null>(null);
-      this.$refs.imgex.src = this.src;
+
+onMounted(() => {
+  if (!decodeUTIF() && imgex.value !== null) {
+    imgex.value.src = props.src;
   }
-    let container = this.$refs.container;
+
-    this.classList.forEach((className) => container.classList.add(className));
+  props.classList.forEach((className) =>
+    container.value !== null ? container.value.classList.add(className) : ""
+  );
+
+  if (container.value === null) {
+    return;
+  }
+
   // set width and height if they are zero
-    if (getComputedStyle(container).width === "0px") {
+  if (getComputedStyle(container.value).width === "0px") {
-      container.style.width = "100%";
+    container.value.style.width = "100%";
   }
-    if (getComputedStyle(container).height === "0px") {
+  if (getComputedStyle(container.value).height === "0px") {
-      container.style.height = "100%";
+    container.value.style.height = "100%";
   }
 
-    window.addEventListener("resize", this.onResize);
+  window.addEventListener("resize", onResize);
-  },
+});
-  beforeDestroy() {
+
-    window.removeEventListener("resize", this.onResize);
+onBeforeUnmount(() => {
-    document.removeEventListener("mouseup", this.onMouseUp);
+  window.removeEventListener("resize", onResize);
-  },
+  document.removeEventListener("mouseup", onMouseUp);
-  watch: {
+});
-    src: function () {
+
-      if (!this.decodeUTIF()) {
+watch(
-        this.$refs.imgex.src = this.src;
+  () => props.src,
+  () => {
+    if (!decodeUTIF() && imgex.value !== null) {
+      imgex.value.src = props.src;
     }
 
-      this.scale = 1;
+    scale.value = 1;
-      this.setZoom();
+    setZoom();
-      this.setCenter();
+    setCenter();
-    },
+  }
-  },
+);
-  methods: {
+
 // Modified from UTIF.replaceIMG
-    decodeUTIF() {
+const decodeUTIF = () => {
   const sufs = ["tif", "tiff", "dng", "cr2", "nef"];
-      let suff = document.location.pathname.split(".").pop().toLowerCase();
+  if (document?.location?.pathname === undefined) {
+    return;
+  }
+  let suff = document.location.pathname.split(".")?.pop()?.toLowerCase() ?? "";
+
   if (sufs.indexOf(suff) == -1) return false;
   let xhr = new XMLHttpRequest();
   UTIF._xhrs.push(xhr);
-      UTIF._imgs.push(this.$refs.imgex);
+  UTIF._imgs.push(imgex.value);
-      xhr.open("GET", this.src);
+  xhr.open("GET", props.src);
   xhr.responseType = "arraybuffer";
   xhr.onload = UTIF._imgLoaded;
   xhr.send();
   return true;
-    },
+};
-    onLoad() {
-      let img = this.$refs.imgex;
 
-      this.imageLoaded = true;
+const onLoad = () => {
+  imageLoaded.value = true;
 
-      if (img === undefined) {
+  if (imgex.value === null) {
     return;
   }
 
-      img.classList.remove("image-ex-img-center");
+  imgex.value.classList.remove("image-ex-img-center");
-      this.setCenter();
+  setCenter();
-      img.classList.add("image-ex-img-ready");
+  imgex.value.classList.add("image-ex-img-ready");
 
-      document.addEventListener("mouseup", this.onMouseUp);
+  document.addEventListener("mouseup", onMouseUp);
 
-      let realSize = img.naturalWidth;
+  let realSize = imgex.value.naturalWidth;
-      let displaySize = img.offsetWidth;
+  let displaySize = imgex.value.offsetWidth;
 
   // Image is in portrait orientation
-      if (img.naturalHeight > img.naturalWidth) {
+  if (imgex.value.naturalHeight > imgex.value.naturalWidth) {
-        realSize = img.naturalHeight;
+    realSize = imgex.value.naturalHeight;
-        displaySize = img.offsetHeight;
+    displaySize = imgex.value.offsetHeight;
   }
 
   // Scale needed to display the image on full size
   const fullScale = realSize / displaySize;
 
   // Full size plus additional zoom
-      this.maxScale = fullScale + 4;
+  maxScale.value = fullScale + 4;
-    },
+};
-    onMouseUp() {
+
-      this.inDrag = false;
+const onMouseUp = () => {
-    },
+  inDrag.value = false;
-    onResize: throttle(function () {
+};
-      if (this.imageLoaded) {
+
-        this.setCenter();
+const onResize = throttle(function () {
-        this.doMove(this.position.relative.x, this.position.relative.y);
+  if (imageLoaded.value) {
+    setCenter();
+    doMove(position.value.relative.x, position.value.relative.y);
   }
-    }, 100),
+}, 100);
-    setCenter() {
-      let container = this.$refs.container;
-      let img = this.$refs.imgex;
 
-      this.position.center.x = Math.floor(
+const setCenter = () => {
-        (container.clientWidth - img.clientWidth) / 2
+  if (container.value === null || imgex.value === null) {
+    return;
+  }
+
+  position.value.center.x = Math.floor(
+    (container.value.clientWidth - imgex.value.clientWidth) / 2
   );
-      this.position.center.y = Math.floor(
+  position.value.center.y = Math.floor(
-        (container.clientHeight - img.clientHeight) / 2
+    (container.value.clientHeight - imgex.value.clientHeight) / 2
   );
 
-      img.style.left = this.position.center.x + "px";
+  imgex.value.style.left = position.value.center.x + "px";
-      img.style.top = this.position.center.y + "px";
+  imgex.value.style.top = position.value.center.y + "px";
-    },
+};
-    mousedownStart(event) {
+
-      this.lastX = null;
+const mousedownStart = (event: Event) => {
-      this.lastY = null;
+  lastX.value = null;
-      this.inDrag = true;
+  lastY.value = null;
+  inDrag.value = true;
   event.preventDefault();
-    },
+};
-    mouseMove(event) {
+const mouseMove = (event: MouseEvent) => {
-      if (!this.inDrag) return;
+  if (!inDrag.value) return;
-      this.doMove(event.movementX, event.movementY);
+  doMove(event.movementX, event.movementY);
   event.preventDefault();
-    },
+};
-    mouseUp(event) {
+const mouseUp = (event: Event) => {
-      this.inDrag = false;
+  inDrag.value = false;
   event.preventDefault();
-    },
+};
-    touchStart(event) {
+const touchStart = (event: TouchEvent) => {
-      this.lastX = null;
+  lastX.value = null;
-      this.lastY = null;
+  lastY.value = null;
-      this.lastTouchDistance = null;
+  lastTouchDistance.value = null;
   if (event.targetTouches.length < 2) {
     setTimeout(() => {
-          this.touches = 0;
+      touches.value = 0;
     }, 300);
-        this.touches++;
+    touches.value++;
-        if (this.touches > 1) {
+    if (touches.value > 1) {
-          this.zoomAuto(event);
+      zoomAuto(event);
     }
   }
   event.preventDefault();
-    },
+};
-    zoomAuto(event) {
+
-      switch (this.scale) {
+const zoomAuto = (event: Event) => {
+  switch (scale.value) {
     case 1:
-          this.scale = 2;
+      scale.value = 2;
       break;
     case 2:
-          this.scale = 4;
+      scale.value = 4;
       break;
     default:
     case 4:
-          this.scale = 1;
+      scale.value = 1;
-          this.setCenter();
+      setCenter();
       break;
   }
-      this.setZoom();
+  setZoom();
   event.preventDefault();
-    },
+};
-    touchMove(event) {
+
+const touchMove = (event: TouchEvent) => {
   event.preventDefault();
-      if (this.lastX === null) {
+  if (lastX.value === null) {
-        this.lastX = event.targetTouches[0].pageX;
+    lastX.value = event.targetTouches[0].pageX;
-        this.lastY = event.targetTouches[0].pageY;
+    lastY.value = event.targetTouches[0].pageY;
     return;
   }
-      let step = this.$refs.imgex.width / 5;
+  if (imgex.value === null) {
+    return;
+  }
+  let step = imgex.value.width / 5;
   if (event.targetTouches.length === 2) {
-        this.moveDisabled = true;
+    moveDisabled.value = true;
-        clearTimeout(this.disabledTimer);
+    if (disabledTimer.value) clearTimeout(disabledTimer.value);
-        this.disabledTimer = setTimeout(
+    disabledTimer.value = window.setTimeout(
-          () => (this.moveDisabled = false),
+      () => (moveDisabled.value = false),
-          this.moveDisabledTime
+      props.moveDisabledTime
     );
 
     let p1 = event.targetTouches[0];
@@ -219,55 +244,59 @@ export default {
     let touchDistance = Math.sqrt(
       Math.pow(p2.pageX - p1.pageX, 2) + Math.pow(p2.pageY - p1.pageY, 2)
     );
-        if (!this.lastTouchDistance) {
+    if (!lastTouchDistance.value) {
-          this.lastTouchDistance = touchDistance;
+      lastTouchDistance.value = touchDistance;
       return;
     }
-        this.scale += (touchDistance - this.lastTouchDistance) / step;
+    scale.value += (touchDistance - lastTouchDistance.value) / step;
-        this.lastTouchDistance = touchDistance;
+    lastTouchDistance.value = touchDistance;
-        this.setZoom();
+    setZoom();
   } else if (event.targetTouches.length === 1) {
-        if (this.moveDisabled) return;
+    if (moveDisabled.value) return;
-        let x = event.targetTouches[0].pageX - this.lastX;
+    let x = event.targetTouches[0].pageX - (lastX.value ?? 0);
-        let y = event.targetTouches[0].pageY - this.lastY;
+    let y = event.targetTouches[0].pageY - (lastY.value ?? 0);
     if (Math.abs(x) >= step && Math.abs(y) >= step) return;
-        this.lastX = event.targetTouches[0].pageX;
+    lastX.value = event.targetTouches[0].pageX;
-        this.lastY = event.targetTouches[0].pageY;
+    lastY.value = event.targetTouches[0].pageY;
-        this.doMove(x, y);
+    doMove(x, y);
   }
-    },
+};
-    doMove(x, y) {
+
-      let style = this.$refs.imgex.style;
+const doMove = (x: number, y: number) => {
-      let posX = this.pxStringToNumber(style.left) + x;
+  if (imgex.value === null) {
-      let posY = this.pxStringToNumber(style.top) + y;
+    return;
+  }
+  const style = imgex.value.style;
+
+  let posX = pxStringToNumber(style.left) + x;
+  let posY = pxStringToNumber(style.top) + y;
 
   style.left = posX + "px";
   style.top = posY + "px";
 
-      this.position.relative.x = Math.abs(this.position.center.x - posX);
+  position.value.relative.x = Math.abs(position.value.center.x - posX);
-      this.position.relative.y = Math.abs(this.position.center.y - posY);
+  position.value.relative.y = Math.abs(position.value.center.y - posY);
 
-      if (posX < this.position.center.x) {
+  if (posX < position.value.center.x) {
-        this.position.relative.x = this.position.relative.x * -1;
+    position.value.relative.x = position.value.relative.x * -1;
   }
 
-      if (posY < this.position.center.y) {
+  if (posY < position.value.center.y) {
-        this.position.relative.y = this.position.relative.y * -1;
+    position.value.relative.y = position.value.relative.y * -1;
   }
-    },
+};
-    wheelMove(event) {
+const wheelMove = (event: WheelEvent) => {
-      this.scale += -Math.sign(event.deltaY) * this.zoomStep;
+  scale.value += -Math.sign(event.deltaY) * props.zoomStep;
-      this.setZoom();
+  setZoom();
-    },
+};
-    setZoom() {
+const setZoom = () => {
-      this.scale = this.scale < this.minScale ? this.minScale : this.scale;
+  scale.value = scale.value < minScale.value ? minScale.value : scale.value;
-      this.scale = this.scale > this.maxScale ? this.maxScale : this.scale;
+  scale.value = scale.value > maxScale.value ? maxScale.value : scale.value;
-      this.$refs.imgex.style.transform = `scale(${this.scale})`;
+  if (imgex.value !== null)
-    },
+    imgex.value.style.transform = `scale(${scale.value})`;
-    pxStringToNumber(style) {
+};
+const pxStringToNumber = (style: string) => {
   return +style.replace("px", "");
-    },
-  },
 };
 </script>
 <style>

frontend/src/components/files/ListingItem.vue

@@ -12,11 +12,12 @@
     :data-type="type"
     :aria-label="name"
     :aria-selected="isSelected"
-    ref="item"
+    :data-ext="getExtension(name).toLowerCase()"
+    @contextmenu.prevent="contextMenu"
   >
     <div>
       <img
-        v-if="readOnly == undefined && type === 'image' && isThumbsEnabled"
+        v-if="!readOnly && type === 'image' && isThumbsEnabled"
         v-lazy="thumbnailUrl"
       />
       <i v-else class="material-icons"></i>
@@ -28,16 +29,7 @@
       </p>
       <p v-else class="name">{{ name }}</p>
 
-      <p v-if="isDir && !diskUsage" class="size" data-order="-1">&mdash;</p>
+      <p class="size" :data-order="diskUsage?.size || humanSize() || '-1'">{{ usedDiskSize }}</p>
-      <p
-        v-else-if="isDir && diskUsage"
-        class="size"
-        :data-order="humanDiskUsageSize()"
-      >
-        {{ humanDiskUsageSize() }}
-        {{ $t("prompts.inodeCount", { count: diskUsage.inodes }) }}
-      </p>
-      <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
 
       <p class="modified">
         <time :datetime="modified">{{ humanTime() }}</time>
@@ -48,189 +40,209 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useContextMenuStore } from "@/stores/contextMenu";
+
+import { eventPosition } from "@/utils/event";
 import { enableThumbs } from "@/utils/constants";
-import { mapMutations, mapGetters, mapState } from "vuex";
 import { filesize } from "@/utils";
-import moment from "moment";
+import dayjs from "dayjs";
 import { files as api } from "@/api";
 import * as upload from "@/utils/upload";
-import { eventPosition } from "@/utils/event";
+import { computed, inject, ref, watch, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
 
-export default {
+const { t } = useI18n();
-  name: "item",
-  data: function () {
-    return {
-      diskUsage: null,
-      touches: 0,
-    };
-  },
-  props: [
-    "name",
-    "link",
-    "isSymlink",
-    "isDir",
-    "url",
-    "type",
-    "size",
-    "mode",
-    "modified",
-    "index",
-    "readOnly",
-    "path",
-  ],
-  computed: {
-    ...mapState(["user", "selected", "req", "jwt", "diskUsages"]),
-    ...mapGetters(["selectedCount"]),
-    singleClick() {
-      return this.readOnly == undefined && this.user.singleClick;
-    },
-    isSelected() {
-      return this.selected.indexOf(this.index) !== -1;
-    },
-    isDraggable() {
-      return this.readOnly == undefined && this.user.perm.rename;
-    },
-    canDrop() {
-      if (!this.isDir || this.readOnly !== undefined) return false;
 
-      for (let i of this.selected) {
+const touches = ref<number>(0);
-        if (this.req.items[i].url === this.url) {
+
+const $showError = inject<IToastError>("$showError")!;
+const router = useRouter();
+
+const props = defineProps<{
+  name: string;
+  link: string;
+  isDir: boolean;
+  isSymlink: boolean;
+  url: string;
+  type: string;
+  size: number;
+  mode: number;
+  modified: string;
+  index: number;
+  readOnly?: boolean;
+  path?: string;
+}>();
+
+const authStore = useAuthStore();
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
+const contextMenuStore = useContextMenuStore();
+
+const { diskUsages } = storeToRefs(fileStore);
+
+const diskUsage = ref<DiskUsage | null>(null);
+
+const usedDiskSize = computed((): string => {
+  if (props.isDir) {
+    if (!diskUsage.value) {
+      return '-';
+    }
+
+    return diskUsage.value.size + ' ' + t("prompts.inodeCount", { count: diskUsage.value.inodes });
+  }
+
+  return humanSize();
+});
+const singleClick = computed(
+  () => !props.readOnly && authStore.user?.singleClick
+);
+const isSelected = computed(
+  () => fileStore.selected.indexOf(props.index) !== -1
+);
+const isDraggable = computed(
+  () => !props.readOnly && authStore.user?.perm.rename
+);
+
+watch(diskUsages, () => {
+  updateDiskUsage();
+}, { deep: true });
+
+const canDrop = computed(() => {
+  if (!props.isDir || props.readOnly) return false;
+
+  for (let i of fileStore.selected) {
+    if (fileStore.req?.items[i].url === props.url) {
       return false;
     }
   }
 
   return true;
-    },
+});
-    thumbnailUrl() {
+
+const thumbnailUrl = computed(() => {
   const file = {
-        path: this.path,
+    path: props.path,
-        modified: this.modified,
+    modified: props.modified,
   };
 
-      return api.getPreviewURL(file, "thumb");
+  return api.getPreviewURL(file as Resource, "thumb");
-    },
+});
-    isThumbsEnabled() {
+
+const isThumbsEnabled = computed(() => {
   return enableThumbs;
-    },
+});
-  },
+
-  watch: {
+const humanSize = () => {
-    diskUsages() {
+  return props.type == "invalid_link" ? "invalid link" : filesize(props.size);
-      this.fetchDiskUsage();
+};
-    },
+
-  },
+const permissions = () => {
-  mounted() {
-    this.$refs.item.addEventListener("contextmenu", this.contextMenu);
-    this.fetchDiskUsage();
-  },
-  beforeDestroy() {
-    this.$refs.item.removeEventListener("contextmenu", this.contextMenu);
-  },
-  methods: {
-    ...mapMutations([
-      "addSelected",
-      "removeSelected",
-      "resetSelected",
-      "showContextMenu",
-      "hideContextMenu",
-    ]),
-    fetchDiskUsage() {
-      if (this.isDir) {
-        this.diskUsage =
-          this.diskUsages[this.req.items[this.index].path] || null;
-      }
-    },
-    permissions() {
   let s = "";
-      if (this.isSymlink) {
+  if (props.isSymlink) {
     s += "l";
-      } else if (this.isDir) {
+  } else if (props.isDir) {
     s += "d";
   } else {
     s += "-";
   }
-      s += (this.mode & 256) != 0 ? "r" : "-";
+  s += (props.mode & 256) != 0 ? "r" : "-";
-      s += (this.mode & 128) != 0 ? "w" : "-";
+  s += (props.mode & 128) != 0 ? "w" : "-";
-      s += (this.mode & 64) != 0 ? "x" : "-";
+  s += (props.mode & 64) != 0 ? "x" : "-";
-      s += (this.mode & 32) != 0 ? "r" : "-";
+  s += (props.mode & 32) != 0 ? "r" : "-";
-      s += (this.mode & 16) != 0 ? "w" : "-";
+  s += (props.mode & 16) != 0 ? "w" : "-";
-      s += (this.mode & 8) != 0 ? "x" : "-";
+  s += (props.mode & 8) != 0 ? "x" : "-";
-      s += (this.mode & 4) != 0 ? "r" : "-";
+  s += (props.mode & 4) != 0 ? "r" : "-";
-      s += (this.mode & 2) != 0 ? "w" : "-";
+  s += (props.mode & 2) != 0 ? "w" : "-";
-      s += (this.mode & 1) != 0 ? "x" : "-";
+  s += (props.mode & 1) != 0 ? "x" : "-";
   return s;
-    },
+};
-    humanDiskUsageSize: function () {
+
-      return filesize(this.diskUsage.size);
+const updateDiskUsage = () => {
-    },
+  if (props.path) {
-    humanSize: function () {
+    diskUsage.value = fileStore.diskUsages.get(props.path) || null;
-      return this.type == "invalid_link" ? "invalid link" : filesize(this.size);
-    },
-    humanTime: function () {
-      if (this.readOnly == undefined && this.user.dateFormat) {
-        return moment(this.modified).format("L LT");
   }
-      return moment(this.modified).fromNow();
+};
-    },
+
-    dragStart: function () {
+const humanTime = () => {
-      if (this.selectedCount === 0) {
+  if (!props.readOnly && authStore.user?.dateFormat) {
-        this.addSelected(this.index);
+    return dayjs(props.modified).format("L LT");
+  }
+  return dayjs(props.modified).fromNow();
+};
+
+const dragStart = () => {
+  if (fileStore.selectedCount === 0) {
+    fileStore.selected.push(props.index);
     return;
   }
 
-      if (!this.isSelected) {
+  if (!isSelected.value) {
-        this.resetSelected();
+    fileStore.selected = [];
-        this.addSelected(this.index);
+    fileStore.selected.push(props.index);
   }
-    },
+};
-    dragOver: function (event) {
+
-      if (!this.canDrop) return;
+const dragOver = (event: Event) => {
+  if (!canDrop.value) return;
 
   event.preventDefault();
-      let el = event.target;
+  let el = event.target as HTMLElement | null;
-
+  if (el !== null) {
     for (let i = 0; i < 5; i++) {
-        if (!el.classList.contains("item")) {
+      if (!el?.classList.contains("item")) {
-          el = el.parentElement;
+        el = el?.parentElement ?? null;
       }
     }
 
-      el.style.opacity = 1;
+    if (el !== null) el.style.opacity = "1";
-    },
+  }
-    drop: async function (event) {
+};
-      if (!this.canDrop) return;
+
+const drop = async (event: Event) => {
+  if (!canDrop.value) return;
   event.preventDefault();
 
-      if (this.selectedCount === 0) return;
+  if (fileStore.selectedCount === 0) return;
 
-      let el = event.target;
+  let el = event.target as HTMLElement | null;
   for (let i = 0; i < 5; i++) {
     if (el !== null && !el.classList.contains("item")) {
       el = el.parentElement;
     }
   }
 
-      let items = [];
+  let items: any[] = [];
 
-      for (let i of this.selected) {
+  for (let i of fileStore.selected) {
+    if (fileStore.req) {
       items.push({
-          from: this.req.items[i].url,
+        from: fileStore.req?.items[i].url,
-          to: this.url + encodeURIComponent(this.req.items[i].name),
+        to: props.url + encodeURIComponent(fileStore.req?.items[i].name),
-          name: this.req.items[i].name,
+        name: fileStore.req?.items[i].name,
       });
     }
+  }
 
   // Get url from ListingItem instance
+  if (el === null) {
+    return;
+  }
   let path = el.__vue__.url;
   let baseItems = (await api.fetch(path)).items;
 
-      let action = (overwrite, rename) => {
+  let action = (overwrite: boolean, rename: boolean) => {
     api
       .move(items, overwrite, rename)
       .then(() => {
-            this.$store.commit("setReload", true);
+        fileStore.reload = true;
       })
-          .catch(this.$showError);
+      .catch($showError);
   };
 
   let conflict = upload.checkConflict(items, baseItems);
@@ -239,14 +251,14 @@ export default {
   let rename = false;
 
   if (conflict) {
-        this.$store.commit("showHover", {
+    layoutStore.showHover({
       prompt: "replace-rename",
-          confirm: (event, option) => {
+      confirm: (event: Event, option: any) => {
         overwrite = option == "overwrite";
         rename = option == "rename";
 
         event.preventDefault();
-            this.$store.commit("closeHovers");
+        layoutStore.closeHovers();
         action(overwrite, rename);
       },
     });
@@ -255,43 +267,53 @@ export default {
   }
 
   action(overwrite, rename);
-    },
+};
-    itemClick: function (event) {
+
-      if (this.singleClick && !this.$store.state.multiple) this.open();
+const itemClick = (event: Event | KeyboardEvent) => {
-      else this.click(event);
+  if (
-    },
+    singleClick.value &&
-    click: function (event) {
+    !(event as KeyboardEvent).ctrlKey &&
-      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();
+    !(event as KeyboardEvent).metaKey &&
+    !(event as KeyboardEvent).shiftKey &&
+    !fileStore.multiple
+  )
+    open();
+  else click(event);
+};
+
+const click = (event: Event | KeyboardEvent) => {
+  if (!singleClick.value && fileStore.selectedCount !== 0)
+    event.preventDefault();
 
   setTimeout(() => {
-        this.touches = 0;
+    touches.value = 0;
   }, 300);
 
-      this.touches++;
+  touches.value++;
-      if (this.touches > 1) {
+  if (touches.value > 1) {
-        this.open();
+    open();
   }
 
-      if (this.$store.state.selected.indexOf(this.index) !== -1) {
+  if (fileStore.selected.indexOf(props.index) !== -1) {
-        this.removeSelected(this.index);
+    fileStore.removeSelected(props.index);
     return;
   }
 
-      if (event.shiftKey && this.selected.length > 0) {
+  if ((event as KeyboardEvent).shiftKey && fileStore.selected.length > 0) {
     let fi = 0;
     let la = 0;
 
-        if (this.index > this.selected[0]) {
+    if (props.index > fileStore.selected[0]) {
-          fi = this.selected[0] + 1;
+      fi = fileStore.selected[0] + 1;
-          la = this.index;
+      la = props.index;
     } else {
-          fi = this.index;
+      fi = props.index;
-          la = this.selected[0] - 1;
+      la = fileStore.selected[0] - 1;
     }
 
     for (; fi <= la; fi++) {
-          if (this.$store.state.selected.indexOf(fi) == -1) {
+      if (fileStore.selected.indexOf(fi) == -1) {
-            this.addSelected(fi);
+        fileStore.selected.push(fi);
       }
     }
 
@@ -299,28 +321,41 @@ export default {
   }
 
   if (
-        !this.singleClick &&
+    !singleClick.value &&
-        !event.ctrlKey &&
+    !(event as KeyboardEvent).ctrlKey &&
-        !event.metaKey &&
+    !(event as KeyboardEvent).metaKey &&
-        !this.$store.state.multiple
+    !fileStore.multiple
-      )
+  ) {
-        this.resetSelected();
+    fileStore.selected = [];
-      this.addSelected(this.index);
-    },
-    open: function () {
-      this.$router.push({ path: this.url });
-    },
-    contextMenu(event) {
-      event.preventDefault();
-      this.hideContextMenu();
-      if (this.$store.state.selected.indexOf(this.index) === -1) {
-        this.resetSelected();
-        this.addSelected(this.index);
   }
-      let pos = eventPosition(event);
+  fileStore.selected.push(props.index);
-      pos.x += 2;
-      this.showContextMenu(pos);
-    },
-  },
 };
+
+const open = () => {
+  router.push({ path: props.url });
+};
+
+const getExtension = (fileName: string): string => {
+  const lastDotIndex = fileName.lastIndexOf(".");
+  if (lastDotIndex === -1) {
+    return fileName;
+  }
+  return fileName.substring(lastDotIndex);
+};
+
+const contextMenu = (event: MouseEvent) => {
+  contextMenuStore.hide();
+
+  if (fileStore.selected.indexOf(props.index) === -1) {
+    fileStore.selected = [props.index];
+  }
+
+  let pos = eventPosition(event);
+
+  contextMenuStore.show(pos.x + 2, pos.y);
+};
+
+onMounted(() => {
+  updateDiskUsage();
+});
 </script>

frontend/src/components/files/VideoPlayer.vue

@@ -0,0 +1,173 @@
+<template>
+  <video ref="videoPlayer" class="video-max video-js" controls preload="auto">
+    <source />
+    <track
+      kind="subtitles"
+      v-for="(sub, index) in subtitles"
+      :key="index"
+      :src="sub"
+      :label="subLabel(sub)"
+      :default="index === 0"
+    />
+    <p class="vjs-no-js">
+      Sorry, your browser doesn't support embedded videos, but don't worry, you
+      can <a :href="source">download it</a>
+      and watch it with your favorite video player!
+    </p>
+  </video>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+import videojs from "video.js";
+import type Player from "video.js/dist/types/player";
+import "videojs-mobile-ui";
+import "videojs-hotkeys";
+import "video.js/dist/video-js.min.css";
+import "videojs-mobile-ui/dist/videojs-mobile-ui.css";
+
+const videoPlayer = ref<HTMLElement | null>(null);
+const player = ref<Player | null>(null);
+
+const props = withDefaults(
+  defineProps<{
+    source: string;
+    subtitles?: string[];
+    options?: any;
+  }>(),
+  {
+    options: {},
+  }
+);
+
+const source = ref(props.source);
+const sourceType = ref("");
+
+nextTick(() => {
+  initVideoPlayer();
+});
+
+onMounted(() => {});
+
+onBeforeUnmount(() => {
+  if (player.value) {
+    player.value.dispose();
+    player.value = null;
+  }
+});
+
+const initVideoPlayer = async () => {
+  try {
+    const lang = document.documentElement.lang;
+    const languagePack = await (
+      languageImports[lang] || languageImports.en
+    )?.();
+    videojs.addLanguage("videoPlayerLocal", languagePack.default);
+    sourceType.value = "";
+
+    //
+    sourceType.value = getSourceType(source.value);
+
+    const srcOpt = { sources: { src: props.source, type: sourceType.value } };
+    //Supporting localized language display.
+    const langOpt = { language: "videoPlayerLocal" };
+    // support for playback at different speeds.
+    const playbackRatesOpt = { playbackRates: [0.5, 1, 1.5, 2, 2.5, 3] };
+    let options = getOptions(props.options, langOpt, srcOpt, playbackRatesOpt);
+    player.value = videojs(videoPlayer.value!, options, () => {});
+
+    // TODO: need to test on mobile
+    // @ts-ignore
+    player.value!.mobileUi();
+  } catch (error) {
+    console.error("Error initializing video player:", error);
+  }
+};
+
+const getOptions = (...srcOpt: any[]) => {
+  const options = {
+    controlBar: {
+      skipButtons: {
+        forward: 5,
+        backward: 5,
+      },
+    },
+    html5: {
+      nativeTextTracks: false,
+    },
+    plugins: {
+      hotkeys: {
+        volumeStep: 0.1,
+        seekStep: 10,
+        enableModifiersForNumbers: false,
+      },
+    },
+  };
+
+  return videojs.obj.merge(options, ...srcOpt);
+};
+
+//  Attempting to fix the issue of being unable to play .MKV format video files
+const getSourceType = (source: string) => {
+  const fileExtension = source ? source.split("?")[0].split(".").pop() : "";
+  if (fileExtension?.toLowerCase() === "mkv") {
+    return "video/mp4";
+  }
+  return "";
+};
+
+const subLabel = (subUrl: string) => {
+  let url: URL;
+  try {
+    url = new URL(subUrl);
+  } catch (_) {
+    // treat it as a relative url
+    // we only need this for filename
+    url = new URL(subUrl, window.location.origin);
+  }
+
+  const label = decodeURIComponent(
+    url.pathname
+      .split("/")
+      .pop()!
+      .replace(/\.[^/.]+$/, "")
+  );
+
+  return label;
+};
+
+interface LanguageImports {
+  [key: string]: () => Promise<any>;
+}
+
+const languageImports: LanguageImports = {
+  he: () => import("video.js/dist/lang/he.json"),
+  hu: () => import("video.js/dist/lang/hu.json"),
+  ar: () => import("video.js/dist/lang/ar.json"),
+  de: () => import("video.js/dist/lang/de.json"),
+  el: () => import("video.js/dist/lang/el.json"),
+  en: () => import("video.js/dist/lang/en.json"),
+  es: () => import("video.js/dist/lang/es.json"),
+  fr: () => import("video.js/dist/lang/fr.json"),
+  it: () => import("video.js/dist/lang/it.json"),
+  ja: () => import("video.js/dist/lang/ja.json"),
+  ko: () => import("video.js/dist/lang/ko.json"),
+  "nl-be": () => import("video.js/dist/lang/nl.json"),
+  pl: () => import("video.js/dist/lang/pl.json"),
+  "pt-br": () => import("video.js/dist/lang/pt-BR.json"),
+  pt: () => import("video.js/dist/lang/pt-PT.json"),
+  ro: () => import("video.js/dist/lang/ro.json"),
+  ru: () => import("video.js/dist/lang/ru.json"),
+  sk: () => import("video.js/dist/lang/sk.json"),
+  tr: () => import("video.js/dist/lang/tr.json"),
+  uk: () => import("video.js/dist/lang/uk.json"),
+  "zh-cn": () => import("video.js/dist/lang/zh-CN.json"),
+  "zh-tw": () => import("video.js/dist/lang/zh-TW.json"),
+};
+</script>
+<style scoped>
+.video-max {
+  width: 100%;
+  height: 100%;
+}
+</style>

frontend/src/components/header/Action.vue

@@ -2,24 +2,31 @@
   <button @click="action" :aria-label="label" :title="label" class="action">
     <i class="material-icons">{{ icon }}</i>
     <span>{{ label }}</span>
-    <span v-if="counter > 0" class="counter">{{ counter }}</span>
+    <span v-if="counter && counter > 0" class="counter">{{ counter }}</span>
   </button>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { useLayoutStore } from "@/stores/layout";
-  name: "action",
+
-  props: ["icon", "label", "counter", "show"],
+const props = defineProps<{
-  methods: {
+  icon?: string;
-    action: function () {
+  label?: string;
-      if (this.show) {
+  counter?: number;
-        this.$store.commit("showHover", this.show);
+  show?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "action"): any;
+}>();
+
+const layoutStore = useLayoutStore();
+
+const action = () => {
+  if (props.show) {
+    layoutStore.showHover(props.show);
   }
 
-      this.$emit("action");
+  emit("action");
-    },
-  },
 };
 </script>
-
-<style></style>

frontend/src/components/header/HeaderBar.vue

@@ -1,62 +1,59 @@
 <template>
   <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
+    <img v-if="showLogo" :src="logoURL" />
-    <action
+    <Action
-      v-if="showMenu !== undefined"
+      v-if="showMenu"
       class="menu-button"
       icon="menu"
-      :label="$t('buttons.toggleSidebar')"
+      :label="t('buttons.toggleSidebar')"
-      @action="openSidebar()"
+      @action="layoutStore.showHover('sidebar')"
     />
 
     <slot />
 
-    <div id="dropdown" :class="{ active: this.currentPromptName === 'more' }">
+    <div
+      id="dropdown"
+      :class="{ active: layoutStore.currentPromptName === 'more' }"
+    >
       <slot name="actions" />
     </div>
 
-    <action
+    <Action
-      v-if="this.$slots.actions"
+      v-if="ifActionsSlot"
       id="more"
       icon="more_vert"
-      :label="$t('buttons.more')"
+      :label="t('buttons.more')"
-      @action="$store.commit('showHover', 'more')"
+      @action="layoutStore.showHover('more')"
     />
 
     <div
       class="overlay"
-      v-show="this.currentPromptName == 'more'"
+      v-show="layoutStore.currentPromptName == 'more'"
-      @click="$store.commit('closeHovers')"
+      @click="layoutStore.closeHovers"
     />
   </header>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useLayoutStore } from "@/stores/layout";
+
 import { logoURL } from "@/utils/constants";
 
 import Action from "@/components/header/Action.vue";
-import { mapGetters } from "vuex";
+import { computed, useSlots } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
+defineProps<{
-  name: "header-bar",
+  showLogo?: boolean;
-  props: ["showLogo", "showMenu"],
+  showMenu?: boolean;
-  components: {
+}>();
-    Action,
+
-  },
+const layoutStore = useLayoutStore();
-  data: function () {
+const slots = useSlots();
-    return {
+
-      logoURL,
+const { t } = useI18n();
-    };
+
-  },
+const ifActionsSlot = computed(() => (slots.actions ? true : false));
-  methods: {
-    openSidebar() {
-      this.$store.commit("showHover", "sidebar");
-    },
-  },
-  computed: {
-    ...mapGetters(["currentPromptName"]),
-  },
-};
 </script>
 
 <style></style>

frontend/src/components/prompts/Archive.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t("prompts.archive") }}</h2>
+      <h2>{{ t("prompts.archive") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t("prompts.archiveMessage") }}</p>
+      <p>{{ t("prompts.archiveMessage") }}</p>
       <input
         class="input input--block"
         v-focus
         type="text"
-        @keyup.enter="submit"
         v-model.trim="name"
         :disabled="loading"
         required
@@ -22,7 +21,6 @@
         :disabled="loading"
         class="button button--block"
         @click="archive(format)"
-        v-focus
       >
         <i
           v-if="loading && format === loadingFormat"
@@ -36,18 +34,29 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapState, mapGetters } from "vuex";
+import { inject, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { onMounted } from "vue";
+import { useRoute } from 'vue-router'
+import { useFileStore } from "@/stores/file";
+import { useQuotaStore } from "@/stores/quota";
+import { useLayoutStore } from "@/stores/layout";
 import { files as api } from "@/api";
 import url from "@/utils/url";
 import buttons from "@/utils/buttons";
 
-export default {
+const fileStore = useFileStore();
-  name: "archive",
+const quotaStore = useQuotaStore();
-  data: function () {
+const layoutStore = useLayoutStore();
-    return {
+
-      name: "",
+const route = useRoute();
-      formats: {
+
+const { t } = useI18n();
+
+const $showError = inject<IToastError>("$showError")!;
+
+const formats = {
   zip: "zip",
   tar: "tar",
   targz: "tar.gz",
@@ -55,34 +64,25 @@ export default {
   tarxz: "tar.xz",
   tarlz4: "tar.lz4",
   tarsz: "tar.sz",
-      },
-      loading: false,
-      loadingFormat: "",
 };
-  },
-  computed: {
-    ...mapState(["req", "selected"]),
-    ...mapGetters(["isFiles", "isListing"]),
-  },
-  mounted() {
-    if (this.selected.length > 0) {
-      this.name = this.req.items[this.selected[0]].name;
-    }
-  },
-  methods: {
-    cancel: function () {
-      this.$store.commit("closeHovers");
-    },
-    archive: async function (format) {
-      let items = [];
 
-      for (let i of this.selected) {
+const name = ref<string>("");
-        items.push(this.req.items[i].name);
+const loading = ref<boolean>(false);
+const loadingFormat = ref<string>("");
+
+const archive = async (format: string) => {
+  let items: string[] = [];
+
+  for (let i of fileStore.selected) {
+    let item = fileStore.req?.items[i].name
+    if (item) {
+      items.push(item);
+    }
   }
 
-      let uri = this.isFiles ? this.$route.path : "/";
+  let uri = fileStore.isFiles ? route.path : "/";
 
-      if (!this.isListing) {
+  if (!fileStore.isListing) {
     uri = url.removeLastDir(uri);
   }
 
@@ -90,21 +90,25 @@ export default {
   uri = uri.replace("//", "/");
 
   try {
-        this.loading = true;
+    loading.value = true;
-        this.loadingFormat = format;
+    loadingFormat.value = format;
     buttons.loading("archive");
-        await api.archive(uri, this.name, format, ...items);
+    await api.archive(uri, name.value, format, ...items);
-        this.$store.commit("closeHovers");
+    layoutStore.closeHovers();
-        this.$store.commit("setReload", true);
+    fileStore.reload = true;
-        this.$store.dispatch("quota/fetch", 3000);
+    quotaStore.fetchQuota(3000);
-      } catch (e) {
+  } catch (e: any) {
-        this.$showError(e);
+    $showError(e);
   } finally {
-        this.loading = false;
+    loading.value = false;
-        this.loadingFormat = "";
+    loadingFormat.value = "";
     buttons.done("archive");
   }
-    },
-  },
 };
+
+onMounted(() => {
+  if (fileStore.selected.length > 0) {
+    name.value = fileStore.req?.items[fileStore.selected[0]].name || "";
+  }
+});
 </script>

frontend/src/components/prompts/BaseModal.vue

@@ -0,0 +1,21 @@
+<template>
+  <VueFinalModal
+    class="vfm-modal"
+    overlay-transition="vfm-fade"
+    content-transition="vfm-fade"
+    @closed="layoutStore.closeHovers"
+    :focus-trap="{
+      initialFocus: '#focus-prompt',
+      fallbackFocus: 'div.vfm__content',
+    }"
+  >
+    <slot />
+  </VueFinalModal>
+</template>
+
+<script setup lang="ts">
+import { VueFinalModal } from "vue-final-modal";
+import { useLayoutStore } from "@/stores/layout";
+
+const layoutStore = useLayoutStore();
+</script>

frontend/src/components/prompts/Copy.vue

@@ -6,13 +6,16 @@
 
     <div class="card-content">
       <p>{{ $t("prompts.copyMessage") }}</p>
-      <file-list ref="fileList" @update:selected="(val) => (dest = val)">
+      <file-list
-      </file-list>
+        ref="fileList"
+        @update:selected="(val) => (dest = val)"
+        tabindex="1"
+      />
     </div>
 
     <div
       class="card-action"
-      style="display: flex; align-items: center; justify-content: space-between;"
+      style="display: flex; align-items: center; justify-content: space-between"
     >
       <template v-if="user.perm.create">
         <button
@@ -20,7 +23,7 @@
           @click="$refs.fileList.createDir()"
           :aria-label="$t('sidebar.newFolder')"
           :title="$t('sidebar.newFolder')"
-          style="justify-self: left;"
+          style="justify-self: left"
         >
           <span>{{ $t("sidebar.newFolder") }}</span>
         </button>
@@ -28,17 +31,20 @@
       <div>
         <button
           class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')"
+          tabindex="3"
         >
           {{ $t("buttons.cancel") }}
         </button>
         <button
+          id="focus-prompt"
           class="button button--flat"
           @click="copy"
           :aria-label="$t('buttons.copy')"
           :title="$t('buttons.copy')"
+          tabindex="2"
         >
           {{ $t("buttons.copy") }}
         </button>
@@ -48,7 +54,11 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useAuthStore } from "@/stores/auth";
+import { useQuotaStore } from "@/stores/quota";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
@@ -63,8 +73,15 @@ export default {
       dest: null,
     };
   },
-  computed: mapState(["req", "selected", "user"]),
+  inject: ["$showError"],
+  computed: {
+    ...mapState(useFileStore, ["req", "selected"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapWritableState(useFileStore, ["reload"]),
+  },
   methods: {
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
+    ...mapActions(useQuotaStore, ["fetchQuota"]),
     copy: async function (event) {
       event.preventDefault();
       let items = [];
@@ -87,7 +104,7 @@ export default {
             buttons.success("copy");
 
             if (this.$route.path === this.dest) {
-              this.$store.commit("setReload", true);
+              this.reload = true;
 
               return;
             }
@@ -101,9 +118,9 @@ export default {
       };
 
       if (this.$route.path === this.dest) {
-        this.$store.commit("closeHovers");
+        this.closeHovers();
         action(false, true);
-        this.$store.dispatch("quota/fetch", 3000);
+        this.fetchQuota(3000);
         return;
       }
 
@@ -114,16 +131,16 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             action(overwrite, rename);
-            this.$store.dispatch("quota/fetch", 3000);
+            this.fetchQuota(3000);
           },
         });
 
@@ -131,7 +148,7 @@ export default {
       }
 
       action(overwrite, rename);
-      this.$store.dispatch("quota/fetch", 3000);
+      this.fetchQuota(3000);
     },
   },
 };

frontend/src/components/prompts/Delete.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card floating">
     <div class="card-content">
-      <p v-if="selectedCount === 1">
+      <p v-if="!this.isListing || selectedCount === 1">
         {{ $t("prompts.deleteMessageSingle") }}
       </p>
       <p v-else>
@@ -14,18 +14,21 @@
     </div>
     <div class="card-action">
       <button
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat button--grey"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
+        tabindex="2"
       >
         {{ $t("buttons.cancel") }}
       </button>
       <button
+        id="focus-prompt"
         @click="submit"
         class="button button--flat button--red"
         :aria-label="$t('buttons.delete')"
         :title="$t('buttons.delete')"
+        tabindex="1"
       >
         {{ $t("buttons.delete") }}
       </button>
@@ -34,10 +37,13 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapState } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
 import { trashDir } from "@/utils/constants";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useQuotaStore } from "@/stores/quota";
 
 export default {
   name: "delete",
@@ -46,9 +52,16 @@ export default {
       skipTrash: true,
     };
   },
+  inject: ["$showError"],
   computed: {
-    ...mapGetters(["isListing", "selectedCount", "currentPrompt"]),
+    ...mapState(useFileStore, [
-    ...mapState(["req", "selected"]),
+      "isListing",
+      "selectedCount",
+      "req",
+      "selected",
+      "currentPrompt",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
     trashBinCheckbox() {
       if (trashDir === "") {
         return false;
@@ -72,10 +85,12 @@ export default {
     },
   },
   methods: {
-    ...mapMutations(["closeHovers"]),
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+    ...mapActions(useQuotaStore, ["fetchQuota"]),
     submit: async function () {
       buttons.loading("delete");
 
+      window.sessionStorage.setItem("modified", "true");
       try {
         if (!this.isListing) {
           await api.remove(this.$route.path, this.skipTrash);
@@ -99,12 +114,12 @@ export default {
 
         await Promise.all(promises);
         buttons.success("delete");
-        this.$store.commit("setReload", true);
+        this.reload = true;
-        this.$store.dispatch("quota/fetch", 3000);
+        this.fetchQuota(3000);
       } catch (e) {
         buttons.done("delete");
         this.$showError(e);
-        if (this.isListing) this.$store.commit("setReload", true);
+        if (this.isListing) this.reload = true;
       }
     },
   },

frontend/src/components/prompts/DeleteUser.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="card floating">
+    <div class="card-content">
+      <p>{{ t("prompts.deleteUser") }}</p>
+    </div>
+
+    <div class="card-action">
+      <button
+        id="focus-prompt"
+        class="button button--flat button--grey"
+        @click="layoutStore.closeHovers"
+        :aria-label="t('buttons.cancel')"
+        :title="t('buttons.cancel')"
+        tabindex="1"
+      >
+        {{ t("buttons.cancel") }}
+      </button>
+      <button
+        class="button button--flat"
+        @click="layoutStore.currentPrompt?.confirm"
+        tabindex="2"
+      >
+        {{ t("buttons.delete") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLayoutStore } from "@/stores/layout";
+import { useI18n } from "vue-i18n";
+
+const layoutStore = useLayoutStore();
+
+const { t } = useI18n();
+
+// const emit = defineEmits<{
+//   (e: "confirm"): void;
+// }>();
+</script>

frontend/src/components/prompts/DiscardEditorChanges.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="card floating">
+    <div class="card-content">
+      <p>
+        {{ $t("prompts.discardEditorChanges") }}
+      </p>
+    </div>
+    <div class="card-action">
+      <button
+        class="button button--flat button--grey"
+        @click="closeHovers"
+        :aria-label="$t('buttons.cancel')"
+        :title="$t('buttons.cancel')"
+        tabindex="2"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        id="focus-prompt"
+        @click="submit"
+        class="button button--flat button--red"
+        :aria-label="$t('buttons.discardChanges')"
+        :title="$t('buttons.discardChanges')"
+        tabindex="1"
+      >
+        {{ $t("buttons.discardChanges") }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from "pinia";
+import url from "@/utils/url";
+import { useLayoutStore } from "@/stores/layout";
+import { useFileStore } from "@/stores/file";
+
+export default {
+  name: "discardEditorChanges",
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+    ...mapActions(useFileStore, ["updateRequest"]),
+    submit: async function () {
+      this.updateRequest(null);
+
+      let uri = url.removeLastDir(this.$route.path) + "/";
+      this.$router.push({ path: uri });
+    },
+  },
+};
+</script>

frontend/src/components/prompts/Download.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="card floating" id="download">
     <div class="card-title">
-      <h2>{{ $t("prompts.download") }}</h2>
+      <h2>{{ t("prompts.download") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t("prompts.downloadMessage") }}</p>
+      <p>{{ t("prompts.downloadMessage") }}</p>
 
       <button
+        id="focus-prompt"
         v-for="(ext, format) in formats"
         :key="format"
         class="button button--block"
-        @click="currentPrompt.confirm(format)"
+        @click="layoutStore.currentPrompt?.confirm(format)"
-        v-focus
       >
         {{ ext }}
       </button>
@@ -20,14 +20,15 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters } from "vuex";
+import { useI18n } from "vue-i18n";
+import { useLayoutStore } from "@/stores/layout";
 
-export default {
+const layoutStore = useLayoutStore();
-  name: "download",
+
-  data: function () {
+const { t } = useI18n();
-    return {
+
-      formats: {
+const formats = {
   zip: "zip",
   tar: "tar",
   targz: "tar.gz",
@@ -35,11 +36,5 @@ export default {
   tarxz: "tar.xz",
   tarlz4: "tar.lz4",
   tarsz: "tar.sz",
-      },
-    };
-  },
-  computed: {
-    ...mapGetters(["currentPrompt"]),
-  },
 };
 </script>

frontend/src/components/prompts/FileList.vue

@@ -25,7 +25,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from "pinia";
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+
 import url from "@/utils/url";
 import { files } from "@/api";
 
@@ -42,8 +45,10 @@ export default {
       current: window.location.pathname,
     };
   },
+  inject: ["$showError"],
   computed: {
-    ...mapState(["req", "user"]),
+    ...mapState(useAuthStore, ["user"]),
+    ...mapState(useFileStore, ["req"]),
     nav() {
       return decodeURIComponent(this.current);
     },

frontend/src/components/prompts/Help.vue

@@ -20,11 +20,13 @@
 
     <div class="card-action">
       <button
+        id="focus-prompt"
         type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')"
+        tabindex="1"
       >
         {{ $t("buttons.ok") }}
       </button>
@@ -33,5 +35,13 @@
 </template>
 
 <script>
-export default { name: "help" };
+import { mapActions } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
+export default {
+  name: "help",
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
+};
 </script>

frontend/src/components/prompts/Info.vue

@@ -46,33 +46,45 @@
         <p>
           <strong>MD5: </strong
           ><code
-            ><a @click="checksum($event, 'md5')">{{
+            ><a
-              $t("prompts.show")
+              @click="checksum($event, 'md5')"
-            }}</a></code
+              @keypress.enter="checksum($event, 'md5')"
+              tabindex="2"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
         <p>
           <strong>SHA1: </strong
           ><code
-            ><a @click="checksum($event, 'sha1')">{{
+            ><a
-              $t("prompts.show")
+              @click="checksum($event, 'sha1')"
-            }}</a></code
+              @keypress.enter="checksum($event, 'sha1')"
+              tabindex="3"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
         <p>
           <strong>SHA256: </strong
           ><code
-            ><a @click="checksum($event, 'sha256')">{{
+            ><a
-              $t("prompts.show")
+              @click="checksum($event, 'sha256')"
-            }}</a></code
+              @keypress.enter="checksum($event, 'sha256')"
+              tabindex="4"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
         <p>
           <strong>SHA512: </strong
           ><code
-            ><a @click="checksum($event, 'sha512')">{{
+            ><a
-              $t("prompts.show")
+              @click="checksum($event, 'sha512')"
-            }}</a></code
+              @keypress.enter="checksum($event, 'sha512')"
+              tabindex="5"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
       </template>
@@ -80,8 +92,9 @@
 
     <div class="card-action">
       <button
+        id="focus-prompt"
         type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')"
@@ -93,16 +106,23 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 import { filesize } from "@/utils";
-import moment from "moment";
+import dayjs from "dayjs";
 import { files as api } from "@/api";
 
 export default {
   name: "info",
+  inject: ["$showError"],
   computed: {
-    ...mapState(["req", "selected"]),
+    ...mapState(useFileStore, [
-    ...mapGetters(["selectedCount", "isListing"]),
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
     humanSize: function () {
       if (this.selectedCount === 0 || !this.isListing) {
         return filesize(this.req.size);
@@ -118,13 +138,19 @@ export default {
     },
     humanTime: function () {
       if (this.selectedCount === 0) {
-        return moment(this.req.modified).fromNow();
+        return dayjs(this.req.modified).fromNow();
       }
 
-      return moment(this.req.items[this.selected[0]].modified).fromNow();
+      return dayjs(this.req.items[this.selected[0]].modified).fromNow();
     },
     modTime: function () {
+      if (this.selectedCount === 0) {
         return new Date(Date.parse(this.req.modified)).toLocaleString();
+      }
+
+      return new Date(
+        Date.parse(this.req.items[this.selected[0]].modified)
+      ).toLocaleString();
     },
     name: function () {
       return this.selectedCount === 0
@@ -142,17 +168,17 @@ export default {
     resolution: function () {
       if (this.selectedCount === 1) {
         const selectedItem = this.req.items[this.selected[0]];
-        if (selectedItem && selectedItem.type === 'image') {
+        if (selectedItem && selectedItem.type === "image") {
           return selectedItem.resolution;
         }
-      }
+      } else if (this.req && this.req.type === "image") {
-      else if (this.req && this.req.type === 'image') {
         return this.req.resolution;
       }
       return null;
     },
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     checksum: async function (event, algo) {
       event.preventDefault();
 
@@ -166,8 +192,7 @@ export default {
 
       try {
         const hash = await api.checksum(link, algo);
-        // eslint-disable-next-line
+        event.target.textContent = hash;
-        event.target.innerHTML = hash;
       } catch (e) {
         this.$showError(e);
       }

frontend/src/components/prompts/Move.vue

@@ -5,13 +5,16 @@
     </div>
 
     <div class="card-content">
-      <file-list ref="fileList" @update:selected="(val) => (dest = val)">
+      <file-list
-      </file-list>
+        ref="fileList"
+        @update:selected="(val) => (dest = val)"
+        tabindex="1"
+      />
     </div>
 
     <div
       class="card-action"
-      style="display: flex; align-items: center; justify-content: space-between;"
+      style="display: flex; align-items: center; justify-content: space-between"
     >
       <template v-if="user.perm.create">
         <button
@@ -19,7 +22,7 @@
           @click="$refs.fileList.createDir()"
           :aria-label="$t('sidebar.newFolder')"
           :title="$t('sidebar.newFolder')"
-          style="justify-self: left;"
+          style="justify-self: left"
         >
           <span>{{ $t("sidebar.newFolder") }}</span>
         </button>
@@ -27,18 +30,21 @@
       <div>
         <button
           class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')"
+          tabindex="3"
         >
           {{ $t("buttons.cancel") }}
         </button>
         <button
+          id="focus-prompt"
           class="button button--flat"
           @click="move"
           :disabled="$route.path === dest"
           :aria-label="$t('buttons.move')"
           :title="$t('buttons.move')"
+          tabindex="2"
         >
           {{ $t("buttons.move") }}
         </button>
@@ -48,7 +54,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useAuthStore } from "@/stores/auth";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
@@ -63,8 +72,13 @@ export default {
       dest: null,
     };
   },
-  computed: mapState(["req", "selected", "user"]),
+  inject: ["$showError"],
+  computed: {
+    ...mapState(useFileStore, ["req", "selected"]),
+    ...mapState(useAuthStore, ["user"]),
+  },
   methods: {
+    ...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
     move: async function (event) {
       event.preventDefault();
       let items = [];
@@ -99,14 +113,14 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
+        this.showHover({
           prompt: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            this.closeHovers();
             action(overwrite, rename);
           },
         });

frontend/src/components/prompts/NewDir.vue

@@ -1,99 +1,107 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t("prompts.newDir") }}</h2>
+      <h2>{{ t("prompts.newDir") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t("prompts.newDirMessage") }}</p>
+      <p>{{ t("prompts.newDirMessage") }}</p>
       <input
+        id="focus-prompt"
         class="input input--block"
         type="text"
         @keyup.enter="submit"
         v-model.trim="name"
-        v-focus
+        tabindex="1"
       />
     </div>
 
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="layoutStore.closeHovers"
-        :aria-label="$t('buttons.cancel')"
+        :aria-label="t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
+        :title="t('buttons.cancel')"
+        tabindex="3"
       >
-        {{ $t("buttons.cancel") }}
+        {{ t("buttons.cancel") }}
       </button>
       <button
         class="button button--flat"
         :aria-label="$t('buttons.create')"
-        :title="$t('buttons.create')"
+        :title="t('buttons.create')"
         @click="submit"
+        tabindex="2"
       >
-        {{ $t("buttons.create") }}
+        {{ t("buttons.create") }}
       </button>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters } from "vuex";
+import { inject, ref } from "vue";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useQuotaStore } from "@/stores/quota";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-export default {
+const $showError = inject<IToastError>("$showError")!;
-  name: "new-dir",
+
-  props: {
+const props = defineProps({
+  base: String,
   redirect: {
     type: Boolean,
     default: true,
   },
-    base: {
+});
-      type: [String, null],
+
-      default: null,
+const fileStore = useFileStore();
-    },
+const layoutStore = useLayoutStore();
-  },
+const quotaStore = useQuotaStore();
-  data: function () {
+
-    return {
+const route = useRoute();
-      name: "",
+const router = useRouter();
-    };
+const { t } = useI18n();
-  },
+
-  computed: {
+const name = ref<string>("");
-    ...mapGetters(["isFiles", "isListing"]),
+
-  },
+const submit = async (event: Event) => {
-  methods: {
-    submit: async function (event) {
   event.preventDefault();
-      if (this.new === "") return;
+  if (name.value === "") return;
 
   // Build the path of the new directory.
-      let uri;
+  let uri: string;
-
+  if (props.base) uri = props.base;
-      if (this.base) uri = this.base;
+  else if (fileStore.isFiles) uri = route.path + "/";
-      else if (this.isFiles) uri = this.$route.path + "/";
   else uri = "/";
 
-      if (!this.isListing) {
+  if (!fileStore.isListing) {
     uri = url.removeLastDir(uri) + "/";
   }
 
-      uri += encodeURIComponent(this.name) + "/";
+  uri += encodeURIComponent(name.value) + "/";
   uri = uri.replace("//", "/");
+
   try {
     await api.post(uri);
-        if (this.redirect) {
+    if (props.redirect) {
-          this.$router.push({ path: uri });
+      router.push({ path: uri });
-        } else if (!this.base) {
+    } else if (!props.base) {
       const res = await api.fetch(url.removeLastDir(uri) + "/");
-          this.$store.commit("updateRequest", res);
+      fileStore.updateRequest(res);
     }
   } catch (e) {
-        this.$showError(e);
+    if (e instanceof Error) {
+      $showError(e);
+    }
   }
 
-      this.$store.commit("closeHovers");
+  quotaStore.fetchQuota(3000);
-      this.$store.dispatch("quota/fetch", 3000);
+  layoutStore.closeHovers();
-    },
-  },
 };
 </script>

frontend/src/components/prompts/NewFile.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t("prompts.newFile") }}</h2>
+      <h2>{{ t("prompts.newFile") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t("prompts.newFileMessage") }}</p>
+      <p>{{ t("prompts.newFileMessage") }}</p>
       <input
+        id="focus-prompt"
         class="input input--block"
-        v-focus
         type="text"
         @keyup.enter="submit"
         v-model.trim="name"
@@ -18,64 +18,71 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="layoutStore.closeHovers"
-        :aria-label="$t('buttons.cancel')"
+        :aria-label="t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
+        :title="t('buttons.cancel')"
       >
-        {{ $t("buttons.cancel") }}
+        {{ t("buttons.cancel") }}
       </button>
       <button
         class="button button--flat"
         @click="submit"
-        :aria-label="$t('buttons.create')"
+        :aria-label="t('buttons.create')"
-        :title="$t('buttons.create')"
+        :title="t('buttons.create')"
       >
-        {{ $t("buttons.create") }}
+        {{ t("buttons.create") }}
       </button>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapGetters } from "vuex";
+import { inject, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useQuotaStore } from "@/stores/quota";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";
 
-export default {
+const $showError = inject<IToastError>("$showError")!;
-  name: "new-file",
+
-  data: function () {
+const fileStore = useFileStore();
-    return {
+const layoutStore = useLayoutStore();
-      name: "",
+const quotaStore = useQuotaStore();
-    };
+
-  },
+const route = useRoute();
-  computed: {
+const router = useRouter();
-    ...mapGetters(["isFiles", "isListing"]),
+const { t } = useI18n();
-  },
+
-  methods: {
+const name = ref<string>("");
-    submit: async function (event) {
+
+const submit = async (event: Event) => {
   event.preventDefault();
-      if (this.new === "") return;
+  if (name.value === "") return;
 
   // Build the path of the new directory.
-      let uri = this.isFiles ? this.$route.path + "/" : "/";
+  let uri = fileStore.isFiles ? route.path + "/" : "/";
 
-      if (!this.isListing) {
+  if (!fileStore.isListing) {
     uri = url.removeLastDir(uri) + "/";
   }
 
-      uri += encodeURIComponent(this.name);
+  uri += encodeURIComponent(name.value);
   uri = uri.replace("//", "/");
 
   try {
     await api.post(uri);
-        this.$router.push({ path: uri });
+    router.push({ path: uri });
   } catch (e) {
-        this.$showError(e);
+    if (e instanceof Error) {
+      $showError(e);
+    }
   }
 
-      this.$store.commit("closeHovers");
+  quotaStore.fetchQuota(3000);
-      this.$store.dispatch("quota/fetch", 3000);
+  layoutStore.closeHovers();
-    },
-  },
 };
 </script>

frontend/src/components/prompts/Permissions.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t("prompts.permissions") }}</h2>
+      <h2>{{ t("prompts.permissions") }}</h2>
     </div>
 
     <div class="card-content" id="permissions">
@@ -9,14 +9,14 @@
         <thead>
           <tr>
             <td></td>
-            <td>{{ $t("prompts.read") }}</td>
+            <td>{{ t("prompts.read") }}</td>
-            <td>{{ $t("prompts.write") }}</td>
+            <td>{{ t("prompts.write") }}</td>
-            <td>{{ $t("prompts.execute") }}</td>
+            <td>{{ t("prompts.execute") }}</td>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td>{{ $t("prompts.owner") }}</td>
+            <td>{{ t("prompts.owner") }}</td>
             <td>
               <input type="checkbox" v-model="permissions.owner.read" />
             </td>
@@ -28,7 +28,7 @@
             </td>
           </tr>
           <tr>
-            <td>{{ $t("prompts.group") }}</td>
+            <td>{{ t("prompts.group") }}</td>
             <td>
               <input type="checkbox" v-model="permissions.group.read" />
             </td>
@@ -40,7 +40,7 @@
             </td>
           </tr>
           <tr>
-            <td>{{ $t("prompts.others") }}</td>
+            <td>{{ t("prompts.others") }}</td>
             <td>
               <input type="checkbox" v-model="permissions.others.read" />
             </td>
@@ -59,7 +59,7 @@
       <template v-if="dirSelected">
         <p>
           <input type="checkbox" v-model="recursive" />
-          {{ $t("prompts.recursive") }}:
+          {{ t("prompts.recursive") }}:
         </p>
         <div class="recursion-types">
           <p>
@@ -71,7 +71,7 @@
               v-model="recursionType"
             />
             <label for="recursive-all">
-              {{ $t("prompts.directoriesAndFiles") }}
+              {{ t("prompts.directoriesAndFiles") }}
             </label>
           </p>
           <p>
@@ -83,7 +83,7 @@
               v-model="recursionType"
             />
             <label for="recursive-directories">
-              {{ $t("prompts.directories") }}
+              {{ t("prompts.directories") }}
             </label>
           </p>
           <p>
@@ -95,7 +95,7 @@
               v-model="recursionType"
             />
             <label for="recursive-files">
-              {{ $t("prompts.files") }}
+              {{ t("prompts.files") }}
             </label>
           </p>
         </div>
@@ -103,14 +103,6 @@
     </div>
 
     <div class="card-action">
-      <button
-        class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
-        :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
-      >
-        {{ $t("buttons.cancel") }}
-      </button>
       <button
         class="button button--flat"
         @click="chmod"
@@ -118,40 +110,30 @@
         :aria-label="$t('buttons.update')"
         :title="$t('buttons.update')"
       >
-        {{ $t("buttons.update") }}
+        {{ t("buttons.update") }}
       </button>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapState, mapGetters } from "vuex";
+import { computed, inject } from "vue";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+import { useI18n } from "vue-i18n";
 import { files as api } from "@/api";
 
-export default {
+const fileStore = useFileStore();
-  name: "permissions",
+const layoutStore = useLayoutStore();
-  data: function () {
+
-    return {
+const { t } = useI18n();
-      recursive: false,
+
-      recursionType: "all",
+const $showError = inject<IToastError>("$showError")!;
-      permissions: {
+
-        owner: {
+let loading = false;
-          read: false,
+let recursive = false;
-          write: false,
+let recursionType = "all";
-          execute: false,
+let masks = {
-        },
-        group: {
-          read: false,
-          write: false,
-          execute: false,
-        },
-        others: {
-          read: false,
-          write: false,
-          execute: false,
-        },
-      },
-      masks: {
   permissions: 511,
   owner: {
     read: 256,
@@ -168,86 +150,110 @@ export default {
     write: 2,
     execute: 1,
   },
-      },
-      loading: false,
 };
-  },
-  computed: {
-    ...mapState(["req", "selected"]),
-    ...mapGetters(["isFiles", "isListing"]),
-    permMode() {
-      let mode = 0;
-      mode |= this.masks.owner.read * this.permissions.owner.read;
-      mode |= this.masks.owner.write * this.permissions.owner.write;
-      mode |= this.masks.owner.execute * this.permissions.owner.execute;
-      mode |= this.masks.group.read * this.permissions.group.read;
-      mode |= this.masks.group.write * this.permissions.group.write;
-      mode |= this.masks.group.execute * this.permissions.group.execute;
-      mode |= this.masks.others.read * this.permissions.others.read;
-      mode |= this.masks.others.write * this.permissions.others.write;
-      mode |= this.masks.others.execute * this.permissions.others.execute;
-      return mode;
-    },
-    permModeString() {
-      let perms = this.permMode;
-      let s = "";
-      s += (perms & this.masks.owner.read) != 0 ? "r" : "-";
-      s += (perms & this.masks.owner.write) != 0 ? "w" : "-";
-      s += (perms & this.masks.owner.execute) != 0 ? "x" : "-";
-      s += (perms & this.masks.group.read) != 0 ? "r" : "-";
-      s += (perms & this.masks.group.write) != 0 ? "w" : "-";
-      s += (perms & this.masks.group.execute) != 0 ? "x" : "-";
-      s += (perms & this.masks.others.read) != 0 ? "r" : "-";
-      s += (perms & this.masks.others.write) != 0 ? "w" : "-";
-      s += (perms & this.masks.others.execute) != 0 ? "x" : "-";
-      return s;
-    },
-    dirSelected() {
-      return this.req.items[this.selected[0]].isDir;
-    },
-  },
-  created() {
-    let item = this.req.items[this.selected[0]];
-    let perms = item.mode & this.masks.permissions;
 
-    // OWNER PERMS
+const permissions = computed((): FilePermissions => {
-    this.permissions.owner.read = (perms & this.masks.owner.read) != 0;
+  let permObj = {
-    this.permissions.owner.write = (perms & this.masks.owner.write) != 0;
+    owner: {
-    this.permissions.owner.execute = (perms & this.masks.owner.execute) != 0;
+      read: false,
-    // GROUP PERMS
+      write: false,
-    this.permissions.group.read = (perms & this.masks.group.read) != 0;
+      execute: false,
-    this.permissions.group.write = (perms & this.masks.group.write) != 0;
-    this.permissions.group.execute = (perms & this.masks.group.execute) != 0;
-    // OTHERS PERMS
-    this.permissions.others.read = (perms & this.masks.others.read) != 0;
-    this.permissions.others.write = (perms & this.masks.others.write) != 0;
-    this.permissions.others.execute = (perms & this.masks.others.execute) != 0;
     },
-  methods: {
+    group: {
-    cancel: function () {
+      read: false,
-      this.$store.commit("closeHovers");
+      write: false,
+      execute: false,
     },
-    chmod: async function () {
+    others: {
-      let item = this.req.items[this.selected[0]];
+      read: false,
+      write: false,
+      execute: false,
+    },
+  };
 
-      try {
+  let item = fileStore.req?.items[fileStore.selected[0]];
-        this.loading = true;
+  if (!item) {
-        await api.chmod(
+    return permObj
-          item.url,
-          this.permMode,
-          this.recursive,
-          this.recursionType
-        );
-
-        this.$store.commit("setReload", true);
-      } catch (e) {
-        this.$showError(e);
-      } finally {
-        this.loading = false;
   }
 
-      this.$store.commit("closeHovers");
+  let perms = item.mode & masks.permissions;
-    },
+
-  },
+  // OWNER PERMS
+  permObj.owner.read = (perms & masks.owner.read) != 0;
+  permObj.owner.write = (perms & masks.owner.write) != 0;
+  permObj.owner.execute = (perms & masks.owner.execute) != 0;
+  // GROUP PERMS
+  permObj.group.read = (perms & masks.group.read) != 0;
+  permObj.group.write = (perms & masks.group.write) != 0;
+  permObj.group.execute = (perms & masks.group.execute) != 0;
+  // OTHERS PERMS
+  permObj.others.read = (perms & masks.others.read) != 0;
+  permObj.others.write = (perms & masks.others.write) != 0;
+  permObj.others.execute = (perms & masks.others.execute) != 0;
+
+  return permObj;
+});
+
+const permMode = computed((): number => {
+  let mode = 0;
+  mode |= masks.owner.read * (permissions.value.owner.read ? 1 : 0);
+  mode |= masks.owner.write * (permissions.value.owner.write ? 1 : 0);
+  mode |= masks.owner.execute * (permissions.value.owner.execute ? 1 : 0);
+  mode |= masks.group.read * (permissions.value.group.read ? 1 : 0);
+  mode |= masks.group.write * (permissions.value.group.write ? 1 : 0);
+  mode |= masks.group.execute * (permissions.value.group.execute ? 1 : 0);
+  mode |= masks.others.read * (permissions.value.others.read ? 1 : 0);
+  mode |= masks.others.write * (permissions.value.others.write ? 1 : 0);
+  mode |= masks.others.execute * (permissions.value.others.execute ? 1 : 0);
+  return mode;
+});
+
+const permModeString = computed((): string => {
+  let perms = permMode;
+  let s = "";
+  s += (perms.value & masks.owner.read) != 0 ? "r" : "-";
+  s += (perms.value & masks.owner.write) != 0 ? "w" : "-";
+  s += (perms.value & masks.owner.execute) != 0 ? "x" : "-";
+  s += (perms.value & masks.group.read) != 0 ? "r" : "-";
+  s += (perms.value & masks.group.write) != 0 ? "w" : "-";
+  s += (perms.value & masks.group.execute) != 0 ? "x" : "-";
+  s += (perms.value & masks.others.read) != 0 ? "r" : "-";
+  s += (perms.value & masks.others.write) != 0 ? "w" : "-";
+  s += (perms.value & masks.others.execute) != 0 ? "x" : "-";
+  return s;
+});
+
+const dirSelected = computed((): boolean => {
+  let item = fileStore.req?.items[fileStore.selected[0]];
+  if (!item) {
+    return false;
+  }
+
+  return item.isDir;
+});
+
+const chmod = async () => {
+  let item = fileStore.req?.items[fileStore.selected[0]];
+  if (!item) {
+    return;
+  }
+
+  try {
+    loading = true;
+
+    await api.chmod(
+      item.url,
+      permMode.value,
+      recursive,
+      recursionType,
+    );
+
+    layoutStore.closeHovers();
+    fileStore.reload = true
+  } catch (e: any) {
+    $showError(e);
+  } finally {
+    loading = false;
+  }
 };
 </script>

frontend/src/components/prompts/Prompts.vue

@@ -1,115 +1,88 @@
 <template>
-  <div>
+  <ModalsContainer />
-    <component
-      v-if="showOverlay"
-      :ref="currentPromptName"
-      :is="currentPromptName"
-      v-bind="currentPrompt.props"
-    >
-    </component>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
-  </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { ModalsContainer, useModal } from "vue-final-modal";
+import { storeToRefs } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
+
+import BaseModal from "./BaseModal.vue";
 import Help from "./Help.vue";
 import Info from "./Info.vue";
 import Delete from "./Delete.vue";
-import Rename from "./Rename.vue";
+import DeleteUser from "./DeleteUser.vue";
 import Download from "./Download.vue";
-import Move from "./Move.vue";
+import Rename from "./Rename.vue";
 import Archive from "./Archive.vue";
 import Unarchive from "./Unarchive.vue";
 import Permissions from "./Permissions.vue";
+import Move from "./Move.vue";
 import Copy from "./Copy.vue";
 import NewFile from "./NewFile.vue";
 import NewDir from "./NewDir.vue";
 import Replace from "./Replace.vue";
 import ReplaceRename from "./ReplaceRename.vue";
 import Share from "./Share.vue";
-import Upload from "./Upload.vue";
 import ShareDelete from "./ShareDelete.vue";
-import Sidebar from "../Sidebar.vue";
+import Upload from "./Upload.vue";
-import { mapGetters, mapState } from "vuex";
+import DiscardEditorChanges from "./DiscardEditorChanges.vue";
-import buttons from "@/utils/buttons";
 
-export default {
+const layoutStore = useLayoutStore();
-  name: "prompts",
+
-  components: {
+const { currentPromptName } = storeToRefs(layoutStore);
-    Info,
+
-    Delete,
+const closeModal = ref<() => Promise<string>>();
-    Rename,
+
-    Download,
+const components = new Map<string, any>([
-    Move,
+  ["info", Info],
-    Archive,
+  ["help", Help],
-    Unarchive,
+  ["delete", Delete],
-    Permissions,
+  ["rename", Rename],
-    Copy,
+  ["archive", Archive],
-    Share,
+  ["unarchive", Unarchive],
-    NewFile,
+  ["permissions", Permissions],
-    NewDir,
+  ["move", Move],
-    Help,
+  ["copy", Copy],
-    Replace,
+  ["newFile", NewFile],
-    ReplaceRename,
+  ["newDir", NewDir],
-    Upload,
+  ["download", Download],
-    ShareDelete,
+  ["replace", Replace],
-    Sidebar
+  ["replace-rename", ReplaceRename],
+  ["share", Share],
+  ["upload", Upload],
+  ["share-delete", ShareDelete],
+  ["deleteUser", DeleteUser],
+  ["discardEditorChanges", DiscardEditorChanges],
+]);
+
+watch(currentPromptName, (newValue) => {
+  if (closeModal.value) {
+    closeModal.value();
+    closeModal.value = undefined;
+  }
+
+  const modal = components.get(newValue!);
+  if (!modal) return;
+
+  const { open, close } = useModal({
+    component: BaseModal,
+    slots: {
+      default: modal,
     },
-  data: function () {
+  });
-    return {
+
-      pluginData: {
+  closeModal.value = close;
-        buttons,
+  open();
-        store: this.$store,
+});
-        router: this.$router,
+
-      },
-    };
-  },
-  created() {
 window.addEventListener("keydown", (event) => {
-      if (this.currentPrompt == null) return;
+  if (!layoutStore.currentPrompt) return;
 
-      let prompt = this.$refs.currentComponent;
+  if (event.key === "Escape") {
-
-      // Esc!
-      if (event.keyCode === 27) {
     event.stopImmediatePropagation();
-        this.$store.commit("closeHovers");
+    layoutStore.closeHovers();
-      }
-
-      // Enter
-      if (event.keyCode == 13) {
-        switch (this.currentPrompt.prompt) {
-          case "delete":
-            prompt.submit();
-            break;
-          case "copy":
-            prompt.copy(event);
-            break;
-          case "move":
-            prompt.move(event);
-            break;
-          case "replace":
-            prompt.showConfirm(event);
-            break;
-        }
   }
 });
-  },
-  computed: {
-    ...mapState(["plugins"]),
-    ...mapGetters(["currentPrompt", "currentPromptName"]),
-    showOverlay: function () {
-      return (
-        this.currentPrompt !== null &&
-        this.currentPrompt.prompt !== "search" &&
-        this.currentPrompt.prompt !== "more"
-      );
-    },
-  },
-  methods: {
-    resetPrompts() {
-      this.$store.commit("closeHovers");
-    },
-  },
-};
 </script>

frontend/src/components/prompts/Rename.vue

@@ -10,8 +10,8 @@
         >:
       </p>
       <input
+        id="focus-prompt"
         class="input input--block"
-        v-focus
         type="text"
         @keyup.enter="submit"
         v-model.trim="name"
@@ -21,7 +21,7 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
       >
@@ -41,7 +41,9 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 import url from "@/utils/url";
 import { files as api } from "@/api";
 
@@ -55,13 +57,20 @@ export default {
   created() {
     this.name = this.oldName();
   },
+  inject: ["$showError"],
   computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
+    ...mapState(useFileStore, [
-    ...mapGetters(["isListing"]),
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     cancel: function () {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
     oldName: function () {
       if (!this.isListing) {
@@ -88,6 +97,7 @@ export default {
       newLink =
         url.removeLastDir(oldLink) + "/" + encodeURIComponent(this.name);
 
+      window.sessionStorage.setItem("modified", "true");
       try {
         await api.move([{ from: oldLink, to: newLink }]);
         if (!this.isListing) {
@@ -95,12 +105,12 @@ export default {
           return;
         }
 
-        this.$store.commit("setReload", true);
+        this.reload = true;
       } catch (e) {
         this.$showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
   },
 };

frontend/src/components/prompts/Replace.vue

@@ -11,9 +11,10 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
+        tabindex="3"
       >
         {{ $t("buttons.cancel") }}
       </button>
@@ -22,14 +23,17 @@
         @click="currentPrompt.action"
         :aria-label="$t('buttons.continue')"
         :title="$t('buttons.continue')"
+        tabindex="2"
       >
         {{ $t("buttons.continue") }}
       </button>
       <button
+        id="focus-prompt"
         class="button button--flat button--red"
         @click="currentPrompt.confirm"
         :aria-label="$t('buttons.replace')"
         :title="$t('buttons.replace')"
+        tabindex="1"
       >
         {{ $t("buttons.replace") }}
       </button>
@@ -38,10 +42,16 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "replace",
-  computed: mapGetters(["currentPrompt"]),
+  computed: {
+    ...mapState(useLayoutStore, ["currentPrompt"]),
+  },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
 };
 </script>

frontend/src/components/prompts/ReplaceRename.vue

@@ -11,9 +11,10 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
+        tabindex="3"
       >
         {{ $t("buttons.cancel") }}
       </button>
@@ -22,14 +23,17 @@
         @click="(event) => currentPrompt.confirm(event, 'rename')"
         :aria-label="$t('buttons.rename')"
         :title="$t('buttons.rename')"
+        tabindex="2"
       >
         {{ $t("buttons.rename") }}
       </button>
       <button
+        id="focus-prompt"
         class="button button--flat button--red"
         @click="(event) => currentPrompt.confirm(event, 'overwrite')"
         :aria-label="$t('buttons.replace')"
         :title="$t('buttons.replace')"
+        tabindex="1"
       >
         {{ $t("buttons.replace") }}
       </button>
@@ -38,10 +42,16 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "replace-rename",
-  computed: mapGetters(["currentPrompt"]),
+  computed: {
+    ...mapState(useLayoutStore, ["currentPrompt"]),
+  },
+  methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+  },
 };
 </script>