fix(prisma): add removal of custom theme migration

* refactor(api): cors duplication

* refactor(middleware): moved content-type setter to top

.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,4 @@
+node_modules/
+.next/
+uploads/
+.git/

.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,25 @@
+{
+  "extends": ["next", "next/core-web-vitals"],
+  "rules": {
+    "indent": ["error", 2],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"],
+    "comma-dangle": ["error", "always-multiline"],
+    "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"
+  }
+}

.github/workflows/build.yml

@@ -23,12 +23,11 @@ jobs:
           key: ${{ 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
-      
+        run: echo -e "[core]\nsecret = '12345678'\ndatabase_url = 'postgres://postgres:postgres@postgres/postgres'\n[uploader]\nroute = '/u'\ndirectory = './uploads'\n[urls]\nroute = '/go'" > config.toml
+
       - name: Install dependencies
         if: steps.cache-restore.outputs.cache-hit != 'true'
         run: yarn install
-      
+
       - name: Build
-        run: yarn build
-      
+        run: yarn build

.github/workflows/docker.yml

@@ -7,6 +7,7 @@ on:
       - 'src/**'
       - 'server/**'
       - 'prisma/**'
+      - '.github/**'
   workflow_dispatch:
 
 jobs:

.gitignore

@@ -18,6 +18,7 @@
 # misc
 .DS_Store
 *.pem
+.idea
 
 # debug
 npm-debug.log*
@@ -35,5 +36,4 @@ yarn-error.log*
 
 # zipline
 config.toml
-uploads/
-data.db*
+uploads/

.husky/.gitignore

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

.husky/commit-msg

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

Dockerfile

@@ -1,31 +1,46 @@
-FROM node:16-alpine3.11 AS builder
+FROM node:16-alpine AS deps
 WORKDIR /build
 
+COPY package.json yarn.lock ./
+
+RUN apk add --no-cache libc6-compat
+RUN yarn install --frozen-lockfile
+
+FROM node:16-alpine AS builder
+WORKDIR /build
+
+COPY --from=deps /build/node_modules ./node_modules
 COPY src ./src
 COPY server ./server
 COPY scripts ./scripts
 COPY prisma ./prisma
-
 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:16-alpine AS runner
 WORKDIR /zipline
 
-COPY --from=builder /build/node_modules ./node_modules
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
 
+RUN addgroup --system --gid 1001 zipline
+RUN adduser --system --uid 1001 zipline
+
+COPY --from=builder --chown=zipline:zipline /build/.next ./.next
+COPY --from=builder --chown=zipline:zipline /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/prisma ./prisma
-COPY --from=builder /build/.next ./.next
 COPY --from=builder /build/tsconfig.json ./tsconfig.json
 COPY --from=builder /build/package.json ./package.json
 
+USER zipline
+
 CMD ["node", "server"]

Dockerignore

@@ -1,5 +0,0 @@
-prisma
-node_modules
-.next
-uploads
-.git

README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <img src="https://raw.githubusercontent.com/diced/zipline/trunk/public/zipline_small.png"/>
   
-  Zipline is a file sharing, URL sharing, lightweight and easy to use!
+  Zipline is a ShareX/file upload server that is easy to use, packed with features and can be setup in one command!
   
   ![Build](https://img.shields.io/github/workflow/status/diced/zipline/CD:%20Push%20Docker%20Images?logo=github&style=flat-square)
   ![Stars](https://img.shields.io/github/stars/diced/zipline?logo=github&style=flat-square)
@@ -16,13 +16,19 @@
 - Fast
 - Built with Next.js & React
 - Token protected uploading
-- Easy setup instructions on [docs](https://zipline.diced.me) (One command install `docker-compose up`)
+- Image uploading
+- URL shortening
+- Text uploading
+- URL Formats (uuid, dates, random alphanumeric, original name, zws)
+- Discord embeds (OG metadata)
+- Gallery viewer, and multiple file format support
+- Easy setup instructions on [docs](https://zipline.diced.tech/) (One command install `docker-compose up -d`)
 
 ## Installing
-[See how to install here](https://zipline.diced.me/get-started)
+[See how to install here](https://zipline.diced.tech/docs/get-started)
 
 ## Configuration
-[See how to configure here](https://zipline.diced.me/configuration/overview)
+[See how to configure here](https://zipline.diced.tech/docs/config/overview)
 
 ## Theming
-[See how to theme here](https://zipline.diced.me/themes)
+[See how to theme here](https://zipline.diced.tech/docs/themes/reference)

SECURITY.md

@@ -4,7 +4,8 @@
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 3.x.x   | :white_check_mark: |
+| 3.2.x   | :white_check_mark: |
+| < 3     | :x:                |
 | < 2     | :x:                |
 
 ## Reporting a Vulnerability

commitlint.config.js

@@ -1,55 +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',
-        'config',
-        'api',
-        'hooks',
-        'components',
-        'middleware',
-        'redux',
-        'themes',
-        'lib',
-        'assets'
-      ],
-    ],
-  },
-};

config.example.toml

@@ -5,6 +5,10 @@ host = '0.0.0.0'
 port = 3000
 database_url = 'postgres://postgres:postgres@postgres/postgres'
 
+[urls]
+route = '/go'
+length = 6
+
 [uploader]
 route = '/u'
 embed_route = '/a'
@@ -12,4 +16,4 @@ length = 6
 directory = './uploads'
 user_limit = 104900000 # 100mb
 admin_limit = 104900000 # 100mb
-disabled_extentions = ['jpg']
+disabled_extentions = ['jpg']

docker-compose.dev.yml

@@ -0,0 +1,46 @@
+version: '3'
+services:
+  postgres:
+    image: postgres
+    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
+    environment: 
+      - SECURE=false
+      - SECRET=changethis
+      - HOST=0.0.0.0
+      - PORT=3000
+      - DATABASE_URL=postgresql://postgres:postgres@postgres/postgres/
+      - UPLOADER_ROUTE=/u
+      - UPLOADER_EMBED_ROUTE=/a
+      - UPLOADER_LENGTH=6
+      - UPLOADER_DIRECTORY=./uploads
+      - UPLOADER_ADMIN_LIMIT=104900000
+      - UPLOADER_USER_LIMIT=104900000
+      - UPLOADER_DISABLED_EXTS=
+      - URLS_ROUTE=/go
+      - URLS_LENGTH=6
+    volumes:
+      - '$PWD/uploads:/zipline/uploads'
+      - '$PWD/public:/zipline/public'
+    depends_on:
+      - 'postgres'
+
+volumes:
+  pg_data:

docker-compose.yml

@@ -32,6 +32,8 @@ services:
       - UPLOADER_ADMIN_LIMIT=104900000
       - UPLOADER_USER_LIMIT=104900000
       - UPLOADER_DISABLED_EXTS=
+      - URLS_ROUTE=/go
+      - URLS_LENGTH=6
     volumes:
       - '$PWD/uploads:/zipline/uploads'
       - '$PWD/public:/zipline/public'

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,11 @@
 module.exports = {
-  reactStrictMode: true,
-};
-
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/dashboard',
+        permanent: true,
+      },
+    ];
+  },
+};

package.json

@@ -1,60 +1,63 @@
 {
   "name": "zip3",
-  "version": "3.2.2",
+  "version": "3.4.0",
+  "license": "MIT",
   "scripts": {
-    "prepare": "husky install",
     "dev": "NODE_ENV=development node server",
     "build": "npm-run-all build:schema build:next",
     "build:next": "next build",
     "build:schema": "prisma generate --schema=prisma/schema.prisma",
+    "migrate:dev": "prisma migrate dev --create-only",
     "start": "node server",
     "lint": "next lint",
-    "ts-node": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\" --transpile-only",
-    "semantic-release": "semantic-release"
+    "seed": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\" --transpile-only prisma/seed.ts",
+    "docker:run": "docker-compose up -d",
+    "docker:down": "docker-compose down",
+    "docker:build-dev": "docker-compose --file docker-compose.dev.yml up --build"
   },
   "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/icons": "^5.0.0-alpha.37",
-    "@material-ui/styles": "^5.0.0-alpha.35",
-    "@prisma/client": "^3.0.2",
+    "@mantine/core": "^3.6.9",
+    "@mantine/dropzone": "^3.6.9",
+    "@mantine/hooks": "^3.6.9",
+    "@mantine/modals": "^3.6.9",
+    "@mantine/next": "^3.6.9",
+    "@mantine/notifications": "^3.6.9",
+    "@mantine/prism": "^3.6.11",
+    "@modulz/radix-icons": "^4.0.0",
+    "@prisma/client": "^3.9.2",
+    "@prisma/migrate": "^3.9.2",
+    "@prisma/sdk": "^3.9.2",
     "@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.1",
-    "prisma": "^3.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-dropzone": "^11.3.2",
+    "next": "^12.1.0",
+    "prisma": "^3.9.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
+    "react-table": "^7.7.0",
     "redux": "^4.1.0",
     "redux-thunk": "^2.3.0",
+    "uuid": "^8.3.2",
     "yup": "^0.32.9"
   },
   "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",
+    "babel-plugin-import": "^1.13.3",
+    "eslint": "^7.32.0",
     "eslint-config-next": "11.0.0",
-    "husky": "^6.0.0",
     "npm-run-all": "^4.1.5",
-    "release": "^6.3.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.3.2"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/diced/workflow-testing.git"
+    "url": "https://github.com/diced/zipline.git"
   }
 }

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/schema.prisma

@@ -13,27 +13,20 @@ model User {
   password      String
   token         String
   administrator Boolean @default(false)
-  systemTheme   String  @default("dark_blue")
-  customTheme   Theme?
+  systemTheme   String  @default("system")
   embedTitle    String?
   embedColor    String  @default("#2f3136")
+  embedSiteName String? @default("{image.file} • {user.name}")
+  ratelimited   Boolean @default(false)
   images        Image[]
   urls          Url[]
 }
 
-model Theme {
-  id              Int    @id @default(autoincrement())
-  type            String
-  primary         String
-  secondary       String
-  error           String
-  warning         String
-  info            String
-  border          String
-  mainBackground  String
-  paperBackground String
-  user            User   @relation(fields: [userId], references: [id])
-  userId          Int
+enum ImageFormat {
+  UUID
+  DATE
+  RANDOM
+  NAME
 }
 
 model Image {
@@ -45,31 +38,38 @@ model Image {
   favorite   Boolean         @default(false)
   embed      Boolean         @default(false)
   invisible  InvisibleImage?
+  format     ImageFormat     @default(RANDOM)
   user       User            @relation(fields: [userId], references: [id])
   userId     Int
 }
 
 model InvisibleImage {
-  id Int    @id @default(autoincrement())
-  invis String @unique
-
+  id      Int    @id @default(autoincrement())
+  invis   String @unique
   imageId Int
-  image Image @relation(fields: [imageId], references: [id])
+  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())
+  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])
-
+  id    Int    @id @default(autoincrement())
   invis String @unique
+  urlId String
+  url   Url    @relation(fields: [urlId], references: [id])
 }
+
+model Stats {
+  id         Int @id @default(autoincrement())
+  created_at DateTime @default(now())
+  data       Json
+}

prisma/seed.ts

@@ -9,8 +9,8 @@ async function main() {
       username: 'administrator',
       password: await hashPassword('password'),
       token: createToken(),
-      administrator: true
-    }
+      administrator: true,
+    },
   });
 
   console.log(`

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,13 +0,0 @@
-const Logger = require('../src/lib/logger');
-const prismaRun = require('./prisma-run');
-
-module.exports = async (config) => {
-  try {
-    await prismaRun(config.core.database_url, ['migrate', 'deploy']);
-    await prismaRun(config.core.database_url, ['generate'], true);
-  } catch (e) {
-    console.log(e);
-    Logger.get('db').error('there was an error.. exiting..');
-    process.exit(1);
-  }
-};

scripts/exts.js

@@ -0,0 +1,38 @@
+// https://github.com/toptal/haste-server/blob/master/static/application.js#L167-L174
+// Popular extension map
+module.exports = {
+  rb: 'ruby',
+  py: 'python',
+  pl: 'perl',
+  php: 'php',
+  scala: 'scala',
+  go: 'go',
+  xml: 'xml',
+  html: 'xml',
+  htm: 'xml',
+  css: 'css',
+  js: 'javascript',
+  json: 'json',
+  vbs: 'vbscript',
+  lua: 'lua',
+  pas: 'delphi',
+  java: 'java',
+  cpp: 'cpp',
+  cc: 'cpp',
+  m: 'objectivec',
+  vala: 'vala',
+  sql: 'sql',
+  sm: 'smalltalk',
+  lisp: 'lisp',
+  ini: 'ini',
+  diff: 'diff',
+  bash: 'bash',
+  sh: 'bash',
+  tex: 'tex',
+  erl: 'erlang',
+  hs: 'haskell',
+  md: 'markdown',
+  txt: '',
+  coffee: 'coffee',
+  swift: 'swift',
+};

scripts/migrate-v2-v3.js

@@ -20,7 +20,7 @@ const { PrismaClient } = require('@prisma/client');
     return {
       file: x,
       mimetype: mime,
-      userId: 1
+      userId: 1,
     };
   });
 
@@ -28,7 +28,7 @@ const { PrismaClient } = require('@prisma/client');
 
   Logger.get('migrator').info('starting migrations...');
   await prisma.image.createMany({
-    data
+    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

@@ -74,5 +74,5 @@ module.exports = {
   '.zip': 'application/zip',
   '.3gp': 'video/3gpp',
   '.3g2': 'video/3gpp2',
-  '.7z': 'application/x-7z-compressed'
+  '.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, nostdout = false) => {
-  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 => {
-      if (!nostdout) console.log(d.toString());
-      a += d.toString();
-    });
-    proc.stderr.on('data', d => {
-      if (!nostdout) console.log(d.toString());
-      rej(d.toString());
-    });
-    proc.stdout.on('end', () => res(a));
-    proc.stdout.on('close', () => res(a));
-  });
-};

server/index.js

@@ -1,140 +1,164 @@
-const next = require('next');
+const next = require('next').default;
 const { createServer } = require('http');
-const { stat, mkdir } = require('fs/promises');
-const { execSync } = require('child_process');
+const { mkdir } = require('fs/promises');
 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');
+const { log, getStats, getFile, migrations } = require('./util');
+const { PrismaClient } = require('@prisma/client');
 const { version } = require('../package.json');
+const exts = require('../scripts/exts');
+const serverLog = Logger.get('server');
 
-Logger.get('server').info(`starting zipline@${version} server`);
+serverLog.info(`starting zipline@${version} 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.core.database_url, ['migrate', 'status'], true);
-    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');
-    } else {
-      Logger.get('database').info('migrations up to date');
-    }
-    process.env.DATABASE_URL = config.core.database_url;
-
-    await mkdir(config.uploader.directory, { recursive: true });
-
-    const app = next({
-      dir: '.',
-      dev,
-      quiet: dev
-    }, config.core.port, config.core.host);
-
-    await app.prepare();
-    await stat('./.next');
-
-    const handle = app.getRequestHandler();
-    const prisma = new PrismaClient();
-  
-    const srv = createServer(async (req, res) => {
-      if (req.url.startsWith('/r')) {
-        const parts = req.url.split('/');
-        if (!parts[2] || parts[2] === '') return;
-
-        let image = await prisma.image.findFirst({
-          where: {
-            OR: [
-              { file: parts[2] },
-              { invisible:{ invis: decodeURI(parts[2]) } }
-            ]
-          },
-          select: {
-            mimetype: true,
-            id: true,
-            file: true,
-            invisible: true
-          }
-        });
-
-        if (!image) {
-          const data = await getFile(config.uploader.directory, parts[2]);
-          if (!data) return app.render404(req, res);
-
-          const mimetype = mimes[extname(parts[2])] ?? 'application/octet-stream';
-          res.setHeader('Content-Type', mimetype);
-          res.end(data);
-        } else {
-          if (image) {
-            const data = await getFile(config.uploader.directory, image.file);
-            if (!data) return app.render404(req, res);
-
-            await prisma.image.update({
-              where: { id: image.id },
-              data: { views: { increment: 1 } }
-            });
-            res.setHeader('Content-Type', image.mimetype);
-            res.end(data);
-          } else {
-            const data = await getFile(config.uploader.directory, parts[2]);
-            if (!data) return app.render404(req, res);
-  
-            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}`);
-      if (process.platform === 'linux' && dev) execSync(`xdg-open ${config.core.secure ? 'https' : 'http'}://${config.core.host === '0.0.0.0' ? 'localhost' : config.core.host}:${config.core.port}`);
-    });
-
-    srv.listen(config.core.port, config.core.host ?? '0.0.0.0');
+    await run();
   } 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);
-    }
+    serverLog.error(e);
+    process.exit(1);
   }
-})();
+})();
+
+async function run() {
+  const a = readConfig();
+  const config = validateConfig(a);
+
+  process.env.DATABASE_URL = config.core.database_url;
+  await migrations();
+
+  await mkdir(config.uploader.directory, { recursive: true });
+
+  const app = next({
+    dir: '.',
+    dev,
+    quiet: !dev,
+    hostname: config.core.host,
+    port: config.core.port,
+  });
+
+  await app.prepare();
+
+  const handle = app.getRequestHandler();
+  const prisma = new PrismaClient();
+  
+  const srv = createServer(async (req, res) => {
+    if (req.url.startsWith('/r')) {
+      const parts = req.url.split('/');
+      if (!parts[2] || parts[2] === '') return;
+
+      let image = await prisma.image.findFirst({
+        where: {
+          OR: [
+            { file: parts[2] },
+            { invisible:{ invis: decodeURI(parts[2]) } },
+          ],
+        },
+        select: {
+          mimetype: true,
+          id: true,
+          file: true,
+          invisible: true,
+        },
+      });
+
+      if (!image) {
+        const data = await getFile(config.uploader.directory, parts[2]);
+        if (!data) return app.render404(req, res);
+
+        const mimetype = mimes[extname(parts[2])] ?? 'application/octet-stream';
+        res.setHeader('Content-Type', mimetype);
+        res.end(data);
+      } else {
+        const data = await getFile(config.uploader.directory, image.file);
+        if (!data) return app.render404(req, res);
+
+        await prisma.image.update({
+          where: { id: image.id },
+          data: { views: { increment: 1 } },
+        });
+        res.setHeader('Content-Type', image.mimetype);
+        res.end(data);
+      }
+    } else if (req.url.startsWith(config.uploader.route)) {
+      const parts = req.url.split('/');
+      if (!parts[2] || parts[2] === '') return;
+
+      let image = await prisma.image.findFirst({
+        where: {
+          OR: [
+            { file: parts[2] },
+            { invisible:{ invis: decodeURI(parts[2]) } },
+          ],
+        },
+        select: {
+          mimetype: true,
+          id: true,
+          file: true,
+          invisible: true,
+          embed: true,
+        },
+      });
+
+      if (!image) {
+        const data = await getFile(config.uploader.directory, parts[2]);
+        if (!data) return app.render404(req, res);
+
+        const mimetype = mimes[extname(parts[2])] ?? 'application/octet-stream';
+        res.setHeader('Content-Type', mimetype);
+        res.end(data);
+      } else if (image.embed) {
+        handle(req, res);
+      } else {
+        const ext = image.file.split('.').pop();
+        if (Object.keys(exts).includes(ext)) return handle(req, res);
+        const data = await getFile(config.uploader.directory, image.file);
+        if (!data) return app.render404(req, res);
+
+        await prisma.image.update({
+          where: { id: image.id },
+          data: { views: { increment: 1 } },
+        });
+        res.setHeader('Content-Type', image.mimetype);
+        res.end(data);
+      }
+    } else {
+      handle(req, res);
+    }
+
+    if (config.core.logger) log(req.url, res.statusCode);
+  });
+
+  srv.on('error', (e) => {
+    serverLog.error(e);
+
+    process.exit(1);
+  });
+
+  srv.on('listening', () => {
+    serverLog.info(`listening on ${config.core.host}:${config.core.port}`);
+  });
+
+  srv.listen(config.core.port, config.core.host ?? '0.0.0.0');
+
+  const stats = await getStats(prisma, config);
+  await prisma.stats.create({
+    data: {
+      data: stats,
+    },
+  });
+  setInterval(async () => {
+    const stats = await getStats(prisma, config);
+    await prisma.stats.create({
+      data: {
+        data: stats,
+      },
+    });
+    if (config.core.logger) serverLog.info('stats updated');
+  }, config.core.stats_interval * 1000);
+}

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/util.js

