updated state fix (#181)

.github/workflows/dev.yaml

@@ -1,76 +0,0 @@
-name: dev
-
-on:
-  push:
-    branches:
-      - 'dev_v*'
-
-jobs:
-  test-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go test -race -v ./...
-  lint-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.54.2
-      - run: cd backend && golangci-lint run
-  format-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go fmt ./...
-  lint-frontend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '20'
-      - run: cd frontend && npm i eslint
-      - run: cd frontend && npm run lint
-  push_dev_to_registry:
-    name: Push dev image
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        # Workaround to fix error:
-        # failed to push: failed to copy: io: read/write on closed pipe
-        # See https://github.com/docker/build-push-action/issues/761
-        with:
-          driver-opts: |
-            image=moby/buildkit:v0.10.6
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
-        with:
-          images: gtstef/filebrowser
-      - name: Build and push
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/main.yaml

@@ -3,46 +3,10 @@ name: main job
 on:
   push:
     branches:
-      - 'main'
+      - "main"
 
 jobs:
-  test-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go test -race -v ./...
-  lint-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.54.2
-      - run: cd backend && golangci-lint run
-  format-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go fmt ./...
-  lint-frontend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '20'
-      - run: cd frontend && npm i eslint
-      - run: cd frontend && npm run lint
-
   push_latest_to_registry:
-    needs: [lint-frontend, lint-backend, test-backend, format-backend]
     name: Push latest
     runs-on: ubuntu-latest
     steps:
@@ -65,7 +29,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        uses: docker/metadata-action@v5
         with:
           images: gtstef/filebrowser
       - name: Build and push

.github/workflows/pr.yaml

@@ -3,46 +3,11 @@ name: pr-merge
 on:
   pull_request:
     branches:
-      - 'main'
-      - 'dev_v*'
-      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - "main"
+      - "v[0-9]+.[0-9]+.[0-9]+"
+      - "dev_*"
 
 jobs:
-  test-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go test -race -v ./...
-  lint-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.54.2
-      - run: cd backend && golangci-lint run
-  format-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go fmt ./...
-  lint-frontend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '20'
-      - run: cd frontend && npm i eslint
-      - run: cd frontend && npm run lint
-
   push_pr_to_registry:
     name: Push PR
     runs-on: ubuntu-latest
@@ -66,7 +31,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        uses: docker/metadata-action@v5
         with:
           images: gtstef/filebrowser
       - name: Build and push

.github/workflows/regular-tests.yaml

@@ -0,0 +1,44 @@
+name: dev
+
+on:
+  push:
+    branches:
+      - "*"
+
+jobs:
+  test-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
+        with:
+          go-version: 'stable'
+      - working-directory: backend
+        run: go test -race -v ./...
+  lint-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
+        with:
+            go-version: 'stable'
+      - uses: golangci/golangci-lint-action@v6
+        with:
+          version: v1.59
+          working-directory: backend
+  format-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
+        with:
+          go-version: 'stable'
+      - working-directory: backend
+        run: go fmt ./...
+  lint-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - working-directory: frontend
+        run: npm i eslint && npm run lint

.github/workflows/release.yaml

@@ -3,7 +3,7 @@ name: release
 on:
   push:
     branches:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - "v[0-9]+.[0-9]+.[0-9]+"
 
 permissions:
   contents: write
@@ -14,60 +14,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT }}
       - name: Extract branch name
         shell: bash
         run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT
         id: extract_branch
+      - uses: actions/setup-go@v5
+        with:
+          go-version: 1.22.2
       - name: Create Release
-        id: create_release
-        uses: actions/create-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: softprops/action-gh-release@v2
         with:
+          target_commitish: ${{ steps.extract_branch.outputs.branch }}
+          token: ${{ secrets.PAT }}
           tag_name: ${{ steps.extract_branch.outputs.branch }}
