feat: format IPv6 and adjust style (#1562)

Author: Plutonium141

src/helpers/global.ts

@@ -1,6 +1,16 @@
 export const transformEndpointURL = (url: string) =>
   /^https?:\/\//.test(url) ? url : `${window.location.protocol}//${url}`
 
+export const formatIPv6 = (ip: string) => {
+  const regexr = /:{1,2}/
+
+  if (regexr.test(ip)) {
+    return `[${ip}]`
+  } else {
+    return ip
+  }
+}
+
 export const useStringBooleanMap = () => {
   const [map, setMap] = createSignal<Record<string, boolean>>({})
   const set = (name: string, value: boolean) => {

src/pages/Connections.tsx

@@ -1,6 +1,7 @@
 import { writeClipboard } from '@solid-primitives/clipboard'
 import { makePersisted } from '@solid-primitives/storage'
 import {
+  IconChevronRight,
   IconInfoSmall,
   IconPlayerPause,
   IconPlayerPlay,
@@ -37,7 +38,7 @@ import {
   DocumentTitle,
 } from '~/components'
 import { CONNECTIONS_TABLE_ACCESSOR_KEY } from '~/constants'
-import { formatTimeFromNow } from '~/helpers'
+import { formatIPv6, formatTimeFromNow } from '~/helpers'
 import { useI18n } from '~/i18n'
 import {
   allConnections,
@@ -167,7 +168,7 @@ export default () => {
         `${
           original.metadata.host
             ? original.metadata.host
-            : original.metadata.destinationIP
+            : formatIPv6(original.metadata.destinationIP)
         }:${original.metadata.destinationPort}`,
     },
     {
@@ -181,12 +182,23 @@ export default () => {
       accessorFn: (original) =>
         !original.rulePayload
           ? original.rule
-          : `${original.rule} :: ${original.rulePayload}`,
+          : `${original.rule} : ${original.rulePayload}`,
     },
     {
       header: () => t('chains'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Chains,
-      accessorFn: (original) => original.chains.slice().reverse().join(' :: '),
+      cell: ({ row }) => (
+        <For each={row.original.chains.slice().reverse()}>
+          {(name, index) => (
+            <>
+              <Show when={index()}>
+                <IconChevronRight class="inline-block" size={18} />
+              </Show>
+              <span class="align-middle">{name}</span>
+            </>
+          )}
+        </For>
+      ),
     },
     {
       header: () => t('connectTime'),