diff --git a/src/components/ConnectionsSettingsModal.tsx b/src/components/ConnectionsSettingsModal.tsx index f7b16e8..cff9e5d 100644 --- a/src/components/ConnectionsSettingsModal.tsx +++ b/src/components/ConnectionsSettingsModal.tsx @@ -31,8 +31,10 @@ import { allConnections, clientSourceIPTags, connectionsTableSize, + quickFilterRegex, setClientSourceIPTags, setConnectionsTableSize, + setQuickFilterRegex, } from '~/signals' import { ConnectionsTableColumnOrder, @@ -205,6 +207,16 @@ export const ConnectionsSettingsModal = (props: { } >
+
+ {t('quickFilter')} + setQuickFilterRegex(e.target.value)} + value={quickFilterRegex()} + > +
+
{t('tableSize')} diff --git a/src/i18n/en.ts b/src/i18n/en.ts index 3b2396b..2ad2929 100644 --- a/src/i18n/en.ts +++ b/src/i18n/en.ts @@ -112,4 +112,5 @@ export default { en: 'English', zh: 'Chinese', port: '{{ name }} Port', + quickFilter: 'Quick Filter', } diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts index b3473ab..d56150a 100644 --- a/src/i18n/zh.ts +++ b/src/i18n/zh.ts @@ -114,4 +114,5 @@ export default { en: '英文', zh: '中文', port: '{{ name }} 端口', + quickFilter: '快速过滤', } satisfies Dict diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx index 153708a..141cad2 100644 --- a/src/pages/Config.tsx +++ b/src/pages/Config.tsx @@ -244,7 +244,7 @@ const ConfigForm: Component<{ backendVersion: Accessor }> = ({ id="enable-tun-device" type="checkbox" class="toggle" - checked={configsData()?.tun.enable} + checked={configsData()?.tun?.enable} onChange={(e) => void updateBackendConfigAPI( 'tun', @@ -263,7 +263,7 @@ const ConfigForm: Component<{ backendVersion: Accessor }> = ({ void updateBackendConfigAPI( 'tun', diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx index eddf3bf..653b332 100644 --- a/src/pages/Connections.tsx +++ b/src/pages/Connections.tsx @@ -45,6 +45,7 @@ import { connectionsTableSize, endpoint, formatTimeFromNow, + quickFilterRegex, setConnectionsTableColumnOrder, setConnectionsTableColumnVisibility, tableSizeClassName, @@ -89,7 +90,13 @@ export default () => { useConnections() const [globalFilter, setGlobalFilter] = createSignal('') - + const [enableQuickFilter, setEnableQuickFilter] = makePersisted( + createSignal(false), + { + name: 'enableQuickFilter', + storage: localStorage, + }, + ) const [selectedConnectionID, setSelectedConnectionID] = createSignal() const columns: ColumnDef[] = [ @@ -283,9 +290,24 @@ export default () => { }, }, get data() { - return activeTab() === ActiveTab.activeConnections - ? activeConnections() - : closedConnections() + const connections = + activeTab() === ActiveTab.activeConnections + ? activeConnections() + : closedConnections() + + connections.sort((a, b) => { + return a.id.localeCompare(b.id) + }) + + if (!enableQuickFilter()) { + return connections + } + + const reg = new RegExp(quickFilterRegex(), 'i') + + return connections.filter( + (connection) => !reg.test(connection.chains.join('')), + ) }, sortDescFirst: true, enableHiding: true, @@ -353,6 +375,16 @@ export default () => {
+
+ + setEnableQuickFilter(e.target.checked)} + /> +
+