upgrade frontend packages

package.json

@@ -37,7 +37,7 @@
     "nx": "16.5.5",
     "prettier": "^2.8.4",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "vitest": "^0.33.0"
   }
 }

web/package.json

@@ -13,29 +13,29 @@
   },
   "dependencies": {
     "@filedrop/types": "*",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.4",
+    "@types/react": "18.0.18",
+    "@types/react-dom": "18.0.4",
     "@types/uuid": "^9.0.3",
     "@vitejs/plugin-react": "^4.0.3",
     "base64-js": "^1.5.1",
     "clsx": "^2.0.0",
     "eslint-config-react-app": "^7.0.1",
-    "filesize": "^10.0.8",
+    "filesize": "^10.1.0",
     "fitool": "^1.0.3",
     "i18not": "^0.1.2",
     "imtool": "^1.2.1",
     "matcrypt": "^1.3.0",
-    "mobx": "^6.10.0",
-    "mobx-react-lite": "^4.0.3",
+    "mobx": "^6.10.2",
+    "mobx-react-lite": "^4.0.5",
     "nanoanim": "^0.1.0",
     "pwanow": "^0.0.1",
-    "qrcode.react": "^3.0.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "qrcode.react": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-expanding-textarea": "^2.3.6",
     "react-i18not": "^0.1.1",
-    "react-icons": "^4.3.1",
-    "sass": "^1.51.0",
+    "react-icons": "^4.11.0",
+    "sass": "^1.69.4",
     "typesocket": "^1.0.2",
     "uuid": "^9.0.0",
     "vite-plugin-info": "^0.4.1",

web/src/components/CopyButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
-import { IoCopy } from 'react-icons/io5/index.js';
+import { IoCopy } from 'react-icons/io5';
 import { clsx } from 'clsx';
 
 import { useTimedState } from '../utils/hooks.js';

web/src/components/Header.tsx

@@ -4,7 +4,7 @@ import {
   IoLogoGithub,
   IoInformationCircle,
   IoLogoTwitter,
-} from 'react-icons/io5/index.js';
+} from 'react-icons/io5';
 import { Link } from 'wouter';
 import { observer } from 'mobx-react-lite';
 

web/src/components/Modal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { IoClose } from 'react-icons/io5/index.js';
+import { IoClose } from 'react-icons/io5';
 import { useTranslation } from 'react-i18not';
 
 import styles from './Modal.module.scss';

web/src/components/NetworkTile.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18not';
 import { motion } from 'nanoanim';
-import { IoAdd } from 'react-icons/io5/index.js';
+import { IoAdd } from 'react-icons/io5';
 import { ClientModel } from '@filedrop/types';
 
 import styles from './NetworkTile.module.scss';

web/src/components/SecureStatus.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
 import { observer } from 'mobx-react-lite';
-import { IoCheckmarkCircle, IoWarning } from 'react-icons/io5/index.js';
+import { IoCheckmarkCircle, IoWarning } from 'react-icons/io5';
 import clsx from 'clsx';
 
 import styles from './SecureStatus.module.scss';

web/src/components/TargetTile.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import {
-  IoLockClosed,
-  IoPhonePortrait,
-  IoHome,
-} from 'react-icons/io5/index.js';
+import { IoLockClosed, IoPhonePortrait, IoHome } from 'react-icons/io5';
 import { ClientModel, DeviceType } from '@filedrop/types';
 import { observer } from 'mobx-react-lite';
 

web/src/modals/ClipboardModal.tsx

