fix: respect the system's language settings

Zephyruso · Dec 9, 2024 · 7e31034 · 7e31034
1 parent 3f560ac
commit 7e31034
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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: {