Merge pull request #1329 from shlinkio/develop

Release 4.2.1
Remove extra empty line from changelog
2026-02-25 03:06:36 +00:00 · 2024-10-09 14:33:56 +02:00 · 2024-10-09 14:32:29 +02:00 · 2024-10-09 14:31:40 +02:00 · 2024-10-09 14:29:47 +02:00 · 2024-10-09 09:30:10 +02:00
70 changed files with 7704 additions and 6965 deletions
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,10 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "@shlinkio/js-coding-standard"
-  ],
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "ignorePatterns": ["src/service*.ts"]
-}
--- a/.github/ISSUE_TEMPLATE/Bug.yml
+++ b/.github/ISSUE_TEMPLATE/Bug.yml
@@ -34,5 +34,10 @@ body:
    validations:
      required: true
    attributes:
-      label: How to reproduce
-      value: '<!-- Provide steps to reproduce the bug. -->'
+      label: Minimum steps to reproduce
+      value: |
+        <!--
+        Emphasis in MINIMUM: What is the simplest way to reproduce the bug?
+        Avoid things like "Create a kubernetes cluster", or anything related with cloud providers, as that is rarely the root cause and the bug may be closed as "not reproducible".
+        If you can provide a simple docker compose config, that's even better.
+        -->
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -12,6 +12,11 @@ updates:
      fontawesome:
        patterns:
          - '@fortawesome/*'
+      eslint-plugins: # TODO Add eslint back once updated to v9
+        patterns:
+          - '@shlinkio/eslint-config-js-coding-standard'
+          - 'typescript-eslint'
+          - '*eslint-plugin*'
      shlink:
        patterns:
          - '@shlinkio/*'
@@ -29,6 +34,9 @@ updates:
        patterns:
          - 'vitest'
          - '@vitest/*'
+      workbox:
+        patterns:
+          - 'workbox*'
    ignore:
      # Bootstrap can introduce visual breaking changes on styles
      # Ignore it, since the plan is to remove it anyway
--- a/.github/workflows/docker-image-build.yml
+++ b/.github/workflows/docker-image-build.yml
@@ -7,7 +7,7 @@ on:

 jobs:
  build:
-    uses: shlinkio/github-actions/.github/workflows/docker-build-and-publish.yml@main
+    uses: shlinkio/github-actions/.github/workflows/docker-publish-image.yml@main
    secrets: inherit
    with:
      image-name: shlinkio/shlink-web-client
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,126 @@ 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).

