Extract shlink-web-component outside of src folder

shlink-web-component/short-urls/helpers/CreateShortUrlResult.scss

@@ -0,0 +1,4 @@
+.create-short-url-result__copy-btn {
+  margin-left: 10px;
+  vertical-align: inherit;
+}

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>
+  );
+};

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>
+  );
+};

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} />;
+};

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);
+}

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>
+  );
+};

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>;
+};

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>
+);

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>
+    </>
+  );
+};

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;
+}

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>
+    </>
+  );
+};

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>
+  );
+};

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)));
+  }
+}

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>
+  );
+};

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>;

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)}
+        />
+      ))}
+    </>
+  );
+};

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];
+};

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, '/');

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>
+);

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>
+);