build: upgrade deps

14 files changed, 145 insertions, 93 deletions

diff --git a/src/components/ConnectionTable.tsx b/src/components/ConnectionTable.tsx
index 6d9f86e..cc9695a 100644
--- a/src/components/ConnectionTable.tsx
+++ b/src/components/ConnectionTable.tsx
@@ -24,7 +24,7 @@ const columns = [
   { Header: 'Type', accessor: 'type' },
 ];
 
-function renderCell(cell) {
+function renderCell(cell: { column: { id: string }; value: number }) {
   switch (cell.column.id) {
     case 'start':
       return formatDistance(cell.value, 0);
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index 63b0010..1b63cf8 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -243,7 +243,7 @@ function Conn({ apiConfig }) {
                       }
                     : {}
                 }
-                position={fabPosition}
+                style={fabPosition}
                 text={isRefreshPaused ? 'Resume Refresh' : 'Pause Refresh'}
                 onClick={toggleIsRefreshPaused}
               >
diff --git a/src/components/Root.css b/src/components/Root.css
index 718c58e..52f1fb1 100644
--- a/src/components/Root.css
+++ b/src/components/Root.css
@@ -89,6 +89,7 @@
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
     'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   --color-focus-blue: #1a73e8;
+  --btn-bg: #387cec;
 }
 
 body {
diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx
index 008ce3c..a6eab19 100644
--- a/src/components/Rules.tsx
+++ b/src/components/Rules.tsx
@@ -9,6 +9,8 @@ import { fetchRules } from 'src/api/rules';
 import { RuleProviderItem } from 'src/components/rules/RuleProviderItem';
 import { TextFilter } from 'src/components/rules/TextFilter';
 import { ruleFilterText } from 'src/store/rules';
+import { State } from 'src/store/types';
+import type { ClashAPIConfig } from 'src/types';
 
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
@@ -22,7 +24,7 @@ const { memo, useMemo, useCallback } = React;
 
 const paddingBottom = 30;
 
-function itemKey(index, { rules, provider }) {
+function itemKey(index: number, { rules, provider }) {
   const providerQty = provider.names.length;
 
   if (index < providerQty) {
@@ -33,7 +35,7 @@ function itemKey(index, { rules, provider }) {
 }
 
 function getItemSizeFactory({ provider }) {
-  return function getItemSize(idx) {
+  return function getItemSize(idx: number) {
     const providerQty = provider.names.length;
     if (idx < providerQty) {
       // provider
@@ -67,16 +69,20 @@ const Row = memo(({ index, style, data }) => {
   );
 }, areEqual);
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   apiConfig: getClashAPIConfig(s),
 });
 
 export default connect(mapState)(Rules);
 
-function useRuleAndProvider(apiConfig) {
-  const { data: rules } = useQuery(['/rules', apiConfig], fetchRules, {
-    suspense: true,
-  });
+function useRuleAndProvider(apiConfig: ClashAPIConfig) {
+  const { data: rules, isFetching } = useQuery(
+    ['/rules', apiConfig],
+    fetchRules,
+    {
+      suspense: true,
+    }
+  );
   const { data: provider } = useQuery(
     ['/providers/rules', apiConfig],
     fetchRuleProviders,
@@ -85,11 +91,12 @@ function useRuleAndProvider(apiConfig) {
 
   const [filterText] = useRecoilState(ruleFilterText);
   if (filterText === '') {
-    return { rules, provider };
+    return { rules, provider, isFetching };
   } else {
     const f = filterText.toLowerCase();
     return {
       rules: rules.filter((r) => r.payload.toLowerCase().indexOf(f) >= 0),
+      isFetching,
       provider: {
         byName: provider.byName,
         names: provider.names.filter((t) => t.toLowerCase().indexOf(f) >= 0),
@@ -141,7 +148,7 @@ function Rules({ apiConfig }) {
       <Fab
         icon={refreshIcon}
         text="Refresh"
-        position={fabPosition}
+        style={fabPosition}
         onClick={invalidateQueries}
       />
     </div>
diff --git a/src/components/proxies/Proxies.module.css b/src/components/proxies/Proxies.module.css
index 1a73d76..c0aed39 100644
--- a/src/components/proxies/Proxies.module.css
+++ b/src/components/proxies/Proxies.module.css
@@ -34,30 +34,3 @@
     padding: 10px 40px;
   }
 }
-
-.spining {
-  position: relative;
-  border-radius: 50%;
-  background: linear-gradient(60deg, #e66465, #9198e5);
-}
-.spining:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: 2px solid transparent;
-  border-top-color: currentColor;
-  border-radius: 50%;
-  animation: spining_keyframes 1s linear infinite;
-}
-
-@keyframes spining_keyframes {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
index 6c3db7d..d36a568 100644
--- a/src/components/proxies/Proxies.tsx
+++ b/src/components/proxies/Proxies.tsx
@@ -15,7 +15,7 @@ import {
 import Button from '../Button';
 import ContentHeader from '../ContentHeader';
 import BaseModal from '../shared/BaseModal';
-import { Fab, position as fabPosition } from '../shared/Fab';
+import { Fab, IsFetching, position as fabPosition } from '../shared/Fab';
 import { connect, useStoreActions } from '../StateProvider';
 import Equalizer from '../svg/Equalizer';
 import { ClosePrevConns } from './ClosePrevConns';
@@ -121,10 +121,18 @@ function Proxies({
       <ProxyProviderList items={proxyProviders} />
       <div style={{ height: 60 }} />
       <Fab
-        icon={isTestingLatency ? <ColorZap /> : <Zap width={16} height={16} />}
+        icon={
+          isTestingLatency ? (
+            <IsFetching>
+              <Zap width={16} height={16} />
+            </IsFetching>
+          ) : (
+            <Zap width={16} height={16} />
+          )
+        }
         onClick={requestDelayAllFn}
         text={t('Test Latency')}
-        position={fabPosition}
+        style={fabPosition}
       />
       <BaseModal
         isOpen={showModalClosePrevConns}
@@ -139,23 +147,6 @@ function Proxies({
   );
 }
 
-function ColorZap() {
-  return (
-    <div
-      className={s0.spining}
-      style={{
-        width: 48,
-        height: 48,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Zap width={16} height={16} />
-    </div>
-  );
-}
-
 const mapState = (s) => ({
   apiConfig: getClashAPIConfig(s),
   groupNames: getProxyGroupNames(s),
diff --git a/src/components/rules/RuleProviderItem.module.css b/src/components/rules/RuleProviderItem.module.css
index f4f52c8..676a34d 100644
--- a/src/components/rules/RuleProviderItem.module.css
+++ b/src/components/rules/RuleProviderItem.module.css
@@ -31,6 +31,7 @@
 }
 .isRotating {
   animation: rotating 3s infinite linear;
+  animation-fill-mode: forwards;
 }
 
 @keyframes rotating {
diff --git a/src/components/shared/Fab.module.css b/src/components/shared/Fab.module.css
new file mode 100644
index 0000000..61aaecb
--- /dev/null
+++ b/src/components/shared/Fab.module.css
@@ -0,0 +1,33 @@
+.spining {
+  position: relative;
+  border-radius: 50%;
+  background: linear-gradient(60deg, #e66465, #9198e5);
+
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spining:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spining_keyframes 1s linear infinite;
+}
+
+@keyframes spining_keyframes {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/shared/Fab.ts b/src/components/shared/Fab.ts
deleted file mode 100644
index 4e2e800..0000000
--- a/src/components/shared/Fab.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import './rtf.css';
-
-import { Action, Fab } from 'react-tiny-fab';
-
-export const position = {
-  right: 10,
-  bottom: 10,
-};
-
-export { Fab, Action };
diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx
new file mode 100644
index 0000000..68750ef
--- /dev/null
+++ b/src/components/shared/Fab.tsx
@@ -0,0 +1,17 @@
+import './rtf.css';
+
+import * as React from 'react';
+import { Action, Fab } from 'react-tiny-fab/dist';
+
+import s from './Fab.module.css';
+
+export function IsFetching({ children }: { children: React.ReactNode }) {
+  return <span className={s.spining}>{children}</span>;
+}
+
+export const position = {
+  right: 10,
+  bottom: 10,
+};
+
+export { Fab, Action };
diff --git a/src/components/shared/rtf.css b/src/components/shared/rtf.css
index 1e97412..da439ee 100644
--- a/src/components/shared/rtf.css
+++ b/src/components/shared/rtf.css
@@ -11,13 +11,7 @@
   padding-left: 0;
   list-style: none;
 }
-.rtf.open .rtf--mb > * {
-  /* transform-origin: center center; */
-  /* transform: rotate(360deg); */
-  transition: ease-in-out transform 0.2s;
-}
 .rtf.open .rtf--mb {
-  background: rgba(56, 124, 236, 0.92);
   box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
     0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
@@ -114,10 +108,10 @@
 }
 
 .rtf--mb {
-  height: 48px;
   width: 48px;
+  height: 48px;
+  background: var(--btn-bg);
   z-index: 9999;
-  background: #387cec;
   display: inline-flex;
   justify-content: center;
   align-items: center;
diff --git a/src/custom.d.ts b/src/custom.d.ts
index 3a9b7ac..9aa0b72 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -20,3 +20,47 @@ declare const process = {
     PUBLIC_URL: string,
   },
 };
+
+declare module 'react-table' {
+  interface TableOptions {}
+
+  interface Empty {}
+
+  interface SortByToggleProps {}
+
+  interface Header {
+    getHeaderProps(p: SortByToggleProps): { role?: string };
+    getSortByToggleProps(): SortByToggleProps;
+    render(x: string): string;
+    isSorted: boolean;
+    isSortedDesc: boolean;
+  }
+
+  interface HeaderGroup {
+    getHeaderGroupProps(): { role?: string };
+    headers: Header[];
+  }
+
+  interface Cell {
+    getCellProps(): { role?: string };
+
+    column: { id: string };
+    value: number;
+  }
+
+  interface Row {
+    cells: Cell[];
+  }
+
+  export function useTable(
+    options: TableOptions,
+    useSortBy: useSortBy
+  ): {
+    headerGroups: HeaderGroup[];
+    getTableProps(): { role?: string };
+    rows: Row[];
+    prepareRow(r: Row): void;
+  };
+
+  export function useSortBy(): Empty;
+}
diff --git a/src/index.template.ejs b/src/index.template.ejs
index afcd54c..22b2abc 100644
--- a/src/index.template.ejs
+++ b/src/index.template.ejs
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="shortcut icon" href="yacd.ico">
-  <link rel="icon" type="image/png" sizes="64x64" href="yacd-64.png">
-  <link rel="icon" type="image/png" sizes="128x128" href="yacd-128.png">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name=viewport content="width=device-width, initial-scale=1">
-  <meta name="application-name" content="yacd">
-  <meta name="description" content="Yet Another Clash Dashboard">
-  <meta name="theme-color" content="#202020">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-</head>
-<body>
-  <div id="app"></div>
-</body>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="shortcut icon" href="yacd.ico" />
+    <link rel="icon" type="image/png" sizes="64x64" href="yacd-64.png" />
+    <link rel="icon" type="image/png" sizes="128x128" href="yacd-128.png" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="application-name" content="yacd" />
+    <meta name="description" content="Yet Another Clash Dashboard" />
+    <meta name="theme-color" content="#202020" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
 </html>
diff --git a/src/misc/i18n.ts b/src/misc/i18n.ts
index 023c5d7..6155732 100644
--- a/src/misc/i18n.ts
+++ b/src/misc/i18n.ts
@@ -32,6 +32,7 @@ i18next
 
         switch (url) {
           case '/__zh/translation.json':
+          case '/__zh-CN/translation.json':
             p = allLocales.zh;
             break;
           case '/__en/translation.json':
@@ -47,7 +48,7 @@ i18next
         }
       },
     },
-    supportedLngs: ['en', 'zh'],
+    supportedLngs: ['en', 'zh-CN'],
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false,