Merge pull request #1594 from shlinkio/develop

Release 4.4.1

.dockerignore

@@ -1,5 +1,4 @@
 ./.github
-./.stryker-tmp
 ./build
 ./coverage
 ./node_modules

.eslintrc

@@ -1,16 +0,0 @@
-{
-  "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://acel.me/donate']
+custom: ['https://slnk.to/donate']

.github/ISSUE_TEMPLATE.md

@@ -1,7 +0,0 @@
-<!--
-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

@@ -1,36 +0,0 @@
----
-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

@@ -0,0 +1,43 @@
+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

@@ -1,19 +0,0 @@
----
-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

@@ -0,0 +1,16 @@
+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

@@ -1,24 +0,0 @@
----
-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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,10 @@
+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,7 +11,6 @@ jobs:
   ci:
     uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
     with:
-      node-version: 16.15
-      with-mutation-tests: true
+      node-version: 22.x
       publish-coverage: true
-      force-install: true
+      install-playwright: true

.github/workflows/deploy-preview.yml

@@ -5,24 +5,23 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     continue-on-error: true
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         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@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.15
+          node-version: 22.10
       - name: Build
         run: |
-          npm ci --force && \
-          node ./scripts/set-homepage.js /shlink-web-client/${GITHUB_HEAD_REF#refs/heads/} && \
-          rm src/service-worker.ts && \
-          npm run build
+          npm ci && \
+          node ./scripts/set-homepage.cjs /shlink-web-client/${GITHUB_HEAD_REF#refs/heads/} && \
+          node --run build
       - name: Deploy preview
         uses: shlinkio/deploy-preview-action@v1.0.1
         with:

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

@@ -2,15 +2,14 @@ name: Build and publish docker image
 
 on:
   push:
-    branches:
-      - develop
     tags:
       - 'v*'
 
 jobs:
   build:
-    uses: shlinkio/github-actions/.github/workflows/docker-build-and-publish.yml@main
+    uses: shlinkio/github-actions/.github/workflows/docker-publish-image.yml@main
     secrets: inherit
     with:
       image-name: shlinkio/shlink-web-client
       version-arg-name: VERSION
+      platforms: 'linux/arm64/v8,linux/amd64'

.github/workflows/publish-release.yml

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

.gitignore

@@ -3,14 +3,11 @@
 
 # testing
 /coverage
-/.stryker-tmp
 /reports
 
 # production
 /build
+/dist
 
 npm-debug.log*
-
-docker-compose.override.yml
-home
 public/servers.json*

.stylelintrc

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

CHANGELOG.md

@@ -4,6 +4,409 @@ 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.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*
+
+### Changed
+* [#781](https://github.com/shlinkio/shlink-web-client/issues/781) Migrate tests from jest to vitest.
+* [#843](https://github.com/shlinkio/shlink-web-client/issues/843) Build docker image only for new tags, making sure it always includes an actual version number.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
+## [3.10.1] - 2023-04-23
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#826](https://github.com/shlinkio/shlink-web-client/issues/826) Fix generated short URLs CSV so that it can be used to import on Shlink.
+
+
+## [3.10.0] - 2023-03-19
+### Added
+* [#807](https://github.com/shlinkio/shlink-web-client/issues/807) Add support for device-specific long-URLs when creating or editing short URLs.
+* [#808](https://github.com/shlinkio/shlink-web-client/issues/808) Respect settings on excluding bots in the overview section, for visits cards.
+* [#809](https://github.com/shlinkio/shlink-web-client/issues/809) Respect settings on excluding bots in the tags list.
+
+### Changed
+* [#798](https://github.com/shlinkio/shlink-web-client/issues/798) Remove stryker and mutation testing.
+* [#800](https://github.com/shlinkio/shlink-web-client/issues/800) Use `/tags/stats` endpoint to load tags stats, when the server supports it.
+* Update to Vite 4.2
+* Update to TypeScript 5
+* Update to coding standard v2.1.0
+* Decouple tests from RTK internals.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#799](https://github.com/shlinkio/shlink-web-client/issues/799) Fix fallback visits not taking into account configuration regarding excluding bots.
+
+
+## [3.9.1] - 2022-12-31
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#787](https://github.com/shlinkio/shlink-web-client/issues/787) Fixed wrong base path set in vite config when homepage is set as empty string.
+
+
+## [3.9.0] - 2022-12-31
+### Added
+* [#750](https://github.com/shlinkio/shlink-web-client/issues/750) Added new icon indicators telling if a short URL can be normally visited, it received the max amount of visits, is still not enabled, etc.
+* [#764](https://github.com/shlinkio/shlink-web-client/issues/764) Added support to exclude visits from visits on short URLs list when consuming Shlink 3.4.0.
+
+  This feature also comes with a new setting to disable visits from bots by default, both on short URLs lists and visits sections.
+
+* [#760](https://github.com/shlinkio/shlink-web-client/issues/760) Added support to exclude short URLs which have reached the maximum amount of visits, or are valid until a date in the past.
+
+### Changed
+* [#753](https://github.com/shlinkio/shlink-web-client/issues/753) Migrated from react-scripts/webpack to vite.
+* [#770](https://github.com/shlinkio/shlink-web-client/issues/770) Updated to latest dependencies.
+* [#741](https://github.com/shlinkio/shlink-web-client/issues/741) Improved `visitsAsyncThunk`, making it wrap pending/fulfilled/rejected actions, as well as custom ones, in a type-safe way.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* [#736](https://github.com/shlinkio/shlink-web-client/issues/736) Removed cards mode in tags. Only table mode is supported now.
+* [#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.
+
+
+## [3.8.2] - 2022-12-17
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#766](https://github.com/shlinkio/shlink-web-client/issues/766) Fixed visits query being lost when switching between sub-sections.
+* [#765](https://github.com/shlinkio/shlink-web-client/issues/765) Added missing `"Content-Type": "application/json"` to requests with payload, making older Shlink versions fail.
+
+
+## [3.8.1] - 2022-12-06
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#756](https://github.com/shlinkio/shlink-web-client/issues/756) Fixed all visits interval not working unless switching to a different interval first.
+* [#757](https://github.com/shlinkio/shlink-web-client/issues/757) Fixed visits fallback interval not working until the visits view has been loaded at least twice.
+
+
+## [3.8.0] - 2022-12-03
+### Added
+* [#708](https://github.com/shlinkio/shlink-web-client/issues/708) Added support for API v3.
+* [#717](https://github.com/shlinkio/shlink-web-client/issues/717) Allowed to select time in 10 minute intervals when configuring "enabled since" and "enabled until" on short URLs.
+* [#748](https://github.com/shlinkio/shlink-web-client/issues/748) Improved visits section to add filters to the query string, allowing to navigate to a specific state or bookmarking filters.
+
+### Changed
+* [#713](https://github.com/shlinkio/shlink-web-client/issues/713) Updated dependencies.
+* [#620](https://github.com/shlinkio/shlink-web-client/issues/620) Migrated all reducers to redux toolkit.
+* [#721](https://github.com/shlinkio/shlink-web-client/issues/721) Migrated from axios to fetch.
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* [#590](https://github.com/shlinkio/shlink-web-client/issues/590) Fixed position of the datepicker triangle.
+* [#729](https://github.com/shlinkio/shlink-web-client/issues/729) Fixed wrong stats displayed in tags after renaming.
+* [#737](https://github.com/shlinkio/shlink-web-client/issues/737) Fixed incorrect contrast in warning messages when using dark theme.
+* [#726](https://github.com/shlinkio/shlink-web-client/issues/726) Fixed delete server and delete short URL modals getting removed from the DOM before finishing close transition.
+* [#749](https://github.com/shlinkio/shlink-web-client/issues/749) Fixed broken short URLs table when some short URL has a too long custom slug.
+
+
 ## [3.7.3] - 2022-09-13
 ### Added
 * [#703](https://github.com/shlinkio/shlink-web-client/issues/703) Added support to publish docker image in GHCR.

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,16 +14,13 @@ 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 you will have to follow these steps:
+Then simply run `docker compose up` and you will have the project exposed in port `3000` (http://localhost:3000).
 
-* 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).
+> The first time the container is created, the project dependencies will be installed and the container may take a bit longer to start.
 
 ## Project structure
 
-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 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 is the basic project structure:
 
@@ -39,7 +36,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.
@@ -48,20 +45,16 @@ shlink-web-client
 
 > Note: The `indocker` shell script is a helper used to run commands inside the docker container.
 
-* `./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).
+* `./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.
 
 ## Building the project
 
 The source code in this project cannot be run directly in a web browser, you need to build it first.
 
-* `./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.
+* `./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.
 
 ## Pull request process
 

Dockerfile

@@ -1,12 +1,22 @@
-FROM node:16.15-alpine as node
+FROM node:24.2-alpine AS node
 COPY . /shlink-web-client
 ARG VERSION="latest"
-ENV VERSION ${VERSION}
-RUN cd /shlink-web-client && npm ci --force && NODE_ENV=production npm run build
+ENV VERSION=${VERSION}
+RUN cd /shlink-web-client && npm ci && node --run build
 
-FROM nginx:1.21-alpine
+FROM nginxinc/nginx-unprivileged:1.27-alpine
+ARG UID=101
 LABEL maintainer="Alejandro Celaya <alejandro@alejandrocelaya.com>"
+
+USER root
 RUN rm -r /usr/share/nginx/html && rm /etc/nginx/conf.d/default.conf
 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

@@ -1,11 +1,13 @@
 # shlink-web-client
 
-[![Build Status](https://img.shields.io/github/workflow/status/shlinkio/shlink-web-client/Continuous%20integration/develop?logo=github&style=flat-square)](https://github.com/shlinkio/shlink-web-client/actions?query=workflow%3A%22Continuous+integration%22)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/shlinkio/shlink-web-client/ci.yml?branch=develop&logo=github&style=flat-square)](https://github.com/shlinkio/shlink-web-client/actions/workflows/ci.yml?query=workflow%3A%22Continuous+integration%22)
 [![Code Coverage](https://img.shields.io/codecov/c/gh/shlinkio/shlink-web-client/develop?style=flat-square)](https://app.codecov.io/gh/shlinkio/shlink-web-client)
 [![GitHub release](https://img.shields.io/github/release/shlinkio/shlink-web-client.svg?style=flat-square)](https://github.com/shlinkio/shlink-web-client/releases/latest)
 [![Docker pulls](https://img.shields.io/docker/pulls/shlinkio/shlink-web-client.svg?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/twitter/follow/shlinkio?color=blue&label=follow&logo=twitter&style=flat-square)](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).
@@ -28,7 +30,7 @@ The application runs 100% in the browser, so you can safely access any shlink in
 
 If you want to deploy shlink-web-client in a container-based cluster (kubernetes, docker swarm, etc), just pick the [shlinkio/shlink-web-client](https://hub.docker.com/r/shlinkio/shlink-web-client/) image and do it.
 
-It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 80.
+It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/) image serving the static app on port 8080.
 
 ### Self-hosted
 
@@ -53,7 +55,7 @@ Those servers can be exported and imported in other browsers, but if for some re
 [
   {
     "name": "Main server",
-    "url": "https://doma.in",
+    "url": "https://s.test",
     "apiKey": "09c972b7-506b-49f1-a19a-d729e22e599c"
   },
   {
@@ -68,11 +70,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:80 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
+    docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/servers.json:/usr/share/nginx/html/servers.json shlinkio/shlink-web-client
     
 Alternatively, you can mount a `conf.d` directory, which in turn contains the `servers.json` file, in a volume inside `/usr/share/nginx/html`. *(since shlink-web-client 3.2.0)*.
 
-    docker run --name shlink-web-client -p 8000:80 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
+    docker run --name shlink-web-client -p 8000:8080 -v ${PWD}/my-config/:/usr/share/nginx/html/conf.d/ shlinkio/shlink-web-client
     
 If you want to pre-configure a single server, you can provide its config via env vars. When the container starts up, it will build the `servers.json` file dynamically based on them. *(since shlink-web-client 3.2.0)*.
 
@@ -83,8 +85,8 @@ If you want to pre-configure a single server, you can provide its config via env
     ```shell
     docker run \
         --name shlink-web-client \
-        -p 8000:80 \
-        -e SHLINK_SERVER_URL=https://doma.in \
+        -p 8000:8080 \
+        -e SHLINK_SERVER_URL=https://s.test \
         -e SHLINK_SERVER_API_KEY=6aeb82c6-e275-4538-a747-31f9abfba63c \
         shlinkio/shlink-web-client
     ```

babel.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      'react-app',
-      {
-        runtime: 'automatic',
-        typescript: true,
-      },
-    ],
-  ],
-};

config/docker/nginx.conf

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

config/jest/cssTransform.js

@@ -1,12 +0,0 @@
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return { code: 'module.exports = {};' };
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

config/jest/fileTransform.js

@@ -1,31 +0,0 @@
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      return `module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: (props) => ({
-          $$typeof: Symbol.for('react.element'),
-          type: 'svg',
-          ref: null,
-          key: null,
-          props: Object.assign({}, props, {
-            children: ${assetFilename}
-          })
-        }),
-      };`;
-    }
-
-    return {
-      code: `module.exports = ${assetFilename};`
-    };
-  },
-};

config/jest/setupTests.ts

@@ -1,8 +0,0 @@
-import '@testing-library/jest-dom';
-import 'jest-canvas-mock';
-import ResizeObserver from 'resize-observer-polyfill';
-
-(global as any).ResizeObserver = ResizeObserver;
-(global as any).scrollTo = () => {};
-(global as any).prompt = () => {};
-(global as any).matchMedia = (media: string) => ({ matches: false, media });

config/test/setupTests.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+// Clear all mocks and cleanup DOM after every test
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});

dev.Dockerfile

@@ -0,0 +1,15 @@
+FROM mcr.microsoft.com/playwright:v1.53.1-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

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

docker-compose.override.yml.dist

@@ -1,9 +0,0 @@
-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,13 +1,15 @@
-version: '3'
-
 services:
   shlink_web_client_node:
     container_name: shlink_web_client_node
-    image: node:16.15-alpine
-    command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
+    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"
     volumes:
       - ./:/home/shlink/www
     ports:
       - "3000:3000"
       - "56745:56745"
-      - "5000:5000"
+      - "4173:4173"

eslint.config.js

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

index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+  <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="#4696e5">
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
+
+    <!-- FavIcon itself -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
+    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="icon" type="image/gif" href="/favicon.gif">
+    <!-- Apple Touch -->
+    <link rel="apple-touch-icon" sizes="16x16" href="/icons/icon-16x16.png">
+    <link rel="apple-touch-icon" sizes="24x24" href="/icons/icon-24x24.png">
+    <link rel="apple-touch-icon" sizes="32x32" href="/icons/icon-32x32.png">
+    <link rel="apple-touch-icon" sizes="40x40" href="/icons/icon-40x40.png">
+    <link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/icons/icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="64x64" href="/icons/icon-64x64.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/icons/icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/icons/icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="128x128" href="/icons/icon-128x128.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="150x150" href="/icons/icon-150x150.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="160x160" href="/icons/icon-160x160.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="/icons/icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png">
+    <link rel="apple-touch-icon" sizes="196x196" href="/icons/icon-196x196.png">
+    <link rel="apple-touch-icon" sizes="228x228" href="/icons/icon-228x228.png">
+    <link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png">
+    <link rel="apple-touch-icon" sizes="310x310" href="/icons/icon-310x310.png">
+    <link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png">
+    <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png">
+    <link rel="apple-touch-icon" sizes="1024x1024" href="/icons/icon-1024x1024.png">
+    <!-- Normal -->
+    <link rel="icon" type="image/png" sizes="1024x1024" href="/icons/icon-1024x1024.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512x512.png">
+    <link rel="icon" type="image/png" sizes="384x384" href="/icons/icon-384x384.png">
+    <link rel="icon" type="image/png" sizes="310x310" href="/icons/icon-310x310.png">
+    <link rel="icon" type="image/png" sizes="256x256" href="/icons/icon-256x256.png">
+    <link rel="icon" type="image/png" sizes="228x228" href="/icons/icon-228x228.png">
+    <link rel="icon" type="image/png" sizes="196x196" href="/icons/icon-196x196.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="180x180" href="/icons/icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="167x167" href="/icons/icon-167x167.png">
+    <link rel="icon" type="image/png" sizes="160x160" href="/icons/icon-160x160.png">
+    <link rel="icon" type="image/png" sizes="152x152" href="/icons/icon-152x152.png">
+    <link rel="icon" type="image/png" sizes="150x150" href="/icons/icon-150x150.png">
+    <link rel="icon" type="image/png" sizes="144x144" href="/icons/icon-144x144.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="/icons/icon-128x128.png">
+    <link rel="icon" type="image/png" sizes="120x120" href="/icons/icon-120x120.png">
+    <link rel="icon" type="image/png" sizes="114x114" href="/icons/icon-114x114.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/icons/icon-96x96.png">
+    <link rel="icon" type="image/png" sizes="76x76" href="/icons/icon-76x76.png">
+    <link rel="icon" type="image/png" sizes="72x72" href="/icons/icon-72x72.png">
+    <link rel="icon" type="image/png" sizes="64x64" href="/icons/icon-64x64.png">
+    <link rel="icon" type="image/png" sizes="60x60" href="/icons/icon-60x60.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="/icons/icon-48x48.png">
+    <link rel="icon" type="image/png" sizes="40x40" href="/icons/icon-40x40.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32x32.png">
+    <link rel="icon" type="image/png" sizes="24x24" href="/icons/icon-24x24.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16x16.png">
+    <!-- MS -->
+    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
+    <meta name="msapplication-square70x70logo" content="/icons/icon-70x70.png">
+    <meta name="msapplication-square144x144logo" content="/icons/icon-144x144.png">
+    <meta name="msapplication-square150x150logo" content="/icons/icon-150x150.png">
+    <meta name="msapplication-square310x310logo" content="/icons/icon-310x310.png">
+    <title>Shlink — The URL shortener</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root" class="h-full"></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 && $*"

jest.config.js

@@ -1,40 +0,0 @@
-module.exports = {
-  coverageDirectory: '<rootDir>/coverage',
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/*.{ts,tsx}',
-    '!src/reducers/index.ts',
-    '!src/**/provideServices.ts',
-    '!src/container/*.ts',
-  ],
-  coverageThreshold: {
-    global: {
-      statements: 90,
-      branches: 80,
-      functions: 85,
-      lines: 90,
-    },
-  },
-  setupFilesAfterEnv: ['<rootDir>/config/jest/setupTests.ts'],
-  testMatch: ['<rootDir>/test/**/*.test.{ts,tsx}'],
-  testEnvironment: 'jsdom',
-  testEnvironmentOptions: {
-    url: 'http://localhost',
-  },
-  transform: {
-    '^.+\\.(ts|tsx|js)$': '<rootDir>/node_modules/babel-jest',
-    '^.+\\.scss$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(ts|tsx|js|json|scss)$)': '<rootDir>/config/jest/fileTransform.js',
-  },
-  transformIgnorePatterns: [
-    '<rootDir>/.stryker-tmp',
-    'node_modules\/(?!(\@react-leaflet|react-leaflet|leaflet|react-chartjs-2|react-colorful)\/)',
-    '^.+\\.module\\.scss$',
-  ],
-  moduleNameMapper: {
-    '^.+\\.module\\.scss$': 'identity-obj-proxy',
-    'react-chartjs-2': '<rootDir>/node_modules/react-chartjs-2/dist/index.js',
-    'uuid': '<rootDir>/node_modules/uuid/dist/index.js',
-  },
-  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
-};

manifest.ts

@@ -0,0 +1,147 @@
+import type { ManifestOptions } from 'vite-plugin-pwa';
+
+export const manifest: Partial<ManifestOptions> = {
+  short_name: 'Shlink',
+  name: 'Shlink',
+  start_url: '/',
+  display: 'standalone',
+  theme_color: '#4696e5',
+  background_color: '#4696e5',
+  icons: [
+    {
+      src: './icons/icon-16x16.png',
+      type: 'image/png',
+      sizes: '16x16',
+    },
+    {
+      src: './icons/icon-24x24.png',
+      type: 'image/png',
+      sizes: '24x24',
+    },
+    {
+      src: './icons/icon-32x32.png',
+      type: 'image/png',
+      sizes: '32x32',
+    },
+    {
+      src: './icons/icon-40x40.png',
+      type: 'image/png',
+      sizes: '40x40',
+    },
+    {
+      src: './icons/icon-48x48.png',
+      type: 'image/png',
+      sizes: '48x48',
+    },
+    {
+      src: './icons/icon-60x60.png',
+      type: 'image/png',
+      sizes: '60x60',
+    },
+    {
+      src: './icons/icon-64x64.png',
+      type: 'image/png',
+      sizes: '64x64',
+    },
+    {
+      src: './icons/icon-72x72.png',
+      type: 'image/png',
+      sizes: '72x72',
+    },
+    {
+      src: './icons/icon-76x76.png',
+      type: 'image/png',
+      sizes: '76x76',
+    },
+    {
+      src: './icons/icon-96x96.png',
+      type: 'image/png',
+      sizes: '96x96',
+    },
+    {
+      src: './icons/icon-114x114.png',
+      type: 'image/png',
+      sizes: '114x114',
+    },
+    {
+      src: './icons/icon-120x120.png',
+      type: 'image/png',
+      sizes: '120x120',
+    },
+    {
+      src: './icons/icon-128x128.png',
+      type: 'image/png',
+      sizes: '128x128',
+    },
+    {
+      src: './icons/icon-144x144.png',
+      type: 'image/png',
+      sizes: '144x144',
+    },
+    {
+      src: './icons/icon-150x150.png',
+      type: 'image/png',
+      sizes: '150x150',
+    },
+    {
+      src: './icons/icon-152x152.png',
+      type: 'image/png',
+      sizes: '152x152',
+    },
+    {
+      src: './icons/icon-160x160.png',
+      type: 'image/png',
+      sizes: '160x160',
+    },
+    {
+      src: './icons/icon-167x167.png',
+      type: 'image/png',
+      sizes: '167x167',
+    },
+    {
+      src: './icons/icon-180x180.png',
+      type: 'image/png',
+      sizes: '180x180',
+    },
+    {
+      src: './icons/icon-192x192.png',
+      type: 'image/png',
+      sizes: '192x192',
+    },
+    {
+      src: './icons/icon-196x196.png',
+      type: 'image/png',
+      sizes: '196x196',
+    },
+    {
+      src: './icons/icon-228x228.png',
+      type: 'image/png',
+      sizes: '228x228',
+    },
+    {
+      src: './icons/icon-256x256.png',
+      type: 'image/png',
+      sizes: '256x256',
+    },
+    {
+      src: './icons/icon-310x310.png',
+      type: 'image/png',
+      sizes: '310x310',
+    },
+    {
+      src: './icons/icon-384x384.png',
+      type: 'image/png',
+      sizes: '384x384',
+    },
+    {
+      src: './icons/icon-512x512.png',
+      type: 'image/png',
+      sizes: '512x512',
+    },
+    {
+      src: './icons/icon-1024x1024.png',
+      type: 'image/png',
+      sizes: '1024x1024',
+    },
+  ],
+};

package.json

@@ -5,106 +5,81 @@
   "homepage": "",
   "repository": "https://github.com/shlinkio/shlink-web-client",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "lint": "npm run lint:css && npm run lint:js",
-    "lint:css": "stylelint src/*.scss src/**/*.scss",
-    "lint:js": "eslint --ext .js,.ts,.tsx src test",
-    "lint: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",
-    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
-    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build && node scripts/replace-version.mjs",
-    "build:dist": "npm run build && node scripts/create-dist-file.mjs",
-    "build:serve": "serve -p 5000 ./build",
-    "test": "jest --env=jsdom --colors",
-    "test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
-    "test:ci": "npm run test:coverage -- --coverageReporters=clover --ci",
-    "test:pretty": "npm run test:coverage -- --coverageReporters=html",
-    "test:verbose": "npm run test -- --verbose",
-    "mutate": "./node_modules/.bin/stryker run --concurrency 4 --ignoreStatic"
+    "lint": "eslint src test config/test",
+    "lint:fix": "node --run lint -- --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",
+    "test": "vitest run --run",
+    "test:watch": "vitest --watch",
+    "test:ci": "node --run test -- --coverage",
+    "test:verbose": "node --run test -- --verbose"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-regular-svg-icons": "^6.0.0",
-    "@fortawesome/free-solid-svg-icons": "^6.0.0",
-    "@fortawesome/react-fontawesome": "^0.1.17",
-    "axios": "^0.26.0",
-    "bootstrap": "^5.1.3",
-    "bottlejs": "^2.0.0",
-    "bowser": "^2.11.0",
-    "chart.js": "^3.7.1",
-    "classnames": "^2.3.1",
-    "compare-versions": "^4.1.3",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@json2csv/plainjs": "^7.0.6",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@shlinkio/data-manipulation": "^1.0.3",
+    "@shlinkio/shlink-frontend-kit": "^1.0.0",
+    "@shlinkio/shlink-js-sdk": "^2.1.0",
+    "@shlinkio/shlink-web-component": "^0.15.0",
+    "bottlejs": "^2.0.1",
+    "clsx": "^2.1.1",
+    "compare-versions": "^6.1.1",
     "csvtojson": "^2.0.10",
-    "date-fns": "^2.28.0",
-    "event-source-polyfill": "^1.0.25",
-    "json2csv": "^5.0.7",
-    "leaflet": "^1.7.1",
-    "qs": "^6.9.6",
-    "ramda": "^0.27.2",
-    "react": "^18.1.0",
-    "react-chartjs-2": "^4.1.0",
-    "react-colorful": "^5.5.1",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-datepicker": "^4.8.0",
-    "react-dom": "^18.1.0",
-    "react-external-link": "^2.0.0",
-    "react-leaflet": "^4.0.0",
-    "react-redux": "^8.0.0",
-    "react-router-dom": "^6.3.0",
-    "react-swipeable": "^7.0.0",
-    "react-tag-autocomplete": "^6.3.0",
-    "reactstrap": "^9.0.1",
-    "redux": "^4.2.0",
-    "redux-localstorage-simple": "^2.4.1",
-    "redux-thunk": "^2.4.1",
-    "stream": "^0.0.2",
-    "uuid": "^8.3.2",
-    "workbox-core": "^6.5.1",
-    "workbox-expiration": "^6.5.1",
-    "workbox-precaching": "^6.5.1",
-    "workbox-routing": "^6.5.1",
-    "workbox-strategies": "^6.5.1"
+    "date-fns": "^4.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-external-link": "^2.5.0",
+    "react-redux": "^9.2.0",
+    "react-router": "^7.6.2",
+    "redux-localstorage-simple": "^2.5.1",
+    "workbox-core": "^7.3.0",
+    "workbox-expiration": "^7.3.0",
+    "workbox-precaching": "^7.3.0",
+    "workbox-routing": "^7.3.0",
+    "workbox-strategies": "^7.3.0"
   },
   "devDependencies": {
-    "@shlinkio/eslint-config-js-coding-standard": "~2.0.2",
-    "@shlinkio/stylelint-config-css-coding-standard": "~1.0.1",
-    "@stryker-mutator/core": "^6.0.2",
-    "@stryker-mutator/jest-runner": "^6.0.2",
-    "@stryker-mutator/typescript-checker": "^6.0.2",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/user-event": "^14.1.1",
-    "@types/jest": "^27.4.1",
-    "@types/json2csv": "^5.0.3",
-    "@types/leaflet": "^1.7.9",
-    "@types/qs": "^6.9.7",
-    "@types/ramda": "0.27.38",
-    "@types/react": "^18.0.8",
-    "@types/react-color": "^3.0.6",
-    "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-datepicker": "^4.3.4",
-    "@types/react-dom": "^18.0.3",
-    "@types/react-tag-autocomplete": "^6.1.1",
-    "@types/uuid": "^8.3.4",
-    "adm-zip": "^0.5.9",
-    "babel-jest": "^28.0.3",
-    "chalk": "^5.0.1",
-    "eslint": "^8.12.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.0.3",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^28.0.2",
-    "react-scripts": "^5.0.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.49.9",
-    "serve": "^13.0.2",
-    "stryker-cli": "^1.0.2",
-    "stylelint": "^14.8.2",
-    "ts-mockery": "^1.2.0",
-    "typescript": "^4.6.2",
-    "webpack": "^5.70.0"
+    "@shlinkio/eslint-config-js-coding-standard": "~3.5.0",
+    "@stylistic/eslint-plugin": "^4.4.1",
+    "@tailwindcss/vite": "^4.1.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@total-typescript/shoehorn": "^0.1.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "adm-zip": "^0.5.16",
+    "axe-core": "^4.10.3",
+    "chalk": "^5.4.1",
+    "eslint": "^9.29.0",
+    "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": "^5.2.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "history": "^5.3.0",
+    "playwright": "^1.53.1",
+    "tailwindcss": "^4.1.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.34.1",
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^1.0.0",
+    "vitest": "^3.0.5"
   },
   "browserslist": [
     ">0.2%",

public/favicon.svg

@@ -1 +1,8 @@
-<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>
+<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>

public/index.html

@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <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="#4696e5">
-
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" crossorigin="use-credentials">
-
-    <!-- FavIcon itself -->
-    <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico">
-    <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" sizes="any">
-    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon.png">
-    <link rel="icon" type="image/gif" href="%PUBLIC_URL%/favicon.gif">
-    <!-- Apple Touch -->
-    <link rel="apple-touch-icon" sizes="16x16" href="%PUBLIC_URL%/icons/icon-16x16.png">
-    <link rel="apple-touch-icon" sizes="24x24" href="%PUBLIC_URL%/icons/icon-24x24.png">
-    <link rel="apple-touch-icon" sizes="32x32" href="%PUBLIC_URL%/icons/icon-32x32.png">
-    <link rel="apple-touch-icon" sizes="40x40" href="%PUBLIC_URL%/icons/icon-40x40.png">
-    <link rel="apple-touch-icon" sizes="48x48" href="%PUBLIC_URL%/icons/icon-48x48.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="%PUBLIC_URL%/icons/icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="64x64" href="%PUBLIC_URL%/icons/icon-64x64.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/icons/icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/icons/icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="96x96" href="%PUBLIC_URL%/icons/icon-96x96.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/icons/icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/icons/icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="128x128" href="%PUBLIC_URL%/icons/icon-128x128.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/icons/icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="150x150" href="%PUBLIC_URL%/icons/icon-150x150.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/icons/icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="160x160" href="%PUBLIC_URL%/icons/icon-160x160.png">
-    <link rel="apple-touch-icon" sizes="167x167" href="%PUBLIC_URL%/icons/icon-167x167.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/icon-180x180.png">
-    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/icons/icon-192x192.png">
-    <link rel="apple-touch-icon" sizes="196x196" href="%PUBLIC_URL%/icons/icon-196x196.png">
-    <link rel="apple-touch-icon" sizes="228x228" href="%PUBLIC_URL%/icons/icon-228x228.png">
-    <link rel="apple-touch-icon" sizes="256x256" href="%PUBLIC_URL%/icons/icon-256x256.png">
-    <link rel="apple-touch-icon" sizes="310x310" href="%PUBLIC_URL%/icons/icon-310x310.png">
-    <link rel="apple-touch-icon" sizes="384x384" href="%PUBLIC_URL%/icons/icon-384x384.png">
-    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/icons/icon-512x512.png">
-    <link rel="apple-touch-icon" sizes="1024x1024" href="%PUBLIC_URL%/icons/icon-1024x1024.png">
-    <!-- Normal -->
-    <link rel="icon" type="image/png" sizes="1024x1024" href="%PUBLIC_URL%/icons/icon-1024x1024.png">
-    <link rel="icon" type="image/png" sizes="512x512" href="%PUBLIC_URL%/icons/icon-512x512.png">
-    <link rel="icon" type="image/png" sizes="384x384" href="%PUBLIC_URL%/icons/icon-384x384.png">
-    <link rel="icon" type="image/png" sizes="310x310" href="%PUBLIC_URL%/icons/icon-310x310.png">
-    <link rel="icon" type="image/png" sizes="256x256" href="%PUBLIC_URL%/icons/icon-256x256.png">
-    <link rel="icon" type="image/png" sizes="228x228" href="%PUBLIC_URL%/icons/icon-228x228.png">
-    <link rel="icon" type="image/png" sizes="196x196" href="%PUBLIC_URL%/icons/icon-196x196.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/icons/icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="180x180" href="%PUBLIC_URL%/icons/icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="167x167" href="%PUBLIC_URL%/icons/icon-167x167.png">
-    <link rel="icon" type="image/png" sizes="160x160" href="%PUBLIC_URL%/icons/icon-160x160.png">
-    <link rel="icon" type="image/png" sizes="152x152" href="%PUBLIC_URL%/icons/icon-152x152.png">
-    <link rel="icon" type="image/png" sizes="150x150" href="%PUBLIC_URL%/icons/icon-150x150.png">
-    <link rel="icon" type="image/png" sizes="144x144" href="%PUBLIC_URL%/icons/icon-144x144.png">
-    <link rel="icon" type="image/png" sizes="128x128" href="%PUBLIC_URL%/icons/icon-128x128.png">
-    <link rel="icon" type="image/png" sizes="120x120" href="%PUBLIC_URL%/icons/icon-120x120.png">
-    <link rel="icon" type="image/png" sizes="114x114" href="%PUBLIC_URL%/icons/icon-114x114.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/icons/icon-96x96.png">
-    <link rel="icon" type="image/png" sizes="76x76" href="%PUBLIC_URL%/icons/icon-76x76.png">
-    <link rel="icon" type="image/png" sizes="72x72" href="%PUBLIC_URL%/icons/icon-72x72.png">
-    <link rel="icon" type="image/png" sizes="64x64" href="%PUBLIC_URL%/icons/icon-64x64.png">
-    <link rel="icon" type="image/png" sizes="60x60" href="%PUBLIC_URL%/icons/icon-60x60.png">
-    <link rel="icon" type="image/png" sizes="48x48" href="%PUBLIC_URL%/icons/icon-48x48.png">
-    <link rel="icon" type="image/png" sizes="40x40" href="%PUBLIC_URL%/icons/icon-40x40.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/icons/icon-32x32.png">
-    <link rel="icon" type="image/png" sizes="24x24" href="%PUBLIC_URL%/icons/icon-24x24.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/icons/icon-16x16.png">
-    <!-- MS -->
-    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/icons/icon-144x144.png">
-    <meta name="msapplication-square70x70logo" content="%PUBLIC_URL%/icons/icon-70x70.png">
-    <meta name="msapplication-square144x144logo" content="%PUBLIC_URL%/icons/icon-144x144.png">
-    <meta name="msapplication-square150x150logo" content="%PUBLIC_URL%/icons/icon-150x150.png">
-    <meta name="msapplication-square310x310logo" content="%PUBLIC_URL%/icons/icon-310x310.png">
-    
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Shlink — The URL shortener</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,145 +0,0 @@
-{
-  "short_name": "Shlink",
-  "name": "Shlink",
-  "start_url": "/",
-  "display": "standalone",
-  "theme_color": "#4696e5",
-  "background_color": "#4696e5",
-  "icons": [
-    {
-      "src": "./icons/icon-16x16.png",
-      "type": "image/png",
-      "sizes": "16x16"
-    },
-    {
-      "src": "./icons/icon-24x24.png",
-      "type": "image/png",
-      "sizes": "24x24"
-    },
-    {
-      "src": "./icons/icon-32x32.png",
-      "type": "image/png",
-      "sizes": "32x32"
-    },
-    {
-      "src": "./icons/icon-40x40.png",
-      "type": "image/png",
-      "sizes": "40x40"
-    },
-    {
-      "src": "./icons/icon-48x48.png",
-      "type": "image/png",
-      "sizes": "48x48"
-    },
-    {
-      "src": "./icons/icon-60x60.png",
-      "type": "image/png",
-      "sizes": "60x60"
-    },
-    {
-      "src": "./icons/icon-64x64.png",
-      "type": "image/png",
-      "sizes": "64x64"
-    },
-    {
-      "src": "./icons/icon-72x72.png",
-      "type": "image/png",
-      "sizes": "72x72"
-    },
-    {
-      "src": "./icons/icon-76x76.png",
-      "type": "image/png",
-      "sizes": "76x76"
-    },
-    {
-      "src": "./icons/icon-96x96.png",
-      "type": "image/png",
-      "sizes": "96x96"
-    },
-    {
-      "src": "./icons/icon-114x114.png",
-      "type": "image/png",
-      "sizes": "114x114"
-    },
-    {
-      "src": "./icons/icon-120x120.png",
-      "type": "image/png",
-      "sizes": "120x120"
-    },
-    {
-      "src": "./icons/icon-128x128.png",
-      "type": "image/png",
-      "sizes": "128x128"
-    },
-    {
-      "src": "./icons/icon-144x144.png",
-      "type": "image/png",
-      "sizes": "144x144"
-    },
-    {
-      "src": "./icons/icon-150x150.png",
-      "type": "image/png",
-      "sizes": "150x150"
-    },
-    {
-      "src": "./icons/icon-152x152.png",
-      "type": "image/png",
-      "sizes": "152x152"
-    },
-    {
-      "src": "./icons/icon-160x160.png",
-      "type": "image/png",
-      "sizes": "160x160"
-    },
-    {
-      "src": "./icons/icon-167x167.png",
-      "type": "image/png",
-      "sizes": "167x167"
-    },
-    {
-      "src": "./icons/icon-180x180.png",
-      "type": "image/png",
-      "sizes": "180x180"
-    },
-    {
-      "src": "./icons/icon-192x192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "./icons/icon-196x196.png",
-      "type": "image/png",
-      "sizes": "196x196"
-    },
-    {
-      "src": "./icons/icon-228x228.png",
-      "type": "image/png",
-      "sizes": "228x228"
-    },
-    {
-      "src": "./icons/icon-256x256.png",
-      "type": "image/png",
-      "sizes": "256x256"
-    },
-    {
-      "src": "./icons/icon-310x310.png",
-      "type": "image/png",
-      "sizes": "310x310"
-    },
-    {
-      "src": "./icons/icon-384x384.png",
-      "type": "image/png",
-      "sizes": "384x384"
-    },
-    {
-      "src": "./icons/icon-512x512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    },
-    {
-      "src": "./icons/icon-1024x1024.png",
-      "type": "image/png",
-      "sizes": "1024x1024"
-    }
-  ]
-}

scripts/create-dist-file.mjs

@@ -1,23 +1,20 @@
-// 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 versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
+  const fileBaseName = `shlink-web-client_${version}_dist`;
+  const versionFileName = `./dist/${fileBaseName}.zip`;
 
   console.log(chalk.cyan(`Generating dist file for version ${chalk.bold(version)}...`));
   const zip = new AdmZip();
 
   try {
     if (fs.existsSync(versionFileName)) {
-      fs.unlink(versionFileName);
+      fs.unlinkSync(versionFileName);
     }
 
-    zip.addLocalFolder('./build', `shlink-web-client_${version}_dist`);
+    zip.addLocalFolder('./build', fileBaseName);
     zip.writeZip(versionFileName);
     console.log(chalk.green('Dist file properly generated'));
   } catch (e) {

scripts/docker/servers_from_env.sh

@@ -4,11 +4,14 @@ 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}"
-  echo "[{\"name\":\"${name}\",\"url\":\"${SHLINK_SERVER_URL}\",\"apiKey\":\"${SHLINK_SERVER_API_KEY}\"}]" > /usr/share/nginx/html/servers.json
+  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
 }
 
 setup_single_shlink_server

scripts/replace-version.mjs

@@ -1,11 +1,11 @@
 import fs from 'fs';
 
 function replaceVersionPlaceholder(version) {
-  const staticJsFilesPath = './build/static/js';
+  const staticJsFilesPath = './build/assets';
   const versionPlaceholder = '%_VERSION_%';
 
-  const isMainFile = (file) => file.startsWith('main.') && file.endsWith('.js');
-  const [ mainJsFile ] = fs.readdirSync(staticJsFilesPath).filter(isMainFile);
+  const isMainFile = (file) => file.startsWith('index-') && file.endsWith('.js');
+  const [mainJsFile] = fs.readdirSync(staticJsFilesPath).filter(isMainFile);
   const filePath = `${staticJsFilesPath}/${mainJsFile}`;
   const fileContent = fs.readFileSync(filePath, 'utf-8');
   const replaced = fileContent.replace(versionPlaceholder, version);

shlink-web-client.d.ts

@@ -1,9 +1,6 @@
-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

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

src/api/services/ShlinkApiClient.ts

@@ -1,128 +0,0 @@
-import { isEmpty, isNil, reject } from 'ramda';
-import { AxiosInstance, AxiosResponse, Method } from 'axios';
-import { ShortUrl, ShortUrlData } from '../../short-urls/data';
-import { OptionalString } from '../../utils/utils';
-import {
-  ShlinkHealth,
-  ShlinkMercureInfo,
-  ShlinkShortUrlsResponse,
-  ShlinkTags,
-  ShlinkTagsResponse,
-  ShlinkVisits,
-  ShlinkVisitsParams,
-  ShlinkShortUrlData,
-  ShlinkDomainsResponse,
-  ShlinkVisitsOverview,
-  ShlinkEditDomainRedirects,
-  ShlinkDomainRedirects,
-  ShlinkShortUrlsListParams,
-  ShlinkShortUrlsListNormalizedParams,
-} from '../types';
-import { stringifyQuery } from '../../utils/helpers/query';
-import { orderToString } from '../../utils/helpers/ordering';
-
-const buildShlinkBaseUrl = (url: string) => (url ? `${url}/rest/v2` : '');
-const rejectNilProps = reject(isNil);
-const normalizeOrderByInParams = (params: ShlinkShortUrlsListParams): ShlinkShortUrlsListNormalizedParams => {
-  const { orderBy = {}, ...rest } = params;
-
-  return { ...rest, orderBy: orderToString(orderBy) };
-};
-
-export class ShlinkApiClient {
-  public constructor(
-    private readonly axios: AxiosInstance,
-    private readonly baseUrl: string,
-    private readonly apiKey: string,
-  ) {
-  }
-
-  public readonly listShortUrls = async (params: ShlinkShortUrlsListParams = {}): Promise<ShlinkShortUrlsResponse> =>
-    this.performRequest<{ shortUrls: ShlinkShortUrlsResponse }>('/short-urls', 'GET', normalizeOrderByInParams(params))
-      .then(({ data }) => data.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)
-      .then((resp) => resp.data);
-  };
-
-  public readonly getShortUrlVisits = async (shortCode: string, query?: ShlinkVisitsParams): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>(`/short-urls/${shortCode}/visits`, 'GET', query)
-      .then(({ data }) => data.visits);
-
-  public readonly getTagVisits = async (tag: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>(`/tags/${tag}/visits`, 'GET', query)
-      .then(({ data }) => data.visits);
-
-  public readonly getDomainVisits = async (domain: string, query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>(`/domains/${domain}/visits`, 'GET', query)
-      .then(({ data }) => data.visits);
-
-  public readonly getOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>('/visits/orphan', 'GET', query)
-      .then(({ data }) => data.visits);
-
-  public readonly getNonOrphanVisits = async (query?: Omit<ShlinkVisitsParams, 'domain'>): Promise<ShlinkVisits> =>
-    this.performRequest<{ visits: ShlinkVisits }>('/visits/non-orphan', 'GET', query)
-      .then(({ data }) => data.visits);
-
-  public readonly getVisitsOverview = async (): Promise<ShlinkVisitsOverview> =>
-    this.performRequest<{ visits: ShlinkVisitsOverview }>('/visits', 'GET')
-      .then(({ data }) => data.visits);
-
-  public readonly getShortUrl = async (shortCode: string, domain?: OptionalString): Promise<ShortUrl> =>
-    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'GET', { domain })
-      .then(({ data }) => data);
-
-  public readonly deleteShortUrl = async (shortCode: string, domain?: OptionalString): Promise<void> =>
-    this.performRequest(`/short-urls/${shortCode}`, 'DELETE', { domain })
-      .then(() => {});
-
-  public readonly updateShortUrl = async (
-    shortCode: string,
-    domain: OptionalString,
-    edit: ShlinkShortUrlData,
-  ): Promise<ShortUrl> =>
-    this.performRequest<ShortUrl>(`/short-urls/${shortCode}`, 'PATCH', { domain }, edit).then(({ data }) => data);
-
-  public readonly listTags = async (): Promise<ShlinkTags> =>
-    this.performRequest<{ tags: ShlinkTagsResponse }>('/tags', 'GET', { withStats: 'true' })
-      .then((resp) => resp.data.tags)
-      .then(({ data, stats }) => ({ tags: data, stats }));
-
-  public readonly deleteTags = async (tags: string[]): Promise<{ tags: string[] }> =>
-    this.performRequest('/tags', 'DELETE', { tags })
-      .then(() => ({ tags }));
-
-  public readonly editTag = async (oldName: string, newName: string): Promise<{ oldName: string; newName: string }> =>
-    this.performRequest('/tags', 'PUT', {}, { oldName, newName })
-      .then(() => ({ oldName, newName }));
-
-  public readonly health = async (): Promise<ShlinkHealth> =>
-    this.performRequest<ShlinkHealth>('/health', 'GET')
-      .then((resp) => resp.data);
-
-  public readonly mercureInfo = async (): Promise<ShlinkMercureInfo> =>
-    this.performRequest<ShlinkMercureInfo>('/mercure-info', 'GET')
-      .then((resp) => resp.data);
-
-  public readonly listDomains = async (): Promise<ShlinkDomainsResponse> =>
-    this.performRequest<{ domains: ShlinkDomainsResponse }>('/domains', 'GET').then(({ data }) => data.domains);
-
-  public readonly editDomainRedirects = async (
-    domainRedirects: ShlinkEditDomainRedirects,
-  ): Promise<ShlinkDomainRedirects> =>
-    this.performRequest<ShlinkDomainRedirects>('/domains/redirects', 'PATCH', {}, domainRedirects).then(({ data }) => data);
-
-  private readonly performRequest = async <T>(url: string, method: Method = 'GET', query = {}, body = {}): Promise<AxiosResponse<T>> =>
-    this.axios({
-      method,
-      url: `${buildShlinkBaseUrl(this.baseUrl)}${url}`,
-      headers: { 'X-Api-Key': this.apiKey },
-      params: rejectNilProps(query),
-      data: body,
-      paramsSerializer: stringifyQuery,
-    });
-}

src/api/services/ShlinkApiClientBuilder.ts

@@ -1,34 +1,40 @@
-import { AxiosInstance } from 'axios';
-import { prop } from 'ramda';
-import { hasServerData, SelectedServer, ServerWithId } from '../../servers/data';
-import { GetState } from '../../container/types';
-import { ShlinkApiClient } from './ShlinkApiClient';
+import type { HttpClient } from '@shlinkio/shlink-js-sdk';
+import { ShlinkApiClient } from '@shlinkio/shlink-js-sdk';
+import type { GetState } from '../../container/types';
+import type { ServerWithId } from '../../servers/data';
+import { hasServerData } from '../../servers/data';
 
-const apiClients: Record<string, ShlinkApiClient> = {};
+const apiClients: Map<string, ShlinkApiClient> = new Map();
 
 const isGetState = (getStateOrSelectedServer: GetState | ServerWithId): getStateOrSelectedServer is GetState =>
   typeof getStateOrSelectedServer === 'function';
-const getSelectedServerFromState = (getState: GetState): SelectedServer => prop('selectedServer', getState());
-
-export type ShlinkApiClientBuilder = (getStateOrSelectedServer: GetState | ServerWithId) => ShlinkApiClient;
-
-export const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuilder => (
-  getStateOrSelectedServer: GetState | ServerWithId,
-) => {
-  const server = isGetState(getStateOrSelectedServer)
-    ? getSelectedServerFromState(getStateOrSelectedServer)
-    : getStateOrSelectedServer;
-
-  if (!hasServerData(server)) {
+const getSelectedServerFromState = (getState: GetState): ServerWithId => {
+  const { selectedServer } = getState();
+  if (!hasServerData(selectedServer)) {
     throw new Error('There\'s no selected server or it is not found');
   }
 
-  const { url, apiKey } = server;
-  const clientKey = `${url}_${apiKey}`;
+  return selectedServer;
+};
 
-  if (!apiClients[clientKey]) {
-    apiClients[clientKey] = new ShlinkApiClient(axios, url, apiKey);
+export const buildShlinkApiClient = (httpClient: HttpClient) => (getStateOrSelectedServer: GetState | ServerWithId) => {
+  const { url: baseUrl, apiKey, forwardCredentials } = isGetState(getStateOrSelectedServer)
+    ? getSelectedServerFromState(getStateOrSelectedServer)
+    : getStateOrSelectedServer;
+  const serverKey = `${apiKey}_${baseUrl}_${forwardCredentials ? 'forward' : 'no-forward'}`;
+  const existingApiClient = apiClients.get(serverKey);
+
+  if (existingApiClient) {
+    return existingApiClient;
   }
 
-  return apiClients[clientKey];
+  const apiClient = new ShlinkApiClient(
+    httpClient,
+    { apiKey, baseUrl },
+    { requestCredentials: forwardCredentials ? 'include' : undefined },
+  );
+  apiClients.set(serverKey, apiClient);
+  return apiClient;
 };
+
+export type ShlinkApiClientBuilder = ReturnType<typeof buildShlinkApiClient>;

src/api/services/provideServices.ts

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

src/api/types/actions.ts

@@ -1,6 +0,0 @@
-import { Action } from 'redux';
-import { ProblemDetailsError } from './index';
-
-export interface ApiErrorAction extends Action<string> {
-  errorData?: ProblemDetailsError;
-}

src/api/types/index.ts

@@ -1,122 +0,0 @@
-import { Visit } from '../../visits/types';
-import { OptionalString } from '../../utils/utils';
-import { ShortUrl, ShortUrlMeta, ShortUrlsOrder } from '../../short-urls/data';
-
-export interface ShlinkShortUrlsResponse {
-  data: ShortUrl[];
-  pagination: ShlinkPaginator;
-}
-
-export interface ShlinkMercureInfo {
-  token: string;
-  mercureHubUrl: string;
-}
-
-export interface ShlinkHealth {
-  status: 'pass' | 'fail';
-  version: string;
-}
-
-interface ShlinkTagsStats {
-  tag: string;
-  shortUrlsCount: number;
-  visitsCount: number;
-}
-
-export interface ShlinkTags {
-  tags: string[];
-  stats: ShlinkTagsStats[];
-}
-
-export interface ShlinkTagsResponse {
-  data: string[];
-  stats: ShlinkTagsStats[];
-}
-
-export interface ShlinkPaginator {
-  currentPage: number;
-  pagesCount: number;
-  totalItems: number;
-}
-
-export interface ShlinkVisits {
-  data: Visit[];
-  pagination: ShlinkPaginator;
-}
-
-export interface ShlinkVisitsOverview {
-  visitsCount: number;
-  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';
-
-export interface ShlinkShortUrlsListParams {
-  page?: string;
-  itemsPerPage?: number;
-  tags?: string[];
-  searchTerm?: string;
-  startDate?: string;
-  endDate?: string;
-  orderBy?: ShortUrlsOrder;
-  tagsMode?: TagsFilteringMode;
-}
-
-export interface ShlinkShortUrlsListNormalizedParams extends Omit<ShlinkShortUrlsListParams, 'orderBy'> {
-  orderBy?: string;
-}
-
-export interface ProblemDetailsError {
-  type: string;
-  detail: string;
-  title: string;
-  status: number;
-  [extraProps: string]: any;
-}
-
-export interface InvalidArgumentError extends ProblemDetailsError {
-  type: 'INVALID_ARGUMENT';
-  invalidElements: string[];
-}
-
-export interface InvalidShortUrlDeletion extends ProblemDetailsError {
-  type: 'INVALID_SHORTCODE_DELETION' | 'INVALID_SHORT_URL_DELETION';
-  threshold: number;
-}

src/api/utils/index.ts

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

src/app/App.scss

@@ -1,26 +0,0 @@
-@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,67 +1,109 @@
-import { useEffect, FC } from 'react';
-import { Route, Routes, useLocation } from 'react-router-dom';
-import classNames from 'classnames';
-import { NotFound } from '../common/NotFound';
-import { ServersMap } from '../servers/data';
-import { Settings } from '../settings/reducers/settings';
-import { changeThemeInMarkup } from '../utils/theme';
+import { changeThemeInMarkup, getSystemPreferredTheme } from '@shlinkio/shlink-frontend-kit';
+import type { Settings } from '@shlinkio/shlink-web-component/settings';
+import { clsx } from 'clsx';
+import type { FC } from 'react';
+import { useEffect, useRef } from 'react';
+import { Route, Routes, useLocation } from 'react-router';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
+import { NotFound } from '../common/NotFound';
+import type { FCWithDeps } from '../container/utils';
+import { componentFactory, useDependencies } from '../container/utils';
+import type { ServersMap } from '../servers/data';
 import { forceUpdate } from '../utils/helpers/sw';
-import './App.scss';
 
-interface AppProps {
+type AppProps = {
   fetchServers: () => void;
   servers: ServersMap;
   settings: Settings;
   resetAppUpdate: () => void;
   appUpdated: boolean;
-}
+};
+
+type AppDeps = {
+  MainHeader: FC;
+  Home: FC;
+  ShlinkWebComponentContainer: FC;
+  CreateServer: FC;
+  EditServer: FC;
+  Settings: FC;
+  ManageServers: FC;
+  ShlinkVersionsContainer: FC;
+};
+
+const App: FCWithDeps<AppProps, AppDeps> = (
+  { fetchServers, servers, settings, appUpdated, resetAppUpdate },
+) => {
+  const {
+    MainHeader,
+    Home,
+    ShlinkWebComponentContainer,
+    CreateServer,
+    EditServer,
+    Settings,
+    ManageServers,
+    ShlinkVersionsContainer,
+  } = useDependencies(App);
 
-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 initialServers = useRef(servers);
   const isHome = location.pathname === '/';
 
   useEffect(() => {
-    // On first load, try to fetch the remote servers if the list is empty
-    if (Object.keys(servers).length === 0) {
+    // Try to fetch the remote servers if the list is empty during first render.
+    // We use a ref because we don't care if the servers list becomes empty later.
+    if (Object.keys(initialServers.current).length === 0) {
       fetchServers();
     }
+  }, [fetchServers]);
 
-    changeThemeInMarkup(settings.ui?.theme ?? 'light');
-  }, []);
+  useEffect(() => {
+    changeThemeInMarkup(settings.ui?.theme ?? getSystemPreferredTheme());
+  }, [settings.ui?.theme]);
 
   return (
-    <div className="container-fluid app-container">
+    <div className="h-full">
       <MainHeader />
 
-      <div className="app">
-        <div className={classNames('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
+      <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/*" element={<SettingsComp />} />
+            <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/*" element={<MenuLayout />} />
+            <Route path="/server/:serverId">
+              {['', '*'].map((path) => <Route key={path} path={path} element={<ShlinkWebComponentContainer />} />)}
+            </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>
         </div>
 
-        <div className="shlink-footer">
+        <div className="h-(--footer-height) mt-(--footer-margin) md:px-4">
           <ShlinkVersionsContainer />
         </div>
       </div>
 
-      <AppUpdateBanner isOpen={appUpdated} toggle={resetAppUpdate} forceUpdate={forceUpdate} />
+      <AppUpdateBanner isOpen={appUpdated} onClose={resetAppUpdate} forceUpdate={forceUpdate} />
     </div>
   );
 };
+
+export const AppFactory = componentFactory(App, [
+  'MainHeader',
+  'Home',
+  'ShlinkWebComponentContainer',
+  'CreateServer',
+  'EditServer',
+  'Settings',
+  'ManageServers',
+  'ShlinkVersionsContainer',
+]);

src/app/reducers/appUpdates.ts

@@ -1,16 +1,14 @@
-import { Action } from 'redux';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+import { createSlice } from '@reduxjs/toolkit';
 
-export const APP_UPDATE_AVAILABLE = 'shlink/appUpdates/APP_UPDATE_AVAILABLE';
-export const RESET_APP_UPDATE = 'shlink/appUpdates/RESET_APP_UPDATE';
+const { actions, reducer } = createSlice({
+  name: 'shlink/appUpdates',
+  initialState: false,
+  reducers: {
+    appUpdateAvailable: () => true,
+    resetAppUpdate: () => false,
+  },
+});
 
-const initialState = false;
+export const { appUpdateAvailable, resetAppUpdate } = actions;
 
-export default buildReducer<boolean, Action<string>>({
-  [APP_UPDATE_AVAILABLE]: () => true,
-  [RESET_APP_UPDATE]: () => false,
-}, initialState);
-
-export const appUpdateAvailable = buildActionCreator(APP_UPDATE_AVAILABLE);
-
-export const resetAppUpdate = buildActionCreator(RESET_APP_UPDATE);
+export const appUpdatesReducer = reducer;

src/app/services/provideServices.ts

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

src/common/AppUpdateBanner.scss

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

src/common/AsideMenu.scss

@@ -1,81 +0,0 @@
-@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

@@ -1,91 +0,0 @@
-import {
-  faList as listIcon,
-  faLink as createIcon,
-  faTags as tagsIcon,
-  faPen as editIcon,
-  faHome as overviewIcon,
-  faGlobe as domainsIcon,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC } from 'react';
-import { NavLink, NavLinkProps, useLocation } from 'react-router-dom';
-import classNames from 'classnames';
-import { DeleteServerButtonProps } from '../servers/DeleteServerButton';
-import { isServerWithId, SelectedServer } from '../servers/data';
-import { supportsDomainRedirects } from '../utils/helpers/features';
-import './AsideMenu.scss';
-
-export interface AsideMenuProps {
-  selectedServer: SelectedServer;
-  showOnMobile?: boolean;
-}
-
-interface AsideMenuItemProps extends NavLinkProps {
-  to: 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 addManageDomainsLink = supportsDomainRedirects(selectedServer);
-  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>
-        {addManageDomainsLink && (
-          <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,16 +1,19 @@
-import { Component, ReactNode } from 'react';
-import { Button } from 'reactstrap';
-import { SimpleCard } from '../utils/SimpleCard';
+import { Button } from '@shlinkio/shlink-frontend-kit';
+import type { PropsWithChildren, ReactNode } from 'react';
+import { Component } from 'react';
+import { ErrorLayout } from './ErrorLayout';
 
-interface ErrorHandlerState {
+type ErrorHandlerProps = PropsWithChildren<{
+  location?: typeof window.location;
+  console?: typeof window.console;
+}>;
+
+type ErrorHandlerState = {
   hasError: boolean;
-}
+};
 
-export const ErrorHandler = (
-  { location }: Window,
-  { error }: Console,
-) => class extends Component<any, ErrorHandlerState> {
-  public constructor(props: object) {
+export class ErrorHandler extends Component<ErrorHandlerProps, ErrorHandlerState> {
+  public constructor(props: ErrorHandlerProps) {
     super(props);
     this.state = { hasError: false };
   }
@@ -20,27 +23,25 @@ export const ErrorHandler = (
   }
 
   public componentDidCatch(e: Error): void {
-    if (process.env.NODE_ENV !== 'development') {
-      error(e);
-    }
+    const { console = globalThis.console } = this.props;
+    console.error(e);
   }
 
   public render(): ReactNode {
     const { hasError } = this.state;
+    const { location = globalThis.location } = this.props;
+
     if (hasError) {
       return (
-        <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>
+        <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>
       );
     }
 
     const { children } = this.props;
     return children;
   }
-};
+}

src/common/ErrorLayout.tsx

@@ -0,0 +1,15 @@
+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

@@ -1,58 +0,0 @@
-@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,66 +1,70 @@
-import { useEffect } from 'react';
-import { isEmpty, values } from 'ramda';
-import { Link, useNavigate } from 'react-router-dom';
-import { Card, Row } from 'reactstrap';
-import { ExternalLink } from 'react-external-link';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, Card } from '@shlinkio/shlink-frontend-kit';
+import { clsx } from 'clsx';
+import { useEffect } from 'react';
+import { ExternalLink } from 'react-external-link';
+import { useNavigate } from 'react-router';
+import type { ServersMap } from '../servers/data';
 import { ServersListGroup } from '../servers/ServersListGroup';
-import { ServersMap } from '../servers/data';
 import { ShlinkLogo } from './img/ShlinkLogo';
-import './Home.scss';
 
-interface HomeProps {
+export type HomeProps = {
   servers: ServersMap;
-}
+};
 
 export const Home = ({ servers }: HomeProps) => {
   const navigate = useNavigate();
-  const serversList = values(servers);
-  const hasServers = !isEmpty(serversList);
+  const serversList = Object.values(servers);
+  const hasServers = serversList.length > 0;
 
   useEffect(() => {
     // Try to redirect to the first server marked as auto-connect
     const autoConnectServer = serversList.find(({ autoConnect }) => autoConnect);
-    autoConnectServer && navigate(`/server/${autoConnectServer.id}`);
-  }, []);
+    if (autoConnectServer) {
+      navigate(`/server/${autoConnectServer.id}`);
+    }
+  }, [serversList, navigate]);
 
   return (
-    <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 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>
           </div>
-          <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>
+
+          <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 },
               )}
-            </ServersListGroup>
+            >
+              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} /> 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>
+            )}
           </div>
-        </Row>
+        </div>
       </Card>
     </div>
   );

src/common/MainHeader.scss

@@ -1,24 +0,0 @@
-@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,43 +1,41 @@
-import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
+import { faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC, useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
-import classNames from 'classnames';
-import { useToggle } from '../utils/helpers/hooks';
+import { NavBar } from '@shlinkio/shlink-frontend-kit';
+import type { FC } from 'react';
+import { Link, useLocation } from 'react-router';
+import type { FCWithDeps } from '../container/utils';
+import { componentFactory, useDependencies } from '../container/utils';
 import { ShlinkLogo } from './img/ShlinkLogo';
-import './MainHeader.scss';
 
-export const MainHeader = (ServersDropdown: FC) => () => {
-  const [isOpen, toggleOpen, , close] = useToggle();
-  const location = useLocation();
-  const { pathname } = location;
+type MainHeaderDeps = {
+  ServersDropdown: FC;
+};
 
-  useEffect(close, [location]);
+const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
+  const { ServersDropdown } = useDependencies(MainHeader);
+  const { pathname } = useLocation();
 
   const settingsPath = '/settings';
-  const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen });
 
   return (
-    <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
-      <NavbarBrand tag={Link} to="/">
-        <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>
+    <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>
   );
 };
+
+export const MainHeaderFactory = componentFactory(MainHeader, ['ServersDropdown']);

src/common/MenuLayout.scss

@@ -1,37 +0,0 @@
-@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;
-  }
-}