update web dependencies

web/package.json

@@ -6,27 +6,27 @@
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "byte-formatter": "^1.0.1",
     "color": "^4.2.1",
-    "date-fns": "^2.28.0",
-    "debounce": "^1.2.1",
-    "emoji.json": "^14.0.0",
-    "fuse.js": "^6.6.2",
-    "i18next": "^22.4.14",
-    "i18next-browser-languagedetector": "^7.0.1",
+    "date-fns": "^4.1.0",
+    "debounce": "^2.1.1",
+    "emoji.json": "^15.1.0",
+    "fuse.js": "^7.0.0",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
-    "react-i18next": "^12.2.0",
-    "react-markdown": "^8.0.1",
+    "react-i18next": "^15.0.2",
+    "react-markdown": "^9.0.1",
     "react-router": "^6.0.2",
     "react-router-dom": "^6.2.1",
-    "react-scripts": "5.0.0",
-    "react-spinners": "^0.13.8",
+    "react-scripts": "5.0.1",
+    "react-spinners": "^0.14.1",
     "react-uid": "^2.3.1",
     "react-wavify": "^1.7.0",
     "sass": "^1.49.0",
-    "styled-components": "^5.3.0",
-    "web-vitals": "^3.3.1",
+    "styled-components": "^6.1.13",
+    "web-vitals": "^4.2.3",
     "zustand": "^4.3.7"
   },
   "devDependencies": {
@@ -39,11 +39,11 @@
     "@types/react-dom": "^18",
     "@types/react-router-dom": "^5",
     "@types/styled-components": "^5",
-    "@vitejs/plugin-react": "^1.2.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint-plugin-prettier": "^5.2.1",
     "typescript": "^5.0",
     "typescript-styled-plugin": "^0.18.1",
-    "vite": "^4.1.4",
+    "vite": "^5.4.8",
     "vite-plugin-pwa": "^0.14.4",
     "vite-plugin-svgr": "^1.0.1"
   },

web/src/components/CommandInfoTile/CommandInfoTile.tsx

