Merge pull request #436 from acelaya-forks/feature/recover-pwa

Feature/recover pwa

.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

@@ -8,7 +8,6 @@ on:
 
 jobs:
   lint:
-    continue-on-error: true
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout code

.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 }}/

CHANGELOG.md

@@ -4,6 +4,71 @@ 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.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*

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({

package.json

@@ -7,87 +7,91 @@
   "license": "MIT",
   "scripts": {
     "lint": "npm run lint:css && npm run lint:js",
-    "lint:js": "eslint --ext .js,.ts,.tsx src test scripts config",
+    "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"
   },
   "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",
+    "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-autosuggest": "^10.1.0",
     "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.2.0",
-    "react-leaflet": "^3.0.2",
+    "react-leaflet": "^3.1.0",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
-    "react-swipeable": "^6.0.0",
+    "react-swipeable": "^6.0.1",
     "react-tagsinput": "^3.19.0",
-    "reactstrap": "^8.7.1",
+    "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.3.1",
-    "@stryker-mutator/jest-runner": "^4.3.1",
-    "@stryker-mutator/typescript-checker": "^4.3.1",
-    "@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/jest": "^26.0.20",
+    "@types/leaflet": "^1.5.23",
     "@types/moment": "^2.13.0",
     "@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-autosuggest": "^10.1.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-redux": "^7.1.16",
+    "@types/react-router-dom": "^5.1.7",
     "@types/react-tagsinput": "^3.19.7",
     "@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",
@@ -140,14 +144,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/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.scss

@@ -1,4 +1,5 @@
 @import './utils/base';
+@import './utils/mixins/horizontal-align';
 
 .app-container {
   height: 100%;
@@ -24,3 +25,18 @@
     padding: 0 15px;
   }
 }
+
+.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/App.tsx

@@ -1,12 +1,19 @@
 import { useEffect, FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { Alert } from 'reactstrap';
 import NotFound from './common/NotFound';
 import { ServersMap } from './servers/data';
+import { Settings } from './settings/reducers/settings';
+import { changeThemeInMarkup } from './utils/theme';
+import { SimpleCard } from './utils/SimpleCard';
 import './App.scss';
 
 interface AppProps {
-  fetchServers: Function;
+  fetchServers: () => void;
   servers: ServersMap;
+  settings: Settings;
+  resetAppUpdate: () => void;
+  appUpdated: boolean;
 }
 
 const App = (
@@ -17,12 +24,14 @@ const App = (
   EditServer: FC,
   Settings: FC,
   ShlinkVersionsContainer: FC,
-) => ({ fetchServers, servers }: AppProps) => {
-  // On first load, try to fetch the remote servers if the list is empty
+) => ({ 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 (
@@ -45,6 +54,17 @@ const App = (
           <ShlinkVersionsContainer />
         </div>
       </div>
+
+      <Alert
+        className="app__update-banner"
+        tag={SimpleCard}
+        color="secondary"
+        isOpen={appUpdated}
+        toggle={resetAppUpdate}
+      >
+        <h4 className="mb-4">This app has just been updated!</h4>
+        <p className="mb-0">Restart it to enjoy the new features.</p>
+      </Alert>
     </div>
   );
 };

src/api/services/ShlinkApiClient.ts

@@ -12,7 +12,7 @@ import {
   ShlinkTagsResponse,
   ShlinkVisits,
   ShlinkVisitsParams,
-  ShlinkShortUrlMeta,
+  ShlinkShortUrlData,
   ShlinkDomain,
   ShlinkDomainsResponse,
   ShlinkVisitsOverview,
@@ -51,6 +51,10 @@ 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);
@@ -63,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,
@@ -71,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' })

src/api/types/index.ts

@@ -46,6 +46,7 @@ export interface ShlinkVisits {
 
 export interface ShlinkVisitsOverview {
   visitsCount: number;
+  orphanVisitsCount?: number; // Optional only for versions older than 2.6.0
 }
 
 export interface ShlinkVisitsParams {
@@ -56,8 +57,11 @@ export interface ShlinkVisitsParams {
   endDate?: string;
 }
 
-export interface ShlinkShortUrlMeta extends ShortUrlMeta {
+export interface ShlinkShortUrlData extends ShortUrlMeta {
   longUrl?: string;
+  title?: string;
+  validateUrl?: boolean;
+  tags?: string[];
 }
 
 export interface ShlinkDomain {

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/AsideMenu.scss

@@ -3,7 +3,7 @@
 
 .aside-menu {
   width: $asideMenuWidth;
-  background-color: white;
+  background-color: var(--primary-color);
   box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
   position: fixed !important;
   padding-top: 13px;
@@ -18,7 +18,6 @@
 
   @media (min-width: $mdMin) {
     padding: 30px 15px 15px;
-    border-right: 1px solid #eeeeee;
   }
 
   @media (max-width: $smMax) {
@@ -50,17 +49,13 @@
 }
 
 .aside-menu__item:hover {
-  background-color: $lightColor;
-}
-
-.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/Home.scss

@@ -36,6 +36,6 @@
 
 .home__servers-container {
   @media (min-width: $mdMin) {
-    border-left: 1px solid rgba(0, 0, 0, .125);
+    border-left: 1px solid var(--border-color);
   }
 }

src/common/Home.tsx

@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom';
 import { Card, Row } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 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;

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/MenuLayout.tsx

@@ -1,12 +1,11 @@
 import { FC, useEffect } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { useSwipeable } from 'react-swipeable';
 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,8 +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();
 
@@ -30,26 +31,10 @@ 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 (
     <>
@@ -66,7 +51,9 @@ const MenuLayout = (
                 <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
                 <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
                 <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/react-tagsinput.scss

@@ -1,6 +1,8 @@
+@import '../utils/base';
+
 .react-tagsinput {
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
+  background-color: var(--input-color);
+  border: 1px solid var(--input-border-color);
   border-radius: .25rem;
   overflow: hidden;
   min-height: 2.6rem;
@@ -10,7 +12,7 @@
 
 .react-tagsinput--focused {
   border-color: #80bdff;
-  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
+  box-shadow: 0 0 0 .2rem rgb(70 150 229 / 25%);
 }
 
 .react-tagsinput-tag {
@@ -44,5 +46,13 @@
   width: 100%;
   margin-bottom: 6px;
   font-size: 1.25rem;
-  color: #495057;
+  color: var(--input-text-color);
+}
+
+.react-tagsinput-input::placeholder {
+  color: $textPlaceholder;
+}
+
+.react-autosuggest__suggestion--highlighted {
+  background-color: var(--active-color);
 }

src/common/services/provideServices.ts

@@ -34,8 +34,10 @@ 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);

src/container/index.ts

@@ -2,7 +2,6 @@ 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';
@@ -13,6 +12,7 @@ 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>;
@@ -20,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
@@ -32,19 +33,7 @@ const connect: ConnectDecorator = (propsFromState: string[] | null, actionServic
     actionServiceNames.reduce(mapActionService, {}),
   );
 
-bottle.serviceFactory(
-  'App',
-  App,
-  'MainHeader',
-  'Home',
-  'MenuLayout',
-  'CreateServer',
-  'EditServer',
-  'Settings',
-  'ShlinkVersionsContainer',
-);
-bottle.decorator('App', connect([ 'servers' ], [ 'fetchServers' ]));
-
+provideAppServices(bottle, connect);
 provideCommonServices(bottle, connect, withRouter);
 provideApiServices(bottle);
 provideShortUrlsServices(bottle, connect);

src/container/types.ts

@@ -1,21 +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;
@@ -24,11 +23,10 @@ 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;
@@ -37,6 +35,7 @@ export interface ShlinkState {
   settings: Settings;
   domainsList: DomainsList;
   visitsOverview: VisitsOverview;
+  appUpdated: boolean;
 }
 
 export type ConnectDecorator = (props: string[] | null, actions?: string[]) => any;

src/domains/DomainSelector.scss

@@ -1,12 +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: #495057 !important;
+  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: #ced4da;
+  border-color: var(--border-color);
 }

src/domains/DomainSelector.tsx

@@ -54,7 +54,7 @@ export const DomainSelector = ({ listDomains, value, domainsList, onChange }: Do
   ) : (
     <DropdownBtn
       text={valueIsEmpty ? 'Domain' : `Domain: ${value}`}
-      className={!valueIsEmpty ? 'domains-dropdown__toggle-btn--active' : ''}
+      className={!valueIsEmpty ? 'domains-dropdown__toggle-btn--active' : 'domains-dropdown__toggle-btn'}
     >
       {domains.map(({ domain, isDefault }) => (
         <DropdownItem

src/index.scss

@@ -1,32 +1,88 @@
+/* stylelint-disable no-descending-specificity */
+
 @import './utils/base';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import './common/react-tagsinput.scss';
+@import './theme/theme';
+
+* {
+  outline: none !important;
+}
 
 html,
 body,
 #root {
   height: 100%;
-  background: $lightColor;
-}
-
-* {
-  outline: none !important;
+  background: var(--secondary-color);
+  color: var(--text-color);
 }
 
 .bg-main {
   background-color: $mainColor !important;
 }
 
-.card {
-  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
-}
-
-.card-header {
-  background-color: white;
+.card-body,
+.card-header,
+.list-group-item {
+  background-color: transparent;
 }
 
 .card-footer {
-  background-color: rgba(255, 255, 255, .5);
+  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 {
@@ -40,32 +96,61 @@ body,
   }
 }
 
+.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);
+}
+
+.close,
+.close:hover,
+.table,
+.table-hover tbody tr:hover {
+  color: var(--text-color);
 }
 
 .table-hover tbody tr:hover {
-  background-color: $lightColor;
+  background-color: var(--secondary-color);
 }
 
-.react-datepicker__input-container,
-.react-datepicker-wrapper {
-  display: block !important;
+.form-control,
+.form-control:focus {
+  background-color: var(--primary-color);
+  border-color: var(--input-border-color);
+  color: var(--input-text-color);
 }
 
-.react-datepicker-popper {
-  z-index: 2;
+.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 {
@@ -74,10 +159,6 @@ body,
   }
 }
 
-.pagination .page-link {
-  cursor: pointer;
-}
-
 .indivisible {
   white-space: nowrap;
 }
@@ -92,14 +173,6 @@ body,
   white-space: nowrap;
 }
 
-.react-datepicker__day--keyboard-selected {
-  background-color: $mainColor;
-
-  &:hover {
-    background-color: darken($mainColor, 12%);
-  }
-}
-
 .progress-bar {
   background-color: $mainColor;
 }

src/index.tsx

@@ -5,6 +5,7 @@ import { homepage } from '../package.json';
 import container from './container';
 import store from './container/store';
 import { fixLeafletIcons } from './utils/helpers/leaflet';
+import { register as registerServiceWorker } from './serviceWorkerRegistration';
 import 'react-datepicker/dist/react-datepicker.css';
 import 'leaflet/dist/leaflet.css';
 import './index.scss';
@@ -12,7 +13,7 @@ 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}>
@@ -26,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/reducers/index.ts

@@ -5,12 +5,11 @@ 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';
@@ -18,6 +17,7 @@ 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>({
@@ -27,11 +27,10 @@ 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,
@@ -40,4 +39,5 @@ export default combineReducers<ShlinkState>({
   settings: settingsReducer,
   domainsList: domainsListReducer,
   visitsOverview: visitsOverviewReducer,
+  appUpdated: appUpdatesReducer,
 });

src/servers/CreateServer.tsx

@@ -42,7 +42,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
       </ServerForm>
 
       {(serversImported || errorImporting) && (
-        <div className="mt-4">
+        <div className="mt-3">
           {serversImported && <ImportResult type="success" />}
           {errorImporting && <ImportResult type="error" />}
         </div>

src/servers/Overview.scss

@@ -2,10 +2,12 @@
 
 .overview__card.overview__card {
   text-align: center;
-  border-top: 3px solid $mainColor;
+  border-top: 3px solid var(--brand-color);
+  color: inherit;
+  text-decoration: none;
 }
 
 .overview__card-title {
   text-transform: uppercase;
-  color: #6c757d;
+  color: $textPlaceholder;
 }

src/servers/Overview.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react';
-import { Card, CardBody, CardHeader, CardText, CardTitle } from 'reactstrap';
+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';
@@ -10,6 +10,7 @@ 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';
 
@@ -38,7 +39,7 @@ export const Overview = (
 }: OverviewConnectProps) => {
   const { loading, shortUrls } = shortUrlsList;
   const { loading: loadingTags } = tagsList;
-  const { loading: loadingVisits, visitsCount } = visitsOverview;
+  const { loading: loadingVisits, visitsCount, orphanVisitsCount } = visitsOverview;
   const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
   const history = useHistory();
 
@@ -50,9 +51,9 @@ export const Overview = (
 
   return (
     <>
-      <div className="row mb-3">
-        <div className="col-md-6 col-lg-4">
-          <Card className="overview__card mb-2" body>
+      <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">
@@ -64,22 +65,35 @@ export const Overview = (
             </CardText>
           </Card>
         </div>
-        <div className="col-md-6 col-lg-4">
-          <Card className="overview__card mb-2" body>
+        <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-12 col-lg-4">
-          <Card className="overview__card mb-2" body>
+        <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>
-      </div>
-      <Card className="mb-4">
+      </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>
@@ -106,4 +120,4 @@ export const Overview = (
       </Card>
     </>
   );
-}, () => 'https://shlink.io/new-visit');
+}, () => [ Topics.visits(), Topics.orphanVisits() ]);

src/servers/ServersListGroup.scss

@@ -18,7 +18,7 @@
 }
 
 .servers-list__server-item:hover {
-  background-color: $lightColor;
+  background-color: var(--secondary-color);
 }
 
 .servers-list__server-item-icon {
@@ -29,7 +29,7 @@
 
 .servers-list__list-group--embedded.servers-list__list-group--embedded {
   border-radius: 0;
-  border-top: 1px solid rgba(0, 0, 0, .125);
+  border-top: 1px solid var(--border-color);
 
   @media (min-width: $mdMin) {
     max-height: 220px;
@@ -40,6 +40,6 @@
 
   .servers-list__server-item {
     border: none;
-    border-bottom: 1px solid rgba(0, 0, 0, .125);
+    border-bottom: 1px solid var(--border-color);
   }
 }

src/servers/ServersListGroup.tsx

@@ -7,7 +7,7 @@ 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;
 }
@@ -19,7 +19,7 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
   </ListGroupItem>
 );
 
-const ServersListGroup: FC<ServersListGroup> = ({ servers, children, embedded = false }) => (
+const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
   <>
     {children && <h5 className="mb-md-3">{children}</h5>}
     {servers.length > 0 && (

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/ServerForm.tsx

@@ -25,7 +25,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
 
   return (
     <form className="server-form" onSubmit={handleSubmit}>
-      <SimpleCard className="mb-4" title={title}>
+      <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>

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,7 +1,6 @@
 import { CsvJson } from 'csvjson';
 import { ServerData } from '../data';
 
-
 interface CsvFile extends File {
   type: 'text/csv' | 'text/comma-separated-values' | 'application/csv';
 }

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

@@ -15,10 +15,13 @@ const intervalValue = (interval?: number) => !interval ? '' : `${interval}`;
 const RealTimeUpdates = (
   { settings: { realTimeUpdates }, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
 ) => (
-  <SimpleCard title="Real-time updates">
+  <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">

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.scss

@@ -1,6 +0,0 @@
-@import '../utils/base';
-
-.create-short-url .form-group:last-child,
-.create-short-url p:last-child {
-  margin-bottom: 0;
-}

src/short-urls/CreateShortUrl.tsx

@@ -1,214 +1,66 @@
-import { isEmpty, pipe, replace, trim } from 'ramda';
-import { FC, useState } from 'react';
-import { Button, 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 { isReachableServer, SelectedServer } from '../servers/data';
-import { formatIsoDate } from '../utils/helpers/date';
-import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
-import { DomainSelectorProps } from '../domains/DomainSelector';
-import { SimpleCard } from '../utils/SimpleCard';
+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 './CreateShortUrl.scss';
+import { ShortUrlFormProps } from './ShortUrlForm';
 
 export interface CreateShortUrlProps {
   basicMode?: boolean;
 }
 
 interface CreateShortUrlConnectProps extends CreateShortUrlProps {
+  settings: Settings;
   shortUrlCreationResult: ShortUrlCreation;
   selectedServer: SelectedServer;
   createShortUrl: (data: ShortUrlData) => Promise<void>;
   resetCreateShortUrl: () => void;
 }
 
-export const normalizeTag = pipe(trim, replace(/ /g, '-'));
-
-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: true,
-};
+  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>,
-  DomainSelector: FC<DomainSelectorProps>,
-) => ({
+const CreateShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>, CreateShortUrlResult: FC<CreateShortUrlResultProps>) => ({
   createShortUrl,
   shortUrlCreationResult,
   resetCreateShortUrl,
   selectedServer,
   basicMode = false,
+  settings: { shortUrlCreation: shortUrlCreationSettings },
 }: CreateShortUrlConnectProps) => {
-  const [ shortUrlCreation, setShortUrlCreation ] = useState(initialState);
-
-  const changeTags = (tags: string[]) => setShortUrlCreation({ ...shortUrlCreation, tags: tags.map(normalizeTag) });
-  const reset = () => setShortUrlCreation(initialState);
-  const save = handleEventPreventingDefault(() => {
-    const shortUrlData = {
-      ...shortUrlCreation,
-      validSince: formatIsoDate(shortUrlCreation.validSince) ?? undefined,
-      validUntil: formatIsoDate(shortUrlCreation.validUntil) ?? undefined,
-    };
-
-    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 basicComponents = (
-    <>
-      <FormGroup>
-        <Input
-          bsSize="lg"
-          type="url"
-          placeholder="URL to be shortened"
-          required
-          value={shortUrlCreation.longUrl}
-          onChange={(e) => setShortUrlCreation({ ...shortUrlCreation, longUrl: e.target.value })}
-        />
-      </FormGroup>
-
-      <FormGroup>
-        <TagsSelector tags={shortUrlCreation.tags ?? []} onChange={changeTags} />
-      </FormGroup>
-    </>
-  );
-
-  const currentServerVersion = isReachableServer(selectedServer) ? selectedServer.version : '';
-  const showDomainSelector = versionMatch(currentServerVersion, { minVersion: '2.4.0' });
-  const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' });
+  const initialState = useMemo(() => getInitialState(shortUrlCreationSettings), [ shortUrlCreationSettings ]);
 
   return (
-    <form className="create-short-url" onSubmit={save}>
-      {basicMode && basicComponents}
-      {!basicMode && (
-        <>
-          <SimpleCard title="Basic options" className="mb-3">
-            {basicComponents}
-          </SimpleCard>
-
-          <div className="row">
-            <div className="col-sm-6 mb-3">
-              <SimpleCard title="Customize the short URL">
-                {renderOptionalInput('customSlug', 'Custom slug', 'text', {
-                  disabled: hasValue(shortUrlCreation.shortCodeLength),
-                })}
-                {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',
-                  },
-                })}
-                {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text')}
-                {showDomainSelector && (
-                  <FormGroup>
-                    <DomainSelector
-                      value={shortUrlCreation.domain}
-                      onChange={(domain?: string) => setShortUrlCreation({ ...shortUrlCreation, domain })}
-                    />
-                  </FormGroup>
-                )}
-              </SimpleCard>
-            </div>
-
-            <div className="col-sm-6 mb-3">
-              <SimpleCard title="Limit access to the short URL">
-                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
-                {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlCreation.validUntil as m.Moment | undefined })}
-                {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlCreation.validSince as m.Moment | undefined })}
-              </SimpleCard>
-            </div>
-          </div>
-
-          <SimpleCard title="Extra validations" className="mb-3">
-            <p>
-              Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
-              provided data.
-            </p>
-            <ForServerVersion minVersion="2.4.0">
-              <p>
-                <Checkbox
-                  inline
-                  checked={shortUrlCreation.validateUrl}
-                  onChange={(validateUrl) => setShortUrlCreation({ ...shortUrlCreation, validateUrl })}
-                >
-                  Validate URL
-                </Checkbox>
-              </p>
-            </ForServerVersion>
-            <p>
-              <Checkbox
-                inline
-                className="mr-2"
-                checked={shortUrlCreation.findIfExists}
-                onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
-              >
-                Use existing URL if found
-              </Checkbox>
-              <UseExistingIfFoundInfoIcon />
-            </p>
-          </SimpleCard>
-        </>
-      )}
-
-      <div className="text-center">
-        <Button
-          outline
-          color="primary"
-          disabled={shortUrlCreationResult.saving || isEmpty(shortUrlCreation.longUrl)}
-          className="btn-xs-block"
-        >
-          {shortUrlCreationResult.saving ? 'Creating...' : 'Create'}
-        </Button>
-      </div>
+    <>
+      <ShortUrlForm
+        initialState={initialState}
+        saving={shortUrlCreationResult.saving}
+        selectedServer={selectedServer}
+        mode={basicMode ? 'create-basic' : 'create'}
+        onSave={async (data: ShortUrlData) => {
+          resetCreateShortUrl();
 
+          return createShortUrl(data);
+        }}
+      />
       <CreateShortUrlResult
         {...shortUrlCreationResult}
         resetCreateShortUrl={resetCreateShortUrl}
         canBeClosed={basicMode}
       />
-    </form>
+    </>
   );
 };
 

src/short-urls/EditShortUrl.tsx

@@ -0,0 +1,123 @@
+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,
+    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(255, 255, 255, .5);
+  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/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%;
+}

src/short-urls/ShortUrlForm.tsx

@@ -0,0 +1,218 @@
+import { FC, useEffect, useState } from 'react';
+import { InputType } from 'reactstrap/lib/Input';
+import { Button, FormGroup, Input, Row } from 'reactstrap';
+import { isEmpty, pipe, replace, trim } from 'ramda';
+import m from 'moment';
+import classNames from 'classnames';
+import DateInput, { DateInputProps } from '../utils/DateInput';
+import {
+  supportsListingDomains,
+  supportsSettingShortCodeLength,
+  supportsShortUrlTitle,
+  supportsValidateUrl,
+} from '../utils/helpers/features';
+import { SimpleCard } from '../utils/SimpleCard';
+import { handleEventPreventingDefault, hasValue } from '../utils/utils';
+import Checkbox from '../utils/Checkbox';
+import { SelectedServer } from '../servers/data';
+import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import { DomainSelectorProps } from '../domains/DomainSelector';
+import { formatIsoDate } from '../utils/helpers/date';
+import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
+import { ShortUrlData } from './data';
+import './ShortUrlForm.scss';
+
+export type Mode = 'create' | 'create-basic' | 'edit';
+
+type DateFields = 'validSince' | 'validUntil';
+type NonDateFields = 'longUrl' | 'customSlug' | 'shortCodeLength' | 'domain' | 'maxVisits' | 'title';
+
+export interface ShortUrlFormProps {
+  mode: Mode;
+  saving: boolean;
+  initialState: ShortUrlData;
+  onSave: (shortUrlData: ShortUrlData) => Promise<unknown>;
+  selectedServer: SelectedServer;
+}
+
+const normalizeTag = pipe(trim, replace(/ /g, '-'));
+
+export const ShortUrlForm = (
+  TagsSelector: FC<TagsSelectorProps>,
+  DomainSelector: FC<DomainSelectorProps>,
+): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState, selectedServer }) => { // eslint-disable-line complexity
+  const [ shortUrlData, setShortUrlData ] = useState(initialState);
+  const isEdit = mode === 'edit';
+  const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) });
+  const reset = () => setShortUrlData(initialState);
+  const submit = handleEventPreventingDefault(async () => onSave({
+    ...shortUrlData,
+    validSince: formatIsoDate(shortUrlData.validSince) ?? null,
+    validUntil: formatIsoDate(shortUrlData.validUntil) ?? null,
+    maxVisits: !hasValue(shortUrlData.maxVisits) ? null : Number(shortUrlData.maxVisits),
+    title: !hasValue(shortUrlData.title) ? undefined : shortUrlData.title,
+  }).then(() => !isEdit && reset()).catch(() => {}));
+
+  useEffect(() => {
+    setShortUrlData(initialState);
+  }, [ initialState ]);
+
+  const renderOptionalInput = (id: NonDateFields, placeholder: string, type: InputType = 'text', props = {}) => (
+    <FormGroup>
+      <Input
+        id={id}
+        type={type}
+        placeholder={placeholder}
+        value={shortUrlData[id] ?? ''}
+        onChange={(e) => setShortUrlData({ ...shortUrlData, [id]: e.target.value })}
+        {...props}
+      />
+    </FormGroup>
+  );
+  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateInputProps> = {}) => (
+    <div className="form-group">
+      <DateInput
+        selected={shortUrlData[id] ? m(shortUrlData[id]) : null}
+        placeholderText={placeholder}
+        isClearable
+        onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })}
+        {...props}
+      />
+    </div>
+  );
+  const basicComponents = (
+    <>
+      <FormGroup>
+        <Input
+          bsSize="lg"
+          type="url"
+          placeholder="URL to be shortened"
+          required
+          value={shortUrlData.longUrl}
+          onChange={(e) => setShortUrlData({ ...shortUrlData, longUrl: e.target.value })}
+        />
+      </FormGroup>
+
+      <FormGroup>
+        <TagsSelector tags={shortUrlData.tags ?? []} onChange={changeTags} />
+      </FormGroup>
+    </>
+  );
+
+  const showDomainSelector = supportsListingDomains(selectedServer);
+  const disableShortCodeLength = !supportsSettingShortCodeLength(selectedServer);
+  const supportsTitle = supportsShortUrlTitle(selectedServer);
+  const showCustomizeCard = supportsTitle || !isEdit;
+  const limitAccessCardClasses = classNames('mb-3', {
+    'col-sm-6': showCustomizeCard,
+    'col-sm-12': !showCustomizeCard,
+  });
+  const showValidateUrl = supportsValidateUrl(selectedServer);
+  const showExtraValidationsCard = showValidateUrl || !isEdit;
+
+  return (
+    <form className="short-url-form" onSubmit={submit}>
+      {mode === 'create-basic' && basicComponents}
+      {mode !== 'create-basic' && (
+        <>
+          <SimpleCard title="Basic options" className="mb-3">
+            {basicComponents}
+          </SimpleCard>
+
+          <Row>
+            {showCustomizeCard && (
+              <div className="col-sm-6 mb-3">
+                <SimpleCard title="Customize the short URL">
+                  {supportsTitle && renderOptionalInput('title', 'Title')}
+                  {!isEdit && (
+                    <>
+                      <Row>
+                        <div className="col-lg-6">
+                          {renderOptionalInput('customSlug', 'Custom slug', 'text', {
+                            disabled: hasValue(shortUrlData.shortCodeLength),
+                          })}
+                        </div>
+                        <div className="col-lg-6">
+                          {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
+                            min: 4,
+                            disabled: disableShortCodeLength || hasValue(shortUrlData.customSlug),
+                            ...disableShortCodeLength && {
+                              title: 'Shlink 2.1.0 or higher is required to be able to provide the short code length',
+                            },
+                          })}
+                        </div>
+                      </Row>
+                      {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text')}
+                      {showDomainSelector && (
+                        <FormGroup>
+                          <DomainSelector
+                            value={shortUrlData.domain}
+                            onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
+                          />
+                        </FormGroup>
+                      )}
+                    </>
+                  )}
+                </SimpleCard>
+              </div>
+            )}
+
+            <div className={limitAccessCardClasses}>
+              <SimpleCard title="Limit access to the short URL">
+                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
+                {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? m(shortUrlData.validUntil) : undefined })}
+                {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince ? m(shortUrlData.validSince) : undefined })}
+              </SimpleCard>
+            </div>
+          </Row>
+
+          {showExtraValidationsCard && (
+            <SimpleCard title="Extra validations" className="mb-3">
+              {!isEdit && (
+                <p>
+                  Make sure the long URL is valid, or ensure an existing short URL is returned if it matches all
+                  provided data.
+                </p>
+              )}
+              {showValidateUrl && (
+                <p>
+                  <Checkbox
+                    inline
+                    checked={shortUrlData.validateUrl}
+                    onChange={(validateUrl) => setShortUrlData({ ...shortUrlData, validateUrl })}
+                  >
+                    Validate URL
+                  </Checkbox>
+                </p>
+              )}
+              {!isEdit && (
+                <p>
+                  <Checkbox
+                    inline
+                    className="mr-2"
+                    checked={shortUrlData.findIfExists}
+                    onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
+                  >
+                    Use existing URL if found
+                  </Checkbox>
+                  <UseExistingIfFoundInfoIcon />
+                </p>
+              )}
+            </SimpleCard>
+          )}
+        </>
+      )}
+
+      <div className="text-center">
+        <Button
+          outline
+          color="primary"
+          disabled={saving || isEmpty(shortUrlData.longUrl)}
+          className="btn-xs-block"
+        >
+          {saving ? 'Saving...' : 'Save'}
+        </Button>
+      </div>
+    </form>
+  );
+};

src/short-urls/ShortUrlsList.scss

@@ -1,3 +1,3 @@
 .short-urls-list__header-icon {
-  margin-right: 5px;
+  margin-left: .4rem;
 }

src/short-urls/ShortUrlsList.tsx

@@ -9,6 +9,7 @@ import { determineOrderDir, OrderDir } from '../utils/utils';
 import { isReachableServer, SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { parseQuery } from '../utils/helpers/query';
+import { Topics } from '../mercure/helpers/Topics';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } from './reducers/shortUrlsListParams';
 import { ShortUrlsTableProps } from './ShortUrlsTable';
@@ -98,6 +99,6 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
       </Card>
     </>
   );
