feat: display current selected endpoint at the bottom of the overview page

src/components/Latency.tsx

@@ -7,9 +7,7 @@ export const Latency = (props: { name?: string }) => {
   const [t] = useI18n()
   const { latencyMap } = useProxies()
   const [textClassName, setTextClassName] = createSignal('')
-  const latency = createMemo(() => {
+  const latency = createMemo(() => latencyMap()[props.name!])
-    return latencyMap()[props.name!]
-  })
 
   createEffect(() => {
     setTextClassName('text-success')

src/pages/Config.tsx

@@ -35,7 +35,6 @@ import { isSingBox } from '~/helpers'
 import { locale, setLocale, useI18n } from '~/i18n'
 import {
   autoSwitchTheme,
-  endpoint,
   favDayTheme,
   favNightTheme,
   setAutoSwitchTheme,
@@ -381,6 +380,36 @@ const ConfigForXd = () => {
 
   return (
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div class="flex flex-col gap-2">
+        <div class="flex flex-col items-center">
+          <ConfigTitle>{t('useTwemoji')}</ConfigTitle>
+
+          <input
+            type="checkbox"
+            class="toggle"
+            checked={useTwemoji()}
+            onChange={(e) => setUseTwemoji(e.target.checked)}
+          />
+        </div>
+
+        <div class="flex flex-col">
+          <ConfigTitle>{t('switchLanguage')}</ConfigTitle>
+
+          <select
+            class="select select-bordered"
+            onChange={(e) => setLocale(e.target.value as LANG)}
+          >
+            <For each={languages}>
+              {(lang) => (
+                <option selected={locale() === lang.value} value={lang.value}>
+                  {lang.label()}
+                </option>
+              )}
+            </For>
+          </select>
+        </div>
+      </div>
+
       <div class="flex flex-col gap-2">
         <div class="flex flex-col items-center">
           <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
@@ -429,36 +458,6 @@ const ConfigForXd = () => {
           </div>
         </Show>
       </div>
-
-      <div class="flex flex-col gap-2">
-        <div class="flex flex-col items-center">
-          <ConfigTitle>{t('useTwemoji')}</ConfigTitle>
-
-          <input
-            type="checkbox"
-            class="toggle"
-            checked={useTwemoji()}
-            onChange={(e) => setUseTwemoji(e.target.checked)}
-          />
-        </div>
-
-        <div class="flex flex-col">
-          <ConfigTitle>{t('switchLanguage')}</ConfigTitle>
-
-          <select
-            class="select select-bordered"
-            onChange={(e) => setLocale(e.target.value as LANG)}
-          >
-            <For each={languages}>
-              {(lang) => (
-                <option selected={locale() === lang.value} value={lang.value}>
-                  {lang.label()}
-                </option>
-              )}
-            </For>
-          </select>
-        </div>
-      </div>
     </div>
   )
 }
@@ -477,23 +476,19 @@ const Versions: Component<{ backendVersion: Accessor<string> }> = ({
   })
 
   return (
-    <div class="flex flex-col gap-2">
+    <div class="grid grid-cols-2 gap-4">
-      <div class="grid grid-cols-2 gap-4">
+      <kbd class="kbd">{import.meta.env.version}</kbd>
-        <kbd class="kbd">{import.meta.env.version}</kbd>
 
-        <div class="relative">
+      <div class="relative">
-          <Show when={isUpdateAvailable()}>
+        <Show when={isUpdateAvailable()}>
-            <span class="absolute -right-1 -top-1 flex h-3 w-3">
+          <span class="absolute -right-1 -top-1 flex h-3 w-3">
-              <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-75" />
+            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-info opacity-75" />
-              <span class="inline-flex h-3 w-3 rounded-full bg-info" />
+            <span class="inline-flex h-3 w-3 rounded-full bg-info" />
-            </span>
+          </span>
-          </Show>
+        </Show>
 
-          <kbd class="kbd w-full">{backendVersion()}</kbd>
+        <kbd class="kbd w-full">{backendVersion()}</kbd>
-        </div>
       </div>
-
-      <h1 class="text-center text-lg font-bold">{endpoint()?.url}</h1>
     </div>
   )
 }

src/pages/Overview.tsx

@@ -14,7 +14,7 @@ import {
 } from 'solid-js'
 import { CHART_MAX_XAXIS, DEFAULT_CHART_OPTIONS } from '~/constants'
 import { useI18n } from '~/i18n'
-import { latestConnectionMsg, useWsRequest } from '~/signals'
+import { endpoint, latestConnectionMsg, useWsRequest } from '~/signals'
 
 const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
   <div class="stat flex-1 place-items-center">
@@ -130,6 +130,10 @@ export default () => {
           />
         </div>
       </div>
+
+      <footer class="footer rounded-box mx-auto mt-4 block bg-neutral p-4 text-center text-lg font-bold text-neutral-content">
+        {endpoint()?.url}
+      </footer>
     </div>
   )
 }