fix: add errors to spec

* introduce max interval checks

* Update validate.ts

* Update validate.ts

* Update validate.ts

* Update validate.ts

.dockerignore

@@ -1,8 +1,7 @@
 .github
-.next
 build
 node_modules
 uploads*
 .env
 .eslintcache
-generated
+src/prisma

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,54 +1,70 @@
-name: Bug
-description: File a bug report
-title: 'Bug: [insert title]'
+name: Bug Report
+description: Report a reproducible bug in Zipline
+title: 'Bug: [short description of the issue]'
 labels: ['bug']
 body:
   - type: textarea
     id: what-happened
     attributes:
-      label: What happened?
-      description: Provide steps to reproduce the bug, and some context.
-      value: 'A bug happened!'
+      label: Bug description
+      description: |
+        Describe in detail what you were doing and what happened.
+        Please include screenshots, logs, or error messages if possible, as they help diagnose the issue faster.
     validations:
       required: true
+
   - type: dropdown
-    id: version
+    id: runtime-type
     attributes:
-      label: Version
-      description: What version (or docker image) of Zipline are you using?
+      label: How is Zipline being run?
+      description:
       options:
-        - Latest v4 release (ghcr.io/diced/zipline or ghcr.io/diced/zipline:latest)
-        - Latest v4 commit (ghcr.io/diced/zipline:trunk)
-        - Latest v3 release (ghcr.io/diced/zipline:v3)
-        - Latest v3 commit (ghcr.io/diced/zipline:v3-trunk)
-        - other (provide version in additional info)
+        - On docker (docker, docker compose, etc.)
+        - Built from source (running it through `pnpm start` or `node`, etc.)
+        - Other (please specify in the "Zipline Version" section)
     validations:
       required: true
+
+  - type: textarea
+    id: runtime-version
+    attributes:
+      label: Zipline Version
+      description: |
+        Provide the version of Zipline you are using:
+        - If version checking is enabled (it is by default): paste the response from `http://<domain>/api/version`
+        - If using docker (and can't do the above): specify the tag you are using (`latest`, `trunk`, or a tag digest)
+        - A simple version number (e.g. "4.2.1") may also suffice
+      placeholder: '4.2.1'
+    validations:
+      required: true
+
   - type: dropdown
     id: browsers
     attributes:
-      label: What browser(s) are you seeing the problem on?
+      label: If applicable, what browsers are you seeing this issue on?
       multiple: true
       options:
-        - Firefox
-        - Chromium-based (Chrome, Edge, Brave, Opera, mobile chrome/chromium based, etc)
-        - Safari
-        - Firefox Mobile
-        - Safari Mobile
+        - Chromium based (Chrome, Brave, Edge, Opera, etc.)
+        - Firefox based (Firefox, Zen Browser, Waterfox, etc.)
+        - Safari (On macOS and/or iOS)
+        - Chromium based on Android/iOS
+        - Firefox based on Android/iOS
+        - Other (Please specify in the "Steps to Reproduce" section)
+
   - type: textarea
     id: zipline-logs
     attributes:
-      label: Zipline Logs
-      description: Please copy and paste any relevant log output. Not seeing anything interesting? Try adding the `DEBUG=zipline` (v4) or `DEBUG=true` (v3) environment variable to see more logs, make sure to review the output and remove any sensitive information as it can be VERY verbose at times.
-      render: shell
+      label: Relevant Logs
+      description: |
+        Paste any relevant logs from Zipline or the browser (if applicable).
+        If logs don't look useful, you can enable debug mode by setting the environment variable `DEBUG=zipline` when starting Zipline.
+        Then reproduce the issue and copy the logs here.
+        **Note:** Debug logs may contain sensitive information.
+
   - type: textarea
-    id: browser-logs
+    id: reproduction
     attributes:
-      label: Browser Logs
-      description: Please copy and paste any relevant log output.
-      render: shell
-  - type: textarea
-    id: additional-info
-    attributes:
-      label: Additional Info
-      description: Anything else that could be used to narrow down the issue, like your config.
+      label: Steps to Reproduce
+      description: |
+        Please list the exact steps required to reproduce the issue.
+        Include any relevant configuration options, settings, or external services that may affect Zipline’s functionality.

.github/ISSUE_TEMPLATE/config.yml

@@ -3,9 +3,9 @@ contact_links:
   - name: Feature Request
     url: https://github.com/diced/zipline/discussions/new?category=ideas&title=Your%20brief%20description%20here&labels=feature
     about: Ask for a new feature
+  - name: Documentation
+    url: https://zipline.diced.sh
+    about: Maybe take a look a the docs?
   - name: Zipline Discord
     url: https://discord.gg/EAhCRfGxCF
     about: Ask for help with anything related to Zipline!
-  - name: Zipline Docs
-    url: https://zipline.diced.sh
-    about: Maybe take a look a the docs?

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node: [20.x, 22.x, 24.x]
+        node: [22.x, 24.x]
         arch: [amd64, arm64]
     runs-on: ubuntu-24.04${{ matrix.arch == 'arm64' && '-arm' || '' }}
 
@@ -37,10 +37,9 @@ jobs:
         with:
           path: |
             ${{ steps.pnpm-cache.outputs.store_path }}
-            ${{ github.workspace }}/.next/cache
-          key: ${{ runner.os }}-pnpm-next-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          key: ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
           restore-keys: |
-            ${{ runner.os }}-pnpm-next-store-${{ hashFiles('**/package-lock.json') }}-
+            ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}-
 
       - name: Install
         run: pnpm install
@@ -48,5 +47,4 @@ jobs:
       - name: Build
         env:
           ZIPLINE_BUILD: 'true'
-          NEXT_TELEMETRY_DISABLED: '1'
         run: pnpm build

.github/workflows/openapi.yml

@@ -0,0 +1,99 @@
+name: Generate OpenAPI Spec
+
+on:
+  push:
+    branches: [v4, trunk]
+  pull_request:
+    branches: [v4, trunk]
+  workflow_dispatch:
+
+jobs:
+  gen-openapi:
+    strategy:
+      matrix:
+        node: [24.x]
+        arch: [amd64]
+
+    runs-on: ubuntu-24.04
+
+    services:
+      postgres:
+        image: postgres:16
+        ports:
+          - 5432:5432
+        env:
+          POSTGRES_USER: zipline
+          POSTGRES_PASSWORD: zipline
+          POSTGRES_DB: zipline
+        options: >-
+          --health-cmd="pg_isready -U zipline -d zipline"
+          --health-interval=5s
+          --health-timeout=5s
+          --health-retries=10
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use node@${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+
+      - uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        id: pnpm-cache
+        run: |
+          echo "store_path=$(pnpm store path --silent)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        with:
+          path: |
+            ${{ steps.pnpm-cache.outputs.store_path }}
+          key: ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.arch }}-${{ matrix.node }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}-
+
+      - name: Install
+        run: pnpm install
+
+      - name: Build
+        env:
+          ZIPLINE_BUILD: 'true'
+        run: pnpm build
+
+      - name: Generate secret
+        id: secret
+        run: |
+          SECRET=$(openssl rand -base64 48 | tr -dc 'a-zA-Z0-9')
+          echo "secret=$SECRET" >> $GITHUB_OUTPUT
+
+      - name: Wait for Postgres
+        run: |
+          until pg_isready -h localhost -p 5432 -U zipline; do
+            echo "Waiting for postgres..."
+            sleep 2
+          done
+
+      - name: Run generator
+        env:
+          DATABASE_URL: postgres://zipline:zipline@localhost:5432/zipline
+          CORE_SECRET: ${{ steps.secret.outputs.secret }}
+          NODE_ENV: production
+        run: pnpm openapi
+
+      - name: Verify openapi.json exists
+        run: |
+          if [ ! -f "./openapi.json" ]; then
+            echo "openapi.json not found"
+            exit 1
+          fi
+
+      - name: Upload openapi.json
+        uses: actions/upload-artifact@v4
+        with:
+          name: openapi-json
+          path: ./openapi.json

.gitignore

@@ -13,17 +13,14 @@
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
-
 # production
-/build
+build/
 
 # misc
 .DS_Store
 *.pem
 .idea
+.vscode
 
 # debug
 npm-debug.log*
@@ -38,7 +35,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
 
 # eslint
 .eslintcache
@@ -52,4 +48,6 @@ next-env.d.ts
 uploads*/
 *.crt
 *.key
-generated
+src/prisma
+.memory.log*
+openapi.json

Dockerfile

@@ -20,14 +20,18 @@ FROM base AS builder
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
 COPY src ./src
-COPY next.config.js ./next.config.js
+COPY .gitignore ./.gitignore
+
+COPY postcss.config.cjs ./postcss.config.cjs
+COPY prettier.config.cjs ./prettier.config.cjs
+COPY eslint.config.mjs ./eslint.config.mjs
+COPY vite.config.ts ./vite.config.ts
 COPY tsup.config.ts ./tsup.config.ts
 COPY tsconfig.json ./tsconfig.json
 COPY mimes.json ./mimes.json
 COPY code.json ./code.json
-
-ENV NEXT_TELEMETRY_DISABLED=1 \
-  NODE_ENV=production
+COPY vite-env.d.ts ./vite-env.d.ts
+COPY scripts ./scripts
 
 RUN ZIPLINE_BUILD=true pnpm run build
 
@@ -36,21 +40,25 @@ FROM base
 COPY --from=deps /zipline/node_modules ./node_modules
 
 COPY --from=builder /zipline/build ./build
-COPY --from=builder /zipline/.next ./.next
 
 COPY --from=builder /zipline/mimes.json ./mimes.json
 COPY --from=builder /zipline/code.json ./code.json
-COPY --from=builder /zipline/generated ./generated
 
-
-RUN pnpm build:prisma
+RUN pnpm prisma generate
 
 # clean
 RUN rm -rf /tmp/* /root/*
 
 ENV NODE_ENV=production
+ENV ZIPLINE_ROOT=/zipline
 
 ARG ZIPLINE_GIT_SHA
 ENV ZIPLINE_GIT_SHA=${ZIPLINE_GIT_SHA:-"unknown"}
 
-CMD ["node", "--enable-source-maps", "build/server"]
+# add scripts
+COPY docker/entrypoint.sh /zipline/entrypoint
+COPY docker/ziplinectl.sh /zipline/ziplinectl
+
+RUN ln -s /zipline/ziplinectl /usr/local/bin/ziplinectl
+
+ENTRYPOINT ["/zipline/entrypoint"]

README.md

@@ -3,16 +3,14 @@
 
 The next generation ShareX / File upload server
 
-![Stars](https://img.shields.io/github/stars/diced/zipline?logo=github&style=flat)
-![Version](https://img.shields.io/github/package-json/v/diced/zipline?logo=git&logoColor=white&style=flat)
-![GitHub last commit (branch)](https://img.shields.io/github/last-commit/diced/zipline/trunk?logo=git&logoColor=white&style=flat)
-[![Discord](https://img.shields.io/discord/729771078196527176?color=%23777ed3&label=discord&logo=discord&logoColor=white&style=flat)](https://discord.gg/EAhCRfGxCF)
+![Stars](https://img.shields.io/github/stars/diced/zipline?logo=github&style=for-the-badge)
+![Version](https://img.shields.io/github/package-json/v/diced/zipline?logo=git&logoColor=white&style=for-the-badge)
+![GitHub last commit (branch)](https://img.shields.io/github/last-commit/diced/zipline/trunk?logo=git&logoColor=white&style=for-the-badge)
+[![Discord](https://img.shields.io/discord/729771078196527176?color=%23777ed3&label=discord&logo=discord&logoColor=white&style=for-the-badge)](https://discord.gg/EAhCRfGxCF)
 
-![Build](https://img.shields.io/github/actions/workflow/status/diced/zipline/build.yml?logo=github&style=flat&branch=trunk)
+![Build](https://img.shields.io/github/actions/workflow/status/diced/zipline/build.yml?logo=github&style=for-the-badge&branch=trunk)
 
-[zipline.diced.sh](https://zipline.diced.sh) | [old v3.zipline.diced.sh](https://v3.zipline.diced.sh)
-
-<!-- TODO: change these links and image branch -->
+Documentation: [zipline.diced.sh](https://zipline.diced.sh)
 
 </div>
 
@@ -200,13 +198,13 @@ Here's how to setup Zipline for development
 
 #### Nix
 
-If you have [direnv](https://direnv.net/) installed, you can simply cd into the cloned directory and run the following command:
+If you have [Nix](https://nixos.org) and [direnv](https://direnv.net/) installed, you can simply cd into the cloned directory and run the following command:
 
 ```bash
 direnv allow
 ```
 
-Granted that you have direnv setup properly, you will now be in a new nix shell with all the dependencies and PostgreSQL installed.
+After doing so, your shell will be setup for development.
 
 If you aren't using direnv, you can run the following command to enter the nix shell:
 
@@ -216,11 +214,12 @@ nix develop --no-pure-eval
 
 Useful commands regarding the postgres server:
 
-| Command         | Description                                         |
-| --------------- | --------------------------------------------------- |
-| `pgup`          | Starts the postgres server in the background.       |
-| `pgdown`        | Stops the postgres server running in the background |
-| `pg_ctl status` | See if the postgres server is running               |
+| Command         | Description                                   |
+| --------------- | --------------------------------------------- |
+| `pgup`          | Starts the postgres server in the background. |
+| `pg_ctl status` | See if the postgres server is running         |
+| `minioup`       | Start a Minio server for testing S3           |
+| `downall`       | Stops any running postgres or minio service.  |
 
 After familiarizing yourself with the environment, you can continue below (skipping the prerequisites since they are already installed).
 
@@ -261,10 +260,6 @@ DATASOURCE_LOCAL_DIRECTORY="/path/to/your/local/files"
 # DATASOURCE_S3_BUCKET="your-bucket"
 # DATASOURCE_S3_ENDPOINT="your-endpoint"
 # ^ if using a custom endpoint other than aws s3
-
-# optional but both are required if using ssl
-# SSL_KEY="/path/to/your/ssl/key"
-# SSL_CERT="/path/to/your/ssl/cert"
 ```
 
 Install dependencies:

SECURITY.md

@@ -4,7 +4,7 @@
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 4.2.x   | :white_check_mark: |
+| 4.4.x   | :white_check_mark: |
 | < 3     | :x:                |
 | < 2     | :x:                |
 

docker-compose.dev.yml

@@ -1,6 +1,6 @@
 services:
   postgres:
-    image: postgres:15
+    image: postgres:16
     restart: unless-stopped
     environment:
       - POSTGRES_USER=postgres

docker-compose.yml

@@ -6,7 +6,7 @@ services:
       - .env
     environment:
       POSTGRES_USER: ${POSTGRESQL_USER:-zipline}
-      POSTGRES_PASSWORD: ${POSTGRESQL_PASSWORD:?POSTGRESSQL_PASSWORD is required}
+      POSTGRES_PASSWORD: ${POSTGRESQL_PASSWORD:?POSTGRESQL_PASSWORD is required}
       POSTGRES_DB: ${POSTGRESQL_DB:-zipline}
     volumes:
       - pgdata:/var/lib/postgresql/data

docker/entrypoint.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+set -e
+
+cd ${ZIPLINE_ROOT:-/zipline}
+exec node --enable-source-maps build/server

docker/ziplinectl.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+set -e
+
+cd ${ZIPLINE_ROOT:-/zipline}
+exec node --enable-source-maps build/ctl "$@"
+

eslint.config.mjs

@@ -1,15 +1,17 @@
-import unusedImports from 'eslint-plugin-unused-imports';
-import tseslint from 'typescript-eslint';
-import prettier from 'eslint-plugin-prettier';
-import prettierConfig from 'eslint-config-prettier';
-import nextConfig from '@next/eslint-plugin-next';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
-import reactPlugin from 'eslint-plugin-react';
-import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import fs from 'node:fs';
 
+import tseslint from 'typescript-eslint';
+
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import reactRefreshPlugin from 'eslint-plugin-react-refresh';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import prettier from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+import unusedImports from 'eslint-plugin-unused-imports';
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -20,64 +22,53 @@ const gitignorePatterns = gitignoreContent
   .filter((line) => line.trim() && !line.startsWith('#'))
   .map((pattern) => pattern.trim());
 
-export default tseslint.config(
-  { ignores: gitignorePatterns },
+import { defineConfig } from 'eslint/config';
 
-  ...tseslint.configs.recommended,
+export default defineConfig(
+  tseslint.configs.recommended,
+
+  jsxA11yPlugin.flatConfigs.recommended,
+  reactPlugin.configs.flat.recommended,
+  reactHooksPlugin.configs.flat.recommended,
+  reactRefreshPlugin.configs.vite,
+
+  { ignores: gitignorePatterns },
 
   {
     files: ['**/*.{js,mjs,cjs,ts,tsx}'],
+
     languageOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
       parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
+        ecmaFeatures: { jsx: true },
       },
     },
+
     plugins: {
-      'unused-imports': unusedImports,
-      prettier: prettier,
-      '@next/next': nextConfig,
-      'react-hooks': reactHooksPlugin,
       react: reactPlugin,
-      'jsx-a11y': jsxA11yPlugin,
+      'react-hooks': reactHooksPlugin,
+      prettier,
+      'unused-imports': unusedImports,
     },
+
     rules: {
-      ...reactPlugin.configs.recommended.rules,
-
-      ...reactHooksPlugin.configs.recommended.rules,
-
-      ...nextConfig.configs.recommended.rules,
-      ...nextConfig.configs['core-web-vitals'].rules,
-
       ...prettierConfig.rules,
-      'prettier/prettier': [
-        'error',
-        {},
-        {
-          fileInfoOptions: {
-            withNodeModules: false,
-          },
-          ignoreFileExtensions: ['pnpm-lock.yaml'],
-        },
-      ],
+
+      'prettier/prettier': ['error', {}, { fileInfoOptions: { withNodeModules: false } }],
 
       'linebreak-style': ['error', 'unix'],
-      quotes: [
-        'error',
-        'single',
-        {
-          avoidEscape: true,
-        },
-      ],
+      quotes: ['error', 'single', { avoidEscape: true }],
       semi: ['error', 'always'],
       'jsx-quotes': ['error', 'prefer-single'],
       indent: 'off',
+
       'react/prop-types': 'off',
       'react-hooks/rules-of-hooks': 'off',
       'react-hooks/exhaustive-deps': 'off',
+      'react-hooks/set-state-in-effect': 'warn',
+      'react-refresh/only-export-components': 'off',
+
       'react/jsx-uses-react': 'warn',
       'react/jsx-uses-vars': 'warn',
       'react/no-danger-with-children': 'warn',
@@ -88,31 +79,29 @@ export default tseslint.config(
       'react/react-in-jsx-scope': 'off',
       'react/require-render-return': 'error',
       'react/style-prop-object': 'warn',
-      'jsx-a11y/alt-text': 'off',
       'react/display-name': 'off',
+
+      'jsx-a11y/alt-text': 'off',
+      'jsx-a11y/no-autofocus': 'off',
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+
       'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
+
       'unused-imports/no-unused-imports': 'error',
       'unused-imports/no-unused-vars': [
         'warn',
-        {
-          vars: 'all',
-          varsIgnorePattern: '^_',
-          args: 'after-used',
-          argsIgnorePattern: '^_',
-        },
+        { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
       ],
+
       '@typescript-eslint/ban-ts-comment': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-expressions': 'off',
     },
+
     settings: {
-      react: {
-        version: 'detect',
-      },
-      next: {
-        rootDir: __dirname,
-      },
+      react: { version: 'detect' },
     },
   },
 );

mimes.json

@@ -122,6 +122,7 @@
   ["calx", ["application/vnd.ms-office.calx"]],
   ["cap", ["application/vnd.tcpdump.pcap"]],
   ["car", ["application/vnd.curl.car"]],
+  ["cast", ["application/x-asciicast"]],
   ["cat", ["application/vnd.ms-pki.seccat"]],
   ["cb7", ["application/x-cbr"]],
   ["cba", ["application/x-cbr"]],

next.config.js

@@ -1,24 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  rewrites: async () => [
-    {
-      source: '/invite/:code',
-      destination: '/auth/register?code=:code',
-    },
-  ],
-  redirects: async () => [
-    {
-      source: '/r/:id',
-      destination: '/raw/:id',
-      permanent: true,
-    },
-  ],
-  webpack: (config) => {
-    config.resolve.fallback = { worker_threads: false };
-
-    return config;
-  },
-};
-
-module.exports = nextConfig;

package.json

@@ -2,120 +2,129 @@
   "name": "zipline",
   "private": true,
   "license": "MIT",