@@ -84,7 +84,7 @@ export const CommandInfoTile: React.FC<Props> = ({ cmd }) => {
         <Embed>{cmd.domain}</Embed>
         <Embed>{cmd.version}</Embed>
         {cmd.dm_capable && (
-          <DMCapable title={t<string>('dmcapable')}>
+          <DMCapable title={t('dmcapable')}>
             <MailIcon />
           </DMCapable>
         )}

web/src/components/Modals/ModalCreateReport.tsx

@@ -73,7 +73,7 @@ export const ModalCreateReport: React.FC<Props> = ({
         rep.attachment_data = await readToBase64(attachment);
       } catch (e) {
         pushNotification({
-          message: t<string>('components:modalcreatereport.errors.attachment-convert-failed'),
+          message: t('components:modalcreatereport.errors.attachment-convert-failed'),
           type: 'ERROR',
         });
       }
@@ -109,7 +109,7 @@ export const ModalCreateReport: React.FC<Props> = ({
       onClose();
       if (goBack) nav(-1);
       pushNotification({
-        message: t<string>('components:modalcreatereport.successful'),
+        message: t('components:modalcreatereport.successful'),
         type: 'SUCCESS',
       });
     } catch (e) {}

web/src/components/Modals/ModalProcessUnbanRequest.tsx

@@ -72,7 +72,7 @@ export const ModalProcessUnbanRequest: React.FC<Props> = ({
     )
       .then((res) => {
         pushNotification({
-          message: t<string>(`notifications.${type}`),
+          message: t(`notifications.${type}`),
           type: 'SUCCESS',
         });
         onProcessed(res);
@@ -85,7 +85,7 @@ export const ModalProcessUnbanRequest: React.FC<Props> = ({
     <Modal
       show={show}
       onClose={onClose}
-      heading={t<string>(`title.${type}`)}
+      heading={t(`title.${type}`)}
       controls={
         <>
           <Button disabled={!setReason} onClick={_process}>

web/src/components/Modals/ModalRevokeReport.tsx

@@ -35,7 +35,7 @@ export const ModalRevokeReport: React.FC<Props> = ({ report, onClose = () => {},
     <Modal
       show={!!report}
       onClose={_onClose}
-      heading={t<string>('heading')}
+      heading={t('heading')}
       controls={
         <>
           <Button disabled={!reason} onClick={_onConfirm}>

web/src/components/Modals/ModalUnbanRequest.tsx

@@ -38,7 +38,7 @@ export const ModalUnbanRequest: React.FC<Props> = ({
     <Modal
       show={show}
       onClose={onClose}
-      heading={t<string>('heading')}
+      heading={t('heading')}
       controls={
         <>
           <Button disabled={!message} onClick={_onSend}>

web/src/components/Notifications/Notification.tsx

@@ -1,10 +1,11 @@
 import { Notification, NotificationMeta } from './models';
-import styled, { Keyframes, css, keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 
 import { ANIMATION_DELAY } from '../../hooks/useNotifications';
 import { ReactComponent as CloseIcon } from '../../assets/close.svg';
 import { Container } from '../Container';
 import { Heading } from '../Heading';
+import Keyframes from 'styled-components/dist/models/Keyframes';
 import { LinearGradient } from '../styleParts';
 
 type Props = {

web/src/components/PermissionSelector/PermissionSelector.tsx

@@ -156,7 +156,7 @@ export const PermissionSelector: React.FC<Props> = ({ perms, setPerms, available
     <Flex direction="column" gap="1em">
       {guild && (
         <RoleInput
-          placeholder={t<string>('placeholder.roles')}
+          placeholder={t('placeholder.roles')}
           guild={guild}
           selected={roles}
           onChange={setRoles}
@@ -168,7 +168,7 @@ export const PermissionSelector: React.FC<Props> = ({ perms, setPerms, available
           value={permission}
           setValue={setPermission}
           selections={available}
-          placeholder={t<string>('placeholder.perms')}
+          placeholder={t('placeholder.perms')}
         />
         <StyledSwitch
           enabled={allow}

web/src/components/Report/ReportsList.tsx

@@ -51,8 +51,8 @@ export const ReportsList: React.FC<Props> = ({
         if (i !== -1) reports.splice(i, 1);
         onReportsUpdated(reports);
         pushNotification({
-          heading: t<string>('notifications.reportrevoked.heading'),
-          message: t<string>('notifications.reportrevoked.message'),
+          heading: t('notifications.reportrevoked.heading'),
+          message: t('notifications.reportrevoked.message'),
           type: 'SUCCESS',
         });
       })

web/src/routes/Dashboard.tsx

@@ -32,8 +32,7 @@ export const DashboardRoute: React.FC<Props> = () => {
       nav('/welcome');
     } else if (loc.pathname.replaceAll('/', '') === 'db' && !guildid) {
       const guild =
-        guilds.find((g) => g.id === LocalStorageUtil.get<string>('shnp.selectedguild')) ??
-        guilds[0];
+        guilds.find((g) => g.id === LocalStorageUtil.get('shnp.selectedguild')) ?? guilds[0];
       nav(`guilds/${guild.id}/members`);
     }
   }, [guilds]);

web/src/routes/Dashboard/GuildSettings/API.tsx

@@ -106,7 +106,7 @@ const APIRoute: React.FC<Props> = () => {
       .then(_refresh)
       .then(() =>
         pushNotification({
-          message: t<string>('notifications.saved'),
+          message: t('notifications.saved'),
           type: 'SUCCESS',
         }),
       )
@@ -122,7 +122,7 @@ const APIRoute: React.FC<Props> = () => {
       .then(_refresh)
       .then(() =>
         pushNotification({
-          message: t<string>('notifications.reset'),
+          message: t('notifications.reset'),
           type: 'WARNING',
         }),
       )
@@ -157,7 +157,7 @@ const APIRoute: React.FC<Props> = () => {
           <Switch
             enabled={settings.enabled}
             onChange={(e) => dispatchSettings(['set_enabled', e])}
-            labelAfter={t<string>('settings.enable')}
+            labelAfter={t('settings.enable')}
           />
         )) || <Loader width="20em" height="2em" />}
         <div>
@@ -200,7 +200,7 @@ const APIRoute: React.FC<Props> = () => {
               )}
               <Input
                 type="password"
-                placeholder={t<string>(
+                placeholder={t(
                   `settings.token.placeholder.${settings.protected ? 'protected' : 'unprotected'}`,
                 )}
                 value={settings.token}

web/src/routes/Dashboard/GuildSettings/Antiraid.tsx

@@ -124,7 +124,7 @@ const AntiraidRoute: React.FC<Props> = () => {
     return fetch((c) => c.guilds.settings(guildid).setAntiraid(settings as AntiraidSettings))
       .then(() =>
         pushNotification({
-          message: t<string>('notifications.saved'),
+          message: t('notifications.saved'),
           type: 'SUCCESS',
         }),
       )
@@ -210,7 +210,7 @@ const AntiraidRoute: React.FC<Props> = () => {
         <Switch
           enabled={settings.state}
           onChange={(e) => dispatchSettings(['set_enabled', e])}
-          labelAfter={t<string>('enable')}
+          labelAfter={t('enable')}
         />
       )) || <Loader width="20em" height="2em" />}
 
@@ -247,7 +247,7 @@ const AntiraidRoute: React.FC<Props> = () => {
           <Switch
             enabled={settings.verification}
             onChange={(e) => dispatchSettings(['set_verification', e])}
-            labelAfter={t<string>('verification.switch_label')}
+            labelAfter={t('verification.switch_label')}
           />
         )) || <Loader width="20em" height="2em" />}
       </InputContainer>

web/src/routes/Dashboard/GuildSettings/Backup.tsx

@@ -73,7 +73,7 @@ const BackupRoute: React.FC<Props> = () => {
       .then(() => {
         currStateRef.current = enabled;
         pushNotification({
-          message: t<string>(enabled ? 'notifications.enabled' : 'notifications.disabled'),
+          message: t(enabled ? 'notifications.enabled' : 'notifications.disabled'),
           type: enabled ? 'SUCCESS' : 'WARNING',
         });
       })
@@ -118,7 +118,7 @@ const BackupRoute: React.FC<Props> = () => {
       <ControlContainer>
         {(guild && (
           <>
-            <Switch enabled={enabled} onChange={setEnabled} labelAfter={t<string>('toggle')} />
+            <Switch enabled={enabled} onChange={setEnabled} labelAfter={t('toggle')} />
             <ActionButton
               disabled={enabled === currStateRef.current}
               variant="green"

web/src/routes/Dashboard/GuildSettings/Codeexec.tsx

@@ -70,7 +70,7 @@ const VerificationRoute: React.FC<Props> = () => {
     return fetch((c) => c.guilds.settings(guildid).setCodeexec(settings as CodeExecSettings))
       .then(() =>
         pushNotification({
-          message: t<string>('notifications.saved'),
+          message: t('notifications.saved'),
           type: 'SUCCESS',
         }),
       )
@@ -95,7 +95,7 @@ const VerificationRoute: React.FC<Props> = () => {
         <Switch
           enabled={settings.enabled}
           onChange={(e) => dispatchSettings(['set_enabled', e])}
-          labelAfter={t<string>('enable')}
+          labelAfter={t('enable')}
         />
       )) || <Loader width="20em" height="2em" />}
 

web/src/routes/Dashboard/GuildSettings/Data.tsx

@@ -7,7 +7,7 @@ import { Flex } from '../../../components/Flex';
 import { Input } from '../../../components/Input';
 import { MaxWidthContainer } from '../../../components/MaxWidthContainer';
 import { Modal } from '../../../components/Modal';
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import ReactMarkdown from 'react-markdown';
 import { Switch } from '../../../components/Switch';
 import styled from 'styled-components';
 import { useApi } from '../../../hooks/useApi';
@@ -40,7 +40,7 @@ const DataRoute: React.FC<Props> = () => {
     if (!guildid || !guildName) return;
     fetch((c) => c.guilds.settings(guildid).flushData(kick, guildName))
       .then(() => {
-        pushNotification({ message: t<string>('notifications.success'), type: 'SUCCESS' });
+        pushNotification({ message: t('notifications.success'), type: 'SUCCESS' });
         if (kick) nav('/db');
       })
       .catch()
@@ -56,7 +56,7 @@ const DataRoute: React.FC<Props> = () => {
       <Modal
         show={showModal}
         onClose={() => setShowModal(false)}
-        heading={t<string>('modal.heading')}
+        heading={t('modal.heading')}
         controls={
           <>
             <Button disabled={guild?.name !== guildName} onClick={_confirmDelete}>
@@ -86,7 +86,7 @@ const DataRoute: React.FC<Props> = () => {
           <Button variant="red" onClick={() => setShowModal(true)}>
             {t('delete')}
           </Button>
-          <Switch labelAfter={t<string>('remove')} enabled={kick} onChange={setKick} />
+          <Switch labelAfter={t('remove')} enabled={kick} onChange={setKick} />
         </Controls>
       </MaxWidthContainer>
     </>

web/src/routes/Dashboard/GuildSettings/General.tsx

@@ -163,7 +163,7 @@ const GeneralRoute: React.FC<Props> = () => {
     return fetch((c) => c.guilds.settings(guildid).setSettings(gs))
       .then(() =>
         pushNotification({
-          message: t<string>('notifications.saved'),
+          message: t('notifications.saved'),
           type: 'SUCCESS',
         }),
       )
@@ -273,7 +273,7 @@ const GeneralRoute: React.FC<Props> = () => {
                 guild={guild}
                 selected={settings.autoroles}
                 onChange={(v) => dispatchSettings(['set_autoroles', v])}
-                placeholder={t<string>('autoroles.placeholder')}
+                placeholder={t('autoroles.placeholder')}
               />
             </Section>
           )}
@@ -287,7 +287,7 @@ const GeneralRoute: React.FC<Props> = () => {
                   options={textChannelOptions!}
                   value={settings.modlogchannel}
                   onElementSelect={(e) => dispatchSettings(['set_modlogchannel', e])}
-                  placeholder={t<string>('modlog.channel_placeholder')}
+                  placeholder={t('modlog.channel_placeholder')}
                 />
                 <Button onClick={() => dispatchSettings(['reset_modlogchannel'])}>
                   {t('reset')}
@@ -305,7 +305,7 @@ const GeneralRoute: React.FC<Props> = () => {
                   options={textChannelOptions!}
                   value={settings.modnotchannel}
                   onElementSelect={(e) => dispatchSettings(['set_modnotchannel', e])}
-                  placeholder={t<string>('modnot.channel_placeholder')}
+                  placeholder={t('modnot.channel_placeholder')}
                 />
                 <Button onClick={() => dispatchSettings(['reset_modnotchannel'])}>
                   {t('reset')}
@@ -323,7 +323,7 @@ const GeneralRoute: React.FC<Props> = () => {
                   options={textChannelOptions!}
                   value={settings.voicelogchannel}
                   onElementSelect={(e) => dispatchSettings(['set_voicelogchannel', e])}
-                  placeholder={t<string>('voicelog.channel_placeholder')}
+                  placeholder={t('voicelog.channel_placeholder')}
                 />
                 <Button onClick={() => dispatchSettings(['reset_voicelogchannel'])}>
                   {t('reset')}
@@ -342,7 +342,7 @@ const GeneralRoute: React.FC<Props> = () => {
                     options={textChannelOptions!}
                     value={settings.joinmessagechannel}
                     onElementSelect={(e) => dispatchSettings(['set_joinmessagechannel', e])}
-                    placeholder={t<string>('joinmessage.channel_placeholder')}
+                    placeholder={t('joinmessage.channel_placeholder')}
                   />
                   <Button onClick={() => dispatchSettings(['reset_joinmessagechannel'])}>
                     {t('reset')}
@@ -358,7 +358,7 @@ const GeneralRoute: React.FC<Props> = () => {
                 <div>
                   <Input
                     value={settings.joinmessagetext}
-                    placeholder={t<string>('joinmessage.message_placeholder')}
+                    placeholder={t('joinmessage.message_placeholder')}
                     onInput={(e) =>
                       dispatchSettings(['set_joinmessagetext', e.currentTarget.value])
                     }
@@ -377,13 +377,13 @@ const GeneralRoute: React.FC<Props> = () => {
                     options={textChannelOptions!}
                     value={settings.leavemessagechannel}
                     onElementSelect={(e) => dispatchSettings(['set_leavemessagechannel', e])}
-                    placeholder={t<string>('leavemessage.channel_placeholder')}
+                    placeholder={t('leavemessage.channel_placeholder')}
                   />
                   <Button onClick={() => dispatchSettings(['reset_leavemessagetext'])}>
                     {t('reset')}
                   </Button>
                 </div>
-                <label>{t<string>('leavemessage.message_label')}</label>
+                <label>{t('leavemessage.message_label')}</label>
                 <Small>
                   <Trans ns="routes.guildsettings.general" i18nKey="leavemessage.message_hint">
                     <Embed>[user]</Embed>
@@ -393,7 +393,7 @@ const GeneralRoute: React.FC<Props> = () => {
                 <div>
                   <Input
                     value={settings.leavemessagetext}
-                    placeholder={t<string>('leavemessage.message_placeholder')}
+                    placeholder={t('leavemessage.message_placeholder')}
                     onInput={(e) =>
                       dispatchSettings(['set_leavemessagetext', e.currentTarget.value])
                     }