+## [4.2.1] - 2024-10-09
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#1325](https://github.com/shlinkio/shlink-web-client/issues/1325) Get dependency on `uuid` package back, as `crypto.randomUUID()` can only be used in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts).
+* [shlink-web-component#461](https://github.com/shlinkio/shlink-web-component/issues/461) Ensure `shortUrlsList.confirmDeletion` setting is `true` in any case, except when explicitly set to `false`.
+* [shlink-web-component#237](https://github.com/shlinkio/shlink-web-component/issues/237) Set darker color for previous period in charts, when light theme is enabled.
+* [shlink-web-component#246](https://github.com/shlinkio/shlink-web-component/issues/246) Fix selected date range not reflected in visits comparison date range selector, when selecting it in the line chart via drag'n'drop.
+
+
+## [4.2.0] - 2024-10-07
+### Added
+* [shlink-web-component#411](https://github.com/shlinkio/shlink-web-component/issues/411) Add support for `ip-address` redirect conditions when Shlink server is >=4.2
+* [shlink-web-component#196](https://github.com/shlinkio/shlink-web-component/issues/196) Allow active date range to be changed by selecting a range in visits and visits-comparison line charts.
+* [shlink-web-component#307](https://github.com/shlinkio/shlink-web-component/issues/307) Add new setting to disable short URL deletions confirmation.
+* [shlink-web-component#435](https://github.com/shlinkio/shlink-web-component/issues/435) Allow toggling between displaying raw user agent and parsed browser/OS in visits table.
+* [shlink-web-component#197](https://github.com/shlinkio/shlink-web-component/issues/197) Allow line charts to be expanded to the full size of the viewport, both in individual visits views, and when comparing visits.
+* [shlink-web-component#382](https://github.com/shlinkio/shlink-web-component/issues/382) Initialize QR code modal with all params unset, so that they fall back to the server defaults. Additionally, allow them to be unset if desired.
+
+### Changed
+* Use `ShlinkWebSettings` from `@shlinkio/shlink-web-component` to replace local settings UI.
+* Update to `@shlinkio/eslint-config-js-coding-standard` 3.0, and migrate to ESLint flat config.
+* Remove dependency on `uuid` package, and use `crypto.randomUUID()` instead.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
+## [4.1.2] - 2024-04-17
+### Added
+* *Nothing*
+
+### Changed
+* Use new reusable workflow to publish docker image
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [shlink-web-component#244](https://github.com/shlinkio/shlink-web-component/issues/244) Display `visitedUrl` in visits table if the visit object has it, regardless of it being an orphan visit or not.
+* [shlink-web-component#327](https://github.com/shlinkio/shlink-web-component/issues/327) Ensure orphan visits type is sent to the server, to enable server-side filtering when consumed Shlink supports it.
+
+
+## [4.1.1] - 2024-04-11
+### Added
+* [shlink-web-component#293](https://github.com/shlinkio/shlink-web-component/issues/293) Allow ordering redirect rules via drag'n'drop.
+
+### Changed
+* Update JS coding standard
+* [#1132](https://github.com/shlinkio/shlink-web-client/issues/1132) Add warning message in "validate URLs" setting, indicating it is ignored when consuming Shlink >=4.0.0.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [shlink-web-component#294](https://github.com/shlinkio/shlink-web-component/issues/294) Make sure "validate URL" control is not displayed in short URL creation/edition, when consuming Shlink >=4.0.0.
+* [#1130](https://github.com/shlinkio/shlink-web-client/issues/1130) Fix importing servers in Firefox for Android when the CSV file contains spaces.
+* [#1133](https://github.com/shlinkio/shlink-web-client/issues/1133) Fix Shlink versions alignment in server error pages.
+
+
+## [4.1.0] - 2024-03-17
+### Added
+* [#1079](https://github.com/shlinkio/shlink-web-client/issues/1079) Add support Shlink 4.0.0.
+* [shlink-web-component#271](https://github.com/shlinkio/shlink-web-component/issues/271) Add support for redirect rules when consuming Shlink 4.0.0.
+
+  Now, if the server supports it, there will be a new item for every short URL dropdown, which will take you to a page where it will be possible to edit that short URL's redirect rules.
+
+### Changed
+* [shlink-web-component#249](https://github.com/shlinkio/shlink-web-component/issues/249) Replace `react-datepicker` with native `input[type="date"]` and `input[type="datetime-local"]` elements.
+* Update dependencies.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* [shlink-web-component#276](https://github.com/shlinkio/shlink-web-component/issues/276) Drop support for Shlink older than 3.3.0
+
+### Fixed
+* [#1084](https://github.com/shlinkio/shlink-web-client/issues/1084) Fix broken server dropdown menu when auto-connect is enabled.
+
+
+## [4.0.1] - 2024-02-01
+### Added
+* *Nothing*
+
+### Changed
+* [#821](https://github.com/shlinkio/shlink-web-client/issues/821) Update app gif from README.md
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#1046](https://github.com/shlinkio/shlink-web-client/issues/1046) Fix running docker image when server env vars are provided.
+
+
 ## [4.0.0] - 2024-01-29
 ### Added
 * [shlink-web-component #7](https://github.com/shlinkio/shlink-web-component/issues/7) Allow comparing visits for multiple short URLs, tags or domains.
--- a/13
+++ b/13
@@ -1,15 +1,22 @@
-FROM node:21.6-alpine as node
+FROM node:22.9-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
 ENV VERSION ${VERSION}
 RUN cd /shlink-web-client && npm ci && npm run build

-FROM nginxinc/nginx-unprivileged:1.25-alpine
+FROM nginxinc/nginx-unprivileged:1.27-alpine
 ARG UID=101
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
+
 USER root
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
-USER $UID
 COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY scripts/docker/servers_from_env.sh /docker-entrypoint.d/30-shlink-servers-json.sh
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html
+
+# This is required by 30-shlink-servers-json.sh to be writable for UID
+RUN echo '[]' > /usr/share/nginx/html/servers.json \
+    && chown $UID:0 /usr/share/nginx/html/servers.json
+
+# Switch to non-privileged UID as the last step
+USER $UID
--- a/README.md
+++ b/README.md
@@ -5,8 +5,10 @@
 [![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest)
 [![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?logo=docker&style=flat-square)](https://hub.docker.com/r/shlinkio/shlink-web-client/)
 [![GitHub license](https://img.shields.io/github/license/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/blob/main/LICENSE)
-[![Twitter](https://img.shields.io/badge/follow-shlinkio-blue.svg?style=flat-square&logo=x&color=black)](https://twitter.com/shlinkio)
+
 [![Mastodon](https://img.shields.io/mastodon/follow/109329425426175098?color=%236364ff&domain=https%3A%2F%2Ffosstodon.org&label=follow&logo=mastodon&logoColor=white&style=flat-square)](https://fosstodon.org/@shlinkio)
+[![Twitter](https://img.shields.io/badge/follow-shlinkio-blue.svg?style=flat-square&logo=x&color=black)](https://twitter.com/shlinkio)
+[![Bluesky](https://img.shields.io/badge/follow-shlinkio-0285FF.svg?style=flat-square&logo=bluesky&logoColor=white)](https://bsky.app/profile/shlinkio.bsky.social)
 [![Paypal Donate](https://img.shields.io/badge/Donate-paypal-blue.svg?style=flat-square&logo=paypal&colorA=cccccc)](https://slnk.to/donate)

 A ReactJS-based progressive web application for [Shlink](https://shlink.io).
@@ -29,7 +31,7 @@ The application runs 100% in the browser, so you can safely access any shlink in

 If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the [shlinkio/shlink-web-client](https://hub.docker.com/r/shlinkio/shlink-web-client/) image and do it.

-It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 80.
+It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 8080.

 ### Self-hosted

@@ -73,7 +75,7 @@ If you are using the shlink-web-client docker image, you can mount the `servers.
    
 Alternatively, you can mount a `conf.d` directory, which in turn contains the `servers.json` file, in a volume inside `/usr/share/nginx/html`. *(since shlink-web-client 3.2.0)*.

-    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
+    docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
    
 If you want to pre-configure a single server, you can provide its config via env vars. When the container starts up, it will build the `servers.json` file dynamically based on them. *(since shlink-web-client 3.2.0)*.

@@ -84,7 +86,7 @@ If you want to pre-configure a single server, you can provide its config via env
    ```shell
    docker run \
        --name shlink-web-client \
-        -p 8000:80 \
+        -p 8000:8080 \
        -e SHLINK_SERVER_URL=https://s.test \
        -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
        shlinkio/shlink-web-client
--- a/docker-compose.override.yml.dist
+++ b/docker-compose.override.yml.dist
@@ -1,5 +1,3 @@
-version: '3'
-
 services:
  shlink_web_client_node:
    user: 1000:1000
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,9 +1,7 @@
-version: '3'
-
 services:
  shlink_web_client_node:
    container_name: shlink_web_client_node
-    image: node:20.7-alpine
+    image: node:22.3-alpine
    command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
    volumes:
      - ./:/home/shlink/www
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,4 @@
+import shlink from '@shlinkio/eslint-config-js-coding-standard';
+
+/* eslint-disable-next-line no-restricted-exports */
+export default shlink;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
  "scripts": {
    "lint": "npm run lint:css && npm run lint:js",
    "lint:css": "stylelint src/*.scss src/**/*.scss",
-    "lint:js": "eslint --ext .js,.ts,.tsx src test",
+    "lint:js": "eslint src test config/test",
    "lint:fix": "npm run lint:css:fix && npm run lint:js:fix",
    "lint:css:fix": "npm run lint:css -- --fix",
    "lint:js:fix": "npm run lint:js -- --fix",
@@ -24,62 +24,68 @@
    "test:verbose": "npm run test -- --verbose"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.5.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@json2csv/plainjs": "^7.0.5",
-    "@reduxjs/toolkit": "^2.1.0",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@json2csv/plainjs": "^7.0.6",
+    "@reduxjs/toolkit": "^2.2.7",
    "@shlinkio/data-manipulation": "^1.0.3",
-    "@shlinkio/shlink-frontend-kit": "^0.4.2",
-    "@shlinkio/shlink-js-sdk": "^0.2.2",
-    "@shlinkio/shlink-web-component": "^0.5.0",
+    "@shlinkio/shlink-frontend-kit": "^0.5.2",
+    "@shlinkio/shlink-js-sdk": "^1.2.0",
+    "@shlinkio/shlink-web-component": "^0.8.1",
    "bootstrap": "5.2.3",
    "bottlejs": "^2.0.1",
-    "clsx": "^2.1.0",
-    "compare-versions": "^6.1.0",
+    "clsx": "^2.1.1",
+    "compare-versions": "^6.1.1",
    "csvtojson": "^2.0.10",
-    "date-fns": "^3.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-external-link": "^2.2.0",
-    "react-redux": "^9.1.0",
-    "react-router-dom": "^6.21.3",
-    "reactstrap": "^9.2.2",
+    "date-fns": "^4.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-external-link": "^2.3.1",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.26.2",
+    "reactstrap": "^9.2.3",
    "redux-localstorage-simple": "^2.5.1",
-    "uuid": "^9.0.1",
-    "workbox-core": "^7.0.0",
-    "workbox-expiration": "^7.0.0",
-    "workbox-precaching": "^7.0.0",
-    "workbox-routing": "^7.0.0",
-    "workbox-strategies": "^7.0.0"
+    "uuid": "^10.0.0",
+    "workbox-core": "^7.1.0",
+    "workbox-expiration": "^7.1.0",
+    "workbox-precaching": "^7.1.0",
+    "workbox-routing": "^7.1.0",
+    "workbox-strategies": "^7.1.0"
  },
  "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~2.3.0",
+    "@shlinkio/eslint-config-js-coding-standard": "~3.1.0",
    "@shlinkio/stylelint-config-css-coding-standard": "~1.1.1",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.1.2",
+    "@stylistic/eslint-plugin": "^2.9.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
    "@testing-library/user-event": "^14.5.2",
-    "@total-typescript/shoehorn": "^0.1.1",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@types/uuid": "^9.0.8",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.2.2",
-    "adm-zip": "^0.5.10",
-    "axe-core": "^4.8.3",
+    "@total-typescript/shoehorn": "^0.1.2",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/coverage-v8": "^2.1.2",
+    "adm-zip": "^0.5.16",
+    "axe-core": "^4.10.0",
    "chalk": "^5.3.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
    "history": "^5.3.0",
-    "jsdom": "^24.0.0",
-    "sass": "^1.70.0",
+    "jsdom": "^25.0.1",
+    "sass": "^1.79.4",
    "stylelint": "^15.11.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-pwa": "^0.17.5",
-    "vitest": "^1.2.2"
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.8.0",
+    "vite": "^5.4.8",
+    "vite-plugin-pwa": "^0.20.5",
+    "vitest": "^2.0.2"
  },
  "browserslist": [
    ">0.2%",
--- a/shlink-web-client.gif
+++ b/shlink-web-client.gif
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,4 +1,5 @@
 import { changeThemeInMarkup, getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
+import type { Settings } from '@shlinkio/shlink-web-component/settings';
 import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
@@ -8,14 +9,13 @@ import { NotFound } from '../common/NotFound';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import type { ServersMap } from '../servers/data';
-import type { AppSettings } from '../settings/reducers/settings';
 import { forceUpdate } from '../utils/helpers/sw';
 import './App.scss';

 type AppProps = {
  fetchServers: () => void;
  servers: ServersMap;
-  settings: AppSettings;
+  settings: Settings;
  resetAppUpdate: () => void;
  appUpdated: boolean;
 };
--- a/src/common/AppUpdateBanner.tsx
+++ b/src/common/AppUpdateBanner.tsx
@@ -9,7 +9,7 @@ import './AppUpdateBanner.scss';
 interface AppUpdateBannerProps {
  isOpen: boolean;
  toggle: MouseEventHandler<any>;
-  forceUpdate: Function;
+  forceUpdate: () => void;
 }

 export const AppUpdateBanner = forwardRef<HTMLElement, AppUpdateBannerProps>(({ isOpen, toggle, forceUpdate }, ref) => {
--- a/src/common/Home.tsx
+++ b/src/common/Home.tsx
@@ -21,7 +21,9 @@ export const Home = ({ servers }: HomeProps) => {
  useEffect(() => {
    // Try to redirect to the first server marked as auto-connect
    const autoConnectServer = serversList.find(({ autoConnect }) => autoConnect);
-    autoConnectServer && navigate(`/server/${autoConnectServer.id}`);
+    if (autoConnectServer) {
+      navigate(`/server/${autoConnectServer.id}`);
+    }
  }, [serversList, navigate]);

  return (
--- a/src/common/MainHeader.tsx
+++ b/src/common/MainHeader.tsx
@@ -15,7 +15,7 @@ type MainHeaderDeps = {
  ServersDropdown: FC;
 };

-const MainHeader: FCWithDeps<{}, MainHeaderDeps> = () => {
+const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
  const { ServersDropdown } = useDependencies(MainHeader);
  const [isNotCollapsed, toggleCollapse, , collapse] = useToggle();
  const location = useLocation();
--- a/src/common/NoMenuLayout.tsx
+++ b/src/common/NoMenuLayout.tsx
@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import './NoMenuLayout.scss';

-export const NoMenuLayout: FC<PropsWithChildren<unknown>> = ({ children }) => (
+export const NoMenuLayout: FC<PropsWithChildren> = ({ children }) => (
  <div className="no-menu-wrapper container-xl">{children}</div>
 );
--- a/src/common/ShlinkVersionsContainer.tsx
+++ b/src/common/ShlinkVersionsContainer.tsx
@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
-import { useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
 import type { SelectedServer } from '../servers/data';
+import { isReachableServer } from '../servers/data';
 import { ShlinkVersions } from './ShlinkVersions';
 import './ShlinkVersionsContainer.scss';

@@ -9,19 +8,12 @@ export type ShlinkVersionsContainerProps = {
  selectedServer: SelectedServer;
 };

-const SHLINK_CONTAINER_PATH_PATTERN = /^\/server\/[a-zA-Z0-9-]*\/(?!edit)/;
-
-export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
-  const { pathname } = useLocation();
-  const withPadding = useMemo(() => SHLINK_CONTAINER_PATH_PATTERN.test(pathname), [pathname]);
-
-  const classes = clsx('text-center', {
-    'shlink-versions-container--with-sidebar': withPadding,
-  });
-
-  return (
-    <div className={classes}>
-      <ShlinkVersions selectedServer={selectedServer} />
-    </div>
-  );
-};
+export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
+  <div
+    className={clsx('text-center', {
+      'shlink-versions-container--with-sidebar': isReachableServer(selectedServer),
+    })}
+  >
+    <ShlinkVersions selectedServer={selectedServer} />
+  </div>
+);
--- a/src/common/ShlinkWebComponentContainer.tsx
+++ b/src/common/ShlinkWebComponentContainer.tsx
@@ -1,4 +1,5 @@
-import type { Settings, ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
+import type { ShlinkWebComponentType, TagColorsStorage } from '@shlinkio/shlink-web-component';
+import type { Settings } from '@shlinkio/shlink-web-component/settings';
 import type { FC } from 'react';
 import { memo } from 'react';
 import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
@@ -21,8 +22,8 @@ type ShlinkWebComponentContainerDeps = {
 };

 const ShlinkWebComponentContainer: FCWithDeps<
-ShlinkWebComponentContainerProps,
-ShlinkWebComponentContainerDeps
+  ShlinkWebComponentContainerProps,
+  ShlinkWebComponentContainerDeps
 // FIXME Using `memo` here to solve a flickering effect in charts.
 //       memo is probably not the right solution. The root cause is the withSelectedServer HOC, but I couldn't fix the
 //       extra rendering there.
--- a/src/container/index.ts
+++ b/src/container/index.ts
@@ -9,13 +9,13 @@ import { provideServices as provideSettingsServices } from '../settings/services
 import { provideServices as provideUtilsServices } from '../utils/services/provideServices';
 import type { ConnectDecorator } from './types';

-type LazyActionMap = Record<string, Function>;
+type LazyActionMap = Record<string, (...args: unknown[]) => unknown>;

 const bottle = new Bottle();

 export const { container } = bottle;

-const lazyService = <T extends Function, K>(cont: IContainer, serviceName: string) =>
+const lazyService = <T extends (...args: unknown[]) => unknown, K>(cont: IContainer, serviceName: string) =>
  (...args: any[]) => (cont[serviceName] as T)(...args) as K;

 const mapActionService = (map: LazyActionMap, actionName: string): LazyActionMap => ({
--- a/src/container/types.ts
+++ b/src/container/types.ts
@@ -1,4 +1,4 @@
-import type { Settings } from '@shlinkio/shlink-web-component';
+import type { Settings } from '@shlinkio/shlink-web-component/settings';
 import type { SelectedServer, ServersMap } from '../servers/data';

 export interface ShlinkState {
--- a/src/servers/CreateServer.tsx
+++ b/src/servers/CreateServer.tsx
@@ -4,11 +4,11 @@ import type { FC } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from 'reactstrap';
-import { v4 as uuid } from 'uuid';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { useGoBack } from '../utils/helpers/hooks';
+import { randomUUID } from '../utils/utils';
 import type { ServerData, ServersMap, ServerWithId } from './data';
 import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 import type { ImportServersBtnProps } from './helpers/ImportServersBtn';
@@ -45,7 +45,7 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
  const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
  const [serverData, setServerData] = useState<ServerData>();
  const saveNewServer = useCallback((theServerData: ServerData) => {
-    const id = uuid();
+    const id = randomUUID();

    createServers([{ ...theServerData, id }]);
    navigate(`/server/${id}`);
@@ -60,7 +60,11 @@ const CreateServer: FCWithDeps<CreateServerProps, CreateServerDeps> = ({ servers
      ({ url, apiKey }) => serverData?.url === url && serverData?.apiKey === apiKey,
    );

-    serverExists ? toggleConfirmModal() : saveNewServer(serverData);
+    if (serverExists) {
+      toggleConfirmModal();
+    } else {
+      saveNewServer(serverData);
+    }
  }, [saveNewServer, serverData, servers, toggleConfirmModal]);

  return (
--- a/src/servers/DeleteServerModal.tsx
+++ b/src/servers/DeleteServerModal.tsx
@@ -30,7 +30,9 @@ export const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
    }

    deleteServer(server);
-    redirectHome && navigate('/');
+    if (redirectHome) {
+      navigate('/');
+    }
  };

  return (
--- a/src/servers/EditServer.tsx
+++ b/src/servers/EditServer.tsx
@@ -1,9 +1,10 @@
+import { useParsedQuery } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory } from '../container/utils';
-import { useGoBack, useParsedQuery } from '../utils/helpers/hooks';
+import { useGoBack } from '../utils/helpers/hooks';
 import type { ServerData } from './data';
 import { isServerWithId } from './data';
 import { ServerForm } from './helpers/ServerForm';
@@ -30,7 +31,9 @@ const EditServer: FCWithDeps<EditServerProps, EditServerDeps> = withSelectedServ

  const handleSubmit = (serverData: ServerData) => {
    editServer(selectedServer.id, serverData);
-    reconnect === 'true' && selectServer(selectedServer.id);
+    if (reconnect === 'true') {
+      selectServer(selectedServer.id);
+    }
    goBack();
  };

--- a/src/servers/ManageServersRowDropdown.tsx
+++ b/src/servers/ManageServersRowDropdown.tsx
@@ -37,7 +37,7 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
  const autoConnectIcon = isAutoConnect ? toggleOffIcon : toggleOnIcon;

  return (
-    <RowDropdownBtn minWidth={170}>
+    <RowDropdownBtn minWidth={isAutoConnect ? 210 : 170}>
      <DropdownItem tag={Link} to={serverUrl}>
        <FontAwesomeIcon icon={connectIcon} fixedWidth /> Connect
      </DropdownItem>
--- a/src/servers/data/index.ts
+++ b/src/servers/data/index.ts
@@ -44,4 +44,4 @@ export const isNotFoundServer = (server: SelectedServer): server is NotFoundServ

 export const getServerId = (server: SelectedServer) => (isServerWithId(server) ? server.id : '');

-export const serverWithIdToServerData = ({ id, autoConnect, ...server }: ServerWithId): ServerData => server;
+export const serverWithIdToServerData = ({ name, url, apiKey }: ServerWithId): ServerData => ({ name, url, apiKey });
--- a/src/servers/helpers/ImportServersBtn.tsx
+++ b/src/servers/helpers/ImportServersBtn.tsx
@@ -58,8 +58,12 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
          const dupServers = newServers.filter((server) => serversInclude(existingServers, server));
          const hasDuplicatedServers = !!dupServers.length;

-          !hasDuplicatedServers ? create(newServers) : setDuplicatedServers(dupServers);
-          hasDuplicatedServers && showModal();
+          if (!hasDuplicatedServers) {
+            create(newServers);
+          } else {
+            setDuplicatedServers(dupServers);
+            showModal();
+          }
        })
        .then(() => {
          // Reset input after processing file
@@ -87,7 +91,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
        You can create servers by importing a CSV file with <b>name</b>, <b>apiKey</b> and <b>url</b> columns.
      </UncontrolledTooltip>

-      <input type="file" accept="text/csv" className="d-none" ref={ref} onChange={onFile} aria-hidden />
+      <input type="file" accept=".csv" className="d-none" ref={ref} onChange={onFile} aria-hidden />

      <DuplicatedServersModal
        isOpen={isModalOpen}
--- a/src/servers/helpers/ServerForm.tsx
+++ b/src/servers/helpers/ServerForm.tsx
@@ -17,9 +17,11 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
  const handleSubmit = handleEventPreventingDefault(() => onSubmit({ name, url, apiKey }));

  useEffect(() => {
-    initialValues && setName(initialValues.name);
-    initialValues && setUrl(initialValues.url);
-    initialValues && setApiKey(initialValues.apiKey);
+    if (initialValues) {
+      setName(initialValues.name);
+      setUrl(initialValues.url);
+      setApiKey(initialValues.apiKey);
+    }
  }, [initialValues]);

  return (
--- a/src/servers/helpers/withSelectedServer.tsx
+++ b/src/servers/helpers/withSelectedServer.tsx
@@ -17,7 +17,7 @@ type WithSelectedServerPropsDeps = {
  ServerError: FC;
 };

-export function withSelectedServer<T = {}>(
+export function withSelectedServer<T extends object>(
  WrappedComponent: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps>,
 ) {
  const ComponentWrapper: FCWithDeps<WithSelectedServerProps & T, WithSelectedServerPropsDeps> = (props) => {
@@ -26,7 +26,9 @@ export function withSelectedServer<T = {}>(
    const { selectServer, selectedServer } = props;

    useEffect(() => {
-      params.serverId && selectServer(params.serverId);
+      if (params.serverId) {
+        selectServer(params.serverId);
+      }
    }, [params.serverId, selectServer]);

    if (!selectedServer) {
--- a/src/servers/helpers/withoutSelectedServer.tsx
+++ b/src/servers/helpers/withoutSelectedServer.tsx
@@ -2,10 +2,10 @@ import type { FC } from 'react';
 import { useEffect } from 'react';

 interface WithoutSelectedServerProps {
-  resetSelectedServer: Function;
+  resetSelectedServer: () => unknown;
 }

-export function withoutSelectedServer<T = {}>(WrappedComponent: FC<WithoutSelectedServerProps & T>) {
+export function withoutSelectedServer<T extends object>(WrappedComponent: FC<WithoutSelectedServerProps & T>) {
  return (props: WithoutSelectedServerProps & T) => {
    const { resetSelectedServer } = props;
    useEffect(() => {
--- a/src/servers/reducers/selectedServer.ts
+++ b/src/servers/reducers/selectedServer.ts
@@ -50,7 +50,7 @@ export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => cr
        version,
        printableVersion,
      };
-    } catch (e) {
+    } catch {
      return { ...selectedServer, serverNotReachable: true };
    }
  },
--- a/src/servers/reducers/servers.ts
+++ b/src/servers/reducers/servers.ts
@@ -1,6 +1,6 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import { v4 as uuid } from 'uuid';
+import { randomUUID } from '../../utils/utils';
 import type { ServerData, ServersMap, ServerWithId } from '../data';

 interface EditServer {
@@ -20,7 +20,7 @@ const serverWithId = (server: ServerWithId | ServerData): ServerWithId => {
    return server;
  }

-  return { ...server, id: uuid() };
+  return { ...server, id: randomUUID() };
 };

 const serversListToMap = (servers: ServerWithId[]): ServersMap => servers.reduce<ServersMap>(
@@ -44,8 +44,8 @@ export const { actions, reducer } = createSlice({
      },
    },
    deleteServer: (state, { payload }) => {
-      const { [payload.id]: deletedServer, ...rest } = state;
-      return rest;
+      delete state[payload.id];
+      return state;
    },
    setAutoConnect: {
      prepare: ({ id: serverId }: ServerWithId, autoConnect: boolean) => ({
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -9,7 +9,7 @@

 import { clientsClaim } from 'workbox-core';
 import { ExpirationPlugin } from 'workbox-expiration';
-import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
 import { StaleWhileRevalidate } from 'workbox-strategies';
 import pack from '../package.json';
@@ -50,7 +50,7 @@ registerRoute(
    // Return true to signal that we want to use the handler.
    return true;
  },
-  createHandlerBoundToURL(`${pack.homepage}/index.html`)
+  createHandlerBoundToURL(`${pack.homepage}/index.html`),
 );

 // An example runtime caching route for requests that aren't handled by the
@@ -66,7 +66,7 @@ registerRoute(
      // least-recently used images are removed.
      new ExpirationPlugin({ maxEntries: 50 }),
    ],
-  })
+  }),
 );

 // This allows the web app to trigger skipWaiting via
--- a/src/serviceWorkerRegistration.ts
+++ b/src/serviceWorkerRegistration.ts
@@ -9,14 +9,14 @@

 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://cra.link/PWA
-import pack from'../package.json';
+import pack from '../package.json';

 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}$/)
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
 );

 type Config = {
@@ -47,7 +47,7 @@ export function register(config?: Config) {
        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'
+              'worker. To learn more, visit https://cra.link/PWA',
          );
        });
      } else {
@@ -75,7 +75,7 @@ function registerValidSW(swUrl: string, config?: Config) {
              // 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.'
+                  'tabs for this page are closed. See https://cra.link/PWA.',
              );

              // Execute callback
--- a/src/settings/RealTimeUpdatesSettings.tsx
+++ b/src/settings/RealTimeUpdatesSettings.tsx
@@ -1,60 +0,0 @@
-import { LabeledFormGroup, SimpleCard, ToggleSwitch, useDomId } from '@shlinkio/shlink-frontend-kit';
-import type { Settings } from '@shlinkio/shlink-web-component';
-import { clsx } from 'clsx';
-import { FormGroup, Input } from 'reactstrap';
-import { FormText } from '../utils/forms/FormText';
-
-type RealTimeUpdatesProps = {
-  settings: Settings;
-  toggleRealTimeUpdates: (enabled: boolean) => void;
-  setRealTimeUpdatesInterval: (interval: number) => void;
-};
-
-const intervalValue = (interval?: number) => (!interval ? '' : `${interval}`);
-
-export const RealTimeUpdatesSettings = (
-  { settings, toggleRealTimeUpdates, setRealTimeUpdatesInterval }: RealTimeUpdatesProps,
-) => {
-  const { realTimeUpdates = { enabled: true } } = settings;
-  const inputId = useDomId();
-
-  return (
-    <SimpleCard title="Real-time updates" className="h-100">
-      <FormGroup>
-        <ToggleSwitch checked={realTimeUpdates.enabled} onChange={toggleRealTimeUpdates}>
-          Enable or disable real-time updates.
-          <FormText>
-            Real-time updates are currently being <b>{realTimeUpdates.enabled ? 'processed' : 'ignored'}</b>.
-          </FormText>
-        </ToggleSwitch>
-      </FormGroup>
-      <LabeledFormGroup
-        noMargin
-        label="Real-time updates frequency (in minutes):"
-        labelClassName={clsx('form-label', { 'text-muted': !realTimeUpdates.enabled })}
-        id={inputId}
-      >
-        <Input
-          type="number"
-          min={0}
-          placeholder="Immediate"
-          disabled={!realTimeUpdates.enabled}
-          value={intervalValue(realTimeUpdates.interval)}
-          id={inputId}
-          onChange={({ target }) => setRealTimeUpdatesInterval(Number(target.value))}
-        />
-        {realTimeUpdates.enabled && (
-          <FormText>
-            {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
-              <span>
-                Updates will be reflected in the UI
-                every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
-              </span>
-            )}
-            {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
-          </FormText>
-        )}
-      </LabeledFormGroup>
-    </SimpleCard>
-  );
-};
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -1,58 +1,20 @@
-import { NavPillItem, NavPills } from '@shlinkio/shlink-frontend-kit';
-import type { FC, ReactNode } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import type { Settings as AppSettings } from '@shlinkio/shlink-web-component/settings';
+import { ShlinkWebSettings } from '@shlinkio/shlink-web-component/settings';
+import type { FC } from 'react';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import type { FCWithDeps } from '../container/utils';
-import { componentFactory, useDependencies } from '../container/utils';
+import { DEFAULT_SHORT_URLS_ORDERING } from './reducers/settings';

-type SettingsDeps = {
-  RealTimeUpdatesSettings: FC;
-  ShortUrlCreationSettings: FC;
-  ShortUrlsListSettings: FC;
-  UserInterfaceSettings: FC;
-  VisitsSettings: FC;
-  TagsSettings: FC;
+export type SettingsProps = {
+  settings: AppSettings;
+  setSettings: (newSettings: AppSettings) => void;
 };

-const SettingsSections: FC<{ items: ReactNode[] }> = ({ items }) => (
-  <>
-    {items.map((child, index) => <div key={index} className="mb-3">{child}</div>)}
-  </>
+export const Settings: FC<SettingsProps> = ({ settings, setSettings }) => (
+  <NoMenuLayout>
+    <ShlinkWebSettings
+      settings={settings}
+      updateSettings={setSettings}
+      defaultShortUrlsListOrdering={DEFAULT_SHORT_URLS_ORDERING}
+    />
+  </NoMenuLayout>
 );
-
-const Settings: FCWithDeps<{}, SettingsDeps> = () => {
-  const {
-    RealTimeUpdatesSettings: RealTimeUpdates,
-    ShortUrlCreationSettings: ShortUrlCreation,
-    ShortUrlsListSettings: ShortUrlsList,
-    UserInterfaceSettings: UserInterface,
-    VisitsSettings: Visits,
-    TagsSettings: Tags,
-  } = useDependencies(Settings);
-
-  return (
-    <NoMenuLayout>
-      <NavPills className="mb-3">
-        <NavPillItem to="general">General</NavPillItem>
-        <NavPillItem to="short-urls">Short URLs</NavPillItem>
-        <NavPillItem to="other-items">Other items</NavPillItem>
-      </NavPills>
-
-      <Routes>
-        <Route path="general" element={<SettingsSections items={[<UserInterface />, <RealTimeUpdates />]} />} />
-        <Route path="short-urls" element={<SettingsSections items={[<ShortUrlCreation />, <ShortUrlsList />]} />} />
-        <Route path="other-items" element={<SettingsSections items={[<Tags />, <Visits />]} />} />
-        <Route path="*" element={<Navigate replace to="general" />} />
-      </Routes>
-    </NoMenuLayout>
-  );
-};
-
-export const SettingsFactory = componentFactory(Settings, [
-  'RealTimeUpdatesSettings',
-  'ShortUrlCreationSettings',
-  'ShortUrlsListSettings',
-  'UserInterfaceSettings',
-  'VisitsSettings',
-  'TagsSettings',
-]);
--- a/src/settings/ShortUrlCreationSettings.tsx
+++ b/src/settings/ShortUrlCreationSettings.tsx
@@ -1,74 +0,0 @@
-import { DropdownBtn, LabeledFormGroup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
-import type { Settings, ShortUrlCreationSettings as ShortUrlsSettings } from '@shlinkio/shlink-web-component';
-import type { FC, ReactNode } from 'react';
-import { DropdownItem, FormGroup } from 'reactstrap';
-import { FormText } from '../utils/forms/FormText';
-import type { Defined } from '../utils/types';
-
-type TagFilteringMode = Defined<ShortUrlsSettings['tagFilteringMode']>;
-
-interface ShortUrlCreationProps {
-  settings: Settings;
-  setShortUrlCreationSettings: (settings: ShortUrlsSettings) => void;
-}
-
-const tagFilteringModeText = (tagFilteringMode: TagFilteringMode | undefined): string =>
-  (tagFilteringMode === 'includes' ? 'Suggest tags including input' : 'Suggest tags starting with input');
-const tagFilteringModeHint = (tagFilteringMode: TagFilteringMode | undefined): ReactNode => (
-  tagFilteringMode === 'includes'
-    ? <>The list of suggested tags will contain those <b>including</b> provided input.</>
-    : <>The list of suggested tags will contain those <b>starting with</b> provided input.</>
-);
-
-export const ShortUrlCreationSettings: FC<ShortUrlCreationProps> = ({ settings, setShortUrlCreationSettings }) => {
-  const shortUrlCreation: ShortUrlsSettings = settings.shortUrlCreation ?? { validateUrls: false };
-  const changeTagsFilteringMode = (tagFilteringMode: TagFilteringMode) => () => setShortUrlCreationSettings(
-    { ...shortUrlCreation ?? { validateUrls: false }, tagFilteringMode },
-  );
-
-  return (
-    <SimpleCard title="Short URLs form" className="h-100">
-      <FormGroup>
-        <ToggleSwitch
-          checked={shortUrlCreation.validateUrls ?? false}
-          onChange={(validateUrls) => setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })}
-        >
-          Request validation on long URLs when creating new short URLs.
-          <FormText>
-            The initial state of the <b>Validate URL</b> checkbox will
-            be <b>{shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}</b>.
-          </FormText>
-        </ToggleSwitch>
-      </FormGroup>
-      <FormGroup>
-        <ToggleSwitch
-          checked={shortUrlCreation.forwardQuery ?? true}
-          onChange={(forwardQuery) => setShortUrlCreationSettings({ ...shortUrlCreation, forwardQuery })}
-        >
-          Make all new short URLs forward their query params to the long URL.
-          <FormText>
-            The initial state of the <b>Forward query params on redirect</b> checkbox will
-            be <b>{shortUrlCreation.forwardQuery ?? true ? 'checked' : 'unchecked'}</b>.
-          </FormText>
-        </ToggleSwitch>
-      </FormGroup>
-      <LabeledFormGroup noMargin label="Tag suggestions search mode:">
-        <DropdownBtn text={tagFilteringModeText(shortUrlCreation.tagFilteringMode)}>
-          <DropdownItem
-            active={!shortUrlCreation.tagFilteringMode || shortUrlCreation.tagFilteringMode === 'startsWith'}
-            onClick={changeTagsFilteringMode('startsWith')}
-          >
-            {tagFilteringModeText('startsWith')}
-          </DropdownItem>
-          <DropdownItem
-            active={shortUrlCreation.tagFilteringMode === 'includes'}
-            onClick={changeTagsFilteringMode('includes')}
-          >
-            {tagFilteringModeText('includes')}
-          </DropdownItem>
-        </DropdownBtn>
-        <FormText>{tagFilteringModeHint(shortUrlCreation.tagFilteringMode)}</FormText>
-      </LabeledFormGroup>
-    </SimpleCard>
-  );
-};
--- a/src/settings/ShortUrlsListSettings.tsx
+++ b/src/settings/ShortUrlsListSettings.tsx
@@ -1,31 +0,0 @@
-import { LabeledFormGroup, OrderingDropdown, SimpleCard } from '@shlinkio/shlink-frontend-kit';
-import type { Settings, ShortUrlsListSettings as ShortUrlsSettings } from '@shlinkio/shlink-web-component';
-import type { FC } from 'react';
-import { DEFAULT_SHORT_URLS_ORDERING } from './reducers/settings';
-
-interface ShortUrlsListSettingsProps {
-  settings: Settings;
-  setShortUrlsListSettings: (settings: ShortUrlsSettings) => void;
-}
-
-const SHORT_URLS_ORDERABLE_FIELDS = {
-  dateCreated: 'Created at',
-  shortCode: 'Short URL',
-  longUrl: 'Long URL',
-  title: 'Title',
-  visits: 'Visits',
-};
-
-export const ShortUrlsListSettings: FC<ShortUrlsListSettingsProps> = (
-  { settings: { shortUrlsList }, setShortUrlsListSettings },
-) => (
-  <SimpleCard title="Short URLs list" className="h-100">
-    <LabeledFormGroup noMargin label="Default ordering for short URLs list:">
-      <OrderingDropdown
-        items={SHORT_URLS_ORDERABLE_FIELDS}
-        order={shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING}
-        onChange={(field, dir) => setShortUrlsListSettings({ defaultOrdering: { field, dir } })}
-      />
-    </LabeledFormGroup>
-  </SimpleCard>
-);
--- a/src/settings/TagsSettings.tsx
+++ b/src/settings/TagsSettings.tsx
@@ -1,29 +0,0 @@
-import { LabeledFormGroup, OrderingDropdown, SimpleCard } from '@shlinkio/shlink-frontend-kit';
-import type { Settings, TagsSettings as TagsSettingsOptions } from '@shlinkio/shlink-web-component';
-import type { FC } from 'react';
-import type { Defined } from '../utils/types';
-
-export type TagsOrder = Defined<TagsSettingsOptions['defaultOrdering']>;
-
-interface TagsProps {
-  settings: Settings;
-  setTagsSettings: (settings: TagsSettingsOptions) => void;
-}
-
-const TAGS_ORDERABLE_FIELDS = {
-  tag: 'Tag',
-  shortUrls: 'Short URLs',
-  visits: 'Visits',
-};
-
-export const TagsSettings: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
-  <SimpleCard title="Tags" className="h-100">
-    <LabeledFormGroup noMargin label="Default ordering for tags list:">
-      <OrderingDropdown
-        items={TAGS_ORDERABLE_FIELDS}
-        order={tags?.defaultOrdering ?? {}}
-        onChange={(field, dir) => setTagsSettings({ ...tags, defaultOrdering: { field, dir } })}
-      />
-    </LabeledFormGroup>
-  </SimpleCard>
-);
--- a/src/settings/UserInterfaceSettings.scss
+++ b/src/settings/UserInterfaceSettings.scss
@@ -1,4 +0,0 @@
-.user-interface__theme-icon {
-  float: right;
-  margin-top: .25rem;
-}
--- a/src/settings/UserInterfaceSettings.tsx
+++ b/src/settings/UserInterfaceSettings.tsx
@@ -1,34 +0,0 @@
-import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Theme } from '@shlinkio/shlink-frontend-kit';
-import { getSystemPreferredTheme, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
-import type { FC } from 'react';
-import { useMemo } from 'react';
-import type { AppSettings, UiSettings } from './reducers/settings';
-import './UserInterfaceSettings.scss';
-
-interface UserInterfaceProps {
-  settings: AppSettings;
-  setUiSettings: (settings: UiSettings) => void;
-
-  /* Test seam */
-  _matchMedia?: typeof window.matchMedia;
-}
-
-export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }, setUiSettings, _matchMedia }) => {
-  const currentTheme = useMemo(() => ui?.theme ?? getSystemPreferredTheme(_matchMedia), [ui?.theme, _matchMedia]);
-  return (
-    <SimpleCard title="User interface" className="h-100">
-      <FontAwesomeIcon icon={currentTheme === 'dark' ? faMoon : faSun} className="user-interface__theme-icon" />
-      <ToggleSwitch
-        checked={currentTheme === 'dark'}
-        onChange={(useDarkTheme) => {
-          const theme: Theme = useDarkTheme ? 'dark' : 'light';
-          setUiSettings({ ...ui, theme });
-        }}
-      >
-        Use dark theme.
-      </ToggleSwitch>
-    </SimpleCard>
-  );
-};
--- a/src/settings/VisitsSettings.tsx
+++ b/src/settings/VisitsSettings.tsx
@@ -1,60 +0,0 @@
-import { LabeledFormGroup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
-import type { Settings, VisitsSettings as VisitsSettingsConfig } from '@shlinkio/shlink-web-component';
-import type { FC } from 'react';
-import { useCallback } from 'react';
-import { FormGroup } from 'reactstrap';
-import type { DateInterval } from '../utils/dates/DateIntervalSelector';
-import { DateIntervalSelector } from '../utils/dates/DateIntervalSelector';
-import { FormText } from '../utils/forms/FormText';
-
-type VisitsProps = {
-  settings: Settings;
-  setVisitsSettings: (settings: VisitsSettingsConfig) => void;
-};
-
-const currentDefaultInterval = (settings: Settings): DateInterval => settings.visits?.defaultInterval ?? 'last30Days';
-
-export const VisitsSettings: FC<VisitsProps> = ({ settings, setVisitsSettings }) => {
-  const updateSettings = useCallback(
-    ({ defaultInterval, ...rest }: Partial<VisitsSettingsConfig>) => setVisitsSettings(
-      { defaultInterval: defaultInterval ?? currentDefaultInterval(settings), ...rest },
-    ),
-    [setVisitsSettings, settings],
-  );
-
-  return (
-    <SimpleCard title="Visits" className="h-100">
-      <FormGroup>
-        <ToggleSwitch
-          checked={!!settings.visits?.excludeBots}
-          onChange={(excludeBots) => updateSettings({ excludeBots })}
-        >
-          Exclude bots wherever possible (this option&lsquo;s effect might depend on Shlink server&lsquo;s version).
-          <FormText>
-            The visits coming from potential bots will
-            be <b>{settings.visits?.excludeBots ? 'excluded' : 'included'}</b>.
-          </FormText>
-        </ToggleSwitch>
-      </FormGroup>
-      <FormGroup>
-        <ToggleSwitch
-          checked={!!settings.visits?.loadPrevInterval}
-          onChange={(loadPrevInterval) => updateSettings({ loadPrevInterval })}
-        >
-          Compare visits with previous period.
-          <FormText>
-            When loading visits, previous period <b>{settings.visits?.loadPrevInterval ? 'will' : 'won\'t'}</b> be
-            loaded by default.
-          </FormText>
-        </ToggleSwitch>
-      </FormGroup>
-      <LabeledFormGroup noMargin label="Default interval to load on visits sections:">
-        <DateIntervalSelector
-          allText="All visits"
-          active={currentDefaultInterval(settings)}
-          onChange={(defaultInterval) => updateSettings({ defaultInterval })}
-        />
-      </LabeledFormGroup>
-    </SimpleCard>
-  );
-};
--- a/src/settings/helpers/index.ts
+++ b/src/settings/helpers/index.ts
@@ -7,8 +7,8 @@ export const migrateDeprecatedSettings = (state: Partial<ShlinkState>): Partial<
  }

  // The "last180Days" interval had a typo, with a lowercase d
-  if ((state.settings.visits?.defaultInterval as any) === 'last180days') {
-    state.settings.visits && (state.settings.visits.defaultInterval = 'last180Days');
+  if (state.settings.visits && (state.settings.visits.defaultInterval as any) === 'last180days') {
+    state.settings.visits.defaultInterval = 'last180Days';
  }

  return state;
--- a/src/settings/reducers/settings.ts
+++ b/src/settings/reducers/settings.ts
@@ -1,15 +1,8 @@
-import type { PayloadAction, PrepareAction } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { mergeDeepRight } from '@shlinkio/data-manipulation';
-import type { Theme } from '@shlinkio/shlink-frontend-kit';
 import { getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
-import type {
-  Settings,
-  ShortUrlCreationSettings,
-  ShortUrlsListSettings,
-  TagsSettings,
-  VisitsSettings,
-} from '@shlinkio/shlink-web-component';
+import type { Settings, ShortUrlsListSettings } from '@shlinkio/shlink-web-component/settings';
 import type { Defined } from '../../utils/types';

 type ShortUrlsOrder = Defined<ShortUrlsListSettings['defaultOrdering']>;
@@ -19,15 +12,9 @@ export const DEFAULT_SHORT_URLS_ORDERING: ShortUrlsOrder = {
  dir: 'DESC',
 };

-export type UiSettings = {
-  theme: Theme;
-};
+type SettingsAction = PayloadAction<Settings>;

-export type AppSettings = Settings & {
-  ui?: UiSettings;
-};
-
-const initialState: AppSettings = {
+const initialState: Settings = {
  realTimeUpdates: {
    enabled: true,
  },
@@ -45,39 +32,14 @@ const initialState: AppSettings = {
  },
 };

-type SettingsAction = PayloadAction<AppSettings>;
-type SettingsPrepareAction = PrepareAction<AppSettings>;
-
-const commonReducer = (state: AppSettings, { payload }: SettingsAction) => mergeDeepRight(state, payload);
-const toReducer = (prepare: SettingsPrepareAction) => ({ reducer: commonReducer, prepare });
-const toPreparedAction: SettingsPrepareAction = (payload: AppSettings) => ({ payload });
-
 const { reducer, actions } = createSlice({
  name: 'shlink/settings',
  initialState,
  reducers: {
-    toggleRealTimeUpdates: toReducer((enabled: boolean) => toPreparedAction({ realTimeUpdates: { enabled } })),
-    setRealTimeUpdatesInterval: toReducer((interval: number) => toPreparedAction({ realTimeUpdates: { interval } })),
-    setShortUrlCreationSettings: toReducer(
-      (shortUrlCreation: ShortUrlCreationSettings) => toPreparedAction({ shortUrlCreation }),
-    ),
-    setShortUrlsListSettings: toReducer(
-      (shortUrlsList: ShortUrlsListSettings) => toPreparedAction({ shortUrlsList }),
-    ),
-    setUiSettings: toReducer((ui: UiSettings) => toPreparedAction({ ui })),
-    setVisitsSettings: toReducer((visits: VisitsSettings) => toPreparedAction({ visits })),
-    setTagsSettings: toReducer((tags: TagsSettings) => toPreparedAction({ tags })),
+    setSettings: (state: Settings, { payload }: SettingsAction) => mergeDeepRight(state, payload),
  },
 });

-export const {
-  toggleRealTimeUpdates,
-  setRealTimeUpdatesInterval,
-  setShortUrlCreationSettings,
-  setShortUrlsListSettings,
-  setUiSettings,
-  setVisitsSettings,
-  setTagsSettings,
-} = actions;
+export const { setSettings } = actions;

 export const settingsReducer = reducer;
--- a/src/settings/services/provideServices.ts
+++ b/src/settings/services/provideServices.ts
@@ -1,56 +1,15 @@
 import type Bottle from 'bottlejs';
 import type { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
-import { RealTimeUpdatesSettings } from '../RealTimeUpdatesSettings';
-import {
-  setRealTimeUpdatesInterval,
-  setShortUrlCreationSettings,
-  setShortUrlsListSettings,
-  setTagsSettings,
-  setUiSettings,
-  setVisitsSettings,
-  toggleRealTimeUpdates,
-} from '../reducers/settings';
-import { SettingsFactory } from '../Settings';
-import { ShortUrlCreationSettings } from '../ShortUrlCreationSettings';
-import { ShortUrlsListSettings } from '../ShortUrlsListSettings';
-import { TagsSettings } from '../TagsSettings';
-import { UserInterfaceSettings } from '../UserInterfaceSettings';
-import { VisitsSettings } from '../VisitsSettings';
+import { setSettings } from '../reducers/settings';
+import { Settings } from '../Settings';

 export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
  // Components
-  bottle.factory('Settings', SettingsFactory);
+  bottle.serviceFactory('Settings', () => Settings);
  bottle.decorator('Settings', withoutSelectedServer);
-  bottle.decorator('Settings', connect(null, ['resetSelectedServer']));
-
-  bottle.serviceFactory('RealTimeUpdatesSettings', () => RealTimeUpdatesSettings);
-  bottle.decorator(
-    'RealTimeUpdatesSettings',
-    connect(['settings'], ['toggleRealTimeUpdates', 'setRealTimeUpdatesInterval']),
-  );
-
-  bottle.serviceFactory('ShortUrlCreationSettings', () => ShortUrlCreationSettings);
-  bottle.decorator('ShortUrlCreationSettings', connect(['settings'], ['setShortUrlCreationSettings']));
-
-  bottle.serviceFactory('UserInterfaceSettings', () => UserInterfaceSettings);
-  bottle.decorator('UserInterfaceSettings', connect(['settings'], ['setUiSettings']));
-
-  bottle.serviceFactory('VisitsSettings', () => VisitsSettings);
-  bottle.decorator('VisitsSettings', connect(['settings'], ['setVisitsSettings']));
-
-  bottle.serviceFactory('TagsSettings', () => TagsSettings);
-  bottle.decorator('TagsSettings', connect(['settings'], ['setTagsSettings']));
-
-  bottle.serviceFactory('ShortUrlsListSettings', () => ShortUrlsListSettings);
-  bottle.decorator('ShortUrlsListSettings', connect(['settings'], ['setShortUrlsListSettings']));
+  bottle.decorator('Settings', connect(['settings'], ['setSettings', 'resetSelectedServer']));

  // Actions
-  bottle.serviceFactory('toggleRealTimeUpdates', () => toggleRealTimeUpdates);
-  bottle.serviceFactory('setRealTimeUpdatesInterval', () => setRealTimeUpdatesInterval);
-  bottle.serviceFactory('setShortUrlCreationSettings', () => setShortUrlCreationSettings);
-  bottle.serviceFactory('setShortUrlsListSettings', () => setShortUrlsListSettings);
-  bottle.serviceFactory('setUiSettings', () => setUiSettings);
-  bottle.serviceFactory('setVisitsSettings', () => setVisitsSettings);
-  bottle.serviceFactory('setTagsSettings', () => setTagsSettings);
+  bottle.serviceFactory('setSettings', () => setSettings);
 };
--- a/src/utils/dates/DateIntervalSelector.tsx
+++ b/src/utils/dates/DateIntervalSelector.tsx
@@ -1,5 +1,5 @@
 import { DropdownBtn } from '@shlinkio/shlink-frontend-kit';
-import type { VisitsSettings } from '@shlinkio/shlink-web-component';
+import type { VisitsSettings } from '@shlinkio/shlink-web-component/settings';
 import type { FC } from 'react';
 import { DropdownItem } from 'reactstrap';

--- a/src/utils/helpers/hooks.ts
+++ b/src/utils/helpers/hooks.ts
@@ -1,13 +1,7 @@
-import { parseQuery } from '@shlinkio/shlink-frontend-kit';
-import { useCallback, useMemo } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';

 export const useGoBack = () => {
  const navigate = useNavigate();
  return useCallback(() => navigate(-1), [navigate]);
 };
-
-export const useParsedQuery = <T>(): T => {
-  const { search } = useLocation();
-  return useMemo(() => parseQuery<T>(search), [search]);
-};
--- a/src/utils/helpers/redux.ts
+++ b/src/utils/helpers/redux.ts
@@ -6,7 +6,7 @@ export const createAsyncThunk = <Returned, ThunkArg>(
  typePrefix: string,
  payloadCreator: AsyncThunkPayloadCreator<Returned, ThunkArg, { state: ShlinkState, serializedErrorType: any }>,
 ) => baseCreateAsyncThunk(
-    typePrefix,
-    payloadCreator,
-    { serializeError: (e) => e },
-  );
+  typePrefix,
+  payloadCreator,
+  { serializeError: (e) => e },
+);
--- a/src/utils/helpers/version.ts
+++ b/src/utils/helpers/version.ts
@@ -38,7 +38,7 @@ export const versionMatch = (versionToMatch: SemVer | Empty, { maxVersion, minVe
 const versionIsValidSemVer = memoizeWith((v) => v, (version: string): version is SemVer => {
  try {
    return compare(version, version, '=');
-  } catch (e) {
+  } catch {
    return false;
  }
 });
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,6 +1,9 @@
 import type { SyntheticEvent } from 'react';
+import { v4 } from 'uuid';

 export const handleEventPreventingDefault = <T>(handler: () => T) => (e: SyntheticEvent) => {
  e.preventDefault();
  handler();
 };
+
+export const randomUUID = () => v4();
--- a/test/helpers/accessibility.ts
+++ b/test/helpers/accessibility.ts
@@ -1,4 +1,4 @@
-import { run } from 'axe-core';
+import axe from 'axe-core';

 type ContainerWrapper = { container: HTMLElement };

@@ -6,7 +6,7 @@ type AccessibilityTestSubject = ContainerWrapper | Promise<ContainerWrapper>;

 export const checkAccessibility = async (subject: AccessibilityTestSubject) => {
  const { container } = await subject;
-  const { violations } = await run(container);
+  const { violations } = await axe.run(container);

  expect(violations).toStrictEqual([]);
 };
--- a/test/common/ShlinkVersionsContainer.test.tsx
+++ b/test/common/ShlinkVersionsContainer.test.tsx
@@ -1,30 +1,26 @@
 import { render } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
 import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
+import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';

 describe('<ShlinkVersionsContainer />', () => {
-  const setUp = (activeRoute: string = '') => {
-    const history = createMemoryHistory();
-    history.push(activeRoute);
-
-    return render(
-      <Router location={history.location} navigator={history}>
-        <ShlinkVersionsContainer selectedServer={fromPartial({})} />
-      </Router>,
-    );
-  };
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
+  const setUp = (selectedServer: SelectedServer = null) => render(
+    <ShlinkVersionsContainer selectedServer={selectedServer} />,
+  );

  it.each([
-    ['/something', 'text-center'],
-    ['/server/foo/edit', 'text-center'],
-    ['/server/foo/bar', 'text-center shlink-versions-container--with-sidebar'],
-  ])('renders proper col classes based on sidebar status', (sidebar, expectedClasses) => {
-    const { container } = setUp(sidebar);
+    [null],
+    [fromPartial<SelectedServer>({})],
+    [fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: 'v1.0.0' })],
+  ])('passes a11y checks', (selectedServer) => checkAccessibility(setUp(selectedServer)));
+
+  it.each([
+    [null, 'text-center'],
+    [fromPartial<SelectedServer>({}), 'text-center'],
+    [fromPartial<ReachableServer>({ version: '1.0.0' }), 'text-center shlink-versions-container--with-sidebar'],
+  ])('renders proper col classes based on sidebar status', (selectedServer, expectedClasses) => {
+    const { container } = setUp(selectedServer);
    expect(container.firstChild).toHaveAttribute('class', `${expectedClasses}`);
  });
 });
--- a/test/servers/DeleteServerButton.test.tsx
+++ b/test/servers/DeleteServerButton.test.tsx
@@ -32,7 +32,9 @@ describe('<DeleteServerButton />', () => {

    expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Closed/);
    expect(screen.getByText(/DeleteServerModal/)).not.toHaveTextContent(/Open/);
-    container.firstElementChild && await user.click(container.firstElementChild);
+    if (container.firstElementChild) {
+      await user.click(container.firstElementChild);
+    }

    await waitFor(() => expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Open/));
  });
--- a/test/servers/ManageServersRowDropdown.test.tsx
+++ b/test/servers/ManageServersRowDropdown.test.tsx
@@ -67,4 +67,9 @@ describe('<ManageServersRowDropdown />', () => {
    expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument();
    expect(screen.queryByText('DeleteServerModal [CLOSED]')).not.toBeInTheDocument();
  });
+
+  it.each([[true], [false]])('renders expected size and icon', (autoConnect) => {
+    const { container } = setUp(autoConnect);
+    expect(container).toMatchSnapshot();
+  });
 });
--- a/test/servers/snapshots/DeleteServerButton.test.tsx.snap
+++ b/test/servers/snapshots/DeleteServerButton.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`<DeleteServerButton /> > renders expected content 4`] = `
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
-      d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+      d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
      fill="currentColor"
    />
  </svg>
--- a/test/servers/snapshots/ManageServersRowDropdown.test.tsx.snap
+++ b/test/servers/snapshots/ManageServersRowDropdown.test.tsx.snap
@@ -0,0 +1,287 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
+<div>
+  <div
+    class="dropdown"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Options"
+      class="dropdown-btn__toggle btn btn-primary btn-sm"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-ellipsis-vertical px-1"
+        data-icon="ellipsis-vertical"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 128 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+    <div
+      aria-hidden="true"
+      class="w-100 dropdown-menu dropdown-menu-end"
+      data-bs-popper="static"
+      role="menu"
+      style="min-width: 210px;"
+      tabindex="-1"
+    >
+      <a
+        class="dropdown-item"
+        href="/server/abc123"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-plug fa-fw "
+          data-icon="plug"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 384 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M96 0C78.3 0 64 14.3 64 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l0 32c0 77.4 55 142 128 156.8l0 67.2c0 17.7 14.3 32 32 32s32-14.3 32-32l0-67.2C297 398 352 333.4 352 256l0-32c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"
+            fill="currentColor"
+          />
+        </svg>
+         Connect
+      </a>
+      <a
+        class="dropdown-item"
+        href="/server/abc123/edit"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-pen-to-square fa-fw "
+          data-icon="pen-to-square"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"
+            fill="currentColor"
+          />
+        </svg>
+         Edit server
+      </a>
+      <button
+        class="dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-ban fa-fw "
+          data-icon="ban"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"
+            fill="currentColor"
+          />
+        </svg>
+         
+        Do not a
+        uto-connect
+      </button>
+      <hr
+        class="dropdown-divider"
+        tabindex="-1"
+      />
+      <button
+        class="dropdown-item--danger dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-circle-minus fa-fw "
+          data-icon="circle-minus"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+            fill="currentColor"
+          />
+        </svg>
+         Remove server
+      </button>
+      <span>
+        DeleteServerModal 
+        [CLOSED]
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
+<div>
+  <div
+    class="dropdown"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Options"
+      class="dropdown-btn__toggle btn btn-primary btn-sm"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="svg-inline--fa fa-ellipsis-vertical px-1"
+        data-icon="ellipsis-vertical"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        viewBox="0 0 128 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+    <div
+      aria-hidden="true"
+      class="w-100 dropdown-menu dropdown-menu-end"
+      data-bs-popper="static"
+      role="menu"
+      style="min-width: 170px;"
+      tabindex="-1"
+    >
+      <a
+        class="dropdown-item"
+        href="/server/abc123"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-plug fa-fw "
+          data-icon="plug"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 384 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M96 0C78.3 0 64 14.3 64 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l0 32c0 77.4 55 142 128 156.8l0 67.2c0 17.7 14.3 32 32 32s32-14.3 32-32l0-67.2C297 398 352 333.4 352 256l0-32c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"
+            fill="currentColor"
+          />
+        </svg>
+         Connect
+      </a>
+      <a
+        class="dropdown-item"
+        href="/server/abc123/edit"
+        role="menuitem"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-pen-to-square fa-fw "
+          data-icon="pen-to-square"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z"
+            fill="currentColor"
+          />
+        </svg>
+         Edit server
+      </a>
+      <button
+        class="dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-circle fa-fw "
+          data-icon="circle"
+          data-prefix="far"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"
+            fill="currentColor"
+          />
+        </svg>
+         
+        A
+        uto-connect
+      </button>
+      <hr
+        class="dropdown-divider"
+        tabindex="-1"
+      />
+      <button
+        class="dropdown-item--danger dropdown-item"
+        role="menuitem"
+        tabindex="0"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-circle-minus fa-fw "
+          data-icon="circle-minus"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+            fill="currentColor"
+          />
+        </svg>
+         Remove server
+      </button>
+      <span>
+        DeleteServerModal 
+        [CLOSED]
+      </span>
+    </div>
+  </div>
+</div>
+`;
--- a/test/servers/helpers/ImportServersBtn.test.tsx
+++ b/test/servers/helpers/ImportServersBtn.test.tsx
@@ -57,7 +57,9 @@ describe('<ImportServersBtn />', () => {
    const { container } = setUp();
    const input = container.querySelector('[type=file]');

-    input && fireEvent.change(input, { target: { files: [''] } });
+    if (input) {
+      fireEvent.change(input, { target: { files: [''] } });
+    }
    expect(importServersFromFile).toHaveBeenCalledTimes(1);
    await waitFor(() => expect(createServersMock).toHaveBeenCalledTimes(1));
  });
@@ -73,7 +75,9 @@ describe('<ImportServersBtn />', () => {
    importServersFromFile.mockResolvedValue([existingServer, newServer]);

    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    input && fireEvent.change(input, { target: { files: [''] } });
+    if (input) {
+      fireEvent.change(input, { target: { files: [''] } });
+    }
    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
    await user.click(screen.getByRole('button', { name: btnName }));

--- a/test/servers/reducers/selectedServer.test.ts
+++ b/test/servers/reducers/selectedServer.test.ts
@@ -1,6 +1,5 @@
 import type { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { v4 as uuid } from 'uuid';
 import type { ShlinkState } from '../../../src/container/types';
 import type { NonReachableServer, NotFoundServer, RegularServer } from '../../../src/servers/data';
 import {
@@ -10,6 +9,7 @@ import {
  selectedServerReducerCreator,
  selectServer as selectServerCreator,
 } from '../../../src/servers/reducers/selectedServer';
+import { randomUUID } from '../../../src/utils/utils';

 describe('selectedServerReducer', () => {
  const dispatch = vi.fn();
@@ -41,7 +41,7 @@ describe('selectedServerReducer', () => {
      ['latest', MAX_FALLBACK_VERSION, 'latest'],
      ['%invalid_semver%', MIN_FALLBACK_VERSION, '%invalid_semver%'],
    ])('dispatches proper actions', async (serverVersion, expectedVersion, expectedPrintableVersion) => {
-      const id = uuid();
+      const id = randomUUID();
      const getState = createGetStateMock(id);
      const expectedSelectedServer = {
        id,
@@ -60,7 +60,7 @@ describe('selectedServerReducer', () => {
    });

    it('dispatches error when health endpoint fails', async () => {
-      const id = uuid();
+      const id = randomUUID();
      const getState = createGetStateMock(id);
      const expectedSelectedServer = fromPartial<NonReachableServer>({ id, serverNotReachable: true });

@@ -73,7 +73,7 @@ describe('selectedServerReducer', () => {
    });

    it('dispatches error when server is not found', async () => {
-      const id = uuid();
+      const id = randomUUID();
      const getState = vi.fn(() => fromPartial<ShlinkState>({ servers: {} }));
      const expectedSelectedServer: NotFoundServer = { serverNotFound: true };

--- a/test/servers/reducers/servers.test.ts
+++ b/test/servers/reducers/servers.test.ts
@@ -107,7 +107,9 @@ describe('serversReducer', () => {
      });

      it('generates an id for every provided server if they do not have it', () => {
-        const servers = Object.values(list).map(({ id, ...rest }) => rest);
+        const servers = Object.values(list).map(({ name, autoConnect, url, apiKey }) => (
+          { name, autoConnect, url, apiKey }
+        ));
        const { payload } = createServers(servers);

        expect(Object.values(payload).every(({ id }) => !!id)).toEqual(true);
--- a/test/settings/RealTimeUpdatesSettings.test.tsx
+++ b/test/settings/RealTimeUpdatesSettings.test.tsx
@@ -1,86 +0,0 @@
-import type { RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions } from '@shlinkio/shlink-web-component';
-import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
-import { RealTimeUpdatesSettings } from '../../src/settings/RealTimeUpdatesSettings';
-import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
-
-describe('<RealTimeUpdatesSettings />', () => {
-  const toggleRealTimeUpdates = vi.fn();
-  const setRealTimeUpdatesInterval = vi.fn();
-  const setUp = (realTimeUpdates: Partial<RealTimeUpdatesSettingsOptions> = {}) => renderWithEvents(
-    <RealTimeUpdatesSettings
-      settings={fromPartial({ realTimeUpdates })}
-      toggleRealTimeUpdates={toggleRealTimeUpdates}
-      setRealTimeUpdatesInterval={setRealTimeUpdatesInterval}
-    />,
-  );
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
-
-  it('renders enabled real time updates as expected', () => {
-    setUp({ enabled: true });
-
-    expect(screen.getByLabelText(/^Enable or disable real-time updates./)).toBeChecked();
-    expect(screen.getByText(/^Real-time updates are currently being/)).toHaveTextContent('processed');
-    expect(screen.getByText(/^Real-time updates are currently being/)).not.toHaveTextContent('ignored');
-    expect(screen.getByText('Real-time updates frequency (in minutes):')).not.toHaveAttribute(
-      'class',
-      expect.stringContaining('text-muted'),
-    );
-    expect(screen.getByLabelText('Real-time updates frequency (in minutes):')).not.toHaveAttribute('disabled');
-    expect(screen.getByText('Updates will be reflected in the UI as soon as they happen.')).toBeInTheDocument();
-  });
-
-  it('renders disabled real time updates as expected', () => {
-    setUp({ enabled: false });
-
-    expect(screen.getByLabelText(/^Enable or disable real-time updates./)).not.toBeChecked();
-    expect(screen.getByText(/^Real-time updates are currently being/)).not.toHaveTextContent('processed');
-    expect(screen.getByText(/^Real-time updates are currently being/)).toHaveTextContent('ignored');
-    expect(screen.getByText('Real-time updates frequency (in minutes):')).toHaveAttribute(
-      'class',
-      expect.stringContaining('text-muted'),
-    );
-    expect(screen.getByLabelText('Real-time updates frequency (in minutes):')).toHaveAttribute('disabled');
-    expect(screen.queryByText('Updates will be reflected in the UI as soon as they happen.')).not.toBeInTheDocument();
-  });
-
-  it.each([
-    [1, 'minute'],
-    [2, 'minutes'],
-    [10, 'minutes'],
-    [100, 'minutes'],
-  ])('shows expected children when interval is greater than 0', (interval, minutesWord) => {
-    setUp({ enabled: true, interval });
-
-    expect(screen.getByText(/^Updates will be reflected in the UI every/)).toHaveTextContent(
-      `${interval} ${minutesWord}`,
-    );
-    expect(screen.getByLabelText('Real-time updates frequency (in minutes):')).toHaveValue(interval);
-    expect(screen.queryByText('Updates will be reflected in the UI as soon as they happen.')).not.toBeInTheDocument();
-  });
-
-  it.each([[undefined], [0]])('shows expected children when interval is 0 or undefined', (interval) => {
-    setUp({ enabled: true, interval });
-
-    expect(screen.queryByText(/^Updates will be reflected in the UI every/)).not.toBeInTheDocument();
-    expect(screen.getByText('Updates will be reflected in the UI as soon as they happen.')).toBeInTheDocument();
-  });
-
-  it('updates real time updates when typing on input', async () => {
-    const { user } = setUp({ enabled: true });
-
-    expect(setRealTimeUpdatesInterval).not.toHaveBeenCalled();
-    await user.type(screen.getByLabelText('Real-time updates frequency (in minutes):'), '5');
-    expect(setRealTimeUpdatesInterval).toHaveBeenCalledWith(5);
-  });
-
-  it('toggles real time updates on switch change', async () => {
-    const { user } = setUp({ enabled: true });
-
-    expect(toggleRealTimeUpdates).not.toHaveBeenCalled();
-    await user.click(screen.getByText(/^Enable or disable real-time updates./));
-    expect(toggleRealTimeUpdates).toHaveBeenCalled();
-  });
-});
--- a/test/settings/Settings.test.tsx
+++ b/test/settings/Settings.test.tsx
@@ -1,52 +1,14 @@
-import { render, screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
-import { SettingsFactory } from '../../src/settings/Settings';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Settings } from '../../src/settings/Settings';
 import { checkAccessibility } from '../__helpers__/accessibility';

 describe('<Settings />', () => {
-  const Settings = SettingsFactory(fromPartial({
-    RealTimeUpdatesSettings: () => <span>RealTimeUpdates</span>,
-    ShortUrlCreationSettings: () => <span>ShortUrlCreation</span>,
-    ShortUrlsListSettings: () => <span>ShortUrlsList</span>,
-    UserInterfaceSettings: () => <span>UserInterface</span>,
-    VisitsSettings: () => <span>Visits</span>,
-    TagsSettings: () => <span>Tags</span>,
-  }));
-  const setUp = (activeRoute = '/') => {
-    const history = createMemoryHistory();
-    history.push(activeRoute);
-    return render(<Router location={history.location} navigator={history}><Settings /></Router>);
-  };
+  const setUp = () => render(
+    <MemoryRouter>
+      <Settings settings={{}} setSettings={vi.fn()} />
+    </MemoryRouter>,
+  );

  it('passes a11y checks', () => checkAccessibility(setUp()));
-
-  it.each([
-    ['/general', {
-      visibleComps: ['UserInterface', 'RealTimeUpdates'],
-      hiddenComps: ['ShortUrlCreation', 'ShortUrlsList', 'Tags', 'Visits'],
-    }],
-    ['/short-urls', {
-      visibleComps: ['ShortUrlCreation', 'ShortUrlsList'],
-      hiddenComps: ['UserInterface', 'RealTimeUpdates', 'Tags', 'Visits'],
-    }],
-    ['/other-items', {
-      visibleComps: ['Tags', 'Visits'],
-      hiddenComps: ['UserInterface', 'RealTimeUpdates', 'ShortUrlCreation', 'ShortUrlsList'],
-    }],
-  ])('renders expected sections based on route', (activeRoute, { visibleComps, hiddenComps }) => {
-    setUp(activeRoute);
-
-    visibleComps.forEach((comp) => expect(screen.getByText(comp)).toBeInTheDocument());
-    hiddenComps.forEach((comp) => expect(screen.queryByText(comp)).not.toBeInTheDocument());
-  });
-
-  it('renders expected menu', () => {
-    setUp();
-
-    expect(screen.getByRole('link', { name: 'General' })).toHaveAttribute('href', '/general');
-    expect(screen.getByRole('link', { name: 'Short URLs' })).toHaveAttribute('href', '/short-urls');
-    expect(screen.getByRole('link', { name: 'Other items' })).toHaveAttribute('href', '/other-items');
-  });
 });
--- a/test/settings/ShortUrlCreationSettings.test.tsx
+++ b/test/settings/ShortUrlCreationSettings.test.tsx
@@ -1,115 +0,0 @@
-import type { ShortUrlCreationSettings as ShortUrlsSettings } from '@shlinkio/shlink-web-component';
-import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
-import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
-import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
-
-describe('<ShortUrlCreationSettings />', () => {
-  const setShortUrlCreationSettings = vi.fn();
-  const setUp = (shortUrlCreation?: ShortUrlsSettings) => renderWithEvents(
-    <ShortUrlCreationSettings
-      settings={fromPartial({ shortUrlCreation })}
-      setShortUrlCreationSettings={setShortUrlCreationSettings}
-    />,
-  );
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
-
-  it.each([
-    [{ validateUrls: true }, true],
-    [{ validateUrls: false }, false],
-    [undefined, false],
-  ])('URL validation switch has proper initial state', (shortUrlCreation, expectedChecked) => {
-    const matcher = /^Request validation on long URLs when creating new short URLs/;
-
-    setUp(shortUrlCreation);
-
-    const checkbox = screen.getByLabelText(matcher);
-    const label = screen.getByText(matcher);
-
-    if (expectedChecked) {
-      expect(checkbox).toBeChecked();
-      expect(label).toHaveTextContent('Validate URL checkbox will be checked');
-      expect(label).not.toHaveTextContent('Validate URL checkbox will be unchecked');
-    } else {
-      expect(checkbox).not.toBeChecked();
-      expect(label).toHaveTextContent('Validate URL checkbox will be unchecked');
-      expect(label).not.toHaveTextContent('Validate URL checkbox will be checked');
-    }
-  });
-
-  it.each([
-    [{ forwardQuery: true }, true],
-    [{ forwardQuery: false }, false],
-    [{}, true],
-  ])('forward query switch is toggled if option is true', (shortUrlCreation, expectedChecked) => {
-    const matcher = /^Make all new short URLs forward their query params to the long URL/;
-
-    setUp({ validateUrls: true, ...shortUrlCreation });
-
-    const checkbox = screen.getByLabelText(matcher);
-    const label = screen.getByText(matcher);
-
-    if (expectedChecked) {
-      expect(checkbox).toBeChecked();
-      expect(label).toHaveTextContent('Forward query params on redirect checkbox will be checked');
-      expect(label).not.toHaveTextContent('Forward query params on redirect checkbox will be unchecked');
-    } else {
-      expect(checkbox).not.toBeChecked();
-      expect(label).toHaveTextContent('Forward query params on redirect checkbox will be unchecked');
-      expect(label).not.toHaveTextContent('Forward query params on redirect checkbox will be checked');
-    }
-  });
-
-  it.each([
-    [{ tagFilteringMode: 'includes' } as ShortUrlsSettings, 'Suggest tags including input', 'including'],
-    [
-      { tagFilteringMode: 'startsWith' } as ShortUrlsSettings,
-      'Suggest tags starting with input',
-      'starting with',
-    ],
-    [undefined, 'Suggest tags starting with input', 'starting with'],
-  ])('shows expected texts for tags suggestions', (shortUrlCreation, expectedText, expectedHint) => {
-    setUp(shortUrlCreation);
-
-    expect(screen.getByRole('button', { name: expectedText })).toBeInTheDocument();
-    expect(screen.getByText(/^The list of suggested tags will contain those/)).toHaveTextContent(expectedHint);
-  });
-
-  it.each([[true], [false]])('invokes setShortUrlCreationSettings when URL validation toggle value changes', async (validateUrls) => {
-    const { user } = setUp({ validateUrls });
-
-    expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
-    await user.click(screen.getByLabelText(/^Request validation on long URLs when creating new short URLs/));
-    expect(setShortUrlCreationSettings).toHaveBeenCalledWith({ validateUrls: !validateUrls });
-  });
-
-  it.each([[true], [false]])('invokes setShortUrlCreationSettings when forward query toggle value changes', async (forwardQuery) => {
-    const { user } = setUp({ validateUrls: true, forwardQuery });
-
-    expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
-    await user.click(screen.getByLabelText(/^Make all new short URLs forward their query params to the long URL/));
-    expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining({ forwardQuery: !forwardQuery }));
-  });
-
-  it('invokes setShortUrlCreationSettings when dropdown value changes', async () => {
-    const { user } = setUp();
-    const clickItem = async (name: string) => {
-      await user.click(screen.getByRole('button', { name: 'Suggest tags starting with input' }));
-      await user.click(await screen.findByRole('menuitem', { name }));
-    };
-
-    expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
-
-    await clickItem('Suggest tags including input');
-    expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining(
-      { tagFilteringMode: 'includes' },
-    ));
-
-    await clickItem('Suggest tags starting with input');
-    expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining(
-      { tagFilteringMode: 'startsWith' },
-    ));
-  });
-});
--- a/test/settings/ShortUrlsListSettings.test.tsx
+++ b/test/settings/ShortUrlsListSettings.test.tsx
@@ -1,40 +0,0 @@
-import type { ShortUrlsListSettings as ShortUrlsSettings } from '@shlinkio/shlink-web-component';
-import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
-import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
-import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
-
-describe('<ShortUrlsListSettings />', () => {
-  const setSettings = vi.fn();
-  const setUp = (shortUrlsList?: ShortUrlsSettings) => renderWithEvents(
-    <ShortUrlsListSettings settings={fromPartial({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
-  );
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
-
-  it.each([
-    [undefined, 'Order by: Created at - DESC'],
-    [fromPartial<ShortUrlsSettings>({}), 'Order by: Created at - DESC'],
-    [fromPartial<ShortUrlsSettings>({ defaultOrdering: {} }), 'Order by...'],
-    [fromPartial<ShortUrlsSettings>({ defaultOrdering: { field: 'longUrl', dir: 'DESC' } }), 'Order by: Long URL - DESC'],
-    [fromPartial<ShortUrlsSettings>({ defaultOrdering: { field: 'visits', dir: 'ASC' } }), 'Order by: Visits - ASC'],
-  ])('shows expected ordering', (shortUrlsList, expectedOrder) => {
-    setUp(shortUrlsList);
-    expect(screen.getByRole('button')).toHaveTextContent(expectedOrder);
-  });
-
-  it.each([
-    ['Clear selection', undefined, undefined],
-    ['Long URL', 'longUrl', 'ASC'],
-    ['Visits', 'visits', 'ASC'],
-    ['Title', 'title', 'ASC'],
-  ])('invokes setSettings when ordering changes', async (name, field, dir) => {
-    const { user } = setUp();
-
-    expect(setSettings).not.toHaveBeenCalled();
-    await user.click(screen.getByRole('button'));
-    await user.click(screen.getByRole('menuitem', { name }));
-    expect(setSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } });
-  });
-});
--- a/test/settings/TagsSettings.test.tsx
+++ b/test/settings/TagsSettings.test.tsx
@@ -1,47 +0,0 @@
-import type { TagsSettings as TagsSettingsOptions } from '@shlinkio/shlink-web-component';
-import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
-import type { TagsOrder } from '../../src/settings/TagsSettings';
-import { TagsSettings } from '../../src/settings/TagsSettings';
-import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
-
-describe('<TagsSettings />', () => {
-  const setTagsSettings = vi.fn();
-  const setUp = (tags?: TagsSettingsOptions) => renderWithEvents(
-    <TagsSettings settings={fromPartial({ tags })} setTagsSettings={setTagsSettings} />,
-  );
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
-
-  it('renders expected amount of groups', () => {
-    setUp();
-
-    expect(screen.getByText('Default ordering for tags list:')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Order by...' })).toBeInTheDocument();
-  });
-
-  it.each([
-    [undefined, 'Order by...'],
-    [{}, 'Order by...'],
-    [{ defaultOrdering: {} }, 'Order by...'],
-    [{ defaultOrdering: { field: 'tag', dir: 'DESC' } as TagsOrder }, 'Order by: Tag - DESC'],
-    [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, 'Order by: Visits - ASC'],
-  ])('shows expected ordering', (tags, expectedOrder) => {
-    setUp(tags);
-    expect(screen.getByRole('button', { name: expectedOrder })).toBeInTheDocument();
-  });
-
-  it.each([
-    ['Tag', 'tag', 'ASC'],
-    ['Visits', 'visits', 'ASC'],
-    ['Short URLs', 'shortUrls', 'ASC'],
-  ])('invokes setTagsSettings when ordering changes', async (name, field, dir) => {
-    const { user } = setUp();
-
-    expect(setTagsSettings).not.toHaveBeenCalled();
-    await user.click(screen.getByText('Order by...'));
-    await user.click(screen.getByRole('menuitem', { name }));
-    expect(setTagsSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } });
-  });
-});
--- a/test/settings/UserInterfaceSettings.test.tsx
+++ b/test/settings/UserInterfaceSettings.test.tsx
@@ -1,56 +0,0 @@
-import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
-import type { UiSettings } from '../../src/settings/reducers/settings';
-import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
-import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
-
-describe('<UserInterfaceSettings />', () => {
-  const setUiSettings = vi.fn();
-  const setUp = (ui?: UiSettings, defaultDarkTheme = false) => renderWithEvents(
-    <UserInterfaceSettings
-      settings={fromPartial({ ui })}
-      setUiSettings={setUiSettings}
-      _matchMedia={vi.fn().mockReturnValue({ matches: defaultDarkTheme })}
-    />,
-  );
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
-
-  it.each([
-    [{ theme: 'dark' as const }, true, true],
-    [{ theme: 'dark' as const }, false, true],
-    [{ theme: 'light' as const }, true, false],
-    [{ theme: 'light' as const }, false, false],
-    [undefined, false, false],
-    [undefined, true, true],
-  ])('toggles switch if theme is dark', (ui, defaultDarkTheme, expectedChecked) => {
-    setUp(ui, defaultDarkTheme);
-
-    if (expectedChecked) {
-      expect(screen.getByLabelText('Use dark theme.')).toBeChecked();
-    } else {
-      expect(screen.getByLabelText('Use dark theme.')).not.toBeChecked();
-    }
-  });
-
-  it.each([
-    [{ theme: 'dark' as const }],
-    [{ theme: 'light' as const }],
-    [undefined],
-  ])('shows different icons based on theme', (ui) => {
-    setUp(ui);
-    expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
-  });
-
-  it.each([
-    ['light' as const, 'dark' as const],
-    ['dark' as const, 'light' as const],
-  ])('invokes setUiSettings when theme toggle value changes', async (initialTheme, expectedTheme) => {
-    const { user } = setUp({ theme: initialTheme });
-
-    expect(setUiSettings).not.toHaveBeenCalled();
-    await user.click(screen.getByLabelText('Use dark theme.'));
-    expect(setUiSettings).toHaveBeenCalledWith({ theme: expectedTheme });
-  });
-});
--- a/test/settings/VisitsSettings.test.tsx
+++ b/test/settings/VisitsSettings.test.tsx
@@ -1,129 +0,0 @@
-import type { Settings } from '@shlinkio/shlink-web-component';
-import { screen } from '@testing-library/react';
-import { fromPartial } from '@total-typescript/shoehorn';
-import { VisitsSettings } from '../../src/settings/VisitsSettings';
-import { checkAccessibility } from '../__helpers__/accessibility';
-import { renderWithEvents } from '../__helpers__/setUpTest';
-
-describe('<VisitsSettings />', () => {
-  const setVisitsSettings = vi.fn();
-  const setUp = (settings: Partial<Settings> = {}) => renderWithEvents(
-    <VisitsSettings settings={fromPartial(settings)} setVisitsSettings={setVisitsSettings} />,
-  );
-
-  it('passes a11y checks', () => checkAccessibility(setUp()));
-
-  it('renders expected components', () => {
-    setUp();
-
-    expect(screen.getByRole('heading')).toHaveTextContent('Visits');
-    expect(screen.getByText('Default interval to load on visits sections:')).toBeInTheDocument();
-    expect(screen.getByText(/^Exclude bots wherever possible/)).toBeInTheDocument();
-    expect(screen.getByText('Compare visits with previous period.')).toBeInTheDocument();
-  });
-
-  it.each([
-    [fromPartial<Settings>({}), 'Last 30 days'],
-    [fromPartial<Settings>({ visits: {} }), 'Last 30 days'],
-    [
-      fromPartial<Settings>({
-        visits: {
-          defaultInterval: 'last7Days',
-        },
-      }),
-      'Last 7 days',
-    ],
-    [
-      fromPartial<Settings>({
-        visits: {
-          defaultInterval: 'today',
-        },
-      }),
-      'Today',
-    ],
-  ])('sets expected interval as active', (settings, expectedInterval) => {
-    setUp(settings);
-    expect(screen.getByRole('button')).toHaveTextContent(expectedInterval);
-  });
-
-  it('invokes setVisitsSettings when interval changes', async () => {
-    const { user } = setUp();
-    const selectOption = async (name: string) => {
-      await user.click(screen.getByRole('button'));
-      await user.click(screen.getByRole('menuitem', { name }));
-    };
-
-    await selectOption('Last 7 days');
-    await selectOption('Last 180 days');
-    await selectOption('Yesterday');
-
-    expect(setVisitsSettings).toHaveBeenCalledTimes(3);
-    expect(setVisitsSettings).toHaveBeenNthCalledWith(1, { defaultInterval: 'last7Days' });
-    expect(setVisitsSettings).toHaveBeenNthCalledWith(2, { defaultInterval: 'last180Days' });
-    expect(setVisitsSettings).toHaveBeenNthCalledWith(3, { defaultInterval: 'yesterday' });
-  });
-
-  it.each([
-    [
-      fromPartial<Settings>({}),
-      /The visits coming from potential bots will be included.$/,
-      /The visits coming from potential bots will be excluded.$/,
-    ],
-    [
-      fromPartial<Settings>({ visits: { excludeBots: false } }),
-      /The visits coming from potential bots will be included.$/,
-      /The visits coming from potential bots will be excluded.$/,
-    ],
-    [
-      fromPartial<Settings>({ visits: { excludeBots: true } }),
-      /The visits coming from potential bots will be excluded.$/,
-      /The visits coming from potential bots will be included.$/,
-    ],
-  ])('displays expected helper text for exclude bots control', (settings, expectedText, notExpectedText) => {
-    setUp(settings);
-
-    const visitsComponent = screen.getByText(/^Exclude bots wherever possible/);
-
-    expect(visitsComponent).toHaveTextContent(expectedText);
-    expect(visitsComponent).not.toHaveTextContent(notExpectedText);
-  });
-
-  it('invokes setVisitsSettings when bot exclusion is toggled', async () => {
-    const { user } = setUp();
-
-    await user.click(screen.getByText(/^Exclude bots wherever possible/));
-    expect(setVisitsSettings).toHaveBeenCalledWith(expect.objectContaining({ excludeBots: true }));
-  });
-
-  it.each([
-    [
-      fromPartial<Settings>({}),
-      /When loading visits, previous period won't be loaded by default.$/,
-      /When loading visits, previous period will be loaded by default.$/,
-    ],
-    [
-      fromPartial<Settings>({ visits: { loadPrevInterval: false } }),
-      /When loading visits, previous period won't be loaded by default.$/,
-      /When loading visits, previous period will be loaded by default.$/,
-    ],
-    [
-      fromPartial<Settings>({ visits: { loadPrevInterval: true } }),
-      /When loading visits, previous period will be loaded by default.$/,
-      /When loading visits, previous period won't be loaded by default.$/,
-    ],
-  ])('displays expected helper text for prev interval control', (settings, expectedText, notExpectedText) => {
-    setUp(settings);
-
-    const visitsComponent = screen.getByText('Compare visits with previous period.');
-
-    expect(visitsComponent).toHaveTextContent(expectedText);
-    expect(visitsComponent).not.toHaveTextContent(notExpectedText);
-  });
-
-  it('invokes setVisitsSettings when loading prev visits is toggled', async () => {
-    const { user } = setUp();
-
-    await user.click(screen.getByText('Compare visits with previous period.'));
-    expect(setVisitsSettings).toHaveBeenCalledWith(expect.objectContaining({ loadPrevInterval: true }));
-  });
-});
--- a/test/settings/snapshots/UserInterfaceSettings.test.tsx.snap
+++ b/test/settings/snapshots/UserInterfaceSettings.test.tsx.snap
@@ -1,55 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<UserInterfaceSettings /> > shows different icons based on theme 1`] = `
-<svg
-  aria-hidden="true"
-  class="svg-inline--fa fa-moon user-interface__theme-icon"
-  data-icon="moon"
-  data-prefix="fas"
-  focusable="false"
-  role="img"
-  viewBox="0 0 384 512"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
-    fill="currentColor"
-  />
-</svg>
-`;
-
-exports[`<UserInterfaceSettings /> > shows different icons based on theme 2`] = `
-<svg
-  aria-hidden="true"
-  class="svg-inline--fa fa-sun user-interface__theme-icon"
-  data-icon="sun"
-  data-prefix="fas"
-  focusable="false"
-  role="img"
-  viewBox="0 0 512 512"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
-    fill="currentColor"
-  />
-</svg>
-`;
-
-exports[`<UserInterfaceSettings /> > shows different icons based on theme 3`] = `
-<svg
-  aria-hidden="true"
-  class="svg-inline--fa fa-sun user-interface__theme-icon"
-  data-icon="sun"
-  data-prefix="fas"
-  focusable="false"
-  role="img"
-  viewBox="0 0 512 512"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
-    fill="currentColor"
-  />
-</svg>
-`;
--- a/test/settings/reducers/settings.test.ts
+++ b/test/settings/reducers/settings.test.ts
@@ -1,75 +1,25 @@
-import {
-  DEFAULT_SHORT_URLS_ORDERING,
-  setRealTimeUpdatesInterval,
-  setShortUrlCreationSettings,
-  setShortUrlsListSettings,
-  setTagsSettings,
-  settingsReducer,
-  setUiSettings,
-  setVisitsSettings,
-  toggleRealTimeUpdates,
-} from '../../../src/settings/reducers/settings';
+import type { Settings } from '@shlinkio/shlink-web-component/settings';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { DEFAULT_SHORT_URLS_ORDERING, setSettings, settingsReducer } from '../../../src/settings/reducers/settings';

 describe('settingsReducer', () => {
  const realTimeUpdates = { enabled: true };
  const shortUrlCreation = { validateUrls: false };
-  const ui = { theme: 'light' };
-  const visits = { defaultInterval: 'last30Days' };
+  const ui = { theme: 'light' as const };
+  const visits = { defaultInterval: 'last30Days' as const };
  const shortUrlsList = { defaultOrdering: DEFAULT_SHORT_URLS_ORDERING };
-  const settings = { realTimeUpdates, shortUrlCreation, ui, visits, shortUrlsList };
+  const settings = fromPartial<Settings>({ realTimeUpdates, shortUrlCreation, ui, visits, shortUrlsList });

  describe('reducer', () => {
-    it('returns realTimeUpdates when action is SET_SETTINGS', () => {
-      expect(settingsReducer(undefined, toggleRealTimeUpdates(realTimeUpdates.enabled))).toEqual(settings);
+    it('can update settings', () => {
+      expect(settingsReducer(undefined, setSettings(settings))).toEqual(settings);
    });
  });

-  describe('toggleRealTimeUpdates', () => {
-    it.each([[true], [false]])('updates settings with provided value and then loads updates again', (enabled) => {
-      const { payload } = toggleRealTimeUpdates(enabled);
-      expect(payload).toEqual({ realTimeUpdates: { enabled } });
-    });
-  });
-
-  describe('setRealTimeUpdatesInterval', () => {
-    it.each([[0], [1], [2], [10]])('updates settings with provided value and then loads updates again', (interval) => {
-      const { payload } = setRealTimeUpdatesInterval(interval);
-      expect(payload).toEqual({ realTimeUpdates: { interval } });
-    });
-  });
-
-  describe('setShortUrlCreationSettings', () => {
-    it('creates action to set shortUrlCreation settings', () => {
-      const { payload } = setShortUrlCreationSettings({ validateUrls: true });
-      expect(payload).toEqual({ shortUrlCreation: { validateUrls: true } });
-    });
-  });
-
-  describe('setUiSettings', () => {
-    it('creates action to set ui settings', () => {
-      const { payload } = setUiSettings({ theme: 'dark' });
-      expect(payload).toEqual({ ui: { theme: 'dark' } });
-    });
-  });
-
-  describe('setVisitsSettings', () => {
-    it('creates action to set visits settings', () => {
-      const { payload } = setVisitsSettings({ defaultInterval: 'last180Days' });
-      expect(payload).toEqual({ visits: { defaultInterval: 'last180Days' } });
-    });
-  });
-
-  describe('setTagsSettings', () => {
-    it('creates action to set tags settings', () => {
-      const { payload } = setTagsSettings({ defaultMode: 'list' });
-      expect(payload).toEqual({ tags: { defaultMode: 'list' } });
-    });
-  });
-
-  describe('setShortUrlsListSettings', () => {
-    it('creates action to set short URLs list settings', () => {
-      const { payload } = setShortUrlsListSettings({ defaultOrdering: DEFAULT_SHORT_URLS_ORDERING });
-      expect(payload).toEqual({ shortUrlsList: { defaultOrdering: DEFAULT_SHORT_URLS_ORDERING } });
+  describe('setSettings', () => {
+    it('creates action to set settings', () => {
+      const { payload } = setSettings(settings);
+      expect(payload).toEqual(settings);
    });
  });
 });
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,7 +46,7 @@ export default defineConfig({
      // Required code coverage. Lower than this will make the check fail
      thresholds: {
        statements: 95,
-        branches: 95,
+        branches: 90,
        functions: 90,
        lines: 95,
      },