feat: refactor routing and endpoint checks across multiple pages

Author: kunish

eslint.config.mjs

@@ -4,7 +4,9 @@ import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
   {
-    ignores: ['dist'],
+    ignores: ['dist/**', 'node_modules/**'],
+  },
+  {
     settings: {
       'import/resolver': {
         typescript: {},

src/App.tsx

@@ -2,6 +2,7 @@ import { usePrefersDark } from '@solid-primitives/media'
 import type { ParentComponent } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Header } from '~/components'
+import { ROUTES } from '~/constants'
 import {
   MemoryData,
   TrafficData,
@@ -33,6 +34,7 @@ const ProtectedResources = () => {
 }
 
 export const App: ParentComponent = ({ children }) => {
+  const location = useLocation()
   const prefersDark = usePrefersDark()
 
   createEffect(() => {
@@ -45,6 +47,10 @@ export const App: ParentComponent = ({ children }) => {
     document.documentElement.setAttribute('data-theme', curTheme())
   })
 
+  // Route guard: redirect to setup if no endpoint configured
+  const isSetupPage = () => location.pathname === ROUTES.Setup
+  const needsRedirect = () => !endpoint() && !isSetupPage()
+
   return (
     <div
       ref={(el) => setRootElement(el)}
@@ -55,7 +61,14 @@ export const App: ParentComponent = ({ children }) => {
     >
       <Header />
 
-      <div class="flex-1 overflow-y-auto p-2 sm:p-4">{children}</div>
+      <div class="flex-1 overflow-y-auto p-2 sm:p-4">
+        <Show
+          when={!needsRedirect()}
+          fallback={<Navigate href={ROUTES.Setup} />}
+        >
+          {children}
+        </Show>
+      </div>
 
       <Show when={!!endpoint()}>
         <ProtectedResources />

src/main.tsx

@@ -2,6 +2,7 @@
 import '~/index.css'
 
 import { MetaProvider } from '@solidjs/meta'
+import type { RouteDefinition } from '@solidjs/router'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -12,30 +13,25 @@ import { App } from '~/App'
 import { ROUTES } from '~/constants'
 import { I18nProvider, locale } from '~/i18n'
 
-const Setup = lazy(() => import('~/pages/Setup'))
-const Overview = lazy(() => import('~/pages/Overview'))
-const Connections = lazy(() => import('~/pages/Connections'))
-const Logs = lazy(() => import('~/pages/Logs'))
-const Proxies = lazy(() => import('~/pages/Proxies'))
-const Rules = lazy(() => import('~/pages/Rules'))
-const Config = lazy(() => import('~/pages/Config'))
+const routes: RouteDefinition[] = [
+  { path: ROUTES.Setup, component: lazy(() => import('~/pages/Setup')) },
+  { path: ROUTES.Overview, component: lazy(() => import('~/pages/Overview')) },
+  { path: ROUTES.Proxies, component: lazy(() => import('~/pages/Proxies')) },
+  { path: ROUTES.Rules, component: lazy(() => import('~/pages/Rules')) },
+  { path: ROUTES.Conns, component: lazy(() => import('~/pages/Connections')) },
+  { path: ROUTES.Log, component: lazy(() => import('~/pages/Logs')) },
+  { path: ROUTES.Config, component: lazy(() => import('~/pages/Config')) },
+  // Fallback to overview for unknown routes
+  { path: '*', component: lazy(() => import('~/pages/Overview')) },
+]
 
 dayjs.extend(relativeTime)
 
 render(
   () => (
     <I18nProvider locale={locale()}>
       <MetaProvider>
-        <HashRouter root={App}>
-          <Route path={ROUTES.Setup} component={Setup} />
-          <Route path="*" component={Overview} />
-          <Route path={ROUTES.Overview} component={Overview} />
-          <Route path={ROUTES.Proxies} component={Proxies} />
-          <Route path={ROUTES.Rules} component={Rules} />
-          <Route path={ROUTES.Conns} component={Connections} />
-          <Route path={ROUTES.Log} component={Logs} />
-          <Route path={ROUTES.Config} component={Config} />
-        </HashRouter>
+        <HashRouter root={App}>{routes}</HashRouter>
       </MetaProvider>
 
       <Toaster position="bottom-center" />

src/pages/Config.tsx

@@ -557,14 +557,6 @@ const ConfigForXd = () => {
 }
 
 export default () => {
-  const navigate = useNavigate()
-
-  if (!endpoint()) {
-    navigate('/setup', { replace: true })
-
-    return null
-  }
-
   const [t] = useI18n()
 
   const frontendVersion = `v${import.meta.env.APP_VERSION}`

src/pages/Connections/Connections.tsx

@@ -6,7 +6,6 @@ import {
 import {
   connectionsTableColumnOrder,
   connectionsTableColumnVisibility,
-  endpoint,
   setConnectionsTableColumnOrder,
   setConnectionsTableColumnVisibility,
 } from '~/signals'
@@ -17,14 +16,6 @@ import { MobilePagination, DesktopPagination } from './ConnectionsPagination'
 import { useConnectionsTable } from './useConnectionsTable'
 
 export default () => {
-  const navigate = useNavigate()
-
-  if (!endpoint()) {
-    navigate('/setup', { replace: true })
-
-    return null
-  }
-
   const [t] = useI18n()
 
   let connectionsSettingsModalRef: HTMLDialogElement | undefined

src/pages/Logs.tsx

@@ -21,7 +21,7 @@ import { twMerge } from 'tailwind-merge'
 import { Button, DocumentTitle, LogsSettingsModal } from '~/components'
 import { LOG_LEVEL } from '~/constants'
 import { useI18n } from '~/i18n'
-import { endpoint, logsTableSize, tableSizeClassName, useLogs } from '~/signals'
+import { logsTableSize, tableSizeClassName, useLogs } from '~/signals'
 import { LogWithSeq } from '~/types'
 
 const fuzzyFilter: FilterFn<LogWithSeq> = (row, columnId, value, addMeta) => {
@@ -38,14 +38,6 @@ const fuzzyFilter: FilterFn<LogWithSeq> = (row, columnId, value, addMeta) => {
 }
 
 export default () => {
-  const navigate = useNavigate()
-
-  if (!endpoint()) {
-    navigate('/setup', { replace: true })
-
-    return null
-  }
-
   let logsSettingsModalRef: HTMLDialogElement | undefined
   const [t] = useI18n()
   const [globalFilter, setGlobalFilter] = createSignal('')
@@ -126,7 +118,7 @@ export default () => {
         <div class="join w-full">
           <input
             type="search"
-            class="input input-sm join-item flex-1 flex-shrink-0 input-primary"
+            class="input input-sm join-item flex-1 shrink-0 input-primary"
             placeholder={t('search')}
             onInput={(e) => setGlobalFilter(e.target.value)}
           />
@@ -197,7 +189,7 @@ export default () => {
             <tbody>
               <For each={table.getRowModel().rows}>
                 {(row) => (
-                  <tr class="hover:!bg-primary hover:text-primary-content">
+                  <tr class="hover:bg-primary! hover:text-primary-content">
                     <For each={row.getVisibleCells()}>
                       {(cell) => (
                         <td class="py-2">

src/pages/Overview.tsx

@@ -30,14 +30,6 @@ const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
 )
 
 export default () => {
-  const navigate = useNavigate()
-
-  if (!endpoint()) {
-    navigate('/setup', { replace: true })
-
-    return null
-  }
-
   const [t] = useI18n()
 
   // Chart refs for real-time updates

src/pages/Proxies.tsx

@@ -25,7 +25,6 @@ import {
 } from '~/helpers'
 import { useI18n } from '~/i18n'
 import {
-  endpoint,
   hideUnAvailableProxies,
   iconHeight,
   iconMarginRight,
@@ -40,14 +39,6 @@ enum ActiveTab {
 }
 
 export default () => {
-  const navigate = useNavigate()
-
-  if (!endpoint()) {
-    navigate('/setup', { replace: true })
-
-    return null
-  }
-
   let proxiesSettingsModalRef: HTMLDialogElement | undefined
 
   const [t] = useI18n()

src/pages/Rules.tsx

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge'
 import { Button, DocumentTitle } from '~/components'
 import { formatTimeFromNow, useStringBooleanMap } from '~/helpers'
 import { useI18n } from '~/i18n'
-import { endpoint, useRules } from '~/signals'
+import { useRules } from '~/signals'
 import { Rule, RuleProvider } from '~/types'
 
 enum ActiveTab {
@@ -14,14 +14,6 @@ enum ActiveTab {
 }
 
 export default () => {
-  const navigate = useNavigate()
-
-  if (!endpoint()) {
-    navigate('/setup', { replace: true })
-
-    return null
-  }
-
   const [t] = useI18n()
   const {
     rules,