From ad9a6addf4198e0904d7873d79ff6118bfca85ef Mon Sep 17 00:00:00 2001
From: Dreamacro <8615343+Dreamacro@users.noreply.github.com>
Date: Tue, 25 Jan 2022 22:49:35 +0800
Subject: [PATCH] Fix: global mode should show all groups

---
 src/containers/Connections/index.tsx          | 122 +++++++++---------
 src/containers/Connections/style.scss         |   8 +-
 .../Proxies/components/Group/style.scss       |   8 --
 src/containers/Proxies/index.tsx              |   6 +-
 src/lib/helper.ts                             |  11 +-
 5 files changed, 75 insertions(+), 80 deletions(-)

diff --git a/src/containers/Connections/index.tsx b/src/containers/Connections/index.tsx
index 2090c6f..e4d5117 100644
--- a/src/containers/Connections/index.tsx
+++ b/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,6 +228,66 @@ export default function Connections () {
         }
     }, [data, drawerState.selectedID, latestConntion, setDrawerState])
 
+    const scrolled = useMemo(() => scrollX > 0, [scrollX])
+    const headers = useMemo(() => headerGroup.headers.map((column, idx) => {
+        const realColumn = column as unknown as TableColumn<FormatConnection>
+        const id = realColumn.id
+        return (
+            <div
+                {...realColumn.getHeaderProps()}
+                className={classnames('connections-th', {
+                    resizing: realColumn.isResizing,
+                    fixed: realColumn.id === Columns.Host,
+                    shadow: scrolled && realColumn.id === Columns.Host,
+                })}
+                key={id}>
+                <div {...realColumn.getSortByToggleProps()}>
+                    {column.render('Header')}
+                    {
+                        realColumn.isSorted
+                            ? realColumn.isSortedDesc ? ' ↓' : ' ↑'
+                            : null
+                    }
+                </div>
+                { idx !== headerGroup.headers.length - 1 &&
+                    <div {...realColumn.getResizerProps()} className="connections-resizer" />
+                }
+            </div>
+        )
+    }), [headerGroup.headers, scrolled])
+
+    const content = useMemo(
+        () => rows.map(row => {
+            prepareRow(row)
+            return (
+                <div
+                    {...row.getRowProps()}
+                    className="cursor-default connections-item select-none"
+                    key={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: cell.column.id === Columns.Host,
+                                    shadow: scrollX > 0 && cell.column.id === Columns.Host,
+                                },
+                            )
+                            return (
+                                <div {...cell.getCellProps()} className={classname} key={cell.column.id}>
+                                    { renderCell(cell)}
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+            )
+        }),
+        [prepareRow, renderCell, rows, scrollX, setDrawerState],
+    )
+
     return (
         <div className="page">
             <Header title={t('title')}>
@@ -247,63 +301,11 @@ export default function Connections () {
             <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 (
-                                    <div
-                                        {...realColumn.getHeaderProps()}
-                                        className={classnames('connections-th', {
-                                            resizing: realColumn.isResizing,
-                                            fixed: scrollX > 0 && realColumn.id === Columns.Host,
-                                        })}
-                                        key={id}>
-                                        <div {...realColumn.getSortByToggleProps()}>
-                                            {column.render('Header')}
-                                            {
-                                                realColumn.isSorted
-                                                    ? realColumn.isSortedDesc ? ' ↓' : ' ↑'
-                                                    : null
-                                            }
-                                        </div>
-                                        { idx !== headerGroup.headers.length - 1 &&
-                                            <div {...realColumn.getResizerProps()} className="connections-resizer" />
-                                        }
-                                    </div>
-                                )
-                            })
-                        }
+                        { headers }
                     </div>
 
                     <div {...getTableBodyProps()} className="flex-1">
-                        {
-                            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)}>
-                                        {
-                                            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 },
-                                                )
-                                                return (
-                                                    <div {...cell.getCellProps()} className={classname} key={cell.column.id}>
-                                                        { renderCell(cell)}
-                                                    </div>
-                                                )
-                                            })
-                                        }
-                                    </div>
-                                )
-                            })
-                        }
+                        { content }
                     </div>
                 </div>
             </Card>
diff --git a/src/containers/Connections/style.scss b/src/containers/Connections/style.scss
index 75027a0..8655d1f 100644
--- a/src/containers/Connections/style.scss
+++ b/src/containers/Connections/style.scss
@@ -28,7 +28,9 @@
             position: sticky !important;
             left: 0;
             z-index: 99;
-            box-shadow: inset -9px 0 8px -14px $color-black;
+            &.shadow {
+                box-shadow: inset -9px 0 8px -14px $color-black;
+            }
         }
     }
 
@@ -92,7 +94,9 @@
             left: 0;
             z-index: 998;
             background-color: $color-white;
-            box-shadow: inset -9px 0 8px -14px $color-black;
+            &.shadow {
+                box-shadow: inset -9px 0 8px -14px $color-black;
+            }
         }
     }
 }
diff --git a/src/containers/Proxies/components/Group/style.scss b/src/containers/Proxies/components/Group/style.scss
index bcc2de7..7f0a69a 100644
--- a/src/containers/Proxies/components/Group/style.scss
+++ b/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;
diff --git a/src/containers/Proxies/index.tsx b/src/containers/Proxies/index.tsx
index 3fc97c9..135fbc9 100644
--- a/src/containers/Proxies/index.tsx
+++ b/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>
                             ))
diff --git a/src/lib/helper.ts b/src/lib/helper.ts
index 1c0c352..459b651 100644
--- a/src/lib/helper.ts
+++ b/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
-    while (~~(num / 1024) && idx < s.length) {
-        num /= 1024
-        idx++
-    }
-
-    return `${idx === 0 ? num : num.toFixed(2)} ${s[idx]}`
+    const exp = Math.floor(Math.log(num || 1) / Math.log(1024))
+    return `${floor(num / Math.pow(1024, exp), 2).toFixed(2)} ${s?.[exp] ?? ''}`
 }