feat: Optimize UI

Author: geekdada

package.json

@@ -49,7 +49,7 @@
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@reduxjs/toolkit": "^1.9.5",
@@ -70,7 +70,6 @@
     "@types/react-collapse": "^5.0.0",
     "@types/react-dom": "^18.2.7",
     "@types/react-helmet": "^6.1.6",
-    "@types/react-router-dom": "^5.1.5",
     "@types/react-virtualized": "^9.21.22",
     "@types/semver": "^7.5.0",
     "@types/uuid": "^9.0.2",

public/index.html

@@ -12,6 +12,8 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon-152x152.png" sizes="152x152">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon-180x180.png" sizes="180x180">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-status-bar-style" content="dark-content">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="dark-content">
     <meta name="format-detection" content="telephone=no">

src/App.tsx

@@ -1,30 +1,14 @@
-import React, {
-  lazy,
-  Suspense,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Toaster, toast } from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
-import {
-  Navigate,
-  Route,
-  Routes,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 import { SWRConfig } from 'swr'
 
-import FullLoading from '@/components/FullLoading'
 import NetworkErrorModal from '@/components/NetworkErrorModal'
 import NewVersionAlert from '@/components/NewVersionAlert'
 import PageLayout from '@/components/PageLayout'
 import RunInSurge from '@/components/RunInSurge'
 import useTrafficUpdater from '@/hooks/useTrafficUpdater'
-import HomePage from '@/pages/Home'
-import { LandingPage } from '@/pages/Landing'
 import {
   usePlatformVersion,
   useAppDispatch,
@@ -36,17 +20,6 @@ import { profileActions } from '@/store/slices/profile'
 import { isRunInSurge } from '@/utils'
 import { httpClient } from '@/utils/fetcher'
 
-const PoliciesPage = lazy(() => import('@/pages/Policies'))
-const RequestsPage = lazy(() => import('@/pages/Requests'))
-const TrafficPage = lazy(() => import('@/pages/Traffic'))
-const ModulesPage = lazy(() => import('@/pages/Modules'))
-const ScriptingPage = lazy(() => import('@/pages/Scripting'))
-const EvaluatePage = lazy(() => import('@/pages/Scripting/Evaluate'))
-const DnsPage = lazy(() => import('@/pages/Dns'))
-const DevicesPage = lazy(() => import('@/pages/Devices'))
-const CurrentProfilePage = lazy(() => import('@/pages/Profiles/Current'))
-const ManageProfilesPage = lazy(() => import('@/pages/Profiles/Manage'))
-
 const App: React.FC = () => {
   const { t } = useTranslation()
   const [isNetworkModalOpen, setIsNetworkModalOpen] = useState(false)
@@ -136,23 +109,7 @@ const App: React.FC = () => {
       </RunInSurge>
 
       <PageLayout>
-        <Suspense fallback={<FullLoading />}>
-          <Routes>
-            <Route path="/" element={<LandingPage />} />
-            <Route path="/home" element={<HomePage />} />
-            <Route path="/policies" element={<PoliciesPage />} />
-            <Route path="/requests" element={<RequestsPage />} />
-            <Route path="/traffic" element={<TrafficPage />} />
-            <Route path="/modules" element={<ModulesPage />} />
-            <Route path="/scripting" element={<ScriptingPage />} />
-            <Route path="/scripting/evaluate" element={<EvaluatePage />} />
-            <Route path="/dns" element={<DnsPage />} />
-            <Route path="/devices" element={<DevicesPage />} />
-            <Route path="/profiles" element={<ManageProfilesPage />} />
-            <Route path="/profiles/current" element={<CurrentProfilePage />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
-        </Suspense>
+        <Outlet />
       </PageLayout>
     </SWRConfig>
   )

src/AppContainer.tsx

@@ -1,43 +1,23 @@
-import React, { ReactNode, Suspense } from 'react'
+import React, { ReactNode } from 'react'
 import { HelmetProvider } from 'react-helmet-async'
 import { Provider as ReduxProvider } from 'react-redux'
-import {
-  BrowserRouter,
-  BrowserRouterProps,
-  HashRouter,
-  HashRouterProps,
-} from 'react-router-dom'
 
 import Bootstrap from '@/bootstrap'
 import { ThemeProvider } from '@/components/ThemeProvider'
 import { UIProvider } from '@/components/UIProvider'
 import { store } from '@/store'
 
-const ReactRouter: React.FC<BrowserRouterProps | HashRouterProps> = (args) => {
-  return process.env.REACT_APP_HASH_ROUTER === 'true' ? (
-    <HashRouter {...(args as HashRouterProps)}>{args.children}</HashRouter>
-  ) : (
-    <BrowserRouter {...(args as BrowserRouterProps)}>
-      {args.children}
-    </BrowserRouter>
-  )
-}
-
 const AppContainer: React.FC<{ children: ReactNode }> = ({ children }) => {
   return (
-    <Suspense fallback={<div />}>
-      <ReduxProvider store={store}>
-        <HelmetProvider>
-          <ReactRouter>
-            <ThemeProvider>
-              <UIProvider>
-                <Bootstrap>{children}</Bootstrap>
-              </UIProvider>
-            </ThemeProvider>
-          </ReactRouter>
-        </HelmetProvider>
-      </ReduxProvider>
-    </Suspense>
+    <ReduxProvider store={store}>
+      <HelmetProvider>
+        <ThemeProvider>
+          <UIProvider>
+            <Bootstrap>{children}</Bootstrap>
+          </UIProvider>
+        </ThemeProvider>
+      </HelmetProvider>
+    </ReduxProvider>
   )
 }
 

src/components/Data/DataRowMain.tsx

@@ -39,9 +39,9 @@ export const DataRowMain = ({
   return (
     <div
       className={cn(
-        'flex items-center justify-between px-3 py-3 md:px-5 md:py-4 leading-normal text-sm',
+        'flex items-center justify-between px-3 py-3 md:px-5 md:py-4 leading-normal text-sm gap-3',
         isClickable &&
-          'gap-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-black/20',
+          'cursor-pointer hover:bg-gray-100 dark:hover:bg-black/20',
         destructive && 'text-destructive dark:text-red-500',
         disabled && 'cursor-not-allowed text-gray-400 dark:text-gray-600',
         responsiveFont && 'lg:text-base',

src/components/ErrorBoundary.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { useRouteError } from 'react-router-dom'
+
+export default function ErrorBoundary() {
+  const error = useRouteError()
+
+  console.error(error)
+
+  return <div>Dang!</div>
+}
+
+ErrorBoundary.displayName = 'ErrorBoundary'
+
+export { ErrorBoundary }

src/components/FixedFullscreenContainer.tsx

@@ -15,14 +15,16 @@ const FixedFullscreenContainer: React.FC<{
 
   return (
     <div
-      className={cn(
-        'absolute top-0 right-0 bottom-0 left-0 h-full overflow-hidden',
-      )}
+      className={cn('absolute top-0 bottom-0 h-full overflow-hidden')}
       css={[
         offsetBottom &&
           css`
             padding-bottom: env(safe-area-inset-bottom);
           `,
+        css`
+          left: 1px;
+          right: 1px;
+        `,
       ]}
     >
       <div className="w-full h-full flex flex-col">{props.children}</div>

src/components/FullLoading/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-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></FullLoadingWrapper>
+  return (
+    <div className="fixed top-0 right-0 bottom-0 left-0 flex items-center justify-center"></div>
+  )
 }
 
 export default FullLoading

src/components/PageLayout/index.tsx

@@ -1,12 +1,19 @@
 import React from 'react'
 
+import FixedFullscreenContainer from '@/components/FixedFullscreenContainer'
+import PageContainer from '@/components/PageContainer'
+import { useRouteOptions } from '@/router'
 import { cn } from '@/utils/shadcn'
 
 const PageLayout: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   children,
   className,
   ...props
 }) => {
+  const routeOptions = useRouteOptions()
+  const isFullscreen = routeOptions?.fullscreen ?? false
+  const isBottomSafeAreaShown = routeOptions?.bottomSafeArea ?? true
+
   return (
     <div
       className={cn(
@@ -17,7 +24,13 @@ const PageLayout: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
     >
       <div className="flex flex-1 relative max-w-4xl w-full bg-background">
         <div className="w-full border-l border-r border-gray-200 dark:border-gray-800">
-          {children}
+          {isFullscreen ? (
+            <FixedFullscreenContainer offsetBottom={isBottomSafeAreaShown}>
+              {children}
+            </FixedFullscreenContainer>
+          ) : (
+            <PageContainer>{children}</PageContainer>
+          )}
         </div>
       </div>
     </div>

src/components/VerticalSafeArea.tsx

@@ -4,7 +4,7 @@ import { css } from '@emotion/react'
 export const BottomSafeArea = () => {
   return (
     <div
-      className="flex flex-1 sm:hidden"
+      className="flex sm:hidden"
       css={css`
         height: 0;
         padding-bottom: env(safe-area-inset-bottom, 0px);

src/i18n/en/translation.json

@@ -99,6 +99,7 @@
     "completed": "Completed",
     "rule_evaluating": "Rule Evaluating",
     "dns_lookup": "DNS Lookup",
+    "hostname": "Hostname",
     "establishing_connection": "Establishing Connection",
     "general_tab": "General",
     "request_tab": "Request",

src/i18n/zh/translation.json

@@ -99,6 +99,7 @@
     "completed": "已完成",
     "rule_evaluating": "解析规则",
     "dns_lookup": "解析域名",
+    "hostname": "主机名",
     "establishing_connection": "建立连接",
     "general_tab": "一般",
     "request_tab": "请求",

src/index.tsx

@@ -6,19 +6,17 @@ import './styles/shadcn.css'
 import './styles/global.css'
 
 import SWUpdateNotification from '@/components/SWUpdateNotification'
+import { RouterProvider } from '@/router'
 
-import App from './App'
-import AppContainer from './AppContainer'
+import routes from './routes'
 import * as serviceWorkerRegistration from './serviceWorkerRegistration'
 import './i18n'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(
   <React.StrictMode>
-    <AppContainer>
-      <App />
-    </AppContainer>
+    <RouterProvider value={routes}></RouterProvider>
   </React.StrictMode>,
 )
 

src/pages/Devices/components/DeviceSettingsModal.tsx

@@ -11,6 +11,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import {
   Dialog,
   DialogContent,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
@@ -23,6 +24,7 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
+import { Switch } from '@/components/ui/switch'
 import { DHCPDevice } from '@/types'
 import fetcher from '@/utils/fetcher'
 
@@ -176,7 +178,7 @@ const DeviceSettingsModal = ({
               render={({ field }) => (
                 <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                   <FormControl>
-                    <Checkbox
+                    <Switch
                       disabled={isLoading}
                       checked={field.value}
                       onCheckedChange={(checked) => field.onChange(checked)}
@@ -187,15 +189,15 @@ const DeviceSettingsModal = ({
               )}
             />
 
-            <div>
+            <DialogFooter>
               <Button
                 isLoading={isLoading}
                 type="submit"
                 loadingLabel={t('common.is_loading')}
               >
                 {t('common.save')}
               </Button>
-            </div>
+            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

src/pages/Devices/index.tsx

@@ -3,15 +3,14 @@ import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import { ListCell, ListFullHeightCell } from '@/components/ListCell'
-import PageContainer from '@/components/PageContainer'
 import PageTitle from '@/components/PageTitle'
 import { DevicesResult } from '@/types'
 import fetcher from '@/utils/fetcher'
 import withProfile from '@/utils/with-profile'
 
 import DeviceItem from './components/DeviceItem'
 
-const Page = (): JSX.Element => {
+const ComponentBase = (): JSX.Element => {
   const { t } = useTranslation()
   const [isAutoRefresh, setIsAutoRefresh] = useState<boolean>(false)
   const { data: devices } = useSWR<DevicesResult>('/devices', fetcher, {
@@ -31,7 +30,7 @@ const Page = (): JSX.Element => {
   )
 
   return (
-    <PageContainer>
+    <>
       <PageTitle
         title={t('home.device_management')}
         hasAutoRefresh={true}
@@ -48,8 +47,12 @@ const Page = (): JSX.Element => {
           deviceList
         )}
       </div>
-    </PageContainer>
+    </>
   )
 }
 
-export default withProfile(Page)
+export const Component = withProfile(ComponentBase)
+
+Component.displayName = 'DevicesPage'
+
+export { ErrorBoundary } from '@/components/ErrorBoundary'