Merge pull request #485 from shlinkio/hotfix/v3.2.1

Release v3.2.1

.eslintrc

@@ -14,16 +14,5 @@
     "process": true,
     "setImmediate": true
   },
-  "rules": {
-    "max-len": ["error", {
-      "code": 120,
-      "ignoreStrings": true,
-      "ignoreTemplateLiterals": true,
-      "ignoreComments": true
-    }],
-    "no-mixed-operators": "off",
-    "react/display-name": "off",
-    "react/react-in-jsx-scope": "off",
-    "@typescript-eslint/require-array-sort-compare": "off"
-  }
+  "ignorePatterns": ["src/service*.ts"]
 }

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: Continuous integration
+
+on:
+  pull_request: null
+  push:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use node.js 14.15
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.15
+      - run: npm ci
+      - run: npm run lint
+
+  unit-tests:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use node.js 14.15
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.15
+      - run: npm ci
+      - run: npm run test:ci
+      - name: Publish coverage
+        uses: codecov/codecov-action@v1
+        with:
+          file: ./coverage/clover.xml
+
+  mutation-tests:
+    continue-on-error: true
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # needed so that the main branch is also fetched
+      - name: Use node.js 14.15
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.15
+      - run: npm ci
+      - run: npm run mutate -- --mutate=$(git diff origin/main --name-only | grep -E 'src\/(.*).(ts|tsx)$' | paste -sd ",")
+
+  build-docker-image:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - run: docker build -t shlink-web-client:test .

.github/workflows/deploy-preview.yml

@@ -0,0 +1,41 @@
+name: Deploy preview
+
+on:
+  pull_request_target: null
+
+jobs:
+  deploy:
+    runs-on: ubuntu-20.04
+    continue-on-error: true
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.ref }}
+      - name: Use node.js 14.15
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.15
+      - name: Generate slug
+        id: generate_slug
+        run: echo "##[set-output name=slug;]$(echo ${GITHUB_HEAD_REF#refs/heads/} | sed -r 's/[~\^]+//g' | sed -r 's/[^a-zA-Z0-9]+/-/g' | sed -r 's/^-+\|-+$//g' | tr A-Z a-z)"
+      - name: Build
+        run: |
+          npm ci && \
+          node ./scripts/set-homepage.js /shlink-web-client/${{ steps.generate_slug.outputs.slug }} && \
+          rm src/service-worker.ts && \
+          npm run build
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@4.1.1
+        with:
+          branch: preview-env
+          folder: build
+          target-folder: ${{ steps.generate_slug.outputs.slug }}
+      - name: Publish env
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: Preview environment
+          message: |
+            ## Preview environment
+            https://shlinkio.github.io/shlink-web-client/${{ steps.generate_slug.outputs.slug }}/

.github/workflows/docker-image-build.yml

@@ -3,13 +3,13 @@ name: Build docker image
 on:
   push:
     branches:
-      - main
+      - develop
     tags:
       - 'v*'
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
         uses: actions/checkout@v2

.github/workflows/publish-release.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
@@ -21,7 +21,6 @@ jobs:
         uses: docker://antonyurchenko/git-release:latest
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          ALLOW_TAG_PREFIX: "true"
           ALLOW_EMPTY_CHANGELOG: "true"
         with:
           args: |

.scrutinizer.yml

@@ -1,3 +0,0 @@
-tools:
-  external_code_coverage:
-    timeout: 1200

.travis.yml

@@ -1,43 +0,0 @@
-dist: bionic
-
-language: node_js
-
-branches:
-  only:
-    - /.*/
-
-cache:
-  directories:
-    - node_modules
-
-node_js:
-  - '14.15.0'
-
-jobs:
-  fast_finish: true
-  allow_failures:
-    - name: 'Lint'
-    - name: 'Mutation tests'
-  include:
-
-    - name: 'Lint'
-      install: npm ci
-      script: npm run lint
-
-    - name: 'Unit tests'
-      install: npm ci
-      script: npm run test:ci
-      after_success:
-        - node_modules/.bin/ocular coverage/clover.xml
-
-    - name: 'Mutation tests'
-      install: npm ci
-      before_script:
-        - echo "Building commit range ${TRAVIS_COMMIT_RANGE}"
-        - export MUTATION_FILES=$(git diff ${TRAVIS_COMMIT_RANGE:-origin/main} --name-only | grep -E 'src\/(.*).(ts|tsx)$' | paste -sd ",")
-      script: npm run mutate:ci
-
-    - name: 'Build docker image'
-      services:
-        - docker
-      script: docker build -t shlink-web-client:test .

CHANGELOG.md