@@ -0,0 +1,130 @@
+const { readFile, readdir, stat } = require('fs/promises');
+const { join } = require('path');
+const { Migrate } = require('@prisma/migrate/dist/Migrate.js');
+const Logger = require('../src/lib/logger.js');
+
+async function migrations() {
+  const migrate = new Migrate('./prisma/schema.prisma');
+  const diagnose = await migrate.diagnoseMigrationHistory({
+    optInToShadowDatabase: false,
+  });
+
+  if (diagnose.history?.diagnostic === 'databaseIsBehind') {
+    Logger.get('database').info('migrating database');
+    await migrate.applyMigrations();
+    Logger.get('database').info('finished migrating database');
+  }
+
+  migrate.stop();
+}
+
+function log(url) {
+  if (url.startsWith('/_next') || url.startsWith('/__nextjs')) return;
+  return Logger.get('url').info(url);
+}
+
+function shouldUseYarn() {
+  try {
+    execSync('yarnpkg --version', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+
+async function getFile(dir, file) {
+  try {
+    const data = await readFile(join(process.cwd(), dir, file));
+    return data;
+  } catch (e) {
+    return null;
+  }
+}
+
+async function sizeOfDir(directory) {
+  const files = await readdir(directory);
+  
+  let size = 0;
+  for (let i = 0, L = files.length; i !== L; ++i) {
+    const sta = await stat(join(directory, files[i]));
+    size += sta.size;
+  }
+
+  return size;
+}
+
+function bytesToRead(bytes) {
+  const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
+  let num = 0;
+
+  while (bytes > 1024) {
+    bytes /= 1024;
+    ++num;
+  }
+
+  return `${bytes.toFixed(1)} ${units[num]}`;
+}
+
+
+async function getStats(prisma, config) {
+  const size = await sizeOfDir(join(process.cwd(), config.uploader.directory));
+  const byUser = await prisma.image.groupBy({
+    by: ['userId'],
+    _count: {
+      _all: true,
+    },
+  });
+  const count_users = await prisma.user.count();
+
+  const count_by_user = [];
+  for (let i = 0, L = byUser.length; i !== L; ++i) {
+    const user = await prisma.user.findFirst({
+      where: {
+        id: byUser[i].userId,
+      },
+    });
+
+    count_by_user.push({
+      username: user.username,
+      count: byUser[i]._count._all,
+    });
+  }
+
+  const count = await prisma.image.count();
+  const viewsCount = await prisma.image.groupBy({
+    by: ['views'],
+    _sum: {
+      views: true,
+    },
+  });
+
+  const typesCount = await prisma.image.groupBy({
+    by: ['mimetype'],
+    _count: {
+      mimetype: true,
+    },
+  });
+  const types_count = [];
+  for (let i = 0, L = typesCount.length; i !== L; ++i) types_count.push({ mimetype: typesCount[i].mimetype, count: typesCount[i]._count.mimetype });
+
+  return {
+    size: bytesToRead(size),
+    size_num: size,
+    count,
+    count_by_user: count_by_user.sort((a,b) => b.count-a.count),
+    count_users,
+    views_count: (viewsCount[0]?._sum?.views ?? 0),
+    types_count: types_count.sort((a,b) => b.count-a.count),
+  };
+}
+
+module.exports = {
+  migrations,
+  bytesToRead,
+  getFile,
+  getStats,
+  log,
+  sizeOfDir,
+  shouldUseYarn,
+};

server/validateConfig.js

@@ -1,45 +1,40 @@
-const Logger = require('../src/lib/logger');
+const { object, bool, string, number, boolean, array } = require('yup');
 
-function dot(str, obj) {
-  return str.split('.').reduce((a,b) => a[b], obj);
-}
+const validator = object({
+  core: object({
+    secure: bool().default(false),
+    secret: string().min(8).required(),
+    host: string().default('0.0.0.0'),
+    port: number().default(3000),
+    database_url: string().required(),
+    logger: boolean().default(false),
+    stats_interval: number().default(1800),
+  }).required(),
+  uploader: object({
+    route: string().default('/u'),
+    embed_route: string().default('/a'),
+    length: number().default(6),
+    directory: string().default('./uploads'),
+    admin_limit: number().default(104900000),
+    user_limit: number().default(104900000),
+    disabled_extensions: array().default([]),
+  }).required(),
+  urls: object({
+    route: string().default('/go'),
+    length: number().default(6),
+  }).required(),
+  ratelimit: object({
+    user: number().default(0),
+    admin: number().default(0),
+  }),
+});
 
-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('core.database_url', 'string'),
-    path('uploader.route', 'string'),
-    path('uploader.length', 'number'),
-    path('uploader.directory', 'string'),
-    path('uploader.admin_limit', 'number'),
-    path('uploader.user_limit', 'number'),
-    path('uploader.disabled_extentions', 'object'),
-  ];
-
-  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 which was required`);
-      ++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);
-  }  
+module.exports = function validate(config) {
+  try {
+    return validator.validateSync(config, { abortEarly: false });
+  } catch (e) {
+    if (process.env.ZIPLINE_DOCKER_BUILD) return {};
+    throw `${e.errors.length} errors occured\n${e.errors.map(x => '\t' + x).join('\n')}`;
+  } 
 };

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 +1,8 @@
 import React from 'react';
-import {
-  Backdrop as MuiBackdrop,
-  CircularProgress
-} from '@material-ui/core';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function Backdrop({ open }) {
   return (
-    <MuiBackdrop
-      sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-      open={open}
-    >
-      <CircularProgress color='inherit' />
-    </MuiBackdrop>
+    <LoadingOverlay visible={open} />
   );
 }

src/components/Card.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
 import {
-  Card as MuiCard,
-  CardContent,
-  Typography
-} from '@material-ui/core';
+  Card as MCard,
+  Title,
+} from '@mantine/core';
 
 export default function Card(props) {
   const { name, children, ...other } = props;
 
   return (
-    <MuiCard sx={{ minWidth: '100%' }} {...other}>
-      <CardContent>
-        <Typography variant='h3'>{name}</Typography>
-        {children}
-      </CardContent>
-    </MuiCard>
+    <MCard padding='md' shadow='sm' {...other}>
+      <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/Image.tsx

@@ -1,83 +1,94 @@
 import React, { useState } from 'react';
-
-import { 
-  Card,
-  CardMedia,
-  CardActionArea,
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogActions,
-  DialogContent
-} from '@material-ui/core';
-import AudioIcon from '@material-ui/icons/Audiotrack';
-import copy from 'copy-to-clipboard';
 import useFetch from 'hooks/useFetch';
+import { Button, Card, Group, Image as MImage, Modal, Title } from '@mantine/core';
+import { useNotifications } from '@mantine/notifications';
+import { CopyIcon, Cross1Icon, StarIcon, TrashIcon } from '@modulz/radix-icons';
+import { useClipboard } from '@mantine/hooks';
 
 export default function Image({ image, updateImages }) {
   const [open, setOpen] = useState(false);
-  const [t,] = useState(image.mimetype.split('/')[0]);
+  const [t] = useState(image.mimetype.split('/')[0]);
+  const notif = useNotifications();
+  const clipboard = useClipboard();
   
   const handleDelete = async () => {
     const res = await useFetch('/api/user/files', 'DELETE', { id: image.id });
-    if (!res.error) updateImages(true);
+    if (!res.error) {
+      updateImages(true);
+      notif.showNotification({
+        title: 'Image Deleted',
+        message: '',
+        color: 'green',
+        icon: <TrashIcon />,
+      });
+    } else {
+      notif.showNotification({
+        title: 'Failed to delete image',
+        message: res.error,
+        color: 'red',
+        icon: <Cross1Icon />,
+      });
+    }
     
     setOpen(false);
   };
 
   const handleCopy = () => {
-    copy(`${window.location.protocol}//${window.location.host}${image.url}`);
+    clipboard.copy(`${window.location.protocol}//${window.location.host}${image.url}`);
     setOpen(false);
+    notif.showNotification({
+      title: 'Copied to clipboard',
+      message: '',
+      icon: <CopyIcon />,
+    });
   };
 
   const handleFavorite = async () => {
     const data = await useFetch('/api/user/files', 'PATCH', { id: image.id, favorite: !image.favorite });
     if (!data.error) updateImages(true);
+    notif.showNotification({
+      title: 'Image is now ' + (!image.favorite ? 'favorited' : 'unfavorited'),
+      message: '',
+      icon: <StarIcon />,
+    });
   };
 
   const Type = (props) => {
     return {
       'video': <video controls {...props} />,
-      // eslint-disable-next-line jsx-a11y/alt-text
-      'image': <img {...props} />,
-      'audio': <audio controls {...props} />
+      'image': <MImage {...props} />,
+      'audio': <audio controls {...props} />,
     }[t];
   };
 
   return (
     <>
-      <Card sx={{ maxWidth: '100%' }}>
-        <CardActionArea sx={t === 'audio' ? { justifyContent: 'center', display: 'flex', alignItems: 'center' } : {}}>
-          <CardMedia
-            sx={{ height: 320, fontSize: 70, width: '100%' }}
-            image={image.url}
-            title={image.file}
-            component={t === 'audio' ? AudioIcon : t} // this is done because audio without controls is hidden
+      <Modal
+        opened={open}
+        onClose={() => setOpen(false)}
+        title={<Title>{image.file}</Title>}
+      >
+        <Type
+          src={image.url}
+          alt={image.file}
+        />
+        <Group position='right' mt={22}>
+          <Button onClick={handleCopy}>Copy</Button>
+          <Button onClick={handleDelete}>Delete</Button>
+          <Button onClick={handleFavorite}>{image.favorite ? 'Unfavorite' : 'Favorite'}</Button>
+        </Group>
+      </Modal>
+      <Card sx={{ maxWidth: '100%', height: '100%' }} shadow='md'>
+        <Card.Section>
+          <Type
+            sx={{ maxHeight: 320, fontSize: 70, width: '100%', cursor: 'pointer' }}
+            style={{ maxHeight: 320, fontSize: 70, width: '100%', cursor: 'pointer' }}
+            src={image.url}
+            alt={image.file}
             onClick={() => setOpen(true)}
           />
-        </CardActionArea>
+        </Card.Section>
       </Card>
-      <Dialog
-        open={open}
-        onClose={() => setOpen(false)}
-      >
-        <DialogTitle id='alert-dialog-title'>
-          {image.file}
-          
-        </DialogTitle>
-        <DialogContent>
-          <Type
-            style={{ width: '100%' }}
-            src={image.url}
-            alt={image.url}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleDelete} color='inherit'>Delete</Button>
-          <Button onClick={handleCopy} color='inherit'>Copy URL</Button>
-          <Button onClick={handleFavorite} color='inherit'>{image.favorite ? 'Unfavorite' : 'Favorite'}</Button>
-        </DialogActions>
-      </Dialog>
     </>
   );
 }

src/components/ImagesTable.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable react/jsx-key */
+/* eslint-disable react/display-name */
+// Code taken from https://codesandbox.io/s/eojw8 and is modified a bit (the entire src/components/table directory)
+import React from 'react';
+import {
+  usePagination,
+  useTable,
+} from 'react-table';
+import {
+  ActionIcon,
+  Checkbox,
+  createStyles,
+  Divider,
+  Group,
+  Pagination,
+  Select,
+  Table,
+  Text,
+  useMantineTheme,
+} from '@mantine/core';
+import {
+  CopyIcon,
+  EnterIcon,
+  TrashIcon,
+} from '@modulz/radix-icons';
+
+const pageSizeOptions = ['10', '25', '50'];
+
+const useStyles = createStyles((t) => ({
+  root: { height: '100%', display: 'block', marginTop: 10 },
+  tableContainer: {
+    display: 'block',
+    overflow: 'auto',
+    '& > table': {
+      '& > thead': { backgroundColor: t.colorScheme === 'dark' ? t.colors.dark[6] : t.colors.gray[0], zIndex: 1 },
+      '& > thead > tr > th': { padding: t.spacing.md },
+      '& > tbody > tr > td': { padding: t.spacing.md },
+    },
+    borderRadius: 6,
+  },
+  stickHeader: { top: 0, position: 'sticky' },
+  disableSortIcon: { color: t.colors.gray[5] },
+  sortDirectionIcon: { transition: 'transform 200ms ease' },
+}));
+
+export default function ImagesTable({
+  columns,
+  data = [],
+  serverSideDataSource = false,
+  initialPageSize = 10,
+  initialPageIndex = 0,
+  pageCount = 0,
+  total = 0,
+  deleteImage, copyImage, viewImage,
+}) {
+  const { classes } = useStyles();
+  const theme = useMantineTheme();
+
+  const tableOptions = useTable(
+    {
+      data,
+      columns,
+      pageCount,
+      initialState: { pageSize: initialPageSize, pageIndex: initialPageIndex },
+    },
+    usePagination
+  );
+
+  const {
+    getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, page, gotoPage, setPageSize, state: { pageIndex, pageSize },
+  } = tableOptions;
+
+  const getPageRecordInfo = () => {
+    const firstRowNum = pageIndex * pageSize + 1;
+    const totalRows = serverSideDataSource ? total : rows.length;
+
+    const currLastRowNum = (pageIndex + 1) * pageSize;
+    let lastRowNum = currLastRowNum < totalRows ? currLastRowNum : totalRows;
+    return `${firstRowNum} - ${lastRowNum} of ${totalRows}`;
+  };
+
+  const getPageCount = () => {
+    const totalRows = serverSideDataSource ? total : rows.length;
+    return Math.ceil(totalRows / pageSize);
+  };
+
+  const handlePageChange = (pageNum) => gotoPage(pageNum - 1);
+
+  const renderHeader = () => headerGroups.map(hg => (
+    <tr {...hg.getHeaderGroupProps()}>
+      {hg.headers.map(column => (
+        <th {...column.getHeaderProps()}>
+          <Group noWrap position={column.align || 'apart'}>
+            <div>{column.render('Header')}</div>
+          </Group>
+        </th>
+      ))}
+      <th>Actions</th>
+    </tr>
+  ));
+
+  const renderRow = rows => rows.map(row => {
+    prepareRow(row);
+    return (
+      <tr {...row.getRowProps()}>
+        {row.cells.map(cell => (
+          <td align={cell.column.align || 'left'} {...cell.getCellProps()}>
+            {cell.render('Cell')}
+          </td>
+        ))}
+        <td align='right'>
+          <Group noWrap>
+            <ActionIcon color='red' variant='outline' onClick={() => deleteImage(row)}><TrashIcon /></ActionIcon>
+            <ActionIcon color='primary' variant='outline' onClick={() => copyImage(row)}><CopyIcon /></ActionIcon>
+            <ActionIcon color='green' variant='outline' onClick={() => viewImage(row)}><EnterIcon /></ActionIcon>
+          </Group>
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <div className={classes.root}>
+      <div
+        className={classes.tableContainer}
+        style={{ height: 'calc(100% - 44px)' }}
+      >
+        <Table {...getTableProps()}>
+          <thead style={{ backgroundColor: theme.other.hover }}>
+            {renderHeader()}
+          </thead>
+
+          <tbody {...getTableBodyProps()}>
+            {renderRow(page)}
+          </tbody>
+        </Table>
+      </div>
+      <Divider mb='md' variant='dotted' />
+      <Group position='left'>
+        <Text size='sm'>Rows per page: </Text>
+        <Select
+          style={{ width: '72px' }}
+          variant='filled'
+          data={pageSizeOptions}
+          value={pageSize + ''}
+          onChange={pageSize => setPageSize(Number(pageSize))} />
+        <Divider orientation='vertical' />
+
+        <Text size='sm'>{getPageRecordInfo()}</Text>
+        <Divider orientation='vertical' />
+
+        <Pagination
+          page={pageIndex + 1}
+          total={getPageCount()}
+          onChange={handlePageChange} />
+      </Group>
+    </div>
+  );
+}

src/components/Layout.tsx

@@ -1,405 +1,329 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
 
-import {
-  AppBar,
-  Box,
-  Divider,
-  Drawer,
-  IconButton,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Typography,
-  Button,
-  Menu,
-  MenuItem,
-  Paper,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-  Select,
-} from '@material-ui/core';
-import {
-  Menu as MenuIcon,
-  Home as HomeIcon,
-  AccountCircle as AccountIcon,
-  Folder as FolderIcon,
-  Upload as UploadIcon,
-  ContentCopy as CopyIcon,
-  Autorenew as ResetIcon,
-  Logout as LogoutIcon,
-  PeopleAlt as UsersIcon,
-  Brush as BrushIcon,
-} from '@material-ui/icons';
-import copy from 'copy-to-clipboard';
-import Backdrop from './Backdrop';
-import { friendlyThemeName, themes } from './Theming';
 import { useRouter } from 'next/router';
 import { useStoreDispatch } from 'lib/redux/store';
 import { updateUser } from 'lib/redux/reducers/user';
 import useFetch from 'hooks/useFetch';
+import { CheckIcon, CopyIcon, Cross1Icon, FileIcon, GearIcon, HomeIcon, Link1Icon, ResetIcon, UploadIcon, PinRightIcon, PersonIcon, Pencil1Icon, MixerHorizontalIcon } from '@modulz/radix-icons';
+import { AppShell, Burger, Divider, Group, Header, MediaQuery, Navbar, Paper, Popover, ScrollArea, Select, Text, ThemeIcon, Title, UnstyledButton, useMantineTheme, Box } from '@mantine/core';
+import { useModals } from '@mantine/modals';
+import { useNotifications } from '@mantine/notifications';
+import { useClipboard } from '@mantine/hooks';
+import { friendlyThemeName, themes } from './Theming';
+
+function MenuItemLink(props) {
+  return (
+    <Link href={props.href} passHref>
+      <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': {
+          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],
+        },
+      })}
+      {...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 />,
     text: 'Home',
-    link: '/dashboard'
+    link: '/dashboard',
   },
   {
-    icon: <FolderIcon />,
+    icon: <FileIcon />,
     text: 'Files',
-    link: '/dashboard/files'
+    link: '/dashboard/files',
+  },
+  {
+    icon: <MixerHorizontalIcon />,
+    text: 'Stats',
+    link: '/dashboard/stats',
+  },
+  {
+    icon: <Link1Icon />,
+    text: 'URLs',
+    link: '/dashboard/urls',
   },
   {
     icon: <UploadIcon />,
     text: 'Upload',
-    link: '/dashboard/upload'
-  }
+    link: '/dashboard/upload',
+  },
 ];
 