-          release_name: ${{ steps.extract_branch.outputs.branch }}
-          body: |
-            Please see usage on [readme](https://github.com/gtsteffaniak/filebrowser).
-            Docker repo: https://hub.docker.com/r/gtstef/filebrowser/tags
-          draft: false
           prerelease: false
-  test-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go test -race -v ./...
-  lint-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.54.2
-      - run: cd backend && golangci-lint run
-  format-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-go@v4
-        with:
-          go-version: 1.22.0
-      - run: cd backend && go fmt ./...
-  lint-frontend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '20'
-      - run: cd frontend && npm i eslint
-      - run: cd frontend && npm run lint
+          draft: false
+          generate_release_notes: true
+          name: ${{ steps.extract_branch.outputs.branch }}
   push_release_to_registry:
-    needs: [lint-frontend, lint-backend, test-backend, format-backend]
     name: Push release
     runs-on: ubuntu-latest
     steps:
@@ -91,7 +58,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        uses: docker/metadata-action@v5
         with:
           images: gtstef/filebrowser
       - name: Strip v from version number

.github/workflows/tag.yaml

@@ -0,0 +1,31 @@
+name: tag
+
+on:
+  push:
+    tags:
+      - "v*"
+
+permissions:
+  contents: write
+
+jobs:
+  update_tag:
+    name: Update Release tag
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+      - name: Install dependencies and build frontend
+        run: npm i && npm run build
+        working-directory: frontend
+      - name: Install UPX
+        run: sudo apt-get install -y upx
+      - name: Run GoReleaser
+        uses: goreleaser/goreleaser-action@v6
+        with:
+          args: release --clean
+          workdir: backend
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -6,8 +6,11 @@ rice-box.go
 /filebrowser
 /filebrowser.exe
 /frontend/dist
+/frontend/pkg
+/frontend/package-lock.json
 /backend/vendor
 /backend/*.cov
+/backend/test_config.yaml
 
 .DS_Store
 node_modules

CHANGELOG.md

@@ -2,16 +2,42 @@
 
 All notable changes to this project will be documented in this file. For commit guidelines, please refer to [Standard Version](https://github.com/conventional-changelog/standard-version).
 
+## v0.2.7
+
+ - **Change**: New sidebar style and behavior
+ - **Change**: make search view and button behavior more consistent.
+ - **Fix**: [upload file bug](https://github.com/gtsteffaniak/filebrowser/issues/153)
+ - **Fix**: user lock out bug introduced in 0.2.6
+ - **Fix**: many minor state related issues.
+
+## v0.2.6
+
+This change focuses on minimizing and simplifying build process.
+
+- **Change**: Migrated to Vite / Vue 3
+- **Change**: removed npm modules
+  - replaced vuex with custom state management via src/store
+  - replaced noty with simple card popup notifications
+  - replaced moment with simple date formatter where needed
+  - replaced vue-simple-progress with vue component
+- **Feature**: improved error logging
+  - backend errors show the root function that called them during the error
+  - frontend errors print errors to console that fail try/catch
+  - all frontend errors via popup notification & print to console as well
+- **Fix**: Allow editing blank text based files in editor
+- tweaked listing styles
+- Feature: Allow disabling the index via configuration yaml
+
 ## v0.2.5
 
 - Fix: delete user prompt works using native hovers.
 
 ## v0.2.4
 
-- Faature: [create-folder-feature](https://github.com/gtsteffaniak/filebrowser/pull/105)
+- Feature: [create-folder-feature](https://github.com/gtsteffaniak/filebrowser/pull/105)
 - Feature: [playable shared video](https://github.com/filebrowser/filebrowser/issues/2537)
 - Feature: photos, videos, and audio get embedded preview on share instead of icon
-- FIX: sharable link bug, now uses special publicUser
+- Fix: sharable link bug, now uses special publicUser
 - Bump go version to 1.22
 - In prep for vue3 migration, npm modules removed:
   - js-base64

Dockerfile

@@ -1,22 +1,19 @@
 FROM node:slim as nbuild
 WORKDIR /app
-COPY  ./frontend/package*.json ./
-RUN npm ci --maxsockets 1
+COPY ./frontend/package*.json ./
+RUN npm i --maxsockets 1
 COPY  ./frontend/ ./
-RUN npm run build
+RUN npm run build-docker
 
 FROM golang:1.22-alpine as base
 WORKDIR /app
-COPY  ./backend ./
-RUN go get -u golang.org/x/net
+COPY ./backend ./
 RUN go build -ldflags="-w -s" -o filebrowser .
 
 FROM alpine:latest
+ENV FILEBROWSER_NO_EMBEDED="true"
 ARG app="/app/filebrowser"
-RUN apk --no-cache add \
-      ca-certificates \
-      mailcap
-WORKDIR /
+RUN apk --no-cache add ca-certificates mailcap
 COPY --from=base /app/filebrowser* ./
 COPY --from=nbuild /app/dist/ ./frontend/dist/
 ENTRYPOINT [ "./filebrowser" ]

README.md

@@ -2,54 +2,75 @@
   <a href="https://opensource.org/license/apache-2-0/"><img src="https://img.shields.io/badge/License-Apache_2.0-blue.svg" alt="License: Apache-2.0"></a>
 </p>
 <p align="center">
-<img src="frontend/public/img/icons/favicon-256x256.png" width="100" title="Login With Custom URL">
+  <img src="frontend/public/img/icons/favicon-256x256.png" width="100" title="Login With Custom URL">
 </p>
-<h3 align="center">Filebrowser - A modern file manager for the web</h3>
+<h3 align="center">Filebrowser - A modern web-based file manager</h3>
 <p align="center">
-  <img width="800" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/899152cf-3e69-4179-aa82-752af2df3fc6" title="Main Screenshot">
+  <img width="800" src="https://github.com/user-attachments/assets/8ba93582-aba2-4996-8ac3-25f763a2e596" title="Main Screenshot">
 </p>
 
 > [!WARNING]
-> Starting with v0.2.0, *ALL* configuration is done via `filebrowser.yaml` configuration file.
-> Starting with v0.2.4 *ALL* share links need to be re-created (due to security fix).
+> Starting with v0.2.0, *ALL* configuration is done via `filebrowser.yaml`
+> Configuration file.
+> Starting with v0.2.4 *ALL* share links need to be re-created (due to
+> security fix).
 
-This fork makes the following significant changes to filebrowser for origin:
+This fork makes the following significant changes to filebrowser for
+origin:
 
- 1. [x] Better search.
-    - Lightning fast
-    - realtime results as you type
-    - Works with more type filters
-    - interactive results page.
- 2. [x] Revamped and simplified GUI navbar and sidebar menu.
- 3. [x] **IMPORTANT** Revamped configuration via `filebrowser.yml` config file.
- 4. [x] More configurations possible at a per-user level
-    - <img width="450" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/625bd7c4-5ee9-4011-aaae-2a388ab0813b">
- 5. [x] Additional compact view mode as well as refreshed view mode styles.
+  1. [x] Better search
+     - Lightning fast
+     - real-time results as you type
+     - Works with more type filters
+     - interactive results page.
+  2. [x] Revamped and simplified GUI navbar and sidebar menu.
+     - Additional compact view mode as well as refreshed view mode
+       styles.
+  3. [x] Revamped configuration via `filebrowser.yml` config file.
+     - More configurations possible at a per-user level
 
 ## About
 
 Filebrowser provides a file managing interface within a specified directory
-and it can be used to upload, delete, preview, rename and edit your files.
-It allows the creation of multiple users and each user can have its own
-directory. It can be used as a standalone app.
+and can be used to upload, delete, preview, rename, and edit your files.
+It allows the creation of multiple users and each user can have its 
+directory.
 
 This repository is a fork, a collection of changes that make this program
-work better in terms of asthetics and performance. Improved search,
- simplified ui (without removing features) and more secure and up-to-date
- build are just a few examples.
+work better in terms of aesthetics and performance. Improved search,
+simplified ui (without removing features) and more secure and up-to-date
+build are just a few examples.
+
+This Implementation of filebrowser differs significantly to the original.
+There are hundreds of thousands of lines changed and they are generally
+no longer compatible with each other. This has been intentional -- the
+focus of this fork is on a few key principles:
+  - Simplicity and improved user experience
+  - Efficiency of operations and performance
+  - Minimize external dependencies and standard library usage.
+  - Of course -- adding much-needed features.
 
 ## Look
-<p align="center">
-  <img width="500" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/35cdeb3b-ab79-4b04-8001-8f51f6ea06bb" title="Dark mode">
-<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/55fa4f5c-440e-4a97-b711-96139208a163">
-<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/c76f4100-949b-4e17-a3e6-e410fb8ec08f">
-<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/0bde26f3-fa90-411e-bd0b-abaa47506d62">
-<img width="560" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/71d8f2b8-6fe6-4fdc-8aac-503d08c28d86">
 
+One way you can observe the improved user experience is how I changed
+the UI. The Navbar is simplified to a three-component system :
+
+  1. (Left) The slide-out action panel button
+  2. (Middle) The powerful search bar.
+  3. (Right) The view change toggle.
+
+All other functions are moved either into the action menu or popup menus.
+If the action does not depend on context, it will exist in the slide-out
+action panel. If the action is available based on context, it will show up as
+a popup menu.
+
+<p align="center">
+  <img width="800" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/899152cf-3e69-4179-aa82-752af2df3fc6" title="Main Screenshot">
+    <img width="800" src="https://github.com/user-attachments/assets/18c02d03-5c60-4e15-9c32-3cfe058a0c49" title="Main Screenshot">
+      <img width="800" src="https://github.com/user-attachments/assets/75226dc4-9802-46f0-9e3c-e4403d3275da" title="Main Screenshot">
 
 </p>
 
-
 ## Install
 
 Using docker:
@@ -101,43 +122,45 @@ volumes:
 
 ```
 
-Not using docker (not recommended)
+Not using docker (not recommended), download your binary from releases and run with your custom config file:
 
 ```
-./filebrowser -f <filebrowser.yml or other /path/to/config.yaml>
+./filebrowser -c <filebrowser.yml or other /path/to/config.yaml>
 ```
 
 ## Configuration
 
-All configuration is now done via a single configuration file: `filebrowser.yaml`, here is an example minimal [configuration file](./backend/filebrowser.yaml).
+All configuration is now done via a single configuration file:
+`filebrowser.yaml`, here is an example of minimal [configuration
+file](./backend/filebrowser.yaml).
 
-View the [Configuration Help Page](./configuration.md) for available configuration options and other help.
+View the [Configuration Help Page](./configuration.md) for available
+configuration options and other help.
 
 
 ## Migration from filebrowser/filebrowser
 
-If you are currently using filebrowser from the filebrowser/filebrowser repo, but want to try using this. I recommend you start fresh without reusing the database, but there are a few things you'll need to do if you must migrate:
+If you currently use filebrowser from the filebrowser/filebrowser
+repo but want to try using this. I recommend you start fresh without
+reusing the database, but there are a few things you'll need to do if you
+must migrate:
 
 1. Create a configuration file as mentioned above.
-2. Copy your database file from the original filebrowser to the path of the new one.
-3. Update the configuration file to use the database (under server in filebrowser.yml)
-4. If you are using docker, update the docker-compose file or docker run command to use the config file as described in the install section above.
-5. If you are not using docker, just make sure you run filebrowser -f filebrowser.yml and have valid filebrowser config.
+2. Copy your database file from the original filebrowser to the path of
+   the new one.
+3. Update the configuration file to use the database (under server in
+   filebrowser.yml)
+4. If you are using docker, update the docker-compose file or docker run
+   command to use the config file as described in the install section
+   above.
+5. If you are not using docker, just make sure you run filebrowser -c
+   filebrowser.yml and have a valid filebrowser config.
 
 
-The filebrowser application should run with the same user and rules that you have from the original. But keep in mind the differences that are mentioned at the top of this readme.
-
-### background & help
-
-The original project filebrowser/filebrowser used multiple different ways to configure the server.
-This was confusing and difficult to work with from a user and from a developer's perspective.
-So I completely redesigned the program to use one single human-readable config file.
-
-I understand many coming from the original fork may notice differences which make using this improved version more difficult. If you notice issues that you believe should be fixed, please open an issue here and it will very likely be addressed with a PR within a few weeks.
-
-This version of filebrowser is going through a configuration overhaul as mentioned above. Certain features related to rules and commands may not work as they do on the original filebrowser. The purpose of this is to create a more consistent experience where configuration is done via files rather than running commands, so that it's very clear what the current state of the configuration is. When running commands its not clear what the configuration is.
+The filebrowser application should run with the same user and rules that
+you have from the original. But keep in mind the differences that are
+mentioned at the top of this readme.
 
 ## Roadmap
 
 see [Roadmap Page](./roadmap.md)
-

backend/.goreleaser.yaml

@@ -0,0 +1,44 @@
+# .goreleaser.yaml
+project_name: filebrowser
+version: 2
+
+builds:
+  # Build configuration for darwin and linux
+  - id: default
+    ldflags:
+      - -s -w
+    main: main.go
+    binary: filebrowser
+    goos:
+      - darwin
+      - linux
+    goarch:
+      - amd64
+      - arm
+      - arm64
+    goarm:
+      - 6
+      - 7
+    hooks:
+      post: 
+        - upx {{ .Path }}  # Compress the binary with UPX
+
+  # Build configuration for windows without arm
+  - id: windows
+    ldflags:
+      - -s -w
+    main: main.go
+    binary: filebrowser
+    goos:
+      - windows
+    goarch:
+      - amd64
+      - arm64
+
+archives:
+  - name_template: "{{.Os}}-{{.Arch}}{{if .Arm}}v{{.Arm}}{{end}}-{{ .ProjectName }}"
+    format: binary
+
+checksum:
+  disable: true
+

backend/cmd/dist/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

backend/cmd/root.go

@@ -3,6 +3,7 @@ package cmd
 import (
 	"crypto/tls"
 	"flag"
+	"fmt"
 	"io/fs"
 	"log"
 	"net"
@@ -12,6 +13,8 @@ import (
 	"strconv"
 	"syscall"
 
+	"embed"
+
 	"github.com/spf13/pflag"
 
 	"github.com/spf13/afero"
@@ -26,6 +29,11 @@ import (
 	"github.com/gtsteffaniak/filebrowser/users"
 )
 
+//go:embed dist/*
+var assets embed.FS
+
+var nonEmbededFS = os.Getenv("FILEBROWSER_NO_EMBEDED") == "true"
+
 type dirFS struct {
 	http.Dir
 }
@@ -41,6 +49,7 @@ func init() {
 	pflag.CommandLine.AddGoFlagSet(flag.CommandLine)
 	pflag.Parse()
 	log.Println("Initializing with config file:", *configFlag)
+	log.Println("Embeded Frontend:", !nonEmbededFS)
 	settings.Initialize(*configFlag)
 }
 
@@ -64,49 +73,65 @@ var rootCmd = &cobra.Command{
 			fileCache = diskcache.New(afero.NewOsFs(), cacheDir)
 		}
 		// initialize indexing and schedule indexing ever n minutes (default 5)
-		go files.InitializeIndex(serverConfig.IndexingInterval, true)
+		go files.InitializeIndex(serverConfig.IndexingInterval, serverConfig.Indexing)
 		_, err := os.Stat(serverConfig.Root)
-		checkErr(err)
+		checkErr(fmt.Sprint("cmd os.Stat ", serverConfig.Root), err)
 		var listener net.Listener
 		address := serverConfig.Address + ":" + strconv.Itoa(serverConfig.Port)
 		switch {
 		case serverConfig.Socket != "":
 			listener, err = net.Listen("unix", serverConfig.Socket)
-			checkErr(err)
+			checkErr("net.Listen", err)
 			socketPerm, err := cmd.Flags().GetUint32("socket-perm") //nolint:govet
-			checkErr(err)
+			checkErr("cmd.Flags().GetUint32", err)
 			err = os.Chmod(serverConfig.Socket, os.FileMode(socketPerm))
-			checkErr(err)
+			checkErr("os.Chmod", err)
 		case serverConfig.TLSKey != "" && serverConfig.TLSCert != "":
 			cer, err := tls.LoadX509KeyPair(serverConfig.TLSCert, serverConfig.TLSKey) //nolint:govet
-			checkErr(err)
+			checkErr("tls.LoadX509KeyPair", err)
 			listener, err = tls.Listen("tcp", address, &tls.Config{
 				MinVersion:   tls.VersionTLS12,
 				Certificates: []tls.Certificate{cer}},
 			)
-			checkErr(err)
+			checkErr("tls.Listen", err)
 		default:
 			listener, err = net.Listen("tcp", address)
-			checkErr(err)
+			checkErr("net.Listen", err)
 		}
 		sigc := make(chan os.Signal, 1)
 		signal.Notify(sigc, os.Interrupt, syscall.SIGTERM)
 		go cleanupHandler(listener, sigc)
-		assetsFs := dirFS{Dir: http.Dir("frontend/dist")}
-		handler, err := fbhttp.NewHandler(imgSvc, fileCache, d.store, &serverConfig, assetsFs)
-		checkErr(err)
-		defer listener.Close()
-		log.Println("Listening on", listener.Addr().String())
-		//nolint: gosec
-		if err := http.Serve(listener, handler); err != nil {
-			log.Fatal(err)
+		if !nonEmbededFS {
+			assetsFs, err := fs.Sub(assets, "dist")
+			if err != nil {
+				log.Fatal("Could not embed frontend. Does backend/cmd/dist exist? Must be built and exist first")
+			}
+			handler, err := fbhttp.NewHandler(imgSvc, fileCache, d.store, &serverConfig, assetsFs)
+			checkErr("fbhttp.NewHandler", err)
+			defer listener.Close()
+			log.Println("Listening on", listener.Addr().String())
+			//nolint: gosec
+			if err := http.Serve(listener, handler); err != nil {
+				log.Fatalf("Could not start server on port %d: %v", serverConfig.Port, err)
+			}
+		} else {
+			assetsFs := dirFS{Dir: http.Dir("frontend/dist")}
+			handler, err := fbhttp.NewHandler(imgSvc, fileCache, d.store, &serverConfig, assetsFs)
+			checkErr("fbhttp.NewHandler", err)
+			defer listener.Close()
+			log.Println("Listening on", listener.Addr().String())
+			//nolint: gosec
+			if err := http.Serve(listener, handler); err != nil {
+				log.Fatalf("Could not start server on port %d: %v", serverConfig.Port, err)
+			}
 		}
+
 	}, pythonConfig{allowNoDB: true}),
 }
 
 func StartFilebrowser() {
 	if err := rootCmd.Execute(); err != nil {
-		log.Fatal(err)
+		log.Fatal("Error starting filebrowser:", err)
 	}
 }
 
@@ -121,16 +146,16 @@ func quickSetup(d pythonData) {
 	settings.Config.Auth.Key = generateKey()
 	if settings.Config.Auth.Method == "noauth" {
 		err := d.store.Auth.Save(&auth.NoAuth{})
-		checkErr(err)
+		checkErr("d.store.Auth.Save", err)
 	} else {
 		settings.Config.Auth.Method = "password"
 		err := d.store.Auth.Save(&auth.JSONAuth{})
-		checkErr(err)
+		checkErr("d.store.Auth.Save", err)
 	}
 	err := d.store.Settings.Save(&settings.Config)
-	checkErr(err)
+	checkErr("d.store.Settings.Save", err)
 	err = d.store.Settings.SaveServer(&settings.Config.Server)
-	checkErr(err)
+	checkErr("d.store.Settings.SaveServer", err)
 	user := &users.User{}
 	settings.Config.UserDefaults.Apply(user)
 	user.Username = settings.Config.Auth.AdminUsername
@@ -150,5 +175,5 @@ func quickSetup(d pythonData) {
 		Admin:    true,
 	}
 	err = d.store.Users.Save(user)
-	checkErr(err)
+	checkErr("d.store.Users.Save", err)
 }

backend/cmd/rule_rm.go

@@ -42,23 +42,23 @@ including 'index_end'.`,
 	},
 	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
 		i, err := strconv.Atoi(args[0])
-		checkErr(err)
+		checkErr("strconv.Atoi", err)
 		f := i
 		if len(args) == 2 { //nolint:gomnd
 			f, err = strconv.Atoi(args[1])
-			checkErr(err)
+			checkErr("strconv.Atoi", err)
 		}
 
 		user := func(u *users.User) {
 			u.Rules = append(u.Rules[:i], u.Rules[f+1:]...)
 			err := d.store.Users.Save(u)
-			checkErr(err)
+			checkErr("d.store.Users.Save", err)
 		}
 
 		global := func(s *settings.Settings) {
 			s.Rules = append(s.Rules[:i], s.Rules[f+1:]...)
 			err := d.store.Settings.Save(s)
-			checkErr(err)
+			checkErr("d.store.Settings.Save", err)
 		}
 
 		runRules(d.store, cmd, user, global)

backend/cmd/rules.go

@@ -33,7 +33,7 @@ func runRules(st *storage.Storage, cmd *cobra.Command, usersFn func(*users.User)
 	id := getUserIdentifier(cmd.Flags())
 	if id != nil {
 		user, err := st.Users.Get("", id)
-		checkErr(err)
+		checkErr("st.Users.Get", err)
 
 		if usersFn != nil {
 			usersFn(user)
@@ -44,7 +44,7 @@ func runRules(st *storage.Storage, cmd *cobra.Command, usersFn func(*users.User)
 	}
 
 	s, err := st.Settings.Get()
-	checkErr(err)
+	checkErr("st.Settings.Get", err)
 
 	if globalFn != nil {
 		globalFn(s)

backend/cmd/rules_add.go

@@ -44,13 +44,13 @@ var rulesAddCmd = &cobra.Command{
 		user := func(u *users.User) {
 			u.Rules = append(u.Rules, rule)
 			err := d.store.Users.Save(u)
-			checkErr(err)
+			checkErr("d.store.Users.Save", err)
 		}
 
 		global := func(s *settings.Settings) {
 			s.Rules = append(s.Rules, rule)
 			err := d.store.Settings.Save(s)
-			checkErr(err)
+			checkErr("d.store.Settings.Save", err)
 		}
 
 		runRules(d.store, cmd, user, global)

backend/cmd/users_add.go

@@ -22,19 +22,19 @@ var usersAddCmd = &cobra.Command{
 			LockPassword: mustGetBool(cmd.Flags(), "lockPassword"),
 		}
 		servSettings, err := d.store.Settings.GetServer()
-		checkErr(err)
+		checkErr("d.store.Settings.GetServer()", err)
 		// since getUserDefaults() polluted s.Defaults.Scope
 		// which makes the Scope not the one saved in the db
 		// we need the right s.Defaults.Scope here
 		s2, err := d.store.Settings.Get()
-		checkErr(err)
+		checkErr("d.store.Settings.Get()", err)
 
 		userHome, err := s2.MakeUserDir(user.Username, user.Scope, servSettings.Root)
-		checkErr(err)
+		checkErr("s2.MakeUserDir", err)
 		user.Scope = userHome
 
 		err = d.store.Users.Save(user)
-		checkErr(err)
+		checkErr("d.store.Users.Save", err)
 		printUsers([]*users.User{user})
 	}, pythonConfig{}),
 }

backend/cmd/users_export.go

@@ -16,9 +16,9 @@ path to the file where you want to write the users.`,
 	Args: jsonYamlArg,
 	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
 		list, err := d.store.Users.Gets("")
-		checkErr(err)
+		checkErr("d.store.Users.Gets", err)
 
 		err = marshal(args[0], list)
-		checkErr(err)
+		checkErr("marshal", err)
 	}, pythonConfig{}),
 }

backend/cmd/users_find.go

@@ -46,6 +46,6 @@ var findUsers = python(func(cmd *cobra.Command, args []string, d pythonData) {
 		list, err = d.store.Users.Gets("")
 	}
 
-	checkErr(err)
+	checkErr("findUsers", err)
 	printUsers(list)
 }, pythonConfig{})

backend/cmd/users_import.go

@@ -27,28 +27,28 @@ list or set it to 0.`,
 	Args: jsonYamlArg,
 	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
 		fd, err := os.Open(args[0])
-		checkErr(err)
+		checkErr("os.Open", err)
 		defer fd.Close()
 
 		list := []*users.User{}
 		err = unmarshal(args[0], &list)
-		checkErr(err)
+		checkErr("unmarshal", err)
 
 		for _, user := range list {
 			err = user.Clean("")
-			checkErr(err)
+			checkErr("Clean", err)
 		}
 
 		if mustGetBool(cmd.Flags(), "replace") {
 			oldUsers, err := d.store.Users.Gets("")
-			checkErr(err)
+			checkErr("d.store.Users.Gets", err)
 
 			err = marshal("users.backup.json", list)
-			checkErr(err)
+			checkErr("marshal users.backup.json", err)
 
 			for _, user := range oldUsers {
 				err = d.store.Users.Delete(user.ID)
-				checkErr(err)
+				checkErr("d.store.Users.Delete", err)
 			}
 		}
 
@@ -60,7 +60,8 @@ 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"))
+					newErr := errors.New("user " + strconv.Itoa(int(user.ID)) + " is already registered")
+					checkErr("", newErr)
 				}
 
 				// If the usernames mismatch, check if there is another one in the DB
@@ -68,7 +69,8 @@ list or set it to 0.`,
 				// operation
 				if user.Username != onDB.Username {
 					if conflictuous, err := d.store.Users.Get("", user.Username); err == nil { //nolint:govet
-						checkErr(usernameConflictError(user.Username, conflictuous.ID, user.ID))
+						newErr := usernameConflictError(user.Username, conflictuous.ID, user.ID)
+						checkErr("usernameConflictError", newErr)
 					}
 				}
 			} else {
@@ -78,7 +80,7 @@ list or set it to 0.`,
 			}
 
 			err = d.store.Users.Save(user)
-			checkErr(err)
+			checkErr("d.store.Users.Save", err)
 		}
 	}, pythonConfig{}),
 }

backend/cmd/users_rm.go

@@ -25,7 +25,7 @@ var usersRmCmd = &cobra.Command{
 			err = d.store.Users.Delete(id)
 		}
 
-		checkErr(err)
+		checkErr("usersRmCmd", err)
 		fmt.Println("user deleted successfully")
 	}, pythonConfig{}),
 }

backend/cmd/users_update.go

@@ -29,10 +29,10 @@ options you want to change.`,
 		} else {
 			user, err = d.store.Users.Get("", username)
 		}
-		checkErr(err)
+		checkErr("d.store.Users.Get", err)
 
 		err = d.store.Users.Update(user)
-		checkErr(err)
+		checkErr("d.store.Users.Update", err)
 		printUsers([]*users.User{user})
 	}, pythonConfig{}),
 }

backend/cmd/utils.go

@@ -3,6 +3,7 @@ package cmd
 import (
 	"encoding/json"
 	"errors"
+	"fmt"
 	"log"
 	"os"
 	"path/filepath"
@@ -17,33 +18,33 @@ import (
 	"github.com/gtsteffaniak/filebrowser/storage/bolt"
 )
 
-func checkErr(err error) {
+func checkErr(source string, err error) {
 	if err != nil {
-		log.Fatal(err)
+		log.Fatalf("%s: %v", source, err)
 	}
 }
 
 func mustGetString(flags *pflag.FlagSet, flag string) string {
 	s, err := flags.GetString(flag)
-	checkErr(err)
+	checkErr("mustGetString", err)
 	return s
 }
 
 func mustGetBool(flags *pflag.FlagSet, flag string) bool {
 	b, err := flags.GetBool(flag)
-	checkErr(err)
+	checkErr("mustGetBool", err)
 	return b
 }
 
 func mustGetUint(flags *pflag.FlagSet, flag string) uint {
 	b, err := flags.GetUint(flag)
-	checkErr(err)
+	checkErr("mustGetUint", err)
 	return b
 }
 
 func generateKey() []byte {
 	k, err := settings.GenerateKey()
-	checkErr(err)
+	checkErr("generateKey", err)
 	return k
 }
 
@@ -96,18 +97,19 @@ func python(fn pythonFunc, cfg pythonConfig) cobraFunc {
 
 		data.hadDB = exists
 		db, err := storm.Open(path)
-		checkErr(err)
+		checkErr(fmt.Sprintf("storm.Open path %v", path), err)
 
 		defer db.Close()
 		data.store, err = bolt.NewStorage(db)
-		checkErr(err)
+		checkErr("bolt.NewStorage", err)
 		fn(cmd, args, data)
 	}
 }
 
 func marshal(filename string, data interface{}) error {
 	fd, err := os.Create(filename)
-	checkErr(err)
+
+	checkErr("os.Create", err)
 	defer fd.Close()
 
 	switch ext := filepath.Ext(filename); ext {
@@ -125,7 +127,7 @@ func marshal(filename string, data interface{}) error {
 
 func unmarshal(filename string, data interface{}) error {
 	fd, err := os.Open(filename)
-	checkErr(err)
+	checkErr("os.Open", err)
 	defer fd.Close()
 
 	switch ext := filepath.Ext(filename); ext {

backend/filebrowser.yaml

@@ -1,7 +1,7 @@
 server:
   port: 80
   baseURL:  "/"
-  root: "/srv"
+  root: "./srv"
 auth:
   method: password
   signup: false

backend/files/file.go

@@ -123,7 +123,7 @@ func FileInfoFaster(opts FileOptions) (*FileInfo, error) {
 	if exists && !opts.Content {
 		// Check if the cache time is less than 1 second
 		if time.Since(info.CacheTime) > time.Second {
-			go refreshFileInfo(opts)
+			go RefreshFileInfo(opts)
 		}
 		// refresh cache after
 		return &info, nil
@@ -133,7 +133,7 @@ func FileInfoFaster(opts FileOptions) (*FileInfo, error) {
 			file, err := NewFileInfo(opts)
 			return file, err
 		}
-		updated := refreshFileInfo(opts)
+		updated := RefreshFileInfo(opts)
 		if !updated {
 			file, err := NewFileInfo(opts)
 			return file, err
@@ -146,7 +146,7 @@ func FileInfoFaster(opts FileOptions) (*FileInfo, error) {
 	}
 }
 
-func refreshFileInfo(opts FileOptions) bool {
+func RefreshFileInfo(opts FileOptions) bool {
 	if !opts.Checker.Check(opts.Path) {
 		return false
 	}
@@ -286,11 +286,15 @@ func (i *FileInfo) addContent(path string) error {
 		if err != nil {
 			return err
 		}
-		c := string(string(content))
-		if !utf8.ValidString(c) {
+		stringContent := string(content)
+		if !utf8.ValidString(stringContent) {
 			return nil
 		}
-		i.Content = string(c)
+		if stringContent == "" {
+			i.Content = "empty-file-x6OlSil"
+			return nil
+		}
+		i.Content = stringContent
 	}
 	return nil
 }

backend/frontend/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "frontend",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

backend/go.mod

@@ -1,13 +1,13 @@
 module github.com/gtsteffaniak/filebrowser
 
-go 1.22.0
+go 1.22.5
 
 require (
 	github.com/asdine/storm/v3 v3.2.1
 	github.com/disintegration/imaging v1.6.2
 	github.com/dsoprea/go-exif/v3 v3.0.1
 	github.com/flynn/go-shlex v0.0.0-20150515145356-3f9db97f8568
-	github.com/goccy/go-yaml v1.11.3
+	github.com/goccy/go-yaml v1.12.0
 	github.com/golang-jwt/jwt/v4 v4.5.0
 	github.com/google/go-cmp v0.6.0
 	github.com/gorilla/mux v1.8.1
@@ -15,42 +15,42 @@ require (
 	github.com/mholt/archiver/v3 v3.5.1
 	github.com/shirou/gopsutil/v3 v3.24.5
 	github.com/spf13/afero v1.11.0
-	github.com/spf13/cobra v1.8.0
+	github.com/spf13/cobra v1.8.1
 	github.com/spf13/pflag v1.0.5
 	github.com/stretchr/testify v1.9.0
 	github.com/tomasen/realip v0.0.0-20180522021738-f0c99a92ddce
-	golang.org/x/crypto v0.24.0
-	golang.org/x/image v0.17.0
+	golang.org/x/crypto v0.25.0
+	golang.org/x/image v0.18.0
 	golang.org/x/text v0.16.0
 )
 
 require (
-	github.com/andybalholm/brotli v1.1.0 // indirect
+	github.com/andybalholm/brotli v1.0.1 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
 	github.com/dsnet/compress v0.0.2-0.20210315054119-f66993602bf5 // indirect
 	github.com/dsoprea/go-logging v0.0.0-20200710184922-b02d349568dd // indirect
 	github.com/dsoprea/go-utility/v2 v2.0.0-20221003172846-a3e1774ef349 // indirect
-	github.com/fatih/color v1.17.0 // indirect
-	github.com/go-errors/errors v1.5.1 // indirect
-	github.com/go-ole/go-ole v1.3.0 // indirect
-	github.com/golang/geo v0.0.0-20230421003525-6adc56603217 // indirect
-	github.com/golang/snappy v0.0.4 // indirect
+	github.com/fatih/color v1.10.0 // indirect
+	github.com/go-errors/errors v1.4.2 // indirect
+	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/golang/geo v0.0.0-20210211234256-740aa86cb551 // indirect
+	github.com/golang/snappy v0.0.2 // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
-	github.com/klauspost/compress v1.17.9 // indirect
-	github.com/klauspost/pgzip v1.2.6 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/nwaples/rardecode v1.1.3 // indirect
-	github.com/pierrec/lz4/v4 v4.1.21 // indirect
+	github.com/klauspost/compress v1.11.4 // indirect
+	github.com/klauspost/pgzip v1.2.5 // indirect
+	github.com/mattn/go-colorable v0.1.8 // indirect
+	github.com/mattn/go-isatty v0.0.12 // indirect
+	github.com/nwaples/rardecode v1.1.0 // indirect
+	github.com/pierrec/lz4/v4 v4.1.2 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
-	github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect
-	github.com/ulikunitz/xz v0.5.12 // indirect
+	github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c // indirect
+	github.com/ulikunitz/xz v0.5.9 // indirect
 	github.com/xi2/xz v0.0.0-20171230120015-48954b6210f8 // indirect
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
-	go.etcd.io/bbolt v1.3.10 // indirect
-	golang.org/x/net v0.26.0 // indirect
-	golang.org/x/sys v0.21.0 // indirect
-	golang.org/x/xerrors v0.0.0-20231012003039-104605ab7028 // indirect
+	go.etcd.io/bbolt v1.3.4 // indirect
+	golang.org/x/net v0.21.0 // indirect
+	golang.org/x/sys v0.22.0 // indirect
+	golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2 // indirect
 	gopkg.in/yaml.v2 v2.4.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

backend/go.sum

@@ -2,12 +2,11 @@ github.com/DataDog/zstd v1.4.1 h1:3oxKN3wbHibqx897utPC2LTQU4J+IHWWJO+glkAkpFM=
 github.com/DataDog/zstd v1.4.1/go.mod h1:1jcaCB/ufaK+sKp1NBhlGmpz41jOoPQ35bpF36t7BBo=
 github.com/Sereal/Sereal v0.0.0-20190618215532-0b8ac451a863 h1:BRrxwOZBolJN4gIwvZMJY1tzqBvQgpaZiQRuIDD40jM=
 github.com/Sereal/Sereal v0.0.0-20190618215532-0b8ac451a863/go.mod h1:D0JMgToj/WdxCgd30Kc1UcA9E+WdZoJqeVOuYW7iTBM=
+github.com/andybalholm/brotli v1.0.1 h1:KqhlKozYbRtJvsPrrEeXcO+N2l6NYT5A2QAFmSULpEc=
 github.com/andybalholm/brotli v1.0.1/go.mod h1:loMXtMfwqflxFJPmdbJO0a3KNoPuLBgiu3qAvBg8x/Y=
-github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
-github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
 github.com/asdine/storm/v3 v3.2.1 h1:I5AqhkPK6nBZ/qJXySdI7ot5BlXSZ7qvDY1zAn5ZJac=
 github.com/asdine/storm/v3 v3.2.1/go.mod h1:LEpXwGt4pIqrE/XcTvCnZHT5MgZCV6Ub9q7yQzOFWr0=
-github.com/cpuguy83/go-md2man/v2 v2.0.3/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
+github.com/cpuguy83/go-md2man/v2 v2.0.4/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
@@ -32,42 +31,38 @@ github.com/dsoprea/go-utility/v2 v2.0.0-20221003142440-7a1927d49d9d/go.mod h1:LV
 github.com/dsoprea/go-utility/v2 v2.0.0-20221003160719-7bc88537c05e/go.mod h1:VZ7cB0pTjm1ADBWhJUOHESu4ZYy9JN+ZPqjfiW09EPU=
 github.com/dsoprea/go-utility/v2 v2.0.0-20221003172846-a3e1774ef349 h1:DilThiXje0z+3UQ5YjYiSRRzVdtamFpvBQXKwMglWqw=
 github.com/dsoprea/go-utility/v2 v2.0.0-20221003172846-a3e1774ef349/go.mod h1:4GC5sXji84i/p+irqghpPFZBF8tRN/Q7+700G0/DLe8=
-github.com/fatih/color v1.17.0 h1:GlRw1BRJxkpqUCBKzKOw098ed57fEsKeNjpTe3cSjK4=
-github.com/fatih/color v1.17.0/go.mod h1:YZ7TlrGPkiz6ku9fK3TLD/pl3CpsiFyu8N92HLgmosI=
+github.com/fatih/color v1.10.0 h1:s36xzo75JdqLaaWoiEHk767eHiwo0598uUxyfiPkDsg=
+github.com/fatih/color v1.10.0/go.mod h1:ELkj/draVOlAH/xkhN6mQ50Qd0MPOk5AAr3maGEBuJM=
 github.com/flynn/go-shlex v0.0.0-20150515145356-3f9db97f8568 h1:BHsljHzVlRcyQhjrss6TZTdY2VfCqZPbv5k3iBFa2ZQ=
 github.com/flynn/go-shlex v0.0.0-20150515145356-3f9db97f8568/go.mod h1:xEzjJPgXI435gkrCt3MPfRiAkVrwSbHsst4LCFVfpJc=
 github.com/go-errors/errors v1.0.1/go.mod h1:f4zRHt4oKfwPJE5k8C9vpYG+aDHdBFUsgrm6/TyX73Q=
 github.com/go-errors/errors v1.0.2/go.mod h1:psDX2osz5VnTOnFWbDeWwS7yejl+uV3FEWEp4lssFEs=
 github.com/go-errors/errors v1.1.1/go.mod h1:psDX2osz5VnTOnFWbDeWwS7yejl+uV3FEWEp4lssFEs=
+github.com/go-errors/errors v1.4.2 h1:J6MZopCL4uSllY1OfXM374weqZFFItUbrImctkmUxIA=
 github.com/go-errors/errors v1.4.2/go.mod h1:sIVyrIiJhuEF+Pj9Ebtd6P/rEYROXFi3BopGUQ5a5Og=
-github.com/go-errors/errors v1.5.1 h1:ZwEMSLRCapFLflTpT7NKaAc7ukJ8ZPEjzlxt8rPN8bk=
-github.com/go-errors/errors v1.5.1/go.mod h1:sIVyrIiJhuEF+Pj9Ebtd6P/rEYROXFi3BopGUQ5a5Og=
+github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
 github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
-github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE=
-github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78=
 github.com/go-playground/locales v0.13.0 h1:HyWk6mgj5qFqCT5fjGBuRArbVDfE4hi8+e8ceBS/t7Q=
 github.com/go-playground/locales v0.13.0/go.mod h1:taPMhCMXrRLJO55olJkUXHZBHCxTMfnGwq/HNwmWNS8=
 github.com/go-playground/universal-translator v0.17.0 h1:icxd5fm+REJzpZx7ZfpaD876Lmtgy7VtROAbHHXk8no=
 github.com/go-playground/universal-translator v0.17.0/go.mod h1:UkSxE5sNxxRwHyU+Scu5vgOQjsIJAF8j9muTVoKLVtA=
 github.com/go-playground/validator/v10 v10.4.1 h1:pH2c5ADXtd66mxoE0Zm9SUhxE20r7aM3F26W0hOn+GE=
 github.com/go-playground/validator/v10 v10.4.1/go.mod h1:nlOn6nFhuKACm19sB/8EGNn9GlaMV7XkbRSipzJ0Ii4=
-github.com/goccy/go-yaml v1.11.3 h1:B3W9IdWbvrUu2OYQGwvU1nZtvMQJPBKgBUuweJjLj6I=
-github.com/goccy/go-yaml v1.11.3/go.mod h1:wKnAMd44+9JAAnGQpWVEgBzGt3YuTaQ4uXoHvE4m7WU=
+github.com/goccy/go-yaml v1.12.0 h1:/1WHjnMsI1dlIBQutrvSMGZRQufVO3asrHfTwfACoPM=
+github.com/goccy/go-yaml v1.12.0/go.mod h1:wKnAMd44+9JAAnGQpWVEgBzGt3YuTaQ4uXoHvE4m7WU=
 github.com/golang-jwt/jwt/v4 v4.5.0 h1:7cYmW1XlMY7h7ii7UhUyChSgS5wUJEnm9uZVTGqOWzg=
 github.com/golang-jwt/jwt/v4 v4.5.0/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
 github.com/golang/geo v0.0.0-20190916061304-5b978397cfec/go.mod h1:QZ0nwyI2jOfgRAoBvP+ab5aRr7c9x7lhGEJrKvBwjWI=
 github.com/golang/geo v0.0.0-20200319012246-673a6f80352d/go.mod h1:QZ0nwyI2jOfgRAoBvP+ab5aRr7c9x7lhGEJrKvBwjWI=
+github.com/golang/geo v0.0.0-20210211234256-740aa86cb551 h1:gtexQ/VGyN+VVFRXSFiguSNcXmS6rkKT+X7FdIrTtfo=
 github.com/golang/geo v0.0.0-20210211234256-740aa86cb551/go.mod h1:QZ0nwyI2jOfgRAoBvP+ab5aRr7c9x7lhGEJrKvBwjWI=
-github.com/golang/geo v0.0.0-20230421003525-6adc56603217 h1:HKlyj6in2JV6wVkmQ4XmG/EIm+SCYlPZ+V4GWit7Z+I=
-github.com/golang/geo v0.0.0-20230421003525-6adc56603217/go.mod h1:8wI0hitZ3a1IxZfeH3/5I97CI8i5cLGsYe7xNhQGs9U=
 github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.3.2/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=
 github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
 github.com/golang/snappy v0.0.1/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
+github.com/golang/snappy v0.0.2 h1:aeE13tS0IiQgFjYdoL8qN3K1N2bXXtI6Vi51/y7BpMw=
 github.com/golang/snappy v0.0.2/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
-github.com/golang/snappy v0.0.4 h1:yAGX7huGHXlcLOEtBnF4w7FQwA26wojNCwOYAEhLjQM=
-github.com/golang/snappy v0.0.4/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
 github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
@@ -78,13 +73,11 @@ github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLf
 github.com/jessevdk/go-flags v1.4.0/go.mod h1:4FA24M0QyGHXBuZZK/XkWh8h0e1EYbRYJSGM75WSRxI=
 github.com/jessevdk/go-flags v1.5.0/go.mod h1:Fw0T6WPc1dYxT4mKEZRfG5kJhaTDP9pj1c2EWnYs/m4=
 github.com/klauspost/compress v1.4.1/go.mod h1:RyIbtBH6LamlWaDj8nUwkbUhJ87Yi3uG0guNDohfE1A=
+github.com/klauspost/compress v1.11.4 h1:kz40R/YWls3iqT9zX9AHN3WoVsrAWVyui5sxuLqiXqU=
 github.com/klauspost/compress v1.11.4/go.mod h1:aoV0uJVorq1K+umq18yTdKaF57EivdYsUV+/s2qKfXs=
-github.com/klauspost/compress v1.17.9 h1:6KIumPrER1LHsvBVuDa0r5xaG0Es51mhhB9BQB2qeMA=
-github.com/klauspost/compress v1.17.9/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
 github.com/klauspost/cpuid v1.2.0/go.mod h1:Pj4uuM528wm8OyEC2QMXAi2YiTZ96dNQPGgoMS4s3ek=
+github.com/klauspost/pgzip v1.2.5 h1:qnWYvvKqedOF2ulHpMG72XQol4ILEJ8k2wwRl/Km8oE=
 github.com/klauspost/pgzip v1.2.5/go.mod h1:Ch1tH69qFZu15pkjo5kYi6mth2Zzwzt50oCQKQE9RUs=
-github.com/klauspost/pgzip v1.2.6 h1:8RXeL5crjEUFnR2/Sn6GJNWtSQ3Dk8pq4CL3jvdDyjU=
-github.com/klauspost/pgzip v1.2.6/go.mod h1:Ch1tH69qFZu15pkjo5kYi6mth2Zzwzt50oCQKQE9RUs=
 github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
@@ -94,30 +87,27 @@ github.com/leodido/go-urn v1.2.0 h1:hpXL4XnriNwQ/ABnpepYM/1vCLWNDfUNts8dX3xTG6Y=
 github.com/leodido/go-urn v1.2.0/go.mod h1:+8+nEpDfqqsY+g338gtMEUOtuK+4dEMhiQEgxpxOKII=
 github.com/marusama/semaphore/v2 v2.5.0 h1:o/1QJD9DBYOWRnDhPwDVAXQn6mQYD0gZaS1Tpx6DJGM=
 github.com/marusama/semaphore/v2 v2.5.0/go.mod h1:z9nMiNUekt/LTpTUQdpp+4sJeYqUGpwMHfW0Z8V8fnQ=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-colorable v0.1.8 h1:c1ghPdyEDarC70ftn0y+A/Ee++9zz8ljHG1b13eJ0s8=
+github.com/mattn/go-colorable v0.1.8/go.mod h1:u6P/XSegPjTcexA+o6vUJrdnUu04hMope9wVRipJSqc=
+github.com/mattn/go-isatty v0.0.12 h1:wuysRhFDzyxgEmMf5xjvJ2M9dZoWAXNNr5LSBS7uHXY=
+github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
 github.com/mholt/archiver/v3 v3.5.1 h1:rDjOBX9JSF5BvoJGvjqK479aL70qh9DIpZCl+k7Clwo=
 github.com/mholt/archiver/v3 v3.5.1/go.mod h1:e3dqJ7H78uzsRSEACH1joayhuSyhnonssnDhppzS1L4=
+github.com/nwaples/rardecode v1.1.0 h1:vSxaY8vQhOcVr4mm5e8XllHWTiM4JF507A0Katqw7MQ=
 github.com/nwaples/rardecode v1.1.0/go.mod h1:5DzqNKiOdpKKBH87u8VlvAnPZMXcGRhxWkRpHbbfGS0=
-github.com/nwaples/rardecode v1.1.3 h1:cWCaZwfM5H7nAD6PyEdcVnczzV8i/JtotnyW/dD9lEc=
-github.com/nwaples/rardecode v1.1.3/go.mod h1:5DzqNKiOdpKKBH87u8VlvAnPZMXcGRhxWkRpHbbfGS0=
+github.com/pierrec/lz4/v4 v4.1.2 h1:qvY3YFXRQE/XB8MlLzJH7mSzBs74eA2gg52YTk6jUPM=
 github.com/pierrec/lz4/v4 v4.1.2/go.mod h1:gZWDp/Ze/IJXGXf23ltt2EXimqmTUXEy0GFuRQyBid4=
-github.com/pierrec/lz4/v4 v4.1.21 h1:yOVMLb6qSIDP67pl/5F7RepeKYu/VmTyEXvuMI5d9mQ=
-github.com/pierrec/lz4/v4 v4.1.21/go.mod h1:gZWDp/Ze/IJXGXf23ltt2EXimqmTUXEy0GFuRQyBid4=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt9k/+g42oCprj/FisM4qX9L3sZB3upGN2ZU=
-github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
+github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c h1:ncq/mPwQF4JjgDlrVEn3C11VoGHZN7m8qihwgMEtzYw=
+github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
 github.com/shirou/gopsutil/v3 v3.24.5 h1:i0t8kL+kQTvpAYToeuiVk3TgDeKOFioZO3Ztz/iZ9pI=
 github.com/shirou/gopsutil/v3 v3.24.5/go.mod h1:bsoOS1aStSs9ErQ1WWfxllSeS1K5D+U30r2NfcubMVk=
 github.com/spf13/afero v1.11.0 h1:WJQKhtpdm3v2IzqG8VMqrr6Rf3UYpEF239Jy9wNepM8=
 github.com/spf13/afero v1.11.0/go.mod h1:GH9Y3pIexgf1MTIWtNGyogA5MwRIDXGUr+hbWNoBjkY=
-github.com/spf13/cobra v1.8.0 h1:7aJaZx1B85qltLMc546zn58BxxfZdR/W22ej9CFoEf0=
-github.com/spf13/cobra v1.8.0/go.mod h1:WXLWApfZ71AjXPya3WOlMsY9yMs7YeiHhFVlvLyhcho=
+github.com/spf13/cobra v1.8.1 h1:e5/vxKd/rZsfSJMUX1agtjeTDf+qv1/JdBF8gg5k9ZM=
+github.com/spf13/cobra v1.8.1/go.mod h1:wHxEcudfqmLYa8iTfL+OuZPbBZkmvliBWKIezN3kD9Y=
 github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXfy6kDkUVs=
@@ -126,24 +116,22 @@ github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8
 github.com/tomasen/realip v0.0.0-20180522021738-f0c99a92ddce h1:fb190+cK2Xz/dvi9Hv8eCYJYvIGUTN2/KLq1pT6CjEc=
 github.com/tomasen/realip v0.0.0-20180522021738-f0c99a92ddce/go.mod h1:o8v6yHRoik09Xen7gje4m9ERNah1d1PPsVq1VEx9vE4=
 github.com/ulikunitz/xz v0.5.8/go.mod h1:nbz6k7qbPmH4IRqmfOplQw/tblSgqTqBwxkY0oWt/14=
+github.com/ulikunitz/xz v0.5.9 h1:RsKRIA2MO8x56wkkcd3LbtcE/uMszhb6DpRf+3uwa3I=
 github.com/ulikunitz/xz v0.5.9/go.mod h1:nbz6k7qbPmH4IRqmfOplQw/tblSgqTqBwxkY0oWt/14=
-github.com/ulikunitz/xz v0.5.12 h1:37Nm15o69RwBkXM0J6A5OlE67RZTfzUxTj8fB3dfcsc=
-github.com/ulikunitz/xz v0.5.12/go.mod h1:nbz6k7qbPmH4IRqmfOplQw/tblSgqTqBwxkY0oWt/14=
 github.com/vmihailenco/msgpack v4.0.4+incompatible h1:dSLoQfGFAo3F6OoNhwUmLwVgaUXK79GlxNBwueZn0xI=
 github.com/vmihailenco/msgpack v4.0.4+incompatible/go.mod h1:fy3FlTQTDXWkZ7Bh6AcGMlsjHatGryHQYUTf1ShIgkk=
 github.com/xi2/xz v0.0.0-20171230120015-48954b6210f8 h1:nIPpBwaJSVYIxUFsDv3M8ofmx9yWTog9BfvIu0q41lo=
 github.com/xi2/xz v0.0.0-20171230120015-48954b6210f8/go.mod h1:HUYIGzjTL3rfEspMxjDjgmT5uz5wzYJKVo23qUhYTos=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
+go.etcd.io/bbolt v1.3.4 h1:hi1bXHMVrlQh6WwxAy+qZCV/SYIlqo+Ushwdpa4tAKg=
 go.etcd.io/bbolt v1.3.4/go.mod h1:G5EMThwa9y8QZGBClrRx5EY+Yw9kAhnjy3bSjsnlVTQ=
-go.etcd.io/bbolt v1.3.10 h1:+BqfJTcCzTItrop8mq/lbzL8wSGtj94UO/3U31shqG0=
-go.etcd.io/bbolt v1.3.10/go.mod h1:bK3UQLPJZly7IlNmV7uVHJDxfe5aK9Ll93e/74Y9oEQ=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
-golang.org/x/crypto v0.24.0 h1:mnl8DM0o513X8fdIkmyFE/5hTYxbwYOjDS/+rK6qpRI=
-golang.org/x/crypto v0.24.0/go.mod h1:Z1PMYSOR5nyMcyAVAIQSKCDwalqy85Aqn1x3Ws4L5DM=
+golang.org/x/crypto v0.25.0 h1:ypSNr+bnYL2YhwoMt2zPxHFmbAN1KZs/njMG3hxUp30=
+golang.org/x/crypto v0.25.0/go.mod h1:T+wALwcMOSE0kXgUAnPAHqTLW+XHgcELELW8VaDgm/M=
 golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
-golang.org/x/image v0.17.0 h1:nTRVVdajgB8zCMZVsViyzhnMKPwYeroEERRC64JuLco=
-golang.org/x/image v0.17.0/go.mod h1:4yyo5vMFQjVjUcVk4jEQcU9MGy/rulF5WvUILseCM2E=
+golang.org/x/image v0.18.0 h1:jGzIakQa/ZXI1I0Fxvaa9W7yP25TqT6cHIHn+6CqvSQ=
+golang.org/x/image v0.18.0/go.mod h1:4yyo5vMFQjVjUcVk4jEQcU9MGy/rulF5WvUILseCM2E=
 golang.org/x/net v0.0.0-20190603091049-60506f45cf65/go.mod h1:HSz+uSET+XFnRR8LxR5pz3Of3rY3CfYBVs4xY44aLks=
 golang.org/x/net v0.0.0-20191105084925-a882066a44e0/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20191209160850-c0dbc17a3553/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
@@ -151,24 +139,21 @@ golang.org/x/net v0.0.0-20200320220750-118fecf932d8/go.mod h1:z5CRVTTTmAJ677TzLL
 golang.org/x/net v0.0.0-20200501053045-e0ff5e5a1de5/go.mod h1:qpuaurCH72eLCgpAm/N6yyVIVM9cpaDIP3A8BGJEC5A=
 golang.org/x/net v0.0.0-20200513185701-a91f0712d120/go.mod h1:qpuaurCH72eLCgpAm/N6yyVIVM9cpaDIP3A8BGJEC5A=
 golang.org/x/net v0.0.0-20221002022538-bcab6841153b/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
-golang.org/x/net v0.26.0 h1:soB7SVo0PWrY4vPW/+ay0jKDNScG2X9wFeYlXIvJsOQ=
-golang.org/x/net v0.26.0/go.mod h1:5YKkiSynbBIh3p6iOc/vibscux0x38BZDkn8sCUPxHE=
-golang.org/x/sync v0.7.0 h1:YsImfSBoP9QPYL0xyKJPq0gcaJdG3rInoqxTWbfQu9M=
-golang.org/x/sync v0.7.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/net v0.21.0 h1:AQyQV4dYCvJ7vGmJyKki9+PBdyvhkSd8EIx/qb0AYv4=
+golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200202164722-d101bd2416d5/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210320140829-1e4c9ba3b0c4/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220728004956-3c1f35247d10/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220928140112-f11e5e49a4ec/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.21.0 h1:rF+pYz3DAGSQAxAu1CbC7catZg4ebC4UIeIhKxBZvws=
-golang.org/x/sys v0.21.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.22.0 h1:RI27ohtqKCnwULzJLqkv897zojh5/DwS/ENaMzUOaWI=
+golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
@@ -177,8 +162,8 @@ golang.org/x/text v0.16.0 h1:a94ExnEXNtEwYLGJSIUxnWoxoRz/ZcCsV63ROupILh4=
 golang.org/x/text v0.16.0/go.mod h1:GhwF1Be+LQoKShO3cGOHzqOgRrGaYc9AvblQOmPVHnI=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-golang.org/x/xerrors v0.0.0-20231012003039-104605ab7028 h1:+cNy6SZtPcJQH3LJVLOSmiC7MMxXNOb3PU/VUEz+EhU=
-golang.org/x/xerrors v0.0.0-20231012003039-104605ab7028/go.mod h1:NDW/Ps6MPRej6fsCIbMTohpP40sJ/P/vI1MoTEGwX90=
+golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2 h1:H2TDz8ibqkAF6YGhCdN3jS9O0/s90v0rJh3X/OLHEUk=
+golang.org/x/xerrors v0.0.0-20220907171357-04be3eba64a2/go.mod h1:K8+ghG5WaK9qNqU5K3HdILfMLy1f3aNYFI/wnl100a8=
 google.golang.org/appengine v1.6.5/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=
 google.golang.org/appengine v1.6.7 h1:FZR1q0exgwxzPzp/aF+VccGrSfxfPpkBqjIIEq3ru6c=
 google.golang.org/appengine v1.6.7/go.mod h1:8WjMMxjGQR8xUklV/ARdw2HLXBOI7O7uCIDZVag1xfc=

backend/http/public.go

@@ -46,7 +46,7 @@ var withHashFile = func(fn handleFunc) handleFunc {
 			Fs:         fsPath,
 			Path:       lastComponent,
 			Modify:     d.user.Perm.Modify,
-			Expand:     false,
+			Expand:     true,
 			ReadHeader: d.server.TypeDetectionByHeader,
 			Checker:    d,
 			Token:      link.Token,

backend/http/resource.go

@@ -167,7 +167,6 @@ var resourcePutHandler = withUser(func(w http.ResponseWriter, r *http.Request, d
 		w.Header().Set("ETag", etag)
 		return nil
 	}, "save", r.URL.Path, "", d.user)
-
 	return errToStatus(err), err
 })
 
@@ -272,6 +271,10 @@ func writeFile(fs afero.Fs, dst string, in io.Reader) (os.FileInfo, error) {
 		return nil, err
 	}
 
+	//files.RefreshFileInfo(files.FileOptions{
+	//	Fs: info,
+	//})
+
 	return info, nil
 }
 

backend/http/static.go

@@ -64,9 +64,7 @@ func handleWithStaticData(w http.ResponseWriter, _ *http.Request, d *data, fSys
 		if err != nil {
 			return http.StatusInternalServerError, err
 		}
-
 		auther := raw.(*auth.JSONAuth)
-
 		if auther.ReCaptcha != nil {
 			data["ReCaptcha"] = auther.ReCaptcha.Key != "" && auther.ReCaptcha.Secret != ""
 			data["ReCaptchaHost"] = auther.ReCaptcha.Host
@@ -104,7 +102,7 @@ func getStaticHandlers(store *storage.Storage, server *settings.Server, assetsFs
 		}
 
 		w.Header().Set("x-xss-protection", "1; mode=block")
-		return handleWithStaticData(w, r, d, assetsFs, "index.html", "text/html; charset=utf-8")
+		return handleWithStaticData(w, r, d, assetsFs, "public/index.html", "text/html; charset=utf-8")
 	}, "", store, server)
 
 	static = handle(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {

backend/http/users.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"log"
 	"net/http"
+	"reflect"
 	"sort"
 	"strconv"
 
@@ -155,30 +156,24 @@ var userPutHandler = withSelfOrAdmin(func(w http.ResponseWriter, r *http.Request
 		return http.StatusBadRequest, nil
 	}
 
-	if len(req.Which) == 0 || (len(req.Which) == 1 && req.Which[0] == "all") {
-		if !d.user.Perm.Admin {
-			return http.StatusForbidden, nil
-		}
-
-		if req.Data.Password != "" {
-			req.Data.Password, err = users.HashPwd(req.Data.Password)
-		} else {
-			var suser *users.User
-			suser, err = d.store.Users.Get(d.server.Root, d.raw.(uint))
-			req.Data.Password = suser.Password
-		}
-
-		if err != nil {
-			return http.StatusInternalServerError, err
-		}
-
+	if len(req.Which) == 0 || req.Which[0] == "all" {
 		req.Which = []string{}
+		v := reflect.ValueOf(req.Data)
+		if v.Kind() == reflect.Ptr {
+			v = v.Elem()
+		}
+		t := v.Type()
+		for i := 0; i < t.NumField(); i++ {
+			field := t.Field(i)
+			if field.Name != "Password" && field.Name != "Fs" {
+				req.Which = append(req.Which, field.Name)
+			}
+		}
 	}
 
 	for k, v := range req.Which {
 		v = cases.Title(language.English, cases.NoLower).String(v)
 		req.Which[k] = v
-
 		if v == "Password" {
 			if !d.user.Perm.Admin && d.user.LockPassword {
 				return http.StatusForbidden, nil
@@ -195,7 +190,6 @@ var userPutHandler = withSelfOrAdmin(func(w http.ResponseWriter, r *http.Request
 			}
 		}
 	}
-
 	err = d.store.Users.Update(req.Data, req.Which...)
 	if err != nil {
 		return http.StatusInternalServerError, err

backend/settings/config.go

@@ -58,6 +58,7 @@ func setDefaults() Settings {
 			Database:           "database.db",
 			Log:                "stdout",
 			Root:               "/srv",
+			Indexing:           true,
 		},
 		Auth: Auth{
 			TokenExpirationTime: "2h",
@@ -70,6 +71,7 @@ func setDefaults() Settings {
 			},
 		},
 		UserDefaults: UserDefaults{
+			StickySidebar:   true,
 			Scope:           ".",
 			LockPassword:    false,
 			HideDotfiles:    true,
@@ -91,6 +93,7 @@ func setDefaults() Settings {
 
 // Apply applies the default options to a user.
 func (d *UserDefaults) Apply(u *users.User) {
+	u.StickySidebar = d.StickySidebar
 	u.DisableSettings = d.DisableSettings
 	u.DarkMode = d.DarkMode
 	u.Scope = d.Scope

backend/settings/structs.go

@@ -54,6 +54,7 @@ type Server struct {
 	Root                  string `json:"root"`
 	UserHomeBasePath      string `json:"userHomeBasePath"`
 	CreateUserDir         bool   `json:"createUserDir"`
+	Indexing              bool   `json:"indexing"`
 }
 
 type Frontend struct {
@@ -67,6 +68,7 @@ type Frontend struct {
 // UserDefaults is a type that holds the default values
 // for some fields on User.
 type UserDefaults struct {
+	StickySidebar   bool         `json:"stickySidebar"`
 	DarkMode        bool         `json:"darkMode"`
 	LockPassword    bool         `json:"lockPassword"`
 	DisableSettings bool         `json:"disableSettings,omitempty"`

backend/storage/bolt/users.go

@@ -55,7 +55,6 @@ func (st usersBackend) Update(user *users.User, fields ...string) error {
 	if len(fields) == 0 {
 		return st.Save(user)
 	}
-
 	for _, field := range fields {
 		userField := reflect.ValueOf(user).Elem().FieldByName(field)
 		if !userField.IsValid() {
@@ -63,10 +62,9 @@ func (st usersBackend) Update(user *users.User, fields ...string) error {
 		}
 		val := userField.Interface()
 		if err := st.db.UpdateField(user, field, val); err != nil {
-			return err
+			return fmt.Errorf("Error updating user field: %s, error: %v", field, err.Error())
 		}
 	}
-
 	return nil
 }
 

backend/users/users.go

@@ -28,6 +28,7 @@ type Sorting struct {
 
 // User describes a user.
 type User struct {
+	StickySidebar   bool         `json:"stickySidebar"`
 	DarkMode        bool         `json:"darkMode"`
 	DisableSettings bool         `json:"disableSettings"`
 	ID              uint         `storm:"id,increment" json:"id"`

backend/version/version.go

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

configuration.md

@@ -11,6 +11,7 @@ server:
   CreateUserDir: false
   UserHomeBasePath: ""
   indexingInterval: 5
+  indexing: true
   numImageProcessors: 4
   socket: ""
   tlsKey: ""
@@ -113,6 +114,8 @@ userDefaults:
 
 - `indexingInterval`: This is the time in minutes the system waits before checking for filesystem changes. Default: `5`
 
+- `indexing`: This enables or disables indexing. (Note: search will not work without indexing) Default: `true`
+
 - `numImageProcessors`: This is the number of image processors available. Default: `4`
 
 - `socket`: This is the socket configuration.

frontend/.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript"
+  ],
+  "rules": {
+    "vue/multi-word-component-names": "off",
+    "vue/no-mutating-props": [
+      "error",
+      {
+        "shallowOnly": true
+      }
+    ]
+    // no-undef is already included in
+    // @vue/eslint-config-typescript
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  }
+}

frontend/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/app"],
-};

frontend/frontend

@@ -0,0 +1 @@
+frontend

frontend/original.json

@@ -1,47 +0,0 @@
-{
-  "name": "filebrowser-frontend",
-  "version": "2.0.0",
-  "private": true,
-  "scripts": {
-    // vue 3 changes needed
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "fix": "npx vue-cli-service lint",
-    "watch": "vue-cli-service build --watch",
-    "lint": "eslint --ext .vue,.js src/",
-    "lint:fix": "eslint --ext .vue,.js --fix src/",
-    "format": "prettier --write ."
-  },
-  "dependencies": {
-    "ace-builds": "^1.24.2",
-    "clipboard": "^2.0.4",
-    "css-vars-ponyfill": "^2.4.3",
-    "file-loader": "^6.2.0", // UNNECESSARY IN VITE
-    X"js-base64": "^2.5.1", // REPLACE WITH EQUIVALENT JS
-    "lodash.clonedeep": "^4.5.0", // TOO OLD - REPLACE WITH JS
-    "lodash.throttle": "^4.1.1", // TOO OLD - REPLACE WITH JS
-    "material-icons": "^1.10.5",
-    "moment": "^2.29.4", // REPLACE WITH EQUIVALENT JS
-    "normalize.css": "^8.0.1", // REPLACE WITH EQUIVALENT JS
-    "noty": "^3.2.0-beta", // REPLACE WITH EQUIVALENT JS
-    X"pretty-bytes": "^6.0.0", // REPLACE WITH EQUIVALENT JS
-    "qrcode.vue": "^1.7.0", // UPDATE TO LATEST for VUE3
-    "utif": "^3.1.0", // SPIKE investigate replacement
-    "vue": "^2.6.10", // UPDATE to vue 3
-    "vue-async-computed": "^3.9.0", // REPLACE WITH EQUIVALENT JS
-    "vue-i18n": "^8.15.3", // REMOVE
-    "vue-lazyload": "^1.3.3", // REMOVE
-    "vue-router": "^3.1.3", // UPDATE to vue 3 @vue4 https://www.npmjs.com/package/vue-router
-    "vue-simple-progress": "^1.1.1", // REPLACE WITH EQUIVALENT JS
-    "vuex": "^3.1.2", // SPIKE: HOW TO REMOVE
-    "vuex-router-sync": "^5.0.0", // SPIKE: HOW TO REMOVE
-    X"whatwg-fetch": "^3.6.2"
-  },
-  "devDependencies": {
-    "@vue/cli-service": "^5.0.8", // REMOVE for VUE3
-    "compression-webpack-plugin": "^10.0.0", // REPLACE VUE3
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "vue-template-compiler": "^2.6.10" // REPLACE VUE3
-  }
-}

frontend/package.json

@@ -1,15 +1,22 @@
 {
   "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": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "fix": "npx vue-cli-service lint",
-    "watch": "vue-cli-service build --watch",
-    "lint": "eslint src/",
+    "dev": "vite dev",
+    "build": "vite build && cp -R dist/ ../backend/cmd/",
+    "build-docker": "vite build",
+    "watch": "vite build --watch",
+    "typecheck": "vue-tsc -p ./tsconfig.json --noEmit",
+    "lint": "npm run typecheck && eslint src/",
     "lint:fix": "eslint --fix src/",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "test": "playwright test"
   },
   "dependencies": {
     "ace-builds": "^1.24.2",
@@ -17,25 +24,22 @@
     "css-vars-ponyfill": "^2.4.3",
     "file-loader": "^6.2.0",
     "material-icons": "^1.10.5",
-    "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
-    "noty": "^3.2.0-beta",
-    "qrcode.vue": "^1.7.0",
-    "utif": "^3.1.0",
-    "vue": "^2.6.10",
-    "vue-async-computed": "^3.9.0",
-    "vue-i18n": "^8.15.3",
-    "vue-lazyload": "^1.3.3",
-    "vue-router": "^3.1.3",
-    "vue-simple-progress": "^1.1.1",
-    "vuex": "^3.1.2",
-    "vuex-router-sync": "^5.0.0"
+    "qrcode.vue": "^3.4.1",
+    "vue": "^3.4.21",
+    "vue-i18n": "^9.10.2",
+    "vue-lazyload": "^3.0.0",
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@vue/cli-service": "^5.0.8",
-    "compression-webpack-plugin": "^10.0.0",
-    "eslint": "^9.4.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "vue-template-compiler": "^2.6.17"
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.24.0",
+    "vite": "^5.2.7",
+    "vite-plugin-compression2": "^1.0.0",
+    "vue-tsc": "^2.0.7"
   }
-}
+}

frontend/public/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
   [{[ if .ReCaptcha -]}]
-    <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"></script>
+    <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit" data-vite-ignore></script>
   [{[ end ]}]
 
   <title>[{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]</title>
@@ -121,7 +121,7 @@
   <div id="app"></div>
 
   [{[ if .darkMode -]}]
-  <div id="loading dark-mode">
+  <div id="loading" class="dark-mode">
     <div class="spinner">
       <div class="bounce1"></div>
       <div class="bounce2"></div>
@@ -136,6 +136,8 @@
       <div class="bounce3"></div>
     </div>
   </div>  [{[ end ]}]
+  <script type="module" src="/src/main.ts"></script>
+
   [{[ if .CSS -]}]
     <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
   [{[ end ]}]

frontend/src/App.vue

@@ -1,15 +1,24 @@
 <template>
-    <router-view></router-view>
+  <router-view></router-view>
 </template>
 
 <script>
-
-// eslint-disable-next-line no-undef
-__webpack_public_path__ = window.FileBrowser.StaticURL + "/";
+import { onMounted } from 'vue';
+import { mutations } from "@/store"; // Import your store's mutations
 
 export default {
   name: "app",
   computed: {},
+  setup() {
+    onMounted(() => {
+      mutations.setLoading(false); // Call your mutation or method to set loading to false
+      // Query the loading element and remove it from the DOM
+      const loadingDiv = document.getElementById('loading');
+      if (loadingDiv) {
+        loadingDiv.remove();
+      }
+    });
+  },
 };
 </script>
 

frontend/src/api/commands.js

@@ -1,13 +1,13 @@
 import { removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
-import store from "@/store";
+import { state } from "@/store";
 
 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}`;
+  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${state.jwt}`;
 
   let conn = new window.WebSocket(url);
   conn.onopen = () => conn.send(command);

frontend/src/api/files.js

@@ -1,6 +1,6 @@
 import { createURL, fetchURL, removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
-import store from "@/store";
+import { state } from "@/store";
 
 export async function fetch(url,content=false) {
   url = removePrefix(url);
@@ -70,8 +70,8 @@ export function download(format, ...files) {
     url += `algo=${format}&`;
   }
 
-  if (store.state.jwt) {
-    url += `auth=${store.state.jwt}&`;
+  if (state.jwt) {
+    url += `auth=${state.jwt}&`;
   }
 
   window.open(url);
@@ -95,7 +95,7 @@ export async function post(url, content = "", overwrite = false, onupload) {
       `${baseURL}/api/resources${url}?override=${overwrite}`,
       true
     );
-    request.setRequestHeader("X-Auth", store.state.jwt);
+    request.setRequestHeader("X-Auth", state.jwt);
 
     if (typeof onupload === "function") {
       request.upload.onprogress = onupload;

frontend/src/api/share.js

@@ -18,6 +18,7 @@ export async function remove(hash) {
 export async function create(url, password = "", expires = "", unit = "hours") {
   url = removePrefix(url);
   url = `/api/share${url}`;
+  expires = String(expires);
   if (expires !== "") {
     url += `?expires=${expires}&unit=${unit}`;
   }

frontend/src/api/users.js

@@ -1,6 +1,6 @@
-import { fetchURL, fetchJSON } from "./utils";
+import { fetchURL, fetchJSON } from "@/api/utils";
 
-export async function getAll() {
+export async function getAllUsers() {
   return await fetchJSON(`/api/users`, {});
 }
 
@@ -24,6 +24,12 @@ export async function create(user) {
 }
 
 export async function update(user, which = ["all"]) {
+  if (which[0] != "password") {
+    user.password = "";
+  }
+  if (user.username == "publicUser") {
+    return
+  }
   await fetchURL(`/api/users/${user.id}`, {
     method: "PUT",
     body: JSON.stringify({

frontend/src/api/utils.js

@@ -1,7 +1,8 @@
-import store from "@/store";
+import { state } from "@/store";
 import { renew, logout } from "@/utils/auth";
 import { baseURL } from "@/utils/constants";
 import { encodePath } from "@/utils/url";
+import { showError } from "@/notify";
 
 export async function fetchURL(url, opts, auth = true) {
   opts = opts || {};
@@ -13,21 +14,22 @@ export async function fetchURL(url, opts, auth = true) {
   try {
     res = await fetch(`${baseURL}${url}`, {
       headers: {
-        "X-Auth": store.state.jwt,
-        "sessionId": store.state.sessionId,
-        "userScope": store.state.user.scope,
+        "X-Auth": state.jwt,
+        "sessionId": state.sessionId,
+        "userScope": state.user.scope,
         ...headers,
       },
       ...rest,
     });
-  } catch {
+  } catch (e) {
+    console.error(e)
     const error = new Error("000 No connection");
     error.status = res.status;
     throw error;
   }
 
   if (auth && res.headers.get("X-Renew-Token") === "true") {
-    await renew(store.state.jwt);
+    await renew(state.jwt);
   }
 
   if (res.status < 200 || res.status > 299) {
@@ -46,17 +48,16 @@ export async function fetchURL(url, opts, auth = true) {
 
 export async function fetchJSON(url, opts) {
   const res = await fetchURL(url, opts);
-
   if (res.status === 200) {
     return res.json();
   } else {
+    showError("unable to fetch : " + url + "status" + res.status);
     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;
@@ -70,7 +71,7 @@ export function createURL(endpoint, params = {}, auth = true) {
   const url = new URL(prefix + encodePath(endpoint), origin);
 
   const searchParams = {
-    ...(auth && { auth: store.state.jwt }),
+    ...(auth && { auth: state.jwt }),
     ...params,
   };
 

frontend/src/components/Breadcrumbs.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import Action from "@/components/header/Action";
+import { state, mutations } from "@/store"; // Import mutations as well
+import Action from "@/components/header/Action.vue";
 
 export default {
   name: "breadcrumbs",
@@ -28,10 +28,8 @@ export default {
   },
   props: ["base", "noLink"],
   computed: {
-    ...mapState(["req", "user"]),
     items() {
-
-      const relativePath = this.$route.path.replace(this.base, "");
+      const relativePath = state.route.path.replace(this.base, "");
       let parts = relativePath.split("/");
 
       if (parts[0] === "") {
@@ -76,13 +74,18 @@ export default {
       return "router-link";
     },
     showShare() {
-      if (this.$route.path.startsWith("/share")) {
-        return;
+      // Ensure user properties are accessed safely
+      if (state.route.path.startsWith("/share")) {
+        return false;
       }
-      return this.user.perm.share;
+      return state.user?.perm && state.user?.perm.share; // Access from state directly
+    },
+  },
+  methods: {
+    // Example of a method using mutations
+    updateUserPermissions(newPerms) {
+      mutations.updateUser({ perm: newPerms })
     },
   },
 };
 </script>
-
-<style></style>

frontend/src/components/ButtonGroup.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="button-group">
-    <button
-      v-for="(btn, index) in buttons"
-      :key="index"
-      :disabled="isDisabled"
-      :class="{ active: activeButton === index && !isDisabled }"
-      @click="setActiveButton(index, btn.label)"
-    >
-      {{ btn.label }}
+    <button v-if="isDisabled" disabled>
+      No options for folders
     </button>
+    <template v-else>
+      <button
+        v-for="(btn, index) in buttons"
+        :key="index"
+        :class="{ active: activeButton === index }"
+        @click="setActiveButton(index, btn.label)"
+      >
+        {{ btn.label }}
+      </button>
+    </template>
   </div>
 </template>
 
@@ -36,15 +40,12 @@ export default {
   methods: {
     setActiveButton(index, label) {
       if (label == "Only Folders" && this.activeButton != index) {
-        console.log("Only Folders && this.activeButton != index");
         this.$emit("disableAll");
       }
       if (label == "Only Folders" && this.activeButton == index) {
-        console.log("Only Folders && this.activeButton == index");
         this.$emit("enableAll");
       }
       if (label == "Only Files" && this.activeButton != index) {
-        console.log("Only Files && this.activeButton != index");
         this.$emit("enableAll");
       }
       // If the clicked button is already active, de-select it
@@ -106,6 +107,10 @@ button:hover {
   background: #e0e0e0;
 }
 
+button:disabled {
+  cursor: not-allowed !important;
+}
+
 button.active {
   background-color: var(--blue) !important;
   color: #ffffff;

frontend/src/components/FileSelection.vue

@@ -0,0 +1,168 @@
+<template>
+  <div v-if="selectedCount > 0" id="file-selection" :class="{ 'dark-mode': isDarkMode }">
+    <span>{{ selectedCount }} selected</span>
+    <div>
+      <action
+        v-if="headerButtons.select"
+        icon="info"
+        :label="$t('buttons.info')"
+        show="info"
+      />
+      <action
+        v-if="headerButtons.select"
+        icon="check_circle"
+        :label="$t('buttons.selectMultiple')"
+        @action="toggleMultipleSelection"
+      />
+      <action
+        v-if="headerButtons.download"
+        icon="file_download"
+        :label="$t('buttons.download')"
+        @action="download"
+        :counter="selectedCount"
+      />
+      <action
+        v-if="headerButtons.share"
+        icon="share"
+        :label="$t('buttons.share')"
+        show="share"
+      />
+      <action
+        v-if="headerButtons.rename"
+        icon="mode_edit"
+        :label="$t('buttons.rename')"
+        show="rename"
+      />
+      <action
+        v-if="headerButtons.copy"
+        icon="content_copy"
+        :label="$t('buttons.copyFile')"
+        show="copy"
+      />
+      <action
+        v-if="headerButtons.move"
+        icon="forward"
+        :label="$t('buttons.moveFile')"
+        show="move"
+      />
+      <action
+        v-if="headerButtons.delete"
+        icon="delete"
+        :label="$t('buttons.delete')"
+        show="delete"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { state, getters, mutations } from "@/store"; // Import your custom store
+import { files as api } from "@/api";
+import Action from "@/components/header/Action.vue";
+
+export default {
+  name: "fileSelection",
+  components: {
+    Action,
+  },
+  computed: {
+    isDarkMode() {
+      return getters.isDarkMode();
+    },
+    headerButtons() {
+      return {
+        select: state.selected.length > 0,
+        upload: state.user.perm?.create && state.selected.length > 0,
+        download: state.user.perm.download && state.selected.length > 0,
+        delete: state.selected.length > 0 && state.user.perm.delete,
+        rename: state.selected.length === 1 && state.user.perm.rename,
+        share: state.selected.length === 1 && state.user.perm.share,
+        move: state.selected.length > 0 && state.user.perm.rename,
+        copy: state.selected.length > 0 && state.user.perm?.create,
+      };
+    },
+    selectedCount() {
+      return getters.selectedCount();
+    },
+  },
+  methods: {
+    toggleMultipleSelection() {
+      mutations.setMultiple(!state.multiple);
+      mutations.closeHovers();
+    },
+    download() {
+      if (getters.isSingleFileSelected()) {
+        api.download(null, getters.selectedDownloadUrl());
+        return;
+      }
+      mutations.showHover({
+        name: "download",
+        confirm: (format) => {
+          mutations.closeHovers();
+          let files = [];
+          if (state.selected.length > 0) {
+            for (let i of state.selected) {
+              files.push(state.req.items[i].url);
+            }
+          } else {
+            files.push(state.route.path);
+          }
+          try {
+            api.download(format, ...files);
+            showSuccess("download started");
+          } catch (e) {
+            showError("error downloading", e);
+          }
+        },
+      });
+    },
+  },
+};
+</script>
+<style>
+@media (min-width: 800px) {
+  #file-selection {
+    bottom: 4em;
+  }
+}
+
+#file-selection .action {
+  border-radius: 50%;
+  width: auto;
+}
+
+#file-selection > span {
+  display: inline-block;
+  margin-left: 1em;
+  color: #6f6f6f;
+  margin-right: auto;
+}
+
+#file-selection .action span {
+  display: none;
+}
+
+/* File Selection */
+#file-selection {
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 2em 50px 10px;
+  position: fixed;
+  bottom: 4em;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  background: #fff;
+  max-width: 30em;
+  z-index: 3;
+  border-radius: 1em;
+  display: flex;
+  width: 90%;
+}
+/* File selection */
+#file-selection.dark-mode {
+  background: var(--surfaceSecondary) !important;
+}
+
+#file-selection.dark-mode span {
+  color: var(--textPrimary) !important;
+}
+</style>