-  "version": "4.2.3",
+  "version": "4.4.2",
   "scripts": {
-    "build": "cross-env pnpm run --stream \"/^build:.*/\"",
-    "build:prisma": "prisma generate --no-hints",
-    "build:next": "ZIPLINE_BUILD=true next build",
-    "build:server": "tsup",
-    "dev": "cross-env TURBOPACK=1 NODE_ENV=development DEBUG=zipline tsx --require dotenv/config --enable-source-maps ./src/server",
-    "dev:nd": "cross-env TURBOPACK=1 NODE_ENV=development tsx --require dotenv/config --enable-source-maps ./src/server",
-    "dev:inspector": "cross-env TURBOPACK=1 NODE_ENV=development DEBUG=zipline tsx --require dotenv/config --inspect=0.0.0.0:9229 --enable-source-maps ./src/server",
-    "start": "cross-env NODE_ENV=production node --trace-warnings --require dotenv/config --enable-source-maps ./build/server",
+    "build": "tsx scripts/build.ts",
+    "dev": "cross-env NODE_ENV=development DEBUG=zipline tsx --require dotenv/config --enable-source-maps ./src/server",
+    "dev:nd": "cross-env NODE_ENV=development tsx --require dotenv/config --enable-source-maps ./src/server",
+    "dev:inspector": "cross-env NODE_ENV=development DEBUG=zipline tsx --require dotenv/config --inspect=0.0.0.0:9229 --enable-source-maps ./src/server",
+    "start": "cross-env NODE_ENV=production node --trace-warnings --require dotenv/config ./build/server",
     "start:inspector": "cross-env NODE_ENV=production node --require dotenv/config --inspect=0.0.0.0:9229 --enable-source-maps ./build/server",
     "ctl": "NODE_ENV=production node --require dotenv/config --enable-source-maps ./build/ctl",
-    "validate": "pnpm run --stream \"/^validate:.*/\"",
-    "validate:lint": "eslint --cache --fix .",
-    "validate:format": "prettier --write --ignore-path .gitignore .",
+    "validate": "tsx scripts/validate.ts",
+    "openapi": "tsx scripts/openapi.ts",
     "db:prototype": "prisma db push --skip-generate && prisma generate --no-hints",
     "db:migrate": "prisma migrate dev --create-only",
     "docker:engine": "colima start --mount $PWD/themes:w --mount $PWD/uploads:w --mount $PWD/public:w",
-    "docker:compose:dev:build": "docker-compose --file docker-compose.dev.yml build --build-arg ZIPLINE_GIT_SHA=$(git rev-parse HEAD)",
-    "docker:compose:dev:up": "docker-compose --file docker-compose.dev.yml up -d",
-    "docker:compose:dev:down": "docker-compose --file docker-compose.dev.yml down",
-    "docker:compose:dev:logs": "docker-compose --file docker-compose.dev.yml logs -f"
+    "docker:compose:dev:build": "docker compose --file docker-compose.dev.yml build --build-arg ZIPLINE_GIT_SHA=$(git rev-parse HEAD)",
+    "docker:compose:dev:up": "docker compose --file docker-compose.dev.yml up -d",
+    "docker:compose:dev:down": "docker compose --file docker-compose.dev.yml down",
+    "docker:compose:dev:logs": "docker compose --file docker-compose.dev.yml logs -f"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "3.859.0",
-    "@aws-sdk/lib-storage": "3.859.0",
+    "@aws-sdk/client-s3": "3.726.1",
+    "@aws-sdk/lib-storage": "3.726.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fastify/cookie": "^11.0.2",
     "@fastify/cors": "^11.1.0",
-    "@fastify/multipart": "^9.0.3",
+    "@fastify/multipart": "^9.3.0",
     "@fastify/rate-limit": "^10.3.0",
-    "@fastify/sensible": "^6.0.3",
-    "@fastify/static": "^8.2.0",
-    "@github/webauthn-json": "^2.1.1",
-    "@mantine/charts": "^8.2.2",
-    "@mantine/code-highlight": "^8.2.2",
-    "@mantine/core": "^8.2.2",
-    "@mantine/dates": "^8.2.2",
-    "@mantine/dropzone": "^8.2.2",
-    "@mantine/form": "^8.2.2",
-    "@mantine/hooks": "^8.2.2",
-    "@mantine/modals": "^8.2.2",
-    "@mantine/notifications": "^8.2.2",
-    "@prisma/adapter-pg": "^6.13.0",
-    "@prisma/client": "^6.13.0",
-    "@prisma/internals": "^6.13.0",
-    "@prisma/migrate": "^6.13.0",
-    "@smithy/node-http-handler": "^4.1.0",
-    "@tabler/icons-react": "^3.34.1",
-    "argon2": "^0.43.1",
+    "@fastify/sensible": "^6.0.4",
+    "@fastify/static": "^8.3.0",
+    "@fastify/swagger": "^9.6.1",
+    "@mantine/charts": "^8.3.9",
+    "@mantine/code-highlight": "^8.3.9",
+    "@mantine/core": "^8.3.9",
+    "@mantine/dates": "^8.3.9",
+    "@mantine/dropzone": "^8.3.9",
+    "@mantine/form": "^8.3.9",
+    "@mantine/hooks": "^8.3.9",
+    "@mantine/modals": "^8.3.9",
+    "@mantine/notifications": "^8.3.9",
+    "@prisma/adapter-pg": "6.13.0",
+    "@prisma/client": "6.13.0",
+    "@prisma/engines": "6.13.0",
+    "@prisma/internals": "6.13.0",
+    "@prisma/migrate": "6.13.0",
+    "@simplewebauthn/browser": "^13.2.2",
+    "@simplewebauthn/server": "^13.2.2",
+    "@smithy/node-http-handler": "^4.1.1",
+    "@tabler/icons-react": "^3.35.0",
+    "archiver": "^7.0.1",
+    "argon2": "^0.44.0",
+    "asciinema-player": "^3.12.1",
     "bytes": "^3.1.2",
     "clsx": "^2.1.1",
     "colorette": "^2.0.20",
-    "commander": "^14.0.0",
-    "cross-env": "^10.0.0",
-    "dayjs": "^1.11.13",
-    "dotenv": "^17.2.1",
+    "commander": "^14.0.2",
+    "cookie": "^1.1.1",
+    "cross-env": "^10.1.0",
+    "dayjs": "^1.11.19",
+    "detect-browser": "^5.3.0",
+    "dotenv": "^17.2.3",
     "fast-glob": "^3.3.3",
-    "fastify": "^5.4.0",
-    "fastify-plugin": "^5.0.1",
-    "fflate": "^0.8.2",
+    "fastify": "^5.6.2",
+    "fastify-plugin": "^5.1.0",
+    "fastify-type-provider-zod": "^6.1.0",
     "fluent-ffmpeg": "^2.1.3",
     "highlight.js": "^11.11.1",
     "iron-session": "^8.0.4",
-    "isomorphic-dompurify": "^2.26.0",
-    "katex": "^0.16.22",
-    "mantine-datatable": "^8.2.0",
+    "isomorphic-dompurify": "^2.33.0",
+    "katex": "^0.16.27",
+    "mantine-datatable": "^8.3.9",
     "ms": "^2.1.3",
     "multer": "2.0.2",
-    "next": "^15.4.5",
-    "nuqs": "^2.4.3",
     "otplib": "^12.0.1",
-    "prisma": "^6.13.0",
+    "prisma": "6.13.0",
     "qrcode": "^1.5.4",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.10.1",
+    "react-window": "1.8.11",
     "remark-gfm": "^4.0.1",
-    "sharp": "^0.34.3",
-    "swr": "^2.3.4",
-    "typescript-eslint": "^8.38.0",
-    "zod": "^3.25.67",
-    "zustand": "^5.0.7"
+    "sharp": "^0.34.5",
+    "swr": "^2.3.7",
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.7",
+    "zod": "^4.1.13",
+    "zustand": "^5.0.9"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.4.5",
+    "@types/archiver": "^7.0.0",
     "@types/bytes": "^3.1.5",
-    "@types/fluent-ffmpeg": "^2.1.27",
+    "@types/fluent-ffmpeg": "^2.1.28",
     "@types/katex": "^0.16.7",
     "@types/ms": "^2.1.0",
     "@types/multer": "^2.0.0",
-    "@types/node": "^24.1.0",
-    "@types/qrcode": "^1.5.5",
-    "@types/react": "^19.1.9",
-    "@types/react-dom": "^19.1.7",
-    "eslint": "^9.32.0",
-    "eslint-config-next": "^15.4.5",
+    "@types/node": "^24.10.1",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-window": "^1.8.8",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-unused-imports": "^4.3.0",
     "postcss": "^8.5.6",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.6.2",
-    "sass": "^1.89.2",
+    "prettier": "^3.7.4",
+    "sass": "^1.94.2",
     "tsc-alias": "^1.8.16",
-    "tsup": "^8.5.0",
-    "tsx": "^4.20.3",
-    "typescript": "^5.9.2"
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
   },
   "engines": {
     "node": ">=22"
   },
-  "packageManager": "pnpm@10.12.1"
+  "packageManager": "pnpm@10.30.1+sha512.3590e550d5384caa39bd5c7c739f72270234b2f6059e13018f975c313b1eb9fefcc09714048765d4d9efe961382c312e624572c0420762bdc5d5940cdf9be73a"
 }

prisma/migrations/20250827234055_files_default_compression_format/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "public"."Zipline" ADD COLUMN     "filesDefaultCompressionFormat" TEXT DEFAULT 'jpg';

prisma/migrations/20250828035734_features_thumbnails_format/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "public"."Zipline" ADD COLUMN     "featuresThumbnailsFormat" TEXT NOT NULL DEFAULT 'jpg';

prisma/migrations/20251001031548_core_trust_proxy/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "public"."Zipline" ADD COLUMN     "coreTrustProxy" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/20251209070242_file_max_expiration/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "public"."Zipline" ADD COLUMN     "filesMaxExpiration" TEXT;

prisma/migrations/20260108050615_passkeys_overhaul/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `mfaPasskeys` on the `Zipline` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "public"."Zipline" DROP COLUMN "mfaPasskeys",
+ADD COLUMN     "mfaPasskeysEnabled" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "mfaPasskeysOrigin" TEXT,
+ADD COLUMN     "mfaPasskeysRpID" TEXT;

prisma/migrations/20260114063251_clean_thumbnails/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "public"."Zipline" ADD COLUMN     "tasksCleanThumbnailsInterval" TEXT NOT NULL DEFAULT '1d';

prisma/migrations/20260114182751_add_nested_folders/migration.sql

@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "public"."Folder" ADD COLUMN     "parentId" TEXT;
+
+-- AddForeignKey
+ALTER TABLE "public"."Folder" ADD CONSTRAINT "Folder_parentId_fkey" FOREIGN KEY ("parentId") REFERENCES "public"."Folder"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+

prisma/migrations/20260214054654_revamp_sessions/migration.sql

