From 698362f1c7b31837ac60bdfde7aac1deccb2ea35 Mon Sep 17 00:00:00 2001 From: kunish Date: Thu, 10 Oct 2024 18:52:24 +0800 Subject: [PATCH] feat(proxies): overhaul the look of proxies page, drop renderInTwoColumns support --- package.json | 2 +- pnpm-lock.yaml | 10 +-- src/components/Button.tsx | 1 + src/components/Collapse.tsx | 12 +-- src/components/IPv6Support.tsx | 15 ---- src/components/ProxiesSettingsModal.tsx | 17 +---- src/components/ProxyNodeCard.tsx | 99 ++++++++++++++----------- src/components/RenderInTwoColumns.tsx | 26 ------- src/components/index.ts | 2 - src/i18n/en.ts | 11 ++- src/i18n/zh.ts | 3 +- src/pages/Proxies.tsx | 43 ++++------- src/signals/config.ts | 6 -- 13 files changed, 88 insertions(+), 159 deletions(-) delete mode 100644 src/components/IPv6Support.tsx delete mode 100644 src/components/RenderInTwoColumns.tsx diff --git a/package.json b/package.json index 7aaa640f..598a824e 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@solid-primitives/timer": "^1.3.10", "@solid-primitives/websocket": "^1.2.2", "@solidjs/meta": "^0.29.4", - "@solidjs/router": "^0.14.7", + "@solidjs/router": "^0.14.8", "@tabler/icons-solidjs": "^3.19.0", "@tanstack/match-sorter-utils": "^8.19.4", "@tanstack/solid-table": "^8.20.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80d58e5c..aff74a21 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -53,8 +53,8 @@ importers: specifier: ^0.29.4 version: 0.29.4(solid-js@1.9.2) '@solidjs/router': - specifier: ^0.14.7 - version: 0.14.7(solid-js@1.9.2) + specifier: ^0.14.8 + version: 0.14.8(solid-js@1.9.2) '@tabler/icons-solidjs': specifier: ^3.19.0 version: 3.19.0(solid-js@1.9.2) @@ -1984,10 +1984,10 @@ packages: peerDependencies: solid-js: '>=1.8.4' - '@solidjs/router@0.14.7': + '@solidjs/router@0.14.8': resolution: { - integrity: sha512-agLf8AUz5XnW6+F64a4Iq+QQQobI5zGHQ/gUYd/WHSwcbnFpavbsiwRLob3YhWMXVX3sQyn4ekUN+uchMCRupw==, + integrity: sha512-S+rD5Twp0820cM03wEIYtb7/4KN7Cfr3BP+qPIqb7IXO/SZ72tWqHEMQsmcjDbr4yVfpA+5Sq0Y+xcq09y1gQA==, } peerDependencies: solid-js: ^1.8.6 @@ -7577,7 +7577,7 @@ snapshots: dependencies: solid-js: 1.9.2 - '@solidjs/router@0.14.7(solid-js@1.9.2)': + '@solidjs/router@0.14.8(solid-js@1.9.2)': dependencies: solid-js: 1.9.2 diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 67b93f10..86d835c6 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -19,6 +19,7 @@ interface ButtonWithoutIconProps extends ButtonBaseProps { export const Button: ParentComponent< ButtonWithIconProps | ButtonWithoutIconProps > = (props) => { + // @ts-expect-error Expression produces a union type that is too complex to represent const [local, others] = splitProps(props, ['class', 'loading', 'icon']) return ( diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx index 4d210565..2fd66bfe 100644 --- a/src/components/Collapse.tsx +++ b/src/components/Collapse.tsx @@ -1,6 +1,5 @@ import type { JSX, ParentComponent } from 'solid-js' import { twMerge } from 'tailwind-merge' -import { renderProxiesInTwoColumns } from '~/signals' type Props = { title: JSX.Element @@ -25,14 +24,6 @@ export const Collapse: ParentComponent = (props) => { return props.isOpen ? openedClassName : closedClassName } - const gridStyle = createMemo(() => { - if (renderProxiesInTwoColumns()) { - return 'lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' - } - - return 'sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10' - }) - return (
= (props) => {
{children(() => props.children)()} diff --git a/src/components/IPv6Support.tsx b/src/components/IPv6Support.tsx deleted file mode 100644 index 1b3767eb..00000000 --- a/src/components/IPv6Support.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useProxies } from '~/signals' - -export const IPv6Support = (props: { name?: string }) => { - const { getNowProxyNodeName, proxyIPv6SupportMap } = useProxies() - - const support = createMemo(() => { - return proxyIPv6SupportMap()[getNowProxyNodeName(props.name || '')] - }) - - return ( - - IPv6 - - ) -} diff --git a/src/components/ProxiesSettingsModal.tsx b/src/components/ProxiesSettingsModal.tsx index 6915b094..859f790f 100644 --- a/src/components/ProxiesSettingsModal.tsx +++ b/src/components/ProxiesSettingsModal.tsx @@ -11,7 +11,6 @@ import { latencyTestTimeoutDuration, proxiesOrderingType, proxiesPreviewType, - renderProxiesInTwoColumns, setAutoCloseConns, setHideUnAvailableProxies, setIconHeight, @@ -19,7 +18,6 @@ import { setLatencyTestTimeoutDuration, setProxiesOrderingType, setProxiesPreviewType, - setRenderProxiesInTwoColumns, setUrlForLatencyTest, setUrlIPv6SupportTest, urlForIPv6SupportTest, @@ -107,7 +105,7 @@ export const ProxiesSettingsModal: Component<{
- {t('hideUnAvailableProxies')} + {t('hideUnavailableProxies')}
-
- {t('renderInTwoColumns')} - -
- setRenderProxiesInTwoColumns(e.target.checked)} - /> -
-
-
{t('proxiesPreviewType')} diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx index 7122063d..681e6a55 100644 --- a/src/components/ProxyNodeCard.tsx +++ b/src/components/ProxyNodeCard.tsx @@ -1,6 +1,6 @@ import { IconBrandSpeedtest } from '@tabler/icons-solidjs' import { twMerge } from 'tailwind-merge' -import { Button, IPv6Support, Latency } from '~/components' +import { Button, Latency } from '~/components' import { filterSpecialProxyType, formatProxyType } from '~/helpers' import { useProxies } from '~/signals' @@ -9,10 +9,19 @@ export const ProxyNodeCard = (props: { isSelected?: boolean onClick?: () => void }) => { - const { proxyLatencyTest, proxyLatencyTestingMap } = useProxies() const { proxyName, isSelected, onClick } = props - const { proxyNodeMap } = useProxies() + const { + getNowProxyNodeName, + proxyIPv6SupportMap, + proxyNodeMap, + proxyLatencyTest, + proxyLatencyTestingMap, + } = useProxies() + const supportIPv6 = createMemo( + () => proxyIPv6SupportMap()[getNowProxyNodeName(props.proxyName || '')], + ) const proxyNode = createMemo(() => proxyNodeMap()[proxyName]) + const specialType = () => filterSpecialProxyType(proxyNode()?.type) ? proxyNode()?.xudp @@ -25,55 +34,61 @@ export const ProxyNodeCard = (props: { return (
-
- {proxyName} +
+ {proxyName} - - -
+
) diff --git a/src/components/RenderInTwoColumns.tsx b/src/components/RenderInTwoColumns.tsx deleted file mode 100644 index 2fed1cd1..00000000 --- a/src/components/RenderInTwoColumns.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { createWindowSize } from '@solid-primitives/resize-observer' -import type { ParentComponent } from 'solid-js' - -export const RenderInTwoColumns: ParentComponent = (props) => { - const resolvedChildren = children(() => props.children) - const windowSize = createWindowSize() - // 640 is sm size in default tailwindcss breakpoint - const showTwoColumns = createMemo(() => windowSize.width >= 640) - - const leftColumns = createMemo(() => - resolvedChildren.toArray().filter((_, index) => index % 2 === 0), - ) - - const rightColumns = createMemo(() => - resolvedChildren.toArray().filter((_, index) => index % 2 === 1), - ) - - return ( -
- -
{leftColumns()}
-
{rightColumns()}
- -
- ) -} diff --git a/src/components/index.ts b/src/components/index.ts index 88dccb5d..89511ffb 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,7 +4,6 @@ export * from './ConfigTitle' export * from './ConnectionsSettingsModal' export * from './ConnectionsTableDetailsModal' export * from './Header' -export * from './IPv6Support' export * from './Latency' export * from './LogoText' export * from './LogsSettingsModal' @@ -14,5 +13,4 @@ export * from './ProxyNodeCard' export * from './ProxyNodePreview' export * from './ProxyPreviewBar' export * from './ProxyPreviewDots' -export * from './RenderInTwoColumns' export * from './SubscriptionInfo' diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 2708260e..cc0124e0 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -47,15 +47,14 @@ export default { bar: 'Bar', auto: 'Auto', off: 'Off', - proxiesPreviewType: 'Proxies preview type', - urlForIPv6SupportTest: 'URL for IPv6 support test', - urlForLatencyTest: 'URL for latency test', - autoCloseConns: 'Automatically Close connections', + proxiesPreviewType: 'Proxies Preview Type', + urlForIPv6SupportTest: 'URL for IPv6 Support Test', + urlForLatencyTest: 'URL for Latency Test', + autoCloseConns: 'Automatically Close Connections', useTwemoji: 'Use Twemoji Mozilla Font', autoSwitchTheme: 'Automatically switch theme', favDayTheme: 'Favorite light theme', favNightTheme: 'Favorite dark theme', - renderInTwoColumns: 'Render in two columns', updateGEODatabases: 'Update GEO Databases', restartCore: 'Restart Core', upgradeCore: 'Upgrade Core', @@ -95,7 +94,7 @@ export default { active: 'Active', closed: 'Closed', sort: 'Sort', - hideUnAvailableProxies: 'Hide UnAvailable Proxies', + hideUnavailableProxies: 'Hide Unavailable Proxies', reloadConfig: 'Reload Config', flushFakeIP: 'Flush Fake-IP', tagClientSourceIPWithName: 'Tag Client Source IP With Name', diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts index d2ac2e16..b58485ce 100644 --- a/src/i18n/zh.ts +++ b/src/i18n/zh.ts @@ -57,7 +57,6 @@ export default { autoSwitchTheme: '自动切换主题', favDayTheme: '浅色主题偏好', favNightTheme: '深色主题偏好', - renderInTwoColumns: '双列渲染', updateGEODatabases: '更新 GEO 数据库', restartCore: '重启核心', upgradeCore: '更新核心', @@ -97,7 +96,7 @@ export default { active: '活动', closed: '已关闭', sort: '排序', - hideUnAvailableProxies: '隐藏不可用节点', + hideUnavailableProxies: '隐藏不可用节点', reloadConfig: '重载配置', flushFakeIP: '清空 Fake-IP', tagClientSourceIPWithName: '为客户端源 IP 地址添加名称标记', diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx index 3066ce7c..cadb5478 100644 --- a/src/pages/Proxies.tsx +++ b/src/pages/Proxies.tsx @@ -27,7 +27,6 @@ import { iconHeight, iconMarginRight, proxiesOrderingType, - renderProxiesInTwoColumns, useConnections, useProxies, } from '~/signals' @@ -174,14 +173,7 @@ export default () => {
-
+
{(proxyGroup) => { const sortedProxyNames = createMemo(() => @@ -195,7 +187,7 @@ export default () => { ) const title = ( - <> +
@@ -233,18 +225,21 @@ export default () => { />
-
- - {proxyGroup.type}{' '} - {proxyGroup.now?.length > 0 && - ` :: ${proxyGroup.now}`} - - +
+
+ {proxyGroup.type} + + 0}> + 
{` :: ${proxyGroup.now}`}
+ +
+ +
{byteSize( speedGroupByName()[proxyGroup.name] ?? 0, ).toString()} /s - +
@@ -253,7 +248,7 @@ export default () => { now={proxyGroup.now} /> - +
) return ( @@ -283,14 +278,7 @@ export default () => { -
+
{(proxyProvider) => { const sortedProxyNames = createMemo(() => @@ -305,6 +293,7 @@ export default () => {
{proxyProvider.name} +
{proxyProvider.proxies.length}
diff --git a/src/signals/config.ts b/src/signals/config.ts index 91135804..fdb67d15 100644 --- a/src/signals/config.ts +++ b/src/signals/config.ts @@ -31,12 +31,6 @@ export const [hideUnAvailableProxies, setHideUnAvailableProxies] = storage: localStorage, }) -export const [renderProxiesInTwoColumns, setRenderProxiesInTwoColumns] = - makePersisted(createSignal(true), { - name: 'renderProxiesInTwoColumns', - storage: localStorage, - }) - export const [urlForLatencyTest, setUrlForLatencyTest] = makePersisted( createSignal('https://www.gstatic.com/generate_204'), { name: 'urlForLatencyTest', storage: localStorage },