chore(release): 2.29.0

Co-authored-by: Piotr Markiewicz <piotr.markiewicz@vaimo.com>

.github/workflows/main.yaml

@@ -24,21 +24,11 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-go@v5
         with:
-          go-version: 1.21.0
+          go-version: 1.22.2
       - run: make lint-backend
-  lint-commits:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v4
-        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"
 
@@ -57,7 +47,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-go@v5
         with:
-          go-version: 1.21.0
+          go-version: 1.22.2
       - run: make test-backend
   test:
     runs-on: ubuntu-latest
@@ -76,7 +66,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-go@v5
         with:
-          go-version: 1.21.0
+          go-version: 1.22.2
       - uses: actions/setup-node@v4
         with:
           node-version: '18'

.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

@@ -30,5 +30,14 @@ yarn-error.log*
 bin/
 build/
 
+# 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
+    # don't include the "operation" and "assign"
+    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-specific: false # don't require nolint directives to be specific about which linter is being skipped
+    require-explanation: false # require an explanation for nolint directives
+    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,19 +83,21 @@ linters:
     - misspell
     - nakedret
     - nolintlint
+    - prealloc
+    - revive
     - rowserrcheck
     - staticcheck
-    - structcheck
     - stylecheck
+    - testifylint
     - typecheck
     - unconvert
     - unparam
     - unused
-    - varcheck
     - whitespace
-    - prealloc
 
 issues:
+  exclude-dirs:
+    - frontend/
   exclude-rules:
     - path: cmd/.*.go
       linters:
@@ -108,13 +118,4 @@ issues:
         - gomnd
 
 run:
-  go: '1.18'
-  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
+  timeout: 5m

CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.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)
 
 

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
-	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
+	Args:  cobra.MinimumNArgs(2),
+	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

@@ -140,7 +140,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)

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)

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)

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

@@ -110,7 +110,7 @@ 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
 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 {
@@ -416,7 +416,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/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 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 = 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
@@ -68,7 +76,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
 	}
@@ -95,7 +103,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 {
@@ -158,7 +166,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 {
@@ -184,7 +192,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)
@@ -209,8 +217,6 @@ func (i *FileInfo) RealPath() string {
 	return i.Path
 }
 
-// TODO: use constants
-//
 //nolint:goconst
 func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	if IsNamedPipe(i.Mode) {
@@ -277,8 +283,8 @@ func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	return nil
 }
 
-func calculateImageResolution(fs afero.Fs, filePath string) (*ImageResolution, error) {
-	file, err := fs.Open(filePath)
+func calculateImageResolution(fSys afero.Fs, filePath string) (*ImageResolution, error) {
+	file, err := fSys.Open(filePath)
 	if err != nil {
 		return nil, err
 	}
@@ -310,7 +316,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
@@ -328,7 +334,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 {
@@ -343,12 +348,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") {
-			i.Subtitles = append(i.Subtitles, path.Join(parentDir, f.Name()))
+		// load all supported subtitles from subs directories
+		// 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":

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": "warn"
+    "vue/no-mutating-props": [
+      "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,71 @@
 {
   "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": "vite build",
-    "watch": "vite build --watch",
+    "build": "npm run typecheck && vite build",
     "clean": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitkeep' -exec rm -r {} +",
-    "lint": "eslint --ext .vue,.js src/",
-    "lint:fix": "eslint --ext .vue,.js --fix src/",
-    "format": "prettier --write ."
+    "typecheck": "vue-tsc -p ./tsconfig.json --noEmit",
+    "lint": "npm run typecheck && eslint --ext .vue,.ts src/",
+    "lint:fix": "eslint --ext .vue,.ts --fix src/",
+    "format": "prettier --write .",
+    "test": "playwright test"
   },
   "dependencies": {
-    "ace-builds": "^1.23.4",
-    "clipboard": "^2.0.11",
-    "core-js": "^3.32.0",
-    "css-vars-ponyfill": "^2.4.8",
-    "filesize": "^10.0.8",
-    "js-base64": "^3.7.5",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.throttle": "^4.1.1",
-    "material-icons": "^1.13.9",
-    "moment": "^2.29.4",
+    "@chenfengyuan/vue-number-input": "^2.0.1",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/integrations": "^10.9.0",
+    "ace-builds": "^1.32.9",
+    "core-js": "^3.36.1",
+    "dayjs": "^1.11.10",
+    "filesize": "^10.1.1",
+    "js-base64": "^3.7.7",
+    "jwt-decode": "^4.0.0",
+    "lodash-es": "^4.17.21",
+    "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",
-    "tus-js-client": "^3.1.1",
+    "qrcode.vue": "^3.4.1",
+    "tus-js-client": "^4.1.0",
     "utif": "^3.1.0",
-    "vue": "^2.7.14",
-    "vue-async-computed": "^3.9.0",
-    "vue-i18n": "^8.28.2",
-    "vue-lazyload": "^1.3.5",
-    "vue-router": "^3.6.5",
-    "vue-simple-progress": "^1.1.1",
-    "vuex": "^3.6.2",
-    "vuex-router-sync": "^5.0.0",
-    "whatwg-fetch": "^3.6.17"
+    "video.js": "^8.10.0",
+    "videojs-hotkeys": "^0.2.28",
+    "videojs-mobile-ui": "^1.1.1",
+    "vue": "^3.4.21",
+    "vue-final-modal": "^4.5.4",
+    "vue-i18n": "^9.10.2",
+    "vue-lazyload": "^3.0.0",
+    "vue-router": "^4.3.0",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.46.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.16.1",
-    "jsdom": "^22.1.0",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.1",
-    "terser": "^5.19.2",
-    "vite": "^4.5.2",
-    "vite-plugin-compression2": "^0.10.3",
-    "vite-plugin-rewrite-all": "^1.0.1"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie < 11"
-  ]
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@playwright/test": "^1.42.1",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.12.2",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@vitejs/plugin-legacy": "^5.3.2",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.24.0",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "terser": "^5.30.0",
+    "vite": "^5.2.7",
+    "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,8 +16,8 @@
       [{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]
     </title>
 
-    <meta name="robots" content="noindex,nofollow">
-    
+    <meta name="robots" content="noindex,nofollow" />
+
     <link
       rel="icon"
       type="image/png"
@@ -181,14 +181,9 @@
       </div>
     </div>
 
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
 
-    [{[ if .Theme -]}]
-    <link
-      rel="stylesheet"
-      href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css"
-    />
-    [{[ end ]}] [{[ if .CSS -]}]
+    [{[ if .CSS -]}]
     <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
     [{[ end ]}]
   </body>

frontend/public/themes/dark.css

@@ -1,217 +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, .1);
-}
-.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, .1);
-}
-
-#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);
-}
-
-.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);
-}

