fix(overview): only enable flex-row layout on large screen

src/components/ProxyPreviewBar.tsx

@@ -10,6 +10,7 @@ export const ProxyPreviewBar = (props: {
   const latencyList = createMemo(() =>
     props.proxyNameList.map((name) => latencyMap()[name]),
   )
+
   const all = createMemo(() => latencyList().length)
   const good = createMemo(
     () =>
@@ -35,9 +36,7 @@ export const ProxyPreviewBar = (props: {
   const notConnected = createMemo(
     () =>
       latencyList().filter(
-        (latency) =>
+        (latency) => latency === latencyQualityMap().NOT_CONNECTED,
-          latency === latencyQualityMap().NOT_CONNECTED ||
-          typeof latency !== 'number',
       ).length,
   )
 
@@ -47,27 +46,27 @@ export const ProxyPreviewBar = (props: {
         <div
           class="h-2 bg-success"
           style={{
-            width: `${(good() * 100) / all()}%`, // cant use tw class cause dynamic classname wont import
+            width: `${(good() * 100) / all()}%`, // cant use tw class, otherwise dynamic classname won't be generated
           }}
-        ></div>
+        />
         <div
           class="h-2 bg-warning"
           style={{
             width: `${(middle() * 100) / all()}%`,
           }}
-        ></div>
+        />
         <div
           class="h-2 bg-error"
           style={{
             width: `${(slow() * 100) / all()}%`,
           }}
-        ></div>
+        />
         <div
           class="h-2 bg-neutral"
           style={{
             width: `${(notConnected() * 100) / all()}%`,
           }}
-        ></div>
+        />
       </div>
 
       <Latency name={props.now} />

src/components/ProxyPreviewDots.tsx

@@ -2,22 +2,27 @@ import { For } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { latencyQualityMap, useProxies } from '~/signals'
 
-const LatencyDots = (p: { latency: number | undefined; selected: boolean }) => {
+const LatencyDots = (props: {
-  let dotClassName = p.selected
+  latency: number | undefined
+  selected: boolean
+}) => {
+  let dotClassName = props.selected
     ? 'bg-white border-4 border-success'
     : 'bg-success'
 
   if (
-    typeof p.latency !== 'number' ||
+    typeof props.latency !== 'number' ||
-    p.latency === latencyQualityMap().NOT_CONNECTED
+    props.latency === latencyQualityMap().NOT_CONNECTED
   ) {
-    dotClassName = p.selected
+    dotClassName = props.selected
       ? 'bg-white border-4 border-neutral'
       : 'bg-neutral'
-  } else if (p.latency > latencyQualityMap().HIGH) {
+  } else if (props.latency > latencyQualityMap().HIGH) {
-    dotClassName = p.selected ? 'bg-white border-4 border-error' : 'bg-error'
+    dotClassName = props.selected
-  } else if (p.latency > latencyQualityMap().MEDIUM) {
+      ? 'bg-white border-4 border-error'
-    dotClassName = p.selected
+      : 'bg-error'
+  } else if (props.latency > latencyQualityMap().MEDIUM) {
+    dotClassName = props.selected
       ? 'bg-white border-4 border-warning'
       : 'bg-warning'
   }

src/pages/Config.tsx

@@ -133,7 +133,7 @@ const ConfigForm = () => {
   })
 
   const [updatingGEODatabases, setUpdatingGEODatabases] = createSignal(false)
-  const [upgraging, setUpgraging] = createSignal(false)
+  const [upgrading, setUpgrading] = createSignal(false)
   const [restarting, setRestarting] = createSignal(false)
 
   const onUpdateGEODatabases = async () => {
@@ -145,11 +145,11 @@ const ConfigForm = () => {
   }
 
   const onUpgrade = async () => {
-    setUpgraging(true)
+    setUpgrading(true)
     try {
       await request.post('upgrade')
     } catch {}
-    setUpgraging(false)
+    setUpgrading(false)
   }
 
   const onRestart = async () => {
@@ -190,7 +190,7 @@ const ConfigForm = () => {
           {t('restartCore')}
         </Button>
 
-        <Button loading={upgraging()} onClick={onUpgrade}>
+        <Button loading={upgrading()} onClick={onUpgrade}>
           {t('upgradeCore')}
         </Button>
       </div>

src/pages/Overview.tsx

@@ -36,7 +36,7 @@ export default () => {
   const [memories, setMemories] = createSignal<number[]>([])
 
   // https://github.com/apexcharts/apexcharts.js/blob/main/samples/source/line/realtime.xml
-  // TODO: need a better way
+  // TODO: needs a better way
   makeTimer(
     () => {
       setTraffics((traffics) => traffics.slice(-CHART_MAX_XAXIS))
@@ -152,7 +152,7 @@ export default () => {
         </TrafficWidget>
       </div>
 
-      <div class="rounded-box flex flex-col bg-base-300 sm:flex-row">
+      <div class="rounded-box flex flex-col bg-base-300 lg:flex-row">
         <div class="m-4 flex-1">
           <SolidApexCharts
             type="area"

src/pages/Rules.tsx

@@ -18,9 +18,7 @@ export default () => {
   const [maxRuleRender, setMaxRuleRender] = createSignal(100)
   const renderRules = createMemo(() => rules().slice(0, maxRuleRender()))
 
-  onMount(async () => {
+  onMount(updateRules)
-    updateRules()
-  })
 
   const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
     const el = getBtnElFromClickEvent(e)

src/pages/Setup.tsx

@@ -78,7 +78,7 @@ export default () => {
 
   const { form } = createForm<z.infer<typeof schema>>({
     extend: validator({ schema }),
-    onSubmit: onSubmit,
+    onSubmit,
   })
 
   const onRemove = (id: string) =>
@@ -88,14 +88,14 @@ export default () => {
     const query = new URLSearchParams(window.location.search)
 
     if (query.has('hostname')) {
-      onSubmit({
+      void onSubmit({
         url: `http://${query.get('hostname')}${
           query.get('port') && ':' + query.get('port')
         }`,
         secret: query.get('secret') ?? '',
       })
     } else {
-      onSubmit({
+      void onSubmit({
         url: 'http://127.0.0.1:9090',
         secret: '',
       })