chore: update frontend dependencies

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "type": "module",
   "dependencies": {
-    "@fontsource/space-mono": "^5.0.17",
+    "@fontsource/space-mono": "^5.0.18",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -18,27 +18,27 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-toolbar": "^1.0.4",
-    "@redux-devtools/extension": "^3.2.5",
-    "@reduxjs/toolkit": "^1.9.7",
+    "@redux-devtools/extension": "^3.3.0",
+    "@reduxjs/toolkit": "^2.2.1",
     "@stitches/react": "^1.2.8",
     "@strimertul/kilovolt-client": "^8.0.0",
-    "@types/node": "^20.8.9",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
-    "@vitejs/plugin-react": "^4.1.0",
-    "i18next": "^23.6.0",
-    "inter-ui": "^3.19.3",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "i18next": "^23.10.0",
+    "inter-ui": "^4.0.2",
     "normalize.css": "^8.0.1",
-    "postcss-import": "^15.1.0",
+    "postcss-import": "^16.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.3.1",
-    "react-redux": "^8.1.3",
-    "react-router-dom": "^6.17.0",
-    "redux-thunk": "^2.4.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "react-i18next": "^14.0.5",
+    "react-redux": "^9.1.0",
+    "react-router-dom": "^6.22.1",
+    "redux-thunk": "^3.1.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "scripts": {
     "start": "vite",
@@ -49,15 +49,15 @@
     "last 2 Chrome version"
   ],
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "eslint": "^8.52.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "prettier": "^3.0.3",
     "rimraf": "^5.0.5"
   }

frontend/package.json.md5

@@ -1 +1 @@
-fc1fa70c3a8ac4cc66b38592b8aaab6b
+894313fcc17ff294db3c3171003cb162

frontend/src/index.tsx

@@ -4,6 +4,7 @@ import { HashRouter } from 'react-router-dom';
 import { StrictMode } from 'react';
 
 import 'inter-ui/inter.css';
+import 'inter-ui/inter-variable.css';
 import '@fontsource/space-mono/index.css';
 import 'normalize.css/normalize.css';
 import './locale/setup';

frontend/src/store/api/reducer.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-param-reassign */
 import {
-  AnyAction,
   AsyncThunk,
   CaseReducer,
   createAction,
@@ -8,6 +7,7 @@ import {
   createSlice,
   Dispatch,
   PayloadAction,
+  UnknownAction,
 } from '@reduxjs/toolkit';
 import KilovoltWS, { KilovoltMessage } from '@strimertul/kilovolt-client';
 import type { kvError } from '@strimertul/kilovolt-client/types/messages';
@@ -16,9 +16,19 @@ import { delay } from '~/lib/time';
 import {
   APIState,
   ConnectionStatus,
+  HTTPConfig,
   LoyaltyPointsEntry,
   LoyaltyRedeem,
   LoyaltyStorage,
+  TwitchBotConfig,
+  TwitchConfig,
+  TwitchBotCustomCommands,
+  TwitchBotTimersConfig,
+  TwitchBotAlertsConfig,
+  LoyaltyConfig,
+  LoyaltyReward,
+  LoyaltyGoal,
+  UISettings,
 } from './types';
 import { ThunkConfig } from '..';
 
@@ -47,7 +57,7 @@ function makeGetSetThunks<T>(key: string) {
           // Re-load value from KV
           // Need to do type fuckery to avoid cyclic redundancy
           // (unless there's a better way that I'm missing)
-          void dispatch(getter() as unknown as AnyAction);
+          void dispatch(getter() as unknown as UnknownAction);
         }
       }
       return result;