-const drawerWidth = 240;
-
-function CopyTokenDialog({ open, setOpen, token }) {
-  const handleCopyToken = () => {
-    copy(token);
-    setOpen(false);
-  };
-
-  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>
-  );
-}
-
-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>
-  );
-}
-
-export default function Layout({ children, user, loading, noPaper }) {
-  const [systemTheme, setSystemTheme] = useState(user.systemTheme || 'dark_blue');
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [copyOpen, setCopyOpen] = useState(false);
-  const [resetOpen, setResetOpen] = useState(false);
+export default function Layout({ children, user }) {
   const [token, setToken] = useState(user?.token);
+  const [systemTheme, setSystemTheme] = useState(user.systemTheme ?? 'system');
+  const [opened, setOpened] = useState(false); // navigation open
+  const [open, setOpen] = useState(false); // manage acc dropdown
   const router = useRouter();
   const dispatch = useStoreDispatch();
+  const theme = useMantineTheme();
+  const modals = useModals();
+  const notif = useNotifications();
+  const clipboard = useClipboard();
 
-  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 handleUpdateTheme = async (event: React.ChangeEvent<{ value: string }>) => {
+  const handleUpdateTheme = async value => {
     const newUser = await useFetch('/api/user', 'PATCH', {
-      systemTheme: event.target.value || 'dark_blue'
+      systemTheme: value || 'dark_blue',
     });
 
     setSystemTheme(newUser.systemTheme);
     dispatch(updateUser(newUser));
-
     router.replace(router.pathname);
+
+    notif.showNotification({
+      title: `Theme changed to ${friendlyThemeName[value]}`,
+      message: '',
+      color: 'green',
+      icon: <Pencil1Icon />,
+    });
   };
 
-  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' passHref>
-                    <MenuItem onClick={handleClose(null)}>
-                      <AccountIcon sx={{ mr: 2 }} /> Manage Account
-                    </MenuItem>
-                  </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' passHref>
-                    <MenuItem onClick={handleClose(null)}>
-                      <LogoutIcon sx={{ mr: 2 }} /> Logout
-                    </MenuItem>
-                  </Link>
-                  <MenuItem>
-                    <BrushIcon sx={{ mr: 2 }} />
-                    <Select
-                      variant='standard'
-                      label='Theme'
-                      value={systemTheme}
-                      onChange={handleUpdateTheme}
-                      fullWidth
-                    >
-                      {Object.keys(themes).map(t => (
-                        <MenuItem value={t} key={t}>
-                          {friendlyThemeName[t]}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  </MenuItem>
-                </Menu>
-              </Box>
-            )}
-          </Toolbar>
-        </AppBar>
-      </Toolbar>
-      <Divider />
-      <List>
-        {items.map((item, i) => (
-          <Link key={i} href={item.link} passHref>
-            <ListItem button>
-              <ListItemIcon>{item.icon}</ListItemIcon>
-              <ListItemText primary={item.text} />
-            </ListItem>
-          </Link>
-        ))}
-        {user && user.administrator && (
-          <Link href='/dashboard/users' passHref>
-            <ListItem button>
-              <ListItemIcon><UsersIcon /></ListItemIcon>
-              <ListItemText primary='Users' />
-            </ListItem>
-          </Link>
-        )}
-      </List>
-      
-    </div>
-  );
+  const openResetToken = () => modals.openConfirmModal({
+    title: 'Reset Token',
+    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);
+        notif.showNotification({
+          title: 'Token Reset Failed',
+          message: a.error,
+          color: 'red',
+          icon: <Cross1Icon />,
+        });
+      } else {
+        notif.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: 'Copy Token',
+    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);
+
+      notif.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
+          padding='md'
+          hiddenBreakpoint='sm'
+          hidden={!opened}
+          width={{ sm: 200, lg: 230 }}
+        >
+          <Navbar.Section
+            grow
+            component={ScrollArea}
+            ml={-10}
+            mr={-10}
+            sx={{ paddingLeft: 10, paddingRight: 10 }}
+          >
+            {items.map(({ icon, text, link }) => (
+              <Link href={link} key={text} passHref>
+                <UnstyledButton
+                  sx={{ 
+                    display: 'block',
+                    width: '100%',
+                    padding: theme.spacing.xs,
+                    borderRadius: theme.radius.sm,
+                    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+                
+                    '&:hover': {
+                      backgroundColor: theme.other.hover,
+                    },
+                  }}
+                >
+                  <Group>
+                    <ThemeIcon color='primary' variant='filled'>
+                      {icon}
+                    </ThemeIcon>
 
-      <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}
+                    <Text size='lg'>{text}</Text>
+                  </Group>
+                </UnstyledButton>
+              </Link>
+            ))}
+            {user.administrator && (
+              <Link href='/dashboard/users' passHref>
+                <UnstyledButton
+                  sx={{ 
+                    display: 'block',
+                    width: '100%',
+                    padding: theme.spacing.xs,
+                    borderRadius: theme.radius.sm,
+                    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+              
+                    '&:hover': {
+                      backgroundColor: theme.other.hover,
+                    },
+                  }}
+                >
+                  <Group>
+                    <ThemeIcon color='primary' variant='filled'>
+                      <PersonIcon />
+                    </ThemeIcon>
+
+                    <Text size='lg'>Users</Text>
+                  </Group>
+                </UnstyledButton>
+              </Link>
+            )}
+          </Navbar.Section>
+        </Navbar>
+      }
+      header={
+        <Header height={70} padding='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 sx={{ marginLeft: 12 }}>Zipline</Title>
+            <Box sx={{ marginLeft: 'auto', marginRight: 0 }}>
+              <Popover
+                position='top'
+                placement='end'
+                spacing={4}
+                opened={open}
+                onClose={() => setOpen(false)}
+                target={
+                  <UnstyledButton
+                    onClick={() => setOpen(!open)}
+                    sx={{ 
+                      display: 'block',
+                      width: '100%',
+                      padding: theme.spacing.xs,
+                      borderRadius: theme.radius.sm,
+                      color: theme.other.color,
+                
+                      '&:hover': {
+                        backgroundColor: theme.other.hover,
+                      },
+                    }}
+                  >
+                    <Group>
+                      <ThemeIcon color='primary' variant='filled'>
+                        <GearIcon />
+                      </ThemeIcon>
+                      <Text>{user.username}</Text>
+                    </Group>
+                  </UnstyledButton>
+                }
               >
-                <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' passHref>
-                  <MenuItem onClick={handleClose(null)}>
-                    <AccountIcon sx={{ mr: 2 }} /> Manage Account
+                <Group direction='column' spacing={2}>
+                  <Text sx={{
+                    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+                    fontWeight: 500,
+                    fontSize: theme.fontSizes.xs,
+                    padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px`,
+                    cursor: 'default',
+                  }}>User: {user.username}</Text>
+                  <MenuItemLink icon={<GearIcon />} href='/dashboard/manage'>Manage Account</MenuItemLink>
+                  <MenuItem icon={<CopyIcon />} onClick={() => {setOpen(false);openCopyToken();}}>Copy Token</MenuItem>
+                  <MenuItem icon={<ResetIcon />} onClick={() => {setOpen(false);openResetToken();}} color='red'>Reset Token</MenuItem>
+                  <MenuItemLink icon={<PinRightIcon />} href='/auth/logout' color='red'>Logout</MenuItemLink>
+                  <Divider
+                    variant='solid'
+                    my={theme.spacing.xs / 2}
+                    sx={theme => ({
+                      width: '110%',
+                      borderTopColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[2],
+                      margin: `${theme.spacing.xs / 2}px -4px`,
+                    })}
+                  />
+                  <MenuItem icon={<Pencil1Icon />}>
+                    <Select           
+                      size='xs'    
+                      data={Object.keys(themes).map(t => ({ value: t, label: friendlyThemeName[t] }))}
+                      value={systemTheme}
+                      onChange={handleUpdateTheme}
+                    />
                   </MenuItem>
-                </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' passHref>
-                  <MenuItem onClick={handleClose(null)}>
-                    <LogoutIcon sx={{ mr: 2 }} /> Logout
-                  </MenuItem>
-                </Link>
-              </Menu>
+                </Group>
+              </Popover>
             </Box>
-          )}
-        </Toolbar>
-      </AppBar>
-      <Box
-        component='nav'
-        sx={{
-          width: { sm: drawerWidth },
-          flexShrink: { sm: 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>
+          </div>
+        </Header>
+      }
+    >
+      <Paper withBorder padding='md' shadow='xs'>{children}</Paper>
+    </AppShell>
   );
 }

src/components/Link.tsx

@@ -4,7 +4,7 @@ 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 { Text } from '@mantine/core';
 
 export const NextLinkComposed = forwardRef(function NextLinkComposed(props: any, ref) {
   const { to, linkAs, href, replace, scroll, passHref, shallow, prefetch, locale, ...other } =
@@ -50,10 +50,10 @@ const Link = forwardRef(function Link(props: any, ref) {
 
   if (isExternal) {
     if (noLinkStyle) {
-      return <a className={className} href={href} ref={ref} {...other} />;
+      return <Text variant='link' component='a' className={className} href={href} ref={ref} {...other} />;
     }
 
-    return <MuiLink className={className} href={href} ref={ref} {...other} />;
+    return <Text component='a' variant='link' href={href} ref={ref} {...other} />;
   }
 
   if (noLinkStyle) {
@@ -61,8 +61,9 @@ const Link = forwardRef(function Link(props: any, ref) {
   }
 
   return (
-    <MuiLink
+    <Text
       component={NextLinkComposed}
+      variant='link'
       linkAs={linkAs}
       className={className}
       ref={ref}

src/components/Theming.tsx

@@ -1,71 +1,96 @@
-import React from 'react';
-import { ThemeProvider } from '@emotion/react';
-import { CssBaseline } from '@material-ui/core';
+import React, { useEffect } from 'react';
 
 // themes
 import dark_blue from 'lib/themes/dark_blue';
+import light_blue from 'lib/themes/light_blue';
 import dark from 'lib/themes/dark';
 import ayu_dark from 'lib/themes/ayu_dark';
 import ayu_mirage from 'lib/themes/ayu_mirage';
 import ayu_light from 'lib/themes/ayu_light';
 import nord from 'lib/themes/nord';
-import polar from 'lib/themes/polar';
 import dracula from 'lib/themes/dracula';
+import matcha_dark_azul from 'lib/themes/matcha_dark_azul';
+import qogir_dark from 'lib/themes/qogir_dark';
 
 import { useStoreSelector } from 'lib/redux/store';
-import createTheme from 'lib/themes';
+import { MantineProvider, MantineThemeOverride } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
+import { NotificationsProvider } from '@mantine/notifications';
+import { useColorScheme } from '@mantine/hooks';
 
 export const themes = {
-  'dark_blue': dark_blue,
-  'dark': dark,
-  'ayu_dark': ayu_dark,
-  'ayu_mirage': ayu_mirage,
-  'ayu_light': ayu_light,
-  'nord': nord,
-  'polar': polar,
-  'dracula': dracula
+  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',
-  'polar': 'Polar',
-  'dracula': 'Dracula'
+  'dracula': 'Dracula',
+  'matcha_dark_azul': 'Matcha Dark Azul',
+  'qogir_dark': 'Qogir Dark',
 };
 
-export default function ZiplineTheming({ Component, pageProps }) {
-  let t;
-
+export default function ZiplineTheming({ Component, pageProps, ...props }) {
   const user = useStoreSelector(state => state.user);
-  if (!user) t = themes.dark_blue;
-  else {
-    if (user.customTheme) {
-      t = createTheme({
-        type: 'dark',
-        primary: user.customTheme.primary,
-        secondary: user.customTheme.secondary,
-        error: user.customTheme.error,
-        warning: user.customTheme.warning,
-        info: user.customTheme.info,
-        border: user.customTheme.border,
-        background: {
-          main: user.customTheme.mainBackground,
-          paper: user.customTheme.paperBackground
-        }
-      });
-    } else {
-      t = themes[user.systemTheme] ?? themes.dark_blue;
-    }
-  }
+  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 (
-    <ThemeProvider theme={t}>
-      <CssBaseline />
-      <Component {...pageProps} />
-    </ThemeProvider>
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={theme}
+      styles={{
+        AppShell: t => ({
+          root: {
+            backgroundColor: t.other.AppShell_backgroundColor,
+          },
+        }),
+        Popover: {
+          inner: {
+            width: 200,
+          },
+        },
+        Accordion: {
+          itemTitle: {
+            border: 0,
+          },
+          itemOpened: {
+            border: 0,
+          },
+        },
+      }}
+    >
+      <ModalsProvider>
+        <NotificationsProvider>
+          {props.children ? props.children : <Component {...pageProps} />}
+        </NotificationsProvider>
+      </ModalsProvider>
+    </MantineProvider>
   );
 }

src/components/pages/Dashboard.tsx

@@ -1,27 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TablePagination,
-  TableRow,
-  Button,
-  ButtonGroup,
-  Typography,
-  Grid,
-  Skeleton,
-  CardActionArea,
-  CardMedia,
-  Card as MuiCard
-} from '@material-ui/core';
-import AudioIcon from '@material-ui/icons/Audiotrack';
 
-import Link from 'components/Link';
 import Card from 'components/Card';
+import Image from 'components/Image';
+import ImagesTable from 'components/ImagesTable';
 import useFetch from 'lib/hooks/useFetch';
 import { useStoreSelector } from 'lib/redux/store';
+import { Box, Text, Table, Skeleton, Title, SimpleGrid } from '@mantine/core';
+import { randomId, useClipboard } from '@mantine/hooks';
+import Link from 'components/Link';
+import { CopyIcon, Cross1Icon, TrashIcon } from '@modulz/radix-icons';
+import { useNotifications } from '@mantine/notifications';
 
 type Aligns = 'inherit' | 'right' | 'left' | 'center' | 'justify';
 
@@ -39,50 +27,34 @@ export function bytesToRead(bytes: number) {
   return `${bytes.toFixed(1)} ${units[num]}`;
 }
 
-const columns = [
-  { id: 'file', label: 'Name', minWidth: 170, align: 'inherit' as Aligns },
-  { id: 'mimetype', label: 'Type', minWidth: 100, align: 'inherit' as Aligns },
-  {
-    id: 'created_at',
-    label: 'Date',
-    minWidth: 170,
-    align: 'right' as Aligns,
-    format: (value) => new Date(value).toLocaleString(),
-  }
-];
-
 function StatText({ children }) {
-  return <Typography variant='h5' color='GrayText'>{children}</Typography>;
+  return <Text color='gray' size='xl'>{children}</Text>;
 }
 
 function StatTable({ rows, columns }) {
   return (
-    <TableContainer sx={{ pt: 1 }}>
-      <Table sx={{ minWidth: 100 }} size='small'>
-        <TableHead>
-          <TableRow>
+    <Box sx={{ pt: 1 }}>
+      <Table highlightOnHover>
+        <thead>
+          <tr>
             {columns.map(col => (
-              <TableCell key={col.name} sx={{ borderColor: t => t.palette.divider }}>{col.name}</TableCell>
+              <th key={randomId()}>{col.name}</th>
             ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
+          </tr>
+        </thead>
+        <tbody>
           {rows.map(row => (
-            <TableRow
-              hover
-              key={row.username}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
+            <tr key={randomId()}>
               {columns.map(col => (
-                <TableCell key={col.id} sx={{ borderColor: t => t.palette.divider }}>
+                <td key={randomId()}>
                   {col.format ? col.format(row[col.id]) : row[col.id]}
-                </TableCell>
+                </td>
               ))}
-            </TableRow>
+            </tr>
           ))}
-        </TableBody>
+        </tbody>
       </Table>
-    </TableContainer>
+    </Box>
   );
 }
 
@@ -91,31 +63,51 @@ export default function Dashboard() {
 
   const [images, setImages] = useState([]);
   const [recent, setRecent] = useState([]);
-  const [page, setPage] = useState(0);
   const [stats, setStats] = useState(null);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const clipboard = useClipboard();
+  const notif = useNotifications();
 
   const updateImages = async () => {
     const imgs = await useFetch('/api/user/files');
     const recent = await useFetch('/api/user/recent?filter=media');
     const stts = await useFetch('/api/stats');
-    setImages(imgs);
+    setImages(imgs.map(x => ({ ...x, created_at: new Date(x.created_at).toLocaleString() })));
     setStats(stts);
     setRecent(recent);
   };
 
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage);
+  const deleteImage = async ({ original }) => {
+    const res = await useFetch('/api/user/files', 'DELETE', { id: original.id });
+    if (!res.error) {
+      updateImages();
+      notif.showNotification({
+        title: 'Image Deleted',
+        message: '',
+        color: 'green',
+        icon: <TrashIcon />,
+      });
+    } else {
+      notif.showNotification({
+        title: 'Failed to delete image',
+        message: res.error,
+        color: 'red',
+        icon: <Cross1Icon />,
+      });
+    }
+    
   };
 
-  const handleChangeRowsPerPage = event => {
-    setRowsPerPage(+event.target.value);
-    setPage(0);
+  const copyImage = async ({ original }) => {
+    clipboard.copy(`${window.location.protocol}//${window.location.host}${original.url}`);
+    notif.showNotification({
+      title: 'Copied to clipboard',
+      message: '',
+      icon: <CopyIcon />,
+    });
   };
 
-  const handleDelete = async image => {
-    const res = await useFetch('/api/user/files', 'DELETE', { id: image.id });
-    if (!res.error) updateImages();
+  const viewImage = async ({ original }) => {
+    window.open(`${window.location.protocol}//${window.location.host}${original.url}`);
   };
 
   useEffect(() => {
@@ -124,123 +116,90 @@ export default function Dashboard() {
   
   return (
     <>
-      <Typography variant='h4'>Welcome back {user?.username}</Typography>
-      <Typography color='GrayText' pb={2}>You have <b>{images.length ? images.length : '...'}</b> images</Typography>
-      
-      <Typography variant='h4'>Recent Images</Typography>
-      <Grid container spacing={4} py={2}>
+      <Title>Welcome back {user?.username}</Title>
+      <Text color='gray' sx={{ paddingBottom: 4 }}>You have <b>{images.length ? images.length : '...'}</b> files</Text>
+
+      <Title>Recent Files</Title>
+      <SimpleGrid
+        cols={4}
+        spacing='lg'
+        breakpoints={[
+          { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+        ]}
+      >
         {recent.length ? recent.map(image => (
-          <Grid item xs={12} sm={3} key={image.id}>
-            <MuiCard sx={{ minWidth: '100%' }}>
-              <CardActionArea>
-                <CardMedia
-                  sx={{ height: 220 }}
-                  image={image.url}
-                  title={image.file}
-                  controls
-                  component={image.mimetype.split('/')[0] === 'audio' ? AudioIcon : image.mimetype.split('/')[0]} // this is done because audio without controls is hidden
-                />
-              </CardActionArea>
-            </MuiCard>
-          </Grid>
+          // eslint-disable-next-line jsx-a11y/alt-text
+          <Image key={randomId()} image={image} updateImages={updateImages} />
         )) : [1,2,3,4].map(x => (
-          <Grid item xs={12} sm={3} key={x}>
-            <Skeleton variant='rectangular' width='100%' height={220} sx={{ borderRadius: 1 }}/>
-          </Grid>
+          <div key={x}>
+            <Skeleton width='100%' height={220} sx={{ borderRadius: 1 }}/>
+          </div>
         ))}
-      </Grid>
-      <Typography variant='h4'>Stats</Typography>
-      <Grid container spacing={4} py={2}>
-        <Grid item xs={12} sm={4}>
-          <Card name='Size' sx={{ height: '100%' }}>
-            <StatText>{stats ? stats.size : <Skeleton variant='text' />}</StatText>
-            <Typography variant='h3'>Average Size</Typography>
-            <StatText>{stats ? bytesToRead(stats.size_num / stats.count) : <Skeleton variant='text' />}</StatText>
-          </Card>
-        </Grid>
-        <Grid item xs={12} sm={4}>
-          <Card name='Images' sx={{ height: '100%' }}>
-            <StatText>{stats ? stats.count : <Skeleton variant='text' />}</StatText>
-            <Typography variant='h3'>Views</Typography>
-            <StatText>{stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? '0' : stats.views_count / stats.count})` : <Skeleton variant='text' />}</StatText>
-          </Card>
-        </Grid>
-        <Grid item xs={12} sm={4}>
-          <Card name='Users' sx={{ height: '100%' }}>
-            <StatText>{stats ? stats.count_users : <Skeleton variant='text' />}</StatText>
-          </Card>
-        </Grid>
-      </Grid>
-      <Card name='Images' sx={{ my: 2 }} elevation={0} variant='outlined'>
-        <Link href='/dashboard/images' pb={2}>View Gallery</Link>
-        <TableContainer sx={{ maxHeight: 440 }}>
-          <Table size='small'>
-            <TableHead>
-              <TableRow>
-                {columns.map(column => (
-                  <TableCell
-                    key={column.id}
-                    align={column.align}
-                    sx={{ minWidth: column.minWidth, borderColor: t => t.palette.divider }}
-                  >
-                    {column.label}
-                  </TableCell>
-                ))}
-                <TableCell sx={{ minWidth: 200, borderColor: t => t.palette.divider }} align='right'>
-                  Actions
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {images
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map(row => {
-                  return (
-                    <TableRow hover role='checkbox' tabIndex={-1} key={row.id}>
-                      {columns.map(column => {
-                        const value = row[column.id];
-                        return (
-                          <TableCell key={column.id} align={column.align} sx={{ borderColor: t => t.palette.divider }}>
-                            {column.format ? column.format(value) : value}
-                          </TableCell>
-                        );
-                      })}
-                      <TableCell align='right'  sx={{ borderColor: t => t.palette.divider }}>
-                        <ButtonGroup variant='outlined'>
-                          <Button onClick={() => handleDelete(row)} color='error' size='small'>Delete</Button>
-                        </ButtonGroup>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-            </TableBody>
-          </Table>
-        </TableContainer>
-        <TablePagination
-          rowsPerPageOptions={[10, 25, 100]}
-          component='div'
-          count={images.length}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage} />
-      </Card>
-      <Card name='Images per User' sx={{ height: '100%', my: 2 }} elevation={0} variant='outlined'>
+      </SimpleGrid>
+
+      <Title mt='md'>Stats</Title>
+      <Text>View more stats here <Link href='/dashboard/stats'>here</Link>.</Text>
+      <SimpleGrid
+        cols={3}
+        spacing='lg'
+        breakpoints={[
+          { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+        ]}
+      >
+        <Card name='Size' sx={{ height: '100%' }}>
+          <StatText>{stats ? stats.size : <Skeleton height={8} />}</StatText>
+          <Title order={2}>Average Size</Title>
+          <StatText>{stats ? bytesToRead(stats.size_num / stats.count) : <Skeleton height={8} />}</StatText>
+        </Card>
+        <Card name='Images' sx={{ height: '100%' }}>
+          <StatText>{stats ? stats.count : <Skeleton height={8} />}</StatText>
+          <Title order={2}>Views</Title>
+          <StatText>{stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : <Skeleton height={8} />}</StatText>
+        </Card>
+        <Card name='Users' sx={{ height: '100%' }}>
+          <StatText>{stats ? stats.count_users : <Skeleton height={8} />}</StatText>
+        </Card>
+      </SimpleGrid>
+
+      <ImagesTable
+        columns={[
+          { accessor: 'file', Header: 'Name', minWidth: 170, align: 'inherit' as Aligns },
+          { accessor: 'mimetype', Header: 'Type', minWidth: 100, align: 'inherit' as Aligns },
+          { accessor: 'created_at', Header: 'Date' },
+        ]}
+        data={images}
+        deleteImage={deleteImage}
+        copyImage={copyImage}
+        viewImage={viewImage}
+      />
+
+      {/* <Title mt='md'>Files</Title>
+      <Text>View previews of your files in the <Link href='/dashboard/files'>browser</Link>.</Text>
+      <ReactTable
+        columns={[
+          { accessor: 'file', Header: 'Name', minWidth: 170, align: 'inherit' as Aligns },
+          { accessor: 'mimetype', Header: 'Type', minWidth: 100, align: 'inherit' as Aligns },
+          { accessor: 'created_at', Header: 'Date' },
+        ]}
+        data={images}
+        pagination
+      />
+      <Card name='Files per User' mt={22}>
         <StatTable
           columns={[
             { id: 'username', name: 'Name' },
-            { id: 'count', name: 'Images' }
+            { id: 'count', name: 'Files' },
           ]}
           rows={stats ? stats.count_by_user : []} />
       </Card>
-      <Card name='Types' sx={{ height: '100%', my: 2 }} elevation={0} variant='outlined'>
+      <Card name='Types' mt={22}>
         <StatTable
           columns={[
             { id: 'mimetype', name: 'Type' },
-            { id: 'count', name: 'Count' }
+            { id: 'count', name: 'Count' },
           ]}
           rows={stats ? stats.types_count : []} />
-      </Card>
+      </Card> */}
     </>
   );
 }

src/components/pages/Files.tsx

@@ -1,27 +1,24 @@
 import React, { useEffect, useState } from 'react';
-import { Grid, Pagination, Box, Typography, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
-import { ExpandMore } from '@material-ui/icons';
 
-import Backdrop from 'components/Backdrop';
 import ZiplineImage from 'components/Image';
 import useFetch from 'hooks/useFetch';
+import { Box, Accordion, Pagination, Title, SimpleGrid, Skeleton, Group, ActionIcon } from '@mantine/core';
+import { PlusIcon } from '@modulz/radix-icons';
+import Link from 'next/link';
 
 export default function Files() {
   const [pages, setPages] = useState([]);
   const [page, setPage] = useState(1);
   const [favoritePages, setFavoritePages] = useState([]);
   const [favoritePage, setFavoritePage] = useState(1);
-  const [loading, setLoading] = useState(true);
 
   const updatePages = async favorite => {
-    setLoading(true);
     const pages = await useFetch('/api/user/files?paged=true&filter=media');
     if (favorite) {
       const fPages = await useFetch('/api/user/files?paged=true&favorite=media');
       setFavoritePages(fPages);
     } 
     setPages(pages);
-    setLoading(false);
   };
 
   useEffect(() => {
@@ -30,59 +27,76 @@ export default function Files() {
 
   return (
     <>
-      <Backdrop open={loading}/>
-      {!pages.length ? (
-        <Box
-          display='flex'
-          justifyContent='center'
-          alignItems='center'
-          pt={2}
-          pb={3}
-        >
-          <Typography variant='h4'>No Files</Typography>
-        </Box>
-      ) : <Typography variant='h4'>Files</Typography>}
-      {favoritePages.length ? (
-        <Accordion sx={{ my: 2, border: 1, borderColor: t => t.palette.divider }} elevation={0}>
-          <AccordionSummary expandIcon={<ExpandMore />}>
-            <Typography variant='h4'>Favorite Files</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Grid container spacing={2}>
-              {favoritePages.length ? favoritePages[(favoritePage - 1) ?? 0].map(image => (
-                <Grid item xs={12} sm={3} key={image.id}>
-                  <ZiplineImage image={image} updateImages={() => updatePages(true)} />
-                </Grid>
-              )) : null}
-            </Grid>
-            {favoritePages.length ? (
-              <Box
-                display='flex'
-                justifyContent='center'
-                alignItems='center'
-                pt={2}
-              >
-                <Pagination count={favoritePages.length} page={favoritePage} onChange={(_, v) => setFavoritePage(v)}/>
-              </Box>
-            ) : null}
-          </AccordionDetails>
-        </Accordion>
-      ) : null}
-      <Grid container spacing={2}>
+      <Group>
+        <Title sx={{ marginBottom: 12 }}>Files</Title>
+        <Link href='/dashboard/upload' passHref>
+          <ActionIcon component='a' variant='filled' color='primary'><PlusIcon/></ActionIcon>
+        </Link>
+      </Group>
+      <Accordion
+        offsetIcon={false}
+        sx={t => ({
+          marginTop: 2,
+          border: '1px solid',
+          marginBottom: 12,
+          borderColor: t.colorScheme === 'dark' ? t.colors.dark[6] : t.colors.gray[0] ,
+        })}
+      >
+        <Accordion.Item label={<Title>Favorite Files</Title>}>
+          <SimpleGrid
+            cols={3}
+            spacing='lg'
+            breakpoints={[
+              { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+            ]}
+          >
+            {favoritePages.length ? favoritePages[(favoritePage - 1) ?? 0].map(image => (
+              <div key={image.id}>
+                <ZiplineImage image={image} updateImages={() => updatePages(true)} />
+              </div>
+            )) : null}
+          </SimpleGrid>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              paddingTop: 12,
+              paddingBottom: 3,
+            }}
+          >
+            <Pagination total={favoritePages.length} page={favoritePage} onChange={setFavoritePage}/>
+          </Box>
+        </Accordion.Item>
+      </Accordion>
+      <SimpleGrid
+        cols={3}
+        spacing='lg'
+        breakpoints={[
+          { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+        ]}
+      >
         {pages.length ? pages[(page - 1) ?? 0].map(image => (
-          <Grid item xs={12} sm={3} key={image.id}>
-            <ZiplineImage image={image} updateImages={updatePages} />
-          </Grid>
-        )) : null}
-      </Grid>
+          <div key={image.id}>
+            <ZiplineImage image={image} updateImages={() => updatePages(true)} />
+          </div>
+        )) : [1,2,3,4].map(x => (
+          <div key={x}>
+            <Skeleton width='100%' height={220} sx={{ borderRadius: 1 }}/>
+          </div>
+        ))}
+      </SimpleGrid>
       {pages.length ? (
         <Box
-          display='flex'
-          justifyContent='center'
-          alignItems='center'
-          pt={2}
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingTop: 12,
+            paddingBottom: 3,
+          }}
         >
-          <Pagination count={pages.length} page={page} onChange={(_, v) => setPage(v)}/>
+          <Pagination total={pages.length} page={page} onChange={setPage}/>
         </Box>
       ) : null}
     </>

src/components/pages/Manage.tsx

@@ -1,88 +1,32 @@
-import React, { useState } from 'react';
-import { TextField, Button, Box, Typography, Select, MenuItem } from '@material-ui/core';
-import Download from '@material-ui/icons/Download';
+import React from 'react';
 
-import { useFormik } from 'formik';
-import * as yup from 'yup';
 import useFetch from 'hooks/useFetch';
-import Backdrop from 'components/Backdrop';
-import Alert from 'components/Alert';
+import Link from 'components/Link';
 import { useStoreDispatch, useStoreSelector } from 'lib/redux/store';
 import { updateUser } from 'lib/redux/reducers/user';
-import { useRouter } from 'next/router';
+import { useForm } from '@mantine/hooks';
+import { Tooltip, TextInput, Button, Text, Title, Group, ColorInput } from '@mantine/core';
+import { DownloadIcon } from '@modulz/radix-icons';
 
-const validationSchema = yup.object({
-  username: yup
-    .string()
-    .required('Username is required')
-});
-
-const themeValidationSchema = yup.object({
-  type: yup
-    .string()
-    .required('Type (dark, light) is required is required'),
-  primary: yup
-    .string()
-    .required('Primary color is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-  secondary: yup
-    .string()
-    .required('Secondary color is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-  error: yup
-    .string()
-    .required('Error color is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-  warning: yup
-    .string()
-    .required('Warning color is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-  info: yup
-    .string()
-    .required('Info color is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-  border: yup
-    .string()
-    .required('Border color is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-  mainBackground: yup
-    .string()
-    .required('Main Background is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-  paperBackground: yup
-    .string()
-    .required('Paper Background is required')
-    .matches(/\#[0-9A-Fa-f]{6}/g, { message: 'Not a valid hex color' }),
-
-});
-
-function TextInput({ id, label, formik, ...other }) {
+function VarsTooltip({ children }) {
   return (
-    <TextField
-      id={id}
-      name={id}
-      label={label}
-      value={formik.values[id]}
-      onChange={formik.handleChange}
-      error={formik.touched[id] && Boolean(formik.errors[id])}
-      helperText={formik.touched[id] && formik.errors[id]}
-      variant='standard'
-      fullWidth
-      sx={{ pb: 0.5 }}
-      {...other}
-    />
+    <Tooltip position='top' placement='center' color='' label={
+      <>
+        <Text><b>{'{image.file}'}</b> - file name</Text>
+        <Text><b>{'{image.mimetype}'}</b> - mimetype</Text>
+        <Text><b>{'{image.id}'}</b> - id of the image</Text>
+        <Text><b>{'{user.name}'}</b> - your username</Text>
+        visit <Link href='https://zipline.diced.cf/docs/variables'>the docs</Link> for more variables
+      </>
+    }>
+      {children}
+    </Tooltip>
   );
 }
 
 export default function Manage() {
   const user = useStoreSelector(state => state.user);
   const dispatch = useStoreDispatch();
-  const router = useRouter();
-
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [severity, setSeverity] = useState('success');
-  const [message, setMessage] = useState('Saved');
 
   const genShareX = (withEmbed: boolean = false, withZws: boolean = false) => {
     const config = {
@@ -94,11 +38,11 @@ export default function Manage() {
       Headers: {
         Authorization: user?.token,
         ...(withEmbed && {Embed: 'true'}),
-        ...(withZws && {ZWS: 'true'})
+        ...(withZws && {ZWS: 'true'}),
       },
-      URL: '$json:url$',
+      URL: '$json:files[0]$',
       Body: 'MultipartFormData',
-      FileFormName: 'file'
+      FileFormName: 'file',
     };
 
     const pseudoElement = document.createElement('a');
@@ -110,143 +54,66 @@ export default function Manage() {
     pseudoElement.parentNode.removeChild(pseudoElement);
   };
 
-  const formik = useFormik({
+  const form = useForm({
     initialValues: {
       username: user.username,
       password: '',
       embedTitle: user.embedTitle ?? '',
-      embedColor: user.embedColor
+      embedColor: user.embedColor,
+      embedSiteName: user.embedSiteName ?? '',
     },
-    validationSchema,
-    onSubmit: async values => {
-      const cleanUsername = values.username.trim();
-      const cleanPassword = values.password.trim();
-      const cleanEmbedTitle = values.embedTitle.trim();
-      const cleanEmbedColor = values.embedColor.trim();
-
-      if (cleanUsername === '') return formik.setFieldError('username', 'Username can\'t be nothing');
-
-      setLoading(true);
-
-      const data = {
-        username: cleanUsername,
-        password: cleanPassword === '' ? null : cleanPassword,
-        embedTitle: cleanEmbedTitle === '' ? null : cleanEmbedTitle,
-        embedColor: cleanEmbedColor === '' ? null : cleanEmbedColor
-      };
-
-      const newUser = await useFetch('/api/user', 'PATCH', data);
-
-      if (newUser.error) {
-        setLoading(false);
-        setMessage('An error occured');
-        setSeverity('error');
-        setOpen(true);
-      } else {
-        dispatch(updateUser(newUser));
-        setLoading(false);
-        setMessage('Saved user');
-        setSeverity('success');
-        setOpen(true);
-      }
-    }
   });
 
-  const customThemeFormik = useFormik({
-    initialValues: {
-      type: user.customTheme?.type || 'dark',
-      primary: user.customTheme?.primary || '',
-      secondary: user.customTheme?.secondary || '',
-      error: user.customTheme?.error || '',
-      warning: user.customTheme?.warning || '',
-      info: user.customTheme?.info || '',
-      border: user.customTheme?.border || '',
-      mainBackground: user.customTheme?.mainBackground || '',
-      paperBackground: user.customTheme?.paperBackground || '',
-    },
-    validationSchema: themeValidationSchema,
-    onSubmit: async values => {
-      setLoading(true);
-      const newUser = await useFetch('/api/user', 'PATCH', { customTheme: values });
+  const onSubmit = async values => {
+    const cleanUsername = values.username.trim();
+    const cleanPassword = values.password.trim();
+    const cleanEmbedTitle = values.embedTitle.trim();
+    const cleanEmbedColor = values.embedColor.trim();
+    const cleanEmbedSiteName = values.embedSiteName.trim();
 
-      if (newUser.error) {
-        setLoading(false);
-        setMessage('An error occured');
-        setSeverity('error');
-        setOpen(true);
-      } else {
-        dispatch(updateUser(newUser));
-        router.replace(router.pathname);
-        setLoading(false);
-        setMessage('Saved theme');
-        setSeverity('success');
-        setOpen(true);
-      }
+    if (cleanUsername === '') return form.setFieldError('username', 'Username can\'t be nothing');
+
+    const data = {
+      username: cleanUsername,
+      password: cleanPassword === '' ? null : cleanPassword,
+      embedTitle: cleanEmbedTitle === '' ? null : cleanEmbedTitle,
+      embedColor: cleanEmbedColor === '' ? null : cleanEmbedColor,
+      embedSiteName: cleanEmbedSiteName === '' ? null : cleanEmbedSiteName,
+    };
+
+    const newUser = await useFetch('/api/user', 'PATCH', data);
+
+    if (newUser.error) {
+    } else {
+      dispatch(updateUser(newUser));
     }
-  });
+  };
 
   return (
     <>
-      <Backdrop open={loading}/>
-      <Alert open={open} setOpen={setOpen} message={message} severity={severity} />
-
-      <Typography variant='h4' pb={2}>Manage User</Typography>
-      <form onSubmit={formik.handleSubmit}>
-        <TextInput id='username' label='Username' formik={formik} />
-        <TextInput id='password' label='Password' formik={formik} type='password' />
-        <TextInput id='embedTitle' label='Embed Title' formik={formik} />
-        <TextInput id='embedColor' label='Embed Color' formik={formik} />
-        <Box
-          display='flex'
-          justifyContent='right'
-          alignItems='right'
-          pt={2}
-        >
+      <Title>Manage User</Title>
+      <VarsTooltip>
+        <Text color='gray'>Want to use variables in embed text? Hover on this or visit <Link href='https://zipline.diced.cf/docs/variables'>the docs</Link> for more variables</Text>
+      </VarsTooltip>
+      <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+        <TextInput id='username' label='Username' {...form.getInputProps('username')} />
+        <TextInput id='password' label='Password'type='password' {...form.getInputProps('password')} />
+        <TextInput id='embedTitle' label='Embed Title' {...form.getInputProps('embedTitle')} />
+        <ColorInput id='embedColor' label='Embed Color' {...form.getInputProps('embedColor')} />
+        <TextInput id='embedSiteName' label='Embed Site Name' {...form.getInputProps('embedSiteName')} />
+        <Group position='right' sx={{ paddingTop: 12 }}>
           <Button
-            variant='contained'
             type='submit'
           >Save User</Button>
-        </Box>
+        </Group>
       </form>
-      <Typography variant='h4' py={2}>Manage Theme</Typography>
-      <form onSubmit={customThemeFormik.handleSubmit}>
-        <Select
-          id='type'
-          name='type'
-          label='Type'
-          value={customThemeFormik.values['type']}
-          onChange={customThemeFormik.handleChange}
-          error={customThemeFormik.touched['type'] && Boolean(customThemeFormik.errors['type'])}
-          variant='standard'
-          fullWidth
-        >
-          <MenuItem value='dark'>Dark Theme</MenuItem>
-          <MenuItem value='light'>Light Theme</MenuItem>
-        </Select>
-        <TextInput id='primary' label='Primary Color' formik={customThemeFormik} />
-        <TextInput id='secondary' label='Secondary Color' formik={customThemeFormik} />
-        <TextInput id='error' label='Error Color' formik={customThemeFormik} />
-        <TextInput id='warning' label='Warning Color' formik={customThemeFormik} />
-        <TextInput id='info' label='Info Color' formik={customThemeFormik} />
-        <TextInput id='border' label='Border Color' formik={customThemeFormik} />
-        <TextInput id='mainBackground' label='Main Background' formik={customThemeFormik} />
-        <TextInput id='paperBackground' label='Paper Background' formik={customThemeFormik} />
-        <Box
-          display='flex'
-          justifyContent='right'
-          alignItems='right'
-          pt={2}
-        >
-          <Button
-            variant='contained'
-            type='submit'
-          >Save Theme</Button>
-        </Box>
-      </form>
-      <Typography variant='h4' py={2}>ShareX Config</Typography>
-      <Button variant='contained' onClick={() => genShareX(false)} startIcon={<Download />}>ShareX Config</Button>
-      <Button variant='contained' sx={{ marginLeft: 1 }} onClick={() => genShareX(true)} startIcon={<Download />}>ShareX Config with Embed</Button>
-      <Button variant='contained' sx={{ marginLeft: 1 }} onClick={() => genShareX(false, true)} startIcon={<Download />}>ShareX Config with ZWS</Button>
+
+      <Title sx={{ paddingTop: 12, paddingBottom: 12 }}>ShareX Config</Title>
+      <Group>
+        <Button onClick={() => genShareX(false)} rightIcon={<DownloadIcon />}>ShareX Config</Button>
+        <Button onClick={() => genShareX(true)} rightIcon={<DownloadIcon />}>ShareX Config with Embed</Button>
+        <Button onClick={() => genShareX(false, true)} rightIcon={<DownloadIcon />}>ShareX Config with ZWS</Button>
+      </Group>
     </>
   );
 }

src/components/pages/Stats.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+
+import Card from 'components/Card';
+import Image from 'components/Image';
+import ImagesTable from 'components/ImagesTable';
+import useFetch from 'lib/hooks/useFetch';
+import { useStoreSelector } from 'lib/redux/store';
+import { Box, Text, Table, Skeleton, Title, SimpleGrid } from '@mantine/core';
+import { randomId, useClipboard } from '@mantine/hooks';
+import Link from 'components/Link';
+import { CopyIcon, Cross1Icon, TrashIcon } from '@modulz/radix-icons';
+import { useNotifications } from '@mantine/notifications';
+
+type Aligns = 'inherit' | 'right' | 'left' | 'center' | 'justify';
+
+export function bytesToRead(bytes: number) {
+  if (isNaN(bytes)) return '0.0 B';
+  if (bytes === Infinity) return '0.0 B';
+  const units = ['B', 'kB', 'MB', 'GB', 'TB', 'PB'];
+  let num = 0;
+
+  while (bytes > 1024) {
+    bytes /= 1024;
+    ++num;
+  }
+
+  return `${bytes.toFixed(1)} ${units[num]}`;
+}
+
+function StatText({ children }) {
+  return <Text color='gray' size='xl'>{children}</Text>;
+}
+
+function StatTable({ 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>
+  );
+}
+
+export default function Dashboard() {
+  const user = useStoreSelector(state => state.user);
+
+  const [stats, setStats] = useState(null);
+
+  const update = async () => {
+    const stts = await useFetch('/api/stats');
+    setStats(stts);
+  };
+
+  useEffect(() => {
+    update();
+  }, []);
+  
+  return (
+    <>
+      <Title>Stats</Title>
+      <SimpleGrid
+        cols={3}
+        spacing='lg'
+        breakpoints={[
+          { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+        ]}
+      >
+        <Card name='Size' sx={{ height: '100%' }}>
+          <StatText>{stats ? stats.size : <Skeleton height={8} />}</StatText>
+          <Title order={2}>Average Size</Title>
+          <StatText>{stats ? bytesToRead(stats.size_num / stats.count) : <Skeleton height={8} />}</StatText>
+        </Card>
+        <Card name='Images' sx={{ height: '100%' }}>
+          <StatText>{stats ? stats.count : <Skeleton height={8} />}</StatText>
+          <Title order={2}>Views</Title>
+          <StatText>{stats ? `${stats.views_count} (${isNaN(stats.views_count / stats.count) ? 0 : Math.round(stats.views_count / stats.count)})` : <Skeleton height={8} />}</StatText>
+        </Card>
+        <Card name='Users' sx={{ height: '100%' }}>
+          <StatText>{stats ? stats.count_users : <Skeleton height={8} />}</StatText>
+        </Card>
+      </SimpleGrid>
+
+      <Card name='Files per User' mt={22}>
+        <StatTable
+          columns={[
+            { id: 'username', name: 'Name' },
+            { id: 'count', name: 'Files' },
+          ]}
+          rows={stats ? stats.count_by_user : []} />
+      </Card>
+      <Card name='Types' mt={22}>
+        <StatTable
+          columns={[
+            { id: 'mimetype', name: 'Type' },
+            { id: 'count', name: 'Count' },
+          ]}
+          rows={stats ? stats.types_count : []} />
+      </Card>
+    </>
+  );
+}

src/components/pages/Upload.tsx

@@ -1,96 +1,120 @@
-import React, { useState } from 'react';
-import { Typography, Button, CardActionArea, Paper, Box } from '@material-ui/core';
-import { Upload as UploadIcon } from '@material-ui/icons';
-import Dropzone from 'react-dropzone';
+import React, { useEffect, useState } from 'react';
 
-import Backdrop from 'components/Backdrop';
-import Alert from 'components/Alert';
 import { useStoreSelector } from 'lib/redux/store';
-import CenteredBox from 'components/CenteredBox';
-import copy from 'copy-to-clipboard';
 import Link from 'components/Link';
+import { Button, Group, Text, useMantineTheme } from '@mantine/core';
+import { ImageIcon, UploadIcon, CrossCircledIcon } from '@modulz/radix-icons';
+import { Dropzone } from '@mantine/dropzone';
+import { useNotifications } from '@mantine/notifications';
+import { useClipboard } from '@mantine/hooks';
+
+function ImageUploadIcon({ status, ...props }) {
+  if (status.accepted) {
+    return <UploadIcon {...props} />;
+  }
+
+  if (status.rejected) {
+    return <CrossCircledIcon {...props} />;
+  }
+
+  return <ImageIcon {...props} />;
+}
+
+function getIconColor(status, theme) {
+  return status.accepted
+    ? theme.colors[theme.primaryColor][6]
+    : status.rejected
+      ? theme.colors.red[6]
+      : theme.colorScheme === 'dark'
+        ? theme.colors.dark[0]
+        : theme.black;
+}
 
 export default function Upload({ route }) {
+  const theme = useMantineTheme();
+  const notif = useNotifications();
+  const clipboard = useClipboard();
   const user = useStoreSelector(state => state.user);
 
   const [files, setFiles] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [open, setOpen] = useState(false);
-  const [severity, setSeverity] = useState('success');
-  const [message, setMessage] = useState('Saved');
+
+  useEffect(() => {
+    window.addEventListener('paste', (e: ClipboardEvent) => {
+      const item = Array.from(e.clipboardData.items).find(x => /^image/.test(x.type));
+      const blob = item.getAsFile();
+      setFiles([...files, new File([blob], blob.name, { type: blob.type })]);
+      notif.showNotification({
+        title: 'Image Imported',
+        message: '',
+      });
+    });
+  });
   
   const handleUpload = async () => {
     const body = new FormData();
-
     for (let i = 0; i !== files.length; ++i) body.append('file', files[i]);
 
-    setLoading(true);
+    const id = notif.showNotification({
+      title: 'Uploading Images...',
+      message: '',
+      loading: true,
+    });
+
     const res = await fetch('/api/upload', {
       method: 'POST',
       headers: {
-        'Authorization': user.token
+        'Authorization': user.token,
       },
-      body
+      body,
     });
     const json = await res.json();
     if (res.ok && json.error === undefined) {
-      setOpen(true);
-      setSeverity('success');
-
-      //@ts-ignore
-      setMessage(<>Copied first image to clipboard! <br/>{json.files.map(x => (<Link key={x} href={x}>{x}<br/></Link>))}</>);
-      copy(json.url);
+      notif.updateNotification(id, {
+        title: 'Upload Successful',
+        message: <>Copied first image to clipboard! <br/>{json.files.map(x => (<Link key={x} href={x}>{x}<br/></Link>))}</>,
+        color: 'green',
+        icon: <UploadIcon />,
+      });
+      clipboard.copy(json.url);
       setFiles([]);
     } else {
-      setOpen(true);
-      setSeverity('error');
-      setMessage('Could not upload file: ' + json.error);
+      notif.updateNotification(id, {
+        title: 'Upload Failed',
+        message: json.error,
+        color: 'red',
+        icon: <CrossCircledIcon />,
+      });
     }
-    setLoading(false);
   };
 
   return (
     <>
-      <Backdrop open={loading}/>
-      <Alert open={open} setOpen={setOpen} message={message} severity={severity} />
+      <Dropzone
+        onDrop={(f) => setFiles([...files, ...f])}
+      >
+        {(status) => (
+          <>
+            <Group position='center' spacing='xl' style={{ minHeight: 220, pointerEvents: 'none' }}>
+              <ImageUploadIcon
+                status={status}
+                style={{ width: 80, height: 80, color: getIconColor(status, theme) }}
+              />
 
-      <Typography variant='h4' pb={2}>Upload file</Typography>
-      <Dropzone onDrop={acceptedFiles => setFiles([...files, ...acceptedFiles])}>
-        {({getRootProps, getInputProps}) => (
-          <CardActionArea>
-            <Paper 
-              elevation={0}
-              variant='outlined'
-              sx={{
-                justifyContent: 'center',
-                alignItems: 'center',
-                display: 'block',
-                p: 5
-              }}
-              {...getRootProps()}
-            >
-              <input {...getInputProps()} />
-              <CenteredBox><UploadIcon sx={{ fontSize: 100 }} /></CenteredBox>
-              <CenteredBox><Typography variant='h5'>Drag an image or click to upload an image.</Typography></CenteredBox>
-              {files.map(file => (
-                <CenteredBox key={file.name}><Typography variant='h6'>{file.name}</Typography></CenteredBox>
-              ))}
-            </Paper>
-          </CardActionArea>
+              <div>
+                <Text size='xl' inline>
+                  Drag images here or click to select files
+                </Text>
+              </div>
+            </Group>
+            <Group position='center' spacing='xl' style={{ pointerEvents: 'none' }}>
+              {files.map(file => (<Text key={file.name} weight='bold'>{file.name}</Text>))}
+            </Group>
+          </>
         )}
       </Dropzone>
-
-      <Box
-        display='flex'
-        justifyContent='right'
-        alignItems='right'
-        pt={2}
-      >
-        <Button
-          variant='contained'
-          onClick={handleUpload}
-        >Upload</Button>
-      </Box>
+      <Group position='right'>
+        <Button leftIcon={<UploadIcon />} mt={12} onClick={handleUpload}>Upload</Button>
+      </Group>
     </>
   );
 }

src/components/pages/Urls.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+
+import useFetch from 'hooks/useFetch';
+import { useStoreSelector } from 'lib/redux/store';
+import { useClipboard, useForm } from '@mantine/hooks';
+import { CopyIcon, Cross1Icon, Link1Icon, PlusIcon, TrashIcon } from '@modulz/radix-icons';
+import { useNotifications } from '@mantine/notifications';
+import { Modal, Title, Group, Button, Box, Card, TextInput, ActionIcon, SimpleGrid, Skeleton } from '@mantine/core';
+
+export default function Urls() {
+  const user = useStoreSelector(state => state.user);
+  const notif = useNotifications();
+  const clipboard = useClipboard();
+
+  const [urls, setURLS] = useState([]);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const updateURLs = async () => {
+    const urls = await useFetch('/api/user/urls');
+
+    setURLS(urls);
+  };
+
+  const deleteURL = async u => {
+    const url = await useFetch('/api/user/urls', 'DELETE', { id: u.id });
+    if (url.error) {
+      notif.showNotification({
+        title: 'Failed to delete URL',
+        message: url.error,
+        icon: <TrashIcon />,
+        color: 'red',
+      });
+    } else {
+      notif.showNotification({
+        title: 'Deleted URL',
+        message: '',
+        icon: <Cross1Icon />,
+        color: 'green',
+      });
+    }
+
+    updateURLs();
+  };
+
+  const copyURL = u => {
+    clipboard.copy(`${window.location.protocol}//${window.location.host}${u.url}`);
+    notif.showNotification({
+      title: 'Copied to clipboard',
+      message: '',
+      icon: <CopyIcon />,
+    });
+  };
+
+  const form = useForm({
+    initialValues: {
+      url: '',
+      vanity: '',
+    },
+  });
+
+  const onSubmit = async (values) => {
+    const cleanURL = values.url.trim();
+    const cleanVanity = values.vanity.trim();
+
+    if (cleanURL === '') return form.setFieldError('url', 'URL can\'t be nothing');
+
+    const data = {
+      url: cleanURL,
+      vanity: cleanVanity === '' ? null : cleanVanity,
+    };
+
+    setCreateOpen(false);
+    const res = await fetch('/api/shorten', {
+      method: 'POST',
+      headers: {
+        'Authorization': user.token,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+    const json = await res.json();
+
+    if (json.error) {
+      notif.showNotification({
+        title: 'Failed to create URL',
+        message: json.error,
+        color: 'red',
+        icon: <Cross1Icon />,
+      });
+    } else {
+      notif.showNotification({
+        title: 'URL shortened',
+        message: json.url,
+        color: 'green',
+        icon: <Link1Icon />,
+      });
+    }
+
+    updateURLs();
+  };
+
+  useEffect(() => {
+    updateURLs();
+  }, []);
+
+  return (
+    <>
+      <Modal
+        opened={createOpen}
+        onClose={() => setCreateOpen(false)}
+        title={<Title>Shorten URL</Title>}
+      >
+        <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+          <TextInput id='url' label='URL' {...form.getInputProps('url')} />
+          <TextInput id='vanity' label='Vanity' {...form.getInputProps('vanity')} />
+
+          <Group position='right' mt={22}>
+            <Button onClick={() => setCreateOpen(false)}>Cancel</Button>
+            <Button type='submit'>Submit</Button>
+          </Group>
+        </form>
+      </Modal>
+
+      <Group>
+        <Title sx={{ marginBottom: 12 }}>URLs</Title>
+        <ActionIcon variant='filled' color='primary' onClick={() => setCreateOpen(true)}><PlusIcon/></ActionIcon>
+      </Group>
+
+      <SimpleGrid
+        cols={4}
+        spacing='lg'
+        breakpoints={[
+          { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+        ]}
+      >
+        {urls.length ? urls.map(url => (
+          <Card key={url.id} sx={{ maxWidth: '100%' }} shadow='sm'>
+            <Group position='apart'>
+              <Group position='left'>
+                <Title>{url.vanity ?? url.id}</Title>
+              </Group>
+              <Group position='right'>
+                <ActionIcon href={url.url} component='a' target='_blank'><Link1Icon/></ActionIcon>
+                <ActionIcon aria-label='copy' onClick={() => copyURL(url)}>
+                  <CopyIcon />
+                </ActionIcon>
+                <ActionIcon aria-label='delete' onClick={() => deleteURL(url)}>
+                  <TrashIcon />
+                </ActionIcon>
+              </Group>
+            </Group>
+          </Card>
+        )) : [1,2,3,4,5,6,7].map(x => (
+          <div key={x}>
+            <Skeleton width='100%' height={60} sx={{ borderRadius: 1 }}/>
+          </div>
+        ))}
+      </SimpleGrid>
+    </>
+  );
+}

src/components/pages/Users.tsx

@@ -1,168 +1,115 @@
 import React, { useState, useEffect } from 'react';
-import {
-  Typography,
-  Card as MuiCard,
-  CardHeader,
-  Avatar,
-  IconButton,
-  Grid,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  TextField,
-  Switch,
-  FormControlLabel
-} from '@material-ui/core';
-import { Delete as DeleteIcon, Add as AddIcon } from '@material-ui/icons';
 
 import { useStoreSelector } from 'lib/redux/store';
-import Backdrop from 'components/Backdrop';
-import Alert from 'components/Alert';
 import useFetch from 'hooks/useFetch';
 import { useRouter } from 'next/router';
-import { useFormik } from 'formik';
+import { useForm } from '@mantine/hooks';
+import { Avatar, Modal, Title, TextInput, Group, Button, Card, Grid, ActionIcon, SimpleGrid, Switch, Skeleton } from '@mantine/core';
+import { Cross1Icon, PlusIcon, TrashIcon } from '@modulz/radix-icons';
+import { useNotifications } from '@mantine/notifications';
 
-function Card({ user, handleDelete }) {
-  return (
-    <MuiCard sx={{ minWidth: 270 }}>
-      <CardHeader 
-        avatar={<Avatar>{user.username[0]}</Avatar>}
-        action={<IconButton onClick={() => handleDelete(user)}><DeleteIcon /></IconButton>}
-        title={<Typography variant='h6'>{user.username}</Typography>}
-      />
-    </MuiCard>
-  );
-}
 
-function TextInput({ id, label, formik, ...other }) {
-  return (
-    <TextField
-      id={id}
-      name={id}
-      label={label}
-      value={formik.values[id]}
-      onChange={formik.handleChange}
-      error={formik.touched[id] && Boolean(formik.errors[id])}
-      helperText={formik.touched[id] && formik.errors[id]}
-      variant='standard'
-      fullWidth
-      sx={{ pb: 0.5 }}
-      {...other}
-    />
-  );
-}
-
-function CreateUserDialog({ open, setOpen, updateUsers, setSeverity, setMessage, setLoading, setAlertOpen }) {
-  const formik = useFormik({
+function CreateUserModal({ open, setOpen, updateUsers }) {
+  const form = useForm({
     initialValues: {
       username: '',
       password: '',
-      administrator: false
+      administrator: false,
     },
-    onSubmit: async (values) => {
-      const cleanUsername = values.username.trim();
-      const cleanPassword = values.password.trim();
-      if (cleanUsername === '') return formik.setFieldError('username', 'Username can\'t be nothing');
-      if (cleanPassword === '') return formik.setFieldError('password', 'Password can\'t be nothing');
-
-      const data = {
-        username: cleanUsername,
-        password: cleanPassword,
-        administrator: values.administrator
-      };
-
-      setOpen(false);
-      setLoading(true);
-      const res = await useFetch('/api/auth/create', 'POST', data);
-      if (res.error) {
-        setSeverity('error');
-        setMessage('Could\'nt create user: ' + res.error);
-        setAlertOpen(true);
-      } else {
-        setSeverity('success');
-        setMessage('Created user ' + res.username);
-        setAlertOpen(true);
-        updateUsers();
-      }
-      setLoading(false);
-    }
   });
+  const notif = useNotifications();
+
+  const onSubmit = async (values) => {
+    const cleanUsername = values.username.trim();
+    const cleanPassword = values.password.trim();
+    if (cleanUsername === '') return form.setFieldError('username', 'Username can\'t be nothing');
+    if (cleanPassword === '') return form.setFieldError('password', 'Password can\'t be nothing');
+
+    const data = {
+      username: cleanUsername,
+      password: cleanPassword,
+      administrator: values.administrator,
+    };
+
+    setOpen(false);
+    const res = await useFetch('/api/auth/create', 'POST', data);
+    if (res.error) {
+      notif.showNotification({
+        title: 'Failed to create user',
+        message: res.error,
+        icon: <TrashIcon />,
+        color: 'red',
+      });
+    } else {
+      notif.showNotification({
+        title: 'Created user: ' + cleanUsername,
+        message: '',
+        icon: <PlusIcon />,
+        color: 'green',
+      });
+    }
+
+    updateUsers();
+  };
   
   return (
-    <div>
-      <Dialog
-        open={open}
-        onClose={() => setOpen(false)}
-        PaperProps={{
-          elevation: 1
-        }}
-      >
-        <DialogTitle>
-          Create User
-        </DialogTitle>
-        <form onSubmit={formik.handleSubmit}>
-          <DialogContent>
-            <TextInput id='username' label='Username' formik={formik} />
-            <TextInput id='password' label='Password' formik={formik} type='password' />
-            <FormControlLabel
-              id='administrator'
-              name='administrator'
-              value={formik.values.administrator}
-              onChange={formik.handleChange}
-              control={<Switch  />}
-              label='Administrator?'
-            />
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => setOpen(false)} color='inherit' autoFocus>Cancel</Button>
-            <Button type='submit' color='inherit'>
-              Create
-            </Button>
-          </DialogActions>
-        </form>
-      </Dialog>
-    </div>
+    <Modal
+      opened={open}
+      onClose={() => setOpen(false)}
+      title={<Title>Create User</Title>}
+    >
+      <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+        <TextInput id='username' label='Username' {...form.getInputProps('username')} />
+        <TextInput id='password' label='Password' type='password' {...form.getInputProps('password')} />
+        <Switch mt={12} id='administrator' label='Administrator' {...form.getInputProps('administrator')} />
+
+        <Group position='right' mt={22}>
+          <Button onClick={() => setOpen(false)}>Cancel</Button>
+          <Button type='submit'>Create</Button>
+        </Group>
+      </form>
+    </Modal>
   );
 }
 
 export default function Users() {
   const user = useStoreSelector(state => state.user);
   const router = useRouter();
+  const notif = useNotifications();
 
   const [users, setUsers] = useState([]);
   const [open, setOpen] = useState(false);
-  const [createOpen, setCreateOpen] = useState(false);
-  const [severity, setSeverity] = useState('success');
-  const [message, setMessage] = useState('Saved');
-  const [loading, setLoading] = useState(true);
 
   const updateUsers = async () => {
-    setLoading(true);
     const us = await useFetch('/api/users');
     if (!us.error) {
       setUsers(us);
     } else {
       router.push('/dashboard');
     };
-    setLoading(false);
   };
 
   const handleDelete = async (user) => {
     const res = await useFetch('/api/users', 'DELETE', {
-      id: user.id
+      id: user.id,
     });
     if (res.error) {
-      setMessage(`Could not delete ${user.username}`);
-      setSeverity('error');
-      setOpen(true);
+      notif.showNotification({
+        title: 'Failed to delete user',
+        message: res.error,
+        color: 'red',
+        icon: <Cross1Icon />,
+      });
     } else {
-      setMessage(`Deleted user ${res.username}`);
-      setSeverity('success');
-      setOpen(true);
-      updateUsers();
+      notif.showNotification({
+        title: 'User deleted',
+        message: '',
+        color: 'green',
+        icon: <TrashIcon />,
+      });
     }
+
+    updateUsers();
   };
 
   useEffect(() => {
@@ -171,17 +118,38 @@ export default function Users() {
 
   return (
     <>
-      <Backdrop open={loading}/>
-      <Alert open={open} setOpen={setOpen} message={message} severity={severity} />
-      <CreateUserDialog open={createOpen} setOpen={setCreateOpen} setSeverity={setSeverity} setMessage={setMessage} setLoading={setLoading} updateUsers={updateUsers} setAlertOpen={setOpen} />
-      <Typography variant='h4' pb={2}>Users <IconButton onClick={() => setCreateOpen(true)}><AddIcon /></IconButton></Typography>
-      <Grid container spacing={2}>
-        {users.filter(x => x.username !== user.username).map((user, i) => (
-          <Grid item xs={12} sm={3} key={i}>
-            <Card user={user} handleDelete={handleDelete}/>
-          </Grid>
+      <CreateUserModal open={open} setOpen={setOpen} updateUsers={updateUsers} />
+      <Group>
+        <Title sx={{ marginBottom: 12 }}>Users</Title>
+        <ActionIcon variant='filled' color='primary' onClick={() => setOpen(true)}><PlusIcon/></ActionIcon>
+      </Group>
+      <SimpleGrid
+        cols={3}
+        spacing='lg'
+        breakpoints={[
+          { maxWidth: 'sm', cols: 1, spacing: 'sm' },
+        ]}
+      >
+        {users.length ? users.filter(x => x.username !== user.username).map((user, i) => (
+          <Card key={user.id} sx={{ maxWidth: '100%' }}>
+            <Group position='apart'>
+              <Group position='left'>
+                <Avatar  color={user.administrator ? 'primary' : 'dark'}>{user.username[0]}</Avatar>
+                <Title>{user.username}</Title>
+              </Group>
+              <Group position='right'>
+                <ActionIcon aria-label='delete' onClick={() => handleDelete(user)}>
+                  <TrashIcon />
+                </ActionIcon>
+              </Group>
+            </Group>
+          </Card>
+        )): [1,2,3,4].map(x => (
+          <div key={x}>
+            <Skeleton width='100%' height={220} sx={{ borderRadius: 1 }}/>
+          </div>
         ))}
-      </Grid>
+      </SimpleGrid>
     </>
   );
 }

src/lib/clientUtils.ts

@@ -0,0 +1,16 @@
+import { Image, User } from '@prisma/client';
+
+export function parse(str: string, image: Image, user: User) {
+  if (!str) return null;
+
+  return str
+    .replace(/{user.admin}/gi, user.administrator ? 'yes' : 'no')
+    .replace(/{user.id}/gi, user.id.toString())
+    .replace(/{user.name}/gi, user.username)
+    .replace(/{image.id}/gi, image.id.toString())
+    .replace(/{image.mime}/gi, image.mimetype)
+    .replace(/{image.file}/gi, image.file)
+    .replace(/{image.created_at.full_string}/gi, image.created_at.toLocaleString())
+    .replace(/{image.created_at.time_string}/gi, image.created_at.toLocaleTimeString())
+    .replace(/{image.created_at.date_string}/gi, image.created_at.toLocaleDateString());
+}

src/lib/config.ts

@@ -1,6 +1,7 @@
 import type { Config } from './types';
 import readConfig from './readConfig';
+import validateConfig from '../../server/validateConfig';
 
-if (!global.config) global.config = readConfig() as Config;
+if (!global.config) global.config = validateConfig(readConfig()) as unknown as Config;
 
 export default global.config;

src/lib/hooks/useFetch.ts

@@ -5,7 +5,7 @@ export default async function useFetch(url: string, method: 'GET' | 'POST' | 'PA
   const res = await global.fetch(url, {
     body: body ? JSON.stringify(body) : null,
     method,
-    headers
+    headers,
   });
 
   return res.json();

src/lib/hooks/useLogin.ts

@@ -14,21 +14,17 @@ export default function login() {
 
   async function load() {
     setLoading(true);
+    
     const res = await useFetch('/api/user');
-
-    if (res.error) return router.push('/auth/login');
+    if (res.error) return router.push('/auth/login?url=' + router.route);
 
     dispatch(updateUser(res));
-
     setUser(res);
     setLoading(false);
   }
 
   useEffect(() => {
-    if (!loading && user) {
-      return;
-    }
-
+    if (!loading && user) return;
     load();
   }, []);
 

src/lib/logger.js

@@ -1,7 +1,7 @@
 const { format } = require('fecha');
-const { yellow, blueBright, magenta, red, cyan } = require('colorette');
+const { blueBright, red, cyan } = require('colorette');
 
-class Logger {
+module.exports = class Logger {
   static get(clas) {
     if (typeof clas !== 'function') if (typeof clas !== 'string') throw new Error('not string/function');
 
@@ -19,7 +19,7 @@ class Logger {
   }
 
   error(error) {
-    console.log(this.formatMessage('ERROR', this.name, error.toString()));
+    console.log(this.formatMessage('ERROR', this.name, error.stack ?? error));
   }
 
   formatMessage(level, name, message) {
@@ -31,14 +31,8 @@ class Logger {
     switch (level) {
     case 'INFO':
       return cyan('INFO ');
-    case 'DEBUG':
-      return yellow('DEBUG');
-    case 'WARN':
-      return magenta('WARN ');
     case 'ERROR':
       return red('ERROR');
     }
   }
-}
-
-module.exports = Logger;
+};

src/lib/middleware/withZipline.ts

@@ -1,6 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import type { CookieSerializeOptions } from 'cookie';
-import type { Image, Theme, User } from '@prisma/client';
 
 import { serialize } from 'cookie';
 import { sign64, unsign64 } from '../util';
@@ -23,7 +22,6 @@ export type NextApiReq = NextApiRequest & {
     embedTitle: string;
     embedColor: string;
     systemTheme: string;
-    customTheme?: Theme;
     administrator: boolean;
     id: number;
     password: string;
@@ -38,14 +36,19 @@ export type NextApiRes = NextApiResponse & {
   forbid: (message: string) => void;
   bad: (message: string) => void;
   json: (json: any) => void;
+  ratelimited: () => void;
   setCookie: (name: string, value: unknown, options: CookieSerializeOptions) => void;
 }
 
 export const withZipline = (handler: (req: NextApiRequest, res: NextApiResponse) => unknown) => (req: NextApiReq, res: NextApiRes) => {
+  res.setHeader('Content-Type', 'application/json');
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Content-Allow-Methods', 'GET,HEAD,POST,OPTIONS');
+  res.setHeader('Access-Control-Max-Age', '86400');
+
   res.error = (message: string) => {
-    res.setHeader('Content-Type', 'application/json');
     res.json({
-      error: message
+      error: message,
     });
   };
 
@@ -53,21 +56,26 @@ export const withZipline = (handler: (req: NextApiRequest, res: NextApiResponse)
     res.setHeader('Content-Type', 'application/json');
     res.status(403);
     res.json({
-      error: '403: ' + message
+      error: '403: ' + message,
     });
   };
 
   res.bad = (message: string) => {
-    res.setHeader('Content-Type', 'application/json');
     res.status(401);
     res.json({
-      error: '403: ' + message
+      error: '403: ' + message,
+    });
+  };
+
+  res.ratelimited = () => {
+    res.status(429);
+
+    res.json({
+      error: '429: ratelimited',
     });
   };
 
   res.json = (json: any) => {
-    res.setHeader('Content-Type', 'application/json');
-
     res.end(JSON.stringify(json));
   };
 
@@ -82,7 +90,7 @@ export const withZipline = (handler: (req: NextApiRequest, res: NextApiResponse)
     res.setHeader('Set-Cookie', serialize(name, '', {
       path: '/',
       expires: new Date(1),
-      maxAge: undefined
+      maxAge: undefined,
     }));
   };
   req.user = async () => {
@@ -92,7 +100,7 @@ export const withZipline = (handler: (req: NextApiRequest, res: NextApiResponse)
       
       const user = await prisma.user.findFirst({
         where: {
-          id: Number(userId)
+          id: Number(userId),
         },
         select: {
           administrator: true,
@@ -101,10 +109,9 @@ export const withZipline = (handler: (req: NextApiRequest, res: NextApiResponse)
           id: true,
           password: true,
           systemTheme: true,
-          customTheme: true,
           token: true,
-          username: true
-        }
+          username: true,
+        },
       });
 
       if (!user) return null;
@@ -130,11 +137,11 @@ export const setCookie = (
 ) => {
   
   if ('maxAge' in options) {
-    options.expires = new Date(Date.now() + options.maxAge);
+    options.expires = new Date(Date.now() + options.maxAge * 1000);
     options.maxAge /= 1000;
   }
 
   const signed = sign64(String(value), config.core.secret);
 
   res.setHeader('Set-Cookie', serialize(name, signed, options));
-};
+};

src/lib/prisma.ts

@@ -1,5 +1,7 @@
 import { PrismaClient } from '@prisma/client';
 
-if (!global.prisma) global.prisma = new PrismaClient();
+if (!global.prisma) {
+  if (!process.env.ZIPLINE_DOCKER_BUILD) global.prisma = new PrismaClient();
+};
 
 export default global.prisma;

src/lib/readConfig.js

@@ -1,8 +1,9 @@
 const { existsSync, readFileSync } = require('fs');
 const { join } = require('path');
-const Logger = require('./logger');
+const parse = require('@iarna/toml/parse-string.js');
+const Logger = require('./logger.js');
 
-const e = (val, type, fn, required = true) => ({ val, type, fn, required });
+const e = (val, type, fn) => ({ val, type, fn });
 
 const envValues = [
   e('SECURE', 'boolean', (c, v) => c.core.secure = v),
@@ -10,22 +11,33 @@ const envValues = [
   e('HOST', 'string', (c, v) => c.core.host = v),
   e('PORT', 'number', (c, v) => c.core.port = v),
   e('DATABASE_URL', 'string', (c, v) => c.core.database_url = v),
+  e('LOGGER', 'boolean', (c, v) => c.core.logger = v ?? true),
+  e('STATS_INTERVAL', 'number', (c, v) => c.core.stats_interval = v),
+
   e('UPLOADER_ROUTE', 'string', (c, v) => c.uploader.route = v),
   e('UPLOADER_LENGTH', 'number', (c, v) => c.uploader.length = v),
   e('UPLOADER_DIRECTORY', 'string', (c, v) => c.uploader.directory = v),
   e('UPLOADER_ADMIN_LIMIT', 'number', (c, v) => c.uploader.admin_limit = v),
   e('UPLOADER_USER_LIMIT', 'number', (c, v) => c.uploader.user_limit = v),
-  e('UPLOADER_DISABLED_EXTS', 'array', (c, v) => v ? c.uploader.disabled_extentions = v : c.uploader.disabled_extentions = [], false),
+  e('UPLOADER_DISABLED_EXTS', 'array', (c, v) => v ? c.uploader.disabled_extentions = v : c.uploader.disabled_extentions = []),
+
+  e('URLS_ROUTE', 'string', (c, v) => c.urls.route = v),
+  e('URLS_LENGTH', 'number', (c, v) => c.urls.length = v),
+
+  e('RATELIMIT_USER', 'number', (c, v) => c.ratelimit.user = v ?? 0),
+  e('RATELIMIT_ADMIN', 'number', (c, v) => c.ratelimit.user = v ?? 0),
 ];
 
-module.exports = () => {
+module.exports = function readConfig() {
   if (!existsSync(join(process.cwd(), 'config.toml'))) {
-    Logger.get('config').info('reading environment');
+    if (!process.env.ZIPLINE_DOCKER_BUILD) Logger.get('config').info('reading environment');
     return tryReadEnv();
   } else {
+    if (process.env.ZIPLINE_DOCKER_BUILD) return;
+    
     Logger.get('config').info('reading config file');
     const str = readFileSync(join(process.cwd(), 'config.toml'), 'utf8');
-    const parsed = require('@iarna/toml/parse-string')(str);
+    const parsed = parse(str);
 
     return parsed;
   }
@@ -39,6 +51,8 @@ function tryReadEnv() {
       host: undefined,
       port: undefined,
       database_url: undefined,
+      logger: undefined,
+      stats_interval: undefined,
     },
     uploader: {
       route: undefined,
@@ -46,29 +60,32 @@ function tryReadEnv() {
       directory: undefined,
       admin_limit: undefined,
       user_limit: undefined,
-      disabled_extentions: undefined
-    }
+      disabled_extentions: undefined,
+    },
+    urls: {
+      route: undefined,
+      length: undefined,
+    },
+    ratelimit: {
+      user: undefined,
+      admin: undefined,
+    },
   };
 
   for (let i = 0, L = envValues.length; i !== L; ++i) {
     const envValue = envValues[i];
     let value = process.env[envValue.val];
 
-    if (envValue.required && !value) {
-      Logger.get('config').error(`there is no config file or required environment variables (${envValue.val})... exiting...`);
-
-      process.exit(1);
-    }
-
-    envValues[i].fn(config, value);
-    if (envValue.required) {
+    if (!value) {
+      envValues[i].fn(config, undefined);
+    } else {
+      envValues[i].fn(config, value);
       if (envValue.type === 'number') value = parseToNumber(value);
       else if (envValue.type === 'boolean') value = parseToBoolean(value);
       else if (envValue.type === 'array') value = parseToArray(value);
       envValues[i].fn(config, value);
     }
   }
-
   return config;
 }
 

src/lib/redux/reducers/user.ts

@@ -1,4 +1,3 @@
-import { Theme } from '@prisma/client';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 export interface User {
@@ -6,8 +5,8 @@ export interface User {
   token: string;
   embedTitle: string;
   embedColor: string;
+  embedSiteName: string;
   systemTheme: string;
-  customTheme?: Theme;
 }
 
 const initialState: User = null;

src/lib/themes/ayu_dark.ts

@@ -3,15 +3,36 @@
 import createTheme from '.';
 
 export default createTheme({
-  type: 'dark',
-  primary: '#E6B450',
-  secondary: '#FFEE99',
-  error: '#F07178',
-  warning: '#F29668',
-  info: '#95E6CB',
-  border: '#191e29',
-  background: {
-    main: '#0A0E14',
-    paper: '#0D1016'
-  }
+  colorScheme: 'dark',
+  primaryColor: 'orange',
+  other: {
+    AppShell_backgroundColor: '#0a0e14',
+    hover: '#191e29',
+  },
+  colors: {
+    dark: [
+      '#ffffff',
+      '#47494E',
+      '#6c707a',
+      '#33353B',
+      '#303238',
+      '#2C2E34',
+      '#25272D',
+      '#0d1016',
+      '#11141A',
+      '#0D1016',
+    ],
+    orange: [
+      '#FFFFFF',
+      '#FCF6EA',
+      '#F9EDD4',
+      '#F3DAA8',
+      '#F2D69D',
+      '#F0D192',
+      '#EFCC87',
+      '#EDC77C',
+      '#EABE66',
+      '#E6B450',
+    ],
+  },
 });

src/lib/themes/ayu_light.ts

@@ -3,15 +3,24 @@
 import createTheme from '.';
 
 export default createTheme({
-  type: 'light',
-  primary: '#FF9940',
-  secondary: '#E6BA7E',
-  error: '#F07171',
-  warning: '#ED9366',
-  info: '#95E6CB',
-  border: '#e3e3e3',
-  background: {
-    main: '#FAFAFA',
-    paper: '#FFFFFF'
-  }
+  colorScheme: 'light',
+  primaryColor: 'orange',
+  other: {
+    AppShell_backgroundColor: '#FAFAFA',
+    hover: '#FAFAFA',
+  },
+  colors: {
+    orange: [
+      '#FFFFFF',
+      '#FCF6EA',
+      '#F9EDD4',
+      '#F3DAA8',
+      '#F2D69D',
+      '#F0D192',
+      '#EFCC87',
+      '#EDC77C',
+      '#EABE66',
+      '#E6B450',
+    ],
+  },
 });

src/lib/themes/ayu_mirage.ts

@@ -3,15 +3,36 @@
 import createTheme from '.';
 
 export default createTheme({
-  type: 'dark',
-  primary: '#FFCC66',
-  secondary: '#FFD580',
-  error: '#F28779',
-  warning: '#F29E74',
-  info: '#95E6CB',
-  border: '#363c4d',
-  background: {
-    main: '#1F2430',
-    paper: '#232834'
-  }
+  colorScheme: 'dark',
+  primaryColor: 'orange',
+  other: {
+    AppShell_backgroundColor: '#1F2430',
+    hover: '#2a2f3b',
+  },
+  colors: {
+    dark: [
+      '#ffffff',
+      '#91949A',
+      '#6c707a',
+      '#3F434E',
+      '#313641',
+      '#2A2F3B',
+      '#2e333e',
+      '#232834',
+      '#11141A',
+      '#0D1016',
+    ],
+    orange: [
+      '#FFFFFF',
+      '#FCF6EA',
+      '#F9EDD4',
+      '#F3DAA8',
+      '#F2D69D',
+      '#F0D192',
+      '#EFCC87',
+      '#EDC77C',
+      '#EABE66',
+      '#E6B450',
+    ],
+  },
 });

src/lib/themes/dark.ts

@@ -1,15 +1,36 @@
 import createTheme from '.';
 
 export default createTheme({
-  type: 'dark',
-  primary: '#2c39a6',
-  secondary: '#7344e2',
-  error: '#ff4141',
-  warning: '#ff9800',
-  info: '#2f6fb9',
-  border: '#2b2b2b',
-  background: {
-    main: '#000000',
-    paper: '#060606'
-  }
+  colorScheme: 'dark',
+  primaryColor: 'blue',
+  other: {
+    AppShell_backgroundColor: '#000000',
+    hover: '#2b2b2b',
+  },
+  colors: {
+    dark: [
+      '#ffffff',
+      '#A7A9AD',
+      '#7B7E84',
+      '#61646A',
+      '#54575D',
+      '#46494F',
+      '#3C3F44',
+      '#060606',
+      '#141517',
+      '#000000',
+    ],
+    blue: [
+      '#FFFFFF',
+      '#7C7DC2',
+      '#7778C0',
+      '#6C6FBC',
+      '#575DB5',
+      '#4D54B2',
+      '#424BAE',
+      '#3742AA',
+      '#323EA8',
+      '#2C39A6',
+    ],
+  },
 });

src/lib/themes/dark_blue.ts

@@ -1,15 +1,36 @@
 import createTheme from '.';
 
 export default createTheme({
-  type: 'dark',
-  primary: '#2c39a6',
-  secondary: '#7344e2',
-  error: '#ff4141',
-  warning: '#ff9800',
-  info: '#2f6fb9',
-  border: '#1b2541',
-  background: {
-    main: '#05070f',
-    paper: '#0c101c'
-  }
+  colorScheme: 'dark',
+  primaryColor: 'blue',
+  other: {
+    AppShell_backgroundColor: '#05070f',
+    hover: '#181c28',
+  },
+  colors: {
+    dark: [
+      '#FFFFFF',
+      '#293747',
+      '#6C7A8D',
+      '#232F41',
+      '#41566e',
+      '#171F35',
+      '#181c28',
+      '#0c101c',
+      '#060824',
+      '#00001E',
+    ],
+    blue: [
+      '#FFFFFF',
+      '#7C7DC2',
+      '#7778C0',
+      '#6C6FBC',
+      '#575DB5',
+      '#4D54B2',
+      '#424BAE',
+      '#3742AA',
+      '#323EA8',
+      '#2C39A6',
+    ],
+  },
 });

src/lib/themes/dracula.ts

@@ -3,15 +3,36 @@
 import createTheme from '.';
 
 export default createTheme({
-  type: 'dark',
-  primary: '#BD93F9',
-  secondary: '#6272A4',
-  error: '#FF5555',
-  warning: '#FFB86C',
-  info: '#8BE9FD',
-  border: '#7D8096',
-  background: {
-    main: '#282A36',
-    paper: '#44475A'
-  }
-});
+  colorScheme: 'dark',
+  primaryColor: 'violet',
+  other: {
+    AppShell_backgroundColor: '#282A36',
+    hover: '#4e5062',
+  },
+  colors: {
+    dark: [
+      '#FFFFFF',
+      '#CED0D4',
+      '#E8E8EB',
+      '#D1D1D6',
+      '#BABAC2',
+      '#A2A3AD',
+      '#4e5062',
+      '#44475A',
+      '#5C5E6F',
+      '#44475A',
+    ],
+    violet: [
+      '#FFFFFF',
+      '#F7F2FF',
+      '#EFE4FE',
+      '#EBDEFE',
+      '#E7D7FD',
+      '#DEC9FC',
+      '#D6BCFC',
+      '#CEAEFB',
+      '#C6A1FA',
+      '#BD93F9',
+    ],
+  },
+});

src/lib/themes/index.ts

@@ -1,54 +1,5 @@
-import { createTheme as muiCreateTheme } from '@material-ui/core/styles';
+import { MantineThemeOverride } from '@mantine/core';
 
-export interface ThemeOptions {
-  type: 'dark' | 'light';
-  primary: string;
-  secondary: string;
-  error: string;
-  warning: string;
-  info: string;
-  border: string;
-  background: ThemeOptionsBackground;
-}
-
-export interface ThemeOptionsBackground {
-  main: string;
-  paper: string;
-}
-
-export default function createTheme(o: ThemeOptions) {
-  return muiCreateTheme({
-    palette: {
-      mode: o.type,
-      primary: {
-        main: o.primary,
-      },
-      secondary: {
-        main: o.secondary,
-      },
-      background: {
-        default: o.background.main,
-        paper: o.background.paper,
-      },
-      error: {
-        main: o.error,
-      },
-      warning: {
-        main: o.warning,
-      },
-      info: {
-        main: o.info,
-      },
-      divider: o.border,
-    },
-    components: {
-      MuiTableHead: {
-        styleOverrides: {
-          root: {
-            backgroundColor: o.border
-          }
-        }
-      },
-    },
-  });
+export default function createTheme(o: MantineThemeOverride) {
+  return o;
 }

src/lib/themes/light_blue.ts

@@ -0,0 +1,24 @@
+import createTheme from '.';
+
+export default createTheme({
+  colorScheme: 'light',
+  primaryColor: 'blue',
+  other: {
+    AppShell_backgroundColor: '#FAFAFA',
+    hover: '#FAFAFA',
+  },
+  colors: {
+    blue: [
+      '#FFFFFF',
+      '#7C7DC2',
+      '#7778C0',
+      '#6C6FBC',
+      '#575DB5',
+      '#4D54B2',
+      '#424BAE',
+      '#3742AA',
+      '#323EA8',
+      '#2C39A6',
+    ],
+  },
+});

src/lib/themes/matcha_dark_azul.ts

@@ -0,0 +1,36 @@
+import createTheme from '.';
+
+export default createTheme({
+  colorScheme: 'dark',
+  primaryColor: 'blue',
+  other: {
+    AppShell_backgroundColor: '#1b1d24',
+    hover: '#3c3f44',
+  },
+  colors: {
+    dark: [
+      '#FFFFFF',
+      '#C8C8CA',
+      '#F5F5F5',
+      '#909194',
+      '#585A5F',
+      '#4A4D52',
+      '#3C3F44',
+      '#202329',
+      '#272A30',
+      '#202329',
+    ],
+    blue: [
+      '#FFFFFF',
+      '#E6F3FB',
+      '#CDE6F6',
+      '#B4D9F2',
+      '#9ACCED',
+      '#8EC6EB',
+      '#81BFE9',
+      '#67B2E4',
+      '#4EA5E0',
+      '#3498DB',
+    ],
+  },
+});

src/lib/themes/nord.ts

@@ -3,15 +3,36 @@
 import createTheme from '.';
 
 export default createTheme({
-  type: 'dark',
-  primary: '#81A1C1',
-  secondary: '#88C0D0',
-  error: '#BF616A',
-  warning: '#EBCB8B',
-  info: '#5E81AC',
-  border: '#565e70',
-  background: {
-    main: '#2E3440',
-    paper: '#3B4252'
-  }
+  colorScheme: 'dark',
+  primaryColor: 'blue',
+  other: {
+    AppShell_backgroundColor: '#2E3440',
+    hover: '#6c727e',
+  },
+  colors: {
+    dark: [
+      '#FFFFFF',
+      '#CED0D4',
+      '#B6B9BF',
+      '#9DA1A9',
+      '#858A94',
+      '#6C727E',
+      '#606673',
+      '#3B4252',
+      '#484E5D',
+      '#3B4252',
+    ],
+    blue: [
+      '#FFFFFF',
+      '#E0E8F0',
+      '#C0D0E0',
+      '#B9CBDD',
+      '#B1C5D9',
+      '#A1B9D1',
+      '#99B3CD',
+      '#91ADC9',
+      '#89A7C5',
+      '#81A1C1',
+    ],
+  },
 });

src/lib/themes/polar.ts

@@ -1,17 +0,0 @@
-// https://github.com/AlphaNecron/
-// https://github.com/arcticicestudio/nord
-import createTheme from '.';
-
-export default createTheme({
-  type: 'light',
-  primary: '#81A1C1',
-  secondary: '#88C0D0',
-  error: '#BF616A',
-  warning: '#EBCB8B',
-  info: '#5E81AC',
-  border: '#989fab',
-  background: {
-    main: '#D8DEE9',
-    paper: '#E5E9F0'
-  }
-});

src/lib/themes/qogir_dark.ts

@@ -0,0 +1,37 @@
+import createTheme from '.';
+
+export default createTheme({
+  colorScheme: 'dark',
+  primaryColor: 'blue',
+  other: {
+    AppShell_backgroundColor: '#32343d',
+    hover: '#34363d',
+  },
+  colors: {
+    dark: [
+      '#FFFFFF',
+      '#C9CACC',
+      '#F5F5F5',
+      '#78797E',
+      '#5D5E64',
+      '#42434A',
+      '#34363D',
+      '#262830',
+      '#2A2C34',
+      '#262830',
+    ],
+    
+    blue: [
+      '#FFFFFF',
+      '#E6F3FB',
+      '#CDE6F6',
+      '#B4D9F2',
+      '#9ACCED',
+      '#8EC6EB',
+      '#81BFE9',
+      '#67B2E4',
+      '#4EA5E0',
+      '#3498DB',
+    ],
+  },
+});

src/lib/types.ts

@@ -13,6 +13,12 @@ export interface ConfigCore {
 
   // The PostgreSQL database url
   database_url: string
+
+  // Whether or not to log stuff
+  logger: boolean;
+
+  // The interval to store stats
+  stats_interval: number;
 }
 
 export interface ConfigUploader {
@@ -35,7 +41,26 @@ export interface ConfigUploader {
   disabled_extentions: string[];
 }
 
+export interface ConfigUrls {
+  // The route urls will be served on
+  route: string;
+
+  // Length of random chars to generate for urls
+  length: number;
+}
+
+// Ratelimiting for users/admins, setting them to 0 disables ratelimiting
+export interface ConfigRatelimit {
+  // Ratelimit for users
+  user: number;
+
+  // Ratelimit for admins
+  admin: number;
+}
+
 export interface Config {
   core: ConfigCore;
   uploader: ConfigUploader;
-}
+  urls: ConfigUrls;
+  ratelimit: ConfigRatelimit;
+}

src/lib/util.ts

@@ -3,7 +3,8 @@ import { hash, verify } from 'argon2';
 import { readdir, stat } from 'fs/promises';
 import { join } from 'path';
 import prisma from './prisma';
-import { InvisibleImage } from '@prisma/client';
+import { InvisibleImage, InvisibleUrl } from '@prisma/client';
+import config from './config';
 
 export async function hashPassword(s: string): Promise<string> {
   return await hash(s);
@@ -89,21 +90,21 @@ export function bytesToRead(bytes: number) {
   return `${bytes.toFixed(1)} ${units[num]}`;
 }
 
-export function createInvisURL(length: number) {
+export function randomInvis(length: number) {
   // some parts from https://github.com/tycrek/ass/blob/master/generators/lengthGen.js
   const invisibleCharset = ['\u200B', '\u2060', '\u200C', '\u200D'];
   
   return [...randomBytes(length)].map((byte) => invisibleCharset[Number(byte) % invisibleCharset.length]).join('').slice(1).concat(invisibleCharset[0]);
 }
 
-export function createInvis(length: number, imageId: number) {
+export function createInvisImage(length: number, imageId: number) {
   const retry = async (): Promise<InvisibleImage> => {
-    const invis = createInvisURL(length);
+    const invis = randomInvis(length);
 
     const existing = await prisma.invisibleImage.findUnique({
       where: {
-        invis
-      }
+        invis,
+      },
     });
 
     if (existing) return retry();
@@ -111,12 +112,37 @@ export function createInvis(length: number, imageId: number) {
     const inv = await prisma.invisibleImage.create({
       data: {
         invis,
-        imageId
-      }
+        imageId,
+      },
     });
 
     return inv;
   };
 
+  return retry();
+}
+
+export function createInvisURL(length: number, urlId: string) {
+  const retry = async (): Promise<InvisibleUrl> => {
+    const invis = randomInvis(length);
+
+    const existing = await prisma.invisibleUrl.findUnique({
+      where: {
+        invis,
+      },
+    });
+
+    if (existing) return retry();
+    
+    const ur = await prisma.invisibleUrl.create({
+      data: {
+        invis,
+        urlId,
+      },
+    });
+
+    return ur;
+  };
+
   return retry();
 }

src/pages/404.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
-import { Box, Typography } from '@material-ui/core';
+import { Box, Text } from '@mantine/core';
 
 export default function FourOhFour() {
   return (
     <>
       <Box
-        display='flex'
-        justifyContent='center'
-        alignItems='center'
-        minHeight='100vh'
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          minHeight: '100vh',
+          justifyContent: 'center',
+        }}
       >
-        <Typography variant='h2'>404 - Not Found</Typography>
+        <Text size='xl'>404 - Not Found</Text>
       </Box>
     </>
   );

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

@@ -1,14 +1,21 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import Head from 'next/head';
 import { GetServerSideProps } from 'next';
-import { Box } from '@material-ui/core';
+import { Box, useMantineTheme } from '@mantine/core';
 import config from 'lib/config';
 import prisma from 'lib/prisma';
-import getFile from '../../server/static';
+import { getFile } from '../../server/util';
+import { parse } from 'lib/clientUtils';
+import * as exts from '../../scripts/exts';
+import { Prism } from '@mantine/prism';
+import ZiplineTheming from 'components/Theming';
 
-export default function EmbeddedImage({ image, title, username, color, normal, embed }) {
+export default function EmbeddedImage({ image, user }) {
   const dataURL = (route: string) => `${route}/${image.file}`;
 
+  // reapply date from workaround
+  image.created_at = new Date(image.created_at);
+
   const updateImage = () => {
     const imageEl = document.getElementById('image_content') as HTMLImageElement;
 
@@ -18,25 +25,17 @@ export default function EmbeddedImage({ image, title, username, color, normal, e
     if (original.width > innerWidth) imageEl.width = Math.floor(original.width * Math.min((innerHeight / original.height), (innerWidth / original.width)));
     else imageEl.width = original.width;
   };
-
-  if (typeof window !== 'undefined') window.onresize = () => updateImage();
+  
   useEffect(() => updateImage(), []);
 
   return (
     <>
       <Head>
-        {embed && (
+        {image.embed && (
           <>
-            {title ? (
-              <>
-                <meta property='og:site_name' content={`${image.file} • ${username}`} />
-                <meta property='og:title' content={title} />
-              </>
-            ) : (
-              <meta property='og:title' content={`${image.file} • ${username}`} />
-            )}
-            <meta property='theme-color' content={color}/>
-            <meta property='og:url' content={dataURL(normal)} />
+            {user.embedSiteName && (<meta property='og:site_name' content={parse(user.embedSiteName, image, user)} />)}
+            {user.embedTitle && (<meta property='og:title' content={parse(user.embedTitle, image, user)} />)}
+            <meta property='theme-color' content={user.embedColor}/>
           </>
         )}
         <meta property='og:image' content={dataURL('/r')} />
@@ -44,10 +43,12 @@ export default function EmbeddedImage({ image, title, username, color, normal, e
         <title>{image.file}</title>
       </Head>
       <Box
-        display='flex'
-        justifyContent='center'
-        alignItems='center'
-        minHeight='100vh'
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          minHeight: '100vh',
+          justifyContent: 'center',
+        }}
       >
         <img src={dataURL('/r')} alt={dataURL('/r')} id='image_content' />
       </Box>
@@ -58,64 +59,89 @@ export default function EmbeddedImage({ image, title, username, color, normal, e
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const id = context.params.id[1];
   const route = context.params.id[0];
-  if (route !== config.uploader.route.substring(1)) return {
-    notFound: true
-  };
+  const routes = [config.uploader.route.substring(1), config.urls.route.substring(1)];
+  if (!routes.includes(route)) return { notFound: true };
+  if (route === routes[1]) {
+    const url = await prisma.url.findFirst({
+      where: {
+        OR: [
+          { id },
+          { vanity: id },
+          { invisible: { invis: id } },
+        ],
+      },
+      select: {
+        destination: true,
+      },
+    });
+    if (!url) return { notFound: true };
 
-  const image = await prisma.image.findFirst({
-    where: {
-      OR: [
-        { file: id },
-        { invisible: { invis: id } }
-      ]
-    },
-    select: {
-      mimetype: true,
-      id: true,
-      file: true,
-      invisible: true,
-      userId: true,
-      embed: true
+    return {
+      props: {},
+      redirect: {
+        destination: url.destination,
+      }, 
+    };
+
+  } else {
+    const image = await prisma.image.findFirst({
+      where: {
+        OR: [
+          { file: id },
+          { invisible: { invis: id } },
+        ],
+      },
+      select: {
+        mimetype: true,
+        id: true,
+        file: true,
+        invisible: true,
+        userId: true,
+        embed: true,
+        created_at: true,
+      },
+    });
+    if (!image) return { notFound: true };
+
+    const user = await prisma.user.findFirst({
+      select: {
+        embedTitle: true,
+        embedColor: true,
+        embedSiteName: true,
+        username: true,
+        id: true,
+      },
+      where: {
+        id: image.userId,
+      },
+    });
+
+    //@ts-ignore workaround because next wont allow date
+    image.created_at = image.created_at.toString();
+
+    const prismRender = Object.keys(exts).includes(image.file.split('.').pop());
+    // let prismRenderCode;/
+    // if (prismRender) prismRenderCode = (await getFile(config.uploader.directory, id)).toString();
+    if (prismRender) return {
+      redirect: {
+        destination: `/code/${image.file}`,
+        permanent: true,
+      },
+    };
+
+    if (!image.mimetype.startsWith('image')) {
+      const data = await getFile(config.uploader.directory, id);
+      if (!data) return { notFound: true };
+
+      context.res.end(data);
+      return { props: {} };
     }
-  });
 
-  if (!image) return { notFound: true };
-
-  if (!image.embed) {
-    const data = await getFile(config.uploader.directory, id);
-    if (!data) return { notFound: true };
-
-    context.res.end(data);
-    return { props: {} };
-  };
-
-  const user = await prisma.user.findFirst({
-    select: {
-      embedTitle: true,
-      embedColor: true,
-      username: true
-    },
-    where: {
-      id: image.userId
-    }
-  });
-  
-  if (!image.mimetype.startsWith('image')) {
-    const data = await getFile(config.uploader.directory, id);
-    if (!data) return { notFound: true };
-
-    context.res.end(data);
-    return { props: {} };
-  };
-
-  return {
-    props: {
-      image,
-      title: user.embedTitle,
-      color: user.embedColor,
-      username: user.username,
-      normal: config.uploader.route,
-      embed: image.embed
-    }
-  };
+    return {
+      props: {
+        image,
+        user,
+      },
+    };
+  }
 };

src/pages/_app.tsx

@@ -1,33 +1,19 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import PropTypes from 'prop-types';
 import Head from 'next/head';
-import Theming from 'components/Theming';
 import { useStore } from 'lib/redux/store';
+import ZiplineTheming from 'components/Theming';
 
 export default function MyApp({ Component, pageProps }) {
   const store = useStore();
 
-  React.useEffect(() => {
-    const jssStyles = document.querySelector('#jss-server-side');
-    if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
-  }, []);
-
   return (
     <Provider store={store}>
       <Head>
         <title>{Component.title}</title>
         <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
       </Head>
-      <Theming
-        Component={Component}
-        pageProps={pageProps}
-      />
+      <ZiplineTheming Component={Component} pageProps={pageProps} />
     </Provider>
   );
-}
-
-MyApp.propTypes = {
-  Component: PropTypes.elementType.isRequired,
-  pageProps: PropTypes.object.isRequired,
-};
+}

src/pages/_document.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
+import { createGetInitialProps } from '@mantine/next';
+
+const getInitialProps = createGetInitialProps();
 
 class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    return { ...initialProps };
-  }
+  static getInitialProps = getInitialProps;
 
   render() {
     return (
@@ -22,4 +22,4 @@ class MyDocument extends Document {
   }
 }
 
-export default MyDocument;
+export default MyDocument;

src/pages/api/auth/create.ts

@@ -17,8 +17,8 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
   const existing = await prisma.user.findFirst({
     where: {
-      username
-    }
+      username,
+    },
   });
   if (existing) return res.forbid('user exists');
 
@@ -29,8 +29,8 @@ async function handler(req: NextApiReq, res: NextApiRes) {
       password: hashed,
       username,
       token: createToken(),
-      administrator
-    }
+      administrator,
+    },
   });
 
   delete newUser.password;

src/pages/api/auth/login.ts

@@ -15,16 +15,16 @@ async function handler(req: NextApiReq, res: NextApiRes) {
         username: 'administrator',
         password: await hashPassword('password'),
         token: createToken(),
-        administrator: true
-      }
+        administrator: true,
+      },
     });
     Logger.get('database').info('created default user:\nUsername: "administrator"\nPassword: "password"');
   }
 
   const user = await prisma.user.findFirst({
     where: {
-      username 
-    }
+      username, 
+    },
   });
 
   if (!user) return res.status(404).end(JSON.stringify({ error: 'User not found' }));
@@ -32,8 +32,7 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   const valid = await checkPassword(password, user.password);
   if (!valid) return res.forbid('Wrong password');
 
-  // 604800 seconds is 1 week
-  res.setCookie('user', user.id, { sameSite: true, maxAge: 604800, path: '/' });
+  res.setCookie('user', user.id, { sameSite: true, expires: new Date(Date.now() + (6.048e+8 * 2)), path: '/' });
 
   Logger.get('user').info(`User ${user.username} (${user.id}) logged in`);
 

src/pages/api/shorten.ts

@@ -0,0 +1,39 @@
+import prisma from 'lib/prisma';
+import zconfig from 'lib/config';
+import { NextApiReq, NextApiRes, withZipline } from 'lib/middleware/withZipline';
+import { createInvisURL, randomChars } from 'lib/util';
+import Logger from 'lib/logger';
+
+async function handler(req: NextApiReq, res: NextApiRes) {
+  if (req.method !== 'POST') return res.forbid('no allow');
+  if (!req.headers.authorization) return res.forbid('no authorization');
+  
+  const user = await prisma.user.findFirst({
+    where: {
+      token: req.headers.authorization,
+    },
+  });
+
+  if (!user) return res.forbid('authorization incorect');
+  if (!req.body) return res.error('no body');
+  if (!req.body.url) return res.error('no url');
+  const rand = randomChars(zconfig.urls.length);
+
+  let invis;
+  const url = await prisma.url.create({
+    data: {
+      id: rand,
+      vanity: req.body.vanity ?? null,
+      destination: req.body.url,
+      userId: user.id,
+    },
+  });
+    
+  if (req.headers.zws) invis = await createInvisURL(zconfig.urls.length, url.id);
+
+  Logger.get('url').info(`User ${user.username} (${user.id}) shortenned a url ${url.destination} (${url.id})`); 
+
+  return res.json({ url: `${zconfig.core.secure ? 'https' : 'http'}://${req.headers.host}${zconfig.urls.route}/${req.body.vanity ? req.body.vanity : invis ? invis.invis : url.id}` });
+}
+
+export default withZipline(handler);

src/pages/api/stats.ts

@@ -1,62 +1,18 @@
-import { join } from 'path';
 import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
 import prisma from 'lib/prisma';
-import { bytesToRead, sizeOfDir } from 'lib/util';
-import config from 'lib/config';
 
 async function handler(req: NextApiReq, res: NextApiRes) {
   const user = await req.user();
   if (!user) return res.forbid('not logged in');
 
-  const size = await sizeOfDir(join(process.cwd(), config.uploader.directory));
-  const byUser = await prisma.image.groupBy({
-    by: ['userId'],
-    _count: {
-      _all: true
-    }
-  });
-  const count_users = await prisma.user.count();
-
-  const count_by_user = [];
-  for (let i = 0, L = byUser.length; i !== L; ++i) {
-    const user = await prisma.user.findFirst({
-      where: {
-        id: byUser[i].userId
-      }
-    });
-
-    count_by_user.push({
-      username: user.username,
-      count: byUser[i]._count._all
-    });
-  }
-
-  const count = await prisma.image.count();
-  const viewsCount = await prisma.image.groupBy({
-    by: ['views'],
-    _sum: {
-      views: true
-    }
-  });
-
-  const typesCount = await prisma.image.groupBy({
-    by: ['mimetype'],
-    _count: {
-      mimetype: true
+  const stats = await prisma.stats.findFirst({
+    orderBy: {
+      created_at: 'desc',
     },
+    take: 1,
   });
-  const types_count = [];
-  for (let i = 0, L = typesCount.length; i !== L; ++i) types_count.push({ mimetype: typesCount[i].mimetype, count: typesCount[i]._count.mimetype });
 
-  return res.json({
-    size: bytesToRead(size),
-    size_num: size,
-    count,
-    count_by_user: count_by_user.sort((a,b) => b.count-a.count),
-    count_users,
-    views_count: (viewsCount[0]?._sum?.views ?? 0),
-    types_count: types_count.sort((a,b) => b.count-a.count)
-  });
+  return res.json(stats.data);
 }
 
 export default withZipline(handler);

src/pages/api/upload.ts

@@ -2,59 +2,104 @@ import multer from 'multer';
 import prisma from 'lib/prisma';
 import zconfig from 'lib/config';
 import { NextApiReq, NextApiRes, withZipline } from 'lib/middleware/withZipline';
-import { createInvis, randomChars } from 'lib/util';
+import { createInvisImage, randomChars } from 'lib/util';
 import { writeFile } from 'fs/promises';
 import { join } from 'path';
 import Logger from 'lib/logger';
+import { ImageFormat, InvisibleImage } from '@prisma/client';
+import { format as formatDate } from 'fecha';
+import { v4 } from 'uuid';
 
 const uploader = multer({
   storage: multer.memoryStorage(),
 });
 
 async function handler(req: NextApiReq, res: NextApiRes) {
-  if (req.method !== 'POST') return res.forbid('no allow');
+  if (req.method !== 'POST') return res.forbid('invalid method');
   if (!req.headers.authorization) return res.forbid('no authorization');
   
   const user = await prisma.user.findFirst({
     where: {
-      token: req.headers.authorization
-    }
+      token: req.headers.authorization,
+    },
   });
 
-
   if (!user) return res.forbid('authorization incorect');
+  if (user.ratelimited) return res.ratelimited();
   if (!req.files) return res.error('no files');
   if (req.files && req.files.length === 0) return res.error('no files');
 
+  const rawFormat = ((req.headers.format || '') as string).toUpperCase() || 'RANDOM';
+  const format: ImageFormat = Object.keys(ImageFormat).includes(rawFormat) && ImageFormat[rawFormat];
   const files = [];
 
   for (let i = 0; i !== req.files.length; ++i) {
     const file = req.files[i];
-    if (file.size > zconfig.uploader[user.administrator ? 'admin_limit' : 'user_limit']) return res.error('file size too big');
+    if (file.size > zconfig.uploader[user.administrator ? 'admin_limit' : 'user_limit']) return res.error(`file[${i}] size too big`);
 
     const ext = file.originalname.split('.').pop();
     if (zconfig.uploader.disabled_extentions.includes(ext)) return res.error('disabled extension recieved: ' + ext);
-    const rand = randomChars(zconfig.uploader.length);
+    let fileName: string;
 
-    let invis;
+    switch (format) {
+    case ImageFormat.RANDOM:
+      fileName = randomChars(zconfig.uploader.length);
+      break;
+    case ImageFormat.DATE:
+      fileName = formatDate(new Date(), 'YYYY-MM-DD_HH:mm:ss');
+      break;
+    case ImageFormat.UUID:
+      fileName = v4();
+      break;
+    case ImageFormat.NAME:
+      fileName = file.originalname.split('.')[0];
+      break;
+    }
+
+
+    let invis: InvisibleImage;
     const image = await prisma.image.create({
       data: {
-        file: `${rand}.${ext}`,
+        file: `${fileName}.${ext}`,
         mimetype: file.mimetype,
         userId: user.id,
-        embed: !!req.headers.embed
-      }
+        embed: !!req.headers.embed,
+        format,
+      },
     });
     
-    if (req.headers.zws) invis = await createInvis(zconfig.uploader.length, image.id);
+    if (req.headers.zws) invis = await createInvisImage(zconfig.uploader.length, image.id);
 
     await writeFile(join(process.cwd(), zconfig.uploader.directory, image.file), file.buffer);
     Logger.get('image').info(`User ${user.username} (${user.id}) uploaded an image ${image.file} (${image.id})`); 
     files.push(`${zconfig.core.secure ? 'https' : 'http'}://${req.headers.host}${zconfig.uploader.route}/${invis ? invis.invis : image.file}`);
   }
 
-  // url will be deprecated soon
-  return res.json({ files, url: files[0] });
+  if (user.administrator && zconfig.ratelimit.admin !== 0) {
+    await prisma.user.update({
+      where: {
+        id: user.id,
+      },
+      data: {
+        ratelimited: true,
+      },
+    });
+    setTimeout(async () => await prisma.user.update({ where: { id: user.id }, data: { ratelimited: false } }), zconfig.ratelimit.admin * 1000).unref();
+  }
+
+  if (!user.administrator && zconfig.ratelimit.user !== 0) {
+    await prisma.user.update({
+      where: {
+        id: user.id,
+      },
+      data: {
+        ratelimited: true,
+      },
+    });
+    setTimeout(async () => await prisma.user.update({ where: { id: user.id }, data: { ratelimited: false } }), zconfig.ratelimit.user * 1000).unref();
+  }
+
+  return res.json({ files });
 }
 
 function run(middleware: any) {

src/pages/api/user/files.ts

@@ -15,8 +15,8 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
     const image = await prisma.image.delete({
       where: {
-        id: req.body.id 
-      }
+        id: req.body.id,
+      },
     });
 
     await rm(join(process.cwd(), config.uploader.directory, image.file));
@@ -32,8 +32,8 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     if (req.body.favorite !== null) image = await prisma.image.update({
       where: { id: req.body.id },
       data: {
-        favorite: req.body.favorite
-      }
+        favorite: req.body.favorite,
+      },
     });
 
     return res.json(image);
@@ -41,15 +41,15 @@ async function handler(req: NextApiReq, res: NextApiRes) {
     let images = await prisma.image.findMany({
       where: {
         userId: user.id,
-        favorite: !!req.query.favorite
+        favorite: !!req.query.favorite,
       },
       select: {
         created_at: true,
         file: true,
         mimetype: true,
         id: true,
-        favorite: true
-      }
+        favorite: true,
+      },
     });
 
   

src/pages/api/user/index.ts

@@ -12,74 +12,61 @@ async function handler(req: NextApiReq, res: NextApiRes) {
       const hashed = await hashPassword(req.body.password);
       await prisma.user.update({
         where: { id: user.id },
-        data: { password: hashed }
+        data: { password: hashed },
       });
     }
 
     if (req.body.username) {
       const existing = await prisma.user.findFirst({
         where: {
-          username: req.body.username
-        }
+          username: req.body.username,
+        },
       });
       if (existing && user.username !== req.body.username) { 
         return res.forbid('Username is already taken');
       }
       await prisma.user.update({
         where: { id: user.id },
-        data: { username: req.body.username }
+        data: { username: req.body.username },
       });
     }
 
     if (req.body.embedTitle) await prisma.user.update({
       where: { id: user.id },
-      data: { embedTitle: req.body.embedTitle }
+      data: { embedTitle: req.body.embedTitle },
     });
 
     if (req.body.embedColor) await prisma.user.update({
       where: { id: user.id },
-      data: { embedColor: req.body.embedColor }
+      data: { embedColor: req.body.embedColor },
+    });
+
+    if (req.body.embedSiteName) await prisma.user.update({
+      where: { id: user.id },
+      data: { embedSiteName: req.body.embedSiteName },
     });
 
     if (req.body.systemTheme) await prisma.user.update({
       where: { id: user.id },
-      data: { systemTheme: req.body.systemTheme }
+      data: { systemTheme: req.body.systemTheme },
     });
 
-    if (req.body.customTheme) {
-      if (user.customTheme) await prisma.user.update({
-        where: { id: user.id },
-        data: {
-          customTheme: {
-            update: {
-              ...req.body.customTheme
-            }
-          }
-        }
-      }); else await prisma.theme.create({
-        data: {
-          userId: user.id,
-          ...req.body.customTheme
-        }
-      });
-    }
-
     const newUser = await prisma.user.findFirst({
       where: {
-        id: Number(user.id)
+        id: Number(user.id),
       },
       select: {
         administrator: true,
         embedColor: true,
         embedTitle: true,
+        embedSiteName: true,
         id: true,
         images: false,
         password: false,
         systemTheme: true,
-        customTheme: true,
         token: true,
-        username: true
-      }
+        username: true,
+      },
     });
 
     Logger.get('user').info(`User ${user.username} (${newUser.username}) (${newUser.id}) was updated`);

src/pages/api/user/recent.ts

@@ -11,14 +11,18 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
   let images = await prisma.image.findMany({
     take,
+    where: {
+      userId: user.id,
+    },
     orderBy: {
-      created_at: 'desc'
+      created_at: 'desc',
     },
     select: {
       created_at: true,
       file: true,
-      mimetype: true
-    }
+      mimetype: true,
+      id: true,
+    },
   });
 
   // @ts-ignore

src/pages/api/user/token.ts

@@ -10,11 +10,11 @@ async function handler(req: NextApiReq, res: NextApiRes) {
   if (req.method === 'PATCH') {
     const updated = await prisma.user.update({
       where: {
-        id: user.id
+        id: user.id,
       },
       data: {
-        token: createToken()
-      }
+        token: createToken(),
+      },
     });
 
     Logger.get('user').info(`User ${user.username} (${user.id}) reset their token`);

src/pages/api/user/urls.ts

@@ -0,0 +1,41 @@
+import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
+import prisma from 'lib/prisma';
+import config from 'lib/config';
+import Logger from 'lib/logger';
+
+async function handler(req: NextApiReq, res: NextApiRes) {
+  const user = await req.user();
+  if (!user) return res.forbid('not logged in');
+
+  if (req.method === 'DELETE') {
+    if (!req.body.id) return res.error('no url id');
+
+    const url = await prisma.url.delete({
+      where: {
+        id: req.body.id,
+      },
+    });
+
+    Logger.get('url').info(`User ${user.username} (${user.id}) deleted a url ${url.destination} (${url.id})`);
+
+    return res.json(url);
+  } else {
+    let urls = await prisma.url.findMany({
+      where: {
+        userId: user.id,
+      },
+      select: {
+        created_at: true,
+        id: true,
+        destination: true,
+        vanity: true,
+      },
+    });
+
+    // @ts-ignore
+    urls.map(url => url.url = `${config.urls.route}/${url.vanity ?? url.id}`);
+    return res.json(urls);
+  }
+}
+
+export default withZipline(handler);

src/pages/api/users.ts

@@ -1,34 +1,31 @@
-import { join } from 'path';
 import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
 import prisma from 'lib/prisma';
-import { bytesToRead, sizeOfDir } from 'lib/util';
-import { tryGetPreviewData } from 'next/dist/server/api-utils';
 
 async function handler(req: NextApiReq, res: NextApiRes) {
   const user = await req.user();
   if (!user) return res.forbid('not logged in');
-  if (!user.administrator) return res.forbid('you arent an administrator');
+  if (!user.administrator) return res.forbid('you aren\'t an administrator');
 
   if (req.method === 'DELETE') {
     if (req.body.id === user.id) return res.forbid('you can\'t delete your own account');
     
     const deleteUser = await prisma.user.findFirst({
       where: {
-        id: req.body.id
-      }
+        id: req.body.id,
+      },
     });
     if (!deleteUser) return res.forbid('user doesn\'t exist');
 
     await prisma.user.delete({
       where: {
-        id: deleteUser.id
-      }
+        id: deleteUser.id,
+      },
     });
 
     delete deleteUser.password;
     return res.json(deleteUser);
   } else {
-    const all_users = await prisma.user.findMany({
+    const users = await prisma.user.findMany({
       select: {
         username: true,
         id: true,
@@ -36,11 +33,10 @@ async function handler(req: NextApiReq, res: NextApiRes) {
         token: true,
         embedColor: true,
         embedTitle: true,
-        customTheme: true,
-        systemTheme: true
-      }
+        systemTheme: true,
+      },
     });
-    return res.json(all_users);
+    return res.json(users);
   }
 }
 

src/pages/api/version.ts

@@ -0,0 +1,17 @@
+import { readFile } from 'fs/promises';
+import { NextApiReq, NextApiRes, withZipline } from 'middleware/withZipline';
+
+
+async function handler(req: NextApiReq, res: NextApiRes) {
+  const pkg = JSON.parse(await readFile('package.json', 'utf8'));
+
+  const re = await fetch('https://raw.githubusercontent.com/diced/zipline/trunk/package.json');
+  const upstreamPkg = await re.json();
+
+  return res.json({
+    local: pkg.version,
+    upstream: upstreamPkg.version,
+  });
+}
+
+export default withZipline(handler);

src/pages/auth/login.tsx

@@ -1,102 +1,96 @@
-import React, { useEffect, useState } from 'react';
-import { Typography, Box, TextField, Stack, Button } from '@material-ui/core';
-import { Color } from '@material-ui/core/Alert/Alert';
+import React, { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import Alert from 'components/Alert';
-import Backdrop from 'components/Backdrop';
 import useFetch from 'hooks/useFetch';
-import { useFormik } from 'formik';
-
-
-function TextInput({ id, label, formik, ...other }) {
-  return (
-    <Box>
-      <TextField
-        id={id}
-        name={id}
-        label={label}
-        value={formik.values[id]}
-        onChange={formik.handleChange}
-        error={formik.touched[id] && Boolean(formik.errors[id])}
-        helperText={formik.touched[id] && formik.errors[id]}
-        variant='standard'
-        sx={{ pb: 0.5 }}
-        {...other}
-      />
-    </Box>
-  );
-}
+import { useForm } from '@mantine/hooks';
+import { TextInput, Button, Center, Title, Box, Badge, Tooltip } from '@mantine/core';
+import { useNotifications } from '@mantine/notifications';
+import { Cross1Icon, DownloadIcon } from '@modulz/radix-icons';
 
 export default function Login() {
-  const [open, setOpen] = useState(false);
-  const [severity, setSeverity] = useState<Color>('success');
-  const [message, setMessage] = useState('');
-  const [loadingOpen, setLoadingOpen] = useState(false);
   const router = useRouter();
+  const notif = useNotifications();
+  const [versions, setVersions] = React.useState<{ upstream: string, local: string }>(null);
 
-  const formik = useFormik({
+  const form = useForm({
     initialValues: {
       username: '',
-      password: ''
+      password: '',
     },
-    onSubmit: async values => {
-      const username = values.username.trim();
-      const password = values.password.trim();
-
-      if (username === '') return formik.setFieldError('username', 'Username can\'t be nothing');
-
-      setLoadingOpen(true);
-      const res = await useFetch('/api/auth/login', 'POST', {
-        username, password
-      });
-  
-      if (res.error) {
-        setOpen(true);
-        setSeverity('error');
-        setMessage(res.error);
-        setLoadingOpen(false);
-      } else {
-        setOpen(true);
-        setSeverity('success');
-        setMessage('Logged in');
-        router.push('/dashboard');
-      }
-    }
   });
 
+  const onSubmit = async values => {
+    const username = values.username.trim();
+    const password = values.password.trim();
+
+    if (username === '') return form.setFieldError('username', 'Username can\'t be nothing');
+
+    const res = await useFetch('/api/auth/login', 'POST', {
+      username, password,
+    });
+
+    if (res.error) {
+      notif.showNotification({
+        title: 'Login Failed',
+        message: res.error,
+        color: 'red',
+        icon: <Cross1Icon />,
+      });
+    } else {
+      router.push(router.query.url as string || '/dashboard');
+    }
+  };
+
   useEffect(() => {
     (async () => {
       const a = await fetch('/api/user');
-      if (a.ok) router.push('/dashboard'); 
+      if (a.ok) router.push('/dashboard');
+      else {
+        const v = await useFetch('/api/version');
+        setVersions(v);
+        if (v.local !== v.upstream) {
+          notif.showNotification({
+            title: 'Update available',
+            message: `A new version of Zipline is available. You are running ${v.local} and the latest version is ${v.upstream}.`,
+            icon: <DownloadIcon />,
+          });
+        }
+      }
     })();
   }, []);
 
   return (
     <>
-      <Alert open={open} setOpen={setOpen} severity={severity} message={message} />
-      <Backdrop open={loadingOpen} />
-      <Box
-        display='flex'
-        height='screen'
-        alignItems='center'
-        justifyContent='center'
-        sx={{ height: '24rem' }}
-      >
-        <Stack>
-          <Typography variant='h3' textAlign='center'>
-            Zipline
-          </Typography>
+      <Center sx={{ height: '100vh' }}>
+        <div>
+          <Title align='center'>Zipline</Title>
+          <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
+            <TextInput size='lg' id='username' label='Username' {...form.getInputProps('username')} />
+            <TextInput size='lg' id='password' label='Password' type='password' {...form.getInputProps('password')} />
 
-          <form onSubmit={formik.handleSubmit}>
-            <TextInput formik={formik} id='username' label='Username' />
-            <TextInput formik={formik} id='password' label='Password' type='password' />
-            <Box my={2}>
-              <Button variant='contained' fullWidth type='submit'>
-                Login
-              </Button>
-            </Box>
+            <Button size='lg' type='submit' fullWidth mt={12}>Login</Button>
           </form>
-        </Stack>
+        </div>
+      </Center>
+      <Box
+        sx={{
+          zIndex: 99,
+          position: 'fixed',
+          bottom: '10px',
+          right: '20px',
+
+        }}
+      >
+        {versions && (
+          <Tooltip
+            wrapLines
+            width={220}
+            transition='rotate-left'
+            transitionDuration={200}
+            label={versions.local !== versions.upstream ? 'Looks like you are running an outdated version of Zipline. Please update to the latest version.' : 'You are running the latest version of Zipline.'}
+          >
+            <Badge radius='md' size='lg' variant='dot' color={versions.local !== versions.upstream ? 'red' : 'primary'}>{versions.local}</Badge>
+          </Tooltip>
+        )}
       </Box>
     </>
   );

src/pages/auth/logout.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import { Backdrop, CircularProgress } from '@material-ui/core';
+import { LoadingOverlay } from '@mantine/core';
 
 export default function Logout() {
   const router = useRouter();
+  const [visible, setVisible] = useState(true);
+
 
   useEffect(() => {
     (async () => {
@@ -18,12 +20,7 @@ export default function Logout() {
   }, []);
 
   return (
-    <Backdrop
-      sx={{ color: '#fff', zIndex: t => t.zIndex.drawer + 1 }}
-      open
-    >
-      <CircularProgress color='inherit' />
-    </Backdrop>
+    <LoadingOverlay visible={visible} />
   );
 }
 

src/pages/code/[id].tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import exts from '../../../scripts/exts';
+import { Prism } from '@mantine/prism';
+
+export default function Code() {
+  const [prismRenderCode, setPrismRenderCode] = React.useState('');
+  const router = useRouter();
+  const { id } = router.query as { id: string };
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch('/r/' + id);
+      if (id && !res.ok) router.push('/404');
+      const data = await res.text();
+      if (id) setPrismRenderCode(data);
+    })();
+  }, [id]);
+  
+  return id && prismRenderCode ? (
+    <Prism sx={t => ({ height: '100vh', backgroundColor: t.colors.dark[8] })} withLineNumbers language={exts[id.split('.').pop()]}>{prismRenderCode}</Prism>
+  ) : null;
+}

src/pages/dashboard/files.tsx

@@ -3,7 +3,7 @@ import useLogin from 'hooks/useLogin';
 import Layout from 'components/Layout';
 import Files from 'components/pages/Files';
 
-export default function ImagesPage() {
+export default function FilesPage() {
   const { user, loading } = useLogin();
 
   if (loading) return null;
@@ -11,12 +11,10 @@ export default function ImagesPage() {
   return (
     <Layout
       user={user}
-      loading={loading}
-      noPaper={false}
     >
       <Files />
     </Layout>
   );
 }
 
-ImagesPage.title = 'Zipline - Gallery';
+FilesPage.title = 'Zipline - Gallery';