@@ -15,7 +15,7 @@ interface ClipboardModalProps {
 export const ClipboardModal: React.FC<ClipboardModalProps> = observer(
   ({ files = [], dismissClipboard }) => {
     const { t } = useTranslation();
-    const fileNames = files.map((file, i) => file.name).join(', ');
+    const fileNames = files.map(file => file.name).join(', ');
     const clients = networkStore.clients;
 
     const onSelect = (clientId: string) => {

web/src/sections/Chat/index.tsx

@@ -3,12 +3,7 @@ import { useTranslation } from 'react-i18not';
 import { AnimatePresence, motion } from 'nanoanim';
 import Textarea from 'react-expanding-textarea';
 import { observer } from 'mobx-react-lite';
-import {
-  IoSend,
-  IoChatbox,
-  IoGlobe,
-  IoClipboard,
-} from 'react-icons/io5/index.js';
+import { IoSend, IoChatbox, IoGlobe, IoClipboard } from 'react-icons/io5';
 import clsx from 'clsx';
 
 import styles from './index.module.scss';
@@ -19,8 +14,6 @@ import { applicationStore, chatStore } from '../../stores/index.js';
 import { TargetTile } from '../../components/TargetTile.js';
 import { NotificationCount } from '../../components/NotificationCount.js';
 
-const TextareaComponent = Textarea as any;
-
 export const ChatSection: React.FC = observer(() => {
   const { t } = useTranslation();
   const chat = chatStore.items;
@@ -126,7 +119,7 @@ export const ChatSection: React.FC = observer(() => {
         )}
       </React.Fragment>
       <form onSubmit={onSubmit}>
-        <TextareaComponent
+        <Textarea
           value={message}
           onKeyDown={onKeyDown}
           onChange={(e: React.ChangeEvent) =>

web/src/sections/Connect/index.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import clsx from 'clsx';
 import { QRCodeSVG } from 'qrcode.react';
 import { useTranslation } from 'react-i18not';
-import { IoSend } from 'react-icons/io5/index.js';
+import { IoSend } from 'react-icons/io5';
 import { useLocation } from 'wouter';
 import { observer } from 'mobx-react-lite';
 

web/src/sections/MobileTabs/index.tsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  IoQrCode,
-  IoChatbubbles,
-  IoHome,
-  IoSettings,
-} from 'react-icons/io5/index.js';
+import { IoQrCode, IoChatbubbles, IoHome, IoSettings } from 'react-icons/io5';
 import { observer } from 'mobx-react-lite';
 
 import styles from './index.module.scss';

web/src/sections/Network/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18not';
-import { IoClipboard, IoCloseCircle } from 'react-icons/io5/index.js';
+import { IoClipboard, IoCloseCircle } from 'react-icons/io5';
 
 import styles from './index.module.scss';
 import { Network } from '../../components/Network.js';

web/src/sections/Transfers/Actions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IoCheckmarkDone, IoCloseSharp } from 'react-icons/io5/index.js';
+import { IoCheckmarkDone, IoCloseSharp } from 'react-icons/io5';
 import { useTranslation } from 'react-i18not';
 
 import styles from './Actions.module.scss';
@@ -14,7 +14,7 @@ export const Actions: React.FC<Props> = ({ transfers }) => {
   const { t } = useTranslation();
 
   if (transfers.length <= 1) {
-    return;
+    return null;
   }
 
   const acceptAll = () => {

web/src/sections/Transfers/Total.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18not';
-import { IoArrowDown, IoArrowUp } from 'react-icons/io5/index.js';
+import { IoArrowDown, IoArrowUp } from 'react-icons/io5';
 import { observer } from 'mobx-react-lite';
 
 import styles from './Total.module.scss';

web/src/sections/Transfers/Transfer/TransferActions.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  IoCloseSharp,
-  IoCheckmark,
-  IoArrowDown,
-} from 'react-icons/io5/index.js';
+import { IoCloseSharp, IoCheckmark, IoArrowDown } from 'react-icons/io5';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18not';
 

web/src/sections/Transfers/Transfer/TransferIcon.tsx

@@ -7,7 +7,7 @@ import {
   FaFileAudio,
   FaFileImage,
   FaFileArchive,
-} from 'react-icons/fa/index.js';
+} from 'react-icons/fa';
 
 import styles from './TransferIcon.module.scss';
 import { fileType } from '../../../utils/file.js';

web/src/sections/Transfers/Transfer/TransferTarget.tsx

@@ -9,7 +9,7 @@ import {
   FaAngleDoubleUp,
   FaHourglassHalf,
   FaHourglassEnd,
-} from 'react-icons/fa/index.js';
+} from 'react-icons/fa';
 import { observer } from 'mobx-react-lite';
 
 import styles from './TransferTarget.module.scss';

web/src/sections/YourTile/ClientName.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18not';
-import { IoPencil, IoCheckmark, IoCloseSharp } from 'react-icons/io5/index.js';
+import { IoPencil, IoCheckmark, IoCloseSharp } from 'react-icons/io5';
 import { observer } from 'mobx-react-lite';
 
 import styles from './ClientName.module.scss';

web/src/sections/YourTile/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18not';
-import { IoQrCode, IoSettings } from 'react-icons/io5/index.js';
+import { IoQrCode, IoSettings } from 'react-icons/io5';
 
 import styles from './index.module.scss';
 import { TargetTile } from '../../components/TargetTile.js';

web/src/stores/ApplicationStore.ts

@@ -16,7 +16,7 @@ export class ApplicationStore {
   modal?: string = undefined;
   showPaste = false;
 
-  constructor(private connection: Connection) {
+  constructor(connection: Connection) {
     makeAutoObservable(this);
 
     connection.on('message', message => this.onMessage(message as any));

web/tsconfig.json

@@ -1,19 +1,23 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": ["dom", "dom.iterable", "ES2020"],
-    "allowJs": true,
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "downlevelIteration": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "types": ["vite-plugin-info/client"]
   },