4 files changed, 106 insertions, 13 deletions
diff --git a/src/components/Proxies.js b/src/components/Proxies.js
index 9623010..f491d22 100644
--- a/src/components/Proxies.js
+++ b/src/components/Proxies.js
@@ -79,6 +79,7 @@ function Proxies({
                 name={groupName}
                 proxies={proxies}
                 delay={delay}
+                sort={true}
                 apiConfig={apiConfig}
                 dispatch={dispatch}
               />
diff --git a/src/components/Proxy.js b/src/components/Proxy.js
index 0cedf12..c485cc0 100644
--- a/src/components/Proxy.js
+++ b/src/components/Proxy.js
@@ -84,14 +84,14 @@ function Proxy({ now, name, proxy, latency }: ProxyProps) {
       })}
     >
       <div className={s0.proxyName}>{name}</div>
-      <div className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
+      <span className={s0.proxyType} style={{ opacity: now ? 0.6 : 0.2 }}>
         {proxy.type}
-      </div>
-      <div className={s0.proxyLatencyWrap}>
-        {latency && latency.number ? (
+      </span>
+      {latency && latency.number ? (
+        <span className={s0.proxyLatencyWrap}>
           <ProxyLatency number={latency.number} color={color} />
-        ) : null}
-      </div>
+        </span>
+      ) : null}
     </div>
   );
 }
diff --git a/src/components/Proxy.module.css b/src/components/Proxy.module.css
index 2af1ce8..1277e1f 100644
--- a/src/components/Proxy.module.css
+++ b/src/components/Proxy.module.css
@@ -23,26 +23,33 @@
 
 .proxyType {
   font-family: var(--font-mono);
+  display: inline;
+  padding: 0 0.3em;
   font-size: 0.6em;
   @media (--breakpoint-not-small) {
     font-size: 1em;
   }
 }
 
+.proxyDisable {
+  display: inline;
+}
 .proxyName {
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 5px;
   font-size: 0.85em;
+  display: inline;
   @media (--breakpoint-not-small) {
     font-size: 1.1em;
   }
 }
 
 .proxyLatencyWrap {
+  padding: 0 0.3em;
   height: 30px;
-  display: flex;
+  /* display: flex; */
   align-items: flex-end;
 }
 
diff --git a/src/components/ProxyGroup.js b/src/components/ProxyGroup.js
index d824920..67920a4 100644
--- a/src/components/ProxyGroup.js
+++ b/src/components/ProxyGroup.js
@@ -1,5 +1,10 @@
 import React from 'react';
+
+import Button from './Button';
+
 import cx from 'classnames';
+import { connect } from './StateProvider';
+import { getDelay } from '../store/proxies';
 
 import Proxy, { ProxySmall } from './Proxy';
 import { SectionNameType } from './shared/Basic';
@@ -8,7 +13,7 @@ import s0 from './ProxyGroup.module.css';
 
 import { switchProxy } from '../store/proxies';
 
-const { memo, useCallback, useMemo } = React;
+const { memo, useCallback, useMemo, useState } = React;
 
 function ProxyGroup({ name, proxies, apiConfig, dispatch }) {
   const group = proxies[name];
@@ -16,6 +21,28 @@ function ProxyGroup({ name, proxies, apiConfig, dispatch }) {
 
   const isSelectable = useMemo(() => type === 'Selector', [type]);
 
+  const [isShow, setIsShow] = useState({
+    show: false,
+    showAll: false
+  });
+
+  const updateShow = useCallback(
+    type => {
+      if (type === 'all') {
+        setIsShow({
+          ...isShow,
+          showAll: !isShow.showAll
+        });
+      } else {
+        setIsShow({
+          ...isShow,
+          show: !isShow.show
+        });
+      }
+    },
+    [isShow]
+  );
+
   const itemOnTapCallback = useCallback(
     proxyName => {
       if (!isSelectable) return;
@@ -30,12 +57,23 @@ function ProxyGroup({ name, proxies, apiConfig, dispatch }) {
     <div className={s0.group}>
       <div className={s0.header}>
         <SectionNameType name={name} type={group.type} />
+        <Button
+          className="btn"
+          onClick={() => updateShow()}
+          text={isShow.show ? 'hide' : 'show'}
+        ></Button>
+        <Button
+          className="btn"
+          onClick={() => updateShow('all')}
+          text={isShow.showAll ? 'hide error' : 'all proxies'}
+        ></Button>
       </div>
       <ProxyList
-        all={all}
+        all={isShow.show ? all : []}
         now={now}
         isSelectable={isSelectable}
         itemOnTapCallback={itemOnTapCallback}
+        filterError={!isShow.showAll}
       />
     </div>
   );
@@ -45,17 +83,22 @@ type ProxyListProps = {
   all: string[],
   now?: string,
   isSelectable?: boolean,
-  itemOnTapCallback?: string => void
+  itemOnTapCallback?: string => void,
+  show?: boolean
 };
-export function ProxyList({
+function ProxyListImpl({
   all,
   now,
   isSelectable,
-  itemOnTapCallback
+  itemOnTapCallback,
+  filterError,
+  sortedAll
 }: ProxyListProps) {
+  const proxies = sortedAll || all;
+
   return (
     <div className={s0.list}>
-      {all.map(proxyName => {
+      {proxies.map(proxyName => {
         const proxyClassName = cx(s0.proxy, {
           [s0.proxySelectable]: isSelectable
         });
@@ -76,6 +119,48 @@ export function ProxyList({
   );
 }
 
+const getSortDelay = (d, w) => {
+  if (d === undefined) {
+    return 0;
+  }
+  if (!d.error && d.number > 0) {
+    return d.number;
+  }
+
+  return w;
+};
+
+const mapState = (s, { all, filterError }) => {
+  const delay = getDelay(s);
+
+  let clonelist = [...all];
+
+  if (filterError) {
+    clonelist = clonelist.filter(e => {
+      const d = delay[e];
+      if (d === undefined) return true;
+      if (d.error || d.number === 0 || d.number > 1000) {
+        return false;
+      } else {
+        return true;
+      }
+    });
+  }
+
+  clonelist = clonelist.sort((first, second) => {
+    const d1 = getSortDelay(delay[first], 999999);
+    const d2 = getSortDelay(delay[second], 999999);
+
+    return d1 - d2;
+  });
+
+  return {
+    sortedAll: clonelist
+  };
+};
+
+const ProxyList = connect(mapState)(ProxyListImpl);
+
 export function ProxyListSummaryView({
   all,
   now,