feat: improve ui

Author: geekdada

src/App.tsx

@@ -122,7 +122,7 @@ const App: React.FC = () => {
         refreshWhenOffline: true,
       }}
     >
-      <Toaster position="bottom-right" reverseOrder={false} />
+      <Toaster position="top-right" reverseOrder={false} />
 
       <NetworkErrorModal
         reloadButton={isRunInSurge()}

src/components/BottomPanel.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { cn } from '@/utils/shadcn'
+
+const BottomPanel = ({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={cn('flex items-center border-t py-2 px-2', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default BottomPanel

src/components/CodeContent.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { css } from '@emotion/react'
+
+import { cn } from '@/utils/shadcn'
+
+type CodeContentProps = {
+  content?: string
+} & React.HTMLAttributes<HTMLPreElement>
+
+const CodeContent = ({ className, content, ...props }: CodeContentProps) => {
+  return (
+    <pre
+      className={cn(
+        'w-full font-mono text-muted-foreground bg-muted text-xs leading-tight p-3 whitespace-pre-wrap break-words',
+        className,
+      )}
+      css={css`
+        min-height: 7rem;
+      `}
+      {...props}
+    >
+      {content}
+    </pre>
+  )
+}
+
+export default CodeContent

src/components/Data/index.tsx

@@ -27,16 +27,8 @@ export const DataRow = styled.div``
 
 export const DataRowMain = styled.div`
   ${tw`flex items-center justify-between px-3 py-3 md:px-5 md:py-4 leading-normal`}
-
-  & > div:last-of-type {
-    ${tw``}
-  }
 `
 
 export const DataRowSub = styled.div`
   ${tw`flex items-center justify-between px-3 leading-normal text-xs lg:text-sm lg:leading-relaxed`}
-
-  & > div:last-of-type {
-    ${tw``}
-  }
 `

src/components/FullLoading/index.tsx

@@ -1,15 +1,10 @@
 import React from 'react'
-import { ReloadIcon } from '@radix-ui/react-icons'
 import tw from 'twin.macro'
 
 const FullLoadingWrapper = tw.div`fixed top-0 right-0 bottom-0 left-0 flex items-center justify-center`
 
 const FullLoading: React.FC = () => {
-  return (
-    <FullLoadingWrapper>
-      <ReloadIcon className="w-6 h-6 animate-spin" />
-    </FullLoadingWrapper>
-  )
+  return <FullLoadingWrapper></FullLoadingWrapper>
 }
 
 export default FullLoading

src/components/ListCell.tsx

@@ -41,4 +41,26 @@ const ListCell: React.FC<ListCellProps> = ({
   )
 }
 
-export default ListCell
+type ListFullHeightCellProps = {
+  children: React.ReactNode
+} & React.HTMLAttributes<HTMLDivElement>
+
+const ListFullHeightCell = ({
+  children,
+  className,
+  ...props
+}: ListFullHeightCellProps) => {
+  return (
+    <div
+      className={cn(
+        'fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center text-lg font-semibold text-gray-500',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { ListCell, ListFullHeightCell }

src/components/NewVersionAlert.tsx

@@ -23,6 +23,11 @@ const NewVersionAlert: React.FC = () => {
 
   useEffect(() => {
     const lastUsedVersion = store.get(LastUsedVersion)
+    const isSWEnabled = process.env.REACT_APP_USE_SW === 'true'
+
+    if (!isSWEnabled) {
+      return
+    }
 
     if (lastUsedVersion && !satisfies(currentVersion, `~${lastUsedVersion}`)) {
       setVersionUrl(

src/components/PageTitle/index.tsx

@@ -49,7 +49,7 @@ const PageTitle: React.FC<PageTitleProps> = (props) => {
         <div
           onClick={() => setIsAutoRefresh(!isAutoRefresh)}
           className={cn(
-            'relative bg-green-100 cursor-pointer w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-200 ease-in-out',
+            'relative bg-green-100 cursor-pointer w-7 h-7 rounded-full flex items-center justify-center transition-colors duration-200 ease-in-out',
             isAutoRefresh && 'bg-red-100',
           )}
           css={[

src/components/SWUpdateNotification.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { InfoIcon } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { TypographyP } from '@/components/ui/typography'
+
+const SWUpdateNotification = ({
+  registration,
+}: {
+  registration?: ServiceWorkerRegistration
+}) => {
+  const { t } = useTranslation()
+
+  const onClick = useCallback(() => {
+    if (registration) {
+      registration.waiting?.postMessage({ type: 'SKIP_WAITING' })
+    }
+
+    window.location.reload()
+  }, [registration])
+
+  return (
+    <div className="flex justify-center items-center gap-4 py-2">
+      <InfoIcon className="stroke-black/80 h-[4rem] w-[4rem]" />
+      <div className="space-y-3">
+        <TypographyP>{t('common.sw_updated')}</TypographyP>
+        <Button variant="secondary" onClick={onClick}>
+          {t('common.refresh')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default SWUpdateNotification

src/components/ui/switch.tsx

@@ -9,15 +9,15 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-switch data-[state=unchecked]:bg-input',
       className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+        'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
       )}
     />
   </SwitchPrimitives.Root>

src/i18n/en/translation.json

@@ -16,7 +16,9 @@
     "download": "Download",
     "dark": "Dark",
     "light": "Light",
-    "system": "Follow system"
+    "system": "Follow system",
+    "sw_updated": "Surge Web Dashboard has been updated, refresh page to use the new version.",
+    "refresh": "Refresh"
   },
   "tls_instruction": {
     "title": "Needed a certificate?",
@@ -169,9 +171,11 @@
     "waiting": "Waiting",
     "device_settings": "Device Settings",
     "view_requests": "View Requests",
-    "modify": "Modify"
+    "modify": "Modify",
+    "empty_list": "No Device"
   },
   "modules": {
+    "empty_list": "No Module"
   },
   "Submit": "Submit",
   "Clear": "Clear",

src/i18n/zh/translation.json

@@ -16,7 +16,9 @@
     "download": "下载",
     "dark": "深色",
     "light": "浅色",
-    "system": "跟随系统"
+    "system": "跟随系统",
+    "sw_updated": "Surge Web Dashboard 已更新，刷新页面以使用新版本。",
+    "refresh": "刷新"
   },
   "tls_instruction": {
     "title": "需要证书吗？",
@@ -169,9 +171,11 @@
     "waiting": "等待",
     "device_settings": "设备设定",
     "view_requests": "查看连接",
-    "modify": "修改"
+    "modify": "修改",
+    "empty_list": "暂无设备"
   },
   "modules": {
+    "empty_list": "暂无模块"
   },
   "Submit": "提交",
   "Clear": "清除",

src/index.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
+import { toast } from 'react-hot-toast'
 import ReactDOM from 'react-dom/client'
 
 import './styles/shadcn.css'
 import './styles/global.css'
+
+import SWUpdateNotification from '@/components/SWUpdateNotification'
+
 import App from './App'
 import AppContainer from './AppContainer'
 import * as serviceWorkerRegistration from './serviceWorkerRegistration'
@@ -22,7 +26,13 @@ if (process.env.REACT_APP_USE_SW === 'true') {
   // If you want your app to work offline and load faster, you can change
   // unregister() to register() below. Note this comes with some pitfalls.
   // Learn more about service workers: https://cra.link/PWA
-  serviceWorkerRegistration.register()
+  serviceWorkerRegistration.register({
+    onUpdate: (registration) => {
+      toast(() => <SWUpdateNotification registration={registration} />, {
+        duration: Number.POSITIVE_INFINITY,
+      })
+    },
+  })
 }
 
 if (!('scrollBehavior' in document.documentElement.style)) {

src/pages/Devices/index.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import ListCell from '@/components/ListCell'
+import { ListCell, ListFullHeightCell } from '@/components/ListCell'
 import PageContainer from '@/components/PageContainer'
 import PageTitle from '@/components/PageTitle'
 import { DevicesResult } from '@/types'
@@ -20,6 +20,16 @@ const Page = (): JSX.Element => {
     refreshInterval: isAutoRefresh ? 2000 : 0,
   })
 
+  const deviceList = devices?.devices.length ? (
+    devices.devices.map((device) => (
+      <ListCell key={device.identifier}>
+        <DeviceItem device={device} />
+      </ListCell>
+    ))
+  ) : (
+    <ListFullHeightCell>{t('devices.empty_list')}</ListFullHeightCell>
+  )
+
   return (
     <PageContainer>
       <PageTitle
@@ -30,12 +40,13 @@ const Page = (): JSX.Element => {
       />
 
       <div className="divide-y">
-        {devices?.devices &&
-          devices.devices.map((device) => (
-            <ListCell key={device.identifier}>
-              <DeviceItem device={device} />
-            </ListCell>
-          ))}
+        {!devices ? (
+          <ListFullHeightCell>
+            {t('common.is_loading') + '...'}
+          </ListFullHeightCell>
+        ) : (
+          deviceList
+        )}
       </div>
     </PageContainer>
   )

src/pages/Dns/index.tsx

@@ -8,7 +8,7 @@ import useSWR, { mutate } from 'swr'
 import tw from 'twin.macro'
 
 import FixedFullscreenContainer from '@/components/FixedFullscreenContainer'
-import ListCell from '@/components/ListCell'
+import { ListCell } from '@/components/ListCell'
 import PageTitle from '@/components/PageTitle'
 import { Button } from '@/components/ui/button'
 import { ButtonGroup } from '@/components/ui/button-group'

src/pages/Home/components/CapabilityTile.tsx

@@ -58,7 +58,6 @@ const CapabilityTile: React.FC<CapabilityTileProps> = ({
       description={descriptionKey ? t(`home.${descriptionKey}`) : undefined}
       switchElement={
         <Switch
-          className="dark:border-white/20"
           disabled={isLoading}
           checked={capability?.enabled}
           onCheckedChange={(newVal) => toggle(newVal)}

src/pages/Home/components/MenuTile.tsx

@@ -45,7 +45,7 @@ const MenuTile: React.FC<MenuTileProps> = (props) => {
       <CardContent className="px-4 md:px-6 py-4 gap-0 h-[7.6rem] lg:h-[9rem]">
         <div className="flex flex-col h-full justify-between gap-2 md:gap-4">
           {props.description ? (
-            <CardDescription className="text-xs sm:text-sm">
+            <CardDescription className="text-xs sm:text-sm line-clamp-3">
               {props.description}
             </CardDescription>
           ) : (

src/pages/Home/components/SetHostModal.tsx

@@ -11,6 +11,7 @@ import { Button } from '@/components/ui/button'
 import {
   Dialog,
   DialogContent,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -68,7 +69,7 @@ const SetHostModal: React.FC = () => {
           <DialogTitle>{t('landing.history')}</DialogTitle>
         </DialogHeader>
 
-        <div className="bg-gray-100 dark:bg-muted divide-y divide-gray-200 dark:divide-black/20 rounded-xl overflow-hidden">
+        <div className="bg-gray-100 dark:bg-muted border divide-y divide-gray-200 dark:divide-black/20 rounded-xl overflow-hidden">
           {existingProfiles.map((profile) => {
             return (
               <div
@@ -92,11 +93,11 @@ const SetHostModal: React.FC = () => {
           })}
         </div>
 
-        <div>
-          <Button onClick={() => onAddNewProfile()}>
+        <DialogFooter>
+          <Button className="mt-3" onClick={() => onAddNewProfile()}>
             {t('landing.add_new_host')}
           </Button>
-        </div>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   )