frontend/src/components/ProgressBar.vue

@@ -0,0 +1,221 @@
+<!-- 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

@@ -1,10 +1,8 @@
 <template>
-  <div
-    id="search"
-    @click="open"
-    v-bind:class="{ active, ongoing, 'dark-mode': isDarkMode }"
-  >
+  <div id="search" @click="open" :class="{ active, ongoing, 'dark-mode': isDarkMode }">
+    <!-- Search input section -->
     <div id="input">
+      <!-- Close button visible when search is active -->
       <button
         v-if="active"
         class="action"
@@ -14,7 +12,9 @@
       >
         <i class="material-icons">close</i>
       </button>
+      <!-- Search icon when search is not active -->
       <i v-else class="material-icons">search</i>
+      <!-- Input field for search -->
       <input
         class="main-input"
         type="text"
@@ -27,9 +27,12 @@
         :placeholder="$t('search.search')"
       />
     </div>
+
+    <!-- Search results for mobile -->
     <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
       <div id="result-list">
         <div class="button" style="width: 100%">Search Context: {{ getContext }}</div>
+        <!-- List of search results -->
         <ul v-show="results.length > 0">
           <li
             v-for="(s, k) in results"
@@ -50,15 +53,18 @@
             </router-link>
           </li>
         </ul>
