chore(frontend): update dependencies and adapt to oxlint 1.79

npm install was failing with ERESOLVE: the lockfile pinned storybook 10.5.7
and vitest 4.1.10 as peers while package.json asked for ^10.5.9 and ^4.1.11,
and npm would not move either. Neither npm update, a targeted install, nor
--package-lock-only broke the cycle, so node_modules and package-lock.json
were regenerated from scratch (601 packages, 0 vulnerabilities).

oxlint 1.79.0 then promoted five React Compiler rules into the correctness
category, flagging 101 pre-existing sites. 1.78.0 exits 0 on the same tree,
so nothing in our code changed - the rule set grew. They are fixed rather
than suppressed:

- refs (31): latest-value ref writes moved out of render into an effect.
  onlineClientsRef turned out to be write-only and is gone; expireDiffRef
  and trafficDiffRef were replaced by reading the values directly.
- set-state-in-effect (55): reset-on-open modals now adjust state during
  render; where an effect mixed a synchronous reset with an async fetch, the
  reset moved to render and the effect kept only the request. useMediaQuery
  became useSyncExternalStore.
- preserve-manual-memoization (11): optional-chained deps the compiler cannot
  match, hoisted to locals or dropped where the memo wrapped a string concat.
- purity (3): Date.now() in render replaced by a state-backed clock, which
  also refreshes the expiry tag every 60s instead of freezing it until the
  next unrelated re-render.
- immutability (1): applyClientStatsEvent merged websocket traffic into
  DBInbound rows in place; it now rebuilds only the rows it touches.

Two things fell out of that. clientCount is derived with useMemo instead of
an imperative rebuildClientCount() called from five sites, which also fixes a
staleness bug where changing the expiry or traffic threshold left the counts
alone until some later rebuild. statsVersion existed only to force a
re-render after an in-place mutation, is meaningless now that rows are
replaced, and nothing read it, so it is removed.

Also adds a lint:fix script - oxlint --fix was previously only reachable
through the lint-staged hook.

frontend/src/pages/settings/SecurityTab.tsx

@@ -73,7 +73,7 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
   const [updating, setUpdating] = useState(false);
 
   const [apiTokens, setApiTokens] = useState<ApiTokenRow[]>([]);
-  const [apiTokensLoading, setApiTokensLoading] = useState(false);
+  const [apiTokensLoading, setApiTokensLoading] = useState(true);
   const [createOpen, setCreateOpen] = useState(false);
   const [createName, setCreateName] = useState('');
   const [creating, setCreating] = useState(false);
@@ -130,8 +130,7 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
     }
   }
 
-  const loadApiTokens = useCallback(async () => {
-    setApiTokensLoading(true);
+  const fetchApiTokens = useCallback(async () => {
     try {
       const msg = (await HttpUtil.get('/panel/api/setting/apiTokens')) as ApiMsg<ApiTokenRow[]>;
       if (msg?.success) setApiTokens(Array.isArray(msg.obj) ? msg.obj : []);
@@ -140,9 +139,14 @@ export default function SecurityTab({ allSetting, updateSetting, saveSetting }:
     }
   }, []);
 
+  const loadApiTokens = useCallback(async () => {
+    setApiTokensLoading(true);
+    await fetchApiTokens();
+  }, [fetchApiTokens]);
+
   useEffect(() => {
-    loadApiTokens();
-  }, [loadApiTokens]);
+    void fetchApiTokens();
+  }, [fetchApiTokens]);
 
   async function copyToken(token: string) {
     if (!token) return;

frontend/src/pages/settings/SettingsPage.tsx

@@ -86,16 +86,9 @@ export default function SettingsPage() {
     savePayload,
   } = useAllSettings();
 
-  const [entryHost, setEntryHost] = useState('');
-  const [entryPort, setEntryPort] = useState('');
-  const [entryIsIP, setEntryIsIP] = useState(false);
-
-  useEffect(() => {
-    const host = window.location.hostname;
-    setEntryHost(host);
-    setEntryPort(window.location.port);
-    setEntryIsIP(isIp(host));
-  }, []);
+  const [entryHost] = useState(() => window.location.hostname);
+  const [entryPort] = useState(() => window.location.port);
+  const [entryIsIP] = useState(() => isIp(window.location.hostname));
 
   const [alertVisible, setAlertVisible] = useState(true);
   const location = useLocation();

frontend/src/pages/settings/SubJsonFinalMaskForm.tsx

@@ -30,7 +30,9 @@ export default function SubJsonFinalMaskForm({ value, onChange }: SubJsonFinalMa
   const [form] = Form.useForm();
   const [initial] = useState(() => parseFinalMask(value));
   const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
 
   const finalmask = Form.useWatch('finalmask', form) as FinalMaskStreamSettings | undefined;
 

frontend/src/pages/settings/TwoFactorModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Input, Modal, QRCode, message } from 'antd';
 import * as OTPAuth from 'otpauth';
@@ -32,28 +32,25 @@ export default function TwoFactorModal({
   const { t } = useTranslation();
   const [messageApi, messageContextHolder] = message.useMessage();
   const [enteredCode, setEnteredCode] = useState('');
-  const [qrValue, setQrValue] = useState('');
-  const totpRef = useRef<OTPAuth.TOTP | null>(null);
 
-  useEffect(() => {
-    if (!open) return;
-
-    setEnteredCode('');
-    totpRef.current = null;
-    setQrValue('');
-    if (token) {
-      const totp = new OTPAuth.TOTP({
-        issuer: '3x-ui',
-        label: 'Administrator',
-        algorithm: 'SHA1',
-        digits: 6,
-        period: 30,
-        secret: token,
-      });
-      totpRef.current = totp;
-      setQrValue(totp.toString());
-    }
+  const totp = useMemo(() => {
+    if (!open || !token) return null;
+    return new OTPAuth.TOTP({
+      issuer: '3x-ui',
+      label: 'Administrator',
+      algorithm: 'SHA1',
+      digits: 6,
+      period: 30,
+      secret: token,
+    });
   }, [open, token]);
+  const qrValue = totp ? totp.toString() : '';
+
+  const [wasOpen, setWasOpen] = useState(false);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) setEnteredCode('');
+  }
 
   function close(success: boolean, code = '') {
     onConfirm(success, code);
@@ -73,8 +70,8 @@ export default function TwoFactorModal({
       close(true, codeOk.data);
       return;
     }
-    if (!totpRef.current) return;
-    if (totpRef.current.generate() === codeOk.data) {
+    if (!totp) return;
+    if (totp.generate() === codeOk.data) {
       close(true);
     } else {
       messageApi.error(t('pages.settings.security.twoFactorModalError'));