feat(v3.6.0): version

* feat: oauth reform for potential improvements

* fix: update avatars with new pfp

* fix: remove redundant include

* feat: v3.6.0-rc4

Co-authored-by: dicedtomato <diced@users.noreply.github.com>

* fix: remove console log

Co-authored-by: dicedtomato <diced@users.noreply.github.com>

.babelrc

@@ -1,20 +0,0 @@
-{
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    [
-      "babel-plugin-transform-imports",
-      {
-        "@material-ui/core": {
-          "transform": "@material-ui/core/${member}",
-          "preventFullImport": true
-        },
-        "@material-ui/icons": {
-          "transform": "@material-ui/icons/${member}",
-          "preventFullImport": true
-        }
-      }
-    ]
-  ]
-}

.dockerignore

@@ -0,0 +1,7 @@
+node_modules/
+.next/
+uploads/
+.git/
+.yarn/*
+!.yarn/releases
+!.yarn/plugins

.env.local.example

@@ -0,0 +1,47 @@
+# every field in here is optional except, CORE_SECRET and CORE_DATABASE_URL.
+# if CORE_SECRET is still "changethis" then zipline will exit and tell you to change it.
+
+# if using s3/swift make sure to comment out the other datasources
+
+CORE_HTTPS=true
+CORE_SECRET="changethis"
+CORE_HOST=0.0.0.0
+CORE_PORT=3000
+CORE_DATABASE_URL="postgres://postgres:postgres@localhost/zip10"
+CORE_LOGGER=false
+CORE_STATS_INTERVAL=1800
+
+# default
+DATASOURCE_TYPE=local
+DATASOURCE_LOCAL_DIRECTORY=./uploads
+
+# or you can choose to use s3
+DATASOURCE_TYPE=s3
+DATASOURCE_S3_ACCESS_KEY_ID=key
+DATASOURCE_S3_SECRET_ACCESS_KEY=secret
+DATASOURCE_S3_BUCKET=bucket
+DATASOURCE_S3_ENDPOINT=s3.amazonaws.com
+DATASOURCE_S3_REGION=us-west-2
+DATASOURCE_S3_FORCE_S3_PATH=false
+DATASOURCE_S3_USE_SSL=false
+
+# or you can use swift
+DATASOURCE_TYPE=swift
+DATASOURCE_SWIFT_CONTAINER=container
+DATASOURCE_SWIFT_AUTH_ENDPOINT="https://something/v3"
+DATASOURCE_SWIFT_USERNAME=username
+DATASOURCE_SWIFT_PASSWORD=password
+DATASOURCE_SWIFT_PROJECT_ID=project_id
+DATASOURCE_SWIFT_DOMAIN_ID=domain_id
+
+UPLOADER_ROUTE=/u
+UPLOADER_LENGTH=6
+UPLOADER_ADMIN_LIMIT=104900000
+UPLOADER_USER_LIMIT=104900000
+UPLOADER_DISABLED_EXTENSIONS=someext
+
+URLS_ROUTE=/go
+URLS_LENGTH=6
+
+RATELIMIT_USER = 5
+RATELIMIT_ADMIN = 3

.eslintrc.js

@@ -1,24 +0,0 @@
-module.exports = {
-  'extends': ['next', 'next/core-web-vitals'],
-  'rules': {
-    'indent': ['error', 2],
-    'linebreak-style': ['error', 'unix'],
-    'quotes': ['error', 'single'],
-    'semi': ['error', 'always'],
-    'jsx-quotes': ['error', 'prefer-single'],
-    'react/prop-types': 'off',
-    'react-hooks/rules-of-hooks': 'off',
-    'react-hooks/exhaustive-deps': 'off',
-    'react/jsx-uses-react': 'warn',
-    'react/jsx-uses-vars': 'warn',
-    'react/no-danger-with-children': 'warn',
-    'react/no-deprecated': 'warn',
-    'react/no-direct-mutation-state': 'warn',
-    'react/no-is-mounted': 'warn',
-    'react/no-typos': 'error',
-    'react/react-in-jsx-scope': 'error',
-    'react/require-render-return': 'error',
-    'react/style-prop-object': 'warn',
-    '@next/next/no-img-element': 'off'
-  }
-};

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "extends": ["next", "next/core-web-vitals", "plugin:prettier/recommended"],
+  "rules": {
+    "linebreak-style": ["error", "unix"],
+    "quotes": [
+      "error",
+      "single",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "semi": ["error", "always"],
+    "comma-dangle": ["error", "always-multiline"],
+    "jsx-quotes": ["error", "prefer-single"],
+    "indent": "off",
+    "react/prop-types": "off",
+    "react-hooks/rules-of-hooks": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "react/jsx-uses-react": "warn",
+    "react/jsx-uses-vars": "warn",
+    "react/no-danger-with-children": "warn",
+    "react/no-deprecated": "warn",
+    "react/no-direct-mutation-state": "warn",
+    "react/no-is-mounted": "warn",
+    "react/no-typos": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/require-render-return": "error",
+    "react/style-prop-object": "warn",
+    "@next/next/no-img-element": "off",
+    "jsx-a11y/alt-text": "off",
+    "react/display-name": "off"
+  }
+}

.gitattributes

@@ -0,0 +1,14 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text eol=lf
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.c text
+*.h text
+
+# Declare files that will always have CRLF line endings on checkout.
+*.sln text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary

.github/ISSUE_TEMPLATE/bug.yml

@@ -0,0 +1,45 @@
+name: Bug
+description: File a bug report
+title: 'Bug: '
+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!'
+    validations:
+      required: true
+  - type: dropdown
+    id: version
+    attributes:
+      label: Version
+      description: What version of Zipline are you using?
+      options:
+        - upstream
+        - latest
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browser(s) are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+  - type: textarea
+    id: zipline-logs
+    attributes:
+      label: Zipline Logs
+      description: Please copy and paste any relevant log output.
+      render: shell
+  - type: textarea
+    id: browser-logs
+    attributes:
+      label: Browser Logs
+      description: Please copy and paste any relevant log output.
+      render: shell

.github/ISSUE_TEMPLATE/suggest.yml

@@ -0,0 +1,12 @@
+name: Suggestion
+description: Suggest a feature to be added
+title: 'Suggestion: '
+labels: ['suggestion']
+body:
+  - type: textarea
+    id: suggest
+    attributes:
+      label: Suggestion
+      description: Be as descriptive as possible!
+      placeholder: What do you want in Zipline?
+      value: A suggestion

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: 'CI: Build'
+name: 'Build'
 
 on:
   push:
@@ -11,24 +11,28 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '18.x'
+      
       - name: 'Restore dependency cache'
         id: cache-restore
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
-          path: node_modules
-          key: ${{ runner.os }}-node${{ matrix.node }}-${{ hashFiles('**/yarn.lock') }}
+          path: |
+            node_modules
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-node${{ matrix.node }}-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          restore-keys: |
+            ${{ runner.os }}-node${{ matrix.node }}-${{ hashFiles('**/yarn.lock') }}-
+
 
-      - name: Create mock config
-        run: echo -e "[uploader]\nroute = '/u'\nembed_route = '/a'\nlength = 6\ndirectory = './uploads'" > config.toml
-      
       - name: Install dependencies
         if: steps.cache-restore.outputs.cache-hit != 'true'
         run: yarn install
-      
+
       - name: Build
         run: yarn build
-      
+        env:
+          ZIPLINE_DOCKER_BUILD: true

.github/workflows/docker-release.yml