+        <!-- Loading icon when search is ongoing -->
         <p v-show="isEmpty && isRunning" id="renew">
           <i class="material-icons spin">autorenew</i>
         </p>
+        <!-- Message when no results are found -->
         <div v-show="isEmpty && !isRunning">
           <div class="searchPrompt" v-show="isEmpty && !isRunning">
             <p>{{ noneMessage }}</p>
           </div>
         </div>
-        <template v-if="isEmpty">
+        <div v-if="isEmpty">
+          <!-- Reset filters button -->
           <button
             class="mobile-boxes"
             v-if="value.length === 0 && !showBoxes"
@@ -66,7 +72,8 @@
           >
             Reset filters
           </button>
-          <template v-if="value.length === 0 && showBoxes">
+          <!-- Box types when no search input is present -->
+          <div v-if="value.length === 0 && showBoxes">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
@@ -84,45 +91,18 @@
                 </div>
               </div>
             </div>
-          </template>
-        </template>
+          </div>
+        </div>
       </div>
     </div>
+
+    <!-- Search results for desktop -->
     <div v-show="!isMobile && active" id="result-desktop" ref="result">
       <div class="searchContext">Search Context: {{ getContext }}</div>
       <div id="result-list">
-        <template>
-          <p v-show="isEmpty && isRunning" id="renew">
-            <i class="material-icons spin">autorenew</i>
-          </p>
-          <div class="searchPrompt" v-show="isEmpty && !isRunning">
-            <p>{{ noneMessage }}</p>
-            <div class="helpButton" @click="toggleHelp()">Help</div>
-          </div>
-          <div class="helpText" v-if="showHelp">
-            <p>
-              Search occurs on each character you type (3 character minimum for search
-              terms).
-            </p>
-            <p>
-              <b>The index:</b> Search utilizes the index which automatically gets updated
-              on the configured interval (default: 5 minutes). Searching when the program
-              has just started may result in incomplete results.
-            </p>
-            <p>
-              <b>Filter by type:</b> You can have multiple type filters by adding
-              <code>type:condition</code> followed by search terms.
-            </p>
-            <p>
-              <b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
-              for example <code>"test|not"</code> searches for both terms independently.
-            </p>
-            <p>
-              <b>File size:</b> Searching files by size may have significantly longer
-              search times.
-            </p>
-          </div>
-          <template>
+        <div>
+          <div>
+            <!-- Button groups for filtering search results -->
             <ButtonGroup
               :buttons="folderSelect"
               @button-clicked="addToTypes"
@@ -136,7 +116,8 @@
               @remove-button-clicked="removeFromTypes"
               :isDisabled="isTypeSelectDisabled"
             />
-            <div class="sizeConstraints">
+            <!-- Inputs for filtering by file size -->
+            <div v-if="!foldersOnly" class="sizeConstraints">
               <div class="sizeInputWrapper">
                 <p>Smaller Than:</p>
                 <input
@@ -159,8 +140,42 @@
                 <p>MB</p>
               </div>
             </div>
-          </template>
-        </template>
+          </div>
+        </div>
+        <!-- Loading icon when search is ongoing -->
+        <p v-show="isEmpty && isRunning" id="renew">
+          <i class="material-icons spin">autorenew</i>
+        </p>
+        <!-- Message when no results are found -->
+        <div class="searchPrompt" v-show="isEmpty && !isRunning">
+          <p>{{ noneMessage }}</p>
+          <div class="helpButton" @click="toggleHelp()">Help</div>
+        </div>
+        <!-- Help text section -->
+        <div class="helpText" v-if="showHelp">
+          <p>
+            Search occurs on each character you type (3 character minimum for search
+            terms).
+          </p>
+          <p>
+            <b>The index:</b> Search utilizes the index which automatically gets updated
+            on the configured interval (default: 5 minutes). Searching when the program
+            has just started may result in incomplete results.
+          </p>
+          <p>
+            <b>Filter by type:</b> You can have multiple type filters by adding
+            <code>type:condition</code> followed by search terms.
+          </p>
+          <p>
+            <b>Multiple Search terms:</b> Additional terms separated by <code>|</code>,
+            for example <code>"test|not"</code> searches for both terms independently.
+          </p>
+          <p>
+            <b>File size:</b> Searching files by size may have significantly longer search
+            times.
+          </p>
+        </div>
+        <!-- List of search results -->
         <ul v-show="results.length > 0">
           <li
             v-for="(s, k) in results"
@@ -185,6 +200,250 @@
     </div>
   </div>
 </template>
+<script>
+import ButtonGroup from "./ButtonGroup.vue";
+import { search } from "@/api";
+import { getters, mutations, state } from "@/store";
+import { showError } from "@/notify";
+
+var boxes = {
+  folder: { label: "folders", icon: "folder" },
+  file: { label: "files", icon: "insert_drive_file" },
+  archive: { label: "archives", icon: "archive" },
+  image: { label: "images", icon: "photo" },
+  audio: { label: "audio files", icon: "volume_up" },
+  video: { label: "videos", icon: "movie" },
+  doc: { label: "documents", icon: "picture_as_pdf" },
+};
+
+export default {
+  components: {
+    ButtonGroup,
+  },
+  name: "search",
+  data: function () {
+    return {
+      largerThan: "",
+      smallerThan: "",
+      noneMessage: "Start typing 3 or more characters to begin searching.",
+      searchTypes: "",
+      isTypeSelectDisabled: false,
+      showHelp: false,
+      folderSelect: [
+        { label: "Only Folders", value: "type:folder" },
+        { label: "Only Files", value: "type:file" },
+      ],
+      typeSelect: [
+        { label: "Photos", value: "type:image" },
+        { label: "Audio", value: "type:audio" },
+        { label: "Videos", value: "type:video" },
+        { label: "Documents", value: "type:doc" },
+        { label: "Archives", value: "type:archive" },
+      ],
+      value: "",
+      ongoing: false,
+      results: [],
+      reload: false,
+      scrollable: null,
+    };
+  },
+  watch: {
+    largerThan() {
+      this.submit();
+    },
+    smallerThan() {
+      this.submit();
+    },
+    searchTypes() {
+      this.submit();
+    },
+    active(active) {
+      const resultList = document.getElementById("result-list");
+      if (!active) {
+        resultList.classList.remove("active");
+        return;
+      }
+      setTimeout(() => {
+        resultList.classList.add("active");
+      }, 100);
+    },
+    currentPrompt(val, old) {
+      this.active = val?.prompt === "search";
+      if (old?.prompt === "search" && !this.active) {
+        if (this.reload) {
+          this.setReload(true);
+        }
+
+        document.body.style.overflow = "auto";
+        this.ongoing = false;
+        this.results = [];
+        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.ongoing = false;
+        this.results = [];
+      }
+    },
+  },
+  computed: {
+    isMobile() {
+      return state.isMobile;
+    },
+    foldersOnly() {
+      return this.isTypeSelectDisabled;
+    },
+    active() {
+      return getters.currentPromptName() == "search";
+    },
+    showOverlay() {
+      return getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
+    },
+    isDarkMode() {
+      return getters.isDarkMode();
+    },
+    showBoxes() {
+      return this.searchTypes == "";
+    },
+    boxes() {
+      return boxes;
+    },
+    isEmpty() {
+      return this.results.length === 0;
+    },
+    text() {
+      if (this.ongoing) {
+        return "";
+      }
+
+      return this.value === ""
+        ? this.$t("search.typeToSearch")
+        : this.$t("search.pressToSearch");
+    },
+    isRunning() {
+      return this.ongoing;
+    },
+    searchHelp() {
+      return this.showHelp;
+    },
+    getContext() {
+      let path = state.route.path;
+      path = path.slice(1);
+      path = "./" + path.substring(path.indexOf("/") + 1);
+      path = path.replace(/\/+$/, "") + "/";
+      return path;
+    },
+  },
+  methods: {
+    async navigateTo(url) {
+      mutations.closeHovers();
+      await this.$nextTick();
+      setTimeout(() => this.$router.push(url), 10);
+    },
+    basePath(str, isDir) {
+      let parts = str.replace(/(\/$|^\/)/, "").split("/");
+      if (parts.length <= 1) {
+        if (isDir) {
+          return "/";
+        }
+        return "";
+      }
+      parts.pop();
+      parts = parts.join("/") + "/";
+      if (isDir) {
+        parts = "/" + parts; // fix weird rtl thing
+      }
+      return parts;
+    },
+    baseName(str) {
+      let parts = str.replace(/(\/$|^\/)/, "").split("/");
+      return parts.pop();
+    },
+    open() {
+      mutations.showHover("search");
+    },
+    close(event) {
+      this.value = "";
+      event.stopPropagation();
+      mutations.closeHovers();
+    },
+    keyup(event) {
+      if (event.keyCode === 27) {
+        this.close(event);
+        return;
+      }
+      this.results.length === 0;
+    },
+    addToTypes(string) {
+      if (this.searchTypes.includes(string)) {
+        return true;
+      }
+      if (string == null || string == "") {
+        return false;
+      }
+      this.searchTypes = this.searchTypes + string + " ";
+    },
+    resetSearchFilters() {
+      this.searchTypes = "";
+    },
+    removeFromTypes(string) {
+      if (string == null || string == "") {
+        return false;
+      }
+      this.searchTypes = this.searchTypes.replace(string + " ", "");
+      if (state.isMobile) {
+        this.$refs.input.focus();
+      }
+    },
+    folderSelectClicked() {
+      this.isTypeSelectDisabled = true; // Disable the other ButtonGroup
+    },
+    resetButtonGroups() {
+      this.isTypeSelectDisabled = false;
+    },
+    async submit(event) {
+      this.showHelp = false;
+      if (event != undefined) {
+        event.preventDefault();
+      }
+      if (this.value === "" || this.value.length < 3) {
+        this.ongoing = false;
+        this.results = [];
+        this.noneMessage = "Not enough characters to search (min 3)";
+        return;
+      }
+      let searchTypesFull = this.searchTypes;
+      if (this.largerThan != "") {
+        searchTypesFull = searchTypesFull + "type:largerThan=" + this.largerThan + " ";
+      }
+      if (this.smallerThan != "") {
+        searchTypesFull = searchTypesFull + "type:smallerThan=" + this.smallerThan + " ";
+      }
+      let path = state.route.path;
+      this.ongoing = true;
+      try {
+        this.results = await search(path, searchTypesFull + this.value);
+      } catch (error) {
+        showError(error);
+      }
+      this.ongoing = false;
+      if (this.results.length == 0) {
+        this.noneMessage = "No results found in indexed search.";
+      }
+    },
+    toggleHelp() {
+      this.showHelp = !this.showHelp;
+    },
+  },
+};
+</script>
 
 <style>
 .main-input {
@@ -198,6 +457,7 @@
   color: white;
   border-left: 1px solid gray;
   border-right: 1px solid gray;
+  word-wrap: break-word;
 }
 
 #result-desktop > #result-list {
@@ -262,8 +522,8 @@
 
 /* Search */
 #search {
-  background-color: unset;
-  z-index: 3;
+  background-color: unset !important;
+  z-index: 5;
   position: fixed;
   top: 0.5em;
   min-width: 35em;
@@ -383,6 +643,10 @@ body.rtl #search #result ul > * {
   border-bottom-left-radius: 0;
 }
 
+input.sizeInput:disabled {
+  cursor: not-allowed;
+}
+
 /* Search Input Placeholder */
 #search::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.5);
@@ -509,244 +773,3 @@ body.rtl #search .boxes h3 {
   align-items: center;
 }
 </style>
-
-<script>
-import ButtonGroup from "./ButtonGroup.vue";
-import { mapState, mapGetters, mapMutations } from "vuex";
-import { search } from "@/api";
-import { darkMode } from "@/utils/constants";
-
-var boxes = {
-  folder: { label: "folders", icon: "folder" },
-  file: { label: "files", icon: "insert_drive_file" },
-  archive: { label: "archives", icon: "archive" },
-  image: { label: "images", icon: "photo" },
-  audio: { label: "audio files", icon: "volume_up" },
-  video: { label: "videos", icon: "movie" },
-  doc: { label: "documents", icon: "picture_as_pdf" },
-};
-
-export default {
-  components: {
-    ButtonGroup,
-  },
-  name: "search",
-  data: function () {
-    return {
-      largerThan: "",
-      smallerThan: "",
-      noneMessage: "Start typing 3 or more characters to begin searching.",
-      searchTypes: "",
-      isTypeSelectDisabled: false,
-      showHelp: false,
-      folderSelect: [
-        { label: "Only Folders", value: "type:folder" },
-        { label: "Only Files", value: "type:file" },
-      ],
-      typeSelect: [
-        { label: "Photos", value: "type:image" },
-        { label: "Audio", value: "type:audio" },
-        { label: "Videos", value: "type:video" },
-        { label: "Documents", value: "type:doc" },
-        { label: "Archives", value: "type:archive" },
-      ],
-      value: "",
-      width: window.innerWidth,
-      active: false,
-      ongoing: false,
-      results: [],
-      reload: false,
-      scrollable: null,
-    };
-  },
-  watch: {
-    active(active) {
-      const resultList = document.getElementById("result-list");
-      if (!active) {
-        resultList.classList.remove("active");
-        return;
-      }
-      setTimeout(() => {
-        resultList.classList.add("active");
-      }, 100);
-    },
-    currentPrompt(val, old) {
-      this.active = val?.prompt === "search";
-      if (old?.prompt === "search" && !this.active) {
-        if (this.reload) {
-          this.setReload(true);
-        }
-
-        document.body.style.overflow = "auto";
-        this.ongoing = false;
-        this.results = [];
-        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.ongoing = false;
-        this.results = [];
-      }
-    },
-  },
-  computed: {
-    ...mapState(["user"]),
-    ...mapGetters(["isListing", "currentPrompt", "currentPromptName"]),
-    showOverlay: function () {
-      return this.currentPrompt !== null && this.currentPrompt.prompt !== "more";
-    },
-    isDarkMode() {
-      return this.user && Object.prototype.hasOwnProperty.call(this.user, "darkMode")
-        ? this.user.darkMode
-        : darkMode;
-    },
-    showBoxes() {
-      return this.searchTypes == "";
-    },
-    boxes() {
-      return boxes;
-    },
-    isEmpty() {
-      return this.results.length === 0;
-    },
-    text() {
-      if (this.ongoing) {
-        return "";
-      }
-
-      return this.value === ""
-        ? this.$t("search.typeToSearch")
-        : this.$t("search.pressToSearch");
-    },
-    isMobile() {
-      return this.width <= 800;
-    },
-    isRunning() {
-      return this.ongoing;
-    },
-    searchHelp() {
-      return this.showHelp;
-    },
-    getContext() {
-      let path = this.$route.path;
-      path = path.slice(1);
-      path = "./" + path.substring(path.indexOf("/") + 1);
-      path = path.replace(/\/+$/, "") + "/";
-      return path;
-    },
-  },
-  mounted() {
-    window.addEventListener("resize", this.handleResize);
-    this.handleResize(); // Call this once to set the initial width
-  },
-  methods: {
-    ...mapMutations(["showHover", "closeHovers", "setReload"]),
-    handleResize() {
-      this.width = window.innerWidth;
-    },
-    async navigateTo(url) {
-      this.closeHovers();
-      await this.$nextTick();
-      setTimeout(() => this.$router.push(url), 0);
-    },
-    basePath(str, isDir) {
-      let parts = str.replace(/(\/$|^\/)/, "").split("/");
-      if (parts.length <= 1) {
-        if (isDir) {
-          return "/";
-        }
-        return "";
-      }
-      parts.pop();
-      parts = parts.join("/") + "/";
-      if (isDir) {
-        parts = "/" + parts; // fix weird rtl thing
-      }
-      return parts;
-    },
-    baseName(str) {
-      let parts = str.replace(/(\/$|^\/)/, "").split("/");
-      return parts.pop();
-    },
-    open() {
-      this.$store.commit("showHover", "search");
-    },
-    close(event) {
-      event.stopPropagation();
-      this.closeHovers();
-    },
-    keyup(event) {
-      if (event.keyCode === 27) {
-        this.close(event);
-        return;
-      }
-      this.results.length === 0;
-    },
-    addToTypes(string) {
-      if (this.searchTypes.includes(string)) {
-        return true;
-      }
-      if (string == null || string == "") {
-        return false;
-      }
-      this.searchTypes = this.searchTypes + string + " ";
-    },
-    resetSearchFilters() {
-      this.searchTypes = "";
-    },
-    removeFromTypes(string) {
-      if (string == null || string == "") {
-        return false;
-      }
-      this.searchTypes = this.searchTypes.replace(string + " ", "");
-      if (this.isMobile) {
-        this.$refs.input.focus();
-      }
-    },
-    folderSelectClicked() {
-      this.isTypeSelectDisabled = true; // Disable the other ButtonGroup
-    },
-    resetButtonGroups() {
-      this.isTypeSelectDisabled = false;
-    },
-    async submit(event) {
-      this.showHelp = false;
-      event.preventDefault();
-      if (this.value === "" || this.value.length < 3) {
-        this.ongoing = false;
-        this.results = [];
-        this.noneMessage = "Not enough characters to search (min 3)";
-        return;
-      }
-      let searchTypesFull = this.searchTypes;
-      if (this.largerThan != "") {
-        searchTypesFull = searchTypesFull + "type:largerThan=" + this.largerThan + " ";
-      }
-      if (this.smallerThan != "") {
-        searchTypesFull = searchTypesFull + "type:smallerThan=" + this.smallerThan + " ";
-      }
-      let path = this.$route.path;
-      this.ongoing = true;
-      try {
-        this.results = await search(path, searchTypesFull + this.value);
-      } catch (error) {
-        this.$showError(error);
-      }
-      this.ongoing = false;
-      if (this.results.length == 0) {
-        this.noneMessage = "No results found in indexed search.";
-      }
-    },
-    toggleHelp() {
-      this.showHelp = !this.showHelp;
-    },
-  },
-};
-</script>