@@ -4,6 +4,174 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [3.2.1] - 2021-09-12
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#478](https://github.com/shlinkio/shlink-web-client/pull/478) Fixed tags including special chars not being properly URL encoded before using them as query params.
+* [#480](https://github.com/shlinkio/shlink-web-client/pull/480) Fixed servers import on Chromium-based browsers when using windows.
+* [#482](https://github.com/shlinkio/shlink-web-client/pull/480) Fixed end date not being set to the end of the day when filtering visits using a "smart filter" (last 7 days, last 30 days, etc).
+
+
+## [3.2.0] - 2021-07-12
+### Added
+* [#433](https://github.com/shlinkio/shlink-web-client/pull/433) Added support to provide a default server to connect to via env vars:
+
+    * `SHLINK_SERVER_URL`: The URL of the Shlink server to configure by default.
+    * `SHLINK_SERVER_API_KEY`: The API key of the Shlink server.
+    * `SHLINK_SERVER_NAME`: A name you want to give to this server. Defaults to *Shlink* if not provided.
+
+* [#432](https://github.com/shlinkio/shlink-web-client/pull/432) Added support to provide the `servers.json` file inside a `conf.d` folder.
+* [#440](https://github.com/shlinkio/shlink-web-client/pull/440) Added hint of what visits come potentially from a bot, in the visits table, when consuming Shlink >=2.7.
+* [#431](https://github.com/shlinkio/shlink-web-client/pull/431) Added support to filter out visits from potential bots in visits sections, when consuming Shlink >=2.7.
+* [#430](https://github.com/shlinkio/shlink-web-client/pull/430) Added support to set new and existing short URLs as crawlable, when consuming Shlink >=2.7.
+* [#450](https://github.com/shlinkio/shlink-web-client/pull/450) Improved landing page design.
+* [#449](https://github.com/shlinkio/shlink-web-client/pull/449) Improved PWA update banner, allowing to restart the app directly from it without having to close the tab.
+
+### Changed
+* [#442](https://github.com/shlinkio/shlink-web-client/pull/442) Visits filtering now goes through the corresponding reducer.
+* [#337](https://github.com/shlinkio/shlink-web-client/pull/337) Replaced moment.js with date-fns.
+* [#360](https://github.com/shlinkio/shlink-web-client/pull/360) Changed component used to generate a tags selector, switching from `react-tagsinput`, which is no longer maintained, to `react-tag-autocomplete`.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#438](https://github.com/shlinkio/shlink-web-client/pull/438) Fixed horizontal scrolling in short URLs list on mobile devices when the long URL didn't have words to break.
+
+
+## [3.1.2] - 2021-06-06
+### Added
+* *Nothing*
+
+### Changed
+* [#428](https://github.com/shlinkio/shlink-web-client/issues/428) Updated to StrykerJS 5.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#371](https://github.com/shlinkio/shlink-web-client/issues/371) Recovered PWA functionality.
+
+
+## [3.1.1] - 2021-05-08
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#413](https://github.com/shlinkio/shlink-web-client/issues/413) Fixed edit short URL form reflecting outdated info after navigating back from other section.
+* [#412](https://github.com/shlinkio/shlink-web-client/issues/412) Ensured new visits coming from mercure hub are prepended and not appended, to keep proper sorting.
+* [#417](https://github.com/shlinkio/shlink-web-client/issues/417) Fixed link spanning out of QR code modal.
+* [#411](https://github.com/shlinkio/shlink-web-client/issues/411) Added missing feedback when editing a short URL to know if everything went right.
+
+
+## [3.1.0] - 2021-03-29
+### Added
+* [#379](https://github.com/shlinkio/shlink-web-client/issues/379) and [#384](https://github.com/shlinkio/shlink-web-client/issues/384) Improved QR code modal, including controls to customize size, format and margin, as well as a button to copy the link to the clipboard.
+* [#385](https://github.com/shlinkio/shlink-web-client/issues/385) Added setting to determine if "validate URL" should be enabled or disabled by default.
+* [#386](https://github.com/shlinkio/shlink-web-client/issues/386) Added new card in overview section to display amount of orphan visits when using Shlink 2.6.0 or higher.
+* [#177](https://github.com/shlinkio/shlink-web-client/issues/177) Added dark theme.
+* [#387](https://github.com/shlinkio/shlink-web-client/issues/387) and [#395](https://github.com/shlinkio/shlink-web-client/issues/395) Added a section to see orphan visits stats, when consuming Shlink >=2.6.0.
+* [#383](https://github.com/shlinkio/shlink-web-client/issues/383) Added title to short URLs list, displayed when consuming Shlink >=2.6.0.
+* [#368](https://github.com/shlinkio/shlink-web-client/issues/368) Added new settings to define the default interval for visits pages.
+* [#349](https://github.com/shlinkio/shlink-web-client/issues/349) Added support to export visits to CSV.
+* [#397](https://github.com/shlinkio/shlink-web-client/issues/397) New section to edit all data for short URLs, including title when using Shlink v2.6 or newer.
+
+  This new section replaces the old modals to edit short URL meta, short URL tags and the long URL. Everything is now together in the same section.
+
+### Changed
+* [#382](https://github.com/shlinkio/shlink-web-client/issues/382) Ensured short URL tags are edited through the `PATCH /short-urls/{shortCode}` endpoint when using Shlink 2.6.0 or higher.
+* [#398](https://github.com/shlinkio/shlink-web-client/issues/398) Improved performance when loading short URL details by avoiding API calls if the short URL is already present in local state.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#335](https://github.com/shlinkio/shlink-web-client/issues/335) Fixed linting errors.
+
+
+## [3.0.1] - 2020-12-30
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#364](https://github.com/shlinkio/shlink-web-client/issues/364) Fixed all dropdowns so that they are consistently styled.
+* [#366](https://github.com/shlinkio/shlink-web-client/issues/366) Fixed text in visits menu jumping to next line in some tablet resolutions.
+* [#367](https://github.com/shlinkio/shlink-web-client/issues/367) Removed conflicting overflow in visits table for mobile devices.
+* [#365](https://github.com/shlinkio/shlink-web-client/issues/365) Fixed weird rendering of short URLs list in tablets.
+* [#372](https://github.com/shlinkio/shlink-web-client/issues/372) Fixed importing servers in Android devices.
+
+
+## [3.0.0] - 2020-12-22
+### Added
+* [#340](https://github.com/shlinkio/shlink-web-client/issues/340) Added new "overview" page, showing basic information of the active server.
+
+    As a side effect, it also introduces improvements in the "create short URL" page, grouping components by context and explaining what they are for.
+
+* [#309](https://github.com/shlinkio/shlink-web-client/issues/309) Added new domain selector component in create URL form which allows selecting from previously used domains or set a new one.
+* [#315](https://github.com/shlinkio/shlink-web-client/issues/315) Now you can tell if you want to validate the long URL when using Shlink >=2.4.
+* [#285](https://github.com/shlinkio/shlink-web-client/issues/285) Improved visits section:
+
+    * Charts are now grouped in tabs, so that only one part of the components is rendered at a time.
+    * Amount of highlighted visits is now displayed.
+    * Date filtering can be now selected through relative times (last 7 days, last 30 days, etc) or absolute dates using date pickers.
+    * Only the visits for last 30 days are loaded by default. You can change that at any moment if required.
+
+* [#355](https://github.com/shlinkio/shlink-web-client/issues/355) Improved home page, fixing also its scrolling behavior for mobile devices.
+
+### Changed
+* [#267](https://github.com/shlinkio/shlink-web-client/issues/267) Added some subtle but important improvements on UI/UX.
+* [#352](https://github.com/shlinkio/shlink-web-client/issues/352) Moved from Scrutinizer to Codecov as the code coverage backend.
+* [#217](https://github.com/shlinkio/shlink-web-client/issues/217) Improved how messages are displayed, by centralizing it in the `Message` and `Result` components.
+* [#219](https://github.com/shlinkio/shlink-web-client/issues/219) Improved error messages when something fails while interacting with Shlink's API.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* [#344](https://github.com/shlinkio/shlink-web-client/issues/344) Dropped support for Shlink v1.
+
+### Fixed
+* *Nothing*
+
+
 ## [2.6.2] - 2020-11-14
 ### Added
 * *Nothing*

Dockerfile

@@ -1,12 +1,13 @@
-FROM node:14.15.0-alpine as node
+FROM node:14.17-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}
 RUN cd /shlink-web-client && \
     npm install && npm run build -- ${VERSION} --no-dist
 
-FROM nginx:1.19.3-alpine
+FROM nginx:1.21-alpine
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
 COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY scripts/docker/servers_from_env.sh /docker-entrypoint.d/30-shlink-servers-json.sh
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html

README.md

@@ -1,10 +1,9 @@
 # shlink-web-client
 
-[![Build Status](https://img.shields.io/travis/com/shlinkio/shlink-web-client.svg?style=flat-square)](https://travis-ci.com/shlinkio/shlink-web-client)
-[![Code Coverage](https://img.shields.io/scrutinizer/coverage/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/)
-[![Scrutinizer Code Quality](https://img.shields.io/scrutinizer/g/shlinkio/shlink-web-client.svg?style=flat-square)](https://scrutinizer-ci.com/g/shlinkio/shlink-web-client/)
+[![Build Status](https://img.shields.io/github/workflow/status/shlinkio/shlink-web-client/Continuous%20integration/main?logo=github&style=flat-square)](https://github.com/shlinkio/shlink-web-client/actions?query=workflow%3A%22Continuous+integration%22)
+[![Code Coverage](https://img.shields.io/codecov/c/gh/shlinkio/shlink-web-client/main?style=flat-square)](https://app.codecov.io/gh/shlinkio/shlink-web-client)
 [![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest)
-[![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
+[![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?logo=docker&style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
 [![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/main/LICENSE)
 [![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://slnk.to/donate)
 
@@ -69,6 +68,25 @@ Those servers can be exported and imported in other browsers, but if for some re
 If you are using the shlink-web-client docker image, you can mount the `servers.json` file in a volume inside `/usr/share/nginx/html`, which is the app's document root inside the container.
 
     docker run --name shlink-web-client -p 8000:80 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
+    
+Alternatively, you can mount a `conf.d` directory, which in turn contains the `servers.json` file, in a volume inside `/usr/share/nginx/html`. *(since shlink-web-client 3.2.0)*.
+
+    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
+    
+If you want to pre-configure a single server, you can provide its config via env vars. When the container starts up, it will build the `servers.json` file dynamically based on them. *(since shlink-web-client 3.2.0)*.
+
+  * `SHLINK_SERVER_URL`: The fully qualified URL for the Shlink server.
+  * `SHLINK_SERVER_API_KEY`: The API key.
+  * `SHLINK_SERVER_NAME`: The name to be displayed. Defaults to **Shlink** if not provided.
+
+    ```shell
+    docker run \
+        --name shlink-web-client \
+        -p 8000:80 \
+        -e SHLINK_SERVER_URL=https://doma.in \
+        -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
+        shlinkio/shlink-web-client
+    ```
 
 > **Be extremely careful when using this feature.**
 >

config/docker/nginx.conf

@@ -20,6 +20,11 @@ server {
         add_header Cache-Control "public";
     }
 
+    # servers.json may be on the root, or in conf.d directory
+    location = /servers.json {
+        try_files /servers.json /conf.d/servers.json;
+    }
+
     # When requesting static paths with extension, try them, and return a 404 if not found
     location ~* .+\.(css|js|html|png|jpe?g|gif|bmp|ico|json|csv|otf|eot|svg|svgz|ttf|woff|woff2|ijmap|pdf|tif|map) {
         try_files $uri $uri/ =404;

config/paths.js

@@ -83,6 +83,7 @@ module.exports = {
   appNodeModules: resolveApp('node_modules'),
   publicUrl: getPublicUrl(resolveApp('package.json')),
   servedPath: getServedPath(resolveApp('package.json')),
+  swSrc: resolveModule(resolveApp, 'src/service-worker'),
 };
 
 module.exports.moduleFileExtensions = moduleFileExtensions;

config/webpack.config.js

@@ -13,6 +13,7 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
@@ -32,6 +33,9 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
+// Get the path to the uncompiled service worker (if it exists).
+const swSrc = paths.swSrc;
+
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -610,6 +614,18 @@ module.exports = (webpackEnv) => {
       // You can remove this if you don't use Moment.js:
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
 
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the webpack build.
+      isEnvProduction && fs.existsSync(swSrc) && new WorkboxWebpackPlugin.InjectManifest({
+        swSrc,
+        dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
+        exclude: [ /\.map$/, /asset-manifest\.json$/, /LICENSE/ ],
+        // Bump up the default maximum size (2mb) that's precached,
+        // to make lazy-loading failure scenarios less likely.
+        // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
+        maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+      }),
+
       // TypeScript type checking
       useTypeScript &&
         new ForkTsCheckerWebpackPlugin({

docker-compose.yml

@@ -3,7 +3,7 @@ version: '3'
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:14.15.0-alpine
+    image: node:14.17-alpine
     command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
     volumes:
       - ./:/home/shlink/www

package.json

@@ -6,89 +6,88 @@
   "repository": "https://github.com/shlinkio/shlink-web-client",
   "license": "MIT",
   "scripts": {
-    "lint": "npm run lint:js && npm run lint:css",
-    "lint:js": "eslint --ext .js,.ts,.tsx src test scripts config",
+    "lint": "npm run lint:css && npm run lint:js",
+    "lint:js": "eslint --ext .js,.ts,.tsx src test",
     "lint:js:fix": "npm run lint:js -- --fix",
     "lint:css": "stylelint src/*.scss src/**/*.scss",
     "lint:css:fix": "npm run lint:css -- --fix",
     "start": "node scripts/start.js",
     "serve:build": "serve ./build",
     "build": "node scripts/build.js",
-    "test": "node scripts/test.js --env=jsdom --colors",
+    "test": "node scripts/test.js --env=jsdom --colors --verbose",
     "test:ci": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=clover",
     "test:pretty": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary --coverageReporters=html",
-    "mutate": "./node_modules/.bin/stryker run --concurrency 4",
-    "mutate:ci": "npm run mutate -- --mutate=$MUTATION_FILES"
+    "mutate": "./node_modules/.bin/stryker run --concurrency 4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/react-fontawesome": "^0.1.12",
-    "axios": "^0.21.0",
-    "bootstrap": "^4.5.3",
+    "@fortawesome/fontawesome-free": "^5.15.2",
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-regular-svg-icons": "^5.15.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
     "bottlejs": "^2.0.0",
     "bowser": "^2.11.0",
     "chart.js": "^2.9.4",
     "classnames": "^2.2.6",
     "compare-versions": "^3.6.0",
     "csvjson": "^5.1.0",
-    "event-source-polyfill": "^1.0.21",
+    "date-fns": "^2.22.1",
+    "event-source-polyfill": "^1.0.22",
     "leaflet": "^1.7.1",
-    "moment": "^2.29.1",
     "promise": "^8.1.0",
-    "qs": "^6.9.4",
+    "qs": "^6.9.6",
     "ramda": "^0.27.1",
     "react": "^17.0.1",
-    "react-autosuggest": "^10.0.3",
     "react-chartjs-2": "^2.11.1",
     "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-datepicker": "^3.3.0",
+    "react-datepicker": "^3.6.0",
     "react-dom": "^17.0.1",
-    "react-external-link": "^1.1.1",
-    "react-leaflet": "^3.0.2",
-    "react-moment": "^1.0.0",
+    "react-external-link": "^1.2.0",
+    "react-leaflet": "^3.1.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "react-swipeable": "^6.0.0",
-    "react-tagsinput": "^3.19.0",
-    "reactstrap": "^8.7.1",
+    "react-swipeable": "^6.0.1",
+    "react-tag-autocomplete": "^6.1.0",
+    "reactstrap": "^8.9.0",
     "redux": "^4.0.5",
-    "redux-localstorage-simple": "^2.3.1",
+    "redux-localstorage-simple": "^2.4.0",
     "redux-thunk": "^2.3.0",
-    "uuid": "^8.3.1"
+    "uuid": "^8.3.2",
+    "workbox-core": "^6.1.5",
+    "workbox-expiration": "^6.1.5",
+    "workbox-precaching": "^6.1.5",
+    "workbox-routing": "^6.1.5",
+    "workbox-strategies": "^6.1.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
-    "@shlinkio/eslint-config-js-coding-standard": "~1.1.0",
-    "@stryker-mutator/core": "^4.1.2",
-    "@stryker-mutator/jest-runner": "^4.1.2",
-    "@stryker-mutator/typescript-checker": "^4.1.2",
-    "@svgr/webpack": "^5.4.0",
-    "@types/chart.js": "^2.9.27",
+    "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
+    "@shlinkio/eslint-config-js-coding-standard": "~1.2.2",
+    "@stryker-mutator/core": "^5.0.0",
+    "@stryker-mutator/jest-runner": "^5.0.0",
+    "@stryker-mutator/typescript-checker": "^5.0.0",
+    "@svgr/webpack": "^5.5.0",
+    "@types/chart.js": "^2.9.31",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.15",
-    "@types/leaflet": "^1.5.19",
-    "@types/moment": "^2.13.0",
+    "@types/jest": "^26.0.20",
+    "@types/leaflet": "^1.5.23",
     "@types/qs": "^6.9.5",
-    "@types/ramda": "^0.27.32",
-    "@types/react": "^16.9.56",
-    "@types/react-autosuggest": "^10.0.1",
+    "@types/ramda": "^0.27.38",
+    "@types/react": "^17.0.2",
     "@types/react-color": "^3.0.4",
-    "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-datepicker": "^3.1.1",
-    "@types/react-dom": "^16.9.9",
+    "@types/react-copy-to-clipboard": "^5.0.0",
+    "@types/react-datepicker": "^3.1.5",
+    "@types/react-dom": "^17.0.1",
     "@types/react-leaflet": "^2.5.2",
-    "@types/react-redux": "^7.1.11",
-    "@types/react-router-dom": "^5.1.6",
-    "@types/react-tagsinput": "^3.19.7",
+    "@types/react-redux": "^7.1.16",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-tag-autocomplete": "^6.1.0",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/parser": "^4.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.3.1",
     "adm-zip": "^0.4.16",
     "autoprefixer": "^10.0.2",
@@ -118,7 +117,6 @@
     "jest-resolve": "^26.6.2",
     "mini-css-extract-plugin": "^1.3.1",
     "object-assign": "^4.1.1",
-    "ocular.js": "^0.1.0",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "pnp-webpack-plugin": "^1.6.4",
     "postcss": "^8.1.7",
@@ -132,7 +130,7 @@
     "resolve": "^1.19.0",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
-    "serve": "^11.3.2",
+    "serve": "^12.0.0",
     "stryker-cli": "^1.0.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.7.2",
@@ -142,14 +140,15 @@
     "stylelint-scss": "^3.18.0",
     "sw-precache-webpack-plugin": "^1.0.0",
     "terser-webpack-plugin": "^4.2.3",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^26.5.2",
     "ts-mockery": "^1.2.0",
-    "typescript": "^4.0.5",
+    "typescript": "^4.2.2",
     "url-loader": "^4.1.1",
     "webpack": "^4.44.2",
     "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "^2.2.0",
-    "whatwg-fetch": "^3.5.0"
+    "whatwg-fetch": "^3.5.0",
+    "workbox-webpack-plugin": "^6.1.5"
   },
   "babel": {
     "presets": [

scripts/docker/build

@@ -5,12 +5,12 @@ set -ex
 PLATFORMS="linux/arm/v7,linux/arm64/v8,linux/amd64"
 DOCKER_IMAGE="shlinkio/shlink-web-client"
 
-if [[ "$GITHUB_REF" == *"main"* ]]; then
+if [[ "$GITHUB_REF" == *"develop"* ]]; then
   docker buildx build --push \
     --platform ${PLATFORMS} \
     -t ${DOCKER_IMAGE}:latest .
 
-# If ref is not main, then this is a tag. Build that docker tag and also "stable"
+# If ref is not develop, then this is a tag. Build that docker tag and also "stable"
 else
   VERSION=${GITHUB_REF#refs/tags/v}
   TAGS="-t ${DOCKER_IMAGE}:${VERSION}"

scripts/docker/servers_from_env.sh

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+set -e
+
+ME=$(basename $0)
+
+setup_single_shlink_server() {
+  [ -n "$SHLINK_SERVER_URL" ] || return 0
+  [ -n "$SHLINK_SERVER_API_KEY" ] || return 0
+  local name="${SHLINK_SERVER_NAME:-Shlink}"
+  echo "[{\"name\":\"${name}\",\"url\":\"${SHLINK_SERVER_URL}\",\"apiKey\":\"${SHLINK_SERVER_API_KEY}\"}]" > /usr/share/nginx/html/servers.json
+}
+
+setup_single_shlink_server
+
+exit 0

scripts/set-homepage.js

@@ -0,0 +1,13 @@
+const argv = process.argv.slice(2);
+const [ homepage ] = argv;
+
+if (!homepage) {
+  throw new Error('Homepage has to be provided as the first arg for this script');
+}
+
+const packageJsonPath = `${__dirname}/../package.json`;
+const packageJson = require(packageJsonPath);
+const fs = require('fs');
+
+packageJson.homepage = homepage;
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));

shlink-web-client.d.ts

@@ -1,11 +1,16 @@
 declare module 'event-source-polyfill' {
-  export const EventSourcePolyfill: any;
+  declare class EventSourcePolyfill {
+    public onmessage?: ({ data }: { data: string }) => void;
+    public onerror?: ({ status }: { status: number }) => void;
+    public close: () => void;
+    public constructor(hubUrl: URL, options?: any);
+  }
 }
 
 declare module 'csvjson' {
   export declare class CsvJson {
     public toObject<T>(content: string): T[];
-    public toCSV<T>(data: T[], options: { headers: string }): string;
+    public toCSV<T>(data: T[], options: { headers: 'full' | 'none' | 'relative' | 'key' }): string;
   }
 }
 

src/App.tsx

@@ -2,11 +2,18 @@ import { useEffect, FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import NotFound from './common/NotFound';
 import { ServersMap } from './servers/data';
+import { Settings } from './settings/reducers/settings';
+import { changeThemeInMarkup } from './utils/theme';
+import { AppUpdateBanner } from './common/AppUpdateBanner';
+import { forceUpdate } from './utils/helpers/sw';
 import './App.scss';
 
 interface AppProps {
-  fetchServers: Function;
+  fetchServers: () => void;
   servers: ServersMap;
+  settings: Settings;
+  resetAppUpdate: () => void;
+  appUpdated: boolean;
 }
 
 const App = (
@@ -16,13 +23,15 @@ const App = (
   CreateServer: FC,
   EditServer: FC,
   Settings: FC,
-  ShlinkVersions: FC,
-) => ({ fetchServers, servers }: AppProps) => {
-  // On first load, try to fetch the remote servers if the list is empty
+  ShlinkVersionsContainer: FC,
+) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => {
   useEffect(() => {
+    // On first load, try to fetch the remote servers if the list is empty
     if (Object.keys(servers).length === 0) {
       fetchServers();
     }
+
+    changeThemeInMarkup(settings.ui?.theme ?? 'light');
   }, []);
 
   return (
@@ -41,10 +50,12 @@ const App = (
           </Switch>
         </div>
 
-        <div className="shlink-footer text-center text-md-right">
-          <ShlinkVersions />
+        <div className="shlink-footer">
+          <ShlinkVersionsContainer />
         </div>
       </div>
+
+      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} />
     </div>
   );
 };

src/api/ShlinkApiError.tsx

@@ -0,0 +1,16 @@
+import { ProblemDetailsError } from './types';
+import { isInvalidArgumentError } from './utils';
+
+export interface ShlinkApiErrorProps {
+  errorData?: ProblemDetailsError;
+  fallbackMessage?: string;
+}
+
+export const ShlinkApiError = ({ errorData, fallbackMessage }: ShlinkApiErrorProps) => (
+  <>
+    {errorData?.detail ?? fallbackMessage}
+    {isInvalidArgumentError(errorData) &&
+      <p className="mb-0">Invalid elements: [{errorData.invalidElements.join(', ')}]</p>
+    }
+  </>
+);

src/api/services/ShlinkApiClient.ts

@@ -3,7 +3,7 @@ import { isEmpty, isNil, reject } from 'ramda';
 import { AxiosInstance, AxiosResponse, Method } from 'axios';
 import { ShortUrlsListParams } from '../../short-urls/reducers/shortUrlsListParams';
 import { ShortUrl, ShortUrlData } from '../../short-urls/data';
-import { OptionalString } from '../utils';
+import { OptionalString } from '../../utils/utils';
 import {
   ShlinkHealth,
   ShlinkMercureInfo,
@@ -12,8 +12,11 @@ import {
   ShlinkTagsResponse,
   ShlinkVisits,
   ShlinkVisitsParams,
-  ShlinkShortUrlMeta,
-} from './types';
+  ShlinkShortUrlData,
+  ShlinkDomain,
+  ShlinkDomainsResponse,
+  ShlinkVisitsOverview,
+} from '../types';
 
 const buildShlinkBaseUrl = (url: string, apiVersion: number) => url ? `${url}/rest/v${apiVersion}` : '';
 const rejectNilProps = reject(isNil);
@@ -48,6 +51,14 @@ export default class ShlinkApiClient {
     this.performRequest<{ visits: ShlinkVisits }>(`/tags/${tag}/visits`, 'GET', query)
       .then(({ data }) => data.visits);
 
+  public readonly getOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>('/visits/orphan', 'GET', query)
+      .then(({ data }) => data.visits);
+
+  public readonly getVisitsOverview = async (): Promise<ShlinkVisitsOverview> =>
+    this.performRequest<{ visits: ShlinkVisitsOverview }>('/visits', 'GET')
+      .then(({ data }) => data.visits);
+
   public readonly getShortUrl = async (shortCode: string, domain?: OptionalString): Promise<ShortUrl> =>
     this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'GET', { domain })
       .then(({ data }) => data);
@@ -56,6 +67,7 @@ export default class ShlinkApiClient {
     this.performRequest(`/short-urls/${shortCode}`, 'DELETE', { domain })
       .then(() => {});
 
+  /* @deprecated. If using Shlink 2.6.0 or greater, use updateShortUrl instead */
   public readonly updateShortUrlTags = async (
     shortCode: string,
     domain: OptionalString,
@@ -64,13 +76,13 @@ export default class ShlinkApiClient {
     this.performRequest<{ tags: string[] }>(`/short-urls/${shortCode}/tags`, 'PUT', { domain }, { tags })
       .then(({ data }) => data.tags);
 
-  public readonly updateShortUrlMeta = async (
+  public readonly updateShortUrl = async (
     shortCode: string,
     domain: OptionalString,
-    meta: ShlinkShortUrlMeta,
-  ): Promise<ShlinkShortUrlMeta> =>
-    this.performRequest(`/short-urls/${shortCode}`, 'PATCH', { domain }, meta)
-      .then(() => meta);
+    data: ShlinkShortUrlData,
+  ): Promise<ShortUrl> =>
+    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'PATCH', { domain }, data)
+      .then(({ data }) => data);
 
   public readonly listTags = async (): Promise<ShlinkTags> =>
     this.performRequest<{ tags: ShlinkTagsResponse }>('/tags', 'GET', { withStats: 'true' })
@@ -93,6 +105,9 @@ export default class ShlinkApiClient {
     this.performRequest<ShlinkMercureInfo>('/mercure-info', 'GET')
       .then((resp) => resp.data);
 
+  public readonly listDomains = async (): Promise<ShlinkDomain[]> =>
+    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains', 'GET').then(({ data }) => data.domains.data);
+
   private readonly performRequest = async <T>(url: string, method: Method = 'GET', query = {}, body = {}): Promise<AxiosResponse<T>> => {
     try {
       return await this.axios({
@@ -115,7 +130,7 @@ export default class ShlinkApiClient {
 
       // When the request is not invalid or we have already tried both API versions, throw the error and let the
       // caller handle it
-      if (!apiVersionIsNotSupported || this.apiVersion === 1) {
+      if (!apiVersionIsNotSupported || this.apiVersion === 2) {
         throw e;
       }
 

src/api/services/provideServices.ts

@@ -0,0 +1,8 @@
+import Bottle from 'bottlejs';
+import buildShlinkApiClient from './ShlinkApiClientBuilder';
+
+const provideServices = (bottle: Bottle) => {
+  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios');
+};
+
+export default provideServices;

src/api/types/index.ts

@@ -0,0 +1,94 @@
+import { Visit } from '../../visits/types';
+import { OptionalString } from '../../utils/utils';
+import { ShortUrl, ShortUrlMeta } from '../../short-urls/data';
+
+export interface ShlinkShortUrlsResponse {
+  data: ShortUrl[];
+  pagination: ShlinkPaginator;
+}
+
+export interface ShlinkMercureInfo {
+  token: string;
+  mercureHubUrl: string;
+}
+
+export interface ShlinkHealth {
+  status: 'pass' | 'fail';
+  version: string;
+}
+
+interface ShlinkTagsStats {
+  tag: string;
+  shortUrlsCount: number;
+  visitsCount: number;
+}
+
+export interface ShlinkTags {
+  tags: string[];
+  stats?: ShlinkTagsStats[]; // Is only optional in Shlink older than v2.2
+}
+
+export interface ShlinkTagsResponse {
+  data: string[];
+  stats?: ShlinkTagsStats[]; // Is only optional in Shlink older than v2.2
+}
+
+export interface ShlinkPaginator {
+  currentPage: number;
+  pagesCount: number;
+  totalItems: number;
+}
+
+export interface ShlinkVisits {
+  data: Visit[];
+  pagination: ShlinkPaginator;
+}
+
+export interface ShlinkVisitsOverview {
+  visitsCount: number;
+  orphanVisitsCount?: number; // Optional only for versions older than 2.6.0
+}
+
+export interface ShlinkVisitsParams {
+  domain?: OptionalString;
+  page?: number;
+  itemsPerPage?: number;
+  startDate?: string;
+  endDate?: string;
+  excludeBots?: boolean;
+}
+
+export interface ShlinkShortUrlData extends ShortUrlMeta {
+  longUrl?: string;
+  title?: string;
+  validateUrl?: boolean;
+  tags?: string[];
+}
+
+export interface ShlinkDomain {
+  domain: string;
+  isDefault: boolean;
+}
+
+export interface ShlinkDomainsResponse {
+  data: ShlinkDomain[];
+}
+
+export interface ProblemDetailsError {
+  type: string;
+  detail: string;
+  title: string;
+  status: number;
+
+  [extraProps: string]: any;
+}
+
+export interface InvalidArgumentError extends ProblemDetailsError {
+  type: 'INVALID_ARGUMENT';
+  invalidElements: string[];
+}
+
+export interface InvalidShortUrlDeletion extends ProblemDetailsError {
+  type: 'INVALID_SHORTCODE_DELETION';
+  threshold: number;
+}

src/api/utils/index.ts

@@ -0,0 +1,10 @@
+import { AxiosError } from 'axios';
+import { InvalidArgumentError, InvalidShortUrlDeletion, ProblemDetailsError } from '../types';
+
+export const parseApiError = (e: AxiosError<ProblemDetailsError>) => e.response?.data;
+
+export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
+  error?.type === 'INVALID_ARGUMENT';
+
+export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
+  error?.type === 'INVALID_SHORTCODE_DELETION';

src/app/reducers/appUpdates.ts

@@ -0,0 +1,18 @@
+import { Action } from 'redux';
+import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+
+/* eslint-disable padding-line-between-statements */
+export const APP_UPDATE_AVAILABLE = 'shlink/appUpdates/APP_UPDATE_AVAILABLE';
+export const RESET_APP_UPDATE = 'shlink/appUpdates/RESET_APP_UPDATE';
+/* eslint-enable padding-line-between-statements */
+
+const initialState = false;
+
+export default buildReducer<boolean, Action<string>>({
+  [APP_UPDATE_AVAILABLE]: () => true,
+  [RESET_APP_UPDATE]: () => false,
+}, initialState);
+
+export const appUpdateAvailable = buildActionCreator(APP_UPDATE_AVAILABLE);
+
+export const resetAppUpdate = buildActionCreator(RESET_APP_UPDATE);

src/app/services/provideServices.ts

@@ -0,0 +1,26 @@
+import Bottle from 'bottlejs';
+import { appUpdateAvailable, resetAppUpdate } from '../reducers/appUpdates';
+import App from '../../App';
+import { ConnectDecorator } from '../../container/types';
+
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+  // Components
+  bottle.serviceFactory(
+    'App',
+    App,
+    'MainHeader',
+    'Home',
+    'MenuLayout',
+    'CreateServer',
+    'EditServer',
+    'Settings',
+    'ShlinkVersionsContainer',
+  );
+  bottle.decorator('App', connect([ 'servers', 'settings', 'appUpdated' ], [ 'fetchServers', 'resetAppUpdate' ]));
+
+  // Actions
+  bottle.serviceFactory('appUpdateAvailable', () => appUpdateAvailable);
+  bottle.serviceFactory('resetAppUpdate', () => resetAppUpdate);
+};
+
+export default provideServices;

src/common/AppUpdateBanner.scss

@@ -0,0 +1,17 @@
+@import '../utils/base';
+@import '../utils/mixins/horizontal-align';
+
+.app-update-banner.app-update-banner {
+  @include horizontal-align();
+
+  position: fixed;
+  top: $headerHeight - 25px;
+  padding: 0 4rem 0 0;
+  z-index: 1040;
+  margin: 0;
+  color: var(--text-color);
+  text-align: center;
+  width: 700px;
+  max-width: calc(100% - 30px);
+  box-shadow: 0 0 1rem var(--brand-color);
+}

src/common/AppUpdateBanner.tsx

@@ -0,0 +1,34 @@
+import { FC, MouseEventHandler } from 'react';
+import { Alert, Button } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
+import { SimpleCard } from '../utils/SimpleCard';
+import { useToggle } from '../utils/helpers/hooks';
+import './AppUpdateBanner.scss';
+
+interface AppUpdateBannerProps {
+  isOpen: boolean;
+  toggle: MouseEventHandler<any>;
+  forceUpdate: Function;
+}
+
+export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forceUpdate }) => {
+  const [ isUpdating,, setUpdating ] = useToggle();
+  const update = () => {
+    setUpdating();
+    forceUpdate();
+  };
+
+  return (
+    <Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary">
+      <h4 className="mb-4">This app has just been updated!</h4>
+      <p className="mb-0">
+        Restart it to enjoy the new features.
+        <Button disabled={isUpdating} className="ml-2" color="secondary" size="sm" onClick={update}>
+          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ml-1" /></>}
+          {isUpdating && <>Restarting...</>}
+        </Button>
+      </p>
+    </Alert>
+  );
+};

src/common/AsideMenu.scss

@@ -1,10 +1,10 @@
 @import '../utils/base';
 @import '../utils/mixins/vertical-align';
 
-$asideMenuMobileWidth: 280px;
-
 .aside-menu {
-  background-color: #f7f7f7;
+  width: $asideMenuWidth;
+  background-color: var(--primary-color);
+  box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
   padding-bottom: 10px;
@@ -18,11 +18,9 @@ $asideMenuMobileWidth: 280px;
 
   @media (min-width: $mdMin) {
     padding: 30px 15px 15px;
-    border-right: 1px solid #eeeeee;
   }
 
   @media (max-width: $smMax) {
-    width: $asideMenuMobileWidth !important;
     transition: left 300ms;
     top: $headerHeight - 3px;
     box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
@@ -31,7 +29,7 @@ $asideMenuMobileWidth: 280px;
 
 .aside-menu--hidden {
   @media (max-width: $smMax) {
-    left: -($asideMenuMobileWidth + 35px);
+    left: -($asideMenuWidth + 35px);
   }
 }
 
@@ -44,20 +42,20 @@ $asideMenuMobileWidth: 280px;
   margin: 0 -15px;
   text-decoration: none !important;
   cursor: pointer;
+
+  @media (max-width: $smMax) {
+    margin: 0;
+  }
 }
 
 .aside-menu__item:hover {
-  background-color: $lightHoverColor;
-}
-
-.aside-menu__item--selected {
-  color: #ffffff;
-  background-color: $mainColor;
+  background-color: var(--secondary-color);
 }
 
+.aside-menu__item--selected,
 .aside-menu__item--selected:hover {
   color: #ffffff;
-  background-color: $mainColor;
+  background-color: var(--brand-color);
 }
 
 .aside-menu__item--divider {

src/common/AsideMenu.tsx

@@ -3,6 +3,7 @@ import {
   faLink as createIcon,
   faTags as tagsIcon,
   faPen as editIcon,
+  faHome as overviewIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
@@ -21,7 +22,6 @@ export interface AsideMenuProps {
 
 interface AsideMenuItemProps extends NavLinkProps {
   to: string;
-  className?: string;
 }
 
 const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
@@ -36,10 +36,10 @@ const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...res
 );
 
 const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
-  { selectedServer, className, showOnMobile = false }: AsideMenuProps,
+  { selectedServer, showOnMobile = false }: AsideMenuProps,
 ) => {
   const serverId = selectedServer ? selectedServer.id : '';
-  const asideClass = classNames('aside-menu', className, {
+  const asideClass = classNames('aside-menu', {
     'aside-menu--hidden': !showOnMobile,
   });
   const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null;
@@ -48,6 +48,10 @@ const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
   return (
     <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
+        <AsideMenuItem to={buildPath('/overview')}>
+          <FontAwesomeIcon icon={overviewIcon} />
+          <span className="aside-menu__item-text">Overview</span>
+        </AsideMenuItem>
         <AsideMenuItem to={buildPath('/list-short-urls/1')} isActive={shortUrlsIsActive}>
           <FontAwesomeIcon icon={listIcon} />
           <span className="aside-menu__item-text">List short URLs</span>

src/common/ErrorHandler.scss

@@ -1,9 +0,0 @@
-@import '../utils/mixins/vertical-align.scss';
-
-.error-handler {
-  @include vertical-align();
-
-  padding: 20px;
-  text-align: center;
-  width: 100%;
-}

src/common/ErrorHandler.tsx

@@ -1,6 +1,6 @@
 import { Component, ReactNode } from 'react';
 import { Button } from 'reactstrap';
-import './ErrorHandler.scss';
+import { SimpleCard } from '../utils/SimpleCard';
 
 interface ErrorHandlerState {
   hasError: boolean;
@@ -25,14 +25,16 @@ const ErrorHandler = (
     }
   }
 
-  public render(): ReactNode | undefined {
+  public render(): ReactNode {
     if (this.state.hasError) {
       return (
-        <div className="error-handler">
-          <h1>Oops! This is awkward :S</h1>
-          <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
-          <br />
-          <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
+        <div className="home">
+          <SimpleCard className="p-4">
+            <h1>Oops! This is awkward :S</h1>
+            <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
+            <br />
+            <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
+          </SimpleCard>
         </div>
       );
     }

src/common/Home.scss

@@ -1,18 +1,41 @@
 @import '../utils/base';
+@import '../utils/mixins/vertical-align';
 
 .home {
-  text-align: center;
-  height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-flow: column;
+  position: relative;
+  padding-top: 15px;
+
+  @media (min-width: $mdMin) {
+    padding-top: 0;
+    height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
+  }
+}
+
+.home__logo {
+  @include vertical-align();
+}
+
+.home__main-card {
+  margin: 0 auto;
+  max-width: 720px;
+
+  @media (min-width: $mdMin) {
+    @include vertical-align();
+  }
 }
 
 .home__title {
+  text-align: center;
   font-size: 1.75rem;
+  margin: 0;
 
   @media (min-width: $mdMin) {
     font-size: 2.2rem;
   }
 }
+
+.home__servers-container {
+  @media (min-width: $mdMin) {
+    border-left: 1px solid var(--border-color);
+  }
+}

src/common/Home.tsx

@@ -1,8 +1,13 @@
 import { isEmpty, values } from 'ramda';
 import { Link } from 'react-router-dom';
+import { Card, Row } from 'reactstrap';
+import { ExternalLink } from 'react-external-link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
 import ServersListGroup from '../servers/ServersListGroup';
-import './Home.scss';
 import { ServersMap } from '../servers/data';
+import { ShlinkLogo } from './img/ShlinkLogo';
+import './Home.scss';
 
 export interface HomeProps {
   servers: ServersMap;
@@ -14,11 +19,39 @@ const Home = ({ servers }: HomeProps) => {
 
   return (
     <div className="home">
-      <h1 className="home__title">Welcome to Shlink</h1>
-      <ServersListGroup servers={serversList}>
-        {hasServers && <span>Please, select a server.</span>}
-        {!hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
-      </ServersListGroup>
+      <Card className="home__main-card">
+        <Row noGutters>
+          <div className="col-md-5 d-none d-md-block">
+            <div className="p-4">
+              <ShlinkLogo />
+            </div>
+          </div>
+          <div className="col-md-7 home__servers-container">
+            <div className="p-4">
+              <h1 className="home__title">Welcome!</h1>
+            </div>
+            <ServersListGroup embedded servers={serversList}>
+              {!hasServers && (
+                <div className="p-4 text-center">
+                  <p className="mb-5">This application will help you manage your Shlink servers.</p>
+                  <p>
+                    <Link to="/server/create" className="btn btn-outline-primary btn-lg mr-2">
+                      <FontAwesomeIcon icon={faPlus} /> <span className="ml-1">Add a server</span>
+                    </Link>
+                  </p>
+                  <p className="mb-0 mt-5">
+                    <ExternalLink href="https://shlink.io/documentation">
+                      <small>
+                        <span className="mr-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      </small>
+                    </ExternalLink>
+                  </p>
+                </div>
+              )}
+            </ServersListGroup>
+          </div>
+        </Row>
+      </Card>
     </div>
   );
 };

src/common/MainHeader.scss

@@ -1,8 +1,8 @@
 @import '../utils/base';
 
 .main-header.main-header {
-  background-color: $mainColor !important;
   color: white;
+  background-color: var(--brand-color) !important;
 
   .navbar-brand {
     color: inherit !important;

src/common/MainHeader.tsx

@@ -1,4 +1,4 @@
-import { faPlus as plusIcon, faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useEffect } from 'react';
 import { Link } from 'react-router-dom';
@@ -6,7 +6,7 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
 import classNames from 'classnames';
 import { RouteComponentProps } from 'react-router';
 import { useToggle } from '../utils/helpers/hooks';
-import shlinkLogo from './shlink-logo-white.png';
+import { ShlinkLogo } from './img/ShlinkLogo';
 import './MainHeader.scss';
 
 const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) => {
@@ -15,14 +15,13 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
 
   useEffect(close, [ location ]);
 
-  const createServerPath = '/server/create';
   const settingsPath = '/settings';
   const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen });
 
   return (
     <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
       <NavbarBrand tag={Link} to="/">
-        <img src={shlinkLogo} alt="Shlink" className="main-header__brand-logo" /> Shlink
+        <ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
       </NavbarBrand>
 
       <NavbarToggler onClick={toggleOpen}>
@@ -32,15 +31,10 @@ const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps)
       <Collapse navbar isOpen={isOpen}>
         <Nav navbar className="ml-auto">
           <NavItem>
-            <NavLink tag={Link} to={settingsPath} active={pathname === settingsPath}>
+            <NavLink tag={Link} to={'/settings'} active={pathname === settingsPath}>
               <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
             </NavLink>
           </NavItem>
-          <NavItem>
-            <NavLink tag={Link} to={createServerPath} active={pathname === createServerPath}>
-              <FontAwesomeIcon icon={plusIcon} />&nbsp; Add server
-            </NavLink>
-          </NavItem>
           <ServersDropdown />
         </Nav>
       </Collapse>

src/common/MenuLayout.scss

@@ -33,11 +33,11 @@
   color: white;
 }
 
-.menu-layout__container {
+.menu-layout__container.menu-layout__container {
   padding: 20px 0 0;
   min-height: 100%;
 
   @media (min-width: $mdMin) {
-    padding: 30px 15px 0;
+    padding: 30px 0 0 $asideMenuWidth;
   }
 }

src/common/MenuLayout.tsx

@@ -1,12 +1,11 @@
 import { FC, useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
-import { useSwipeable } from 'react-swipeable';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
-import { useToggle } from '../utils/helpers/hooks';
-import { versionMatch } from '../utils/helpers/version';
+import { useSwipeable, useToggle } from '../utils/helpers/hooks';
+import { supportsOrphanVisits, supportsTagVisits } from '../utils/helpers/features';
 import { isReachableServer } from '../servers/data';
 import NotFound from './NotFound';
 import { AsideMenuProps } from './AsideMenu';
@@ -19,7 +18,10 @@ const MenuLayout = (
   CreateShortUrl: FC,
   ShortUrlVisits: FC,
   TagVisits: FC,
+  OrphanVisits: FC,
   ServerError: FC,
+  Overview: FC,
+  EditShortUrl: FC,
 ) => withSelectedServer(({ location, selectedServer }) => {
   const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
 
@@ -29,41 +31,29 @@ const MenuLayout = (
     return <ServerError />;
   }
 
-  const addTagsVisitsRoute = versionMatch(selectedServer.version, { minVersion: '2.2.0' });
-  const burgerClasses = classNames('menu-layout__burger-icon', {
-    'menu-layout__burger-icon--active': sidebarVisible,
-  });
-  const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
-    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
-      ({ classList }) => classList?.contains('visits-table'),
-    );
-
-    if (swippedOnVisitsTable || document.querySelector('.modal')) {
-      return;
-    }
-
-    callback();
-  };
-  const swipeableProps = useSwipeable({
-    delta: 40,
-    onSwipedLeft: swipeMenuIfNoModalExists(hideSidebar),
-    onSwipedRight: swipeMenuIfNoModalExists(showSidebar),
-  });
+  const addTagsVisitsRoute = supportsTagVisits(selectedServer);
+  const addOrphanVisitsRoute = supportsOrphanVisits(selectedServer);
+  const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
+  const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
   return (
     <>
       <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
 
       <div {...swipeableProps} className="menu-layout__swipeable">
-        <div className="row menu-layout__swipeable-inner">
-          <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
-          <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
-            <div className="menu-layout__container">
+        <div className="menu-layout__swipeable-inner">
+          <AsideMenu selectedServer={selectedServer} showOnMobile={sidebarVisible} />
+          <div className="menu-layout__container" onClick={() => hideSidebar()}>
+            <div className="container-xl">
               <Switch>
+                <Redirect exact from="/server/:serverId" to="/server/:serverId/overview" />
+                <Route exact path="/server/:serverId/overview" component={Overview} />
                 <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
                 <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
-                <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
-                {addTagsVisitsRoute && <Route exact path="/server/:serverId/tag/:tag/visits" component={TagVisits} />}
+                <Route path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
+                <Route path="/server/:serverId/short-code/:shortCode/edit" component={EditShortUrl} />
+                {addTagsVisitsRoute && <Route path="/server/:serverId/tag/:tag/visits" component={TagVisits} />}
+                {addOrphanVisitsRoute && <Route path="/server/:serverId/orphan-visits" component={OrphanVisits} />}
                 <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
                 <Route
                   render={() => <NotFound to={`/server/${selectedServer.id}/list-short-urls/1`}>List short URLs</NotFound>}

src/common/NoMenuLayout.scss

@@ -1,3 +1,9 @@
+@import '../utils/base';
+
 .no-menu-wrapper {
-  padding: 40px 20px 20px;
+  padding: 15px 0 0;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 20px 20px;
+  }
 }

src/common/NoMenuLayout.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import './NoMenuLayout.scss';
 
-const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper">{children}</div>;
+const NoMenuLayout: FC = ({ children }) => <div className="no-menu-wrapper container-xl">{children}</div>;
 
 export default NoMenuLayout;

src/common/NotFound.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
+import { SimpleCard } from '../utils/SimpleCard';
 
 interface NotFoundProps {
   to?: string;
@@ -7,13 +8,15 @@ interface NotFoundProps {
 
 const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
   <div className="home">
-    <h2>Oops! We could not find requested route.</h2>
-    <p>
-      Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
-      button.
-    </p>
-    <br />
-    <Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
+    <SimpleCard className="p-4">
+      <h2>Oops! We could not find requested route.</h2>
+      <p>
+        Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
+        button.
+      </p>
+      <br />
+      <Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
+    </SimpleCard>
   </div>
 );
 

src/common/ShlinkVersions.tsx

@@ -1,16 +1,14 @@
-import classNames from 'classnames';
 import { pipe } from 'ramda';
 import { ExternalLink } from 'react-external-link';
 import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
-import { isReachableServer, SelectedServer } from '../servers/data';
+import { isReachableServer } from '../servers/data';
+import { ShlinkVersionsContainerProps } from './ShlinkVersionsContainer';
 
 const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
 const normalizeVersion = pipe(versionToSemVer(), versionToPrintable);
 
-export interface ShlinkVersionsProps {
-  selectedServer: SelectedServer;
+export interface ShlinkVersionsProps extends ShlinkVersionsContainerProps {
   clientVersion?: string;
-  className?: string;
 }
 
 const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-client'; version: string }) => (
@@ -19,13 +17,11 @@ const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-cli
   </ExternalLink>
 );
 
-const ShlinkVersions = (
-  { selectedServer, className, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps,
-) => {
+const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIENT_VERSION }: ShlinkVersionsProps) => {
   const normalizedClientVersion = normalizeVersion(clientVersion);
 
   return (
-    <small className={classNames('text-muted', className)}>
+    <small className="text-muted">
       {isReachableServer(selectedServer) &&
         <>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </>
       }

src/common/ShlinkVersionsContainer.scss

@@ -0,0 +1,9 @@
+@import '../utils/base';
+
+.shlink-versions-container--with-server {
+  margin-left: 0;
+
+  @media (min-width: $mdMin) {
+    margin-left: $asideMenuWidth;
+  }
+}

src/common/ShlinkVersionsContainer.tsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import { isReachableServer, SelectedServer } from '../servers/data';
+import ShlinkVersions from './ShlinkVersions';
+import './ShlinkVersionsContainer.scss';
+
+export interface ShlinkVersionsContainerProps {
+  selectedServer: SelectedServer;
+}
+
+const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
+  const classes = classNames('text-center', {
+    'shlink-versions-container--with-server': isReachableServer(selectedServer),
+  });
+
+  return (
+    <div className={classes}>
+      <ShlinkVersions selectedServer={selectedServer} />
+    </div>
+  );
+};
+
+export default ShlinkVersionsContainer;

src/common/img/ShlinkLogo.tsx

@@ -0,0 +1,25 @@
+import { MAIN_COLOR } from '../../utils/theme';
+
+export interface ShlinkLogoProps {
+  color?: string;
+  className?: string;
+}
+
+export const ShlinkLogo = ({ color = MAIN_COLOR, className }: ShlinkLogoProps) => (
+  <svg className={className} viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g fill={color}>
+      <path
+        d=" M 23.71 85.08 C 17.22 49.81 49.44 14.86 85.08 18.12 C 118.83 19.21 145.72 53.33 139.45 86.37 C 155.64 102.30 171.32 118.83 187.87 134.36 C 198.32 111.73 208.84 89.12 219.57 66.62 C 226.05 53.84 243.47 48.74 255.73 56.27 C 263.76 62.10 270.34 69.69 277.25 76.75 C 286.28 86.61 285.72 102.89 276.31 112.31 C 223.38 165.37 170.38 218.37 117.35 271.34 C 107.72 280.99 91.01 281.25 81.11 271.86 C 74.39 264.94 66.82 258.69 61.24 250.77 C 53.72 238.52 58.85 221.07 71.64 214.62 C 94.11 203.87 116.72 193.38 139.33 182.91 C 123.81 166.36 107.30 150.68 91.37 134.49 C 60.20 140.28 27.37 116.78 23.71 85.08 Z"
+      />
+      <path
+        d=" M 205.21 201.23 C 225.32 181.36 260.88 181.11 281.14 200.86 C 299.25 218.75 317.37 236.65 335.10 254.93 C 356.73 278.01 352.01 318.70 326.03 336.56 C 320.07 330.47 313.73 324.65 308.12 318.28 C 323.86 309.39 328.76 286.18 316.63 272.39 C 301.73 256.95 286.30 242.03 271.24 226.75 C 264.49 219.65 256.80 212.00 246.37 211.52 C 224.65 208.64 205.52 233.36 214.49 253.58 C 221.09 266.81 234.22 275.12 243.62 286.24 C 240.43 295.96 238.09 306.13 238.29 316.46 C 225.55 304.29 213.16 291.73 200.89 279.09 C 180.97 257.57 183.10 220.45 205.21 201.23 Z"
+      />
+      <path
+        d=" M 273.90 352.07 C 252.28 328.99 256.98 288.31 282.96 270.46 C 288.93 276.54 295.26 282.36 300.88 288.72 C 285.14 297.62 280.23 320.82 292.38 334.61 C 307.27 350.05 322.70 364.96 337.75 380.25 C 344.51 387.35 352.20 395.00 362.64 395.48 C 384.35 398.37 403.49 373.64 394.51 353.42 C 387.92 340.18 374.78 331.88 365.38 320.76 C 368.56 311.04 370.91 300.86 370.71 290.54 C 383.45 302.70 395.84 315.27 408.11 327.91 C 428.03 349.43 425.90 386.55 403.78 405.77 C 383.68 425.64 348.13 425.89 327.86 406.14 C 309.75 388.25 291.60 370.37 273.90 352.07 Z"
+      />
+      <path
+        d=" M 422.11 403.83 C 431.96 394.07 441.60 384.06 451.66 374.51 C 460.90 383.74 471.89 392.70 474.89 406.11 C 480.16 429.97 484.08 454.13 488.76 478.12 C 490.00 483.41 484.47 488.29 479.35 486.63 C 454.66 481.52 429.55 478.12 405.14 471.84 C 393.17 467.97 385.20 457.75 376.55 449.27 C 386.39 439.49 396.13 429.60 406.06 419.91 C 416.37 433.45 435.74 414.00 422.11 403.83 Z"
+      />
+    </g>
+  </svg>
+);

src/common/react-tag-autocomplete.scss

@@ -0,0 +1,145 @@
+@import '../utils/base';
+
+.react-tags {
+  position: relative;
+  padding: 5px 0 0 6px;
+  border-radius: .3rem;
+  background-color: var(--input-color);
+  border: 1px solid var(--input-border-color);
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+  /* shared font styles */
+  font-size: 1em;
+  line-height: 1.2;
+
+  /* clicking anywhere will focus the input */
+  cursor: text;
+}
+
+.react-tags.is-focused {
+  box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
+}
+
+.react-tags__tag {
+  font-size: 100%;
+}
+
+.react-tags__selected {
+  display: inline;
+  vertical-align: 2px;
+}
+
+.react-tags__selected-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0 6px 6px 0;
+  padding: 6px 8px;
+  border: 1px solid var(--input-border-color);
+  border-radius: .25rem;
+  background: #f1f1f1;
+
+  /* match the font styles */
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.react-tags__selected-tag:after {
+  content: '\2715';
+  color: #aaaaaa;
+  margin-left: 8px;
+}
+
+.react-tags__selected-tag:hover,
+.react-tags__selected-tag:focus {
+  border-color: var(--input-border-color);
+}
+
+.react-tags__search {
+  display: inline-block;
+
+  /* match tag layout */
+  padding: 6px 2px;
+  margin-bottom: 5px;
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__search {
+    /* this will become the offsetParent for suggestions */
+    position: relative;
+  }
+}
+
+.react-tags__search-input {
+  font-size: 1.25rem;
+  line-height: inherit;
+  color: var(--input-text-color);
+  background-color: var(--input-color);
+
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+
+  /* remove styles and layout from this element */
+  margin: 0 0 0 7px;
+  padding: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-tags__search-input::-ms-clear {
+  display: none;
+}
+
+.react-tags__suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+@media screen and (min-width: $smMin) {
+  .react-tags__suggestions {
+    width: 240px;
+  }
+}
+
+.react-tags__suggestions ul {
+  margin: 4px -1px;
+  padding: 0;
+  list-style: none;
+  background: var(--primary-color);
+  border: 1px solid var(--border-color);
+  border-radius: .25rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
+}
+
+.react-tags__suggestions li {
+  padding: 8px 10px;
+}
+
+.react-tags__suggestions li:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.react-tags__suggestions li mark {
+  text-decoration: underline;
+  background: none;
+  font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+  cursor: pointer;
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-active {
+  background-color: var(--active-color);
+}
+
+.react-tags__suggestions li.is-disabled {
+  opacity: .5;
+  cursor: auto;
+}

src/common/react-tagsinput.scss

@@ -1,46 +0,0 @@
-.react-tagsinput {
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
-  border-radius: .25rem;
-  overflow: hidden;
-  min-height: 2.6rem;
-  padding: 6px 0 0 6px;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-}
-
-.react-tagsinput--focused {
-  border-color: #80bdff;
-  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
-}
-
-.react-tagsinput-tag {
-  font-size: 1rem;
-  background-color: #f1f1f1;
-  border-radius: 4px;
-  display: inline-block;
-  font-weight: 400;
-  margin: 0 5px 6px 0;
-  padding: 6px 8px;
-  line-height: 1;
-  color: #ffffff;
-}
-
-.react-tagsinput-remove {
-  cursor: pointer;
-  font-weight: 700;
-  margin-left: 8px;
-}
-
-.react-tagsinput-tag span:before {
-  content: '\2715';
-  color: #ffffff;
-}
-
-.react-tagsinput-input {
-  background: transparent;
-  border: 0;
-  outline: none;
-  padding: 3px 5px;
-  width: 100%;
-  margin-bottom: 6px;
-}

src/common/services/provideServices.ts

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import Bottle, { Decorator } from 'bottlejs';
 import ScrollToTop from '../ScrollToTop';
 import MainHeader from '../MainHeader';
@@ -5,13 +6,14 @@ import Home from '../Home';
 import MenuLayout from '../MenuLayout';
 import AsideMenu from '../AsideMenu';
 import ErrorHandler from '../ErrorHandler';
-import ShlinkVersions from '../ShlinkVersions';
+import ShlinkVersionsContainer from '../ShlinkVersionsContainer';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
   bottle.constant('window', (global as any).window);
   bottle.constant('console', global.console);
+  bottle.constant('axios', axios);
 
   bottle.serviceFactory('ScrollToTop', ScrollToTop);
   bottle.decorator('ScrollToTop', withRouter);
@@ -32,15 +34,18 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
     'CreateShortUrl',
     'ShortUrlVisits',
     'TagVisits',
+    'OrphanVisits',
     'ServerError',
+    'Overview',
+    'EditShortUrl',
   );
   bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
   bottle.decorator('MenuLayout', withRouter);
 
   bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');
 
-  bottle.serviceFactory('ShlinkVersions', () => ShlinkVersions);
-  bottle.decorator('ShlinkVersions', connect([ 'selectedServer' ]));
+  bottle.serviceFactory('ShlinkVersionsContainer', () => ShlinkVersionsContainer);
+  bottle.decorator('ShlinkVersionsContainer', connect([ 'selectedServer' ]));
 
   bottle.serviceFactory('ErrorHandler', ErrorHandler, 'window', 'console');
 };

src/container/index.ts

@@ -2,7 +2,7 @@ import Bottle, { IContainer } from 'bottlejs';
 import { withRouter } from 'react-router-dom';
 import { connect as reduxConnect } from 'react-redux';
 import { pick } from 'ramda';
-import App from '../App';
+import provideApiServices from '../api/services/provideServices';
 import provideCommonServices from '../common/services/provideServices';
 import provideShortUrlsServices from '../short-urls/services/provideServices';
 import provideServersServices from '../servers/services/provideServices';
@@ -11,6 +11,8 @@ import provideTagsServices from '../tags/services/provideServices';
 import provideUtilsServices from '../utils/services/provideServices';
 import provideMercureServices from '../mercure/services/provideServices';
 import provideSettingsServices from '../settings/services/provideServices';
+import provideDomainsServices from '../domains/services/provideServices';
+import provideAppServices from '../app/services/provideServices';
 import { ConnectDecorator } from './types';
 
 type LazyActionMap = Record<string, Function>;
@@ -18,7 +20,8 @@ type LazyActionMap = Record<string, Function>;
 const bottle = new Bottle();
 const { container } = bottle;
 
-const lazyService = (container: IContainer, serviceName: string) => (...args: any[]) => container[serviceName](...args);
+const lazyService = <T extends Function, K>(container: IContainer, serviceName: string) =>
+  (...args: any[]) => (container[serviceName] as T)(...args) as K;
 const mapActionService = (map: LazyActionMap, actionName: string): LazyActionMap => ({
   ...map,
   // Wrap actual action service in a function so that it is lazily created the first time it is called
@@ -30,10 +33,9 @@ const connect: ConnectDecorator = (propsFromState: string[] | null, actionServic
     actionServiceNames.reduce(mapActionService, {}),
   );
 
-bottle.serviceFactory('App', App, 'MainHeader', 'Home', 'MenuLayout', 'CreateServer', 'EditServer', 'Settings', 'ShlinkVersions');
-bottle.decorator('App', connect([ 'servers' ], [ 'fetchServers' ]));
-
+provideAppServices(bottle, connect);
 provideCommonServices(bottle, connect, withRouter);
+provideApiServices(bottle);
 provideShortUrlsServices(bottle, connect);
 provideServersServices(bottle, connect, withRouter);
 provideTagsServices(bottle, connect);
@@ -41,5 +43,6 @@ provideVisitsServices(bottle, connect);
 provideUtilsServices(bottle);
 provideMercureServices(bottle);
 provideSettingsServices(bottle, connect);
+provideDomainsServices(bottle, connect);
 
 export default container;

src/container/types.ts

@@ -1,19 +1,20 @@
 import { MercureInfo } from '../mercure/reducers/mercureInfo';
 import { SelectedServer, ServersMap } from '../servers/data';
 import { Settings } from '../settings/reducers/settings';
-import { ShortUrlMetaEdition } from '../short-urls/reducers/shortUrlMeta';
 import { ShortUrlCreation } from '../short-urls/reducers/shortUrlCreation';
 import { ShortUrlDeletion } from '../short-urls/reducers/shortUrlDeletion';
 import { ShortUrlEdition } from '../short-urls/reducers/shortUrlEdition';
 import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
-import { ShortUrlTags } from '../short-urls/reducers/shortUrlTags';
 import { ShortUrlsList } from '../short-urls/reducers/shortUrlsList';
 import { TagDeletion } from '../tags/reducers/tagDelete';
 import { TagEdition } from '../tags/reducers/tagEdit';
 import { TagsList } from '../tags/reducers/tagsList';
-import { ShortUrlDetail } from '../visits/reducers/shortUrlDetail';
+import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
 import { ShortUrlVisits } from '../visits/reducers/shortUrlVisits';
 import { TagVisits } from '../visits/reducers/tagVisits';
+import { DomainsList } from '../domains/reducers/domainsList';
+import { VisitsOverview } from '../visits/reducers/visitsOverview';
+import { VisitsInfo } from '../visits/types';
 
 export interface ShlinkState {
   servers: ServersMap;
@@ -22,17 +23,19 @@ export interface ShlinkState {
   shortUrlsListParams: ShortUrlsListParams;
   shortUrlCreationResult: ShortUrlCreation;
   shortUrlDeletion: ShortUrlDeletion;
-  shortUrlTags: ShortUrlTags;
-  shortUrlMeta: ShortUrlMetaEdition;
   shortUrlEdition: ShortUrlEdition;
   shortUrlVisits: ShortUrlVisits;
   tagVisits: TagVisits;
+  orphanVisits: VisitsInfo;
   shortUrlDetail: ShortUrlDetail;
   tagsList: TagsList;
   tagDelete: TagDeletion;
   tagEdit: TagEdition;
   mercureInfo: MercureInfo;
   settings: Settings;
+  domainsList: DomainsList;
+  visitsOverview: VisitsOverview;
+  appUpdated: boolean;
 }
 
 export type ConnectDecorator = (props: string[] | null, actions?: string[]) => any;

src/domains/DomainSelector.scss

@@ -0,0 +1,19 @@
+@import '../utils/base';
+@import '../utils/mixins/vertical-align';
+
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn,
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:hover,
+.domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:active {
+  color: $textPlaceholder !important;
+}
+
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active,
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:hover,
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:active {
+  color: var(--input-text-color) !important;
+}
+
+.domains-dropdown__back-btn.domains-dropdown__back-btn,
+.domains-dropdown__back-btn.domains-dropdown__back-btn:hover {
+  border-color: var(--border-color);
+}

src/domains/DomainSelector.tsx

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+import { Button, DropdownItem, Input, InputGroup, InputGroupAddon, UncontrolledTooltip } from 'reactstrap';
+import { InputProps } from 'reactstrap/lib/Input';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUndo } from '@fortawesome/free-solid-svg-icons';
+import { isEmpty, pipe } from 'ramda';
+import { DropdownBtn } from '../utils/DropdownBtn';
+import { useToggle } from '../utils/helpers/hooks';
+import { DomainsList } from './reducers/domainsList';
+import './DomainSelector.scss';
+
+export interface DomainSelectorProps extends Omit<InputProps, 'onChange'> {
+  value?: string;
+  onChange: (domain: string) => void;
+}
+
+interface DomainSelectorConnectProps extends DomainSelectorProps {
+  listDomains: Function;
+  domainsList: DomainsList;
+}
+
+export const DomainSelector = ({ listDomains, value, domainsList, onChange }: DomainSelectorConnectProps) => {
+  const [ inputDisplayed,, showInput, hideInput ] = useToggle();
+  const { domains } = domainsList;
+  const valueIsEmpty = isEmpty(value);
+  const unselectDomain = () => onChange('');
+
+  useEffect(() => {
+    listDomains();
+  }, []);
+
+  return inputDisplayed ? (
+    <InputGroup>
+      <Input
+        value={value}
+        placeholder="Domain"
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <InputGroupAddon addonType="append">
+        <Button
+          id="backToDropdown"
+          outline
+          type="button"
+          className="domains-dropdown__back-btn"
+          onClick={pipe(unselectDomain, hideInput)}
+        >
+          <FontAwesomeIcon icon={faUndo} />
+        </Button>
+        <UncontrolledTooltip target="backToDropdown" placement="left" trigger="hover">
+          Existing domains
+        </UncontrolledTooltip>
+      </InputGroupAddon>
+    </InputGroup>
+  ) : (
+    <DropdownBtn
+      text={valueIsEmpty ? 'Domain' : `Domain: ${value}`}
+      className={!valueIsEmpty ? 'domains-dropdown__toggle-btn--active' : 'domains-dropdown__toggle-btn'}
+    >
+      {domains.map(({ domain, isDefault }) => (
+        <DropdownItem
+          key={domain}
+          active={value === domain || isDefault && valueIsEmpty}
+          onClick={() => onChange(domain)}
+        >
+          {domain}
+          {isDefault && <span className="float-right text-muted">default</span>}
+        </DropdownItem>
+      ))}
+      <DropdownItem divider />
+      <DropdownItem onClick={pipe(unselectDomain, showInput)}>
+        <i>New domain</i>
+      </DropdownItem>
+    </DropdownBtn>
+  );
+};

src/domains/reducers/domainsList.ts

@@ -0,0 +1,49 @@
+import { Action, Dispatch } from 'redux';
+import { ShlinkDomain } from '../../api/types';
+import { buildReducer } from '../../utils/helpers/redux';
+import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import { GetState } from '../../container/types';
+
+/* eslint-disable padding-line-between-statements */
+export const LIST_DOMAINS_START = 'shlink/domainsList/LIST_DOMAINS_START';
+export const LIST_DOMAINS_ERROR = 'shlink/domainsList/LIST_DOMAINS_ERROR';
+export const LIST_DOMAINS = 'shlink/domainsList/LIST_DOMAINS';
+/* eslint-enable padding-line-between-statements */
+
+export interface DomainsList {
+  domains: ShlinkDomain[];
+  loading: boolean;
+  error: boolean;
+}
+
+export interface ListDomainsAction extends Action<string> {
+  domains: ShlinkDomain[];
+}
+
+const initialState: DomainsList = {
+  domains: [],
+  loading: false,
+  error: false,
+};
+
+export default buildReducer<DomainsList, ListDomainsAction>({
+  [LIST_DOMAINS_START]: () => ({ ...initialState, loading: true }),
+  [LIST_DOMAINS_ERROR]: () => ({ ...initialState, error: true }),
+  [LIST_DOMAINS]: (_, { domains }) => ({ ...initialState, domains }),
+}, initialState);
+
+export const listDomains = (buildShlinkApiClient: ShlinkApiClientBuilder) => () => async (
+  dispatch: Dispatch,
+  getState: GetState,
+) => {
+  dispatch({ type: LIST_DOMAINS_START });
+  const { listDomains } = buildShlinkApiClient(getState);
+
+  try {
+    const domains = await listDomains();
+
+    dispatch<ListDomainsAction>({ type: LIST_DOMAINS, domains });
+  } catch (e) {
+    dispatch({ type: LIST_DOMAINS_ERROR });
+  }
+};

src/domains/services/provideServices.ts

@@ -0,0 +1,15 @@
+import Bottle from 'bottlejs';
+import { ConnectDecorator } from '../../container/types';
+import { listDomains } from '../reducers/domainsList';
+import { DomainSelector } from '../DomainSelector';
+
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+  // Components
+  bottle.serviceFactory('DomainSelector', () => DomainSelector);
+  bottle.decorator('DomainSelector', connect([ 'domainsList' ], [ 'listDomains' ]));
+
+  // Actions
+  bottle.serviceFactory('listDomains', listDomains, 'buildShlinkApiClient');
+};
+
+export default provideServices;

src/index.scss

@@ -1,41 +1,156 @@
+/* stylelint-disable no-descending-specificity */
+
 @import './utils/base';
+@import 'node_modules/bootstrap/scss/bootstrap.scss';
+@import './common/react-tag-autocomplete.scss';
+@import './theme/theme';
+
+* {
+  outline: none !important;
+}
 
 html,
 body,
 #root {
   height: 100%;
-}
-
-* {
-  outline: none !important;
+  background: var(--secondary-color);
+  color: var(--text-color);
 }
 
 .bg-main {
   background-color: $mainColor !important;
 }
 
+.card-body,
+.card-header,
+.list-group-item {
+  background-color: transparent;
+}
+
+.card-footer {
+  background-color: var(--primary-color-alfa);
+}
+
+.card {
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+  background-color: var(--primary-color);
+  border-color: var(--border-color);
+}
+
+.list-group {
+  background-color: var(--primary-color);
+}
+
+.modal-content,
+.page-link,
+.page-item.disabled .page-link,
+.dropdown-menu {
+  background-color: var(--primary-color);
+}
+
+.modal-header,
+.modal-footer,
+.card-header,
+.card-footer,
+.table thead th,
+.table th,
+.table td,
+.page-link,
+.page-link:hover,
+.page-item.disabled .page-link,
+.dropdown-divider,
+.dropdown-menu,
+.list-group-item,
+.modal-content,
+hr {
+  border-color: var(--border-color);
+}
+
+.table-bordered,
+.table-bordered thead th,
+.table-bordered thead td {
+  border-color: var(--table-border-color);
+}
+
+.page-link:hover {
+  background-color: var(--secondary-color);
+}
+
+.page-item.active .page-link {
+  background-color: var(--brand-color);
+  border-color: var(--brand-color);
+}
+
+.pagination .page-link {
+  cursor: pointer;
+}
+
+.container-xl {
+  @media (min-width: $xlgMin) {
+    max-width: 1320px;
+  }
+
+  @media (max-width: $smMax) {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.dropdown-item,
+.dropdown-item-text {
+  color: var(--text-color);
+}
+
 .dropdown-item:not(:disabled) {
   cursor: pointer;
 }
 
+.dropdown-item:focus:not(:disabled),
+.dropdown-item:hover:not(:disabled),
 .dropdown-item.active:not(:disabled),
 .dropdown-item:active:not(:disabled) {
-  background-color: $lightGrey !important;
-  color: inherit !important;
+  background-color: var(--active-color) !important;
+  color: var(--text-color) !important;
 }
 
 .badge-main {
   color: #ffffff;
-  background-color: $mainColor;
+  background-color: var(--brand-color);
 }
 
-.react-datepicker__input-container,
-.react-datepicker-wrapper {
-  display: block !important;
+.close,
+.close:hover,
+.table,
+.table-hover tbody tr:hover {
+  color: var(--text-color);
 }
 
-.react-datepicker-popper {
-  z-index: 2;
+.table-hover tbody tr:hover {
+  background-color: var(--secondary-color);
+}
+
+.form-control,
+.form-control:focus {
+  background-color: var(--primary-color);
+  border-color: var(--input-border-color);
+  color: var(--input-text-color);
+}
+
+.form-control.disabled,
+.form-control:disabled {
+  background-color: var(--input-disabled-color);
+  cursor: not-allowed;
+}
+
+.card .form-control:not(:disabled),
+.card .form-control:not(:disabled):hover {
+  background-color: var(--input-color);
+}
+
+.table-active,
+.table-active > th,
+.table-active > td {
+  background-color: var(--table-highlight-color) !important;
 }
 
 .navbar-brand {
@@ -44,28 +159,34 @@ body,
   }
 }
 
-.pagination .page-link {
-  cursor: pointer;
-}
-
 .indivisible {
   white-space: nowrap;
 }
 
+.pointer {
+  cursor: pointer;
+}
+
 .text-ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
-.react-datepicker__day--keyboard-selected {
-  background-color: $mainColor;
-
-  &:hover {
-    background-color: darken($mainColor, 12%);
-  }
-}
-
 .progress-bar {
   background-color: $mainColor;
 }
+
+.btn-xs-block {
+  @media (max-width: $xsMax) {
+    width: 100%;
+    display: block;
+  }
+}
+
+.btn-md-block {
+  @media (max-width: $mdMax) {
+    width: 100%;
+    display: block;
+  }
+}

src/index.tsx

@@ -5,16 +5,15 @@ import { homepage } from '../package.json';
 import container from './container';
 import store from './container/store';
 import { fixLeafletIcons } from './utils/helpers/leaflet';
-import 'bootstrap/dist/css/bootstrap.min.css';
+import { register as registerServiceWorker } from './serviceWorkerRegistration';
 import 'react-datepicker/dist/react-datepicker.css';
 import 'leaflet/dist/leaflet.css';
-import './common/react-tagsinput.scss';
 import './index.scss';
 
 // This overwrites icons used for leaflet maps, fixing some issues caused by webpack while processing the CSS
 fixLeafletIcons();
 
-const { App, ScrollToTop, ErrorHandler } = container;
+const { App, ScrollToTop, ErrorHandler, appUpdateAvailable } = container;
 
 render(
   <Provider store={store}>
@@ -28,3 +27,12 @@ render(
   </Provider>,
   document.getElementById('root'),
 );
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://cra.link/PWA
+registerServiceWorker({
+  onUpdate() {
+    store.dispatch(appUpdateAvailable()); // eslint-disable-line @typescript-eslint/no-unsafe-call
+  },
+});

src/mercure/helpers/Topics.ts

@@ -0,0 +1,7 @@
+export class Topics {
+  public static visits = () => 'https://shlink.io/new-visit';
+
+  public static shortUrlVisits = (shortCode: string) => `https://shlink.io/new-visit/${shortCode}`;
+
+  public static orphanVisits = () => 'https://shlink.io/new-orphan-visit';
+}

src/mercure/helpers/boundToMercureHub.tsx

@@ -6,13 +6,13 @@ import { bindToMercureTopic } from './index';
 
 export interface MercureBoundProps {
   createNewVisits: (createdVisits: CreateVisit[]) => void;
-  loadMercureInfo: Function;
+  loadMercureInfo: () => void;
   mercureInfo: MercureInfo;
 }
 
 export function boundToMercureHub<T = {}>(
   WrappedComponent: FC<MercureBoundProps & T>,
-  getTopicForProps: (props: T) => string,
+  getTopicsForProps: (props: T) => string[],
 ) {
   const pendingUpdates = new Set<CreateVisit>();
 
@@ -22,7 +22,7 @@ export function boundToMercureHub<T = {}>(
 
     useEffect(() => {
       const onMessage = (visit: CreateVisit) => interval ? pendingUpdates.add(visit) : createNewVisits([ visit ]);
-      const closeEventSource = bindToMercureTopic(mercureInfo, getTopicForProps(props), onMessage, loadMercureInfo);
+      const closeEventSource = bindToMercureTopic(mercureInfo, getTopicsForProps(props), onMessage, loadMercureInfo);
 
       if (!interval) {
         return closeEventSource;

src/mercure/helpers/index.ts

@@ -1,24 +1,31 @@
 import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
 import { MercureInfo } from '../reducers/mercureInfo';
 
-export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topic: string, onMessage: (message: T) => void, onTokenExpired: Function) => { // eslint-disable-line max-len
+export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topics: string[], onMessage: (message: T) => void, onTokenExpired: () => void) => { // eslint-disable-line max-len
   const { mercureHubUrl, token, loading, error } = mercureInfo;
 
   if (loading || error || !mercureHubUrl) {
     return undefined;
   }
 
-  const hubUrl = new URL(mercureHubUrl);
+  const onEventSourceMessage = ({ data }: { data: string }) => onMessage(JSON.parse(data) as T);
+  const onEventSourceError = ({ status }: { status: number }) => status === 401 && onTokenExpired();
 
-  hubUrl.searchParams.append('topic', topic);
-  const es = new EventSource(hubUrl, {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
+  const subscriptions = topics.map((topic) => {
+    const hubUrl = new URL(mercureHubUrl);
+
+    hubUrl.searchParams.append('topic', topic);
+    const es = new EventSource(hubUrl, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    es.onmessage = onEventSourceMessage;
+    es.onerror = onEventSourceError;
+
+    return es;
   });
 
-  es.onmessage = ({ data }: { data: string }) => onMessage(JSON.parse(data) as T);
-  es.onerror = ({ status }: { status: number }) => status === 401 && onTokenExpired();
-
-  return () => es.close();
+  return () => subscriptions.forEach((es) => es.close());
 };

src/mercure/reducers/mercureInfo.ts

@@ -1,8 +1,8 @@
 import { Action, Dispatch } from 'redux';
-import { ShlinkMercureInfo } from '../../utils/services/types';
+import { ShlinkMercureInfo } from '../../api/types';
 import { GetState } from '../../container/types';
 import { buildReducer } from '../../utils/helpers/redux';
-import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
+import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 
 /* eslint-disable padding-line-between-statements */
 export const GET_MERCURE_INFO_START = 'shlink/mercure/GET_MERCURE_INFO_START';

src/reducers/index.ts

@@ -5,17 +5,19 @@ import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
 import shortUrlsListParamsReducer from '../short-urls/reducers/shortUrlsListParams';
 import shortUrlCreationReducer from '../short-urls/reducers/shortUrlCreation';
 import shortUrlDeletionReducer from '../short-urls/reducers/shortUrlDeletion';
-import shortUrlTagsReducer from '../short-urls/reducers/shortUrlTags';
-import shortUrlMetaReducer from '../short-urls/reducers/shortUrlMeta';
 import shortUrlEditionReducer from '../short-urls/reducers/shortUrlEdition';
 import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
 import tagVisitsReducer from '../visits/reducers/tagVisits';
-import shortUrlDetailReducer from '../visits/reducers/shortUrlDetail';
+import orphanVisitsReducer from '../visits/reducers/orphanVisits';
+import shortUrlDetailReducer from '../short-urls/reducers/shortUrlDetail';
 import tagsListReducer from '../tags/reducers/tagsList';
 import tagDeleteReducer from '../tags/reducers/tagDelete';
 import tagEditReducer from '../tags/reducers/tagEdit';
 import mercureInfoReducer from '../mercure/reducers/mercureInfo';
 import settingsReducer from '../settings/reducers/settings';
+import domainsListReducer from '../domains/reducers/domainsList';
+import visitsOverviewReducer from '../visits/reducers/visitsOverview';
+import appUpdatesReducer from '../app/reducers/appUpdates';
 import { ShlinkState } from '../container/types';
 
 export default combineReducers<ShlinkState>({
@@ -25,15 +27,17 @@ export default combineReducers<ShlinkState>({
   shortUrlsListParams: shortUrlsListParamsReducer,
   shortUrlCreationResult: shortUrlCreationReducer,
   shortUrlDeletion: shortUrlDeletionReducer,
-  shortUrlTags: shortUrlTagsReducer,
-  shortUrlMeta: shortUrlMetaReducer,
   shortUrlEdition: shortUrlEditionReducer,
   shortUrlVisits: shortUrlVisitsReducer,
   tagVisits: tagVisitsReducer,
+  orphanVisits: orphanVisitsReducer,
   shortUrlDetail: shortUrlDetailReducer,
   tagsList: tagsListReducer,
   tagDelete: tagDeleteReducer,
   tagEdit: tagEditReducer,
   mercureInfo: mercureInfoReducer,
   settings: settingsReducer,
+  domainsList: domainsListReducer,
+  visitsOverview: visitsOverviewReducer,
+  appUpdated: appUpdatesReducer,
 });

src/servers/CreateServer.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { RouterProps } from 'react-router';
-import classNames from 'classnames';
+import { Result } from '../utils/Result';
 import NoMenuLayout from '../common/NoMenuLayout';
 import { StateFlagTimeout } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
@@ -15,19 +15,11 @@ interface CreateServerProps extends RouterProps {
   createServer: (server: ServerWithId) => void;
 }
 
-const Result: FC<{ type: 'success' | 'error' }> = ({ children, type }) => (
-  <div className="row">
-    <div className="col-md-10 offset-md-1">
-      <div
-        className={classNames('p-2 mt-3 text-white text-center', {
-          'bg-main': type === 'success',
-          'bg-danger': type === 'error',
-        })}
-      >
-        {children}
-      </div>
-    </div>
-  </div>
+const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
+  <Result type={type}>
+    {type === 'success' && 'Servers properly imported. You can now select one from the list :)'}
+    {type === 'error' && 'The servers could not be imported. Make sure the format is correct.'}
+  </Result>
 );
 
 const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
@@ -39,18 +31,22 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
     const id = uuid();
 
     createServer({ ...serverData, id });
-    push(`/server/${id}/list-short-urls/1`);
+    push(`/server/${id}`);
   };
 
   return (
     <NoMenuLayout>
-      <ServerForm onSubmit={handleSubmit}>
+      <ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
         <ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
         <button className="btn btn-outline-primary">Create server</button>
       </ServerForm>
 
-      {serversImported && <Result type="success">Servers properly imported. You can now select one from the list :)</Result>}
-      {errorImporting && <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>}
+      {(serversImported || errorImporting) && (
+        <div className="mt-3">
+          {serversImported && <ImportResult type="success" />}
+          {errorImporting && <ImportResult type="error" />}
+        </div>
+      )}
     </NoMenuLayout>
   );
 };

src/servers/DeleteServerModal.tsx

@@ -26,7 +26,7 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: De
         <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
         <p>
           <i>
-            No data will be deleted, only the access to this server will be removed from this host.
+            No data will be deleted, only the access to this server will be removed from this device.
             You can create it again at any moment.
           </i>
         </p>

src/servers/EditServer.tsx

@@ -18,12 +18,16 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
 
   const handleSubmit = (serverData: ServerData) => {
     editServer(selectedServer.id, serverData);
-    push(`/server/${selectedServer.id}/list-short-urls/1`);
+    push(`/server/${selectedServer.id}`);
   };
 
   return (
     <NoMenuLayout>
-      <ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
+      <ServerForm
+        title={<h5 className="mb-0">Edit &quot;{selectedServer.name}&quot;</h5>}
+        initialValues={selectedServer}
+        onSubmit={handleSubmit}
+      >
         <Button outline className="mr-2" onClick={goBack}>Cancel</Button>
         <Button outline color="primary">Save</Button>
       </ServerForm>

src/servers/Overview.scss

@@ -0,0 +1,13 @@
+@import '../utils/base';
+
+.overview__card.overview__card {
+  text-align: center;
+  border-top: 3px solid var(--brand-color);
+  color: inherit;
+  text-decoration: none;
+}
+
+.overview__card-title {
+  text-transform: uppercase;
+  color: $textPlaceholder;
+}

src/servers/Overview.tsx

@@ -0,0 +1,123 @@
+import { FC, useEffect } from 'react';
+import { Card, CardBody, CardHeader, CardText, CardTitle, Row } from 'reactstrap';
+import { Link, useHistory } from 'react-router-dom';
+import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
+import { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
+import { prettify } from '../utils/helpers/numbers';
+import { TagsList } from '../tags/reducers/tagsList';
+import { ShortUrlsTableProps } from '../short-urls/ShortUrlsTable';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
+import { CreateShortUrlProps } from '../short-urls/CreateShortUrl';
+import { VisitsOverview } from '../visits/reducers/visitsOverview';
+import { Versions } from '../utils/helpers/version';
+import { Topics } from '../mercure/helpers/Topics';
+import { isServerWithId, SelectedServer } from './data';
+import './Overview.scss';
+
+interface OverviewConnectProps {
+  shortUrlsList: ShortUrlsListState;
+  listShortUrls: (params: ShortUrlsListParams) => void;
+  listTags: Function;
+  tagsList: TagsList;
+  selectedServer: SelectedServer;
+  visitsOverview: VisitsOverview;
+  loadVisitsOverview: Function;
+}
+
+export const Overview = (
+  ShortUrlsTable: FC<ShortUrlsTableProps>,
+  CreateShortUrl: FC<CreateShortUrlProps>,
+  ForServerVersion: FC<Versions>,
+) => boundToMercureHub(({
+  shortUrlsList,
+  listShortUrls,
+  listTags,
+  tagsList,
+  selectedServer,
+  loadVisitsOverview,
+  visitsOverview,
+}: OverviewConnectProps) => {
+  const { loading, shortUrls } = shortUrlsList;
+  const { loading: loadingTags } = tagsList;
+  const { loading: loadingVisits, visitsCount, orphanVisitsCount } = visitsOverview;
+  const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
+  const history = useHistory();
+
+  useEffect(() => {
+    listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
+    listTags();
+    loadVisitsOverview();
+  }, []);
+
+  return (
+    <>
+      <Row>
+        <div className="col-md-6 col-xl-3">
+          <Card className="overview__card mb-3" body>
+            <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
+            <CardText tag="h2">
+              <ForServerVersion minVersion="2.2.0">
+                {loadingVisits ? 'Loading...' : prettify(visitsCount)}
+              </ForServerVersion>
+              <ForServerVersion maxVersion="2.1.*">
+                <small className="text-muted"><i>Shlink 2.2 is needed</i></small>
+              </ForServerVersion>
+            </CardText>
+          </Card>
+        </div>
+        <div className="col-md-6 col-xl-3">
+          <Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/orphan-visits`}>
+            <CardTitle tag="h5" className="overview__card-title">Orphan visits</CardTitle>
+            <CardText tag="h2">
+              <ForServerVersion minVersion="2.6.0">
+                {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)}
+              </ForServerVersion>
+              <ForServerVersion maxVersion="2.5.*">
+                <small className="text-muted"><i>Shlink 2.6 is needed</i></small>
+              </ForServerVersion>
+            </CardText>
+          </Card>
+        </div>
+        <div className="col-md-6 col-xl-3">
+          <Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/list-short-urls/1`}>
+            <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
+            <CardText tag="h2">
+              {loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
+            </CardText>
+          </Card>
+        </div>
+        <div className="col-md-6 col-xl-3">
+          <Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/manage-tags`}>
+            <CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
+            <CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
+          </Card>
+        </div>
+      </Row>
+      <Card className="mb-3">
+        <CardHeader>
+          <span className="d-sm-none">Create a short URL</span>
+          <h5 className="d-none d-sm-inline">Create a short URL</h5>
+          <Link className="float-right" to={`/server/${serverId}/create-short-url`}>Advanced options &raquo;</Link>
+        </CardHeader>
+        <CardBody>
+          <CreateShortUrl basicMode />
+        </CardBody>
+      </Card>
+      <Card>
+        <CardHeader>
+          <span className="d-sm-none">Recently created URLs</span>
+          <h5 className="d-none d-sm-inline">Recently created URLs</h5>
+          <Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
+        </CardHeader>
+        <CardBody>
+          <ShortUrlsTable
+            shortUrlsList={shortUrlsList}
+            selectedServer={selectedServer}
+            className="mb-0"
+            onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tag=${tag}`)}
+          />
+        </CardBody>
+      </Card>
+    </>
+  );
+}, () => [ Topics.visits(), Topics.orphanVisits() ]);

src/servers/ServersDropdown.tsx

@@ -1,6 +1,8 @@
 import { isEmpty, values } from 'ramda';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import { faPlus as plusIcon, faFileDownload as exportIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ServersExporter from './services/ServersExporter';
 import { isServerWithId, SelectedServer, ServersMap } from './data';
 
@@ -11,10 +13,15 @@ export interface ServersDropdownProps {
 
 const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, selectedServer }: ServersDropdownProps) => {
   const serversList = values(servers);
+  const createServerItem = (
+    <DropdownItem tag={Link} to="/server/create">
+      <FontAwesomeIcon icon={plusIcon} /> <span className="ml-1">Add a server</span>
+    </DropdownItem>
+  );
 
   const renderServers = () => {
     if (isEmpty(serversList)) {
-      return <DropdownItem disabled><i>Add a server first...</i></DropdownItem>;
+      return createServerItem;
     }
 
     return (
@@ -23,15 +30,16 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
           <DropdownItem
             key={id}
             tag={Link}
-            to={`/server/${id}/list-short-urls/1`}
+            to={`/server/${id}`}
             active={isServerWithId(selectedServer) && selectedServer.id === id}
           >
             {name}
           </DropdownItem>
         ))}
         <DropdownItem divider />
+        {createServerItem}
         <DropdownItem className="servers-dropdown__export-item" onClick={async () => serversExporter.exportServers()}>
-          Export servers
+          <FontAwesomeIcon icon={exportIcon} /> <span className="ml-1">Export servers</span>
         </DropdownItem>
       </>
     );
@@ -39,7 +47,9 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
 
   return (
     <UncontrolledDropdown nav inNavbar>
-      <DropdownToggle nav caret>Servers</DropdownToggle>
+      <DropdownToggle nav caret>
+        <FontAwesomeIcon icon={serverIcon} /> <span className="ml-1">Servers</span>
+      </DropdownToggle>
       <DropdownMenu right>{renderServers()}</DropdownMenu>
     </UncontrolledDropdown>
   );

src/servers/ServersListGroup.scss

@@ -1,8 +1,14 @@
+@import '../utils/base';
 @import '../utils/mixins/vertical-align';
+@import '../utils/mixins/thin-scroll';
 
-.servers-list__list-group {
+.servers-list__list-group.servers-list__list-group {
   width: 100%;
+}
+
+.servers-list__list-group:not(.servers-list__list-group--embedded) {
   max-width: 400px;
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
 }
 
 .servers-list__server-item.servers-list__server-item {
@@ -11,8 +17,29 @@
   padding: .75rem 2.5rem .75rem 1rem;
 }
 
+.servers-list__server-item:hover {
+  background-color: var(--secondary-color);
+}
+
 .servers-list__server-item-icon {
   @include vertical-align();
 
   right: 1rem;
 }
+
+.servers-list__list-group--embedded.servers-list__list-group--embedded {
+  border-radius: 0;
+  border-top: 1px solid var(--border-color);
+
+  @media (min-width: $mdMin) {
+    max-height: 220px;
+    overflow-x: auto;
+
+    @include thin-scroll();
+  }
+
+  .servers-list__server-item {
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+  }
+}

src/servers/ServersListGroup.tsx

@@ -1,29 +1,31 @@
 import { FC } from 'react';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons';
 import { ServerWithId } from './data';
 import './ServersListGroup.scss';
 
-interface ServersListGroup {
+interface ServersListGroupProps {
   servers: ServerWithId[];
+  embedded?: boolean;
 }
 
 const ServerListItem = ({ id, name }: { id: string; name: string }) => (
-  <ListGroupItem tag={Link} to={`/server/${id}/list-short-urls/1`} className="servers-list__server-item">
+  <ListGroupItem tag={Link} to={`/server/${id}`} className="servers-list__server-item">
     {name}
     <FontAwesomeIcon icon={chevronIcon} className="servers-list__server-item-icon" />
   </ListGroupItem>
 );
 
-const ServersListGroup: FC<ServersListGroup> = ({ servers, children }) => (
+const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
   <>
-    <div className="container">
-      <h5>{children}</h5>
-    </div>
+    {children && <h5 className="mb-md-3">{children}</h5>}
     {servers.length > 0 && (
-      <ListGroup className="servers-list__list-group mt-md-3">
+      <ListGroup
+        className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
+      >
         {servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
       </ListGroup>
     )}

src/servers/data/index.ts

@@ -1,3 +1,5 @@
+import { SemVer } from '../../utils/helpers/version';
+
 export interface ServerData {
   name: string;
   url: string;
@@ -9,7 +11,7 @@ export interface ServerWithId extends ServerData {
 }
 
 export interface ReachableServer extends ServerWithId {
-  version: string;
+  version: SemVer;
   printableVersion: string;
 }
 
@@ -34,7 +36,7 @@ export const isServerWithId = (server: SelectedServer | ServerWithId): server is
   !!server?.hasOwnProperty('id');
 
 export const isReachableServer = (server: SelectedServer): server is ReachableServer =>
-  !!server?.hasOwnProperty('printableVersion');
+  !!server?.hasOwnProperty('version');
 
 export const isNotFoundServer = (server: SelectedServer): server is NotFoundServer =>
   !!server?.hasOwnProperty('serverNotFound');

src/servers/helpers/ImportServersBtn.tsx

@@ -7,7 +7,7 @@ type Ref<T> = RefObject<T> | MutableRefObject<T>;
 
 export interface ImportServersBtnProps {
   onImport?: () => void;
-  onImportError?: () => void;
+  onImportError?: (error: Error) => void;
 }
 
 interface ImportServersBtnConnectProps extends ImportServersBtnProps {

src/servers/helpers/ServerError.tsx

@@ -4,6 +4,7 @@ import Message from '../../utils/Message';
 import ServersListGroup from '../ServersListGroup';
 import { DeleteServerButtonProps } from '../DeleteServerButton';
 import { isServerWithId, SelectedServer, ServersMap } from '../data';
+import NoMenuLayout from '../../common/NoMenuLayout';
 import './ServerError.scss';
 
 interface ServerErrorProps {
@@ -14,9 +15,9 @@ interface ServerErrorProps {
 export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC<ServerErrorProps> => (
   { servers, selectedServer },
 ) => (
-  <div className="server-error__container flex-column">
-    <div className="row w-100 mb-3 mb-md-5">
-      <Message type="error">
+  <NoMenuLayout>
+    <div className="server-error__container flex-column">
+      <Message className="w-100 mb-3 mb-md-5" type="error" fullWidth>
         {!isServerWithId(selectedServer) && 'Could not find this Shlink server.'}
         {isServerWithId(selectedServer) && (
           <>
@@ -25,21 +26,21 @@ export const ServerError = (DeleteServerButton: FC<DeleteServerButtonProps>): FC
           </>
         )}
       </Message>
+
+      <ServersListGroup servers={Object.values(servers)}>
+        These are the Shlink servers currently configured. Choose one of
+        them or <Link to="/server/create">add a new one</Link>.
+      </ServersListGroup>
+
+      {isServerWithId(selectedServer) && (
+        <div className="container mt-3 mt-md-5">
+          <h5>
+            Alternatively, if you think you may have miss-configured this server, you
+            can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
+            <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
+          </h5>
+        </div>
+      )}
     </div>
-
-    <ServersListGroup servers={Object.values(servers)}>
-      These are the Shlink servers currently configured. Choose one of
-      them or <Link to="/server/create">add a new one</Link>.
-    </ServersListGroup>
-
-    {isServerWithId(selectedServer) && (
-      <div className="container mt-3 mt-md-5">
-        <h5>
-          Alternatively, if you think you may have miss-configured this server, you
-          can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or&nbsp;
-          <Link to={`/server/${selectedServer.id}/edit`}>edit it</Link>.
-        </h5>
-      </div>
-    )}
-  </div>
+  </NoMenuLayout>
 );

src/servers/helpers/ServerForm.scss

@@ -0,0 +1,3 @@
+.server-form .form-group:last-child {
+  margin-bottom: 0;
+}

src/servers/helpers/ServerForm.tsx

@@ -1,14 +1,17 @@
-import { FC, useEffect, useState } from 'react';
-import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
+import { FC, ReactNode, useEffect, useState } from 'react';
+import { FormGroupContainer } from '../../utils/FormGroupContainer';
 import { handleEventPreventingDefault } from '../../utils/utils';
 import { ServerData } from '../data';
+import { SimpleCard } from '../../utils/SimpleCard';
+import './ServerForm.scss';
 
 interface ServerFormProps {
   onSubmit: (server: ServerData) => void;
   initialValues?: ServerData;
+  title?: ReactNode;
 }
 
-export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children }) => {
+export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
   const [ name, setName ] = useState('');
   const [ url, setUrl ] = useState('');
   const [ apiKey, setApiKey ] = useState('');
@@ -21,10 +24,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   }, [ initialValues ]);
 
   return (
-    <form onSubmit={handleSubmit}>
-      <HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
-      <HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
-      <HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
+    <form className="server-form" onSubmit={handleSubmit}>
+      <SimpleCard className="mb-3" title={title}>
+        <FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
+        <FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
+        <FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
+      </SimpleCard>
 
       <div className="text-right">{children}</div>
     </form>

src/servers/helpers/withSelectedServer.tsx

@@ -2,6 +2,7 @@ import { FC, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router';
 import Message from '../../utils/Message';
 import { isNotFoundServer, SelectedServer } from '../data';
+import NoMenuLayout from '../../common/NoMenuLayout';
 
 interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
   selectServer: (serverId: string) => void;
@@ -18,9 +19,9 @@ export function withSelectedServer<T = {}>(WrappedComponent: FC<WithSelectedServ
 
     if (!selectedServer) {
       return (
-        <div className="row">
+        <NoMenuLayout>
           <Message loading />
-        </div>
+        </NoMenuLayout>
       );
     }
 

src/servers/reducers/selectedServer.ts

@@ -4,9 +4,9 @@ import { resetShortUrlParams } from '../../short-urls/reducers/shortUrlsListPara
 import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';
 import { SelectedServer } from '../data';
 import { GetState } from '../../container/types';
-import { ShlinkHealth } from '../../utils/services/types';
+import { ShlinkHealth } from '../../api/types';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { ShlinkApiClientBuilder } from '../../utils/services/ShlinkApiClientBuilder';
+import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 
 /* eslint-disable padding-line-between-statements */
 export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';

src/servers/services/ServersExporter.ts

@@ -1,31 +1,10 @@
-import { dissoc, head, keys, values } from 'ramda';
+import { dissoc, values } from 'ramda';
 import { CsvJson } from 'csvjson';
 import LocalStorage from '../../utils/services/LocalStorage';
 import { ServersMap } from '../data';
+import { saveCsv } from '../../utils/helpers/csv';
 
-const saveCsv = (window: Window, csv: string) => {
-  const { navigator, document } = window;
-  const filename = 'shlink-servers.csv';
-  const blob = new Blob([ csv ], { type: 'text/csv;charset=utf-8;' });
-
-  // IE10 and IE11
-  if (navigator.msSaveBlob) {
-    navigator.msSaveBlob(blob, filename);
-
-    return;
-  }
-
-  // Modern browsers
-  const link = document.createElement('a');
-  const url = URL.createObjectURL(blob);
-
-  link.setAttribute('href', url);
-  link.setAttribute('download', filename);
-  link.style.visibility = 'hidden';
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
+const SERVERS_FILENAME = 'shlink-servers.csv';
 
 export default class ServersExporter {
   public constructor(
@@ -35,18 +14,15 @@ export default class ServersExporter {
   ) {}
 
   public readonly exportServers = async () => {
-    const servers = values(this.storage.get<ServersMap>('servers') || {}).map(dissoc('id'));
+    const servers = values(this.storage.get<ServersMap>('servers') ?? {}).map(dissoc('id'));
 
     try {
-      const csv = this.csvjson.toCSV(servers, {
-        headers: keys(head(servers)).join(','),
-      });
+      const csv = this.csvjson.toCSV(servers, { headers: 'key' });
 
-      saveCsv(this.window, csv);
+      saveCsv(this.window, csv, SERVERS_FILENAME);
     } catch (e) {
       // FIXME Handle error
-      /* eslint no-console: "off" */
-      console.error(e);
+      console.error(e); // eslint-disable-line no-console
     }
   };
 }

src/servers/services/ServersImporter.ts

@@ -1,24 +1,37 @@
 import { CsvJson } from 'csvjson';
 import { ServerData } from '../data';
 
-const CSV_MIME_TYPE = 'text/csv';
+const validateServer = (server: any): server is ServerData =>
+  typeof server.url === 'string' && typeof server.apiKey === 'string' && typeof server.name === 'string';
+
+const validateServers = (servers: any): servers is ServerData[] =>
+  Array.isArray(servers) && servers.every(validateServer);
 
 export default class ServersImporter {
-  public constructor(private readonly csvjson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
+  public constructor(private readonly csvJson: CsvJson, private readonly fileReaderFactory: () => FileReader) {}
 
   public readonly importServersFromFile = async (file?: File | null): Promise<ServerData[]> => {
-    if (!file || file.type !== CSV_MIME_TYPE) {
-      throw new Error('No file provided or file is not a CSV');
+    if (!file) {
+      throw new Error('No file provided');
     }
 
     const reader = this.fileReaderFactory();
 
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       reader.addEventListener('loadend', (e: ProgressEvent<FileReader>) => {
-        const content = e.target?.result?.toString() ?? '';
-        const servers = this.csvjson.toObject<ServerData>(content);
+        try {
+          // TODO Read as stream, otherwise, if the file is too big, this will block the browser tab
+          const content = e.target?.result?.toString() ?? '';
+          const servers = this.csvJson.toObject(content);
 
-        resolve(servers);
+          if (!validateServers(servers)) {
+            throw new Error('Provided file does not have the right format.');
+          }
+
+          resolve(servers);
+        } catch (e) {
+          reject(e);
+        }
       });
       reader.readAsText(file);
     });

src/servers/services/provideServices.ts

@@ -13,6 +13,7 @@ import ForServerVersion from '../helpers/ForServerVersion';
 import { ServerError } from '../helpers/ServerError';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
+import { Overview } from '../Overview';
 import ServersImporter from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
@@ -43,6 +44,12 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
   bottle.decorator('ServerError', connect([ 'servers', 'selectedServer' ]));
 
+  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl', 'ForServerVersion');
+  bottle.decorator('Overview', connect(
+    [ 'shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview' ],
+    [ 'listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview' ],
+  ));
+
   // Services
   bottle.constant('csvjson', csvjson);
   bottle.constant('fileReaderFactory', () => new FileReader());

src/service-worker.ts

@@ -0,0 +1,80 @@
+/// <reference lib="webworker" />
+/* eslint-disable no-restricted-globals */
+
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+// You can also remove this file if you'd prefer not to use a
+// service worker, and the Workbox build step will be skipped.
+
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope;
+
+clientsClaim();
+
+// Precache all of the assets generated by your build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in your service worker file,
+// even if you decide not to use precaching. See https://cra.link/PWA
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with your index.html shell. Learn more at
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+  // Return false to exempt requests from being fulfilled by index.html.
+  ({ request, url }: { request: Request; url: URL }) => {
+    // If this isn't a navigation, skip.
+    if (request.mode !== 'navigate') {
+      return false;
+    }
+
+    // If this is a URL that starts with /_, skip.
+    if (url.pathname.startsWith('/_')) {
+      return false;
+    }
+
+    // If this looks like a URL for a resource, because it contains
+    // a file extension, skip.
+    if (url.pathname.match(fileExtensionRegexp)) {
+      return false;
+    }
+
+    // Return true to signal that we want to use the handler.
+    return true;
+  },
+  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+);
+
+// An example runtime caching route for requests that aren't handled by the
+// precache, in this case same-origin .png requests like those from in public/
+registerRoute(
+  // Add in any other file extensions or routing criteria as needed.
+  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+  // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  new StaleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      // Ensure that once this runtime cache reaches a maximum size the
+      // least-recently used images are removed.
+      new ExpirationPlugin({ maxEntries: 50 }),
+    ],
+  })
+);
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// Any other custom service worker logic can go here.

src/serviceWorkerRegistration.ts

@@ -0,0 +1,142 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL ?? '', window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://cra.link/PWA'
+          );
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log(
+                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://cra.link/PWA.'
+              );
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' },
+  })
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (
+        response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log('No internet connection found. App is running in offline mode.');
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}

src/settings/RealTimeUpdates.tsx

@@ -1,6 +1,7 @@
-import { Card, CardBody, CardHeader, FormGroup, Input } from 'reactstrap';
+import { FormGroup, Input } from 'reactstrap';
 import classNames from 'classnames';
 import ToggleSwitch from '../utils/ToggleSwitch';
+import { SimpleCard } from '../utils/SimpleCard';
 import { Settings } from './reducers/settings';
 
 interface RealTimeUpdatesProps {
@@ -14,39 +15,39 @@ const intervalValue = (interval?: number) => !interval ? '' : `${interval}`;
 const RealTimeUpdates = (
   { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
 ) => (
-  <Card>
-    <CardHeader>Real-time updates</CardHeader>
-    <CardBody>
-      <FormGroup>
-        <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
-          Enable or disable real-time updates, when using Shlink v2.2.0 or newer.
-        </ToggleSwitch>
-      </FormGroup>
-      <FormGroup className="mb-0">
-        <label className={classNames({ 'text-muted': !realTimeUpdates.enabled })}>
-          Real-time updates frequency (in minutes):
-        </label>
-        <Input
-          type="number"
-          min={0}
-          placeholder="Immediate"
-          disabled={!realTimeUpdates.enabled}
-          value={intervalValue(realTimeUpdates.interval)}
-          onChange={(e) => setRealTimeUpdatesInterval(Number(e.target.value))}
-        />
-        {realTimeUpdates.enabled && (
-          <small className="form-text text-muted">
-            {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
-              <span>
-                Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
-              </span>
-            )}
-            {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
-          </small>
-        )}
-      </FormGroup>
-    </CardBody>
-  </Card>
+  <SimpleCard title="Real-time updates" className="h-100">
+    <FormGroup>
+      <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
+        Enable or disable real-time updates, when using Shlink v2.2.0 or newer.
+        <small className="form-text text-muted">
+          Real-time updates are currently being <b>{realTimeUpdates.enabled ? 'processed' : 'ignored'}</b>.
+        </small>
+      </ToggleSwitch>
+    </FormGroup>
+    <FormGroup className="mb-0">
+      <label className={classNames({ 'text-muted': !realTimeUpdates.enabled })}>
+        Real-time updates frequency (in minutes):
+      </label>
+      <Input
+        type="number"
+        min={0}
+        placeholder="Immediate"
+        disabled={!realTimeUpdates.enabled}
+        value={intervalValue(realTimeUpdates.interval)}
+        onChange={(e) => setRealTimeUpdatesInterval(Number(e.target.value))}
+      />
+      {realTimeUpdates.enabled && (
+        <small className="form-text text-muted">
+          {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
+            <span>
+              Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
+            </span>
+          )}
+          {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
+        </small>
+      )}
+    </FormGroup>
+  </SimpleCard>
 );
 
 export default RealTimeUpdates;

src/settings/Settings.tsx

@@ -1,9 +1,29 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
+import { Row } from 'reactstrap';
 import NoMenuLayout from '../common/NoMenuLayout';
 
-const Settings = (RealTimeUpdates: FC) => () => (
+const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
+  <>
+    {items.map((child, index) => (
+      <Row key={index}>
+        {child.map((subChild, subIndex) => (
+          <div key={subIndex} className="col-lg-6 mb-3">
+            {subChild}
+          </div>
+        ))}
+      </Row>
+    ))}
+  </>
+);
+
+const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC, Visits: FC) => () => (
   <NoMenuLayout>
-    <RealTimeUpdates />
+    <SettingsSections
+      items={[
+        [ <UserInterface />, <ShortUrlCreation /> ], // eslint-disable-line react/jsx-key
+        [ <Visits />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
+      ]}
+    />
   </NoMenuLayout>
 );
 

src/settings/ShortUrlCreation.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { FormGroup } from 'reactstrap';
+import { SimpleCard } from '../utils/SimpleCard';
+import ToggleSwitch from '../utils/ToggleSwitch';
+import { Settings, ShortUrlCreationSettings } from './reducers/settings';
+
+interface ShortUrlCreationProps {
+  settings: Settings;
+  setShortUrlCreationSettings: (settings: ShortUrlCreationSettings) => void;
+}
+
+export const ShortUrlCreation: FC<ShortUrlCreationProps> = (
+  { settings: { shortUrlCreation }, setShortUrlCreationSettings },
+) => (
+  <SimpleCard title="Short URLs creation" className="h-100">
+    <FormGroup className="mb-0">
+      <ToggleSwitch
+        checked={shortUrlCreation?.validateUrls ?? false}
+        onChange={(validateUrls) => setShortUrlCreationSettings({ validateUrls })}
+      >
+        By default, request validation on long URLs when creating new short URLs.
+        <small className="form-text text-muted">
+          The initial state of the <b>Validate URL</b> checkbox will
+          be <b>{shortUrlCreation?.validateUrls ? 'checked' : 'unchecked'}</b>.
+        </small>
+      </ToggleSwitch>
+    </FormGroup>
+  </SimpleCard>
+);

src/settings/UserInterface.scss

@@ -0,0 +1,4 @@
+.user-interface__theme-icon {
+  float: right;
+  margin-top: .25rem;
+}

src/settings/UserInterface.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';
+import { SimpleCard } from '../utils/SimpleCard';
+import ToggleSwitch from '../utils/ToggleSwitch';
+import { changeThemeInMarkup, Theme } from '../utils/theme';
+import { Settings, UiSettings } from './reducers/settings';
+import './UserInterface.scss';
+
+interface UserInterfaceProps {
+  settings: Settings;
+  setUiSettings: (settings: UiSettings) => void;
+}
+
+export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings }) => (
+  <SimpleCard title="User interface" className="h-100">
+    <FontAwesomeIcon icon={ui?.theme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
+    <ToggleSwitch
+      checked={ui?.theme === 'dark'}
+      onChange={(useDarkTheme) => {
+        const theme: Theme = useDarkTheme ? 'dark' : 'light';
+
+        setUiSettings({ theme });
+        changeThemeInMarkup(theme);
+      }}
+    >
+      Use dark theme.
+    </ToggleSwitch>
+  </SimpleCard>
+);

src/settings/Visits.tsx

@@ -0,0 +1,22 @@
+import { FormGroup } from 'reactstrap';
+import { FC } from 'react';
+import { SimpleCard } from '../utils/SimpleCard';
+import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
+import { Settings, VisitsSettings } from './reducers/settings';
+
+interface VisitsProps {
+  settings: Settings;
+  setVisitsSettings: (settings: VisitsSettings) => void;
+}
+
+export const Visits: FC<VisitsProps> = ({ settings, setVisitsSettings }) => (
+  <SimpleCard title="Visits" className="h-100">
+    <FormGroup className="mb-0">
+      <label>Default interval to load on visits sections:</label>
+      <DateIntervalSelector
+        active={settings.visits?.defaultInterval ?? 'last30Days'}
+        onChange={(defaultInterval) => setVisitsSettings({ defaultInterval })}
+      />
+    </FormGroup>
+  </SimpleCard>
+);

src/settings/reducers/settings.ts

@@ -1,23 +1,54 @@
 import { Action } from 'redux';
-import { mergeDeepRight } from 'ramda';
+import { dissoc, mergeDeepRight } from 'ramda';
 import { buildReducer } from '../../utils/helpers/redux';
 import { RecursivePartial } from '../../utils/utils';
+import { Theme } from '../../utils/theme';
+import { DateInterval } from '../../utils/dates/types';
 
-export const SET_REAL_TIME_UPDATES = 'shlink/realTimeUpdates/SET_REAL_TIME_UPDATES';
+export const SET_SETTINGS = 'shlink/realTimeUpdates/SET_SETTINGS';
 
-interface RealTimeUpdates {
+/**
+ * Important! When adding new props in the main Settings interface or any of the nested props, they have to be set as
+ * optional, as old instances of the app will load partial objects from local storage until it is saved again.
+ */
+
+interface RealTimeUpdatesSettings {
   enabled: boolean;
   interval?: number;
 }
 
+export interface ShortUrlCreationSettings {
+  validateUrls: boolean;
+}
+
+export interface UiSettings {
+  theme: Theme;
+}
+
+export interface VisitsSettings {
+  defaultInterval: DateInterval;
+}
+
 export interface Settings {
-  realTimeUpdates: RealTimeUpdates;
+  realTimeUpdates: RealTimeUpdatesSettings;
+  shortUrlCreation?: ShortUrlCreationSettings;
+  ui?: UiSettings;
+  visits?: VisitsSettings;
 }
 
 const initialState: Settings = {
   realTimeUpdates: {
     enabled: true,
   },
+  shortUrlCreation: {
+    validateUrls: false,
+  },
+  ui: {
+    theme: 'light',
+  },
+  visits: {
+    defaultInterval: 'last30Days',
+  },
 };
 
 type SettingsAction = Action & Settings;
@@ -25,15 +56,30 @@ type SettingsAction = Action & Settings;
 type PartialSettingsAction = Action & RecursivePartial<Settings>;
 
 export default buildReducer<Settings, SettingsAction>({
-  [SET_REAL_TIME_UPDATES]: (state, { realTimeUpdates }) => mergeDeepRight(state, { realTimeUpdates }),
+  [SET_SETTINGS]: (state, action) => mergeDeepRight(state, dissoc('type', action)),
 }, initialState);
 
 export const toggleRealTimeUpdates = (enabled: boolean): PartialSettingsAction => ({
-  type: SET_REAL_TIME_UPDATES,
+  type: SET_SETTINGS,
   realTimeUpdates: { enabled },
 });
 
 export const setRealTimeUpdatesInterval = (interval: number): PartialSettingsAction => ({
-  type: SET_REAL_TIME_UPDATES,
+  type: SET_SETTINGS,
   realTimeUpdates: { interval },
 });
+
+export const setShortUrlCreationSettings = (settings: ShortUrlCreationSettings): PartialSettingsAction => ({
+  type: SET_SETTINGS,
+  shortUrlCreation: settings,
+});
+
+export const setUiSettings = (settings: UiSettings): PartialSettingsAction => ({
+  type: SET_SETTINGS,
+  ui: settings,
+});
+
+export const setVisitsSettings = (settings: VisitsSettings): PartialSettingsAction => ({
+  type: SET_SETTINGS,
+  visits: settings,
+});

src/settings/services/provideServices.ts

@@ -1,26 +1,46 @@
 import Bottle from 'bottlejs';
 import RealTimeUpdates from '../RealTimeUpdates';
 import Settings from '../Settings';
-import { setRealTimeUpdatesInterval, toggleRealTimeUpdates } from '../reducers/settings';
+import {
+  setRealTimeUpdatesInterval,
+  setShortUrlCreationSettings,
+  setUiSettings,
+  setVisitsSettings,
+  toggleRealTimeUpdates,
+} from '../reducers/settings';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
+import { ShortUrlCreation } from '../ShortUrlCreation';
+import { UserInterface } from '../UserInterface';
+import { Visits } from '../Visits';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
-  bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates');
+  bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates', 'ShortUrlCreation', 'UserInterface', 'Visits');
   bottle.decorator('Settings', withoutSelectedServer);
   bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ]));
 
-  // Services
   bottle.serviceFactory('RealTimeUpdates', () => RealTimeUpdates);
   bottle.decorator(
     'RealTimeUpdates',
     connect([ 'settings' ], [ 'toggleRealTimeUpdates', 'setRealTimeUpdatesInterval' ]),
   );
 
+  bottle.serviceFactory('ShortUrlCreation', () => ShortUrlCreation);
+  bottle.decorator('ShortUrlCreation', connect([ 'settings' ], [ 'setShortUrlCreationSettings' ]));
+
+  bottle.serviceFactory('UserInterface', () => UserInterface);
+  bottle.decorator('UserInterface', connect([ 'settings' ], [ 'setUiSettings' ]));
+
+  bottle.serviceFactory('Visits', () => Visits);
+  bottle.decorator('Visits', connect([ 'settings' ], [ 'setVisitsSettings' ]));
+
   // Actions
   bottle.serviceFactory('toggleRealTimeUpdates', () => toggleRealTimeUpdates);
   bottle.serviceFactory('setRealTimeUpdatesInterval', () => setRealTimeUpdatesInterval);
+  bottle.serviceFactory('setShortUrlCreationSettings', () => setShortUrlCreationSettings);
+  bottle.serviceFactory('setUiSettings', () => setUiSettings);
+  bottle.serviceFactory('setVisitsSettings', () => setVisitsSettings);
 };
 
 export default provideServices;

src/short-urls/CreateShortUrl.tsx

@@ -1,177 +1,66 @@
-import { faAngleDoubleDown as downIcon, faAngleDoubleUp as upIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { isEmpty, pipe, replace, trim } from 'ramda';
-import { FC, useState } from 'react';
-import { Collapse, FormGroup, Input } from 'reactstrap';
-import { InputType } from 'reactstrap/lib/Input';
-import * as m from 'moment';
-import DateInput, { DateInputProps } from '../utils/DateInput';
-import Checkbox from '../utils/Checkbox';
-import { versionMatch, Versions } from '../utils/helpers/version';
-import { handleEventPreventingDefault, hasValue } from '../utils/utils';
-import { useToggle } from '../utils/helpers/hooks';
-import { isReachableServer, SelectedServer } from '../servers/data';
-import { formatIsoDate } from '../utils/helpers/date';
-import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import { FC, useMemo } from 'react';
+import { SelectedServer } from '../servers/data';
+import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
 import { ShortUrlData } from './data';
 import { ShortUrlCreation } from './reducers/shortUrlCreation';
-import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
 import { CreateShortUrlResultProps } from './helpers/CreateShortUrlResult';
+import { ShortUrlFormProps } from './ShortUrlForm';
 
-const normalizeTag = pipe(trim, replace(/ /g, '-'));
+export interface CreateShortUrlProps {
+  basicMode?: boolean;
+}
 
-interface CreateShortUrlProps {
+interface CreateShortUrlConnectProps extends CreateShortUrlProps {
+  settings: Settings;
   shortUrlCreationResult: ShortUrlCreation;
   selectedServer: SelectedServer;
-  createShortUrl: Function;
+  createShortUrl: (data: ShortUrlData) => Promise<void>;
   resetCreateShortUrl: () => void;
 }
 
-const initialState: ShortUrlData = {
+const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => ({
   longUrl: '',
   tags: [],
   customSlug: '',
+  title: undefined,
   shortCodeLength: undefined,
   domain: '',
   validSince: undefined,
   validUntil: undefined,
   maxVisits: undefined,
   findIfExists: false,
-};
+  validateUrl: settings?.validateUrls ?? false,
+});
 
-type NonDateFields = 'longUrl' | 'customSlug' | 'shortCodeLength' | 'domain' | 'maxVisits';
-type DateFields = 'validSince' | 'validUntil';
-
-const CreateShortUrl = (
-  TagsSelector: FC<TagsSelectorProps>,
-  CreateShortUrlResult: FC<CreateShortUrlResultProps>,
-  ForServerVersion: FC<Versions>,
-) => ({ createShortUrl, shortUrlCreationResult, resetCreateShortUrl, selectedServer }: CreateShortUrlProps) => {
-  const [ shortUrlCreation, setShortUrlCreation ] = useState(initialState);
-  const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle();
-
-  const changeTags = (tags: string[]) => setShortUrlCreation({ ...shortUrlCreation, tags: tags.map(normalizeTag) });
-  const reset = () => setShortUrlCreation(initialState);
-  const save = handleEventPreventingDefault(() => {
-    const shortUrlData = {
-      ...shortUrlCreation,
-      validSince: formatIsoDate(shortUrlCreation.validSince),
-      validUntil: formatIsoDate(shortUrlCreation.validUntil),
-    };
-
-    createShortUrl(shortUrlData).then(reset).catch(() => {});
-  });
-  const renderOptionalInput = (id: NonDateFields, placeholder: string, type: InputType = 'text', props = {}) => (
-    <FormGroup>
-      <Input
-        id={id}
-        type={type}
-        placeholder={placeholder}
-        value={shortUrlCreation[id]}
-        onChange={(e) => setShortUrlCreation({ ...shortUrlCreation, [id]: e.target.value })}
-        {...props}
-      />
-    </FormGroup>
-  );
-  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
-    <div className="form-group">
-      <DateInput
-        selected={shortUrlCreation[id] as m.Moment | null}
-        placeholderText={placeholder}
-        isClearable
-        onChange={(date) => setShortUrlCreation({ ...shortUrlCreation, [id]: date })}
-        {...props}
-      />
-    </div>
-  );
-
-  const currentServerVersion = isReachableServer(selectedServer) ? selectedServer.version : '';
-  const disableDomain = !versionMatch(currentServerVersion, { minVersion: '1.19.0-beta.1' });
-  const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' });
+const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResult: FC<CreateShortUrlResultProps>) => ({
+  createShortUrl,
+  shortUrlCreationResult,
+  resetCreateShortUrl,
+  selectedServer,
+  basicMode = false,
+  settings: { shortUrlCreation: shortUrlCreationSettings },
+}: CreateShortUrlConnectProps) => {
+  const initialState = useMemo(() => getInitialState(shortUrlCreationSettings), [ shortUrlCreationSettings ]);
 
   return (
-    <form onSubmit={save}>
-      <div className="form-group">
-        <input
-          className="form-control form-control-lg"
-          type="url"
-          placeholder="Insert the URL to be shortened"
-          required
-          value={shortUrlCreation.longUrl}
-          onChange={(e) => setShortUrlCreation({ ...shortUrlCreation, longUrl: e.target.value })}
-        />
-      </div>
+    <>
+      <ShortUrlForm
+        initialState={initialState}
+        saving={shortUrlCreationResult.saving}
+        selectedServer={selectedServer}
+        mode={basicMode ? 'create-basic' : 'create'}
+        onSave={async (data: ShortUrlData) => {
+          resetCreateShortUrl();
 
-      <Collapse isOpen={moreOptionsVisible}>
-        <div className="form-group">
-          <TagsSelector tags={shortUrlCreation.tags ?? []} onChange={changeTags} />
-        </div>
-
-        <div className="row">
-          <div className="col-sm-4">
-            {renderOptionalInput('customSlug', 'Custom slug', 'text', {
-              disabled: hasValue(shortUrlCreation.shortCodeLength),
-            })}
-          </div>
-          <div className="col-sm-4">
-            {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
-              min: 4,
-              disabled: disableShortCodeLength || hasValue(shortUrlCreation.customSlug),
-              ...disableShortCodeLength && {
-                title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
-              },
-            })}
-          </div>
-          <div className="col-sm-4">
-            {renderOptionalInput('domain', 'Domain', 'text', {
-              disabled: disableDomain,
-              ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
-            })}
-          </div>
-        </div>
-
-        <div className="row">
-          <div className="col-sm-4">
-            {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-          </div>
-          <div className="col-sm-4">
-            {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlCreation.validUntil as m.Moment | undefined })}
-          </div>
-          <div className="col-sm-4">
-            {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlCreation.validSince as m.Moment | undefined })}
-          </div>
-        </div>
-
-        <ForServerVersion minVersion="1.16.0">
-          <div className="mb-4 text-right">
-            <Checkbox
-              className="mr-2"
-              checked={shortUrlCreation.findIfExists}
-              onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
-            >
-              Use existing URL if found
-            </Checkbox>
-            <UseExistingIfFoundInfoIcon />
-          </div>
-        </ForServerVersion>
-      </Collapse>
-
-      <div>
-        <button type="button" className="btn btn-outline-secondary" onClick={toggleMoreOptionsVisible}>
-          <FontAwesomeIcon icon={moreOptionsVisible ? upIcon : downIcon} />
-          &nbsp;
-          {moreOptionsVisible ? 'Less' : 'More'} options
-        </button>
-        <button
-          className="btn btn-outline-primary float-right"
-          disabled={shortUrlCreationResult.saving || isEmpty(shortUrlCreation.longUrl)}
-        >
-          {shortUrlCreationResult.saving ? 'Creating...' : 'Create'}
-        </button>
-      </div>
-
-      <CreateShortUrlResult {...shortUrlCreationResult} resetCreateShortUrl={resetCreateShortUrl} />
-    </form>
+          return createShortUrl(data);
+        }}
+      />
+      <CreateShortUrlResult
+        {...shortUrlCreationResult}
+        resetCreateShortUrl={resetCreateShortUrl}
+        canBeClosed={basicMode}
+      />
+    </>
   );
 };
 

src/short-urls/EditShortUrl.tsx

@@ -0,0 +1,124 @@
+import { FC, useEffect, useMemo } from 'react';
+import { RouteComponentProps } from 'react-router';
+import { Button, Card } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { ExternalLink } from 'react-external-link';
+import { SelectedServer } from '../servers/data';
+import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
+import { OptionalString } from '../utils/utils';
+import { parseQuery } from '../utils/helpers/query';
+import Message from '../utils/Message';
+import { Result } from '../utils/Result';
+import { ShlinkApiError } from '../api/ShlinkApiError';
+import { useToggle } from '../utils/helpers/hooks';
+import { ShortUrlFormProps } from './ShortUrlForm';
+import { ShortUrlDetail } from './reducers/shortUrlDetail';
+import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
+import { ShortUrlEdition } from './reducers/shortUrlEdition';
+
+interface EditShortUrlConnectProps extends RouteComponentProps<{ shortCode: string }> {
+  settings: Settings;
+  selectedServer: SelectedServer;
+  shortUrlDetail: ShortUrlDetail;
+  shortUrlEdition: ShortUrlEdition;
+  getShortUrlDetail: (shortCode: string, domain: OptionalString) => void;
+  editShortUrl: (shortUrl: string, domain: OptionalString, data: EditShortUrlData) => Promise<void>;
+}
+
+const getInitialState = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSettings): ShortUrlData => {
+  const validateUrl = settings?.validateUrls ?? false;
+
+  if (!shortUrl) {
+    return { longUrl: '', validateUrl };
+  }
+
+  return {
+    longUrl: shortUrl.longUrl,
+    tags: shortUrl.tags,
+    title: shortUrl.title ?? undefined,
+    domain: shortUrl.domain ?? undefined,
+    validSince: shortUrl.meta.validSince ?? undefined,
+    validUntil: shortUrl.meta.validUntil ?? undefined,
+    maxVisits: shortUrl.meta.maxVisits ?? undefined,
+    crawlable: shortUrl.crawlable,
+    validateUrl,
+  };
+};
+
+export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
+  history: { goBack },
+  match: { params },
+  location: { search },
+  settings: { shortUrlCreation: shortUrlCreationSettings },
+  selectedServer,
+  shortUrlDetail,
+  getShortUrlDetail,
+  shortUrlEdition,
+  editShortUrl,
+}: EditShortUrlConnectProps) => {
+  const { loading, error, errorData, shortUrl } = shortUrlDetail;
+  const { saving, error: savingError, errorData: savingErrorData } = shortUrlEdition;
+  const { domain } = parseQuery<{ domain?: string }>(search);
+  const initialState = useMemo(
+    () => getInitialState(shortUrl, shortUrlCreationSettings),
+    [ shortUrl, shortUrlCreationSettings ],
+  );
+  const [ savingSucceeded,, isSuccessful, isNotSuccessful ] = useToggle();
+
+  useEffect(() => {
+    getShortUrlDetail(params.shortCode, domain);
+  }, []);
+
+  if (loading) {
+    return <Message loading />;
+  }
+
+  if (error) {
+    return (
+      <Result type="error">
+        <ShlinkApiError errorData={errorData} fallbackMessage="An error occurred while loading short URL detail :(" />
+      </Result>
+    );
+  }
+
+  return (
+    <>
+      <header className="mb-3">
+        <Card body>
+          <h2 className="d-sm-flex justify-content-between align-items-center mb-0">
+            <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
+              <FontAwesomeIcon icon={faArrowLeft} />
+            </Button>
+            <span className="text-center">
+              <small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>
+            </span>
+            <span />
+          </h2>
+        </Card>
+      </header>
+      <ShortUrlForm
+        initialState={initialState}
+        saving={saving}
+        selectedServer={selectedServer}
+        mode="edit"
+        onSave={async (shortUrlData) => {
+          if (!shortUrl) {
+            return;
+          }
+
+          isNotSuccessful();
+          editShortUrl(shortUrl.shortCode, shortUrl.domain, shortUrlData)
+            .then(isSuccessful)
+            .catch(isNotSuccessful);
+        }}
+      />
+      {savingError && (
+        <Result type="error" className="mt-3">
+          <ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
+        </Result>
+      )}
+      {savingSucceeded && <Result type="success" className="mt-3">Short URL properly edited.</Result>}
+    </>
+  );
+};

src/short-urls/Paginator.scss

@@ -1,7 +1,7 @@
 .short-urls-paginator {
   position: sticky;
   bottom: 0;
-  background-color: rgba(white, .8);
+  background-color: var(--primary-color-alfa);
   padding: .75rem 0;
-  border-top: 1px solid rgba(black, .125);
+  border-top: 1px solid var(--border-color);
 }

src/short-urls/Paginator.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import { pageIsEllipsis, keyForPage, progressivePagination, prettifyPageNumber } from '../utils/helpers/pagination';
-import { ShlinkPaginator } from '../utils/services/types';
+import { ShlinkPaginator } from '../api/types';
 import './Paginator.scss';
 
 interface PaginatorProps {

src/short-urls/SearchBar.tsx

@@ -1,14 +1,13 @@
 import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC } from 'react';
 import { isEmpty, pipe } from 'ramda';
-import moment from 'moment';
+import { parseISO } from 'date-fns';
 import SearchField from '../utils/SearchField';
 import Tag from '../tags/helpers/Tag';
-import DateRangeRow from '../utils/DateRangeRow';
-import { formatDate } from '../utils/helpers/date';
+import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
+import { formatIsoDate } from '../utils/helpers/date';
 import ColorGenerator from '../utils/services/ColorGenerator';
-import { Versions } from '../utils/helpers/version';
+import { DateRange } from '../utils/dates/types';
 import { ShortUrlsListParams } from './reducers/shortUrlsListParams';
 import './SearchBar.scss';
 
@@ -17,15 +16,16 @@ interface SearchBarProps {
   shortUrlsListParams: ShortUrlsListParams;
 }
 
-const dateOrNull = (date?: string) => date ? moment(date) : null;
+const dateOrNull = (date?: string) => date ? parseISO(date) : null;
 
-const SearchBar = (colorGenerator: ColorGenerator, ForServerVersion: FC<Versions>) => (
-  { listShortUrls, shortUrlsListParams }: SearchBarProps,
-) => {
+const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrlsListParams }: SearchBarProps) => {
   const selectedTags = shortUrlsListParams.tags ?? [];
-  const setDate = (dateName: 'startDate' | 'endDate') => pipe(
-    formatDate(),
-    (date) => listShortUrls({ ...shortUrlsListParams, [dateName]: date }),
+  const setDates = pipe(
+    ({ startDate, endDate }: DateRange) => ({
+      startDate: formatIsoDate(startDate) ?? undefined,
+      endDate: formatIsoDate(endDate) ?? undefined,
+    }),
+    (dates) => listShortUrls({ ...shortUrlsListParams, ...dates }),
   );
 
   return (
@@ -36,20 +36,20 @@ const SearchBar = (colorGenerator: ColorGenerator, ForServerVersion: FC<Versions
         }
       />
 
-      <ForServerVersion minVersion="1.21.0">
-        <div className="mt-3">
-          <div className="row">
-            <div className="col-lg-8 offset-lg-4 col-xl-6 offset-xl-6">
-              <DateRangeRow
-                startDate={dateOrNull(shortUrlsListParams.startDate)}
-                endDate={dateOrNull(shortUrlsListParams.endDate)}
-                onStartDateChange={setDate('startDate')}
-                onEndDateChange={setDate('endDate')}
-              />
-            </div>
+      <div className="mt-3">
+        <div className="row">
+          <div className="col-lg-8 offset-lg-4 col-xl-6 offset-xl-6">
+            <DateRangeSelector
+              defaultText="All short URLs"
+              initialDateRange={{
+                startDate: dateOrNull(shortUrlsListParams.startDate),
+                endDate: dateOrNull(shortUrlsListParams.endDate),
+              }}
+              onDatesChange={setDates}
+            />
           </div>
         </div>
-      </ForServerVersion>
+      </div>
 
       {!isEmpty(selectedTags) && (
         <h4 className="search-bar__selected-tag mt-3">

src/short-urls/ShortUrlForm.scss

@@ -0,0 +1,10 @@
+@import '../utils/base';
+
+.short-url-form .card-body > .form-group:last-child,
+.short-url-form p:last-child {
+  margin-bottom: 0;
+}
+
+.short-url-form .card {
+  height: 100%;
+}