From 7e31034e244e107533f2a09925dd13a76a8e4145 Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Mon, 9 Dec 2024 10:16:57 +0800
Subject: [PATCH] fix: respect the system's language settings

---
 src/components/connections/ConnectionCard.tsx | 10 +++++++++-
 src/store/settings.ts                         |  7 ++++++-
 src/views/ConnectionsPage.vue                 |  2 +-
 src/views/SetupPage.vue                       |  2 +-
 tailwind.config.ts                            |  9 ++-------
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/connections/ConnectionCard.tsx b/src/components/connections/ConnectionCard.tsx
index b5128928..62979885 100644
--- a/src/components/connections/ConnectionCard.tsx
+++ b/src/components/connections/ConnectionCard.tsx
@@ -15,6 +15,7 @@ import {
   InformationCircleIcon,
   XMarkIcon,
 } from '@heroicons/vue/24/outline'
+import { first, last } from 'lodash'
 import { twMerge } from 'tailwind-merge'
 import { defineComponent } from 'vue'
 
@@ -71,9 +72,16 @@ export default defineComponent<{
           </button>
         </div>
       )
+
+      const connChians = props.conn.chains
+      const fisrtChain = first(connChians)
+      const lastChain = last(connChians)
       const chians = (
         <span class="inline w-56 truncate text-sm">
-          {[...props.conn.chains].reverse().join('->')}
+          <span class="hidden sm:inline">{[...connChians].reverse().join('->')}</span>
+          <span class="inline sm:hidden">
+            {connChians.length > 1 ? [lastChain, fisrtChain].join(' =>> ') : fisrtChain}
+          </span>
         </span>
       )
       const rule = <span class="hidden text-sm tracking-tight xl:inline">{props.conn.rule}</span>
diff --git a/src/store/settings.ts b/src/store/settings.ts
index 4942bf21..8001e813 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -9,7 +9,12 @@ import { useStorage } from '@vueuse/core'
 
 // global
 export const theme = useStorage<string>('config/theme', 'default')
-export const language = useStorage<LANG>('config/language', LANG.EN_US)
+export const language = useStorage<LANG>(
+  'config/language',
+  Object.values(LANG).includes(navigator.language as LANG)
+    ? (navigator.language as LANG)
+    : LANG.EN_US,
+)
 export const isSiderbarCollapsed = useStorage('config/is-sidebar-collapsed', true)
 export const font = useStorage<FONTS>('config/font', FONTS.MI_SANS)
 
diff --git a/src/views/ConnectionsPage.vue b/src/views/ConnectionsPage.vue
index 6eaf6731..429bd74a 100644
--- a/src/views/ConnectionsPage.vue
+++ b/src/views/ConnectionsPage.vue
@@ -6,7 +6,7 @@
           {{ $t('noContent') }}
         </div>
       </template>
-      <div class="flex flex-col gap-[2px]">
+      <div class="flex flex-col gap-1">
         <ConnectionCard
           v-for="conn in renderConnections"
           :key="conn.id"
diff --git a/src/views/SetupPage.vue b/src/views/SetupPage.vue
index 5699083f..de2d1212 100644
--- a/src/views/SetupPage.vue
+++ b/src/views/SetupPage.vue
@@ -158,7 +158,7 @@ if (query.has('hostname')) {
         ? 'https'
         : window.location.protocol.replace(':', ''),
     host: query.get('hostname') as string,
-    port: Number(query.get('port')) as unknown as number,
+    port: Number(query.get('port')),
     password: query.get('secret') as string,
   })
 } else {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fd964c2f..2a51f1a1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,13 +17,8 @@ export default {
     },
     extend: {
       colors: {
-        ['low-latency']: 'rgb(181,196,177)',
-        ['medium-latency']: 'rgb(224, 200, 166)',
-        ['high-latency']: '#C68A8A',
-      },
-      backgroundColors: {
-        ['low-latency']: 'rgb(181,196,177)',
-        ['medium-latency']: 'rgb(224, 200, 166)',
+        ['low-latency']: 'rgb(181,216,177)',
+        ['medium-latency']: 'rgb(244, 210, 166)',
         ['high-latency']: '#C68A8A',
       },
       fontFamily: {