-}, () => 'https://shlink.io/new-visit');
+}, () => [ Topics.visits() ]);
 
 export default ShortUrlsList;

src/short-urls/ShortUrlsTable.tsx

@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react';
 import { isEmpty } from 'ramda';
 import classNames from 'classnames';
 import { SelectedServer } from '../servers/data';
+import { supportsShortUrlTitle } from '../utils/helpers/features';
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsRowProps } from './helpers/ShortUrlsRow';
 import { OrderableFields } from './reducers/shortUrlsListParams';
@@ -25,10 +26,10 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
   className,
 }: ShortUrlsTableProps) => {
   const { error, loading, shortUrls } = shortUrlsList;
-  const orderableColumnsClasses = classNames('short-urls-table__header-cell', {
-    'short-urls-table__header-cell--with-action': !!orderByColumn,
-  });
+  const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
+  const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
   const tableClasses = classNames('table table-hover', className);
+  const supportsTitle = supportsShortUrlTitle(selectedServer);
 
   const renderShortUrls = () => {
     if (error) {
@@ -62,20 +63,34 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
       <thead className="short-urls-table__header">
         <tr>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
-            {renderOrderIcon?.('dateCreated')}
             Created at
+            {renderOrderIcon?.('dateCreated')}
           </th>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
-            {renderOrderIcon?.('shortCode')}
             Short URL
+            {renderOrderIcon?.('shortCode')}
           </th>
-          <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
-            {renderOrderIcon?.('longUrl')}
-            Long URL
-          </th>
+          {!supportsTitle && (
+            <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
+              Long URL
+              {renderOrderIcon?.('longUrl')}
+            </th>
+          ) || (
+            <th className="short-urls-table__header-cell">
+              <span className={actionableFieldClasses} onClick={orderByColumn?.('title')}>
+                Title
+                {renderOrderIcon?.('title')}
+              </span>
+              &nbsp;&nbsp;/&nbsp;&nbsp;
+              <span className={actionableFieldClasses} onClick={orderByColumn?.('longUrl')}>
+                <span className="indivisible">Long URL</span>
+                {renderOrderIcon?.('longUrl')}
+              </span>
+            </th>
+          )}
           <th className="short-urls-table__header-cell">Tags</th>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
-            <span className="indivisible">{renderOrderIcon?.('visits')} Visits</span>
+            <span className="indivisible">Visits{renderOrderIcon?.('visits')}</span>
           </th>
           <th className="short-urls-table__header-cell">&nbsp;</th>
         </tr>

src/short-urls/UseExistingIfFoundInfoIcon.tsx

@@ -1,8 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
-import './UseExistingIfFoundInfoIcon.scss';
 import { useToggle } from '../utils/helpers/hooks';
+import './UseExistingIfFoundInfoIcon.scss';
 
 const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => (
   <Modal isOpen={isOpen} toggle={toggle} centered size="lg">

src/short-urls/data/index.ts

@@ -1,17 +1,22 @@
 import * as m from 'moment';
 import { Nullable, OptionalString } from '../../utils/utils';
 
-export interface ShortUrlData {
-  longUrl: string;
+export interface EditShortUrlData {
+  longUrl?: string;
   tags?: string[];
+  title?: string;
+  validSince?: m.Moment | string | null;
+  validUntil?: m.Moment | string | null;
+  maxVisits?: number | null;
+  validateUrl?: boolean;
+}
+
+export interface ShortUrlData extends EditShortUrlData {
+  longUrl: string;
   customSlug?: string;
   shortCodeLength?: number;
   domain?: string;
-  validSince?: m.Moment | string;
-  validUntil?: m.Moment | string;
-  maxVisits?: number;
   findIfExists?: boolean;
-  validateUrl?: boolean;
 }
 
 export interface ShortUrl {
@@ -23,6 +28,7 @@ export interface ShortUrl {
   meta: Required<Nullable<ShortUrlMeta>>;
   tags: string[];
   domain: string | null;
+  title?: string | null;
 }
 
 export interface ShortUrlMeta {

src/short-urls/helpers/EditMetaModal.tsx

@@ -1,101 +0,0 @@
-import { ChangeEvent, useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
-import { ExternalLink } from 'react-external-link';
-import moment from 'moment';
-import { isEmpty, pipe } from 'ramda';
-import { ShortUrlMetaEdition } from '../reducers/shortUrlMeta';
-import DateInput from '../../utils/DateInput';
-import { formatIsoDate } from '../../utils/helpers/date';
-import { ShortUrl, ShortUrlMeta, ShortUrlModalProps } from '../data';
-import { handleEventPreventingDefault, Nullable, OptionalString } from '../../utils/utils';
-import { Result } from '../../utils/Result';
-import { ShlinkApiError } from '../../api/ShlinkApiError';
-
-interface EditMetaModalConnectProps extends ShortUrlModalProps {
-  shortUrlMeta: ShortUrlMetaEdition;
-  resetShortUrlMeta: () => void;
-  editShortUrlMeta: (shortCode: string, domain: OptionalString, meta: Nullable<ShortUrlMeta>) => Promise<void>;
-}
-
-const dateOrNull = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => {
-  const date = shortUrl?.meta?.[dateName];
-
-  return date ? moment(date) : null;
-};
-
-const EditMetaModal = (
-  { isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, resetShortUrlMeta }: EditMetaModalConnectProps,
-) => {
-  const { saving, error, errorData } = shortUrlMeta;
-  const url = shortUrl && (shortUrl.shortUrl || '');
-  const [ validSince, setValidSince ] = useState(dateOrNull(shortUrl, 'validSince'));
-  const [ validUntil, setValidUntil ] = useState(dateOrNull(shortUrl, 'validUntil'));
-  const [ maxVisits, setMaxVisits ] = useState(shortUrl?.meta?.maxVisits);
-
-  const close = pipe(resetShortUrlMeta, toggle);
-  const doEdit = async () => editShortUrlMeta(shortUrl.shortCode, shortUrl.domain, {
-    maxVisits: maxVisits && !isEmpty(maxVisits) ? maxVisits : null,
-    validSince: validSince && formatIsoDate(validSince),
-    validUntil: validUntil && formatIsoDate(validUntil),
-  }).then(close);
-
-  return (
-    <Modal isOpen={isOpen} toggle={close} centered>
-      <ModalHeader toggle={close}>
-        <FontAwesomeIcon icon={infoIcon} id="metaTitleInfo" /> Edit metadata for <ExternalLink href={url} />
-        <UncontrolledTooltip target="metaTitleInfo" placement="bottom">
-          <p>Using these metadata properties, you can limit when and how many times your short URL can be visited.</p>
-          <p>If any of the params is not met, the URL will behave as if it was an invalid short URL.</p>
-        </UncontrolledTooltip>
-      </ModalHeader>
-      <form onSubmit={handleEventPreventingDefault(doEdit)}>
-        <ModalBody>
-          <FormGroup>
-            <DateInput
-              placeholderText="Enabled since..."
-              selected={validSince}
-              maxDate={validUntil}
-              isClearable
-              onChange={setValidSince}
-            />
-          </FormGroup>
-          <FormGroup>
-            <DateInput
-              placeholderText="Enabled until..."
-              selected={validUntil}
-              minDate={validSince}
-              isClearable
-              onChange={setValidUntil as any}
-            />
-          </FormGroup>
-          <FormGroup className="mb-0">
-            <Input
-              type="number"
-              placeholder="Maximum number of visits allowed"
-              min={1}
-              value={maxVisits ?? ''}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => setMaxVisits(Number(e.target.value))}
-            />
-          </FormGroup>
-
-          {error && (
-            <Result type="error" small className="mt-2">
-              <ShlinkApiError
-                errorData={errorData}
-                fallbackMessage="Something went wrong while saving the metadata :("
-              />
-            </Result>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <button className="btn btn-link" type="button" onClick={close}>Cancel</button>
-          <button className="btn btn-primary" type="submit" disabled={saving}>{saving ? 'Saving...' : 'Save'}</button>
-        </ModalFooter>
-      </form>
-    </Modal>
-  );
-};
-
-export default EditMetaModal;

src/short-urls/helpers/EditShortUrlModal.tsx

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, Button } from 'reactstrap';
-import { ExternalLink } from 'react-external-link';
-import { ShortUrlEdition } from '../reducers/shortUrlEdition';
-import { handleEventPreventingDefault, hasValue, OptionalString } from '../../utils/utils';
-import { ShortUrlModalProps } from '../data';
-import { Result } from '../../utils/Result';
-import { ShlinkApiError } from '../../api/ShlinkApiError';
-
-interface EditShortUrlModalProps extends ShortUrlModalProps {
-  shortUrlEdition: ShortUrlEdition;
-  editShortUrl: (shortUrl: string, domain: OptionalString, longUrl: string) => Promise<void>;
-}
-
-const EditShortUrlModal = ({ isOpen, toggle, shortUrl, shortUrlEdition, editShortUrl }: EditShortUrlModalProps) => {
-  const { saving, error, errorData } = shortUrlEdition;
-  const url = shortUrl?.shortUrl ?? '';
-  const [ longUrl, setLongUrl ] = useState(shortUrl.longUrl);
-
-  const doEdit = async () => editShortUrl(shortUrl.shortCode, shortUrl.domain, longUrl).then(toggle);
-
-  return (
-    <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
-      <ModalHeader toggle={toggle}>
-        Edit long URL for <ExternalLink href={url} />
-      </ModalHeader>
-      <form onSubmit={handleEventPreventingDefault(doEdit)}>
-        <ModalBody>
-          <FormGroup className="mb-0">
-            <Input
-              type="url"
-              required
-              placeholder="Long URL"
-              value={longUrl}
-              onChange={(e) => setLongUrl(e.target.value)}
-            />
-          </FormGroup>
-          {error && (
-            <Result type="error" small className="mt-2">
-              <ShlinkApiError
-                errorData={errorData}
-                fallbackMessage="Something went wrong while saving the long URL :("
-              />
-            </Result>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <Button color="link" onClick={toggle}>Cancel</Button>
-          <Button color="primary" disabled={saving || !hasValue(longUrl)}>{saving ? 'Saving...' : 'Save'}</Button>
-        </ModalFooter>
-      </form>
-    </Modal>
-  );
-};
-
-export default EditShortUrlModal;

src/short-urls/helpers/EditTagsModal.tsx

@@ -1,53 +0,0 @@
-import { FC, useEffect, useState } from 'react';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { ExternalLink } from 'react-external-link';
-import { ShortUrlTags } from '../reducers/shortUrlTags';
-import { ShortUrlModalProps } from '../data';
-import { OptionalString } from '../../utils/utils';
-import { TagsSelectorProps } from '../../tags/helpers/TagsSelector';
-import { Result } from '../../utils/Result';
-import { ShlinkApiError } from '../../api/ShlinkApiError';
-
-interface EditTagsModalProps extends ShortUrlModalProps {
-  shortUrlTags: ShortUrlTags;
-  editShortUrlTags: (shortCode: string, domain: OptionalString, tags: string[]) => Promise<void>;
-  resetShortUrlsTags: () => void;
-}
-
-const EditTagsModal = (TagsSelector: FC<TagsSelectorProps>) => (
-  { isOpen, toggle, shortUrl, shortUrlTags, editShortUrlTags, resetShortUrlsTags }: EditTagsModalProps,
-) => {
-  const [ selectedTags, setSelectedTags ] = useState<string[]>(shortUrl.tags || []);
-
-  useEffect(() => resetShortUrlsTags, []);
-
-  const { saving, error, errorData } = shortUrlTags;
-  const url = shortUrl?.shortUrl ?? '';
-  const saveTags = async () => editShortUrlTags(shortUrl.shortCode, shortUrl.domain, selectedTags)
-    .then(toggle)
-    .catch(() => {});
-
-  return (
-    <Modal isOpen={isOpen} toggle={toggle} centered>
-      <ModalHeader toggle={toggle}>
-        Edit tags for <ExternalLink href={url} />
-      </ModalHeader>
-      <ModalBody>
-        <TagsSelector tags={selectedTags} onChange={setSelectedTags} />
-        {error && (
-          <Result type="error" small className="mt-2">
-            <ShlinkApiError errorData={errorData} fallbackMessage="Something went wrong while saving the tags :(" />
-          </Result>
-        )}
-      </ModalBody>
-      <ModalFooter>
-        <button className="btn btn-link" onClick={toggle}>Cancel</button>
-        <button className="btn btn-primary" type="button" disabled={saving} onClick={saveTags}>
-          {saving ? 'Saving tags...' : 'Save tags'}
-        </button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-export default EditTagsModal;

src/short-urls/helpers/QrCodeModal.scss

@@ -1,3 +1,4 @@
 .qr-code-modal__img {
   max-width: 100%;
+  box-shadow: 0 0 .25rem rgb(0 0 0 / .2);
 }

src/short-urls/helpers/QrCodeModal.tsx

@@ -1,19 +1,105 @@
-import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { useMemo, useState } from 'react';
+import { Modal, DropdownItem, FormGroup, ModalBody, ModalHeader, Row } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
+import classNames from 'classnames';
 import { ShortUrlModalProps } from '../data';
+import { SelectedServer } from '../../servers/data';
+import { DropdownBtn } from '../../utils/DropdownBtn';
+import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
+import { buildQrCodeUrl, QrCodeCapabilities, QrCodeFormat } from '../../utils/helpers/qrCodes';
+import { supportsQrCodeSizeInQuery, supportsQrCodeSvgFormat, supportsQrCodeMargin } from '../../utils/helpers/features';
 import './QrCodeModal.scss';
 
-const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen }: ShortUrlModalProps) => (
-  <Modal isOpen={isOpen} toggle={toggle} centered>
-    <ModalHeader toggle={toggle}>
-      QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
-    </ModalHeader>
-    <ModalBody>
-      <div className="text-center">
-        <img src={`${shortUrl}/qr-code`} className="qr-code-modal__img" alt="QR code" />
-      </div>
-    </ModalBody>
-  </Modal>
-);
+interface QrCodeModalConnectProps extends ShortUrlModalProps {
+  selectedServer: SelectedServer;
+}
+
+const QrCodeModal = ({ shortUrl: { shortUrl }, toggle, isOpen, selectedServer }: QrCodeModalConnectProps) => {
+  const [ size, setSize ] = useState(300);
+  const [ margin, setMargin ] = useState(0);
+  const [ format, setFormat ] = useState<QrCodeFormat>('png');
+  const capabilities: QrCodeCapabilities = useMemo(() => ({
+    useSizeInPath: !supportsQrCodeSizeInQuery(selectedServer),
+    svgIsSupported: supportsQrCodeSvgFormat(selectedServer),
+    marginIsSupported: supportsQrCodeMargin(selectedServer),
+  }), [ selectedServer ]);
+  const qrCodeUrl = useMemo(
+    () => buildQrCodeUrl(shortUrl, { size, format, margin }, capabilities),
+    [ shortUrl, size, format, margin, capabilities ],
+  );
+  const totalSize = useMemo(() => size + margin, [ size, margin ]);
+  const modalSize = useMemo(() => {
+    if (totalSize < 500) {
+      return undefined;
+    }
+
+    return totalSize < 800 ? 'lg' : 'xl';
+  }, [ totalSize ]);
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered size={modalSize}>
+      <ModalHeader toggle={toggle}>
+        QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
+      </ModalHeader>
+      <ModalBody>
+        <Row className="mb-2">
+          <div
+            className={classNames({
+              'col-md-4': capabilities.marginIsSupported && capabilities.svgIsSupported,
+              'col-md-6': (!capabilities.marginIsSupported && capabilities.svgIsSupported) || (capabilities.marginIsSupported && !capabilities.svgIsSupported),
+              'col-12': !capabilities.marginIsSupported && !capabilities.svgIsSupported,
+            })}
+          >
+            <FormGroup>
+              <label className="mb-0">Size: {size}px</label>
+              <input
+                type="range"
+                className="form-control-range"
+                value={size}
+                step={10}
+                min={50}
+                max={1000}
+                onChange={(e) => setSize(Number(e.target.value))}
+              />
+            </FormGroup>
+          </div>
+          {capabilities.marginIsSupported && (
+            <div className={capabilities.svgIsSupported ? 'col-md-4' : 'col-md-6'}>
+              <FormGroup>
+                <label className="mb-0">Margin: {margin}px</label>
+                <input
+                  type="range"
+                  className="form-control-range"
+                  value={margin}
+                  step={1}
+                  min={0}
+                  max={100}
+                  onChange={(e) => setMargin(Number(e.target.value))}
+                />
+              </FormGroup>
+            </div>
+          )}
+          {capabilities.svgIsSupported && (
+            <div className={capabilities.marginIsSupported ? 'col-md-4' : 'col-md-6'}>
+              <DropdownBtn text={`Format (${format})`}>
+                <DropdownItem active={format === 'png'} onClick={() => setFormat('png')}>PNG</DropdownItem>
+                <DropdownItem active={format === 'svg'} onClick={() => setFormat('svg')}>SVG</DropdownItem>
+              </DropdownBtn>
+            </div>
+          )}
+        </Row>
+        <div className="text-center">
+          <div className="mb-3">
+            <div>QR code URL:</div>
+            <ExternalLink href={qrCodeUrl} />
+            <CopyToClipboardIcon text={qrCodeUrl} />
+          </div>
+          <img src={qrCodeUrl} className="qr-code-modal__img" alt="QR code" />
+          <div className="mt-2">{size}x{size}</div>
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+};
 
 export default QrCodeModal;

src/short-urls/helpers/ShortUrlDetailLink.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
+import { ShortUrl } from '../data';
+
+export type LinkSuffix = 'visits' | 'edit';
+
+export interface ShortUrlDetailLinkProps {
+  shortUrl?: ShortUrl | null;
+  selectedServer?: SelectedServer;
+  suffix: LinkSuffix;
+}
+
+const buildUrl = ({ id }: ServerWithId, { shortCode, domain }: ShortUrl, suffix: LinkSuffix) => {
+  const query = domain ? `?domain=${domain}` : '';
+
+  return `/server/${id}/short-code/${shortCode}/${suffix}${query}`;
+};
+
+const ShortUrlDetailLink: FC<ShortUrlDetailLinkProps & Record<string | number, any>> = (
+  { selectedServer, shortUrl, suffix, children, ...rest },
+) => {
+  if (!selectedServer || !isServerWithId(selectedServer) || !shortUrl) {
+    return <span {...rest}>{children}</span>;
+  }
+
+  return <Link to={buildUrl(selectedServer, shortUrl, suffix)} {...rest}>{children}</Link>;
+};
+
+export default ShortUrlDetailLink;

src/short-urls/helpers/ShortUrlVisitsCount.tsx

@@ -4,24 +4,28 @@ import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
 import classNames from 'classnames';
 import { prettify } from '../../utils/helpers/numbers';
-import VisitStatsLink, { VisitStatsLinkProps } from './VisitStatsLink';
+import { ShortUrl } from '../data';
+import { SelectedServer } from '../../servers/data';
+import ShortUrlDetailLink from './ShortUrlDetailLink';
 import './ShortUrlVisitsCount.scss';
 
-export interface ShortUrlVisitsCount extends VisitStatsLinkProps {
+interface ShortUrlVisitsCountProps {
+  shortUrl?: ShortUrl | null;
+  selectedServer?: SelectedServer;
   visitsCount: number;
   active?: boolean;
 }
 
-const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCount) => {
+const ShortUrlVisitsCount = ({ visitsCount, shortUrl, selectedServer, active = false }: ShortUrlVisitsCountProps) => {
   const maxVisits = shortUrl?.meta?.maxVisits;
   const visitsLink = (
-    <VisitStatsLink selectedServer={selectedServer} shortUrl={shortUrl}>
+    <ShortUrlDetailLink selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
       <strong
         className={classNames('short-url-visits-count__amount', { 'short-url-visits-count__amount--big': active })}
       >
         {prettify(visitsCount)}
       </strong>
-    </VisitStatsLink>
+    </ShortUrlDetailLink>
   );
 
   if (!maxVisits) {

src/short-urls/helpers/ShortUrlsRow.scss

@@ -5,7 +5,7 @@
   @media (max-width: $responsiveTableBreakpoint) {
     display: block;
     margin-bottom: 10px;
-    border-bottom: 1px solid $lightGrey;
+    border-bottom: 1px solid var(--border-color);
     position: relative;
   }
 }
@@ -44,15 +44,6 @@
   position: relative;
 }
 
-.short-urls-row__cell--big {
-  transform: scale(1.5);
-}
-
-.short-urls-row__copy-btn {
-  cursor: pointer;
-  font-size: 1.2rem;
-}
-
 .short-urls-row__copy-hint {
   @include vertical-align(translateX(10px));
 

src/short-urls/helpers/ShortUrlsRow.tsx

@@ -2,13 +2,11 @@ import { isEmpty } from 'ramda';
 import { FC, useEffect, useRef } from 'react';
 import Moment from 'react-moment';
 import { ExternalLink } from 'react-external-link';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
-import CopyToClipboard from 'react-copy-to-clipboard';
 import ColorGenerator from '../../utils/services/ColorGenerator';
 import { StateFlagTimeout } from '../../utils/helpers/hooks';
 import Tag from '../../tags/helpers/Tag';
 import { SelectedServer } from '../../servers/data';
+import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
 import { ShortUrl } from '../data';
 import ShortUrlVisitsCount from './ShortUrlVisitsCount';
 import { ShortUrlsRowMenuProps } from './ShortUrlsRowMenu';
@@ -60,17 +58,20 @@ const ShortUrlsRow = (
       <td className="short-urls-row__cell" data-th="Short URL: ">
         <span className="indivisible short-urls-row__cell--relative">
           <ExternalLink href={shortUrl.shortUrl} />
-          <CopyToClipboard text={shortUrl.shortUrl} onCopy={setCopiedToClipboard}>
-            <FontAwesomeIcon icon={copyIcon} className="ml-2 short-urls-row__copy-btn" />
-          </CopyToClipboard>
+          <CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
           <span className="badge badge-warning short-urls-row__copy-hint" hidden={!copiedToClipboard}>
             Copied short URL!
           </span>
         </span>
       </td>
-      <td className="short-urls-row__cell short-urls-row__cell--break" data-th="Long URL: ">
-        <ExternalLink href={shortUrl.longUrl} />
+      <td className="short-urls-row__cell short-urls-row__cell--break" data-th={`${shortUrl.title ? 'Title' : 'Long URL'}: `}>
+        <ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
       </td>
+      {shortUrl.title && (
+        <td className="short-urls-row__cell d-lg-none" data-th="Long URL: ">
+          <ExternalLink href={shortUrl.longUrl} />
+        </td>
+      )}
       <td className="short-urls-row__cell" data-th="Tags: ">{renderTags(shortUrl.tags)}</td>
       <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
         <ShortUrlVisitsCount

src/short-urls/helpers/ShortUrlsRowMenu.tsx

@@ -1,21 +1,17 @@
 import {
-  faTags as tagsIcon,
   faChartPie as pieChartIcon,
   faEllipsisV as menuIcon,
   faQrcode as qrIcon,
   faMinusCircle as deleteIcon,
   faEdit as editIcon,
-  faLink as linkIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
 import { ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { useToggle } from '../../utils/helpers/hooks';
 import { ShortUrl, ShortUrlModalProps } from '../data';
-import { Versions } from '../../utils/helpers/version';
 import { SelectedServer } from '../../servers/data';
-import QrCodeModal from './QrCodeModal';
-import VisitStatsLink from './VisitStatsLink';
+import ShortUrlDetailLink from './ShortUrlDetailLink';
 import './ShortUrlsRowMenu.scss';
 
 export interface ShortUrlsRowMenuProps {
@@ -26,17 +22,11 @@ type ShortUrlModal = FC<ShortUrlModalProps>;
 
 const ShortUrlsRowMenu = (
   DeleteShortUrlModal: ShortUrlModal,
-  EditTagsModal: ShortUrlModal,
-  EditMetaModal: ShortUrlModal,
-  EditShortUrlModal: ShortUrlModal,
-  ForServerVersion: FC<Versions>,
+  QrCodeModal: ShortUrlModal,
 ) => ({ shortUrl, selectedServer }: ShortUrlsRowMenuProps) => {
   const [ isOpen, toggle ] = useToggle();
   const [ isQrModalOpen, toggleQrCode ] = useToggle();
-  const [ isTagsModalOpen, toggleTags ] = useToggle();
-  const [ isMetaModalOpen, toggleMeta ] = useToggle();
   const [ isDeleteModalOpen, toggleDelete ] = useToggle();
-  const [ isEditModalOpen, toggleEdit ] = useToggle();
 
   return (
     <ButtonDropdown toggle={toggle} isOpen={isOpen}>
@@ -44,26 +34,13 @@ const ShortUrlsRowMenu = (
         &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
       </DropdownToggle>
       <DropdownMenu right>
-        <DropdownItem tag={VisitStatsLink} selectedServer={selectedServer} shortUrl={shortUrl}>
+        <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="visits">
           <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
         </DropdownItem>
 
-        <DropdownItem onClick={toggleTags}>
-          <FontAwesomeIcon icon={tagsIcon} fixedWidth /> Edit tags
+        <DropdownItem tag={ShortUrlDetailLink} selectedServer={selectedServer} shortUrl={shortUrl} suffix="edit">
+          <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit short URL
         </DropdownItem>
-        <EditTagsModal shortUrl={shortUrl} isOpen={isTagsModalOpen} toggle={toggleTags} />
-
-        <DropdownItem onClick={toggleMeta}>
-          <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit metadata
-        </DropdownItem>
-        <EditMetaModal shortUrl={shortUrl} isOpen={isMetaModalOpen} toggle={toggleMeta} />
-
-        <ForServerVersion minVersion="2.1.0">
-          <DropdownItem onClick={toggleEdit}>
-            <FontAwesomeIcon icon={linkIcon} fixedWidth /> Edit long URL
-          </DropdownItem>
-          <EditShortUrlModal shortUrl={shortUrl} isOpen={isEditModalOpen} toggle={toggleEdit} />
-        </ForServerVersion>
 
         <DropdownItem onClick={toggleQrCode}>
           <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code

src/short-urls/helpers/VisitStatsLink.tsx

@@ -1,27 +0,0 @@
-import { FC } from 'react';
-import { Link } from 'react-router-dom';
-import { isServerWithId, SelectedServer, ServerWithId } from '../../servers/data';
-import { ShortUrl } from '../data';
-
-export interface VisitStatsLinkProps {
-  shortUrl?: ShortUrl | null;
-  selectedServer?: SelectedServer;
-}
-
-const buildVisitsUrl = ({ id }: ServerWithId, { shortCode, domain }: ShortUrl) => {
-  const query = domain ? `?domain=${domain}` : '';
-
-  return `/server/${id}/short-code/${shortCode}/visits${query}`;
-};
-
-const VisitStatsLink: FC<VisitStatsLinkProps & Record<string | number, any>> = (
-  { selectedServer, shortUrl, children, ...rest },
-) => {
-  if (!selectedServer || !isServerWithId(selectedServer) || !shortUrl) {
-    return <span {...rest}>{children}</span>;
-  }
-
-  return <Link to={buildVisitsUrl(selectedServer, shortUrl)} {...rest}>{children}</Link>;
-};
-
-export default VisitStatsLink;

src/short-urls/reducers/shortUrlDetail.ts

@@ -1,9 +1,12 @@
 import { Action, Dispatch } from 'redux';
-import { ShortUrl } from '../../short-urls/data';
+import { ShortUrl } from '../data';
 import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { OptionalString } from '../../utils/utils';
 import { GetState } from '../../container/types';
+import { shortUrlMatches } from '../helpers';
+import { ProblemDetailsError } from '../../api/types';
+import { parseApiError } from '../../api/utils';
 
 /* eslint-disable padding-line-between-statements */
 export const GET_SHORT_URL_DETAIL_START = 'shlink/shortUrlDetail/GET_SHORT_URL_DETAIL_START';
@@ -15,20 +18,25 @@ export interface ShortUrlDetail {
   shortUrl?: ShortUrl;
   loading: boolean;
   error: boolean;
+  errorData?: ProblemDetailsError;
 }
 
 export interface ShortUrlDetailAction extends Action<string> {
   shortUrl: ShortUrl;
 }
 
+export interface ShortUrlDetailFailedAction extends Action<string> {
+  errorData?: ProblemDetailsError;
+}
+
 const initialState: ShortUrlDetail = {
   loading: false,
   error: false,
 };
 
-export default buildReducer<ShortUrlDetail, ShortUrlDetailAction>({
+export default buildReducer<ShortUrlDetail, ShortUrlDetailAction & ShortUrlDetailFailedAction>({
   [GET_SHORT_URL_DETAIL_START]: () => ({ loading: true, error: false }),
-  [GET_SHORT_URL_DETAIL_ERROR]: () => ({ loading: false, error: true }),
+  [GET_SHORT_URL_DETAIL_ERROR]: (_, { errorData }) => ({ loading: false, error: true, errorData }),
   [GET_SHORT_URL_DETAIL]: (_, { shortUrl }) => ({ shortUrl, ...initialState }),
 }, initialState);
 
@@ -37,13 +45,15 @@ export const getShortUrlDetail = (buildShlinkApiClient: ShlinkApiClientBuilder)
   domain: OptionalString,
 ) => async (dispatch: Dispatch, getState: GetState) => {
   dispatch({ type: GET_SHORT_URL_DETAIL_START });
-  const { getShortUrl } = buildShlinkApiClient(getState);
 
   try {
-    const shortUrl = await getShortUrl(shortCode, domain);
+    const { shortUrlsList } = getState();
+    const shortUrl = shortUrlsList?.shortUrls?.data.find(
+      (shortUrl) => shortUrlMatches(shortUrl, shortCode, domain),
+    ) ?? await buildShlinkApiClient(getState).getShortUrl(shortCode, domain);
 
     dispatch<ShortUrlDetailAction>({ shortUrl, type: GET_SHORT_URL_DETAIL });
   } catch (e) {
-    dispatch({ type: GET_SHORT_URL_DETAIL_ERROR });
+    dispatch<ShortUrlDetailFailedAction>({ type: GET_SHORT_URL_DETAIL_ERROR, errorData: parseApiError(e) });
   }
 };

src/short-urls/reducers/shortUrlEdition.ts

@@ -2,10 +2,11 @@ import { Action, Dispatch } from 'redux';
 import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
 import { OptionalString } from '../../utils/utils';
-import { ShortUrlIdentifier } from '../data';
+import { EditShortUrlData, ShortUrl } from '../data';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { ProblemDetailsError } from '../../api/types';
 import { parseApiError } from '../../api/utils';
+import { supportsTagsInPatch } from '../../utils/helpers/features';
 
 /* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_START = 'shlink/shortUrlEdition/EDIT_SHORT_URL_START';
@@ -14,15 +15,14 @@ export const SHORT_URL_EDITED = 'shlink/shortUrlEdition/SHORT_URL_EDITED';
 /* eslint-enable padding-line-between-statements */
 
 export interface ShortUrlEdition {
-  shortCode: string | null;
-  longUrl: string | null;
+  shortUrl?: ShortUrl;
   saving: boolean;
   error: boolean;
   errorData?: ProblemDetailsError;
 }
 
-export interface ShortUrlEditedAction extends Action<string>, ShortUrlIdentifier {
-  longUrl: string;
+export interface ShortUrlEditedAction extends Action<string> {
+  shortUrl: ShortUrl;
 }
 
 export interface ShortUrlEditionFailedAction extends Action<string> {
@@ -30,8 +30,6 @@ export interface ShortUrlEditionFailedAction extends Action<string> {
 }
 
 const initialState: ShortUrlEdition = {
-  shortCode: null,
-  longUrl: null,
   saving: false,
   error: false,
 };
@@ -39,20 +37,27 @@ const initialState: ShortUrlEdition = {
 export default buildReducer<ShortUrlEdition, ShortUrlEditedAction & ShortUrlEditionFailedAction>({
   [EDIT_SHORT_URL_START]: (state) => ({ ...state, saving: true, error: false }),
   [EDIT_SHORT_URL_ERROR]: (state, { errorData }) => ({ ...state, saving: false, error: true, errorData }),
-  [SHORT_URL_EDITED]: (_, { shortCode, longUrl }) => ({ shortCode, longUrl, saving: false, error: false }),
+  [SHORT_URL_EDITED]: (_, { shortUrl }) => ({ shortUrl, saving: false, error: false }),
 }, initialState);
 
 export const editShortUrl = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
   shortCode: string,
   domain: OptionalString,
-  longUrl: string,
+  data: EditShortUrlData,
 ) => async (dispatch: Dispatch, getState: GetState) => {
   dispatch({ type: EDIT_SHORT_URL_START });
-  const { updateShortUrlMeta } = buildShlinkApiClient(getState);
+
+  const { selectedServer } = getState();
+  const sendTagsSeparately = !supportsTagsInPatch(selectedServer);
+  const { updateShortUrl, updateShortUrlTags } = buildShlinkApiClient(getState);
 
   try {
-    await updateShortUrlMeta(shortCode, domain, { longUrl });
-    dispatch<ShortUrlEditedAction>({ shortCode, longUrl, domain, type: SHORT_URL_EDITED });
+    const [ shortUrl ] = await Promise.all([
+      updateShortUrl(shortCode, domain, data as any), // FIXME Parse dates
+      sendTagsSeparately && data.tags ? updateShortUrlTags(shortCode, domain, data.tags) : undefined,
+    ]);
+
+    dispatch<ShortUrlEditedAction>({ shortUrl, type: SHORT_URL_EDITED });
   } catch (e) {
     dispatch<ShortUrlEditionFailedAction>({ type: EDIT_SHORT_URL_ERROR, errorData: parseApiError(e) });
 

src/short-urls/reducers/shortUrlMeta.ts

@@ -1,65 +0,0 @@
-import { Dispatch, Action } from 'redux';
-import { ShortUrlIdentifier, ShortUrlMeta } from '../data';
-import { GetState } from '../../container/types';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { OptionalString } from '../../utils/utils';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
-import { parseApiError } from '../../api/utils';
-
-/* eslint-disable padding-line-between-statements */
-export const EDIT_SHORT_URL_META_START = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META_START';
-export const EDIT_SHORT_URL_META_ERROR = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META_ERROR';
-export const SHORT_URL_META_EDITED = 'shlink/shortUrlMeta/SHORT_URL_META_EDITED';
-export const RESET_EDIT_SHORT_URL_META = 'shlink/shortUrlMeta/RESET_EDIT_SHORT_URL_META';
-/* eslint-enable padding-line-between-statements */
-
-export interface ShortUrlMetaEdition {
-  shortCode: string | null;
-  meta: ShortUrlMeta;
-  saving: boolean;
-  error: boolean;
-  errorData?: ProblemDetailsError;
-}
-
-export interface ShortUrlMetaEditedAction extends Action<string>, ShortUrlIdentifier {
-  meta: ShortUrlMeta;
-}
-
-export interface ShortUrlMetaEditionFailedAction extends Action<string> {
-  errorData?: ProblemDetailsError;
-}
-
-const initialState: ShortUrlMetaEdition = {
-  shortCode: null,
-  meta: {},
-  saving: false,
-  error: false,
-};
-
-export default buildReducer<ShortUrlMetaEdition, ShortUrlMetaEditedAction & ShortUrlMetaEditionFailedAction>({
-  [EDIT_SHORT_URL_META_START]: (state) => ({ ...state, saving: true, error: false }),
-  [EDIT_SHORT_URL_META_ERROR]: (state, { errorData }) => ({ ...state, saving: false, error: true, errorData }),
-  [SHORT_URL_META_EDITED]: (_, { shortCode, meta }) => ({ shortCode, meta, saving: false, error: false }),
-  [RESET_EDIT_SHORT_URL_META]: () => initialState,
-}, initialState);
-
-export const editShortUrlMeta = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
-  shortCode: string,
-  domain: OptionalString,
-  meta: ShortUrlMeta,
-) => async (dispatch: Dispatch, getState: GetState) => {
-  dispatch({ type: EDIT_SHORT_URL_META_START });
-  const { updateShortUrlMeta } = buildShlinkApiClient(getState);
-
-  try {
-    await updateShortUrlMeta(shortCode, domain, meta);
-    dispatch<ShortUrlMetaEditedAction>({ shortCode, meta, domain, type: SHORT_URL_META_EDITED });
-  } catch (e) {
-    dispatch<ShortUrlMetaEditionFailedAction>({ type: EDIT_SHORT_URL_META_ERROR, errorData: parseApiError(e) });
-
-    throw e;
-  }
-};
-
-export const resetShortUrlMeta = buildActionCreator(RESET_EDIT_SHORT_URL_META);

src/short-urls/reducers/shortUrlTags.ts

@@ -1,66 +0,0 @@
-import { Action, Dispatch } from 'redux';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { GetState } from '../../container/types';
-import { OptionalString } from '../../utils/utils';
-import { ShortUrlIdentifier } from '../data';
-import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { ProblemDetailsError } from '../../api/types';
-import { parseApiError } from '../../api/utils';
-
-/* eslint-disable padding-line-between-statements */
-export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
-export const EDIT_SHORT_URL_TAGS_ERROR = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_ERROR';
-export const SHORT_URL_TAGS_EDITED = 'shlink/shortUrlTags/SHORT_URL_TAGS_EDITED';
-export const RESET_EDIT_SHORT_URL_TAGS = 'shlink/shortUrlTags/RESET_EDIT_SHORT_URL_TAGS';
-/* eslint-enable padding-line-between-statements */
-
-export interface ShortUrlTags {
-  shortCode: string | null;
-  tags: string[];
-  saving: boolean;
-  error: boolean;
-  errorData?: ProblemDetailsError;
-}
-
-export interface EditShortUrlTagsAction extends Action<string>, ShortUrlIdentifier {
-  tags: string[];
-}
-
-export interface EditShortUrlTagsFailedAction extends Action<string> {
-  errorData?: ProblemDetailsError;
-}
-
-const initialState: ShortUrlTags = {
-  shortCode: null,
-  tags: [],
-  saving: false,
-  error: false,
-};
-
-export default buildReducer<ShortUrlTags, EditShortUrlTagsAction & EditShortUrlTagsFailedAction>({
-  [EDIT_SHORT_URL_TAGS_START]: (state) => ({ ...state, saving: true, error: false }),
-  [EDIT_SHORT_URL_TAGS_ERROR]: (state, { errorData }) => ({ ...state, saving: false, error: true, errorData }),
-  [SHORT_URL_TAGS_EDITED]: (_, { shortCode, tags }) => ({ shortCode, tags, saving: false, error: false }),
-  [RESET_EDIT_SHORT_URL_TAGS]: () => initialState,
-}, initialState);
-
-export const editShortUrlTags = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
-  shortCode: string,
-  domain: OptionalString,
-  tags: string[],
-) => async (dispatch: Dispatch, getState: GetState) => {
-  dispatch({ type: EDIT_SHORT_URL_TAGS_START });
-  const { updateShortUrlTags } = buildShlinkApiClient(getState);
-
-  try {
-    const normalizedTags = await updateShortUrlTags(shortCode, domain, tags);
-
-    dispatch<EditShortUrlTagsAction>({ tags: normalizedTags, shortCode, domain, type: SHORT_URL_TAGS_EDITED });
-  } catch (e) {
-    dispatch<EditShortUrlTagsFailedAction>({ type: EDIT_SHORT_URL_TAGS_ERROR, errorData: parseApiError(e) });
-
-    throw e;
-  }
-};
-
-export const resetShortUrlsTags = buildActionCreator(RESET_EDIT_SHORT_URL_TAGS);

src/short-urls/reducers/shortUrlsList.ts

@@ -2,17 +2,14 @@ import { assoc, assocPath, init, last, pipe, reject } from 'ramda';
 import { Action, Dispatch } from 'redux';
 import { shortUrlMatches } from '../helpers';
 import { CREATE_VISITS, CreateVisitsAction } from '../../visits/reducers/visitCreation';
-import { ShortUrl, ShortUrlIdentifier } from '../data';
 import { buildReducer } from '../../utils/helpers/redux';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { ShlinkShortUrlsResponse } from '../../api/types';
-import { EditShortUrlTagsAction, SHORT_URL_TAGS_EDITED } from './shortUrlTags';
 import { DeleteShortUrlAction, SHORT_URL_DELETED } from './shortUrlDeletion';
-import { SHORT_URL_META_EDITED, ShortUrlMetaEditedAction } from './shortUrlMeta';
-import { SHORT_URL_EDITED, ShortUrlEditedAction } from './shortUrlEdition';
 import { ShortUrlsListParams } from './shortUrlsListParams';
 import { CREATE_SHORT_URL, CreateShortUrlAction } from './shortUrlCreation';
+import { SHORT_URL_EDITED, ShortUrlEditedAction } from './shortUrlEdition';
 
 /* eslint-disable padding-line-between-statements */
 export const LIST_SHORT_URLS_START = 'shlink/shortUrlsList/LIST_SHORT_URLS_START';
@@ -33,12 +30,10 @@ export interface ListShortUrlsAction extends Action<string> {
 
 export type ListShortUrlsCombinedAction = (
   ListShortUrlsAction
-  & EditShortUrlTagsAction
-  & ShortUrlEditedAction
-  & ShortUrlMetaEditedAction
   & CreateVisitsAction
   & CreateShortUrlAction
   & DeleteShortUrlAction
+  & ShortUrlEditedAction
 );
 
 const initialState: ShortUrlsList = {
@@ -46,18 +41,6 @@ const initialState: ShortUrlsList = {
   error: false,
 };
 
-const setPropFromActionOnMatchingShortUrl = <T extends ShortUrlIdentifier>(prop: keyof T) => (
-  state: ShortUrlsList,
-  { shortCode, domain, [prop]: propValue }: T,
-): ShortUrlsList => !state.shortUrls ? state : assocPath(
-  [ 'shortUrls', 'data' ],
-  state.shortUrls.data.map(
-    (shortUrl: ShortUrl) =>
-      shortUrlMatches(shortUrl, shortCode, domain) ? { ...shortUrl, [prop]: propValue } : shortUrl,
-  ),
-  state,
-);
-
 export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
   [LIST_SHORT_URLS_START]: (state) => ({ ...state, loading: true, error: false }),
   [LIST_SHORT_URLS_ERROR]: () => ({ loading: false, error: true }),
@@ -74,19 +57,20 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
       state,
     ),
   ),
-  [SHORT_URL_TAGS_EDITED]: setPropFromActionOnMatchingShortUrl<EditShortUrlTagsAction>('tags'),
-  [SHORT_URL_META_EDITED]: setPropFromActionOnMatchingShortUrl<ShortUrlMetaEditedAction>('meta'),
-  [SHORT_URL_EDITED]: setPropFromActionOnMatchingShortUrl<ShortUrlEditedAction>('longUrl'),
   [CREATE_VISITS]: (state, { createdVisits }) => assocPath(
     [ 'shortUrls', 'data' ],
     state.shortUrls?.data?.map(
       (currentShortUrl) => {
         // Find the last of the new visit for this short URL, and pick the amount of visits from it
         const lastVisit = last(
-          createdVisits.filter(({ shortUrl }) => shortUrlMatches(currentShortUrl, shortUrl.shortCode, shortUrl.domain)),
+          createdVisits.filter(
+            ({ shortUrl }) => shortUrl && shortUrlMatches(currentShortUrl, shortUrl.shortCode, shortUrl.domain),
+          ),
         );
 
-        return lastVisit ? assoc('visitsCount', lastVisit.shortUrl.visitsCount, currentShortUrl) : currentShortUrl;
+        return lastVisit?.shortUrl
+          ? assoc('visitsCount', lastVisit.shortUrl.visitsCount, currentShortUrl)
+          : currentShortUrl;
       },
     ),
     state,
@@ -105,6 +89,15 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
       state,
     ),
   ),
+  [SHORT_URL_EDITED]: (state, { shortUrl: editedShortUrl }) => !state.shortUrls ? state : assocPath(
+    [ 'shortUrls', 'data' ],
+    state.shortUrls.data.map((shortUrl) => {
+      const { shortCode, domain } = editedShortUrl;
+
+      return shortUrlMatches(shortUrl, shortCode, domain) ? editedShortUrl : shortUrl;
+    }),
+    state,
+  ),
 }, initialState);
 
 export const listShortUrls = (buildShlinkApiClient: ShlinkApiClientBuilder) => (

src/short-urls/reducers/shortUrlsListParams.ts

@@ -8,6 +8,7 @@ export const SORTABLE_FIELDS = {
   dateCreated: 'Created at',
   shortCode: 'Short URL',
   longUrl: 'Long URL',
+  title: 'Title',
   visits: 'Visits',
 };
 

src/short-urls/services/provideServices.ts

@@ -6,19 +6,18 @@ import ShortUrlsRow from '../helpers/ShortUrlsRow';
 import ShortUrlsRowMenu from '../helpers/ShortUrlsRowMenu';
 import CreateShortUrl from '../CreateShortUrl';
 import DeleteShortUrlModal from '../helpers/DeleteShortUrlModal';
-import EditTagsModal from '../helpers/EditTagsModal';
-import EditMetaModal from '../helpers/EditMetaModal';
-import EditShortUrlModal from '../helpers/EditShortUrlModal';
 import CreateShortUrlResult from '../helpers/CreateShortUrlResult';
 import { listShortUrls } from '../reducers/shortUrlsList';
 import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation';
 import { deleteShortUrl, resetDeleteShortUrl } from '../reducers/shortUrlDeletion';
-import { editShortUrlTags, resetShortUrlsTags } from '../reducers/shortUrlTags';
-import { editShortUrlMeta, resetShortUrlMeta } from '../reducers/shortUrlMeta';
 import { resetShortUrlParams } from '../reducers/shortUrlsListParams';
 import { editShortUrl } from '../reducers/shortUrlEdition';
 import { ConnectDecorator } from '../../container/types';
 import { ShortUrlsTable } from '../ShortUrlsTable';
+import QrCodeModal from '../helpers/QrCodeModal';
+import { ShortUrlForm } from '../ShortUrlForm';
+import { EditShortUrl } from '../EditShortUrl';
+import { getShortUrlDetail } from '../reducers/shortUrlDetail';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
@@ -33,50 +32,33 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.serviceFactory('ShortUrlsTable', ShortUrlsTable, 'ShortUrlsRow');
   bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout');
-  bottle.serviceFactory(
-    'ShortUrlsRowMenu',
-    ShortUrlsRowMenu,
-    'DeleteShortUrlModal',
-    'EditTagsModal',
-    'EditMetaModal',
-    'EditShortUrlModal',
-    'ForServerVersion',
-  );
+  bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'QrCodeModal');
   bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout');
+  bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'DomainSelector');
 
-  bottle.serviceFactory(
-    'CreateShortUrl',
-    CreateShortUrl,
-    'TagsSelector',
-    'CreateShortUrlResult',
-    'ForServerVersion',
-    'DomainSelector',
-  );
+  bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'ShortUrlForm', 'CreateShortUrlResult');
   bottle.decorator(
     'CreateShortUrl',
-    connect([ 'shortUrlCreationResult', 'selectedServer' ], [ 'createShortUrl', 'resetCreateShortUrl' ]),
+    connect([ 'shortUrlCreationResult', 'selectedServer', 'settings' ], [ 'createShortUrl', 'resetCreateShortUrl' ]),
   );
 
+  bottle.serviceFactory('EditShortUrl', EditShortUrl, 'ShortUrlForm');
+  bottle.decorator('EditShortUrl', connect(
+    [ 'shortUrlDetail', 'shortUrlEdition', 'selectedServer', 'settings' ],
+    [ 'getShortUrlDetail', 'editShortUrl' ],
+  ));
+
   bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
   bottle.decorator('DeleteShortUrlModal', connect([ 'shortUrlDeletion' ], [ 'deleteShortUrl', 'resetDeleteShortUrl' ]));
 
-  bottle.serviceFactory('EditTagsModal', EditTagsModal, 'TagsSelector');
-  bottle.decorator('EditTagsModal', connect([ 'shortUrlTags' ], [ 'editShortUrlTags', 'resetShortUrlsTags' ]));
-
-  bottle.serviceFactory('EditMetaModal', () => EditMetaModal);
-  bottle.decorator('EditMetaModal', connect([ 'shortUrlMeta' ], [ 'editShortUrlMeta', 'resetShortUrlMeta' ]));
-
-  bottle.serviceFactory('EditShortUrlModal', () => EditShortUrlModal);
-  bottle.decorator('EditShortUrlModal', connect([ 'shortUrlEdition' ], [ 'editShortUrl' ]));
+  bottle.serviceFactory('QrCodeModal', () => QrCodeModal);
+  bottle.decorator('QrCodeModal', connect([ 'selectedServer' ]));
 
   // Services
   bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator');
   bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ], [ 'listShortUrls' ]));
 
   // Actions
-  bottle.serviceFactory('editShortUrlTags', editShortUrlTags, 'buildShlinkApiClient');
-  bottle.serviceFactory('resetShortUrlsTags', () => resetShortUrlsTags);
-
   bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');
   bottle.serviceFactory('resetShortUrlParams', () => resetShortUrlParams);
 
@@ -86,8 +68,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'buildShlinkApiClient');
   bottle.serviceFactory('resetDeleteShortUrl', () => resetDeleteShortUrl);
 
-  bottle.serviceFactory('editShortUrlMeta', editShortUrlMeta, 'buildShlinkApiClient');
-  bottle.serviceFactory('resetShortUrlMeta', () => resetShortUrlMeta);
+  bottle.serviceFactory('getShortUrlDetail', getShortUrlDetail, 'buildShlinkApiClient');
 
   bottle.serviceFactory('editShortUrl', editShortUrl, 'buildShlinkApiClient');
 };

src/tags/TagCard.scss

@@ -1,3 +1,5 @@
+@import '../utils/base';
+
 .tag-card.tag-card {
   margin-bottom: .5rem;
 }
@@ -26,11 +28,11 @@
 }
 
 .tag-card__tag-name {
-  color: #007bff;
+  color: $mainColor;
   cursor: pointer;
 }
 
 .tag-card__tag-name:hover {
-  color: #0056b3;
+  color: darken($mainColor, 15%);
   text-decoration: underline;
 }

src/tags/TagCard.tsx

@@ -35,10 +35,10 @@ const TagCard = (
   return (
     <Card className="tag-card">
       <CardHeader className="tag-card__header">
-        <Button color="light" size="sm" className="tag-card__btn tag-card__btn--last" onClick={toggleDelete}>
+        <Button color="link" size="sm" className="tag-card__btn tag-card__btn--last" onClick={toggleDelete}>
           <FontAwesomeIcon icon={deleteIcon} />
         </Button>
-        <Button color="light" size="sm" className="tag-card__btn" onClick={toggleEdit}>
+        <Button color="link" size="sm" className="tag-card__btn" onClick={toggleEdit}>
           <FontAwesomeIcon icon={editIcon} />
         </Button>
         <h5 className="tag-card__tag-title text-ellipsis">
@@ -57,14 +57,14 @@ const TagCard = (
           <CardBody className="tag-card__body">
             <Link
               to={shortUrlsLink}
-              className="btn btn-light btn-block d-flex justify-content-between align-items-center mb-1"
+              className="btn btn-outline-secondary btn-block d-flex justify-content-between align-items-center mb-1"
             >
               <span className="text-ellipsis"><FontAwesomeIcon icon={faLink} className="mr-2" />Short URLs</span>
               <b>{prettify(tagStats.shortUrlsCount)}</b>
             </Link>
             <Link
               to={`/server/${serverId}/tag/${tag}/visits`}
-              className="btn btn-light btn-block d-flex justify-content-between align-items-center"
+              className="btn btn-outline-secondary btn-block d-flex justify-content-between align-items-center"
             >
               <span className="text-ellipsis"><FontAwesomeIcon icon={faEye} className="mr-2" />Visits</span>
               <b>{prettify(tagStats.visitsCount)}</b>

src/tags/TagsList.tsx

@@ -6,6 +6,7 @@ import { SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
+import { Topics } from '../mercure/helpers/Topics';
 import { TagsList as TagsListState } from './reducers/tagsList';
 import { TagCardProps } from './TagCard';
 
@@ -75,6 +76,6 @@ const TagsList = (TagCard: FC<TagCardProps>) => boundToMercureHub((
       {renderContent()}
     </>
   );
-}, () => 'https://shlink.io/new-visit');
+}, () => [ Topics.visits() ]);
 
 export default TagsList;

src/tags/reducers/tagsList.ts

@@ -5,11 +5,11 @@ import { buildReducer } from '../../utils/helpers/redux';
 import { ProblemDetailsError, ShlinkTags } from '../../api/types';
 import { GetState } from '../../container/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { TagStats } from '../data';
 import { CreateVisit, Stats } from '../../visits/types';
+import { parseApiError } from '../../api/utils';
+import { TagStats } from '../data';
 import { DeleteTagAction, TAG_DELETED } from './tagDelete';
 import { EditTagAction, TAG_EDITED } from './tagEdit';
-import { parseApiError } from '../../api/utils';
 
 /* eslint-disable padding-line-between-statements */
 export const LIST_TAGS_START = 'shlink/tagsList/LIST_TAGS_START';
@@ -34,7 +34,6 @@ interface ListTagsAction extends Action<string> {
   stats: TagsStatsMap;
 }
 
-
 interface ListTagsFailedAction extends Action<string> {
   errorData?: ProblemDetailsError;
 }
@@ -44,11 +43,11 @@ interface FilterTagsAction extends Action<string> {
 }
 
 type ListTagsCombinedAction = ListTagsAction
-  & DeleteTagAction
-  & CreateVisitsAction
-  & EditTagAction
-  & FilterTagsAction
-  & ListTagsFailedAction;
+& DeleteTagAction
+& CreateVisitsAction
+& EditTagAction
+& FilterTagsAction
+& ListTagsFailedAction;
 
 const initialState = {
   tags: [],
@@ -75,13 +74,13 @@ const increaseVisitsForTags = (tags: TagIncrease[], stats: TagsStatsMap) => tags
   return stats;
 }, { ...stats });
 const calculateVisitsPerTag = (createdVisits: CreateVisit[]): TagIncrease[] => Object.entries(
-  createdVisits.reduce((acc, { shortUrl }) => {
-    shortUrl.tags.forEach((tag) => {
+  createdVisits.reduce<Stats>((acc, { shortUrl }) => {
+    shortUrl?.tags.forEach((tag) => {
       acc[tag] = (acc[tag] || 0) + 1;
     });
 
     return acc;
-  }, {} as Stats),
+  }, {}),
 );
 
 export default buildReducer<TagsList, ListTagsCombinedAction>({

src/theme/theme.scss

@@ -0,0 +1,63 @@
+@import '../utils/base';
+
+// Light theme colors
+$lightPrimaryColor: #ffffff;
+$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
+$lightSecondaryColor: $lightColor;
+$lightTextColor: #212529;
+$lightBorderColor: rgba(0, 0, 0, .125);
+$lightTableBorderColor: $mediumGrey;
+$lightActiveColor: $lightGrey;
+$lightBrandColor: $mainColor;
+$lightInputColor: $lightPrimaryColor;
+$lightInputTextColor: #495057;
+$lightDisabledInputColor: $lightColor;
+$lightBorderInputColor: rgba(0, 0, 0, .19);
+$lightTableHighlightColor: rgba(0, 0, 0, .075);
+
+// Dark theme colors
+$darkPrimaryColor: #161b22;
+$darkPrimaryColorAlfa: rgba($darkPrimaryColor, .8);
+$darkSecondaryColor: #0f131a;
+$darkTextColor: rgb(201, 209, 217);
+$darkBorderColor: rgba(255, 255, 255, .15);
+$darkTableBorderColor: #393d43;
+$darkActiveColor: $darkSecondaryColor;
+$darkBrandColor: #0b2d4e;
+$darkInputColor: darken($darkPrimaryColor, 2%);
+$darkInputTextColor: $darkTextColor;
+$darkDisabledInputColor: lighten($darkPrimaryColor, 2%);
+$darkBorderInputColor: $darkBorderColor;
+$darkTableHighlightColor: $darkBorderColor;
+
+html:not([data-theme='dark']) {
+  --primary-color: #{$lightPrimaryColor};
+  --primary-color-alfa: #{$lightPrimaryColorAlfa};
+  --secondary-color: #{$lightSecondaryColor};
+  --text-color: #{$lightTextColor};
+  --border-color: #{$lightBorderColor};
+  --active-color: #{$lightActiveColor};
+  --brand-color: #{$lightBrandColor};
+  --input-color: #{$lightInputColor};
+  --input-disabled-color: #{$lightDisabledInputColor};
+  --input-border-color: #{$lightBorderInputColor};
+  --input-text-color: #{$lightInputTextColor};
+  --table-border-color: #{$lightTableBorderColor};
+  --table-highlight-color: #{$lightTableHighlightColor};
+}
+
+html[data-theme='dark'] {
+  --primary-color: #{$darkPrimaryColor};
+  --primary-color-alfa: #{$darkPrimaryColorAlfa};
+  --secondary-color: #{$darkSecondaryColor};
+  --text-color: #{$darkTextColor};
+  --border-color: #{$darkBorderColor};
+  --active-color: #{$darkActiveColor};
+  --brand-color: #{$darkBrandColor};
+  --input-color: #{$darkInputColor};
+  --input-disabled-color: #{$darkDisabledInputColor};
+  --input-border-color: #{$darkBorderInputColor};
+  --input-text-color: #{$darkInputTextColor};
+  --table-border-color: #{$darkTableBorderColor};
+  --table-highlight-color: #{$darkTableHighlightColor};
+}

src/utils/CopyToClipboardIcon.scss

@@ -0,0 +1,4 @@
+.copy-to-clipboard-icon {
+  cursor: pointer;
+  font-size: 1.2rem;
+}

src/utils/CopyToClipboardIcon.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import './CopyToClipboardIcon.scss';
+
+interface CopyToClipboardIconProps {
+  text: string;
+  onCopy?: (text: string, result: boolean) => void;
+}
+
+export const CopyToClipboardIcon: FC<CopyToClipboardIconProps> = ({ text, onCopy }) => (
+  <CopyToClipboard text={text} onCopy={onCopy}>
+    <FontAwesomeIcon icon={copyIcon} className="ml-2 copy-to-clipboard-icon" />
+  </CopyToClipboard>
+);

src/utils/DateInput.scss

@@ -10,7 +10,12 @@
 }
 
 .date-input-container__input:not(:disabled) {
-  background-color: #ffffff !important;
+  background-color: var(--primary-color) !important;
+}
+
+.card .date-input-container__input:not(:disabled),
+.dropdown .date-input-container__input:not(:disabled) {
+  background-color: var(--input-color) !important;
 }
 
 .date-input-container__icon {
@@ -32,3 +37,71 @@
   background-color: #333333;
   font-size: 14px;
 }
+
+.react-datepicker__input-container,
+.react-datepicker-wrapper {
+  display: block !important;
+}
+
+.react-datepicker__day--keyboard-selected {
+  background-color: $mainColor;
+
+  &:hover {
+    background-color: darken($mainColor, 12%);
+  }
+}
+
+.react-datepicker.react-datepicker {
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__header.react-datepicker__header {
+  background-color: var(--secondary-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__current-month.react-datepicker__current-month,
+.react-datepicker-time__header.react-datepicker-time__header,
+.react-datepicker-year-header.react-datepicker-year-header,
+.react-datepicker__day-name.react-datepicker__day-name,
+.react-datepicker__day:not(:hover).react-datepicker__day:not(:hover),
+.react-datepicker__time-name.react-datepicker__time-name {
+  color: inherit;
+}
+
+.react-datepicker__day--disabled.react-datepicker__day--disabled {
+  cursor: default;
+  color: var(--border-color) !important;
+}
+
+.react-datepicker__day--keyboard-selected.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-selected.react-datepicker__quarter-text--keyboard-selected,
+.react-datepicker__year-text--keyboard-selected.react-datepicker__year-text--keyboard-selected {
+  background-color: var(--brand-color) !important;
+  color: white !important;
+}
+
+.react-datepicker-popper.react-datepicker-popper {
+  z-index: 2;
+
+  &[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle {
+    border-top-color: var(--primary-color);
+    border-bottom-color: var(--border-color);
+
+    &::before {
+      border-top-color: var(--border-color);
+    }
+  }
+
+  &[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle {
+    border-top-color: var(--border-color);
+    border-bottom-color: var(--secondary-color);
+
+    &::before {
+      border-bottom-color: var(--border-color);
+    }
+  }
+}

src/utils/DateInput.tsx

@@ -19,6 +19,7 @@ interface DatePropsInterface {
 export type DateInputProps = DatePropsInterface & Omit<ReactDatePickerProps, keyof DatePropsInterface>;
 
 const transformProps = (props: DateInputProps): ReactDatePickerProps => ({
+  // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
   ...dissoc('ref', props),
   endDate: props.endDate?.toDate(),
   maxDate: props.maxDate?.toDate(),
@@ -39,7 +40,7 @@ const DateInput = (props: DateInputProps) => {
         {...transformProps(props)}
         dateFormat="yyyy-MM-dd"
         className={classNames('date-input-container__input form-control', className)}
-        // @ts-expect-error
+        // @ts-expect-error The DatePicker type definition is wrong. It has a ref prop
         ref={ref}
       />
       {showCalendarIcon && (

src/utils/DropdownBtn.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+
 @import '../utils/mixins/vertical-align';
 
 .dropdown-btn__toggle.dropdown-btn__toggle,
@@ -6,10 +8,24 @@
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
 .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
-  color: #6c757d;
-  background-color: white;
   text-align: left;
-  border-color: rgba(0, 0, 0, .125);
+  color: var(--input-text-color);
+  background-color: var(--primary-color);
+  border-color: var(--input-border-color);
+}
+
+.card .dropdown-btn__toggle.dropdown-btn__toggle,
+.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,
+.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,
+.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
+.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
+.show > .card .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
+  background-color: var(--input-color);
+}
+
+.dropdown-btn__toggle.dropdown-btn__toggle.disabled,
+.dropdown-btn__toggle.dropdown-btn__toggle:disabled {
+  background-color: var(--input-disabled-color);
 }
 
 .dropdown-btn__toggle.dropdown-btn__toggle:after {

src/utils/DropdownBtn.tsx

@@ -7,16 +7,20 @@ export interface DropdownBtnProps {
   text: string;
   disabled?: boolean;
   className?: string;
+  dropdownClassName?: string;
+  right?: boolean;
 }
 
-export const DropdownBtn: FC<DropdownBtnProps> = ({ text, disabled = false, className = '', children }) => {
+export const DropdownBtn: FC<DropdownBtnProps> = (
+  { text, disabled = false, className = '', children, dropdownClassName, right = false },
+) => {
   const [ isOpen, toggle ] = useToggle();
   const toggleClasses = `dropdown-btn__toggle btn-block ${className}`;
 
   return (
-    <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled}>
+    <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled} className={dropdownClassName}>
       <DropdownToggle caret className={toggleClasses} color="primary">{text}</DropdownToggle>
-      <DropdownMenu className="w-100">{children}</DropdownMenu>
+      <DropdownMenu className="w-100" right={right}>{children}</DropdownMenu>
     </Dropdown>
   );
 };

src/utils/FormGroupContainer.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { v4 as uuid } from 'uuid';
 import { InputType } from 'reactstrap/lib/Input';
 
-interface FormGroupContainer {
+interface FormGroupContainerProps {
   value: string;
   onChange: (newValue: string) => void;
   id?: string;
@@ -10,7 +10,7 @@ interface FormGroupContainer {
   required?: boolean;
 }
 
-export const FormGroupContainer: FC<FormGroupContainer> = (
+export const FormGroupContainer: FC<FormGroupContainerProps> = (
   { children, value, onChange, id = uuid(), type = 'text', required = true },
 ) => (
   <div className="form-group">

src/utils/SearchField.tsx

@@ -7,7 +7,7 @@ import './SearchField.scss';
 const DEFAULT_SEARCH_INTERVAL = 500;
 let timer: NodeJS.Timeout | null;
 
-interface SearchField {
+interface SearchFieldProps {
   onChange: (value: string) => void;
   className?: string;
   placeholder?: string;
@@ -16,7 +16,7 @@ interface SearchField {
 }
 
 const SearchField = (
-  { onChange, className, placeholder = 'Search...', large = true, noBorder = false }: SearchField,
+  { onChange, className, placeholder = 'Search...', large = true, noBorder = false }: SearchFieldProps,
 ) => {
   const [ searchTerm, setSearchTerm ] = useState('');
 

src/utils/base.scss

@@ -12,17 +12,18 @@ $responsiveTableBreakpoint: $mdMax;
 // Colors
 $mainColor: #4696e5;
 $lightColor: #f5f6fe;
-$lightGrey: #dddddd;
+$lightGrey: #eeeeee;
 $dangerColor: #dc3545;
 $mediumGrey: #dee2e6;
+$textPlaceholder: #6c757d;
 
 // Misc
-$headerHeight: 57px;
+$headerHeight: 56px;
 $asideMenuWidth: 260px;
 $footer-height: 2.3rem;
 $footer-margin: .8rem;
 
 // Bootstrap overwrites
-//$theme-colors: (
-//  'primary': $mainColor
-//);
+$theme-colors: (
+  'primary': $mainColor
+);

src/utils/dates/DateIntervalDropdownItems.tsx

@@ -0,0 +1,20 @@
+import { DropdownItem } from 'reactstrap';
+import { FC } from 'react';
+import { DATE_INTERVALS, DateInterval, rangeOrIntervalToString } from './types';
+
+export interface DateIntervalDropdownProps {
+  active?: DateInterval;
+  onChange: (interval: DateInterval) => void;
+}
+
+export const DateIntervalDropdownItems: FC<DateIntervalDropdownProps> = ({ active, onChange }) => (
+  <>
+    {DATE_INTERVALS.map(
+      (interval) => (
+        <DropdownItem key={interval} active={active === interval} onClick={() => onChange(interval)}>
+          {rangeOrIntervalToString(interval)}
+        </DropdownItem>
+      ),
+    )}
+  </>
+);

src/utils/dates/DateIntervalSelector.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { DropdownBtn } from '../DropdownBtn';
+import { rangeOrIntervalToString } from './types';
+import { DateIntervalDropdownItems, DateIntervalDropdownProps } from './DateIntervalDropdownItems';
+
+export const DateIntervalSelector: FC<DateIntervalDropdownProps> = ({ onChange, active }) => (
+  <DropdownBtn text={rangeOrIntervalToString(active) ?? ''}>
+    <DateIntervalDropdownItems active={active} onChange={onChange} />
+  </DropdownBtn>
+);

src/utils/dates/DateRangeSelector.tsx

@@ -10,6 +10,7 @@ import {
   rangeIsInterval,
 } from './types';
 import DateRangeRow from './DateRangeRow';
+import { DateIntervalDropdownItems } from './DateIntervalDropdownItems';
 
 export interface DateRangeSelectorProps {
   initialDateRange?: DateInterval | DateRange;
@@ -47,13 +48,7 @@ export const DateRangeSelector = (
         {defaultText}
       </DropdownItem>
       <DropdownItem divider />
-      {([ 'today', 'yesterday', 'last7Days', 'last30Days', 'last90Days', 'last180days', 'last365Days' ] as DateInterval[]).map(
-        (interval) => (
-          <DropdownItem key={interval} active={activeInterval === interval} onClick={updateInterval(interval)}>
-            {rangeOrIntervalToString(interval)}
-          </DropdownItem>
-        ),
-      )}
+      <DateIntervalDropdownItems active={activeInterval} onChange={(interval) => updateInterval(interval)()} />
       <DropdownItem divider />
       <DropdownItem header>Custom:</DropdownItem>
       <DropdownItem text>

src/utils/dates/types/index.ts

@@ -24,6 +24,8 @@ const INTERVAL_TO_STRING_MAP: Record<DateInterval, string> = {
   last365Days: 'Last 365 days',
 };
 
+export const DATE_INTERVALS: DateInterval[] = Object.keys(INTERVAL_TO_STRING_MAP) as DateInterval[];
+
 const dateRangeToString = (range?: DateRange): string | undefined => {
   if (!range || dateRangeIsEmpty(range)) {
     return undefined;
@@ -61,7 +63,7 @@ export const intervalToDateRange = (dateInterval?: DateInterval): DateRange => {
     case 'today':
       return { startDate: moment().startOf('day'), endDate: moment() };
     case 'yesterday':
-      const yesterday = moment().subtract(1, 'day');
+      const yesterday = moment().subtract(1, 'day'); // eslint-disable-line no-case-declarations
 
       return { startDate: yesterday.startOf('day'), endDate: yesterday.endOf('day') };
     case 'last7Days':

src/utils/helpers/charts.ts

@@ -26,5 +26,5 @@ export const renderDoughnutChartLabel = (
     && datasets?.[datasetIndex]?.data?.[index]
     || '';
 
-  return `${datasetLabel}: ${prettify(Number(value))}`;
+  return `${datasetLabel}: ${prettify(Number(value))}`; // eslint-disable-line @typescript-eslint/no-base-to-string
 };