feat: minor improvements

src/components/Header.tsx

@@ -11,7 +11,6 @@ import {
   IconSettings,
 } from '@tabler/icons-solidjs'
 import { For, ParentComponent, Show, createSignal } from 'solid-js'
-import { twMerge } from 'tailwind-merge'
 import { LogoText } from '~/components'
 import { ROUTES, themes } from '~/constants'
 import { setCurTheme } from '~/signals'
@@ -44,7 +43,7 @@ const ThemeSwitcher = () => (
     <div class="drawer-side">
       <label for="themes" class="drawer-overlay" />
 
-      <ul class="menu rounded-l-box gap-2 bg-base-300 p-2 shadow">
+      <ul class="menu rounded-l-box gap-2 bg-base-300 p-2">
         <For each={themes}>
           {(theme) => (
             <li
@@ -101,9 +100,9 @@ export const Header = () => {
   const [openedDrawer, setOpenedDrawer] = createSignal(false)
 
   return (
-    <ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
+    <ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4 shadow-lg">
       <div class="navbar-start gap-4">
-        <div class={twMerge('drawer w-auto lg:hidden', '')}>
+        <div class="drawer w-auto lg:hidden">
           <input
             id="navs"
             type="checkbox"
@@ -121,7 +120,7 @@ export const Header = () => {
           <div class="drawer-side">
             <label for="navs" class="drawer-overlay" />
 
-            <ul class="menu rounded-r-box min-h-full w-2/5 gap-2 bg-base-300 pt-20 shadow">
+            <ul class="menu rounded-r-box min-h-full w-2/5 gap-2 bg-base-300 pt-20">
               <For each={navs()}>
                 {({ href, name }) => (
                   <li onClick={() => setOpenedDrawer(false)}>

src/components/ProxyNodeCard.tsx

@@ -24,7 +24,7 @@ export const ProxyNodeCard = (props: {
   return (
     <div
       class={twMerge(
-        'card card-bordered tooltip-bottom card-compact flex gap-1 border-neutral-focus bg-neutral p-3 text-neutral-content sm:tooltip',
+        'card card-bordered tooltip-bottom card-compact flex gap-1 border-neutral-focus bg-neutral p-3 text-neutral-content shadow-lg sm:tooltip',
         isSelected && 'border-primary bg-primary-content text-primary',
         onClick && 'cursor-pointer',
       )}

src/index.css

@@ -12,31 +12,32 @@
 
 :root {
   scrollbar-width: thin;
-  scrollbar-color: hsl(var(--p)) transparent;
+  scrollbar-color: transparent transparent;
 }
 
 ::-webkit-scrollbar {
   background: transparent;
+  display: none;
 }
 
 ::-webkit-scrollbar:vertical {
-  width: 0;
+  width: 6px;
 }
 
 ::-webkit-scrollbar:horizontal {
-  height: 0;
+  height: 6px;
 }
 
 @media (width >= 640px) {
+  :root {
+    scrollbar-color: hsl(var(--p)) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    display: block;
+  }
+
   ::-webkit-scrollbar-thumb {
     @apply rounded-box bg-primary;
   }
-
-  ::-webkit-scrollbar:vertical {
-    width: 6px;
-  }
-
-  ::-webkit-scrollbar:horizontal {
-    height: 6px;
-  }
 }

src/pages/Config.tsx

@@ -47,7 +47,7 @@ import {
   useRequest,
   useTwemoji,
 } from '~/signals'
-import type { DNSQuery, Config as IConfig } from '~/types'
+import type { BackendVersion, DNSQuery, Config as IConfig } from '~/types'
 
 const dnsQueryFormSchema = z.object({
   name: z.string(),
@@ -85,7 +85,11 @@ const DNSQueryForm = () => {
   return (
     <div class="flex flex-col">
       <form use:form={form} class="flex flex-col gap-2 sm:flex-row">
-        <input name="name" class="input input-bordered w-full sm:flex-1" />
+        <input
+          type="search"
+          name="name"
+          class="input input-bordered w-full sm:flex-1"
+        />
 
         <div class="flex items-center gap-2">
           <select name="type" class="select select-bordered">
@@ -424,6 +428,25 @@ const ConfigForXd = () => {
   )
 }
 
+const Versions = () => {
+  const request = useRequest()
+
+  const [backendVersion, setBackendVersion] = createSignal('')
+
+  onMount(async () => {
+    const { version } = await request.get('version').json<BackendVersion>()
+
+    setBackendVersion(version)
+  })
+
+  return (
+    <div class="flex gap-4">
+      <kbd class="kbd">{import.meta.env.version}</kbd>
+      <kbd class="kbd">{backendVersion()}</kbd>
+    </div>
+  )
+}
+
 export default () => {
   return (
     <div class="flex flex-col gap-4">
@@ -431,7 +454,7 @@ export default () => {
       <ConfigForm />
       <ConfigForXd />
 
-      <kbd class="kbd">{import.meta.env.version}</kbd>
+      <Versions />
     </div>
   )
 }

src/pages/Connections.tsx

@@ -330,6 +330,7 @@ export default () => {
 
         <div class="flex w-full items-center gap-2 md:flex-1">
           <input
+            type="search"
             class="input input-primary input-sm flex-1 sm:input-md"
             placeholder={t('search')}
             onInput={(e) => setSearch(e.target.value)}

src/pages/Logs.tsx

@@ -80,6 +80,7 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-4 p-1">
       <input
+        type="search"
         class="input input-primary flex-shrink-0"
         placeholder={t('search')}
         onInput={(e) => setSearch(e.target.value)}

src/types/index.d.ts

@@ -169,3 +169,8 @@ export type DNSQuery = {
     type: number
   }[]
 }
+
+export type BackendVersion = {
+  meta: boolean
+  version: string
+}