feat: Vite 8 (#2018)

* chore: upgrade vite

* fix: inconsistentCjsInterop for ReactQR

* chore: e2e tests should use relativve path and get host from playwright config

* refactor: drop qr code dependency

---------

Co-authored-by: alex-Arc <omnivox@LAPTOP-RC5SNBVV.localdomain>

apps/client/src/common/components/qr-code/QrCode.module.scss

@@ -0,0 +1,22 @@
+@use '@/theme/viewerDefs' as *;
+
+.square {
+  border-radius: $component-border-radius-sm;
+  background-color: $viewer-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.blink {
+  animation: blink 1s ease-in-out infinite alternate;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 10%;
+  }
+  100% {
+    opacity: 100%;
+  }
+}

apps/client/src/common/components/qr-code/QrCode.tsx

@@ -0,0 +1,43 @@
+import { toString } from 'qrcode';
+import { Suspense, use } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './QrCode.module.scss';
+
+interface QRCodeProps {
+  value: string;
+  size: number;
+}
+
+export default function QRCode({ value, size }: QRCodeProps) {
+  'use memo';
+  const svgPromise = toString(value, {
+    width: size,
+    margin: 2,
+    color: { dark: '#101010', light: '#cfcfcf' },
+  });
+
+  return (
+    <Suspense fallback={<QrFallback size={size} />}>
+      <QrSvg svgPromise={svgPromise} size={size} />
+    </Suspense>
+  );
+}
+
+function QrFallback({ size }: { size: number }) {
+  'use memo';
+  return <span style={{ width: size + 2, height: size + 2 }} className={cx([style.blink, style.square])} />;
+}
+
+function QrSvg({ svgPromise, size }: { svgPromise: Promise<string>; size: number }) {
+  'use memo';
+  const svg = use(svgPromise);
+  return (
+    <span
+      className={style.square}
+      style={{ width: size + 2, height: size + 2 }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}