frontend/src/App.vue

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

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) {
-  url = removePrefix(url);
-  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${store.state.jwt}`;
+export default function command(
+  url: string,
+  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) {
+export async function remove(url: string) {
   return resourceAction(url, "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) {
-    url += `auth=${store.state.jwt}&`;
+  const authStore = useAuthStore();
+  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) {
-  let promises = [];
+function moveCopy(
+  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,20 +170,20 @@ 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 function getDownloadURL(file, inline) {
+export function getDownloadURL(file: ResourceItem, inline: any) {
   const params = {
     ...(inline && { inline: "true" }),
   };
@@ -171,7 +191,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),
@@ -180,20 +200,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 = [];
-  for (const sub of file.subtitles) {
-    subtitles.push(createURL("api/raw" + sub, params));
-  }
-
-  return subtitles;
+  return file.subtitles?.map((d) => createURL("api/subtitle" + d, params));
 }
 
-export async function usage(url) {
+export async function usage(url: string) {
   url = removePrefix(url);
 
   const res = await fetchURL(`/api/usage${url}`, {});

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/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,
-  content = "",
+  filePath: string,
+  content: ApiContent = "",
   overwrite = false,
-  onupload
+  onupload: any
 ) {
   if (!tusSettings) {
     // Shouldn't happen as we check for tus support before calling this function
@@ -25,29 +26,35 @@ 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) => {
-    let upload = new tus.Upload(content, {
+  const authStore = useAuthStore();
+
+  // 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) {
@@ -79,14 +86,14 @@ export async function upload(
       lastProgressTimestamp: null,
       sumOfRecentSpeeds: 0,
       hasStarted: false,
-      interval: null,
+      interval: undefined,
     };
     upload.start();
   });
 }
 
-async function createUpload(resourcePath) {
-  let headResp = await fetchURL(resourcePath, {
+async function createUpload(resourcePath: string) {
+  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) {
-  let fileData = CURRENT_UPLOAD_LIST[filePath];
+function calcProgress(filePath: string) {
+  const uploadStore = useUploadStore();
+  const fileData = CURRENT_UPLOAD_LIST[filePath];
 
-  let elapsedTime = (Date.now() - fileData.lastProgressTimestamp) / 1000;
-  let bytesSinceLastUpdate =
+  const elapsedTime =
+    (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);
-  store.commit("setETA", eta);
+  uploadStore.setUploadSpeed(speed);
+  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) {
-  return fetchJSON(`/api/users/${id}`, {});
+export async function get(id: number) {
+  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,7 +36,7 @@ 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",
   });

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')"
-      :title="$t('files.home')"
+      :aria-label="t('files.home')"
+      :title="t('files.home')"
     >
       <i class="material-icons">home</i>
     </component>
@@ -18,58 +18,66 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "breadcrumbs",
-  props: ["base", "noLink"],
-  computed: {
-    items() {
-      const relativePath = this.$route.path.replace(this.base, "");
-      let parts = relativePath.split("/");
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 
-      if (parts[0] === "") {
-        parts.shift();
-      }
+const { t } = useI18n();
 
-      if (parts[parts.length - 1] === "") {
-        parts.pop();
-      }
+const route = useRoute();
 
-      let breadcrumbs = [];
+const props = defineProps<{
+  base: string;
+  noLink?: boolean;
+}>();
 
-      for (let i = 0; i < parts.length; i++) {
-        if (i === 0) {
-          breadcrumbs.push({
-            name: decodeURIComponent(parts[i]),
-            url: this.base + "/" + parts[i] + "/",
-          });
-        } else {
-          breadcrumbs.push({
-            name: decodeURIComponent(parts[i]),
-            url: breadcrumbs[i - 1].url + parts[i] + "/",
-          });
-        }
-      }
+const items = computed(() => {
+  const relativePath = route.path.replace(props.base, "");
+  let parts = relativePath.split("/");
 
-      if (breadcrumbs.length > 3) {
-        while (breadcrumbs.length !== 4) {
-          breadcrumbs.shift();
-        }
+  if (parts[0] === "") {
+    parts.shift();
+  }
 
-        breadcrumbs[0].name = "...";
-      }
+  if (parts[parts.length - 1] === "") {
+    parts.pop();
+  }
 
-      return breadcrumbs;
-    },
-    element() {
-      if (this.noLink !== undefined) {
-        return "span";
-      }
+  let breadcrumbs: BreadCrumb[] = [];
 
-      return "router-link";
-    },
-  },
-};
+  for (let i = 0; i < parts.length; i++) {
+    if (i === 0) {
+      breadcrumbs.push({
+        name: decodeURIComponent(parts[i]),
+        url: props.base + "/" + parts[i] + "/",
+      });
+    } else {
+      breadcrumbs.push({
+        name: decodeURIComponent(parts[i]),
+        url: breadcrumbs[i - 1].url + parts[i] + "/",
+      });
+    }
+  }
+
+  if (breadcrumbs.length > 3) {
+    while (breadcrumbs.length !== 4) {
+      breadcrumbs.shift();
+    }
+
+    breadcrumbs[0].name = "...";
+  }
+
+  return breadcrumbs;
+});
+
+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/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>
-import { mapState, mapGetters, mapMutations } from "vuex";
+<script setup lang="ts">
+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 {
-  name: "search",
-  data: function () {
-    return {
-      value: "",
-      active: false,
-      ongoing: false,
-      results: [],
-      reload: false,
-      resultsCount: 50,
-      scrollable: null,
-    };
-  },
-  watch: {
-    currentPrompt(val, old) {
-      this.active = val?.prompt === "search";
+const layoutStore = useLayoutStore();
+const fileStore = useFileStore();
 
-      if (old?.prompt === "search" && !this.active) {
-        if (this.reload) {
-          this.setReload(true);
-        }
+const { currentPromptName } = storeToRefs(layoutStore);
 
-        document.body.style.overflow = "auto";
-        this.reset();
-        this.value = "";
-        this.active = false;
-        this.$refs.input.blur();
-      } else if (this.active) {
-        this.reload = false;
-        this.$refs.input.focus();
-        document.body.style.overflow = "hidden";
-      }
-    },
-    value() {
-      if (this.results.length) {
-        this.reset();
-      }
-    },
-  },
-  computed: {
-    ...mapState(["user"]),
-    ...mapGetters(["isListing", "currentPrompt"]),
-    boxes() {
-      return boxes;
-    },
-    isEmpty() {
-      return this.results.length === 0;
-    },
-    text() {
-      if (this.ongoing) {
-        return "";
-      }
+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);
 
-      return this.value === ""
-        ? this.$t("search.typeToSearch")
-        : this.$t("search.pressToSearch");
-    },
-    filteredResults() {
-      return this.results.slice(0, this.resultsCount);
-    },
-  },
-  mounted() {
-    this.$refs.result.addEventListener("scroll", (event) => {
-      if (
-        event.target.offsetHeight + event.target.scrollTop >=
-        event.target.scrollHeight - 100
-      ) {
-        this.resultsCount += 50;
-      }
-    });
-  },
-  methods: {
-    ...mapMutations(["showHover", "closeHovers", "setReload"]),
-    open() {
-      this.showHover("search");
-    },
-    close(event) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.closeHovers();
-    },
-    keyup(event) {
-      if (event.keyCode === 27) {
-        this.close(event);
-        return;
-      }
+const $showError = inject<IToastError>("$showError")!;
 
-      this.results.length = 0;
-    },
-    init(string) {
-      this.value = `${string} `;
-      this.$refs.input.focus();
-    },
-    reset() {
-      this.ongoing = false;
-      this.resultsCount = 50;
-      this.results = [];
-    },
-    async submit(event) {
-      event.preventDefault();
+const input = ref<HTMLInputElement | null>(null);
+const result = ref<HTMLElement | null>(null);
 
-      if (this.value === "") {
-        return;
-      }
+const { t } = useI18n();
 
-      let path = this.$route.path;
-      if (!this.isListing) {
-        path = url.removeLastDir(path) + "/";
-      }
+const route = useRoute();
 
-      this.ongoing = true;
+watch(currentPromptName, (newVal, oldVal) => {
+  active.value = newVal === "search";
 
-      try {
-        this.results = await search(path, this.value);
-      } catch (error) {
-        this.$showError(error);
-      }
+  if (oldVal === "search" && !active.value) {
+    if (reload.value) {
+      fileStore.reload = true;
+    }
 
-      this.ongoing = false;
-    },
-  },
+    document.body.style.overflow = "auto";
+    reset();
+    prompt.value = "";
+    active.value = false;
+    input.value?.blur();
+  } else if (active.value) {
+    reload.value = false;
+    input.value?.focus();
+    document.body.style.overflow = "hidden";
+  }
+});
+
+watch(prompt, () => {
+  if (results.value.length) {
+    reset();
+  }
+});
+
+// ...mapState(useFileStore, ["isListing"]),
+// ...mapState(useLayoutStore, ["show"]),
+// ...mapWritableState(useFileStore, { sReload: "reload" }),
+
+const isEmpty = computed(() => {
+  return results.value.length === 0;
+});
+const text = computed(() => {
+  if (ongoing.value) {
+    return "";
+  }
+
+  return prompt.value === ""
+    ? t("search.typeToSearch")
+    : t("search.pressToSearch");
+});
+const filteredResults = computed(() => {
+  return results.value.slice(0, resultsCount.value);
+});
+
+onMounted(() => {
+  if (result.value === null) {
+    return;
+  }
+  result.value.addEventListener("scroll", (event: Event) => {
+    if (
+      (event.target as HTMLElement).offsetHeight +
+        (event.target as HTMLElement).scrollTop >=
+      (event.target as HTMLElement).scrollHeight - 100
+    ) {
+      resultsCount.value += 50;
+    }
+  });
+});
+
+const open = () => {
+  !active.value && layoutStore.showHover("search");
+};
+
+const close = (event: Event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  layoutStore.closeHovers();
+};
+
+const keyup = (event: KeyboardEvent) => {
+  if (event.key === "Escape") {
+    close(event);
+    return;
+  }
+  results.value.length = 0;
+};
+
+const init = (string: string) => {
+  prompt.value = `${string} `;
+  input.value !== null ? input.value.focus() : "";
+};
+
+const reset = () => {
+  ongoing.value = false;
+  resultsCount.value = 50;
+  results.value = [];
+};
+
+const submit = async (event: Event) => {
+  event.preventDefault();
+
+  if (prompt.value === "") {
+    return;
+  }
+
+  let path = route.path;
+  if (!fileStore.isListing) {
+    path = url.removeLastDir(path) + "/";
+  }
+
+  ongoing.value = true;
+
+  try {
+    results.value = await search(path, prompt.value);
+  } catch (error: any) {
+    $showError(error);
+  }
+
+  ongoing.value = false;
 };
 </script>

frontend/src/components/Shell.vue

@@ -29,9 +29,9 @@
           tabindex="0"
           ref="input"
           class="shell__text"
-          contenteditable="true"
-          @keydown.prevent.38="historyUp"
-          @keydown.prevent.40="historyDown"
+          :contenteditable="true"
+          @keydown.prevent.arrow-up="historyUp"
+          @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"]),
-    ...mapGetters(["isFiles", "isLogged"]),
+    ...mapState(useLayoutStore, ["showShell"]),
+    ...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,6 @@
 <template>
   <nav :class="{ active }">
-    <template v-if="isLogged">
+    <template v-if="isLoggedIn">
       <button
         class="action"
         @click="toRoot"
@@ -13,7 +13,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 +23,7 @@
         </button>
 
         <button
-          @click="$store.commit('showHover', 'newFile')"
+          @click="showHover('newFile')"
           class="action"
           :aria-label="$t('sidebar.newFile')"
           :title="$t('sidebar.newFile')"
@@ -82,9 +82,7 @@
 
     <div
       class="credits"
-      v-if="
-        $router.currentRoute.path.includes('/files/') && !disableUsedPercentage
-      "
+      v-if="isFiles && !disableUsedPercentage"
       style="width: 90%; margin: 2em 2.5em 3em 2.5em"
     >
       <progress-bar :val="usage.usedPercentage" size="small"></progress-bar>
@@ -112,7 +110,12 @@
 </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 {
   version,
@@ -123,19 +126,27 @@ import {
   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: {
     ProgressBar,
   },
+  inject: ["$showError"],
   computed: {
-    ...mapState(["user"]),
-    ...mapGetters(["isLogged", "currentPrompt"]),
+    ...mapState(useAuthStore, ["user", "isLoggedIn"]),
+    ...mapState(useFileStore, ["isFiles", "reload"]),
+    ...mapState(useLayoutStore, ["currentPromptName"]),
     active() {
-      return this.currentPrompt?.prompt === "sidebar";
+      return this.currentPromptName === "sidebar";
     },
     signup: () => signup,
     version: () => version,
@@ -143,47 +154,45 @@ export default {
     disableUsedPercentage: () => disableUsedPercentage,
     canLogout: () => !noAuth && loginPage,
   },
-  asyncComputed: {
-    usage: {
-      async get() {
-        let path = this.$route.path.endsWith("/")
-          ? this.$route.path
-          : this.$route.path + "/";
-        let usageStats = { used: 0, total: 0, usedPercentage: 0 };
-        if (this.disableUsedPercentage) {
-          return 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 usageStats;
-      },
-      default: { used: "0 B", total: "0 B", usedPercentage: 0 },
-      shouldUpdate() {
-        return this.$router.currentRoute.path.includes("/files/");
-      },
-    },
-  },
   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.$store.commit("closeHovers");
+      this.$router.push({ path: "/files" });
+      this.closeHovers();
     },
     toSettings() {
-      this.$router.push({ path: "/settings" }, () => {});
-      this.$store.commit("closeHovers");
+      this.$router.push({ path: "/settings" });
+      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/ExtendedImage.vue

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

frontend/src/components/files/ListingItem.vue

@@ -15,7 +15,7 @@
   >
     <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>
@@ -34,221 +34,240 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useAuthStore } from "@/stores/auth";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { enableThumbs } from "@/utils/constants";
-import { mapMutations, mapGetters, mapState } from "vuex";
 import { filesize } from "@/utils";
-import moment from "moment/min/moment-with-locales";
+import dayjs from "dayjs";
 import { files as api } from "@/api";
 import * as upload from "@/utils/upload";
+import { computed, inject, ref } from "vue";
+import { useRouter } from "vue-router";
 
-export default {
-  name: "item",
-  data: function () {
-    return {
-      touches: 0,
-    };
-  },
-  props: [
-    "name",
-    "isDir",
-    "url",
-    "type",
-    "size",
-    "modified",
-    "index",
-    "readOnly",
-    "path",
-  ],
-  computed: {
-    ...mapState(["user", "selected", "req", "jwt"]),
-    ...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;
+const touches = ref<number>(0);
 
-      for (let i of this.selected) {
-        if (this.req.items[i].url === this.url) {
-          return false;
-        }
+const $showError = inject<IToastError>("$showError")!;
+const router = useRouter();
+
+const props = defineProps<{
+  name: string;
+  isDir: boolean;
+  url: string;
+  type: string;
+  size: number;
+  modified: string;
+  index: number;
+  readOnly?: boolean;
+  path?: string;
+}>();
+
+const authStore = useAuthStore();
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
+
+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
+);
+
+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;
+});
+
+const thumbnailUrl = computed(() => {
+  const file = {
+    path: props.path,
+    modified: props.modified,
+  };
+
+  return api.getPreviewURL(file as Resource, "thumb");
+});
+
+const isThumbsEnabled = computed(() => {
+  return enableThumbs;
+});
+
+const humanSize = () => {
+  return props.type == "invalid_link" ? "invalid link" : filesize(props.size);
+};
+
+const humanTime = () => {
+  if (!props.readOnly && authStore.user?.dateFormat) {
+    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 (!isSelected.value) {
+    fileStore.selected = [];
+    fileStore.selected.push(props.index);
+  }
+};
+
+const dragOver = (event: Event) => {
+  if (!canDrop.value) return;
+
+  event.preventDefault();
+  let el = event.target as HTMLElement | null;
+  if (el !== null) {
+    for (let i = 0; i < 5; i++) {
+      if (!el?.classList.contains("item")) {
+        el = el?.parentElement ?? null;
       }
+    }
 
-      return true;
-    },
-    thumbnailUrl() {
-      const file = {
-        path: this.path,
-        modified: this.modified,
-      };
+    if (el !== null) el.style.opacity = "1";
+  }
+};
 
-      return api.getPreviewURL(file, "thumb");
-    },
-    isThumbsEnabled() {
-      return enableThumbs;
-    },
-  },
-  methods: {
-    ...mapMutations(["addSelected", "removeSelected", "resetSelected"]),
-    humanSize: function () {
-      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 () {
-      if (this.selectedCount === 0) {
-        this.addSelected(this.index);
-        return;
+const drop = async (event: Event) => {
+  if (!canDrop.value) return;
+  event.preventDefault();
+
+  if (fileStore.selectedCount === 0) return;
+
+  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: any[] = [];
+
+  for (let i of fileStore.selected) {
+    if (fileStore.req) {
+      items.push({
+        from: fileStore.req?.items[i].url,
+        to: props.url + encodeURIComponent(fileStore.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: boolean, rename: boolean) => {
+    api
+      .move(items, overwrite, rename)
+      .then(() => {
+        fileStore.reload = true;
+      })
+      .catch($showError);
+  };
+
+  let conflict = upload.checkConflict(items, baseItems);
+
+  let overwrite = false;
+  let rename = false;
+
+  if (conflict) {
+    layoutStore.showHover({
+      prompt: "replace-rename",
+      confirm: (event: Event, option: any) => {
+        overwrite = option == "overwrite";
+        rename = option == "rename";
+
+        event.preventDefault();
+        layoutStore.closeHovers();
+        action(overwrite, rename);
+      },
+    });
+
+    return;
+  }
+
+  action(overwrite, rename);
+};
+
+const itemClick = (event: Event | KeyboardEvent) => {
+  if (
+    !((event as KeyboardEvent).ctrlKey || (event as KeyboardEvent).metaKey) &&
+    singleClick.value &&
+    !fileStore.multiple
+  )
+    open();
+  else click(event);
+};
+
+const click = (event: Event | KeyboardEvent) => {
+  if (!singleClick.value && fileStore.selectedCount !== 0)
+    event.preventDefault();
+
+  setTimeout(() => {
+    touches.value = 0;
+  }, 300);
+
+  touches.value++;
+  if (touches.value > 1) {
+    open();
+  }
+
+  if (fileStore.selected.indexOf(props.index) !== -1) {
+    fileStore.removeSelected(props.index);
+    return;
+  }
+
+  if ((event as KeyboardEvent).shiftKey && fileStore.selected.length > 0) {
+    let fi = 0;
+    let la = 0;
+
+    if (props.index > fileStore.selected[0]) {
+      fi = fileStore.selected[0] + 1;
+      la = props.index;
+    } else {
+      fi = props.index;
+      la = fileStore.selected[0] - 1;
+    }
+
+    for (; fi <= la; fi++) {
+      if (fileStore.selected.indexOf(fi) == -1) {
+        fileStore.selected.push(fi);
       }
+    }
 
-      if (!this.isSelected) {
-        this.resetSelected();
-        this.addSelected(this.index);
-      }
-    },
-    dragOver: function (event) {
-      if (!this.canDrop) return;
+    return;
+  }
 
-      event.preventDefault();
-      let el = event.target;
+  if (
+    !singleClick.value &&
+    !(event as KeyboardEvent).ctrlKey &&
+    !(event as KeyboardEvent).metaKey &&
+    !fileStore.multiple
+  ) {
+    fileStore.selected = [];
+  }
+  fileStore.selected.push(props.index);
+};
 
-      for (let i = 0; i < 5; i++) {
-        if (!el.classList.contains("item")) {
-          el = el.parentElement;
-        }
-      }
-
-      el.style.opacity = 1;
-    },
-    drop: async function (event) {
-      if (!this.canDrop) return;
-      event.preventDefault();
-
-      if (this.selectedCount === 0) return;
-
-      let el = event.target;
-      for (let i = 0; i < 5; i++) {
-        if (el !== null && !el.classList.contains("item")) {
-          el = el.parentElement;
-        }
-      }
-
-      let items = [];
-
-      for (let i of this.selected) {
-        items.push({
-          from: this.req.items[i].url,
-          to: this.url + encodeURIComponent(this.req.items[i].name),
-          name: this.req.items[i].name,
-        });
-      }
-
-      // Get url from ListingItem instance
-      let path = el.__vue__.url;
-      let baseItems = (await api.fetch(path)).items;
-
-      let action = (overwrite, rename) => {
-        api
-          .move(items, overwrite, rename)
-          .then(() => {
-            this.$store.commit("setReload", true);
-          })
-          .catch(this.$showError);
-      };
-
-      let conflict = upload.checkConflict(items, baseItems);
-
-      let overwrite = false;
-      let rename = false;
-
-      if (conflict) {
-        this.$store.commit("showHover", {
-          prompt: "replace-rename",
-          confirm: (event, option) => {
-            overwrite = option == "overwrite";
-            rename = option == "rename";
-
-            event.preventDefault();
-            this.$store.commit("closeHovers");
-            action(overwrite, rename);
-          },
-        });
-
-        return;
-      }
-
-      action(overwrite, rename);
-    },
-    itemClick: function (event) {
-      if (
-        !(event.ctrlKey || event.metaKey) &&
-        this.singleClick &&
-        !this.$store.state.multiple
-      )
-        this.open();
-      else this.click(event);
-    },
-    click: function (event) {
-      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();
-
-      setTimeout(() => {
-        this.touches = 0;
-      }, 300);
-
-      this.touches++;
-      if (this.touches > 1) {
-        this.open();
-      }
-
-      if (this.$store.state.selected.indexOf(this.index) !== -1) {
-        this.removeSelected(this.index);
-        return;
-      }
-
-      if (event.shiftKey && this.selected.length > 0) {
-        let fi = 0;
-        let la = 0;
-
-        if (this.index > this.selected[0]) {
-          fi = this.selected[0] + 1;
-          la = this.index;
-        } else {
-          fi = this.index;
-          la = this.selected[0] - 1;
-        }
-
-        for (; fi <= la; fi++) {
-          if (this.$store.state.selected.indexOf(fi) == -1) {
-            this.addSelected(fi);
-          }
-        }
-
-        return;
-      }
-
-      if (
-        !this.singleClick &&
-        !event.ctrlKey &&
-        !event.metaKey &&
-        !this.$store.state.multiple
-      )
-        this.resetSelected();
-      this.addSelected(this.index);
-    },
-    open: function () {
-      this.$router.push({ path: this.url });
-    },
-  },
+const open = () => {
+  router.push({ path: props.url });
 };
 </script>

frontend/src/components/files/VideoPlayer.vue

@@ -0,0 +1,104 @@
+<template>
+  <video ref="videoPlayer" class="video-max video-js" controls>
+    <source :src="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 } 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: {},
+  }
+);
+
+onMounted(() => {
+  player.value = videojs(
+    videoPlayer.value!,
+    {
+      html5: {
+        // needed for customizable subtitles
+        // TODO: add to user settings
+        nativeTextTracks: false,
+      },
+      plugins: {
+        hotkeys: {
+          volumeStep: 0.1,
+          seekStep: 10,
+          enableModifiersForNumbers: false,
+        },
+      },
+      ...props.options,
+    },
+    // onReady callback
+    async () => {
+      // player.value!.log("onPlayerReady", this);
+    }
+  );
+  // TODO: need to test on mobile
+  // @ts-ignore
+  player.value!.mobileUi();
+});
+
+onBeforeUnmount(() => {
+  if (player.value) {
+    player.value.dispose();
+    player.value = null;
+  }
+});
+
+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;
+};
+</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>
-export default {
-  name: "action",
-  props: ["icon", "label", "counter", "show"],
-  methods: {
-    action: function () {
-      if (this.show) {
-        this.$store.commit("showHover", this.show);
-      }
+<script setup lang="ts">
+import { useLayoutStore } from "@/stores/layout";
 
-      this.$emit("action");
-    },
-  },
+const props = defineProps<{
+  icon?: string;
+  label?: string;
+  counter?: number;
+  show?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "action"): any;
+}>();
+
+const layoutStore = useLayoutStore();
+
+const action = () => {
+  if (props.show) {
+    layoutStore.showHover(props.show);
+  }
+
+  emit("action");
 };
 </script>
-
-<style></style>

frontend/src/components/header/HeaderBar.vue

@@ -1,62 +1,59 @@
 <template>
   <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
-    <action
-      v-if="showMenu !== undefined"
+    <img v-if="showLogo" :src="logoURL" />
+    <Action
+      v-if="showMenu"
       class="menu-button"
       icon="menu"
-      :label="$t('buttons.toggleSidebar')"
-      @action="openSidebar()"
+      :label="t('buttons.toggleSidebar')"
+      @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
-      v-if="this.$slots.actions"
+    <Action
+      v-if="ifActionsSlot"
       id="more"
       icon="more_vert"
-      :label="$t('buttons.more')"
-      @action="$store.commit('showHover', 'more')"
+      :label="t('buttons.more')"
+      @action="layoutStore.showHover('more')"
     />
 
     <div
       class="overlay"
-      v-show="this.currentPromptName == 'more'"
-      @click="$store.commit('closeHovers')"
+      v-show="layoutStore.currentPromptName == 'more'"
+      @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 {
-  name: "header-bar",
-  props: ["showLogo", "showMenu"],
-  components: {
-    Action,
-  },
-  data: function () {
-    return {
-      logoURL,
-    };
-  },
-  methods: {
-    openSidebar() {
-      this.$store.commit("showHover", "sidebar");
-    },
-  },
-  computed: {
-    ...mapGetters(["currentPromptName"]),
-  },
-};
+defineProps<{
+  showLogo?: boolean;
+  showMenu?: boolean;
+}>();
+
+const layoutStore = useLayoutStore();
+const slots = useSlots();
+
+const { t } = useI18n();
+
+const ifActionsSlot = computed(() => (slots.actions ? true : false));
 </script>
 
 <style></style>

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,8 +6,11 @@
 
     <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
@@ -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,10 @@
 </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 FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
@@ -63,8 +72,14 @@ 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"]),
     copy: async function (event) {
       event.preventDefault();
       let items = [];
@@ -87,7 +102,7 @@ export default {
             buttons.success("copy");
 
             if (this.$route.path === this.dest) {
-              this.$store.commit("setReload", true);
+              this.reload = true;
 
               return;
             }
@@ -101,7 +116,7 @@ export default {
       };
 
       if (this.$route.path === this.dest) {
-        this.$store.commit("closeHovers");
+        this.closeHovers();
         action(false, true);
 
         return;
@@ -114,14 +129,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/Delete.vue

@@ -10,18 +10,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>
@@ -30,18 +33,27 @@
 </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 { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "delete",
+  inject: ["$showError"],
   computed: {
-    ...mapGetters(["isListing", "selectedCount", "currentPrompt"]),
-    ...mapState(["req", "selected"]),
+    ...mapState(useFileStore, [
+      "isListing",
+      "selectedCount",
+      "req",
+      "selected",
+      "currentPrompt",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
   },
   methods: {
-    ...mapMutations(["closeHovers"]),
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: async function () {
       buttons.loading("delete");
 
@@ -69,11 +81,11 @@ export default {
 
         await Promise.all(promises);
         buttons.success("delete");
-        this.$store.commit("setReload", true);
+        this.reload = true;
       } 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

@@ -7,18 +7,21 @@
     </div>
     <div class="card-action">
       <button
-        @click="$store.commit('closeHovers')"
         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>
@@ -27,15 +30,18 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+import { mapActions } from "pinia";
 import url from "@/utils/url";
+import { useLayoutStore } from "@/stores/layout";
+import { useFileStore } from "@/stores/file";
 
 export default {
   name: "discardEditorChanges",
   methods: {
-    ...mapMutations(["closeHovers"]),
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+    ...mapActions(useFileStore, ["updateRequest"]),
     submit: async function () {
-      this.$store.commit("updateRequest", {});
+      this.updateRequest(null);
 
       let uri = url.removeLastDir(this.$route.path) + "/";
       this.$router.push({ path: uri });

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)"
-        v-focus
+        @click="layoutStore.currentPrompt?.confirm(format)"
       >
         {{ ext }}
       </button>
@@ -20,26 +20,21 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useLayoutStore } from "@/stores/layout";
 
-export default {
-  name: "download",
-  data: function () {
-    return {
-      formats: {
-        zip: "zip",
-        tar: "tar",
-        targz: "tar.gz",
-        tarbz2: "tar.bz2",
-        tarxz: "tar.xz",
-        tarlz4: "tar.lz4",
-        tarsz: "tar.sz",
-      },
-    };
-  },
-  computed: {
-    ...mapGetters(["currentPrompt"]),
-  },
+const layoutStore = useLayoutStore();
+
+const { t } = useI18n();
+
+const formats = {
+  zip: "zip",
+  tar: "tar",
+  targz: "tar.gz",
+  tarbz2: "tar.bz2",
+  tarxz: "tar.xz",
+  tarlz4: "tar.lz4",
+  tarsz: "tar.sz",
 };
 </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

@@ -40,33 +40,45 @@
         <p>
           <strong>MD5: </strong
           ><code
-            ><a @click="checksum($event, 'md5')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'md5')"
+              @keypress.enter="checksum($event, 'md5')"
+              tabindex="2"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
         <p>
           <strong>SHA1: </strong
           ><code
-            ><a @click="checksum($event, 'sha1')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'sha1')"
+              @keypress.enter="checksum($event, 'sha1')"
+              tabindex="3"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
         <p>
           <strong>SHA256: </strong
           ><code
-            ><a @click="checksum($event, 'sha256')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'sha256')"
+              @keypress.enter="checksum($event, 'sha256')"
+              tabindex="4"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
         <p>
           <strong>SHA512: </strong
           ><code
-            ><a @click="checksum($event, 'sha512')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a
+              @click="checksum($event, 'sha512')"
+              @keypress.enter="checksum($event, 'sha512')"
+              tabindex="5"
+              >{{ $t("prompts.show") }}</a
+            ></code
           >
         </p>
       </template>
@@ -74,8 +86,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')"
@@ -87,16 +100,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/min/moment-with-locales";
+import dayjs from "dayjs";
 import { files as api } from "@/api";
 
 export default {
   name: "info",
+  inject: ["$showError"],
   computed: {
-    ...mapState(["req", "selected"]),
-    ...mapGetters(["selectedCount", "isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
     humanSize: function () {
       if (this.selectedCount === 0 || !this.isListing) {
         return filesize(this.req.size);
@@ -112,13 +132,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 () {
-      return new Date(Date.parse(this.req.modified)).toLocaleString();
+      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
@@ -146,6 +172,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     checksum: async function (event, algo) {
       event.preventDefault();
 
@@ -159,8 +186,7 @@ export default {
 
       try {
         const hash = await api.checksum(link, algo);
-        // eslint-disable-next-line
-        event.target.innerHTML = hash;
+        event.target.textContent = hash;
       } catch (e) {
         this.$showError(e);
       }

frontend/src/components/prompts/Move.vue

@@ -5,8 +5,11 @@
     </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
@@ -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,98 +1,104 @@
 <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')"
-        :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
+        @click="layoutStore.closeHovers"
+        :aria-label="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>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-export default {
-  name: "new-dir",
-  props: {
-    redirect: {
-      type: Boolean,
-      default: true,
-    },
-    base: {
-      type: [String, null],
-      default: null,
-    },
+const $showError = inject<IToastError>("$showError")!;
+
+const props = defineProps({
+  base: String,
+  redirect: {
+    type: Boolean,
+    default: true,
   },
-  data: function () {
-    return {
-      name: "",
-    };
-  },
-  computed: {
-    ...mapGetters(["isFiles", "isListing"]),
-  },
-  methods: {
-    submit: async function (event) {
-      event.preventDefault();
-      if (this.new === "") return;
+});
 
-      // Build the path of the new directory.
-      let uri;
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
 
-      if (this.base) uri = this.base;
-      else if (this.isFiles) uri = this.$route.path + "/";
-      else uri = "/";
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
 
-      if (!this.isListing) {
-        uri = url.removeLastDir(uri) + "/";
-      }
+const name = ref<string>("");
 
-      uri += encodeURIComponent(this.name) + "/";
-      uri = uri.replace("//", "/");
-      try {
-        await api.post(uri);
-        if (this.redirect) {
-          this.$router.push({ path: uri });
-        } else if (!this.base) {
-          const res = await api.fetch(url.removeLastDir(uri) + "/");
-          this.$store.commit("updateRequest", res);
-        }
-      } catch (e) {
-        this.$showError(e);
-      }
+const submit = async (event: Event) => {
+  event.preventDefault();
+  if (name.value === "") return;
 
-      this.$store.commit("closeHovers");
-    },
-  },
+  // Build the path of the new directory.
+  let uri: string;
+  if (props.base) uri = props.base;
+  else if (fileStore.isFiles) uri = route.path + "/";
+  else uri = "/";
+
+  if (!fileStore.isListing) {
+    uri = url.removeLastDir(uri) + "/";
+  }
+
+  uri += encodeURIComponent(name.value) + "/";
+  uri = uri.replace("//", "/");
+
+  try {
+    await api.post(uri);
+    if (props.redirect) {
+      router.push({ path: uri });
+    } else if (!props.base) {
+      const res = await api.fetch(url.removeLastDir(uri) + "/");
+      fileStore.updateRequest(res);
+    }
+  } catch (e) {
+    if (e instanceof Error) {
+      $showError(e);
+    }
+  }
+
+  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,63 +18,68 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
-        :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
+        @click="layoutStore.closeHovers"
+        :aria-label="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')"
-        :title="$t('buttons.create')"
+        :aria-label="t('buttons.create')"
+        :title="t('buttons.create')"
       >
-        {{ $t("buttons.create") }}
+        {{ t("buttons.create") }}
       </button>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+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 { files as api } from "@/api";
 import url from "@/utils/url";
 
-export default {
-  name: "new-file",
-  data: function () {
-    return {
-      name: "",
-    };
-  },
-  computed: {
-    ...mapGetters(["isFiles", "isListing"]),
-  },
-  methods: {
-    submit: async function (event) {
-      event.preventDefault();
-      if (this.new === "") return;
+const $showError = inject<IToastError>("$showError")!;
 
-      // Build the path of the new directory.
-      let uri = this.isFiles ? this.$route.path + "/" : "/";
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
 
-      if (!this.isListing) {
-        uri = url.removeLastDir(uri) + "/";
-      }
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
 
-      uri += encodeURIComponent(this.name);
-      uri = uri.replace("//", "/");
+const name = ref<string>("");
 
-      try {
-        await api.post(uri);
-        this.$router.push({ path: uri });
-      } catch (e) {
-        this.$showError(e);
-      }
+const submit = async (event: Event) => {
+  event.preventDefault();
+  if (name.value === "") return;
 
-      this.$store.commit("closeHovers");
-    },
-  },
+  // Build the path of the new directory.
+  let uri = fileStore.isFiles ? route.path + "/" : "/";
+
+  if (!fileStore.isListing) {
+    uri = url.removeLastDir(uri) + "/";
+  }
+
+  uri += encodeURIComponent(name.value);
+  uri = uri.replace("//", "/");
+
+  try {
+    await api.post(uri);
+    router.push({ path: uri });
+  } catch (e) {
+    if (e instanceof Error) {
+      $showError(e);
+    }
+  }
+
+  layoutStore.closeHovers();
 };
 </script>

frontend/src/components/prompts/Prompts.vue

@@ -1,22 +1,20 @@
 <template>
-  <div>
-    <component
-      v-if="showOverlay"
-      :ref="currentPromptName"
-      :is="currentPromptName"
-      v-bind="currentPrompt.props"
-    >
-    </component>
-    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
-  </div>
+  <ModalsContainer />
 </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 Rename from "./Rename.vue";
 import Move from "./Move.vue";
 import Copy from "./Copy.vue";
 import NewFile from "./NewFile.vue";
@@ -24,87 +22,61 @@ 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 DiscardEditorChanges from "./DiscardEditorChanges.vue";
-import { mapGetters, mapState } from "vuex";
-import buttons from "@/utils/buttons";
 
-export default {
-  name: "prompts",
-  components: {
-    Info,
-    Delete,
-    Rename,
-    Download,
-    Move,
-    Copy,
-    Share,
-    NewFile,
-    NewDir,
-    Help,
-    Replace,
-    ReplaceRename,
-    Upload,
-    ShareDelete,
-    Sidebar,
-    DiscardEditorChanges,
-  },
-  data: function () {
-    return {
-      pluginData: {
-        buttons,
-        store: this.$store,
-        router: this.$router,
-      },
-    };
-  },
-  created() {
-    window.addEventListener("keydown", (event) => {
-      if (this.currentPrompt == null) return;
+const layoutStore = useLayoutStore();
 
-      const promptName = this.currentPrompt.prompt;
-      const prompt = this.$refs[promptName];
+const { currentPromptName } = storeToRefs(layoutStore);
 
-      if (event.code === "Escape") {
-        event.stopImmediatePropagation();
-        this.$store.commit("closeHovers");
-      }
+const closeModal = ref<() => Promise<string>>();
 
-      if (event.code === "Enter") {
-        switch (promptName) {
-          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"
-      );
+const components = new Map<string, any>([
+  ["info", Info],
+  ["help", Help],
+  ["delete", Delete],
+  ["rename", Rename],
+  ["move", Move],
+  ["copy", Copy],
+  ["newFile", NewFile],
+  ["newDir", NewDir],
+  ["download", Download],
+  ["replace", Replace],
+  ["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,
     },
-  },
-  methods: {
-    resetPrompts() {
-      this.$store.commit("closeHovers");
-    },
-  },
-};
+  });
+
+  closeModal.value = close;
+  open();
+});
+
+window.addEventListener("keydown", (event) => {
+  if (!layoutStore.currentPrompt) return;
+
+  if (event.key === "Escape") {
+    event.stopImmediatePropagation();
+    layoutStore.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"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
+    ...mapWritableState(useFileStore, ["reload"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     cancel: function () {
-      this.$store.commit("closeHovers");
+      this.closeHovers();
     },
     oldName: function () {
       if (!this.isListing) {
@@ -96,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>

frontend/src/components/prompts/Share.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card floating share__promt__card" id="share">
+  <div class="card floating" id="share">
     <div class="card-title">
       <h2>{{ $t("buttons.share") }}</h2>
     </div>
@@ -25,9 +25,9 @@
             <td class="small">
               <button
                 class="action copy-clipboard"
-                :data-clipboard-text="buildLink(link)"
                 :aria-label="$t('buttons.copyToClipboard')"
                 :title="$t('buttons.copyToClipboard')"
+                @click="copyToClipboard(buildLink(link))"
               >
                 <i class="material-icons">content_paste</i>
               </button>
@@ -35,9 +35,9 @@
             <td class="small" v-if="hasDownloadLink()">
               <button
                 class="action copy-clipboard"
-                :data-clipboard-text="buildDownloadLink(link)"
                 :aria-label="$t('buttons.copyDownloadLinkToClipboard')"
                 :title="$t('buttons.copyDownloadLinkToClipboard')"
+                @click="copyToClipboard(buildDownloadLink(link))"
               >
                 <i class="material-icons">content_paste_go</i>
               </button>
@@ -59,17 +59,20 @@
       <div class="card-action">
         <button
           class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
           :aria-label="$t('buttons.close')"
           :title="$t('buttons.close')"
+          tabindex="2"
         >
           {{ $t("buttons.close") }}
         </button>
         <button
+          id="focus-prompt"
           class="button button--flat button--blue"
           @click="() => switchListing()"
           :aria-label="$t('buttons.new')"
           :title="$t('buttons.new')"
+          tabindex="1"
         >
           {{ $t("buttons.new") }}
         </button>
@@ -80,15 +83,22 @@
       <div class="card-content">
         <p>{{ $t("settings.shareDuration") }}</p>
         <div class="input-group input">
-          <input
-            v-focus
-            type="number"
-            max="2147483647"
-            min="1"
+          <vue-number-input
+            center
+            controls
+            size="small"
+            :max="2147483647"
+            :min="0"
             @keyup.enter="submit"
-            v-model.trim="time"
+            v-model="time"
+            tabindex="1"
           />
-          <select class="right" v-model="unit" :aria-label="$t('time.unit')">
+          <select
+            class="right"
+            v-model="unit"
+            :aria-label="$t('time.unit')"
+            tabindex="2"
+          >
             <option value="seconds">{{ $t("time.seconds") }}</option>
             <option value="minutes">{{ $t("time.minutes") }}</option>
             <option value="hours">{{ $t("time.hours") }}</option>
@@ -100,6 +110,7 @@
           class="input input--block"
           type="password"
           v-model.trim="password"
+          tabindex="3"
         />
       </div>
 
@@ -109,14 +120,17 @@
           @click="() => switchListing()"
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')"
+          tabindex="5"
         >
           {{ $t("buttons.cancel") }}
         </button>
         <button
+          id="focus-prompt"
           class="button button--flat button--blue"
           @click="submit"
           :aria-label="$t('buttons.share')"
           :title="$t('buttons.share')"
+          tabindex="4"
         >
           {{ $t("buttons.share") }}
         </button>
@@ -126,16 +140,18 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useFileStore } from "@/stores/file";
 import { share as api, pub as pub_api } from "@/api";
-import moment from "moment/min/moment-with-locales";
-import Clipboard from "clipboard";
+import dayjs from "dayjs";
+import { useLayoutStore } from "@/stores/layout";
+import { copy } from "@/utils/clipboard";
 
 export default {
   name: "share",
   data: function () {
     return {
-      time: "",
+      time: 0,
       unit: "hours",
       links: [],
       clip: null,
@@ -143,9 +159,14 @@ export default {
       listing: true,
     };
   },
+  inject: ["$showError", "$showSuccess"],
   computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing"]),
+    ...mapState(useFileStore, [
+      "req",
+      "selected",
+      "selectedCount",
+      "isListing",
+    ]),
     url() {
       if (!this.isListing) {
         return this.$route.path;
@@ -172,23 +193,24 @@ export default {
       this.$showError(e);
     }
   },
-  mounted() {
-    this.clip = new Clipboard(".copy-clipboard");
-    this.clip.on("success", () => {
-      this.$showSuccess(this.$t("success.linkCopied"));
-    });
-  },
-  beforeDestroy() {
-    this.clip.destroy();
-  },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
+    copyToClipboard: function (text) {
+      copy(text).then(
+        () => {
+          // clipboard successfully set
+          this.$showSuccess(this.$t("success.linkCopied"));
+        },
+        () => {
+          // clipboard write failed
+        }
+      );
+    },
     submit: async function () {
-      let isPermanent = !this.time || this.time == 0;
-
       try {
         let res = null;
 
-        if (isPermanent) {
+        if (!this.time) {
           res = await api.create(this.url, this.password);
         } else {
           res = await api.create(this.url, this.password, this.time, this.unit);
@@ -197,7 +219,7 @@ export default {
         this.links.push(res);
         this.sort();
 
-        this.time = "";
+        this.time = 0;
         this.unit = "hours";
         this.password = "";
 
@@ -220,7 +242,7 @@ export default {
       }
     },
     humanTime(time) {
-      return moment(time * 1000).fromNow();
+      return dayjs(time * 1000).fromNow();
     },
     buildLink(share) {
       return api.getShareURL(share);
@@ -242,7 +264,7 @@ export default {
     },
     switchListing() {
       if (this.links.length == 0 && !this.listing) {
-        this.$store.commit("closeHovers");
+        this.closeHovers();
       }
 
       this.listing = !this.listing;

frontend/src/components/prompts/ShareDelete.vue

@@ -5,18 +5,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>
@@ -25,14 +28,16 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
+import { useLayoutStore } from "@/stores/layout";
 
 export default {
   name: "share-delete",
   computed: {
-    ...mapGetters(["currentPrompt"]),
+    ...mapState(useLayoutStore, ["currentPrompt"]),
   },
   methods: {
+    ...mapActions(useLayoutStore, ["closeHovers"]),
     submit: function () {
       this.currentPrompt?.confirm();
     },

frontend/src/components/prompts/Upload.vue

@@ -1,38 +1,111 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t("prompts.upload") }}</h2>
+      <h2>{{ t("prompts.upload") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t("prompts.uploadMessage") }}</p>
+      <p>{{ t("prompts.uploadMessage") }}</p>
     </div>
 
     <div class="card-action full">
-      <div @click="uploadFile" class="action">
+      <div
+        @click="uploadFile"
+        @keypress.enter="uploadFile"
+        class="action"
+        id="focus-prompt"
+        tabindex="1"
+      >
         <i class="material-icons">insert_drive_file</i>
-        <div class="title">{{ $t("buttons.file") }}</div>
+        <div class="title">{{ t("buttons.file") }}</div>
       </div>
-      <div @click="uploadFolder" class="action">
+      <div
+        @click="uploadFolder"
+        @keypress.enter="uploadFolder"
+        class="action"
+        tabindex="2"
+      >
         <i class="material-icons">folder</i>
-        <div class="title">{{ $t("buttons.folder") }}</div>
+        <div class="title">{{ t("buttons.folder") }}</div>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: "upload",
-  methods: {
-    uploadFile: function () {
-      document.getElementById("upload-input").value = "";
-      document.getElementById("upload-input").click();
-    },
-    uploadFolder: function () {
-      document.getElementById("upload-folder-input").value = "";
-      document.getElementById("upload-folder-input").click();
-    },
-  },
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
+import * as upload from "@/utils/upload";
+
+const { t } = useI18n();
+const route = useRoute();
+
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
+
+// TODO: this is a copy of the same function in FileListing.vue
+const uploadInput = (event: Event) => {
+  layoutStore.closeHovers();
+
+  let files = (event.currentTarget as HTMLInputElement)?.files;
+  if (files === null) return;
+
+  let folder_upload = !!files[0].webkitRelativePath;
+
+  const uploadFiles: UploadList = [];
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    const fullPath = folder_upload ? file.webkitRelativePath : undefined;
+    uploadFiles.push({
+      file,
+      name: file.name,
+      size: file.size,
+      isDir: false,
+      fullPath,
+    });
+  }
+
+  let path = route.path.endsWith("/") ? route.path : route.path + "/";
+  let conflict = upload.checkConflict(uploadFiles, fileStore.req!.items);
+
+  if (conflict) {
+    layoutStore.showHover({
+      prompt: "replace",
+      action: (event: Event) => {
+        event.preventDefault();
+        layoutStore.closeHovers();
+        upload.handleFiles(uploadFiles, path, false);
+      },
+      confirm: (event: Event) => {
+        event.preventDefault();
+        layoutStore.closeHovers();
+        upload.handleFiles(uploadFiles, path, true);
+      },
+    });
+
+    return;
+  }
+
+  upload.handleFiles(uploadFiles, path);
+};
+
+const openUpload = (isFolder: boolean) => {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.multiple = true;
+  input.webkitdirectory = isFolder;
+  // TODO: call the function in FileListing.vue instead
+  input.onchange = uploadInput;
+  input.click();
+};
+
+const uploadFile = () => {
+  openUpload(false);
+};
+const uploadFolder = () => {
+  openUpload(true);
 };
 </script>

frontend/src/components/prompts/UploadFiles.vue

@@ -10,6 +10,12 @@
         <div class="upload-info">
           <div class="upload-speed">{{ uploadSpeed.toFixed(2) }} MB/s</div>
           <div class="upload-eta">{{ formattedETA }} remaining</div>
+          <div class="upload-percentage">
+            {{ getProgressDecimal }}% Completed
+          </div>
+          <div class="upload-fraction">
+            {{ getTotalProgressBytes }} / {{ getTotalSize }}
+          </div>
         </div>
         <button
           class="action"
@@ -53,7 +59,9 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from "vuex";
+import { mapState, mapWritableState, mapActions } from "pinia";
+import { useUploadStore } from "@/stores/upload";
+import { useFileStore } from "@/stores/file";
 import { abortAllUploads } from "@/api/tus";
 import buttons from "@/utils/buttons";
 
@@ -65,19 +73,23 @@ export default {
     };
   },
   computed: {
-    ...mapGetters([
+    ...mapState(useUploadStore, [
       "filesInUpload",
       "filesInUploadCount",
       "uploadSpeed",
-      "eta",
+      "getETA",
+      "getProgress",
+      "getProgressDecimal",
+      "getTotalProgressBytes",
+      "getTotalSize",
     ]),
-    ...mapMutations(["resetUpload"]),
+    ...mapWritableState(useFileStore, ["reload"]),
     formattedETA() {
-      if (!this.eta || this.eta === Infinity) {
+      if (!this.getETA || this.getETA === Infinity) {
         return "--:--:--";
       }
 
-      let totalSeconds = this.eta;
+      let totalSeconds = this.getETA;
       const hours = Math.floor(totalSeconds / 3600);
       totalSeconds %= 3600;
       const minutes = Math.floor(totalSeconds / 60);
@@ -89,6 +101,7 @@ export default {
     },
   },
   methods: {
+    ...mapActions(useUploadStore, ["reset"]), // Mapping reset action from upload store
     toggle: function () {
       this.open = !this.open;
     },
@@ -97,8 +110,8 @@ export default {
         abortAllUploads();
         buttons.done("upload");
         this.open = false;
-        this.$store.commit("resetUpload");
-        this.$store.commit("setReload", true);
+        this.reset(); // Resetting the upload store state
+        this.reload = true; // Trigger reload in the file store
       }
     },
   },

frontend/src/components/settings/Languages.vue

@@ -1,46 +1,51 @@
 <template>
-  <select v-on:change="change" :value="locale">
+  <select name="selectLanguage" v-on:change="change" :value="locale">
     <option v-for="(language, value) in locales" :key="value" :value="value">
-      {{ $t("languages." + language) }}
+      {{ language }}
     </option>
   </select>
 </template>
 
 <script>
+import { markRaw } from "vue";
+
 export default {
   name: "languages",
   props: ["locale"],
   data() {
-    let dataObj = {
-      locales: {
-        he: "he",
-        hu: "hu",
-        ar: "ar",
-        de: "de",
-        el: "el",
-        en: "en",
-        es: "es",
-        fr: "fr",
-        is: "is",
-        it: "it",
-        ja: "ja",
-        ko: "ko",
-        "nl-be": "nlBE",
-        pl: "pl",
-        "pt-br": "ptBR",
-        pt: "pt",
-        ro: "ro",
-        ru: "ru",
-        sk: "sk",
-        "sv-se": "svSE",
-        tr: "tr",
-        ua: "ua",
-        "zh-cn": "zhCN",
-        "zh-tw": "zhTW",
-      },
+    let dataObj = {};
+    const locales = {
+      he: "עברית",
+      hu: "Magyar",
+      ar: "العربية",
+      de: "Deutsch",
+      el: "Ελληνικά",
+      en: "English",
+      es: "Español",
+      fr: "Français",
+      is: "Icelandic",
+      it: "Italiano",
+      ja: "日本語",
+      ko: "한국어",
+      "nl-be": "Dutch (Belgium)",
+      pl: "Polski",
+      "pt-br": "Português",
+      pt: "Português (Brasil)",
+      ro: "Romanian",
+      ru: "Русский",
+      sk: "Slovenčina",
+      "sv-se": "Swedish (Sweden)",
+      tr: "Türkçe",
+      uk: "Українська",
+      "zh-cn": "中文 (简体)",
+      "zh-tw": "中文 (繁體)",
     };
 
+    // Vue3 reactivity breaks with this configuration
+    // so we need to use markRaw as a workaround
+    // https://github.com/vuejs/core/issues/3024
     Object.defineProperty(dataObj, "locales", {
+      value: markRaw(locales),
       configurable: false,
       writable: false,
     });

frontend/src/components/settings/Themes.vue

@@ -1,18 +1,27 @@
 <template>
   <select v-on:change="change" :value="theme">
-    <option value="">{{ $t("settings.themes.light") }}</option>
-    <option value="dark">{{ $t("settings.themes.dark") }}</option>
+    <option value="">{{ t("settings.themes.default") }}</option>
+    <option value="light">{{ t("settings.themes.light") }}</option>
+    <option value="dark">{{ t("settings.themes.dark") }}</option>
   </select>
 </template>
 
-<script>
-export default {
-  name: "themes",
-  props: ["theme"],
-  methods: {
-    change(event) {
-      this.$emit("update:theme", event.target.value);
-    },
-  },
+<script setup lang="ts">
+import { SelectHTMLAttributes } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+defineProps<{
+  theme: UserTheme;
+}>();
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (e: "update:theme", val: string | null): void;
+}>();
+
+const change = (event: Event) => {
+  emit("update:theme", (event.target as SelectHTMLAttributes)?.value);
 };
 </script>

frontend/src/components/settings/UserForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <p v-if="!isDefault">
-      <label for="username">{{ $t("settings.username") }}</label>
+    <p v-if="!isDefault && props.user !== null">
+      <label for="username">{{ t("settings.username") }}</label>
       <input
         class="input input--block"
         type="text"
@@ -11,7 +11,7 @@
     </p>
 
     <p v-if="!isDefault">
-      <label for="password">{{ $t("settings.password") }}</label>
+      <label for="password">{{ t("settings.password") }}</label>
       <input
         class="input input--block"
         type="password"
@@ -22,9 +22,9 @@
     </p>
 
     <p>
-      <label for="scope">{{ $t("settings.scope") }}</label>
+      <label for="scope">{{ t("settings.scope") }}</label>
       <input
-        :disabled="createUserDirData"
+        :disabled="createUserDirData ?? false"
         :placeholder="scopePlaceholder"
         class="input input--block"
         type="text"
@@ -34,86 +34,89 @@
     </p>
     <p class="small" v-if="displayHomeDirectoryCheckbox">
       <input type="checkbox" v-model="createUserDirData" />
-      {{ $t("settings.createUserHomeDirectory") }}
+      {{ t("settings.createUserHomeDirectory") }}
     </p>
 
     <p>
-      <label for="locale">{{ $t("settings.language") }}</label>
+      <label for="locale">{{ t("settings.language") }}</label>
       <languages
         class="input input--block"
         id="locale"
-        :locale.sync="user.locale"
+        v-model:locale="user.locale"
       ></languages>
     </p>
 
-    <p v-if="!isDefault">
+    <p v-if="!isDefault && user.perm">
       <input
         type="checkbox"
         :disabled="user.perm.admin"
         v-model="user.lockPassword"
       />
-      {{ $t("settings.lockPassword") }}
+      {{ t("settings.lockPassword") }}
     </p>
 
-    <permissions :perm.sync="user.perm" />
-    <commands v-if="isExecEnabled" :commands.sync="user.commands" />
+    <permissions v-model:perm="user.perm" />
+    <commands v-if="enableExec" v-model:commands="user.commands" />
 
     <div v-if="!isDefault">
-      <h3>{{ $t("settings.rules") }}</h3>
-      <p class="small">{{ $t("settings.rulesHelp") }}</p>
-      <rules :rules.sync="user.rules" />
+      <h3>{{ t("settings.rules") }}</h3>
+      <p class="small">{{ t("settings.rulesHelp") }}</p>
+      <rules v-model:rules="user.rules" />
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import Languages from "./Languages.vue";
 import Rules from "./Rules.vue";
 import Permissions from "./Permissions.vue";
 import Commands from "./Commands.vue";
 import { enableExec } from "@/utils/constants";
+import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 
-export default {
-  name: "user",
-  data: () => {
-    return {
-      createUserDirData: false,
-      originalUserScope: "/",
-    };
-  },
-  components: {
-    Permissions,
-    Languages,
-    Rules,
-    Commands,
-  },
-  props: ["user", "createUserDir", "isNew", "isDefault"],
-  created() {
-    this.originalUserScope = this.user.scope;
-    this.createUserDirData = this.createUserDir;
-  },
-  computed: {
-    passwordPlaceholder() {
-      return this.isNew ? "" : this.$t("settings.avoidChanges");
-    },
-    scopePlaceholder() {
-      return this.createUserDir
-        ? this.$t("settings.userScopeGenerationPlaceholder")
-        : "";
-    },
-    displayHomeDirectoryCheckbox() {
-      return this.isNew && this.createUserDir;
-    },
-    isExecEnabled: () => enableExec,
-  },
-  watch: {
-    "user.perm.admin": function () {
-      if (!this.user.perm.admin) return;
-      this.user.lockPassword = false;
-    },
-    createUserDirData() {
-      this.user.scope = this.createUserDirData ? "" : this.originalUserScope;
-    },
-  },
-};
+const { t } = useI18n();
+
+const createUserDirData = ref<boolean | null>(null);
+const originalUserScope = ref<string | null>(null);
+
+const props = defineProps<{
+  user: IUserForm;
+  isNew: boolean;
+  isDefault: boolean;
+  createUserDir?: boolean;
+}>();
+
+onMounted(() => {
+  if (props.user.scope) {
+    originalUserScope.value = props.user.scope;
+    createUserDirData.value = props.createUserDir;
+  }
+});
+
+const passwordPlaceholder = computed(() =>
+  props.isNew ? "" : t("settings.avoidChanges")
+);
+const scopePlaceholder = computed(() =>
+  createUserDirData.value ? t("settings.userScopeGenerationPlaceholder") : ""
+);
+const displayHomeDirectoryCheckbox = computed(
+  () => props.isNew && createUserDirData.value
+);
+
+watch(
+  () => props.user,
+  () => {
+    if (!props.user?.perm?.admin) return;
+    props.user.lockPassword = false;
+  }
+);
+
+watch(createUserDirData, () => {
+  if (props.user?.scope) {
+    props.user.scope = createUserDirData.value
+      ? ""
+      : originalUserScope.value ?? "";
+  }
+});
 </script>

frontend/src/css/_buttons.css

@@ -1,14 +1,14 @@
 .button {
   outline: 0;
   border: 0;
-  padding: .5em 1em;
-  border-radius: .1em;
+  padding: 0.5em 1em;
+  border-radius: 0.1em;
   cursor: pointer;
   background: var(--blue);
   color: white;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
-  transition: .1s ease all;
+  border: 1px solid var(--divider);
+  box-shadow: 0 0 5px var(--divider);
+  transition: 0.1s ease all;
 }
 
 .button:hover {
@@ -38,7 +38,7 @@
 }
 
 .button--flat:hover {
-  background: var(--moon-grey);
+  background: var(--surfaceSecondary);
 }
 
 .button--flat.button--red {
@@ -50,6 +50,6 @@
 }
 
 .button[disabled] {
-  opacity: .5;
+  opacity: 0.5;
   cursor: not-allowed;
 }

frontend/src/css/_inputs.css

@@ -1,20 +1,20 @@
 .input {
-  border-radius: .1em;
-  padding: .5em 1em;
-  background: white;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  transition: .2s ease all;
-  color: #333;
+  background: var(--surfacePrimary);
+  color: var(--textSecondary);
+  border: 1px solid var(--borderPrimary);
+  border-radius: 0.1em;
+  padding: 0.5em 1em;
+  transition: 0.2s ease all;
   margin: 0;
 }
 
 .input:hover,
 .input:focus {
-  border-color: rgba(0, 0, 0, 0.2);
+  border-color: var(--borderSecondary);
 }
 
 .input--block {
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
   display: block;
   width: 100%;
 }
@@ -27,9 +27,9 @@
 }
 
 .input--red {
-  background: #fcd0cd;
+  background: var(--input-red) !important;
 }
 
 .input--green {
-  background: #c9f2da;
+  background: var(--input-green) !important;
 }

frontend/src/css/_share.css

@@ -12,8 +12,11 @@
 }
 
 .share__box {
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  background: #fff;
+  box-shadow:
+    rgba(0, 0, 0, 0.06) 0px 1px 3px,
+    rgba(0, 0, 0, 0.12) 0px 1px 2px;
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
   border-radius: 0.2em;
   margin: 5px;
   overflow: hidden;
@@ -39,7 +42,7 @@
 
 .share__box__element {
   padding: 1em;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--borderPrimary);
   word-break: break-all;
 }
 
@@ -62,21 +65,21 @@
   border-left: 0;
   border-right: 0;
   border-bottom: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--borderPrimary);
 }
 
-.share__box__items #listing.list .item .name {
+#listing.list .item .name {
   width: 50%;
 }
 
-.share__box__items #listing.list .item .modified {
+#listing.list .item .modified {
   width: 25%;
 }
 
 .share__wrong__password {
   background: var(--red);
   color: #fff;
-  padding: .5em;
+  padding: 0.5em;
   text-align: center;
-  animation: .2s opac forwards;
-}
+  animation: 0.2s opac forwards;
+}

frontend/src/css/_shell.css

@@ -3,17 +3,8 @@
   bottom: 0;
   left: 0;
   max-height: calc(100% - 4em);
-  background: white;
-  color: #212121;
-  z-index: 9997;
-  width: 100%;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  transition: .2s ease transform;
-}
-
-.shell__divider {
-  position: relative;
-  height: 8px;
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
   z-index: 9999;
   background: rgba(127, 127, 127, 0.1);
   transition: 0.2s ease background;
@@ -32,6 +23,8 @@
   overflow: auto;
   font-size: 1rem;
   cursor: text;
+  box-shadow: 0 0 5px var(--borderPrimary);
+  transition: 0.2s ease transform;
 }
 
 .shell__overlay {
@@ -52,7 +45,7 @@ body.rtl .shell-content {
   display: flex;
   padding: 0.5em;
   align-items: flex-start;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid var(--divider);
 }
 
 .shell--hidden {

frontend/src/css/_variables.css

@@ -1,8 +1,8 @@
 :root {
   --blue: #2196f3;
-  --dark-blue: #1E88E5;
-  --red: #F44336;
-  --dark-red: #D32F2F;
+  --dark-blue: #1e88e5;
+  --red: #f44336;
+  --dark-red: #d32f2f;
   --moon-grey: #f2f2f2;
 
   --icon-red: #da4453;
@@ -11,4 +11,44 @@
   --icon-green: #2ecc71;
   --icon-blue: #1d99f3;
   --icon-violet: #9b59b6;
+
+  --input-red: rgb(252, 208, 205);
+  --input-green: rgb(201, 242, 218);
+
+  --item-selected: white;
+
+  --action: rgb(84, 110, 122);
+
+  --background: rgb(250, 250, 250);
+  --surfacePrimary: rgb(255, 255, 255);
+  --surfaceSecondary: rgb(230, 230, 230);
+  --divider: rgba(0, 0, 0, 0.05);
+  --iconPrimary: var(--icon-blue);
+  --iconSecondary: rgb(255, 255, 255);
+  --iconTertiary: rgb(204, 204, 204);
+  --textPrimary: rgb(111, 111, 111);
+  --textSecondary: rgb(51, 51, 51);
+  --hover: rgba(0, 0, 0, 0.1);
+  --borderPrimary: rgba(0, 0, 0, 0.1);
+  --borderSecondary: rgba(0, 0, 0, 0.2);
+}
+
+:root.dark {
+  --input-red: rgb(115, 48, 45);
+  --input-green: rgb(20, 122, 65);
+
+  --action: rgb(255, 255, 255);
+
+  --background: rgb(20, 29, 36);
+  --surfacePrimary: rgb(32, 41, 47);
+  --surfaceSecondary: rgb(58, 65, 71);
+  --textPrimary: rgba(255, 255, 255, 0.6);
+  --textSecondary: rgba(255, 255, 255, 0.87);
+  --divider: rgba(255, 255, 255, 0.12);
+  --iconPrimary: rgb(255, 255, 255);
+  --iconSecondary: rgb(255, 255, 255);
+  --iconTertiary: rgb(255, 255, 255);
+  --hover: rgba(255, 255, 255, 0.1);
+  --borderPrimary: rgba(255, 255, 255, 0.05);
+  --borderSecondary: rgba(255, 255, 255, 0.15);
 }

frontend/src/css/base.css

@@ -1,12 +1,8 @@
 body {
   font-family: "Roboto", sans-serif;
   padding-top: 4em;
-  background-color: #fafafa;
-  color: #333333;
-}
-
-body.rtl {
-  direction: rtl;
+  background: var(--background);
+  color: var(--textSecondary);
 }
 
 * {
@@ -62,8 +58,8 @@ nav {
   left: 0;
 }
 
-body.rtl nav {
-  left: unset;
+html[dir="rtl"] nav {
+  left: initial;
   right: 0;
 }
 
@@ -78,13 +74,12 @@ nav .action {
   text-overflow: ellipsis;
 }
 
-body.rtl .action {
-  direction: rtl;
+html[dir="rtl"] nav .action {
   text-align: right;
 }
 
 nav > div {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid var(--divider);
 }
 
 nav .action > * {
@@ -99,14 +94,15 @@ main {
 
 .breadcrumbs {
   height: 3em;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  background: var(--background);
+  border-bottom: 1px solid var(--divider);
 }
 
 .breadcrumbs span,
 .breadcrumbs {
   display: flex;
   align-items: center;
-  color: #6f6f6f;
+  color: var(--textPrimary);
 }
 
 .breadcrumbs a {
@@ -115,12 +111,12 @@ main {
   border-radius: 0.125em;
 }
 
-body.rtl .breadcrumbs a {
+html[dir="rtl"] .breadcrumbs a {
   transform: translateX(-16em);
 }
 
 .breadcrumbs a:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--divider);
 }
 
 .breadcrumbs span a {
@@ -151,4 +147,38 @@ body.rtl .breadcrumbs a {
 
 .break-word {
   word-break: break-all;
-}
+}
+
+.vue-number-input > input {
+  background: var(--surfacePrimary) !important;
+  border-color: var(--surfaceSecondary) !important;
+  color: var(--textSecondary) !important;
+}
+
+.vue-number-input--small > input {
+  height: 1rem !important;
+  font-size: 1rem !important;
+}
+
+.vue-number-input :hover,
+.vue-number-input :focus {
+  border-color: var(--borderSecondary) !important;
+}
+
+.vue-number-input__button {
+  background: var(--surfacePrimary) !important;
+}
+
+.vue-number-input__button--minus,
+.vue-number-input__button--plus {
+  border-color: var(--surfaceSecondary) !important;
+}
+
+.vue-number-input__button::before,
+.vue-number-input__button::after {
+  background: var(--textSecondary) !important;
+}
+
+.vfm-modal {
+  z-index: 9999999 !important;
+}

frontend/src/css/dashboard.css

@@ -4,17 +4,17 @@
 
 .dashboard .row {
   display: flex;
-  margin: 0 -.5em;
+  margin: 0 -0.5em;
   flex-wrap: wrap;
 }
 
-body.rtl .dashboard .row {
+html[dir="rtl"] .dashboard .row {
   margin-right: 16em;
 }
 
 .dashboard .row .column {
   display: flex;
-  padding: 0 .5em;
+  padding: 0 0.5em;
   width: 50%;
 }
 
@@ -22,33 +22,33 @@ body.rtl .dashboard .row {
   flex-grow: 1;
 }
 
-@media(max-width: 1200px) {
+@media (max-width: 1200px) {
   .dashboard .row .column {
     width: 100%;
   }
 }
 
 a {
-  color: inherit
+  color: inherit;
 }
 
 .dashboard p label {
-  margin-bottom: .2em;
+  margin-bottom: 0.2em;
   display: block;
-  font-size: .8em;
+  font-size: 0.8em;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.57);
+  color: var(--textPrimary);
 }
 
 li code,
 p code {
-  background: rgba(0, 0, 0, 0.05);
-  padding: .1em;
-  border-radius: .2em;
+  background: var(--divider);
+  padding: 0.1em;
+  border-radius: 0.2em;
 }
 
 .small {
-  font-size: .8em;
+  font-size: 0.8em;
   line-height: 1.5;
 }
 
@@ -61,21 +61,21 @@ p code {
 .dashboard #nav .wrapper {
   display: flex;
   flex-grow: 1;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 2px solid var(--divider);
 }
 
-body.rtl #nav .wrapper {
+html[dir="rtl"] .dashboard #nav .wrapper {
   margin-right: 16em;
 }
 
 .dashboard #nav ul {
   list-style: none;
   display: flex;
-  color: rgb(84, 110, 122);
+  color: var(--action);
   font-weight: 500;
   padding: 0;
   margin: 0 0 -2px 0;
-  font-size: .8em;
+  font-size: 0.8em;
   text-align: center;
   justify-content: left;
 }
@@ -85,12 +85,11 @@ body.rtl #nav .wrapper {
   padding: 1.5em 2em;
   white-space: nowrap;
   border-bottom: 2px solid transparent;
-  transition: .1s ease-in-out all;
-
+  transition: 0.1s ease-in-out all;
 }
 
 .dashboard #nav ul li:hover {
-  background: var(--moon-grey);
+  background: var(--surfaceSecondary);
 }
 
 .dashboard #nav ul li.active {
@@ -120,7 +119,7 @@ table {
 }
 
 table tr {
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--iconTertiary);
 }
 
 table tr:last-child {
@@ -129,40 +128,44 @@ table tr:last-child {
 
 table th {
   font-weight: 500;
-  color: #757575;
+  color: var(--textSecondary);
   text-align: left;
 }
 
 table th,
 table td {
-  padding: .5em 0;
+  padding: 0.5em 0;
 }
 
 table td.small {
   width: 1em;
 }
 
-table tr>*:first-child {
+table tr > *:first-child {
   padding-left: 1em;
 }
 
-body.rtl table tr>* {
+html[dir="rtl"] table tr > * {
   padding-left: unset;
   padding-right: 1em;
   text-align: right;
   direction: ltr;
 }
 
-table tr>*:last-child {
+table tr > *:last-child {
   padding-right: 1em;
 }
 
 .card {
   position: relative;
   margin: 0 0 1rem 0;
-  background-color: #fff;
+  background: var(--surfacePrimary);
+  color: var(--textSecondary);
   border-radius: 2px;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2);
   overflow: auto;
 }
 
@@ -171,18 +174,18 @@ table tr>*:last-child {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 99999;
   max-width: 25em;
   width: 90%;
   max-height: 95%;
-  animation: .1s show forwards;
+  /* animation-duration: 0.3s;
+  animation-fill-mode: forwards; */
 }
 
-.card>*>*:first-child {
+.card > * > *:first-child {
   margin-top: 0;
 }
 
-.card>*>*:last-child {
+.card > * > *:last-child {
   margin-bottom: 0;
 }
 
@@ -191,24 +194,24 @@ table tr>*:last-child {
   display: flex;
 }
 
-.card .card-title>*:first-child {
+.card .card-title > *:first-child {
   margin-right: auto;
 }
 
-body.rtl .card .card-title>*:first-child {
+html[dir="rtl"] .card .card-title > *:first-child {
   margin-right: 0;
   text-align: right;
 }
 
-.card>div {
+.card > div {
   padding: 1em 1em;
 }
 
-.card>div:first-child {
+.card > div:first-child {
   padding-top: 1.5em;
 }
 
-.card>div:last-child {
+.card > div:last-child {
   padding-bottom: 1.5em;
 }
 
@@ -234,7 +237,7 @@ body.rtl .card .card-action {
 }
 
 .card h3 {
-  color: rgba(0, 0, 0, 0.53);
+  color: var(--textPrimary);
   font-size: 1em;
   font-weight: 500;
   margin: 2em 0 1em;
@@ -253,6 +256,14 @@ body.rtl .card .card-action {
   max-width: 15em;
 }
 
+.card#share input,
+.card#share select,
+.card#share input::-webkit-inner-spin-button,
+.card#share input::-webkit-outer-spin-button {
+  background: var(--surfacePrimary);
+  color: var(--textSecondary);
+}
+
 .card#share ul {
   list-style: none;
   padding: 0;
@@ -277,24 +288,24 @@ body.rtl .card .card-action {
 
 .card#share ul li input,
 .card#share ul li select {
-  padding: .2em;
-  margin-right: .5em;
-  border: 1px solid #dadada;
+  padding: 0.2em;
+  margin-right: 0.5em;
+  border: 1px solid var(--borderPrimary);
 }
 
 .card#share .action.copy-clipboard::after {
-  content: 'Copied!';
+  content: "Copied!";
   position: absolute;
   left: -25%;
   width: 150%;
-  font-size: .6em;
+  font-size: 0.6em;
   text-align: center;
   background: #44a6f5;
   color: #fff;
-  padding: .5em .2em;
-  border-radius: .4em;
+  padding: 0.5em 0.2em;
+  border-radius: 0.4em;
   top: -2em;
-  transition: .1s ease opacity;
+  transition: 0.1s ease opacity;
   opacity: 0;
 }
 
@@ -324,10 +335,9 @@ body.rtl .card .card-action {
   z-index: 9999;
   visibility: hidden;
   opacity: 0;
-  animation: .1s show forwards;
+  animation: 0.1s show forwards;
 }
 
-
 /* * * * * * * * * * * * * * * *
  *        PROMPT - MOVE        *
  * * * * * * * * * * * * * * * */
@@ -344,33 +354,33 @@ body.rtl .card .card-action {
 .file-list li {
   width: 100%;
   user-select: none;
-  border-radius: .2em;
-  padding: .3em;
+  border-radius: 0.2em;
+  padding: 0.3em;
 }
 
-.file-list li[aria-selected=true] {
+.file-list li[aria-selected="true"] {
   background: var(--blue) !important;
-  color: #fff !important;
-  transition: .1s ease all;
+  color: var(--iconSecondary) !important;
+  transition: 0.1s ease all;
 }
 
 .file-list li:hover {
-  background-color: #e9eaeb;
+  background: var(--surfaceSecondary);
   cursor: pointer;
 }
 
 .file-list li:before {
   content: "folder";
-  color: #6f6f6f;
+  color: var(--textPrimary);
   vertical-align: middle;
   line-height: 1.4;
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-size: 1.75em;
-  margin-right: .25em;
+  margin-right: 0.25em;
 }
 
-.file-list li[aria-selected=true]:before {
-  color: white;
+.file-list li[aria-selected="true"]:before {
+  color: var(--iconSecondary);
 }
 
 .help {
@@ -399,11 +409,11 @@ body.rtl .card .card-action {
 }
 
 .collapsible {
-  border-top: 1px solid rgba(0,0,0,0.1);
+  border-top: 1px solid var(--borderPrimary);
 }
 
 .collapsible:last-of-type {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
+  border-bottom: 1px solid var(--borderPrimary);
 }
 
 .collapsible > input {
@@ -421,18 +431,18 @@ body.rtl .card .card-action {
 
 .collapsible > label * {
   margin: 0;
-  color: rgba(0,0,0,0.57);
+  color: var(--textPrimary);
 }
 
 .collapsible > label i {
-  transition: .2s ease transform;
+  transition: 0.2s ease transform;
   user-select: none;
 }
 
 .collapsible .collapse {
   max-height: 0;
   overflow: hidden;
-  transition: .2s ease all;
+  transition: 0.2s ease all;
 }
 
 .collapsible > input:checked ~ .collapse {
@@ -442,7 +452,7 @@ body.rtl .card .card-action {
 }
 
 .collapsible > input:checked ~ label i {
-  transform: rotate(180deg)
+  transform: rotate(180deg);
 }
 
 .card .collapsible {
@@ -468,12 +478,12 @@ body.rtl .card .card-action {
   flex: 1;
   padding: 2em;
   border-radius: 0.2em;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--borderPrimary);
   text-align: center;
 }
 
 .card .card-action.full .action {
-  margin: 0 0.25em 0.50em;
+  margin: 0 0.25em 0.5em;
 }
 
 .card .card-action.full .action i {
@@ -489,7 +499,7 @@ body.rtl .card .card-action {
 }
 
 /*** RTL - Fix disk usage information (in english) ***/
-body.rtl .credits {
+html[dir="rtl"] .credits {
   text-align: right;
   direction: ltr;
-}
+}

frontend/src/css/header.css

@@ -1,8 +1,8 @@
 header {
   z-index: 1000;
-  background-color: #fff;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background: var(--surfacePrimary);
+  border-bottom: 1px solid var(--divider);
+  box-shadow: 0 0 5px var(--borderPrimary);
   position: fixed;
   top: 0;
   left: 0;
@@ -37,7 +37,7 @@ header a:hover {
   color: inherit;
 }
 
-header>div:first-child>.action,
+header > div:first-child > .action,
 header img {
   margin-right: 1em;
 }
@@ -50,7 +50,7 @@ header .action span {
   display: none;
 }
 
-header>div div {
+header > div div {
   vertical-align: middle;
   position: relative;
 }
@@ -82,34 +82,39 @@ header .menu-button {
 }
 
 #search #input {
-  background-color: #f5f5f5;
+  background: var(--surfaceSecondary);
+  border-color: var(--surfacePrimary);
   display: flex;
   height: 100%;
   padding: 0em 0.75em;
   border-radius: 0.3em;
-  transition: .1s ease all;
+  transition: 0.1s ease all;
   align-items: center;
   z-index: 2;
 }
 
+#search #input input::placeholder {
+  color: var(--textSecondary);
+}
+
 #search.active #input {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
+  border-bottom: 1px solid var(--borderPrimary);
+  box-shadow: 0 0 5px var(--borderPrimary);
+  background: var(--surfacePrimary);
   height: 4em;
 }
 
-#search.active>div {
+#search.active > div {
   border-radius: 0 !important;
 }
 
 #search.active i,
 #search.active input {
-  color: #212121;
+  color: var(--textPrimary);
 }
 
-#search #input>.action,
-#search #input>i {
+#search #input > .action,
+#search #input > i {
   margin-right: 0.3em;
   user-select: none;
 }
@@ -124,38 +129,39 @@ header .menu-button {
 #search #result {
   visibility: visible;
   max-height: none;
-  background-color: #f8f8f8;
+  background: var(--background);
   text-align: left;
   padding: 0;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--textPrimary);
   height: 0;
-  transition: .1s ease height, .1s ease padding;
+  transition:
+    0.1s ease height,
+    0.1s ease padding;
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 1;
 }
 
-body.rtl #search #result {
+html[dir="rtl"] #search #result {
   direction: ltr;
 }
 
-#search #result>div>*:first-child {
+#search #result > div > *:first-child {
   margin-top: 0;
 }
 
-body.rtl #search #result {
-  direction: rtl;
+html[dir="rtl"] #search #result {
   text-align: right;
 }
 
 /*** RTL - Keep search result LTR because it has paths (in english) ***/
-body.rtl #search #result ul>* {
+html[dir="rtl"] #search #result ul > * {
   direction: ltr;
   text-align: left;
 }
 
 #search.active #result {
-  padding: .5em;
+  padding: 0.5em;
   height: calc(100% - 4em);
 }
 
@@ -166,10 +172,10 @@ body.rtl #search #result ul>* {
 }
 
 #search li {
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 }
 
-#search #result>div {
+#search #result > div {
   max-width: 45em;
   margin: 0 auto;
 }
@@ -187,10 +193,10 @@ body.rtl #search #result ul>* {
 }
 
 #search.active #result i {
-  color: #ccc;
+  color: var(--iconTertiary);
 }
 
-#search.active #result>p>i {
+#search.active #result > p > i {
   text-align: center;
   margin: 0 auto;
   display: table;
@@ -199,35 +205,35 @@ body.rtl #search #result ul>* {
 #search.active #result ul li a {
   display: flex;
   align-items: center;
-  padding: .3em 0;
+  padding: 0.3em 0;
 }
 
 #search.active #result ul li a i {
-  margin-right: .3em;
+  margin-right: 0.3em;
 }
 
-#search::-webkit-input-placeholder {
-  color: rgba(255, 255, 255, .5);
-}
-
-#search:-moz-placeholder {
-  opacity: 1;
-  color: rgba(255, 255, 255, .5);
+/* I dont think we need these anymore */
+/* #search::-webkit-input-placeholder {
+  color: var(--textPrimary);
 }
 
 #search::-moz-placeholder {
   opacity: 1;
-  color: rgba(255, 255, 255, .5);
+  color: var(--textPrimary);
 }
 
 #search:-ms-input-placeholder {
-  color: rgba(255, 255, 255, .5);
+  color: var(--textPrimary);
 }
 
+#search #input input::placeholder {
+  color: var(--textPrimary);
+} */
+
 #search .boxes {
-  border: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  background: #fff;
+  border: 1px solid var(--borderPrimary);
+  box-shadow: 0 0 5px var(--borderPrimary);
+  background: var(--surfacePrimary);
   margin: 1em 0;
 }
 
@@ -235,15 +241,15 @@ body.rtl #search #result ul>* {
   margin: 0;
   font-weight: 500;
   font-size: 1em;
-  color: #212121;
-  padding: .5em;
+  color: var(--textSecondary);
+  padding: 0.5em;
 }
 
-body.rtl #search .boxes h3 {
+html[dir="rtl"] #search .boxes h3 {
   text-align: right;
 }
 
-#search .boxes>div {
+#search .boxes > div {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
@@ -251,7 +257,7 @@ body.rtl #search .boxes h3 {
   margin-bottom: -1em;
 }
 
-#search .boxes>div>div {
+#search .boxes > div > div {
   background: var(--blue);
   color: #fff;
   text-align: center;

frontend/src/css/listing-icons.css

@@ -2,30 +2,50 @@
 
 /* General */
 
-.file-icons [aria-label^="."] { opacity: 0.33 }
-.file-icons [aria-label$=".bak"] { opacity: 0.33 }
+.file-icons [aria-label^="."] {
+  opacity: 0.33;
+}
+.file-icons [aria-label$=".bak"] {
+  opacity: 0.33;
+}
 
-.file-icons [data-type=audio] i::before { content: 'volume_up' }
-.file-icons [data-type=blob] i::before { content: 'insert_drive_file' }
-.file-icons [data-type=image] i::before { content: 'image' }
-.file-icons [data-type=pdf] i::before { content: 'description' }
-.file-icons [data-type=text] i::before { content: 'description' }
-.file-icons [data-type=video] i::before { content: 'movie' }
-.file-icons [data-type=invalid_link] i::before { content: 'link_off' }
+.file-icons [data-type="audio"] i::before {
+  content: "volume_up";
+}
+.file-icons [data-type="blob"] i::before {
+  content: "insert_drive_file";
+}
+.file-icons [data-type="image"] i::before {
+  content: "image";
+}
+.file-icons [data-type="pdf"] i::before {
+  content: "description";
+}
+.file-icons [data-type="text"] i::before {
+  content: "description";
+}
+.file-icons [data-type="video"] i::before {
+  content: "movie";
+}
+.file-icons [data-type="invalid_link"] i::before {
+  content: "link_off";
+}
 
 /* #f90 - Image */
 
 .file-icons [aria-label$=".ai"] i::before,
 .file-icons [aria-label$=".odg"] i::before,
-.file-icons [aria-label$=".xcf"] i::before
-{ content: 'image' }
+.file-icons [aria-label$=".xcf"] i::before {
+  content: "image";
+}
 
 /* #f90 - Presentation */
 
 .file-icons [aria-label$=".odp"] i::before,
 .file-icons [aria-label$=".ppt"] i::before,
-.file-icons [aria-label$=".pptx"] i::before
-{ content: 'slideshow' }
+.file-icons [aria-label$=".pptx"] i::before {
+  content: "slideshow";
+}
 
 /* #0f0 - Spreadsheet/Database */
 
@@ -34,8 +54,9 @@
 .file-icons [aria-label$=".odb"] i::before,
 .file-icons [aria-label$=".ods"] i::before,
 .file-icons [aria-label$=".xls"] i::before,
-.file-icons [aria-label$=".xlsx"] i::before
-{ content: 'border_all' }
+.file-icons [aria-label$=".xlsx"] i::before {
+  content: "border_all";
+}
 
 /* #00f - Document */
 
@@ -43,8 +64,9 @@
 .file-icons [aria-label$=".docx"] i::before,
 .file-icons [aria-label$=".log"] i::before,
 .file-icons [aria-label$=".odt"] i::before,
-.file-icons [aria-label$=".rtf"] i::before
-{ content: 'description' }
+.file-icons [aria-label$=".rtf"] i::before {
+  content: "description";
+}
 
 /* #999 - Code */
 
@@ -65,8 +87,9 @@
 .file-icons [aria-label$=".rs"] i::before,
 .file-icons [aria-label$=".vue"] i::before,
 .file-icons [aria-label$=".xml"] i::before,
-.file-icons [aria-label$=".yml"] i::before
-{ content: 'code' }
+.file-icons [aria-label$=".yml"] i::before {
+  content: "code";
+}
 
 /* #999 - Executable */
 
@@ -75,16 +98,18 @@
 .file-icons [aria-label$=".exe"] i::before,
 .file-icons [aria-label$=".jar"] i::before,
 .file-icons [aria-label$=".ps1"] i::before,
-.file-icons [aria-label$=".sh"] i::before
-{ content: 'web_asset' }
+.file-icons [aria-label$=".sh"] i::before {
+  content: "web_asset";
+}
 
 /* #999 - Installer */
 
 .file-icons [aria-label$=".deb"] i::before,
 .file-icons [aria-label$=".msi"] i::before,
 .file-icons [aria-label$=".pkg"] i::before,
-.file-icons [aria-label$=".rpm"] i::before
-{ content: 'archive' }
+.file-icons [aria-label$=".rpm"] i::before {
+  content: "archive";
+}
 
 /* #999 - Compressed */
 
@@ -96,8 +121,9 @@
 .file-icons [aria-label$=".tar"] i::before,
 .file-icons [aria-label$=".xz"] i::before,
 .file-icons [aria-label$=".zip"] i::before,
-.file-icons [aria-label$=".zst"] i::before
-{ content: 'folder_zip' }
+.file-icons [aria-label$=".zst"] i::before {
+  content: "folder_zip";
+}
 
 /* #999 - Disk */
 
@@ -108,25 +134,35 @@
 .file-icons [aria-label$=".vdi"] i::before,
 .file-icons [aria-label$=".vhd"] i::before,
 .file-icons [aria-label$=".vmdk"] i::before,
-.file-icons [aria-label$=".wim"] i::before
-{ content: 'album' }
+.file-icons [aria-label$=".wim"] i::before {
+  content: "album";
+}
 
 /* #999 - Font */
 
 .file-icons [aria-label$=".otf"] i::before,
 .file-icons [aria-label$=".ttf"] i::before,
 .file-icons [aria-label$=".woff"] i::before,
-.file-icons [aria-label$=".woff2"] i::before
-{ content: 'font_download' }
+.file-icons [aria-label$=".woff2"] i::before {
+  content: "font_download";
+}
 
 /* Colors */
 
 /* General */
 
-.file-icons [data-type=audio] i  { color: var(--icon-yellow) }
-.file-icons [data-type=image] i { color: var(--icon-orange) }
-.file-icons [data-type=video] i { color: var(--icon-violet) }
-.file-icons [data-type=invalid_link] i { color: var(--icon-red) }
+.file-icons [data-type="audio"] i {
+  color: var(--icon-yellow);
+}
+.file-icons [data-type="image"] i {
+  color: var(--icon-orange);
+}
+.file-icons [data-type="video"] i {
+  color: var(--icon-violet);
+}
+.file-icons [data-type="invalid_link"] i {
+  color: var(--icon-red);
+}
 
 /* #f00 - Adobe/Oracle */
 
@@ -135,8 +171,9 @@
 .file-icons [aria-label$=".jar"] i,
 .file-icons [aria-label$=".psd"] i,
 .file-icons [aria-label$=".rb"] i,
-.file-icons [data-type=pdf] i
-{ color: var(--icon-red) }
+.file-icons [data-type="pdf"] i {
+  color: var(--icon-red);
+}
 
 /* #f90 - Image/Presentation */
 
@@ -146,16 +183,18 @@
 .file-icons [aria-label$=".ppt"] i,
 .file-icons [aria-label$=".pptx"] i,
 .file-icons [aria-label$=".vue"] i,
-.file-icons [aria-label$=".xcf"] i
-{ color: var(--icon-orange) }
+.file-icons [aria-label$=".xcf"] i {
+  color: var(--icon-orange);
+}
 
 /* #ff0 - Various */
 
 .file-icons [aria-label$=".css"] i,
 .file-icons [aria-label$=".js"] i,
 .file-icons [aria-label$=".json"] i,
-.file-icons [aria-label$=".zip"] i
-{ color: var(--icon-yellow) }
+.file-icons [aria-label$=".zip"] i {
+  color: var(--icon-yellow);
+}
 
 /* #0f0 - Spreadsheet/Google */
 
@@ -164,8 +203,9 @@
 .file-icons [aria-label$=".go"] i,
 .file-icons [aria-label$=".ods"] i,
 .file-icons [aria-label$=".xls"] i,
-.file-icons [aria-label$=".xlsx"] i
-{ color: var(--icon-green) }
+.file-icons [aria-label$=".xlsx"] i {
+  color: var(--icon-green);
+}
 
 /* #00f - Document/Microsoft/Apple/Closed */
 
@@ -188,18 +228,26 @@
 .file-icons [aria-label$=".ps1"] i,
 .file-icons [aria-label$=".rtf"] i,
 .file-icons [aria-label$=".vob"] i,
-.file-icons [aria-label$=".wim"] i
-{ color: var(--icon-blue) }
+.file-icons [aria-label$=".wim"] i {
+  color: var(--icon-blue);
+}
 
 /* #60f - Various */
 
 .file-icons [aria-label$=".iso"] i,
 .file-icons [aria-label$=".php"] i,
-.file-icons [aria-label$=".rar"] i
-{ color: var(--icon-violet) }
+.file-icons [aria-label$=".rar"] i {
+  color: var(--icon-violet);
+}
 
 /* Overrides */
 
-.file-icons [data-dir=true] i { color: var(--icon-blue) }
-.file-icons [data-dir=true] i::before { content: 'folder' }
-.file-icons [aria-selected=true] i { color: var(--item-selected) }
+.file-icons [data-dir="true"] i {
+  color: var(--icon-blue);
+}
+.file-icons [data-dir="true"] i::before {
+  content: "folder";
+}
+.file-icons [aria-selected="true"] i {
+  color: var(--iconSecondary);
+}

frontend/src/css/listing.css

@@ -1,15 +1,11 @@
-#listing {
-  --item-selected: white;
-}
-
-body.rtl #listing {
+html[dir="rtl"] #listing {
   margin-right: 16em;
 }
 
 #listing h2 {
   margin: 0 0 0 0.5em;
-  font-size: .9em;
-  color: rgba(0, 0, 0, 0.38);
+  font-size: 0.9em;
+  color: var(--textPrimary);
   font-weight: 500;
 }
 
@@ -18,19 +14,22 @@ body.rtl #listing {
   overflow: hidden;
 }
 
-#listing>div {
+#listing > div {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
 
 #listing .item {
-  background-color: #fff;
+  background: var(--surfacePrimary);
+  border-color: var(--divider);
   position: relative;
   display: flex;
   flex-wrap: nowrap;
-  color: #6f6f6f;
-  transition: .1s ease background, .1s ease opacity;
+  color: var(--textPrimary);
+  transition:
+    0.1s ease background,
+    0.1s ease opacity;
   align-items: center;
   cursor: pointer;
   user-select: none;
@@ -75,13 +74,13 @@ body.rtl #listing {
   margin: 1em auto;
   display: block !important;
   width: 95%;
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--textPrimary);
   font-weight: 500;
 }
 
 .message i {
   font-size: 2.5em;
-  margin-bottom: .2em;
+  margin-bottom: 0.2em;
   display: block;
 }
 
@@ -92,14 +91,18 @@ body.rtl #listing {
 
 #listing.mosaic .item {
   width: calc(33% - 1em);
-  margin: .5em;
+  margin: 0.5em;
   padding: 0.5em;
   border-radius: 0.2em;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.06),
+    0 1px 2px rgba(0, 0, 0, 0.12);
 }
 
 #listing.mosaic .item:hover {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24) !important;
 }
 
 #listing.mosaic .header {
@@ -127,16 +130,16 @@ body.rtl #listing {
   text-align: center;
 }
 
-#listing.mosaic.gallery .item[data-type=image] div:last-of-type {
+#listing.mosaic.gallery .item[data-type="image"] div:last-of-type {
   color: white;
   background: linear-gradient(#0000, #0009);
 }
 
 #listing.mosaic.gallery .item i {
-    width: 100%;
-    margin-right: 0;
-    font-size: 8em;
-    text-align: center;
+  width: 100%;
+  margin-right: 0;
+  font-size: 8em;
+  text-align: center;
 }
 
 #listing.mosaic.gallery .item img {
@@ -159,7 +162,7 @@ body.rtl #listing {
 #listing.list .item {
   width: 100%;
   margin: 0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--borderPrimary);
   padding: 1em;
   border-top: 0;
 }
@@ -168,9 +171,9 @@ body.rtl #listing {
   display: none;
 }
 
-#listing .item[aria-selected=true] {
+#listing .item[aria-selected="true"] {
   background: var(--blue) !important;
-  color: var(--item-selected) !important;
+  color: var(--iconSecondary) !important;
 }
 
 #listing.list .item div:first-of-type {
@@ -202,25 +205,25 @@ body.rtl #listing {
 
 #listing .item.header {
   display: none !important;
-  background-color: #ccc;
+  background-color: var(--iconTertiary);
 }
 
 #listing.list .header i {
   font-size: 1.5em;
   vertical-align: middle;
-  margin-left: .2em;
+  margin-left: 0.2em;
 }
 
 #listing.list .item.header {
   display: flex !important;
-  background: #fafafa;
+  background: var(--background);
   z-index: 999;
-  padding: .85em;
+  padding: 0.85em;
   border: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--borderPrimary);
 }
 
-#listing.list .item.header>div:first-child {
+#listing.list .item.header > div:first-child {
   width: 0;
 }
 
@@ -232,7 +235,7 @@ body.rtl #listing {
   color: inherit;
 }
 
-#listing.list .item.header>div:first-child {
+#listing.list .item.header > div:first-child {
   width: 0;
 }
 
@@ -250,7 +253,7 @@ body.rtl #listing {
 
 #listing.list .header i {
   opacity: 0;
-  transition: .1s ease all;
+  transition: 0.1s ease all;
 }
 
 #listing.list .header p:hover i,
@@ -272,7 +275,7 @@ body.rtl #listing {
   height: 4em;
   padding: 0.5em 0.5em 0.5em 1em;
   justify-content: space-between;
-  transition: .2s ease bottom;
+  transition: 0.2s ease bottom;
 }
 
 #listing #multiple-selection.active {
@@ -281,5 +284,5 @@ body.rtl #listing {
 
 #listing #multiple-selection p,
 #listing #multiple-selection i {
-  color: var(--item-selected);
+  color: var(--iconSecondary);
 }