Make selected indicator more distinguishable in proxy summary list

ref #575

package.json

@@ -12,7 +12,7 @@
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
-    "pretty": "prettier --single-quote --write 'src/**/*.{js,scss,ts,tsx,md}'",
+    "pretty": "prettier --write 'src/**/*.{js,scss,ts,tsx,md}'",
     "fmt": "pnpm lint && pnpm pretty"
   },
   "browserslist": [

src/components/Root.scss

@@ -96,6 +96,7 @@ body {
   --bc-tooltip: #555;
   --select-border-color: #040404;
   --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23ffffff%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
+  --color-proxy-dot-selected-ind-bo: transparent;
 }
 @mixin light {
   --color-background: #eee;
@@ -124,6 +125,7 @@ body {
   --bc-tooltip: #ccc;
   --select-border-color: #999999;
   --select-bg-hover: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23222222%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
+  --color-proxy-dot-selected-ind-bo: #888;
 }
 
 :root[data-theme='auto'] {

src/components/proxies/Proxy.module.scss

@@ -64,13 +64,31 @@
 }
 
 .proxySmall {
-  width: 13px;
+  --size: 13px;
-  height: 13px;
+  width: var(--size);
+  height: var(--size);
   border-radius: 50%;
-  border: 1px solid var(--color-background);
+  position: relative;
 
   &.now {
-    border-color: var(--color-text-secondary);
+    --size: 15px;
+    &:before {
+      --size-dot: 7px;
+      content: '';
+      position: absolute;
+      width: var(--size-dot);
+      height: var(--size-dot);
+      background-color: #fff;
+      // For non-primitive proxy type like "Selector", "LoadBalance", "DIRECT", etc. we are using a transparent
+      // background, and this selected indicator has a white background. In "light" them mode, the constrast
+      // between the bg of the indicator and the "background" is too small. In that case we want to add a
+      // border around this indicator so it's more distinguishable.
+      border: 1px solid var(--color-proxy-dot-selected-ind-bo);
+      border-radius: 4px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 
   &.selectable {

src/components/proxies/Proxy.tsx

@@ -1,7 +1,6 @@
 import { TooltipPopup, useTooltip } from '@reach/tooltip';
 import cx from 'clsx';
 import * as React from 'react';
-import { keyCodes } from 'src/misc/keycode';
 
 import { State } from '$src/store/types';
 
@@ -40,16 +39,17 @@ function getLabelColor({
   return colorMap.na;
 }
 
-function getProxyDotBackgroundColor(
+function getProxyDotStyle(
   latency: {
     number?: number;
   },
   proxyType: string
 ) {
   if (NonProxyTypes.indexOf(proxyType) > -1) {
-    return 'linear-gradient(135deg, white 15%, #999 15% 30%, white 30% 45%, #999 45% 60%, white 60% 75%, #999 75% 90%, white 90% 100%)';
+    return { border: '1px dotted #777' };
   }
-  return getLabelColor(latency);
+  const bg = getLabelColor(latency);
+  return { background: bg };
 }
 
 type ProxyProps = {
@@ -62,7 +62,7 @@ type ProxyProps = {
 };
 
 function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: ProxyProps) {
-  const color = useMemo(() => getProxyDotBackgroundColor(latency, proxy.type), [latency, proxy]);
+  const style = useMemo(() => getProxyDotStyle(latency, proxy.type), [latency, proxy]);
   const title = useMemo(() => {
     let ret = name;
     if (latency && typeof latency.number === 'number') {
@@ -84,9 +84,7 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
 
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.keyCode === keyCodes.Enter) {
+      if (e.key === 'Enter') doSelect();
-        doSelect();
-      }
     },
     [doSelect]
   );
@@ -95,7 +93,7 @@ function ProxySmallImpl({ now, name, proxy, latency, isSelectable, onClick }: Pr
     <div
       title={title}
       className={className}
-      style={{ background: color }}
+      style={style}
       onClick={doSelect}
       onKeyDown={handleKeyDown}
       role={isSelectable ? 'menuitem' : ''}

src/components/proxies/ProxyList.module.scss

@@ -10,4 +10,5 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, 13px);
   grid-gap: 10px;
+  place-items: center;
 }

src/components/proxies/ProxyProvider.tsx

@@ -16,11 +16,13 @@ import {
 import { getDelay, healthcheckProviderByName } from 'src/store/proxies';
 import { DelayMapping, State } from 'src/store/types';
 
+import { useState2 } from '$src/hooks/basic';
+
 import { useFilteredAndSorted } from './hooks';
 import { ProxyList, ProxyListSummaryView } from './ProxyList';
 import s from './ProxyProvider.module.scss';
 
-const { useState, useCallback } = React;
+const { useCallback } = React;
 
 type Props = {
   name: string;
@@ -49,15 +51,15 @@ function ProxyProviderImpl({
   apiConfig,
 }: Props) {
   const proxies = useFilteredAndSorted(all, delay, hideUnavailableProxies, proxySortBy);
-  const [isHealthcheckLoading, setIsHealthcheckLoading] = useState(false);
+  const checkingHealth = useState2(false);
 
   const updateProvider = useUpdateProviderItem({ dispatch, apiConfig, name });
 
-  const healthcheckProvider = useCallback(async () => {
+  const healthcheckProvider = useCallback(() => {
-    setIsHealthcheckLoading(true);
+    checkingHealth.set(true);
-    await dispatch(healthcheckProviderByName(apiConfig, name));
+    const stop = () => checkingHealth.set(false);
-    setIsHealthcheckLoading(false);
+    dispatch(healthcheckProviderByName(apiConfig, name)).then(stop, stop);
-  }, [apiConfig, dispatch, name, setIsHealthcheckLoading]);
+  }, [apiConfig, dispatch, name, checkingHealth]);
 
   const {
     app: { updateCollapsibleIsOpen },
@@ -77,7 +79,9 @@ function ProxyProviderImpl({
         isOpen={isOpen}
         qty={proxies.length}
       />
-      <div className={s.updatedAt}><small>Updated {timeAgo} ago</small></div>
+      <div className={s.updatedAt}>
+        <small>Updated {timeAgo} ago</small>
+      </div>
       <Collapsible isOpen={isOpen}>
         <ProxyList all={proxies} />
         <div className={s.actionFooter}>
@@ -86,7 +90,7 @@ function ProxyProviderImpl({
             text="Health Check"
             start={<Zap size={16} />}
             onClick={healthcheckProvider}
-            isLoading={isHealthcheckLoading}
+            isLoading={checkingHealth.value}
           />
         </div>
       </Collapsible>

src/hooks/basic.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 const { useState, useCallback } = React;
 
@@ -7,3 +7,8 @@ export function useToggle(initialValue = false): [boolean, () => void] {
   const toggle = useCallback(() => setState((x) => !x), []);
   return [isOn, toggle];
 }
+
+export function useState2<T>(v: T) {
+  const [value, set] = useState(v);
+  return { value, set };
+}

src/types.ts

@@ -5,4 +5,4 @@ export type ClashAPIConfig = {
 
 export type LogsAPIConfig = ClashAPIConfig & { logLevel: string };
 
-export type RuleType = { id?: number; type?: string; payload?: string; proxy?: string; }
+export type RuleType = { id?: number; type?: string; payload?: string; proxy?: string };