@@ -0,0 +1,23 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `sessions` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "public"."User" DROP COLUMN "sessions";
+
+-- CreateTable
+CREATE TABLE "public"."UserSession" (
+    "id" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "ua" TEXT NOT NULL,
+    "client" TEXT NOT NULL,
+    "device" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+
+    CONSTRAINT "UserSession_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "public"."UserSession" ADD CONSTRAINT "UserSession_userId_fkey" FOREIGN KEY ("userId") REFERENCES "public"."User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -1,6 +1,7 @@
 generator client {
-  provider        = "prisma-client-js"
-  output = "../generated/client"
+  provider        = "prisma-client"
+  output          = "../src/prisma"
+  moduleFormat    = "cjs"
   previewFeatures = ["queryCompiler", "driverAdapters"]
 }
 
@@ -19,6 +20,7 @@ model Zipline {
   coreReturnHttpsUrls Boolean @default(false)
   coreDefaultDomain   String?
   coreTempDirectory   String // default join(tmpdir(), 'zipline')
+  coreTrustProxy      Boolean @default(false)
 
   chunksEnabled Boolean @default(true)
   chunksMax     String  @default("95mb")
@@ -29,18 +31,21 @@ model Zipline {
   tasksMaxViewsInterval     String @default("30m")
   tasksThumbnailsInterval   String @default("30m")
   tasksMetricsInterval      String @default("30m")
+  tasksCleanThumbnailsInterval      String @default("1d")
 
-  filesRoute                          String   @default("/u")
-  filesLength                         Int      @default(6)
-  filesDefaultFormat                  String   @default("random")
-  filesDisabledExtensions             String[]
-  filesMaxFileSize                    String   @default("100mb")
-  filesDefaultExpiration              String?
-  filesAssumeMimetypes                Boolean  @default(false)
-  filesDefaultDateFormat              String   @default("YYYY-MM-DD_HH:mm:ss")
-  filesRemoveGpsMetadata              Boolean  @default(false)
-  filesRandomWordsNumAdjectives       Int      @default(2)
-  filesRandomWordsSeparator           String   @default("-")
+  filesRoute                    String   @default("/u")
+  filesLength                   Int      @default(6)
+  filesDefaultFormat            String   @default("random")
+  filesDisabledExtensions       String[]
+  filesMaxFileSize              String   @default("100mb")
+  filesDefaultExpiration        String?
+  filesMaxExpiration            String?
+  filesAssumeMimetypes          Boolean  @default(false)
+  filesDefaultDateFormat        String   @default("YYYY-MM-DD_HH:mm:ss")
+  filesRemoveGpsMetadata        Boolean  @default(false)
+  filesRandomWordsNumAdjectives Int      @default(2)
+  filesRandomWordsSeparator     String   @default("-")
+  filesDefaultCompressionFormat String?  @default("jpg")
 
   urlsRoute  String @default("/go")
   urlsLength Int    @default(6)
@@ -54,13 +59,14 @@ model Zipline {
 
   featuresThumbnailsEnabled       Boolean @default(true)
   featuresThumbnailsNumberThreads Int     @default(4)
+  featuresThumbnailsFormat        String  @default("jpg")
 
   featuresMetricsEnabled          Boolean @default(true)
   featuresMetricsAdminOnly        Boolean @default(false)
   featuresMetricsShowUserSpecific Boolean @default(true)
 
   featuresVersionChecking Boolean @default(true)
-  featuresVersionAPI      String @default("https://zipline-version.diced.sh")
+  featuresVersionAPI      String  @default("https://zipline-version.diced.sh")
 
   invitesEnabled Boolean @default(true)
   invitesLength  Int     @default(6)
@@ -103,7 +109,10 @@ model Zipline {
 
   mfaTotpEnabled Boolean @default(false)
   mfaTotpIssuer  String  @default("Zipline")
-  mfaPasskeys    Boolean @default(false)
+
+  mfaPasskeysEnabled Boolean @default(false)
+  mfaPasskeysRpID    String?
+  mfaPasskeysOrigin  String?
 
   ratelimitEnabled     Boolean  @default(true)
   ratelimitMax         Int      @default(10)
@@ -137,7 +146,7 @@ model Zipline {
   pwaThemeColor      String  @default("#000000")
   pwaBackgroundColor String  @default("#000000")
 
-  domains            String[] @default([])
+  domains String[] @default([])
 }
 
 model User {
@@ -154,7 +163,7 @@ model User {
 
   totpSecret String?
   passkeys   UserPasskey[]
-  sessions   String[]
+  sessions   UserSession[]
 
   quota UserQuota?
 
@@ -182,6 +191,18 @@ model Export {
   userId String
 }
 
+model UserSession {
+  id String @id 
+  createdAt DateTime @default(now())
+
+  ua String
+  client String
+  device String
+
+  User   User   @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  userId String
+}
+
 model UserQuota {
   id        String   @id @default(cuid())
   createdAt DateTime @default(now())
@@ -291,12 +312,16 @@ model Folder {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  name   String
-  public Boolean @default(false)
+  name         String
+  public       Boolean @default(false)
   allowUploads Boolean @default(false)
 
   files File[]
 
+  parentId String?
+  parent   Folder?  @relation("FolderToFolder", fields: [parentId], references: [id], onDelete: SetNull, onUpdate: Cascade)
+  children Folder[] @relation("FolderToFolder")
+
   User   User   @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
   userId String
 }

scripts/build.ts

@@ -0,0 +1,24 @@
+import { run, step } from '.';
+import { lintStep } from './lint';
+
+run(
+  'build',
+
+  lintStep,
+  step('prisma', 'prisma generate'),
+  step('typecheck', 'tsc', () => !process.argv.includes('--skip')),
+
+  // builds
+  step('server', 'tsup'),
+
+  // client stuff
+  step('client', 'vite build'),
+  step(
+    'client/ssr/view',
+    'vite build --ssr ssr-view/server.tsx -m ssr-view --outDir ../../build/ssr --emptyOutDir=false',
+  ),
+  step(
+    'client/ssr/view-url',
+    'vite build --ssr ssr-view-url/server.tsx -m ssr-view-url --outDir ../../build/ssr --emptyOutDir=false',
+  ),
+);

scripts/index.ts

@@ -0,0 +1,55 @@
+type StepCommand = string | (() => void | Promise<void>);
+
+export function step(name: string, command: StepCommand, condition: () => boolean = () => true) {
+  return {
+    name,
+    command,
+    condition,
+  };
+}
+
+export type Step = ReturnType<typeof step>;
+
+function log(message: string) {
+  console.log(`\n${message}\n`);
+}
+
+export async function run(name: string, ...steps: Step[]) {
+  const { execSync } = await import('child_process');
+
+  const runOne = process.argv[2];
+  if (runOne) {
+    const match = steps.find((s) => `${name}/${s.name}` === runOne);
+    if (!match) {
+      console.error(`x No step found with name "${runOne}"`);
+      process.exit(1);
+    }
+
+    steps = [match];
+  }
+
+  const start = process.hrtime();
+  for (const step of steps) {
+    if (!step.condition()) {
+      log(`- Skipping step "${name}/${step.name}"...`);
+      continue;
+    }
+
+    try {
+      log(`> Running step "${name}/${step.name}"...`);
+      if (typeof step.command === 'string') {
+        execSync(step.command, { stdio: 'inherit' });
+      } else {
+        await step.command();
+      }
+    } catch {
+      console.error(`x Step "${name}/${step.name}" failed.`);
+      process.exit(1);
+    }
+  }
+
+  const diff = process.hrtime(start);
+  const time = diff[0] * 1e9 + diff[1];
+  const timeStr = time > 1e9 ? `${(time / 1e9).toFixed(2)}s` : `${(time / 1e6).toFixed(2)}ms`;
+  log(`✓ Steps in "${name}" completed in ${timeStr}.`);
+}

scripts/lint.ts

@@ -0,0 +1,3 @@
+import { step } from '.';
+
+export const lintStep = step('lint', 'eslint .');

scripts/openapi.ts

@@ -0,0 +1,110 @@
+import { readFile, writeFile } from 'fs/promises';
+import path from 'path';
+import { run, step } from '.';
+import { API_ERRORS, ApiError, ApiErrorCode } from '../src/lib/api/errors';
+
+const ALL_METHODS = ['delete', 'get', 'head', 'patch', 'post', 'put'];
+const GEN_PATH = path.resolve(__dirname, '..', 'openapi.json');
+
+const ALL_ERRORS = Object.keys(API_ERRORS)
+  .map((code) => new ApiError(Number(code) as ApiErrorCode).toJSON())
+  .sort((a, b) => a.code - b.code);
+
+const ERROR_SCHEMA = {
+  type: 'object',
+  description: 'Generic error for API endpoints.',
+  properties: {
+    error: {
+      type: 'string',
+      description:
+        'Message for the error. This may differ from the standard message for the error code, but the error code should be used to figure out the type of error.',
+    },
+    code: {
+      type: 'integer',
+      format: 'int32',
+      description:
+        'Zipline API error code. Ranges: 1xxx validation, 2xxx session, 3xxx permission, 4xxx not-found, 5xxx constraint, 6xxx internal, 9xxx generic.',
+      enum: ALL_ERRORS.map((entry) => entry.code),
+      'x-enumDescriptions': ALL_ERRORS.map((entry) => entry.message),
+    },
+    statusCode: {
+      type: 'integer',
+      format: 'int32',
+      description: 'HTTP status code returned alongside this error payload.',
+    },
+  },
+  required: ['error', 'code', 'statusCode'],
+  additionalProperties: true,
+};
+
+const ERROR_EXAMPLES = ALL_ERRORS.reduce<Record<string, unknown>>((examples, entry) => {
+  examples[`E${entry.code}`] = {
+    summary: `${entry.error}`,
+    value: entry,
+  };
+
+  return examples;
+}, {});
+
+const generic4xxResponse = {
+  description: 'API error response (4xx)',
+  content: {
+    'application/json': {
+      schema: ERROR_SCHEMA,
+      examples: ERROR_EXAMPLES,
+    },
+  },
+};
+
+function addErrorResponse(responses: Record<string, any>): void {
+  const response = (responses['4xx'] ??= structuredClone(generic4xxResponse));
+
+  response.description ??= generic4xxResponse.description;
+  response.content ??= {};
+
+  const jsonContent = (response.content['application/json'] ??= {});
+  jsonContent.schema ??= structuredClone(ERROR_SCHEMA);
+  jsonContent.examples ??= structuredClone(generic4xxResponse.content['application/json'].examples);
+}
+
+function filterRoutes(paths = {}): Record<string, any> {
+  return Object.fromEntries(Object.entries(paths).filter(([route]) => route.startsWith('/api')));
+}
+
+async function fixSpec() {
+  const spec = JSON.parse(await readFile(GEN_PATH, 'utf8'));
+
+  spec.paths = filterRoutes(spec.paths);
+
+  for (const [, pathItem] of Object.entries(spec.paths ?? {})) {
+    if (!pathItem) continue;
+
+    for (const method of ALL_METHODS) {
+      const operation = (<any>pathItem)[method];
+      if (!operation) continue;
+
+      operation.responses ??= {};
+      addErrorResponse(operation.responses);
+    }
+  }
+
+  await writeFile(GEN_PATH, JSON.stringify(spec));
+}
+
+process.env.ZIPLINE_OUTPUT_OPENAPI = 'true';
+
+run(
+  'openapi',
+  step('run-prod', 'pnpm start', () => process.env.NODE_ENV === 'production'),
+  step('run-dev', 'pnpm dev', () => process.env.NODE_ENV !== 'production'),
+  step('check', async () => {
+    try {
+      await readFile(GEN_PATH);
+    } catch (e) {
+      console.error('\nSomething went wrong...', e);
+
+      throw new Error('No OpenAPI spec found at ./openapi.json');
+    }
+  }),
+  step('fix', fixSpec),
+);

scripts/validate.ts

@@ -0,0 +1,9 @@
+import { run, step } from '.';
+import { lintStep } from './lint';
+
+run(
+  'validate',
+
+  lintStep,
+  step('format', 'prettier --write --ignore-path .gitignore .'),
+);

src/client/Root.tsx

@@ -0,0 +1,69 @@
+import { ContextModalProps, ModalsProvider } from '@mantine/modals';
+import { Notifications } from '@mantine/notifications';
+import { Outlet } from 'react-router-dom';
+import { SWRConfig } from 'swr';
+import ThemeProvider from '@/components/ThemeProvider';
+import { type ZiplineTheme } from '@/lib/theme';
+import { type Config } from '@/lib/config/validate';
+import { Button, Text } from '@mantine/core';
+
+const AlertModal = ({ context, id, innerProps }: ContextModalProps<{ modalBody: string }>) => (
+  <>
+    <Text size='sm'>{innerProps.modalBody}</Text>
+
+    <Button fullWidth mt='md' onClick={() => context.closeModal(id)}>
+      OK
+    </Button>
+  </>
+);
+
+const contextModals = {
+  alert: AlertModal,
+};
+
+declare module '@mantine/modals' {
+  export interface MantineModalsOverride {
+    modals: typeof contextModals;
+  }
+}
+
+export default function Root({
+  themes,
+  defaultTheme,
+}: {
+  themes?: ZiplineTheme[];
+  defaultTheme?: Config['website']['theme'];
+}) {
+  return (
+    <SWRConfig
+      value={{
+        fetcher: async (url: RequestInfo | URL) => {
+          const res = await fetch(url);
+
+          if (!res.ok) {
+            const json = await res.json();
+
+            throw new Error(json.message);
+          }
+
+          return res.json();
+        },
+      }}
+    >
+      <ThemeProvider ssrThemes={themes} ssrDefaultTheme={defaultTheme}>
+        <ModalsProvider
+          modalProps={{
+            overlayProps: {
+              blur: 6,
+            },
+            centered: true,
+          }}
+          modals={contextModals}
+        >
+          <Notifications position='top-center' zIndex={10000000} />
+          <Outlet />
+        </ModalsProvider>
+      </ThemeProvider>
+    </SWRConfig>
+  );
+}

src/client/error/DashboardErrorBoundary.tsx

@@ -0,0 +1,11 @@
+import GenericError from './GenericError';
+
+export default function DashboardErrorBoundary(props: Record<string, any>) {
+  return (
+    <GenericError
+      title='Dashboard Client Error'
+      message='Something went wrong while loading the dashboard. Please try again later, or report this issue if it persists.'
+      details={{ ...props, type: 'dashboard' }}
+    />
+  );
+}

src/client/error/GenericError.tsx

@@ -0,0 +1,38 @@
+import { Container, Paper, ScrollArea, Stack, Text, Title } from '@mantine/core';
+import { useRouteError } from 'react-router-dom';
+import FourOhFour from '../pages/404';
+
+export default function GenericError({
+  title,
+  message,
+  details,
+}: {
+  title?: string;
+  message?: string;
+  details?: Record<string, any>;
+}) {
+  const routerError: any = useRouteError();
+  if (routerError?.status === 404) return <FourOhFour />;
+
+  const routeError = JSON.parse(JSON.stringify(routerError, Object.getOwnPropertyNames(routerError)));
+
+  console.error(routerError);
+
+  return (
+    <Container my='lg'>
+      <Stack gap='xs'>
+        <Title order={5}>{title || 'An error occurred'}</Title>
+        <Text c='dimmed'>
+          {message || 'Something went wrong. Please try again later, or report this issue if it persists.'}
+        </Text>
+        {details && (
+          <Paper withBorder px={3} py={3}>
+            <ScrollArea>
+              <pre style={{ margin: 0 }}>{JSON.stringify({ routeError, details }, null, 2)}</pre>
+            </ScrollArea>
+          </Paper>
+        )}
+      </Stack>
+    </Container>
+  );
+}

src/client/error/RootErrorBoundary.tsx

@@ -0,0 +1,11 @@
+import GenericError from './GenericError';
+
+export default function RootErrorBoundary(props: Record<string, any>) {
+  return (
+    <GenericError
+      title='Dashboard Client Error'
+      message='Something went wrong while loading the dashboard. Please try again later, or report this issue if it persists.'
+      details={{ ...props, type: 'root' }}
+    />
+  );
+}

src/client/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="manifest.json" />
+
+    <title>Zipline</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

src/client/main.tsx

@@ -0,0 +1,18 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes';
+
+import '@mantine/charts/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@mantine/notifications/styles.css';
+import 'mantine-datatable/styles.css';
+import './styles/global.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

src/client/pages/404.tsx

@@ -1,8 +1,11 @@
+import { useTitle } from '@/lib/hooks/useTitle';
 import { Button, Center, Stack, Text, Title } from '@mantine/core';
 import { IconArrowLeft } from '@tabler/icons-react';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 
 export default function FourOhFour() {
+  useTitle('404');
+
   return (
     <Center h='100vh'>
       <Stack>
@@ -11,12 +14,16 @@ export default function FourOhFour() {
           Page not found
         </Text>
 
-        <Button component={Link} href='/' color='blue' fullWidth leftSection={<IconArrowLeft size='1rem' />}>
+        <Button
+          component={Link}
+          to='/auth/login'
+          color='blue'
+          fullWidth
+          leftSection={<IconArrowLeft size='1rem' />}
+        >
           Go home
         </Button>
       </Stack>
     </Center>
   );
 }
-
-FourOhFour.title = '404';

src/client/pages/auth/login.tsx

@@ -0,0 +1,237 @@
+import ExternalAuthButton from '@/components/pages/login/ExternalAuthButton';
+import LocalLogin from '@/components/pages/login/LocalLogin';
+import PasskeyAuthButton from '@/components/pages/login/PasskeyAuthButton';
+import SecureWarningModal from '@/components/pages/login/SecureWarningModal';
+import TotpModal from '@/components/pages/login/TotpModal';
+import { getWebClient } from '@/lib/api/detect';
+import { ApiError } from '@/lib/api/errors';
+import { fetchApi } from '@/lib/fetchApi';
+import useLogin from '@/lib/hooks/useLogin';
+import useObjectState from '@/lib/hooks/useObjectState';
+import { useTitle } from '@/lib/hooks/useTitle';
+import {
+  Anchor,
+  Box,
+  Center,
+  Divider,
+  Group,
+  Image,
+  LoadingOverlay,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { showNotification } from '@mantine/notifications';
+import { browserSupportsWebAuthn } from '@simplewebauthn/browser';
+import {
+  IconBrandDiscordFilled,
+  IconBrandGithubFilled,
+  IconBrandGoogleFilled,
+  IconCheck,
+  IconCircleKeyFilled,
+} from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useSWR from 'swr';
+import GenericError from '../../error/GenericError';
+
+export default function Login() {
+  useTitle('Login');
+
+  const query = new URLSearchParams(location.search);
+  const navigate = useNavigate();
+  const { user, mutate } = useLogin();
+
+  const isHttps = window.location.protocol === 'https:';
+  const webClient = JSON.stringify(getWebClient());
+
+  const { data: config, error: configError, isLoading: configLoading } = useSWR('/api/server/public');
+
+  const showLocalLogin =
+    query.get('local') === 'true' ||
+    !(
+      config?.oauth?.bypassLocalLogin &&
+      Object.values(config?.oauthEnabled ?? {}).filter((x) => x === true).length > 0
+    );
+
+  const willRedirect =
+    config?.oauth?.bypassLocalLogin &&
+    Object.values(config?.oauthEnabled ?? {}).filter((x) => x === true).length === 1 &&
+    query.get('local') !== 'true';
+
+  useEffect(() => {
+    if (willRedirect && config) {
+      const provider = Object.keys(config.oauthEnabled).find(
+        (x) => config.oauthEnabled[x as keyof typeof config.oauthEnabled] === true,
+      );
+
+      if (provider) window.location.href = `/api/auth/oauth/${provider.toLowerCase()}`;
+    }
+  }, [willRedirect, config]);
+
+  const [totp, setTotp] = useObjectState({
+    open: false,
+    disabled: false,
+    error: '',
+    pin: '',
+  });
+
+  const [secureModal, setSecureModal] = useState(false);
+
+  const form = useForm({
+    initialValues: { username: '', password: '' },
+    validate: {
+      username: (v) => (v.length >= 1 ? null : 'Username is required'),
+      password: (v) => (v.length >= 1 ? null : 'Password is required'),
+    },
+  });
+
+  useEffect(() => {
+    if (user) navigate('/dashboard');
+    if (config?.firstSetup) navigate('/auth/setup');
+  }, [user, config, navigate]);
+
+  const handleLoginSubmit = async (values: any, code?: string) => {
+    setTotp({ disabled: true, error: '' });
+
+    const { data, error } = await fetchApi(
+      '/api/auth/login',
+      'POST',
+      { ...values, code },
+      { 'x-zipline-client': webClient },
+    );
+
+    if (error) {
+      if (ApiError.check(error, 1044)) {
+        form.setFieldError('username', 'Invalid username');
+        form.setFieldError('password', 'Invalid password');
+      } else {
+        setTotp('error', error.error || 'Login failed');
+      }
+      setTotp('disabled', false);
+    } else if (data?.totp) {
+      setTotp({ open: true, disabled: false });
+    } else {
+      showNotification({
+        message: 'Logging in...',
+        icon: <IconCheck size='1rem' />,
+        autoClose: 700,
+      });
+      mutate(data);
+    }
+  };
+
+  if (configLoading || !config) return <LoadingOverlay visible />;
+  if (configError) return <GenericError title='Error' message='Config load failed' details={configError} />;
+
+  const hasBg = !!config.website.loginBackground;
+
+  return (
+    <>
+      {willRedirect && !showLocalLogin && <LoadingOverlay visible />}
+
+      <TotpModal
+        state={totp}
+        onPinChange={(val) => setTotp('pin', val)}
+        onVerify={() => handleLoginSubmit(form.values, totp.pin)}
+        onCancel={() => {
+          setTotp('open', false);
+          form.reset();
+        }}
+      />
+
+      <SecureWarningModal
+        opened={secureModal}
+        onClose={() => setSecureModal(false)}
+        returnHttps={config.returnHttps}
+      />
+
+      {isHttps && !config.returnHttps && (
+        <Box pos='absolute' top={10} left='50%' style={{ transform: 'translateX(-50%)' }}>
+          <Text size='sm' c='red' ta='center'>
+            You are accessing this instance through a <b>secure</b> context but the server is not configured
+            to use HTTPS. Click <Anchor onClick={() => setSecureModal(true)}> here</Anchor> to learn more.
+          </Text>
+        </Box>
+      )}
+
+      {!isHttps && config.returnHttps && (
+        <Box pos='absolute' top={10} left='50%' style={{ transform: 'translateX(-50%)' }}>
+          <Text size='sm' c='red' ta='center'>
+            You are accessing this instance through an <b>insecure</b> context but the server is configured to
+            use HTTPS. This may cause issues when logging in. Click{' '}
+            <Anchor onClick={() => setSecureModal(true)}> here</Anchor> to learn more.
+          </Text>
+        </Box>
+      )}
+
+      <Center h='100vh'>
+        {hasBg && (
+          <Image
+            src={config.website.loginBackground}
+            pos='absolute'
+            inset={0}
+            w='100%'
+            h='100%'
+            fit='cover'
+            style={{ filter: config.website.loginBackgroundBlur ? 'blur(10px)' : undefined }}
+          />
+        )}
+
+        <Paper
+          w='350px'
+          p='xl'
+          shadow='xl'
+          withBorder
+          pos='relative'
+          style={{
+            backgroundColor: hasBg ? 'transparent' : undefined,
+            backdropFilter: hasBg ? 'blur(35px)' : undefined,
+          }}
+        >
+          <Title order={1} ta='center' mb='md'>
+            <b>{config.website.title ?? 'Zipline'}</b>
+          </Title>
+
+          <Stack>
+            {showLocalLogin && (
+              <LocalLogin
+                form={form}
+                onSubmit={handleLoginSubmit}
+                loading={totp.disabled}
+                hasBackground={hasBg}
+              />
+            )}
+
+            <Divider label='or' />
+
+            {config.mfa.passkeys && browserSupportsWebAuthn() && <PasskeyAuthButton onAuthSuccess={mutate} />}
+
+            <Group grow>
+              {config.oauthEnabled.discord && (
+                <ExternalAuthButton
+                  provider='Discord'
+                  leftSection={<IconBrandDiscordFilled stroke={4} size='1.1rem' />}
+                />
+              )}
+              {config.oauthEnabled.github && (
+                <ExternalAuthButton provider='GitHub' leftSection={<IconBrandGithubFilled size='1.1rem' />} />
+              )}
+              {config.oauthEnabled.google && (
+                <ExternalAuthButton
+                  provider='Google'
+                  leftSection={<IconBrandGoogleFilled stroke={4} size='1.1rem' />}
+                />
+              )}
+              {config.oauthEnabled.oidc && (
+                <ExternalAuthButton provider='OIDC' leftSection={<IconCircleKeyFilled size='1.1rem' />} />
+              )}
+            </Group>
+          </Stack>
+        </Paper>
+      </Center>
+    </>
+  );
+}

src/client/pages/auth/register.tsx

@@ -0,0 +1,295 @@
+import { Response } from '@/lib/api/response';
+import { fetchApi } from '@/lib/fetchApi';
+import { useTitle } from '@/lib/hooks/useTitle';
+import {
+  Button,
+  Center,
+  Checkbox,
+  Divider,
+  Image,
+  LoadingOverlay,
+  Paper,
+  PasswordInput,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { notifications, showNotification } from '@mantine/notifications';
+import { IconLogin, IconPlus, IconUserPlus, IconX } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import useSWR, { mutate } from 'swr';
+import GenericError from '../../error/GenericError';
+import { getWebClient } from '@/lib/api/detect';
+import { ApiError } from '@/lib/api/errors';
+
+export function Component() {
+  useTitle('Register');
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [loading, setLoading] = useState(true);
+
+  const {
+    data: config,
+    error: configError,
+    isLoading: configLoading,
+  } = useSWR<Response['/api/server/public']>('/api/server/public', {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenHidden: false,
+    revalidateIfStale: false,
+  });
+
+  const code = new URLSearchParams(location.search).get('code') ?? undefined;
+  const {
+    data: invite,
+    error: inviteError,
+    isLoading: inviteLoading,
+  } = useSWR<Response['/api/auth/invites/web']>(
+    location.search.includes('code') ? `/api/auth/invites/web${location.search}` : null,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      refreshWhenHidden: false,
+      revalidateIfStale: false,
+    },
+  );
+
+  const form = useForm({
+    initialValues: {
+      username: '',
+      password: '',
+      tos: false,
+    },
+    validate: {
+      username: (value) => (value.length >= 1 ? null : 'Username is required'),
+      password: (value) => (value.length >= 1 ? null : 'Password is required'),
+    },
+    enhanceGetInputProps: ({ field }) => ({
+      name: field,
+    }),
+  });
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch('/api/user');
+      if (res.ok) {
+        navigate('/dashboard');
+      } else {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (!config) return;
+
+    if (!config?.features.userRegistration && !code) {
+      navigate('/auth/login');
+    }
+  }, [code, config]);
+
+  const onSubmit = async (values: typeof form.values) => {
+    const { username, password, tos } = values;
+
+    if (tos === false && config!.website.tos) {
+      form.setFieldError('tos', 'You must agree to the Terms of Service to continue');
+      return;
+    }
+
+    const { data, error } = await fetchApi(
+      '/api/auth/register',
+      'POST',
+      {
+        username,
+        password,
+        code,
+      },
+      {
+        'x-zipline-client': JSON.stringify(getWebClient()),
+      },
+    );
+
+    if (error) {
+      if (ApiError.check(error, 1039)) {
+        form.setFieldError('username', 'Username is taken');
+      } else {
+        notifications.show({
+          title: 'Failed to register',
+          message: error.error,
+          color: 'red',
+          icon: <IconX size='1rem' />,
+        });
+      }
+    } else {
+      notifications.show({
+        title: 'Complete!',
+        message: `Your "${data?.user?.username}" account has been created.`,
+        color: 'green',
+        icon: <IconPlus size='1rem' />,
+      });
+
+      mutate('/api/user');
+      navigate('/dashboard');
+    }
+  };
+
+  if (loading || configLoading) return <LoadingOverlay visible />;
+
+  if (!config || configError) {
+    return (
+      <GenericError
+        title='Error loading configuration'
+        message='Could not load server configuration...'
+        details={configError}
+      />
+    );
+  }
+
+  if (code && inviteError) {
+    if (inviteError) {
+      showNotification({
+        id: 'invalid-invite',
+        message: 'Invalid or expired invite. Please try again later.',
+        color: 'red',
+      });
+
+      navigate('/auth/login');
+
+      return null;
+    }
+
+    if (inviteLoading) return <LoadingOverlay visible />;
+  }
+
+  return (
+    <Center h='100vh'>
+      {config.website.loginBackground && (
+        <Image
+          src={config.website.loginBackground}
+          alt='Background'
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            ...(config.website.loginBackgroundBlur && { filter: 'blur(10px)' }),
+          }}
+        />
+      )}
+
+      <Paper
+        w='350px'
+        p='xl'
+        shadow='xl'
+        withBorder
+        style={{
+          backgroundColor: config.website.loginBackground ? 'rgba(0, 0, 0, 0)' : undefined,
+          backdropFilter: config.website.loginBackgroundBlur ? 'blur(35px)' : undefined,
+        }}
+      >
+        <div style={{ width: '100%', overflowWrap: 'break-word' }}>
+          <Title
+            order={1}
+            ta='center'
+            style={{
+              whiteSpace: 'normal',
+              fontSize: `clamp(20px, ${Math.max(50 - (config.website.title?.length ?? 0) / 2, 20)}px, 50px)`,
+            }}
+          >
+            <b>{config.website.title ?? 'Zipline'}</b>
+          </Title>
+        </div>
+
+        {invite && (
+          <Text ta='center' size='sm' c='dimmed'>
+            You’ve been invited to join <b>{config?.website?.title ?? 'Zipline'}</b>
+            {invite.inviter && (
+              <>
+                {' '}
+                by <b>{invite.inviter.username}</b>
+              </>
+            )}
+          </Text>
+        )}
+
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <Stack my='sm'>
+            <TextInput
+              size='md'
+              placeholder='Enter your username...'
+              autoComplete='username'
+              styles={{
+                input: {
+                  backgroundColor: config.website.loginBackground ? 'transparent' : undefined,
+                },
+              }}
+              {...form.getInputProps('username', { withError: true })}
+            />
+
+            <PasswordInput
+              size='md'
+              placeholder='Enter your password...'
+              autoComplete='new-password'
+              styles={{
+                input: {
+                  backgroundColor: config.website.loginBackground ? 'transparent' : undefined,
+                },
+              }}
+              {...form.getInputProps('password')}
+            />
+
+            {config.website.tos && (
+              <Checkbox
+                label={
+                  <Text size='xs'>
+                    I agree to the{' '}
+                    <Link to='/auth/tos' target='_blank'>
+                      Terms of Service
+                    </Link>
+                  </Text>
+                }
+                required
+                {...form.getInputProps('tos', { type: 'checkbox' })}
+              />
+            )}
+
+            <Button
+              size='md'
+              fullWidth
+              type='submit'
+              variant={config.website.loginBackground ? 'outline' : 'filled'}
+              leftSection={<IconUserPlus size='1rem' />}
+            >
+              Register
+            </Button>
+          </Stack>
+        </form>
+
+        <Stack my='xs'>
+          <Divider label='or' />
+          <Button
+            component={Link}
+            to='/auth/login'
+            size='md'
+            fullWidth
+            variant='outline'
+            leftSection={<IconLogin size='1rem' />}
+          >
+            Login
+          </Button>
+        </Stack>
+      </Paper>
+    </Center>
+  );
+}
+
+Component.displayName = 'Register';

src/client/pages/auth/setup.tsx

@@ -1,6 +1,6 @@
-import { Response } from '@/lib/api/response';
-import { getZipline } from '@/lib/db/models/zipline';
+import { type Response } from '@/lib/api/response';
 import { fetchApi } from '@/lib/fetchApi';
+import { useTitle } from '@/lib/hooks/useTitle';
 import {
   Anchor,
   Button,
@@ -18,11 +18,8 @@ import {
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
 import { IconArrowBackUp, IconArrowForwardUp, IconCheck, IconX } from '@tabler/icons-react';
-import { GetServerSideProps } from 'next';
-import Head from 'next/head';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { useState } from 'react';
+import { redirect, useNavigate } from 'react-router-dom';
 import { mutate } from 'swr';
 
 function LinkToDoc({ href, title, children }: { href: string; title: string; children: React.ReactNode }) {
@@ -36,8 +33,22 @@ function LinkToDoc({ href, title, children }: { href: string; title: string; chi
   );
 }
 
-export default function Setup() {
-  const router = useRouter();
+export async function loader() {
+  const res = await fetch('/api/server/public');
+  if (!res.ok) {
+    throw new Response('Failed to fetch server settings', { status: res.status });
+  }
+
+  const data = await res.json();
+  if (!data.firstSetup) return redirect('/auth/login');
+
+  return {};
+}
+
+export function Component() {
+  useTitle('Setup');
+
+  const navigate = useNavigate();
 
   const [active, setActive] = useState(0);
   const nextStep = () => setActive((current) => (current < 3 ? current + 1 : current));
@@ -51,9 +62,12 @@ export default function Setup() {
       password: '',
     },
     validate: {
-      username: (value) => (value.length < 1 ? 'Username is required' : null),
-      password: (value) => (value.length < 1 ? 'Password is required' : null),
+      username: (value) => (value.length >= 1 ? null : 'Username is required'),
+      password: (value) => (value.length >= 1 ? null : 'Password is required'),
     },
+    enhanceGetInputProps: ({ field }) => ({
+      name: field,
+    }),
   });
 
   const onSubmit = async (values: typeof form.values) => {
@@ -99,18 +113,13 @@ export default function Setup() {
         setActive(2);
       } else {
         mutate('/api/user', data as Response['/api/user']);
-        router.push('/dashboard');
+        navigate('/dashboard');
       }
     }
   };
 
   return (
     <>
-      <Head>
-        <title>Zipline Setup</title>
-        <meta name='viewport' content='width=device-width, initial-scale=1' />
-      </Head>
-
       <Paper withBorder p='xs' m='sm'>
         <Stepper active={active} onStepClick={setActive} m='md'>
           <Stepper.Step label='Welcome!' description='Setup Zipline'>
@@ -145,7 +154,11 @@ export default function Setup() {
 
                 <Text>
                   To see all of the available environment variables, please refer to the documentation{' '}
-                  <Anchor component={Link} href='https://zipline.diced.sh/docs/config'>
+                  <Anchor
+                    href='https://zipline.diced.sh/docs/config'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
                     here.
                   </Anchor>
                 </Text>
@@ -170,12 +183,14 @@ export default function Setup() {
               <TextInput
                 label='Username'
                 placeholder='Enter a username...'
+                autoComplete='username'
                 {...form.getInputProps('username')}
               />
 
               <PasswordInput
                 label='Password'
                 placeholder='Enter a password...'
+                autoComplete='new-password'
                 {...form.getInputProps('password')}
               />
             </Stack>
@@ -236,20 +251,4 @@ export default function Setup() {
   );
 }
 
-export const getServerSideProps: GetServerSideProps = async () => {
-  const { firstSetup } = await getZipline();
-
-  if (!firstSetup)
-    return {
-      redirect: {
-        destination: '/dashboard',
-        permanent: false,
-      },
-    };
-
-  return {
-    props: {},
-  };
-};
-
-Setup.title = 'Setup';
+Component.displayName = 'Setup';

src/client/pages/auth/tos.tsx

@@ -0,0 +1,41 @@
+import Markdown from '@/components/render/Markdown';
+import { Response } from '@/lib/api/response';
+import { Container, LoadingOverlay } from '@mantine/core';
+import useSWR from 'swr';
+import GenericError from '../../error/GenericError';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Terms of Service');
+
+  const {
+    data: config,
+    error,
+    isLoading,
+  } = useSWR<Response['/api/server/public']>('/api/server/public', {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenHidden: false,
+    revalidateIfStale: false,
+  });
+
+  if (isLoading) return <LoadingOverlay visible />;
+
+  if (error) {
+    return (
+      <GenericError
+        title='Error loading TOS'
+        message='Could not load Terms of Service file...'
+        details={error}
+      />
+    );
+  }
+
+  return (
+    <Container my='lg'>
+      <Markdown md={config?.tos || ''} />
+    </Container>
+  );
+}
+
+Component.displayName = 'Tos';

src/client/pages/dashboard/admin/actions.tsx

@@ -0,0 +1,10 @@
+import DashboardServerActions from '@/components/pages/serverActions';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Server Actions');
+
+  return <DashboardServerActions />;
+}
+
+Component.displayName = 'Dashboard/Admin/Actions';

src/client/pages/dashboard/admin/invites.tsx

@@ -0,0 +1,10 @@
+import DashboardInvites from '@/components/pages/invites';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Invites');
+
+  return <DashboardInvites />;
+}
+
+Component.displayName = 'Dashboard/Admin/Invites';

src/client/pages/dashboard/admin/settings.tsx

@@ -0,0 +1,10 @@
+import DashboardServerSettings from '@/components/pages/serverSettings';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Server Settings');
+
+  return <DashboardServerSettings />;
+}
+
+Component.displayName = 'Dashboard/Admin/Settings';

src/client/pages/dashboard/admin/users/[id]/files.tsx

@@ -0,0 +1,23 @@
+import ViewUserFiles from '@/components/pages/users/ViewUserFiles';
+import { useTitle } from '@/lib/hooks/useTitle';
+import { Params, redirect, useLoaderData } from 'react-router-dom';
+
+export async function loader({ params }: { params: Params<string> }) {
+  const res = await fetch('/api/users/' + params.id);
+  if (!res.ok) {
+    console.log("can't get user", res.status);
+    return redirect('/dashboard/admin/users');
+  }
+
+  const user = await res.json();
+  return { user };
+}
+
+export function Component() {
+  const { user } = useLoaderData<typeof loader>();
+  useTitle(`${user ? user.username : 'User'}'s files`);
+
+  return <ViewUserFiles />;
+}
+
+Component.displayName = 'DashboardAdminViewUserFiles';

src/client/pages/dashboard/admin/users/index.tsx

@@ -0,0 +1,10 @@
+import DashboardUsers from '@/components/pages/users';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Users');
+
+  return <DashboardUsers />;
+}
+
+Component.displayName = 'Dashboard/Admin/Users';

src/client/pages/dashboard/files.tsx

@@ -0,0 +1,10 @@
+import DashboardFiles from '@/components/pages/files';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Files');
+
+  return <DashboardFiles />;
+}
+
+Component.displayName = 'Dashboard/Files';

src/client/pages/dashboard/folders.tsx

@@ -0,0 +1,10 @@
+import DashboardFolders from '@/components/pages/folders';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Folders');
+
+  return <DashboardFolders />;
+}
+
+Component.displayName = 'Dashboard/Folders';

src/client/pages/dashboard/index.tsx

@@ -0,0 +1,10 @@
+import DashboardHome from '@/components/pages/dashboard';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle();
+
+  return <DashboardHome />;
+}
+
+Component.displayName = 'Dashboard/';

src/client/pages/dashboard/metrics.tsx

@@ -0,0 +1,28 @@
+import DashboardMetrics from '@/components/pages/metrics';
+import { useTitle } from '@/lib/hooks/useTitle';
+import { isAdministrator } from '@/lib/role';
+import { redirect } from 'react-router-dom';
+
+export async function loader() {
+  const configRes = await fetch('/api/server/public');
+  if (!configRes.ok) throw new Error('Failed to get public configuration');
+
+  const config = await configRes.json();
+  if (config.features.metrics?.adminOnly) {
+    const res = await fetch('/api/user');
+    if (!res.ok) return redirect('/auth/login');
+
+    const { user } = await res.json();
+    if (!isAdministrator(user.role)) return redirect('/dashboard');
+  }
+
+  return {};
+}
+
+export function Component() {
+  useTitle('Metrics');
+
+  return <DashboardMetrics />;
+}
+
+Component.displayName = 'Dashboard/Metrics';

src/client/pages/dashboard/settings.tsx

@@ -0,0 +1,10 @@
+import DashboardSettings from '@/components/pages/settings';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Settings');
+
+  return <DashboardSettings />;
+}
+
+Component.displayName = 'Dashboard/Settings';

src/client/pages/dashboard/upload/file.tsx

@@ -0,0 +1,10 @@
+import UploadFile from '@/components/pages/upload/File';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Upload File');
+
+  return <UploadFile />;
+}
+
+Component.displayName = 'Dashboard/Upload/File';

src/client/pages/dashboard/upload/text.tsx

@@ -0,0 +1,10 @@
+import UploadText from '@/components/pages/upload/Text';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('Upload Text');
+
+  return <UploadText />;
+}
+
+Component.displayName = 'Dashboard/Upload/Text';