@@ -145,88 +155,77 @@ export const modules = {
     'http/config',
     (state) => state.moduleConfigs?.httpConfig,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.moduleConfigs.httpConfig = payload;
+      state.moduleConfigs.httpConfig = payload as HTTPConfig;
     },
   ),
   twitchConfig: makeModule(
     'twitch/config',
     (state) => state.moduleConfigs?.twitchConfig,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.moduleConfigs.twitchConfig = payload;
+      state.moduleConfigs.twitchConfig = payload as TwitchConfig;
     },
   ),
   twitchBotConfig: makeModule(
     'twitch/bot-config',
     (state) => state.moduleConfigs?.twitchBotConfig,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.moduleConfigs.twitchBotConfig = payload;
+      state.moduleConfigs.twitchBotConfig = payload as TwitchBotConfig;
     },
   ),
   twitchBotCommands: makeModule(
     'twitch/bot-custom-commands',
     (state) => state.twitchBot?.commands,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.twitchBot.commands = payload;
+      state.twitchBot.commands = payload as TwitchBotCustomCommands;
     },
   ),
   twitchBotTimers: makeModule(
     'twitch/bot-modules/timers/config',
     (state) => state.twitchBot?.timers,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.twitchBot.timers = payload;
+      state.twitchBot.timers = payload as TwitchBotTimersConfig;
     },
   ),
   twitchBotAlerts: makeModule(
     'twitch/bot-modules/alerts/config',
     (state) => state.twitchBot?.alerts,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.twitchBot.alerts = payload;
+      state.twitchBot.alerts = payload as TwitchBotAlertsConfig;
     },
   ),
   loyaltyConfig: makeModule(
     'loyalty/config',
     (state) => state.moduleConfigs?.loyaltyConfig,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.moduleConfigs.loyaltyConfig = payload;
+      state.moduleConfigs.loyaltyConfig = payload as LoyaltyConfig;
     },
   ),
   loyaltyRewards: makeModule(
     loyaltyRewardsKey,
     (state) => state.loyalty.rewards,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.loyalty.rewards = payload;
+      state.loyalty.rewards = payload as LoyaltyReward[];
     },
   ),
   loyaltyGoals: makeModule(
     'loyalty/goals',
     (state) => state.loyalty.goals,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.loyalty.goals = payload;
+      state.loyalty.goals = payload as LoyaltyGoal[];
     },
   ),
   loyaltyRedeemQueue: makeModule(
     'loyalty/redeem-queue',
     (state) => state.loyalty.redeemQueue,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.loyalty.redeemQueue = payload;
+      state.loyalty.redeemQueue = payload as LoyaltyRedeem[];
     },
   ),
   uiConfig: makeModule(
     'ui/settings',
     (state) => state.uiConfig,
     (state, { payload }) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-      state.uiConfig = payload;
+      state.uiConfig = payload as UISettings;
     },
   ),
 };

frontend/src/store/api/types.ts

@@ -44,9 +44,9 @@ export interface TwitchBotCustomCommand {
   enabled: boolean;
 }
 
-type TwitchBotCustomCommands = Record<string, TwitchBotCustomCommand>;
+export type TwitchBotCustomCommands = Record<string, TwitchBotCustomCommand>;
 
-interface LoyaltyConfig {
+export interface LoyaltyConfig {
   enabled: boolean;
   currency: string;
   points: {
@@ -65,11 +65,11 @@ export interface TwitchBotTimer {
   messages: string[];
 }
 
-interface TwitchBotTimersConfig {
+export interface TwitchBotTimersConfig {
   timers: Record<string, TwitchBotTimer>;
 }
 
-interface TwitchBotAlertsConfig {
+export interface TwitchBotAlertsConfig {
   follow: {
     enabled: boolean;
     messages: string[];

frontend/src/store/index.ts

@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { EqualityFn, useDispatch, useSelector } from 'react-redux';
-import thunkMiddleware from 'redux-thunk';
+import { thunk } from 'redux-thunk';
 
 import apiReducer from './api/reducer';
 import loggingReducer from './logging/reducer';
@@ -17,7 +17,7 @@ const store = configureStore({
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false,
-    }).concat(thunkMiddleware),
+    }).concat(thunk),
   devTools: true,
 });
 

frontend/src/ui/theme/theme.ts

@@ -24,7 +24,7 @@ export const globalStyles = globalCss({
     padding: 0,
     fontFamily: "'Inter', 'system-ui', sans-serif",
     '@supports (font-variation-settings: normal)': {
-      fontFamily: "'Inter var', 'system-ui', sans-serif",
+      fontFamily: "'InterVariable', 'system-ui', sans-serif",
     },
   },
   a: {