@@ -0,0 +1,51 @@
+name: 'Push Release Docker Images'
+
+on:
+  push:
+    tags: 
+      - 'v*.*.*'
+    paths:
+      - 'src/**'
+      - 'server/**'
+      - 'prisma/**'
+      - '.github/**'
+      - 'Dockerfile'
+  workflow_dispatch:
+
+jobs:
+  push_to_ghcr:
+    name: Push Release Image to GitHub Packages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+
+      - name: Get version
+        id: version
+        run: |
+          echo "zipline_version=$(jq .version package.json -r)" >> $GITHUB_OUTPUT
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Github Packages
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build Docker Image
+        uses: docker/build-push-action@v3
+        with:
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: |
+            ghcr.io/diced/zipline:latest
+            ghcr.io/diced/zipline:${{ steps.version.outputs.zipline_version }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.github/workflows/docker.yml

@@ -1,4 +1,4 @@
-name: 'CD: Push Docker Images'
+name: 'Push Docker Images'
 
 on:
   push:
@@ -7,6 +7,8 @@ on:
       - 'src/**'
       - 'server/**'
       - 'prisma/**'
+      - '.github/**'
+      - 'Dockerfile'
   workflow_dispatch:
 
 jobs:
@@ -15,30 +17,34 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - name: Push to GitHub Packages
-        uses: docker/build-push-action@v1
+      - name: Get version
+        id: version
+        run: |
+          echo "zipline_version=$(jq .version package.json -r)" >> $GITHUB_OUTPUT
+
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to Github Packages
+        uses: docker/login-action@v2
         with:
+          registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-          registry: docker.pkg.github.com
-          repository: diced/zipline/zipline
-          dockerfile: Dockerfile
-          tag_with_ref: true
 
-  push_to_dockerhub:
-    name: Push Image to Docker Hub
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v2
-
-      - name: Push to Docker Hub
-        uses: docker/build-push-action@v1
+      - name: Build Docker Image
+        uses: docker/build-push-action@v3
         with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-          repository: diced/zipline
-          dockerfile: Dockerfile
-          tag_with_ref: true
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: |
+            ghcr.io/diced/zipline:trunk
+            ghcr.io/diced/zipline:trunk-${{ steps.version.outputs.zipline_version }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.gitignore

@@ -5,6 +5,11 @@
 /.pnp
 .pnp.js
 
+# yarn
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+
 # testing
 /coverage
 
@@ -18,6 +23,7 @@
 # misc
 .DS_Store
 *.pem
+.idea
 
 # debug
 npm-debug.log*
@@ -36,4 +42,4 @@ yarn-error.log*
 # zipline
 config.toml
 uploads/
-data.db*
+dist/

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn commitlint --edit $1

.nvmrc

@@ -0,0 +1 @@
+18.12.0

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 110
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.tabSize": 2,
+  "files.eol": "\n",
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.yarnrc.yml

@@ -0,0 +1,9 @@
+checksumBehavior: update
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

CONTRIBUTING.md

@@ -0,0 +1,23 @@
+# Contributing
+
+## Bug reports
+
+Create an issue on GitHub, please include the following (if one of them is not applicable to the issue then it's not needed):
+
+- The steps to reproduce the bug
+- Logs of Zipline
+- The version of Zipline
+- Your OS & Browser including server OS
+- What you were expecting to see
+
+## Feature requests
+
+Create an issue on GitHub, please include the following:
+
+- Breif explanation of the feature in the title (very breif please)
+- How it would work (detailed, but optional)
+
+## Pull Requests (contributions to the codebase)
+
+Create a pull request on GitHub. If your PR does not pass the action checks, then please fix the errors. If your PR was submitted before a release, and I have pushed a new release, please make sure to update your PR to reflect any changes, usually this is handled by GitHub.
+Please make sure your code also reflects the style of the rest of the code.

Dockerfile

@@ -1,31 +1,63 @@
-FROM node:16-alpine3.11 AS builder
+FROM ghcr.io/diced/prisma-binaries:4.5.x as prisma
+
+FROM node:alpine3.16 AS deps
+RUN mkdir -p /prisma-engines
 WORKDIR /build
 
+COPY .yarn .yarn
+COPY package.json yarn.lock .yarnrc.yml ./
+
+RUN yarn install --immutable
+
+FROM node:alpine3.16 AS builder
+WORKDIR /build
+
+COPY --from=prisma /prisma-engines /prisma-engines
+ENV PRISMA_QUERY_ENGINE_BINARY=/prisma-engines/query-engine \
+  PRISMA_MIGRATION_ENGINE_BINARY=/prisma-engines/migration-engine \
+  PRISMA_INTROSPECTION_ENGINE_BINARY=/prisma-engines/introspection-engine \
+  PRISMA_FMT_BINARY=/prisma-engines/prisma-fmt \
+  PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
+  PRISMA_CLIENT_ENGINE_TYPE=binary
+
+RUN apk add --no-cache openssl openssl-dev
+
+COPY --from=deps /build/node_modules ./node_modules
 COPY src ./src
-COPY server ./server
-COPY scripts ./scripts
 COPY prisma ./prisma
+COPY .yarn .yarn
+COPY package.json yarn.lock .yarnrc.yml esbuild.config.js next.config.js next-env.d.ts zip-env.d.ts tsconfig.json mimes.json ./
 
-COPY package.json yarn.lock next.config.js next-env.d.ts zip-env.d.ts tsconfig.json ./
-
-RUN yarn install
-
-# create a mock config.toml to spoof next build!
-RUN echo -e "[uploader]\nroute = '/u'\nembed_route = '/a'\nlength = 6\ndirectory = './uploads'" > config.toml
+ENV ZIPLINE_DOCKER_BUILD 1
+ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN yarn build
 
-FROM node:16-alpine3.11 AS runner
+FROM node:alpine3.16 AS runner
 WORKDIR /zipline
 
+COPY --from=prisma /prisma-engines /prisma-engines
+ENV PRISMA_QUERY_ENGINE_BINARY=/prisma-engines/query-engine \
+  PRISMA_MIGRATION_ENGINE_BINARY=/prisma-engines/migration-engine \
+  PRISMA_INTROSPECTION_ENGINE_BINARY=/prisma-engines/introspection-engine \
+  PRISMA_FMT_BINARY=/prisma-engines/prisma-fmt \
+  PRISMA_CLI_QUERY_ENGINE_TYPE=binary \
+  PRISMA_CLIENT_ENGINE_TYPE=binary
+
+RUN apk add --no-cache openssl openssl-dev
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+COPY --from=builder /build/.next ./.next
 COPY --from=builder /build/node_modules ./node_modules
 
+COPY --from=builder /build/next.config.js ./next.config.js
 COPY --from=builder /build/src ./src
-COPY --from=builder /build/server ./server
-COPY --from=builder /build/scripts ./scripts
+COPY --from=builder /build/dist ./dist
 COPY --from=builder /build/prisma ./prisma
-COPY --from=builder /build/.next ./.next
 COPY --from=builder /build/tsconfig.json ./tsconfig.json
 COPY --from=builder /build/package.json ./package.json
+COPY --from=builder /build/mimes.json ./mimes.json
 
-CMD ["node", "server"]
+CMD ["node", "--enable-source-maps", "dist/server"]

Dockerignore

@@ -1,3 +0,0 @@
-prisma/migrations
-node_modules
-.next

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 dicedtomato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,26 +1,147 @@
-<p align="center"><img src="https://raw.githubusercontent.com/diced/zipline/trunk/public/zipline_small.png"/></p>
+<div align="center">
+  <img src="https://raw.githubusercontent.com/diced/zipline/trunk/public/zipline_small.png"/>
 
-![Version](https://img.shields.io/github/package-json/v/diced/zipline)
-![LICENCE](https://img.shields.io/github/license/diced/zipline)
-[![Discord](https://img.shields.io/discord/729771078196527176)](https://discord.gg/EAhCRfGxCF)
-![Stars](https://img.shields.io/github/stars/diced/zipline)
-![GitHub repo size](https://img.shields.io/github/repo-size/diced/zipline)
-![GitHub last commit (branch)](https://img.shields.io/github/last-commit/diced/zipline/trunk)
-<br>
+A ShareX/file upload server that is easy to use, packed with features, and with an easy setup!
 
-# Zipline
+![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)
 
-Fast & lightweight file uploading.
+![Build](https://img.shields.io/github/workflow/status/diced/zipline/Build?logo=github&style=flat)
+[![Docker Image (trunk)](https://img.shields.io/github/workflow/status/diced/zipline/Push%20Docker%20Images?label=Docker%20%28trunk%29&logo=github&style=flat)](https://github.com/diced/zipline/pkgs/container/zipline/?tag=trunk)
+[![Docker Image (release)](https://img.shields.io/github/workflow/status/diced/zipline/Push%20Release%20Docker%20Images?label=Docker%20%28release%29&logo=github&style=flat)](https://github.com/diced/zipline/pkgs/container/zipline/?tag=latest)
 
-# Features
+</div>
+
+## Features
 
 - Configurable
 - Fast
 - Built with Next.js & React
-- Support for **multible database types**
 - Token protected uploading
-- Easy setup instructions on [docs](https://zipline.diced.me)
+- Image uploading
+- Image compression
+- Password Protected Uploads
+- URL shortening
+- Text uploading
+- URL Formats (uuid, dates, random alphanumeric, original name, zws)
+- Discord embeds (OG metadata)
+- Gallery viewer, and multiple file format support
+- Code highlighting
+- Fully customizable Discord webhook notifications
+- OAuth2 registration (Discord and GitHub)
+- User invites
+- File Chunking (for large files)
+- File deletion once it reaches a certain amount of views
+- Easy setup instructions on [docs](https://zipl.vercel.app/) (One command install `docker-compose up -d`)
 
-# Installing
+<details>
+  <summary><h2>Screenshots (click)</h2></summary>
+  
+  View full album at [imgur](https://imgur.com/a/GzyowZ7)
+  
+  ![Login Page](https://i.imgur.com/14Er7qt.png)
+  ![Dashboard](https://i.imgur.com/3JK5bp6.png)
+  ![Files Page](https://i.imgur.com/grIaDs8.png)
+</details>
 
-[See how to install here](https://zipline.diced.me/docs/getting-started)
+# Usage
+
+## Install & run with Docker
+
+This section requires [Docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/install/).
+
+```shell
+git clone https://github.com/diced/zipline
+cd zipline
+
+docker-compose up -d
+```
+
+### After installing
+
+After installing, please edit the `docker-compose.yml` file and find the line that says `SECRET=changethis` and replace `changethis` with a random string.
+Ways you could generate the string could be from a password managers generator, or you could just slam your keyboard and hope for the best.
+
+## Building & running from source
+
+This section requires [nodejs](https://nodejs.org), [yarn](https://yarnpkg.com/) or [npm](https://npmjs.com).
+
+```shell
+git clone https://github.com/diced/zipline
+cd zipline
+
+# npm install
+yarn install
+# npm run build
+yarn build
+# npm start
+yarn start
+```
+
+# NGINX Proxy
+
+This section requires [NGINX](https://nginx.org/).
+
+```nginx
+server {
+  listen 80 default_server;
+  client_max_body_size 100M;
+  server_name <your domain (optional)>;
+  location / {
+    proxy_pass http://localhost:3000;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+}
+```
+
+# Website
+
+The default port is `3000`, once you have accessed it you can see a login screen. The default credentials are "administrator" and "password". Once you login please immediately change the details to something more secure. You can do this by clicking on the top right corner where it says "administrator" with a gear icon and clicking Manage Account.
+
+# ShareX (Windows)
+
+This section requires [ShareX](https://www.getsharex.com/).
+
+After navigating to Zipline, click on the top right corner where it says your username and click Manage Account. Scroll down to see "ShareX Config", select the one you would prefer using. After this you can import the .sxcu into sharex. [More information here](https://zipl.vercel.app/docs/guides/uploaders/sharex)
+
+# Flameshot (Linux)
+
+This section requires [Flameshot](https://www.flameshot.org/), [jq](https://stedolan.github.io/jq/), and [xsel](https://github.com/kfish/xsel).
+
+You can either use the script below, or generate one directly from Zipline (just like how you can generate a ShareX config).
+To upload files using flameshot we will use a script. Replace $TOKEN and $HOST with your own values, you probably know how to do this if you use linux.
+
+```shell
+DATE=$(date '+%h_%Y_%d_%I_%m_%S.png');
+flameshot gui -r > ~/Pictures/$DATE;
+
+curl -H "Content-Type: multipart/form-data" -H "authorization: $TOKEN" -F file=@$1 $HOST/api/upload | jq -r 'files[0].url' | xsel -ib
+```
+
+# Contributing
+
+## Bug reports
+
+Create an issue on GitHub, please include the following (if one of them is not applicable to the issue then it's not needed):
+
+- The steps to reproduce the bug
+- Logs of Zipline
+- The version of Zipline
+- Your OS & Browser including server OS
+- What you were expecting to see
+
+## Feature requests
+
+Create an issue on GitHub, please include the following:
+
+- Breif explanation of the feature in the title (very breif please)
+- How it would work (detailed, but optional)
+
+## Pull Requests (contributions to the codebase)
+
+Create a pull request on GitHub. If your PR does not pass the action checks, then please fix the errors. If your PR was submitted before a release, and I have pushed a new release, please make sure to update your PR to reflect any changes, usually this is handled by GitHub.

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 3.4.8   | :white_check_mark: |
+| < 3     | :x:                |
+| < 2     | :x:                |
+
+## Reporting a Vulnerability
+
+Report a Vulnerability by issuing a bug report, with exact details with how the vulnerability happened, what "exploits" can happen, and possible fixes (optional). Vulnerability reports are treated with high priority and will be resolved most of the time quickly.

commitlint.config.js

@@ -1,53 +0,0 @@
-module.exports = {
-  parserPreset: 'conventional-changelog-conventionalcommits',
-  rules: {
-    'body-leading-blank': [1, 'always'],
-    'body-max-line-length': [2, 'always', 100],
-    'footer-leading-blank': [1, 'always'],
-    'footer-max-line-length': [2, 'always', 100],
-    'header-max-length': [2, 'always', 100],
-    'subject-case': [
-      2,
-      'never',
-      ['sentence-case', 'start-case', 'pascal-case', 'upper-case'],
-    ],
-    'subject-empty': [2, 'never'],
-    'subject-full-stop': [2, 'never', '.'],
-    'type-case': [2, 'always', 'lower-case'],
-    'type-empty': [2, 'never'],
-    'type-enum': [
-      2,
-      'always',
-      [
-        'build',
-        'chore',
-        'ci',
-        'docs',
-        'feat',
-        'fix',
-        'perf',
-        'refactor',
-        'revert',
-        'style',
-        'test',
-      ],
-    ],
-    'scope-enum': [
-      1,
-      'always',
-      [
-        'prisma',
-        'scripts',
-        'server',
-        'pages',
-        'api',
-        'hooks',
-        'components',
-        'middleware',
-        'redux',
-        'themes',
-        'lib'
-      ],
-    ],
-  },
-};

config.example.toml

@@ -1,15 +0,0 @@
-[core]
-secure = true
-secret = 'some secret'
-host = '0.0.0.0'
-port = 3000
-
-[database]
-type = 'psql'
-url = 'postgres://postgres:postgres@postgres/postgres'
-
-[uploader]
-route = '/u'
-embed_route = '/a'
-length = 6
-directory = './uploads'

docker-compose.dev.yml

@@ -0,0 +1,34 @@
+version: '3'
+services:
+  postgres:
+    image: postgres
+    restart: always
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_DATABASE=postgres
+    volumes:
+      - pg_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  zipline:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '3000:3000'
+    restart: unless-stopped
+    env_file:
+      - .env.local
+    volumes:
+      - '$PWD/uploads:/zipline/uploads'
+      - '$PWD/public:/zipline/public'
+    depends_on:
+      - 'postgres'
+
+volumes:
+  pg_data:

docker-compose.yml

@@ -2,11 +2,12 @@ version: '3'
 services:
   postgres:
     image: postgres
-    environment: 
+    restart: always
+    environment:
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
       - POSTGRES_DATABASE=postgres
-    volumes: 
+    volumes:
       - pg_data:/var/lib/postgresql/data
     healthcheck:
       test: ['CMD-SHELL', 'pg_isready -U postgres']
@@ -15,27 +16,22 @@ services:
       retries: 5
 
   zipline:
-    image: diced/zipline:trunk
+    image: ghcr.io/diced/zipline
     ports:
       - '3000:3000'
-    restart: unless-stopped
-    environment: 
-      - SECURE=false
-      - SECRET=changethis
-      - HOST=0.0.0.0
-      - PORT=3000
-      - DATABASE_TYPE=psql
-      - DATABASE_URL=postgresql://postgres:postgres@postgres/postgres/
-      - UPLOADER_ROUTE=/u
-      - UPLOADER_EMBED_ROUTE=/a
-      - UPLOADER_LENGTH=6
-      - UPLOADER_DIRECTORY=./uploads
+    restart: always
+    environment:
+      - CORE_HTTPS=false
+      - CORE_SECRET=changethis
+      - CORE_HOST=0.0.0.0
+      - CORE_PORT=3000
+      - CORE_DATABASE_URL=postgres://postgres:postgres@postgres/postgres
+      - CORE_LOGGER=true
     volumes:
-      - '$PWD/uploads:/zipline/uploads'
-      - '$PWD/prisma:/zipline/prisma'
+      - './uploads:/zipline/uploads'
       - '$PWD/public:/zipline/public'
     depends_on:
       - 'postgres'
 
 volumes:
-  pg_data:
+  pg_data:

esbuild.config.js

@@ -0,0 +1,23 @@
+const esbuild = require('esbuild');
+const { existsSync } = require('fs');
+const { rm } = require('fs/promises');
+const { recursiveReadDir } = require('next/dist/lib/recursive-readdir');
+
+(async () => {
+  if (existsSync('./dist')) {
+    await rm('./dist', { recursive: true });
+  }
+
+  const entryPoints = await recursiveReadDir('./src', /.*\.(ts)$/, /(themes|queries|pages)/);
+
+  await esbuild.build({
+    tsconfig: 'tsconfig.json',
+    outdir: 'dist',
+    platform: 'node',
+    entryPoints,
+    format: 'cjs',
+    resolveExtensions: ['.ts', '.js'],
+    write: true,
+    sourcemap: true,
+  });
+})();

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -1,4 +1,26 @@
+/**
+ * @type {import('next').NextConfig}
+ **/
 module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/dashboard',
+        permanent: true,
+      },
+    ];
+  },
+  images: {
+    domains: [
+      // For sharex icon in manage user
+      'getsharex.com',
+      // For flameshot icon, and maybe in the future other stuff from github
+      'raw.githubusercontent.com',
+      // Google Icon
+      'madeby.google.com',
+    ],
+  },
+  poweredByHeader: false,
   reactStrictMode: true,
 };
-

package.json

@@ -1,62 +1,86 @@
 {
-  "name": "zip3",
-  "version": "3.1.0",
+  "name": "zipline",
+  "version": "3.6.0",
+  "license": "MIT",
   "scripts": {
-    "prepare": "husky install",
-    "dev": "NODE_ENV=development node server",
-    "build": "npm-run-all build:schema build:next",
+    "dev": "npm-run-all build:server dev:run",
+    "dev:run": "cross-env REACT_EDITOR=code NODE_ENV=development RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false node --enable-source-maps dist/server",
+    "build": "npm-run-all build:server build:schema build:next",
+    "build-ci": "cross-env ZIPLINE_DOCKER_BUILD=1 npm-run-all build:server build:schema build:next",
+    "build:server": "node esbuild.config.js",
     "build:next": "next build",
     "build:schema": "prisma generate --schema=prisma/schema.prisma",
-    "start": "node server",
+    "format": "prettier --write ./src/**/*.{ts,tsx} ./*.{md,js,json,yml}",
+    "migrate:dev": "prisma migrate dev --create-only",
+    "start": "node dist/server",
     "lint": "next lint",
-    "ts-node": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\" --transpile-only",
-    "create-all-migrations": "node scripts/create-migrations",
-    "semantic-release": "semantic-release"
+    "docker:run": "docker-compose up -d",
+    "docker:down": "docker-compose down",
+    "docker:build-dev": "docker-compose --file docker-compose.dev.yml up --build",
+    "scripts:read-config": "npm-run-all build:server && node dist/scripts/read-config",
+    "scripts:import-dir": "npm-run-all build:server && node dist/scripts/import-dir"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@iarna/toml": "2.2.5",
-    "@material-ui/core": "^5.0.0-alpha.37",
-    "@material-ui/data-grid": "^4.0.0-alpha.32",
-    "@material-ui/icons": "^5.0.0-alpha.37",
-    "@material-ui/styles": "^5.0.0-alpha.35",
-    "@prisma/client": "^2.30.0",
-    "@reduxjs/toolkit": "^1.6.0",
-    "argon2": "^0.28.2",
-    "colorette": "^1.2.2",
-    "cookie": "^0.4.1",
-    "copy-to-clipboard": "^3.3.1",
-    "fecha": "^4.2.1",
-    "formik": "^2.2.9",
-    "multer": "^1.4.2",
-    "next": "11.1.0",
-    "prisma": "^2.30.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-dropzone": "^11.3.2",
-    "react-redux": "^7.2.4",
-    "redux": "^4.1.0",
-    "redux-thunk": "^2.3.0",
-    "yup": "^0.32.9"
+    "@dicedtomato/mantine-data-grid": "0.0.23",
+    "@emotion/react": "^11.10.5",
+    "@emotion/server": "^11.10.0",
+    "@mantine/core": "^5.6.3",
+    "@mantine/dropzone": "^5.6.3",
+    "@mantine/form": "^5.6.3",
+    "@mantine/hooks": "^5.6.3",
+    "@mantine/modals": "^5.6.3",
+    "@mantine/next": "^5.6.3",
+    "@mantine/notifications": "^5.6.3",
+    "@mantine/nprogress": "^5.6.3",
+    "@mantine/prism": "^5.6.3",
+    "@prisma/client": "^4.5.0",
+    "@prisma/internals": "^4.5.0",
+    "@prisma/migrate": "^4.5.0",
+    "@sapphire/shapeshift": "^3.7.0",
+    "@tanstack/react-query": "^4.13.0",
+    "argon2": "^0.30.1",
+    "chart.js": "^3.9.1",
+    "chartjs-plugin-datalabels": "^2.1.0",
+    "color-hash": "^2.0.1",
+    "colorette": "^2.0.19",
+    "cookie": "^0.5.0",
+    "dayjs": "^1.11.6",
+    "dotenv": "^16.0.3",
+    "dotenv-expand": "^9.0.0",
+    "fflate": "^0.7.4",
+    "find-my-way": "^7.3.1",
+    "minio": "^7.0.32",
+    "ms": "canary",
+    "multer": "^1.4.5-lts.1",
+    "next": "^13.0.0",
+    "prisma": "^4.5.0",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^4.3.1",
+    "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
+    "recoil": "^0.7.6",
+    "sharp": "^0.31.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.4",
-    "@types/cookie": "^0.4.0",
-    "@types/multer": "^1.4.6",
-    "@types/node": "^15.12.2",
-    "babel-plugin-transform-imports": "^2.0.0",
-    "eslint": "7.28.0",
-    "eslint-config-next": "11.0.0",
-    "husky": "^6.0.0",
+    "@types/cookie": "^0.5.1",
+    "@types/minio": "^7.0.14",
+    "@types/multer": "^1.4.7",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/sharp": "^0.31.0",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.15.12",
+    "eslint": "^8.26.0",
+    "eslint-config-next": "^13.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "npm-run-all": "^4.1.5",
-    "release": "^6.3.0",
-    "ts-node": "^10.0.0",
-    "typescript": "^4.3.2"
+    "prettier": "^2.7.1",
+    "typescript": "^4.8.4"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/diced/workflow-testing.git"
-  }
+    "url": "https://github.com/diced/zipline.git"
+  },
+  "packageManager": "yarn@3.2.4"
 }

prisma/migrations/20210826034827_custom_themes/migration.sql

@@ -0,0 +1,25 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "systemTheme" TEXT NOT NULL DEFAULT E'dark_blue';
+
+-- CreateTable
+CREATE TABLE "Theme" (
+    "id" SERIAL NOT NULL,
+    "type" TEXT NOT NULL,
+    "primary" TEXT NOT NULL,
+    "secondary" TEXT NOT NULL,
+    "error" TEXT NOT NULL,
+    "warning" TEXT NOT NULL,
+    "info" TEXT NOT NULL,
+    "border" TEXT NOT NULL,
+    "mainBackground" TEXT NOT NULL,
+    "paperBackground" TEXT NOT NULL,
+    "userId" INTEGER NOT NULL,
+
+    PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Theme_userId_unique" ON "Theme"("userId");
+
+-- AddForeignKey
+ALTER TABLE "Theme" ADD FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20210827202147_favorite/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Image" ADD COLUMN     "favorite" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/20210830210159_zws/migration.sql

@@ -0,0 +1,25 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[imageId]` on the table `InvisibleImage` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `imageId` to the `InvisibleImage` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "InvisibleImage" DROP CONSTRAINT "InvisibleImage_id_fkey";
+
+-- DropIndex
+DROP INDEX "InvisibleImage_id_unique";
+
+-- AlterTable
+CREATE SEQUENCE "invisibleimage_id_seq";
+ALTER TABLE "InvisibleImage" ADD COLUMN     "imageId" INTEGER NOT NULL,
+ALTER COLUMN "id" SET DEFAULT nextval('invisibleimage_id_seq'),
+ADD PRIMARY KEY ("id");
+ALTER SEQUENCE "invisibleimage_id_seq" OWNED BY "InvisibleImage"."id";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "InvisibleImage_imageId_unique" ON "InvisibleImage"("imageId");
+
+-- AddForeignKey
+ALTER TABLE "InvisibleImage" ADD FOREIGN KEY ("imageId") REFERENCES "Image"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20210901024501_embed_image/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Image" ADD COLUMN     "embed" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/20210924045900_delete_url/migration.sql

@@ -0,0 +1,39 @@
+/*
+  Warnings:
+
+  - You are about to drop the `InvisibleUrl` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `Url` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Image" DROP CONSTRAINT "Image_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "InvisibleImage" DROP CONSTRAINT "InvisibleImage_imageId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "InvisibleUrl" DROP CONSTRAINT "InvisibleUrl_id_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Theme" DROP CONSTRAINT "Theme_userId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Url" DROP CONSTRAINT "Url_userId_fkey";
+
+-- DropTable
+DROP TABLE "InvisibleUrl";
+
+-- DropTable
+DROP TABLE "Url";
+
+-- AddForeignKey
+ALTER TABLE "Theme" ADD CONSTRAINT "Theme_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Image" ADD CONSTRAINT "Image_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "InvisibleImage" ADD CONSTRAINT "InvisibleImage_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "Image"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- RenameIndex
+ALTER INDEX "InvisibleImage.invis_unique" RENAME TO "InvisibleImage_invis_key";

prisma/migrations/20210924050753_new_url/migration.sql

@@ -0,0 +1,34 @@
+-- CreateTable
+CREATE TABLE "Url" (
+    "id" TEXT NOT NULL,
+    "destination" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "views" INTEGER NOT NULL DEFAULT 0,
+    "userId" INTEGER NOT NULL,
+
+    CONSTRAINT "Url_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "InvisibleUrl" (
+    "id" SERIAL NOT NULL,
+    "invis" TEXT NOT NULL,
+    "urlId" TEXT NOT NULL,
+
+    CONSTRAINT "InvisibleUrl_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Url_id_key" ON "Url"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "InvisibleUrl_invis_key" ON "InvisibleUrl"("invis");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "InvisibleUrl_urlId_unique" ON "InvisibleUrl"("urlId");
+
+-- AddForeignKey
+ALTER TABLE "Url" ADD CONSTRAINT "Url_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "InvisibleUrl" ADD CONSTRAINT "InvisibleUrl_urlId_fkey" FOREIGN KEY ("urlId") REFERENCES "Url"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20210925030428_vanity_url/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Url" ADD COLUMN     "vanity" TEXT;

prisma/migrations/20211003022626_site_name/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "embedSiteName" TEXT DEFAULT E'{image.file} • {user.name}';

prisma/migrations/20211128031800_ratelimit/migration.sql

@@ -0,0 +1,11 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "ratelimited" BOOLEAN NOT NULL DEFAULT false;
+
+-- RenameIndex
+ALTER INDEX "InvisibleImage_imageId_unique" RENAME TO "InvisibleImage_imageId_key";
+
+-- RenameIndex
+ALTER INDEX "InvisibleUrl_urlId_unique" RENAME TO "InvisibleUrl_urlId_key";
+
+-- RenameIndex
+ALTER INDEX "Theme_userId_unique" RENAME TO "Theme_userId_key";

prisma/migrations/20220103232702_stats/migration.sql

@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "Stats" (
+    "id" SERIAL NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "data" JSONB NOT NULL,
+
+    CONSTRAINT "Stats_pkey" PRIMARY KEY ("id")
+);

prisma/migrations/20220221053815_format/migration.sql

@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "ImageFormat" AS ENUM ('UUID', 'DATE', 'RANDOM');
+
+-- AlterTable
+ALTER TABLE "Image" ADD COLUMN     "format" "ImageFormat" NOT NULL DEFAULT E'RANDOM';

prisma/migrations/20220221055817_name/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "ImageFormat" ADD VALUE 'NAME';

prisma/migrations/20220227012541_removal_custom_themes/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+  - You are about to drop the `Theme` table. If the table is not empty, all the data it contains will be lost.
+*/
+-- DropForeignKey
+ALTER TABLE "Theme" DROP CONSTRAINT "Theme_userId_fkey";
+
+-- AlterTable
+ALTER TABLE "User" ALTER COLUMN "systemTheme" SET DEFAULT E'system';
+
+-- DropTable
+DROP TABLE "Theme";

prisma/migrations/20220304004623_domains/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "domains" TEXT[];

prisma/migrations/20220604225814_image_password/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Image" ADD COLUMN     "password" TEXT;

prisma/migrations/20220620173040_ratelimit_date/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `ratelimited` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "ratelimited",
+ADD COLUMN     "ratelimit" TIMESTAMP(3);

prisma/migrations/20220713164531_invites/migration.sql

@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "Invite" (
+    "id" SERIAL NOT NULL,
+    "code" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expires_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "used" BOOLEAN NOT NULL DEFAULT false,
+    "createdById" INTEGER NOT NULL,
+
+    CONSTRAINT "Invite_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Invite_code_key" ON "Invite"("code");
+
+-- AddForeignKey
+ALTER TABLE "Invite" ADD CONSTRAINT "Invite_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20220713165225_expire_optional/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Invite" ALTER COLUMN "expires_at" DROP NOT NULL,
+ALTER COLUMN "expires_at" DROP DEFAULT;

prisma/migrations/20220728183855_expiring_images/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Image" ADD COLUMN     "expires_at" TIMESTAMP(3);

prisma/migrations/20220816212407_avatar/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "avatar" TEXT;

prisma/migrations/20221008211922_oauth_user/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "oauth" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "oauthProvider" TEXT,
+ALTER COLUMN "password" DROP NOT NULL;

prisma/migrations/20221008214701_oauth_access_token/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "oauthAccessToken" TEXT;

prisma/migrations/20221022213536_super_admin/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "superAdmin" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/20221028005627_max_views/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Image" ADD COLUMN     "maxViews" INTEGER;

prisma/migrations/20221028011058_max_views_url/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Url" ADD COLUMN     "maxViews" INTEGER;

prisma/migrations/20221030222208_oauth_reform/migration.sql

@@ -0,0 +1,31 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `oauth` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `oauthAccessToken` on the `User` table. All the data in the column will be lost.
+  - You are about to drop the column `oauthProvider` on the `User` table. All the data in the column will be lost.
+
+*/
+-- CreateEnum
+CREATE TYPE "OauthProviders" AS ENUM ('DISCORD', 'GITHUB');
+
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "oauth",
+DROP COLUMN "oauthAccessToken",
+DROP COLUMN "oauthProvider";
+
+-- CreateTable
+CREATE TABLE "OAuth" (
+    "id" SERIAL NOT NULL,
+    "provider" "OauthProviders" NOT NULL,
+    "userId" INTEGER NOT NULL,
+    "token" TEXT NOT NULL,
+
+    CONSTRAINT "OAuth_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "OAuth_provider_key" ON "OAuth"("provider");
+
+-- AddForeignKey
+ALTER TABLE "OAuth" ADD CONSTRAINT "OAuth_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20221030224830_oauth_fix_refresh/migration.sql

@@ -0,0 +1,5 @@
+-- DropIndex
+DROP INDEX "OAuth_provider_key";
+
+-- AlterTable
+ALTER TABLE "OAuth" ADD COLUMN     "refresh" TEXT;

prisma/migrations/20221030233448_fix_images/migration.sql

@@ -0,0 +1,8 @@
+-- DropForeignKey
+ALTER TABLE "Image" DROP CONSTRAINT "Image_userId_fkey";
+
+-- AlterTable
+ALTER TABLE "Image" ALTER COLUMN "userId" DROP NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE "Image" ADD CONSTRAINT "Image_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20221031011932_oauth_add_google/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "OauthProviders" ADD VALUE 'GOOGLE';

prisma/migrations/20221031041758_oauth_username/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `username` to the `OAuth` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "OAuth" ADD COLUMN     "username" TEXT NOT NULL;

prisma/schema.prisma

@@ -8,15 +8,30 @@ generator client {
 }
 
 model User {
-  id            Int     @id @default(autoincrement())
+  id            Int       @id @default(autoincrement())
   username      String
-  password      String
+  password      String?
+  avatar        String?
   token         String
-  administrator Boolean @default(false)
+  administrator Boolean   @default(false)
+  superAdmin    Boolean   @default(false)
+  systemTheme   String    @default("system")
   embedTitle    String?
-  embedColor    String  @default("#2f3136")
+  embedColor    String    @default("#2f3136")
+  embedSiteName String?   @default("{image.file} • {user.name}")
+  ratelimit     DateTime?
+  domains       String[]
+  oauth         OAuth[]
   images        Image[]
   urls          Url[]
+  Invite        Invite[]
+}
+
+enum ImageFormat {
+  UUID
+  DATE
+  RANDOM
+  NAME
 }
 
 model Image {
@@ -24,32 +39,72 @@ model Image {
   file       String
   mimetype   String          @default("image/png")
   created_at DateTime        @default(now())
+  expires_at DateTime?
+  maxViews   Int?
   views      Int             @default(0)
+  favorite   Boolean         @default(false)
+  embed      Boolean         @default(false)
+  password   String?
   invisible  InvisibleImage?
-  user       User            @relation(fields: [userId], references: [id])
-  userId     Int
+  format     ImageFormat     @default(RANDOM)
+  user       User?            @relation(fields: [userId], references: [id], onDelete: SetNull)
+  userId     Int?
 }
 
 model InvisibleImage {
-  id     Int
-  image  Image @relation(fields: [id], references: [id])
-
-  invis  String @unique
+  id      Int    @id @default(autoincrement())
+  invis   String @unique
+  imageId Int    @unique
+  image   Image  @relation(fields: [imageId], references: [id])
 }
 
 model Url {
-  id         Int      @id @default(autoincrement())
-  to         String
-  created_at DateTime @default(now())
-  views      Int      @default(0)
-  invisible  InvisibleUrl?
-  user       User     @relation(fields: [userId], references: [id])
-  userId     Int
+  id          String        @id @unique
+  destination String
+  vanity      String?
+  created_at  DateTime      @default(now())
+  maxViews    Int?
+  views       Int           @default(0)
+  invisible   InvisibleUrl?
+  user        User          @relation(fields: [userId], references: [id])
+  userId      Int
 }
 
 model InvisibleUrl {
-  id     Int
-  url    Url    @relation(fields: [id], references: [id])
-
-  invis  String @unique
+  id    Int    @id @default(autoincrement())
+  invis String @unique
+  urlId String @unique
+  url   Url    @relation(fields: [urlId], references: [id])
+}
+
+model Stats {
+  id         Int      @id @default(autoincrement())
+  created_at DateTime @default(now())
+  data       Json
+}
+
+model Invite {
+  id          Int       @id @default(autoincrement())
+  code        String    @unique
+  created_at  DateTime  @default(now())
+  expires_at  DateTime?
+  used        Boolean   @default(false)
+  createdBy   User      @relation(fields: [createdById], references: [id])
+  createdById Int
+}
+
+model OAuth {
+  id       Int            @id @default(autoincrement())
+  provider OauthProviders
+  user     User           @relation(fields: [userId], references: [id], onDelete: Cascade)
+  userId   Int
+  username String
+  token    String
+  refresh  String?
+}
+
+enum OauthProviders {
+  DISCORD
+  GITHUB
+  GOOGLE
 }

prisma/seed.ts

@@ -1,31 +0,0 @@
-import { PrismaClient } from '@prisma/client';
-import { hashPassword, createToken } from '../src/lib/util';
-
-const prisma = new PrismaClient();
-
-async function main() {
-  const user = await prisma.user.create({
-    data: {
-      username: 'administrator',
-      password: await hashPassword('password'),
-      token: createToken(),
-      administrator: true
-    }
-  });
-
-  console.log(`
-When logging into Zipline for the first time, use these credentials:
-
-Username: "${user.username}"
-Password: "password"
-`);
-}
-
-main()
-  .catch(e => {
-    console.error(e);
-    process.exit(1);
-  })
-  .finally(async () => {
-    await prisma.$disconnect();
-  });

release.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  branches: ['trunk'],
-  plugins: [
-    '@semantic-release/commit-analyzer',
-    '@semantic-release/github',
-    '@semantic-release/changelog'
-  ]
-};

scripts/deploy-db.js

@@ -1,14 +0,0 @@
-const Logger = require('../src/lib/logger');
-const prismaRun = require('./prisma-run');
-
-module.exports = async (config) => {
-  try {
-    await prismaRun(config.database.url, ['migrate', 'deploy', '--schema=prisma/schema.prisma']);
-    await prismaRun(config.database.url, ['generate', '--schema=prisma/schema.prisma']);
-    await prismaRun(config.database.url, ['db', 'seed', '--preview-feature', '--schema=prisma/schema.prisma']);
-  } catch (e) {
-    console.log(e);
-    Logger.get('db').error('there was an error.. exiting..');
-    process.exit(1);
-  }
-};

scripts/migrate-v2-v3.js

@@ -1,35 +0,0 @@
-const { readdir } = require('fs/promises');
-const { extname } = require('path');
-const validateConfig = require('../server/validateConfig');
-const Logger = require('../src/lib/logger');
-const readConfig = require('../src/lib/readConfig');
-const mimes = require('./mimes');
-const { PrismaClient } = require('@prisma/client');
-
-(async () => {
-  const config = readConfig();
-
-  await validateConfig(config);
-
-  process.env.DATABASE_URL = config.database.url;
-
-  const files = await readdir(process.argv[2]);
-  const data = files.map(x => {
-    const mime = mimes[extname(x)] ?? 'application/octet-stream';
-
-    return {
-      file: x,
-      mimetype: mime,
-      userId: 1
-    };
-  });
-
-  const prisma = new PrismaClient();
-
-  Logger.get('migrator').info('starting migrations...');
-  await prisma.image.createMany({
-    data
-  });
-  Logger.get('migrator').info('finished migrations! It is recomended to move your old uploads folder (' + process.argv[2] + ') to the current one which is ' + config.uploader.directory);
-  process.exit();
-})();

scripts/mimes.js

@@ -1,78 +0,0 @@
-module.exports = {
-  '.aac': 'audio/aac',
-  '.abw': 'application/x-abiword',
-  '.arc': 'application/x-freearc',
-  '.avi': 'video/x-msvideo',
-  '.azw': 'application/vnd.amazon.ebook',
-  '.bin': 'application/octet-stream',
-  '.bmp': 'image/bmp',
-  '.bz': 'application/x-bzip',
-  '.bz2': 'application/x-bzip2',
-  '.cda': 'application/x-cdf',
-  '.csh': 'application/x-csh',
-  '.css': 'text/css',
-  '.csv': 'text/csv',
-  '.doc': 'application/msword',
-  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  '.eot': 'application/vnd.ms-fontobject',
-  '.epub': 'application/epub+zip',
-  '.gz': 'application/gzip',
-  '.gif': 'image/gif',
-  '.htm': 'text/html',
-  '.html': 'text/html',
-  '.ico': 'image/vnd.microsoft.icon',
-  '.ics': 'text/calendar',
-  '.jar': 'application/java-archive',
-  '.jpeg': 'image/jpeg',
-  '.jpg': 'image/jpeg',
-  '.js': 'text/javascript',
-  '.json': 'application/json',
-  '.jsonld': 'application/ld+json',
-  '.mid': 'audio/midi',
-  '.midi': 'audio/midi',
-  '.mjs': 'text/javascript',
-  '.mp3': 'audio/mpeg',
-  '.mp4': 'video/mp4',
-  '.mpeg': 'video/mpeg',
-  '.mpkg': 'application/vnd.apple.installer+xml',
-  '.odp': 'application/vnd.oasis.opendocument.presentation',
-  '.ods': 'application/vnd.oasis.opendocument.spreadsheet',
-  '.odt': 'application/vnd.oasis.opendocument.text',
-  '.oga': 'audio/ogg',
-  '.ogv': 'video/ogg',
-  '.ogx': 'application/ogg',
-  '.opus': 'audio/opus',
-  '.otf': 'font/otf',
-  '.png': 'image/png',
-  '.pdf': 'application/pdf',
-  '.php': 'application/x-httpd-php',
-  '.ppt': 'application/vnd.ms-powerpoint',
-  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-  '.rar': 'application/vnd.rar',
-  '.rtf': 'application/rtf',
-  '.sh': 'application/x-sh',
-  '.svg': 'image/svg+xml',
-  '.swf': 'application/x-shockwave-flash',
-  '.tar': 'application/x-tar',
-  '.tif': 'image/tiff',
-  '.tiff': 'image/tiff',
-  '.ts': 'video/mp2t',
-  '.ttf': 'font/ttf',
-  '.txt': 'text/plain',
-  '.vsd': 'application/vnd.visio',
-  '.wav': 'audio/wav',
-  '.weba': 'audio/webm',
-  '.webm': 'video/webm',
-  '.webp': 'image/webp',
-  '.woff': 'font/woff',
-  '.woff2': 'font/woff2',
-  '.xhtml': 'application/xhtml+xml',
-  '.xls': 'application/vnd.ms-excel',
-  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  '.xml': 'application/xml',
-  '.xul': 'application/vnd.mozilla.xul+xml',
-  '.zip': 'application/zip',
-  '.3gp': 'video/3gpp',
-  '.3g2': 'video/3gpp2',
-  '.7z': 'application/x-7z-compressed'
-};

scripts/prisma-run.js

@@ -1,26 +0,0 @@
-const { spawn } = require('child_process');
-const { join } = require('path');
-
-module.exports = (url, args) => {
-  return new Promise((res, rej) => {
-    const proc = spawn(join(process.cwd(), 'node_modules', '.bin', 'prisma'), args, {
-      env: {
-        DATABASE_URL: url,
-        ...process.env
-      },
-    });
-
-    let a = '';
-
-    proc.stdout.on('data', d => {
-      console.log(d.toString());
-      a += d.toString();
-    });
-    proc.stderr.on('data', d => {
-      console.log(d.toString());
-      rej(d.toString());
-    });
-    proc.stdout.on('end', () => res(a));
-    proc.stdout.on('close', () => res(a));
-  });
-};

server/index.js

@@ -1,129 +0,0 @@
-const next = require('next');
-const { createServer } = require('http');
-const { stat, mkdir } = require('fs/promises');
-const { execSync } = require('child_process');
-const { extname } = require('path');
-const { red, green, bold } = require('colorette');
-const { PrismaClient } = require('@prisma/client');
-const validateConfig = require('./validateConfig');
-const Logger = require('../src/lib/logger');
-const getFile = require('./static');
-const prismaRun = require('../scripts/prisma-run');
-const readConfig = require('../src/lib/readConfig');
-const mimes = require('../scripts/mimes');
-const deployDb = require('../scripts/deploy-db');
-
-
-Logger.get('server').info('starting zipline server');
-
-const dev = process.env.NODE_ENV === 'development';
-
-function log(url, status) {
-  if (url.startsWith('/_next') || url.startsWith('/__nextjs')) return;
-  return Logger.get('url').info(`${status === 200 ? bold(green(status)) : bold(red(status))}: ${url}`);
-}
-
-function shouldUseYarn() {
-  try {
-    execSync('yarnpkg --version', { stdio: 'ignore' });
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-(async () => {
-  try {
-    const config = readConfig();
-    await validateConfig(config);
-
-    const data = await prismaRun(config.database.url, ['migrate', 'status']);
-    if (data.includes('Following migration have not yet been applied:')) {
-      Logger.get('database').info('some migrations are not applied, applying them now...');
-      await deployDb(config);
-      Logger.get('database').info('finished applying migrations');
-    }
-    process.env.DATABASE_URL = config.database.url;
-
-    await stat('./.next');
-    await mkdir(config.uploader.directory, { recursive: true });
-
-    const app = next({
-      dir: '.',
-      dev,
-      quiet: dev
-    }, config.core.port, config.core.host);
-
-    await app.prepare();
-
-    const handle = app.getRequestHandler();
-    const prisma = new PrismaClient();
-  
-    const srv = createServer(async (req, res) => {
-      if (req.url.startsWith(config.uploader.route)) {
-        const parts = req.url.split('/');
-        if (!parts[2] || parts[2] === '') return;
-
-        const data = await getFile(config.uploader.directory, parts[2]);
-        if (!data) {
-          app.render404(req, res);
-        } else {
-          let image = await prisma.image.findFirst({
-            where: {
-              OR: {
-                file: parts[2],
-              },
-              OR: {
-                invisible: {
-                  invis: decodeURI(parts[2])
-                }
-              }
-            }
-          });
-          if (image) {
-            await prisma.image.update({
-              where: {
-                id: image.id,
-              },
-              data: {
-                views: {
-                  increment: 1
-                }
-              }
-            });
-            res.setHeader('Content-Type', image.mimetype);
-          } else {
-            const mimetype = mimes[extname(parts[2])] ?? 'application/octet-stream';
-            res.setHeader('Content-Type', mimetype);
-          }
-
-          res.end(data);
-        }
-      } else {
-        handle(req, res);
-      }
-
-      log(req.url, res.statusCode);
-    });
-
-    srv.on('error', (e) => {
-      Logger.get('server').error(e);
-
-      process.exit(1);
-    });
-    srv.on('listening', () => {
-      Logger.get('server').info(`listening on ${config.core.host}:${config.core.port}`);
-    });
-
-    srv.listen(config.core.port, config.core.host ?? '0.0.0.0');
-  } catch (e) {
-    if (e.message && e.message.startsWith('Could not find a production')) {
-      Logger.get('web').error(`there is no production build - run \`${shouldUseYarn() ? 'yarn build' : 'npm build'}\``);
-    } else if (e.code && e.code === 'ENOENT') {
-      if (e.path === './.next') Logger.get('web').error(`there is no production build - run \`${shouldUseYarn() ? 'yarn build' : 'npm build'}\``);
-    } else {
-      Logger.get('server').error(e);
-      process.exit(1);
-    }
-  }
-})();

server/static.js

@@ -1,11 +0,0 @@
-const { readFile } = require('fs/promises');
-const { join } = require('path');
-
-module.exports = async (dir, file) => {
-  try {
-    const data = await readFile(join(process.cwd(), dir, file));
-    return data;
-  } catch (e) {
-    return null;
-  }
-};

server/validateConfig.js

@@ -1,44 +0,0 @@
-const Logger = require('../src/lib/logger');
-
-function dot(str, obj) {
-  return str.split('.').reduce((a,b) => a[b], obj);
-}
-
-const path = (path, type) => ({ path, type });
-
-module.exports = async config => {
-  const paths = [
-    path('core.secure', 'boolean'),
-    path('core.secret', 'string'),
-    path('core.host', 'string'),
-    path('core.port', 'number'),
-    path('database.type', 'string'),
-    path('database.url', 'string'),
-    path('uploader.route', 'string'),
-    path('uploader.embed_route', 'string'),
-    path('uploader.length', 'number'),
-    path('uploader.directory', 'string')
-  ];
-
-  let errors = 0;
-
-  for (let i = 0, L = paths.length; i !== L; ++i) {
-    const path = paths[i];
-    const value = dot(path.path, config);
-    if (value === undefined) {
-      Logger.get('config').error(`there was no ${path.path} in config`);
-      ++errors;
-    }
-    const type = typeof value;
-
-    if (value !== undefined && type !== path.type) {
-      Logger.get('config').error(`expected ${path.type} on ${path.path}, but got ${type}`);
-      ++errors;
-    }
-  }
-
-  if (errors !== 0) {
-    Logger.get('config').error(`exiting due to ${errors} errors`);
-    process.exit(1);
-  }  
-};

src/components/Alert.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Snackbar, Alert as MuiAlert } from '@material-ui/core';
-
-export default function Alert({ open, setOpen, severity, message }) {
-  return (
-    <Snackbar open={open} autoHideDuration={6000} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} onClose={() => setOpen(false)}>
-      <MuiAlert severity={severity} sx={{ width: '100%' }}>
-        {message}
-      </MuiAlert>
-    </Snackbar>
-  );
-}

src/components/Backdrop.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import {
-  Backdrop as MuiBackdrop,
-  CircularProgress
-} from '@material-ui/core';
-
-export default function Backdrop({ open }) {
-  return (
-    <MuiBackdrop
-      sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-      open={open}
-    >
-      <CircularProgress color='inherit' />
-    </MuiBackdrop>
-  );
-}

src/components/Card.tsx

@@ -1,19 +1,10 @@
-import React from 'react';
-import {
-  Card as MuiCard,
-  CardContent,
-  Typography
-} from '@material-ui/core';
-
-export default function Card(props) {
-  const { name, children, ...other } = props;
+import { Card as MCard, Title } from '@mantine/core';
 
+export default function Card({ name, children, ...other }) {
   return (
-    <MuiCard sx={{ minWidth: 100 }} {...other}>
-      <CardContent>
-        <Typography variant='h3'>{name}</Typography>
-        {children}
-      </CardContent>
-    </MuiCard>
+    <MCard p='md' shadow='sm' {...other}>
+      {name && <Title order={2}>{name}</Title>}
+      {children}
+    </MCard>
   );
-}
+}

src/components/CenteredBox.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Box } from '@material-ui/core';
-
-export default function CenteredBox({ children, ...other }) {
-  return (
-    <Box
-      justifyContent='center'
-      display='flex'
-      alignItems='center'
-      {...other}
-    >
-      {children}
-    </Box>
-  );
-}

src/components/CodeInput.tsx

@@ -0,0 +1,15 @@
+import { createStyles, MantineSize, Textarea } from '@mantine/core';
+
+const useStyles = createStyles((theme, { size }: { size: MantineSize }) => ({
+  input: {
+    fontFamily: 'monospace',
+    fontSize: theme.fn.size({ size, sizes: theme.fontSizes }) - 2,
+    height: '80vh',
+  },
+}));
+
+export default function CodeInput({ ...props }) {
+  const { classes } = useStyles({ size: 'md' }, { name: 'CodeInput' });
+
+  return <Textarea classNames={{ input: classes.input }} autoComplete='nope' {...props} />;
+}

src/components/File.tsx

@@ -0,0 +1,195 @@
+import { Button, Card, Group, LoadingOverlay, Modal, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import { relativeTime } from 'lib/utils/client';
+import { useFileDelete, useFileFavorite } from 'lib/queries/files';
+import { useState } from 'react';
+import {
+  CalendarIcon,
+  ClockIcon,
+  CopyIcon,
+  CrossIcon,
+  DeleteIcon,
+  ExternalLinkIcon,
+  FileIcon,
+  HashIcon,
+  ImageIcon,
+  StarIcon,
+  EyeIcon,
+} from './icons';
+import MutedText from './MutedText';
+import Type from './Type';
+import Link from './Link';
+
+export function FileMeta({ Icon, title, subtitle, ...other }) {
+  return other.tooltip ? (
+    <Group>
+      <Icon size={24} />
+      <Tooltip label={other.tooltip}>
+        <Stack spacing={1}>
+          <Text>{title}</Text>
+          <MutedText size='md'>{subtitle}</MutedText>
+        </Stack>
+      </Tooltip>
+    </Group>
+  ) : (
+    <Group>
+      <Icon size={24} />
+      <Stack spacing={1}>
+        <Text>{title}</Text>
+        <MutedText size='md'>{subtitle}</MutedText>
+      </Stack>
+    </Group>
+  );
+}
+
+export default function File({ image, updateImages, disableMediaPreview }) {
+  const [open, setOpen] = useState(false);
+  const deleteFile = useFileDelete();
+  const favoriteFile = useFileFavorite();
+  const clipboard = useClipboard();
+
+  const loading = deleteFile.isLoading || favoriteFile.isLoading;
+
+  const handleDelete = async () => {
+    deleteFile.mutate(image.id, {
+      onSuccess: () => {
+        showNotification({
+          title: 'File Deleted',
+          message: '',
+          color: 'green',
+          icon: <DeleteIcon />,
+        });
+      },
+
+      onError: (res: any) => {
+        showNotification({
+          title: 'Failed to delete file',
+          message: res.error,
+          color: 'red',
+          icon: <CrossIcon />,
+        });
+      },
+
+      onSettled: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  const handleCopy = () => {
+    clipboard.copy(`${window.location.protocol}//${window.location.host}${image.url}`);
+    setOpen(false);
+    showNotification({
+      title: 'Copied to clipboard',
+      message: '',
+      icon: <CopyIcon />,
+    });
+  };
+
+  const handleFavorite = async () => {
+    favoriteFile.mutate(
+      { id: image.id, favorite: !image.favorite },
+      {
+        onSuccess: () => {
+          showNotification({
+            title: 'Image is now ' + (!image.favorite ? 'favorited' : 'unfavorited'),
+            message: '',
+            icon: <StarIcon />,
+          });
+        },
+
+        onError: (res: any) => {
+          showNotification({
+            title: 'Failed to favorite file',
+            message: res.error,
+            color: 'red',
+            icon: <CrossIcon />,
+          });
+        },
+      }
+    );
+  };
+
+  return (
+    <>
+      <Modal opened={open} onClose={() => setOpen(false)} title={<Title>{image.file}</Title>} size='xl'>
+        <LoadingOverlay visible={loading} />
+        <Stack>
+          <Type
+            file={image}
+            src={`/r/${image.file}`}
+            alt={image.file}
+            popup
+            sx={{ minHeight: 200 }}
+            style={{ minHeight: 200 }}
+            disableMediaPreview={false}
+          />
+          <Stack>
+            <FileMeta Icon={FileIcon} title='Name' subtitle={image.file} />
+            <FileMeta Icon={ImageIcon} title='Type' subtitle={image.mimetype} />
+            <FileMeta Icon={EyeIcon} title='Views' subtitle={image?.views?.toLocaleString()} />
+            {image.maxViews && (
+              <FileMeta
+                Icon={EyeIcon}
+                title='Max views'
+                subtitle={image?.maxViews?.toLocaleString()}
+                tooltip={`This file will be deleted after being viewed ${image?.maxViews?.toLocaleString()} times.`}
+              />
+            )}
+            <FileMeta
+              Icon={CalendarIcon}
+              title='Uploaded'
+              subtitle={relativeTime(new Date(image.created_at))}
+              tooltip={new Date(image?.created_at).toLocaleString()}
+            />
+            {image.expires_at && (
+              <FileMeta
+                Icon={ClockIcon}
+                title='Expires'
+                subtitle={relativeTime(new Date(image.expires_at))}
+                tooltip={new Date(image.expires_at).toLocaleString()}
+              />
+            )}
+            <FileMeta Icon={HashIcon} title='ID' subtitle={image.id} />
+          </Stack>
+        </Stack>
+
+        <Group position='right' mt='md'>
+          <Button onClick={handleCopy}>Copy URL</Button>
+          <Button onClick={handleDelete}>Delete</Button>
+          <Button onClick={handleFavorite}>{image.favorite ? 'Unfavorite' : 'Favorite'}</Button>
+          <Link href={image.url} target='_blank'>
+            <Button rightIcon={<ExternalLinkIcon />}>Open</Button>
+          </Link>
+        </Group>
+      </Modal>
+      <Card sx={{ maxWidth: '100%', height: '100%' }} shadow='md'>
+        <Card.Section>
+          <LoadingOverlay visible={loading} />
+          <Type
+            file={image}
+            sx={{
+              minHeight: 200,
+              maxHeight: 320,
+              fontSize: 70,
+              width: '100%',
+              cursor: 'pointer',
+            }}
+            style={{
+              minHeight: 200,
+              maxHeight: 320,
+              fontSize: 70,
+              width: '100%',
+              cursor: 'pointer',
+            }}
+            src={`/r/${image.file}`}
+            alt={image.file}
+            onClick={() => setOpen(true)}
+            disableMediaPreview={disableMediaPreview}
+          />
+        </Card.Section>
+      </Card>
+    </>
+  );
+}

src/components/Image.tsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-
-import { 
-  Card,
-  CardMedia,
-  CardActionArea,
-  Popover,
-  Button,
-  ButtonGroup
-} from '@material-ui/core';
-import copy from 'copy-to-clipboard';
-import useFetch from '../lib/hooks/useFetch';
-
-export default function Image({ image, updateImages }) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  
-  const handleDelete = async () => {
-    const res = await useFetch('/api/user/images', 'DELETE', { id: image.id });
-    if (!res.error) updateImages();
-    
-    setAnchorEl(null);
-  };
-
-  const handleCopy = () => {
-    copy(`${window.location.protocol}//${window.location.host}${image.url}`);
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <Card sx={{ maxWidth: '100%' }}>
-        <CardActionArea>
-          <CardMedia
-            sx={{ height: 320 }}
-            image={image.url}
-            title={image.file}
-            onClick={e => setAnchorEl(e.currentTarget)}
-          />
-        </CardActionArea>
-      </Card>
-      <Popover
-        open={Boolean(anchorEl)}
-        anchorEl={anchorEl}
-        onClose={() => setAnchorEl(null)}
-        anchorOrigin={{
-          vertical: 'center',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'center',
-          horizontal: 'center',
-        }}
-      >
-        <ButtonGroup variant='contained'>
-          <Button onClick={handleDelete} color='primary'>Delete</Button>
-          <Button onClick={handleCopy} color='primary'>Copy URL</Button>
-        </ButtonGroup>
-      </Popover>
-    </>
-  );
-}

src/components/Layout.tsx

@@ -1,381 +1,468 @@
-import React, { useState } from 'react';
-import Link from 'next/link';
-import useFetch from '../lib/hooks/useFetch';
-
 import {
-  AppBar,
+  AppShell,
   Box,
-  Divider,
-  Drawer,
-  IconButton,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Typography,
+  Burger,
   Button,
-  Menu,
-  MenuItem,
+  Divider,
+  Header,
+  MediaQuery,
+  Navbar,
+  NavLink,
   Paper,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from '@material-ui/core';
+  Popover,
+  ScrollArea,
+  Select,
+  Stack,
+  Text,
+  Title,
+  UnstyledButton,
+  useMantineTheme,
+  Group,
+  Image,
+  Tooltip,
+  Badge,
+  Menu,
+} from '@mantine/core';
+import { useClipboard } from '@mantine/hooks';
+import { useModals } from '@mantine/modals';
+import { showNotification } from '@mantine/notifications';
+import useFetch from 'hooks/useFetch';
+import { useVersion } from 'lib/queries/version';
+import { userSelector } from 'lib/recoil/user';
+import { capitalize } from 'lib/utils/client';
+import { useRecoilState } from 'recoil';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
 import {
-  Menu as MenuIcon,
-  Home as HomeIcon,
-  AccountCircle as AccountIcon,
-  Image as ImageIcon,
-  Upload as UploadIcon,
-  ContentCopy as CopyIcon,
-  Autorenew as ResetIcon,
-  Logout as LogoutIcon,
-  PeopleAlt as UsersIcon
-} from '@material-ui/icons';
-import copy from 'copy-to-clipboard';
-import Backdrop from './Backdrop';
+  ExternalLinkIcon,
+  ActivityIcon,
+  CheckIcon,
+  CopyIcon,
+  CrossIcon,
+  DeleteIcon,
+  FileIcon,
+  HomeIcon,
+  LinkIcon,
+  LogoutIcon,
+  PencilIcon,
+  SettingsIcon,
+  TagIcon,
+  TypeIcon,
+  UploadIcon,
+  UserIcon,
+  DiscordIcon,
+  GitHubIcon,
+  GoogleIcon,
+} from './icons';
+import { friendlyThemeName, themes } from './Theming';
+
+function MenuItemLink(props) {
+  return (
+    <Link href={props.href} passHref legacyBehavior>
+      <MenuItem {...props} />
+    </Link>
+  );
+}
+
+function MenuItem(props) {
+  return (
+    <UnstyledButton
+      sx={(theme) => ({
+        display: 'block',
+        width: '100%',
+        padding: 5,
+        borderRadius: theme.radius.sm,
+        color: props.color
+          ? theme.fn.themeColor(props.color, theme.colorScheme === 'dark' ? 5 : 7)
+          : theme.colorScheme === 'dark'
+          ? theme.colors.dark[0]
+          : theme.black,
+        '&:hover': !props.noClick
+          ? {
+              backgroundColor: props.color
+                ? theme.fn.rgba(
+                    theme.fn.themeColor(props.color, theme.colorScheme === 'dark' ? 9 : 0),
+                    theme.colorScheme === 'dark' ? 0.2 : 1
+                  )
+                : theme.colorScheme === 'dark'
+                ? theme.fn.rgba(theme.colors.dark[3], 0.35)
+                : theme.colors.gray[0],
+            }
+          : null,
+      })}
+      {...props}
+    >
+      <Group noWrap>
+        <Box
+          sx={(theme) => ({
+            marginRight: theme.spacing.xs / 4,
+            paddingLeft: theme.spacing.xs / 2,
+
+            '& *': {
+              display: 'block',
+            },
+          })}
+        >
+          {props.icon}
+        </Box>
+        <Text size='sm'>{props.children}</Text>
+      </Group>
+    </UnstyledButton>
+  );
+}
 
 const items = [
   {
-    icon: <HomeIcon />,
+    icon: <HomeIcon size={18} />,
     text: 'Home',
-    link: '/dashboard'
+    link: '/dashboard',
   },
   {
-    icon: <ImageIcon />,
-    text: 'Images',
-    link: '/dashboard/images'
+    icon: <FileIcon size={18} />,
+    text: 'Files',
+    link: '/dashboard/files',
   },
   {
-    icon: <UploadIcon />,
+    icon: <ActivityIcon size={18} />,
+    text: 'Stats',
+    link: '/dashboard/stats',
+  },
+  {
+    icon: <LinkIcon size={18} />,
+    text: 'URLs',
+    link: '/dashboard/urls',
+  },
+  {
+    icon: <UploadIcon size={18} />,
     text: 'Upload',
-    link: '/dashboard/upload'
-  }
+    link: '/dashboard/upload',
+  },
+  {
+    icon: <TypeIcon size={18} />,
+    text: 'Upload Text',
+    link: '/dashboard/text',
+  },
 ];
 
-const drawerWidth = 240;
+const admin_items = [
+  {
+    icon: <UserIcon size={18} />,
+    text: 'Users',
+    link: '/dashboard/users',
+    if: (props) => true,
+  },
+  {
+    icon: <TagIcon size={18} />,
+    text: 'Invites',
+    link: '/dashboard/invites',
+    if: (props) => props.invites,
+  },
+];
 
-function CopyTokenDialog({ open, setOpen, token }) {
-  const handleCopyToken = () => {
-    copy(token);
-    setOpen(false);
+export default function Layout({ children, props }) {
+  const [user, setUser] = useRecoilState(userSelector);
+
+  const { title, oauth_providers: unparsed } = props;
+  const oauth_providers = JSON.parse(unparsed);
+  const icons = {
+    GitHub: GitHubIcon,
+    Discord: DiscordIcon,
+    Google: GoogleIcon,
   };
 
-  return (
-    <div>
-      <Dialog
-        open={open}
-        onClose={() => setOpen(false)}
-      >
-        <DialogTitle id='copy-dialog-title'>
-          Copy Token
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id='copy-dialog-description'>
-              Make sure you don&apos;t share this token with anyone as they will be able to upload images on your behalf.
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOpen(false)} color='inherit' autoFocus>Cancel</Button>
-          <Button onClick={handleCopyToken} color='inherit'>
-              Copy
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
-  );
-}
+  for (const provider of oauth_providers) {
+    provider.Icon = icons[provider.name];
+  }
 
-function ResetTokenDialog({ open, setOpen, setToken }) {
-  const handleResetToken = async () => {
-    const a = await useFetch('/api/user/token', 'PATCH');
-    if (a.success) setToken(a.success);
-    setOpen(false);
-  };
-  
-  return (
-    <div>
-      <Dialog
-        open={open}
-        onClose={() => setOpen(false)}
-      >
-        <DialogTitle id='reset-dialog-title'>
-          Reset Token
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id='reset-dialog-description'>
-            Once you reset your token, you will have to update any uploaders to use this new token.
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setOpen(false)} color='inherit' autoFocus>Cancel</Button>
-          <Button onClick={handleResetToken} color='inherit'>
-            Reset
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
-  );
-}
+  const external_links = JSON.parse(props.external_links ?? '[]');
 
-export default function Layout({ children, user, loading, noPaper }) {
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [copyOpen, setCopyOpen] = useState(false);
-  const [resetOpen, setResetOpen] = useState(false);
   const [token, setToken] = useState(user?.token);
+  const [systemTheme, setSystemTheme] = useState(user.systemTheme ?? 'system');
+  const version = useVersion();
+  const [opened, setOpened] = useState(false); // navigation open
+  const [open, setOpen] = useState(false); // manage acc dropdown
 
-  const open = Boolean(anchorEl);
-  const handleClick = e => setAnchorEl(e.currentTarget);
-  const handleClose = (cmd: 'copy' | 'reset') => () => {
-    switch (cmd) {
-    case 'copy':
-      setCopyOpen(true);
-      break;
-    case 'reset':
-      setResetOpen(true);
-      break;
-    }
-    setAnchorEl(null);
+  const avatar = user?.avatar ?? null;
+  const router = useRouter();
+  const theme = useMantineTheme();
+  const modals = useModals();
+  const clipboard = useClipboard();
+
+  const handleUpdateTheme = async (value) => {
+    const newUser = await useFetch('/api/user', 'PATCH', {
+      systemTheme: value || 'dark_blue',
+    });
+
+    setSystemTheme(newUser.systemTheme);
+    setUser(newUser);
+    router.replace(router.pathname);
+
+    showNotification({
+      title: `Theme changed to ${friendlyThemeName[value]}`,
+      message: '',
+      color: 'green',
+      icon: <PencilIcon />,
+    });
   };
 
-  const drawer = (
-    <div>
-      <CopyTokenDialog open={copyOpen} setOpen={setCopyOpen} token={token} />
-      <ResetTokenDialog open={resetOpen} setOpen={setResetOpen} setToken={setToken} />
-      <Toolbar
-        sx={{
-          width: { xs: drawerWidth }
-        }}
-      >
-        <AppBar
-          position='fixed'
-          elevation={0}
-          sx={{
-            borderBottom: 1,
-            borderBottomColor: t => t.palette.divider,
-            display: { xs: 'none', sm: 'block' }
-          }}
-        >
-          <Toolbar>
-            <IconButton
-              color='inherit'
-              aria-label='open drawer'
-              edge='start'
-              onClick={() => setMobileOpen(true)}
-              sx={{ mr: 2, display: { sm: 'none' } }}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography 
-              variant='h5'
-              noWrap
-              component='div'
-            >
-              Zipline
-            </Typography>
-            {user && (
-              <Box sx={{ marginLeft: 'auto' }}>
-                <Button
-                  color='inherit'
-                  aria-expanded={open ? 'true' : undefined}
-                  onClick={handleClick}
-                >
-                  <AccountIcon />
-                </Button>
-                <Menu
-                  id='zipline-user-menu'
-                  anchorEl={anchorEl}
-                  open={open}
-                  onClose={handleClose(null)}
-                  MenuListProps={{
-                    'aria-labelledby': 'basic-button',
-                  }}
-                >
-                  <MenuItem disableRipple>
-                    <Typography variant='h5'>
-                      <b>{user.username}</b>
-                    </Typography>
-                  </MenuItem>
-                  <Divider />
-                  <Link href='/dashboard/manage'>
-                    <a style={{ color: 'white', textDecoration: 'none' }}>
-                      <MenuItem onClick={handleClose(null)}>
-                        <AccountIcon sx={{ mr: 2 }} /> Manage Account
-                      </MenuItem>
-                    </a>
-                  </Link>
-                  <MenuItem onClick={handleClose('copy')}>
-                    <CopyIcon sx={{ mr: 2 }} /> Copy Token
-                  </MenuItem>
-                  <MenuItem onClick={handleClose('reset')}>
-                    <ResetIcon sx={{ mr: 2 }} /> Reset Token
-                  </MenuItem>
-                  <Link href='/auth/logout'>
-                    <a style={{ color: 'white', textDecoration: 'none' }}>
-                      <MenuItem onClick={handleClose(null)}>
-                        <LogoutIcon sx={{ mr: 2 }} /> Logout
-                      </MenuItem>
-                    </a>
-                  </Link>
-                </Menu>
-              </Box>
-            )}
-          </Toolbar>
-        </AppBar>
-      </Toolbar>
-      <Divider />
-      <List>
-        {items.map((item, i) => (
-          <Link key={i} href={item.link}>
-            <a href={item.link} style={{ color: 'white', textDecoration: 'none' }}>
-              <ListItem button>
-                <ListItemIcon>{item.icon}</ListItemIcon>
-                <ListItemText primary={item.text} />
-              </ListItem>
-            </a>
-          </Link>
-        ))}
-        {user && user.administrator && (
-          <Link href='/dashboard/users' passHref>
-            <a style={{ color: 'white', textDecoration: 'none' }}>
-              <ListItem button>
-                <ListItemIcon><UsersIcon /></ListItemIcon>
-                <ListItemText primary='Users' />
-              </ListItem>
-            </a>
-          </Link>
-        )}
-      </List>
-      
-    </div>
-  );
+  const openResetToken = () =>
+    modals.openConfirmModal({
+      title: <Title>Reset Token?</Title>,
+      children: (
+        <Text size='sm'>
+          Once you reset your token, you will have to update any uploaders to use this new token.
+        </Text>
+      ),
+      labels: { confirm: 'Reset', cancel: 'Cancel' },
+      onConfirm: async () => {
+        const a = await useFetch('/api/user/token', 'PATCH');
+        if (!a.success) {
+          setToken(a.success);
+          showNotification({
+            title: 'Token Reset Failed',
+            message: a.error,
+            color: 'red',
+            icon: <CrossIcon />,
+          });
+        } else {
+          showNotification({
+            title: 'Token Reset',
+            message:
+              'Your token has been reset. You will need to update any uploaders to use this new token.',
+            color: 'green',
+            icon: <CheckIcon />,
+          });
+        }
 
-  const container = typeof window !== 'undefined' ? window.document.body : undefined;
+        modals.closeAll();
+      },
+    });
+
+  const openCopyToken = () =>
+    modals.openConfirmModal({
+      title: <Title>Copy Token</Title>,
+      children: (
+        <Text size='sm'>
+          Make sure you don&apos;t share this token with anyone as they will be able to upload files on your
+          behalf.
+        </Text>
+      ),
+      labels: { confirm: 'Copy', cancel: 'Cancel' },
+      onConfirm: async () => {
+        clipboard.copy(token);
+
+        showNotification({
+          title: 'Token Copied',
+          message: 'Your token has been copied to your clipboard.',
+          color: 'green',
+          icon: <CheckIcon />,
+        });
+
+        modals.closeAll();
+      },
+    });
 
   return (
-    <Box sx={{ display: 'flex' }}>
-      <Backdrop open={loading} />
+    <AppShell
+      navbarOffsetBreakpoint='sm'
+      fixed
+      navbar={
+        <Navbar pt='sm' hiddenBreakpoint='sm' hidden={!opened} width={{ sm: 200, lg: 230 }}>
+          <Navbar.Section grow component={ScrollArea}>
+            {items.map(({ icon, text, link }) => (
+              <Link href={link} key={text} passHref legacyBehavior>
+                <NavLink
+                  component='a'
+                  label={text}
+                  icon={icon}
+                  active={router.pathname === link}
+                  variant='light'
+                />
+              </Link>
+            ))}
+            {user.administrator && (
+              <NavLink
+                label='Administration'
+                icon={<SettingsIcon />}
+                childrenOffset={28}
+                defaultOpened={admin_items.map((x) => x.link).includes(router.pathname)}
+              >
+                {admin_items
+                  .filter((x) => x.if(props))
+                  .map(({ icon, text, link }) => (
+                    <Link href={link} key={text} passHref legacyBehavior>
+                      <NavLink
+                        component='a'
+                        label={text}
+                        icon={icon}
+                        active={router.pathname === link}
+                        variant='light'
+                      />
+                    </Link>
+                  ))}
+              </NavLink>
+            )}
+          </Navbar.Section>
+          <Navbar.Section>
+            {external_links.length
+              ? external_links.map(({ label, link }, i) => (
+                  <Link href={link} passHref key={i} legacyBehavior>
+                    <NavLink
+                      label={label}
+                      component='a'
+                      target='_blank'
+                      variant='light'
+                      icon={<ExternalLinkIcon />}
+                    />
+                  </Link>
+                ))
+              : null}
+          </Navbar.Section>
+          {version.isSuccess ? (
+            <Navbar.Section>
+              <Tooltip
+                label={
+                  version.data.local !== version.data.upstream
+                    ? `You are running an outdated version of Zipline, refer to the docs on how to update to ${version.data.upstream}`
+                    : 'You are running the latest version of Zipline'
+                }
+              >
+                <Badge
+                  m='md'
+                  radius='md'
+                  size='lg'
+                  variant='dot'
+                  color={version.data.local !== version.data.upstream ? 'red' : 'primary'}
+                >
+                  {version.data.local}
+                </Badge>
+              </Tooltip>
+            </Navbar.Section>
+          ) : null}
+        </Navbar>
+      }
+      header={
+        <Header height={70} p='md'>
+          <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+            <MediaQuery largerThan='sm' styles={{ display: 'none' }}>
+              <Burger
+                opened={opened}
+                onClick={() => setOpened((o) => !o)}
+                size='sm'
+                color={theme.colors.gray[6]}
+              />
+            </MediaQuery>
+            <Title ml='sm'>{title}</Title>
+            <Box sx={{ marginLeft: 'auto', marginRight: 0 }}>
+              <Popover position='bottom-end' opened={open} onClose={() => setOpen(false)}>
+                <Popover.Target>
+                  <Button
+                    leftIcon={avatar ? <Image src={avatar} height={32} radius='md' /> : <SettingsIcon />}
+                    onClick={() => setOpen((o) => !o)}
+                    sx={(t) => ({
+                      backgroundColor: 'inherit',
+                      '&:hover': {
+                        backgroundColor: t.other.hover,
+                      },
+                      color: t.colorScheme === 'dark' ? 'white' : 'black',
+                    })}
+                    size='xl'
+                    p='sm'
+                  >
+                    {user.username}
+                  </Button>
+                </Popover.Target>
 
-      <AppBar
-        position='fixed'
-        elevation={0}
-        sx={{
-          width: { sm: `calc(100% - ${drawerWidth}px)` },
-          ml: { sm: `${drawerWidth}px` }
-        }}
-      >
-        <Toolbar>
-          <IconButton
-            color='inherit'
-            aria-label='open drawer'
-            edge='start'
-            onClick={() => setMobileOpen(true)}
-            sx={{ mr: 2, display: { sm: 'none' } }}
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography 
-            variant='h5'
-            noWrap
-            component='div'
-            sx={{ display: { sm: 'none' } }}
-          >
-            Zipline
-          </Typography>
-          {user && (
-            <Box sx={{ marginLeft: 'auto' }}>
-              <Button
-                color='inherit'
-                aria-expanded={open ? 'true' : undefined}
-                onClick={handleClick}
-              >
-                <AccountIcon />
-              </Button>
-              <Menu
-                id='zipline-user-menu'
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleClose(null)}
-                MenuListProps={{
-                  'aria-labelledby': 'basic-button',
-                }}
-              >
-                <MenuItem disableRipple>
-                  <Typography variant='h5'>
-                    <b>{user.username}</b>
-                  </Typography>
-                </MenuItem>
-                <Divider />
-                <Link href='/dash/manage'>
-                  <a style={{ color: 'white', textDecoration: 'none' }}>
-                    <MenuItem onClick={handleClose(null)}>
-                      <AccountIcon sx={{ mr: 2 }} /> Manage Account
+                <Popover.Dropdown p={4} mr='md' sx={{ minWidth: '200px' }}>
+                  <Stack spacing={2}>
+                    <Menu.Label>
+                      {user.username} ({user.id}){' '}
+                      {user.administrator && user.username !== 'administrator' ? '(Administrator)' : ''}
+                    </Menu.Label>
+                    <MenuItemLink icon={<SettingsIcon />} href='/dashboard/manage'>
+                      Manage Account
+                    </MenuItemLink>
+                    <MenuItem
+                      icon={<CopyIcon />}
+                      onClick={() => {
+                        setOpen(false);
+                        openCopyToken();
+                      }}
+                    >
+                      Copy Token
                     </MenuItem>
-                  </a>
-                </Link>
-                <MenuItem onClick={handleClose('copy')}>
-                  <CopyIcon sx={{ mr: 2 }} /> Copy Token
-                </MenuItem>
-                <MenuItem onClick={handleClose('reset')}>
-                  <ResetIcon sx={{ mr: 2 }} /> Reset Token
-                </MenuItem>
-                <Link href='/auth/logout'>
-                  <a style={{ color: 'white', textDecoration: 'none' }}>
-                    <MenuItem onClick={handleClose(null)}>
-                      <LogoutIcon sx={{ mr: 2 }} /> Logout
+                    <MenuItem
+                      icon={<DeleteIcon />}
+                      onClick={() => {
+                        setOpen(false);
+                        openResetToken();
+                      }}
+                      color='red'
+                    >
+                      Reset Token
                     </MenuItem>
-                  </a>
-                </Link>
-              </Menu>
+                    <MenuItemLink icon={<LogoutIcon />} href='/auth/logout' color='red'>
+                      Logout
+                    </MenuItemLink>
+                    <Menu.Divider />
+                    <>
+                      {oauth_providers
+                        .filter((x) =>
+                          user.oauth
+                            ?.map(({ provider }) => provider.toLowerCase())
+                            .includes(x.name.toLowerCase())
+                        )
+                        .map(({ name, Icon }, i) => (
+                          <>
+                            <MenuItem
+                              sx={{ '&:hover': { backgroundColor: 'inherit' } }}
+                              key={i}
+                              py={5}
+                              px={4}
+                              icon={<Icon size={18} colorScheme={theme.colorScheme} />}
+                            >
+                              Logged in with {capitalize(name)}
+                            </MenuItem>
+                          </>
+                        ))}
+                      {oauth_providers.filter((x) =>
+                        user.oauth
+                          ?.map(({ provider }) => provider.toLowerCase())
+                          .includes(x.name.toLowerCase())
+                      ).length ? (
+                        <Menu.Divider />
+                      ) : null}
+                    </>
+                    <MenuItem icon={<PencilIcon />}>
+                      <Select
+                        size='xs'
+                        data={Object.keys(themes).map((t) => ({
+                          value: t,
+                          label: friendlyThemeName[t],
+                        }))}
+                        value={systemTheme}
+                        onChange={handleUpdateTheme}
+                      />
+                    </MenuItem>
+                  </Stack>
+                </Popover.Dropdown>
+              </Popover>
             </Box>
-          )}
-        </Toolbar>
-      </AppBar>
-      <Box
-        component='nav'
-        sx={{
-          width: { sm: drawerWidth },
-          flexShrink: { sm: 0 }
-        }}
+          </div>
+        </Header>
+      }
+    >
+      <Paper
+        withBorder
+        p='md'
+        shadow='xs'
+        sx={(t) => ({
+          borderColor: t.colorScheme === 'dark' ? t.colors.dark[5] : t.colors.dark[0],
+        })}
       >
-        <Drawer
-          container={container}
-          variant='temporary'
-          onClose={() => setMobileOpen(false)}
-          open={mobileOpen}
-          elevation={0}
-          ModalProps={{
-            keepMounted: true
-          }}
-          sx={{
-            display: { xs: 'block', sm: 'none' },
-            '* .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }
-          }}
-        >
-          {drawer}
-        </Drawer>
-        <Drawer
-          variant='permanent'
-          sx={{
-            display: { xs: 'none', sm: 'block' },
-            '* .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }
-          }}
-          open
-        >
-          {drawer}
-        </Drawer>
-      </Box>
-      <Box component='main' sx={{ flexGrow: 1, p: 3, mt: 8 }}>
-        {user && noPaper ? children : (
-          <Paper elevation={0} sx={{ p: 2 }} variant='outlined'>
-            {children}
-          </Paper>
-        )}
-      </Box>
-    </Box>
+        {children}
+      </Paper>
+    </AppShell>
   );
 }

src/components/Link.tsx

@@ -1,75 +1,5 @@
-/// https://github.com/mui-org/material-ui/blob/next/examples/nextjs/src/Link.js
-/* eslint-disable jsx-a11y/anchor-has-content */
-import React, { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useRouter } from 'next/router';
-import NextLink from 'next/link';
-import MuiLink from '@material-ui/core/Link';
+import { NextLink } from '@mantine/next';
 
-export const NextLinkComposed = forwardRef(function NextLinkComposed(props: any, ref) {
-  const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
-    props;
-
-  return (
-    <NextLink
-      href={to}
-      prefetch={prefetch}
-      as={linkAs}
-      replace={replace}
-      scroll={scroll}
-      shallow={shallow}
-      passHref={passHref}
-      locale={locale}
-    >
-      <a ref={ref} {...other} />
-    </NextLink>
-  );
-});
-
-// A styled version of the Next.js Link component:
-// https://nextjs.org/docs/#with-link
-const Link = forwardRef(function Link(props: any, ref) {
-  const {
-    activeClassName = 'active',
-    as: linkAs,
-    className: classNameProps,
-    href,
-    noLinkStyle,
-    role, // Link don't have roles.
-    ...other
-  } = props;
-
-  const router = useRouter();
-  const pathname = typeof href === 'string' ? href : href.pathname;
-  const className = clsx(classNameProps, {
-    [activeClassName]: router.pathname === pathname && activeClassName,
-  });
-
-  const isExternal =
-    typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);
-
-  if (isExternal) {
-    if (noLinkStyle) {
-      return <a className={className} href={href} ref={ref} {...other} />;
-    }
-
-    return <MuiLink className={className} href={href} ref={ref} {...other} />;
-  }
-
-  if (noLinkStyle) {
-    return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
-  }
-
-  return (
-    <MuiLink
-      component={NextLinkComposed}
-      linkAs={linkAs}
-      className={className}
-      ref={ref}
-      to={href}
-      {...other}
-    />
-  );
-});
-
-export default Link;
+export default function Link(props) {
+  return <NextLink legacyBehavior {...props} />;
+}

src/components/MutedText.tsx

@@ -0,0 +1,9 @@
+import { Text } from '@mantine/core';
+
+export default function MutedText({ children, ...props }) {
+  return (
+    <Text color='dimmed' size='xl' {...props}>
+      {children}
+    </Text>
+  );
+}

src/components/PasswordStrength.tsx

@@ -0,0 +1,75 @@
+// https://mantine.dev/core/password-input/
+
+import { useState } from 'react';
+import { PasswordInput, Progress, Text, Popover, Box } from '@mantine/core';
+import { CheckIcon, CrossIcon } from './icons';
+
+function PasswordRequirement({ meets, label }: { meets: boolean; label: string }) {
+  return (
+    <Text color={meets ? 'teal' : 'red'} sx={{ display: 'flex', alignItems: 'center' }} mt='sm' size='sm'>
+      {meets ? <CheckIcon /> : <CrossIcon />} <Box ml='md'>{label}</Box>
+    </Text>
+  );
+}
+
+const requirements = [
+  { re: /[0-9]/, label: 'Includes number' },
+  { re: /[a-z]/, label: 'Includes lowercase letter' },
+  { re: /[A-Z]/, label: 'Includes uppercase letter' },
+  { re: /[$&+,:;=?@#|'<>.^*()%!-]/, label: 'Includes special symbol' },
+];
+
+function getStrength(password: string) {
+  let multiplier = password.length > 7 ? 0 : 1;
+
+  requirements.forEach((requirement) => {
+    if (!requirement.re.test(password)) {
+      multiplier += 1;
+    }
+  });
+
+  return Math.max(100 - (100 / (requirements.length + 1)) * multiplier, 10);
+}
+
+export default function PasswordStrength({ value, setValue, setStrength, ...props }) {
+  const [popoverOpened, setPopoverOpened] = useState(false);
+  const checks = requirements.map((requirement, index) => (
+    <PasswordRequirement key={index} label={requirement.label} meets={requirement.re.test(value)} />
+  ));
+
+  const strength = getStrength(value);
+  setStrength(strength);
+  const color = strength === 100 ? 'teal' : strength > 50 ? 'yellow' : 'red';
+
+  return (
+    <Popover
+      opened={popoverOpened}
+      position='bottom'
+      width='target'
+      withArrow
+      trapFocus={false}
+      styles={{
+        dropdown: {
+          zIndex: 999999,
+        },
+      }}
+    >
+      <Popover.Target>
+        <div onFocusCapture={() => setPopoverOpened(true)} onBlurCapture={() => setPopoverOpened(false)}>
+          <PasswordInput
+            label='Password'
+            description='A strong password should include letters in lower and uppercase, at least 1 number, at least 1 special symbol'
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+            {...props}
+          />
+        </div>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Progress color={color} value={strength} size={7} mb='md' />
+        <PasswordRequirement label='Includes at least 8 characters' meets={value.length > 7} />
+        {checks}
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

src/components/SmallTable.tsx

@@ -0,0 +1,27 @@
+import { Box, Table } from '@mantine/core';
+import { randomId } from '@mantine/hooks';
+
+export function SmallTable({ rows, columns }) {
+  return (
+    <Box sx={{ pt: 1 }}>
+      <Table highlightOnHover>
+        <thead>
+          <tr>
+            {columns.map((col) => (
+              <th key={randomId()}>{col.name}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={randomId()}>
+              {columns.map((col) => (
+                <td key={randomId()}>{col.format ? col.format(row[col.id]) : row[col.id]}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+    </Box>
+  );
+}

src/components/StatCard.tsx

@@ -0,0 +1,71 @@
+import { Card, createStyles, Group, Text } from '@mantine/core';
+import { ArrowDownRight, ArrowUpRight } from 'react-feather';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    padding: theme.spacing.xl * 1.5,
+  },
+
+  value: {
+    fontSize: 24,
+    fontWeight: 700,
+    lineHeight: 1,
+  },
+
+  diff: {
+    lineHeight: 1,
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  icon: {
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],
+  },
+
+  title: {
+    fontWeight: 700,
+    textTransform: 'uppercase',
+  },
+}));
+
+interface StatsGridProps {
+  stat: {
+    title: string;
+    icon: React.ReactNode;
+    value: string;
+    desc: string;
+    diff?: number;
+  };
+}
+
+export default function StatCard({ stat }: StatsGridProps) {
+  const { classes } = useStyles();
+  if (stat.diff) stat.diff = Math.round(stat.diff);
+
+  return (
+    <Card p='md' radius='md' key={stat.title}>
+      <Group position='apart'>
+        <Text size='xs' color='dimmed' className={classes.title}>
+          {stat.title}
+        </Text>
+        {stat.icon}
+      </Group>
+
+      <Group align='flex-end' spacing='xs' mt='md'>
+        <Text className={classes.value}>{stat.value}</Text>
+        {typeof stat.diff == 'number' && (
+          <>
+            <Text color={stat.diff >= 0 ? 'teal' : 'red'} size='sm' weight={500} className={classes.diff}>
+              <span>{stat.diff === Infinity ? '∞' : stat.diff}%</span>
+              {stat.diff >= 0 ? <ArrowUpRight size={16} /> : <ArrowDownRight size={16} />}
+            </Text>
+          </>
+        )}
+      </Group>
+
+      <Text size='xs' color='dimmed' mt='sm'>
+        {stat.desc}
+      </Text>
+    </Card>
+  );
+}

src/components/Theming.tsx

@@ -0,0 +1,132 @@
+import { useEffect } from 'react';
+
+// themes
+import ayu_dark from 'lib/themes/ayu_dark';
+import ayu_light from 'lib/themes/ayu_light';
+import ayu_mirage from 'lib/themes/ayu_mirage';
+import dark from 'lib/themes/dark';
+import dark_blue from 'lib/themes/dark_blue';
+import dracula from 'lib/themes/dracula';
+import light_blue from 'lib/themes/light_blue';
+import matcha_dark_azul from 'lib/themes/matcha_dark_azul';
+import nord from 'lib/themes/nord';
+import qogir_dark from 'lib/themes/qogir_dark';
+
+import { MantineProvider, MantineThemeOverride } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
+import { ModalsProvider } from '@mantine/modals';
+import { NotificationsProvider } from '@mantine/notifications';
+import { useRecoilValue } from 'recoil';
+import { userSelector } from 'lib/recoil/user';
+
+export const themes = {
+  system: (colorScheme: 'dark' | 'light') => (colorScheme === 'dark' ? dark_blue : light_blue),
+  dark_blue,
+  light_blue,
+  dark,
+  ayu_dark,
+  ayu_mirage,
+  ayu_light,
+  nord,
+  dracula,
+  matcha_dark_azul,
+  qogir_dark,
+};
+
+export const friendlyThemeName = {
+  system: 'System Theme',
+  dark_blue: 'Dark Blue',
+  light_blue: 'Light Blue',
+  dark: 'Very Dark',
+  ayu_dark: 'Ayu Dark',
+  ayu_mirage: 'Ayu Mirage',
+  ayu_light: 'Ayu Light',
+  nord: 'Nord',
+  dracula: 'Dracula',
+  matcha_dark_azul: 'Matcha Dark Azul',
+  qogir_dark: 'Qogir Dark',
+};
+
+export default function ZiplineTheming({ Component, pageProps, ...props }) {
+  const user = useRecoilValue(userSelector);
+  const colorScheme = useColorScheme();
+
+  let theme: MantineThemeOverride;
+
+  if (!user) theme = themes.system(colorScheme);
+  else if (user.systemTheme === 'system') theme = themes.system(colorScheme);
+  else theme = themes[user.systemTheme] ?? themes.system(colorScheme);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty('color-scheme', theme.colorScheme);
+  }, [user, theme]);
+
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        ...theme,
+        components: {
+          AppShell: {
+            styles: (t) => ({
+              root: {
+                backgroundColor: t.other.AppShell_backgroundColor,
+              },
+            }),
+          },
+          NavLink: {
+            styles: (t) => ({
+              icon: {
+                paddingLeft: t.spacing.sm,
+              },
+            }),
+          },
+          Modal: {
+            defaultProps: {
+              centered: true,
+              overlayBlur: 3,
+              overlayColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+            },
+          },
+          Popover: {
+            defaultProps: {
+              transition: 'pop',
+            },
+          },
+          LoadingOverlay: {
+            defaultProps: {
+              overlayBlur: 3,
+              overlayColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+            },
+          },
+          Loader: {
+            defaultProps: {
+              variant: 'dots',
+            },
+          },
+          Card: {
+            styles: (t) => ({
+              root: {
+                backgroundColor: t.colorScheme === 'dark' ? t.colors.dark[6] : t.colors.gray[0],
+              },
+            }),
+          },
+          Image: {
+            styles: (t) => ({
+              placeholder: {
+                backgroundColor: t.colorScheme === 'dark' ? t.colors.dark[6] : t.colors.gray[0],
+              },
+            }),
+          },
+        },
+      }}
+    >
+      <ModalsProvider>
+        <NotificationsProvider>
+          {props.children ? props.children : <Component {...pageProps} />}
+        </NotificationsProvider>
+      </ModalsProvider>
+    </MantineProvider>
+  );
+}

src/components/Type.tsx

@@ -0,0 +1,74 @@
+import { Group, Image, Text } from '@mantine/core';
+import { Prism } from '@mantine/prism';
+import { useEffect, useState } from 'react';
+import { AudioIcon, FileIcon, PlayIcon } from './icons';
+
+function Placeholder({ text, Icon, ...props }) {
+  if (props.disableResolve) props.src = null;
+
+  return (
+    <Image
+      height={200}
+      withPlaceholder
+      placeholder={
+        <Group>
+          <Icon size={48} />
+          <Text size='md'>{text}</Text>
+        </Group>
+      }
+      {...props}
+    />
+  );
+}
+
+export default function Type({ file, popup = false, disableMediaPreview, ...props }) {
+  const type = (file.type || file.mimetype).split('/')[0];
+  const name = file.name || file.file;
+
+  const media = /^(video|audio|image|text)/.test(type);
+
+  const [text, setText] = useState('');
+
+  if (type === 'text') {
+    useEffect(() => {
+      (async () => {
+        const res = await fetch('/r/' + name);
+        const text = await res.text();
+
+        setText(text);
+      })();
+    }, []);
+  }
+
+  if (media && disableMediaPreview) {
+    return (
+      <Placeholder Icon={FileIcon} text={`Click to view file (${name})`} disableResolve={true} {...props} />
+    );
+  }
+
+  return popup ? (
+    media ? (
+      {
+        video: <video width='100%' autoPlay controls {...props} />,
+        image: <Image {...props} />,
+        audio: <audio autoPlay controls {...props} style={{ width: '100%' }} />,
+        text: (
+          <Prism withLineNumbers language={name.split('.').pop()} {...props} style={{}} sx={{}}>
+            {text}
+          </Prism>
+        ),
+      }[type]
+    ) : (
+      <Text>Can&apos;t preview {file.type || file.mimetype}</Text>
+    )
+  ) : media ? (
+    {
+      video: <Placeholder Icon={PlayIcon} text={`Click to view video (${name})`} {...props} />,
+      image: <Image {...props} />,
+      audio: <Placeholder Icon={AudioIcon} text={`Click to view audio (${name})`} {...props} />,
+      text: <Placeholder Icon={FileIcon} text={`Click to view text file (${name})`} {...props} />,
+    }[type]
+  ) : (
+    <Placeholder Icon={FileIcon} text={`Click to view file (${name})`} {...props} />
+  );
+}

src/components/dropzone/Dropzone.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Dropzone as MantineDropzone } from '@mantine/dropzone';
+import { Group, Text, useMantineTheme } from '@mantine/core';
+import { ImageIcon } from 'components/icons';
+
+export default function Dropzone({ loading, onDrop, children }) {
+  const theme = useMantineTheme();
+
+  return (
+    <MantineDropzone onDrop={onDrop}>
+      <Group position='center' spacing='xl' style={{ minHeight: 440 }}>
+        <ImageIcon size={80} />
+
+        <Text size='xl' inline>
+          Drag files here or click to select files
+        </Text>
+      </Group>
+
+      <div style={{ pointerEvents: 'all' }}>{children}</div>
+    </MantineDropzone>
+  );
+}

src/components/dropzone/DropzoneFile.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Table, Tooltip, Badge, HoverCard, Text, useMantineTheme, Group } from '@mantine/core';
+import Type from 'components/Type';
+
+export function FilePreview({ file }: { file: File }) {
+  return (
+    <Type
+      file={file}
+      autoPlay
+      sx={{ maxWidth: '10vw', maxHeight: '100vh' }}
+      style={{ maxWidth: '10vw', maxHeight: '100vh' }}
+      src={URL.createObjectURL(file)}
+      alt={file.name}
+      disableMediaPreview={false}
+      popup
+    />
+  );
+}
+
+export default function FileDropzone({ file }: { file: File }) {
+  const theme = useMantineTheme();
+
+  return (
+    <HoverCard shadow='md'>
+      <HoverCard.Target>
+        <Badge size='lg'>{file.name}</Badge>
+      </HoverCard.Target>
+      <HoverCard.Dropdown>
+        <Group grow>
+          <FilePreview file={file} />
+
+          <Table sx={{ color: theme.colorScheme === 'dark' ? 'white' : 'white' }} ml='md'>
+            <tbody>
+              <tr>
+                <td>Name</td>
+                <td>{file.name}</td>
+              </tr>
+              <tr>
+                <td>Type</td>
+                <td>{file.type}</td>
+              </tr>
+              <tr>
+                <td>Last Modified</td>
+                <td>{new Date(file.lastModified).toLocaleString()}</td>
+              </tr>
+            </tbody>
+          </Table>
+        </Group>
+      </HoverCard.Dropdown>
+    </HoverCard>
+  );
+}

src/components/icons/ActivityIcon.tsx

@@ -0,0 +1,5 @@
+import { Activity } from 'react-feather';
+
+export default function ActivityIcon({ ...props }) {
+  return <Activity size={15} {...props} />;
+}

src/components/icons/AudioIcon.tsx

@@ -0,0 +1,5 @@
+import { Disc } from 'react-feather';
+
+export default function AudioIcon({ ...props }) {
+  return <Disc size={15} {...props} />;
+}

src/components/icons/CalendarIcon.tsx

@@ -0,0 +1,5 @@
+import { Calendar } from 'react-feather';
+
+export default function CalendarIcon({ ...props }) {
+  return <Calendar size={15} {...props} />;
+}

src/components/icons/CheckIcon.tsx

@@ -0,0 +1,5 @@
+import { Check } from 'react-feather';
+
+export default function CheckIcon({ ...props }) {
+  return <Check size={15} {...props} />;
+}

src/components/icons/ClockIcon.tsx

@@ -0,0 +1,5 @@
+import { Clock } from 'react-feather';
+
+export default function ClockIcon({ ...props }) {
+  return <Clock size={15} {...props} />;
+}