frontend/src/components/Sidebar.vue

@@ -1,18 +1,57 @@
 <template>
-  <nav :class="{ active, 'dark-mode': isDarkMode }">
-    <template v-if="isLogged">
-      <button
-        class="action"
-        @click="toRoot"
-        :aria-label="$t('sidebar.myFiles')"
-        :title="$t('sidebar.myFiles')"
-      >
-        <i class="material-icons">folder</i>
-        <span>{{ $t("sidebar.myFiles") }}</span>
-      </button>
-      <div v-if="user.perm.create">
+  <nav
+    id="sidebar"
+    :class="{ active: active, 'dark-mode': isDarkMode, sticky: user?.stickySidebar }"
+  >
+    <div class="card">
+      <div class="card-wrapper">
         <button
-          @click="$store.commit('showHover', 'newDir')"
+          v-if="user.username"
+          @click="navigateTo('/settings/profile')"
+          class="action"
+        >
+          <i class="material-icons">person</i>
+          <span>{{ user.username }}</span>
+        </button>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-wrapper" @mouseleave="resetHoverTextToDefault">
+        <span>{{ hoverText }}</span>
+        <div class="quick-toggles">
+          <div
+            :class="{ active: user?.singleClick }"
+            @click="toggleClick"
+            @mouseover="updateHoverText('Toggle single click')"
+          >
+            <i class="material-icons">ads_click</i>
+          </div>
+          <div
+            :class="{ active: user?.darkMode }"
+            @click="toggleDarkMode"
+            @mouseover="updateHoverText('Toggle dark mode')"
+          >
+            <i class="material-icons">dark_mode</i>
+          </div>
+          <div
+            :class="{ active: user?.stickySidebar }"
+            @click="toggleSticky"
+            @mouseover="updateHoverText('Toggle sticky sidebar')"
+            v-if="!isMobile"
+          >
+            <i class="material-icons">push_pin</i>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section for logged-in users -->
+    <div v-if="isLoggedIn" class="sidebar-scroll-list">
+      <!-- Buttons visible if user has create permission -->
+      <div v-if="user.perm?.create">
+        <!-- New Folder button -->
+        <button
+          @click="showHover('newDir')"
           class="action"
           :aria-label="$t('sidebar.newFolder')"
           :title="$t('sidebar.newFolder')"
@@ -20,8 +59,9 @@
           <i class="material-icons">create_new_folder</i>
           <span>{{ $t("sidebar.newFolder") }}</span>
         </button>
+        <!-- New File button -->
         <button
-          @click="$store.commit('showHover', 'newFile')"
+          @click="showHover('newFile')"
           class="action"
           :aria-label="$t('sidebar.newFile')"
           :title="$t('sidebar.newFile')"
@@ -29,22 +69,26 @@
           <i class="material-icons">note_add</i>
           <span>{{ $t("sidebar.newFile") }}</span>
         </button>
-        <button id="upload-button" @click="upload($event)" class="action">
+        <!-- Upload button -->
+        <button id="upload-button" @click="uploadFunc" class="action">
           <i class="material-icons">file_upload</i>
           <span>Upload file</span>
         </button>
       </div>
+
+      <!-- Settings and Logout buttons -->
       <div>
+        <!-- Settings button -->
         <button
           class="action"
-          @click="toSettings"
+          @click="navigateTo('/settings/global')"
           :aria-label="$t('sidebar.settings')"
           :title="$t('sidebar.settings')"
         >
           <i class="material-icons">settings_applications</i>
           <span>{{ $t("sidebar.settings") }}</span>
         </button>
-
+        <!-- Logout button -->
         <button
           v-if="canLogout"
           @click="logout"
@@ -57,8 +101,31 @@
           <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
-    </template>
-    <template v-else>
+      <div v-if="isLoggedIn" class="sources card">
+        <span>Sources</span>
+        <div class="inner-card">
+          <!-- My Files button -->
+          <button
+            class="action"
+            @click="navigateTo('/files/')"
+            :aria-label="$t('sidebar.myFiles')"
+            :title="$t('sidebar.myFiles')"
+          >
+            <i class="material-icons">folder</i>
+            <span>{{ $t("sidebar.myFiles") }}</span>
+            <div class="usage-info">
+              <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
+              <span style="text-align: center">{{ usage.usedPercentage }}%</span>
+              <span>{{ usage.used }} of {{ usage.total }} used</span>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section for non-logged-in users -->
+    <div v-else class="sidebar-scroll-list">
+      <!-- Login button -->
       <router-link
         class="action"
         to="/login"
@@ -68,6 +135,7 @@
         <i class="material-icons">exit_to_app</i>
         <span>{{ $t("sidebar.login") }}</span>
       </router-link>
+      <!-- Signup button, if signup is enabled -->
       <router-link
         v-if="signup"
         class="action"
@@ -78,17 +146,11 @@
         <i class="material-icons">person_add</i>
         <span>{{ $t("sidebar.signup") }}</span>
       </router-link>
-    </template>
-    <div
-      class="credits"
-      v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage"
-    >
-      <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
-      <span style="text-align: center">{{ usage.usedPercentage }}%</span>
-      <span>{{ usage.used }} of {{ usage.total }} used</span>
-      <br />
-      <span v-if="disableExternal">File Browser</span>
-      <span v-else>
+    </div>
+
+    <div class="buffer"></div>
+    <div class="credits">
+      <span>
         <a
           rel="noopener noreferrer"
           target="_blank"
@@ -104,9 +166,8 @@
     </div>
   </nav>
 </template>
+
 <script>
-import { mapState, mapGetters } from "vuex";
-import * as upload from "@/utils/upload";
 import * as auth from "@/utils/auth";
 import {
   version,
@@ -116,118 +177,285 @@ import {
   noAuth,
   loginPage,
 } from "@/utils/constants";
-import { files as api } from "@/api";
-import ProgressBar from "vue-simple-progress";
+import { files, users } from "@/api";
+import ProgressBar from "@/components/ProgressBar.vue";
 import { getHumanReadableFilesize } from "@/utils/filesizes";
-import { darkMode } from "@/utils/constants";
+import { state, getters, mutations } from "@/store"; // Import your custom store
+import { showError } from "@/notify";
 
 export default {
   name: "sidebar",
   components: {
     ProgressBar,
   },
+  data() {
+    return {
+      hoverText: "Quick Toggles", // Initially empty
+    };
+  },
+  mounted() {
+    if (getters.isLoggedIn()) {
+      this.updateUsage();
+    }
+  },
   computed: {
-    ...mapState(["user"]),
-    isDarkMode() {
-      return this.user && Object.prototype.hasOwnProperty.call(this.user, "darkMode")
-        ? this.user.darkMode
-        : darkMode;
+    isMobile() {
+      return getters.isMobile();
+    },
+    isFiles() {
+      return getters.isFiles();
+    },
+    user() {
+      if (!getters.isLoggedIn()) {
+        return {};
+      }
+      return state.user;
+    },
+    isDarkMode() {
+      return getters.isDarkMode();
+    },
+    isLoggedIn() {
+      return getters.isLoggedIn();
+    },
+    currentPrompt() {
+      return getters.currentPrompt();
     },
-    ...mapGetters(["isLogged", "currentPrompt"]),
     active() {
-      return this.currentPrompt?.prompt === "sidebar";
+      return getters.isSidebarVisible();
     },
     signup: () => signup,
     version: () => version,
     disableExternal: () => disableExternal,
     disableUsedPercentage: () => disableUsedPercentage,
     canLogout: () => !noAuth && loginPage,
+    usage: () => state.usage,
+    route: () => state.route,
   },
-  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: getHumanReadableFilesize(usage.used / 1024),
-            total: getHumanReadableFilesize(usage.total / 1024),
-            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/");
-      },
+  watch: {
+    route() {
+      if (!getters.isLoggedIn()) {
+        return;
+      }
+      if (!state.user.stickySidebar) {
+        mutations.closeSidebar();
+      }
     },
   },
   methods: {
-    toRoot() {
-      this.$router.push({ path: "/files/" }, () => {});
-      this.$store.commit("closeHovers");
+    updateHoverText(text) {
+      this.hoverText = text;
     },
-    toSettings() {
-      this.$router.push({ path: "/settings" }, () => {});
-      this.$store.commit("closeHovers");
+    resetHoverTextToDefault() {
+      this.hoverText = "Quick Toggles"; // Reset to default hover text
     },
-    help() {
-      this.$store.commit("showHover", "help");
+    toggleClick() {
+      mutations.updateUser({ singleClick: !state.user.singleClick });
     },
-    upload: function () {
-      if (
-        typeof window.DataTransferItem !== "undefined" &&
-        typeof DataTransferItem.prototype.webkitGetAsEntry !== "undefined"
-      ) {
-        this.$store.commit("showHover", "upload");
-      } else {
-        document.getElementById("upload-input").click();
-      }
+    toggleDarkMode() {
+      mutations.toggleDarkMode();
     },
-    uploadInput(event) {
-      this.$store.commit("closeHovers");
-
-      let files = event.currentTarget.files;
-      let folder_upload =
-        files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== "";
-
-      if (folder_upload) {
-        for (let i = 0; i < files.length; i++) {
-          let file = files[i];
-          files[i].fullPath = file.webkitRelativePath;
-        }
-      }
-
-      let path = this.$route.path.endsWith("/")
-        ? this.$route.path
-        : this.$route.path + "/";
-      let conflict = upload.checkConflict(files, this.req.items);
-
-      if (conflict) {
-        this.$store.commit("showHover", {
-          prompt: "replace",
-          confirm: (event) => {
-            event.preventDefault();
-            this.$store.commit("closeHovers");
-            upload.handleFiles(files, path, true);
-          },
-        });
-
+    toggleSticky() {
+      let newSettings = state.user;
+      newSettings.stickySidebar = !state.user.stickySidebar;
+      users.update(newSettings, ["stickySidebar"]);
+    },
+    async updateUsage() {
+      if (!getters.isLoggedIn()) {
         return;
       }
-
-      upload.handleFiles(files, path);
+      let path = getters.getRoutePath();
+      let usageStats = { used: "0 B", total: "0 B", usedPercentage: 0 };
+      if (this.disableUsedPercentage) {
+        return usageStats;
+      }
+      try {
+        let usage = await files.usage(path);
+        usageStats = {
+          used: getHumanReadableFilesize(usage.used / 1024),
+          total: getHumanReadableFilesize(usage.total / 1024),
+          usedPercentage: Math.round((usage.used / usage.total) * 100),
+        };
+      } catch (error) {
+        showError("Error fetching usage", error);
+      }
+      mutations.setUsage(usageStats);
     },
+    showHover(value) {
+      return mutations.showHover(value);
+    },
+    navigateTo(path) {
+      this.$router.push({ path: path }, () => {});
+      mutations.closeHovers();
+    },
+    // Show the help overlay
+    help() {
+      mutations.showHover("help");
+    },
+    uploadFunc() {
+      mutations.showHover("upload");
+    },
+    // Logout the user
     logout: auth.logout,
   },
 };
 </script>
+
+<style>
+.sidebar-scroll-list {
+  overflow: scroll;
+  margin-bottom: 0px !important;
+}
+#sidebar {
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  padding-top: 5em;
+  width: 20em;
+  position: fixed;
+  z-index: 4;
+  left: -20em;
+  height: 100%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  transition: 0.5s ease;
+  background-color: #ededed;
+}
+
+#sidebar.sticky {
+  z-index: 3;
+}
+
+@supports (backdrop-filter: none) {
+  nav {
+    background-color: transparent;
+    backdrop-filter: blur(16px) invert(0.1);
+  }
+}
+
+.usage-info {
+  padding: 0.5em;
+}
+
+body.rtl nav {
+  left: unset;
+  right: -17em;
+}
+
+#sidebar.active {
+  left: 0;
+}
+
+#sidebar.rtl nav.active {
+  left: unset;
+  right: 0;
+}
+
+#sidebar > div {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  margin-bottom: 0.5em;
+}
+
+#sidebar .card {
+  overflow: unset !important;
+}
+
+#sidebar .action {
+  width: 100%;
+  display: block;
+  white-space: nowrap;
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+body.rtl .action {
+  direction: rtl;
+  text-align: right;
+}
+
+#sidebar .action > * {
+  vertical-align: middle;
+}
+/* * * * * * * * * * * * * * * *
+ *            FOOTER           *
+ * * * * * * * * * * * * * * * */
+
+.credits {
+  font-size: 1em;
+  color: var(--textSecondary);
+  padding-left: 1em;
+}
+
+.credits > span {
+  display: block;
+  margin-top: 0.5em;
+  margin-left: 0;
+}
+
+.credits a,
+.credits a:hover {
+  color: inherit;
+  cursor: pointer;
+}
+
+.buffer {
+  flex-grow: 1;
+}
+
+.quick-toggles {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  margin-top: 0.5em !important;
+}
+
+.quick-toggles button {
+  border-radius: 10em;
+  cursor: pointer;
+  flex: none;
+}
+
+.card-wrapper {
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1em !important;
+  min-height: 4em;
+  box-shadow: 0 2px 2px #00000024, 0 1px 5px #0000001f, 0 3px 1px -2px #0003;
+  /* overflow: auto; */
+  border-radius: 1em;
+  height: 100%;
+}
+
+.sources {
+  padding: 1em;
+  margin-top: 0.5em !important;
+}
+
+.inner-card {
+  border-radius: 0.5em;
+  padding: 0px !important;
+}
+
+.quick-toggles div {
+  border-radius: 10em;
+  background-color: var(--surfaceSecondary);
+}
+
+.quick-toggles div i {
+  font-size: 2em;
+  padding: 0.25em;
+  border-radius: 10em;
+  cursor: pointer;
+}
+
+button.action {
+  border-radius: 0.5em;
+}
+
+.quick-toggles .active {
+  background-color: var(--blue) !important;
+  border-radius: 10em;
+}
+</style>

frontend/src/components/files/ExtendedImage.vue

@@ -11,17 +11,19 @@
     @wheel="wheelMove"
   >
     <img
-      src=""
+      v-if="!isTiff"
+      :src="src"
       class="image-ex-img image-ex-img-center"
       ref="imgex"
       @load="onLoad"
     />
+    <canvas v-else ref="imgex" class="image-ex-img"></canvas>
   </div>
 </template>
+
 <script>
 import throttle from "@/utils/throttle";
