Extract shlink-web-component outside of src folder

2026-03-17 21:13:48 +00:00 · 2023-07-24 20:14:59 +02:00
parent 768fb1992f
commit 3a0cea1268
230 changed files with 485 additions and 524 deletions
--- a/shlink-web-component/short-urls/CreateShortUrl.tsx
+++ b/shlink-web-component/short-urls/CreateShortUrl.tsx
@@ -0,0 +1,65 @@
+import type { FC } from 'react';
+import { useMemo } from 'react';
+import type { ShortUrlCreationSettings } from '../utils/settings';
+import { useSetting } from '../utils/settings';
+import type { ShortUrlData } from './data';
+import type { CreateShortUrlResultProps } from './helpers/CreateShortUrlResult';
+import type { ShortUrlCreation } from './reducers/shortUrlCreation';
+import type { ShortUrlFormProps } from './ShortUrlForm';
+
+export interface CreateShortUrlProps {
+  basicMode?: boolean;
+}
+
+interface CreateShortUrlConnectProps extends CreateShortUrlProps {
+  shortUrlCreation: ShortUrlCreation;
+  createShortUrl: (data: ShortUrlData) => Promise<void>;
+  resetCreateShortUrl: () => void;
+}
+
+const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => ({
+  longUrl: '',
+  tags: [],
+  customSlug: '',
+  title: undefined,
+  shortCodeLength: undefined,
+  domain: '',
+  validSince: undefined,
+  validUntil: undefined,
+  maxVisits: undefined,
+  findIfExists: false,
+  validateUrl: settings?.validateUrls ?? false,
+  forwardQuery: settings?.forwardQuery ?? true,
+});
+
+export const CreateShortUrl = (
+  ShortUrlForm: FC<ShortUrlFormProps>,
+  CreateShortUrlResult: FC<CreateShortUrlResultProps>,
+) => ({
+  createShortUrl,
+  shortUrlCreation,
+  resetCreateShortUrl,
+  basicMode = false,
+}: CreateShortUrlConnectProps) => {
+  const shortUrlCreationSettings = useSetting('shortUrlCreation');
+  const initialState = useMemo(() => getInitialState(shortUrlCreationSettings), [shortUrlCreationSettings]);
+
+  return (
+    <>
+      <ShortUrlForm
+        initialState={initialState}
+        saving={shortUrlCreation.saving}
+        mode={basicMode ? 'create-basic' : 'create'}
+        onSave={async (data: ShortUrlData) => {
+          resetCreateShortUrl();
+          return createShortUrl(data);
+        }}
+      />
+      <CreateShortUrlResult
+        creation={shortUrlCreation}
+        resetCreateShortUrl={resetCreateShortUrl}
+        canBeClosed={basicMode}
+      />
+    </>
+  );
+};
--- a/shlink-web-component/short-urls/EditShortUrl.tsx
+++ b/shlink-web-component/short-urls/EditShortUrl.tsx
@@ -0,0 +1,96 @@
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { useEffect, useMemo } from 'react';
+import { ExternalLink } from 'react-external-link';
+import { useLocation, useParams } from 'react-router-dom';
+import { Button, Card } from 'reactstrap';
+import { ShlinkApiError } from '../../src/api/ShlinkApiError';
+import { useGoBack } from '../../src/utils/helpers/hooks';
+import { parseQuery } from '../../src/utils/helpers/query';
+import { Message } from '../../src/utils/Message';
+import { Result } from '../../src/utils/Result';
+import { useSetting } from '../utils/settings';
+import type { ShortUrlIdentifier } from './data';
+import { shortUrlDataFromShortUrl, urlDecodeShortCode } from './helpers';
+import type { ShortUrlDetail } from './reducers/shortUrlDetail';
+import type { EditShortUrl as EditShortUrlInfo, ShortUrlEdition } from './reducers/shortUrlEdition';
+import type { ShortUrlFormProps } from './ShortUrlForm';
+
+interface EditShortUrlConnectProps {
+  shortUrlDetail: ShortUrlDetail;
+  shortUrlEdition: ShortUrlEdition;
+  getShortUrlDetail: (shortUrl: ShortUrlIdentifier) => void;
+  editShortUrl: (editShortUrl: EditShortUrlInfo) => void;
+}
+
+export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
+  shortUrlDetail,
+  getShortUrlDetail,
+  shortUrlEdition,
+  editShortUrl,
+}: EditShortUrlConnectProps) => {
+  const { search } = useLocation();
+  const params = useParams<{ shortCode: string }>();
+  const goBack = useGoBack();
+  const { loading, error, errorData, shortUrl } = shortUrlDetail;
+  const { saving, saved, error: savingError, errorData: savingErrorData } = shortUrlEdition;
+  const { domain } = parseQuery<{ domain?: string }>(search);
+  const shortUrlCreationSettings = useSetting('shortUrlCreation');
+  const initialState = useMemo(
+    () => shortUrlDataFromShortUrl(shortUrl, shortUrlCreationSettings),
+    [shortUrl, shortUrlCreationSettings],
+  );
+
+  useEffect(() => {
+    params.shortCode && getShortUrlDetail({ shortCode: urlDecodeShortCode(params.shortCode), domain });
+  }, []);
+
+  if (loading) {
+    return <Message loading />;
+  }
+
+  if (error) {
+    return (
+      <Result type="error">
+        <ShlinkApiError errorData={errorData} fallbackMessage="An error occurred while loading short URL detail :(" />
+      </Result>
+    );
+  }
+
+  return (
+    <>
+      <header className="mb-3">
+        <Card body>
+          <h2 className="d-sm-flex justify-content-between align-items-center mb-0">
+            <Button color="link" size="lg" className="p-0 me-3" onClick={goBack}>
+              <FontAwesomeIcon icon={faArrowLeft} />
+            </Button>
+            <span className="text-center">
+              <small>Edit <ExternalLink href={shortUrl?.shortUrl ?? ''} /></small>
+            </span>
+            <span />
+          </h2>
+        </Card>
+      </header>
+      <ShortUrlForm
+        initialState={initialState}
+        saving={saving}
+        mode="edit"
+        onSave={async (shortUrlData) => {
+          if (!shortUrl) {
+            return;
+          }
+
+          editShortUrl({ ...shortUrl, data: shortUrlData });
+        }}
+      />
+      {saved && savingError && (
+        <Result type="error" className="mt-3">
+          <ShlinkApiError errorData={savingErrorData} fallbackMessage="An error occurred while updating short URL :(" />
+        </Result>
+      )}
+      {saved && !savingError && <Result type="success" className="mt-3">Short URL properly edited.</Result>}
+    </>
+  );
+};
--- a/shlink-web-component/short-urls/Paginator.tsx
+++ b/shlink-web-component/short-urls/Paginator.tsx
@@ -0,0 +1,53 @@
+import { Link } from 'react-router-dom';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import type {
+  NumberOrEllipsis } from '../../src/utils/helpers/pagination';
+import {
+  keyForPage,
+  pageIsEllipsis,
+  prettifyPageNumber,
+  progressivePagination,
+} from '../../src/utils/helpers/pagination';
+import type { ShlinkPaginator } from '../api-contract';
+import { useRoutesPrefix } from '../utils/routesPrefix';
+
+interface PaginatorProps {
+  paginator?: ShlinkPaginator;
+  currentQueryString?: string;
+}
+
+export const Paginator = ({ paginator, currentQueryString = '' }: PaginatorProps) => {
+  const { currentPage = 0, pagesCount = 0 } = paginator ?? {};
+  const routesPrefix = useRoutesPrefix();
+  const urlForPage = (pageNumber: NumberOrEllipsis) =>
+    `${routesPrefix}/list-short-urls/${pageNumber}${currentQueryString}`;
+
+  if (pagesCount <= 1) {
+    return <div className="pb-3" />; // Return some space
+  }
+
+  const renderPages = () =>
+    progressivePagination(currentPage, pagesCount).map((pageNumber, index) => (
+      <PaginationItem
+        key={keyForPage(pageNumber, index)}
+        disabled={pageIsEllipsis(pageNumber)}
+        active={currentPage === pageNumber}
+      >
+        <PaginationLink tag={Link} to={urlForPage(pageNumber)}>
+          {prettifyPageNumber(pageNumber)}
+        </PaginationLink>
+      </PaginationItem>
+    ));
+
+  return (
+    <Pagination className="sticky-card-paginator py-3" listClassName="flex-wrap justify-content-center mb-0">
+      <PaginationItem disabled={currentPage === 1}>
+        <PaginationLink previous tag={Link} to={urlForPage(currentPage - 1)} />
+      </PaginationItem>
+      {renderPages()}
+      <PaginationItem disabled={currentPage >= pagesCount}>
+        <PaginationLink next tag={Link} to={urlForPage(currentPage + 1)} />
+      </PaginationItem>
+    </Pagination>
+  );
+};
--- a/shlink-web-component/short-urls/ShortUrlForm.scss
+++ b/shlink-web-component/short-urls/ShortUrlForm.scss
@@ -0,0 +1,9 @@
+@import '../../src/utils/base';
+
+.short-url-form p:last-child {
+  margin-bottom: 0;
+}
+
+.short-url-form .card {
+  height: 100%;
+}
--- a/shlink-web-component/short-urls/ShortUrlForm.tsx
+++ b/shlink-web-component/short-urls/ShortUrlForm.tsx
@@ -0,0 +1,268 @@
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faAndroid, faApple } from '@fortawesome/free-brands-svg-icons';
+import { faDesktop } from '@fortawesome/free-solid-svg-icons';
+import classNames from 'classnames';
+import { parseISO } from 'date-fns';
+import { isEmpty, pipe, replace, trim } from 'ramda';
+import type { ChangeEvent, FC } from 'react';
+import { useEffect, useState } from 'react';
+import { Button, FormGroup, Input, Row } from 'reactstrap';
+import type { InputType } from 'reactstrap/types/lib/Input';
+import { Checkbox } from '../../src/utils/Checkbox';
+import type { DateTimeInputProps } from '../../src/utils/dates/DateTimeInput';
+import { DateTimeInput } from '../../src/utils/dates/DateTimeInput';
+import { formatIsoDate } from '../../src/utils/helpers/date';
+import { IconInput } from '../../src/utils/IconInput';
+import { SimpleCard } from '../../src/utils/SimpleCard';
+import { handleEventPreventingDefault, hasValue } from '../../src/utils/utils';
+import type { DomainSelectorProps } from '../domains/DomainSelector';
+import type { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import { useFeature } from '../utils/features';
+import type { DeviceLongUrls, ShortUrlData } from './data';
+import { ShortUrlFormCheckboxGroup } from './helpers/ShortUrlFormCheckboxGroup';
+import { UseExistingIfFoundInfoIcon } from './UseExistingIfFoundInfoIcon';
+import './ShortUrlForm.scss';
+
+export type Mode = 'create' | 'create-basic' | 'edit';
+
+type DateFields = 'validSince' | 'validUntil';
+type NonDateFields = 'longUrl' | 'customSlug' | 'shortCodeLength' | 'domain' | 'maxVisits' | 'title';
+
+export interface ShortUrlFormProps {
+  mode: Mode;
+  saving: boolean;
+  initialState: ShortUrlData;
+  onSave: (shortUrlData: ShortUrlData) => Promise<unknown>;
+}
+
+const normalizeTag = pipe(trim, replace(/ /g, '-'));
+const toDate = (date?: string | Date): Date | undefined => (typeof date === 'string' ? parseISO(date) : date);
+
+export const ShortUrlForm = (
+  TagsSelector: FC<TagsSelectorProps>,
+  DomainSelector: FC<DomainSelectorProps>,
+): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState }) => {
+  const [shortUrlData, setShortUrlData] = useState(initialState);
+  const reset = () => setShortUrlData(initialState);
+  const supportsDeviceLongUrls = useFeature('deviceLongUrls');
+
+  const isEdit = mode === 'edit';
+  const isBasicMode = mode === 'create-basic';
+  const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) });
+  const setResettableValue = (value: string, initialValue?: any) => {
+    if (hasValue(value)) {
+      return value;
+    }
+
+    // If an initial value was provided for this when the input is "emptied", explicitly set it to null so that the
+    // value gets removed. Otherwise, set undefined so that it gets ignored.
+    return hasValue(initialValue) ? null : undefined;
+  };
+  const submit = handleEventPreventingDefault(async () => onSave({
+    ...shortUrlData,
+    validSince: formatIsoDate(shortUrlData.validSince) ?? null,
+    validUntil: formatIsoDate(shortUrlData.validUntil) ?? null,
+    maxVisits: !hasValue(shortUrlData.maxVisits) ? null : Number(shortUrlData.maxVisits),
+  }).then(() => !isEdit && reset()).catch(() => {}));
+
+  useEffect(() => {
+    setShortUrlData(initialState);
+  }, [initialState]);
+
+  // TODO Consider extracting these functions to local components
+  const renderOptionalInput = (
+    id: NonDateFields,
+    placeholder: string,
+    type: InputType = 'text',
+    props: any = {},
+    fromGroupProps = {},
+  ) => (
+    <FormGroup {...fromGroupProps}>
+      <Input
+        id={id}
+        type={type}
+        placeholder={placeholder}
+        value={shortUrlData[id] ?? ''}
+        onChange={props.onChange ?? ((e) => setShortUrlData({ ...shortUrlData, [id]: e.target.value }))}
+        {...props}
+      />
+    </FormGroup>
+  );
+  const renderDeviceLongUrlInput = (id: keyof DeviceLongUrls, placeholder: string, icon: IconProp) => (
+    <IconInput
+      icon={icon}
+      id={id}
+      type="url"
+      placeholder={placeholder}
+      value={shortUrlData.deviceLongUrls?.[id] ?? ''}
+      onChange={(e) => setShortUrlData({
+        ...shortUrlData,
+        deviceLongUrls: {
+          ...(shortUrlData.deviceLongUrls ?? {}),
+          [id]: setResettableValue(e.target.value, initialState.deviceLongUrls?.[id]),
+        },
+      })}
+    />
+  );
+  const renderDateInput = (id: DateFields, placeholder: string, props: Partial<DateTimeInputProps> = {}) => (
+    <DateTimeInput
+      selected={shortUrlData[id] ? toDate(shortUrlData[id] as string | Date) : null}
+      placeholderText={placeholder}
+      isClearable
+      onChange={(date) => setShortUrlData({ ...shortUrlData, [id]: date })}
+      {...props}
+    />
+  );
+  const basicComponents = (
+    <>
+      <FormGroup>
+        <Input
+          bsSize="lg"
+          type="url"
+          placeholder="URL to be shortened"
+          required
+          value={shortUrlData.longUrl}
+          onChange={(e) => setShortUrlData({ ...shortUrlData, longUrl: e.target.value })}
+        />
+      </FormGroup>
+      <Row>
+        {isBasicMode && renderOptionalInput('customSlug', 'Custom slug', 'text', { bsSize: 'lg' }, { className: 'col-lg-6' })}
+        <div className={isBasicMode ? 'col-lg-6 mb-3' : 'col-12'}>
+          <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
+        </div>
+      </Row>
+    </>
+  );
+
+  return (
+    <form name="shortUrlForm" className="short-url-form" onSubmit={submit}>
+      {isBasicMode && basicComponents}
+      {!isBasicMode && (
+        <>
+          <Row>
+            <div
+              className={classNames('mb-3', { 'col-sm-6': supportsDeviceLongUrls, 'col-12': !supportsDeviceLongUrls })}
+            >
+              <SimpleCard title="Main options" className="mb-3">
+                {basicComponents}
+              </SimpleCard>
+            </div>
+            {supportsDeviceLongUrls && (
+              <div className="col-sm-6 mb-3">
+                <SimpleCard title="Device-specific long URLs">
+                  <FormGroup>
+                    {renderDeviceLongUrlInput('android', 'Android-specific redirection', faAndroid)}
+                  </FormGroup>
+                  <FormGroup>
+                    {renderDeviceLongUrlInput('ios', 'iOS-specific redirection', faApple)}
+                  </FormGroup>
+                  {renderDeviceLongUrlInput('desktop', 'Desktop-specific redirection', faDesktop)}
+                </SimpleCard>
+              </div>
+            )}
+          </Row>
+
+          <Row>
+            <div className="col-sm-6 mb-3">
+              <SimpleCard title="Customize the short URL">
+                {renderOptionalInput('title', 'Title', 'text', {
+                  onChange: ({ target }: ChangeEvent<HTMLInputElement>) => setShortUrlData({
+                    ...shortUrlData,
+                    title: setResettableValue(target.value, initialState.title),
+                  }),
+                })}
+                {!isEdit && (
+                  <>
+                    <Row>
+                      <div className="col-lg-6">
+                        {renderOptionalInput('customSlug', 'Custom slug', 'text', {
+                          disabled: hasValue(shortUrlData.shortCodeLength),
+                        })}
+                      </div>
+                      <div className="col-lg-6">
+                        {renderOptionalInput('shortCodeLength', 'Short code length', 'number', {
+                          min: 4,
+                          disabled: hasValue(shortUrlData.customSlug),
+                        })}
+                      </div>
+                    </Row>
+                    <DomainSelector
+                      value={shortUrlData.domain}
+                      onChange={(domain?: string) => setShortUrlData({ ...shortUrlData, domain })}
+                    />
+                  </>
+                )}
+              </SimpleCard>
+            </div>
+
+            <div className="col-sm-6 mb-3">
+              <SimpleCard title="Limit access to the short URL">
+                {renderOptionalInput('maxVisits', 'Maximum number of visits allowed', 'number', { min: 1 })}
+                <div className="mb-3">
+                  {renderDateInput('validSince', 'Enabled since...', { maxDate: shortUrlData.validUntil ? toDate(shortUrlData.validUntil) : undefined })}
+                </div>
+                {renderDateInput('validUntil', 'Enabled until...', { minDate: shortUrlData.validSince ? toDate(shortUrlData.validSince) : undefined })}
+              </SimpleCard>
+            </div>
+          </Row>
+
+          <Row>
+            <div className="col-sm-6 mb-3">
+              <SimpleCard title="Extra checks">
+                <ShortUrlFormCheckboxGroup
+                  infoTooltip="If checked, Shlink will try to reach the long URL, failing in case it's not publicly accessible."
+                  checked={shortUrlData.validateUrl}
+                  onChange={(validateUrl) => setShortUrlData({ ...shortUrlData, validateUrl })}
+                >
+                  Validate URL
+                </ShortUrlFormCheckboxGroup>
+                {!isEdit && (
+                  <p>
+                    <Checkbox
+                      inline
+                      className="me-2"
+                      checked={shortUrlData.findIfExists}
+                      onChange={(findIfExists) => setShortUrlData({ ...shortUrlData, findIfExists })}
+                    >
+                      Use existing URL if found
+                    </Checkbox>
+                    <UseExistingIfFoundInfoIcon />
+                  </p>
+                )}
+              </SimpleCard>
+            </div>
+            <div className="col-sm-6 mb-3">
+              <SimpleCard title="Configure behavior">
+                <ShortUrlFormCheckboxGroup
+                  infoTooltip="This short URL will be included in the robots.txt for your Shlink instance, allowing web crawlers (like Google) to index it."
+                  checked={shortUrlData.crawlable}
+                  onChange={(crawlable) => setShortUrlData({ ...shortUrlData, crawlable })}
+                >
+                  Make it crawlable
+                </ShortUrlFormCheckboxGroup>
+                <ShortUrlFormCheckboxGroup
+                  infoTooltip="When this short URL is visited, any query params appended to it will be forwarded to the long URL."
+                  checked={shortUrlData.forwardQuery}
+                  onChange={(forwardQuery) => setShortUrlData({ ...shortUrlData, forwardQuery })}
+                >
+                  Forward query params on redirect
+                </ShortUrlFormCheckboxGroup>
+              </SimpleCard>
+            </div>
+          </Row>
+        </>
+      )}
+
+      <div className="text-center">
+        <Button
+          outline
+          color="primary"
+          disabled={saving || isEmpty(shortUrlData.longUrl)}
+          className="btn-xs-block"
+        >
+          {saving ? 'Saving...' : 'Save'}
+        </Button>
+      </div>
+    </form>
+  );
+};
--- a/shlink-web-component/short-urls/ShortUrlsFilteringBar.scss
+++ b/shlink-web-component/short-urls/ShortUrlsFilteringBar.scss
@@ -0,0 +1,4 @@
+.short-urls-filtering-bar__tags-icon {
+  vertical-align: bottom;
+  font-size: 1.6rem;
+}
--- a/shlink-web-component/short-urls/ShortUrlsFilteringBar.tsx
+++ b/shlink-web-component/short-urls/ShortUrlsFilteringBar.tsx
@@ -0,0 +1,122 @@
+import { faTag, faTags } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import { isEmpty, pipe } from 'ramda';
+import type { FC } from 'react';
+import { Button, InputGroup, Row, UncontrolledTooltip } from 'reactstrap';
+import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
+import { formatIsoDate } from '../../src/utils/helpers/date';
+import type { DateRange } from '../../src/utils/helpers/dateIntervals';
+import { datesToDateRange } from '../../src/utils/helpers/dateIntervals';
+import type { OrderDir } from '../../src/utils/helpers/ordering';
+import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
+import { SearchField } from '../../src/utils/SearchField';
+import type { TagsSelectorProps } from '../tags/helpers/TagsSelector';
+import { useFeature } from '../utils/features';
+import { useSetting } from '../utils/settings';
+import type { ShortUrlsOrder, ShortUrlsOrderableFields } from './data';
+import { SHORT_URLS_ORDERABLE_FIELDS } from './data';
+import type { ExportShortUrlsBtnProps } from './helpers/ExportShortUrlsBtn';
+import { useShortUrlsQuery } from './helpers/hooks';
+import { ShortUrlsFilterDropdown } from './helpers/ShortUrlsFilterDropdown';
+import './ShortUrlsFilteringBar.scss';
+
+interface ShortUrlsFilteringProps {
+  order: ShortUrlsOrder;
+  handleOrderBy: (orderField?: ShortUrlsOrderableFields, orderDir?: OrderDir) => void;
+  className?: string;
+  shortUrlsAmount?: number;
+}
+
+export const ShortUrlsFilteringBar = (
+  ExportShortUrlsBtn: FC<ExportShortUrlsBtnProps>,
+  TagsSelector: FC<TagsSelectorProps>,
+): FC<ShortUrlsFilteringProps> => ({ className, shortUrlsAmount, order, handleOrderBy }) => {
+  const [filter, toFirstPage] = useShortUrlsQuery();
+  const {
+    search,
+    tags,
+    startDate,
+    endDate,
+    excludeBots,
+    excludeMaxVisitsReached,
+    excludePastValidUntil,
+    tagsMode = 'any',
+  } = filter;
+  const supportsDisabledFiltering = useFeature('filterDisabledUrls');
+  const visitsSettings = useSetting('visits');
+
+  const setDates = pipe(
+    ({ startDate: theStartDate, endDate: theEndDate }: DateRange) => ({
+      startDate: formatIsoDate(theStartDate) ?? undefined,
+      endDate: formatIsoDate(theEndDate) ?? undefined,
+    }),
+    toFirstPage,
+  );
+  const setSearch = pipe(
+    (searchTerm: string) => (isEmpty(searchTerm) ? undefined : searchTerm),
+    (searchTerm) => toFirstPage({ search: searchTerm }),
+  );
+  const changeTagSelection = (selectedTags: string[]) => toFirstPage({ tags: selectedTags });
+  const toggleTagsMode = pipe(
+    () => (tagsMode === 'any' ? 'all' : 'any'),
+    (mode) => toFirstPage({ tagsMode: mode }),
+  );
+
+  return (
+    <div className={classNames('short-urls-filtering-bar-container', className)}>
+      <SearchField initialValue={search} onChange={setSearch} />
+
+      <InputGroup className="mt-3">
+        <TagsSelector allowNew={false} placeholder="With tags..." selectedTags={tags} onChange={changeTagSelection} />
+        {tags.length > 1 && (
+          <>
+            <Button outline color="secondary" onClick={toggleTagsMode} id="tagsModeBtn" aria-label="Change tags mode">
+              <FontAwesomeIcon className="short-urls-filtering-bar__tags-icon" icon={tagsMode === 'all' ? faTags : faTag} />
+            </Button>
+            <UncontrolledTooltip target="tagsModeBtn" placement="left">
+              {tagsMode === 'all' ? 'With all the tags.' : 'With any of the tags.'}
+            </UncontrolledTooltip>
+          </>
+        )}
+      </InputGroup>
+
+      <Row className="flex-lg-row-reverse">
+        <div className="col-lg-8 col-xl-6 mt-3">
+          <div className="d-md-flex">
+            <div className="flex-fill">
+              <DateRangeSelector
+                defaultText="All short URLs"
+                initialDateRange={datesToDateRange(startDate, endDate)}
+                onDatesChange={setDates}
+              />
+            </div>
+            <ShortUrlsFilterDropdown
+              className="ms-0 ms-md-2 mt-3 mt-md-0"
+              selected={{
+                excludeBots: excludeBots ?? visitsSettings?.excludeBots,
+                excludeMaxVisitsReached,
+                excludePastValidUntil,
+              }}
+              onChange={toFirstPage}
+              supportsDisabledFiltering={supportsDisabledFiltering}
+            />
+          </div>
+        </div>
+        <div className="col-6 col-lg-4 col-xl-6 mt-3">
+          <ExportShortUrlsBtn amount={shortUrlsAmount} />
+        </div>
+        <div className="col-6 d-lg-none mt-3">
+          <OrderingDropdown
+            prefixed={false}
+            items={SHORT_URLS_ORDERABLE_FIELDS}
+            order={order}
+            onChange={handleOrderBy}
+          />
+        </div>
+      </Row>
+    </div>
+  );
+};
+
+export type ShortUrlsFilteringBarType = ReturnType<typeof ShortUrlsFilteringBar>;
--- a/shlink-web-component/short-urls/ShortUrlsList.tsx
+++ b/shlink-web-component/short-urls/ShortUrlsList.tsx
@@ -0,0 +1,116 @@
+import { pipe } from 'ramda';
+import { useEffect, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { Card } from 'reactstrap';
+import { DEFAULT_SHORT_URLS_ORDERING } from '../../src/settings/reducers/settings';
+import type { OrderDir } from '../../src/utils/helpers/ordering';
+import { determineOrderDir } from '../../src/utils/helpers/ordering';
+import { TableOrderIcon } from '../../src/utils/table/TableOrderIcon';
+import type { ShlinkShortUrlsListParams, ShlinkShortUrlsOrder } from '../api-contract';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
+import { Topics } from '../mercure/helpers/Topics';
+import { useFeature } from '../utils/features';
+import { useSettings } from '../utils/settings';
+import type { ShortUrlsOrder, ShortUrlsOrderableFields } from './data';
+import { useShortUrlsQuery } from './helpers/hooks';
+import { Paginator } from './Paginator';
+import type { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
+import type { ShortUrlsFilteringBarType } from './ShortUrlsFilteringBar';
+import type { ShortUrlsTableType } from './ShortUrlsTable';
+
+interface ShortUrlsListProps {
+  shortUrlsList: ShortUrlsListState;
+  listShortUrls: (params: ShlinkShortUrlsListParams) => void;
+}
+
+export const ShortUrlsList = (
+  ShortUrlsTable: ShortUrlsTableType,
+  ShortUrlsFilteringBar: ShortUrlsFilteringBarType,
+) => boundToMercureHub(({ listShortUrls, shortUrlsList }: ShortUrlsListProps) => {
+  const { page } = useParams();
+  const location = useLocation();
+  const [filter, toFirstPage] = useShortUrlsQuery();
+  const settings = useSettings();
+  const {
+    tags,
+    search,
+    startDate,
+    endDate,
+    orderBy,
+    tagsMode,
+    excludeBots,
+    excludePastValidUntil,
+    excludeMaxVisitsReached,
+  } = filter;
+  const [actualOrderBy, setActualOrderBy] = useState(
+    // This separated state handling is needed to be able to fall back to settings value, but only once when loaded
+    orderBy ?? settings.shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING,
+  );
+  const { pagination } = shortUrlsList?.shortUrls ?? {};
+  const doExcludeBots = excludeBots ?? settings.visits?.excludeBots;
+  const supportsExcludingBots = useFeature('excludeBotsOnShortUrls');
+  const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => {
+    toFirstPage({ orderBy: { field, dir } });
+    setActualOrderBy({ field, dir });
+  };
+  const orderByColumn = (field: ShortUrlsOrderableFields) => () =>
+    handleOrderBy(field, determineOrderDir(field, actualOrderBy.field, actualOrderBy.dir));
+  const renderOrderIcon = (field: ShortUrlsOrderableFields) =>
+    <TableOrderIcon currentOrder={actualOrderBy} field={field} />;
+  const addTag = pipe(
+    (newTag: string) => [...new Set([...tags, newTag])],
+    (updatedTags) => toFirstPage({ tags: updatedTags }),
+  );
+  const parseOrderByForShlink = ({ field, dir }: ShortUrlsOrder): ShlinkShortUrlsOrder => {
+    if (supportsExcludingBots && doExcludeBots && field === 'visits') {
+      return { field: 'nonBotVisits', dir };
+    }
+
+    return { field, dir };
+  };
+
+  useEffect(() => {
+    listShortUrls({
+      page,
+      searchTerm: search,
+      tags,
+      startDate,
+      endDate,
+      orderBy: parseOrderByForShlink(actualOrderBy),
+      tagsMode,
+      excludePastValidUntil,
+      excludeMaxVisitsReached,
+    });
+  }, [
+    page,
+    search,
+    tags,
+    startDate,
+    endDate,
+    actualOrderBy.field,
+    actualOrderBy.dir,
+    tagsMode,
+    excludePastValidUntil,
+    excludeMaxVisitsReached,
+  ]);
+
+  return (
+    <>
+      <ShortUrlsFilteringBar
+        shortUrlsAmount={shortUrlsList.shortUrls?.pagination.totalItems}
+        order={actualOrderBy}
+        handleOrderBy={handleOrderBy}
+        className="mb-3"
+      />
+      <Card body className="pb-0">
+        <ShortUrlsTable
+          shortUrlsList={shortUrlsList}
+          orderByColumn={orderByColumn}
+          renderOrderIcon={renderOrderIcon}
+          onTagClick={addTag}
+        />
+        <Paginator paginator={pagination} currentQueryString={location.search} />
+      </Card>
+    </>
+  );
+}, () => [Topics.visits]);
--- a/shlink-web-component/short-urls/ShortUrlsTable.scss
+++ b/shlink-web-component/short-urls/ShortUrlsTable.scss
@@ -0,0 +1,7 @@
+.short-urls-table.short-urls-table {
+  margin-bottom: -1px;
+}
+
+.short-urls-table__header-cell--with-action {
+  cursor: pointer;
+}
--- a/shlink-web-component/short-urls/ShortUrlsTable.tsx
+++ b/shlink-web-component/short-urls/ShortUrlsTable.tsx
@@ -0,0 +1,90 @@
+import classNames from 'classnames';
+import { isEmpty } from 'ramda';
+import type { ReactNode } from 'react';
+import type { ShortUrlsOrderableFields } from './data';
+import type { ShortUrlsRowType } from './helpers/ShortUrlsRow';
+import type { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
+import './ShortUrlsTable.scss';
+
+interface ShortUrlsTableProps {
+  orderByColumn?: (column: ShortUrlsOrderableFields) => () => void;
+  renderOrderIcon?: (column: ShortUrlsOrderableFields) => ReactNode;
+  shortUrlsList: ShortUrlsListState;
+  onTagClick?: (tag: string) => void;
+  className?: string;
+}
+
+export const ShortUrlsTable = (ShortUrlsRow: ShortUrlsRowType) => ({
+  orderByColumn,
+  renderOrderIcon,
+  shortUrlsList,
+  onTagClick,
+  className,
+}: ShortUrlsTableProps) => {
+  const { error, loading, shortUrls } = shortUrlsList;
+  const actionableFieldClasses = classNames({ 'short-urls-table__header-cell--with-action': !!orderByColumn });
+  const orderableColumnsClasses = classNames('short-urls-table__header-cell', actionableFieldClasses);
+  const tableClasses = classNames('table table-hover responsive-table short-urls-table', className);
+
+  const renderShortUrls = () => {
+    if (error) {
+      return (
+        <tr>
+          <td colSpan={6} className="text-center table-danger text-dark">
+            Something went wrong while loading short URLs :(
+          </td>
+        </tr>
+      );
+    }
+
+    if (loading) {
+      return <tr><td colSpan={6} className="text-center">Loading...</td></tr>;
+    }
+
+    if (!loading && isEmpty(shortUrls?.data)) {
+      return <tr><td colSpan={6} className="text-center">No results found</td></tr>;
+    }
+
+    return shortUrls?.data.map((shortUrl) => (
+      <ShortUrlsRow
+        key={shortUrl.shortUrl}
+        shortUrl={shortUrl}
+        onTagClick={onTagClick}
+      />
+    ));
+  };
+
+  return (
+    <table className={tableClasses}>
+      <thead className="responsive-table__header short-urls-table__header">
+        <tr>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
+            Created at {renderOrderIcon?.('dateCreated')}
+          </th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
+            Short URL {renderOrderIcon?.('shortCode')}
+          </th>
+          <th className="short-urls-table__header-cell">
+            <span className={actionableFieldClasses} onClick={orderByColumn?.('title')}>
+              Title {renderOrderIcon?.('title')}
+            </span>
+            &nbsp;&nbsp;/&nbsp;&nbsp;
+            <span className={actionableFieldClasses} onClick={orderByColumn?.('longUrl')}>
+              <span className="indivisible">Long URL</span> {renderOrderIcon?.('longUrl')}
+            </span>
+          </th>
+          <th className="short-urls-table__header-cell">Tags</th>
+          <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
+            <span className="indivisible">Visits {renderOrderIcon?.('visits')}</span>
+          </th>
+          <th className="short-urls-table__header-cell" colSpan={2} />
+        </tr>
+      </thead>
+      <tbody>
+        {renderShortUrls()}
+      </tbody>
+    </table>
+  );
+};
+
+export type ShortUrlsTableType = ReturnType<typeof ShortUrlsTable>;
--- a/shlink-web-component/short-urls/UseExistingIfFoundInfoIcon.scss
+++ b/shlink-web-component/short-urls/UseExistingIfFoundInfoIcon.scss
@@ -0,0 +1,7 @@
+.use-existing-if-found-info-icon__modal-quote {
+  margin-bottom: 0;
+  padding: 10px 15px;
+  font-size: 17.5px;
+  border-left: 5px solid #eeeeee;
+  background-color: #f9f9f9;
+}
--- a/shlink-web-component/short-urls/UseExistingIfFoundInfoIcon.tsx
+++ b/shlink-web-component/short-urls/UseExistingIfFoundInfoIcon.tsx
@@ -0,0 +1,50 @@
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Modal, ModalBody, ModalHeader } from 'reactstrap';
+import { useToggle } from '../../src/utils/helpers/hooks';
+import './UseExistingIfFoundInfoIcon.scss';
+
+const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) => (
+  <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
+    <ModalHeader toggle={toggle}>Info</ModalHeader>
+    <ModalBody>
+      <p>
+        When the&nbsp;
+        <b><i>&quot;Use existing URL if found&quot;</i></b>
+        &nbsp;checkbox is checked, the server will return an existing short URL if it matches provided params.
+      </p>
+      <p>
+        These are the checks performed by Shlink in order to determine if an existing short URL should be returned:
+      </p>
+      <ul>
+        <li>
+          When only the long URL is provided: The most recent match will be returned, or a new short URL will be created
+          if none is found.
+        </li>
+        <li>
+          When long URL and custom slug and/or domain are provided: Same as in previous case, but it will try to match
+          the short URL using both the long URL and the slug, the long URL and the domain, or the three of them.
+          <br />
+          If the slug is being used by another long URL, an error will be returned.
+        </li>
+        <li>
+          When other params are provided: Same as in previous cases, but it will try to match existing short URLs with
+          all provided data. If any of them does not match, a new short URL will be created
+        </li>
+      </ul>
+    </ModalBody>
+  </Modal>
+);
+
+export const UseExistingIfFoundInfoIcon = () => {
+  const [isModalOpen, toggleModal] = useToggle();
+
+  return (
+    <>
+      <span title="What does this mean?">
+        <FontAwesomeIcon icon={infoIcon} style={{ cursor: 'pointer' }} onClick={toggleModal} />
+      </span>
+      <InfoModal isOpen={isModalOpen} toggle={toggleModal} />
+    </>
+  );
+};
--- a/shlink-web-component/short-urls/data/index.ts
+++ b/shlink-web-component/short-urls/data/index.ts
@@ -0,0 +1,93 @@
+import type { ShlinkVisitsSummary } from '../../../api/types';
+import type { Order } from '../../../src/utils/helpers/ordering';
+import type { Nullable, OptionalString } from '../../../src/utils/utils';
+
+export interface DeviceLongUrls {
+  android?: OptionalString;
+  ios?: OptionalString;
+  desktop?: OptionalString;
+}
+
+export interface EditShortUrlData {
+  longUrl?: string;
+  deviceLongUrls?: DeviceLongUrls;
+  tags?: string[];
+  title?: string | null;
+  validSince?: Date | string | null;
+  validUntil?: Date | string | null;
+  maxVisits?: number | null;
+  validateUrl?: boolean;
+  crawlable?: boolean;
+  forwardQuery?: boolean;
+}
+
+export interface ShortUrlData extends EditShortUrlData {
+  longUrl: string;
+  customSlug?: string;
+  shortCodeLength?: number;
+  domain?: string;
+  findIfExists?: boolean;
+}
+
+export interface ShortUrlIdentifier {
+  shortCode: string;
+  domain?: OptionalString;
+}
+
+export interface ShortUrl {
+  shortCode: string;
+  shortUrl: string;
+  longUrl: string;
+  deviceLongUrls?: Required<DeviceLongUrls>, // Optional only before Shlink 3.5.0
+  dateCreated: string;
+  /** @deprecated */
+  visitsCount: number; // Deprecated since Shlink 3.4.0
+  visitsSummary?: ShlinkVisitsSummary; // Optional only before Shlink 3.4.0
+  meta: Required<Nullable<ShortUrlMeta>>;
+  tags: string[];
+  domain: string | null;
+  title?: string | null;
+  crawlable?: boolean;
+  forwardQuery?: boolean;
+}
+
+export interface ShortUrlMeta {
+  validSince?: string;
+  validUntil?: string;
+  maxVisits?: number;
+}
+
+export interface ShortUrlModalProps {
+  shortUrl: ShortUrl;
+  isOpen: boolean;
+  toggle: () => void;
+}
+
+export const SHORT_URLS_ORDERABLE_FIELDS = {
+  dateCreated: 'Created at',
+  shortCode: 'Short URL',
+  longUrl: 'Long URL',
+  title: 'Title',
+  visits: 'Visits',
+};
+
+export type ShortUrlsOrderableFields = keyof typeof SHORT_URLS_ORDERABLE_FIELDS;
+
+export type ShortUrlsOrder = Order<ShortUrlsOrderableFields>;
+
+export interface ExportableShortUrl {
+  createdAt: string;
+  title: string;
+  shortUrl: string;
+  domain?: string;
+  shortCode: string;
+  longUrl: string;
+  tags: string;
+  visits: number;
+}
+
+export interface ShortUrlsFilter {
+  excludeBots?: boolean;
+  excludeMaxVisitsReached?: boolean;
+  excludePastValidUntil?: boolean;
+}
--- a/shlink-web-component/short-urls/helpers/CreateShortUrlResult.scss
+++ b/shlink-web-component/short-urls/helpers/CreateShortUrlResult.scss
@@ -0,0 +1,4 @@
+.create-short-url-result__copy-btn {
+  margin-left: 10px;
+  vertical-align: inherit;
+}
--- a/shlink-web-component/short-urls/helpers/CreateShortUrlResult.tsx
+++ b/shlink-web-component/short-urls/helpers/CreateShortUrlResult.tsx
@@ -0,0 +1,64 @@
+import { faClone as copyIcon } from '@fortawesome/free-regular-svg-icons';
+import { faTimes as closeIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { Tooltip } from 'reactstrap';
+import { ShlinkApiError } from '../../../src/api/ShlinkApiError';
+import type { TimeoutToggle } from '../../../src/utils/helpers/hooks';
+import { Result } from '../../../src/utils/Result';
+import type { ShortUrlCreation } from '../reducers/shortUrlCreation';
+import './CreateShortUrlResult.scss';
+
+export interface CreateShortUrlResultProps {
+  creation: ShortUrlCreation;
+  resetCreateShortUrl: () => void;
+  canBeClosed?: boolean;
+}
+
+export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
+  { creation, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps,
+) => {
+  const [showCopyTooltip, setShowCopyTooltip] = useTimeoutToggle();
+  const { error, saved } = creation;
+
+  useEffect(() => {
+    resetCreateShortUrl();
+  }, []);
+
+  if (error) {
+    return (
+      <Result type="error" className="mt-3">
+        {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
+        <ShlinkApiError errorData={creation.errorData} fallbackMessage="An error occurred while creating the URL :(" />
+      </Result>
+    );
+  }
+
+  if (!saved) {
+    return null;
+  }
+
+  const { shortUrl } = creation.result;
+
+  return (
+    <Result type="success" className="mt-3">
+      {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
+      <span><b>Great!</b> The short URL is <b>{shortUrl}</b></span>
+
+      <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
+        <button
+          className="btn btn-light btn-sm create-short-url-result__copy-btn"
+          id="copyBtn"
+          type="button"
+        >
+          <FontAwesomeIcon icon={copyIcon} /> Copy
+        </button>
+      </CopyToClipboard>
+
+      <Tooltip placement="left" isOpen={showCopyTooltip} target="copyBtn">
+        Copied!
+      </Tooltip>
+    </Result>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/DeleteShortUrlModal.tsx
+++ b/shlink-web-component/short-urls/helpers/DeleteShortUrlModal.tsx
@@ -0,0 +1,75 @@
+import { pipe } from 'ramda';
+import { useEffect, useState } from 'react';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { ShlinkApiError } from '../../../src/api/ShlinkApiError';
+import { Result } from '../../../src/utils/Result';
+import { handleEventPreventingDefault } from '../../../src/utils/utils';
+import { isInvalidDeletionError } from '../../api-contract/utils';
+import type { ShortUrlIdentifier, ShortUrlModalProps } from '../data';
+import type { ShortUrlDeletion } from '../reducers/shortUrlDeletion';
+
+interface DeleteShortUrlModalConnectProps extends ShortUrlModalProps {
+  shortUrlDeletion: ShortUrlDeletion;
+  deleteShortUrl: (shortUrl: ShortUrlIdentifier) => Promise<void>;
+  shortUrlDeleted: (shortUrl: ShortUrlIdentifier) => void;
+  resetDeleteShortUrl: () => void;
+}
+
+const DELETION_PATTERN = 'delete';
+
+export const DeleteShortUrlModal = ({
+  shortUrl,
+  toggle,
+  isOpen,
+  shortUrlDeletion,
+  resetDeleteShortUrl,
+  deleteShortUrl,
+  shortUrlDeleted,
+}: DeleteShortUrlModalConnectProps) => {
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => resetDeleteShortUrl, []);
+
+  const { loading, error, deleted, errorData } = shortUrlDeletion;
+  const close = pipe(resetDeleteShortUrl, toggle);
+  const handleDeleteUrl = handleEventPreventingDefault(() => deleteShortUrl(shortUrl).then(toggle));
+
+  return (
+    <Modal isOpen={isOpen} toggle={close} centered onClosed={() => deleted && shortUrlDeleted(shortUrl)}>
+      <form onSubmit={handleDeleteUrl}>
+        <ModalHeader toggle={close}>
+          <span className="text-danger">Delete short URL</span>
+        </ModalHeader>
+        <ModalBody>
+          <p><b className="text-danger">Caution!</b> You are about to delete a short URL.</p>
+          <p>This action cannot be undone. Once you have deleted it, all the visits stats will be lost.</p>
+          <p>Write <b>{DELETION_PATTERN}</b> to confirm deletion.</p>
+
+          <input
+            type="text"
+            className="form-control"
+            placeholder={`Insert ${DELETION_PATTERN}`}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+
+          {error && (
+            <Result type={isInvalidDeletionError(errorData) ? 'warning' : 'error'} small className="mt-2">
+              <ShlinkApiError errorData={errorData} fallbackMessage="Something went wrong while deleting the URL :(" />
+            </Result>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <button type="button" className="btn btn-link" onClick={close}>Cancel</button>
+          <button
+            type="submit"
+            className="btn btn-danger"
+            disabled={inputValue !== DELETION_PATTERN || loading}
+          >
+            {loading ? 'Deleting...' : 'Delete'}
+          </button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/ExportShortUrlsBtn.tsx
+++ b/shlink-web-component/short-urls/helpers/ExportShortUrlsBtn.tsx
@@ -0,0 +1,59 @@
+import type { FC } from 'react';
+import { useCallback } from 'react';
+import type { ReportExporter } from '../../../src/common/services/ReportExporter';
+import { ExportBtn } from '../../../src/utils/ExportBtn';
+import { useToggle } from '../../../src/utils/helpers/hooks';
+import type { ShlinkApiClient } from '../../api-contract';
+import type { ShortUrl } from '../data';
+import { useShortUrlsQuery } from './hooks';
+
+export interface ExportShortUrlsBtnProps {
+  amount?: number;
+}
+
+const itemsPerPage = 20;
+
+export const ExportShortUrlsBtn = (
+  apiClient: ShlinkApiClient,
+  { exportShortUrls }: ReportExporter,
+): FC<ExportShortUrlsBtnProps> => ({ amount = 0 }) => {
+  const [{ tags, search, startDate, endDate, orderBy, tagsMode }] = useShortUrlsQuery();
+  const [loading,, startLoading, stopLoading] = useToggle();
+  const exportAllUrls = useCallback(async () => {
+    const totalPages = amount / itemsPerPage;
+    const loadAllUrls = async (page = 1): Promise<ShortUrl[]> => {
+      const { data } = await apiClient.listShortUrls(
+        { page: `${page}`, tags, searchTerm: search, startDate, endDate, orderBy, tagsMode, itemsPerPage },
+      );
+
+      if (page >= totalPages) {
+        return data;
+      }
+
+      // TODO Support paralelization
+      return data.concat(await loadAllUrls(page + 1));
+    };
+
+    startLoading();
+    const shortUrls = await loadAllUrls();
+
+    exportShortUrls(shortUrls.map((shortUrl) => {
+      const { hostname: domain, pathname } = new URL(shortUrl.shortUrl);
+      const shortCode = pathname.substring(1); // Remove trailing slash
+
+      return {
+        createdAt: shortUrl.dateCreated,
+        domain,
+        shortCode,
+        shortUrl: shortUrl.shortUrl,
+        longUrl: shortUrl.longUrl,
+        title: shortUrl.title ?? '',
+        tags: shortUrl.tags.join('|'),
+        visits: shortUrl?.visitsSummary?.total ?? shortUrl.visitsCount,
+      };
+    }));
+    stopLoading();
+  }, []);
+
+  return <ExportBtn loading={loading} className="btn-md-block" amount={amount} onClick={exportAllUrls} />;
+};
--- a/shlink-web-component/short-urls/helpers/QrCodeModal.scss
+++ b/shlink-web-component/short-urls/helpers/QrCodeModal.scss
@@ -0,0 +1,4 @@
+.qr-code-modal__img {
+  max-width: 100%;
+  box-shadow: 0 0 .25rem rgb(0 0 0 / .2);
+}
--- a/shlink-web-component/short-urls/helpers/QrCodeModal.tsx
+++ b/shlink-web-component/short-urls/helpers/QrCodeModal.tsx
@@ -0,0 +1,95 @@
+import { faFileDownload as downloadIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useMemo, useState } from 'react';
+import { ExternalLink } from 'react-external-link';
+import { Button, FormGroup, Modal, ModalBody, ModalHeader, Row } from 'reactstrap';
+import type { ImageDownloader } from '../../../src/common/services/ImageDownloader';
+import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
+import type { QrCodeFormat, QrErrorCorrection } from '../../../src/utils/helpers/qrCodes';
+import { buildQrCodeUrl } from '../../../src/utils/helpers/qrCodes';
+import type { ShortUrlModalProps } from '../data';
+import { QrErrorCorrectionDropdown } from './qr-codes/QrErrorCorrectionDropdown';
+import { QrFormatDropdown } from './qr-codes/QrFormatDropdown';
+import './QrCodeModal.scss';
+
+export const QrCodeModal = (imageDownloader: ImageDownloader) => (
+  { shortUrl: { shortUrl, shortCode }, toggle, isOpen }: ShortUrlModalProps,
+) => {
+  const [size, setSize] = useState(300);
+  const [margin, setMargin] = useState(0);
+  const [format, setFormat] = useState<QrCodeFormat>('png');
+  const [errorCorrection, setErrorCorrection] = useState<QrErrorCorrection>('L');
+  const qrCodeUrl = useMemo(
+    () => buildQrCodeUrl(shortUrl, { size, format, margin, errorCorrection }),
+    [shortUrl, size, format, margin, errorCorrection],
+  );
+  const totalSize = useMemo(() => size + margin, [size, margin]);
+  const modalSize = useMemo(() => {
+    if (totalSize < 500) {
+      return undefined;
+    }
+
+    return totalSize < 800 ? 'lg' : 'xl';
+  }, [totalSize]);
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered size={modalSize}>
+      <ModalHeader toggle={toggle}>
+        QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
+      </ModalHeader>
+      <ModalBody>
+        <Row>
+          <FormGroup className="d-grid col-md-6">
+            <label>Size: {size}px</label>
+            <input
+              type="range"
+              className="form-control-range"
+              value={size}
+              step={10}
+              min={50}
+              max={1000}
+              onChange={(e) => setSize(Number(e.target.value))}
+            />
+          </FormGroup>
+          <FormGroup className="d-grid col-md-6">
+            <label htmlFor="marginControl">Margin: {margin}px</label>
+            <input
+              id="marginControl"
+              type="range"
+              className="form-control-range"
+              value={margin}
+              step={1}
+              min={0}
+              max={100}
+              onChange={(e) => setMargin(Number(e.target.value))}
+            />
+          </FormGroup>
+          <FormGroup className="d-grid col-md-6">
+            <QrFormatDropdown format={format} setFormat={setFormat} />
+          </FormGroup>
+          <FormGroup className="col-md-6">
+            <QrErrorCorrectionDropdown errorCorrection={errorCorrection} setErrorCorrection={setErrorCorrection} />
+          </FormGroup>
+        </Row>
+        <div className="text-center">
+          <div className="mb-3">
+            <ExternalLink href={qrCodeUrl} />
+            <CopyToClipboardIcon text={qrCodeUrl} />
+          </div>
+          <img src={qrCodeUrl} className="qr-code-modal__img" alt="QR code" />
+          <div className="mt-3">
+            <Button
+              block
+              color="primary"
+              onClick={() => {
+                imageDownloader.saveImage(qrCodeUrl, `${shortCode}-qr-code.${format}`).catch(() => {});
+              }}
+            >
+              Download <FontAwesomeIcon icon={downloadIcon} className="ms-1" />
+            </Button>
+          </div>
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/ShortUrlDetailLink.tsx
+++ b/shlink-web-component/short-urls/helpers/ShortUrlDetailLink.tsx
@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { useRoutesPrefix } from '../../utils/routesPrefix';
+import type { ShortUrl } from '../data';
+import { urlEncodeShortCode } from './index';
+
+export type LinkSuffix = 'visits' | 'edit';
+
+export interface ShortUrlDetailLinkProps {
+  shortUrl?: ShortUrl | null;
+  suffix: LinkSuffix;
+  asLink?: boolean;
+}
+
+const buildUrl = (routePrefix: string, { shortCode, domain }: ShortUrl, suffix: LinkSuffix) => {
+  const query = domain ? `?domain=${domain}` : '';
+  return `${routePrefix}/short-code/${urlEncodeShortCode(shortCode)}/${suffix}${query}`;
+};
+
+export const ShortUrlDetailLink: FC<ShortUrlDetailLinkProps & Record<string | number, any>> = (
+  { shortUrl, suffix, asLink, children, ...rest },
+) => {
+  const routePrefix = useRoutesPrefix();
+  if (!asLink || !shortUrl) {
+    return <span {...rest}>{children}</span>;
+  }
+
+  return <Link to={buildUrl(routePrefix, shortUrl, suffix)} {...rest}>{children}</Link>;
+};
--- a/shlink-web-component/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx
+++ b/shlink-web-component/short-urls/helpers/ShortUrlFormCheckboxGroup.tsx
@@ -0,0 +1,20 @@
+import type { ChangeEvent, FC, PropsWithChildren } from 'react';
+import { Checkbox } from '../../../src/utils/Checkbox';
+import { InfoTooltip } from '../../../src/utils/InfoTooltip';
+
+type ShortUrlFormCheckboxGroupProps = PropsWithChildren<{
+  checked?: boolean;
+  onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
+  infoTooltip?: string;
+}>;
+
+export const ShortUrlFormCheckboxGroup: FC<ShortUrlFormCheckboxGroupProps> = (
+  { children, infoTooltip, checked, onChange },
+) => (
+  <p>
+    <Checkbox inline checked={checked} className={infoTooltip ? 'me-2' : ''} onChange={onChange}>
+      {children}
+    </Checkbox>
+    {infoTooltip && <InfoTooltip placement="right">{infoTooltip}</InfoTooltip>}
+  </p>
+);
--- a/shlink-web-component/short-urls/helpers/ShortUrlStatus.tsx
+++ b/shlink-web-component/short-urls/helpers/ShortUrlStatus.tsx
@@ -0,0 +1,86 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { faCalendarXmark, faCheck, faLinkSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { isBefore } from 'date-fns';
+import type { FC, ReactNode } from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+import { formatHumanFriendly, now, parseISO } from '../../../src/utils/helpers/date';
+import { useElementRef } from '../../../src/utils/helpers/hooks';
+import type { ShortUrl } from '../data';
+
+interface ShortUrlStatusProps {
+  shortUrl: ShortUrl;
+}
+
+interface StatusResult {
+  icon: IconDefinition;
+  className: string;
+  description: ReactNode;
+}
+
+const resolveShortUrlStatus = (shortUrl: ShortUrl): StatusResult => {
+  const { meta, visitsCount, visitsSummary } = shortUrl;
+  const { maxVisits, validSince, validUntil } = meta;
+  const totalVisits = visitsSummary?.total ?? visitsCount;
+
+  if (maxVisits && totalVisits >= maxVisits) {
+    return {
+      icon: faLinkSlash,
+      className: 'text-danger',
+      description: (
+        <>
+          This short URL cannot be currently visited because it has reached the maximum
+          amount of <b>{maxVisits}</b> visit{maxVisits > 1 ? 's' : ''}.
+        </>
+      ),
+    };
+  }
+
+  if (validUntil && isBefore(parseISO(validUntil), now())) {
+    return {
+      icon: faCalendarXmark,
+      className: 'text-danger',
+      description: (
+        <>
+          This short URL cannot be visited
+          since <b className="indivisible">{formatHumanFriendly(parseISO(validUntil))}</b>.
+        </>
+      ),
+    };
+  }
+
+  if (validSince && isBefore(now(), parseISO(validSince))) {
+    return {
+      icon: faCalendarXmark,
+      className: 'text-warning',
+      description: (
+        <>
+          This short URL will start working
+          on <b className="indivisible">{formatHumanFriendly(parseISO(validSince))}</b>.
+        </>
+      ),
+    };
+  }
+
+  return {
+    icon: faCheck,
+    className: 'text-primary',
+    description: 'This short URL can be visited normally.',
+  };
+};
+
+export const ShortUrlStatus: FC<ShortUrlStatusProps> = ({ shortUrl }) => {
+  const tooltipRef = useElementRef<HTMLElement>();
+  const { icon, className, description } = resolveShortUrlStatus(shortUrl);
+
+  return (
+    <>
+      <span style={{ cursor: !description ? undefined : 'help' }} ref={tooltipRef}>
+        <FontAwesomeIcon icon={icon} className={className} />
+      </span>
+      <UncontrolledTooltip target={tooltipRef} placement="bottom">
+        {description}
+      </UncontrolledTooltip>
+    </>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/ShortUrlVisitsCount.scss
+++ b/shlink-web-component/short-urls/helpers/ShortUrlVisitsCount.scss
@@ -0,0 +1,16 @@
+.short-urls-visits-count__max-visits-control {
+  cursor: help;
+}
+
+.short-url-visits-count__amount {
+  transition: transform .3s ease;
+  display: inline-block;
+}
+
+.short-url-visits-count__amount--big {
+  transform: scale(1.5);
+}
+
+.short-url-visits-count__tooltip-list-item:not(:last-child) {
+  margin-bottom: .5rem;
+}
--- a/shlink-web-component/short-urls/helpers/ShortUrlVisitsCount.tsx
+++ b/shlink-web-component/short-urls/helpers/ShortUrlVisitsCount.tsx
@@ -0,0 +1,74 @@
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import { UncontrolledTooltip } from 'reactstrap';
+import { formatHumanFriendly, parseISO } from '../../../src/utils/helpers/date';
+import { useElementRef } from '../../../src/utils/helpers/hooks';
+import { prettify } from '../../../src/utils/helpers/numbers';
+import type { ShortUrl } from '../data';
+import { ShortUrlDetailLink } from './ShortUrlDetailLink';
+import './ShortUrlVisitsCount.scss';
+
+interface ShortUrlVisitsCountProps {
+  shortUrl?: ShortUrl | null;
+  visitsCount: number;
+  active?: boolean;
+  asLink?: boolean;
+}
+
+export const ShortUrlVisitsCount = (
+  { visitsCount, shortUrl, active = false, asLink = false }: ShortUrlVisitsCountProps,
+) => {
+  const { maxVisits, validSince, validUntil } = shortUrl?.meta ?? {};
+  const hasLimit = !!maxVisits || !!validSince || !!validUntil;
+  const visitsLink = (
+    <ShortUrlDetailLink shortUrl={shortUrl} suffix="visits" asLink={asLink}>
+      <strong
+        className={classNames('short-url-visits-count__amount', { 'short-url-visits-count__amount--big': active })}
+      >
+        {prettify(visitsCount)}
+      </strong>
+    </ShortUrlDetailLink>
+  );
+
+  if (!hasLimit) {
+    return visitsLink;
+  }
+
+  const tooltipRef = useElementRef<HTMLElement>();
+
+  return (
+    <>
+      <span className="indivisible">
+        {visitsLink}
+        <small className="short-urls-visits-count__max-visits-control" ref={tooltipRef}>
+          {maxVisits && <> / {prettify(maxVisits)}</>}
+          <sup className="ms-1">
+            <FontAwesomeIcon icon={infoIcon} />
+          </sup>
+        </small>
+      </span>
+      <UncontrolledTooltip target={tooltipRef} placement="bottom">
+        <ul className="list-unstyled mb-0">
+          {maxVisits && (
+            <li className="short-url-visits-count__tooltip-list-item">
+              This short URL will not accept more than <b>{prettify(maxVisits)}</b> visit{maxVisits === 1 ? '' : 's'}.
+            </li>
+          )}
+          {validSince && (
+            <li className="short-url-visits-count__tooltip-list-item">
+              This short URL will not accept visits
+              before <b className="indivisible">{formatHumanFriendly(parseISO(validSince))}</b>.
+            </li>
+          )}
+          {validUntil && (
+            <li className="short-url-visits-count__tooltip-list-item">
+              This short URL will not accept visits
+              after <b className="indivisible">{formatHumanFriendly(parseISO(validUntil))}</b>.
+            </li>
+          )}
+        </ul>
+      </UncontrolledTooltip>
+    </>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/ShortUrlsFilterDropdown.tsx
+++ b/shlink-web-component/short-urls/helpers/ShortUrlsFilterDropdown.tsx
@@ -0,0 +1,46 @@
+import { DropdownItem } from 'reactstrap';
+import { DropdownBtn } from '../../../src/utils/DropdownBtn';
+import { hasValue } from '../../../src/utils/utils';
+import type { ShortUrlsFilter } from '../data';
+
+interface ShortUrlsFilterDropdownProps {
+  onChange: (filters: ShortUrlsFilter) => void;
+  supportsDisabledFiltering: boolean;
+  selected?: ShortUrlsFilter;
+  className?: string;
+}
+
+export const ShortUrlsFilterDropdown = (
+  { onChange, selected = {}, className, supportsDisabledFiltering }: ShortUrlsFilterDropdownProps,
+) => {
+  const { excludeBots = false, excludeMaxVisitsReached = false, excludePastValidUntil = false } = selected;
+  const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] });
+
+  return (
+    <DropdownBtn text="Filters" dropdownClassName={className} inline end minWidth={250}>
+      <DropdownItem header>Visits:</DropdownItem>
+      <DropdownItem active={excludeBots} onClick={onFilterClick('excludeBots')}>Ignore visits from bots</DropdownItem>
+
+      {supportsDisabledFiltering && (
+        <>
+          <DropdownItem divider />
+          <DropdownItem header>Short URLs:</DropdownItem>
+          <DropdownItem active={excludeMaxVisitsReached} onClick={onFilterClick('excludeMaxVisitsReached')}>
+            Exclude with visits reached
+          </DropdownItem>
+          <DropdownItem active={excludePastValidUntil} onClick={onFilterClick('excludePastValidUntil')}>
+            Exclude enabled in the past
+          </DropdownItem>
+        </>
+      )}
+
+      <DropdownItem divider />
+      <DropdownItem
+        disabled={!hasValue(selected)}
+        onClick={() => onChange({ excludeBots: false, excludeMaxVisitsReached: false, excludePastValidUntil: false })}
+      >
+        <i>Clear filters</i>
+      </DropdownItem>
+    </DropdownBtn>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/ShortUrlsRow.scss
+++ b/shlink-web-component/short-urls/helpers/ShortUrlsRow.scss
@@ -0,0 +1,41 @@
+@import '../../../src/utils/base';
+@import '../../../src/utils/mixins/text-ellipsis';
+@import '../../../src/utils/mixins/vertical-align';
+
+.short-urls-row__cell.short-urls-row__cell {
+  vertical-align: middle !important;
+}
+
+.short-urls-row__cell--break {
+  word-break: break-all;
+}
+
+.short-urls-row__cell--indivisible {
+  @media (min-width: $lgMin) {
+    white-space: nowrap;
+  }
+}
+
+.short-urls-row__short-url-wrapper {
+  @media (max-width: $mdMax) {
+    word-break: break-all;
+  }
+
+  @media (min-width: $lgMin) {
+    @include text-ellipsis();
+
+    vertical-align: bottom;
+    display: inline-block;
+    max-width: 18rem;
+  }
+}
+
+.short-urls-row__copy-hint {
+  @include vertical-align(translateX(10px));
+
+  box-shadow: 0 3px 15px rgba(0, 0, 0, .25);
+
+  @media (max-width: $responsiveTableBreakpoint) {
+    @include vertical-align(translateX(calc(-100% - 20px)));
+  }
+}
--- a/shlink-web-component/short-urls/helpers/ShortUrlsRow.tsx
+++ b/shlink-web-component/short-urls/helpers/ShortUrlsRow.tsx
@@ -0,0 +1,89 @@
+import type { FC } from 'react';
+import { useEffect, useRef } from 'react';
+import { ExternalLink } from 'react-external-link';
+import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
+import { Time } from '../../../src/utils/dates/Time';
+import type { TimeoutToggle } from '../../../src/utils/helpers/hooks';
+import type { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
+import { useSetting } from '../../utils/settings';
+import type { ShortUrl } from '../data';
+import { useShortUrlsQuery } from './hooks';
+import type { ShortUrlsRowMenuType } from './ShortUrlsRowMenu';
+import { ShortUrlStatus } from './ShortUrlStatus';
+import { ShortUrlVisitsCount } from './ShortUrlVisitsCount';
+import { Tags } from './Tags';
+import './ShortUrlsRow.scss';
+
+interface ShortUrlsRowProps {
+  onTagClick?: (tag: string) => void;
+  shortUrl: ShortUrl;
+}
+
+export type ShortUrlsRowType = FC<ShortUrlsRowProps>;
+
+export const ShortUrlsRow = (
+  ShortUrlsRowMenu: ShortUrlsRowMenuType,
+  colorGenerator: ColorGenerator,
+  useTimeoutToggle: TimeoutToggle,
+) => ({ shortUrl, onTagClick }: ShortUrlsRowProps) => {
+  const [copiedToClipboard, setCopiedToClipboard] = useTimeoutToggle();
+  const [active, setActive] = useTimeoutToggle(false, 500);
+  const isFirstRun = useRef(true);
+  const [{ excludeBots }] = useShortUrlsQuery();
+  const visits = useSetting('visits');
+  const doExcludeBots = excludeBots ?? visits?.excludeBots;
+
+  useEffect(() => {
+    !isFirstRun.current && setActive();
+    isFirstRun.current = false;
+  }, [shortUrl.visitsSummary?.total, shortUrl.visitsSummary?.nonBots, shortUrl.visitsCount]);
+
+  return (
+    <tr className="responsive-table__row">
+      <td className="indivisible short-urls-row__cell responsive-table__cell" data-th="Created at">
+        <Time date={shortUrl.dateCreated} />
+      </td>
+      <td className="responsive-table__cell short-urls-row__cell" data-th="Short URL">
+        <span className="position-relative short-urls-row__cell--indivisible">
+          <span className="short-urls-row__short-url-wrapper">
+            <ExternalLink href={shortUrl.shortUrl} />
+          </span>
+          <CopyToClipboardIcon text={shortUrl.shortUrl} onCopy={setCopiedToClipboard} />
+          <span className="badge bg-warning text-black short-urls-row__copy-hint" hidden={!copiedToClipboard}>
+            Copied short URL!
+          </span>
+        </span>
+      </td>
+      <td
+        className="responsive-table__cell short-urls-row__cell short-urls-row__cell--break"
+        data-th={`${shortUrl.title ? 'Title' : 'Long URL'}`}
+      >
+        <ExternalLink href={shortUrl.longUrl}>{shortUrl.title ?? shortUrl.longUrl}</ExternalLink>
+      </td>
+      {shortUrl.title && (
+        <td className="short-urls-row__cell responsive-table__cell short-urls-row__cell--break d-lg-none" data-th="Long URL">
+          <ExternalLink href={shortUrl.longUrl} />
+        </td>
+      )}
+      <td className="responsive-table__cell short-urls-row__cell" data-th="Tags">
+        <Tags tags={shortUrl.tags} colorGenerator={colorGenerator} onTagClick={onTagClick} />
+      </td>
+      <td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits">
+        <ShortUrlVisitsCount
+          visitsCount={(
+            doExcludeBots ? shortUrl.visitsSummary?.nonBots : shortUrl.visitsSummary?.total
+          ) ?? shortUrl.visitsCount}
+          shortUrl={shortUrl}
+          active={active}
+          asLink
+        />
+      </td>
+      <td className="responsive-table__cell short-urls-row__cell" data-th="Status">
+        <ShortUrlStatus shortUrl={shortUrl} />
+      </td>
+      <td className="responsive-table__cell short-urls-row__cell text-end">
+        <ShortUrlsRowMenu shortUrl={shortUrl} />
+      </td>
+    </tr>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/ShortUrlsRowMenu.tsx
+++ b/shlink-web-component/short-urls/helpers/ShortUrlsRowMenu.tsx
@@ -0,0 +1,52 @@
+import {
+  faChartPie as pieChartIcon,
+  faEdit as editIcon,
+  faMinusCircle as deleteIcon,
+  faQrcode as qrIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC } from 'react';
+import { DropdownItem } from 'reactstrap';
+import { useToggle } from '../../../src/utils/helpers/hooks';
+import { RowDropdownBtn } from '../../../src/utils/RowDropdownBtn';
+import type { ShortUrl, ShortUrlModalProps } from '../data';
+import { ShortUrlDetailLink } from './ShortUrlDetailLink';
+
+interface ShortUrlsRowMenuProps {
+  shortUrl: ShortUrl;
+}
+type ShortUrlModal = FC<ShortUrlModalProps>;
+
+export const ShortUrlsRowMenu = (
+  DeleteShortUrlModal: ShortUrlModal,
+  QrCodeModal: ShortUrlModal,
+) => ({ shortUrl }: ShortUrlsRowMenuProps) => {
+  const [isQrModalOpen,, openQrCodeModal, closeQrCodeModal] = useToggle();
+  const [isDeleteModalOpen,, openDeleteModal, closeDeleteModal] = useToggle();
+
+  return (
+    <RowDropdownBtn minWidth={190}>
+      <DropdownItem tag={ShortUrlDetailLink} shortUrl={shortUrl} suffix="visits">
+        <FontAwesomeIcon icon={pieChartIcon} fixedWidth /> Visit stats
+      </DropdownItem>
+
+      <DropdownItem tag={ShortUrlDetailLink} shortUrl={shortUrl} suffix="edit">
+        <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit short URL
+      </DropdownItem>
+
+      <DropdownItem onClick={openQrCodeModal}>
+        <FontAwesomeIcon icon={qrIcon} fixedWidth /> QR code
+      </DropdownItem>
+      <QrCodeModal shortUrl={shortUrl} isOpen={isQrModalOpen} toggle={closeQrCodeModal} />
+
+      <DropdownItem divider />
+
+      <DropdownItem className="dropdown-item--danger" onClick={openDeleteModal}>
+        <FontAwesomeIcon icon={deleteIcon} fixedWidth /> Delete short URL
+      </DropdownItem>
+      <DeleteShortUrlModal shortUrl={shortUrl} isOpen={isDeleteModalOpen} toggle={closeDeleteModal} />
+    </RowDropdownBtn>
+  );
+};
+
+export type ShortUrlsRowMenuType = ReturnType<typeof ShortUrlsRowMenu>;
--- a/shlink-web-component/short-urls/helpers/Tags.tsx
+++ b/shlink-web-component/short-urls/helpers/Tags.tsx
@@ -0,0 +1,29 @@
+import { isEmpty } from 'ramda';
+import type { FC } from 'react';
+import type { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
+import { Tag } from '../../tags/helpers/Tag';
+
+interface TagsProps {
+  tags: string[];
+  onTagClick?: (tag: string) => void;
+  colorGenerator: ColorGenerator;
+}
+
+export const Tags: FC<TagsProps> = ({ tags, onTagClick, colorGenerator }) => {
+  if (isEmpty(tags)) {
+    return <i className="indivisible"><small>No tags</small></i>;
+  }
+
+  return (
+    <>
+      {tags.map((tag) => (
+        <Tag
+          key={tag}
+          text={tag}
+          colorGenerator={colorGenerator}
+          onClick={() => onTagClick?.(tag)}
+        />
+      ))}
+    </>
+  );
+};
--- a/shlink-web-component/short-urls/helpers/hooks.ts
+++ b/shlink-web-component/short-urls/helpers/hooks.ts
@@ -0,0 +1,78 @@
+import { isEmpty, pipe } from 'ramda';
+import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { orderToString, stringToOrder } from '../../../src/utils/helpers/ordering';
+import { parseQuery, stringifyQuery } from '../../../src/utils/helpers/query';
+import type { BooleanString } from '../../../src/utils/utils';
+import { parseOptionalBooleanToString } from '../../../src/utils/utils';
+import type { TagsFilteringMode } from '../../api-contract';
+import { useRoutesPrefix } from '../../utils/routesPrefix';
+import type { ShortUrlsOrder, ShortUrlsOrderableFields } from '../data';
+
+interface ShortUrlsQueryCommon {
+  search?: string;
+  startDate?: string;
+  endDate?: string;
+  tagsMode?: TagsFilteringMode;
+}
+
+interface ShortUrlsQuery extends ShortUrlsQueryCommon {
+  orderBy?: string;
+  tags?: string;
+  excludeBots?: BooleanString;
+  excludeMaxVisitsReached?: BooleanString;
+  excludePastValidUntil?: BooleanString;
+}
+
+interface ShortUrlsFiltering extends ShortUrlsQueryCommon {
+  orderBy?: ShortUrlsOrder;
+  tags: string[];
+  excludeBots?: boolean;
+  excludeMaxVisitsReached?: boolean;
+  excludePastValidUntil?: boolean;
+}
+
+type ToFirstPage = (extra: Partial<ShortUrlsFiltering>) => void;
+
+export const useShortUrlsQuery = (): [ShortUrlsFiltering, ToFirstPage] => {
+  const navigate = useNavigate();
+  const { search } = useLocation();
+  const routesPrefix = useRoutesPrefix();
+
+  const filtering = useMemo(
+    pipe(
+      () => parseQuery<ShortUrlsQuery>(search),
+      ({ orderBy, tags, excludeBots, excludeMaxVisitsReached, excludePastValidUntil, ...rest }): ShortUrlsFiltering => {
+        const parsedOrderBy = orderBy ? stringToOrder<ShortUrlsOrderableFields>(orderBy) : undefined;
+        const parsedTags = tags?.split(',') ?? [];
+        return {
+          ...rest,
+          orderBy: parsedOrderBy,
+          tags: parsedTags,
+          excludeBots: excludeBots !== undefined ? excludeBots === 'true' : undefined,
+          excludeMaxVisitsReached: excludeMaxVisitsReached !== undefined ? excludeMaxVisitsReached === 'true' : undefined,
+          excludePastValidUntil: excludePastValidUntil !== undefined ? excludePastValidUntil === 'true' : undefined,
+        };
+      },
+    ),
+    [search],
+  );
+  const toFirstPageWithExtra = (extra: Partial<ShortUrlsFiltering>) => {
+    const merged = { ...filtering, ...extra };
+    const { orderBy, tags, excludeBots, excludeMaxVisitsReached, excludePastValidUntil, ...mergedFiltering } = merged;
+    const query: ShortUrlsQuery = {
+      ...mergedFiltering,
+      orderBy: orderBy && orderToString(orderBy),
+      tags: tags.length > 0 ? tags.join(',') : undefined,
+      excludeBots: parseOptionalBooleanToString(excludeBots),
+      excludeMaxVisitsReached: parseOptionalBooleanToString(excludeMaxVisitsReached),
+      excludePastValidUntil: parseOptionalBooleanToString(excludePastValidUntil),
+    };
+    const stringifiedQuery = stringifyQuery(query);
+    const queryString = isEmpty(stringifiedQuery) ? '' : `?${stringifiedQuery}`;
+
+    navigate(`${routesPrefix}/list-short-urls/1${queryString}`);
+  };
+
+  return [filtering, toFirstPageWithExtra];
+};
--- a/shlink-web-component/short-urls/helpers/index.ts
+++ b/shlink-web-component/short-urls/helpers/index.ts
@@ -0,0 +1,49 @@
+import { isNil } from 'ramda';
+import type { OptionalString } from '../../../src/utils/utils';
+import type { ShortUrlCreationSettings } from '../../utils/settings';
+import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
+import type { ShortUrl, ShortUrlData } from '../data';
+
+export const shortUrlMatches = (shortUrl: ShortUrl, shortCode: string, domain: OptionalString): boolean => {
+  if (isNil(domain)) {
+    return shortUrl.shortCode === shortCode && !shortUrl.domain;
+  }
+
+  return shortUrl.shortCode === shortCode && shortUrl.domain === domain;
+};
+
+export const domainMatches = (shortUrl: ShortUrl, domain: string): boolean => {
+  if (!shortUrl.domain && domain === DEFAULT_DOMAIN) {
+    return true;
+  }
+
+  return shortUrl.domain === domain;
+};
+
+export const shortUrlDataFromShortUrl = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSettings): ShortUrlData => {
+  const validateUrl = settings?.validateUrls ?? false;
+
+  if (!shortUrl) {
+    return { longUrl: '', validateUrl };
+  }
+
+  return {
+    longUrl: shortUrl.longUrl,
+    tags: shortUrl.tags,
+    title: shortUrl.title ?? undefined,
+    domain: shortUrl.domain ?? undefined,
+    validSince: shortUrl.meta.validSince ?? undefined,
+    validUntil: shortUrl.meta.validUntil ?? undefined,
+    maxVisits: shortUrl.meta.maxVisits ?? undefined,
+    crawlable: shortUrl.crawlable,
+    forwardQuery: shortUrl.forwardQuery,
+    deviceLongUrls: shortUrl.deviceLongUrls,
+    validateUrl,
+  };
+};
+
+const MULTI_SEGMENT_SEPARATOR = '__';
+
+export const urlEncodeShortCode = (shortCode: string): string => shortCode.replaceAll('/', MULTI_SEGMENT_SEPARATOR);
+
+export const urlDecodeShortCode = (shortCode: string): string => shortCode.replaceAll(MULTI_SEGMENT_SEPARATOR, '/');
--- a/shlink-web-component/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.tsx
+++ b/shlink-web-component/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.tsx
@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+import { DropdownItem } from 'reactstrap';
+import { DropdownBtn } from '../../../../src/utils/DropdownBtn';
+import type { QrErrorCorrection } from '../../../../src/utils/helpers/qrCodes';
+
+interface QrErrorCorrectionDropdownProps {
+  errorCorrection: QrErrorCorrection;
+  setErrorCorrection: (errorCorrection: QrErrorCorrection) => void;
+}
+
+export const QrErrorCorrectionDropdown: FC<QrErrorCorrectionDropdownProps> = (
+  { errorCorrection, setErrorCorrection },
+) => (
+  <DropdownBtn text={`Error correction (${errorCorrection})`}>
+    <DropdownItem active={errorCorrection === 'L'} onClick={() => setErrorCorrection('L')}>
+      <b>L</b>ow
+    </DropdownItem>
+    <DropdownItem active={errorCorrection === 'M'} onClick={() => setErrorCorrection('M')}>
+      <b>M</b>edium
+    </DropdownItem>
+    <DropdownItem active={errorCorrection === 'Q'} onClick={() => setErrorCorrection('Q')}>
+      <b>Q</b>uartile
+    </DropdownItem>
+    <DropdownItem active={errorCorrection === 'H'} onClick={() => setErrorCorrection('H')}>
+      <b>H</b>igh
+    </DropdownItem>
+  </DropdownBtn>
+);
--- a/shlink-web-component/short-urls/helpers/qr-codes/QrFormatDropdown.tsx
+++ b/shlink-web-component/short-urls/helpers/qr-codes/QrFormatDropdown.tsx
@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+import { DropdownItem } from 'reactstrap';
+import { DropdownBtn } from '../../../../src/utils/DropdownBtn';
+import type { QrCodeFormat } from '../../../../src/utils/helpers/qrCodes';
+
+interface QrFormatDropdownProps {
+  format: QrCodeFormat;
+  setFormat: (format: QrCodeFormat) => void;
+}
+
+export const QrFormatDropdown: FC<QrFormatDropdownProps> = ({ format, setFormat }) => (
+  <DropdownBtn text={`Format (${format})`}>
+    <DropdownItem active={format === 'png'} onClick={() => setFormat('png')}>PNG</DropdownItem>
+    <DropdownItem active={format === 'svg'} onClick={() => setFormat('svg')}>SVG</DropdownItem>
+  </DropdownBtn>
+);
--- a/shlink-web-component/short-urls/reducers/shortUrlCreation.ts
+++ b/shlink-web-component/short-urls/reducers/shortUrlCreation.ts
@@ -0,0 +1,69 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../../src/utils/helpers/redux';
+import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
+import { parseApiError } from '../../api-contract/utils';
+import type { ShortUrl, ShortUrlData } from '../data';
+
+const REDUCER_PREFIX = 'shlink/shortUrlCreation';
+
+export type ShortUrlCreation = {
+  saving: false;
+  saved: false;
+  error: false;
+} | {
+  saving: true;
+  saved: false;
+  error: false;
+} | {
+  saving: false;
+  saved: false;
+  error: true;
+  errorData?: ProblemDetailsError;
+} | {
+  result: ShortUrl;
+  saving: false;
+  saved: true;
+  error: false;
+};
+
+export type CreateShortUrlAction = PayloadAction<ShortUrl>;
+
+const initialState: ShortUrlCreation = {
+  saving: false,
+  saved: false,
+  error: false,
+};
+
+export const createShortUrl = (apiClient: ShlinkApiClient) => createAsyncThunk(
+  `${REDUCER_PREFIX}/createShortUrl`,
+  (data: ShortUrlData): Promise<ShortUrl> => apiClient.createShortUrl(data),
+);
+
+export const shortUrlCreationReducerCreator = (createShortUrlThunk: ReturnType<typeof createShortUrl>) => {
+  const { reducer, actions } = createSlice({
+    name: REDUCER_PREFIX,
+    initialState: initialState as ShortUrlCreation, // Without this casting it infers type ShortUrlCreationWaiting
+    reducers: {
+      resetCreateShortUrl: () => initialState,
+    },
+    extraReducers: (builder) => {
+      builder.addCase(createShortUrlThunk.pending, () => ({ saving: true, saved: false, error: false }));
+      builder.addCase(
+        createShortUrlThunk.rejected,
+        (_, { error }) => ({ saving: false, saved: false, error: true, errorData: parseApiError(error) }),
+      );
+      builder.addCase(
+        createShortUrlThunk.fulfilled,
+        (_, { payload: result }) => ({ result, saving: false, saved: true, error: false }),
+      );
+    },
+  });
+
+  const { resetCreateShortUrl } = actions;
+
+  return {
+    reducer,
+    resetCreateShortUrl,
+  };
+};
--- a/shlink-web-component/short-urls/reducers/shortUrlDeletion.ts
+++ b/shlink-web-component/short-urls/reducers/shortUrlDeletion.ts
@@ -0,0 +1,58 @@
+import { createAction, createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../../src/utils/helpers/redux';
+import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
+import { parseApiError } from '../../api-contract/utils';
+import type { ShortUrl, ShortUrlIdentifier } from '../data';
+
+const REDUCER_PREFIX = 'shlink/shortUrlDeletion';
+
+export interface ShortUrlDeletion {
+  shortCode: string;
+  loading: boolean;
+  deleted: boolean;
+  error: boolean;
+  errorData?: ProblemDetailsError;
+}
+
+const initialState: ShortUrlDeletion = {
+  shortCode: '',
+  loading: false,
+  deleted: false,
+  error: false,
+};
+
+export const deleteShortUrl = (apiClient: ShlinkApiClient) => createAsyncThunk(
+  `${REDUCER_PREFIX}/deleteShortUrl`,
+  async ({ shortCode, domain }: ShortUrlIdentifier): Promise<ShortUrlIdentifier> => {
+    await apiClient.deleteShortUrl(shortCode, domain);
+    return { shortCode, domain };
+  },
+);
+
+export const shortUrlDeleted = createAction<ShortUrl>(`${REDUCER_PREFIX}/shortUrlDeleted`);
+
+export const shortUrlDeletionReducerCreator = (deleteShortUrlThunk: ReturnType<typeof deleteShortUrl>) => {
+  const { actions, reducer } = createSlice({
+    name: REDUCER_PREFIX,
+    initialState,
+    reducers: {
+      resetDeleteShortUrl: () => initialState,
+    },
+    extraReducers: (builder) => {
+      builder.addCase(
+        deleteShortUrlThunk.pending,
+        (state) => ({ ...state, loading: true, error: false, deleted: false }),
+      );
+      builder.addCase(deleteShortUrlThunk.rejected, (state, { error }) => (
+        { ...state, errorData: parseApiError(error), loading: false, error: true, deleted: false }
+      ));
+      builder.addCase(deleteShortUrlThunk.fulfilled, (state, { payload }) => (
+        { ...state, shortCode: payload.shortCode, loading: false, error: false, deleted: true }
+      ));
+    },
+  });
+
+  const { resetDeleteShortUrl } = actions;
+
+  return { reducer, resetDeleteShortUrl };
+};
--- a/shlink-web-component/short-urls/reducers/shortUrlDetail.ts
+++ b/shlink-web-component/short-urls/reducers/shortUrlDetail.ts
@@ -0,0 +1,50 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../../src/utils/helpers/redux';
+import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
+import { parseApiError } from '../../api-contract/utils';
+import type { ShortUrl, ShortUrlIdentifier } from '../data';
+import { shortUrlMatches } from '../helpers';
+
+const REDUCER_PREFIX = 'shlink/shortUrlDetail';
+
+export interface ShortUrlDetail {
+  shortUrl?: ShortUrl;
+  loading: boolean;
+  error: boolean;
+  errorData?: ProblemDetailsError;
+}
+
+export type ShortUrlDetailAction = PayloadAction<ShortUrl>;
+
+const initialState: ShortUrlDetail = {
+  loading: false,
+  error: false,
+};
+
+export const shortUrlDetailReducerCreator = (apiClient: ShlinkApiClient) => {
+  const getShortUrlDetail = createAsyncThunk(
+    `${REDUCER_PREFIX}/getShortUrlDetail`,
+    async ({ shortCode, domain }: ShortUrlIdentifier, { getState }): Promise<ShortUrl> => {
+      const { shortUrlsList } = getState();
+      const alreadyLoaded = shortUrlsList?.shortUrls?.data.find((url) => shortUrlMatches(url, shortCode, domain));
+
+      return alreadyLoaded ?? await apiClient.getShortUrl(shortCode, domain);
+    },
+  );
+
+  const { reducer } = createSlice({
+    name: REDUCER_PREFIX,
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+      builder.addCase(getShortUrlDetail.pending, () => ({ loading: true, error: false }));
+      builder.addCase(getShortUrlDetail.rejected, (_, { error }) => (
+        { loading: false, error: true, errorData: parseApiError(error) }
+      ));
+      builder.addCase(getShortUrlDetail.fulfilled, (_, { payload: shortUrl }) => ({ ...initialState, shortUrl }));
+    },
+  });
+
+  return { reducer, getShortUrlDetail };
+};
--- a/shlink-web-component/short-urls/reducers/shortUrlEdition.ts
+++ b/shlink-web-component/short-urls/reducers/shortUrlEdition.ts
@@ -0,0 +1,52 @@
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../../src/utils/helpers/redux';
+import type { ProblemDetailsError, ShlinkApiClient } from '../../api-contract';
+import { parseApiError } from '../../api-contract/utils';
+import type { EditShortUrlData, ShortUrl, ShortUrlIdentifier } from '../data';
+
+const REDUCER_PREFIX = 'shlink/shortUrlEdition';
+
+export interface ShortUrlEdition {
+  shortUrl?: ShortUrl;
+  saving: boolean;
+  saved: boolean;
+  error: boolean;
+  errorData?: ProblemDetailsError;
+}
+
+export interface EditShortUrl extends ShortUrlIdentifier {
+  data: EditShortUrlData;
+}
+
+export type ShortUrlEditedAction = PayloadAction<ShortUrl>;
+
+const initialState: ShortUrlEdition = {
+  saving: false,
+  saved: false,
+  error: false,
+};
+
+export const editShortUrl = (apiClient: ShlinkApiClient) => createAsyncThunk(
+  `${REDUCER_PREFIX}/editShortUrl`,
+  ({ shortCode, domain, data }: EditShortUrl): Promise<ShortUrl> =>
+    apiClient.updateShortUrl(shortCode, domain, data as any) // TODO parse dates
+  ,
+);
+
+export const shortUrlEditionReducerCreator = (editShortUrlThunk: ReturnType<typeof editShortUrl>) => createSlice({
+  name: REDUCER_PREFIX,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(editShortUrlThunk.pending, (state) => ({ ...state, saving: true, error: false, saved: false }));
+    builder.addCase(
+      editShortUrlThunk.rejected,
+      (state, { error }) => ({ ...state, saving: false, error: true, saved: false, errorData: parseApiError(error) }),
+    );
+    builder.addCase(
+      editShortUrlThunk.fulfilled,
+      (_, { payload: shortUrl }) => ({ shortUrl, saving: false, error: false, saved: true }),
+    );
+  },
+});
--- a/shlink-web-component/short-urls/reducers/shortUrlsList.ts
+++ b/shlink-web-component/short-urls/reducers/shortUrlsList.ts
@@ -0,0 +1,111 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { assocPath, last, pipe, reject } from 'ramda';
+import { createAsyncThunk } from '../../../src/utils/helpers/redux';
+import type { ShlinkApiClient, ShlinkShortUrlsListParams, ShlinkShortUrlsResponse } from '../../api-contract';
+import { createNewVisits } from '../../visits/reducers/visitCreation';
+import type { ShortUrl } from '../data';
+import { shortUrlMatches } from '../helpers';
+import type { createShortUrl } from './shortUrlCreation';
+import { shortUrlDeleted } from './shortUrlDeletion';
+import type { editShortUrl } from './shortUrlEdition';
+
+const REDUCER_PREFIX = 'shlink/shortUrlsList';
+export const ITEMS_IN_OVERVIEW_PAGE = 5;
+
+export interface ShortUrlsList {
+  shortUrls?: ShlinkShortUrlsResponse;
+  loading: boolean;
+  error: boolean;
+}
+
+const initialState: ShortUrlsList = {
+  loading: true,
+  error: false,
+};
+
+export const listShortUrls = (apiClient: ShlinkApiClient) => createAsyncThunk(
+  `${REDUCER_PREFIX}/listShortUrls`,
+  (params: ShlinkShortUrlsListParams | void): Promise<ShlinkShortUrlsResponse> => apiClient.listShortUrls(params ?? {}),
+);
+
+export const shortUrlsListReducerCreator = (
+  listShortUrlsThunk: ReturnType<typeof listShortUrls>,
+  editShortUrlThunk: ReturnType<typeof editShortUrl>,
+  createShortUrlThunk: ReturnType<typeof createShortUrl>,
+) => createSlice({
+  name: REDUCER_PREFIX,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(listShortUrlsThunk.pending, (state) => ({ ...state, loading: true, error: false }));
+    builder.addCase(listShortUrlsThunk.rejected, () => ({ loading: false, error: true }));
+    builder.addCase(
+      listShortUrlsThunk.fulfilled,
+      (_, { payload: shortUrls }) => ({ loading: false, error: false, shortUrls }),
+    );
+
+    builder.addCase(
+      createShortUrlThunk.fulfilled,
+      pipe(
+        // The only place where the list and the creation form coexist is the overview page.
+        // There we can assume we are displaying page 1, and therefore, we can safely prepend the new short URL.
+        // We can also remove the items above the amount that is displayed there.
+        (state, { payload }) => (!state.shortUrls ? state : assocPath(
+          ['shortUrls', 'data'],
+          [payload, ...state.shortUrls.data.slice(0, ITEMS_IN_OVERVIEW_PAGE - 1)],
+          state,
+        )),
+        (state: ShortUrlsList) => (!state.shortUrls ? state : assocPath(
+          ['shortUrls', 'pagination', 'totalItems'],
+          state.shortUrls.pagination.totalItems + 1,
+          state,
+        )),
+      ),
+    );
+
+    builder.addCase(
+      editShortUrlThunk.fulfilled,
+      (state, { payload: editedShortUrl }) => (!state.shortUrls ? state : assocPath(
+        ['shortUrls', 'data'],
+        state.shortUrls.data.map((shortUrl) => {
+          const { shortCode, domain } = editedShortUrl;
+          return shortUrlMatches(shortUrl, shortCode, domain) ? editedShortUrl : shortUrl;
+        }),
+        state,
+      )),
+    );
+
+    builder.addCase(
+      shortUrlDeleted,
+      pipe(
+        (state, { payload }) => (!state.shortUrls ? state : assocPath(
+          ['shortUrls', 'data'],
+          reject<ShortUrl, ShortUrl[]>((shortUrl) =>
+            shortUrlMatches(shortUrl, payload.shortCode, payload.domain), state.shortUrls.data),
+          state,
+        )),
+        (state) => (!state.shortUrls ? state : assocPath(
+          ['shortUrls', 'pagination', 'totalItems'],
+          state.shortUrls.pagination.totalItems - 1,
+          state,
+        )),
+      ),
+    );
+
+    builder.addCase(
+      createNewVisits,
+      (state, { payload }) => assocPath(
+        ['shortUrls', 'data'],
+        state.shortUrls?.data?.map(
+          // Find the last of the new visit for this short URL, and pick its short URL. It will have an up-to-date amount of visits.
+          (currentShortUrl) => last(
+            payload.createdVisits.filter(
+              ({ shortUrl }) => shortUrl && shortUrlMatches(currentShortUrl, shortUrl.shortCode, shortUrl.domain),
+            ),
+          )?.shortUrl ?? currentShortUrl,
+        ),
+        state,
+      ),
+    );
+  },
+});
--- a/shlink-web-component/short-urls/services/provideServices.ts
+++ b/shlink-web-component/short-urls/services/provideServices.ts
@@ -0,0 +1,94 @@
+import type Bottle from 'bottlejs';
+import { prop } from 'ramda';
+import type { ConnectDecorator } from '../../container';
+import { CreateShortUrl } from '../CreateShortUrl';
+import { EditShortUrl } from '../EditShortUrl';
+import { CreateShortUrlResult } from '../helpers/CreateShortUrlResult';
+import { DeleteShortUrlModal } from '../helpers/DeleteShortUrlModal';
+import { ExportShortUrlsBtn } from '../helpers/ExportShortUrlsBtn';
+import { QrCodeModal } from '../helpers/QrCodeModal';
+import { ShortUrlsRow } from '../helpers/ShortUrlsRow';
+import { ShortUrlsRowMenu } from '../helpers/ShortUrlsRowMenu';
+import { createShortUrl, shortUrlCreationReducerCreator } from '../reducers/shortUrlCreation';
+import { deleteShortUrl, shortUrlDeleted, shortUrlDeletionReducerCreator } from '../reducers/shortUrlDeletion';
+import { shortUrlDetailReducerCreator } from '../reducers/shortUrlDetail';
+import { editShortUrl, shortUrlEditionReducerCreator } from '../reducers/shortUrlEdition';
+import { listShortUrls, shortUrlsListReducerCreator } from '../reducers/shortUrlsList';
+import { ShortUrlForm } from '../ShortUrlForm';
+import { ShortUrlsFilteringBar } from '../ShortUrlsFilteringBar';
+import { ShortUrlsList } from '../ShortUrlsList';
+import { ShortUrlsTable } from '../ShortUrlsTable';
+
+export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+  // Components
+  bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable', 'ShortUrlsFilteringBar');
+  bottle.decorator('ShortUrlsList', connect(
+    ['mercureInfo', 'shortUrlsList'],
+    ['listShortUrls', 'createNewVisits', 'loadMercureInfo'],
+  ));
+
+  bottle.serviceFactory('ShortUrlsTable', ShortUrlsTable, 'ShortUrlsRow');
+  bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useTimeoutToggle');
+  bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'QrCodeModal');
+  bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useTimeoutToggle');
+  bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'DomainSelector');
+
+  bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'ShortUrlForm', 'CreateShortUrlResult');
+  bottle.decorator(
+    'CreateShortUrl',
+    connect(['shortUrlCreation'], ['createShortUrl', 'resetCreateShortUrl']),
+  );
+
+  bottle.serviceFactory('EditShortUrl', EditShortUrl, 'ShortUrlForm');
+  bottle.decorator('EditShortUrl', connect(
+    ['shortUrlDetail', 'shortUrlEdition'],
+    ['getShortUrlDetail', 'editShortUrl'],
+  ));
+
+  bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
+  bottle.decorator('DeleteShortUrlModal', connect(
+    ['shortUrlDeletion'],
+    ['deleteShortUrl', 'shortUrlDeleted', 'resetDeleteShortUrl'],
+  ));
+
+  bottle.serviceFactory('QrCodeModal', QrCodeModal, 'ImageDownloader');
+  bottle.serviceFactory('ShortUrlsFilteringBar', ShortUrlsFilteringBar, 'ExportShortUrlsBtn', 'TagsSelector');
+
+  bottle.serviceFactory('ExportShortUrlsBtn', ExportShortUrlsBtn, 'apiClient', 'ReportExporter');
+
+  // Reducers
+  bottle.serviceFactory(
+    'shortUrlsListReducerCreator',
+    shortUrlsListReducerCreator,
+    'listShortUrls',
+    'editShortUrl',
+    'createShortUrl',
+  );
+  bottle.serviceFactory('shortUrlsListReducer', prop('reducer'), 'shortUrlsListReducerCreator');
+
+  bottle.serviceFactory('shortUrlCreationReducerCreator', shortUrlCreationReducerCreator, 'createShortUrl');
+  bottle.serviceFactory('shortUrlCreationReducer', prop('reducer'), 'shortUrlCreationReducerCreator');
+
+  bottle.serviceFactory('shortUrlEditionReducerCreator', shortUrlEditionReducerCreator, 'editShortUrl');
+  bottle.serviceFactory('shortUrlEditionReducer', prop('reducer'), 'shortUrlEditionReducerCreator');
+
+  bottle.serviceFactory('shortUrlDeletionReducerCreator', shortUrlDeletionReducerCreator, 'deleteShortUrl');
+  bottle.serviceFactory('shortUrlDeletionReducer', prop('reducer'), 'shortUrlDeletionReducerCreator');
+
+  bottle.serviceFactory('shortUrlDetailReducerCreator', shortUrlDetailReducerCreator, 'apiClient');
+  bottle.serviceFactory('shortUrlDetailReducer', prop('reducer'), 'shortUrlDetailReducerCreator');
+
+  // Actions
+  bottle.serviceFactory('listShortUrls', listShortUrls, 'apiClient');
+
+  bottle.serviceFactory('createShortUrl', createShortUrl, 'apiClient');
+  bottle.serviceFactory('resetCreateShortUrl', prop('resetCreateShortUrl'), 'shortUrlCreationReducerCreator');
+
+  bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'apiClient');
+  bottle.serviceFactory('resetDeleteShortUrl', prop('resetDeleteShortUrl'), 'shortUrlDeletionReducerCreator');
+  bottle.serviceFactory('shortUrlDeleted', () => shortUrlDeleted);
+
+  bottle.serviceFactory('getShortUrlDetail', prop('getShortUrlDetail'), 'shortUrlDetailReducerCreator');
+
+  bottle.serviceFactory('editShortUrl', editShortUrl, 'apiClient');
+};