src/client/pages/dashboard/urls.tsx

@@ -0,0 +1,10 @@
+import DashboardURLs from '@/components/pages/urls';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+export function Component() {
+  useTitle('URLs');
+
+  return <DashboardURLs />;
+}
+
+Component.displayName = 'Dashboard/URLs';

src/client/pages/folder/[id]/index.tsx

@@ -0,0 +1,164 @@
+import { type Response } from '@/lib/api/response';
+import { Folder } from '@/lib/db/models/folder';
+import { FolderBreadcrumb } from '@/lib/folderHierarchy';
+import {
+  ActionIcon,
+  Anchor,
+  Breadcrumbs,
+  Card,
+  Container,
+  Group,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { IconFolder, IconUpload } from '@tabler/icons-react';
+import { lazy, Suspense } from 'react';
+import { Link, Params, useLoaderData, useNavigate } from 'react-router-dom';
+
+const DashboardFile = lazy(() => import('@/components/file/DashboardFile'));
+
+export async function loader({ params }: { params: Params<string> }) {
+  const res = await fetch(`/api/server/folder/${params.id}`);
+  if (!res.ok) {
+    throw new Response('Folder not found', { status: 404 });
+  }
+  return {
+    folder: (await res.json()) as Response['/api/server/folder/[id]'],
+  };
+}
+
+function PublicFolderCard({ folder }: { folder: Partial<Folder> }) {
+  return (
+    <Link to={`/folder/${folder.id}`} style={{ textDecoration: 'none' }}>
+      <Card withBorder shadow='sm' radius='sm' style={{ cursor: 'pointer' }}>
+        <Card.Section withBorder inheritPadding py='xs'>
+          <Group gap='xs'>
+            <IconFolder size='1.2rem' />
+            <Text fw={500}>{folder.name}</Text>
+          </Group>
+        </Card.Section>
+        <Card.Section inheritPadding py='xs'>
+          <Stack gap={2}>
+            <Text size='xs' c='dimmed'>
+              {folder._count?.files ?? 0} files
+            </Text>
+            {(folder._count?.children ?? 0) > 0 && (
+              <Text size='xs' c='dimmed'>
+                {folder._count?.children} subfolders
+              </Text>
+            )}
+          </Stack>
+        </Card.Section>
+      </Card>
+    </Link>
+  );
+}
+
+export function Component() {
+  const { folder } = useLoaderData<typeof loader>();
+  const navigate = useNavigate();
+
+  const buildBreadcrumbs = () => {
+    const items: FolderBreadcrumb[] = [];
+
+    let current = folder.parent as Partial<Folder> | undefined;
+    while (current && current.public) {
+      items.unshift({ id: current.id!, name: current.name!, public: true });
+      current = current.parent as Partial<Folder> | undefined;
+    }
+
+    items.push({ id: folder.id!, name: folder.name!, public: true });
+
+    return items;
+  };
+
+  const breadcrumbs = buildBreadcrumbs();
+  const children = (folder.children ?? []) as Partial<Folder>[];
+
+  return (
+    <>
+      <Container my='lg'>
+        {breadcrumbs.length > 1 && (
+          <Breadcrumbs mb='md'>
+            {breadcrumbs.map((item, index) => (
+              <Anchor
+                key={item.id}
+                onClick={() => navigate(`/folder/${item.id}`)}
+                style={{ cursor: 'pointer' }}
+                fw={index === breadcrumbs.length - 1 ? 600 : 400}
+              >
+                {item.name}
+              </Anchor>
+            ))}
+          </Breadcrumbs>
+        )}
+
+        <Group>
+          <Title order={1}>{folder.name}</Title>
+
+          {folder.allowUploads && (
+            <Link to={`/folder/${folder.id}/upload`}>
+              <ActionIcon variant='outline'>
+                <IconUpload size='1rem' />
+              </ActionIcon>
+            </Link>
+          )}
+        </Group>
+
+        {children.length > 0 && (
+          <>
+            <Title order={3} mt='md' mb='sm'>
+              Subfolders
+            </Title>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                lg: 4,
+                md: 3,
+                sm: 2,
+              }}
+              spacing='md'
+            >
+              {children.map((child) => (
+                <PublicFolderCard key={child.id} folder={child} />
+              ))}
+            </SimpleGrid>
+          </>
+        )}
+
+        {(folder.files?.length ?? 0) > 0 && (
+          <>
+            <Title order={3} mt='md' mb='sm'>
+              Files
+            </Title>
+            <SimpleGrid
+              cols={{
+                base: 1,
+                lg: 3,
+                md: 2,
+              }}
+              spacing='md'
+            >
+              {folder.files?.map((file: any) => (
+                <Suspense fallback={<Skeleton height={350} animate />} key={file.id}>
+                  <DashboardFile file={file} reduce />
+                </Suspense>
+              ))}
+            </SimpleGrid>
+          </>
+        )}
+
+        {children.length === 0 && (folder.files?.length ?? 0) === 0 && (
+          <Text c='dimmed' mt='md'>
+            This folder is empty.
+          </Text>
+        )}
+      </Container>
+    </>
+  );
+}
+
+Component.displayName = 'ViewFolderId';

src/client/pages/folder/[id]/upload.tsx

@@ -0,0 +1,59 @@
+import ConfigProvider from '@/components/ConfigProvider';
+import UploadFile from '@/components/pages/upload/File';
+import { type Response } from '@/lib/api/response';
+import { SafeConfig } from '@/lib/config/safe';
+import { useTitle } from '@/lib/hooks/useTitle';
+import { Anchor, Center, Container, Text } from '@mantine/core';
+import { data, Link, Params, useLoaderData } from 'react-router-dom';
+import useSWR from 'swr';
+
+export async function loader({ params }: { params: Params<string> }) {
+  const res = await fetch(`/api/server/folder/${params.id}?upload=true`);
+  if (!res.ok) {
+    throw data('Folder not found', { status: 404 });
+  }
+
+  return {
+    folder: (await res.json()) as Response['/api/server/folder/[id]'],
+  };
+}
+
+export function Component() {
+  const { folder } = useLoaderData<typeof loader>();
+
+  const { data: config } = useSWR<Response['/api/server/public']>('/api/server/public', {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenHidden: false,
+    revalidateIfStale: false,
+  });
+
+  useTitle(`Upload to ${folder.name ?? 'folder'}`);
+
+  return (
+    <>
+      <Container my='lg'>
+        <ConfigProvider data={{ config: config as unknown as SafeConfig, codeMap: [] }}>
+          <UploadFile title={`Upload files to ${folder.name}`} folder={folder.id} />
+          <Center>
+            <Text c='dimmed' ta='center'>
+              {folder.public ? (
+                <>
+                  This folder is{' '}
+                  <Anchor component={Link} to={`/folder/${folder.id}`}>
+                    public
+                  </Anchor>
+                  . Anyone with the link can view its contents and upload files.
+                </>
+              ) : (
+                "Only the owner can view this folder's contents. However, anyone can upload files, and they can still access their uploaded files if they have the link to the specific file."
+              )}
+            </Text>
+          </Center>
+        </ConfigProvider>
+      </Container>
+    </>
+  );
+}
+
+Component.displayName = 'ViewFolderIdUpload';

src/client/pages/view/[id].tsx

