Fix: global mode should show all groups

src/containers/Connections/index.tsx

@@ -209,12 +209,6 @@ export default function Connections () {
         selectedID: '',
         connection: {} as Partial<Connection>,
     })
-    function handleConnectionSelected (id: string) {
-        setDrawerState({
-            visible: true,
-            selectedID: id,
-        })
-    }
     function handleConnectionClosed () {
         setDrawerState(d => { d.connection.completed = true })
         client.closeConnection(drawerState.selectedID)
@@ -234,21 +228,8 @@ export default function Connections () {
         }
     }, [data, drawerState.selectedID, latestConntion, setDrawerState])
 
-    return (
+    const scrolled = useMemo(() => scrollX > 0, [scrollX])
-        <div className="page">
+    const headers = useMemo(() => headerGroup.headers.map((column, idx) => {
-            <Header title={t('title')}>
-                <span className="cursor-default flex-1 connections-filter">
-                    {`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`}
-                </span>
-                <Checkbox className="connections-filter" checked={save} onChange={toggleSave}>{t('keepClosed')}</Checkbox>
-                <Icon className="connections-filter dangerous" onClick={show} type="close-all" size={20} />
-            </Header>
-            { devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> }
-            <Card ref={cardRef} className="connections-card relative">
-                <div {...getTableProps()} className="flex flex-col flex-1 w-full overflow-auto" style={{ flexBasis: 0 }} ref={tableRef}>
-                    <div {...headerGroup.getHeaderGroupProps()} className="connections-header">
-                        {
-                            headerGroup.headers.map((column, idx) => {
         const realColumn = column as unknown as TableColumn<FormatConnection>
         const id = realColumn.id
         return (
@@ -256,7 +237,8 @@ export default function Connections () {
                 {...realColumn.getHeaderProps()}
                 className={classnames('connections-th', {
                     resizing: realColumn.isResizing,
-                                            fixed: scrollX > 0 && realColumn.id === Columns.Host,
+                    fixed: realColumn.id === Columns.Host,
+                    shadow: scrolled && realColumn.id === Columns.Host,
                 })}
                 key={id}>
                 <div {...realColumn.getSortByToggleProps()}>
@@ -272,26 +254,26 @@ export default function Connections () {
                 }
             </div>
         )
-                            })
+    }), [headerGroup.headers, scrolled])
-                        }
-                    </div>
 
-                    <div {...getTableBodyProps()} className="flex-1">
+    const content = useMemo(
-                        {
+        () => rows.map(row => {
-                            rows.map(row => {
             prepareRow(row)
             return (
                 <div
                     {...row.getRowProps()}
                     className="cursor-default connections-item select-none"
                     key={row.original.id}
-                                        onClick={() => handleConnectionSelected(row.original.id)}>
+                    onClick={() => setDrawerState({ visible: true, selectedID: row.original.id })}>
                     {
                         row.cells.map(cell => {
                             const classname = classnames(
                                 'connections-block',
                                 { 'text-center': shouldCenter.has(cell.column.id), completed: row.original.completed },
-                                                    { fixed: scrollX > 0 && cell.column.id === Columns.Host },
+                                {
+                                    fixed: cell.column.id === Columns.Host,
+                                    shadow: scrollX > 0 && cell.column.id === Columns.Host,
+                                },
                             )
                             return (
                                 <div {...cell.getCellProps()} className={classname} key={cell.column.id}>
@@ -302,8 +284,28 @@ export default function Connections () {
                     }
                 </div>
             )
-                            })
+        }),
-                        }
+        [prepareRow, renderCell, rows, scrollX, setDrawerState],
+    )
+
+    return (
+        <div className="page">
+            <Header title={t('title')}>
+                <span className="cursor-default flex-1 connections-filter">
+                    {`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`}
+                </span>
+                <Checkbox className="connections-filter" checked={save} onChange={toggleSave}>{t('keepClosed')}</Checkbox>
+                <Icon className="connections-filter dangerous" onClick={show} type="close-all" size={20} />
+            </Header>
+            { devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> }
+            <Card ref={cardRef} className="connections-card relative">
+                <div {...getTableProps()} className="flex flex-col flex-1 w-full overflow-auto" style={{ flexBasis: 0 }} ref={tableRef}>
+                    <div {...headerGroup.getHeaderGroupProps()} className="connections-header">
+                        { headers }
+                    </div>
+
+                    <div {...getTableBodyProps()} className="flex-1">
+                        { content }
                     </div>
                 </div>
             </Card>

src/containers/Connections/style.scss

@@ -28,9 +28,11 @@
             position: sticky !important;
             left: 0;
             z-index: 99;
+            &.shadow {
                 box-shadow: inset -9px 0 8px -14px $color-black;
             }
         }
+    }
 
     .connections-resizer {
         $padding: 8px;
@@ -92,9 +94,11 @@
             left: 0;
             z-index: 998;
             background-color: $color-white;
+            &.shadow {
                 box-shadow: inset -9px 0 8px -14px $color-black;
             }
         }
+    }
 }
 
 .connections-filter {

src/containers/Proxies/components/Group/style.scss

@@ -5,14 +5,6 @@
     color: $color-black-light;
 }
 
-.proxies-group-item {
-    border-bottom: 1px solid $color-gray;
-
-    &:last-child {
-        border-bottom: none;
-    }
-}
-
 @media (max-width: 768px) {
     .proxy-group {
         flex-direction: column;

src/containers/Proxies/index.tsx

@@ -35,7 +35,7 @@ function ProxyGroups () {
     const { t } = translation('Proxies')
 
     const list = useMemo(
-        () => general.mode === 'global' ? [global] : groups,
+        () => general.mode === 'global' ? [global, ...groups] : groups,
         [general, groups, global],
     )
 
@@ -52,10 +52,10 @@ function ProxyGroups () {
                     </Checkbox>
                 </Header>
                 <Card className="my-2.5 p-0 md:my-4">
-                    <ul className="list-none">
+                    <ul className="list-none divide-y divide-gray-300">
                         {
                             list.map(p => (
-                                <li className="proxies-group-item" key={p.name}>
+                                <li key={p.name}>
                                     <Group config={p} />
                                 </li>
                             ))

src/lib/helper.ts

@@ -1,3 +1,5 @@
+import { floor } from 'lodash-es'
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export function noop () {}
 
@@ -12,11 +14,6 @@ export function partition<T> (arr: T[], fn: (arg: T) => boolean): [T[], T[]] {
 
 export function formatTraffic (num: number) {
     const s = ['B', 'KB', 'MB', 'GB', 'TB']
-    let idx = 0
+    const exp = Math.floor(Math.log(num || 1) / Math.log(1024))
-    while (~~(num / 1024) && idx < s.length) {
+    return `${floor(num / Math.pow(1024, exp), 2).toFixed(2)} ${s?.[exp] ?? ''}`
-        num /= 1024
-        idx++
-    }
-
-    return `${idx === 0 ? num : num.toFixed(2)} ${s[idx]}`
 }