Merge pull request #848 from shlinkio/develop

Release 3.10.2

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "root": true,
+  "extends": [
+    "@shlinkio/js-coding-standard"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "ignorePatterns": ["src/service*.ts"],
+  "rules": {
+    "jsx-a11y/control-has-associated-label": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off"
+  }
+}

.github/FUNDING.yml

@@ -1,2 +1,2 @@
 github: ['acelaya']
-custom: ['https://slnk.to/donate']
+custom: ['https://acel.me/donate']

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,7 @@
+<!--
+Before opening an issue, just take into account that this is a completely free of charge and open source project.
+I'm always happy to help and provide support, but some understanding will be expected.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+You may also be asked to provide tests or ways to reproduce reported bugs.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+-->

.github/ISSUE_TEMPLATE/Bug.md

@@ -0,0 +1,36 @@
+---
+name: Bug report
+about: Something on shlink is broken or not working as documented?
+labels: bug
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge and open source project.
+I'm always happy to help and provide support, but some understanding will be expected.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+You may also be asked to provide tests or ways to reproduce reported bugs.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Shlink web client version
+
+* Version: x.y.z
+* How do you use shlink-web-client: app.shlink.io|Docker image|self-hosted
+
+#### Summary
+
+<!-- Provide a summary describing the problem you are experiencing. -->
+
+#### Current behavior
+
+<!-- How is it actually behaving (and it shouldn't)? -->
+
+#### Expected behavior
+
+<!-- How did you expected to behave? -->
+
+#### How to reproduce
+
+<!-- Provide steps to reproduce the bug. -->

.github/ISSUE_TEMPLATE/Bug.yml

@@ -1,43 +0,0 @@
-name: 'Bug'
-description: Something on shlink is broken or not working as documented?
-labels: ['bug']
-body:
-  - type: input
-    validations:
-      required: true
-    attributes:
-      label: shlink-web-client version
-      placeholder: x.y.z
-  - type: dropdown
-    validations:
-      required: true
-    attributes:
-      label: How do you use shlink-web-client
-      options:
-        - https://app.shlink.io
-        - Docker image
-        - Self-hosted
-        - Other (explain in summary)
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Current behavior
-      value: '<!-- How is it actually behaving (and it should not)? -->'
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Expected behavior
-      value: '<!-- How did you expect it to behave? -->'
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      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.
-        -->

.github/ISSUE_TEMPLATE/Feature_Request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Do you find shlink is missing some important feature that would make it more useful?
+labels: feature
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge and open source project.
+I'm always happy to help and provide support, but some understanding will be expected.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+You may also be asked to provide tests or ways to reproduce reported bugs.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Summary
+
+<!-- Describe the new feature you would like to request. -->

.github/ISSUE_TEMPLATE/Feature_Request.yml

@@ -1,16 +0,0 @@
-name: Feature request
-description: Do you find shlink-web-client is missing some important feature that would make it more useful?
-labels: ['feature']
-body:
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Summary
-      value: '<!-- Describe the new feature you would like to request. -->'
-  - type: textarea
-    validations:
-      required: true
-    attributes:
-      label: Use case
-      value: '<!-- Explain why do you think this feature would be useful, and what problems would it help to solve. -->'

.github/ISSUE_TEMPLATE/Question_Support.md

@@ -0,0 +1,24 @@
+---
+name: Question - Support
+about: Do you have a problem setting up or using shlink?
+labels: question
+---
+
+<!--
+Before opening an issue, just take into account that this is a completely free of charge and open source project.
+I'm always happy to help and provide support, but some understanding will be expected.
+I do this in my own free time, so expect some delays when implementing new features and fixing bugs, and don't take it personal if an issue gets eventually closed.
+You may also be asked to provide tests or ways to reproduce reported bugs.
+Try to be polite, and understand it is impossible for an OSS project to cover all use cases.
+
+With that said, please fill in the information requested next. More information might be requested once the issue is open.
+-->
+
+#### Shlink web client version
+
+* Version: x.y.z
+* How do you use shlink-web-client: app.shlink.io|Docker image|self-hosted
+
+#### Summary
+
+<!-- Describe the issue you are facing here. -->

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +0,0 @@
-blank_issues_enabled: true
-contact_links:
-  - name: Question - Support
-    about: Do you need help setting up or using shlink-web-client?
-    url: https://github.com/orgs/shlinkio/discussions/new?category=help-wanted

.github/dependabot.yml

@@ -1,54 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: npm
-    directory: '/'
-    schedule:
-      interval: weekly
-      day: saturday
-      time: '09:00'
-      timezone: 'Europe/Madrid'
-    open-pull-requests-limit: 10
-    groups:
-      fontawesome:
-        patterns:
-          - '@fortawesome/*'
-      eslint:
-        patterns:
-          - '@shlinkio/eslint-config-js-coding-standard'
-          - 'typescript-eslint'
-          - '*eslint-plugin*'
-          - 'eslint'
-      shlink:
-        patterns:
-          - '@shlinkio/*'
-      react:
-        patterns:
-          - 'react'
-          - 'react-dom'
-          - '@types/react'
-          - '@types/react-dom'
-      testing:
-        patterns:
-          - '@testing-library/*'
-      vite:
-        patterns:
-          - 'vite'
-          - '@vitejs/*'
-      vitest:
-        patterns:
-          - 'vitest'
-          - '@vitest/*'
-      workbox:
-        patterns:
-          - 'workbox*'
-      tailwindcss:
-        patterns:
-          - 'tailwindcss'
-          - '@tailwindcss/*'
-  - package-ecosystem: docker
-    directory: '/'
-    schedule:
-      interval: weekly
-      day: saturday
-      time: '09:00'
-      timezone: 'Europe/Madrid'

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

@@ -1,10 +0,0 @@
-name: Test docker image build
-
-on:
-  pull_request:
-    paths:
-      - 'Dockerfile'
-
-jobs:
-  build-docker-image:
-    uses: shlinkio/github-actions/.github/workflows/docker-image-build-ci.yml@main

.github/workflows/ci.yml

@@ -11,6 +11,6 @@ jobs:
   ci:
     uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
     with:
-      node-version: 22.x
+      node-version: 20.2
       publish-coverage: true
-      install-playwright: true
+      force-install: true

.github/workflows/deploy-preview.yml

@@ -5,23 +5,23 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-20.04
     continue-on-error: true
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
         with:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           ref: ${{ github.event.pull_request.head.ref }}
       - name: Use node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         with:
-          node-version: 22.10
+          node-version: 20.2
       - name: Build
         run: |
-          npm ci && \
-          node ./scripts/set-homepage.cjs /shlink-web-client/${GITHUB_HEAD_REF#refs/heads/} && \
-          node --run build
+          npm ci --force && \
+          node ./scripts/set-homepage.js /shlink-web-client/${GITHUB_HEAD_REF#refs/heads/} && \
+          npm run build
       - name: Deploy preview
         uses: shlinkio/deploy-preview-action@v1.0.1
         with:

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

@@ -7,7 +7,7 @@ on:
 
 jobs:
   build:
-    uses: shlinkio/github-actions/.github/workflows/docker-publish-image.yml@main
+    uses: shlinkio/github-actions/.github/workflows/docker-build-and-publish.yml@main
     secrets: inherit
     with:
       image-name: shlinkio/shlink-web-client

.github/workflows/publish-release.yml

@@ -7,16 +7,16 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
       - name: Use node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         with:
-          node-version: 22.10
+          node-version: 20.2
       - name: Generate release assets
-        run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
+        run: npm ci --force && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
       - name: Publish release with assets
         uses: docker://antonyurchenko/git-release:latest
         env:

.gitignore

@@ -7,7 +7,9 @@
 
 # production
 /build
-/dist
 
 npm-debug.log*
+
+docker-compose.override.yml
+home
 public/servers.json*

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@shlinkio/stylelint-config-css-coding-standard"
+  ]
+}

CHANGELOG.md

@@ -4,360 +4,6 @@ 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.7.0] - 2026-02-04
-### Added
-* [shlink-web-component] Add support for Shlink 5.0.0, by supporting date-based redirect conditions.
-
-### Changed
-* *Nothing*
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* *Nothing*
-
-
-## [4.6.2] - 2025-11-15
-### Added
-* *Nothing*
-
-### Changed
-* *Nothing*
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* [shlink-web-component#878](https://github.com/shlinkio/shlink-web-component/issues/878) Fix real-time updates interval setting being ignored.
-
-
-## [4.6.1] - 2025-11-15
-### Added
-* *Nothing*
-
-### Changed
-* [#802](https://github.com/shlinkio/shlink-web-client/issues/802) Improve dependency injection in components.
-* Stop injecting redux state and actions.
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* Fix small UI issues.
-
-
-## [4.6.0] - 2025-11-12
-### Added
-* [shlink-web-component#839](https://github.com/shlinkio/shlink-web-component/issues/839) Allow filtering short URLs by excluded tags when using Shlink >=4.6.0
-* [shlink-web-component#838](https://github.com/shlinkio/shlink-web-component/issues/838) Allow filtering tag, orphan and non-orphan visits by domain, when using Shlink >=4.6.0
-* [shlink-web-component#784](https://github.com/shlinkio/shlink-web-component/issues/784) Add optional `long-url` query parameter to short URL creation to prefill the long URL programmatically.
-
-### Changed
-* *Nothing*
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* Drop support for Shlink older than 4.0.0
-
-### Fixed
-* *Nothing*
-
-
-## [4.5.1] - 2025-08-13
-### Added
-* *Nothing*
-
-### Changed
-* *Nothing*
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* [#1637](https://github.com/shlinkio/shlink-web-client/issues/1637) Fix brand color used in PWA
-* [#1636](https://github.com/shlinkio/shlink-web-client/issues/1636) Make sure sidebar toggle is rendered only in sections where the sidebar exists.
-
-
-## [4.5.0] - 2025-08-08
-### Added
-* [shlink-web-component#755](https://github.com/shlinkio/shlink-web-component/issues/755) Add support for `any-value-query-param` and `valueless-query-param` redirect conditions when using Shlink >=4.5.0.
-* [shlink-web-component#756](https://github.com/shlinkio/shlink-web-component/issues/756) Add support for desktop device types on device redirect conditions, when using Shlink >=4.5.0.
-* [shlink-web-component#713](https://github.com/shlinkio/shlink-web-component/issues/713) Expose a new `ShlinkSidebarToggleButton` component that can be used to customize the location of the sidebar toggle, rather than making it assume there's a header bar and position it there.
-* [shlink-web-component#657](https://github.com/shlinkio/shlink-web-component/issues/657) Allow visits table columns to be customized via settings, and add a new optional "Region" column.
-
-  As a side effect, the "Show user agent" toggle has been removed from the list, as this can now be globally configured in the settings.
-
-### Changed
-* Update to FontAwesome 7
-* Update to Recharts 3
-* Update to `@shlinkio/shlink-web-component` 0.16.1
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* [shlink-web-component#698](https://github.com/shlinkio/shlink-web-component/issues/698) Fix line chart selection triggering after clicking a dot in the chart. It now works only when dragging while the mouse is clicked.
-
-
-## [4.4.1] - 2025-06-23
-### Added
-* *Nothing*
-
-### Changed
-* [shlink-web-component#661](https://github.com/shlinkio/shlink-web-component/issues/661) and [#1571](https://github.com/shlinkio/shlink-web-client/issues/1571) Fully replace bootstrap with tailwind.
-* Add the new light theme brand color.
-* Update to `@shlinkio/shlink-frontend-kit` 1.0.0 and `@shlinkio/shlink-web-component` 0.15
-* Replace reactstrap nav bar with `NavBar` component from `@shlinkio/shlink-frontend-kit`
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* *Nothing*
-
-
-## [4.4.0] - 2025-04-20
-### Added
-* [#1510](https://github.com/shlinkio/shlink-web-client/issues/1510) Existing HTTP credentials (cookies, TLS certs, authentication headers) can now be forwarded to the API server if appropriate [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Allow-Credentials) are set
-* [shlink-web-component#637](https://github.com/shlinkio/shlink-web-component/pull/637) QR codes are now generated client-side, without hitting Shlink.
-* [shlink-web-component#641](https://github.com/shlinkio/shlink-web-component/issues/641) It is now possible to provide any logo to be used with QR codes.
-* [shlink-web-component#640](https://github.com/shlinkio/shlink-web-component/issues/640) Allow default QR code settings to be handled via app settings.
-
-### Changed
-* Update to `react-router` 7.0
-* Update to `@shlinkio/shlink-frontend-kit` 0.8.x
-* Update to `@shlinkio/shlink-web-component` 0.13.x
-* Update to `@shlinkio/shlink-js-sdk` 2.0.0
-* Add `eslint-plugin-react-compiler`
-* Run unit tests in a headless browser using vitest browser mode and playwright.
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* *Nothing*
-
-
-## [4.3.0] - 2024-11-30
-### Added
-* [#1360](https://github.com/shlinkio/shlink-web-client/issues/1360) Added ability for server IDs to be generated based on the server name and URL, instead of generating a random UUID.
-
-    This can improve sharing a predefined set of servers cia servers.json, env vars, or simply export and import your servers in some other device, and then be able to share server URLs which continue working.
-
-    All existing servers will keep their generated IDs in existing devices for backwards compatibility, but newly created servers will use the new approach.
-
-* [shlink-web-component#491](https://github.com/shlinkio/shlink-web-component/issues/491) Add support for colors in QR code configurator.
-* [shlink-web-component#515](https://github.com/shlinkio/shlink-web-component/issues/515) Add support for geolocation redirect conditions, when using Shlink 4.3 or newer.
-* [shlink-web-component#514](https://github.com/shlinkio/shlink-web-component/issues/514) Allow filtering short URLs list by domain, when using Shlink 4.3 or newer.
-* [shlink-web-component#520](https://github.com/shlinkio/shlink-web-component/issues/520) Allow navigating from domains list to short URLs list filtered by one domain, when using Shlink 4.3 or newer.
-* [shlink-web-component#517](https://github.com/shlinkio/shlink-web-component/issues/517) Update list of known domains when a short URL is created with a new domain.
-* [shlink-web-component#292](https://github.com/shlinkio/shlink-web-component/issues/292) Add icon in short URLs list indicating if a short URL has redirect rules.
-
-### Changed
-* *Nothing*
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* [shlink-web-component#504](https://github.com/shlinkio/shlink-web-component/issues/504) Fix fallback interval not causing new visits to be loaded.
-
-
-## [4.2.2] - 2024-10-19
-### Added
-* *Nothing*
-
-### Changed
-* Update to `@shlinkio/shlink-frontend-kit` 0.6.0
-* Update to `@shlinkio/shlink-web-component` 0.10.1
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* *Nothing*
-
-### Fixed
-* [shlink-web-component#475](https://github.com/shlinkio/shlink-web-component/issues/475) Fix incorrect amount of dots being displayed in line charts when the difference in days/weeks/months is rounded up.
-
-
-## [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.
-
-  When in the tags, domains or short URLs tables, you can now pick up to 5 items to compare their visits. Once selected, you are taken to a section displaying a comparative line chart, which supports all regular visits filtering capabilities.
-
-* [shlink-web-component #9](https://github.com/shlinkio/shlink-web-component/issues/9) Allow comparing visits with the previous period.
-* [shlink-web-component #12](https://github.com/shlinkio/shlink-web-component/issues/12) and [#13](https://github.com/shlinkio/shlink-web-component/issues/13) Add new "Visits options" section for arbitrary visit stats options. Add section to delete short URL and orphan visits there.
-
-  This section is only visible if short URL visits deletion or orphan visits deletion are supported by connected Shlink server.
-
-* [shlink-web-component #10](https://github.com/shlinkio/shlink-web-component/issues/10) Improve general accessibility: Add accessibility tests, fix accessibility issues and enable accessibility linting rules.
-
-### Changed
-* [#338](https://github.com/shlinkio/shlink-web-client/issues/338) Extract `@shlinkio/shlink-web-component` and `@shlinkio/shlink-frontend-kit` as external libs.
-* [#978](https://github.com/shlinkio/shlink-web-client/issues/978) Use system preferred theme as default theme.
-* Use API client from `@shlinkio/shlink-js-sdk` to consume Shlink servers.
-* [#902](https://github.com/shlinkio/shlink-web-client/pull/902) Docker image is no longer running as root. As a side effect, exposed port is `8080`, not `80` anymore.
-* [shlink-web-component #117](https://github.com/shlinkio/shlink-web-component/issues/117) Migrate charts from Chart.JS to Recharts.
-
-### Deprecated
-* *Nothing*
-
-### Removed
-* Drop support for Shlink older than v3.0.0
-
-### Fixed
-* [#910](https://github.com/shlinkio/shlink-web-client/issues/910) Fix warnings related with missing `act` in tests and refs in `AppUpdateBanner`.
-
-
 ## [3.10.2] - 2023-07-09
 ### Added
 * *Nothing*
@@ -456,7 +102,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * [#774](https://github.com/shlinkio/shlink-web-client/issues/774) Dropped support for Shlink older than 2.8.0.
 
 ### Fixed
-* [#715](https://github.com/shlinkio/shlink-web-client/issues/715) Fixed connection still failing on misconfigured servers, after editing their params to set proper values.
+* [#715](https://github.com/shlinkio/shlink-web-client/issues/715) Fixed connection still failing on miss-configured servers, after editing their params to set proper values.
 
 
 ## [3.8.2] - 2022-12-17

CONTRIBUTING.md

@@ -6,7 +6,7 @@ You will also see how to ensure the code fulfills the expected code checks, and
 
 ## System dependencies
 
-The project can be run inside a docker container through provided `docker compose` configuration.
+The project can be run inside a docker container through provided docker-compose configuration.
 
 Because of this, the only actual dependencies are [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/install/).
 
@@ -14,13 +14,16 @@ Because of this, the only actual dependencies are [docker](https://docs.docker.c
 
 The first thing you need to do is fork the repository, and clone it in your local machine.
 
-Then simply run `docker compose up` and you will have the project exposed in port `3000` (http://localhost:3000).
+Then you will have to follow these steps:
 
-> The first time the container is created, the project dependencies will be installed and the container may take a bit longer to start.
+* Copy the file `docker-compose.override.yml.dist` by also removing the `dist` extension.
+* Start-up the project by running `docker-compose up`.
+
+Once this is finished, you will have the project exposed in port `3000` (http://localhost:3000).
 
 ## Project structure
 
-This project is a [react](https://react.dev/) & [redux](https://redux.js.org/) application, built with [typescript](https://www.typescriptlang.org/), which is distributed as a 100% client-side progressive web application.
+This project is a [react](https://reactjs.org/) & [redux](https://redux.js.org/) application, built with [typescript](https://www.typescriptlang.org/), which is distributed as a 100% client-side progressive web application.
 
 This is the basic project structure:
 
@@ -36,7 +39,7 @@ shlink-web-client
 ```
 
 * `config`: It contains some configuration scripts, used during testing, linting and building of the project.
-* `public`: Will act as the application document root once built, and contains some static assets (favicons, images, etc.).
+* `public`: Will act as the application document root once built, and contains some static assets (favicons, images, etc).
 * `scripts`: It has some of the CLI scripts used to run tests or building.
 * `src`: Contains the main source code of the application, including both web components, SASS stylesheets and files with logic.
 * `test`: Contains the project tests.
@@ -45,16 +48,20 @@ shlink-web-client
 
 > Note: The `indocker` shell script is a helper used to run commands inside the docker container.
 
-* `./indocker node --run lint`: Checks coding styles are fulfilled in JS/TS files.
-* `./indocker node --run lint:fix`: Fixes coding styles in JS/TS files.
-* `./indocker node --run test`: Runs unit tests with Jest.
+* `./indocker npm run lint`: Checks coding styles are fulfilled, both in JS/TS files as well as in stylesheets.
+* `./indocker npm run lint:js`: Checks coding styles are fulfilled in JS/TS files.
+* `./indocker npm run lint:css`: Checks coding styles are fulfilled in stylesheets.
+* `./indocker npm run lint:js:fix`: Fixes coding styles in JS/TS files.
+* `./indocker npm run lint:css:fix`: Fixes coding styles in stylesheets.
+* `./indocker npm run test`: Runs unit tests with Jest.
+* `./indocker npm run mutate`: Runs mutation tests with StrykerJS (this command can be very slow).
 
 ## Building the project
 
 The source code in this project cannot be run directly in a web browser, you need to build it first.
 
-* `./indocker node --run run build`: Builds the project for production using [vite](https://vite.dev/), generating the final static files. The content is placed in the `build` folder, which is automatically created if it does not exist.
-* `./indocker node --run run preview`: Serves the static files inside the `build` folder in a random port. Useful to test the content built with previous command.
+* `./indocker npm run build`: Builds the project using a combination of `webpack`, `babel` and `tsc`, generating the final static files. The content is placed in the `build` folder, which is automatically created if it does not exist.
+* `./indocker npm run serve:build`: Serves the static files inside the `build` folder in port 5000 (http://localhost:5000). Useful to test the content built with previous command.
 
 ## Pull request process
 

Dockerfile

@@ -1,22 +1,12 @@
-FROM node:25.6-alpine AS node
+FROM node:20.2-alpine as node
 COPY . /shlink-web-client
 ARG VERSION="latest"
-ENV VERSION=${VERSION}
-RUN cd /shlink-web-client && npm ci && node --run build
+ENV VERSION ${VERSION}
+RUN cd /shlink-web-client && npm ci --force && npm run build
 
-FROM nginxinc/nginx-unprivileged:1.29-alpine
-ARG UID=101
+FROM nginx:1.23-alpine
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
-
-USER root
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
 COPY config/docker/nginx.conf /etc/nginx/conf.d/default.conf
 COPY scripts/docker/servers_from_env.sh /docker-entrypoint.d/30-shlink-servers-json.sh
 COPY --from=node /shlink-web-client/build /usr/share/nginx/html
-
-# 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

README.md

@@ -5,9 +5,8 @@
 [![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=twitter&color=blue)](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)
-[![Bluesky](https://img.shields.io/badge/follow-shlinkio-0285FF.svg?style=flat-square&logo=bluesky&logoColor=white)](https://bsky.app/profile/shlink.io)
 [![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).
@@ -30,7 +29,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 8080.
+It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 80.
 
 ### Self-hosted
 
@@ -70,11 +69,11 @@ Those servers can be exported and imported in other browsers, but if for some re
 
 If you are using the shlink-web-client docker image, you can mount the `servers.json` file in a volume inside `/usr/share/nginx/html`, which is the app's document root inside the container.
 
-    docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
+    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
     
 Alternatively, you can mount a `conf.d` directory, which in turn contains the `servers.json` file, in a volume inside `/usr/share/nginx/html`. *(since shlink-web-client 3.2.0)*.
 
-    docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
+    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
     
 If you want to pre-configure a single server, you can provide its config via env vars. When the container starts up, it will build the `servers.json` file dynamically based on them. *(since shlink-web-client 3.2.0)*.
 
@@ -85,7 +84,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:8080 \
+        -p 8000:80 \
         -e SHLINK_SERVER_URL=https://s.test \
         -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
         shlinkio/shlink-web-client

config/docker/nginx.conf

@@ -1,5 +1,5 @@
 server {
-    listen 8080 default_server;
+    listen 80 default_server;
     charset utf-8;
     root /usr/share/nginx/html;
     index index.html;

config/test/setupTests.ts

@@ -1,9 +1,27 @@
-import '@testing-library/jest-dom/vitest';
+import 'vitest-canvas-mock';
+import 'chart.js/auto';
+import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+import matchers from '@testing-library/jest-dom/matchers';
 import { cleanup } from '@testing-library/react';
-import { afterEach } from 'vitest';
+import ResizeObserver from 'resize-observer-polyfill';
+import { afterEach, expect } from 'vitest';
+
+// Workaround for TypeScript error: https://github.com/testing-library/jest-dom/issues/439#issuecomment-1536524120
+declare module 'vitest' {
+  interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
+}
+
+// Extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers);
 
-// Clear all mocks and cleanup DOM after every test
 afterEach(() => {
+  // Clears all mocks after every test
   vi.clearAllMocks();
+  // Run a cleanup after each test case (e.g. clearing jsdom)
   cleanup();
 });
+
+(global as any).ResizeObserver = ResizeObserver;
+(global as any).scrollTo = () => {};
+(global as any).prompt = () => {};
+(global as any).matchMedia = (media: string) => ({ matches: false, media });

dev.Dockerfile

@@ -1,15 +0,0 @@
-FROM mcr.microsoft.com/playwright:v1.58.2-noble
-
-ENV NODE_VERSION 22.14
-ENV TINI_VERSION v0.19.0
-
-# Install Node.js
-RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash && \
-    \. "$HOME/.nvm/nvm.sh" && \
-    nvm install ${NODE_VERSION}
-
-# Install tini
-ADD https://github.com/krallin/tini/releases/download/${TINI_VERSION}/tini /sbin/tini
-RUN chmod +x /sbin/tini
-# Set tini as the entry point, as node does not properly handle signals
-ENTRYPOINT ["/sbin/tini", "--"]

dist/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

docker-compose.override.yml.dist

@@ -0,0 +1,9 @@
+version: '3'
+
+services:
+  shlink_web_client_node:
+    user: 1000:1000
+    volumes:
+      - /etc/passwd:/etc/passwd:ro
+      - /etc/group:/etc/group:ro
+      - ./home:/home/alejandro

docker-compose.yml

@@ -1,12 +1,10 @@
+version: '3'
+
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    user: 1000:1000 # With this, files created via `indocker` script will belong to the host user
-    build:
-      context: .
-      dockerfile: ./dev.Dockerfile
-    working_dir: /home/shlink/www
-    command: /bin/sh -c "npm install && npm run start"
+    image: node:20.2-alpine
+    command: /bin/sh -c "cd /home/shlink/www && npm install --force && npm run start"
     volumes:
       - ./:/home/shlink/www
     ports:

eslint.config.js

@@ -1,4 +0,0 @@
-import shlink from '@shlinkio/eslint-config-js-coding-standard';
-
-/* eslint-disable-next-line no-restricted-exports */
-export default shlink;

index.html

@@ -3,8 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta name="theme-color" content="#2078CF" media="(prefers-color-scheme: light)">
-    <meta name="theme-color" content="#0B2D4E" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#4696e5">
 
     <!--
       manifest.json provides metadata used when your web app is added to the
@@ -85,7 +84,7 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root" class="h-full"></div>
+    <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

indocker

@@ -2,7 +2,7 @@
 
 # Run docker container if it's not up yet
 if ! [[ $(docker ps | grep shlink_web_client_node) ]]; then
-    docker compose up -d
+    docker-compose up -d
 fi
 
 docker exec -it shlink_web_client_node /bin/sh -c "cd /home/shlink/www && $*"

manifest.ts

@@ -1,13 +1,10 @@
-import { BRAND_COLOR_LM } from '@shlinkio/shlink-frontend-kit';
-import type { ManifestOptions } from 'vite-plugin-pwa';
-
-export const manifest: Partial<ManifestOptions> = {
+export const manifest = {
   short_name: 'Shlink',
-  name: 'Shlink Web Client',
+  name: 'Shlink',
   start_url: '/',
   display: 'standalone',
-  theme_color: BRAND_COLOR_LM, // Toolbar color
-  background_color: BRAND_COLOR_LM, // Splash screen background color
+  theme_color: '#4696e5',
+  background_color: '#4696e5',
   icons: [
     {
       src: './icons/icon-16x16.png',

package.json

@@ -5,83 +5,98 @@
   "homepage": "",
   "repository": "https://github.com/shlinkio/shlink-web-client",
   "license": "MIT",
-  "type": "module",
   "scripts": {
-    "lint": "eslint src test config/test *.config.{js,ts}",
-    "lint:fix": "node --run lint -- --fix",
+    "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: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",
     "types": "tsc",
     "start": "vite serve --host=0.0.0.0",
     "preview": "vite preview --host=0.0.0.0",
-    "build": "node --run types && vite build && node scripts/replace-version.mjs",
-    "build:dist": "node --run build && node scripts/create-dist-file.mjs",
+    "build": "npm run types && vite build && node scripts/replace-version.mjs",
+    "build:dist": "npm run build && node scripts/create-dist-file.mjs",
     "test": "vitest run --run",
     "test:watch": "vitest --watch",
-    "test:ci": "node --run test -- --coverage",
-    "test:verbose": "node --run test -- --verbose"
+    "test:ci": "npm run test -- --coverage",
+    "test:verbose": "npm run test -- --verbose"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^7.2.0",
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-brands-svg-icons": "^7.2.0",
-    "@fortawesome/free-regular-svg-icons": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.2.0",
-    "@json2csv/plainjs": "^7.0.6",
-    "@reduxjs/toolkit": "^2.11.2",
-    "@shlinkio/data-manipulation": "^1.0.4",
-    "@shlinkio/shlink-frontend-kit": "^1.4.0",
-    "@shlinkio/shlink-js-sdk": "^3.1.0",
-    "@shlinkio/shlink-web-component": "^0.18.0",
-    "@vitest/browser-playwright": "^4.0.18",
+    "@fortawesome/fontawesome-free": "^6.3.0",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-brands-svg-icons": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@json2csv/plainjs": "^6.1.2",
+    "@reduxjs/toolkit": "^1.9.1",
+    "bootstrap": "^5.2.3",
     "bottlejs": "^2.0.1",
-    "clsx": "^2.1.1",
-    "compare-versions": "^6.1.1",
-    "csvtojson": "^2.0.14",
-    "date-fns": "^4.1.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-external-link": "^2.6.1",
-    "react-redux": "^9.2.0",
-    "react-router": "^7.13.0",
+    "bowser": "^2.11.0",
+    "chart.js": "^4.1.1",
+    "classnames": "^2.3.2",
+    "compare-versions": "^5.0.3",
+    "csvtojson": "^2.0.10",
+    "date-fns": "^2.29.3",
+    "event-source-polyfill": "^1.0.31",
+    "history": "^5.3.0",
+    "leaflet": "^1.9.3",
+    "qs": "^6.11.0",
+    "ramda": "^0.27.2",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.1.0",
+    "react-colorful": "^5.6.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-datepicker": "^4.8.0",
+    "react-dom": "^18.2.0",
+    "react-external-link": "^2.2.0",
+    "react-leaflet": "^4.2.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.6.1",
+    "react-swipeable": "^7.0.0",
+    "react-tag-autocomplete": "^6.3.0",
+    "reactstrap": "^9.1.5",
     "redux-localstorage-simple": "^2.5.1",
-    "workbox-core": "^7.4.0",
-    "workbox-expiration": "^7.4.0",
-    "workbox-precaching": "^7.4.0",
-    "workbox-routing": "^7.4.0",
-    "workbox-strategies": "^7.4.0"
+    "uuid": "^8.3.2",
+    "workbox-core": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4"
   },
   "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~3.7.0",
-    "@stylistic/eslint-plugin": "^5.7.1",
-    "@tailwindcss/vite": "^4.2.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@total-typescript/shoehorn": "^0.1.2",
-    "@types/node": "^25.3.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/browser": "^4.0.3",
-    "@vitest/coverage-v8": "^4.0.18",
-    "adm-zip": "^0.5.16",
-    "axe-core": "^4.11.1",
-    "chalk": "^5.6.2",
-    "eslint": "^9.39.2",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-714736e-20250131",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "history": "^5.3.0",
-    "playwright": "^1.58.2",
-    "tailwindcss": "^4.1.3",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
-    "vite": "^7.3.1",
-    "vite-plugin-pwa": "^1.2.0",
-    "vitest": "^4.0.3"
+    "@shlinkio/eslint-config-js-coding-standard": "~2.1.0",
+    "@shlinkio/stylelint-config-css-coding-standard": "~1.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@total-typescript/shoehorn": "^0.1.0",
+    "@types/json2csv": "^5.0.3",
+    "@types/leaflet": "^1.9.0",
+    "@types/qs": "^6.9.7",
+    "@types/ramda": "^0.28.15",
+    "@types/react": "^18.0.26",
+    "@types/react-color": "^3.0.6",
+    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-datepicker": "^4.8.0",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-tag-autocomplete": "^6.3.0",
+    "@types/uuid": "^8.3.4",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitest/coverage-v8": "^0.32.0",
+    "adm-zip": "^0.5.10",
+    "chalk": "^5.2.0",
+    "eslint": "^8.30.0",
+    "jsdom": "^22.0.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "sass": "^1.57.1",
+    "stylelint": "^15.10.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-pwa": "^0.14.4",
+    "vitest": "^0.32.0",
+    "vitest-canvas-mock": "^0.2.2"
   },
   "browserslist": [
     ">0.2%",

public/favicon.svg

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

scripts/create-dist-file.mjs

@@ -1,20 +1,23 @@
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
 import chalk from 'chalk';
 import AdmZip from 'adm-zip';
 import fs from 'fs';
 
 function zipDist(version) {
-  const fileBaseName = `shlink-web-client_${version}_dist`;
-  const versionFileName = `./dist/${fileBaseName}.zip`;
+  const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
 
   console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
   const zip = new AdmZip();
 
   try {
     if (fs.existsSync(versionFileName)) {
-      fs.unlinkSync(versionFileName);
+      fs.unlink(versionFileName);
     }
 
-    zip.addLocalFolder('./build', fileBaseName);
+    zip.addLocalFolder('./build', `shlink-web-client_${version}_dist`);
     zip.writeZip(versionFileName);
     console.log(chalk.green('Dist file properly generated'));
   } catch (e) {

scripts/docker/servers_from_env.sh

@@ -4,14 +4,11 @@ set -e
 
 ME=$(basename $0)
 
-# In order to allow people to pre-configure a server in their shlink-web-client instance via env vars, this function
-# dumps a servers.json file based on the values provided via env vars
 setup_single_shlink_server() {
   [ -n "$SHLINK_SERVER_URL" ] || return 0
   [ -n "$SHLINK_SERVER_API_KEY" ] || return 0
   local name="${SHLINK_SERVER_NAME:-Shlink}"
-  local forwardCredentials="${SHLINK_SERVER_FORWARD_CREDENTIALS:-false}"
-  echo "[{\"name\":\"${name}\",\"url\":\"${SHLINK_SERVER_URL}\",\"apiKey\":\"${SHLINK_SERVER_API_KEY}\",\"forwardCredentials\":${forwardCredentials}}]" > /usr/share/nginx/html/servers.json
+  echo "[{\"name\":\"${name}\",\"url\":\"${SHLINK_SERVER_URL}\",\"apiKey\":\"${SHLINK_SERVER_API_KEY}\"}]" > /usr/share/nginx/html/servers.json
 }
 
 setup_single_shlink_server

shlink-web-client.d.ts

@@ -1,3 +1,13 @@
+// eslint-disable-next-line max-classes-per-file
+declare module 'event-source-polyfill' {
+  declare class EventSourcePolyfill {
+    public onmessage?: ({ data }: { data: string }) => void;
+    public onerror?: ({ status }: { status: number }) => void;
+    public close: () => void;
+    public constructor(hubUrl: URL, options?: any);
+  }
+}
+
 declare module '@json2csv/plainjs' {
   export class Parser {
     parse: <T>(data: T[]) => string;

src/api/ShlinkApiError.tsx

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

src/api/services/ShlinkApiClient.ts

@@ -0,0 +1,149 @@
+import { isEmpty, isNil, reject } from 'ramda';
+import type { HttpClient } from '../../common/services/HttpClient';
+import type { ShortUrl, ShortUrlData } from '../../short-urls/data';
+import { orderToString } from '../../utils/helpers/ordering';
+import { stringifyQuery } from '../../utils/helpers/query';
+import type { OptionalString } from '../../utils/utils';
+import type {
+  ShlinkDomainRedirects,
+  ShlinkDomainsResponse,
+  ShlinkEditDomainRedirects,
+  ShlinkHealth,
+  ShlinkMercureInfo,
+  ShlinkShortUrlData,
+  ShlinkShortUrlsListNormalizedParams,
+  ShlinkShortUrlsListParams,
+  ShlinkShortUrlsResponse,
+  ShlinkTags,
+  ShlinkTagsResponse,
+  ShlinkTagsStatsResponse,
+  ShlinkVisits,
+  ShlinkVisitsOverview,
+  ShlinkVisitsParams,
+} from '../types';
+import { isRegularNotFound, parseApiError } from '../utils';
+
+const buildShlinkBaseUrl = (url: string, version: 2 | 3) => `${url}/rest/v${version}`;
+const rejectNilProps = reject(isNil);
+const normalizeListParams = (
+  { orderBy = {}, excludeMaxVisitsReached, excludePastValidUntil, ...rest }: ShlinkShortUrlsListParams,
+): ShlinkShortUrlsListNormalizedParams => ({
+  ...rest,
+  excludeMaxVisitsReached: excludeMaxVisitsReached === true ? 'true' : undefined,
+  excludePastValidUntil: excludePastValidUntil === true ? 'true' : undefined,
+  orderBy: orderToString(orderBy),
+});
+
+export class ShlinkApiClient {
+  private apiVersion: 2 | 3;
+
+  public constructor(
+    private readonly httpClient: HttpClient,
+    private readonly baseUrl: string,
+    private readonly apiKey: string,
+  ) {
+    this.apiVersion = 3;
+  }
+
+  public readonly listShortUrls = async (params: ShlinkShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
+    this.performRequest<{ shortUrls: ShlinkShortUrlsResponse }>('/short-urls', 'GET', normalizeListParams(params))
+      .then(({ shortUrls }) => shortUrls);
+
+  public readonly createShortUrl = async (options: ShortUrlData): Promise<ShortUrl> => {
+    const filteredOptions = reject((value) => isEmpty(value) || isNil(value), options as any);
+    return this.performRequest<ShortUrl>('/short-urls', 'POST', {}, filteredOptions);
+  };
+
+  public readonly getShortUrlVisits = async (shortCode: string, query?: ShlinkVisitsParams): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>(`/short-urls/${shortCode}/visits`, 'GET', query)
+      .then(({ visits }) => visits);
+
+  public readonly getTagVisits = async (tag: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>(`/tags/${tag}/visits`, 'GET', query).then(({ visits }) => visits);
+
+  public readonly getDomainVisits = async (domain: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>(`/domains/${domain}/visits`, 'GET', query).then(({ visits }) => visits);
+
+  public readonly getOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>('/visits/orphan', 'GET', query).then(({ visits }) => visits);
+
+  public readonly getNonOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
+    this.performRequest<{ visits: ShlinkVisits }>('/visits/non-orphan', 'GET', query).then(({ visits }) => visits);
+
+  public readonly getVisitsOverview = async (): Promise<ShlinkVisitsOverview> =>
+    this.performRequest<{ visits: ShlinkVisitsOverview }>('/visits').then(({ visits }) => visits);
+
+  public readonly getShortUrl = async (shortCode: string, domain?: OptionalString): Promise<ShortUrl> =>
+    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'GET', { domain });
+
+  public readonly deleteShortUrl = async (shortCode: string, domain?: OptionalString): Promise<void> =>
+    this.performEmptyRequest(`/short-urls/${shortCode}`, 'DELETE', { domain });
+
+  public readonly updateShortUrl = async (
+    shortCode: string,
+    domain: OptionalString,
+    edit: ShlinkShortUrlData,
+  ): Promise<ShortUrl> =>
+    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'PATCH', { domain }, edit);
+
+  public readonly listTags = async (): Promise<ShlinkTags> =>
+    this.performRequest<{ tags: ShlinkTagsResponse }>('/tags', 'GET', { withStats: 'true' })
+      .then(({ tags }) => tags)
+      .then(({ data, stats }) => ({ tags: data, stats }));
+
+  public readonly tagsStats = async (): Promise<ShlinkTags> =>
+    this.performRequest<{ tags: ShlinkTagsStatsResponse }>('/tags/stats', 'GET')
+      .then(({ tags }) => tags)
+      .then(({ data }) => ({ tags: data.map(({ tag }) => tag), stats: data }));
+
+  public readonly deleteTags = async (tags: string[]): Promise<{ tags: string[] }> =>
+    this.performEmptyRequest('/tags', 'DELETE', { tags }).then(() => ({ tags }));
+
+  public readonly editTag = async (oldName: string, newName: string): Promise<{ oldName: string; newName: string }> =>
+    this.performEmptyRequest('/tags', 'PUT', {}, { oldName, newName }).then(() => ({ oldName, newName }));
+
+  public readonly health = async (): Promise<ShlinkHealth> => this.performRequest<ShlinkHealth>('/health', 'GET');
+
+  public readonly mercureInfo = async (): Promise<ShlinkMercureInfo> =>
+    this.performRequest<ShlinkMercureInfo>('/mercure-info', 'GET');
+
+  public readonly listDomains = async (): Promise<ShlinkDomainsResponse> =>
+    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains').then(({ domains }) => domains);
+
+  public readonly editDomainRedirects = async (
+    domainRedirects: ShlinkEditDomainRedirects,
+  ): Promise<ShlinkDomainRedirects> =>
+    this.performRequest<ShlinkDomainRedirects>('/domains/redirects', 'PATCH', {}, domainRedirects);
+
+  private readonly performRequest = async <T>(url: string, method = 'GET', query = {}, body?: object): Promise<T> =>
+    this.httpClient.fetchJson<T>(...this.toFetchParams(url, method, query, body)).catch(
+      this.handleFetchError(() => this.httpClient.fetchJson<T>(...this.toFetchParams(url, method, query, body))),
+    );
+
+  private readonly performEmptyRequest = async (url: string, method = 'GET', query = {}, body?: object): Promise<void> =>
+    this.httpClient.fetchEmpty(...this.toFetchParams(url, method, query, body)).catch(
+      this.handleFetchError(() => this.httpClient.fetchEmpty(...this.toFetchParams(url, method, query, body))),
+    );
+
+  private readonly toFetchParams = (url: string, method: string, query = {}, body?: object): [string, RequestInit] => {
+    const normalizedQuery = stringifyQuery(rejectNilProps(query));
+    const stringifiedQuery = isEmpty(normalizedQuery) ? '' : `?${normalizedQuery}`;
+
+    return [`${buildShlinkBaseUrl(this.baseUrl, this.apiVersion)}${url}${stringifiedQuery}`, {
+      method,
+      body: body && JSON.stringify(body),
+      headers: { 'X-Api-Key': this.apiKey },
+    }];
+  };
+
+  private readonly handleFetchError = (retryFetch: Function) => (e: unknown) => {
+    if (!isRegularNotFound(parseApiError(e))) {
+      throw e;
+    }
+
+    // If we capture a not found error, let's assume this Shlink version does not support API v3, so we decrease to
+    // v2 and retry
+    this.apiVersion = 2;
+    return retryFetch();
+  };
+}

src/api/services/ShlinkApiClientBuilder.ts

@@ -1,11 +1,13 @@
-import type { HttpClient } from '@shlinkio/shlink-js-sdk';
-import { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
+import type { HttpClient } from '../../common/services/HttpClient';
+import type { GetState } from '../../container/types';
 import type { ServerWithId } from '../../servers/data';
 import { hasServerData } from '../../servers/data';
-import type { GetState } from '../../store';
+import { ShlinkApiClient } from './ShlinkApiClient';
 
-const apiClients: Map<string, ShlinkApiClient> = new Map();
+const apiClients: Record<string, ShlinkApiClient> = {};
 
+const isGetState = (getStateOrSelectedServer: GetState | ServerWithId): getStateOrSelectedServer is GetState =>
+  typeof getStateOrSelectedServer === 'function';
 const getSelectedServerFromState = (getState: GetState): ServerWithId => {
   const { selectedServer } = getState();
   if (!hasServerData(selectedServer)) {
@@ -16,24 +18,16 @@ const getSelectedServerFromState = (getState: GetState): ServerWithId => {
 };
 
 export const buildShlinkApiClient = (httpClient: HttpClient) => (getStateOrSelectedServer: GetState | ServerWithId) => {
-  const { url: baseUrl, apiKey, forwardCredentials } = typeof getStateOrSelectedServer === 'function'
+  const { url, apiKey } = isGetState(getStateOrSelectedServer)
     ? getSelectedServerFromState(getStateOrSelectedServer)
     : getStateOrSelectedServer;
-  const serverKey = `${apiKey}_${baseUrl}_${forwardCredentials ? 'forward' : 'no-forward'}`;
-  const existingApiClient = apiClients.get(serverKey);
+  const clientKey = `${url}_${apiKey}`;
 
-  if (existingApiClient) {
-    return existingApiClient;
+  if (!apiClients[clientKey]) {
+    apiClients[clientKey] = new ShlinkApiClient(httpClient, url, apiKey);
   }
 
-  const apiClient = new ShlinkApiClient(
-    httpClient,
-    { apiKey, baseUrl },
-    { requestCredentials: forwardCredentials ? 'include' : undefined },
-  );
-  apiClients.set(serverKey, apiClient);
-
-  return apiClient;
+  return apiClients[clientKey];
 };
 
 export type ShlinkApiClientBuilder = ReturnType<typeof buildShlinkApiClient>;

src/api/services/provideServices.ts

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

src/api/types/errors.ts

@@ -0,0 +1,54 @@
+export enum ErrorTypeV2 {
+  INVALID_ARGUMENT = 'INVALID_ARGUMENT',
+  INVALID_SHORT_URL_DELETION = 'INVALID_SHORT_URL_DELETION',
+  DOMAIN_NOT_FOUND = 'DOMAIN_NOT_FOUND',
+  FORBIDDEN_OPERATION = 'FORBIDDEN_OPERATION',
+  INVALID_URL = 'INVALID_URL',
+  INVALID_SLUG = 'INVALID_SLUG',
+  INVALID_SHORTCODE = 'INVALID_SHORTCODE',
+  TAG_CONFLICT = 'TAG_CONFLICT',
+  TAG_NOT_FOUND = 'TAG_NOT_FOUND',
+  MERCURE_NOT_CONFIGURED = 'MERCURE_NOT_CONFIGURED',
+  INVALID_AUTHORIZATION = 'INVALID_AUTHORIZATION',
+  INVALID_API_KEY = 'INVALID_API_KEY',
+  NOT_FOUND = 'NOT_FOUND',
+}
+
+export enum ErrorTypeV3 {
+  INVALID_ARGUMENT = 'https://shlink.io/api/error/invalid-data',
+  INVALID_SHORT_URL_DELETION = 'https://shlink.io/api/error/invalid-short-url-deletion',
+  DOMAIN_NOT_FOUND = 'https://shlink.io/api/error/domain-not-found',
+  FORBIDDEN_OPERATION = 'https://shlink.io/api/error/forbidden-tag-operation',
+  INVALID_URL = 'https://shlink.io/api/error/invalid-url',
+  INVALID_SLUG = 'https://shlink.io/api/error/non-unique-slug',
+  INVALID_SHORTCODE = 'https://shlink.io/api/error/short-url-not-found',
+  TAG_CONFLICT = 'https://shlink.io/api/error/tag-conflict',
+  TAG_NOT_FOUND = 'https://shlink.io/api/error/tag-not-found',
+  MERCURE_NOT_CONFIGURED = 'https://shlink.io/api/error/mercure-not-configured',
+  INVALID_AUTHORIZATION = 'https://shlink.io/api/error/missing-authentication',
+  INVALID_API_KEY = 'https://shlink.io/api/error/invalid-api-key',
+  NOT_FOUND = 'https://shlink.io/api/error/not-found',
+}
+
+export interface ProblemDetailsError {
+  type: string;
+  detail: string;
+  title: string;
+  status: number;
+  [extraProps: string]: any;
+}
+
+export interface InvalidArgumentError extends ProblemDetailsError {
+  type: ErrorTypeV2.INVALID_ARGUMENT | ErrorTypeV3.INVALID_ARGUMENT;
+  invalidElements: string[];
+}
+
+export interface InvalidShortUrlDeletion extends ProblemDetailsError {
+  type: 'INVALID_SHORTCODE_DELETION' | ErrorTypeV2.INVALID_SHORT_URL_DELETION | ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+  threshold: number;
+}
+
+export interface RegularNotFound extends ProblemDetailsError {
+  type: ErrorTypeV2.NOT_FOUND | ErrorTypeV3.NOT_FOUND;
+  status: 404;
+}

src/api/types/index.ts

@@ -0,0 +1,133 @@
+import type { ShortUrl, ShortUrlMeta } from '../../short-urls/data';
+import type { Order } from '../../utils/helpers/ordering';
+import type { OptionalString } from '../../utils/utils';
+import type { Visit } from '../../visits/types';
+
+export interface ShlinkShortUrlsResponse {
+  data: ShortUrl[];
+  pagination: ShlinkPaginator;
+}
+
+export interface ShlinkMercureInfo {
+  token: string;
+  mercureHubUrl: string;
+}
+
+export interface ShlinkHealth {
+  status: 'pass' | 'fail';
+  version: string;
+}
+
+export interface ShlinkTagsStats {
+  tag: string;
+  shortUrlsCount: number;
+  visitsSummary?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
+
+  /** @deprecated */
+  visitsCount: number;
+}
+
+export interface ShlinkTags {
+  tags: string[];
+  stats: ShlinkTagsStats[];
+}
+
+export interface ShlinkTagsResponse {
+  data: string[];
+  /** @deprecated Present only when withStats=true is provided, which is deprecated */
+  stats: ShlinkTagsStats[];
+}
+
+export interface ShlinkTagsStatsResponse {
+  data: ShlinkTagsStats[];
+}
+
+export interface ShlinkPaginator {
+  currentPage: number;
+  pagesCount: number;
+  totalItems: number;
+}
+
+export interface ShlinkVisitsSummary {
+  total: number;
+  nonBots: number;
+  bots: number;
+}
+
+export interface ShlinkVisits {
+  data: Visit[];
+  pagination: ShlinkPaginator;
+}
+
+export interface ShlinkVisitsOverview {
+  nonOrphanVisits?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
+  orphanVisits?: ShlinkVisitsSummary; // Optional only before Shlink 3.5.0
+
+  /** @deprecated */
+  visitsCount: number;
+  /** @deprecated */
+  orphanVisitsCount: number;
+}
+
+export interface ShlinkVisitsParams {
+  domain?: OptionalString;
+  page?: number;
+  itemsPerPage?: number;
+  startDate?: string;
+  endDate?: string;
+  excludeBots?: boolean;
+}
+
+export interface ShlinkShortUrlData extends ShortUrlMeta {
+  longUrl?: string;
+  title?: string;
+  validateUrl?: boolean;
+  tags?: string[];
+}
+
+export interface ShlinkDomainRedirects {
+  baseUrlRedirect: string | null;
+  regular404Redirect: string | null;
+  invalidShortUrlRedirect: string | null;
+}
+
+export interface ShlinkEditDomainRedirects extends Partial<ShlinkDomainRedirects> {
+  domain: string;
+}
+
+export interface ShlinkDomain {
+  domain: string;
+  isDefault: boolean;
+  redirects?: ShlinkDomainRedirects; // Optional only for Shlink older than 2.8
+}
+
+export interface ShlinkDomainsResponse {
+  data: ShlinkDomain[];
+  defaultRedirects?: ShlinkDomainRedirects; // Optional only for Shlink older than 2.10
+}
+
+export type TagsFilteringMode = 'all' | 'any';
+
+type ShlinkShortUrlsOrderableFields = 'dateCreated' | 'shortCode' | 'longUrl' | 'title' | 'visits' | 'nonBotVisits';
+
+export type ShlinkShortUrlsOrder = Order<ShlinkShortUrlsOrderableFields>;
+
+export interface ShlinkShortUrlsListParams {
+  page?: string;
+  itemsPerPage?: number;
+  searchTerm?: string;
+  tags?: string[];
+  tagsMode?: TagsFilteringMode;
+  orderBy?: ShlinkShortUrlsOrder;
+  startDate?: string;
+  endDate?: string;
+  excludeMaxVisitsReached?: boolean;
+  excludePastValidUntil?: boolean;
+}
+
+export interface ShlinkShortUrlsListNormalizedParams extends
+  Omit<ShlinkShortUrlsListParams, 'orderBy' | 'excludeMaxVisitsReached' | 'excludePastValidUntil'> {
+  orderBy?: string;
+  excludeMaxVisitsReached?: 'true';
+  excludePastValidUntil?: 'true';
+}

src/api/utils/index.ts

@@ -0,0 +1,25 @@
+import type {
+  InvalidArgumentError,
+  InvalidShortUrlDeletion,
+  ProblemDetailsError,
+  RegularNotFound } from '../types/errors';
+import {
+  ErrorTypeV2,
+  ErrorTypeV3,
+} from '../types/errors';
+
+const isProblemDetails = (e: unknown): e is ProblemDetailsError =>
+  !!e && typeof e === 'object' && ['type', 'detail', 'title', 'status'].every((prop) => prop in e);
+
+export const parseApiError = (e: unknown): ProblemDetailsError | undefined => (isProblemDetails(e) ? e : undefined);
+
+export const isInvalidArgumentError = (error?: ProblemDetailsError): error is InvalidArgumentError =>
+  error?.type === ErrorTypeV2.INVALID_ARGUMENT || error?.type === ErrorTypeV3.INVALID_ARGUMENT;
+
+export const isInvalidDeletionError = (error?: ProblemDetailsError): error is InvalidShortUrlDeletion =>
+  error?.type === 'INVALID_SHORTCODE_DELETION'
+  || error?.type === ErrorTypeV2.INVALID_SHORT_URL_DELETION
+  || error?.type === ErrorTypeV3.INVALID_SHORT_URL_DELETION;
+
+export const isRegularNotFound = (error?: ProblemDetailsError): error is RegularNotFound =>
+  (error?.type === ErrorTypeV2.NOT_FOUND || error?.type === ErrorTypeV3.NOT_FOUND) && error?.status === 404;

src/app/App.scss

@@ -0,0 +1,26 @@
+@import '../utils/base';
+
+.app-container {
+  height: 100%;
+}
+
+.app {
+  padding-top: $headerHeight;
+  height: 100%;
+}
+
+.shlink-wrapper {
+  min-height: 100%;
+  padding-bottom: $footer-height + $footer-margin;
+  margin-bottom: -($footer-height + $footer-margin);
+}
+
+.shlink-footer {
+  height: $footer-height;
+  margin-top: $footer-margin;
+  padding: 0;
+
+  @media (min-width: $mdMin) {
+    padding: 0 15px;
+  }
+}

src/app/App.tsx

@@ -1,71 +1,68 @@
-import { changeThemeInMarkup, getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
-import { clsx } from 'clsx';
+import classNames from 'classnames';
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import { Route, Routes, useLocation } from 'react-router';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
-import { Home } from '../common/Home';
-import { MainHeader } from '../common/MainHeader';
 import { NotFound } from '../common/NotFound';
-import { ShlinkVersionsContainer } from '../common/ShlinkVersionsContainer';
-import { ShlinkWebComponentContainer } from '../common/ShlinkWebComponentContainer';
-import { CreateServer } from '../servers/CreateServer';
-import { EditServer } from '../servers/EditServer';
-import { ManageServers } from '../servers/ManageServers';
-import { useLoadRemoteServers } from '../servers/reducers/remoteServers';
-import { useSettings } from '../settings/reducers/settings';
-import { Settings } from '../settings/Settings';
+import type { ServersMap } from '../servers/data';
+import type { Settings } from '../settings/reducers/settings';
 import { forceUpdate } from '../utils/helpers/sw';
-import { useAppUpdated } from './reducers/appUpdates';
+import { changeThemeInMarkup } from '../utils/theme';
+import './App.scss';
 
-export const App: FC = () => {
-  const { appUpdated, resetAppUpdate } = useAppUpdated();
-
-  useLoadRemoteServers();
+interface AppProps {
+  fetchServers: () => void;
+  servers: ServersMap;
+  settings: Settings;
+  resetAppUpdate: () => void;
+  appUpdated: boolean;
+}
 
+export const App = (
+  MainHeader: FC,
+  Home: FC,
+  MenuLayout: FC,
+  CreateServer: FC,
+  EditServer: FC,
+  SettingsComp: FC,
+  ManageServers: FC,
+  ShlinkVersionsContainer: FC,
+) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => {
   const location = useLocation();
   const isHome = location.pathname === '/';
 
-  const { settings } = useSettings();
   useEffect(() => {
-    changeThemeInMarkup(settings.ui?.theme ?? getSystemPreferredTheme());
-  }, [settings.ui?.theme]);
+    // On first load, try to fetch the remote servers if the list is empty
+    if (Object.keys(servers).length === 0) {
+      fetchServers();
+    }
+
+    changeThemeInMarkup(settings.ui?.theme ?? 'light');
+  }, []);
 
   return (
-    <div className="h-full">
-      <>
-        <MainHeader />
+    <div className="container-fluid app-container">
+      <MainHeader />
 
-        <div className="h-full pt-(--header-height)">
-          <div
-            data-testid="shlink-wrapper"
-            className={clsx(
-              'min-h-full pb-[calc(var(--footer-height)+var(--footer-margin))] -mb-[calc(var(--footer-height)+var(--footer-margin))]',
-              { 'flex items-center pt-4': isHome },
-            )}
-          >
-            <Routes>
-              <Route index element={<Home />} />
-              <Route path="/settings">
-                {['', '*'].map((path) => <Route key={path} path={path} element={<Settings />} />)}
-              </Route>
-              <Route path="/manage-servers" element={<ManageServers />} />
-              <Route path="/server/create" element={<CreateServer />} />
-              <Route path="/server/:serverId/edit" element={<EditServer />} />
-              <Route path="/server/:serverId">
-                {['', '*'].map((path) => <Route key={path} path={path} element={<ShlinkWebComponentContainer />} />)}
-              </Route>
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-          </div>
-
-          <div className="h-(--footer-height) mt-(--footer-margin) md:px-4">
-            <ShlinkVersionsContainer />
-          </div>
+      <div className="app">
+        <div className={classNames('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
+          <Routes>
+            <Route index element={<Home />} />
+            <Route path="/settings/*" element={<SettingsComp />} />
+            <Route path="/manage-servers" element={<ManageServers />} />
+            <Route path="/server/create" element={<CreateServer />} />
+            <Route path="/server/:serverId/edit" element={<EditServer />} />
+            <Route path="/server/:serverId/*" element={<MenuLayout />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
         </div>
-      </>
 
-      <AppUpdateBanner isOpen={appUpdated} onClose={resetAppUpdate} forceUpdate={forceUpdate} />
+        <div className="shlink-footer">
+          <ShlinkVersionsContainer />
+        </div>
+      </div>
+
+      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} />
     </div>
   );
 };

src/app/reducers/appUpdates.ts

@@ -1,6 +1,4 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { useCallback } from 'react';
-import { useAppDispatch, useAppSelector } from '../../store';
 
 const { actions, reducer } = createSlice({
   name: 'shlink/appUpdates',
@@ -14,12 +12,3 @@ const { actions, reducer } = createSlice({
 export const { appUpdateAvailable, resetAppUpdate } = actions;
 
 export const appUpdatesReducer = reducer;
-
-export const useAppUpdated = () => {
-  const dispatch = useAppDispatch();
-  const appUpdateAvailable = useCallback(() => dispatch(actions.appUpdateAvailable()), [dispatch]);
-  const resetAppUpdate = useCallback(() => dispatch(actions.resetAppUpdate()), [dispatch]);
-  const appUpdated = useAppSelector((state) => state.appUpdated);
-
-  return { appUpdated, appUpdateAvailable, resetAppUpdate };
-};

src/app/services/provideServices.ts

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

src/common/AppUpdateBanner.scss

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

src/common/AppUpdateBanner.tsx

@@ -1,46 +1,34 @@
 import { faSyncAlt as reloadIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Card, CloseButton,useToggle  } from '@shlinkio/shlink-frontend-kit';
-import { clsx } from 'clsx';
-import type { FC } from 'react';
-import { useCallback } from 'react';
+import type { FC, MouseEventHandler } from 'react';
+import { Alert, Button } from 'reactstrap';
+import { useToggle } from '../utils/helpers/hooks';
+import { SimpleCard } from '../utils/SimpleCard';
+import './AppUpdateBanner.scss';
 
 interface AppUpdateBannerProps {
   isOpen: boolean;
-  onClose: () => void;
-  forceUpdate: () => void;
+  toggle: MouseEventHandler<any>;
+  forceUpdate: Function;
 }
 
-export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, forceUpdate }) => {
-  const { flag: isUpdating, setToTrue: setUpdating } = useToggle();
-  const update = useCallback(() => {
+export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forceUpdate }) => {
+  const [isUpdating,, setUpdating] = useToggle();
+  const update = () => {
     setUpdating();
     forceUpdate();
-  }, [forceUpdate, setUpdating]);
-
-  if (!isOpen) {
-    return null;
-  }
+  };
 
   return (
-    <Card
-      role="alert"
-      className={clsx(
-        'w-[700px] max-w-[calc(100%-30px)]',
-        'fixed top-[35px] left-[50%] translate-x-[-50%] z-[1040]',
-      )}
-    >
-      <Card.Header className="flex items-center justify-between">
-        <h5>This app has just been updated!</h5>
-        <CloseButton onClick={onClose} />
-      </Card.Header>
-      <Card.Body className="flex gap-4 items-center justify-between max-md:flex-col">
+    <Alert className="app-update-banner" isOpen={isOpen} toggle={toggle} tag={SimpleCard} color="secondary">
+      <h4 className="mb-4">This app has just been updated!</h4>
+      <p className="mb-0">
         Restart it to enjoy the new features.
-        <Button disabled={isUpdating} variant="secondary" solid onClick={update}>
-          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} /></>}
+        <Button role="button" disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
+          {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
           {isUpdating && <>Restarting...</>}
         </Button>
-      </Card.Body>
-    </Card>
+      </p>
+    </Alert>
   );
 };

src/common/AsideMenu.scss

@@ -0,0 +1,81 @@
+@import '../utils/base';
+@import '../utils/mixins/vertical-align';
+
+.aside-menu {
+  width: $asideMenuWidth;
+  background-color: var(--primary-color);
+  box-shadow: rgb(0 0 0 / .05) 0 8px 15px;
+  position: fixed !important;
+  padding-top: 13px;
+  padding-bottom: 10px;
+  top: $headerHeight;
+  bottom: 0;
+  left: 0;
+  display: block;
+  z-index: 1010;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 15px 15px;
+  }
+
+  @media (max-width: $smMax) {
+    transition: left 300ms;
+    top: $headerHeight - 3px;
+    box-shadow: -10px 0 50px 11px rgb(0 0 0 / .55);
+  }
+}
+
+.aside-menu--hidden {
+  @media (max-width: $smMax) {
+    left: -($asideMenuWidth + 35px);
+  }
+}
+
+.aside-menu__nav {
+  height: 100%;
+}
+
+.aside-menu__item {
+  padding: 10px 20px;
+  margin: 0 -15px;
+  text-decoration: none !important;
+  cursor: pointer;
+
+  @media (max-width: $smMax) {
+    margin: 0;
+  }
+}
+
+.aside-menu__item:hover {
+  background-color: var(--secondary-color);
+}
+
+.aside-menu__item--selected,
+.aside-menu__item--selected:hover {
+  color: #ffffff;
+  background-color: var(--brand-color);
+}
+
+.aside-menu__item--divider {
+  border-bottom: 1px solid #eeeeee;
+  margin: 20px 0;
+}
+
+.aside-menu__item--danger {
+  color: $dangerColor;
+}
+
+.aside-menu__item--push {
+  margin-top: auto;
+}
+
+.aside-menu__item--danger:hover {
+  color: #ffffff;
+  background-color: $dangerColor;
+}
+
+.aside-menu__item-text {
+  margin-left: 8px;
+}

src/common/AsideMenu.tsx

@@ -0,0 +1,90 @@
+import {
+  faGlobe as domainsIcon,
+  faHome as overviewIcon,
+  faLink as createIcon,
+  faList as listIcon,
+  faPen as editIcon,
+  faTags as tagsIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import type { NavLinkProps } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
+import type { SelectedServer } from '../servers/data';
+import { isServerWithId } from '../servers/data';
+import type { DeleteServerButtonProps } from '../servers/DeleteServerButton';
+import './AsideMenu.scss';
+
+export interface AsideMenuProps {
+  selectedServer: SelectedServer;
+  showOnMobile?: boolean;
+}
+
+interface AsideMenuItemProps extends NavLinkProps {
+  to: string;
+  className?: string;
+}
+
+const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
+  <NavLink
+    className={({ isActive }) => classNames('aside-menu__item', className, { 'aside-menu__item--selected': isActive })}
+    to={to}
+    {...rest}
+  >
+    {children}
+  </NavLink>
+);
+
+export const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
+  { selectedServer, showOnMobile = false }: AsideMenuProps,
+) => {
+  const hasId = isServerWithId(selectedServer);
+  const serverId = hasId ? selectedServer.id : '';
+  const { pathname } = useLocation();
+  const asideClass = classNames('aside-menu', {
+    'aside-menu--hidden': !showOnMobile,
+  });
+  const buildPath = (suffix: string) => `/server/${serverId}${suffix}`;
+
+  return (
+    <aside className={asideClass}>
+      <nav className="nav flex-column aside-menu__nav">
+        <AsideMenuItem to={buildPath('/overview')}>
+          <FontAwesomeIcon fixedWidth icon={overviewIcon} />
+          <span className="aside-menu__item-text">Overview</span>
+        </AsideMenuItem>
+        <AsideMenuItem
+          to={buildPath('/list-short-urls/1')}
+          className={classNames({ 'aside-menu__item--selected': pathname.match('/list-short-urls') !== null })}
+        >
+          <FontAwesomeIcon fixedWidth icon={listIcon} />
+          <span className="aside-menu__item-text">List short URLs</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/create-short-url')}>
+          <FontAwesomeIcon fixedWidth icon={createIcon} flip="horizontal" />
+          <span className="aside-menu__item-text">Create short URL</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/manage-tags')}>
+          <FontAwesomeIcon fixedWidth icon={tagsIcon} />
+          <span className="aside-menu__item-text">Manage tags</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/manage-domains')}>
+          <FontAwesomeIcon fixedWidth icon={domainsIcon} />
+          <span className="aside-menu__item-text">Manage domains</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/edit')} className="aside-menu__item--push">
+          <FontAwesomeIcon fixedWidth icon={editIcon} />
+          <span className="aside-menu__item-text">Edit this server</span>
+        </AsideMenuItem>
+        {hasId && (
+          <DeleteServerButton
+            className="aside-menu__item aside-menu__item--danger"
+            textClassName="aside-menu__item-text"
+            server={selectedServer}
+          />
+        )}
+      </nav>
+    </aside>
+  );
+};

src/common/ErrorHandler.tsx

@@ -1,19 +1,17 @@
-import { Button } from '@shlinkio/shlink-frontend-kit';
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Component } from 'react';
-import { ErrorLayout } from './ErrorLayout';
+import { Button } from 'reactstrap';
+import { SimpleCard } from '../utils/SimpleCard';
 
-type ErrorHandlerProps = PropsWithChildren<{
-  location?: typeof window.location;
-  console?: typeof window.console;
-}>;
-
-type ErrorHandlerState = {
+interface ErrorHandlerState {
   hasError: boolean;
-};
+}
 
-export class ErrorHandler extends Component<ErrorHandlerProps, ErrorHandlerState> {
-  public constructor(props: ErrorHandlerProps) {
+export const ErrorHandler = (
+  { location }: Window,
+  { error }: Console,
+) => class extends Component<any, ErrorHandlerState> {
+  public constructor(props: object) {
     super(props);
     this.state = { hasError: false };
   }
@@ -23,25 +21,27 @@ export class ErrorHandler extends Component<ErrorHandlerProps, ErrorHandlerState
   }
 
   public componentDidCatch(e: Error): void {
-    const { console = globalThis.console } = this.props;
-    console.error(e);
+    if (process.env.NODE_ENV !== 'development') {
+      error(e);
+    }
   }
 
   public render(): ReactNode {
     const { hasError } = this.state;
-    const { location = globalThis.location } = this.props;
-
     if (hasError) {
       return (
-        <ErrorLayout title="Oops! This is awkward :S">
-          <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
-          <br />
-          <Button size="lg" onClick={() => location.reload()}>Take me back</Button>
-        </ErrorLayout>
+        <div className="home">
+          <SimpleCard className="p-4">
+            <h1>Oops! This is awkward :S</h1>
+            <p>It seems that something went wrong. Try refreshing the page or just click this button.</p>
+            <br />
+            <Button outline color="primary" onClick={() => location.reload()}>Take me back</Button>
+          </SimpleCard>
+        </div>
       );
     }
 
     const { children } = this.props;
     return children;
   }
-}
+};

src/common/ErrorLayout.tsx

@@ -1,15 +0,0 @@
-import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
-import type { FC, PropsWithChildren } from 'react';
-
-export type ErrorLayoutProps = PropsWithChildren<{
-  title: string;
-}>;
-
-export const ErrorLayout: FC<ErrorLayoutProps> = ({ children, title }) => (
-  <div className="pt-4">
-    <SimpleCard className="p-4 w-full lg:w-[65%] m-auto">
-      <h2>{title}</h2>
-      {children}
-    </SimpleCard>
-  </div>
-);

src/common/Home.scss

@@ -0,0 +1,58 @@
+@import '../utils/base';
+@import '../utils/mixins/vertical-align';
+
+$mainCardWidth: 720px;
+$fiveColumnsSize: .4167; // 12 / 5 -> Can't use "/" operator in latest dart-sass
+
+.home {
+  position: relative;
+  padding-top: 15px;
+  width: 100%;
+
+  @media (min-width: $mdMin) {
+    padding-top: 0;
+    height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
+  }
+}
+
+.home__logo-wrapper {
+  padding: 1.5rem !important;
+  height: 100% !important;
+  min-height: 300px;
+}
+
+.home__logo {
+  @include vertical-align();
+
+  width: calc(#{$mainCardWidth * $fiveColumnsSize} - 3rem);
+}
+
+.home__main-card {
+  margin: 0 auto;
+  max-width: $mainCardWidth;
+
+  @media (min-width: $mdMin) {
+    @include vertical-align();
+  }
+}
+
+.home__title-wrapper {
+  padding: 1.5rem !important;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.home__title {
+  text-align: center;
+  font-size: 1.75rem;
+  margin: 0;
+
+  @media (min-width: $mdMin) {
+    font-size: 2.2rem;
+  }
+}
+
+.home__servers-container {
+  @media (min-width: $mdMin) {
+    border-left: 1px solid var(--border-color);
+  }
+}

src/common/Home.tsx

@@ -1,70 +1,67 @@
 import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Card } from '@shlinkio/shlink-frontend-kit';
-import { clsx } from 'clsx';
-import type { FC } from 'react';
+import { isEmpty, values } from 'ramda';
 import { useEffect } from 'react';
 import { ExternalLink } from 'react-external-link';
-import { useNavigate } from 'react-router';
-import { withoutSelectedServer } from '../servers/helpers/withoutSelectedServer';
-import { useServers } from '../servers/reducers/servers';
+import { Link, useNavigate } from 'react-router-dom';
+import { Card, Row } from 'reactstrap';
+import type { ServersMap } from '../servers/data';
 import { ServersListGroup } from '../servers/ServersListGroup';
 import { ShlinkLogo } from './img/ShlinkLogo';
+import './Home.scss';
 
-export const Home: FC = withoutSelectedServer(() => {
+interface HomeProps {
+  servers: ServersMap;
+}
+
+export const Home = ({ servers }: HomeProps) => {
   const navigate = useNavigate();
-  const { servers } = useServers();
-  const serversList = Object.values(servers);
-  const hasServers = serversList.length > 0;
+  const serversList = values(servers);
+  const hasServers = !isEmpty(serversList);
 
   useEffect(() => {
     // Try to redirect to the first server marked as auto-connect
     const autoConnectServer = serversList.find(({ autoConnect }) => autoConnect);
-    if (autoConnectServer) {
-      navigate(`/server/${autoConnectServer.id}`);
-    }
-  }, [serversList, navigate]);
+    autoConnectServer && navigate(`/server/${autoConnectServer.id}`);
+  }, []);
 
   return (
-    <div className="px-3 w-full">
-      <Card className="mx-auto max-w-[720px] overflow-hidden">
-        <div className="flex flex-col md:flex-row">
-          <div className="p-6 hidden md:flex items-center w-[40%]">
-            <div className="w-full">
-              <ShlinkLogo />
+    <div className="home">
+      <Card className="home__main-card">
+        <Row className="g-0">
+          <div className="col-md-5 d-none d-md-block">
+            <div className="home__logo-wrapper">
+              <div className="home__logo">
+                <ShlinkLogo />
+              </div>
             </div>
           </div>
-
-          <div className="md:border-l border-lm-border dark:border-dm-border flex-grow">
-            <h1
-              className={clsx(
-                'p-4 text-center border-lm-border dark:border-dm-border',
-                { 'border-b': !hasServers },
+          <div className="col-md-7 home__servers-container">
+            <div className="home__title-wrapper">
+              <h1 className="home__title">Welcome!</h1>
+            </div>
+            <ServersListGroup embedded servers={serversList}>
+              {!hasServers && (
+                <div className="p-4 text-center">
+                  <p className="mb-5">This application will help you manage your Shlink servers.</p>
+                  <p>
+                    <Link to="/server/create" className="btn btn-outline-primary btn-lg me-2">
+                      <FontAwesomeIcon icon={faPlus} /> <span className="ms-1">Add a server</span>
+                    </Link>
+                  </p>
+                  <p className="mb-0 mt-5">
+                    <ExternalLink href="https://shlink.io/documentation">
+                      <small>
+                        <span className="me-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
+                      </small>
+                    </ExternalLink>
+                  </p>
+                </div>
               )}
-            >
-              Welcome!
-            </h1>
-            {hasServers ? <ServersListGroup servers={serversList} /> : (
-              <div className="p-6 text-center flex flex-col gap-12 text-xl">
-                <p>This application will help you manage your Shlink servers.</p>
-                <p>
-                  <Button to="/server/create" size="lg" inline>
-                    <FontAwesomeIcon icon={faPlus} widthAuto /> Add a server
-                  </Button>
-                </p>
-                <p>
-                  <ExternalLink href="https://shlink.io/documentation">
-                    <small>
-                      <span className="mr-2">Learn more about Shlink</span>
-                      <FontAwesomeIcon icon={faExternalLinkAlt} />
-                    </small>
-                  </ExternalLink>
-                </p>
-              </div>
-            )}
+            </ServersListGroup>
           </div>
-        </div>
+        </Row>
       </Card>
     </div>
   );
-});
+};

src/common/MainHeader.scss

@@ -0,0 +1,24 @@
+@import '../utils/base';
+
+.main-header.main-header {
+  color: white;
+  background-color: var(--brand-color) !important;
+
+  .navbar-brand {
+    color: inherit !important;
+  }
+}
+
+.main-header__brand-logo {
+  width: 26px;
+  margin-right: 5px;
+}
+
+.main-header__toggle-icon {
+  width: 20px;
+  transition: transform 300ms;
+}
+
+.main-header__toggle-icon--opened {
+  transform: rotate(180deg);
+}

src/common/MainHeader.tsx

@@ -1,33 +1,44 @@
-import { faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { NavBar } from '@shlinkio/shlink-frontend-kit';
+import classNames from 'classnames';
 import type { FC } from 'react';
-import { Link, useLocation } from 'react-router';
-import { ServersDropdown } from '../servers/ServersDropdown';
+import { useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
+import { useToggle } from '../utils/helpers/hooks';
 import { ShlinkLogo } from './img/ShlinkLogo';
+import './MainHeader.scss';
 
-export const MainHeader: FC = () => {
-  const { pathname } = useLocation();
+export const MainHeader = (ServersDropdown: FC) => () => {
+  const [isOpen, toggleOpen, , close] = useToggle();
+  const location = useLocation();
+  const { pathname } = location;
+
+  useEffect(close, [location]);
 
   const settingsPath = '/settings';
+  const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen });
 
   return (
-    <NavBar
-      className="[&]:fixed top-0 z-900"
-      brand={(
-        <Link to="/" className="[&]:text-white no-underline flex items-center gap-2">
-          <ShlinkLogo className="w-7" color="white" /> <small className="font-normal">Shlink</small>
-        </Link>
-      )}
-    >
-      <NavBar.MenuItem
-        to={settingsPath}
-        active={pathname.startsWith(settingsPath)}
-        className="flex items-center gap-1.5"
-      >
-        <FontAwesomeIcon icon={cogsIcon} /> Settings
-      </NavBar.MenuItem>
-      <ServersDropdown />
-    </NavBar>
+    <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
+      <NavbarBrand tag={Link} to="/">
+        <ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
+      </NavbarBrand>
+
+      <NavbarToggler onClick={toggleOpen}>
+        <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
+      </NavbarToggler>
+
+      <Collapse navbar isOpen={isOpen}>
+        <Nav navbar className="ms-auto">
+          <NavItem>
+            <NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
+              <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings
+            </NavLink>
+          </NavItem>
+          <ServersDropdown />
+        </Nav>
+      </Collapse>
+    </Navbar>
   );
 };

src/common/MenuLayout.scss

@@ -0,0 +1,37 @@
+@import '../utils/base';
+
+.menu-layout__swipeable {
+  height: 100%;
+}
+
+.menu-layout__swipeable-inner {
+  height: 100%;
+}
+
+.menu-layout__burger-icon {
+  display: none;
+  transition: color 300ms;
+  position: fixed;
+  top: 18px;
+  z-index: 1035;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: rgb(255 255 255 / .5);
+
+  @media (max-width: $smMax) {
+    display: inline-block;
+  }
+}
+
+.menu-layout__burger-icon--active {
+  color: white;
+}
+
+.menu-layout__container.menu-layout__container {
+  padding: 20px 0 0;
+  min-height: 100%;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 0 0 $asideMenuWidth;
+  }
+}

src/common/MenuLayout.tsx

@@ -0,0 +1,87 @@
+import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { isReachableServer } from '../servers/data';
+import { withSelectedServer } from '../servers/helpers/withSelectedServer';
+import { useFeature } from '../utils/helpers/features';
+import { useSwipeable, useToggle } from '../utils/helpers/hooks';
+import type { AsideMenuProps } from './AsideMenu';
+import { NotFound } from './NotFound';
+import './MenuLayout.scss';
+
+interface MenuLayoutProps {
+  sidebarPresent: Function;
+  sidebarNotPresent: Function;
+}
+
+export const MenuLayout = (
+  TagsList: FC,
+  ShortUrlsList: FC,
+  AsideMenu: FC<AsideMenuProps>,
+  CreateShortUrl: FC,
+  ShortUrlVisits: FC,
+  TagVisits: FC,
+  DomainVisits: FC,
+  OrphanVisits: FC,
+  NonOrphanVisits: FC,
+  ServerError: FC,
+  Overview: FC,
+  EditShortUrl: FC,
+  ManageDomains: FC,
+) => withSelectedServer<MenuLayoutProps>(({ selectedServer, sidebarNotPresent, sidebarPresent }) => {
+  const location = useLocation();
+  const [sidebarVisible, toggleSidebar, showSidebar, hideSidebar] = useToggle();
+  const showContent = isReachableServer(selectedServer);
+
+  useEffect(() => hideSidebar(), [location]);
+  useEffect(() => {
+    showContent && sidebarPresent();
+    return () => sidebarNotPresent();
+  }, []);
+
+  if (!showContent) {
+    return <ServerError />;
+  }
+
+  const addNonOrphanVisitsRoute = useFeature('nonOrphanVisits', selectedServer);
+  const addDomainVisitsRoute = useFeature('domainVisits', selectedServer);
+  const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
+  const swipeableProps = useSwipeable(showSidebar, hideSidebar);
+
+  return (
+    <>
+      <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
+
+      <div {...swipeableProps} className="menu-layout__swipeable">
+        <div className="menu-layout__swipeable-inner">
+          <AsideMenu selectedServer={selectedServer} showOnMobile={sidebarVisible} />
+          <div className="menu-layout__container" onClick={() => hideSidebar()}>
+            <div className="container-xl">
+              <Routes>
+                <Route index element={<Navigate replace to="overview" />} />
+                <Route path="/overview" element={<Overview />} />
+                <Route path="/list-short-urls/:page" element={<ShortUrlsList />} />
+                <Route path="/create-short-url" element={<CreateShortUrl />} />
+                <Route path="/short-code/:shortCode/visits/*" element={<ShortUrlVisits />} />
+                <Route path="/short-code/:shortCode/edit" element={<EditShortUrl />} />
+                <Route path="/tag/:tag/visits/*" element={<TagVisits />} />
+                {addDomainVisitsRoute && <Route path="/domain/:domain/visits/*" element={<DomainVisits />} />}
+                <Route path="/orphan-visits/*" element={<OrphanVisits />} />
+                {addNonOrphanVisitsRoute && <Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />}
+                <Route path="/manage-tags" element={<TagsList />} />
+                <Route path="/manage-domains" element={<ManageDomains />} />
+                <Route
+                  path="*"
+                  element={<NotFound to={`/server/${selectedServer.id}/list-short-urls/1`}>List short URLs</NotFound>}
+                />
+              </Routes>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}, ServerError);

src/common/NoMenuLayout.scss

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

src/common/NoMenuLayout.tsx

@@ -1,12 +1,6 @@
-import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
+import './NoMenuLayout.scss';
 
-export type NoMenuLayoutProps = PropsWithChildren & {
-  className?: string;
-};
-
-export const NoMenuLayout: FC<NoMenuLayoutProps> = ({ children, className }) => (
-  <div className={clsx('container mx-auto p-5 pt-8 max-md:p-3 max-md:py-4', className)}>
-    {children}
-  </div>
+export const NoMenuLayout: FC<PropsWithChildren<unknown>> = ({ children }) => (
+  <div className="no-menu-wrapper container-xl">{children}</div>
 );

src/common/NotFound.tsx

@@ -1,16 +1,19 @@
-import { Button } from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren } from 'react';
-import { ErrorLayout } from './ErrorLayout';
+import { Link } from 'react-router-dom';
+import { SimpleCard } from '../utils/SimpleCard';
 
 type NotFoundProps = PropsWithChildren<{ to?: string }>;
 
 export const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
-  <ErrorLayout title="Oops! We could not find requested route.">
-    <p>
-      Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
-      button.
-    </p>
-    <br />
-    <Button inline to={to} size="lg">{children}</Button>
-  </ErrorLayout>
+  <div className="home">
+    <SimpleCard className="p-4">
+      <h2>Oops! We could not find requested route.</h2>
+      <p>
+        Use your browser&apos;s back button to navigate to the page you have previously come from, or just press this
+        button.
+      </p>
+      <br />
+      <Link to={to} className="btn btn-outline-primary btn-lg">{children}</Link>
+    </SimpleCard>
+  </div>
 );

src/common/ScrollToTop.tsx

@@ -1,8 +1,8 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useEffect } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
-export const ScrollToTop: FC<PropsWithChildren> = ({ children }) => {
+export const ScrollToTop: FC<PropsWithChildren<unknown>> = ({ children }) => {
   const location = useLocation();
 
   useEffect(() => {

src/common/ShlinkVersions.tsx

@@ -1,10 +1,11 @@
+import { pipe } from 'ramda';
 import { ExternalLink } from 'react-external-link';
 import type { SelectedServer } from '../servers/data';
 import { isReachableServer } from '../servers/data';
 import { versionToPrintable, versionToSemVer } from '../utils/helpers/version';
 
 const SHLINK_WEB_CLIENT_VERSION = '%_VERSION_%';
-const normalizeVersion = (version: string) => versionToPrintable(versionToSemVer(version));
+const normalizeVersion = pipe(versionToSemVer(), versionToPrintable);
 
 export interface ShlinkVersionsProps {
   selectedServer: SelectedServer;
@@ -12,7 +13,7 @@ export interface ShlinkVersionsProps {
 }
 
 const VersionLink = ({ project, version }: { project: 'shlink' | 'shlink-web-client'; version: string }) => (
-  <ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="text-gray-500">
+  <ExternalLink href={`https://github.com/shlinkio/${project}/releases/${version}`} className="text-muted">
     <b>{version}</b>
   </ExternalLink>
 );
@@ -21,7 +22,7 @@ export const ShlinkVersions = ({ selectedServer, clientVersion = SHLINK_WEB_CLIE
   const normalizedClientVersion = normalizeVersion(clientVersion);
 
   return (
-    <small className="text-gray-500">
+    <small className="text-muted">
       {isReachableServer(selectedServer) && (
         <>Server: <VersionLink project="shlink" version={selectedServer.printableVersion} /> - </>
       )}

src/common/ShlinkVersionsContainer.scss

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

src/common/ShlinkVersionsContainer.tsx

@@ -1,14 +1,21 @@
-import { clsx } from 'clsx';
-import { isReachableServer } from '../servers/data';
-import { useSelectedServer } from '../servers/reducers/selectedServer';
+import classNames from 'classnames';
+import type { SelectedServer } from '../servers/data';
+import type { Sidebar } from './reducers/sidebar';
 import { ShlinkVersions } from './ShlinkVersions';
+import './ShlinkVersionsContainer.scss';
+
+export interface ShlinkVersionsContainerProps {
+  selectedServer: SelectedServer;
+  sidebar: Sidebar;
+}
+
+export const ShlinkVersionsContainer = ({ selectedServer, sidebar }: ShlinkVersionsContainerProps) => {
+  const classes = classNames('text-center', {
+    'shlink-versions-container--with-sidebar': sidebar.sidebarPresent,
+  });
 
-export const ShlinkVersionsContainer = () => {
-  const { selectedServer } = useSelectedServer();
   return (
-    <div
-      className={clsx('text-center', { 'md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
-    >
+    <div className={classes}>
       <ShlinkVersions selectedServer={selectedServer} />
     </div>
   );

src/common/ShlinkWebComponentContainer.tsx

@@ -1,62 +0,0 @@
-import type { TagColorsStorage } from '@shlinkio/shlink-web-component';
-import {
-  ShlinkSidebarToggleButton,
-  ShlinkSidebarVisibilityProvider,
-  ShlinkWebComponent,
-} from '@shlinkio/shlink-web-component';
-import type { FC } from 'react';
-import { memo } from 'react';
-import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuilder';
-import { withDependencies } from '../container/context';
-import { isReachableServer } from '../servers/data';
-import { ServerError } from '../servers/helpers/ServerError';
-import { withSelectedServer } from '../servers/helpers/withSelectedServer';
-import { useSelectedServer } from '../servers/reducers/selectedServer';
-import { useSettings } from '../settings/reducers/settings';
-import { NotFound } from './NotFound';
-
-export type ShlinkWebComponentContainerProps = {
-  TagColorsStorage: TagColorsStorage;
-  buildShlinkApiClient: ShlinkApiClientBuilder;
-};
-
-const ShlinkWebComponentContainerBase: FC<
-  ShlinkWebComponentContainerProps
-// 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.
-//       This should be revisited at some point.
-> = withSelectedServer(memo(({
-  buildShlinkApiClient,
-  TagColorsStorage: tagColorsStorage,
-}) => {
-  const { selectedServer } = useSelectedServer();
-  const { settings } = useSettings();
-
-  if (!isReachableServer(selectedServer)) {
-    return <ServerError />;
-  }
-
-  const routesPrefix = `/server/${selectedServer.id}`;
-  return (
-    <ShlinkSidebarVisibilityProvider>
-      <ShlinkSidebarToggleButton className="fixed top-3.5 left-3 z-901" />
-      <ShlinkWebComponent
-        serverVersion={selectedServer.version}
-        apiClient={buildShlinkApiClient(selectedServer)}
-        settings={settings}
-        routesPrefix={routesPrefix}
-        tagColorsStorage={tagColorsStorage}
-        createNotFound={(nonPrefixedHomePath: string) => (
-          <NotFound to={`${routesPrefix}${nonPrefixedHomePath}`}>List short URLs</NotFound>
-        )}
-        autoSidebarToggle={false}
-      />
-    </ShlinkSidebarVisibilityProvider>
-  );
-}));
-
-export const ShlinkWebComponentContainer = withDependencies(ShlinkWebComponentContainerBase, [
-  'buildShlinkApiClient',
-  'TagColorsStorage',
-]);