@@ -0,0 +1,256 @@
+import DashboardFileType from '@/components/file/DashboardFileType';
+import TagPill from '@/components/pages/files/tags/TagPill';
+import { File } from '@/lib/db/models/file';
+import { User } from '@/lib/db/models/user';
+import { parseString } from '@/lib/parser';
+import { type parserMetrics } from '@/lib/parser/metrics';
+import { formatRootUrl } from '@/lib/url';
+import {
+  ActionIcon,
+  Anchor,
+  Box,
+  Button,
+  Center,
+  Collapse,
+  Group,
+  Modal,
+  Paper,
+  PasswordInput,
+  Text,
+  Tooltip,
+  Typography,
+} from '@mantine/core';
+import { IconDownload, IconExternalLink, IconInfoCircleFilled } from '@tabler/icons-react';
+import * as sanitize from 'isomorphic-dompurify';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useSsrData } from '../../../components/ZiplineSSRProvider';
+import { getFile } from '../../ssr-view/server';
+import { useTitle } from '@/lib/hooks/useTitle';
+
+type SsrData = {
+  file: Partial<NonNullable<Awaited<ReturnType<typeof getFile>>>>;
+  password?: boolean;
+  code: boolean;
+  user?: Partial<User>;
+  host: string;
+  pw?: string | null;
+  metrics?: Awaited<ReturnType<typeof parserMetrics>>;
+  filesRoute?: string;
+};
+
+export default function ViewFileId() {
+  const data = useSsrData<SsrData>();
+  if (!data) return null;
+
+  const { file, password, code, user, host, metrics, filesRoute, pw } = data;
+
+  // Fix dates that were stringified during SSR
+  if (file?.createdAt) (file as any).createdAt = new Date(file.createdAt);
+  if (file?.updatedAt) (file as any).updatedAt = new Date(file.updatedAt);
+  if (file?.deletesAt) (file as any).deletesAt = new Date(file.deletesAt);
+  if (user?.createdAt) (user as any).createdAt = new Date(user.createdAt);
+  if (user?.updatedAt) (user as any).updatedAt = new Date(user.updatedAt);
+
+  const [passwordValue, setPassword] = useState<string>('');
+  const [passwordError, setPasswordError] = useState<string>('');
+  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
+
+  useTitle(file.originalName ?? file.name ?? 'View File');
+
+  return password && !pw ? (
+    <Modal onClose={() => {}} opened={true} withCloseButton={false} centered title='Password required'>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+
+          const res = await fetch(`/api/user/files/${file.id}/password`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ password: passwordValue.trim() }),
+          });
+
+          if (res.ok) {
+            window.location.reload();
+          } else {
+            setPasswordError('Invalid password');
+          }
+        }}
+      >
+        <PasswordInput
+          description='This file is password protected, enter password to view it'
+          required
+          mb='sm'
+          value={passwordValue}
+          onChange={(event) => setPassword(event.currentTarget.value)}
+          error={passwordError}
+        />
+
+        <Button
+          fullWidth
+          variant='outline'
+          my='sm'
+          type='submit'
+          disabled={passwordValue.trim().length === 0}
+        >
+          Verify
+        </Button>
+      </form>
+    </Modal>
+  ) : code ? (
+    <>
+      <Paper withBorder style={{ borderTop: 0, borderLeft: 0, borderRight: 0 }}>
+        <Group justify='space-between' py={5} px='xs'>
+          <Text c='dimmed'>{file.originalName ?? file.name}</Text>
+
+          <Group>
+            <ActionIcon size='md' variant='outline' onClick={() => setDetailsOpen((o) => !o)}>
+              <IconInfoCircleFilled size='1rem' />
+            </ActionIcon>
+
+            <ActionIcon
+              size='md'
+              variant='outline'
+              component={Link}
+              to={`/raw/${file.name}?download=true${pw ? `&pw=${pw}` : ''}`}
+              target='_blank'
+            >
+              <IconDownload size='1rem' />
+            </ActionIcon>
+          </Group>
+        </Group>
+      </Paper>
+
+      <Collapse in={detailsOpen}>
+        <Paper m='md' p='md' withBorder>
+          {user?.view!.content && (
+            <Typography>
+              <Text
+                ta={user?.view!.align ?? 'left'}
+                dangerouslySetInnerHTML={{
+                  __html: sanitize.sanitize(
+                    parseString(user.view.content, {
+                      file: file as unknown as File,
+                      user: user as User,
+                      link: {
+                        returned: `${host}${formatRootUrl(filesRoute ?? '/u', file.name!)}`,
+                        raw: `${host}/raw/${file.name}`,
+                      },
+                      ...metrics,
+                    }) ?? '',
+                    {
+                      USE_PROFILES: { html: true },
+                      FORBID_TAGS: ['style', 'script'],
+                    },
+                  ),
+                }}
+              />
+            </Typography>
+          )}
+        </Paper>
+      </Collapse>
+
+      {file.name!.endsWith('.md') || file.name!.endsWith('.tex') ? (
+        <Paper m='md' p='md' withBorder>
+          <DashboardFileType file={file as unknown as File} password={pw} show code={code} />
+        </Paper>
+      ) : (
+        <Box m='sm'>
+          <DashboardFileType file={file as unknown as File} password={pw} show code={code} />
+        </Box>
+      )}
+    </>
+  ) : (
+    <>
+      <Center h='100%'>
+        <Paper m='md' p='md' shadow='md' radius='md' withBorder>
+          <Group justify='space-between' mb='sm'>
+            <Group>
+              <Text size='lg' fw={700} display='flex'>
+                {file.originalName ?? file.name}{' '}
+              </Text>
+              {user?.view!.showTags && (
+                <Group gap={4}>
+                  {file.tags?.map((tag) => (
+                    <TagPill key={tag.id} tag={tag} />
+                  ))}
+                </Group>
+              )}
+              {user?.view!.showFolder &&
+                file.Folder &&
+                (file.Folder.public ? (
+                  <Tooltip label='View folder'>
+                    <Anchor component={Link} ml='sm' to={`/folder/${file.Folder.id}`}>
+                      {file.Folder.name}
+                    </Anchor>
+                  </Tooltip>
+                ) : (
+                  <Text ml='sm' size='sm' c='dimmed'>
+                    {file.Folder.name}
+                  </Text>
+                ))}
+              {user?.view!.showMimetype && (
+                <Text size='sm' c='dimmed' ml='sm' style={{ alignSelf: 'center' }}>
+                  {file.type}
+                </Text>
+              )}
+            </Group>
+
+            <ActionIcon.Group>
+              <Tooltip label='View raw file'>
+                <ActionIcon
+                  size='md'
+                  variant='outline'
+                  component={Link}
+                  to={`/raw/${file.name}${pw ? `?pw=${pw}` : ''}`}
+                  target='_blank'
+                >
+                  <IconExternalLink size='1rem' />
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip label='Download file'>
+                <ActionIcon
+                  size='md'
+                  variant='outline'
+                  component={Link}
+                  to={`/raw/${file.name}?download=true${pw ? `&pw=${pw}` : ''}`}
+                  target='_blank'
+                >
+                  <IconDownload size='1rem' />
+                </ActionIcon>
+              </Tooltip>
+            </ActionIcon.Group>
+          </Group>
+
+          <DashboardFileType allowZoom file={file as unknown as File} password={pw} show />
+
+          {user?.view!.content && (
+            <Typography>
+              <Text
+                mt='sm'
+                ta={user?.view.align ?? 'left'}
+                dangerouslySetInnerHTML={{
+                  __html: sanitize.sanitize(
+                    parseString(user?.view.content, {
+                      file: file as unknown as File,
+                      link: {
+                        returned: `${host}${formatRootUrl(filesRoute ?? '/u', file.name!)}`,
+                        raw: `${host}/raw/${file.name}`,
+                      },
+                      user: user as User,
+                      ...metrics,
+                    }) ?? '',
+                    {
+                      USE_PROFILES: { html: true },
+                      FORBID_TAGS: ['script'],
+                    },
+                  ),
+                }}
+              />
+            </Typography>
+          )}
+        </Paper>
+      </Center>
+    </>
+  );
+}

src/client/pages/view/url/[id].tsx

@@ -0,0 +1,65 @@
+import { useSsrData } from '@/components/ZiplineSSRProvider';
+import { Anchor, Button, Modal, PasswordInput } from '@mantine/core';
+import { useEffect, useState } from 'react';
+
+export default function ViewUrlId() {
+  const data = useSsrData<{
+    url: { id: string; destination?: string };
+    password?: boolean;
+  }>();
+  if (!data) return null;
+
+  const { url, password } = data;
+
+  const [passwordValue, setPassword] = useState<string>('');
+  const [passwordError, setPasswordError] = useState<string>('');
+
+  useEffect(() => {
+    if (!password && url.destination) window.location.href = url.destination;
+  }, []);
+
+  return password ? (
+    <Modal onClose={() => {}} opened={true} withCloseButton={false} centered title='Password required'>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+
+          const res = await fetch(`/api/user/urls/${url.id}/password`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ password: passwordValue.trim() }),
+          });
+
+          if (res.ok) {
+            window.location.reload();
+          } else {
+            setPasswordError('Invalid password');
+          }
+        }}
+      >
+        <PasswordInput
+          description='This link is password protected, enter password to view it'
+          required
+          mb='sm'
+          value={passwordValue}
+          onChange={(event) => setPassword(event.currentTarget.value)}
+          error={passwordError}
+        />
+
+        <Button
+          fullWidth
+          variant='outline'
+          my='sm'
+          type='submit'
+          disabled={passwordValue.trim().length === 0}
+        >
+          Verify
+        </Button>
+      </form>
+    </Modal>
+  ) : (
+    <p>
+      Redirecting to <Anchor href={url.destination!}>{url.destination!}</Anchor>
+    </p>
+  );
+}

src/client/routes.tsx