-import UTIF from "utif";
-
+import { showError } from "@/notify";
 export default {
   props: {
     src: String,
@@ -55,15 +57,18 @@ export default {
       },
       maxScale: 4,
       minScale: 0.25,
+      isTiff: false, // Determine if the image is a TIFF
     };
   },
   mounted() {
-    if (!this.decodeUTIF()) {
+    this.isTiff = this.checkIfTiff(this.src);
+    if (this.isTiff) {
+      this.decodeTiff(this.src);
+    } else {
       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%";
     }
@@ -79,7 +84,10 @@ export default {
   },
   watch: {
     src: function () {
-      if (!this.decodeUTIF()) {
+      this.isTiff = this.checkIfTiff(this.src);
+      if (this.isTiff) {
+        this.decodeTiff(this.src);
+      } else {
         this.$refs.imgex.src = this.src;
       }
 
@@ -89,19 +97,29 @@ export default {
     },
   },
   methods: {
-    // Modified from UTIF.replaceIMG
-    decodeUTIF() {
+    checkIfTiff(src) {
       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;
+      const suff = src.split(".").pop().toLowerCase();
+      return sufs.includes(suff);
+    },
+    async decodeTiff(src) {
+      try {
+        const response = await fetch(src);
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        const blob = await response.blob(); // Convert response to a blob
+        const imgex = this.$refs.imgex;
+
+        if (imgex) {
+          // Create a URL for the blob and set it as the image source
+          imgex.src = URL.createObjectURL(blob);
+          imgex.onload = () => URL.revokeObjectURL(imgex.src); // Clean up URL object after loading
+        }
+      } catch (error) {
+        showError("Error decoding TIFF");
+        console.error("Error decoding TIFF:", error);
+      }
     },
     onLoad() {
       let img = this.$refs.imgex;
@@ -146,9 +164,7 @@ export default {
       let container = this.$refs.container;
       let img = this.$refs.imgex;
 
-      this.position.center.x = Math.floor(
-        (container.clientWidth - img.clientWidth) / 2
-      );
+      this.position.center.x = Math.floor((container.clientWidth - img.clientWidth) / 2);
       this.position.center.y = Math.floor(
         (container.clientHeight - img.clientHeight) / 2
       );
@@ -275,6 +291,7 @@ export default {
   },
 };
 </script>
+
 <style>
 .image-ex-container {
   margin: auto;

frontend/src/components/files/ListingItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="{ activebutton: this.isMaximized && this.isSelected}"
+    :class="{ activebutton: this.isMaximized && this.isSelected }"
     class="item"
     role="button"
     tabindex="0"
@@ -18,13 +18,17 @@
       @click="toggleClick"
       :class="{ activetitle: this.isMaximized && this.isSelected }"
     >
-    <img
-      v-if="readOnly === undefined && type === 'image' && isThumbsEnabled && isInView"
-      v-lazy="thumbnailUrl"
-      :class="{ activeimg: this.isMaximized && this.isSelected }"
-      ref="thumbnail"
-    />
-      <i :class="{ iconActive: this.isMaximized && this.isSelected }" v-else class="material-icons"></i>
+      <img
+        v-if="readOnly === undefined && type === 'image' && isThumbsEnabled && isInView"
+        v-lazy="thumbnailUrl"
+        :class="{ activeimg: this.isMaximized && this.isSelected }"
+        ref="thumbnail"
+      />
+      <i
+        :class="{ iconActive: this.isMaximized && this.isSelected }"
+        v-else
+        class="material-icons"
+      ></i>
     </div>
 
     <div :class="{ activecontent: this.isMaximized && this.isSelected }">
@@ -64,10 +68,10 @@
 <script>
 import { enableThumbs } from "@/utils/constants";
 import { getHumanReadableFilesize } from "@/utils/filesizes";
-import { mapMutations, mapGetters, mapState } from "vuex";
-import moment from "moment";
+import { fromNow } from "@/utils/moment";
 import { files as api } from "@/api";
 import * as upload from "@/utils/upload";
+import { state, getters, mutations } from "@/store"; // Import your custom store
 
 export default {
   name: "item",
@@ -90,32 +94,44 @@ export default {
     "path",
   ],
   computed: {
-    ...mapState(["user", "selected", "req", "jwt"]),
-    ...mapGetters(["selectedCount"]),
+    user() {
+      return state.user;
+    },
+    selected() {
+      return state.selected;
+    },
+    req() {
+      return state.req;
+    },
+    jwt() {
+      return state.jwt;
+    },
+    selectedCount() {
+      return getters.selectedCount();
+    },
     isClicked() {
-      if (this.user.singleClick || !this.allowedView ) {
+      if (state.user.singleClick || !this.allowedView) {
         return false;
       }
-      // Assuming toggleClick returns a boolean value
       return !this.isMaximized;
     },
     allowedView() {
-      return this.user.viewMode != "gallery" && this.user.viewMode != "normal"
+      return state.user.viewMode != "gallery" && state.user.viewMode != "normal";
     },
     singleClick() {
-      return this.readOnly == undefined && this.user.singleClick;
+      return this.readOnly == undefined && state.user.singleClick;
     },
     isSelected() {
       return this.selected.indexOf(this.index) !== -1;
     },
     isDraggable() {
-      return this.readOnly == undefined && this.user.perm.rename;
+      return this.readOnly == undefined && state.user.perm?.rename;
     },
     canDrop() {
       if (!this.isDir || this.readOnly !== undefined) return false;
 
       for (let i of this.selected) {
-        if (this.req.items[i].url === this.url) {
+        if (state.req.items[i].url === this.url) {
           return false;
         }
       }
@@ -123,12 +139,12 @@ export default {
       return true;
     },
     thumbnailUrl() {
-      let path = this.req.path
-      if (this.req.path == "/") {
-        path = ""
+      let path = state.req.path;
+      if (state.req.path == "/") {
+        path = "";
       }
       const file = {
-        path: path +"/"+this.name,
+        path: path + "/" + this.name,
         modified: this.modified,
       };
 
@@ -144,7 +160,7 @@ export default {
   mounted() {
     const observer = new IntersectionObserver(this.handleIntersect, {
       root: null,
-      rootMargin: '0px',
+      rootMargin: "0px",
       threshold: 0.5, // Adjust threshold as needed
     });
 
@@ -156,7 +172,7 @@ export default {
   },
   methods: {
     handleIntersect(entries, observer) {
-      entries.forEach(entry => {
+      entries.forEach((entry) => {
         if (entry.isIntersecting) {
           this.isThumbnailInView = true;
           // Stop observing once thumbnail is in view
@@ -167,27 +183,26 @@ export default {
     toggleClick() {
       this.isMaximized = this.isClicked;
     },
-    ...mapMutations(["addSelected", "removeSelected", "resetSelected"]),
     humanSize: function () {
       return this.type == "invalid_link"
         ? "invalid link"
         : getHumanReadableFilesize(this.size);
     },
     humanTime: function () {
-      if (this.readOnly == undefined && this.user.dateFormat) {
-        return moment(this.modified).format("L LT");
+      if (this.readOnly == undefined && state.user.dateFormat) {
+        return fromNow(this.modified, state.user.locale).format("L LT");
       }
-      return moment(this.modified).fromNow();
+      return fromNow(this.modified, state.user.locale);
     },
     dragStart: function () {
-      if (this.selectedCount === 0) {
-        this.addSelected(this.index);
+      if (getters.selectedCount() === 0) {
+        mutations.addSelected(this.index);
         return;
       }
 
       if (!this.isSelected) {
-        this.resetSelected();
-        this.addSelected(this.index);
+        mutations.resetSelected();
+        mutations.addSelected(this.index);
       }
     },
     dragOver: function (event) {
@@ -208,7 +223,7 @@ export default {
       if (!this.canDrop) return;
       event.preventDefault();
 
-      if (this.selectedCount === 0) return;
+      if (getters.selectedCount() === 0) return;
 
       let el = event.target;
       for (let i = 0; i < 5; i++) {
@@ -221,9 +236,9 @@ export default {
 
       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,
+          from: state.req.items[i].url,
+          to: this.url + encodeURIComponent(state.req.items[i].name),
+          name: state.req.items[i].name,
         });
       }
 
@@ -235,9 +250,9 @@ export default {
         api
           .move(items, overwrite, rename)
           .then(() => {
-            this.$store.commit("setReload", true);
+            mutations.setReload(true);
           })
-          .catch(this.$showError);
+          .catch(showError);
       };
 
       let conflict = upload.checkConflict(items, baseItems);
@@ -246,14 +261,14 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
-          prompt: "replace-rename",
+        mutations.showHover({
+          name: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            mutations.closeHovers();
             action(overwrite, rename);
           },
         });
@@ -264,11 +279,11 @@ export default {
       action(overwrite, rename);
     },
     itemClick: function (event) {
-      if (this.singleClick && !this.$store.state.multiple) this.open();
+      if (this.singleClick && !state.multiple) this.open();
       else this.click(event);
     },
     click: function (event) {
-      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();
+      if (!this.singleClick && getters.selectedCount() !== 0) event.preventDefault();
 
       setTimeout(() => {
         this.touches = 0;
@@ -279,8 +294,8 @@ export default {
         this.open();
       }
 
-      if (this.$store.state.selected.indexOf(this.index) !== -1) {
-        this.removeSelected(this.index);
+      if (state.selected.indexOf(this.index) !== -1) {
+        mutations.removeSelected(this.index);
         return;
       }
 
@@ -297,21 +312,16 @@ export default {
         }
 
         for (; fi <= la; fi++) {
-          if (this.$store.state.selected.indexOf(fi) == -1) {
-            this.addSelected(fi);
+          if (state.selected.indexOf(fi) == -1) {
+            mutations.addSelected(fi);
           }
         }
 
         return;
       }
-      if (
-        !this.singleClick &&
-        !event.ctrlKey &&
-        !event.metaKey &&
-        !this.$store.state.multiple
-      )
-        this.resetSelected();
-      this.addSelected(this.index);
+      if (!this.singleClick && !event.ctrlKey && !event.metaKey && !state.multiple)
+        mutations.resetSelected();
+      mutations.addSelected(this.index);
     },
     open: function () {
       this.$router.push({ path: this.url });

frontend/src/components/header/Action.vue

@@ -7,13 +7,15 @@
 </template>
 
 <script>
+import { mutations } from "@/store"; // Import your custom store
+
 export default {
   name: "action",
   props: ["icon", "label", "counter", "show"],
   methods: {
     action: function () {
       if (this.show) {
-        this.$store.commit("showHover", this.show);
+        mutations.showHover(this.show);
       }
       this.$emit("action");
     },
@@ -21,4 +23,6 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+
+</style>

frontend/src/components/prompts/Copy.vue

@@ -27,7 +27,7 @@
       <div>
         <button
           class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')"
         >
@@ -47,11 +47,12 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mutations, state } from "@/store";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
 import * as upload from "@/utils/upload";
+import { showError } from "@/notify";
 
 export default {
   name: "copy",
@@ -62,7 +63,14 @@ export default {
       dest: null,
     };
   },
-  computed: mapState(["req", "selected", "user"]),
+  computed: {
+    user() {
+      return state.user;
+    },
+    closeHovers() {
+      return mutations.closeHovers();
+    },
+  },
   methods: {
     copy: async function (event) {
       event.preventDefault();
@@ -71,9 +79,9 @@ export default {
       // Create a new promise for each file.
       for (let item of this.selected) {
         items.push({
-          from: this.req.items[item].url,
-          to: this.dest + encodeURIComponent(this.req.items[item].name),
-          name: this.req.items[item].name,
+          from: store.req.items[item].url,
+          to: this.dest + encodeURIComponent(store.req.items[item].name),
+          name: store.req.items[item].name,
         });
       }
 
@@ -85,9 +93,8 @@ export default {
           .then(() => {
             buttons.success("copy");
 
-            if (this.$route.path === this.dest) {
-              this.$store.commit("setReload", true);
-
+            if (state.route.path === this.dest) {
+              mutations.setReload(true);
               return;
             }
 
@@ -95,12 +102,12 @@ export default {
           })
           .catch((e) => {
             buttons.done("copy");
-            this.$showError(e);
+            showError(e);
           });
       };
 
-      if (this.$route.path === this.dest) {
-        this.$store.commit("closeHovers");
+      if (state.route.path === this.dest) {
+        mutations.closeHovers();
         action(false, true);
 
         return;
@@ -113,14 +120,14 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
-          prompt: "replace-rename",
+        mutations.showHover({
+          name: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            mutations.closeHovers();
             action(overwrite, rename);
           },
         });

frontend/src/components/prompts/Delete.vue

@@ -10,7 +10,7 @@
     </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')"
@@ -30,24 +30,34 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapState } from "vuex";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
+import { state, getters, mutations } from "@/store";
+import { showError } from "@/notify";
 
 export default {
   name: "delete",
   computed: {
-    ...mapGetters(["isListing", "selectedCount", "currentPrompt"]),
-    ...mapState(["req", "selected"]),
+    isListing() {
+      return getters.isListing();
+    },
+    selectedCount() {
+      return getters.selectedCount();
+    },
+    currentPrompt() {
+      return getters.currentPrompt();
+    },
   },
   methods: {
-    ...mapMutations(["closeHovers"]),
-    submit: async function () {
+    closeHovers() {
+      mutations.closeHovers();
+    },
+    async submit() {
       buttons.loading("delete");
 
       try {
         if (!this.isListing) {
-          await api.remove(this.$route.path);
+          await api.remove(state.route.path);
           buttons.success("delete");
 
           this.currentPrompt?.confirm();
@@ -57,22 +67,22 @@ export default {
 
         this.closeHovers();
 
-        if (this.selectedCount === 0) {
+        if (getters.selectedCount() === 0) {
           return;
         }
 
         let promises = [];
-        for (let index of this.selected) {
-          promises.push(api.remove(this.req.items[index].url));
+        for (let index of state.selected) {
+          promises.push(api.remove(state.req.items[index].url));
         }
 
         await Promise.all(promises);
         buttons.success("delete");
-        this.$store.commit("setReload", true);
+        mutations.setReload(true); // Handle reload as needed
       } catch (e) {
         buttons.done("delete");
-        this.$showError(e);
-        if (this.isListing) this.$store.commit("setReload", true);
+        showError(e);
+        if (this.isListing) mutations.setReload(true); // Handle reload as needed
       }
     },
   },

frontend/src/components/prompts/DeleteUser.vue

@@ -19,22 +19,21 @@
     </div>
   </div>
 </template>
-
 <script>
-import { mapGetters, mapMutations, mapState } from "vuex";
 import { users as api } from "@/api";
+import { showSuccess,showError } from "@/notify";
 import buttons from "@/utils/buttons";
+import { state, mutations, getters } from "@/store";
 
 export default {
   name: "delete",
   computed: {
-    ...mapState(["prompts"]),
     currentPrompt() {
-      return this.prompts.length ? this.prompts[this.prompts.length - 1] : null;
+      return getters.currentPrompt();
     },
     user() {
       return this.currentPrompt?.props?.user;
-    }
+    },
   },
   methods: {
     async deleteUser(event) {
@@ -42,14 +41,16 @@ export default {
       try {
         await api.remove(this.user.id);
         this.$router.push({ path: "/settings/users" });
-        this.$showSuccess(this.$t("settings.userDeleted"));
+        showSuccess(this.$t("settings.userDeleted"));
       } catch (e) {
         e.message === "403"
-          ? this.$showError(this.$t("errors.forbidden"), false)
-          : this.$showError(e);
+          ? showError(this.$t("errors.forbidden"), false)
+          : showError(e);
       }
     },
-    ...mapMutations(["closeHovers"]),
+    closeHovers() {
+      mutations.closeHovers();
+    },
     submit: async function () {
       buttons.loading("delete");
 
@@ -65,22 +66,22 @@ export default {
 
         this.closeHovers();
 
-        if (this.selectedCount === 0) {
+        if (getters.selectedCount() === 0) {
           return;
         }
 
         let promises = [];
         for (let index of this.selected) {
-          promises.push(api.remove(this.req.items[index].url));
+          promises.push(api.remove(state.req.items[index].url));
         }
 
         await Promise.all(promises);
         buttons.success("delete");
-        this.$store.commit("setReload", true);
+        mutations.setReload(true); // Handle reload as needed
       } catch (e) {
         buttons.done("delete");
-        this.$showError(e);
-        if (this.isListing) this.$store.commit("setReload", true);
+        showError(e);
+        if (this.isListing) mutations.setReload(true); // Handle reload as needed
       }
     },
   },

frontend/src/components/prompts/Download.vue

@@ -3,7 +3,6 @@
     <div class="card-title">
       <h2>{{ $t("prompts.download") }}</h2>
     </div>
-
     <div class="card-content">
       <p>{{ $t("prompts.downloadMessage") }}</p>
 
@@ -21,7 +20,7 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { getters } from "@/store"; // Import your custom store
 
 export default {
   name: "download",
@@ -39,6 +38,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["currentPrompt"]),
-  },};
+    currentPrompt() {
+      return getters.currentPrompt();
+    },
+  },
+};
 </script>

frontend/src/components/prompts/FileList.vue

@@ -21,9 +21,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { state, mutations } from "@/store";
 import url from "@/utils/url";
 import { files } from "@/api";
+import { showError } from "@/notify";
 
 export default {
   name: "file-list",
@@ -39,13 +40,12 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "user"]),
     nav() {
       return decodeURIComponent(this.current);
     },
   },
   mounted() {
-    this.fillOptions(this.req);
+    this.fillOptions(state.req);
   },
   methods: {
     fillOptions(req) {
@@ -86,7 +86,7 @@ export default {
       // content.
       let uri = event.currentTarget.dataset.url;
 
-      files.fetch(uri).then(this.fillOptions).catch(this.$showError);
+      files.fetch(uri).then(this.fillOptions).catch(showError);
     },
     touchstart(event) {
       let url = event.currentTarget.dataset.url;
@@ -114,7 +114,7 @@ export default {
       }
     },
     itemClick: function (event) {
-      if (this.user.singleClick) this.next(event);
+      if (state.user.singleClick) this.next(event);
       else this.select(event);
     },
     select: function (event) {
@@ -130,13 +130,13 @@ export default {
       this.$emit("update:selected", this.selected);
     },
     createDir: async function () {
-      this.$store.commit("showHover", {
-        prompt: "newDir",
+      mutations.showHover({
+        name: "newDir",
         action: null,
         confirm: null,
         props: {
           redirect: false,
-          base: this.current === this.$route.path ? null : this.current,
+          base: this.current === state.route.path ? null : this.current,
         },
       });
     },

frontend/src/components/prompts/Help.vue

@@ -21,7 +21,7 @@
     <div class="card-action">
       <button
         type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')"
@@ -33,5 +33,14 @@
 </template>
 
 <script>
-export default { name: "help" };
+import { mutations } from "@/store"; // Import the mutations
+
+export default {
+  name: "help",
+  computed: {
+    closeHovers() {
+      return mutations.closeHovers; // Return the closeHovers mutation
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Info.vue

@@ -33,33 +33,25 @@
         <p>
           <strong>MD5: </strong
           ><code
-            ><a @click="checksum($event, 'md5')">{{
-              $t("prompts.show")
-            }}</a></code
+            ><a @click="checksum($event, 'md5')">{{ $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')">{{ $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')">{{ $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')">{{ $t("prompts.show") }}</a></code
           >
         </p>
       </template>
@@ -68,7 +60,7 @@
     <div class="card-action">
       <button
         type="submit"
-        @click="$store.commit('closeHovers')"
+        @click="closeHovers"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')"
@@ -78,73 +70,87 @@
     </div>
   </div>
 </template>
-
 <script>
 import { getHumanReadableFilesize } from "@/utils/filesizes";
-import { mapState, mapGetters } from "vuex";
-import moment from "moment";
+import { formatTimestamp } from "@/utils/moment";
 import { files as api } from "@/api";
+import { state, getters, mutations } from "@/store"; // Import your custom store
+import { showError } from "@/notify";
 
 export default {
   name: "info",
   computed: {
-    ...mapState(["req", "selected"]),
-    ...mapGetters(["selectedCount", "isListing"]),
-    humanSize: function () {
-      if (this.selectedCount === 0 || !this.isListing) {
-        return getHumanReadableFilesize(this.req.size);
+    closeHovers() {
+      return mutations.closeHovers;
+    },
+    req() {
+      return state.req;
+    },
+    selected() {
+      return state.selected;
+    },
+    selectedCount() {
+      return getters.selectedCount();
+    },
+    isListing() {
+      return getters.isListing();
+    },
+    humanSize() {
+      if (getters.selectedCount() === 0 || !this.isListing) {
+        return getHumanReadableFilesize(state.req.size);
       }
 
       let sum = 0;
 
       for (let selected of this.selected) {
-        sum += this.req.items[selected].size;
+        sum += state.req.items[selected].size;
       }
 
       return getHumanReadableFilesize(sum);
     },
-    humanTime: function () {
-      if (this.selectedCount === 0) {
-        return moment(this.req.modified).fromNow();
+    humanTime() {
+      if (getters.selectedCount() === 0) {
+        return formatTimestamp(state.req.modified, state.user.locale);
       }
-
-      return moment(this.req.items[this.selected[0]].modified).fromNow();
+      return formatTimestamp(
+        state.req.items[this.selected[0]].modified,
+        state.user.locale
+      );
     },
-    modTime: function () {
-      return new Date(Date.parse(this.req.modified)).toLocaleString();
+    modTime() {
+      return new Date(Date.parse(state.req.modified)).toLocaleString();
     },
-    name: function () {
-      return this.selectedCount === 0
-        ? this.req.name
-        : this.req.items[this.selected[0]].name;
+    name() {
+      return getters.selectedCount() === 0
+        ? state.req.name
+        : state.req.items[this.selected[0]].name;
     },
-    dir: function () {
+    dir() {
       return (
-        this.selectedCount > 1 ||
-        (this.selectedCount === 0
-          ? this.req.isDir
-          : this.req.items[this.selected[0]].isDir)
+        getters.selectedCount() > 1 ||
+        (getters.selectedCount() === 0
+          ? state.req.isDir
+          : state.req.items[this.selected[0]].isDir)
       );
     },
   },
   methods: {
-    checksum: async function (event, algo) {
+    async checksum(event, algo) {
       event.preventDefault();
 
       let link;
 
-      if (this.selectedCount) {
-        link = this.req.items[this.selected[0]].url;
+      if (getters.selectedCount()) {
+        link = state.req.items[this.selected[0]].url;
       } else {
-        link = this.$route.path;
+        link = state.route.path;
       }
 
       try {
         const hash = await api.checksum(link, algo);
-        // eslint-disable-next-line
-        event.target.innerHTML = hash
+        event.target.innerHTML = hash;
       } catch (e) {
-        this.$showError(e);
+        showError(e);
       }
     },
   },

frontend/src/components/prompts/Move.vue

@@ -26,7 +26,7 @@
       <div>
         <button
           class="button button--flat button--grey"
-          @click="$store.commit('closeHovers')"
+          @click="closeHovers"
           :aria-label="$t('buttons.cancel')"
           :title="$t('buttons.cancel')"
         >
@@ -47,11 +47,12 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mutations, state } from "@/store";
 import FileList from "./FileList.vue";
 import { files as api } from "@/api";
 import buttons from "@/utils/buttons";
 import * as upload from "@/utils/upload";
+import { showError } from "@/notify";
 
 export default {
   name: "move",
@@ -62,32 +63,39 @@ export default {
       dest: null,
     };
   },
-  computed: mapState(["req", "selected", "user"]),
+  computed: {
+    user() {
+      return state.user;
+    },
+    closeHovers() {
+      return mutations.closeHovers();
+    },
+  },
   methods: {
     move: async function (event) {
       event.preventDefault();
       let items = [];
 
-      for (let item of this.selected) {
+      for (let item of state.selected) {
         items.push({
-          from: this.req.items[item].url,
-          to: this.dest + encodeURIComponent(this.req.items[item].name),
-          name: this.req.items[item].name,
+          from: state.req.items[item].url,
+          to: this.dest + encodeURIComponent(state.req.items[item].name),
+          name: state.req.items[item].name,
         });
       }
 
       let action = async (overwrite, rename) => {
         buttons.loading("move");
-
         await api
           .move(items, overwrite, rename)
           .then(() => {
             buttons.success("move");
             this.$router.push({ path: this.dest });
+            mutations.setReload(true);
           })
           .catch((e) => {
             buttons.done("move");
-            this.$showError(e);
+            showError(e);
           });
       };
 
@@ -98,15 +106,16 @@ export default {
       let rename = false;
 
       if (conflict) {
-        this.$store.commit("showHover", {
-          prompt: "replace-rename",
+        mutations.showHover({
+          name: "replace-rename",
           confirm: (event, option) => {
             overwrite = option == "overwrite";
             rename = option == "rename";
 
             event.preventDefault();
-            this.$store.commit("closeHovers");
+            mutations.closeHovers();
             action(overwrite, rename);
+            mutations.setReload(true);
           },
         });
 

frontend/src/components/prompts/NewDir.vue

@@ -18,7 +18,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')"
       >
@@ -35,11 +35,11 @@
     </div>
   </div>
 </template>
-
 <script>
-import { mapGetters } from "vuex";
 import { files as api } from "@/api";
 import url from "@/utils/url";
+import { getters, mutations, state } from "@/store"; // Import your custom store
+import { showError } from "@/notify";
 
 export default {
   name: "new-dir",
@@ -53,23 +53,31 @@ export default {
       default: null,
     },
   },
-  data: function () {
+  data() {
     return {
       name: "",
     };
   },
   computed: {
-    ...mapGetters(["isFiles", "isListing"]),
+    isFiles() {
+      return getters.isFiles();
+    },
+    isListing() {
+      return getters.isListing();
+    },
   },
   methods: {
-    submit: async function (event) {
+    closeHovers() {
+      return mutations.closeHovers();
+    },
+    async submit(event) {
       event.preventDefault();
-      if (this.new === "") return;
+      if (this.name === "") return;
 
       // Build the path of the new directory.
       let uri;
       if (this.base) uri = this.base;
-      else if (this.isFiles) uri = this.$route.path + "/";
+      else if (getters.isFiles()) uri = state.route.path + "/";
       else uri = "/";
 
       if (!this.isListing) {
@@ -85,13 +93,13 @@ export default {
           this.$router.push({ path: uri });
         } else if (!this.base) {
           const res = await api.fetch(url.removeLastDir(uri) + "/");
-          this.$store.commit("updateRequest", res);
+          mutations.updateRequest(res);
         }
       } catch (e) {
-        this.$showError(e);
+        showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      mutations.closeHovers();
     },
   },
 };

frontend/src/components/prompts/NewFile.vue

@@ -18,7 +18,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')"
       >
@@ -35,29 +35,36 @@
     </div>
   </div>
 </template>
-
 <script>
-import { mapGetters } from "vuex";
+import { state } from "@/store";
 import { files as api } from "@/api";
 import url from "@/utils/url";
+import { getters, mutations } from "@/store"; // Import your custom store
 
 export default {
   name: "new-file",
-  data: function () {
+  data() {
     return {
       name: "",
     };
   },
   computed: {
-    ...mapGetters(["isFiles", "isListing"]),
+    isFiles() {
+      return getters.isFiles();
+    },
+    isListing() {
+      return getters.isListing();
+    },
+    closeHovers() {
+      return mutations.closeHovers;
+    },
   },
   methods: {
-    submit: async function (event) {
+    async submit(event) {
       event.preventDefault();
-      if (this.new === "") return;
-
-      // Build the path of the new directory.
-      let uri = this.isFiles ? this.$route.path + "/" : "/";
+      if (this.name === "") return;
+      // Build the path of the new file.
+      let uri = getters.isFiles() ? state.route.path + "/" : "/";
 
       if (!this.isListing) {
         uri = url.removeLastDir(uri) + "/";
@@ -70,10 +77,10 @@ export default {
         await api.post(uri);
         this.$router.push({ path: uri });
       } catch (e) {
-        this.$showError(e);
+        showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      mutations.closeHovers();
     },
   },
 };

frontend/src/components/prompts/Prompts.vue

@@ -5,8 +5,7 @@
       :ref="currentPromptName"
       :is="currentPromptName"
       v-bind="currentPrompt.props"
-    >
-    </component>
+    />
   </div>
 </template>
 
@@ -27,8 +26,8 @@ import Upload from "./Upload.vue";
 import ShareDelete from "./ShareDelete.vue";
 import DeleteUser from "./DeleteUser.vue";
 import Sidebar from "../Sidebar.vue";
-import { mapGetters, mapState } from "vuex";
 import buttons from "@/utils/buttons";
+import { state, getters, mutations } from "@/store"; // Import your custom store
 
 export default {
   name: "prompts",
@@ -50,30 +49,31 @@ export default {
     Sidebar,
     DeleteUser,
   },
-  data: function () {
+  data() {
     return {
       pluginData: {
         buttons,
-        store: this.$store,
+        store: state, // Directly use state
         router: this.$router,
       },
     };
   },
   created() {
     window.addEventListener("keydown", (event) => {
-      if (this.currentPrompt == null) return;
+      let currentPrompt = getters.currentPrompt();
+      if (!currentPrompt) return;
 
-      let prompt = this.$refs.currentComponent;
+      let prompt = this.$refs[currentPrompt.name];
 
       // Esc!
       if (event.keyCode === 27) {
         event.stopImmediatePropagation();
-        this.$store.commit("closeHovers");
+        mutations.closeHovers();
       }
 
       // Enter
-      if (event.keyCode == 13) {
-        switch (this.currentPrompt.prompt) {
+      if (event.keyCode === 13) {
+        switch (currentPrompt.name) {
           case "delete":
             prompt.submit();
             break;
@@ -91,10 +91,25 @@ export default {
     });
   },
   computed: {
-    ...mapState(["plugins"]),
-    ...mapGetters(["currentPrompt", "currentPromptName"]),
-    showOverlay: function () {
-      return this.currentPrompt !== null && this.currentPrompt.prompt !== "more";
+    currentPromptName() {
+      if (getters.currentPromptName() == null) {
+        return "";
+      }
+      return getters.currentPromptName();
+    },
+    currentPrompt() {
+      if (getters.currentPrompt() == null) {
+        return {
+          props: {},
+        };
+      }
+      return getters.currentPrompt();
+    },
+    plugins() {
+      return state.plugins;
+    },
+    showOverlay() {
+      return getters.currentPromptName() !== "more";
     },
   },
   methods: {},

frontend/src/components/prompts/Rename.vue

@@ -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')"
       >
@@ -39,15 +39,14 @@
     </div>
   </div>
 </template>
-
 <script>
-import { mapState, mapGetters } from "vuex";
 import url from "@/utils/url";
 import { files as api } from "@/api";
+import { state, getters, mutations } from "@/store";
 
 export default {
   name: "rename",
-  data: function () {
+  data() {
     return {
       name: "",
     };
@@ -56,37 +55,48 @@ export default {
     this.name = this.oldName();
   },
   computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing"]),
+    req() {
+      return state.req;
+    },
+    selected() {
+      return state.selected;
+    },
+    selectedCount() {
+      return state.selectedCount;
+    },
+    isListing() {
+      return getters.isListing();
+    },
+    closeHovers() {
+      return mutations.closeHovers;
+    },
   },
   methods: {
-    cancel: function () {
-      this.$store.commit("closeHovers");
+    cancel() {
+      mutations.closeHovers();
     },
-    oldName: function () {
+    oldName() {
       if (!this.isListing) {
-        return this.req.name;
+        return state.req.name;
       }
 
-      if (this.selectedCount === 0 || this.selectedCount > 1) {
-        // This shouldn't happen.
+      if (getters.selectedCount() === 0 || getters.selectedCount() > 1) {
         return;
       }
 
-      return this.req.items[this.selected[0]].name;
+      return state.req.items[this.selected[0]].name;
     },
-    submit: async function () {
+    async submit() {
       let oldLink = "";
       let newLink = "";
 
       if (!this.isListing) {
-        oldLink = this.req.url;
+        oldLink = state.req.url;
       } else {
-        oldLink = this.req.items[this.selected[0]].url;
+        oldLink = state.req.items[this.selected[0]].url;
       }
 
-      newLink =
-        url.removeLastDir(oldLink) + "/" + encodeURIComponent(this.name);
+      newLink = url.removeLastDir(oldLink) + "/" + encodeURIComponent(this.name);
 
       try {
         await api.move([{ from: oldLink, to: newLink }]);
@@ -95,12 +105,12 @@ export default {
           return;
         }
 
-        this.$store.commit("setReload", true);
+        mutations.setReload(true);
       } catch (e) {
-        this.$showError(e);
+        showError(e);
       }
 
-      this.$store.commit("closeHovers");
+      mutations.closeHovers();
     },
   },
 };

frontend/src/components/prompts/Replace.vue

@@ -28,12 +28,15 @@
     </div>
   </div>
 </template>
-
 <script>
-import { mapGetters } from "vuex";
+import { getters } from "@/store"; // Import your custom store
 
 export default {
   name: "replace",
-  computed: mapGetters(["currentPrompt"]),
+  computed: {
+    currentPrompt() {
+      return getters.currentPrompt(); // Access the getter directly from the store
+    },
+  },
 };
 </script>

frontend/src/components/prompts/ReplaceRename.vue

@@ -38,9 +38,14 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
+import { getters } from "@/store"; // Import your custom store
+
 export default {
   name: "replace-rename",
-  computed: mapGetters(["currentPrompt"]),
+  computed: {
+    currentPrompt() {
+      return getters.currentPrompt(); // Access the getter directly from the store
+    },
+  },
 };
 </script>

frontend/src/components/prompts/Share.vue

@@ -58,7 +58,7 @@
       <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')"
         >
@@ -119,16 +119,16 @@
     </template>
   </div>
 </template>
-
 <script>
-import { mapState, mapGetters } from "vuex";
+import { showSuccess, showError } from "@/notify";
+import { state, getters, mutations } from "@/store";
 import { share as api, pub as pub_api } from "@/api";
-import moment from "moment";
+import { fromNow } from "@/utils/moment";
 import Clipboard from "clipboard";
 
 export default {
   name: "share",
-  data: function () {
+  data() {
     return {
       time: "",
       unit: "hours",
@@ -139,22 +139,35 @@ export default {
     };
   },
   computed: {
-    ...mapState(["req", "selected", "selectedCount"]),
-    ...mapGetters(["isListing", "selectedCount"]),
+    closeHovers() {
+      return mutations.closeHovers;
+    },
+    req() {
+      return state.req; // Access state directly
+    },
+    selected() {
+      return state.selected; // Access state directly
+    },
+    selectedCount() {
+      return state.selected.length; // Compute selectedCount directly from state
+    },
+    isListing() {
+      return getters.isListing(); // Access getter directly from the store
+    },
     url() {
       if (!this.isListing) {
-        return this.$route.path;
+        return state.route.path;
       }
-      if (this.selectedCount != 1) {
+      if (getters.selectedCount() !== 1) {
         // selecting current view image
-        return this.$route.path;
+        return state.route.path;
       }
-      return this.req.items[this.selected[0]].url;
+      return state.req.items[this.selected[0]].url;
     },
     getContext() {
-      let path = this.$route.path.replace("/files/", "./");
-      if (this.selectedCount == 1) {
-        path = path + this.req.items[this.selected[0]].name;
+      let path = state.route.path.replace("/files/", "./");
+      if (getters.selectedCount() === 1) {
+        path = path + state.req.items[this.selected[0]].name;
       }
       return path;
     },
@@ -165,25 +178,25 @@ export default {
       this.links = links;
       this.sort();
 
-      if (this.links.length == 0) {
+      if (this.links.length === 0) {
         this.listing = false;
       }
     } catch (e) {
-      this.$showError(e);
+      showError(e);
     }
   },
   mounted() {
     this.clip = new Clipboard(".copy-clipboard");
     this.clip.on("success", () => {
-      this.$showSuccess(this.$t("success.linkCopied"));
+      showSuccess(this.$t("success.linkCopied"));
     });
   },
   beforeUnmount() {
     this.clip.destroy();
   },
   methods: {
-    submit: async function () {
-      let isPermanent = !this.time || this.time == 0;
+    async submit() {
+      let isPermanent = !this.time || this.time === 0;
 
       try {
         let res = null;
@@ -203,30 +216,30 @@ export default {
 
         this.listing = true;
       } catch (e) {
-        this.$showError(e);
+        showError(e);
       }
     },
-    deleteLink: async function (event, link) {
+    async deleteLink(event, link) {
       event.preventDefault();
       try {
         await api.remove(link.hash);
         this.links = this.links.filter((item) => item.hash !== link.hash);
 
-        if (this.links.length == 0) {
+        if (this.links.length === 0) {
           this.listing = false;
         }
       } catch (e) {
-        this.$showError(e);
+        showError(e);
       }
     },
     humanTime(time) {
-      return moment(time * 1000).fromNow();
+      return fromNow(time, state.user.locale);
     },
     buildLink(share) {
       return api.getShareURL(share);
     },
     hasDownloadLink() {
-      return this.selected.length === 1 && !this.req.items[this.selected[0]].isDir;
+      return this.selected.length === 1 && !state.req.items[this.selected[0]].isDir;
     },
     buildDownloadLink(share) {
       return pub_api.getDownloadURL(share);
@@ -239,8 +252,9 @@ export default {
       });
     },
     switchListing() {
-      if (this.links.length == 0 && !this.listing) {
-        this.$store.commit("closeHovers");
+      if (this.links.length === 0 && !this.listing) {
+        // Access the store directly if needed
+        mutations.closeHovers();
       }
 
       this.listing = !this.listing;

frontend/src/components/prompts/ShareDelete.vue

@@ -5,7 +5,7 @@
     </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')"
@@ -23,16 +23,21 @@
     </div>
   </div>
 </template>
-
 <script>
-import { mapGetters } from "vuex";
+import { getters } from "@/store"; // Import your custom store
+
 export default {
   name: "share-delete",
   computed: {
-    ...mapGetters(["currentPrompt"]),
+    closeHovers() {
+      return mutations.closeHovers();
+    },
+    currentPrompt() {
+      return getters.currentPrompt();
+    },
   },
   methods: {
-    submit: function () {
+    submit() {
       this.currentPrompt?.confirm();
     },
   },

frontend/src/components/prompts/Upload.vue

@@ -9,30 +9,134 @@
     </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>
-      <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>
+      <input ref="fileInput" @change="onFilePicked" type="file" style="display: none" />
+      <input
+        ref="folderInput"
+        @change="onFolderPicked"
+        type="file"
+        webkitdirectory
+        directory
+        style="display: none"
+      />
     </div>
   </div>
 </template>
 
 <script>
+import { ref } from "vue";
+import * as upload from "@/utils/upload";
+import { mutations, state, getters } from "@/store";
+
 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();
-    },
+  name: "UploadFiles",
+  setup() {
+    const fileInput = ref(null);
+    const folderInput = ref(null);
+
+    const triggerFilePicker = () => {
+      fileInput.value.click();
+    };
+
+    const triggerFolderPicker = () => {
+      folderInput.value.click();
+    };
+
+    const onFilePicked = (event) => {
+      handleFiles(event);
+    };
+
+    const onFolderPicked = (event) => {
+      handleFiles(event);
+    };
+
+    const handleFiles = (event) => {
+      mutations.closeHovers();
+      const files = event.target.files;
+      if (!files) return;
+
+      const folderUpload = !!files[0].webkitRelativePath;
+      const uploadFiles = [];
+
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        const fullPath = folderUpload ? file.webkitRelativePath : undefined;
+        uploadFiles.push({
+          file, // File object directly
+          name: file.name,
+          size: file.size,
+          isDir: false,
+          fullPath,
+        });
+      }
+
+      const path = getters.getRoutePath();
+      const conflict = upload.checkConflict(uploadFiles, state.req.items);
+
+      if (conflict) {
+        mutations.showHover({
+          name: "replace",
+          action: (event) => {
+            event.preventDefault();
+            mutations.closeHovers();
+            upload.handleFiles(uploadFiles, path, false);
+          },
+          confirm: (event) => {
+            event.preventDefault();
+            mutations.closeHovers();
+            upload.handleFiles(uploadFiles, path, true);
+          },
+        });
+        return;
+      }
+
+      upload.handleFiles(uploadFiles, path, true);
+      mutations.setReload(true);
+    };
+
+    const openUpload = (isFolder) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.multiple = true;
+      input.webkitdirectory = isFolder;
+      input.addEventListener("change", handleFiles);
+      input.click();
+    };
+
+    const uploadFile = () => {
+      openUpload(false);
+    };
+
+    const uploadFolder = () => {
+      openUpload(true);
+    };
+
+    return {
+      triggerFilePicker,
+      triggerFolderPicker,
+      uploadFile,
+      uploadFolder,
+      onFilePicked,
+      onFolderPicked,
+    };
   },
 };
 </script>

frontend/src/components/prompts/UploadFiles.vue

@@ -1,63 +0,0 @@
-<template>
-  <div
-    v-if="filesInUploadCount > 0"
-    class="upload-files"
-    v-bind:class="{ closed: !open }"
-  >
-    <div class="card floating">
-      <div class="card-title">
-        <h2>{{ $t("prompts.uploadFiles", { files: filesInUploadCount }) }}</h2>
-
-        <button
-          class="action"
-          @click="toggle"
-          aria-label="Toggle file upload list"
-          title="Toggle file upload list"
-        >
-          <i class="material-icons">{{
-            open ? "keyboard_arrow_down" : "keyboard_arrow_up"
-          }}</i>
-        </button>
-      </div>
-
-      <div class="card-content file-icons">
-        <div
-          class="file"
-          v-for="file in filesInUpload"
-          :key="file.id"
-          :data-dir="file.isDir"
-          :data-type="file.type"
-          :aria-label="file.name"
-        >
-          <div class="file-name">
-            <i class="material-icons"></i> {{ file.name }}
-          </div>
-          <div class="file-progress">
-            <div v-bind:style="{ width: file.progress + '%' }"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-  name: "uploadFiles",
-  data: function () {
-    return {
-      open: false,
-    };
-  },
-  computed: {
-    ...mapGetters(["filesInUpload", "filesInUploadCount"]),
-  },
-  methods: {
-    toggle: function () {
-      this.open = !this.open;
-    },
-  },
-};
-</script>

frontend/src/components/settings/Languages.vue

@@ -1,17 +1,24 @@
 <template>
-  <select v-on:change="change" :value="locale">
-    <option v-for="(language, value) in locales" :key="value" :value="value">
-      {{ $t("languages." + language) }}
+  <select @change="change" :value="locale">
+    <option v-for="(value, label) in locales" :key="label" :value="label">
+      {{ $t("languages." + label) }}
     </option>
   </select>
 </template>
 
 <script>
-export default {
-  name: "languages",
-  props: ["locale"],
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Languages",
+  props: {
+    locale: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
-    let dataObj = {
+    return {
       locales: {
         he: "he",
         hu: "hu",
@@ -38,18 +45,12 @@ export default {
         "zh-tw": "zhTW",
       },
     };
-
-    Object.defineProperty(dataObj, "locales", {
-      configurable: false,
-      writable: false,
-    });
-
-    return dataObj;
   },
   methods: {
     change(event) {
-      this.$emit("update:locale", event.target.value);
+      const target = event.target;
+      this.$emit("update:locale", target.value);
     },
   },
-};
+});
 </script>

frontend/src/components/settings/UserForm.vue

@@ -67,10 +67,10 @@
 </template>
 
 <script>
-import Languages from "./Languages";
-import Rules from "./Rules";
-import Permissions from "./Permissions";
-import Commands from "./Commands";
+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";
 
 export default {
@@ -118,4 +118,4 @@ export default {
     },
   },
 };
-</script>
+</script>

frontend/src/css/base.css

@@ -1,4 +1,12 @@
 /* Basic Styles */
+:root {
+  --background: white;
+  --surfacePrimary: gray;
+  --surfaceSecondary: lightgray;
+  --textPrimary: white;
+  --textSecondary: gray;
+}
+
 body {
   font-family: "Roboto", sans-serif;
   padding-top: 4em;
@@ -66,57 +74,6 @@ over
   padding-bottom: 4em;
 }
 
-/* Navigation Styles */
-nav {
-  width: 18em;
-  position: fixed;
-  top: 0;
-  padding-top: 4em;
-  left: -19em;
-  z-index: 4;
-  background: #fff;
-  height: 100%;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  transition: .1s ease left;
-}
-
-body.rtl nav {
-  left: unset;
-  right: -17em;
-}
-
-nav.active {
-  left: 0;
-}
-
-body.rtl nav.active {
-  left: unset;
-  right: 0;
-}
-
-nav > div {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-nav .action {
-  width: 100%;
-  display: block;
-  border-radius: 0;
-  font-size: 1.1em;
-  padding: 0.5em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-body.rtl .action {
-  direction: rtl;
-  text-align: right;
-}
-
-nav .action > * {
-  vertical-align: middle;
-}
 
 /* Main Content */
 main {
@@ -188,23 +145,6 @@ body.rtl .breadcrumbs a {
 
 
 
-/* File Selection */
-#file-selection {
-  box-shadow: rgba(0, 0, 0, 0.3) 0px 2em 50px 10px;
-  position: fixed;
-  bottom: 1em;
-  left: 50%;
-  transform: translateX(-50%);
-  display: -ms-flexbox;
-  -ms-flex-align: center;
-  align-items: center;
-  background: #fff;
-  width: 95%;
-  max-width: 30em;
-  z-index: 1;
-  border-radius: 1em;
-}
-
 button {
   flex: 1;
   height: 3em;
@@ -212,29 +152,42 @@ button {
   border: none;
   background-color: #f5f5f5;
   transition: background-color 0.3s;
-
   /* Add borders */
   border-right: 1px solid #ccc;
 }
 
-@media (min-width: 800px) {
-  #file-selection {
-    bottom: 4em;
-  }
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-#file-selection .action {
-  border-radius: 50%;
-  width: auto;
+#popup-notification {
+  color: white;
+  position: fixed;
+  max-width: 90vw;
+  height: 4em;
+  bottom: 0;
+  right: -20em; /* Start off-screen */
+  display: flex;
+  padding: 1em;
+  align-items: center;
+  transition: right 1s ease; /* Animate the 'right' property */
 }
 
-#file-selection > span {
-  display: inline-block;
-  margin-left: 1em;
-  color: #6f6f6f;
-  margin-right: auto;
+#popup-notification-content {
+  color: white;
+  padding: 0;
+  padding-left: .5em;
 }
 
-#file-selection .action span {
-  display: none;
+#popup-notification.success {
+  background: var(--blue);
 }
+#popup-notification.error {
+  background: var(--red);
+}
+
+#popup-notification > i {
+  cursor: pointer;
+  font-size: 1.75em;
+}

frontend/src/css/dark.css

@@ -98,7 +98,7 @@
 
 /* Listing items */
 .dark-mode #listingView .item {
-  background: var(--surfacePrimary);
+  background: var(--surfacePrimary) !important;
   color: var(--textPrimary);
   border-color: var(--divider) !important;
 }
@@ -226,15 +226,6 @@
   background: var(--surfaceSecondary) !important;
 }
 
-/* File selection */
-.dark-mode #file-selection {
-  background: var(--surfaceSecondary) !important;
-}
-
-.dark-mode #file-selection span {
-  color: var(--textPrimary) !important;
-}
-
 /* Dropdown */
 .dark-mode #dropdown {
   background: var(--surfaceSecondary) !important;

frontend/src/css/dashboard.css

@@ -300,11 +300,9 @@ body.rtl .card .card-title>*:first-child {
 .overlay {
   background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
-  top: 4em;
-  left: 0;
   height: 100%;
   width: 100%;
-  z-index: 3;
+  z-index: 4;
   animation: .3s show ease-in;
 }
 

frontend/src/css/fonts.css

@@ -1,3 +1,5 @@
+@import 'material-icons/iconfont/filled.css';
+
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
@@ -166,8 +168,6 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 
-@import '~material-icons/iconfont/filled.css';
-
 .material-icons {
   font-size: 1.5rem;
 }

frontend/src/css/listing.css

@@ -103,9 +103,7 @@ body.rtl #listingView {
   box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
 }
 
-#listingView.gallery .item {
-  max-width: 300px;
-}
+
 #listingView.list .item,
 #listingView.compact .item {
   max-width: 100%;
@@ -116,16 +114,12 @@ body.rtl #listingView {
   box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
 }
 
-#listingView .header {
-  display: none;
-}
-
 #listingView .item div:first-of-type {
   width: 5em;
 }
 
 #listingView .item div:last-of-type {
-  width: calc(100% - 5vw);
+  width: 100%;
 }
 
 #listingView.gallery .item div:first-of-type {
@@ -147,10 +141,10 @@ body.rtl #listingView {
 }
 
 #listingView.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;
 }
 
 #listingView.gallery .item img {
@@ -177,6 +171,7 @@ body.rtl #listingView {
   border: 1px solid rgba(0, 0, 0, 0.1);
   padding: 0;
   border-top: 0;
+  padding-left: .5em;
 }
 
 #listingView.compact h2 {
@@ -197,15 +192,30 @@ body.rtl #listingView {
 }
 
 #listingView.compact .item div:last-of-type {
-  width: calc(100% - 3em);
   display: flex;
   align-items: center;
 }
 
+#listingView.compact .header .name,
+#listingView.list .header .name,
+#listingView.list .item .name,
 #listingView.compact .item .name {
   width: 50%;
 }
 
+#listingView.compact .header .name,
+#listingView.list .header .name {
+  margin-right: 1.5em;
+}
+
+#listingView .header > p {
+  margin: 0;
+  cursor: pointer;
+}
+
+#listingView.compact .header .size,
+#listingView.list .header .size,
+#listingView.list .item .size,
 #listingView.compact .item .size {
   width: 25%;
 }
@@ -217,22 +227,22 @@ body.rtl #listingView {
 }
 
 #listingView.compact .header {
-  display: flex !important;
-  background: var(--surfacePrimary);
   z-index: 999;
   padding: .85em;
-  border: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+#listingView.compact .header,
+#listingView.list .header {
+  border: 1px solid rgba(0, 0, 0, .1);
 }
 
 #listingView.compact .header>div:first-child {
   width: 0;
 }
 
-#listingView.compact .header .name {
-  margin-right: 3em;
-}
-
 #listingView.compact .header a {
   color: inherit;
 }
@@ -245,10 +255,6 @@ body.rtl #listingView {
   font-weight: normal;
 }
 
-#listingView.compact .header .name {
-  margin-right: 3em;
-}
-
 #listingView.compact .header span {
   vertical-align: middle;
 }
@@ -302,22 +308,15 @@ body.rtl #listingView {
 }
 
 #listingView.list .item div:last-of-type {
-  width: calc(100% - 3em);
   display: flex;
   align-items: center;
 }
 
-#listingView.list .item .name {
-  width: 50%;
-}
-
-#listingView.list .item .size {
-  width: 25%;
-}
-
 #listingView .header {
-  display: none !important;
-  background-color: #ccc;
+  display: none;
+  background: white;
+  border-radius: 1em;
+  border: 1px solid rgba(0, 0, 0, .1);
 }
 
 #listingView.list .header i {
@@ -329,50 +328,49 @@ body.rtl #listingView {
 #listingView.compact .header,
 #listingView.list .header {
   display: flex !important;
-  background: white;
   border-top-left-radius: 1em;
   border-top-right-radius: 1em;
   z-index: 999;
   padding: .85em;
-  width:100%;
-  border: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  width: 100%;
 }
+
 #listingView.list .item:first-child {
   margin-top: .5em;
   border-top-left-radius: 1em;
   border-top-right-radius: 1em;
 }
 
-#listingView.list .item:last-child  {
-  margin-bottom: .5em;
-   border-bottom-left-radius: 1em;
-   border-bottom-right-radius: 1em;
-}
-#listingView.list .header>div:first-child {
-  width: 0;
+#listingView.compact .lastGroup > div:last-child {
+  border-bottom-left-radius: 1em;
+  border-bottom-right-radius: 1em;
 }
 
-#listingView.list .header .name {
-  margin-right: 3em;
+#listingView.list .item:last-child {
+  border-bottom-left-radius: 1em;
+  border-bottom-right-radius: 1em;
+}
+
+#listingView.list .item:last-child {
+  margin-bottom: .5em;
+}
+
+#listingView > * >  .header > div  {
+  display:flex;
+  width: 100%;
+}
+#listingView.list .header {
+  margin-bottom: .5em;
 }
 
 #listingView.list .header a {
   color: inherit;
 }
 
-#listingView.list .header>div:first-child {
-  width: 0;
-}
-
 #listingView.list .name {
   font-weight: normal;
 }
 
-#listingView.list .header .name {
-  margin-right: 3em;
-}
-
 #listingView.list .header span {
   vertical-align: middle;
 }
@@ -411,4 +409,4 @@ body.rtl #listingView {
 #listingView #multiple-selection p,
 #listingView #multiple-selection i {
   color: var(--item-selected);
-}
+}

frontend/src/css/styles.css

@@ -1,6 +1,4 @@
-@import "~normalize.css/normalize.css";
-@import "~noty/lib/noty.css";
-@import "~noty/lib/themes/mint.css";
+@import "normalize.css/normalize.css";
 @import "./_variables.css";
 @import "./_buttons.css";
 @import "./_inputs.css";
@@ -10,9 +8,9 @@
 @import "./header.css";
 @import "./listing.css";
 @import "./listing-icons.css";
-@import "./upload-files.css";
 @import "./dashboard.css";
 @import "./login.css";
+@import './mobile.css';
 
 .link {
   color: var(--blue);
@@ -91,7 +89,7 @@ main .spinner .bounce2 {
   border-radius: 50%;
 }
 
-.action:hover {
+.action:not(:disabled):hover {
   background-color: rgba(0, 0, 0, .1);
 }
 
@@ -168,7 +166,9 @@ main .spinner .bounce2 {
 
 #previewer .preview {
   text-align: center;
-  height: calc(100vh - 4em);
+  max-height: 100%;
+  max-width: 100%;
+  height: 100%;
 }
 
 #previewer .preview pre {
@@ -304,44 +304,6 @@ body.rtl .breadcrumbs .chevron {
   font-size: 1rem;
 }
 
-/* * * * * * * * * * * * * * * *
- *            PROMPT           *
- * * * * * * * * * * * * * * * */
-
-.noty_buttons {
-  text-align: right;
-  padding: 0 10px 10px !important;
-}
-
-.noty_buttons button {
-  background: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0,0,0,0.1);
-  box-shadow: 0 0 0 0;
-  font-size: 1rem;
-}
-
-/* * * * * * * * * * * * * * * *
- *            FOOTER           *
- * * * * * * * * * * * * * * * */
-
-.credits {
-  font-size: 1em;
-  color: #a5a5a5;
-  padding: 1em;
-}
-
-.credits > span {
-  display: block;
-  margin-top: .5em;
-  margin-left: 0;
-}
-
-.credits a,
-.credits a:hover {
-  color: inherit;
-  cursor: pointer;
-}
-
 
 /* * * * * * * * * * * * * * * *
  *          ANIMATIONS         *
@@ -385,8 +347,6 @@ body.rtl .breadcrumbs .chevron {
   margin-left: .5rem;
 }
 
-@import './mobile.css';
-
 /* * * * * * * * * * * * * * * *
  *         RTL overrides       *
  * * * * * * * * * * * * * * * */

frontend/src/css/upload-files.css

@@ -1,61 +0,0 @@
-.upload-files .card.floating {
-  left: auto;
-  top: auto;
-  margin: 0;
-  right: 0;
-  bottom: 0;
-  transform: none;
-}
-
-.upload-files .file {
-  margin-bottom: 8px;
-}
-
-.upload-files .file .file-name {
-  font-size: 1.1em;
-  display: flex;
-  align-items: center;
-}
-
-.upload-files .file .file-name i {
-  margin-right: 5px;
-}
-
-.upload-files .file .file-progress {
-  margin-top: 2px;
-  width: 100%;
-  height: 5px;
-}
-
-.upload-files .file .file-progress div {
-  height: 100%;
-  background-color: #40c4ff;
-  width: 0;
-  transition: 0.2s ease width;
-  border-radius: 10px;
-}
-
-.upload-files.closed .card-content {
-  display: none;
-  padding: 0em 1em 1em 1em;
-}
-
-.upload-files .card .card-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8em;
-  padding: 1em 1em 0em;
-}
-
-.upload-files.closed .card-title {
-  font-size: 0.7em;
-  padding: 0.5em 1em;
-}
-
-@media (max-width: 450px) {
-  .upload-files .card.floating {
-    max-width: 100%;
-    width: 100%;
-  }
-}

frontend/src/global.d.ts

@@ -0,0 +1,5 @@
+// src/global.d.ts
+interface Window {
+    grecaptcha?: any; // or use a more specific type if available
+  }
+  

frontend/src/i18n/es.json

@@ -197,7 +197,7 @@
     "executeOnShellDescription": "Por defecto, FileBrowser ejecuta los comandos llamando directamente a sus binarios. Si quieres ejecutarlos en un shell en su lugar (como Bash o PowerShell), puedes definirlo aquí con los argumentos y banderas (flags) necesarios. Si se define, el comando que se ejecuta se añadirá como argumento. Esto se aplica tanto a los comandos de usuario como a los ganchos de eventos.",
     "globalRules": "Se trata de un conjunto global de reglas de permiso y rechazo. Se aplican a todos los usuarios. Puedes definir reglas específicas en la configuración de cada usuario para anular estas.",
     "globalSettings": "Ajustes globales",
-    "hideDotfiles": "",
+    "hideDotfiles": "Ocultar archivos empezados por punto",
     "insertPath": "Introduce la ruta",
     "insertRegex": "Introducir expresión regular",
     "instanceName": "Nombre de la instancia",

frontend/src/i18n/index.js

@@ -1,143 +0,0 @@
-import Vue from "vue";
-import VueI18n from "vue-i18n";
-
-import he from "./he.json";
-import hu from "./hu.json";
-import ar from "./ar.json";
-import de from "./de.json";
-import el from "./el.json";
-import en from "./en.json";
-import es from "./es.json";
-import fr from "./fr.json";
-import is from "./is.json";
-import it from "./it.json";
-import ja from "./ja.json";
-import ko from "./ko.json";
-import nlBE from "./nl-be.json";
-import pl from "./pl.json";
-import pt from "./pt.json";
-import ptBR from "./pt-br.json";
-import ro from "./ro.json";
-import ru from "./ru.json";
-import sk from "./sk.json";
-import ua from "./ua.json";
-import svSE from "./sv-se.json";
-import zhCN from "./zh-cn.json";
-import zhTW from "./zh-tw.json";
-
-Vue.use(VueI18n);
-
-export function detectLocale() {
-  let locale = (navigator.language || navigator.browserLangugae).toLowerCase();
-  switch (true) {
-    case /^he.*/i.test(locale):
-      locale = "he";
-      break;
-    case /^hu.*/i.test(locale):
-      locale = "hu";
-      break;
-    case /^ar.*/i.test(locale):
-      locale = "ar";
-      break;
-    case /^el.*/i.test(locale):
-      locale = "el";
-      break;
-    case /^es.*/i.test(locale):
-      locale = "es";
-      break;
-    case /^en.*/i.test(locale):
-      locale = "en";
-      break;
-    case /^it.*/i.test(locale):
-      locale = "it";
-      break;
-    case /^fr.*/i.test(locale):
-      locale = "fr";
-      break;
-    case /^pt.*/i.test(locale):
-      locale = "pt";
-      break;
-    case /^pt-BR.*/i.test(locale):
-      locale = "pt-br";
-      break;
-    case /^ja.*/i.test(locale):
-      locale = "ja";
-      break;
-    case /^zh-CN/i.test(locale):
-      locale = "zh-cn";
-      break;
-    case /^zh-TW/i.test(locale):
-      locale = "zh-tw";
-      break;
-    case /^zh.*/i.test(locale):
-      locale = "zh-cn";
-      break;
-    case /^de.*/i.test(locale):
-      locale = "de";
-      break;
-    case /^ru.*/i.test(locale):
-      locale = "ru";
-      break;
-    case /^pl.*/i.test(locale):
-      locale = "pl";
-      break;
-    case /^ko.*/i.test(locale):
-      locale = "ko";
-      break;
-    case /^sk.*/i.test(locale):
-      locale = "sk";
-      break;
-    case /^ua.*/i.test(locale):
-      locale = "ua";
-      break;
-    default:
-      locale = "en";
-  }
-
-  return locale;
-}
-
-const removeEmpty = (obj) =>
-  Object.keys(obj)
-    .filter((k) => obj[k] !== null && obj[k] !== undefined && obj[k] !== "") // Remove undef. and null and empty.string.
-    .reduce(
-      (newObj, k) =>
-        typeof obj[k] === "object"
-          ? Object.assign(newObj, { [k]: removeEmpty(obj[k]) }) // Recurse.
-          : Object.assign(newObj, { [k]: obj[k] }), // Copy value.
-      {}
-    );
-
-export const rtlLanguages = ["he", "ar"];
-
-const i18n = new VueI18n({
-  locale: detectLocale(),
-  fallbackLocale: "en",
-  messages: {
-    he: removeEmpty(he),
-    hu: removeEmpty(hu),
-    ar: removeEmpty(ar),
-    de: removeEmpty(de),
-    el: removeEmpty(el),
-    en: en,
-    es: removeEmpty(es),
-    fr: removeEmpty(fr),
-    is: removeEmpty(is),
-    it: removeEmpty(it),
-    ja: removeEmpty(ja),
-    ko: removeEmpty(ko),
-    "nl-be": removeEmpty(nlBE),
-    pl: removeEmpty(pl),
-    "pt-br": removeEmpty(ptBR),
-    pt: removeEmpty(pt),
-    ru: removeEmpty(ru),
-    ro: removeEmpty(ro),
-    sk: removeEmpty(sk),
-    "sv-se": removeEmpty(svSE),
-    ua: removeEmpty(ua),
-    "zh-cn": removeEmpty(zhCN),
-    "zh-tw": removeEmpty(zhTW),
-  },
-});
-
-export default i18n;

frontend/src/i18n/index.ts

@@ -0,0 +1,120 @@
+// i18n.js
+import { createI18n } from 'vue-i18n';
+
+// Import translations
+import he from './he.json';
+import hu from './hu.json';
+import ar from './ar.json';
+import de from './de.json';
+import el from './el.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import is from './is.json';
+import it from './it.json';
+import ja from './ja.json';
+import ko from './ko.json';
+import nlBE from './nl-be.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ptBR from './pt-br.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import sk from './sk.json';
+import ua from './ua.json';
+import svSE from './sv-se.json';
+import zhCN from './zh-cn.json';
+import zhTW from './zh-tw.json';
+
+type LocaleMap = { [key: string]: string };
+
+export function detectLocale(): string {
+  const locale = navigator.language.toLowerCase();
+  const localeMap: LocaleMap = {
+    'he': 'he',
+    'hu': 'hu',
+    'ar': 'ar',
+    'el': 'el',
+    'es': 'es',
+    'en': 'en',
+    'is': 'is',
+    'it': 'it',
+    'fr': 'fr',
+    'pt-br': 'pt-br',
+    'pt': 'pt',
+    'ja': 'ja',
+    'zh-tw': 'zh-tw',
+    'zh-cn': 'zh-cn',
+    'zh': 'zh-cn',
+    'de': 'de',
+    'ro': 'ro',
+    'ru': 'ru',
+    'pl': 'pl',
+    'ko': 'ko',
+    'sk': 'sk',
+    'tr': 'tr',
+    'uk': 'uk',
+    'sv-se': 'sv',
+    'sv': 'sv',
+    'nl-be': 'nl-be',
+  };
+
+  for (const key in localeMap) {
+    if (locale.startsWith(key)) {
+      return localeMap[key];
+    }
+  }
+  return 'en-us'; // Default fallback
+}
+
+// List of RTL languages
+export const rtlLanguages = ['he', 'ar'];
+
+// Function to check if locale is RTL
+export const isRtl = (locale: string) => {
+  const currentLocale = locale || i18n.global.locale;
+  return rtlLanguages.includes(currentLocale);
+};
+
+export function setLocale(locale: string) {
+  // according to doc u only need .value if legacy: false but they lied
+  // https://vue-i18n.intlify.dev/guide/essentials/scope.html#local-scope-1
+  //@ts-ignore
+  i18n.global.locale.value = locale;
+}
+
+
+// Create i18n instance
+const i18n = createI18n({
+  locale: detectLocale(),
+  fallbackLocale: 'en',
+  // expose i18n.global for outside components
+  legacy: true,
+  messages: {
+    he,
+    hu,
+    ar,
+    de,
+    el,
+    en,
+    es,
+    fr,
+    is,
+    it,
+    ja,
+    ko,
+    'nl-be': nlBE,
+    pl,
+    'pt-br': ptBR,
+    pt,
+    ru,
+    ro,
+    sk,
+    'sv-se': svSE,
+    ua,
+    'zh-cn': zhCN,
+    'zh-tw': zhTW,
+  },
+});
+
+export default i18n;

frontend/src/main.js

@@ -1,52 +0,0 @@
-import cssVars from "css-vars-ponyfill";
-import { sync } from "vuex-router-sync";
-import store from "@/store";
-import router from "@/router";
-import i18n from "@/i18n";
-import Vue from "@/utils/vue";
-import { recaptcha, loginPage } from "@/utils/constants";
-import { login, validateLogin } from "@/utils/auth";
-
-import App from "@/App";
-export const eventBus = new Vue(); // creating an event bus.
-
-cssVars();
-
-sync(store, router);
-
-async function start() {
-  try {
-    if (loginPage) {
-      await validateLogin();
-    } else {
-      await login("publicUser", "publicUser", "");
-    }
-  } catch (e) {
-    console.log(e);
-  }
-
-  if (recaptcha) {
-    await new Promise((resolve) => {
-      const check = () => {
-        if (typeof window.grecaptcha === "undefined") {
-          setTimeout(check, 100);
-        } else {
-          resolve();
-        }
-      };
-
-      check();
-    });
-  }
-
-  new Vue({
-    el: "#app",
-    store,
-    router,
-    i18n,
-    template: "<App/>",
-    components: { App },
-  });
-}
-
-start();

frontend/src/main.ts

@@ -0,0 +1,43 @@
+import { createApp } from 'vue';
+import router from './router'; // Adjust the path as per your setup
+import App from './App.vue'; // Adjust the path as per your setup
+import { state } from '@/store'; // Adjust the path as per your setup
+import i18n from "@/i18n";
+import VueLazyload from "vue-lazyload";
+
+import './css/styles.css';
+
+const app = createApp(App);
+
+// provide v-focus for components
+app.directive("focus", {
+  mounted: async (el) => {
+    // initiate focus for the element
+    el.focus();
+  },
+});
+
+// Install additionals
+app.use(VueLazyload);
+app.use(i18n);
+app.use(router);
+
+// Provide state to the entire application
+app.provide('state', state);
+
+// provide v-focus for components
+app.directive("focus", {
+  mounted: async (el) => {
+    // initiate focus for the element
+    el.focus();
+  },
+});
+
+app.mixin({
+  mounted() {
+    // expose vue instance to components
+    this.$el.__vue__ = this;
+  },
+});
+
+router.isReady().then(() => app.mount("#app"));

frontend/src/notify/index.ts

@@ -0,0 +1,7 @@
+
+import { showSuccess, showError, closePopUp } from "./message.js";
+export {
+    showSuccess,
+    showError,
+    closePopUp,
+};

frontend/src/notify/message.js

@@ -0,0 +1,45 @@
+export function showPopup(type, message) {
+    const [popup, popupContent] = getElements();
+    popup.classList.remove('success', 'error'); // Clear previous types
+    popup.classList.add(type);
+    popupContent.textContent = message;
+
+    // Start animation: bring the popup into view
+    popup.style.right = '1em';
+
+    // Automatically hide after 10 seconds
+    setTimeout(() => {
+        closePopUp()
+    }, 10000);
+}
+
+export function closePopUp() {
+    const [popup, popupContent] = getElements();
+    popup.style.right = '-50em'; // Slide out
+    popupContent.textContent = "no content";
+}
+
+function getElements() {
+    const popup = document.getElementById('popup-notification');
+    if (!popup) {
+        console.error('Popup notification element not found');
+        return [null, null];
+    }
+
+    const popupContent = popup.querySelector('#popup-notification-content');
+    if (!popupContent) {
+        console.error('Popup notification content element not found');
+        return [null, null];
+    }
+
+    return [popup, popupContent];
+}
+
+export function showSuccess(message) {
+    showPopup('success', message);
+}
+
+export function showError(message) {
+    showPopup('error', message);
+    console.error(message)
+}

frontend/src/router/index.js

@@ -1,194 +0,0 @@
-import Vue from "vue";
-import Router from "vue-router";
-import Login from "@/views/Login";
-import Layout from "@/views/Layout";
-import Files from "@/views/Files";
-import Share from "@/views/Share";
-import Users from "@/views/settings/Users";
-import User from "@/views/settings/User";
-import Settings from "@/views/Settings";
-import GlobalSettings from "@/views/settings/Global";
-import ProfileSettings from "@/views/settings/Profile";
-import Shares from "@/views/settings/Shares";
-import Errors from "@/views/Errors";
-import store from "@/store";
-import { baseURL, name } from "@/utils/constants";
-import i18n, { rtlLanguages } from "@/i18n";
-
-Vue.use(Router);
-
-const titles = {
-  Login: "sidebar.login",
-  Share: "buttons.share",
-  Files: "files.files",
-  Settings: "sidebar.settings",
-  ProfileSettings: "settings.profileSettings",
-  Shares: "settings.shareManagement",
-  GlobalSettings: "settings.globalSettings",
-  Users: "settings.users",
-  User: "settings.user",
-  Forbidden: "errors.forbidden",
-  NotFound: "errors.notFound",
-  InternalServerError: "errors.internal",
-};
-
-const router = new Router({
-  base: baseURL,
-  mode: "history",
-  routes: [
-    {
-      path: "/login",
-      name: "Login",
-      component: Login,
-      beforeEnter: (to, from, next) => {
-        if (store.getters.isLogged) {
-          return next({ path: "/files" });
-        }
-
-        next();
-      },
-    },
-    {
-      path: "/*",
-      component: Layout,
-      children: [
-        {
-          path: "/share/*",
-          name: "Share",
-          component: Share,
-        },
-        {
-          path: "/files/*",
-          name: "Files",
-          component: Files,
-          meta: {
-            requiresAuth: true,
-          },
-        },
-        {
-          path: "/settings",
-          name: "Settings",
-          component: Settings,
-          redirect: {
-            path: "/settings/profile",
-          },
-          meta: {
-            requiresAuth: true,
-          },
-          children: [
-            {
-              path: "/settings/profile",
-              name: "ProfileSettings",
-              component: ProfileSettings,
-            },
-            {
-              path: "/settings/shares",
-              name: "Shares",
-              component: Shares,
-            },
-            {
-              path: "/settings/global",
-              name: "GlobalSettings",
-              component: GlobalSettings,
-              meta: {
-                requiresAdmin: true,
-              },
-            },
-            {
-              path: "/settings/users",
-              name: "Users",
-              component: Users,
-              meta: {
-                requiresAdmin: true,
-              },
-            },
-            {
-              path: "/settings/users/*",
-              name: "User",
-              component: User,
-              meta: {
-                requiresAdmin: true,
-              },
-            },
-          ],
-        },
-        {
-          path: "/403",
-          name: "Forbidden",
-          component: Errors,
-          props: {
-            errorCode: 403,
-            showHeader: true,
-          },
-        },
-        {
-          path: "/404",
-          name: "NotFound",
-          component: Errors,
-          props: {
-            errorCode: 404,
-            showHeader: true,
-          },
-        },
-        {
-          path: "/500",
-          name: "InternalServerError",
-          component: Errors,
-          props: {
-            errorCode: 500,
-            showHeader: true,
-          },
-        },
-        {
-          path: "/files",
-          redirect: {
-            path: "/files/",
-          },
-        },
-        {
-          path: "/*",
-          redirect: (to) => `/files${to.path}`,
-        },
-      ],
-    },
-  ],
-});
-
-router.beforeEach((to, from, next) => {
-  const title = i18n.t(titles[to.name]);
-  document.title = title + " - " + name;
-
-  /*** RTL related settings per route ****/
-  const rtlSet = document.querySelector("body").classList.contains("rtl");
-  const shouldSetRtl = rtlLanguages.includes(i18n.locale);
-  switch (true) {
-    case shouldSetRtl && !rtlSet:
-      document.querySelector("body").classList.add("rtl");
-      break;
-    case !shouldSetRtl && rtlSet:
-      document.querySelector("body").classList.remove("rtl");
-      break;
-  }
-
-  if (to.matched.some((record) => record.meta.requiresAuth)) {
-    if (!store.getters.isLogged) {
-      next({
-        path: "/login",
-        query: { redirect: to.fullPath },
-      });
-
-      return;
-    }
-
-    if (to.matched.some((record) => record.meta.requiresAdmin)) {
-      if (!store.state.user.perm.admin) {
-        next({ path: "/403" });
-        return;
-      }
-    }
-  }
-
-  next();
-});
-
-export default router;

frontend/src/router/index.ts

@@ -0,0 +1,217 @@
+import { RouteLocation, createRouter, createWebHistory } from "vue-router";
+import Login from "@/views/Login.vue";
+import Layout from "@/views/Layout.vue";
+import Files from "@/views/Files.vue";
+import Share from "@/views/Share.vue";
+import Users from "@/views/settings/Users.vue";
+import User from "@/views/settings/User.vue";
+import Settings from "@/views/Settings.vue";
+import GlobalSettings from "@/views/settings/Global.vue";
+import ProfileSettings from "@/views/settings/Profile.vue";
+import Shares from "@/views/settings/Shares.vue";
+import Errors from "@/views/Errors.vue";
+import { baseURL, name } from "@/utils/constants";
+import { getters, state } from "@/store";
+import { recaptcha, loginPage } from "@/utils/constants";
+import { login, validateLogin } from "@/utils/auth";
+import { mutations } from "@/store";
+import i18n from "@/i18n";
+
+const titles = {
+  Login: "sidebar.login",
+  Share: "buttons.share",
+  Files: "files.files",
+  Settings: "sidebar.settings",
+  ProfileSettings: "settings.profileSettings",
+  Shares: "settings.shareManagement",
+  GlobalSettings: "settings.globalSettings",
+  Users: "settings.users",
+  User: "settings.user",
+  Forbidden: "errors.forbidden",
+  NotFound: "errors.notFound",
+  InternalServerError: "errors.internal",
+};
+
+const routes = [
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
+  },
+  {
+    path: "/share",
+    component: Layout,
+    children: [
+      {
+        path: ":path*",
+        name: "Share",
+        component: Share,
+      },
+    ],
+  },
+  {
+    path: "/files",
+    component: Layout,
+    meta: {
+      requiresAuth: true,
+    },
+    children: [
+      {
+        path: ":path*",
+        name: "Files",
+        component: Files,
+      },
+    ],
+  },
+  {
+    path: "/settings",
+    component: Layout,
+    meta: {
+      requiresAuth: true,
+    },
+    children: [
+      {
+        path: "",
+        name: "Settings",
+        component: Settings,
+        redirect: {
+          path: "/settings/profile",
+        },
+        children: [
+          {
+            path: "profile",
+            name: "ProfileSettings",
+            component: ProfileSettings,
+          },
+          {
+            path: "shares",
+            name: "Shares",
+            component: Shares,
+          },
+          {
+            path: "global",
+            name: "GlobalSettings",
+            component: GlobalSettings,
+            meta: {
+              requiresAdmin: true,
+            },
+          },
+          {
+            path: "users",
+            name: "Users",
+            component: Users,
+            meta: {
+              requiresAdmin: true,
+            },
+          },
+          {
+            path: "users/:id",
+            name: "User",
+            component: User,
+            meta: {
+              requiresAdmin: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "/403",
+    name: "Forbidden",
+    component: Errors,
+    props: {
+      errorCode: 403,
+      showHeader: true,
+    },
+  },
+  {
+    path: "/404",
+    name: "NotFound",
+    component: Errors,
+    props: {
+      errorCode: 404,
+      showHeader: true,
+    },
+  },
+  {
+    path: "/500",
+    name: "InternalServerError",
+    component: Errors,
+    props: {
+      errorCode: 500,
+      showHeader: true,
+    },
+  },
+  {
+    path: "/:catchAll(.*)*",
+    redirect: (to: RouteLocation) =>
+      `/files/${[...to.params.catchAll].join("/")}`,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(baseURL),
+  routes,
+});
+
+
+async function initAuth() {
+  if (loginPage) {
+      await validateLogin();
+  } else {
+      await login("publicUser", "publicUser", "");
+  }
+  if (recaptcha) {
+      await new Promise<void>((resolve) => {
+          const check = () => {
+              if (typeof window.grecaptcha === "undefined") {
+                  setTimeout(check, 100);
+              } else {
+                  resolve();
+              }
+          };
+
+          check();
+      });
+  }
+}
+
+router.beforeResolve(async (to, from, next) => {
+  const title = i18n.global.t(titles[to.name as keyof typeof titles]);
+  document.title = title + " - " + name;
+  mutations.setRoute(to)
+  // this will only be null on first route
+  if (from.name == null) {
+    try {
+      await initAuth();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  if (to.path.endsWith("/login") && getters.isLoggedIn()) {
+    next({ path: "/files/" });
+    return;
+  }
+
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
+    if (!getters.isLoggedIn()) {
+      next({
+        path: "/login",
+        query: { redirect: to.fullPath },
+      });
+      return;
+    }
+
+    if (to.matched.some((record) => record.meta.requiresAdmin)) {
+      if (state.user === null || !getters.isAdmin()) {
+        next({ path: "/403" });
+        return;
+      }
+    }
+  }
+
+  next();
+});
+
+export { router, router as default };

frontend/src/store/eventBus.js

@@ -0,0 +1,16 @@
+// eventBus.ts
+class EventBus extends EventTarget {
+  emit(event, data) {
+    this.dispatchEvent(new CustomEvent(event, { detail: data }));
+  }
+
+  on(event, callback) {
+    this.addEventListener(event, (e) => callback(e.detail));
+  }
+}
+
+export const eventBus = new EventBus();
+
+export function emitStateChanged() {
+  eventBus.emit('stateChanged');
+}

frontend/src/store/getters.js

@@ -1,32 +1,131 @@
-const getters = {
-  isLogged: (state) => state.user !== null,
-  isFiles: (state) => !state.loading && state.route.name === "Files",
-  isListing: (state, getters) => getters.isFiles && state.req.isDir,
-  selectedCount: (state) => state.selected.length,
-  progress: (state) => {
-    if (state.upload.progress.length == 0) {
+import { state } from "./state.js";
+
+export const getters = {
+  isMobile: () => state.isMobile,
+  isDarkMode: () => {
+    if (state.user == null) {
+      return true;
+    }
+    return state.user.darkMode === true;
+  },
+  isLoggedIn: () => {
+    return state.user !== null && state.user?.username != undefined && state.user?.username != "publicUser";
+  },
+  isAdmin: () => state.user.perm?.admin == true,
+  isFiles: () => state.route.name === "Files",
+  isListing: () => getters.isFiles() && state.req.isDir,
+  selectedCount: () => Array.isArray(state.selected) ? state.selected.length : 0,
+  isSingleFileSelected: () => getters.selectedCount() === 1 && !state.req.items[state.selected[0]]?.isDir,
+  selectedDownloadUrl() {
+    let selectedItem = state.selected[0]
+    return state.req.items[selectedItem].url;
+  },
+  isSidebarVisible: () => {
+    if (!getters.isLoggedIn()) {
+      return false;
+    }
+    console.log(getters.currentPromptName());
+    if (typeof getters.currentPromptName() === "string" && !getters.isStickySidebar()) {
+      return false;
+    }
+    console.log(getters.currentView());
+    if (getters.currentView() !== "listingView") {
+      return false;
+    }
+    return state.showSidebar || getters.isStickySidebar();
+  },
+  isStickySidebar: () => {
+    if (getters.isMobile()) {
+      return false
+    }
+    if (!getters.isLoggedIn()) {
+      return true
+    }
+    return state.user?.stickySidebar
+  },
+  showOverlay: () => {
+    if (!getters.isLoggedIn()) {
+      return false
+    }
+    const hasPrompt = getters.currentPrompt() !== null && getters.currentPromptName() !== "more";
+    const shouldOverlaySidebar = getters.isSidebarVisible() && !getters.isStickySidebar()
+    return hasPrompt || shouldOverlaySidebar;
+  },
+  getRoutePath: () => {
+    return state.route.path.endsWith("/")
+    ? state.route.path
+    : state.route.path + "/";
+  },
+  currentView: () => {
+    let returnVal = null;
+    if (state.req.type !== undefined) {
+      if (state.req.isDir) {
+        returnVal = "listingView";
+      } else if ("content" in state.req) {
+        returnVal = "editor";
+      } else {
+        returnVal = "preview";
+      }
+    }
+    return returnVal;
+  },
+  progress: () => {
+    // Check if state.upload is defined and valid
+    if (!state.upload || !Array.isArray(state.upload.progress) || !Array.isArray(state.upload.sizes)) {
       return 0;
     }
 
+    // Handle cases where progress or sizes arrays might be empty
+    if (state.upload.progress.length === 0 || state.upload.sizes.length === 0) {
+      return 0;
+    }
+
+    // Calculate totalSize
     let totalSize = state.upload.sizes.reduce((a, b) => a + b, 0);
 
-    let sum = state.upload.progress.reduce((acc, val) => acc + val);
+    // Calculate sum of progress
+    let sum = state.upload.progress.reduce((acc, val) => acc + val, 0);
+
+    // Return progress as a percentage
     return Math.ceil((sum / totalSize) * 100);
   },
-  filesInUploadCount: (state) => {
-    let total =
-      Object.keys(state.upload.uploads).length + state.upload.queue.length;
-    return total;
+
+  filesInUploadCount: () => {
+    const uploadsCount = state.upload.length
+    const queueCount = state.queue.length
+    return uploadsCount + queueCount;
   },
-  currentPrompt: (state) => {
-    return state.prompts.length > 0
-      ? state.prompts[state.prompts.length - 1]
-      : null;
+
+  currentPrompt: () => {
+    // Ensure state.prompts is an array
+    if (!Array.isArray(state.prompts)) {
+      return null;
+    }
+    if (state.prompts.length === 0) {
+      return null;
+    }
+    return state.prompts[state.prompts.length - 1]
   },
-  currentPromptName: (_, getters) => {
-    return getters.currentPrompt?.prompt;
+
+  currentPromptName: () => {
+    // Ensure state.prompts is an array
+    if (!Array.isArray(state.prompts) || state.prompts.length === 0) {
+      return null;
+    }
+    // Check if the name property is a string
+    const lastPrompt = state.prompts[state.prompts.length - 1];
+    if (typeof lastPrompt?.name !== "string") {
+      return null;
+    }
+    return lastPrompt.name;
   },
-  filesInUpload: (state) => {
+
+  filesInUpload: () => {
+    // Ensure state.upload.uploads is an object and state.upload.sizes is an array
+    if (typeof state.upload.uploads !== 'object' || !Array.isArray(state.upload.sizes)) {
+      return [];
+    }
+
     let files = [];
 
     for (let index in state.upload.uploads) {
@@ -34,11 +133,11 @@ const getters = {
       let id = upload.id;
       let type = upload.type;
       let name = upload.file.name;
-      let size = state.upload.sizes[id];
+      let size = state.upload.sizes[id] || 0; // Default to 0 if size is undefined
       let isDir = upload.file.isDir;
       let progress = isDir
         ? 100
-        : Math.ceil((state.upload.progress[id] / size) * 100);
+        : Math.ceil((state.upload.progress[id] || 0 / size) * 100); // Default to 0 if progress is undefined
 
       files.push({
         id,
@@ -52,5 +151,3 @@ const getters = {
     return files.sort((a, b) => a.progress - b.progress);
   },
 };
-
-export default getters;