@@ -0,0 +1,117 @@
+import Layout from '@/components/Layout';
+import { Response as ApiResponse } from '@/lib/api/response';
+import { isAdministrator } from '@/lib/role';
+import { createBrowserRouter, data, redirect } from 'react-router-dom';
+import DashboardErrorBoundary from './error/DashboardErrorBoundary';
+import RootErrorBoundary from './error/RootErrorBoundary';
+import FourOhFour from './pages/404';
+import Login from './pages/auth/login';
+import Root from './Root';
+
+export async function dashboardLoader() {
+  try {
+    const res = await fetch('/api/server/settings/web');
+    if (!res.ok) {
+      return redirect('/auth/login');
+    }
+
+    const data = await res.json();
+    console.log('Loaded settings:', data);
+
+    return data as ApiResponse['/api/server/settings/web'];
+  } catch (error) {
+    throw data('Failed to load settings' + (error as any).message, { status: 500 });
+  }
+}
+
+export const router = createBrowserRouter([
+  {
+    Component: Root,
+    path: '/',
+    children: [
+      {
+        ErrorBoundary: RootErrorBoundary,
+        children: [
+          { path: '*', Component: FourOhFour },
+          {
+            path: '/auth',
+            children: [
+              { path: 'login', Component: Login },
+              { path: 'register', lazy: () => import('./pages/auth/register') },
+              {
+                path: 'setup',
+                lazy: () => import('./pages/auth/setup'),
+              },
+              { path: 'tos', lazy: () => import('./pages/auth/tos') },
+            ],
+          },
+          {
+            path: '/dashboard',
+            Component: Layout,
+            loader: dashboardLoader,
+            children: [
+              {
+                ErrorBoundary: DashboardErrorBoundary,
+                children: [
+                  { index: true, lazy: () => import('./pages/dashboard/index') },
+                  { path: 'metrics', lazy: () => import('./pages/dashboard/metrics') },
+                  { path: 'settings', lazy: () => import('./pages/dashboard/settings') },
+                  { path: 'files', lazy: () => import('./pages/dashboard/files') },
+                  { path: 'folders/*', lazy: () => import('./pages/dashboard/folders') },
+                  { path: 'urls', lazy: () => import('./pages/dashboard/urls') },
+                  {
+                    path: 'upload',
+                    children: [
+                      { path: 'file', lazy: () => import('./pages/dashboard/upload/file') },
+                      { path: 'text', lazy: () => import('./pages/dashboard/upload/text') },
+                    ],
+                  },
+                  {
+                    path: 'admin',
+                    loader: async () => {
+                      const res = await fetch('/api/user');
+                      if (!res.ok) {
+                        return redirect('/auth/login');
+                      }
+
+                      const { user } = await res.json();
+                      if (!isAdministrator(user.role)) return redirect('/dashboard');
+                    },
+                    children: [
+                      { path: 'invites', lazy: () => import('./pages/dashboard/admin/invites') },
+                      { path: 'settings', lazy: () => import('./pages/dashboard/admin/settings') },
+                      { path: 'actions', lazy: () => import('./pages/dashboard/admin/actions') },
+                      {
+                        path: 'users',
+                        children: [
+                          { index: true, lazy: () => import('./pages/dashboard/admin/users') },
+                          {
+                            path: ':id/files',
+                            lazy: () => import('./pages/dashboard/admin/users/[id]/files'),
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: 'folder/:id',
+            children: [
+              {
+                index: true,
+                lazy: () => import('./pages/folder/[id]'),
+              },
+              {
+                path: 'upload',
+                lazy: () => import('./pages/folder/[id]/upload'),
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]);

src/client/ssr-view-url/client.tsx

@@ -0,0 +1,25 @@
+import '@mantine/charts/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@mantine/notifications/styles.css';
+import 'mantine-datatable/styles.css';
+
+import ZiplineSSRProvider from '@/components/ZiplineSSRProvider';
+import { ZIPLINE_SSR_PROP } from '@/lib/ssr/constants';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createRoutes } from './routes';
+
+const router = createBrowserRouter(createRoutes());
+
+const initialData = (window as any)[ZIPLINE_SSR_PROP];
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ZiplineSSRProvider ssrData={initialData}>
+      <RouterProvider router={router} />
+    </ZiplineSSRProvider>
+  </StrictMode>,
+);

src/client/ssr-view-url/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--zipline-ssr-meta-->
+  </head>
+  <body>
+    <div id="root"><!--zipline-ssr-insert--></div>
+    <script type="module" src="/ssr-view-url/client.tsx"></script>
+  </body>
+</html>

src/client/ssr-view-url/routes.tsx

@@ -0,0 +1,18 @@
+import { ZiplineTheme } from '@/lib/theme';
+import Root from '../Root';
+import { Config } from '@/lib/config/validate';
+import ViewUrlId from '../pages/view/url/[id]';
+
+export const createRoutes = (themes?: ZiplineTheme[], defaultTheme?: Config['website']['theme']) => [
+  {
+    path: '/view/url',
+    Component:
+      typeof window === 'undefined' ? undefined : () => <Root themes={themes} defaultTheme={defaultTheme} />,
+    children: [
+      {
+        path: ':id',
+        Component: () => <ViewUrlId />,
+      },
+    ],
+  },
+];

src/client/ssr-view-url/server.tsx

@@ -0,0 +1,95 @@
+import * as cookie from 'cookie';
+import { FastifyRequest } from 'fastify';
+
+import { config as zConfig } from '@/lib/config';
+import { Config } from '@/lib/config/validate';
+import { verifyPassword } from '@/lib/crypto';
+import { prisma } from '@/lib/db';
+import { renderHtml } from '@/lib/ssr/renderHtml';
+import { ZiplineTheme } from '@/lib/theme';
+import { createRoutes } from './routes'; // This should include the `/url/:id` route
+
+export async function render(
+  {
+    themes,
+    defaultTheme,
+    req,
+  }: {
+    themes: ZiplineTheme[];
+    defaultTheme: Config['website']['theme'];
+    req: FastifyRequest;
+  },
+  url: string,
+) {
+  const routes = createRoutes(themes, defaultTheme);
+
+  const id = url.split('/').pop();
+  if (!id) return { html: 'Not Found', meta: '', status: 404 };
+
+  const { config: libConfig, reloadSettings } = await import('@/lib/config');
+  if (!libConfig) await reloadSettings();
+
+  const urlEntry = await prisma.url.findFirst({
+    where: {
+      OR: [{ vanity: id }, { code: id }, { id }],
+    },
+    select: {
+      id: true,
+      password: true,
+      destination: true,
+      maxViews: true,
+      views: true,
+      enabled: true,
+    },
+  });
+
+  if (!urlEntry || !urlEntry.enabled) return { html: 'Not Found', meta: '', status: 404 };
+
+  if (urlEntry.maxViews && urlEntry.views >= urlEntry.maxViews) {
+    if (zConfig.features.deleteOnMaxViews) {
+      await prisma.url.delete({ where: { id: urlEntry.id } });
+    }
+    return { html: 'Gone', meta: '', status: 410 };
+  }
+
+  const cookies = cookie.parse(req.headers.cookie || '');
+  const pw = cookies[`url_pw_${urlEntry.id}`];
+  const hasPassword = !!urlEntry.password;
+
+  const data = {
+    url: { ...urlEntry },
+    password: hasPassword,
+  };
+
+  if (hasPassword) {
+    delete (data.url as any).password;
+    if (pw) {
+      const verified = await verifyPassword(pw, urlEntry.password!);
+      if (!verified) {
+        delete (data.url as any).destination;
+        return renderHtml(routes, { url, data, status: 403 });
+      }
+    } else {
+      delete (data.url as any).destination;
+      return renderHtml(routes, { url, data, status: 403 });
+    }
+  }
+
+  delete (data.url as any).password;
+
+  await prisma.url.update({
+    where: { id: urlEntry.id },
+    data: { views: { increment: 1 } },
+  });
+
+  if (data.url.destination) {
+    return {
+      html: '',
+      meta: '',
+      redirect: data.url.destination,
+      status: 301,
+    };
+  }
+
+  return renderHtml(routes, { url, data, status: 200 });
+}

src/client/ssr-view/client.tsx

@@ -0,0 +1,25 @@
+import '@mantine/charts/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@mantine/notifications/styles.css';
+import 'mantine-datatable/styles.css';
+
+import ZiplineSSRProvider from '@/components/ZiplineSSRProvider';
+import { ZIPLINE_SSR_PROP } from '@/lib/ssr/constants';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createRoutes } from './routes';
+
+const router = createBrowserRouter(createRoutes());
+
+const initialData = (window as any)[ZIPLINE_SSR_PROP];
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ZiplineSSRProvider ssrData={initialData}>
+      <RouterProvider router={router} />
+    </ZiplineSSRProvider>
+  </StrictMode>,
+);

src/client/ssr-view/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--zipline-ssr-meta-->
+  </head>
+  <body>
+    <div id="root"><!--zipline-ssr-insert--></div>
+    <script type="module" src="/ssr-view/client.tsx"></script>
+  </body>
+</html>

src/client/ssr-view/routes.tsx

@@ -0,0 +1,18 @@
+import { ZiplineTheme } from '@/lib/theme';
+import Root from '../Root';
+import ViewFileId from '../pages/view/[id]';
+import { Config } from '@/lib/config/validate';
+
+export const createRoutes = (themes?: ZiplineTheme[], defaultTheme?: Config['website']['theme']) => [
+  {
+    path: '/view',
+    Component:
+      typeof window === 'undefined' ? undefined : () => <Root themes={themes} defaultTheme={defaultTheme} />,
+    children: [
+      {
+        path: ':id',
+        Component: () => <ViewFileId />,
+      },
+    ],
+  },
+];

src/client/ssr-view/server.tsx

@@ -0,0 +1,275 @@
+import '@mantine/charts/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@mantine/notifications/styles.css';
+import 'mantine-datatable/styles.css';
+
+import { isCode } from '@/lib/code';
+import { config as zConfig } from '@/lib/config';
+import type { Config } from '@/lib/config/validate';
+import { verifyPassword } from '@/lib/crypto';
+import { prisma } from '@/lib/db';
+import { File, fileSelect } from '@/lib/db/models/file';
+import { User, userSelect } from '@/lib/db/models/user';
+import { parseString } from '@/lib/parser';
+import { parserMetrics } from '@/lib/parser/metrics';
+import { createZiplineSsr } from '@/lib/ssr/createZiplineSsr';
+import type { ZiplineTheme } from '@/lib/theme';
+import { readThemes } from '@/lib/theme/file';
+import * as cookie from 'cookie';
+import { FastifyRequest } from 'fastify';
+import { renderToString } from 'react-dom/server';
+import { createStaticHandler, createStaticRouter, StaticRouterProvider } from 'react-router-dom';
+import { createRoutes } from './routes';
+
+export const getFile = async (id: string) =>
+  prisma.file.findFirst({
+    where: { name: decodeURIComponent(id) },
+    select: {
+      ...fileSelect,
+      password: true,
+      userId: true,
+      thumbnail: { select: { path: true } },
+      tags: { select: { id: true, name: true, color: true } },
+      Folder: { select: { id: true, public: true, name: true } },
+    },
+  });
+
+export async function render(
+  {
+    defaultTheme,
+    req,
+  }: {
+    themes: ZiplineTheme[];
+    defaultTheme: Config['website']['theme'];
+    req: FastifyRequest;
+  },
+  url: string,
+) {
+  const id = url.split('/').pop();
+  if (!id) return { html: 'Not Found', meta: '', status: 404 };
+
+  const { config: libConfig, reloadSettings } = await import('@/lib/config');
+  if (!libConfig) await reloadSettings();
+
+  const file = await getFile(id);
+  if (!file || !file.userId) return { html: 'Not Found', meta: '', status: 404 };
+
+  if (file.maxViews && file.views >= file.maxViews) return { html: 'Gone', meta: '', status: 410 };
+  if (file.deletesAt && file.deletesAt <= new Date()) return { html: 'Expired', meta: '', status: 410 };
+
+  const user = await prisma.user.findFirst({
+    where: { id: file.userId },
+    select: {
+      ...userSelect,
+      oauthProviders: false,
+      passkeys: false,
+      sessions: false,
+      totpSecret: false,
+      quota: false,
+    },
+  });
+  if (!user) return { html: 'Not Found', meta: '', status: 404 };
+
+  let host = req.headers.host || 'localhost';
+  const proto = req.headers['x-forwarded-proto'];
+  try {
+    if (
+      JSON.parse(req.headers['cf-visitor'] as string)?.scheme === 'https' ||
+      proto === 'https' ||
+      zConfig.core.returnHttpsUrls
+    ) {
+      host = `https://${host}`;
+    } else {
+      host = `http://${host}`;
+    }
+  } catch {
+    host = proto === 'https' || zConfig.core.returnHttpsUrls ? `https://${host}` : `http://${host}`;
+  }
+
+  const code = await isCode(file.name);
+  const themes = await readThemes();
+  const metrics = await parserMetrics(user.id);
+  const config = { website: { theme: zConfig.website.theme } };
+
+  const cookies = cookie.parse(req.headers.cookie || '');
+  const pw = cookies[`file_pw_${file.id}`];
+  const hasPassword = !!file.password;
+
+  if (hasPassword) {
+    if (pw) {
+      const verified = await verifyPassword(pw, file.password!);
+      if (!verified) return { html: 'Forbidden', meta: '', status: 403 };
+      delete (file as any).password;
+    } else {
+      delete (file as any).password;
+      const data = {
+        file: { id: file.id, name: file.name, type: file.type },
+        password: true,
+        code,
+        user,
+        host,
+        themes,
+        metrics,
+        config,
+      };
+
+      const routes = createRoutes(themes, defaultTheme);
+      const { query } = createStaticHandler(routes);
+      const context = await query(
+        new Request('http://client' + url, {
+          method: 'GET',
+          headers: new Headers({ accept: 'text/html' }),
+        }),
+      );
+
+      if (context instanceof Response) {
+        return context;
+      }
+      const router = createStaticRouter(routes, context);
+      const html = renderToString(<StaticRouterProvider context={context} router={router} />);
+
+      return {
+        html,
+        meta: `<title>Password Protected</title>\n${createZiplineSsr(data)}`,
+      };
+    }
+  }
+
+  const data = {
+    file,
+    password: hasPassword,
+    pw: pw || null,
+    code,
+    user,
+    host,
+    themes,
+    metrics,
+    filesRoute: zConfig.files.route,
+    config,
+  };
+
+  const routes = createRoutes(themes, defaultTheme);
+  const { query } = createStaticHandler(routes);
+  const context = await query(
+    new Request('http://client' + url, {
+      method: 'GET',
+      headers: new Headers({ accept: 'text/html' }),
+    }),
+  );
+
+  if (context instanceof Response) {
+    return context;
+  }
+
+  const router = createStaticRouter(routes, context);
+  const html = renderToString(<StaticRouterProvider context={context} router={router} />);
+
+  const meta = `
+  ${
+    user?.view?.embedTitle && user.view.embed
+      ? `<meta property="og:title" content="${
+          parseString(user.view.embedTitle, {
+            file: file as unknown as File,
+            user: user as User,
+            ...metrics,
+          }) ?? ''
+        }" />`
+      : ''
+  }
+  ${
+    user?.view?.embedDescription && user.view.embed
+      ? `<meta property="og:description" content="${
+          parseString(user.view.embedDescription, {
+            file: file as unknown as File,
+            user: user as User,
+            ...metrics,
+          }) ?? ''
+        }" />`
+      : ''
+  }
+  ${
+    user?.view?.embedSiteName && user.view.embed
+      ? `<meta property="og:site_name" content="${
+          parseString(user.view.embedSiteName, {
+            file: file as unknown as File,
+            user: user as User,
+            ...metrics,
+          }) ?? ''
+        }" />`
+      : ''
+  }
+  ${
+    user?.view?.embedColor && user.view.embed
+      ? `<meta property="theme-color" content="${
+          parseString(user.view.embedColor, {
+            file: file as unknown as File,
+            user: user as User,
+            ...metrics,
+          }) ?? ''
+        }" />`
+      : ''
+  }
+
+  ${
+    file.type?.startsWith('image')
+      ? `
+    <meta property="og:type" content="image" />
+    <meta property="og:image" itemProp="image" content="${host}/raw/${file.name}" />
+    <meta property="og:url" content="${host}/raw/${file.name}" />
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:image" content="${host}/raw/${file.name}" />
+    <meta property="twitter:title" content="${file.name}" />
+  `
+      : ''
+  }
+
+  ${
+    file.type?.startsWith('video')
+      ? `
+    ${file.thumbnail ? `<meta property="og:image" content="${host}/raw/${file.thumbnail.path}" />` : ''}
+    <meta property="og:type" content="video.other" />
+    <meta property="og:video:url" content="${host}/raw/${file.name}" />
+    <meta property="og:video:width" content="1920" />
+    <meta property="og:video:height" content="1080" />
+  `
+      : ''
+  }
+
+  ${
+    file.type?.startsWith('audio')
+      ? `
+    <meta name="twitter:card" content="player" />
+    <meta name="twitter:player" content="${host}/raw/${file.name}" />
+    <meta name="twitter:player:stream" content="${host}/raw/${file.name}" />
+    <meta name="twitter:player:stream:content_type" content="${file.type}" />
+    <meta name="twitter:title" content="${file.name}" />
+    <meta name="twitter:player:width" content="720" />
+    <meta name="twitter:player:height" content="480" />
+
+    <meta property="og:type" content="music.song" />
+    <meta property="og:url" content="${host}/raw/${file.name}" />
+    <meta property="og:audio" content="${host}/raw/${file.name}" />
+    <meta property="og:audio:secure_url" content="${host}/raw/${file.name}" />
+    <meta property="og:audio:type" content="${file.type}" />
+  `
+      : ''
+  }
+
+  ${
+    !file.type?.startsWith('video') && !file.type?.startsWith('image')
+      ? `
+    <meta property="og:url" content="${host}/raw/${file.name}" />
+  `
+      : ''
+  }
+
+  <title>${file.originalName ?? file.name}</title>
+`;
+
+  return {
+    html,
+    meta: `${user.view.embed ? meta : ''}\n${createZiplineSsr(data)}`,
+  };
+}

src/components/ConfigProvider.tsx

@@ -1,21 +1,30 @@
-import { SafeConfig } from '@/lib/config/safe';
+import { ApiServerSettingsWebResponse } from '@/server/routes/api/server/settings';
 import { createContext, useContext } from 'react';
 
-const ConfigContext = createContext<SafeConfig | null>(null);
+type ConfigContextType = ApiServerSettingsWebResponse;
+
+const ConfigContext = createContext<ConfigContextType | null>(null);
 
 export function useConfig() {
   const ctx = useContext(ConfigContext);
   if (!ctx) throw new Error('useConfig must be used within a ConfigProvider');
 
-  return ctx;
+  return ctx.config;
+}
+
+export function useCodeMap() {
+  const ctx = useContext(ConfigContext);
+  if (!ctx) throw new Error('useCodeMap must be used within a ConfigProvider');
+
+  return ctx.codeMap;
 }
 
 export default function ConfigProvider({
-  config,
+  data,
   children,
 }: {
-  config: SafeConfig;
+  data: ConfigContextType;
   children: React.ReactNode;
 }) {
-  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
+  return <ConfigContext.Provider value={data}>{children}</ConfigContext.Provider>;
 }

src/components/DomainSelect.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import { useConfig } from './ConfigProvider';
+import { Select, TextInput } from '@mantine/core';
+import { IconGlobe } from '@tabler/icons-react';
+
+export default function DomainSelect({
+  onChange,
+  ...props
+}: React.ComponentProps<typeof Select> & { onChange?: (value: string) => void }) {
+  const config = useConfig();
+
+  const domains = useMemo(() => {
+    const settingsDomains = config.domains;
+    if (!settingsDomains) return [];
+    if (!Array.isArray(settingsDomains)) return [];
+
+    return settingsDomains;
+  }, [config]);
+
+  const selectData = [
+    { value: '', label: 'Default domain' },
+    ...domains.map((domain) => ({
+      value: domain,
+      label: domain,
+    })),
+  ];
+
+  if (domains.length === 0)
+    return (
+      <TextInput
+        description='Override the domain with this value. This will change the domain returned in your uploads. Leave blank to use the default domain.'
+        leftSection={<IconGlobe size='1rem' />}
+        placeholder='example.com'
+        {...(onChange
+          ? {
+              onChange: (e) => onChange(e.currentTarget.value),
+            }
+          : {})}
+        {...(props as React.ComponentProps<typeof TextInput>)}
+      />
+    );
+
+  return (
+    <Select
+      data={selectData}
+      description='Override the domain with this value. This will change the domain returned in your uploads. Leave blank to use the default domain.'
+      leftSection={<IconGlobe size='1rem' />}
+      {...(onChange
+        ? {
+            onChange,
+          }
+        : {})}
+      {...props}
+    />
+  );
+}

src/components/Layout.tsx

@@ -3,6 +3,7 @@ import type { SafeConfig } from '@/lib/config/safe';
 import { fetchApi } from '@/lib/fetchApi';
 import useAvatar from '@/lib/hooks/useAvatar';
 import useLogin from '@/lib/hooks/useLogin';
+import { Outlet, useLocation } from 'react-router-dom';
 import { isAdministrator } from '@/lib/role';
 import { useUserStore } from '@/lib/store/user';
 import {
@@ -40,15 +41,17 @@ import {
   IconRefreshDot,
   IconSettingsFilled,
   IconShieldLockFilled,
+  IconStopwatch,
   IconTags,
   IconUpload,
   IconUsersGroup,
 } from '@tabler/icons-react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { useState } from 'react';
 import ConfigProvider from './ConfigProvider';
 import VersionBadge from './VersionBadge';
+import { Link, useLoaderData } from 'react-router-dom';
+import { dashboardLoader } from '../client/routes';
+import { useLogout } from '@/lib/hooks/useLogout';
 
 type NavLinks = {
   label: string;
@@ -125,6 +128,12 @@ const navLinks: NavLinks[] = [
         if: (user) => user?.role === 'SUPERADMIN',
         href: '/dashboard/admin/settings',
       },
+      {
+        label: 'Actions',
+        icon: <IconStopwatch size='1rem' />,
+        active: (path: string) => path === '/dashboard/admin/actions',
+        href: '/dashboard/admin/actions',
+      },
       {
         label: 'Users',
         icon: <IconUsersGroup size='1rem' />,
@@ -142,14 +151,18 @@ const navLinks: NavLinks[] = [
   },
 ];
 
-export default function Layout({ children, config }: { children: React.ReactNode; config: SafeConfig }) {
+export default function Layout() {
   const theme = useMantineTheme();
   const { colorScheme } = useMantineColorScheme();
   const [opened, setOpened] = useState(false);
-  const router = useRouter();
   const modals = useModals();
   const clipboard = useClipboard();
   const setUser = useUserStore((s) => s.setUser);
+  const location = useLocation();
+  const logout = useLogout();
+
+  const loaderData = useLoaderData<typeof dashboardLoader>();
+  const config = loaderData.config;
 
   const { user, mutate } = useLogin();
   const { avatar } = useAvatar();
@@ -275,7 +288,8 @@ export default function Layout({ children, config }: { children: React.ReactNode
                 <Menu.Item
                   leftSection={<IconSettingsFilled size='1rem' />}
                   component={Link}
-                  href='/dashboard/settings'
+                  to='/dashboard/settings'
+                  prefetch='intent'
                 >
                   Settings
                 </Menu.Item>
@@ -284,19 +298,15 @@ export default function Layout({ children, config }: { children: React.ReactNode
                   <Menu.Item
                     leftSection={<IconAdjustments size='1rem' />}
                     component={Link}
-                    href='/dashboard/admin/settings'
+                    to='/dashboard/admin/settings'
+                    prefetch='intent'
                   >
                     Server Settings
                   </Menu.Item>
                 )}
 
                 <Menu.Divider />
-                <Menu.Item
-                  color='red'
-                  leftSection={<IconLogout size='1rem' />}
-                  component={Link}
-                  href='/auth/logout'
-                >
+                <Menu.Item color='red' leftSection={<IconLogout size='1rem' />} onClick={logout}>
                   Logout
                 </Menu.Item>
               </Menu.Dropdown>
@@ -322,9 +332,10 @@ export default function Layout({ children, config }: { children: React.ReactNode
                   leftSection={link.icon}
                   variant='light'
                   rightSection={<IconChevronRight size='0.7rem' />}
-                  active={router.pathname === link.href}
+                  active={location.pathname === link.href}
                   component={Link}
-                  href={link.href || ''}
+                  to={link.href || ''}
+                  prefetch='intent'
                 />
               );
             } else {
@@ -335,7 +346,7 @@ export default function Layout({ children, config }: { children: React.ReactNode
                   leftSection={link.icon}
                   variant='light'
                   rightSection={<IconChevronRight size='0.7rem' />}
-                  defaultOpened={link.active(router.pathname)}
+                  defaultOpened={link.active(location.pathname)}
                 >
                   {link.links
                     .filter(
@@ -348,9 +359,10 @@ export default function Layout({ children, config }: { children: React.ReactNode
                         leftSection={sublink.icon}
                         rightSection={<IconChevronRight size='0.7rem' />}
                         variant='light'
-                        active={router.pathname === sublink.href}
+                        active={location.pathname === sublink.href}
                         component={Link}
-                        href={sublink.href || ''}
+                        to={sublink.href || ''}
+                        prefetch='intent'
                       />
                     ))}
                 </NavLink>
@@ -372,7 +384,7 @@ export default function Layout({ children, config }: { children: React.ReactNode
                   leftSection={<IconExternalLink size='1rem' />}
                   variant='light'
                   component={Link}
-                  href={url}
+                  to={url}
                   target='_blank'
                 />
               ))}
@@ -382,9 +394,9 @@ export default function Layout({ children, config }: { children: React.ReactNode
       </AppShell.Navbar>
 
       <AppShell.Main>
-        <ConfigProvider config={config}>
+        <ConfigProvider data={loaderData}>
           <Paper m='lg' withBorder p='xs'>
-            {children}
+            <Outlet />
           </Paper>
         </ConfigProvider>
       </AppShell.Main>

src/components/ThemeProvider.tsx

@@ -1,3 +1,4 @@
+import { Response } from '@/lib/api/response';
 import { Config } from '@/lib/config/validate';
 import { useSettingsStore } from '@/lib/store/settings';
 import { useUserStore } from '@/lib/store/user';
@@ -6,6 +7,7 @@ import dark_blue from '@/lib/theme/builtins/dark_blue';
 import { MantineProvider, createTheme } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
 import { createContext, useContext } from 'react';
+import useSWR from 'swr';
 import { useShallow } from 'zustand/shallow';
 
 const ThemeContext = createContext<{
@@ -21,15 +23,25 @@ export function useThemes() {
   return ctx.themes;
 }
 
-export default function Theming({
-  themes,
-  defaultTheme,
+export default function ThemeProvider({
+  ssrThemes,
+  ssrDefaultTheme,
   children,
 }: {
-  themes: ZiplineTheme[];
+  ssrThemes?: ZiplineTheme[];
+  ssrDefaultTheme?: Config['website']['theme'];
   children: React.ReactNode;
-  defaultTheme?: Config['website']['theme'];
 }) {
+  const { data: clientThemes } = useSWR<Response['/api/server/themes']>('/api/server/themes', {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    refreshWhenHidden: false,
+    revalidateIfStale: false,
+  });
+
+  const themes = ssrThemes ?? clientThemes?.themes;
+  const defaultTheme = ssrDefaultTheme ?? clientThemes?.defaultTheme;
+
   const user = useUserStore((state) => state.user);
   const [userTheme, preferredDark, preferredLight] = useSettingsStore(
     useShallow((state) => [state.settings.theme, state.settings.themeDark, state.settings.themeLight]),
@@ -53,17 +65,21 @@ export default function Theming({
   }
 
   return (
-    <ThemeContext.Provider value={{ themes }}>
-      <MantineProvider
-        defaultColorScheme={theme.colorScheme as unknown as any}
-        forceColorScheme={theme.colorScheme as unknown as any}
-        theme={createTheme({
-          ...themeComponents(theme),
-          defaultRadius: 'md',
-        })}
-      >
-        {children}
-      </MantineProvider>
-    </ThemeContext.Provider>
+    <>
+      {theme?.extraCss && <style>{theme.extraCss}</style>}
+
+      <ThemeContext.Provider value={{ themes: themes ?? [] }}>
+        <MantineProvider
+          defaultColorScheme={theme.colorScheme as unknown as any}
+          forceColorScheme={theme.colorScheme as unknown as any}
+          theme={createTheme({
+            ...themeComponents(theme),
+            defaultRadius: 'md',
+          })}
+        >
+          {children}
+        </MantineProvider>
+      </ThemeContext.Provider>
+    </>
   );
 }

src/components/ZiplineSSRProvider.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+export const ZiplineSSRContext = createContext<any>(null);
+
+export function useSsrData<T>(): T {
+  const ctx = useContext(ZiplineSSRContext);
+
+  return ctx as T;
+}
+
+export default function ZiplineSSRProvider({
+  children,
+  ssrData,
+}: {
+  children: React.ReactNode;
+  ssrData: any;
+}) {
+  return <ZiplineSSRContext.Provider value={ssrData}>{children}</ZiplineSSRContext.Provider>;
+}

src/components/file/DashboardFile/EditFileDetailsModal.tsx

@@ -1,9 +1,10 @@
 import { File } from '@/lib/db/models/file';
 import { fetchApi } from '@/lib/fetchApi';
+import useObjectState from '@/lib/hooks/useObjectState';
 import { Button, Divider, Modal, NumberInput, PasswordInput, Stack, TextInput } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconEye, IconKey, IconPencil, IconPencilOff, IconTrashFilled } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { mutateFiles } from '../actions';
 
 export default function EditFileDetailsModal({
@@ -15,13 +16,41 @@ export default function EditFileDetailsModal({
   file: File | null;
   onClose: () => void;
 }) {
-  if (!file) return null;
+  const [formData, setFormData] = useObjectState<{
+    name: string;
+    maxViews: number | null;
+    password: string | null;
+    originalName: string | null;
+    type: string | null;
+  }>({
+    name: file?.name ?? '',
+    maxViews: file?.maxViews ?? null,
+    password: file?.password ? '' : null,
+    originalName: file?.originalName ?? null,
+    type: file?.type ?? null,
+  });
 
-  const [name, setName] = useState<string>(file.name ?? '');
-  const [maxViews, setMaxViews] = useState<number | null>(file?.maxViews ?? null);
-  const [password, setPassword] = useState<string | null>('');
-  const [originalName, setOriginalName] = useState<string | null>(file?.originalName ?? null);
-  const [type, setType] = useState<string | null>(file?.type ?? null);
+  useEffect(() => {
+    if (open) {
+      setFormData({
+        name: file?.name ?? '',
+        maxViews: file?.maxViews ?? null,
+        password: file?.password ? '' : null,
+        originalName: file?.originalName ?? null,
+        type: file?.type ?? null,
+      });
+    } else {
+      setFormData({
+        name: '',
+        maxViews: null,
+        password: null,
+        originalName: null,
+        type: null,
+      });
+    }
+  }, [open, file]);
+
+  if (!file) return null;
 
   const handleRemovePassword = async () => {
     if (!file.password) return;
@@ -58,12 +87,12 @@ export default function EditFileDetailsModal({
       name?: string;
     } = {};
 
-    if (maxViews !== null) data['maxViews'] = maxViews;
-    if (originalName !== null) data['originalName'] = originalName?.trim();
-    if (type !== null) data['type'] = type?.trim();
-    if (name !== file.name) data['name'] = name.trim();
+    if (formData.maxViews !== null) data['maxViews'] = formData.maxViews;
+    if (formData.originalName !== null) data['originalName'] = formData.originalName?.trim();
+    if (formData.type !== null) data['type'] = formData.type?.trim();
+    if (formData.name !== file.name) data['name'] = formData.name.trim();
 
-    const passwordTrimmed = password?.trim();
+    const passwordTrimmed = formData.password?.trim();
     if (passwordTrimmed !== '') data['password'] = passwordTrimmed;
 
     const { error } = await fetchApi(`/api/user/files/${file.id}`, 'PATCH', data);
@@ -85,29 +114,19 @@ export default function EditFileDetailsModal({
 
       onClose();
 
-      setPassword(null);
+      setFormData('password', null);
       mutateFiles();
     }
   };
 
-  useEffect(() => {
-    if (open) {
-      setName(file.name ?? '');
-      setMaxViews(file.maxViews ?? null);
-      setPassword(file.password ? '' : null);
-      setOriginalName(file.originalName ?? null);
-      setType(file.type ?? null);
-    }
-  }, [open, file]);
-
   return (
     <Modal zIndex={300} title={`Editing "${file.name}"`} onClose={onClose} opened={open}>
       <Stack gap='xs' my='sm'>
         <TextInput
           label='Name'
           description='Rename the file.'
-          value={name}
-          onChange={(event) => setName(event.currentTarget.value.trim())}
+          value={formData.name}
+          onChange={(event) => setFormData('name', event.currentTarget.value.trim())}
         />
 
         <NumberInput
@@ -115,17 +134,20 @@ export default function EditFileDetailsModal({
           placeholder='Unlimited'
           description='The maximum number of views this file can have before it is deleted. Leave blank to allow as many views as you want.'
           min={0}
-          value={maxViews || ''}
-          onChange={(value) => setMaxViews(value === '' ? null : Number(value))}
+          value={formData.maxViews || ''}
+          onChange={(value) => setFormData('maxViews', value === '' ? null : Number(value))}
           leftSection={<IconEye size='1rem' />}
         />
 
         <TextInput
           label='Original Name'
           description='Add an original name. When downloading this file, instead of using the generated file name (if chosen), it will download with this "original name" instead.'
-          value={originalName ?? ''}
+          value={formData.originalName ?? ''}
           onChange={(event) =>
-            setOriginalName(event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim())
+            setFormData(
+              'originalName',
+              event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim(),
+            )
           }
         />
 
@@ -137,9 +159,12 @@ export default function EditFileDetailsModal({
               doing, this can mess with how Zipline renders specific file types.
             </>
           }
-          value={type ?? ''}
+          value={formData.type ?? ''}
           onChange={(event) =>
-            setType(event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim())
+            setFormData(
+              'type',
+              event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim(),
+            )
           }
           c='red'
         />
@@ -159,10 +184,13 @@ export default function EditFileDetailsModal({
           <PasswordInput
             label='Password'
             description='Set a password for this file. Leave blank to disable password protection.'
-            value={password ?? ''}
+            value={formData.password ?? ''}
             autoComplete='off'
             onChange={(event) =>
-              setPassword(event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim())
+              setFormData(
+                'password',
+                event.currentTarget.value.trim() === '' ? null : event.currentTarget.value.trim(),
+              )
             }
             leftSection={<IconKey size='1rem' />}
           />

src/components/file/DashboardFile/FileModal.tsx

@@ -1,10 +1,12 @@
+import FolderComboboxOptions from '@/components/folders/FolderComboboxOptions';
 import TagPill from '@/components/pages/files/tags/TagPill';
 import { Response } from '@/lib/api/response';
 import { bytes } from '@/lib/bytes';
 import { File } from '@/lib/db/models/file';
-import { Folder } from '@/lib/db/models/folder';
 import { Tag } from '@/lib/db/models/tag';
 import { fetchApi } from '@/lib/fetchApi';
+import { buildFolderHierarchy } from '@/lib/folderHierarchy';
+import { useFolders } from '@/lib/hooks/useFolders';
 import { useSettingsStore } from '@/lib/store/settings';
 import {
   ActionIcon,
@@ -29,6 +31,7 @@ import { showNotification } from '@mantine/notifications';
 import {
   Icon,
   IconBombFilled,
+  IconClipboardTypography,
   IconCopy,
   IconDeviceSdCard,
   IconDownload,
@@ -46,8 +49,9 @@ import {
   IconTrashFilled,
   IconUpload,
 } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import useSWR, { mutate } from 'swr';
+
 import DashboardFileType from '../DashboardFileType';
 import {
   addToFolder,
@@ -88,36 +92,45 @@ export default function FileModal({
   setOpen,
   file,
   reduce,
+  user,
 }: {
   open: boolean;
   setOpen: (open: boolean) => void;
   file?: File | null;
   reduce?: boolean;
+  user?: string;
 }) {
   const clipboard = useClipboard();
   const warnDeletion = useSettingsStore((state) => state.settings.warnDeletion);
 
   const [editFileOpen, setEditFileOpen] = useState(false);
 
-  const { data: folders } = useSWR<Extract<Response['/api/user/folders'], Folder[]>>(
-    '/api/user/folders?noincl=true',
-  );
+  const { data: folders } = useFolders(user);
+
+  const folderOptions = useMemo(() => {
+    if (!folders) return [];
+    return buildFolderHierarchy(folders);
+  }, [folders]);
 
   const folderCombobox = useCombobox();
   const [search, setSearch] = useState('');
 
   const handleAdd = async (value: string) => {
     if (value === '$create') {
-      createFolderAndAdd(file!, search.trim());
+      await createFolderAndAdd(file!, search.trim());
     } else {
-      addToFolder(file!, value);
+      await addToFolder(file!, value);
     }
   };
 
-  const { data: tags } = useSWR<Extract<Response['/api/user/tags'], Tag[]>>('/api/user/tags');
+  const { data: tags } = useSWR<Extract<Response['/api/user/tags'], Tag[]>>(
+    user ? `/api/users/${user}/tags` : '/api/user/tags',
+  );
 
   const tagsCombobox = useCombobox();
-  const [value, setValue] = useState(file?.tags?.map((x) => x.id) ?? []);
+
+  const [value, setValue] = useState<string[]>(() => file?.tags?.map((x) => x.id) ?? []);
+
   const handleValueSelect = (val: string) => {
     setValue((current) => (current.includes(val) ? current.filter((v) => v !== val) : [...current, val]));
   };
@@ -167,14 +180,6 @@ export default function FileModal({
 
   const values = value.map((tag) => <TagPill key={tag} tag={tags?.find((t) => t.id === tag) || null} />);
 
-  useEffect(() => {
-    if (file) {
-      setValue(file.tags?.map((x) => x.id) ?? []);
-    } else {
-      setValue([]);
-    }
-  }, [file]);
-
   return (
     <>
       <EditFileDetailsModal open={editFileOpen} onClose={() => setEditFileOpen(false)} file={file!} />
@@ -234,15 +239,15 @@ export default function FileModal({
                   </Title>
                   <Combobox
                     zIndex={90000}
+                    withinPortal={false}
                     store={tagsCombobox}
                     onOptionSubmit={handleValueSelect}
-                    withinPortal={false}
                   >
                     <Combobox.DropdownTarget>
                       <PillsInput
                         onBlur={() => triggerSave()}
                         pointer
-                        onClick={() => tagsCombobox.toggleDropdown()}
+                        onClick={() => tagsCombobox.openDropdown()}
                       >
                         <Pill.Group>
                           {values.length > 0 ? (
@@ -254,9 +259,14 @@ export default function FileModal({
                           <Combobox.EventsTarget>
                             <PillsInput.Field
                               type='hidden'
+                              onFocus={() => tagsCombobox.openDropdown()}
                               onBlur={() => tagsCombobox.closeDropdown()}
                               onKeyDown={(event) => {
-                                if (event.key === 'Backspace') {
+                                if (
+                                  event.key === 'Backspace' &&
+                                  value.length > 0 &&
+                                  event.currentTarget.value === ''
+                                ) {
                                   event.preventDefault();
                                   handleValueRemove(value[value.length - 1]);
                                 }
@@ -285,9 +295,7 @@ export default function FileModal({
                             </Combobox.Option>
                           ))
                         ) : (
-                          <Combobox.Option value='no-tags' disabled>
-                            No tags found, create one outside of this menu.
-                          </Combobox.Option>
+                          <Combobox.Empty>No tags found, create one outside of this menu.</Combobox.Empty>
                         )}
                       </Combobox.Options>
                     </Combobox.Dropdown>
@@ -310,8 +318,8 @@ export default function FileModal({
                     </Button>
                   ) : (
                     <Combobox
-                      store={folderCombobox}
                       withinPortal={false}
+                      store={folderCombobox}
                       onOptionSubmit={(value) => handleAdd(value)}
                     >
                       <Combobox.Target>
@@ -323,11 +331,17 @@ export default function FileModal({
                             folderCombobox.updateSelectedOptionIndex();
                             setSearch(event.currentTarget.value);
                           }}
-                          onClick={() => folderCombobox.openDropdown()}
-                          onFocus={() => folderCombobox.openDropdown()}
+                          onClick={() => {
+                            folderCombobox.openDropdown();
+                            setSearch('');
+                          }}
+                          onFocus={() => {
+                            folderCombobox.openDropdown();
+                            setSearch('');
+                          }}
                           onBlur={() => {
                             folderCombobox.closeDropdown();
-                            setSearch(search || '');
+                            setSearch('');
                           }}
                           placeholder='Add to folder...'
                           rightSectionPointerEvents='none'
@@ -335,24 +349,18 @@ export default function FileModal({
                       </Combobox.Target>
 
                       <Combobox.Dropdown>
-                        <Combobox.Options>
-                          {folders
-                            ?.filter((f: { name: string }) =>
-                              f.name.toLowerCase().includes(search.toLowerCase().trim()),
-                            )
-                            .map((f: { name: string; id: string }) => (
-                              <Combobox.Option value={f.id} key={f.id}>
-                                {f.name}
-                              </Combobox.Option>
-                            ))}
-
-                          {!folders?.some((f: { name: string }) => f.name === search) &&
-                            search.trim().length > 0 && (
+                        <FolderComboboxOptions
+                          folderOptions={folderOptions}
+                          searchValue={search}
+                          additionalOptions={
+                            !folders?.some((f: { name: string }) => f.name === search) &&
+                            search.trim().length > 0 ? (
                               <Combobox.Option value='$create'>
                                 + Create folder &quot;{search}&quot;
                               </Combobox.Option>
-                            )}
-                        </Combobox.Options>
+                            ) : null
+                          }
+                        />
                       </Combobox.Dropdown>
                     </Combobox>
                   )}
@@ -398,6 +406,11 @@ export default function FileModal({
                   tooltip='View file in a new tab'
                   color='blue'
                 />
+                <ActionButton
+                  Icon={IconClipboardTypography}
+                  onClick={() => copyFile(file, clipboard, true)}
+                  tooltip='Copy raw file link'
+                />
                 <ActionButton
                   Icon={IconCopy}
                   onClick={() => copyFile(file, clipboard)}

src/components/file/DashboardFile/index.tsx

@@ -6,12 +6,12 @@ import FileModal from './FileModal';
 
 import styles from './index.module.css';
 
-export default function DashboardFile({ file, reduce }: { file: File; reduce?: boolean }) {
+export default function DashboardFile({ file, reduce, id }: { file: File; reduce?: boolean; id?: string }) {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <FileModal open={open} setOpen={setOpen} file={file} reduce={reduce} />
+      <FileModal open={open} setOpen={setOpen} file={file} reduce={reduce} user={id} />
       <Card shadow='md' radius='md' p={0} onClick={() => setOpen(true)} className={styles.file}>
         <DashboardFileType key={file.id} file={file} />
       </Card>

src/components/file/DashboardFileType.tsx

@@ -11,11 +11,13 @@ import {
   Text,
 } from '@mantine/core';
 import { Icon, IconFileUnknown, IconPlayerPlay, IconShieldLockFilled } from '@tabler/icons-react';
-import { useEffect, useState, useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { renderMode } from '../pages/upload/renderMode';
+import Asciinema from '../render/Asciinema';
+import Pdf from '../render/Pdf';
 import Render from '../render/Render';
 import fileIcon from './fileIcon';
-import { parseAsStringLiteral, useQueryState } from 'nuqs';
+import { useUserStore } from '@/lib/store/user';
 
 function PlaceholderContent({ text, Icon }: { text: string; Icon: Icon }) {
   return (
@@ -78,15 +80,17 @@ export default function DashboardFileType({
   code?: boolean;
   allowZoom?: boolean;
 }) {
-  const [overrideType] = useQueryState('otype', parseAsStringLiteral(['video', 'audio', 'image', 'text']));
-
+  const user = useUserStore((state) => state.user);
   const disableMediaPreview = useSettingsStore((state) => state.settings.disableMediaPreview);
-
+  const fileRoute = user ? `/api/user/files/${(file as DbFile).id}/raw` : `/raw/${file.name}`;
+  const thumbnailRoute = user
+    ? `/api/user/files/${(file as DbFile).thumbnail?.path}/raw`
+    : `/raw/${(file as DbFile).thumbnail?.path}`;
   const dbFile = 'id' in file;
   const renderIn = useMemo(() => renderMode(file.name.split('.').pop() || ''), [file.name]);
 
   const [fileContent, setFileContent] = useState('');
-  const [type, setType] = useState<string>(file.type.split('/')[0]);
+  const [type, setType] = useState(file.type.split('/')[0]);
 
   const [open, setOpen] = useState(false);
 
@@ -109,7 +113,7 @@ export default function DashboardFileType({
       }
 
       if (file.size > 1 * 1024 * 1024) {
-        const res = await fetch(`/raw/${file.name}${password ? `?pw=${password}` : ''}`, {
+        const res = await fetch(`${fileRoute}${password ? `?pw=${password}` : ''}`, {
           headers: {
             Range: 'bytes=0-' + 1 * 1024 * 1024, // 0 mb to 1 mb
           },
@@ -122,7 +126,7 @@ export default function DashboardFileType({
         return;
       }
 
-      const res = await fetch(`/raw/${file.name}${password ? `?pw=${password}` : ''}`);
+      const res = await fetch(`${fileRoute}${password ? `?pw=${password}` : ''}`);
       if (!res.ok) throw new Error('Failed to fetch file');
       const text = await res.text();
       setFileContent(text);
@@ -135,7 +139,7 @@ export default function DashboardFileType({
     if (code) {
       setType('text');
       getText();
-    } else if (overrideType === 'text' || type === 'text') {
+    } else if (type === 'text') {
       getText();
     } else {
       return;
@@ -167,23 +171,22 @@ export default function DashboardFileType({
       </Paper>
     );
 
-  switch (overrideType || type) {
-    case 'video':
+  const isAsciicast = file.type === 'application/x-asciicast' || file.name.endsWith('.cast');
+
+  switch (true) {
+    case type === 'video':
       return show ? (
         <video
           width='100%'
           autoPlay
           muted
           controls
-          src={dbFile ? `/raw/${file.name}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
+          src={dbFile ? `${fileRoute}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
           style={{ cursor: 'pointer', maxWidth: '85vw', maxHeight: '85vh' }}
         />
       ) : (file as DbFile).thumbnail && dbFile ? (
         <Box pos='relative'>
-          <MantineImage
-            src={`/raw/${(file as DbFile).thumbnail!.path}`}
-            alt={file.name || 'Video thumbnail'}
-          />
+          <MantineImage src={thumbnailRoute} alt={file.name || 'Video thumbnail'} />
 
           <Center
             pos='absolute'
@@ -204,11 +207,12 @@ export default function DashboardFileType({
       ) : (
         <Placeholder text={`Click to play video ${file.name}`} Icon={fileIcon(file.type)} />
       );
-    case 'image':
+
+    case type === 'image':
       return show ? (
         <Center>
           <MantineImage
-            src={dbFile ? `/raw/${file.name}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
+            src={dbFile ? `${fileRoute}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
             alt={file.name || 'Image'}
             style={{
               cursor: allowZoom ? 'zoom-in' : 'default',
@@ -220,9 +224,7 @@ export default function DashboardFileType({
           {allowZoom && open && (
             <FileZoomModal setOpen={setOpen}>
               <MantineImage
-                src={
-                  dbFile ? `/raw/${file.name}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)
-                }
+                src={dbFile ? `${fileRoute}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
                 alt={file.name || 'Image'}
                 style={{
                   maxWidth: '95vw',
@@ -239,23 +241,25 @@ export default function DashboardFileType({
         <MantineImage
           fit='contain'
           mah={400}
-          src={dbFile ? `/raw/${file.name}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
+          src={dbFile ? `${fileRoute}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
           alt={file.name || 'Image'}
         />
       );
-    case 'audio':
+
+    case type === 'audio':
       return show ? (
         <audio
           autoPlay
           muted
           controls
           style={{ width: '100%' }}
-          src={dbFile ? `/raw/${file.name}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
+          src={dbFile ? `${fileRoute}${password ? `?pw=${password}` : ''}` : URL.createObjectURL(file)}
         />
       ) : (
         <Placeholder text={`Click to play audio ${file.name}`} Icon={fileIcon(file.type)} />
       );
-    case 'text':
+
+    case type === 'text':
       return show ? (
         fileContent.trim() === '' ? (
           <LoadingOverlay
@@ -279,6 +283,24 @@ export default function DashboardFileType({
       ) : (
         <Placeholder text={`Click to view text ${file.name}`} Icon={fileIcon(file.type)} />
       );
+
+    case isAsciicast === true:
+      return show && dbFile ? (
+        <Asciinema src={`${fileRoute}${password ? `?pw=${password}` : ''}`} />
+      ) : (
+        <Placeholder
+          text={`Click to download asciinema cast ${file.name}`}
+          Icon={fileIcon('application/x-asciicast')}
+        />
+      );
+
+    case file.type === 'application/pdf':
+      return show && dbFile ? (
+        <Pdf src={`${fileRoute}${password ? `?pw=${password}` : ''}`} />
+      ) : (
+        <Placeholder text={`Click to view PDF ${file.name}`} Icon={fileIcon(file.type)} />
+      );
+
     default:
       if (dbFile && !show)
         return <Placeholder text={`Click to view file ${file.name}`} Icon={fileIcon(file.type)} />;
@@ -287,7 +309,7 @@ export default function DashboardFileType({
         return (
           <Paper withBorder p='xs' style={{ cursor: 'pointer' }}>
             <Placeholder
-              onClick={() => window.open(`/raw/${file.name}${password ? `?pw=${password}` : ''}`)}
+              onClick={() => window.open(`${fileRoute}${password ? `?pw=${password}` : ''}`)}
               text={`Click to view file ${file.name} in a new tab`}
               Icon={fileIcon(file.type)}
             />

src/components/file/actions.tsx

@@ -1,3 +1,4 @@
+import { mutateFolder } from '@/components/pages/folders/actions';
 import { Response } from '@/lib/api/response';
 import type { File } from '@/lib/db/models/file';
 import { Folder } from '@/lib/db/models/folder';
@@ -16,7 +17,7 @@ import {
   IconTrashFilled,
   IconTrashXFilled,
 } from '@tabler/icons-react';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { mutate } from 'swr';
 
 export function viewFile(file: File) {
@@ -27,17 +28,21 @@ export function downloadFile(file: File) {
   window.open(`/raw/${file.name}?download=true`, '_blank');
 }
 
-export function copyFile(file: File, clipboard: ReturnType<typeof useClipboard>) {
+export function copyFile(file: File, clipboard: ReturnType<typeof useClipboard>, raw: boolean = false) {
   const domain = `${window.location.protocol}//${window.location.host}`;
 
-  const url = file.url ? `${domain}${file.url}` : `${domain}/view/${file.name}`;
+  const url = raw
+    ? `${domain}/raw/${file.name}`
+    : file.url
+      ? `${domain}${file.url}`
+      : `${domain}/view/${file.name}`;
 
   clipboard.copy(url);
 
   notifications.show({
     title: 'Copied link',
     message: (
-      <Anchor component={Link} href={url}>
+      <Anchor component={Link} to={url}>
         {url}
       </Anchor>
     ),
@@ -106,32 +111,33 @@ export async function favoriteFile(file: File) {
   mutateFiles();
 }
 
-export function createFolderAndAdd(file: File, folderName: string | null) {
-  fetchApi<Extract<Response['/api/user/folders'], Folder>>('/api/user/folders', 'POST', {
-    name: folderName,
-    files: [file.id],
-  }).then(({ data, error }) => {
-    if (error) {
-      notifications.show({
-        title: 'Error while creating folder',
-        message: error.error,
-        color: 'red',
-        icon: <IconFolderOff size='1rem' />,
-      });
-    } else {
-      notifications.show({
-        title: 'Folder created',
-        message: `${data!.name} has been created with ${file.name}`,
-        color: 'green',
-        icon: <IconFolderPlus size='1rem' />,
-      });
-    }
-  });
+export async function createFolderAndAdd(file: File, folderName: string | null) {
+  const { data, error } = await fetchApi<Extract<Response['/api/user/folders'], Folder>>(
+    '/api/user/folders',
+    'POST',
+    {
+      name: folderName,
+      files: [file.id],
+    },
+  );
+  if (error) {
+    notifications.show({
+      title: 'Error while creating folder',
+      message: error.error,
+      color: 'red',
+      icon: <IconFolderOff size='1rem' />,
+    });
+  } else {
+    notifications.show({
+      title: 'Folder created',
+      message: `${data!.name} has been created with ${file.name}`,
+      color: 'green',
+      icon: <IconFolderPlus size='1rem' />,
+    });
+  }
 
-  mutateFolders();
+  mutateFolder();
   mutateFiles();
-
-  return undefined;
 }
 
 export async function removeFromFolder(file: File) {
@@ -160,7 +166,7 @@ export async function removeFromFolder(file: File) {
     });
   }
 
-  mutateFolders();
+  mutateFolder();
   mutateFiles();
 }
 
@@ -191,7 +197,7 @@ export async function addToFolder(file: File, folderId: string | null) {
     });
   }
 
-  mutateFolders();
+  mutateFolder();
   mutateFiles();
 }
 
@@ -223,7 +229,7 @@ export async function addMultipleToFolder(files: File[], folderId: string | null
     });
   }
 
-  mutateFolders();
+  mutateFolder();
   mutateFiles();
 }
 
@@ -231,8 +237,3 @@ export function mutateFiles() {
   mutate('/api/user/recent');
   mutate((key) => (key as Record<any, any>)?.key === '/api/user/files'); // paged files
 }
-
-export function mutateFolders() {
-  mutate('/api/user/folders');
-  mutate('/api/user/folders?noincl=true');
-}

src/components/file/fileIcon.tsx

@@ -16,6 +16,7 @@ import {
   IconFileTypeHtml,
   IconFileTypeJs,
   IconFileTypeJsx,
+  IconFileTypePdf,
   IconFileTypePhp,
   IconFileTypePpt,
   IconFileTypeRs,
@@ -49,7 +50,7 @@ const icons: Record<string, Icon> = {
   'application/x-gzip': IconFileZip,
 
   // common text/document files that are not detected by the 'text' type
-  'application/pdf': IconFileText,
+  'application/pdf': IconFileTypePdf,
   'application/msword': IconFileTypeDocx,
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document': IconFileTypeDocx,
   'application/vnd.ms-excel': IconFileTypeXls,
@@ -67,6 +68,7 @@ const icons: Record<string, Icon> = {
   'text/javascript': IconFileTypeJs,
   'application/json': IconBracketsContain,
   'text/xml': IconFileTypeXml,
+  'application/x-asciicast': IconTerminal2,
 
   // zipline text uploads
   'text/x-zipline-html': IconFileTypeHtml,

src/components/folders/FolderComboboxOptions.tsx

@@ -0,0 +1,28 @@
+import { FolderHierarchyItem } from '@/lib/folderHierarchy';
+import { Combobox, Text } from '@mantine/core';
+
+export default function FolderComboboxOptions({
+  folderOptions,
+  searchValue,
+  additionalOptions,
+}: {
+  folderOptions: FolderHierarchyItem[];
+  searchValue: string;
+  additionalOptions?: React.ReactNode;
+}) {
+  return (
+    <Combobox.Options>
+      {additionalOptions}
+      {folderOptions
+        .filter((f) => f.path.toLowerCase().includes(searchValue.toLowerCase().trim()))
+        .map((f) => (
+          <Combobox.Option value={f.id} key={f.id}>
+            <Text size='sm' style={{ paddingLeft: f.depth * 12 }}>
+              {f.depth > 0 ? '└ ' : ''}
+              {f.name}
+            </Text>
+          </Combobox.Option>
+        ))}
+    </Combobox.Options>
+  );
+}

src/components/pages/dashboard/index.tsx

@@ -1,21 +1,31 @@
+import { useConfig } from '@/components/ConfigProvider';
 import Stat from '@/components/Stat';
 import type { Response } from '@/lib/api/response';
 import { bytes } from '@/lib/bytes';
 import useLogin from '@/lib/hooks/useLogin';
-import { Paper, ScrollArea, SimpleGrid, Skeleton, Table, Text, Title } from '@mantine/core';
-import { IconDeviceSdCard, IconEyeFilled, IconFiles, IconLink, IconStarFilled } from '@tabler/icons-react';
-import dynamic from 'next/dynamic';
+import { isAdministrator } from '@/lib/role';
+import { Button, Group, Paper, ScrollArea, SimpleGrid, Skeleton, Table, Text, Title } from '@mantine/core';
+import {
+  IconDeviceSdCard,
+  IconEyeFilled,
+  IconFiles,
+  IconGraphFilled,
+  IconLink,
+  IconStarFilled,
+} from '@tabler/icons-react';
+import { lazy, Suspense } from 'react';
+import { Link } from 'react-router-dom';
 import useSWR from 'swr';
 
-const DashboardFile = dynamic(() => import('@/components/file/DashboardFile'), {
-  loading: () => <Skeleton height={350} animate />,
-});
+const DashboardFile = lazy(() => import('@/components/file/DashboardFile'));
 
 export default function DashboardHome() {
   const { user } = useLogin();
   const { data: recent, isLoading: recentLoading } = useSWR<Response['/api/user/recent']>('/api/user/recent');
   const { data: stats, isLoading: statsLoading } = useSWR<Response['/api/user/stats']>('/api/user/stats');
 
+  const config = useConfig();
+
   return (
     <>
       <Title>
@@ -50,9 +60,18 @@ export default function DashboardHome() {
         </Text>
       ) : null}
 
-      <Title order={2} mt='md' mb='xs'>
-        Recent files
-      </Title>
+      <Group mt='md' mb='xs' style={{ alignItems: 'center' }}>
+        <Title order={2}>Recent files</Title>
+        <Button
+          variant='outline'
+          size='compact-xs'
+          component={Link}
+          to='/dashboard/files'
+          leftSection={<IconFiles size='1rem' />}
+        >
+          View all files
+        </Button>
+      </Group>
 
       {recentLoading ? (
         <SimpleGrid cols={{ base: 1, md: 2, lg: 3 }} spacing={{ base: 'sm', md: 'md' }}>
@@ -63,7 +82,9 @@ export default function DashboardHome() {
       ) : recent?.length !== 0 ? (
         <SimpleGrid cols={{ base: 1, md: 2, lg: 3 }} spacing={{ base: 'sm', md: 'md' }}>
           {recent!.map((file, i) => (
-            <DashboardFile key={i} file={file} />
+            <Suspense fallback={<Skeleton height={350} animate />} key={i}>
+              <DashboardFile file={file} />
+            </Suspense>
           ))}
         </SimpleGrid>
       ) : (
@@ -72,9 +93,21 @@ export default function DashboardHome() {
         </Text>
       )}
 
-      <Title order={2} mt='md'>
-        Stats
-      </Title>
+      <Group mt='md' style={{ alignItems: 'center' }}>
+        <Title order={2}>Stats</Title>
+        {(!config.features?.metrics?.adminOnly || isAdministrator(user?.role)) && (
+          <Button
+            variant='outline'
+            size='compact-xs'
+            component={Link}
+            to='/dashboard/metrics'
+            leftSection={<IconGraphFilled size='1rem' />}
+          >
+            View instance metrics
+          </Button>
+        )}
+      </Group>
+
       <Text size='sm' c='dimmed' mb='xs'>
         These statistics are based on your uploads only.
       </Text>

src/components/pages/files/PendingFilesButton.tsx

@@ -1,125 +0,0 @@
-import { Response } from '@/lib/api/response';
-import { IncompleteFile } from '@/lib/db/models/incompleteFile';
-import { fetchApi } from '@/lib/fetchApi';
-import { ActionIcon, Badge, Button, Card, Group, Modal, Paper, Stack, Text, Tooltip } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
-import { IncompleteFileStatus } from '../../../../generated/client';
-import { IconFileDots, IconTrashFilled } from '@tabler/icons-react';
-import { parseAsBoolean, useQueryState } from 'nuqs';
-import { ReactNode } from 'react';
-import useSWR from 'swr';
-
-const badgeMap: Record<IncompleteFileStatus, ReactNode> = {
-  PENDING: (
-    <Badge variant='light' color='gray'>
-      Pending
-    </Badge>
-  ),
-  PROCESSING: (
-    <Badge variant='light' color='yellow'>
-      Processing
-    </Badge>
-  ),
-  COMPLETE: (
-    <Badge variant='light' color='green'>
-      Complete
-    </Badge>
-  ),
-  FAILED: (
-    <Badge variant='light' color='red'>
-      Failed
-    </Badge>
-  ),
-};
-
-export default function PendingFilesButton() {
-  const [open, setOpen] = useQueryState('popen', parseAsBoolean.withDefault(false));
-
-  const { data: incompleteFiles, mutate } = useSWR<
-    Extract<IncompleteFile[], Response['/api/user/files/incomplete']>
-  >('/api/user/files/incomplete');
-
-  const handleDelete = async (incompleteFile: IncompleteFile) => {
-    const { error } = await fetchApi<Response['/api/user/files/incomplete']>(
-      '/api/user/files/incomplete',
-      'DELETE',
-      {
-        id: [incompleteFile.id],
-      },
-    );
-
-    if (error) {
-      showNotification({
-        title: 'Error',
-        message: `Failed to delete pending file: ${error.error}`,
-        color: 'red',
-        icon: <IconFileDots size='1rem' />,
-      });
-    } else {
-      showNotification({
-        message: 'Cleared Pending File!',
-        color: 'green',
-        icon: <IconTrashFilled size='1rem' />,
-      });
-    }
-
-    mutate();
-  };
-
-  return (
-    <>
-      <Modal opened={open} onClose={() => setOpen(false)} title='Pending Files'>
-        <Stack gap='xs'>
-          {incompleteFiles?.map((incompleteFile) => (
-            <Card key={incompleteFile.id} withBorder>
-              <Group justify='space-between'>
-                <Text fw='bolder'>{incompleteFile.metadata.file.filename}</Text>
-                {badgeMap[incompleteFile.status]}
-              </Group>
-
-              <Group justify='space-between'>
-                <Text size='xs' c='dimmed' fw='bold'>
-                  {incompleteFile.metadata.file.type}
-                </Text>
-
-                <Text size='xs' c='dimmed'>
-                  {incompleteFile.chunksComplete} / {incompleteFile.chunksTotal} processed
-                </Text>
-              </Group>
-
-              <Text size='xs' c='dimmed'>
-                {incompleteFile.id}
-              </Text>
-
-              <Group justify='space-between'>
-                <Button
-                  fullWidth
-                  size='compact-sm'
-                  mt='xs'
-                  color='red'
-                  variant='light'
-                  onClick={() => handleDelete(incompleteFile)}
-                  leftSection={<IconTrashFilled size='1rem' />}
-                >
-                  Clear
-                </Button>
-              </Group>
-            </Card>
-          ))}
-
-          {incompleteFiles?.length === 0 && (
-            <Paper withBorder px='sm' py='xs'>
-              No pending files
-            </Paper>
-          )}
-        </Stack>
-      </Modal>
-
-      <Tooltip label='View pending files'>
-        <ActionIcon variant='outline' onClick={() => setOpen(true)}>
-          <IconFileDots size='1rem' />
-        </ActionIcon>
-      </Tooltip>
-    </>
-  );
-}

src/components/pages/files/PendingFilesModal.tsx

@@ -0,0 +1,122 @@
+import { Response } from '@/lib/api/response';
+import { IncompleteFile } from '@/lib/db/models/incompleteFile';
+import { fetchApi } from '@/lib/fetchApi';
+import { UpdateFn } from '@/lib/hooks/useObjectState';
+import { IncompleteFileStatus } from '@/prisma/client';
+import { Badge, Button, Card, Group, Modal, Paper, Stack, Text } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { IconFileDots, IconTrashFilled } from '@tabler/icons-react';
+import { ReactNode } from 'react';
+import useSWR from 'swr';
+import { DashboardFilesModals } from '.';
+
+const badgeMap: Record<IncompleteFileStatus, ReactNode> = {
+  PENDING: (
+    <Badge variant='light' color='gray'>
+      Pending
+    </Badge>
+  ),
+  PROCESSING: (
+    <Badge variant='light' color='yellow'>
+      Processing
+    </Badge>
+  ),
+  COMPLETE: (
+    <Badge variant='light' color='green'>
+      Complete
+    </Badge>
+  ),
+  FAILED: (
+    <Badge variant='light' color='red'>
+      Failed
+    </Badge>
+  ),
+};
+
+export default function PendingFilesModal({
+  modals,
+  setModals,
+}: {
+  modals: DashboardFilesModals;
+  setModals: UpdateFn<DashboardFilesModals>;
+}) {
+  const { data: incompleteFiles, mutate } = useSWR<
+    Extract<IncompleteFile[], Response['/api/user/files/incomplete']>
+  >('/api/user/files/incomplete');
+
+  const handleDelete = async (incompleteFile: IncompleteFile) => {
+    const { error } = await fetchApi<Response['/api/user/files/incomplete']>(
+      '/api/user/files/incomplete',
+      'DELETE',
+      {
+        id: [incompleteFile.id],
+      },
+    );
+
+    if (error) {
+      showNotification({
+        title: 'Error',
+        message: `Failed to delete pending file: ${error.error}`,
+        color: 'red',
+        icon: <IconFileDots size='1rem' />,
+      });
+    } else {
+      showNotification({
+        message: 'Cleared Pending File!',
+        color: 'green',
+        icon: <IconTrashFilled size='1rem' />,
+      });
+    }
+
+    mutate();
+  };
+
+  return (
+    <Modal opened={modals.pending} onClose={() => setModals('pending', false)}>
+      <Stack gap='xs'>
+        {incompleteFiles?.map((incompleteFile) => (
+          <Card key={incompleteFile.id} withBorder>
+            <Group justify='space-between'>
+              <Text fw='bolder'>{incompleteFile.metadata.file.filename}</Text>
+              {badgeMap[incompleteFile.status]}
+            </Group>
+
+            <Group justify='space-between'>
+              <Text size='xs' c='dimmed' fw='bold'>
+                {incompleteFile.metadata.file.type}
+              </Text>
+
+              <Text size='xs' c='dimmed'>
+                {incompleteFile.chunksComplete} / {incompleteFile.chunksTotal} processed
+              </Text>
+            </Group>
+
+            <Text size='xs' c='dimmed'>
+              {incompleteFile.id}
+            </Text>
+
+            <Group justify='space-between'>
+              <Button
+                fullWidth
+                size='compact-sm'
+                mt='xs'
+                color='red'
+                variant='light'
+                onClick={() => handleDelete(incompleteFile)}
+                leftSection={<IconTrashFilled size='1rem' />}
+              >
+                Clear
+              </Button>
+            </Group>
+          </Card>
+        ))}
+
+        {incompleteFiles?.length === 0 && (
+          <Paper withBorder px='sm' py='xs'>
+            No pending files
+          </Paper>
+        )}
+      </Stack>
+    </Modal>
+  );
+}

src/components/pages/files/TableEditModal.tsx

@@ -0,0 +1,99 @@
+import { FieldSettings, useFileTableSettingsStore } from '@/lib/store/fileTableSettings';
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button, Checkbox, Group, Modal, Paper, Text } from '@mantine/core';
+import { IconGripVertical } from '@tabler/icons-react';
+import { useShallow } from 'zustand/shallow';
+
+export const NAMES = {
+  name: 'Name',
+  originalName: 'Original Name',
+  tags: 'Tags',
+  type: 'Type',
+  size: 'Size',
+  createdAt: 'Created At',
+  favorite: 'Favorite',
+  views: 'Views',
+};
+
+function SortableTableField({ item }: { item: FieldSettings }) {
+  const setVisible = useFileTableSettingsStore((state) => state.setVisible);
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: item.field,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    cursor: 'grab',
+    width: '100%',
+  };
+
+  return (
+    <Paper withBorder p='xs' ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <Group gap='xs'>
+        <IconGripVertical size='1rem' />
+
+        <Checkbox checked={item.visible} onChange={() => setVisible(item.field, !item.visible)} />
+
+        <Text>{NAMES[item.field]}</Text>
+      </Group>
+    </Paper>
+  );
+}
+
+export default function TableEditModal({ opened, onClose }: { opened: boolean; onClose: () => void }) {
+  const [fields, setIndex, reset] = useFileTableSettingsStore(
+    useShallow((state) => [state.fields, state.setIndex, state.reset]),
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      const newIndex = fields.findIndex((item) => item.field === over?.id);
+
+      setIndex(active.id as FieldSettings['field'], newIndex);
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title='Table Options' centered>
+      <Text mb='md' size='sm' c='dimmed'>
+        Select and drag fields below to make them appear/disappear/reorder in the file table view.
+      </Text>
+
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={fields.map((item) => item.field)} strategy={verticalListSortingStrategy}>
+          {fields.map((item, index) => (
+            <div
+              key={index}
+              style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}
+            >
+              <SortableTableField item={item} />
+            </div>
+          ))}
+        </SortableContext>
+      </DndContext>
+
+      <Button fullWidth color='red' onClick={() => reset()} variant='light' mt='md'>
+        Reset to Default
+      </Button>
+    </Modal>
+  );
+}

src/components/pages/files/bulk.tsx

@@ -69,20 +69,23 @@ export async function bulkDelete(ids: string[], setSelectedFiles: (files: File[]
   });
 }
 
-export async function bulkFavorite(ids: string[]) {
+export async function bulkFavorite(ids: string[], favorite: boolean) {
+  const text = favorite ? 'favorite' : 'unfavorite';
+  const textcaps = favorite ? 'Favorite' : 'Unfavorite';
+
   modals.openConfirmModal({
     centered: true,
-    title: `Favorite ${ids.length} file${ids.length === 1 ? '' : 's'}?`,
-    children: `You are about to favorite ${ids.length} file${ids.length === 1 ? '' : 's'}.`,
+    title: `${textcaps} ${ids.length} file${ids.length === 1 ? '' : 's'}?`,
+    children: `You are about to ${text} ${ids.length} file${ids.length === 1 ? '' : 's'}.`,
     labels: {
       cancel: 'Cancel',
-      confirm: 'Favorite',
+      confirm: `${textcaps}`,
     },
     confirmProps: { color: 'yellow' },
     onConfirm: async () => {
       notifications.show({
-        title: 'Favoriting files',
-        message: `Favoriting ${ids.length} file${ids.length === 1 ? '' : 's'}`,
+        title: `${textcaps}ing files`,
+        message: `${textcaps}ing ${ids.length} file${ids.length === 1 ? '' : 's'}`,
         color: 'yellow',
         loading: true,
         id: 'bulk-favorite',
@@ -96,13 +99,13 @@ export async function bulkFavorite(ids: string[]) {
         {
           files: ids,
 
-          favorite: true,
+          favorite,
         },
       );
 
       if (error) {
         notifications.update({
-          title: 'Error while favoriting files',
+          title: 'Error while modifying files',
           message: error.error,
           color: 'red',
           icon: <IconStarsOff size='1rem' />,
@@ -112,8 +115,8 @@ export async function bulkFavorite(ids: string[]) {
         });
       } else if (data) {
         notifications.update({
-          title: 'Favorited files',
-          message: `Favorited ${data.count} file${ids.length === 1 ? '' : 's'}`,
+          title: `${textcaps}d files`,
+          message: `${textcaps}d ${data.count} file${ids.length === 1 ? '' : 's'}`,
           color: 'yellow',
           icon: <IconStarsFilled size='1rem' />,
           id: 'bulk-favorite',

src/components/pages/files/index.tsx

@@ -1,32 +1,92 @@
 import GridTableSwitcher from '@/components/GridTableSwitcher';
+import useObjectState from '@/lib/hooks/useObjectState';
 import { useViewStore } from '@/lib/store/view';
-import { ActionIcon, Group, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Group, Menu, Title, Tooltip } from '@mantine/core';
+import {
+  IconDots,
+  IconFileDots,
+  IconFileUpload,
+  IconGridPatternFilled,
+  IconTableOptions,
+  IconTags,
+} from '@tabler/icons-react';
+import { Link } from 'react-router-dom';
+import PendingFilesModal from './PendingFilesModal';
+import TagsModal from './tags/TagsModal';
 import FavoriteFiles from './views/FavoriteFiles';
-import FileTable from './views/FileTable';
-import Files from './views/Files';
-import TagsButton from './tags/TagsButton';
-import PendingFilesButton from './PendingFilesButton';
-import Link from 'next/link';
-import { IconFileUpload } from '@tabler/icons-react';
+import Files from './views/FilesGridView';
+import FileTable from './views/FilesTableView';
 
-export default function DashbaordFiles() {
+export type DashboardFilesModals = {
+  table: boolean;
+  idSearch: boolean;
+  tags: boolean;
+  pending: boolean;
+};
+
+export default function DashboardFiles() {
   const view = useViewStore((state) => state.files);
 
+  const [modals, setModals] = useObjectState<DashboardFilesModals>({
+    table: false,
+    idSearch: false,
+    tags: false,
+    pending: false,
+  });
+
   return (
     <>
+      <TagsModal modals={modals} setModals={setModals} />
+      <PendingFilesModal modals={modals} setModals={setModals} />
+
       <Group>
         <Title>Files</Title>
 
         <Tooltip label='Upload a file'>
-          <Link href='/dashboard/upload/file'>
+          <Link to='/dashboard/upload/file'>
             <ActionIcon variant='outline'>
               <IconFileUpload size='1rem' />
             </ActionIcon>
           </Link>
         </Tooltip>
 
-        <TagsButton />
-        <PendingFilesButton />
+        <Menu>
+          <Menu.Target>
+            <Tooltip label='More actions'>
+              <ActionIcon variant='outline'>
+                <IconDots size='1rem' />
+              </ActionIcon>
+            </Tooltip>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item leftSection={<IconTags size='1rem' />} onClick={() => setModals('tags', !modals.tags)}>
+              Manage Tags
+            </Menu.Item>
+            <Menu.Item
+              leftSection={<IconFileDots size='1rem' />}
+              onClick={() => setModals('pending', !modals.pending)}
+            >
+              View Pending Files
+            </Menu.Item>
+            {view === 'table' && (
+              <>
+                <Menu.Label>Table Options</Menu.Label>
+                <Menu.Item
+                  leftSection={<IconGridPatternFilled size='1rem' />}
+                  onClick={() => setModals('idSearch', !modals.idSearch)}
+                >
+                  Search by ID
+                </Menu.Item>
+                <Menu.Item
+                  leftSection={<IconTableOptions size='1rem' />}
+                  onClick={() => setModals('table', !modals.table)}
+                >
+                  Table Options
+                </Menu.Item>
+              </>
+            )}
+          </Menu.Dropdown>
+        </Menu>
 
         <GridTableSwitcher type='files' />
       </Group>
@@ -38,7 +98,7 @@ export default function DashbaordFiles() {
           <Files />
         </>
       ) : (
-        <FileTable />
+        <FileTable modals={modals} setModals={setModals} />
       )}
     </>
   );